/* ============================================================
   Kuhinja Jutro — Typographic grid poster design system
   ============================================================ */
:root{
  --ink:#1d2a24;
  --paper:#f4ead9;
  --paper-2:#eadfc9;
  --accent:#e8562e;
  --accent-dark:#b73f1f;
  --olive:#5c6b4f;
  --line: rgba(29,42,36,.16);
  --ff-display: "Iowan Old Style","Palatino Linotype", Georgia, serif;
  --ff-body: "Avenir Next","Segoe UI", Helvetica, Arial, sans-serif;
  --ff-mono: "SF Mono","Consolas", monospace;
  --radius: 2px;
  --maxw: 1240px;
  --gap: clamp(1rem,2vw,2rem);
}
*{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; font-size:16px;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display); margin:0 0 .5em; line-height:1.05; letter-spacing:-.01em}
p{margin:0 0 1em}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
.skip-link{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.6em 1em; z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gap)}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:2px solid var(--ink)}
.site-header__inner{max-width:var(--maxw); margin:0 auto; padding:.8rem var(--gap); display:flex; align-items:center; justify-content:space-between; gap:1rem}
.logo{display:flex; align-items:center; gap:.6rem; color:var(--ink)}
.logo__mark{color:var(--accent); flex:none}
.logo__word{font-family:var(--ff-display); font-size:1.3rem; letter-spacing:-.02em}
.logo__word em{font-style:normal; color:var(--accent)}
.main-nav ul{display:flex; gap:1.4rem; list-style:none; margin:0; padding:0}
.main-nav a{font-weight:600; font-size:.95rem; padding:.3em 0; position:relative}
.main-nav a::after{content:"";position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--accent); transition:right .25s ease}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{right:0}
.main-nav a[aria-current="page"]{color:var(--accent-dark)}
.header-actions{display:flex; align-items:center; gap:1rem}
.cart-link{position:relative; display:flex; color:var(--ink)}
.cart-count{position:absolute; top:-8px; right:-10px; background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; border-radius:50%; min-width:18px; height:18px; 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:none; color:var(--ink); cursor:pointer; padding:.3em; min-width:44px; min-height:44px}

@media (max-width:860px){
  .main-nav{position:fixed; inset:0 0 0 auto; width:min(80vw,320px); background:var(--paper); border-left:2px solid var(--ink);
    transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility .3s; padding:5rem 1.5rem; z-index:150}
  .main-nav.is-open{transform:translateX(0); visibility:visible}
  .main-nav ul{flex-direction:column; gap:1.4rem}
  .nav-toggle{display:flex; align-items:center; justify-content:center}
  .nav-toggle .icon-close{display:none}
  .nav-toggle[aria-expanded="true"] .icon-menu{display:none}
  .nav-toggle[aria-expanded="true"] .icon-close{display:block}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; border:2px solid var(--ink); background:transparent; color:var(--ink);
  font-weight:700; font-size:.95rem; padding:.75em 1.5em; cursor:pointer; position:relative; overflow:hidden; min-height:44px; border-radius:var(--radius); isolation:isolate}
.btn::before{content:""; position:absolute; inset:0; left:-100%; width:100%; background:var(--ink); z-index:-1; transition:left .3s ease}
.btn:hover::before{left:0}
.btn:hover{color:var(--paper)}
.btn--accent{background:var(--accent); border-color:var(--accent); color:#fff}
.btn--accent::before{background:var(--accent-dark)}
.btn--accent:hover{color:#fff}
.btn--ghost{border-color:currentColor; background:transparent}
.btn--block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- Hero / Home map composition ---------- */
.hero{position:relative; padding:2.5rem var(--gap) 0; max-width:var(--maxw); margin:0 auto}
.hero-canvas{position:relative; border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden; min-height:70vh; display:grid}
.hero-canvas__photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.3) sepia(.25) saturate(1.3) hue-rotate(-6deg); transition:filter .6s ease}
.hero-canvas__photo.duotone-shift{filter:grayscale(.05) sepia(.1) saturate(1.1)}
.hero-canvas__grain{position:absolute; inset:0; width:100%; height:100%; opacity:.25; pointer-events:none; mix-blend-mode:multiply}
.hero-pin{position:absolute; background:var(--paper); border:2px solid var(--ink); padding:1rem 1.2rem; max-width:260px; box-shadow:6px 6px 0 var(--ink)}
.hero-pin--main{position:relative; margin:3rem 2rem 3rem auto; max-width:460px; box-shadow:10px 10px 0 var(--accent)}
.hero-pin h1{font-size:clamp(2.2rem,6vw,4.2rem)}
.hero-pin--tag{top:12%; left:4%}
.hero-pin--num{bottom:8%; left:6%; font-family:var(--ff-mono)}
.hero-pin--num .num{font-size:3rem; font-weight:700; display:block; color:var(--accent)}
@media (max-width:700px){.hero-canvas{min-height:60vh}.hero-pin{position:relative; top:auto!important; left:auto!important; bottom:auto!important; margin:1rem auto; max-width:92%}}

