/* Pekarna Triglav — Garden party style: scalloped edges, gingham, florals, pastel warmth */
:root{
  --smoke:#2b2420;
  --smoke-soft:#5a5048;
  --amber:#b3763b;
  --amber-deep:#8a5a2a;
  --amber-pale:#e7c9a3;
  --white:#fbf7ef;
  --cream:#f4efe6;
  --gingham:#dce3da;
  --sage:#7c8f72;
  --line:#d9cdb8;
  --radius:18px;
  --radius-sm:10px;
  --maxw:1180px;
  --shadow:0 10px 30px -14px rgba(43,36,32,.35);
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "Consolas", "SFMono-Regular", monospace;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--smoke);
  font-family:var(--font-body); line-height:1.6; font-size:16px;
}
img{max-width:100%; display:block}
a{color:var(--amber-deep)}
.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(--smoke); color:var(--white); padding:.6em 1em; z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .5em; color:var(--smoke); line-height:1.15}
p{margin:0 0 1em}
ul{margin:0; padding:0}
button{font-family:inherit; cursor:pointer}

/* ===== Layout helpers ===== */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem}
.section{padding:clamp(3rem,6vw,6rem) 0}
.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))}
.stack-sm > * + *{margin-top:.5rem}
.stack-md > * + *{margin-top:1.5rem}
.center-text{text-align:center}
.eyebrow{font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--amber-deep)}

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:100; background:rgba(251,247,239,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--maxw); margin-inline:auto; padding:.7rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.logo{display:block}
.logo-mark{height:40px; width:156px; aspect-ratio:220/56}
.nav-toggle{display:none; background:none; border:none; padding:.4rem; color:var(--smoke)}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-open{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}
.site-nav{display:flex; align-items:center; gap:1.6rem}
.site-nav ul{display:flex; gap:1.4rem; list-style:none}
.site-nav a{text-decoration:none; color:var(--smoke); font-weight:600; font-size:.95rem; position:relative; padding:.2rem 0}
.site-nav a::after{content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--amber); transition:width .25s ease}
.site-nav a:hover::after, .site-nav a.is-active::after{width:100%}
.site-nav a.is-active{color:var(--amber-deep)}
.cart-link{display:flex; align-items:center; gap:.3rem; color:var(--smoke); text-decoration:none; position:relative}
.cart-count{background:var(--amber); color:var(--white); font-size:.72rem; font-weight:700; min-width:1.3em; height:1.3em; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; padding:0 .2em}
.cart-count.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

@media (max-width:860px){
  .nav-toggle{display:block}
  .site-nav{position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--white); flex-direction:column; align-items:flex-start; padding:5rem 1.5rem 2rem; gap:2rem;
    transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility .3s ease; box-shadow:var(--shadow)}
  .site-nav.open{transform:translateX(0); visibility:visible}
  .site-nav ul{flex-direction:column; gap:1.1rem; width:100%}
  .site-nav a{font-size:1.1rem}
}

/* ===== Hero ===== */
.hero{position:relative; padding:clamp(2.5rem,7vw,5rem) 0 clamp(3rem,6vw,5rem); overflow:hidden}
.hero-inner{max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center}
@media (max-width:860px){.hero-inner{grid-template-columns:1fr}}
.hero-title{font-size:clamp(2.4rem,6vw,4.4rem); margin-bottom:.4rem}
.hero-title .wipe{display:inline-block; clip-path:inset(0 100% 0 0); animation:wipe 1.1s .15s cubic-bezier(.65,0,.35,1) forwards}
@media (prefers-reduced-motion:reduce){.hero-title .wipe{clip-path:inset(0 0 0 0); animation:none}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.hero-lede{font-size:1.15rem; color:var(--smoke-soft); max-width:36ch}
.hero-figure{position:relative; aspect-ratio:4/5; border-radius:var(--radius)}
.hero-figure img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius)}
.hero-figure::before{content:""; position:absolute; inset:-14px; background-image:radial-gradient(circle, var(--amber-pale) 0 48%, transparent 49%); background-size:24px 24px; z-index:-1; opacity:.6}
.hero-badge{position:absolute; bottom:-18px; left:-18px; width:96px}
.scallop-divider{display:block; width:100%; height:28px; color:var(--cream)}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.75em 1.5em; border-radius:999px; font-weight:700; font-size:.95rem; text-decoration:none; border:2px solid transparent; min-height:44px; position:relative; overflow:hidden; isolation:isolate}
.btn-primary{background:var(--amber); color:var(--white)}
.btn-primary::after{content:""; position:absolute; inset:0; left:-100%; width:100%; background:var(--amber-deep); z-index:-1; transition:left .3s ease}
.btn-primary:hover::after{left:0}
.btn-outline{background:transparent; color:var(--smoke); border-color:var(--smoke)}
.btn-outline::after{content:""; position:absolute; inset:0; left:-100%; width:100%; background:var(--smoke); z-index:-1; transition:left .3s ease}
.btn-outline:hover{color:var(--white)}
.btn-outline:hover::after{left:0}
.btn-ghost-dark{background:transparent; color:var(--white); border-color:rgba(255,255,255,.6)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.15)}
.btn-sm{padding:.5em 1em; font-size:.85rem; min-height:36px}

