/* ===== Tegle Kap — Claymorphism design system ===== */
:root{
  --oat-1:#fbf6ec; --oat-2:#f3e9d7; --oat-3:#e8dcc3;
  --sage-1:#eef1e4; --sage-2:#cdd9b4; --sage-3:#a7bb84; --sage-4:#8a9a6b; --sage-5:#5f6e47;
  --clay-1:#f1d9c0; --clay-2:#d4a373; --clay-3:#b98a63; --clay-4:#935f3f;
  --ink:#3f3a34; --ink-soft:#6b6354;
  --paper:#fffdf9;
  --radius-lg:28px; --radius-md:18px; --radius-sm:12px;
  --shadow-out: 8px 8px 18px rgba(93,76,51,.18), -6px -6px 14px rgba(255,255,255,.7);
  --shadow-in: inset 4px 4px 10px rgba(93,76,51,.14), inset -4px -4px 10px rgba(255,255,255,.6);
  --shadow-soft: 6px 10px 24px rgba(93,76,51,.12);
  --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;
}
*{box-sizing:border-box;}
html,body{overflow-x:clip;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--oat-1); line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--clay-4); text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; color:var(--ink);}
p{margin:0 0 1em;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
:focus-visible{outline:3px solid var(--sage-4); outline-offset:3px; border-radius:6px;}
.section{padding:clamp(3rem,6vw,6rem) clamp(1.2rem,4vw,3rem); max-width:1240px; margin:0 auto;}
.grid{display:grid; gap:1.5rem;}
.flow > * + *{margin-top:1rem;}
.mt-0{margin-top:0;} .mt-1{margin-top:1rem;} .mt-2{margin-top:2rem;} .mb-0{margin-bottom:0;}
.text-center{text-align:center;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--oat-1); border-bottom:2px solid var(--oat-3);}
.site-header__row{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:.8rem 1.2rem;}
.logo{display:flex; align-items:center; gap:.6rem;}
.logo__mark{width:40px; height:34px; flex:none;}
.logo__word{width:150px; height:31px; flex:none;}
.nav-toggle{display:none; background:var(--sage-2); border:none; border-radius:50%; width:44px; height:44px; align-items:center; justify-content:center; box-shadow:var(--shadow-out); color:var(--ink); cursor:pointer;}
.site-nav{display:flex; align-items:center; gap:1.6rem;}
.site-nav ul{display:flex; gap:1.4rem; list-style:none; margin:0; padding:0;}
.site-nav a{font-weight:600; color:var(--ink-soft); position:relative; padding:.2rem 0;}
.site-nav a::after{content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--clay-3); transition:width .25s ease;}
.site-nav a:hover::after, .site-nav a.is-active::after{width:100%;}
.site-nav a.is-active{color:var(--ink);}
.cart-link{position:relative; display:flex; align-items:center; color:var(--ink);}
.cart-count{position:absolute; top:-8px; right:-10px; background:var(--clay-3); color:#fff; font-size:.7rem; font-weight:700; border-radius:50%; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 2px;}
.cart-count.bump{animation:bump .4s ease;}
@keyframes bump{0%{transform:scale(1);} 40%{transform:scale(1.5);} 100%{transform:scale(1);}}

@media (max-width: 860px){
  .nav-toggle{display:flex;}
  .site-nav{position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px); background:var(--paper); flex-direction:column; align-items:flex-start; padding:5.5rem 1.6rem; gap:2rem;
    transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility .3s ease; box-shadow:-10px 0 30px rgba(0,0,0,.12);}
  .site-nav.is-open{transform:translateX(0); visibility:visible;}
  .site-nav ul{flex-direction:column; gap:1.2rem;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; position:relative; overflow:hidden;
  font-family:var(--font-body); font-weight:700; font-size:.95rem; padding:.85rem 1.6rem; border-radius:50px; border:none;
  cursor:pointer; min-height:44px; isolation:isolate; transition:transform .2s ease, box-shadow .2s ease;}
.btn::before{content:""; position:absolute; inset:0; left:-100%; width:100%; background:rgba(255,255,255,.25); transition:left .35s ease; z-index:-1;}
.btn:hover::before{left:0;}
.btn:active{transform:translateY(1px) scale(.98);}
.btn-primary{background:var(--clay-3); color:#fff; box-shadow:var(--shadow-out);}
.btn-primary:hover{box-shadow:var(--shadow-soft);}
.btn-secondary{background:var(--sage-3); color:var(--ink); box-shadow:var(--shadow-out);}
.btn-ghost{background:transparent; color:var(--ink); border:2px solid var(--ink-soft);}
.btn-ghost:hover{border-color:var(--clay-3); color:var(--clay-4);}
.btn-sm{padding:.55rem 1.2rem; font-size:.85rem;}
.btn-block{width:100%;}
.cookie-banner .btn-ghost{border-color:var(--oat-2); color:var(--oat-1);}

/* ---------- Hero / bento ---------- */
.hero{padding:clamp(2.4rem,6vw,5rem) clamp(1.2rem,4vw,3rem) 2rem; max-width:1240px; margin:0 auto; display:grid; gap:2.5rem; grid-template-columns:1.1fr 1fr; align-items:center;}
.hero h1{font-size:clamp(2.4rem,5.5vw,4rem);}
.hero .underline{position:relative; white-space:nowrap;}
.hero .underline svg{position:absolute; left:0; bottom:-.12em; width:100%; height:.3em; overflow:visible;}
.hero .underline path{stroke-dasharray:240; stroke-dashoffset:240; animation:draw 1.1s .3s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.hero-art{position:relative;}
.hero-art__photo{border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); aspect-ratio:4/5; object-fit:cover; width:100%;}
.hero-art__shape{position:absolute; inset:0; pointer-events:none;}
@media (max-width:820px){ .hero{grid-template-columns:1fr;} }

.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; grid-auto-rows:minmax(120px,auto);}
.bento-tile{background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-out); padding:1.8rem; position:relative; overflow:hidden;}
.bento-tile--feature{grid-column:span 4; grid-row:span 2; background:linear-gradient(155deg,var(--sage-1),var(--oat-2));}
.bento-tile--wide{grid-column:span 2;}
.bento-tile--tall{grid-row:span 2;}
@media (max-width:900px){ .bento{grid-template-columns:repeat(2,1fr);} .bento-tile--feature{grid-column:span 2;} }
@media (max-width:560px){ .bento{grid-template-columns:1fr;} .bento-tile--feature,.bento-tile--wide,.bento-tile--tall{grid-column:span 1; grid-row:auto;} }

