/* NATURÁLKA — sdílený stylopis (Domine + Karla, self-hosted) */

@font-face{
  font-family:'Domine';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/domine-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Domine';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/domine-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --clr-bg:oklch(97% 0.014 85);
  --clr-bg-alt:oklch(93% 0.02 75);
  --clr-card:oklch(98% 0.006 80);
  --clr-border:oklch(88% 0.028 68);
  --clr-text:oklch(30% 0.03 50);
  --clr-text-dark:oklch(24% 0.03 50);
  --clr-text-mut:oklch(45% 0.03 50);
  --clr-text-mut2:oklch(40% 0.03 50);
  --clr-text-mut3:oklch(48% 0.03 50);
  --clr-heading:oklch(26% 0.028 55);
  --clr-brand:oklch(58% 0.13 38);
  --clr-brand-contrast:oklch(98% 0.006 80);
  --clr-green:oklch(42% 0.045 125);
  --clr-tag:oklch(93% 0.02 75);
  --clr-dark-section:oklch(28% 0.028 55);
  --clr-dark-card:oklch(32% 0.024 55);
  --clr-dark-text:oklch(94% 0.012 80);
  --clr-dark-text-mut:oklch(78% 0.015 80);
  --clr-footer-bg:oklch(23% 0.012 260);
  --clr-footer-text:oklch(88% 0.012 80);
  --clr-footer-border:oklch(32% 0.012 260);
  --max-w:1320px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--clr-bg);
  color:var(--clr-text);
  font-family:'Karla',sans-serif;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font-family:'Karla',sans-serif;}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--clr-card);
  border-bottom:1px solid var(--clr-border);
}
.site-header .wrap{
  padding:14px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{
  width:36px;height:36px;border-radius:50% 50% 50% 6%;
  background:var(--clr-brand);position:relative;flex-shrink:0;
}
.brand-mark::after{
  content:'';position:absolute;width:11px;height:11px;border-radius:50%;
  background:oklch(80% 0.11 85);top:9px;left:9px;
}
.brand-name{
  font-family:'Domine',serif;font-weight:700;font-size:22px;
  letter-spacing:0.4px;color:var(--clr-heading);
}
.main-nav{display:flex;gap:18px;overflow-x:auto;flex:1;min-width:0;padding:4px 0;}
.main-nav a{color:var(--clr-text-mut2);font-size:14.5px;font-weight:600;white-space:nowrap;}
.main-nav a:hover, .header-actions a:hover{opacity:0.72;}
.header-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.header-action-text{color:var(--clr-text-mut);font-size:14px;font-weight:500;}
.cart-link{display:flex;align-items:center;gap:6px;color:var(--clr-heading);font-size:14px;font-weight:700;}
.cart-icon{
  width:22px;height:18px;border-radius:3px 3px 6px 6px;background:var(--clr-brand);
  display:inline-block;position:relative;
}
.cart-icon::before{
  content:'';position:absolute;top:-6px;left:4px;width:14px;height:8px;
  border:2px solid var(--clr-brand);border-bottom:none;border-radius:8px 8px 0 0;
}
.btn-cta{
  background:var(--clr-brand);color:var(--clr-brand-contrast);
  padding:10px 18px;border-radius:22px;font-size:14px;font-weight:700;white-space:nowrap;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;font-family:'Karla',sans-serif;
  font-weight:700;border-radius:26px;
}
.btn-primary{background:var(--clr-brand);color:var(--clr-brand-contrast);padding:15px 28px;font-size:15px;}
.btn-outline{background:transparent;border:1.5px solid oklch(60% 0.03 50);color:var(--clr-text);padding:15px 28px;font-size:15px;border-radius:26px;}
.btn-small{background:var(--clr-brand);color:var(--clr-brand-contrast);padding:9px 14px;border-radius:16px;font-weight:700;font-size:12.5px;}
.btn-chip{
  padding:11px 20px;border-radius:20px;font-weight:700;font-size:14px;cursor:pointer;
  border:1.5px solid var(--clr-border);background:var(--clr-card);color:var(--clr-text);
}
.btn-chip.active{border-color:var(--clr-brand);background:var(--clr-brand);color:var(--clr-brand-contrast);}
.link-more{color:var(--clr-brand);font-weight:700;font-size:14.5px;}

/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;
  padding:48px 24px 64px;
}
.eyebrow{
  display:inline-block;background:var(--clr-bg-alt);color:var(--clr-green);
  font-size:12.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:20px;margin-bottom:20px;
}
.hero h1{font-family:'Domine',serif;font-size:52px;line-height:1.12;color:var(--clr-text-dark);margin:0 0 20px;}
.hero p{font-size:18px;line-height:1.6;color:var(--clr-text-mut2);max-width:480px;margin:0 0 32px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-photo{
  height:420px;border-radius:24px;overflow:hidden;position:relative;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}

/* ---------- Sections ---------- */
.section{padding:64px 24px;}
.section-alt{background:var(--clr-bg-alt);}
.section-dark{background:var(--clr-dark-section);color:var(--clr-dark-text);}
.section-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:32px;}
.section h2{font-family:'Domine',serif;font-size:32px;color:var(--clr-text-dark);margin:0;}
.section-dark h2{color:oklch(97% 0.01 85);}
.section-lead{font-size:15.5px;color:var(--clr-text-mut);margin:0 0 32px;max-width:600px;}
.section-lead-lg{font-size:17px;line-height:1.65;color:var(--clr-text-mut2);max-width:680px;margin:0;}