/* ===== Cards ===== */
.card{background:var(--cream); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px)}
.product-card{background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .25s ease}
.product-card:hover{transform:translateY(-6px)}
.product-card .thumb{aspect-ratio:4/3; overflow:hidden}
.product-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.product-card:hover .thumb img{transform:scale(1.06)}
.product-card .body{padding:1.1rem 1.2rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.product-card .price{font-weight:700; color:var(--amber-deep); font-size:1.1rem}
.product-card .meta{color:var(--smoke-soft); font-size:.9rem}

/* ===== Route / timeline (home composition) ===== */
.route{position:relative; padding-block:2rem}
.route-path{position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); z-index:0}
.route-path svg{width:100%; height:100%}
.route-steps{display:grid; gap:3rem; position:relative; z-index:1}
.route-step{display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem; align-items:center}
.route-step:nth-child(even) .route-card{grid-column:3}
.route-step:nth-child(odd) .route-card{grid-column:1}
.route-dot{grid-column:2; width:16px; height:16px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 6px var(--cream)}
.route-card{max-width:420px}
@media (max-width:760px){
  .route-path{left:18px}
  .route-step{grid-template-columns:36px 1fr}
  .route-dot{grid-column:1}
  .route-step:nth-child(even) .route-card, .route-step:nth-child(odd) .route-card{grid-column:2}
}

/* ===== Bake clock (signature feature) ===== */
.bake-clock{background:var(--smoke); color:var(--white); border-radius:var(--radius); padding:2rem; display:grid; gap:1.5rem; grid-template-columns:1fr 1.4fr; position:relative; overflow:hidden}
@media (max-width:760px){.bake-clock{grid-template-columns:1fr}}
.bake-clock-now{display:flex; flex-direction:column; gap:.3rem}
.bake-clock-now .eyebrow{color:var(--amber-pale)}
.bake-now-label{font-family:var(--font-display); font-size:1.8rem}
.bake-now-items{color:var(--amber-pale)}
.bake-slots{display:grid; gap:.5rem}
.bake-slot{display:grid; grid-template-columns:auto 1fr; gap:.8rem; padding:.6rem .8rem; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.15); opacity:.6; transition:opacity .2s ease, background .2s ease}
.bake-slot.is-now{opacity:1; background:rgba(179,118,59,.3); border-color:var(--amber)}
.bake-slot time{font-family:var(--font-mono); font-size:.85rem; color:var(--amber-pale)}

/* ===== Decorative SVG dividers / ornaments ===== */
.divider{width:100%; height:48px; color:var(--amber-pale)}
.sprig{width:100%; height:auto}
.grain-overlay{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; opacity:.05; z-index:1}

/* ===== Reveal animation ===== */
.reveal{opacity:1; transform:none}
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.js .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}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none}}

/* ===== Gingham / texture utility ===== */
.gingham-bg{background-image:linear-gradient(var(--gingham) 1px, transparent 1px), linear-gradient(90deg, var(--gingham) 1px, transparent 1px); background-size:22px 22px; background-color:var(--cream)}

