/* ===== Kuchyňa Vánok — Postcard & Stamp design system ===== */
:root {
  --cobalt: #1d3fae;
  --cobalt-dark: #142c7c;
  --lemon: #f4e04d;
  --cream: #fdfaf0;
  --paper: #fbf7ec;
  --ink: #26241c;
  --ink-soft: #5a5848;
  --red-stamp: #c23b3b;
  --radius: 10px;
  --maxw: 1200px;
  --measure: 68ch;
  --shadow-paper: 0 10px 24px -8px rgba(29,63,174,.25), 0 2px 6px rgba(0,0,0,.08);
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Courier New", 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(--paper);
  font-size:16px; line-height:1.55;
}
img{max-width:100%; display:block}
a{color:var(--cobalt); text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; color:var(--cobalt-dark)}
.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(--lemon); color:var(--ink); padding:.5rem 1rem; z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--cobalt); outline-offset:2px}
button{font-family:inherit; cursor:pointer}

@media (prefers-reduced-motion: no-preference) {
  .reveal{opacity:0; transform:translateY(24px) scale(.98); clip-path:inset(0 0 12% 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)}
}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; clip-path:none} }

/* ===== layout helpers ===== */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem}
.grid{display:grid; gap:1.5rem}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit, minmax(190px,1fr))}
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:2rem} .mt-4{margin-top:3.5rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:2rem}
.section{padding:3.5rem 0}
.section-tight{padding:2rem 0}
.text-center{text-align:center}

/* ===== header ===== */
.stripe-air{height:6px; background:repeating-linear-gradient(45deg, var(--cobalt) 0 18px, var(--lemon) 18px 24px, var(--red-stamp) 24px 30px)}
.site-header{background:var(--cream); position:sticky; top:0; z-index:100; box-shadow:0 1px 0 rgba(29,63,174,.12)}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:.75rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.logo{display:flex; align-items:center}
.logo-mark{width:190px; height:40px}
.main-nav{display:flex; align-items:center; gap:1.4rem; font-size:.95rem}
.main-nav a{color:var(--ink); position:relative; padding:.3rem 0}
.main-nav a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--cobalt); transition:width .25s ease}
.main-nav a:hover::after, .main-nav a.active::after{width:100%}
.main-nav a.active{color:var(--cobalt-dark); font-weight:600}
.nav-cart{display:flex; align-items:center; gap:.4rem; background:var(--cobalt); color:var(--cream)!important; padding:.5rem .9rem; border-radius:999px}
.nav-cart::after{display:none}
.nav-cart .icon{width:18px; height:18px}
.cart-count{background:var(--lemon); color:var(--ink); border-radius:999px; min-width:1.4em; text-align:center; font-size:.8rem; padding:0 .3em; font-weight:700}
.cart-count.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; width:44px; height:44px; justify-content:center; align-items:center}
.burger span{width:24px; height:2px; background:var(--ink); display:block; transition:transform .25s ease, opacity .25s ease}

@media (max-width: 860px){
  .burger{display:flex}
  .main-nav{position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh; background:var(--cobalt-dark);
    flex-direction:column; align-items:flex-start; padding:5.5rem 1.5rem; gap:1.2rem;
    transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility .3s ease; z-index:150}
  .main-nav.open{transform:translateX(0); visibility:visible}
  .main-nav a{color:var(--cream); font-size:1.1rem}
  .main-nav a::after{background:var(--lemon)}
  .nav-cart{margin-top:1rem}
}

/* ===== icons ===== */
.icon{width:22px; height:22px; stroke:currentColor}
.icon-sm{width:16px; height:16px}
.icon-lg{width:40px; height:40px}