/* ---------- Pot Mixer (signature feature) ---------- */
.pot-mixer{display:grid; gap:1.4rem;}
.pot-mixer__controls{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr);}
.pot-mixer__controls label{display:block; font-weight:700; font-size:.85rem; margin-bottom:.4rem; color:var(--sage-5);}
.pot-mixer__controls select{width:100%; padding:.7rem 1rem; border-radius:var(--radius-sm); border:none; background:var(--oat-1); box-shadow:var(--shadow-in); font-family:var(--font-body); font-size:.95rem; min-height:44px;}
.pot-mixer__result{background:var(--paper); border-radius:var(--radius-md); padding:1.4rem; box-shadow:var(--shadow-in);}
.pot-mixer__chip{display:inline-block; background:var(--clay-2); color:var(--ink); font-weight:800; padding:.3rem .9rem; border-radius:50px; margin-bottom:.6rem;}
.pot-mixer--pulse{animation:pulse .5s ease;}
@keyframes pulse{0%{transform:scale(1);} 50%{transform:scale(1.015);} 100%{transform:scale(1);}}
@media (max-width:700px){ .pot-mixer__controls{grid-template-columns:1fr;} }

/* ---------- Cards ---------- */
.card{background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow-out); padding:1.4rem; transition:transform .25s ease, box-shadow .25s ease;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft);}
.product-card{display:flex; flex-direction:column; gap:.8rem;}
.product-card__img-wrap{border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1/1;}
.product-card__img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.product-card:hover .product-card__img-wrap img{transform:scale(1.08);}
.product-card__price{font-weight:800; color:var(--clay-4); font-size:1.1rem;}
.card-strip{display:flex; gap:1.2rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x mandatory;}
.card-strip .card{flex:0 0 220px; scroll-snap-align:start;}
@media (min-width:860px){ .card-strip{overflow:visible; flex-wrap:wrap;} }

/* ---------- Reveal ---------- */
.reveal{opacity:1; transform:none;}
body.js-ready .reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
body.js-ready .reveal.in-view{opacity:1; transform:none;}
.reveal.stagger-1{transition-delay:.08s;} .reveal.stagger-2{transition-delay:.16s;} .reveal.stagger-3{transition-delay:.24s;} .reveal.stagger-4{transition-delay:.32s;}

