/* ==========================================================================
   Rilance Professional – Termékek oldal (böngésző + felugró ablak)
   Csak a /termekek/ oldalon töltődik be; a színek a style.css :root blokkjából jönnek.
   ========================================================================== */

.shop{padding-bottom:clamp(80px,9vw,140px)}

/* ---------- felső sáv: morzsa + keresés ---------- */
.shop__bar{scroll-margin-top:calc(var(--nav-h) + 8px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;
  padding:0 0 22px;border-bottom:1px solid var(--line);
}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:44px;
  font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.crumbs a,.crumbs span{color:var(--ink-soft);text-decoration:none}
.crumbs a{padding:10px 0;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
@media (hover:hover){ .crumbs a:hover{color:var(--ink);border-color:var(--gold)} }
.crumbs [aria-current]{color:var(--gold-deep)}
.crumbs i{font-style:normal;color:var(--gold);letter-spacing:0}

.search{position:relative;flex:0 1 340px;min-width:min(100%,240px)}
.search input{
  width:100%;height:48px;padding:0 48px 0 22px;border-radius:999px;
  background:var(--paper);border:1px solid var(--gold-deep);color:var(--ink);
  font:400 14.5px/1 "Montserrat",sans-serif;letter-spacing:.02em;
  -webkit-appearance:none;appearance:none;transition:box-shadow .3s ease,background .3s ease;
}
.search input::placeholder{color:#8b8174;letter-spacing:.04em}
.search input:focus{outline:none;background:#fff;box-shadow:0 0 0 3px rgba(180,138,67,.28)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search svg{position:absolute;right:18px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;
  stroke:var(--gold-deep);fill:none;stroke-width:1.6;stroke-linecap:round}
.search button{
  position:absolute;right:6px;top:6px;width:36px;height:36px;border-radius:50%;border:0;background:var(--cream-deep);
  color:var(--ink);cursor:pointer;display:none;align-items:center;justify-content:center;
}
.search.has-q button{display:inline-flex}
.search.has-q svg{display:none}
.search button svg{display:block;position:static;margin:0;width:14px;height:14px;stroke:currentColor;pointer-events:none}

/* ---------- nézet-fejléc ---------- */
.shop__head{padding:clamp(34px,4.4vw,58px) 0 clamp(28px,3.6vw,46px)}
.shop__head h2{font-weight:300;font-size:clamp(30px,3.6vw,50px);line-height:1.12;letter-spacing:-.006em;outline:none}
.shop__head h2 small{display:block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.shop__lead{margin-top:16px;max-width:42em;color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.75}

/* ---------- rács: szinte résmentes csempék, a szöveg a csempén ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.tile{position:relative;list-style:none;overflow:hidden;animation:tileIn .7s var(--ease) both;animation-delay:calc(min(var(--i,0),14) * 50ms)}
@keyframes tileIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .tile{animation:none} }

.tile__link{display:block;position:relative;color:inherit;text-decoration:none}
.tile__fig{position:relative}
.tile__media{
  position:relative;aspect-ratio:10/11;overflow:hidden;
  background:
    radial-gradient(ellipse 52% 7% at 50% 76%,rgba(43,38,34,.12),transparent 70%),
    linear-gradient(165deg,var(--paper) 0%,var(--cream-deep) 100%);
}
.tile__media img{position:absolute;display:block;object-fit:contain;object-position:50% 100%;height:auto;max-width:none;transition:transform .7s var(--ease)}
/* termék: egy kép, alul hely a szövegnek */
.tile--product .tile__media img{left:9%;right:9%;top:7%;width:82%;height:66%;bottom:auto;filter:drop-shadow(0 14px 14px rgba(43,38,34,.12))}
/* csoport: legfeljebb három kép egymásra csúszva */
.stack img{bottom:27%;width:auto;height:56%;filter:drop-shadow(0 12px 12px rgba(43,38,34,.14))}
.stack--1 img{left:50%;transform:translateX(-50%);height:62%;max-width:70%}
.stack--2 img:nth-child(1){left:8%;max-width:46%}
.stack--2 img:nth-child(2){right:8%;max-width:46%;height:60%}
.stack--3 img:nth-child(1){left:5%;max-width:32%;height:50%}
.stack--3 img:nth-child(2){left:50%;transform:translateX(-50%);height:62%;max-width:38%;z-index:2}
.stack--3 img:nth-child(3){right:5%;max-width:32%;height:50%}
.tile__soon-mark{position:absolute;left:50%;top:38%;width:30%;height:auto;transform:translate(-50%,-50%);fill:var(--gold);opacity:.22}
@media (hover:hover){
  .tile__link:hover .tile__media img:not(.cover){transform:translateY(-6px)}
  .tile__link:hover .tile__media.stack--1 img,.tile__link:hover .tile__media.stack--3 img:nth-child(2){transform:translate(-50%,-6px)}
  .tile__link:hover .tile__title{color:var(--gold-deep)}
  .tile__link:hover .tile__media img.cover{transform:scale(1.03)}
}
/* arany keret hoverre / fókuszra – a csempén belül */
.tile__link::after{content:"";position:absolute;inset:0;border:1px solid var(--gold);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:4}
@media (hover:hover){ .tile__link:hover::after{opacity:.9} }
.tile__link:focus-visible::after{opacity:1;border-width:2px}
.tile__link:focus-visible{outline:none}
.badge{
  position:absolute;left:50%;top:62%;transform:translateX(-50%);z-index:3;
  padding:9px 20px;border-radius:999px;border:1px solid var(--gold-deep);background:var(--paper);
  font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap;
}

/* szöveg a csempén, bal alul */
.tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(16px,1.9vw,28px);pointer-events:none}
.tile__eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}
.tile__title{font-weight:500;font-size:clamp(16px,1.55vw,23px);line-height:1.2;letter-spacing:.03em;text-transform:uppercase;transition:color .3s ease}
.tile__sub{display:block;margin-top:5px;font-size:13px;letter-spacing:.06em;color:var(--ink-soft)}
.tile--product .tile__title{font-size:clamp(14px,1.2vw,17px);line-height:1.3;letter-spacing:.03em}
.tile--product .tile__eyebrow{margin-bottom:4px;font-size:10px;letter-spacing:.2em}
.tile__sizes{display:block;margin-top:5px;font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft)}
/* katalógus-blokk a kategóriák alatt */
.katbox{margin-top:clamp(56px,7vw,96px)}
.katbox__title{margin-top:clamp(30px,3.6vw,46px);font-weight:300;font-size:clamp(30px,3.6vw,50px);line-height:1.12;letter-spacing:-.006em}
.katbox__lead{margin-top:16px;max-width:42em;color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.75}
.katbox__cta{margin-top:clamp(24px,2.6vw,32px)}
.katbox[hidden]{display:none}

/* gomb a tile alatt (hajfestékek) */
.btn--sm{padding:12px 22px;font-size:11px;letter-spacing:.18em}

.note{margin-top:12px;padding:12px 16px;border-left:2px solid var(--gold);background:var(--paper);
  font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.note[hidden]{display:none}

/* üres / hamarosan állapot */
.empty{max-width:640px;margin:clamp(10px,2vw,30px) auto 0;text-align:center;padding:clamp(40px,6vw,80px) 0}
.empty .mono{width:60px;height:69px;fill:var(--gold);display:block;margin:0 auto 30px}
.empty p{color:var(--ink-soft);font-size:clamp(16.5px,1.4vw,19px);line-height:1.8}
.empty .btn{margin-top:34px}
.empty[hidden]{display:none}

/* statikus tartalék (JavaScript nélkül; kereső-barát teljes lista) */
.catalog{margin-top:48px}
.catalog h2{font-weight:300;font-size:30px;margin:46px 0 10px}
.catalog h3{font-weight:500;font-size:22px;margin:34px 0 8px}
.catalog h4{font-weight:600;font-size:17px;margin:22px 0 4px}
.catalog article{display:grid;grid-template-columns:110px 1fr;gap:6px 22px;margin:14px 0;padding-top:14px;border-top:1px solid var(--line)}
.catalog article img{grid-row:span 4;width:110px;height:auto}
.catalog article h4,.catalog article p,.catalog article ul{grid-column:2;margin:0}
.catalog ul{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--ink-soft);font-size:14px}
.catalog p{color:var(--ink-soft)}
.js .catalog{display:none}

/* ---------- felugró ablak ---------- */
html.pm-open{overflow:hidden}
.pm{
  border:0;padding:0;margin:auto;color:var(--ink);background:var(--paper);
  width:min(1060px,calc(100% - 56px));max-height:calc(100dvh - 56px);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.55);
  overflow:hidden;
}
.pm[open]{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);animation:pmIn .45s var(--ease) both}
@keyframes pmIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.pm::backdrop{background:rgba(35,31,27,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:bdIn .4s ease both}
@keyframes bdIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .pm[open],.pm::backdrop{animation:none} }
.pm__media{
  position:relative;min-height:420px;min-width:0;overflow:hidden;container-type:size;
  background:
    radial-gradient(ellipse 56% 7% at 50% 90%,rgba(43,38,34,.16),transparent 72%),
    linear-gradient(165deg,var(--paper) 0%,var(--cream-deep) 100%);
}
.pm__slides{
  position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.pm__slides::-webkit-scrollbar{display:none}
.pm__slide{
  flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;align-items:flex-end;justify-content:center;padding:clamp(28px,4vw,56px);
}
.pm__slide img{display:block;max-width:100%;max-height:min(62dvh,560px);width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 20px 20px rgba(43,38,34,.16));margin-bottom:5%}
.pm__slide--video{padding:0;align-items:stretch;background:#1a1714}
.pm__slide--video video{display:block;width:100%;height:100%;object-fit:contain;background:#1a1714}
.pm__nav{
  position:absolute;top:50%;z-index:4;width:44px;height:44px;margin-top:-22px;border-radius:50%;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(251,248,242,.92);border:1px solid var(--gold-deep);color:var(--ink);
  transition:background .3s ease,color .3s ease,opacity .3s ease;
}
.pm__nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pm__nav--prev{left:14px}.pm__nav--next{right:14px}
.pm__nav:disabled{opacity:0;pointer-events:none}
@media (hover:hover){ .pm__nav:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)} }
.pm__nav:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pm--multi .pm__nav{display:inline-flex}
.pm__dots{position:absolute;left:0;right:0;bottom:16px;z-index:4;display:none;justify-content:center;gap:4px}
.pm--multi .pm__dots{display:flex}
.pm__dot{width:26px;height:26px;border:0;background:none;cursor:pointer;position:relative;padding:0}
.pm__dot::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:transparent;border:1px solid var(--gold-deep);transition:background .3s ease,transform .3s ease}
.pm__dot.on::after{background:var(--gold-deep);transform:scale(1.15)}
.pm__body{padding:clamp(34px,4vw,56px);overflow-y:auto;max-height:calc(100dvh - 56px);overscroll-behavior:contain}
.pm__body .eyebrow{margin-bottom:16px;padding-right:56px}
.pm__body h2{font-weight:300;font-size:clamp(26px,2.7vw,38px);line-height:1.15;letter-spacing:-.006em}
.pm__body .gold-rule{margin:24px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:22px}
.chips li{padding:7px 15px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;letter-spacing:.06em;color:var(--ink)}
.pm__desc{color:var(--ink-soft);font-size:clamp(15.5px,1.15vw,17px);line-height:1.85}
.pm__actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:32px}
.pm__actions .note{flex-basis:100%;margin-top:0}
.pm__fine{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.7;color:#8b8174}
.pm__close{
  position:absolute;top:16px;right:16px;z-index:5;width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--cream);border:1px solid var(--gold-deep);color:var(--ink);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.pm__close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
@media (hover:hover){ .pm__close:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)} }
.pm__close:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ---------- reszponzív ---------- */
@media (max-width:899px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm{width:100%;height:100dvh;max-height:100dvh;max-width:none;margin:0}
  .pm[open]{display:block;overflow-y:auto;overscroll-behavior:contain}
  .pm__media{min-height:0;height:min(46dvh,420px)}
  .pm__slide{padding:28px 24px 34px}
  .pm__slide img{max-height:100%}
  .pm__nav{width:40px;height:40px;margin-top:-20px}
  .pm__nav--prev{left:8px}.pm__nav--next{right:8px}
  .pm__body{max-height:none;overflow:visible;padding:30px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px))}
  .pm__close{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:14px}
}
/* telefon: a kategóriák egy oszlopban, nagy csempékkel */
@media (max-width:599px){
  .grid--cat{grid-template-columns:minmax(0,1fr)}
  .grid--cat .tile__media{aspect-ratio:5/4}
  .tile__title{font-size:15px}
  .tile--product .tile__title{font-size:12.5px}
  .tile--product .tile__eyebrow{display:none}
  .tile__sub,.tile__sizes{font-size:11px}
  .tile__cap{padding:12px}
  .tile--product .tile__media img{top:5%;height:54%}
  .tile__action .btn--sm{padding:8px 12px;letter-spacing:.12em;font-size:10px}
  .badge{padding:8px 16px;font-size:10.5px}
  .shop__bar{padding-bottom:16px}
  .search{flex-basis:100%}
}