/* ===== buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:2px solid var(--cobalt);
  background:var(--cobalt); color:var(--cream); padding:.75rem 1.5rem; border-radius:999px; font-weight:700;
  font-size:.95rem; position:relative; overflow:hidden; isolation:isolate; min-height:44px}
.btn::before{content:""; position:absolute; inset:0; left:-100%; width:100%; background:var(--lemon); z-index:-1; transition:left .3s ease}
.btn:hover::before, .btn:focus-visible::before{left:0}
.btn:hover, .btn:focus-visible{color:var(--ink)}
.btn-ghost{background:transparent; color:var(--cobalt)}
.btn-ghost::before{background:var(--cobalt); opacity:.08}
.btn-ghost:hover{color:var(--cobalt-dark)}
.btn-stamp{border-radius:8px; border-style:dashed}
.btn-outline-light{background:transparent; border-color:var(--cream); color:var(--cream)}
.btn-outline-light::before{background:var(--lemon)}
.btn-sm{padding:.45rem 1rem; font-size:.85rem; min-height:36px}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.btn-icon{min-width:44px; min-height:44px; padding:.5rem; border-radius:50%}

/* ===== hero / page-hero ===== */
.page-hero{background:var(--cobalt); color:var(--cream); padding:3.2rem 0 3.6rem; position:relative; overflow:hidden}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{color:var(--cream); font-size:clamp(2rem,5vw,3rem)}
.page-hero p{max-width:60ch; opacity:.9}
.breadcrumbs{font-size:.85rem; margin-bottom:1rem; opacity:.85}
.breadcrumbs a{color:inherit; text-decoration:underline}

/* ===== postcard texture elements ===== */
.postmark{display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border:2px solid currentColor; border-radius:50%; font-family:var(--font-mono); font-size:.65rem; text-align:center; transform:rotate(-8deg)}
.perforated{position:relative}
.perforated::before,.perforated::after{content:""; position:absolute; left:0; right:0; height:14px; background:radial-gradient(circle, var(--paper) 5px, transparent 5.5px) repeat-x; background-size:18px 14px}
.perforated::before{top:-7px}
.perforated::after{bottom:-7px}
.handwritten{font-family:var(--font-display); font-style:italic; color:var(--cobalt-dark)}
.divider-stamps{line-height:0}
.divider-stamps svg{width:100%; height:20px; display:block}

/* ===== marquee ===== */
.marquee{overflow:hidden; background:var(--lemon); border-top:2px dashed var(--cobalt); border-bottom:2px dashed var(--cobalt); padding:.6rem 0}
.marquee-track{display:flex; width:max-content; gap:2.5rem; animation:marquee 26s linear infinite; white-space:nowrap}
.marquee span{font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--cobalt-dark); display:flex; align-items:center; gap:.6rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none} }

/* ===== hero composition (tabs) ===== */
.hero-tabs{display:flex; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap}
.hero-tab{background:transparent; border:2px solid var(--cream); color:var(--cream); padding:.5rem 1.1rem; border-radius:999px; font-size:.85rem; min-height:40px}
.hero-tab.active{background:var(--lemon); border-color:var(--lemon); color:var(--ink); font-weight:700}
.hero-stage{position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-paper)}
.hero-stage img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity .5s ease}
.hero-stage img.active{opacity:1; position:relative}
.hero-stamp{position:absolute; top:-14px; right:-10px; width:84px; height:84px; z-index:3}

/* ===== cards ===== */
.card{background:var(--cream); border-radius:var(--radius); box-shadow:var(--shadow-paper); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-6px)}
.product-card{display:flex; flex-direction:column}
.product-card .thumb{aspect-ratio:1/1; overflow:hidden; position:relative}
.product-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.product-card:hover .thumb img{transform:scale(1.08)}
.product-card .badge{position:absolute; top:.6rem; left:.6rem; background:var(--red-stamp); color:var(--cream); font-size:.7rem; padding:.25rem .6rem; border-radius:4px; transform:rotate(-4deg)}
.product-card .body{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.product-card .price{font-family:var(--font-display); font-size:1.3rem; color:var(--cobalt-dark); margin-top:auto}
.product-card .cat{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)}

.strip-scroll{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; -webkit-overflow-scrolling:touch}
.strip-scroll .product-card{min-width:240px; scroll-snap-align:start}

