/* PRIROVITA — self-hosted fonts (no external CDN) */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/work-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/work-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --cream:oklch(96% 0.014 75);
  --ivory:oklch(98% 0.008 80);
  --oat:oklch(92% 0.022 72);
  --sand:oklch(87% 0.035 68);
  --olive:oklch(47% 0.045 125);
  --sage:oklch(74% 0.03 140);
  --terracotta:oklch(58% 0.13 38);
  --brown:oklch(38% 0.05 45);
  --espresso:oklch(24% 0.025 45);
  --graphite:oklch(32% 0.01 260);
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --container:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--cream);
  color:var(--espresso);
  line-height:1.5;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-serif); font-weight:600; margin:0;}
p{margin:0;}
a{color:var(--terracotta); text-decoration:none;}
a:hover{color:var(--olive);}
img{max-width:100%; display:block;}
button{font-family:var(--font-sans); cursor:pointer;}
input,textarea,select,button{font-family:var(--font-sans);}
.container{max-width:var(--container); margin:0 auto; padding:0 32px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--ivory); border-bottom:1px solid var(--oat);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; gap:16px;
}
.brand{font-family:var(--font-serif); font-size:24px; font-weight:700; letter-spacing:0.5px; color:var(--espresso);}
.nav-main{display:flex; gap:26px; flex-wrap:wrap;}
.nav-main a{font-size:15px; font-weight:500; color:var(--espresso);}
.nav-main a[aria-current="page"]{color:var(--terracotta);}
.header-actions{display:flex; align-items:center; gap:18px;}
.icon-btn{background:none; border:none; cursor:pointer; font-size:18px; color:var(--espresso); padding:4px;}
.kontakt-link{font-size:15px; font-weight:500; color:var(--espresso); white-space:nowrap;}
.btn-cart{
  position:relative; background:var(--espresso); border:none; color:var(--ivory);
  padding:9px 16px; border-radius:2px; cursor:pointer; font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.cart-badge{background:var(--terracotta); border-radius:50%; min-width:20px; height:20px; display:none; align-items:center; justify-content:center; font-size:12px; padding:0 4px;}
.cart-badge.show{display:flex;}
.menu-btn{background:none; border:1px solid var(--oat); border-radius:2px; padding:8px 10px; cursor:pointer; font-size:16px;}

/* ---------- Mobile menu ---------- */
.mobile-menu{position:fixed; inset:0; z-index:150; background:var(--ivory); display:none;}
.mobile-menu.open{display:block;}
.mobile-menu-head{display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--oat);}
.mobile-menu-brand{font-family:var(--font-serif); font-size:22px; font-weight:700;}
.mobile-menu-close{background:none; border:none; font-size:22px; cursor:pointer;}
.mobile-menu-links{display:flex; flex-direction:column; padding:24px;}
.mobile-menu-links a{padding:16px 0; border-bottom:1px solid var(--oat); font-size:19px; font-weight:500; color:var(--espresso);}