/* ---------- Reveal ---------- */
.reveal{opacity:1; transform:none}
.reveal.js-hidden{opacity:0; transform:translateY(24px)}
.reveal.in-view{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* ---------- Section rhythm ---------- */
.section{padding:clamp(3rem,6vw,6rem) var(--gap); max-width:var(--maxw); margin:0 auto}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2rem; border-bottom:2px solid var(--ink); padding-bottom:.6rem}
.section-head h2{font-size:clamp(1.8rem,4vw,3rem)}
.section-head .section-num{font-family:var(--ff-mono); color:var(--accent); font-weight:700}
.divider{color:var(--olive); width:100%; height:32px; margin:1rem 0}

/* ---------- Product grid / strip ---------- */
.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--gap)}
.product-strip{display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem}
.product-strip .product-card{min-width:240px; scroll-snap-align:start}
.product-card{border:2px solid var(--ink); background:var(--paper); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease}
.product-card:hover{transform:translateY(-6px); box-shadow:8px 8px 0 var(--ink)}
.product-card__media{position:relative; aspect-ratio:4/3; overflow:hidden; border-bottom:2px solid var(--ink)}
.product-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.product-card:hover .product-card__media img{transform:scale(1.06)}
.product-card__body{padding:1rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.product-card__cat{font-family:var(--ff-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--olive)}
.product-card__name{font-size:1.1rem; margin:0}
.product-card__price{font-weight:700; font-size:1.2rem; margin-top:auto}
.product-card__actions{padding:0 1rem 1rem}

/* ---------- Signature feature: Darilni asistent ---------- */
.gift-tool{border:2px solid var(--ink); background:var(--paper-2); padding:clamp(1.2rem,3vw,2.5rem); display:grid; gap:1.5rem; grid-template-columns:1fr; position:relative}
@media(min-width:800px){.gift-tool{grid-template-columns:1fr 1.1fr}}
.gift-tool__controls{display:flex; flex-direction:column; gap:1.1rem}
.gift-tool__row label{display:block; font-weight:700; margin-bottom:.4rem}
.gift-tool select, .gift-tool input[type="range"]{width:100%}
.gift-tool__budget-val{font-family:var(--ff-mono); color:var(--accent); font-weight:700}
.gift-tool__result{border:2px dashed var(--ink); padding:1.2rem; background:var(--paper)}
.gift-tool__result ul{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.6rem}
.gift-tool__result li{display:flex; justify-content:space-between; gap:.5rem; border-bottom:1px solid var(--line); padding-bottom:.4rem}
.gift-tool__total{display:flex; justify-content:space-between; font-weight:700; font-size:1.2rem; margin-bottom:1rem}
input[type="range"]{accent-color:var(--accent)}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:3rem var(--gap) 2rem; max-width:var(--maxw); margin:0 auto; border-bottom:2px solid var(--ink)}
.page-hero h1{font-size:clamp(2rem,5vw,3.4rem)}
.page-hero p{max-width:55ch; color:var(--olive)}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{max-width:var(--maxw); margin:0 auto; padding:1rem var(--gap) 0; font-size:.85rem; font-family:var(--ff-mono)}
.breadcrumbs a{color:var(--olive)}
.breadcrumbs a:hover{color:var(--accent)}