/* ===== feature: Darčekový kompas ===== */
.compass{background:var(--cream); border-radius:var(--radius); box-shadow:var(--shadow-paper); padding:2rem; position:relative}
.compass-grid{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.compass-field label{display:block; font-weight:700; margin-bottom:.4rem; font-size:.9rem}
.compass-field select{width:100%; padding:.6rem .8rem; border:2px solid var(--cobalt); border-radius:8px; background:var(--paper); font-size:.95rem; min-height:44px; accent-color:var(--cobalt)}
.compass-result{margin-top:1.5rem; border-top:2px dashed var(--cobalt); padding-top:1.5rem}
.compass-result-card{display:flex; gap:1rem; align-items:center; background:var(--paper); border-radius:8px; padding:1rem}
.compass-result-card img{width:84px; height:84px; object-fit:cover; border-radius:6px; flex-shrink:0}
.compass-empty{color:var(--ink-soft); font-style:italic}

/* ===== prose (legal pages) ===== */
.prose{max-width:var(--measure); margin:0 auto}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose p, .prose li{color:var(--ink-soft)}
.prose ul, .prose ol{padding-left:1.3rem}
.legal-toc{background:var(--cream); border:1px solid rgba(29,63,174,.2); border-radius:var(--radius); padding:1.25rem 1.5rem; max-width:var(--measure); margin:0 auto 2rem}
.legal-toc h2{font-size:1.1rem; margin-top:0}
.legal-toc ol{margin:0; padding-left:1.2rem; columns:2; column-gap:2rem}
@media (max-width:600px){.legal-toc ol{columns:1}}

/* ===== notice / alerts ===== */
.notice{border-radius:8px; padding:1rem 1.25rem; border:2px dashed var(--cobalt); background:var(--cream); margin:1.2rem 0}
.notice-success{border-color:#2f8a4e; background:#eef8f0}
.notice-error{border-color:var(--red-stamp); background:#fbeaea}
.notice-info{border-color:var(--cobalt)}

/* ===== forms ===== */
.form-grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:flex; flex-direction:column; gap:.35rem}
.field label{font-weight:700; font-size:.9rem}
.field input, .field textarea, .field select{
  padding:.7rem .9rem; border:2px solid rgba(29,63,174,.3); border-radius:8px; font-size:.95rem;
  background:var(--cream); font-family:inherit; accent-color:var(--cobalt); min-height:44px
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--cobalt)}
.field-full{grid-column:1/-1}
.field-error{color:var(--red-stamp); font-size:.82rem; min-height:1.1em}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.form-msg{min-height:1.4em; font-size:.9rem; margin:.5rem 0 0}
.form-msg-ok{color:#2f8a4e; font-weight:700}
.form-msg-error{color:var(--red-stamp); font-weight:700}
.field-row{display:flex; gap:.6rem}
.field-row input{flex:1}
.newsletter-form{max-width:360px}

/* ===== contact layout ===== */
.contact-layout{display:grid; gap:2.5rem; grid-template-columns:1.1fr 1fr; align-items:start}
@media (max-width:760px){.contact-layout{grid-template-columns:1fr}}
.contact-info{display:flex; flex-direction:column; gap:1rem}
.contact-info .row{display:flex; gap:.7rem; align-items:flex-start}
.contact-info .icon{color:var(--cobalt); flex-shrink:0; margin-top:.15rem}

/* ===== faq ===== */
.faq{display:flex; flex-direction:column; gap:.8rem; max-width:var(--measure); margin:0 auto}
.faq-item{background:var(--cream); border-radius:8px; border:1px solid rgba(29,63,174,.2); padding:.2rem 1.2rem}
.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(--cobalt); flex-shrink:0}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0 0 1rem; color:var(--ink-soft)}

/* ===== product detail ===== */
.product-detail{display:grid; gap:2.5rem; grid-template-columns:1fr 1fr; align-items:start}
@media (max-width:760px){.product-detail{grid-template-columns:1fr}}
.product-detail .gallery{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-paper); aspect-ratio:1/1}
.product-detail .gallery img{width:100%; height:100%; object-fit:cover}
.product-detail .price-big{font-family:var(--font-display); font-size:2rem; color:var(--cobalt-dark)}
.qty-stepper{display:inline-flex; align-items:center; border:2px solid var(--cobalt); border-radius:999px; overflow:hidden}
.qty-stepper button{background:none; border:0; width:40px; height:40px; color:var(--cobalt); display:flex; align-items:center; justify-content:center}
.qty-stepper input{width:3em; text-align:center; border:0; background:none; font-size:1rem}

/* ===== cart / checkout ===== */
.cart-table{width:100%; border-collapse:collapse; margin-bottom:2rem}
.cart-table th, .cart-table td{padding:.9rem .6rem; border-bottom:1px solid rgba(29,63,174,.15); text-align:left; vertical-align:middle}
.cart-table img{width:56px; height:56px; object-fit:cover; border-radius:6px}
.cart-table .cart-row-main{display:flex; gap:.8rem; align-items:center}
.cart-summary{background:var(--cream); border-radius:var(--radius); padding:1.5rem; max-width:360px; margin-left:auto; box-shadow:var(--shadow-paper)}
.cart-summary .line{display:flex; justify-content:space-between; margin-bottom:.6rem}
.cart-summary .line.total{font-weight:700; font-size:1.2rem; border-top:2px dashed var(--cobalt); padding-top:.6rem}
.cart-empty{text-align:center; padding:3rem 1rem; color:var(--ink-soft)}

