/* Klobuky Zornička — Art-deco revival design system */
@media (prefers-color-scheme: dark) { html { color-scheme: dark light; } }

:root{
  --emerald-900:#0b2e24;
  --emerald-800:#103a2d;
  --emerald-700:#164a39;
  --emerald-100:#eaf3ee;
  --gold:#d4af37;
  --gold-soft:#e8cf7c;
  --black:#0a0a09;
  --ivory:#f6f2e7;
  --paper:#fbf8f0;
  --ink:#1b1b16;
  --radius:2px;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: "Consolas", "SF Mono", monospace;
  --shadow-paper: 0 10px 30px -10px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  --maxw: 1180px;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;letter-spacing:.01em}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ===== Layout helpers ===== */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem}
.section{padding-block:clamp(3rem,6vw,6rem)}
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.stack{display:flex;flex-direction:column;gap:1rem}
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease, clip-path .7s ease}
.reveal.in-view{opacity:1;transform:none}
.reveal--clip{clip-path:inset(0 100% 0 0)}
.reveal--clip.in-view{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion: reduce){.reveal{transition:none;opacity:1;transform:none;clip-path:none}}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.5rem;
  background:var(--emerald-900);
  border-bottom:1px solid var(--gold);
  color:var(--ivory);
}
.brand{display:flex;align-items:center;gap:.6rem}
.brand__mark{width:36px;height:36px;aspect-ratio:1/1}
.brand__word{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory);line-height:1.1}
.brand__word span{display:block;font-size:.72rem;letter-spacing:.3em;color:var(--gold-soft)}

.menu-toggle{
  display:none;background:none;border:1px solid var(--gold);color:var(--gold-soft);
  border-radius:var(--radius);padding:.4rem;min-width:44px;min-height:44px;cursor:pointer;
}
.site-nav{display:flex;align-items:center;gap:1.6rem}
.site-nav ul{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.site-nav a{font-size:.92rem;letter-spacing:.02em;position:relative;padding-bottom:.2rem}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s ease}
.site-nav a:hover::after,.site-nav a.is-active::after{width:100%}
.site-nav a.is-active{color:var(--gold-soft)}
.site-nav__more{display:flex;gap:1rem;opacity:.75;font-size:.82rem}
.site-nav__more a[hidden]{display:none}
.cart-link{position:relative;display:flex;align-items:center;min-width:44px;min-height:44px;justify-content:center}
.cart-badge{
  position:absolute;top:0;right:0;background:var(--gold);color:var(--emerald-900);
  font-size:.68rem;font-weight:700;border-radius:50%;min-width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;transform:translate(30%,-30%);
}
.cart-badge.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:translate(30%,-30%) scale(1)}40%{transform:translate(30%,-30%) scale(1.5)}100%{transform:translate(30%,-30%) scale(1)}}