/* ===== Footer ===== */
.site-footer{background:var(--smoke); color:var(--amber-pale); padding-top:0}
.footer-divider{width:100%; height:32px; color:var(--cream); display:block}
.footer-inner{max-width:var(--maxw); margin-inline:auto; padding:2.5rem 1.25rem; display:grid; gap:2.5rem; grid-template-columns:1.2fr 2fr 1.2fr}
@media (max-width:860px){.footer-inner{grid-template-columns:1fr}}
.footer-brand p{color:var(--amber-pale); max-width:28ch}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; list-style:none}
.footer-cols h3{color:var(--white); font-size:1rem; margin-bottom:.6rem}
.footer-cols ul{list-style:none; display:grid; gap:.4rem}
.footer-cols a{color:var(--amber-pale); text-decoration:none}
.footer-cols a:hover{color:var(--white); text-decoration:underline}
.newsletter-form h3{color:var(--white)}
.newsletter-form p{color:var(--amber-pale); font-size:.9rem}
.field-row{display:flex; gap:.5rem; flex-wrap:wrap}
.field-row input{flex:1; min-width:160px; padding:.7em 1em; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:var(--white)}
.field-row input::placeholder{color:rgba(247,243,239,.6)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 1.25rem; max-width:var(--maxw); margin-inline:auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.85rem}
.footer-bottom a{color:var(--amber-pale); text-decoration:none; display:inline-flex; align-items:center; gap:.3rem}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}

/* ===== Cookie banner ===== */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--smoke); color:var(--white); padding:1rem 1.25rem; display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.cookie-banner p{margin:0; max-width:60ch; color:var(--white)}
.cookie-banner a{color:var(--amber-pale)}
.cookie-actions{display:flex; gap:.6rem; flex-wrap:wrap}

/* ===== Toast ===== */
.toast{position:fixed; bottom:1.5rem; left:50%; transform:translate(-50%,120%); background:var(--smoke); color:var(--white); padding:.8em 1.4em; border-radius:999px; z-index:200; opacity:0; transition:transform .3s ease, opacity .3s ease}
.toast.show{transform:translate(-50%,0); opacity:1}

/* ===== Shared inner-page components (for the second writer) ===== */
.page-hero{background:var(--smoke); color:var(--white); padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,3.5rem); position:relative}
.page-hero h1{color:var(--white)}
.page-hero p{color:var(--amber-pale); max-width:50ch}
.breadcrumbs{display:flex; gap:.4rem; flex-wrap:wrap; font-size:.85rem; color:var(--amber-pale); list-style:none; padding:0; margin:0 0 .8rem}
.breadcrumbs li::after{content:"/"; margin-left:.4rem; color:rgba(247,243,239,.5)}
.breadcrumbs li:last-child::after{content:""}
.breadcrumbs a{color:var(--amber-pale); text-decoration:none}

.prose{max-width:68ch; margin-inline:auto}
.prose h2{margin-top:2em}
.prose p, .prose li{color:var(--smoke-soft)}
.prose ul, .prose ol{padding-left:1.4em; margin-bottom:1em}

.legal-toc{background:var(--cream); border-radius:var(--radius); padding:1.4rem 1.6rem; margin-bottom:2rem}
.legal-toc h2{font-size:1.1rem; margin-bottom:.6rem}
.legal-toc ol{padding-left:1.2em; display:grid; gap:.3rem}

