/* ===== Sesiri Zora - design system ===== */
:root{
  --c-cream:#f3ead9;
  --c-navy:#1b2a4a;
  --c-tomato:#e8532b;
  --c-mustard:#f2c14e;
  --c-walnut:#5a3e2b;
  --c-teal:#1f7a6c;
  --c-ink:#201a14;
  --font-display:"Iowan Old Style","Georgia",serif;
  --font-body:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --radius:14px;
  --shadow-paper:0 10px 30px -10px rgba(27,42,74,.35), 0 2px 6px rgba(27,42,74,.15);
  --maxw:1180px;
}
html,body{overflow-x:clip}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--c-cream);color:var(--c-ink);
  font-family:var(--font-body);line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);margin:0 0 .5em;line-height:1.1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--c-tomato);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
.section{padding-block:clamp(3rem,6vw,6rem)}

/* grain overlay */
.grain{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:var(--c-cream);border-bottom:3px solid var(--c-navy)}
.site-header-inner{max-width:var(--maxw);margin-inline:auto;padding:.9rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--c-navy)}
.logo-mark{width:38px;height:38px;flex:none}
.logo-word{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.01em}
.logo-word em{font-style:normal;color:var(--c-tomato)}
.nav-toggle{display:none;background:none;border:2px solid var(--c-navy);border-radius:8px;padding:.3rem;color:var(--c-navy);cursor:pointer}
.site-nav{display:flex;align-items:center;gap:1.4rem}
.site-nav a{text-decoration:none;font-weight:600;color:var(--c-navy);position:relative;padding-block:.2rem}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--c-tomato);transition:right .25s ease}
.site-nav a:hover::after,.site-nav a.is-active::after{right:0}
.site-nav a.is-active{color:var(--c-tomato)}
.nav-cart{display:flex;align-items:center;gap:.3rem}
.cart-count{background:var(--c-tomato);color:#fff;font-size:.75rem;font-weight:700;border-radius:999px;min-width:1.4em;height:1.4em;display:inline-flex;align-items:center;justify-content:center;padding:0 .3em}
.nav-cart.bump .cart-count{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .site-nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--c-navy);flex-direction:column;align-items:flex-start;padding:5rem 1.5rem 2rem;gap:1.2rem;
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease}
  .site-nav.is-open{transform:translateX(0);visibility:visible}
  .site-nav a{color:var(--c-cream)}
  .site-nav a.is-active{color:var(--c-mustard)}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;border-radius:999px;font-weight:700;font-family:var(--font-body);
  padding:.75rem 1.5rem;border:2px solid var(--c-navy);cursor:pointer;text-decoration:none;min-height:44px;position:relative;overflow:hidden;isolation:isolate}
.btn-fill{background:var(--c-navy);color:var(--c-cream)}
.btn-fill::before{content:"";position:absolute;inset:0;width:100%;left:-100%;background:var(--c-tomato);transition:left .3s ease;z-index:-1}
.btn-fill:hover::before{left:0}
.btn-outline{background:transparent;color:var(--c-navy)}
.btn-outline:hover{background:var(--c-navy);color:var(--c-cream)}
.btn-ghost{background:transparent;color:var(--c-cream);border-color:var(--c-cream)}
.btn-ghost:hover{background:var(--c-cream);color:var(--c-navy)}
.btn-sm{padding:.45rem 1rem;min-height:36px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{opacity:1;transform:none}
.reveal-1{transition-delay:.05s}.reveal-2{transition-delay:.15s}.reveal-3{transition-delay:.25s}.reveal-4{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- hero / page-hero ---- */
.hero{position:relative;padding-block:clamp(2.5rem,7vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
.hero-blob{position:absolute;z-index:0;width:120%;max-width:640px;top:-10%;right:-10%;animation:blobmorph 16s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero-blob{animation:none}}
@keyframes blobmorph{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(6deg)}}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.01em}
.hero-media{position:relative}
.hero-media img{position:relative;z-index:1;border-radius:var(--radius);box-shadow:var(--shadow-paper);aspect-ratio:4/5;object-fit:cover;width:100%}
.hero-kicker{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--c-teal);margin-bottom:.8rem}

.page-hero{background:var(--c-navy);color:var(--c-cream);padding-block:clamp(2.6rem,5vw,4rem);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--c-cream)}
.page-hero p{max-width:46ch;opacity:.85}
.page-hero .breadcrumbs{color:var(--c-mustard)}

.breadcrumbs{font-size:.85rem;font-weight:600;display:flex;gap:.4rem;flex-wrap:wrap}
.breadcrumbs a{text-decoration:none;opacity:.8}
.breadcrumbs a:hover{text-decoration:underline}

/* ---- section index (magazine style) ---- */
.index-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--c-navy);border:1px solid var(--c-navy);margin-block:2rem}
.index-nav a{background:var(--c-cream);color:var(--c-navy);text-decoration:none;padding:1rem .8rem;font-weight:700;display:flex;gap:.5rem;align-items:baseline}
.index-nav a span{font-family:var(--font-display);color:var(--c-tomato);font-size:1.2rem}
.index-nav a:hover{background:var(--c-mustard)}