@media(max-width:860px){
  .menu-toggle{display:flex;align-items:center;justify-content:center}
  .site-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,85vw);height:100vh;
    background:var(--emerald-900);flex-direction:column;align-items:flex-start;
    padding:5rem 1.5rem 2rem;gap:1.5rem;
    transform:translateX(100%);visibility:hidden;transition:transform .35s ease, visibility .35s;
    overflow-y:auto;
  }
  .site-nav.is-open{transform:translateX(0);visibility:visible}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .site-nav__more{flex-direction:column;gap:.7rem}
}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;background:var(--emerald-900);color:var(--ivory);padding-block:clamp(3rem,8vw,7rem)}
.hero__grain{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none;mix-blend-mode:overlay}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem;display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:900px){.hero__inner{grid-template-columns:1.1fr .9fr;align-items:center}}
.hero__eyebrow{color:var(--gold-soft);letter-spacing:.3em;text-transform:uppercase;font-size:.78rem;margin-bottom:.8rem;display:inline-block}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;margin-bottom:1rem}
.hero h1 em{color:var(--gold-soft);font-style:normal}
.hero p.lead{max-width:34ch;color:#d9e6df;font-size:1.08rem}
.hero__ctas{display:flex;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.hero__art{position:relative;aspect-ratio:1/1;max-width:420px}
.hero__art svg{width:100%;height:100%}
.hero__layer{transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s ease}
.hero__photo-collage{position:relative;aspect-ratio:4/5}
.hero__photo-collage img{position:absolute;border-radius:var(--radius);box-shadow:var(--shadow-paper)}
.hero__photo-collage img:first-child{width:72%;inset:0 auto auto 0;z-index:2}
.hero__photo-collage img:last-child{width:52%;right:0;bottom:0;z-index:1;border:6px solid var(--paper)}
.hero__badge{position:absolute;top:-18px;right:-10px;width:88px;height:88px;z-index:3}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.6rem;font-size:.95rem;letter-spacing:.03em;
  border:1px solid var(--gold);border-radius:var(--radius);cursor:pointer;
  position:relative;overflow:hidden;background:transparent;color:var(--ivory);
  min-height:44px;transition:color .3s ease;
}
.btn span, .btn{z-index:1}
.btn::before{content:"";position:absolute;inset:0;width:100%;left:-100%;background:var(--gold);transition:left .35s ease;z-index:-1}
.btn:hover::before{left:0}
.btn--gold{background:var(--gold);color:var(--emerald-900);border-color:var(--gold)}
.btn--gold::before{background:var(--emerald-900);}
.btn--gold:hover{color:var(--ivory)}
.btn--ghost{background:transparent;color:var(--ivory);border-color:var(--ivory)}
.btn--ghost::before{background:var(--ivory)}
.btn--ghost:hover{color:var(--emerald-900)}
.btn--dark{background:var(--emerald-900);color:var(--ivory);border-color:var(--emerald-900)}
.btn--dark::before{background:var(--gold)}
.btn--dark:hover{color:var(--emerald-900)}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ===== Section headers / dividers ===== */
.section-head{text-align:left;max-width:62ch;margin-bottom:2.2rem}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.section-head .eyebrow{color:var(--emerald-700);letter-spacing:.25em;text-transform:uppercase;font-size:.78rem}
.divider-sunburst{display:block;width:100%;height:60px}
.ornament-row{display:flex;justify-content:center;margin-block:1rem}
.ornament-row svg{width:120px;height:28px}

/* ===== Cards ===== */
.card{
  background:var(--paper);border:1px solid rgba(11,46,36,.1);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-paper);transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover{transform:translateY(-6px)}
.product-card{display:flex;flex-direction:column}
.product-card__media{aspect-ratio:4/5;overflow:hidden;background:var(--emerald-100)}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .product-card__media img{transform:scale(1.07)}
.product-card__body{padding:1.1rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.product-card__cat{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald-700)}
.product-card__name{font-family:var(--font-display);font-size:1.15rem}
.product-card__price{margin-top:auto;font-weight:700;color:var(--emerald-900)}

.strip{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.strip .product-card{min-width:240px;scroll-snap-align:start}
@media(min-width:860px){.strip{overflow:visible;display:grid;grid-template-columns:repeat(4,1fr)}}

/* ===== Feature: Zorničkin Merač ===== */
.sizer{
  background:var(--emerald-900);color:var(--ivory);border-radius:var(--radius);
  padding:clamp(1.8rem,4vw,3rem);display:grid;gap:2rem;position:relative;overflow:hidden;
}
.sizer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%, rgba(212,175,55,.18), transparent 60%)}
@media(min-width:800px){.sizer{grid-template-columns:1fr 1fr;align-items:center}}
.sizer__form{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;position:relative;z-index:1}
.sizer__form .field{flex:1;min-width:160px}
.sizer__result{background:rgba(255,255,255,.06);border:1px solid var(--gold);border-radius:var(--radius);padding:1.3rem;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:.4rem;position:relative;z-index:1}
.sizer__result strong{font-family:var(--font-display);font-size:1.8rem;color:var(--gold-soft)}