.notice{border-radius:var(--radius-sm); padding:1rem 1.2rem; border:1px solid var(--line); background:var(--cream)}
.notice-info{border-color:var(--amber-pale); background:#fbf0e2}
.notice-success{border-color:var(--sage); background:#eef2ea}
.notice-error{border-color:#c6563e; background:#fbeae6}

.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:600; font-size:.9rem}
.field input, .field select, .field textarea{padding:.7em 1em; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--white); font:inherit; accent-color:var(--amber)}
.field input:invalid:not(:placeholder-shown), .field.has-error input{border-color:#c6563e}
.field-error{color:#c6563e; font-size:.82rem; min-height:1.2em}
.form-msg{min-height:1.4em; font-size:.9rem}
.form-msg-ok{color:#4a7a3a}
.form-msg-error{color:#c6563e}

.breadcrumbs + .page-hero, .page-hero .breadcrumbs{margin-bottom:.5rem}

.faq{display:grid; gap:.8rem; max-width:74ch; margin-inline:auto}
.faq-item{background:var(--cream); border-radius:var(--radius-sm); padding:.2rem 1.2rem; border:1px solid var(--line)}
.faq-item summary{cursor:pointer; padding:1em 0; font-weight:700; 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(--amber)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{padding-bottom:1em; color:var(--smoke-soft)}

.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start}
@media (max-width:760px){.product-detail{grid-template-columns:1fr}}
.product-detail .thumb{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3}
.product-detail .thumb img{width:100%; height:100%; object-fit:cover}
.qty-input{width:90px}

.cart-table{width:100%; border-collapse:collapse}
.cart-table th, .cart-table td{padding:.8em .6em; border-bottom:1px solid var(--line); text-align:left}
.cart-summary{background:var(--cream); border-radius:var(--radius); padding:1.5rem; display:grid; gap:.8rem; align-self:start}
.cart-summary .total-row{display:flex; justify-content:space-between; font-weight:700; font-size:1.15rem}

.contact-layout{display:grid; grid-template-columns:1fr 1fr; gap:3rem}
@media (max-width:760px){.contact-layout{grid-template-columns:1fr}}
.contact-info{display:grid; gap:1rem; align-content:start}
.contact-info li{display:flex; gap:.6rem; align-items:flex-start}

.scroll-strip{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; -webkit-overflow-scrolling:touch}
.scroll-strip > *{scroll-snap-align:start; flex:0 0 260px}

.badge-seal{width:110px}

/* COMPONENTS: .wrap - centered max-width container
COMPONENTS: .section - vertical page section spacing
COMPONENTS: .grid / .grid-2 / .grid-3 - responsive grid helpers
COMPONENTS: .eyebrow - small uppercase mono label above headings
COMPONENTS: .site-header / .header-inner / .site-nav / .nav-toggle / .cart-link / .cart-count - header & nav
COMPONENTS: .hero / .hero-inner / .hero-title / .hero-lede / .hero-figure / .hero-badge - home hero block
COMPONENTS: .scallop-divider / .divider / .sprig / .grain-overlay - decorative SVG elements
COMPONENTS: .btn / .btn-primary / .btn-outline / .btn-ghost-dark / .btn-sm - buttons with fill-sweep hover
COMPONENTS: .card / .product-card - generic card and product card with image zoom hover
COMPONENTS: .route / .route-path / .route-steps / .route-step / .route-dot / .route-card - home winding timeline layout
COMPONENTS: .bake-clock / .bake-clock-now / .bake-slots / .bake-slot - signature "Vroča ura" feature widget
COMPONENTS: .gingham-bg - gingham checkerboard background utility
COMPONENTS: .reveal / .in-view / .stagger-1/2/3 - scroll reveal animation hooks
COMPONENTS: .site-footer / .footer-inner / .footer-cols / .newsletter-form / .footer-bottom - site footer
COMPONENTS: .cookie-banner / .cookie-actions - cookie consent banner
COMPONENTS: .toast - transient confirmation message
COMPONENTS: .page-hero - dark hero banner for inner pages
COMPONENTS: .breadcrumbs - breadcrumb trail list
COMPONENTS: .prose - readable long-form legal/text content column
COMPONENTS: .legal-toc - table of contents box for legal pages
COMPONENTS: .notice / .notice-info / .notice-success / .notice-error - inline alert boxes
COMPONENTS: .form-grid / .field / .field-error / .form-msg / .form-msg-ok / .form-msg-error - form layout & feedback
COMPONENTS: .faq / .faq-item - details/summary FAQ accordion
COMPONENTS: .product-detail / .qty-input - single product page layout
COMPONENTS: .cart-table / .cart-summary - cart/checkout layout
COMPONENTS: .contact-layout / .contact-info - contact page layout
COMPONENTS: .scroll-strip - horizontal scroll-snap strip for mobile
COMPONENTS: .badge-seal - small decorative seal/badge SVG sizing
COMPONENTS: .hp - visually hidden honeypot field
*/

/* ===== Cart page layout ===== */
.cart-layout{max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; display:grid; gap:2rem; grid-template-columns:1fr 340px; align-items:start}
@media (max-width:760px){.cart-layout{grid-template-columns:1fr}}

/* ===== Quantity adjustment buttons ===== */
.qty-btn-minus, .qty-btn-plus{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--cream); color:var(--smoke); font-weight:700; font-size:1.1rem; padding:0; transition:background .2s ease, border-color .2s ease}
.qty-btn-minus:hover, .qty-btn-plus:hover{background:var(--white); border-color:var(--amber)}

/* ===== Remove item button ===== */
.remove-btn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-sm); border:none; background:transparent; color:var(--smoke-soft); font-weight:700; font-size:1.3rem; padding:0; cursor:pointer; transition:color .2s ease}
.remove-btn:hover{color:#c6563e}

/* ===== Product grid ===== */
.product-grid{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
@media (max-width:390px){.product-grid{grid-template-columns:1fr}}