/* ---------- Prose (legal) ---------- */
.prose{max-width:68ch; margin:0 auto; padding:0 var(--gap)}
.prose h2{margin-top:2em; font-size:1.5rem}
.prose h3{margin-top:1.4em; font-size:1.15rem}
.prose ul,.prose ol{padding-left:1.3em}
.prose a{color:var(--accent-dark); text-decoration:underline}
.legal-toc{max-width:68ch; margin:1.5rem auto 0; padding:1rem 1.2rem; border:2px solid var(--ink); background:var(--paper-2)}
.legal-toc h2{margin-top:0; font-size:1.1rem}
.legal-toc ol{margin:0; padding-left:1.3em}

/* ---------- Notice ---------- */
.notice{border:2px solid var(--ink); border-left:6px solid var(--accent); padding:1rem 1.2rem; background:var(--paper-2); margin:1.5rem 0}
.notice--error{border-left-color:#b02a2a}
.notice--success{border-left-color:#3f7a3f}

/* ---------- Forms ---------- */
.form-grid{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:600px){.form-grid.cols-2{grid-template-columns:1fr 1fr}}
.field{display:flex; flex-direction:column; gap:.35rem}
.field label{font-weight:700; font-size:.9rem}
.field input,.field select,.field textarea{
  font:inherit; padding:.7em .8em; border:2px solid var(--ink); background:var(--paper); border-radius:var(--radius); accent-color:var(--accent)
}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--accent); outline-offset:1px}
.field-error{color:#a8281e; font-size:.82rem; min-height:1.1em}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#a8281e}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.form-msg{min-height:1.2em; font-weight:700}
.form-msg.ok{color:#3f7a3f}
.form-msg.err{color:#a8281e}

/* ---------- FAQ ---------- */
.faq{max-width:68ch; margin:0 auto; padding:0 var(--gap); display:flex; flex-direction:column; gap:.8rem}
.faq-item{border:2px solid var(--ink); background:var(--paper); padding:.2rem 1rem}
.faq-item summary{cursor:pointer; font-weight:700; padding:.9rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--accent)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding-bottom:1rem; color:var(--olive)}

/* ---------- Product detail ---------- */
.product-detail{display:grid; gap:2rem; grid-template-columns:1fr; max-width:var(--maxw); margin:0 auto; padding:0 var(--gap)}
@media(min-width:800px){.product-detail{grid-template-columns:1.1fr 1fr}}
.product-detail__media{border:2px solid var(--ink); aspect-ratio:4/3; overflow:hidden}
.product-detail__media img{width:100%; height:100%; object-fit:cover}
.product-detail__price{font-size:2rem; font-weight:700; color:var(--accent-dark)}
.qty-row{display:flex; align-items:center; gap:.8rem; margin:1rem 0}
.qty-row input{width:4rem; text-align:center}

/* ---------- Cart / checkout ---------- */
.cart-table{width:100%; border-collapse:collapse; margin-bottom:1.5rem}
.cart-table th,.cart-table td{border-bottom:2px solid var(--line); padding:.8rem .5rem; text-align:left}
.cart-table img{width:60px; height:60px; object-fit:cover; border:1px solid var(--ink)}
.cart-summary{border:2px solid var(--ink); padding:1.2rem; max-width:360px; margin-left:auto; display:grid; gap:.6rem}
.cart-summary__total{display:flex; justify-content:space-between; font-weight:700; font-size:1.25rem; border-top:2px solid var(--ink); padding-top:.6rem}

/* ---------- Contact layout ---------- */
.contact-layout{display:grid; gap:2rem; grid-template-columns:1fr; max-width:var(--maxw); margin:0 auto; padding:0 var(--gap)}
@media(min-width:800px){.contact-layout{grid-template-columns:1fr 1fr}}
.contact-info ul{list-style:none; padding:0; display:grid; gap:1rem}
.contact-info li{display:flex; align-items:center; gap:.7rem}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:2rem}
.grid{display:grid; gap:var(--gap)}
.flex{display:flex; gap:.6rem; align-items:center}
.text-center{text-align:center}
.center-col{max-width:720px; margin:0 auto}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:300; background:var(--ink); color:var(--paper);
  border:2px solid var(--ink); padding:1rem 1.2rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; box-shadow:6px 6px 0 var(--accent); max-width:760px; margin:0 auto}
