/* Kosár Natur — Alpine lodge design system */
:root{
  --sage:#5b6b4f; --sage-dk:#3f4a37; --oat:#f3ead9; --oat-dk:#e7dac2;
  --clay:#c98a5e; --clay-dk:#a86a42; --ink:#2b2823; --paper:#fbf7ef;
  --line:#d8cdb3; --radius:18px; --radius-sm:10px;
  --ff-display:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --ff-body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 10px 30px -12px rgb(43 40 35 / .25);
  --container:1180px;
}
@media (prefers-color-scheme: dark){ }
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff-body);color:var(--ink);background:var(--paper);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.1;margin:0 0 .5em}
p{margin:0 0 1em}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.75em 1.5em;border-radius:999px;border:2px solid var(--sage);background:var(--sage);color:var(--oat);font-weight:600;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.btn::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--sage-dk);z-index:-1;transition:left .35s ease}
.btn:hover::before{left:0}
.btn--ghost{background:transparent;color:var(--sage);}
.btn--ghost::before{background:var(--sage)}
.btn--ghost:hover{color:var(--oat)}
.btn--clay{background:var(--clay);border-color:var(--clay);color:#2b1a0e}
.btn--clay::before{background:var(--clay-dk)}
.btn--clay:hover{color:#fff}
.btn--on-dark{border-color:var(--oat);color:var(--oat)}
.btn--on-dark::before{background:var(--oat);}
.btn--on-dark:hover{color:var(--sage-dk)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgb(251 247 239 / .9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-size:1.3rem;font-weight:700;color:var(--sage-dk)}
.brand svg{width:40px;height:40px}
.site-nav{display:flex;align-items:center;gap:22px}
.site-nav a{font-weight:600;font-size:.95rem;color:var(--ink);position:relative;padding:4px 0}
.site-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--clay);transition:width .25s}
.site-nav a:hover::after,.site-nav a.is-active::after{width:100%}
.site-nav a.is-active{color:var(--sage-dk)}
.header-actions{display:flex;align-items:center;gap:14px}
.cart-link{display:flex;align-items:center;gap:6px;font-weight:700}
.cart-link svg{width:22px;height:22px}
[data-cart-count]{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:var(--clay);color:#fff;font-size:.75rem;padding:0 6px}
[data-cart-count].bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px}

@media (max-width:860px){
  .nav-toggle{display:flex}
  .site-nav{position:fixed;top:0;right:0;height:100vh;width:min(320px,85vw);background:var(--oat);flex-direction:column;align-items:flex-start;padding:90px 28px;gap:22px;transform:translateX(100%);visibility:hidden;transition:transform .35s ease;box-shadow:var(--shadow)}
  .site-nav.is-open{transform:translateX(0);visibility:visible}
  body.nav-open{overflow:hidden}
}

/* footer */
.site-footer{background:var(--sage-dk);color:var(--oat);margin-top:80px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;padding:60px 0 30px}
.site-footer h4{color:var(--oat);font-size:1rem;margin-bottom:.8em}
.site-footer a{opacity:.85;display:block;margin-bottom:.5em}
.site-footer a:hover{opacity:1;text-decoration:underline}
.footer-bottom{border-top:1px solid rgb(243 234 217 / .2);padding:18px 0;font-size:.85rem;opacity:.8;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.newsletter-form{display:flex;gap:8px;flex-wrap:wrap}
.newsletter-form input[type="email"]{flex:1;min-width:160px;padding:.7em 1em;border-radius:999px;border:1px solid rgb(243 234 217 / .4);background:rgb(243 234 217 / .08);color:var(--oat)}
.newsletter-form input::placeholder{color:rgb(243 234 217 / .6)}

/* cookie banner */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:var(--sage-dk);color:var(--oat);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);z-index:60;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.cookie-banner p{margin:0;font-size:.9rem;flex:1 1 240px}
.cookie-banner a{text-decoration:underline}
.cookie-actions{display:flex;gap:10px}

/* hero / marquee */
.hero{position:relative;padding:60px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);color:var(--sage-dk)}
.hero .lede{font-size:1.15rem;max-width:34ch}
.hero-art{position:relative;aspect-ratio:1/1}
.hero-art svg{width:100%;height:100%}
.marquee{overflow:hidden;border-top:2px solid var(--sage-dk);border-bottom:2px solid var(--sage-dk);background:var(--oat);padding:14px 0}
.marquee-track{display:flex;width:max-content;gap:40px;animation:marquee 26s linear infinite}
.marquee span{font-family:var(--ff-display);font-size:1.4rem;color:var(--sage-dk);white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}

