/* ==== Kostymy Lípa — design system ==== */
:root{
  --olive-900:#2f3420; --olive-700:#4a5330; --olive-500:#6b7a42;
  --mustard-500:#d9a41a; --mustard-300:#f0c868;
  --brick-600:#9c4a2f; --brick-700:#7c3a24;
  --paper:#f7f4ec; --paper-dim:#efe9da; --ink:#201d17; --ink-soft:#54503f;
  --line:#d8d0bb;
  --radius:2px;
  --ff-display:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --ff-body:"Avenir Next","Segoe UI",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --maxw:1240px;
  --space-1:.5rem; --space-2:1rem; --space-3:1.75rem; --space-4:3rem; --space-5:5rem;
}
*{box-sizing:border-box;}
html,body{overflow-x:clip;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff-body);line-height:1.5;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;margin:0 0 .5em;letter-spacing:-.01em;}
p{margin:0 0 1em;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--brick-600);outline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ==== Layout helpers ==== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-3);}
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--space-4);}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr;}}
.section{padding:var(--space-5) 0;}
.mt-1{margin-top:var(--space-1);} .mt-2{margin-top:var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);}
.mb-1{margin-bottom:var(--space-1);} .mb-2{margin-bottom:var(--space-2);} .mb-3{margin-bottom:var(--space-3);}
.label{font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--ink-soft);}

/* ==== Header ==== */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);}
.site-header__inner{max-width:var(--maxw);margin:0 auto;padding:.9rem var(--space-3);display:flex;align-items:center;gap:var(--space-3);}
.logo{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;}
.logo__mark{flex:0 0 auto;}
.logo__word{font-family:var(--ff-display);font-size:1.25rem;letter-spacing:.01em;}
.logo__word em{font-style:italic;color:var(--brick-600);}
.logo__word--footer{font-size:1.4rem;display:block;margin-bottom:.6rem;}
.main-nav{display:flex;gap:var(--space-3);margin-left:var(--space-3);flex:1;}
.main-nav a{font-size:.95rem;position:relative;padding:.3rem 0;color:var(--ink-soft);}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--brick-600);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.main-nav a:hover::after,.main-nav a.is-active::after{transform:scaleX(1);}
.main-nav a.is-active{color:var(--ink);}
.header-actions{display:flex;align-items:center;gap:var(--space-2);}
.cart-link{position:relative;display:flex;align-items:center;padding:.4rem;color:var(--ink);}
.cart-count{position:absolute;top:-2px;right:-4px;background:var(--brick-600);color:#fff;font-size:.65rem;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.cart-count.bump{animation:bump .35s ease;}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.5);}100%{transform:scale(1);}}
.nav-toggle{display:none;background:none;border:0;padding:.4rem;color:var(--ink);cursor:pointer;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

@media(max-width:860px){
  .main-nav{position:fixed;inset:0 0 0 auto;top:65px;width:min(78vw,320px);height:calc(100vh - 65px);background:var(--paper);flex-direction:column;padding:var(--space-3);gap:var(--space-2);border-left:1px solid var(--line);
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility .3s;margin-left:0;}
  .main-nav.is-open{transform:translateX(0);visibility:visible;}
  .nav-toggle{display:flex;}
}

/* ==== Buttons ==== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.4rem;border-radius:var(--radius);border:1px solid var(--ink);font-size:.92rem;letter-spacing:.02em;cursor:pointer;background:transparent;color:var(--ink);min-height:44px;position:relative;overflow:hidden;transition:color .25s ease;}
.btn--primary{background:var(--olive-900);color:var(--paper);border-color:var(--olive-900);}
.btn--sweep{isolation:isolate;}
.btn--sweep::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--brick-600);transition:left .3s ease;z-index:-1;}
.btn--sweep:hover::before{left:0;}
.btn--sweep:hover{color:#fff;border-color:var(--brick-600);}
.btn--ghost-dark{border:1px solid var(--mustard-300);color:var(--mustard-300);background:transparent;}
.btn--ghost-dark:hover{background:var(--mustard-300);color:var(--olive-900);}
.btn--full{width:100%;}
.btn[disabled]{opacity:.6;cursor:not-allowed;}

/* ==== Reveal / motion ==== */
.reveal{opacity:1;}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);clip-path:inset(0 0 15% 0);transition:opacity .7s ease,transform .7s ease,clip-path .7s ease;}
  .reveal.in-view{opacity:1;transform:none;clip-path:inset(0 0 0 0);}
  .reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms);}
}