.eyebrow-label{
  font-size:12.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--clr-green);margin-bottom:14px;
}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:18px;}
.grid-cat{grid-template-columns:repeat(auto-fill, minmax(200px,1fr));}
.grid-5{grid-template-columns:repeat(auto-fill, minmax(220px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit, minmax(150px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit, minmax(260px,1fr));}
.grid-recipe{grid-template-columns:repeat(auto-fill, minmax(240px,1fr));gap:20px;}
.grid-article{grid-template-columns:repeat(auto-fill, minmax(260px,1fr));gap:20px;}
.grid-product{grid-template-columns:repeat(auto-fill, minmax(220px,1fr));}
.grid-pillars{grid-template-columns:repeat(auto-fit, minmax(220px,1fr));}
.grid-facts{grid-template-columns:1fr 1fr;gap:48px;}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}

.card{
  background:var(--clr-card);border:1px solid var(--clr-border);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:12px;
}
.card-photo{
  height:96px;border-radius:10px;overflow:hidden;background:var(--clr-bg-alt);
}
.card-photo img{width:100%;height:100%;object-fit:cover;}
.card-title{font-weight:700;font-size:15.5px;color:var(--clr-heading);}
.card-text{font-size:13px;color:var(--clr-text-mut3);line-height:1.4;}

.card-simple{background:var(--clr-card);border:1px solid var(--clr-border);border-radius:16px;padding:20px;}
.card-tinted{background:var(--clr-card);border-radius:14px;padding:16px;}

.tag-pill{
  background:var(--clr-tag);padding:9px 18px;border-radius:20px;font-size:13.5px;
  font-weight:600;color:var(--clr-text-mut2);display:inline-block;
}
.chip-link{
  background:var(--clr-card);border:1px solid var(--clr-border);border-radius:22px;
  padding:12px 20px;font-weight:600;font-size:14px;color:var(--clr-text);display:inline-block;
}

/* dark cards */
.card-dark{background:var(--clr-dark-card);border-radius:14px;padding:16px;text-align:center;font-size:14px;font-weight:600;color:var(--clr-dark-text);}
.card-dark-lg{background:var(--clr-dark-card);border-radius:14px;padding:20px;}
.card-dark-lg .card-title{color:oklch(96% 0.01 85);margin-bottom:6px;}
.card-dark-lg .card-text{color:var(--clr-dark-text-mut);}

/* product / recipe / article cards with photos */
.thumb-card{
  background:var(--clr-card);border:1px solid var(--clr-border);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
}
.thumb{height:140px;background:var(--clr-bg-alt);overflow:hidden;position:relative;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb-sm{height:120px;}
.thumb-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.badge-bio{
  position:absolute;top:10px;left:10px;background:var(--clr-green);color:var(--clr-brand-contrast);
  font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:10px;
}
.tag-eyebrow{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--clr-brand);}
.price{font-weight:700;font-size:16px;color:var(--clr-brand);}
.meta-sm{font-size:12px;color:var(--clr-text-mut3);}

/* ---------- Fruit/veg spec cards ---------- */
.spec-card{background:var(--clr-card);border-radius:16px;padding:20px;}
.spec-card.bordered{border:1px solid var(--clr-border);}
.spec-photo{height:80px;border-radius:10px;margin-bottom:12px;overflow:hidden;}
.spec-photo img{width:100%;height:100%;object-fit:cover;}
.spec-name{font-weight:700;font-size:16px;color:var(--clr-heading);margin-bottom:8px;}
.spec-list{font-size:12.5px;color:var(--clr-text-mut3);line-height:1.55;}

.month-label{font-weight:700;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;color:var(--clr-brand);margin-bottom:10px;}
.month-val{font-size:14px;color:var(--clr-text-mut2);line-height:1.7;}

.staple-item{font-size:14px;color:var(--clr-text-mut2);display:flex;gap:8px;align-items:baseline;}
.staple-item::before{content:'';width:5px;height:5px;border-radius:50%;background:oklch(65% 0.1 60);flex-shrink:0;align-self:center;}

/* ---------- Steps / numbered lists ---------- */
.step{display:flex;gap:14px;align-items:flex-start;}
.step-num{
  width:30px;height:30px;border-radius:50%;background:var(--clr-brand);color:var(--clr-brand-contrast);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;
}
.step-title{font-weight:700;font-size:15px;color:var(--clr-heading);margin-bottom:4px;}
.step-text{font-size:13.5px;color:var(--clr-text-mut3);line-height:1.5;}

/* ---------- FAQ ---------- */
.faq-item{background:var(--clr-card);border:1px solid var(--clr-border);border-radius:14px;overflow:hidden;}
.faq-q{
  width:100%;text-align:left;background:none;border:none;padding:18px 20px;font-weight:700;
  font-size:15px;color:var(--clr-heading);cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;font-family:'Karla',sans-serif;
}
.faq-a{padding:0 20px 18px;font-size:14.5px;color:var(--clr-text-mut2);line-height:1.6;}

/* generic accordion/disclosure behaviour, used by FAQ, article & recipe toggles */
[data-accordion-panel]{display:none;}
[data-accordion][data-open="true"] [data-accordion-panel]{display:block;}

/* generic tabs: hide all panels in a group except the active one */
[data-tab-panel]{display:none;}
[data-tab-panel].active{display:block;}
[data-tab-panel].active.grid{display:grid;}

/* generic filter: hide cards that don't match the active filter */
[data-filter-value].is-hidden{display:none;}

/* ---------- Forms ---------- */
.form-card{background:var(--clr-card);border:1px solid var(--clr-border);border-radius:18px;padding:30px;}
.form{display:flex;flex-direction:column;gap:16px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form input, .form textarea, .form select{
  padding:13px 14px;border:1px solid oklch(84% 0.028 68);border-radius:10px;font-size:14px;
  font-family:'Karla',sans-serif;width:100%;background:oklch(100% 0 0);color:var(--clr-text);
}
.form textarea{resize:vertical;}
.form-note{font-size:12.5px;color:var(--clr-green);line-height:1.6;margin-top:6px;}
.form-success{background:var(--clr-bg-alt);border-radius:12px;padding:20px;font-size:14.5px;color:var(--clr-green);font-weight:600;}
.form-error{background:oklch(93% 0.05 30);border-radius:12px;padding:16px 20px;font-size:14px;color:oklch(40% 0.12 30);font-weight:600;margin-bottom:4px;}
.required-star{color:var(--clr-brand);}

/* ---------- Cart / eshop ---------- */
.eshop-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;padding-bottom:80px;}
.cart-box{
  background:var(--clr-card);border:1px solid var(--clr-border);border-radius:18px;
  padding:24px;position:sticky;top:88px;
}
.cart-box h2{font-family:'Domine',serif;font-weight:600;font-size:19px;color:var(--clr-heading);margin:0 0 16px;}
.cart-line{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.cart-line-name{font-size:13.5px;font-weight:700;color:var(--clr-heading);}
.cart-line-price{font-size:12px;color:var(--clr-text-mut3);}
.qty-btn{
  width:24px;height:24px;border-radius:50%;border:1px solid oklch(80% 0.03 60);background:none;
  cursor:pointer;font-weight:700;
}
.cart-total-row{display:flex;justify-content:space-between;border-top:1px solid var(--clr-border);padding-top:14px;margin:14px 0 18px;}
.cart-total-row span{font-weight:700;font-size:15px;color:var(--clr-heading);}
.cart-total-row span.total-val{color:var(--clr-brand);}
.cart-empty{font-size:13.5px;color:var(--clr-text-mut3);}
.btn-checkout{
  width:100%;background:var(--clr-brand);color:var(--clr-brand-contrast);border:none;padding:14px;
  border-radius:20px;font-weight:700;font-size:14.5px;cursor:pointer;
}

/* ---------- Contact info block ---------- */
.info-card{background:var(--clr-card);border:1px solid var(--clr-border);border-radius:18px;padding:30px;}
.info-card .biz-name{font-family:'Domine',serif;font-weight:700;font-size:19px;color:var(--clr-heading);margin-bottom:18px;}
.info-line{font-size:14.5px;color:var(--clr-text-mut2);line-height:1.9;margin-bottom:18px;}

/* ---------- Legal ---------- */
.legal-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.legal-body p{font-size:14.5px;line-height:1.8;color:var(--clr-text-mut2);}

/* ---------- Footer ---------- */
.site-footer{background:var(--clr-footer-bg);color:var(--clr-footer-text);}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;
  padding:56px 24px 32px;
}
.footer-brand{font-family:'Domine',serif;font-weight:700;font-size:22px;color:oklch(96% 0.01 85);margin-bottom:10px;}
.footer-quote{font-style:italic;color:oklch(78% 0.02 80);font-size:15px;margin-bottom:16px;}
.footer-desc{font-size:13.5px;color:oklch(68% 0.015 80);line-height:1.6;max-width:280px;}
.footer-heading{font-weight:700;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:oklch(70% 0.02 80);margin-bottom:14px;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{color:oklch(86% 0.012 80);font-size:14px;}
.footer-links a:hover{opacity:0.8;}
.footer-op{font-size:13.5px;color:oklch(78% 0.015 80);line-height:1.7;}
.footer-bottom{
  border-top:1px solid var(--clr-footer-border);max-width:var(--max-w);margin:0 auto;
  padding:18px 24px;font-size:12.5px;color:oklch(58% 0.015 80);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}

/* ---------- Utility ---------- */
.center{text-align:center;}
.italic{font-style:italic;}
.mw-800{max-width:800px;margin:0 auto;}
.mw-900{max-width:900px;margin:0 auto;}
.mw-1000{max-width:1000px;margin:0 auto;}
.skip-link{
  position:absolute;left:-999px;top:auto;background:var(--clr-brand);color:#fff;padding:10px 16px;
  border-radius:8px;z-index:200;
}
.skip-link:focus{left:16px;top:16px;}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr;padding-top:32px;}
  .hero-photo{height:280px;}
  .grid-two, .grid-facts, .eshop-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cart-box{position:static;}
}
@media (max-width: 600px){
  .hero h1{font-size:36px;}
  .section h2{font-size:26px;}
  .footer-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .site-header .wrap{padding:12px 16px;}
  .main-nav{gap:12px;}
}