/* ---------- Dividers / decorative ---------- */
.divider{display:block; width:100%; height:40px;}
.grain-overlay{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; opacity:.05; mix-blend-mode:multiply; z-index:1;}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:linear-gradient(160deg,var(--sage-1),var(--oat-1)); padding:clamp(2.4rem,6vw,4rem) clamp(1.2rem,4vw,3rem) 3rem;}
.page-hero__inner{max-width:1240px; margin:0 auto;}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);}
.page-hero p{max-width:640px; color:var(--ink-soft); font-size:1.05rem;}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{max-width:1240px; margin:0 auto; padding:1rem clamp(1.2rem,4vw,3rem) 0; font-size:.85rem; color:var(--ink-soft);}
.breadcrumbs a{color:var(--ink-soft);}
.breadcrumbs a:hover{color:var(--clay-4);}
.breadcrumbs span[aria-current]{color:var(--ink); font-weight:700;}

/* ---------- Prose (legal pages) ---------- */
.prose{max-width:720px; margin:0 auto; padding:0 1.2rem;}
.prose h2{margin-top:2.2rem; font-size:1.5rem;}
.prose h3{margin-top:1.6rem; font-size:1.15rem;}
.prose ul,.prose ol{padding-left:1.4rem;}
.prose li{margin-bottom:.5rem;}
.legal-toc{background:var(--paper); border-radius:var(--radius-md); padding:1.4rem 1.6rem; box-shadow:var(--shadow-out); margin:0 auto 2rem; max-width:720px;}
.legal-toc h2{font-size:1.05rem; margin-bottom:.6rem;}
.legal-toc ol{margin:0; padding-left:1.2rem;}
.legal-toc a{color:var(--ink-soft);}

/* ---------- Notices ---------- */
.notice{border-radius:var(--radius-sm); padding:1rem 1.2rem; font-size:.95rem; display:flex; gap:.6rem; align-items:flex-start;}
.notice-info{background:var(--sage-1); color:var(--sage-5);}
.notice-success{background:var(--sage-1); color:var(--sage-5);}
.notice-warning{background:var(--clay-1); color:var(--clay-4);}

/* ---------- Forms ---------- */
.form-grid{display:grid; gap:1.2rem; grid-template-columns:repeat(2,1fr); max-width:720px;}
.form-grid .field--full{grid-column:1 / -1;}
@media (max-width:620px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:.4rem;}
.field label{font-weight:700; font-size:.9rem;}
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:1rem; padding:.8rem 1rem; border-radius:var(--radius-sm); border:none;
  background:var(--oat-1); box-shadow:var(--shadow-in); accent-color:var(--clay-3); min-height:44px;}
.field textarea{min-height:120px; resize:vertical;}
.field-error{color:#a3432c; font-size:.85rem;}
.field:has(input:invalid[required]:not(:placeholder-shown)) .field-error{display:block;}
.hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0;}
.field-row{display:flex; gap:.6rem;}
.field-row input{flex:1;}
.form-msg{font-weight:700; margin-top:.6rem;}

/* ---------- Contact layout ---------- */
.contact-layout{display:grid; gap:2.4rem; grid-template-columns:1fr 1fr; max-width:1100px; margin:0 auto;}
.contact-info{display:flex; flex-direction:column; gap:1rem;}
.contact-info .card{display:flex; gap:.8rem; align-items:flex-start;}
@media (max-width:800px){ .contact-layout{grid-template-columns:1fr;} }

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem;}
.faq-item{background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow-out); padding:.3rem 1.4rem; overflow:hidden;}
.faq-item summary{cursor:pointer; font-weight:700; padding:1rem 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:44px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--clay-4); transition:transform .25s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding-bottom:1rem; color:var(--ink-soft);}

/* ---------- Product detail ---------- */
.product-detail{display:grid; gap:2.4rem; grid-template-columns:1fr 1fr; max-width:1100px; margin:0 auto;}
.product-detail__img{border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); aspect-ratio:1/1; object-fit:cover; width:100%;}
.product-detail__price{font-size:1.8rem; font-weight:800; color:var(--clay-4);}
.qty-control{display:flex; align-items:center; gap:.6rem;}
.qty-control button{width:44px; height:44px; border-radius:50%; border:none; background:var(--sage-2); box-shadow:var(--shadow-out); font-size:1.2rem; cursor:pointer;}
.qty-control input{width:56px; text-align:center; border:none; background:var(--oat-1); border-radius:var(--radius-sm); box-shadow:var(--shadow-in); min-height:44px;}
@media (max-width:800px){ .product-detail{grid-template-columns:1fr;} }