.pm__body:focus{outline:none}

/* saját teljes borítókép (kategória / család) */
.tile__media img.cover{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;
  filter:none;transform:none;left:0;right:0;top:0;bottom:0;opacity:0;transition:opacity .6s ease;z-index:1}
.tile__media img.cover.on{opacity:1}
.tile__media.has-photo .tile__soon-mark{display:none}
.tile__media .badge{z-index:3}
.tile__media.has-photo.stack img:not(.cover){visibility:hidden}

/* videó-jelvény a termékcsempén */
.tile__play{position:absolute;right:12px;top:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(251,248,242,.94);border:1px solid var(--gold-deep);display:flex;align-items:center;justify-content:center}
.tile__play svg{width:18px;height:18px;fill:var(--gold-deep)}

/* életkép-sáv: teljes szélességű, résmentes, közvetlenül a lábléc fölött */
.shop.shop--life{padding-bottom:clamp(64px,7.5vw,112px)}
.lifestyle{width:100%;margin:0;padding:0}
.lifestyle[hidden]{display:none}
.lifestyle ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0}
.life__item{position:relative;aspect-ratio:1.22/1;overflow:hidden;list-style:none;background:linear-gradient(165deg,var(--paper),var(--cream-deep))}
.life__item:nth-child(even){background:linear-gradient(165deg,var(--cream-deep),var(--sand))}
.life__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.life__mark{width:16%;height:auto;fill:var(--gold);opacity:.26}
.life__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.life__item.has-photo img{opacity:1}
.life__item.has-photo .life__ph{display:none}
@media (max-width:759px){
  .lifestyle ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .life__item{aspect-ratio:1/1}
  .life__item:nth-child(2),.life__item:nth-child(3){background:linear-gradient(165deg,var(--cream-deep),var(--sand))}
  .life__item:nth-child(4){background:linear-gradient(165deg,var(--paper),var(--cream-deep))}
}