/* ==== Hero / pin-drop ==== */
.hero{position:relative;padding:var(--space-5) 0 var(--space-4);overflow:hidden;}
.hero__route{position:absolute;inset:0;pointer-events:none;}
.route-line{stroke:var(--brick-600);stroke-width:2;fill:none;stroke-dasharray:6 8;stroke-dashoffset:400;}
@media(prefers-reduced-motion:no-preference){
  .route-line{animation:draw 2.6s ease forwards;}
}
@keyframes draw{to{stroke-dashoffset:0;}}
.pin{opacity:0;transform:translateY(-14px);}
@media(prefers-reduced-motion:no-preference){
  .pin{animation:drop .5s ease forwards;animation-delay:1.9s;}
}
@keyframes drop{to{opacity:1;transform:translateY(0);}}

/* ==== Sticky-left home composition ==== */
.story{display:grid;grid-template-columns:1fr;gap:var(--space-4);}
@media(min-width:960px){.story{grid-template-columns:.9fr 1.3fr;align-items:start;}}
.story__sticky{position:relative;}
@media(min-width:960px){.story__sticky{position:sticky;top:90px;}}
.story__scroll > section{padding:var(--space-4) 0;border-top:1px solid var(--line);}
.story__scroll > section:first-child{border-top:none;}

/* ==== Museum label / gallery ==== */
.gallery-frame{border:1px solid var(--ink);padding:.6rem;background:var(--paper);box-shadow:6px 6px 0 var(--paper-dim);}
.gallery-frame img{width:100%;height:100%;object-fit:cover;}
.museum-label{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:.5rem;margin-top:.6rem;}

/* ==== Cards / product strip ==== */
.product-strip{display:grid;grid-auto-flow:column;grid-auto-columns:260px;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-1);scroll-snap-type:x mandatory;}
@media(min-width:900px){.product-strip{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;}}
.product-card{scroll-snap-align:start;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;}
.product-card:hover{transform:translateY(-6px);box-shadow:0 14px 26px -16px rgba(0,0,0,.35);}
.product-card__img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-dim);}
.product-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.product-card:hover .product-card__img img{transform:scale(1.07);}
.product-card__body{padding:var(--space-2);display:flex;flex-direction:column;gap:.35rem;flex:1;}
.product-card__cat{font-family:var(--ff-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--brick-600);}
.product-card__name{font-size:1.05rem;margin:0;}
.product-card__price{margin-top:auto;font-family:var(--ff-mono);font-size:.95rem;}

/* ==== Signature feature: Kostýmový kompletář ==== */
.kompletar{background:var(--olive-900);color:var(--paper);border-radius:var(--radius);padding:var(--space-4);position:relative;overflow:hidden;}
.kompletar__grid{display:grid;gap:var(--space-3);}
@media(min-width:760px){.kompletar__grid{grid-template-columns:1fr 1fr 1fr;}}
.kompletar__col h4{color:var(--mustard-300);font-family:var(--ff-mono);text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;}
.kompletar__choice{display:block;width:100%;text-align:left;border:1px solid rgba(247,244,236,.3);background:transparent;color:var(--paper);padding:.6rem .8rem;margin-bottom:.4rem;border-radius:var(--radius);cursor:pointer;min-height:44px;}
.kompletar__choice.is-selected{border-color:var(--mustard-300);background:rgba(217,164,26,.18);}
.kompletar__total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(247,244,236,.3);margin-top:var(--space-3);padding-top:var(--space-2);font-family:var(--ff-mono);font-size:1.1rem;}

/* ==== Decorative dividers / patterns ==== */
.divider{width:100%;height:auto;display:block;color:var(--brick-600);}
.grain-overlay{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;opacity:.045;mix-blend-mode:multiply;z-index:1;}

/* ==== Page hero (inner pages) ==== */
.page-hero{padding:var(--space-4) 0 var(--space-3);border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);}
.page-hero p{color:var(--ink-soft);max-width:48ch;}

