/* VarioGlass 2026 – a varioglass.hu megjelenése szerint; mobil-először; minden szín, betű és méret tokenből (→ docs/spec/07, 3.1). */
@font-face{font-family:"Alte Haas Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/alte-haas-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Alte Haas Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/alte-haas-grotesk-700.woff2) format("woff2")}
/* egységes betűméret-skála: minden méret ebből (12 / 13 / 15 / 18 / 22 / 30 / 44 px) */
:root{--fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:18px;--fs-lg:22px;--fs-xl:30px;--fs-hero:44px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 8px)}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:1.6;color:var(--color-text,#696969);background:var(--color-bg);overflow-x:clip}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--color-ink);text-underline-offset:3px}
a:hover{color:var(--color-accent)}
h1,h2,h3{font-family:var(--font-heading);font-weight:700;color:var(--color-ink);line-height:1.25;margin:0 0 .5em}
h1{font-size:24px}
h2{font-size:20px}
h3{font-size:var(--fs-md)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--color-accent-strong);outline-offset:2px}
.container{width:100%;max-width:calc(var(--container-max) + 32px);margin:0 auto;padding:0 16px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--color-ink);color:var(--color-bg);padding:8px 12px;z-index:10}
.skip:focus{left:8px}
.muted{color:var(--color-muted)}
.small{font-size:var(--fs-sm)}
.lead{font-size:var(--fs-md);color:var(--color-muted)}
.env-banner{background:var(--color-surface);border-bottom:1px solid var(--color-line);text-align:center;font-size:var(--fs-xs);padding:4px 16px}
.env-banner.preview{background:var(--color-accent);color:var(--color-accent-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 26px;border-radius:var(--radius-base);border:1px solid var(--color-ink);background:var(--color-ink);color:#fff;font:inherit;font-size:var(--fs-base);font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.btn-secondary{background:transparent;color:var(--color-ink)}
.btn-secondary:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink)}
.btn-buy{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.btn-buy:hover{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
input,select,textarea{font:inherit;color:var(--color-ink);width:100%;min-height:46px;padding:10px 14px;border:1px solid #d6d6d6;border-radius:var(--radius-base);background:var(--color-bg)}
textarea{min-height:110px}
label.field{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:var(--fs-sm);color:var(--color-ink)}
label.check{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:4px 0}
label.check input{width:22px;min-height:22px;height:22px;margin-top:2px;flex:none}
fieldset{border:0;padding:0;margin:0 0 20px}
legend{font-weight:700;margin-bottom:8px}
.field-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.alert{border-left:4px solid var(--color-accent);background:var(--color-surface);padding:12px 16px;border-radius:var(--radius-card,6px);margin:12px 0}
.alert-error{border-left-color:var(--color-sale);background:#fbeaea}
.alert ul{margin:6px 0 0;padding-left:18px}
.hp{position:absolute;left:-5000px}
/* fejléc: mobilon hamburger | középre zárt logó | ikonok; asztali gépen egy sor a 990 px-en belül: logó | menü | ikonok.
   Ragadós (sticky): görgetéskor végig a lap tetején marad; a --header-h a magassága (horgonyok, ragadós oszlopok). */
:root{--header-h:73px}
.site-header{background:var(--color-bg);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--color-line)}
.header-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px}
.logo{justify-self:center}
.logo img{height:56px;width:auto}
.header-icons{justify-self:end;display:flex;gap:6px;align-items:center}
.icon-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;position:relative}
.icon-link img{width:22px;height:22px}
.cart-count:not(:empty){position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--color-ink);color:#fff;font-size:var(--fs-xs);line-height:18px;text-align:center}
.nav-drawer{justify-self:start}
.nav-drawer summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center}
.nav-drawer summary::-webkit-details-marker{display:none}
.burger{display:flex;flex-direction:column;gap:6px;width:24px}
.burger i{display:block;height:1.5px;background:var(--color-ink)}
.burger i:nth-child(2){width:70%}
.drawer-panel{position:absolute;left:0;right:0;top:100%;background:var(--color-bg);border-top:1px solid var(--color-line);box-shadow:0 12px 24px rgba(0,0,0,.08);max-height:80vh;overflow:auto;padding:8px 20px 20px}
.drawer-panel ul{list-style:none;margin:0;padding:0}
.drawer-panel li{border-bottom:1px solid var(--color-line)}
.drawer-panel a,.drawer-panel summary{display:block;padding:12px 0;min-height:44px;text-decoration:none;color:var(--color-ink);font-weight:400;cursor:pointer}
.drawer-panel details ul{padding-left:14px}
.drawer-panel details li{border:0}
.drawer-panel details a{font-weight:400;padding:8px 0}
.drawer-contact{font-size:var(--fs-sm);margin-top:16px}
.main-nav{display:none}
.nav-desktop{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:nowrap;gap:0}
.nav-desktop>li{position:relative}
.nav-desktop a{display:block;padding:14px 10px;white-space:nowrap;text-decoration:none;color:var(--color-ink);font-weight:700;font-size:var(--fs-base)}
.nav-desktop a:hover,.nav-desktop a[aria-current]{color:var(--color-accent)}
.nav-desktop .sub{display:none;position:absolute;left:0;top:100%;min-width:220px;list-style:none;margin:0;padding:10px 0;background:var(--color-bg);box-shadow:0 10px 30px rgba(0,0,0,.1);z-index:30}
.nav-desktop .sub a{padding:8px 20px;white-space:normal;font-weight:400;color:var(--color-text,#696969)}
.nav-desktop .sub a:hover{color:var(--color-accent)}
.nav-desktop .has-sub:hover .sub,.nav-desktop .has-sub:focus-within .sub{display:block}
/* kétrészes termék (OMEGA: tolóajtó + fix oldal): két oszlop, részenként cikkszám és készlet */
.parts{display:grid;gap:8px 20px;margin-bottom:4px}
@media (min-width:560px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.part-title{font-size:var(--fs-md);margin:0 0 2px}
.part-sku{margin:0;font-size:var(--fs-sm);color:var(--color-muted)}
.part .availability{margin:2px 0 14px}
.opt-disabled span{background:var(--color-surface);border-style:dashed;cursor:not-allowed}
.opt-locked span{cursor:default}
.lock-note{font-size:var(--fs-xs);color:var(--color-muted);margin:6px 0 0}
.parts .opt span{font-size:var(--fs-sm);white-space:nowrap;min-height:42px;padding:8px 6px}
.parts .opt input:checked+span{padding:7px 5px}
.search{display:flex}
.search input{border-radius:var(--radius-base) 0 0 var(--radius-base)}
.search button{min-width:48px;border:1px solid #d6d6d6;border-left:0;background:var(--color-surface);display:flex;align-items:center;justify-content:center;cursor:pointer}
.search-big{max-width:640px;margin-top:12px}
.search-big .btn{border-radius:0;background:var(--color-ink);border:1px solid var(--color-ink);color:#fff}
@media (min-width:1024px){
  :root{--header-h:81px}
  .nav-drawer{display:none}
  .header-bar{grid-template-columns:auto 1fr auto;gap:8px;min-height:80px}
  .logo{justify-self:start}
  .logo img{height:65px;width:auto;max-width:none}
  .main-nav{display:block}
  .nav-desktop>li>a{padding:29px 8px;line-height:22px}
  .header-icons{gap:0}
}
main{padding-top:24px;padding-bottom:56px;min-height:50vh}
.page-home main{padding-top:0}
/* morzsamenü, fejléc */
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0;margin:0 0 12px;font-size:var(--fs-sm);color:var(--color-muted)}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li+li::before{content:"›";margin-right:4px}
.breadcrumbs a{color:var(--color-muted);display:inline-block;padding:8px 0}
.page-head{margin-bottom:24px}
.prose{max-width:72ch}
.prose img{height:auto}
/* rács, kártyák */
.grid{display:grid;gap:30px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:0}
.card-link{text-decoration:none;color:var(--color-ink)}
.card-media{position:relative;aspect-ratio:var(--product-card-aspect);background:#fff;border-radius:var(--radius-card,6px);overflow:hidden}
.card-media img,.card-media picture{width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.card-link:hover .card-media img{transform:scale(1.04)}
.card-placeholder{width:100%;height:100%;min-height:120px;background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-bg) 45%,var(--color-surface) 100%)}
.card-title{font-size:var(--fs-base);font-weight:700;color:var(--color-ink);margin:12px 0 0;line-height:1.35}
.card-price{margin:2px 0 0}
/* a kártyán az ár félkövér (a tulajdonos kérése, 2026-11-12); a méretsáv (zuhanytermékek) marad normál */
.card-price .price-now{font-weight:700}
/* méretkínálat: egy fokozattal kisebb, mindig egy sorban (mobilon a keskeny kártya miatt még kisebb) */
/* készletkijelzés (a varioglass.hu szerint, de kékkel – a tulajdonos kérése) a kép és a név között */
.card-stock{position:absolute;left:8px;bottom:6px;max-width:calc(100% - 16px);color:var(--color-stock);font-weight:700;font-size:12px;line-height:1.35}
.card-sizes{color:var(--color-muted);font-size:12px;white-space:nowrap}
/* kézi sortörés a terméknévben (`</br>` az adminban): csak asztali nézetben */
.title-br{display:none}
@media (min-width:1024px){.title-br{display:inline}}
@media (min-width:640px){.card-sizes{font-size:14px}}
/* az ár mindenhol kékáfonya (macOS „Kékáfonya” #0433FF, a tulajdonos kérése, 2026-11-12); az akciós ár piros marad */
.price-now{font-weight:400;font-size:var(--fs-base);color:var(--color-price)}
.price-now.sale{color:var(--color-sale)}
.price-was{color:var(--color-muted);margin-left:6px}
.price-suffix{color:var(--color-muted)}
.badge{display:inline-block;align-self:flex-start;font-size:var(--fs-xs);background:var(--color-surface);padding:2px 8px;border-radius:99px;margin:6px 0 0}
.tiles{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tiles a{display:flex;flex-direction:column;gap:2px;padding:18px;border:1px solid var(--color-line);border-radius:var(--radius-card,6px);background:var(--color-surface);text-decoration:none;color:var(--color-ink);min-height:72px}
.tiles a:hover{border-color:var(--color-accent)}
/* listázás */
.listing{display:grid;gap:20px}
.filters{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--color-surface);border-radius:var(--radius-card,6px)}
/* Mobilon a szűrők összecsukva (CSS-only kapcsoló, JS és elrendezés-ugrás nélkül); aktív szűrőnél nyitva */
.filters-cb{position:absolute;opacity:0;width:1px;height:1px}
.filters-toggle{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border:1px solid var(--color-line);border-radius:var(--radius-base);font-weight:700;cursor:pointer;background:var(--color-bg)}
.filters-toggle::after{content:"+";font-size:var(--fs-lg)}
.filters-cb:checked+.filters-toggle::after{content:"–"}
.filters-cb:focus-visible+.filters-toggle{outline:3px solid var(--color-accent);outline-offset:2px}
.filters-cb:not(:checked)~.filters{display:none}
/* bal oldali kategóriamenü (a varioglass.hu gyűjteményoldala szerint); mobilon vízszintesen görgethető sor */
.side{display:flex;flex-direction:column;gap:24px;min-width:0}
.side-title{font-size:var(--fs-md);font-weight:700;color:var(--color-ink);margin:0 0 14px;padding-bottom:10px;position:relative}
.side-title::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:2px;background:var(--color-ink)}
.side-nav ul{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
.side-nav a{display:flex;align-items:center;gap:8px;white-space:nowrap;min-height:44px;padding:0 14px;border:1px solid var(--color-line);color:var(--color-ink);text-decoration:none;font-size:var(--fs-base)}
.side-nav a:hover{color:var(--color-accent)}
.side-nav a.active{color:var(--color-accent);border-color:var(--color-accent)}
.side-plus{font-size:var(--fs-base);line-height:1;color:var(--color-ink)}
.side-nav a.active .side-plus{color:var(--color-accent)}
/* kiegészítők a kosárba tételnél (a varioglass.hu „Kiegészítő fogantyúk” blokkja szerint) */
.addons{grid-column:1/-1;margin:0;padding:12px 0 4px;border-top:1px solid var(--color-line)}
.addons-title{float:left;width:100%;font-weight:700;color:var(--color-ink);padding:0;margin:0 0 6px}
.addons-title+*{clear:both}
.addon{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px;padding:8px 0;cursor:pointer}
.addon input{position:absolute;opacity:0;width:1px;height:1px}
.addon-name{color:var(--color-ink)}
.addon-price{grid-column:1;color:var(--color-price)}
.addon-btn{grid-column:2;grid-row:1/span 2;min-width:120px;min-height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-accent);background:var(--color-accent);color:#fff;font-weight:700;font-size:var(--fs-sm)}
.addon-on{display:none}
.addon input:checked~.addon-btn{background:var(--color-ok);border-color:var(--color-ok)}
.addon input:checked~.addon-btn .addon-on{display:inline}
.addon input:checked~.addon-btn .addon-off{display:none}
.addon input:focus-visible~.addon-btn{outline:3px solid var(--color-accent-strong);outline-offset:2px}
.cart-addon{padding-left:28px;border-top:0;padding-top:4px}
.cart-addon .cart-title::before{content:"+ ";color:var(--color-muted)}
.pagination{display:flex;gap:16px;align-items:center;justify-content:center;margin:24px 0}
.pagination a{padding:12px;min-height:44px}
/* blokkok */
.block{margin:40px 0}
.hero{display:grid;gap:24px;align-items:center;margin-top:12px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-actions .btn-buy{width:auto}
.glass-art{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,var(--color-surface),var(--color-bg));border-radius:var(--radius-base);overflow:hidden}
.glass-art span{position:absolute;top:10%;bottom:10%;width:26%;border:2px solid var(--color-accent);border-radius:2px;background:rgba(255,255,255,.35)}
.glass-art span:nth-child(1){left:12%}.glass-art span:nth-child(2){left:37%;opacity:.8}.glass-art span:nth-child(3){left:62%;opacity:.6}
.usp ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.usp li{display:flex;flex-direction:column;padding:16px;background:var(--color-surface);border-radius:var(--radius-card,6px)}
.usp strong{font-size:var(--fs-lg);font-family:var(--font-heading)}
.steps{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;padding:16px 16px 16px 56px;position:relative;border:1px solid var(--color-line);border-radius:var(--radius-card,6px);display:flex;flex-direction:column}
.steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--color-accent);color:var(--color-accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700}
.measure-grid{display:flex;gap:20px;align-items:center}
.measure-grid svg{flex:none;color:var(--color-muted)}
.banner{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:24px;background:var(--color-ink);color:var(--color-bg);border-radius:var(--radius-card,6px)}
.banner h2{color:var(--color-bg)}
.banner .btn{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.partner-list{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.partner{padding:16px;border:1px solid var(--color-line);border-radius:var(--radius-card,6px)}
.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.inline-form .field{min-width:220px}
.downloads ul{list-style:none;padding:0;margin:0;display:grid;gap:4px 24px;grid-template-columns:minmax(0,1fr)}
.downloads+.downloads{margin-top:48px}
.downloads h2{margin-bottom:14px}
.downloads li{padding:6px 0;line-height:1.4}
.downloads li .muted{display:block;font-size:var(--fs-sm)}
@media (min-width:480px){.downloads ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:760px){.downloads ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* termékoldal */
.product{display:grid;gap:24px}
.gallery-wrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.gallery-track{position:relative;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius-card,6px)}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track figure{margin:0;flex:0 0 100%;scroll-snap-align:start;background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.gallery-track img,.gallery-track picture{width:100%;height:100%;object-fit:contain}
/* bélyegképek: mobilon a kép alatt sorban, asztali gépen balra oszlopban (mint a varioglass.hu-n) */
.gallery-thumbs{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto}
.gallery-thumbs a{display:block;width:64px;height:64px;border:1px solid var(--color-line);background:#fff;padding:3px;border-radius:var(--radius-card,6px);overflow:hidden}
.gallery-thumbs a:hover,.gallery-thumbs a[aria-current]{border-color:var(--color-ink)}
.gallery-thumbs img,.gallery-thumbs picture{width:100%;height:100%;object-fit:contain}
/* képnézegető: kiemelt, nagyobb kép a lap fölött (nem teljes képernyő), lapozható */
.js .gallery-track figure{cursor:zoom-in}
.lightbox{position:fixed;inset:0;margin:auto;padding:0;border:0;background:#fff;width:min(880px,92vw,88vh);max-width:none;max-height:none;overflow:visible;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.lightbox::backdrop{background:rgba(21,21,21,.62)}
.lightbox[open]{animation:lb-in .18s ease-out}
@keyframes lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb-stage{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#fff}
.lb-stage picture,.lb-stage img{width:100%;height:100%;object-fit:contain}
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--color-line);background:rgba(255,255,255,.95);color:var(--color-ink);font:inherit;font-size:30px;line-height:1;cursor:pointer}
.lb-btn:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink)}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}
.lb-close{top:10px;right:10px;font-size:28px}
.lb-count{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;padding:2px 12px;background:rgba(255,255,255,.95);color:var(--color-ink);font-size:var(--fs-sm)}
.lb-single .lb-prev,.lb-single .lb-next,.lb-single .lb-count{display:none}
@media (prefers-reduced-motion:reduce){.lightbox[open]{animation:none}}
.gallery-placeholder{aspect-ratio:4/5;border-radius:var(--radius-card,6px)}
.options{margin-bottom:16px}
/* méret, zsanér stb.: egyforma kártyák, kettesével egymás mellett */
.option-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:48px;min-width:44px;padding:10px 14px;border:1px solid var(--color-muted);border-radius:var(--radius-option,3px);cursor:pointer;background:var(--color-bg)}
.opt input:checked+span{border:2px solid var(--color-price);color:var(--color-price);font-weight:700;padding:9px 13px}
.opt:not(.opt-disabled):hover span{border-color:var(--color-price)}
.opt input:focus-visible+span{outline:3px solid var(--color-accent-strong);outline-offset:2px}
.opt-off span{color:var(--color-muted);text-decoration:line-through}
.swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--color-line);display:inline-block}
.swatch-chrome{background:linear-gradient(135deg,#f4f5f6,#b9bec4)}
.swatch-black{background:#1f1f1f}
.buy-box{padding:20px;border:2px solid var(--color-price);border-radius:var(--radius-card,6px);background:color-mix(in srgb,var(--color-price) 4%,var(--color-bg));margin:8px 0 16px}
.buy-price{font-size:var(--fs-xl);font-weight:700;line-height:1.2;margin-bottom:6px}
.buy-form{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:end;margin-top:12px}
.buy-price .price-now,.config-price .price-now{font-size:inherit}
.buy-price .price-now{font-weight:700}
.qty{display:flex;flex-direction:column;font-size:var(--fs-sm);font-weight:700}
.availability.in_stock{color:var(--color-stock);font-weight:700}
.availability.out_of_stock{color:var(--color-stock);font-weight:700}
.unavailable{color:var(--color-sale);font-weight:700}
.custom-cta{padding:16px;background:var(--color-surface);border-radius:var(--radius-card,6px)}
.head-price{font-size:var(--fs-lg);color:var(--color-price);margin:0 0 12px}
.head-price .price-now{font-size:inherit}
.acc{margin:16px 0 24px;display:grid;gap:10px}
.acc-item{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card,6px);overflow:hidden}
.acc-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding-left:20px;cursor:pointer;font-weight:700;color:var(--color-ink)}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary::after{content:"+";flex:0 0 48px;align-self:stretch;display:flex;align-items:center;justify-content:center;background:var(--color-ink);color:#fff;font-size:28px;font-weight:400;line-height:1}
.acc-item[open] summary::after{content:"\2212"}
.acc-item summary:hover,.acc-item[open] summary{color:var(--color-accent-strong)}
.acc-body{padding:20px;background:var(--color-bg);border-top:1px solid var(--color-line)}
.acc-body>:last-child{margin-bottom:0}
.acc-body .buy-box{margin-bottom:0}
.acc-body .drawing{margin:0 0 16px}
.acc-body .acc-desc{margin-top:20px}
.acc-body .drawing img{display:block;width:100%;height:auto}
.product-tabs{margin:32px 0}
.product-tabs details{border-top:1px solid var(--color-line);padding:4px 0}
.product-tabs summary{cursor:pointer;min-height:48px;display:flex;align-items:center}
.product-tabs summary h2{margin:0;font-size:var(--fs-md)}
.specs{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px}
.specs dt{color:var(--color-muted)}
.specs dd{margin:0}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:var(--color-bg);border-top:1px solid var(--color-line);box-shadow:0 -4px 12px rgba(0,0,0,.06);z-index:5}
.page-product main{padding-bottom:96px}
/* konfigurátor */
.configurator{display:grid;gap:24px}
.config-result{padding:20px;border:1px solid var(--color-line);border-radius:var(--radius-card,6px);background:var(--color-surface)}
.config-price{font-size:var(--fs-lg);display:flex;flex-direction:column;margin-bottom:8px}
.breakdown{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin:0 0 12px}
.breakdown dd{margin:0;text-align:right}
.drawing{margin:0 0 16px}
.quote-form-wrap{margin-top:32px;padding-top:24px;border-top:1px solid var(--color-line)}
.quote-form{display:flex;flex-direction:column;gap:14px;max-width:720px}
.js .js-hide{display:none}
/* sütisáv, lábléc */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:var(--color-bg);border-top:2px solid var(--color-accent);box-shadow:0 -6px 18px rgba(0,0,0,.08);z-index:20;padding:12px 0}
.cookie-row{display:flex;flex-direction:column;gap:12px}
.cookie-row h2{font-size:var(--fs-md);margin:0 0 4px}
.cookie-row p{margin:0;font-size:var(--fs-sm)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:8px}
address{font-style:normal;line-height:2.2}
@media (min-width:640px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .usp ul{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cookie-row{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1024px){
  .header-row{grid-template-columns:auto minmax(280px,520px) auto auto;justify-content:space-between}
  .search{grid-column:auto;order:0}
  .nav-mobile{display:none}
  .nav-desktop{display:flex}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .filters-toggle{display:none}
  .filters-cb:not(:checked)~.filters{display:flex}
  .filter-panel{grid-column:1}
  h1{font-size:var(--fs-xl)}
  h2{font-size:var(--fs-lg)}
  .listing{grid-template-columns:190px 1fr;gap:24px;align-items:start}
  .listing .grid{gap:28px 16px}
  .side-nav ul{flex-direction:column;gap:0;overflow:visible;padding:0}
  .side-nav a{border:0;padding:0;min-height:34px;white-space:normal}
  .hero{grid-template-columns:1.1fr 1fr}
  .product{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
  .gallery{position:sticky;top:calc(var(--header-h) + 16px)}
  .gallery-wrap.has-thumbs{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start}
  .gallery-wrap.has-thumbs .gallery-thumbs{grid-column:1;grid-row:1;flex-direction:column;overflow:visible}
  .gallery-wrap.has-thumbs .gallery-track{grid-column:2;grid-row:1}
  .gallery-thumbs a{width:72px;height:72px}
  .configurator{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
  .config-result{position:sticky;top:calc(var(--header-h) + 16px)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .sticky-buy{display:none}
  .page-product main{padding-bottom:48px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---- kosár, pénztár, rendelés (6. fázis) ---- */
.btn-block{display:flex;width:100%}
.btn-link{background:none;border:0;padding:12px 4px;min-height:44px;color:var(--color-ink);text-decoration:underline;cursor:pointer;font:inherit}
.warn{color:var(--color-sale)}
.cart,.checkout{display:grid;gap:24px}
.cart-line{display:grid;grid-template-columns:72px 1fr;gap:12px 16px;padding:16px 0;border-bottom:1px solid var(--color-line)}
.cart-line.has-problem{background:#fdf6f6}
.cart-media img,.cart-media picture,.cart-media .card-placeholder{width:72px;height:72px;object-fit:cover;border-radius:var(--radius-base)}
.cart-title{font-size:var(--fs-md);margin:0 0 4px}
.cart-title a{color:inherit}
.cart-price{grid-column:2;text-align:left}
.cart-form{display:grid;gap:8px;margin-top:8px}
.cart-actions{display:flex;gap:12px;align-items:center}
.cart-summary,.checkout-summary{background:var(--color-surface);padding:16px;border-radius:var(--radius-card,6px);align-self:start}
.totals{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:16px 0}
.totals dd{margin:0;text-align:right}
.totals .grand{font-weight:700;font-size:var(--fs-md);border-top:1px solid var(--color-line);padding-top:8px}
/* kékáfonya: a fő ár és a sorösszegek; a bontás (termékek, szállítás, egységár, nettó/ÁFA) szövegszínű marad */
.config-price strong,.cart-price strong,.summary-lines li>span:last-child,.totals dd.grand,.grand-line strong{color:var(--color-price)}
.summary-lines{list-style:none;padding:0;margin:0}
.summary-lines li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--color-line)}
.steps-nav ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;padding:0;margin:0 0 20px;font-size:var(--fs-sm)}
.steps-nav li{color:var(--color-muted)}
.steps-nav li.current{color:var(--color-ink);font-weight:700}
.steps-nav li.done a{color:var(--color-ink)}
.steps-nav a,.steps-nav span{display:inline-block;padding:10px 0}
.checkout-form{display:grid;gap:14px;max-width:640px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--color-line);border-radius:var(--radius-card,6px);margin:8px 0;cursor:pointer}
.choice input{margin-top:4px;width:20px;height:20px}
.choice.disabled{opacity:.55;cursor:not-allowed}
.field-error{display:block;color:var(--color-sale);font-size:var(--fs-sm);margin-top:4px}
.invalid input,.invalid select,.invalid textarea{border-color:var(--color-sale)}
.review{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:6px 16px;margin:12px 0}
.review dt{color:var(--color-muted)}
.review dd{margin:0}
.grand-line{font-size:var(--fs-md)}
.order-table{width:100%;border-collapse:collapse;margin:12px 0}
.order-table th,.order-table td{text-align:left;padding:8px;border-bottom:1px solid var(--color-line);vertical-align:top}
.order-table td:last-child,.order-table th:last-child{text-align:right;white-space:nowrap}
.transfer-box{background:var(--color-surface);padding:16px;border-radius:var(--radius-card,6px);margin:16px 0}
@media (min-width:768px){
  .cart-line{grid-template-columns:96px 1fr auto}
  .cart-media img,.cart-media picture,.cart-media .card-placeholder{width:96px;height:96px}
  .cart-price{grid-column:auto;text-align:right}
  .cart,.checkout{grid-template-columns:1fr 340px;align-items:start}
}
@media print{.site-header,.site-footer,.cookie-banner,.env-banner{display:none}}

/* ---- varioglass.hu-szerű főoldal (2.0) ---- */
.accent{color:var(--color-accent)}
.section-title{text-align:center;margin:0 0 28px}
.section-title h2{display:flex;align-items:center;justify-content:center;gap:22px;margin:0 0 6px}
.section-title h2::before,.section-title h2::after{content:"";flex:0 0 48px;height:2px;background:var(--color-ink)}
.section-title p{color:var(--color-muted);margin:0}
.block{margin:64px 0}
.hero-full{position:relative;margin:0 calc(50% - 50vw);min-height:clamp(380px,62vh,640px);display:flex;align-items:center;overflow:hidden;background:var(--color-surface)}
.hero-bg{position:absolute;inset:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,0) 62%)}
.hero-bg img,.hero-bg picture{width:100%;height:100%;object-fit:cover}
.hero-inner{position:relative;width:100%}
.hero-text{max-width:520px;padding:40px 0}
.hero-eyebrow{font-size:var(--fs-md);font-weight:700;color:var(--color-ink);letter-spacing:.02em;margin:0 0 6px}
.hero-title{font-size:clamp(var(--fs-xl),5vw,var(--fs-hero));line-height:1.1;font-weight:700;margin:0 0 12px;color:var(--color-ink)}
.hero-words .words{display:inline-grid}
.hero-words .words span{grid-area:1/1;opacity:0;animation:vg-word 12s infinite both}
.hero-words .words span:nth-child(2){animation-delay:3s}
.hero-words .words span:nth-child(3){animation-delay:6s}
.hero-words .words span:nth-child(4){animation-delay:9s}
@keyframes vg-word{0%{opacity:0;transform:translateY(12px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.hero-words .words span{animation:none}.hero-words .words span:first-child{opacity:1}}
.hero-sub{font-size:var(--fs-md);font-weight:400;color:var(--color-ink);max-width:28ch;margin:0 0 24px}
.hero-full .btn-buy{width:auto}
/* asztali gépen a nyitókép a 990 px-es tartalomszélességben, vágás nélkül (a zuhanykabin is látszik) */
@media (min-width:1024px){
  .hero-full{margin:20px 0 0;min-height:0;display:block}
  .hero-bg{position:relative;inset:auto}
  .hero-bg::after{background:linear-gradient(90deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.6) 28%,rgba(255,255,255,0) 46%)}
  .hero-bg img,.hero-bg picture{height:auto}
  .hero-inner{position:absolute;inset:0;display:flex;align-items:center;padding:0 44px}
  .hero-full .hero-text{padding:0;max-width:380px}
}
/* füles termékblokk (CSS-only fülek, JS nélkül is) */
.tab-radio{position:absolute;opacity:0;width:1px;height:1px}
.tab-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 30px}
.tab-bar label{padding:6px 14px;font-size:var(--fs-base);font-weight:400;text-transform:lowercase;color:var(--color-muted);cursor:pointer;min-height:36px;display:flex;align-items:center}
.tab-bar label:hover{color:var(--color-ink)}
.tab-panel{display:none}
.more{text-align:center;margin-top:30px}
.tab-radio:nth-of-type(1):checked~.tab-panels .tab-panel:nth-of-type(1){display:block}
.tab-radio:nth-of-type(1):checked~.tab-bar label:nth-of-type(1){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(1):focus-visible~.tab-bar label:nth-of-type(1){outline:2px solid var(--color-ink);outline-offset:2px}
.tab-radio:nth-of-type(2):checked~.tab-panels .tab-panel:nth-of-type(2){display:block}
.tab-radio:nth-of-type(2):checked~.tab-bar label:nth-of-type(2){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(2):focus-visible~.tab-bar label:nth-of-type(2){outline:2px solid var(--color-ink);outline-offset:2px}
.tab-radio:nth-of-type(3):checked~.tab-panels .tab-panel:nth-of-type(3){display:block}
.tab-radio:nth-of-type(3):checked~.tab-bar label:nth-of-type(3){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(3):focus-visible~.tab-bar label:nth-of-type(3){outline:2px solid var(--color-ink);outline-offset:2px}
.tab-radio:nth-of-type(4):checked~.tab-panels .tab-panel:nth-of-type(4){display:block}
.tab-radio:nth-of-type(4):checked~.tab-bar label:nth-of-type(4){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(4):focus-visible~.tab-bar label:nth-of-type(4){outline:2px solid var(--color-ink);outline-offset:2px}
.tab-radio:nth-of-type(5):checked~.tab-panels .tab-panel:nth-of-type(5){display:block}
.tab-radio:nth-of-type(5):checked~.tab-bar label:nth-of-type(5){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(5):focus-visible~.tab-bar label:nth-of-type(5){outline:2px solid var(--color-ink);outline-offset:2px}
.tab-radio:nth-of-type(6):checked~.tab-panels .tab-panel:nth-of-type(6){display:block}
.tab-radio:nth-of-type(6):checked~.tab-bar label:nth-of-type(6){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(6):focus-visible~.tab-bar label:nth-of-type(6){outline:2px solid var(--color-ink);outline-offset:2px}
.tab-radio:nth-of-type(7):checked~.tab-panels .tab-panel:nth-of-type(7){display:block}
.tab-radio:nth-of-type(7):checked~.tab-bar label:nth-of-type(7){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(7):focus-visible~.tab-bar label:nth-of-type(7){outline:2px solid var(--color-ink);outline-offset:2px}
.tab-radio:nth-of-type(8):checked~.tab-panels .tab-panel:nth-of-type(8){display:block}
.tab-radio:nth-of-type(8):checked~.tab-bar label:nth-of-type(8){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(8):focus-visible~.tab-bar label:nth-of-type(8){outline:2px solid var(--color-ink);outline-offset:2px}
.tab-radio:nth-of-type(9):checked~.tab-panels .tab-panel:nth-of-type(9){display:block}
.tab-radio:nth-of-type(9):checked~.tab-bar label:nth-of-type(9){background:var(--color-accent);color:#fff}
.tab-radio:nth-of-type(9):focus-visible~.tab-bar label:nth-of-type(9){outline:2px solid var(--color-ink);outline-offset:2px}
.gallery-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.gallery-grid figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--color-surface);border-radius:var(--radius-card,6px)}
.gallery-grid img,.gallery-grid picture{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery-grid figure:hover img{transform:scale(1.05)}
.catalog-row{display:grid;gap:30px;align-items:center}
.catalog-media img{width:100%;height:auto}
.catalog-text h3{font-size:var(--fs-lg)}
.contact-grid{display:grid;gap:20px}
.contact-card{background:var(--color-surface);padding:28px;border-radius:var(--radius-card,6px)}
.contact-card h3{font-size:var(--fs-md)}
.contact-card a:not(.btn){text-decoration:none}
/* lábléc */
.site-footer{background:var(--color-surface);margin-top:40px;font-size:var(--fs-base)}
.footer-grid{display:grid;gap:28px;padding-top:56px;padding-bottom:40px}
.site-footer h2{font-size:var(--fs-base);margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0}
/* minden lábléc-sor egyforma magas (szöveg és link is), az oszlopok sorai egy vonalban */
.site-footer p,.site-footer li{line-height:1.8;margin:0}
.site-footer p+p{margin-top:1.8em}
.site-footer li a,.site-footer p a{color:var(--color-text,#696969);text-decoration:none;display:inline;padding:0}
.site-footer a:hover{color:var(--color-accent)}
.footer-bottom{border-top:1px solid var(--color-line);display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:20px;padding-bottom:24px;text-align:center;font-size:var(--fs-sm)}
.footer-bottom img{height:44px;width:auto}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(3,1fr)}.contact-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
/* lábléc alja: a logó balra, a copyright középen (a tulajdonos kérése, 2026-11-11) */
@media (min-width:768px){.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.footer-bottom img{justify-self:start}.footer-bottom p{grid-column:2}}
@media (min-width:1024px){.catalog-row{grid-template-columns:1fr 1fr;gap:60px}.footer-grid{grid-template-columns:repeat(3,max-content);justify-content:center;column-gap:clamp(64px,9vw,150px)}.hero-text{padding:60px 0}}

/* Kapcsolat oldal (a marmy.hu Kapcsolat oldala szerint): térkép, ügyfélszolgálat, űrlap */
.contact-title{text-align:center;margin:8px 0 24px}
.contact-map{position:relative;aspect-ratio:16/7;min-height:260px;background:var(--color-surface);margin:0 0 40px;overflow:hidden;border-radius:var(--radius-card,6px)}
.contact-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contact-map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
.contact-map-place{margin:0;color:var(--color-ink)}
.contact-map.is-loaded .contact-map-placeholder{display:none}
.contact-cols{display:grid;gap:40px;margin-bottom:24px}
.contact-cols h2{font-size:var(--fs-lg);margin:0 0 12px}
.contact-lines{list-style:none;margin:12px 0 0;padding:0;color:var(--color-ink);line-height:1.9}
.contact-lines a{color:var(--color-ink);text-decoration:none}
.contact-lines a:hover{color:var(--color-accent)}
.contact-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.contact-row{display:grid;gap:14px}
.contact-form textarea{min-height:140px}
.contact-form .btn{align-self:flex-start;min-width:140px}
@media (min-width:640px){.contact-row{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.contact-cols{grid-template-columns:1fr 1.4fr;gap:60px}}