/* ---------- Search overlay ---------- */
.search-overlay{position:fixed; inset:0; z-index:180; background:rgba(36,26,20,0.55); display:none; align-items:flex-start; justify-content:center; padding:80px 20px;}
.search-overlay.open{display:flex;}
.search-panel{background:var(--ivory); border-radius:4px; width:100%; max-width:640px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.search-input{width:100%; padding:14px 16px; font-size:16px; border:1px solid var(--oat); border-radius:2px; background:var(--cream); color:var(--espresso);}
.search-results{margin-top:14px; display:flex; flex-direction:column; gap:4px; max-height:340px; overflow-y:auto;}
.search-results a{display:flex; justify-content:space-between; padding:12px 10px; border-radius:2px; color:var(--espresso); font-size:15px;}
.search-results a:hover{background:var(--oat);}
.search-kind{color:var(--olive); font-size:12px; text-transform:uppercase; letter-spacing:0.5px;}
.search-empty{margin-top:14px; color:var(--brown); font-size:14px; display:none;}

/* ---------- Cart drawer ---------- */
.cart-drawer{position:fixed; inset:0; z-index:170; background:rgba(36,26,20,0.55); display:none;}
.cart-drawer.open{display:block;}
.cart-panel{position:absolute; top:0; right:0; bottom:0; width:100%; max-width:420px; background:var(--ivory); padding:28px; overflow-y:auto; box-shadow:-10px 0 30px rgba(0,0,0,0.2);}
.cart-panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.cart-panel-head h3{font-size:22px;}
.cart-empty-msg{color:var(--brown); font-size:15px;}
.cart-items{display:flex; flex-direction:column; gap:16px;}
.cart-item{display:flex; gap:12px; border-bottom:1px solid var(--oat); padding-bottom:14px;}
.cart-item-thumb{width:64px; height:64px; flex-shrink:0; border-radius:2px; background:repeating-linear-gradient(45deg, var(--oat), var(--oat) 6px, var(--sand) 6px, var(--sand) 12px);}
.cart-item-info{flex:1;}
.cart-item-name{font-weight:600; font-size:15px;}
.cart-item-unit{font-size:13px; color:var(--brown);}
.cart-item-controls{display:flex; align-items:center; gap:10px; margin-top:8px;}
.qty-btn{width:24px; height:24px; border:1px solid var(--oat); background:var(--ivory); cursor:pointer; border-radius:2px;}
.qty-val{font-size:14px; min-width:16px; text-align:center;}
.remove-btn{margin-left:auto; background:none; border:none; color:var(--terracotta); font-size:13px; cursor:pointer;}
.cart-item-total{font-weight:600; font-size:14px; white-space:nowrap;}
.cart-total-row{display:flex; justify-content:space-between; font-size:16px; font-weight:700; padding-top:6px;}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--espresso); color:var(--ivory); padding:18px 24px; display:none; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between; box-shadow:0 -6px 24px rgba(0,0,0,0.2);}
.cookie-banner.show{display:flex;}
.cookie-banner p{margin:0; font-size:14px; max-width:640px; flex:1; min-width:220px; color:var(--ivory);}
.cookie-actions{display:flex; gap:10px; flex-shrink:0;}
.btn-cookie-decline{background:transparent; border:1px solid oklch(60% 0.01 80); color:var(--ivory); padding:10px 18px; border-radius:2px; cursor:pointer; font-size:14px;}
.btn-cookie-accept{background:var(--terracotta); border:none; color:var(--ivory); padding:10px 18px; border-radius:2px; cursor:pointer; font-size:14px; font-weight:600;}

/* ---------- Buttons ---------- */
.btn{display:inline-block; border-radius:2px; font-size:15px; font-weight:600; padding:16px 26px; border:none; cursor:pointer; text-align:center;}
.btn-primary{background:var(--terracotta); color:var(--ivory);}
.btn-outline{background:transparent; color:var(--espresso); border:1px solid var(--espresso);}
.btn-dark{background:var(--espresso); color:var(--ivory);}
.btn-sm{padding:9px 16px; font-size:13px; border-radius:2px;}

/* ---------- Hero ---------- */
.hero{display:grid; grid-template-columns:1.1fr 1fr; min-height:560px;}
.hero-content{display:flex; flex-direction:column; justify-content:center; gap:22px; padding:64px 48px; background:var(--oat);}
.eyebrow{font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--olive); font-weight:600;}
.hero-content h1{font-size:52px; line-height:1.08; color:var(--espresso);}
.hero-content p.lead{font-size:18px; color:var(--brown); max-width:480px;}
.hero-media{width:100%; height:100%; min-height:340px; overflow:hidden;}
.hero-media img{width:100%; height:100%; object-fit:cover;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}

/* ---------- Sections ---------- */
.section{padding:70px 48px;}
.section.bg-ivory{background:var(--ivory);}
.section.bg-oat{background:var(--oat);}
.section.bg-sage{background:var(--sage);}
.section.bg-espresso{background:var(--espresso); color:var(--ivory);}
.section-head{max-width:var(--container); margin:0 auto 36px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px;}
.section-eyebrow{font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--olive); font-weight:600; margin:0 0 12px;}
.section-eyebrow.brown{color:var(--brown);}
.section-title{font-size:34px; margin:0;}
.section-title.center{text-align:center; margin:0 auto;}
.section-lead{font-size:16px; color:var(--brown); margin:8px 0 0;}
.link-more{font-weight:600; font-size:15px;}

.page-head{padding:56px 48px 20px;}
.page-head h1{font-size:38px; margin:0 0 12px;}
.page-head .section-lead{max-width:620px; margin:0 0 32px;}
.page-section{padding:56px 48px;}
.page-narrow{max-width:640px; margin:0 auto;}
.page-narrow-2{max-width:760px; margin:0 auto;}
.page-narrow-3{max-width:800px; margin:0 auto;}
.page-narrow-4{max-width:700px; margin:0 auto;}