/* ==== Breadcrumbs ==== */
.breadcrumbs{font-family:var(--ff-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:var(--space-2);}
.breadcrumbs a:hover{color:var(--brick-600);}

/* ==== Prose (legal) ==== */
.prose{max-width:68ch;}
.prose h2{margin-top:1.8em;font-size:1.4rem;}
.prose h3{margin-top:1.3em;font-size:1.1rem;}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li{margin-bottom:.4em;}
.legal-toc{border:1px solid var(--line);padding:var(--space-2);margin-bottom:var(--space-3);max-width:68ch;}
.legal-toc h2{font-size:1rem;margin-bottom:.6em;}
.legal-toc ol{margin:0;padding-left:1.3em;}

/* ==== Notices ==== */
.notice{border:1px solid var(--line);border-left:4px solid var(--brick-600);padding:var(--space-2);background:#fff;}
.notice--success{border-left-color:var(--olive-500);}
.notice--error{border-left-color:var(--brick-700);}

/* ==== Forms ==== */
.form-grid{display:grid;gap:var(--space-2);max-width:640px;}
@media(min-width:620px){.form-grid.cols-2{grid-template-columns:1fr 1fr;}}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field label{font-size:.85rem;color:var(--ink-soft);}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;padding:.65rem .75rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff;accent-color:var(--brick-600);min-height:44px;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brick-600);}
.field-error{color:var(--brick-700);font-size:.82rem;margin:.2rem 0 0;}
.field-row{display:flex;gap:.5rem;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.form-msg{min-height:1.2em;font-size:.88rem;}
.form-msg.is-success{color:var(--olive-500);}
.form-msg.is-error{color:var(--brick-700);}

/* ==== FAQ ==== */
.faq{max-width:68ch;display:flex;flex-direction:column;gap:.6rem;}
.faq-item{border:1px solid var(--line);padding:.2rem var(--space-2);border-radius:var(--radius);background:#fff;}
.faq-item summary{cursor:pointer;padding:.8rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:var(--ff-mono);font-size:1.2rem;color:var(--brick-600);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding-bottom:.9rem;color:var(--ink-soft);}

/* ==== Product detail ==== */
.product-detail{display:grid;gap:var(--space-4);}
@media(min-width:880px){.product-detail{grid-template-columns:1fr 1fr;}}
.product-detail__meta{display:flex;flex-direction:column;gap:var(--space-2);}
.product-detail__price{font-family:var(--ff-mono);font-size:1.6rem;}
.product-detail__sizes{display:flex;gap:.5rem;flex-wrap:wrap;}
.size-opt{border:1px solid var(--ink);padding:.45rem .8rem;border-radius:var(--radius);cursor:pointer;min-height:44px;}
.size-opt.is-selected{background:var(--olive-900);color:#fff;border-color:var(--olive-900);}
.mode-toggle{display:flex;gap:.5rem;}
.mode-toggle button{flex:1;}

/* ==== Cart ==== */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:var(--space-3);}
.cart-table th,.cart-table td{text-align:left;padding:.8rem .5rem;border-bottom:1px solid var(--line);}
.cart-table img{width:64px;height:80px;object-fit:cover;}
.qty-input{width:60px;padding:.4rem;border:1px solid var(--line);min-height:40px;}
.cart-summary{border:1px solid var(--line);padding:var(--space-3);max-width:360px;margin-left:auto;background:#fff;}
.cart-summary__row{display:flex;justify-content:space-between;padding:.4rem 0;}
.cart-summary__row--total{font-family:var(--ff-mono);font-size:1.2rem;border-top:1px solid var(--line);margin-top:.4rem;padding-top:.6rem;}

/* ==== Contact layout ==== */
.contact-layout{display:grid;gap:var(--space-4);}
@media(min-width:880px){.contact-layout{grid-template-columns:1fr 1fr;}}
.contact-info{display:flex;flex-direction:column;gap:var(--space-2);}
.contact-info__row{display:flex;gap:.6rem;align-items:flex-start;}
.contact-info__row svg{flex:0 0 auto;margin-top:.15rem;color:var(--brick-600);}

/* ==== Toast ==== */
.kl-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--olive-900);color:var(--paper);padding:.8rem 1.4rem;border-radius:var(--radius);font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:80;}
.kl-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}