/* ---- dividers / ornaments ---- */
.footer-divider{width:100%;height:32px;display:block}
.ornament{width:100%;display:block}

/* ---- cards / products ---- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.product-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-paper);text-decoration:none;color:var(--c-ink);
  display:flex;flex-direction:column;transition:transform .3s ease}
.product-card:hover{transform:translateY(-6px)}
.product-card-media{aspect-ratio:4/5;overflow:hidden;position:relative}
.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-badge{position:absolute;top:.7rem;left:.7rem;background:var(--c-tomato);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;text-transform:uppercase}
.product-card-body{padding:1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.35rem}
.product-card-body h3{font-size:1.1rem}
.product-price{font-weight:700;color:var(--c-tomato);font-size:1.05rem}

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

/* ---- signature feature: Pronađi broj ---- */
.size-finder{background:var(--c-navy);color:var(--c-cream);border-radius:var(--radius);padding:clamp(1.6rem,4vw,3rem);position:relative;overflow:hidden}
.size-finder h2{color:var(--c-cream)}
.size-finder-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center}
.size-finder .field label{color:var(--c-cream)}
.size-result{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:1.2rem;min-height:140px}
.size-result-value{font-family:var(--font-display);font-size:2.6rem;color:var(--c-mustard)}
.size-result-sub{opacity:.85}
.size-match{margin-top:.6rem;font-size:.9rem}
.size-match a{color:var(--c-mustard);text-decoration:underline}
@media(max-width:760px){.size-finder-grid{grid-template-columns:1fr}}

/* ---- forms ---- */
.form-grid{display:grid;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-weight:700;font-size:.92rem}
.field input,.field select,.field textarea{
  font:inherit;padding:.7rem .85rem;border:2px solid var(--c-navy);border-radius:10px;background:#fff;color:var(--c-ink);accent-color:var(--c-tomato);min-height:44px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-tomato)}
.field-error{color:var(--c-tomato);font-size:.85rem;min-height:1.1em}
.field-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:600px){.field-2col{grid-template-columns:1fr}}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{min-height:1.4em;font-weight:600}
.form-msg-ok{color:var(--c-teal)}
.form-msg-err{color:var(--c-tomato)}
.newsletter-form{display:flex;gap:.6rem;flex-wrap:wrap}
.newsletter-form input[type=email]{flex:1;min-width:160px;border:2px solid var(--c-cream);border-radius:10px;padding:.65rem .8rem;background:rgba(255,255,255,.08);color:var(--c-cream)}
.newsletter-form .form-msg{flex:0 0 100%}

/* ---- notice ---- */
.notice{border-left:4px solid var(--c-teal);background:#fff;border-radius:0 10px 10px 0;padding:1rem 1.2rem}
.notice-warn{border-color:var(--c-tomato)}

/* ---- prose / legal ---- */
.prose{max-width:68ch;margin-inline:auto}
.prose h2{margin-top:2em;font-size:1.5rem}
.prose h3{margin-top:1.4em;font-size:1.15rem}
.prose p,.prose li{font-size:1rem}
.prose ul,.prose ol{padding-left:1.3rem}
.legal-toc{background:#fff;border:1px solid rgba(27,42,74,.2);border-radius:var(--radius);padding:1.2rem 1.4rem;max-width:68ch;margin:0 auto 2rem}
.legal-toc h2{font-size:1.05rem;margin-bottom:.6rem}
.legal-toc ol{margin:0;padding-left:1.2rem}
.legal-toc a{text-decoration:none}
.legal-toc a:hover{text-decoration:underline}

/* ---- faq ---- */
.faq{max-width:68ch;margin-inline:auto;display:flex;flex-direction:column;gap:.8rem}
.faq-item{background:#fff;border-radius:10px;padding:.2rem 1.2rem;box-shadow:var(--shadow-paper)}
.faq-item summary{cursor:pointer;font-weight:700;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--c-tomato)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0 0 1rem;opacity:.85}

/* ---- product detail ---- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.product-detail-media img{border-radius:var(--radius);box-shadow:var(--shadow-paper);aspect-ratio:4/5;object-fit:cover;width:100%}
.product-detail h1{font-size:clamp(1.8rem,3.5vw,2.6rem)}
.product-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.9rem;opacity:.85;margin-block:1rem}
.qty-row{display:flex;align-items:center;gap:1rem;margin-block:1.2rem}
.qty-input{width:4.5rem;text-align:center}
@media(max-width:800px){.product-detail{grid-template-columns:1fr}}

/* ---- cart / checkout ---- */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{padding:.8rem .6rem;border-bottom:1px solid rgba(27,42,74,.2);text-align:left}
.cart-table img{width:60px;height:60px;object-fit:cover;border-radius:8px}
.cart-row-remove{background:none;border:none;color:var(--c-tomato);font-weight:700;cursor:pointer}
.cart-summary{background:#fff;border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-paper);display:flex;flex-direction:column;gap:.8rem;max-width:360px}
.cart-summary-total{display:flex;justify-content:space-between;font-weight:700;font-size:1.2rem;border-top:2px solid var(--c-navy);padding-top:.6rem}
.cart-empty{text-align:center;padding:3rem 0;opacity:.7}

/* ---- contact ---- */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.contact-info{display:flex;flex-direction:column;gap:1.2rem}
.contact-info-item{display:flex;gap:.8rem;align-items:flex-start}
.contact-info-item svg{flex:none;color:var(--c-tomato)}
@media(max-width:800px){.contact-layout{grid-template-columns:1fr}}

/* ---- icon set ---- */
.icon{width:24px;height:24px}
.icon-row{display:flex;gap:1.6rem;flex-wrap:wrap}
.icon-feature{display:flex;gap:.8rem;align-items:flex-start}
.icon-feature svg{flex:none;color:var(--c-teal);background:var(--c-cream);border-radius:50%;padding:.5rem;box-shadow:0 0 0 2px var(--c-navy) inset}

/* ---- footer ---- */
.site-footer{background:var(--c-navy);color:var(--c-cream);margin-top:2rem}
.site-footer-inner{max-width:var(--maxw);margin-inline:auto;padding:0 1.25rem 2.5rem;display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:2.5rem}
.footer-col h3{color:var(--c-cream);font-size:1.1rem}
.footer-tag{opacity:.8;max-width:30ch}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-links a{text-decoration:none;opacity:.85}
.footer-links a:hover{text-decoration:underline;opacity:1}
.footer-mail{display:flex;gap:.4rem;align-items:center;margin-top:.8rem}
.footer-mail a{text-decoration:none}
.site-footer-bottom{text-align:center;padding:1rem 0 1.6rem;font-size:.85rem;opacity:.7}
@media(max-width:800px){.site-footer-inner{grid-template-columns:1fr;gap:1.8rem}}

/* ---- cookie banner ---- */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;background:var(--c-navy);color:var(--c-cream);border-radius:var(--radius);
  padding:1.2rem 1.4rem;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;justify-content:space-between;box-shadow:var(--shadow-paper);max-width:760px;margin-inline:auto}
.cookie-banner a{color:var(--c-mustard);text-decoration:underline}
.cookie-actions{display:flex;gap:.7rem}

/* ---- utilities ---- */
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.6rem}
.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}
.text-center{text-align:center}
.center-head{max-width:60ch;margin-inline:auto;text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:760px){.grid-2{grid-template-columns:1fr}}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.8rem;color:var(--c-tomato)}
.justify-center{justify-content:center}
.order-2{order:2}