.cookie-banner a{color:var(--paper); text-decoration:underline}
.cookie-banner__actions{display:flex; gap:.7rem}
.cookie-banner .btn--ghost{border-color:var(--paper); color:var(--paper)}
.cookie-banner .btn--ghost:hover{color:var(--ink)}
.cookie-banner .btn--ghost::before{background:var(--paper)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:var(--paper); margin-top:4rem}
.footer-divider{color:var(--accent); width:100%; height:24px; display:block}
.site-footer__inner{max-width:var(--maxw); margin:0 auto; padding:2rem var(--gap); display:grid; gap:2rem; grid-template-columns:1.4fr 1fr 1fr 1.4fr}
.site-footer .logo__word{color:var(--paper)}
.site-footer .logo__word em{color:var(--accent)}
.footer-col h3{font-family:var(--ff-mono); text-transform:uppercase; font-size:.82rem; letter-spacing:.08em; margin-bottom:.8rem; color:var(--paper)}
.footer-col ul{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.footer-col a:hover{color:var(--accent)}
.newsletter-form{display:flex; flex-direction:column; gap:.6rem}
.newsletter-form input[type="email"]{padding:.6em .8em; border:2px solid var(--paper); background:transparent; color:var(--paper); border-radius:var(--radius)}
.site-footer__bottom{text-align:center; padding:1rem; font-size:.82rem; border-top:1px solid rgba(244,234,217,.2)}
@media(max-width:860px){.site-footer__inner{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.site-footer__inner{grid-template-columns:1fr}}

.mb-1{margin-bottom:1rem}
.product-detail__body{padding:1rem}
.product-detail__cat{font-family:var(--ff-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--olive)}
.product-detail__form{display:flex; flex-direction:column; gap:1rem; margin:1.5rem 0}
.product-detail__form .btn{margin-top:.5rem}
.notice--info{border-left-color:var(--accent)}
.cart-summary__row{display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0}
.cart-summary__row:last-child{border-top:2px solid var(--ink); padding-top:.8rem; font-weight:700; font-size:1.1rem}

/* COMPONENTS:
.wrap - centered max-width content wrapper
.site-header / .main-nav / .nav-toggle / .cart-link / .cart-count - header & nav
.btn / .btn--accent / .btn--ghost / .btn--block - button variants with fill-sweep hover
.hero / .hero-canvas / .hero-pin / .hero-pin--main / .hero-pin--tag / .hero-pin--num - home map-style hero composition
.reveal / .js-hidden / .in-view - scroll reveal animation states
.section / .section-head - page section rhythm with numeral heading
.divider - decorative inline SVG divider
.product-grid / .product-strip / .product-card - product listing grid and mobile scroll-snap strip
.gift-tool - signature feature: Darilni asistent (gift set builder)
.page-hero - inner page hero banner
.breadcrumbs - breadcrumb trail
.prose - long-form legal/readable text column
.legal-toc - table of contents box for legal pages
.notice / .notice--error / .notice--success - alert/callout box
.form-grid / .field / .field-error / .hp-field - form layout, field wrapper, inline error, honeypot
.form-msg - success/error message under forms
.faq / .faq-item - FAQ accordion (details/summary)
.product-detail / .qty-row - single product page layout
.cart-table / .cart-summary - cart & checkout layout
.contact-layout / .contact-info - contact page split layout
.cookie-banner - cookie consent banner
.site-footer / .footer-col / .newsletter-form - footer layout
*/

/* ---------- Footer brand & newsletter columns ---------- */
.footer-brand,
.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* ---------- Cart quantity input ---------- */
.qty-input {
  font: inherit;
  padding: 0.6em 0.8em;
  border: 2px solid var(--ink);
  background: var(--paper);
  border-radius: var(--radius);
  text-align: center;
}

.qty-input:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- Cart remove button ---------- */
.remove-btn {
  padding: 0.4em 0.6em;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: 1.2rem;
  transition: color 0.25s ease;
}

.remove-btn:hover {
  color: var(--accent-dark);
}

.remove-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}