/* ===== Forms ===== */
.form-grid{display:grid;gap:1.1rem}
@media(min-width:640px){.form-grid--2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.85rem;letter-spacing:.02em}
.field input,.field select,.field textarea{
  font:inherit;padding:.7rem .8rem;border:1px solid rgba(11,46,36,.35);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);accent-color:var(--emerald-700);min-height:44px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field-error{color:#8a2f2f;font-size:.82rem;min-height:1.1em}
.newsletter-row{display:flex;gap:.6rem}
.newsletter-row input{flex:1}
.form-status{min-height:1.4em;font-size:.88rem}
.notice{padding:.9rem 1.1rem;border-radius:var(--radius);font-size:.92rem;border:1px solid transparent}
.notice--success{background:#e5f3e9;border-color:#2f7a4d;color:#1e5c38}
.notice--error{background:#fbe9e9;border-color:#8a2f2f;color:#6b2424}
.notice--info{background:var(--emerald-100);border-color:var(--emerald-700);color:var(--emerald-900)}

/* ===== Page hero (inner pages) ===== */
.page-hero{background:var(--emerald-900);color:var(--ivory);padding-block:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.4rem}
.page-hero p{max-width:50ch;color:#d9e6df}
.breadcrumbs{font-size:.85rem;color:var(--gold-soft);margin-bottom:.8rem}
.breadcrumbs a{text-decoration:underline;text-decoration-color:rgba(212,175,55,.4)}

/* ===== Prose (legal text) ===== */
.prose{max-width:68ch;margin-inline:auto}
.prose h2{margin-top:2.2rem;font-size:1.4rem}
.prose h3{margin-top:1.6rem;font-size:1.1rem}
.prose p,.prose li{margin-bottom:.9rem}
.prose ul,.prose ol{padding-left:1.4rem;margin-bottom:1rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.legal-toc{background:var(--emerald-100);border:1px solid rgba(11,46,36,.15);border-radius:var(--radius);padding:1.2rem 1.4rem;max-width:68ch;margin:0 auto 2rem}
.legal-toc h2{margin-top:0;font-size:1rem;text-transform:uppercase;letter-spacing:.1em}
.legal-toc ol{padding-left:1.2rem}

/* ===== FAQ ===== */
.faq{max-width:70ch;margin-inline:auto;display:flex;flex-direction:column;gap:.8rem}
.faq-item{border:1px solid rgba(11,46,36,.15);border-radius:var(--radius);background:var(--paper);padding:.2rem 1.2rem}
.faq-item summary{cursor:pointer;padding:1rem 0;font-family:var(--font-display);font-size:1.05rem;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-size:1.4rem;color:var(--gold);transform:translateY(-2px)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{padding-bottom:1rem;margin:0;color:#3a3a32}

/* ===== Product detail ===== */
.product-detail{display:grid;gap:2rem}
@media(min-width:860px){.product-detail{grid-template-columns:1fr 1fr}}
.product-detail__media{position:relative}
.product-detail__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-paper)}
.product-detail__price{font-size:1.6rem;font-family:var(--font-display);color:var(--emerald-900)}
.product-detail__list{margin:1rem 0;padding-left:1.2rem;list-style:disc;color:#3a3a32}
.qty-input{display:flex;align-items:center;border:1px solid rgba(11,46,36,.35);border-radius:var(--radius);width:fit-content}
.qty-input button{width:40px;height:44px;background:none;border:none;font-size:1.1rem;cursor:pointer}
.qty-input input{width:48px;border:none;text-align:center;font:inherit;min-height:44px}

/* ===== Cart ===== */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{padding:.9rem .6rem;border-bottom:1px solid rgba(11,46,36,.12);text-align:left;vertical-align:middle}
.cart-table img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius)}
.cart-summary{background:var(--emerald-100);border-radius:var(--radius);padding:1.5rem;max-width:380px;margin-left:auto;display:flex;flex-direction:column;gap:.8rem}
.cart-summary__row{display:flex;justify-content:space-between}
.cart-summary__total{font-weight:700;font-size:1.2rem;border-top:1px solid rgba(11,46,36,.2);padding-top:.6rem}

/* ===== Contact layout ===== */
.contact-layout{display:grid;gap:2.5rem}
@media(min-width:860px){.contact-layout{grid-template-columns:1fr 1fr}}
.contact-info{display:flex;flex-direction:column;gap:1.3rem}
.contact-info__item{display:flex;gap:.8rem;align-items:flex-start}
.contact-info__item svg{color:var(--gold);flex-shrink:0;margin-top:.1rem}

/* ===== Icon lists (used in delivery/returns/faq) ===== */
.icon-list{display:grid;gap:1.4rem}
@media(min-width:720px){.icon-list{grid-template-columns:repeat(3,1fr)}}
.icon-list__item{display:flex;flex-direction:column;gap:.6rem}
.icon-list__item svg{color:var(--gold)}

/* ===== Collage / asymmetric home sections ===== */
.collage{position:relative;display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:860px){.collage{grid-template-columns:repeat(6,1fr);align-items:start}}
.collage__photo{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-paper)}
.collage__photo img{width:100%;height:100%;object-fit:cover}
.collage__caption{position:absolute;bottom:0;left:0;right:0;padding:1rem;background:linear-gradient(to top, rgba(11,46,36,.85), transparent);color:var(--ivory);font-family:var(--font-display)}
.collage__shape{position:absolute;color:var(--gold);opacity:.8}

/* ===== Cookie banner ===== */
.cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;
  background:var(--emerald-900);color:var(--ivory);border:1px solid var(--gold);
  border-radius:var(--radius);padding:1.1rem 1.3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  max-width:720px;margin-inline:auto;box-shadow:var(--shadow-paper);
}
.cookie-banner a{text-decoration:underline;color:var(--gold-soft)}
.cookie-banner__actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* ===== Footer ===== */
.site-footer{background:var(--emerald-900);color:#cfe0d8;padding-block:3rem 1.5rem}
.site-footer__grid{max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem;display:grid;gap:2.2rem;grid-template-columns:1fr}
@media(min-width:720px){.site-footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr}}
.footer-brand p{max-width:28ch;font-size:.92rem}
.footer-mail{display:flex;align-items:center;gap:.4rem}
.footer-mail a{text-decoration:underline;text-decoration-color:rgba(212,175,55,.4)}
.footer-col h3{color:var(--gold-soft);font-family:var(--font-body);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.9rem}
.footer-col ul{display:flex;flex-direction:column;gap:.55rem;font-size:.9rem}
.footer-col a:hover{color:var(--gold-soft)}
.site-footer__bottom{max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(212,175,55,.25);font-size:.8rem;color:#9db6ab}

/* ===== 404 ===== */
.error-404{text-align:center;padding-block:clamp(3rem,10vw,7rem)}
.error-404 h1{font-size:clamp(4rem,12vw,8rem);color:var(--emerald-900)}

@media(max-width:480px){
  .hero__ctas{flex-direction:column;align-items:stretch}
  .sizer__form{flex-direction:column;align-items:stretch}
  .newsletter-row{flex-direction:column}
}

/*
COMPONENTS:
.wrap - centered max-width content container
.section - vertical page section spacing
.grid / .grid-2 / .grid-3 - responsive CSS grid wrappers
.stack - vertical flex stack with gap
.reveal / .reveal--clip / .in-view - scroll-reveal animation hooks
.site-header / .brand / .brand__mark / .brand__word - page header & logo
.menu-toggle - mobile nav hamburger button
.site-nav / .site-nav__more / .is-open / .is-active - main navigation
.cart-link / .cart-badge / .bump - header cart icon and animated count badge
.hero / .hero__inner / .hero__grain / .hero__eyebrow / .hero__layer - home hero section
.hero__art / .hero__photo-collage / .hero__badge - hero illustration/photo composition
.btn / .btn--gold / .btn--ghost / .btn--dark / .btn--block - button variants with fill-sweep hover
.section-head / .eyebrow - section heading block
.divider-sunburst / .ornament-row - decorative SVG dividers
.card / .product-card / .product-card__media / .product-card__body / .product-card__cat / .product-card__name / .product-card__price - catalog product card
.strip - horizontal scroll-snap product strip (mobile)
.sizer / .sizer__form / .sizer__result - "Zorničkin Merač" signature hat-size feature
.form-grid / .form-grid--2 / .field / .field-error - form layout and fields
.newsletter-row / .form-status - footer newsletter form
.notice / .notice--success / .notice--error / .notice--info - inline status/alert messages
.page-hero / .breadcrumbs - inner page hero banner and breadcrumb trail
.prose - readable long-form legal/content text measure
.legal-toc - table of contents box for legal pages
.faq / .faq-item - FAQ accordion (details/summary)
.product-detail / .product-detail__media / .product-detail__price / .product-detail__list - product page layout
.qty-input - quantity stepper control
.cart-table / .cart-summary / .cart-summary__row / .cart-summary__total - cart/checkout tables
.contact-layout / .contact-info / .contact-info__item - contact page layout
.icon-list / .icon-list__item - icon+text feature list (delivery/returns/faq)
.collage / .collage__photo / .collage__caption / .collage__shape - asymmetric photo collage sections
.cookie-banner / .cookie-banner__actions - cookie consent banner
.site-footer / .site-footer__grid / .footer-brand / .footer-col / .site-footer__bottom - site footer
.error-404 - 404 page content block
.visually-hidden - accessible hide-but-not-from-screen-readers utility
*/

/* ===== Footer Newsletter ===== */
.footer-newsletter{display:flex;flex-direction:column;gap:1rem}
.footer-newsletter .newsletter-row{flex-direction:column;gap:.6rem}
.footer-newsletter input{background:rgba(255,255,255,.06);border:1px solid rgba(212,175,55,.3);color:var(--ivory)}
.footer-newsletter input::placeholder{color:rgba(212,175,55,.5)}
.footer-newsletter button{background:var(--gold);color:var(--emerald-900);border:1px solid var(--gold);padding:.7rem 1rem;min-height:44px;border-radius:var(--radius);cursor:pointer;font-weight:600;transition:background .3s ease}
.footer-newsletter button:hover{background:var(--gold-soft)}

/* ===== Product Gallery ===== */
.product-gallery{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2rem}
@media(min-width:720px){.product-gallery{grid-template-columns:repeat(2,1fr)}}
.product-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-paper);display:block}

/* ===== Product Detail Body ===== */
.product-detail__body{display:flex;flex-direction:column;gap:1.5rem;padding-top:.5rem}
.product-detail__body h1{font-size:clamp(1.6rem,3vw,2rem);color:var(--emerald-900);margin:0 0 .5rem}
.product-detail__body p{color:#3a3a32;margin:0}
.product-detail__body > div{display:flex;flex-direction:column;gap:1rem}