/* felugró ablak: kiszerelések + Elérhető színek egy sorban */
.pm__sizerow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:22px}
.pm__sizerow .chips{margin-bottom:0}
.pm__sizerow .note{flex-basis:100%;margin-top:0}
.pm__sizerow[hidden]{display:none}

/* képes csempéken a kis felirat jobban olvasható */
.tile:has(.has-photo) .tile__eyebrow{color:#6e5322;text-shadow:0 0 10px rgba(251,243,226,.85),0 0 3px rgba(251,243,226,.6)}
.tile:has(.has-photo) .tile__sub{color:#3d352d}

/* felugró ablak: termékfotó teljes képként, színskála fehér alapon */
.pm__slide--photo{padding:0}
.pm__slide--photo img{margin:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none}
.pm__slide--chart{padding:18px 18px 40px;background:#fff}
.pm__slide--chart img{max-height:100%;margin:0;filter:none}

/* felugró ablak: a termék alja pontosan a „talaj"-árnyékra ül, a teteje soha nem lóg ki */
.pm__slide{padding-bottom:calc(10cqh + 3px)}
.pm__slide img{max-height:calc(90cqh - 3px - clamp(28px,4vw,56px));margin-bottom:0}
.pm__slide--photo{padding:0}
.pm__slide--photo img{max-height:none}
.pm__slide--chart{padding:18px 18px 40px}
.pm__slide--chart img{max-height:100%}
@media (max-width:899px){
  .pm__slide{padding:28px 24px 34px}
  .pm__slide img{max-height:100%}
  .pm__slide--photo{padding:0}
  .pm__slide--photo img{max-height:none}
  .pm__slide--chart{padding:14px 14px 38px}
}

/* 1200×1500-as sablonkép (.cv): a termék alja a vászon 80%-ánál, ez kerül a csempén a felirat fölé, a pop-upban a talaj-árnyékra */
.tile--product .tile__media img.cv{left:0;right:0;margin:0 auto;top:1%;width:auto;height:90%;max-width:none}
@media (max-width:599px){ .tile--product .tile__media img.cv{top:2%;height:80%} }
.pm__slide img.cv{flex:none;width:auto;height:80cqh;max-width:none;max-height:none;margin-bottom:-16cqh}
@media (max-width:899px){ .pm__slide:not(.pm__slide--photo):not(.pm__slide--chart):not(.pm__slide--video){padding:28px 24px calc(10cqh + 3px)} .pm__slide img.cv{max-height:none} }

/* WordPress: a blokk-elrendezés ne bontsa meg a felugró ablak középre igazítását */
:root dialog.pm{margin:auto}

.shop__ui{display:none}
.js .shop__ui{display:block}