/* ---------- Cart / checkout ---------- */
.cart-table{width:100%; border-collapse:collapse; max-width:900px; margin:0 auto;}
.cart-table th,.cart-table td{text-align:left; padding:.9rem .6rem; border-bottom:1px solid var(--oat-3);}
.cart-table img{width:64px; height:64px; object-fit:cover; border-radius:var(--radius-sm);}
.cart-summary{max-width:360px; margin-left:auto; background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow-out); padding:1.6rem; display:flex; flex-direction:column; gap:.8rem;}
.cart-summary__row{display:flex; justify-content:space-between;}
.cart-summary__total{font-weight:800; font-size:1.2rem; border-top:2px solid var(--oat-3); padding-top:.8rem;}

/* ---------- Icons list ---------- */
.icon-list{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.icon-list__item{display:flex; flex-direction:column; gap:.6rem;}
.icon-badge{width:52px; height:52px; border-radius:50%; background:var(--sage-2); display:flex; align-items:center; justify-content:center; color:var(--sage-5); box-shadow:var(--shadow-out);}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:var(--oat-2); margin-top:2rem;}
.site-footer__grid{max-width:1240px; margin:0 auto; padding:3rem clamp(1.2rem,4vw,3rem); display:grid; gap:2rem; grid-template-columns:1.4fr 1fr 1fr 1fr 1.4fr;}
.site-footer h3{color:var(--oat-1); font-size:1rem; font-family:var(--font-body);}
.site-footer a{color:var(--oat-3);}
.site-footer a:hover{color:#fff;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem;}
.footer-brand p{color:var(--oat-3); font-size:.9rem;}
.newsletter-form .field-row input{background:var(--oat-1);}
.site-footer__bottom{text-align:center; padding:1.2rem; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; color:var(--oat-3);}
@media (max-width:900px){ .site-footer__grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .site-footer__grid{grid-template-columns:1fr;} }

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed; bottom:1rem; left:1rem; right:1rem; max-width:560px; margin:0 auto; background:var(--ink); color:var(--oat-1);
  border-radius:var(--radius-md); box-shadow:var(--shadow-soft); padding:1.2rem 1.4rem; z-index:80; display:flex; flex-direction:column; gap:1rem;}
.cookie-banner a{color:var(--sage-2); text-decoration:underline;}
.cookie-banner__actions{display:flex; gap:.8rem; justify-content:flex-end;}

/* ===== COMPONENTS: .class - what it is
.site-header - sticky top header bar with logo and nav
.logo / .logo__mark / .logo__word - SVG logo lockup
.nav-toggle - mobile hamburger button
.site-nav - primary nav, becomes off-canvas drawer on mobile (.is-open)
.cart-link / .cart-count - header cart icon and animated badge (.bump)
.btn / .btn-primary / .btn-secondary / .btn-ghost / .btn-sm / .btn-block - button variants with fill-sweep hover
.hero / .hero-art / .underline - home hero layout with animated underline SVG
.bento / .bento-tile / .bento-tile--feature / .bento-tile--wide / .bento-tile--tall - bento grid home layout
.pot-mixer / .pot-mixer__controls / .pot-mixer__result / .pot-mixer__chip - signature "Mjerač Tegle" feature
.card / .product-card / .product-card__img-wrap / .product-card__price - generic and product cards
.card-strip - horizontal scroll-snap strip of cards (mobile)
.reveal / .in-view / .stagger-1..4 - scroll reveal animation hooks
.divider - decorative SVG section divider
.grain-overlay - fixed full-viewport SVG grain texture overlay
.page-hero / .page-hero__inner - inner page hero band
.breadcrumbs - breadcrumb trail nav
.prose - readable long-form legal/article text column
.legal-toc - table of contents box for legal pages
.notice / .notice-info / .notice-success / .notice-warning - inline alert boxes
.form-grid / .field / .field--full / .field-error / .hp / .field-row / .form-msg - form layout and validation
.contact-layout / .contact-info - two-column contact page layout
.faq / .faq-item - details/summary accordion list
.product-detail / .product-detail__img / .product-detail__price / .qty-control - product page layout
.cart-table / .cart-summary / .cart-summary__row / .cart-summary__total - cart/checkout layout
.icon-list / .icon-list__item / .icon-badge - icon+text feature list
.site-footer / .site-footer__grid / .footer-col / .footer-brand / .newsletter-form / .site-footer__bottom - footer
.cookie-banner / .cookie-banner__actions - cookie consent banner
*/