/* grain overlay */
.grain-overlay{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;opacity:.05;z-index:1}

/* sections */
.section{padding:70px 0}
.section-head{max-width:640px;margin:0 auto 40px}
.section-head.center{text-align:center;margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:var(--clay-dk)}

/* masonry gallery */
.masonry{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:14px}
.masonry-item{position:relative;grid-row:span 2;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.masonry-item:nth-child(3n+1){grid-row:span 3}
.masonry-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.masonry-item figcaption{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient(0deg,rgb(43 40 35 / .75),transparent);color:#fff;font-weight:700;transform:translateY(100%);transition:transform .35s ease}
.masonry-item:hover img{transform:scale(1.08)}
.masonry-item:hover figcaption{transform:translateY(0)}
@media (max-width:860px){.masonry{grid-template-columns:repeat(2,1fr)}}

/* product cards / strip */
.product-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.card{scroll-snap-align:start;background:var(--oat);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px)}
.card-img{aspect-ratio:4/3;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.07)}
.card-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:1.1rem}
.card-price{font-weight:700;color:var(--sage-dk);margin-top:auto}
.card-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:.72rem;background:var(--sage);color:var(--oat);border-radius:999px;padding:.2em .7em}

/* basket planner (signature feature) */
.planner{background:var(--sage);color:var(--oat);border-radius:var(--radius);padding:40px;display:grid;gap:30px;grid-template-columns:1fr 1fr}
.planner h2,.planner h3{color:var(--oat)}
.planner-controls label{display:block;font-weight:700;margin-bottom:6px}
.planner-controls input[type="range"]{width:100%;accent-color:var(--clay)}
.basket-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgb(243 234 217 / .25);font-size:.95rem}
.basket-row--total{font-weight:700;border-bottom:0;padding-top:16px}
@media (max-width:860px){.planner{grid-template-columns:1fr}}

/* dividers / badges */
.divider{width:100%;height:40px;display:block;color:var(--sage)}
.badge-seal{width:120px;height:120px}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);clip-path:inset(10% 0 0 0);transition:opacity .6s ease,transform .6s ease,clip-path .6s ease}
.reveal.in-view{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms)}
@media (prefers-reduced-motion: reduce){
  .reveal,.marquee-track,.card,.card-img img,[data-cart-count].bump{transition:none !important;animation:none !important;transform:none !important;opacity:1 !important;clip-path:none !important}
}

/* ===== shared component library for inner pages ===== */
.page-hero{background:var(--oat);padding:70px 0 50px;border-bottom:2px solid var(--line)}
.page-hero h1{color:var(--sage-dk);font-size:clamp(2.2rem,5vw,3.2rem)}
.breadcrumbs{display:flex;gap:8px;font-size:.85rem;color:var(--sage-dk);margin-bottom:16px}
.breadcrumbs a{text-decoration:underline}
.breadcrumbs span{opacity:.6}

.prose{max-width:68ch;margin:0 auto}
.prose h2{margin-top:1.6em;color:var(--sage-dk)}
.prose ul,.prose ol{padding-left:1.4em;margin-bottom:1em}
.prose li{margin-bottom:.4em}