/* COMPONENTS: .section - vertical page section spacing
COMPONENTS: .wrap - max-width content container
COMPONENTS: .hero / .hero-grid / .hero-blob / .hero-media / .hero-kicker - home hero block
COMPONENTS: .page-hero - dark hero band used on every inner page
COMPONENTS: .breadcrumbs - small link trail under page-hero
COMPONENTS: .index-nav - numbered magazine-style section index on home
COMPONENTS: .footer-divider / .ornament - decorative SVG dividers
COMPONENTS: .card-grid - responsive grid for cards
COMPONENTS: .product-card / .product-card-media / .product-card-body / .product-badge / .product-price - catalog/product cards
COMPONENTS: .scroll-strip - horizontal scroll-snap product strip on mobile
COMPONENTS: .size-finder / .size-finder-grid / .size-result / .size-result-value / .size-match - signature hat-size feature
COMPONENTS: .btn / .btn-fill / .btn-outline / .btn-ghost / .btn-sm - buttons with fill-sweep hover
COMPONENTS: .form-grid / .field / .field-2col / .field-error / .hp-field / .form-msg - form building blocks
COMPONENTS: .newsletter-form - footer newsletter signup
COMPONENTS: .notice / .notice-warn - callout boxes
COMPONENTS: .prose - long-form legal/readable text column
COMPONENTS: .legal-toc - table of contents box for legal pages
COMPONENTS: .faq / .faq-item - details/summary FAQ accordion
COMPONENTS: .product-detail / .product-detail-media / .product-meta / .qty-row / .qty-input - single product page
COMPONENTS: .cart-table / .cart-summary / .cart-empty - cart and checkout
COMPONENTS: .contact-layout / .contact-info / .contact-info-item - contact page split layout
COMPONENTS: .icon / .icon-row / .icon-feature - sprite icon usage
COMPONENTS: .site-footer / .footer-col / .footer-links / .footer-mail - footer layout
COMPONENTS: .cookie-banner / .cookie-actions - cookie consent banner
COMPONENTS: .reveal / .reveal-1..4 / .in-view - scroll-reveal animation hooks
COMPONENTS: .flex, .gap-1..3, .mt-2..4, .mb-2..3, .text-center, .center-head, .grid-2, .eyebrow - layout/spacing utilities
*/

.footer-newsletter{display:flex;flex-direction:column;gap:.6rem}
.reveal-5{transition-delay:.45s}.reveal-6{transition-delay:.55s}.reveal-7{transition-delay:.65s}.reveal-8{transition-delay:.75s}.reveal-9{transition-delay:.85s}

/* wg-contrast-autofix */
div.site-footer-inner div.footer-col a.logo span.logo-word { color: #ffffff !important; }