/* ---------- Grids & cards ---------- */
.grid{display:grid; gap:16px; max-width:var(--container); margin:0 auto;}
.grid-cat{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.grid-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.grid-cards-sm{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.grid-products{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px;}
.grid-fill{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px;}
.grid-2col{grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.grid-2col-narrow{grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.grid-4stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px; text-align:center;}

.ph-pattern{width:100%; border-radius:2px; }
.ph1{background:repeating-linear-gradient(120deg, var(--oat), var(--oat) 8px, var(--sand) 8px, var(--sand) 16px);}
.ph2{background:repeating-linear-gradient(60deg, var(--sand), var(--sand) 9px, var(--oat) 9px, var(--oat) 18px);}
.ph3{background:repeating-linear-gradient(45deg, var(--oat), var(--oat) 10px, var(--sand) 10px, var(--sand) 20px);}
.ph4{background:repeating-linear-gradient(135deg, var(--oat), var(--oat) 9px, var(--sand) 9px, var(--sand) 18px);}
.ph5{background:repeating-linear-gradient(100deg, var(--sand), var(--sand) 7px, var(--oat) 7px, var(--oat) 14px);}
.ph6{background:repeating-linear-gradient(75deg, var(--sand), var(--sand) 8px, var(--oat) 8px, var(--oat) 16px);}
.ph7{background:repeating-linear-gradient(30deg, var(--sage), var(--sage) 10px, var(--oat) 10px, var(--oat) 20px);}
.ph8{background:repeating-linear-gradient(150deg, var(--sand), var(--sand) 9px, var(--oat) 9px, var(--oat) 18px);}
.ratio-14{aspect-ratio:1.4;}
.ratio-13{aspect-ratio:1.3;}
.ratio-15{aspect-ratio:1.5;}
.ratio-12{aspect-ratio:1.2;}
.ratio-16{aspect-ratio:1.6;}

.cat-card{cursor:pointer; background:var(--cream); border:1px solid var(--oat); border-radius:3px; padding:22px 18px; display:flex; flex-direction:column; gap:10px; transition:transform .15s; text-align:left;}
.cat-card:hover{transform:translateY(-3px);}
.cat-card span{font-weight:600; font-size:15px; color:var(--espresso);}

.card{background:var(--cream); border-radius:3px; overflow:hidden; border:1px solid var(--oat);}
.card.on-ivory{background:var(--ivory);}
.card-body{padding:16px;}
.card-title{font-weight:600; font-size:15px;}
.card-cat{font-size:12px; color:var(--olive); text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:6px;}
.card-desc{font-size:13px; color:var(--brown); margin-top:6px;}
.card-clickable{cursor:pointer;}

.product-card{background:var(--ivory); border:1px solid var(--oat); border-radius:3px; overflow:hidden; display:flex; flex-direction:column;}
.product-media{aspect-ratio:1.2; display:flex; align-items:center; justify-content:center;}
.product-media span{font-family:monospace; font-size:11px; color:var(--brown); background:var(--ivory); padding:3px 8px; border-radius:2px;}
.product-body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.product-name{font-weight:600; font-size:15px;}
.product-unit{font-size:13px; color:var(--brown);}
.product-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:8px;}
.product-price{font-weight:700; font-size:16px;}
.add-cart-btn{background:var(--terracotta); color:var(--ivory); border:none; padding:9px 14px; border-radius:2px; font-size:13px; font-weight:600; cursor:pointer;}

.chip-row{display:flex; gap:10px; flex-wrap:wrap;}
.chip{padding:9px 16px; border-radius:20px; font-size:14px; cursor:pointer; border:1px solid var(--oat); background:var(--ivory); color:var(--espresso); font-weight:500;}
.chip.active{background:var(--terracotta); color:var(--ivory); border-color:var(--terracotta);}
.chip-tab{padding:10px 18px; font-size:14px; font-weight:600; border:none; border-radius:2px; cursor:pointer; background:var(--oat); color:var(--espresso);}
.chip-tab.active{background:var(--terracotta); color:var(--ivory);}

.details-card{background:var(--ivory); border:1px solid var(--oat); border-radius:3px; padding:20px;}
.details-card + .details-card{margin-top:14px;}
.details-card summary{font-weight:600; font-size:16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.details-card summary::-webkit-details-marker{display:none;}
.details-card summary::after{content:'+'; font-size:20px; color:var(--terracotta); flex-shrink:0;}
.details-card[open] summary::after{content:'\2212';}
.details-card .details-body{font-size:14px; color:var(--brown); margin-top:12px;}
.details-card.on-oat{background:var(--oat);}

.ingredient-card{cursor:pointer; background:var(--ivory); border:1px solid var(--oat); border-radius:3px; padding:20px; display:flex; flex-direction:column; gap:8px; text-align:left;}
.ingredient-card h3{font-weight:600; font-size:16px; font-family:var(--font-sans);}
.ingredient-card .okus{font-size:13px; color:var(--brown);}
.ingredient-thumb{width:100%; margin-bottom:8px;}
.ingredient-detail{background:var(--oat); border-radius:3px; padding:28px; margin-bottom:32px; animation:fadeIn .2s ease;}
.ingredient-detail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px;}
.ingredient-detail-grid .lbl{font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--brown); font-weight:600; margin-bottom:4px;}
.ingredient-detail-grid .val{font-size:15px;}
.detail-close{background:none; border:none; font-size:20px; cursor:pointer;}
.detail-head{display:flex; justify-content:space-between; align-items:baseline;}

.idea-block{background:var(--ivory); border-radius:3px; padding:24px; border:1px solid var(--sand);}
.idea-block h3{font-family:var(--font-serif); font-size:22px; font-weight:600; margin-bottom:14px;}
.idea-row{display:flex; gap:8px; font-size:14px; padding:6px 0; border-top:1px solid var(--oat);}
.idea-row .n{color:var(--terracotta); font-weight:700;}

.combo-card{background:var(--oat); border-radius:3px; padding:22px;}
.combo-card h3{font-family:var(--font-serif); font-size:19px; font-weight:600; margin-bottom:12px;}
.combo-card p{font-size:13px; margin-bottom:6px;}

.season-panel{background:var(--ivory); border:1px solid var(--oat); border-radius:3px; padding:28px;}
.season-panel h3{font-size:22px; margin:0 0 16px;}

.lifestyle-card{background:var(--ivory); border-radius:3px; overflow:hidden; border:1px solid var(--oat);}
.lifestyle-card .card-body{font-weight:600; font-size:15px;}

.tip-card{background:var(--oat); border-radius:3px; padding:20px;}
.tip-card .q{font-weight:600; font-size:15px; margin-bottom:8px;}
.tip-card .a{font-size:14px; color:var(--brown);}

.gift-card{background:var(--ivory); border:1px solid var(--oat); border-radius:3px; overflow:hidden;}

.stat-item{display:flex; flex-direction:column; align-items:center;}
.stat-icon{font-size:26px; margin-bottom:10px;}
.stat-title{font-weight:600; margin-bottom:6px;}
.stat-desc{font-size:14px; color:oklch(85% 0.02 75);}

/* ---------- Forms ---------- */
.form-stack{display:flex; flex-direction:column; gap:16px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.field input, .field textarea{width:100%; padding:12px 14px; border:1px solid var(--oat); border-radius:2px; background:var(--ivory); font-size:15px;}
.field textarea{resize:vertical;}
.form-success{background:var(--sage); border-radius:3px; padding:24px; font-weight:600;}
.info-box{background:var(--oat); border-radius:3px; padding:32px; max-width:700px;}
.info-box p{margin:0 0 4px;}
.note-box{margin-top:24px; background:var(--oat); border-radius:3px; padding:20px; max-width:800px; font-size:14px; color:var(--brown);}
.checkout-summary{background:var(--oat); border-radius:3px; padding:22px; margin-bottom:28px;}
.checkout-summary-row{display:flex; justify-content:space-between; font-size:14px; padding:6px 0;}
.checkout-summary-total{display:flex; justify-content:space-between; font-weight:700; font-size:16px; padding-top:10px; border-top:1px solid var(--sand); margin-top:8px;}

/* ---------- Legal tabs ---------- */
.legal-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; border-bottom:1px solid var(--oat); padding-bottom:16px;}
.legal-content{font-size:15px; color:var(--brown); white-space:pre-line;}

/* ---------- Footer ---------- */
.site-footer{background:var(--espresso); color:oklch(90% 0.02 75); padding:56px 48px 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; max-width:var(--container); margin:0 auto 40px;}
.footer-brand{font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--ivory); margin-bottom:10px;}
.footer-tagline{font-size:14px; color:oklch(78% 0.02 75); margin:0;}
.footer-col-title{font-weight:600; color:var(--ivory); margin-bottom:14px; font-size:14px;}
.footer-links{display:flex; flex-direction:column; gap:10px;}
.footer-links a{font-size:14px; color:oklch(80% 0.02 75);}
.footer-op p{font-size:13px; color:oklch(72% 0.02 75); margin:0 0 4px;}
.footer-bottom{max-width:var(--container); margin:0 auto; border-top:1px solid oklch(35% 0.03 45); padding-top:20px; font-size:12px; color:oklch(65% 0.02 75);}

/* ---------- 404 ---------- */
.error-page{padding:120px 48px; text-align:center;}
.error-page h1{font-size:64px; margin-bottom:16px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-media{min-height:260px;}
  .nav-main{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .grid-2col, .grid-2col-narrow{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .site-header{padding:14px 20px;}
  .section, .page-section{padding:48px 20px;}
  .hero-content{padding:40px 24px;}
  .hero-content h1{font-size:36px;}
  .footer-grid{grid-template-columns:1fr;}
  .kontakt-link{display:none;}
}