.notice{border-radius:var(--radius-sm);padding:18px 20px;border:1px solid var(--line);background:var(--oat);margin:1.4em 0}
.notice--info{border-color:var(--sage);background:rgb(91 107 79 / .08)}
.notice--warn{border-color:var(--clay);background:rgb(201 138 94 / .1)}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.9rem}
.field input,.field select,.field textarea{min-height:44px;padding:.7em 1em;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:#fff;font:inherit;accent-color:var(--clay)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sage)}
.field-error{color:#a3321c;font-size:.82rem;min-height:1.2em}
.field--full{grid-column:1 / -1}
.form-feedback{min-height:1.4em;font-weight:600}
.form-feedback.is-error{color:#a3321c}
.form-thanks{background:var(--sage);color:var(--oat);border-radius:var(--radius-sm);padding:16px 20px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.faq-item{border-bottom:1px solid var(--line);padding:10px 0}
.faq-item summary{cursor:pointer;font-weight:700;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--clay-dk)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding-bottom:12px;opacity:.9}

.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.product-detail .card-img{border-radius:var(--radius)}
@media (max-width:860px){.product-detail{grid-template-columns:1fr}}

.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{text-align:left;padding:14px 10px;border-bottom:1px solid var(--line)}
.cart-summary{background:var(--oat);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px}
.cart-summary .total-row{display:flex;justify-content:space-between;font-weight:700;font-size:1.2rem}

.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr}}

.legal-toc{background:var(--oat);border-radius:var(--radius-sm);padding:18px 22px;margin-bottom:2em}
.legal-toc a{display:block;padding:4px 0;text-decoration:underline}

/* utilities */
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-sm{gap:10px}
.gap-md{gap:20px}
.gap-lg{gap:40px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
.mt-sm{margin-top:10px}.mt-md{margin-top:24px}.mt-lg{margin-top:48px}
.mb-sm{margin-bottom:10px}.mb-md{margin-bottom:24px}.mb-lg{margin-bottom:48px}
.text-center{text-align:center}

/* COMPONENTS: .class - what it is */
/* .container - centered max-width wrapper */
/* .btn, .btn--ghost, .btn--clay, .btn--on-dark - button variants with fill-sweep hover */
/* .site-header, .brand, .site-nav, .cart-link, .nav-toggle - header/nav */
/* .site-footer, .footer-grid, .footer-bottom, .newsletter-form - footer */
/* .cookie-banner, .cookie-actions - cookie consent banner */
/* .hero, .hero-grid, .hero-art, .marquee, .marquee-track - home hero + motion */
/* .grain-overlay - SVG feTurbulence texture layer */
/* .section, .section-head, .eyebrow - generic section scaffolding */
/* .masonry, .masonry-item - home masonry gallery with hover reveal */
/* .product-strip, .product-grid, .card, .card-img, .card-body, .card-price, .card-tags, .tag - product cards */
/* .planner, .planner-controls, .basket-row - signature Kosár Tervező feature */
/* .divider, .badge-seal - decorative SVG dividers/seals */
/* .reveal, .reveal-stagger - scroll reveal animation hooks */
/* .page-hero - inner page hero band */
/* .breadcrumbs - breadcrumb trail */
/* .prose - readable long-form legal/text content */
/* .notice, .notice--info, .notice--warn - callout boxes */
/* .form-grid, .field, .field-error, .field--full, .form-feedback, .form-thanks, .honeypot - form system */
/* .faq, .faq-item - details/summary FAQ accordion */
/* .product-detail - product page layout */
/* .cart-table, .cart-summary - cart/checkout layout */
/* .contact-layout - contact page split layout */
/* .legal-toc - legal page table of contents */
/* .flex, .flex-wrap, .items-center, .justify-between, .gap-sm/md/lg - flex utilities */
/* .grid-2, .grid-3 - grid utilities */
/* .mt-*, .mb-* - spacing utilities */
/* .text-center - text alignment utility */