/* ===== badges / seals ===== */
.seal{width:64px; height:64px}

/* ===== footer ===== */
.site-footer{background:var(--cobalt-dark); color:var(--cream); padding:3rem 0 0}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; display:grid; gap:2rem; grid-template-columns:1.3fr 2fr 1.2fr}
@media (max-width:860px){.footer-inner{grid-template-columns:1fr}}
.footer-brand p{opacity:.85; max-width:30ch}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
@media (max-width:560px){.footer-cols{grid-template-columns:1fr}}
.footer-cols h3{color:var(--cream); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em}
.footer-cols a{display:block; color:var(--cream); opacity:.85; margin-bottom:.5rem}
.footer-cols a:hover{opacity:1; text-decoration:underline}
.footer-newsletter h3{color:var(--cream)}
.footer-contact{display:flex; align-items:center; gap:.5rem; margin-top:1rem; opacity:.9}
.footer-contact a{color:var(--cream)}
.footer-bottom{text-align:center; padding:1.5rem 0; margin-top:2rem; border-top:1px solid rgba(255,255,255,.15); font-size:.85rem; opacity:.75}

/* ===== cookie banner ===== */
.cookie-banner{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:300; background:var(--cobalt-dark); color:var(--cream);
  border-radius:var(--radius); padding:1.2rem 1.4rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:680px; margin:0 auto}
.cookie-banner p{margin:0; flex:1; min-width:200px}
.cookie-banner a{color:var(--lemon); text-decoration:underline}
.cookie-actions{display:flex; gap:.6rem}

/* ===== 404 ===== */
.notfound{text-align:center; padding:4rem 1rem}
.notfound .big{font-family:var(--font-display); font-size:clamp(4rem,14vw,8rem); color:var(--cobalt); margin:0}

/* COMPONENTS:
.wrap - centered max-width container
.grid / .grid-2 / .grid-3 / .grid-4 - responsive grid layouts
.section / .section-tight - vertical page section padding
.btn / .btn-ghost / .btn-stamp / .btn-outline-light / .btn-sm / .btn-icon - button variants with fill-sweep hover
.page-hero - colored hero band used on every inner page
.breadcrumbs - small breadcrumb trail under page-hero
.postmark - circular stamp/postmark decorative badge
.perforated - adds perforated-edge pseudo borders top/bottom
.handwritten - italic serif "handwritten note" text style
.divider-stamps - thin dashed SVG section divider
.marquee / .marquee-track - looping brand-word strip (hero motion)
.hero-tabs / .hero-tab - tabbed hero mood switcher buttons
.hero-stage - crossfade image stage for hero tabs
.hero-stamp - rotated decorative seal placed over hero
.card - generic lifting card surface
.product-card / .thumb / .badge / .body / .price / .cat - catalog/product card anatomy
.strip-scroll - horizontal scroll-snap product strip (mobile)
.compass / .compass-grid / .compass-field / .compass-result / .compass-result-card / .compass-empty - Darčekový kompas feature widget
.prose - readable-measure long-form legal text
.legal-toc - table of contents box for legal pages
.notice / .notice-success / .notice-error / .notice-info - inline alert boxes
.form-grid / .field / .field-full / .field-error / .hp / .form-msg(-ok/-error) / .field-row - form building blocks
.contact-layout / .contact-info - two-column contact page layout
.faq / .faq-item - details/summary accordion
.product-detail / .gallery / .price-big / .qty-stepper - single product page layout
.cart-table / .cart-summary / .cart-empty - cart & checkout tables/summary
.seal - small decorative badge svg sizing
.site-header / .header-inner / .logo / .logo-mark / .main-nav / .nav-cart / .cart-count / .burger - header & nav
.site-footer / .footer-inner / .footer-brand / .footer-cols / .footer-newsletter / .footer-contact / .footer-bottom - footer
.cookie-banner / .cookie-actions - cookie consent banner
.notfound - 404 page big-number layout
.reveal / .reveal-stagger / .in-view - scroll-reveal animation hooks
.skip-link / .sr-only - accessibility helpers
*/

/* wg-contrast-autofix */
footer.site-footer div.footer-inner div.footer-brand p.handwritten { color: #ffffff !important; }
#cookieDecline { color: #ffffff !important; }