/* ==== Footer ==== */
.site-footer{background:var(--olive-900);color:var(--paper-dim);margin-top:var(--space-5);}
.site-footer__inner{max-width:var(--maxw);margin:0 auto;padding:var(--space-4) var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:1fr;}
@media(min-width:760px){.site-footer__inner{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-col h3{font-family:var(--ff-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mustard-300);margin-bottom:.8rem;}
.footer-col a{display:block;padding:.25rem 0;color:var(--paper-dim);}
.footer-col a:hover{color:var(--mustard-300);}
.footer-addr{display:flex;gap:.4rem;align-items:center;font-size:.88rem;color:var(--paper-dim);}
.footer-mail{display:flex;gap:.4rem;align-items:center;margin-top:.6rem;font-size:.9rem;}
.newsletter-form input[type=email]{flex:1;border:1px solid rgba(247,244,236,.4);background:rgba(247,244,236,.06);color:var(--paper);min-height:44px;padding:.6rem;border-radius:var(--radius);}
.newsletter-form input[type=email]::placeholder{color:rgba(247,244,236,.5);}
.site-footer__bottom{border-top:1px solid rgba(247,244,236,.15);text-align:center;padding:var(--space-2);font-size:.8rem;}

/* ==== Cookie banner ==== */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--olive-900);color:var(--paper);padding:var(--space-2) var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:space-between;z-index:90;border-top:1px solid rgba(247,244,236,.2);}
.cookie-banner p{margin:0;max-width:60ch;font-size:.9rem;}
.cookie-banner__actions{display:flex;gap:.6rem;flex:0 0 auto;}

/* ==== Utility grid ==== */
.grid-3{display:grid;gap:var(--space-3);grid-template-columns:1fr;}
@media(min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr);}}
.aspect-4-5{aspect-ratio:4/5;}
.aspect-16-9{aspect-ratio:16/9;}
.text-center{text-align:center;}

@media(max-width:390px){
  .wrap{padding:0 1rem;}
}

/* COMPONENTS:
.wrap - centered max-width content container
.section - vertical page section spacing
.grid-2 / .grid-3 - responsive 2/3 column grid
.label - small mono uppercase tag label
.site-header / .site-header__inner - sticky top header bar
.logo / .logo__mark / .logo__word - brand logo lockup
.main-nav - primary nav list (mobile off-canvas)
.cart-link / .cart-count - header cart icon + live count badge
.nav-toggle - mobile menu hamburger/close button
.btn / .btn--primary / .btn--sweep / .btn--ghost-dark / .btn--full - button variants
.reveal / .reveal-stagger / .in-view - scroll reveal animation hooks
.hero / .hero__route / .route-line / .pin - home hero pin-drop route animation
.story / .story__sticky / .story__scroll - sticky-left scrolling-right composition
.gallery-frame / .museum-label - framed photo with museum label caption
.product-strip / .product-card / .product-card__img/__body/__cat/__name/__price - catalog cards
.kompletar / .kompletar__grid / .kompletar__col / .kompletar__choice / .kompletar__total - signature costume configurator
.divider - decorative inline SVG section divider
.grain-overlay - fixed full-viewport SVG grain texture
.page-hero - inner page header band
.breadcrumbs - page breadcrumb trail
.prose - long-form legal text measure
.legal-toc - legal page table of contents box
.notice / .notice--success / .notice--error - inline message boxes
.form-grid / .field / .field-error / .field-row / .hp-field / .form-msg - form layout system
.faq / .faq-item - details/summary FAQ accordion
.product-detail / .product-detail__meta/__price/__sizes / .size-opt / .mode-toggle - product page layout
.cart-table / .cart-summary / .qty-input - cart/checkout tables
.contact-layout / .contact-info / .contact-info__row - contact page split layout
.kl-toast - transient bottom toast notification
.site-footer / .footer-col - site footer grid
.cookie-banner - bottom cookie consent bar
.aspect-4-5 / .aspect-16-9 - aspect ratio utilities
*/

/* ==== Footer column variants & lead text ==== */
.lead{font-size:1.05rem;line-height:1.6;}
.footer-col--brand{display:flex;flex-direction:column;gap:var(--space-1);}
.footer-col--news{display:flex;flex-direction:column;gap:var(--space-1);}

/* wg-contrast-autofix */
#newsletter-form div.field-row button.btn.btn--sweep { color: #ffffff !important; }