/* ═══════════════════════════════════════════════════════════
   ECOBENZIN v2 — Full visual system (composition unchanged)
   Outfit + Plus Jakarta Sans · forest/cream palette
   ═══════════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root{
  --canvas:#F3F2ED;
  --canvas-pure:#FFFFFF;
  --canvas-muted:#E8E6E0;
  --canvas-deep:#DCD9D2;
  --ink:#0E1210;
  --ink-body:#2E3530;
  --ink-muted:#5C6560;
  --ink-faint:#8A928C;
  --brand:#1A5C38;
  --brand-mid:#248552;
  --brand-bright:#2FA066;
  --brand-soft:rgba(36,133,82,0.09);
  --brand-ring:rgba(36,133,82,0.18);
  --brand-glow:0 8px 32px rgba(26,92,56,0.24);
  --gold:#B8942E;
  --gold-soft:rgba(184,148,46,0.12);
  --danger:#C0392B;
  --danger-soft:rgba(192,57,43,0.08);
  --display:'Outfit',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-snap:cubic-bezier(0.34,1.2,0.64,1);
  --nav-h:68px;
  --page-pad:clamp(20px,4vw,80px);
  --content-max:1520px;
  --hero-max:min(1720px,100%);
  --wrap:min(var(--content-max),calc(100% - 2 * var(--page-pad)));
  --section-y:clamp(72px,8vw,128px);
  --pad-inline:max(var(--page-pad),calc((100vw - var(--content-max)) / 2));
  --hero-pad-inline:max(var(--page-pad),calc((100vw - 1720px) / 2));
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:22px;
  --radius-xl:28px;
  --shadow-xs:0 1px 3px rgba(14,18,16,0.04);
  --shadow-sm:0 4px 20px rgba(14,18,16,0.06);
  --shadow-md:0 16px 48px rgba(14,18,16,0.09);
  --shadow-lg:0 28px 72px rgba(14,18,16,0.11);
  /* legacy remap */
  --bg:var(--canvas);
  --bg-alt:var(--canvas-muted);
  --surface:var(--canvas-pure);
  --surface-2:var(--canvas-muted);
  --white:var(--ink);
  --w70:var(--ink-body);
  --w40:var(--ink-muted);
  --green:var(--brand-mid);
  --green-brand:var(--brand-bright);
  --green-dim:var(--brand);
  --green-light:var(--brand-soft);
  --border:var(--canvas-deep);
  --border-g:rgba(36,133,82,0.3);
  --red:var(--danger);
  --fm:var(--display);
  --fc:var(--body);
  /* Tu boli štyri deklarácie --radius:var(--radius), --radius-lg:var(--radius-lg),
     --shadow-sm:var(--shadow-sm) a --shadow-md:var(--shadow-md). Premenná, ktorá
     odkazuje sama na seba, je podľa špecifikácie CSS neplatná pri výpočte hodnoty,
     takže sa tieto štyri tokeny vyhodnotili ako prázdne. Keďže stáli v kaskáde
     neskôr než pôvodné hodnoty (riadky vyššie: 14px, 22px a dva tiene), prepísali
     ich — a pokladňa, košík aj právne modály tak prišli o zaoblenie aj tieň.
     Odstránením týchto riadkov sa pôvodné hodnoty obnovia. */
}

/* ─── BASE ─── */
html{scroll-behavior:smooth}
body{
  font-family:var(--body)!important;
  font-size:16px!important;
  line-height:1.6!important;
  color:var(--ink-body)!important;
  background:var(--canvas)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--brand-ring);color:var(--ink)}
a{color:var(--brand-mid);transition:color .2s var(--ease)}
a:hover{color:var(--brand)}

/* ─── MOTION ─── */
@keyframes ecoFadeUp{from{opacity:.6;transform:translateY(18px)}to{opacity:1;transform:none}}

@keyframes ecoShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes ecoPulse{0%,100%{opacity:1}50%{opacity:.45}}
.reveal{
  opacity:1;
  transform:translateY(18px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}.reveal-d2{transition-delay:.14s}.reveal-d3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}
  .hero-product-stack .hp-main,.hero-product-stack .hp-sub{transition:none!important}
  .hero-visual:hover .hp-main{transform:translateY(-50%)!important}
  .hero-visual:hover .hp-sub{transform:none!important}
}

/* ─── NAV ─── */
nav{
  height:var(--nav-h)!important;
  padding:0 var(--pad-inline)!important;
  background:rgba(243,242,237,0.82)!important;
  backdrop-filter:blur(20px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3)!important;
  border-bottom:1px solid transparent!important;
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)!important;
}
nav.nav-scrolled{
  background:rgba(255,255,255,0.92)!important;
  border-bottom-color:var(--canvas-deep)!important;
  box-shadow:var(--shadow-xs)!important;
}
.logo-svg{width:40px!important;height:36px!important;filter:none!important;transition:transform .3s var(--ease-snap)}
.logo-wrap:hover .logo-svg{transform:scale(1.04)}
.logo-text{
  font-family:var(--display)!important;
  font-weight:800!important;
  font-size:14px!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--ink)!important;
}
.logo-text em{color:var(--brand)!important;font-style:normal!important}
.nav-links a{
  font-family:var(--body)!important;
  font-size:14px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--ink-muted)!important;
  position:relative;
  padding:4px 0;
  transition:color .2s var(--ease)!important;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--brand-mid);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav-links a:hover{color:var(--ink)!important}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cart-btn{
  font-family:var(--body)!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  padding:10px 20px!important;
  border-radius:var(--radius-sm)!important;
  background:var(--brand)!important;
  color:#fff!important;
  border:none!important;
  box-shadow:var(--brand-glow)!important;
  transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease)!important;
}
.nav-cart-btn:hover{background:var(--brand-mid)!important;transform:translateY(-1px)!important;box-shadow:0 12px 36px rgba(26,92,56,0.28)!important}
.nav-cart-btn:active{transform:translateY(0)!important}
.cart-count{
  background:#fff!important;
  color:var(--brand)!important;
  border:2px solid var(--brand)!important;
  font-family:var(--body)!important;
  font-weight:700!important;
  font-size:10px!important;
}
.nav-toggle{
  display:none;
  border:1px solid var(--canvas-deep);
  background:var(--canvas-pure);
  width:44px;height:44px;
  align-items:center;justify-content:center;
  cursor:pointer;margin-right:10px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  transition:background .2s,border-color .2s;
}
.nav-toggle:hover{background:var(--canvas-muted)}
.nav-toggle svg{width:20px;height:20px}
.nav-mobile{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:199;
  flex-direction:column;gap:4px;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--canvas-deep);
  padding:16px 20px 24px;
  box-shadow:var(--shadow-sm);
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.nav-mobile.open{display:flex;opacity:1;pointer-events:all;transform:translateY(0)}
.nav-mobile a{
  font-family:var(--body);font-size:15px;font-weight:500;
  color:var(--ink-body);text-decoration:none;
  padding:12px 14px;border-radius:var(--radius-sm);
  transition:background .15s,color .15s;
}
.nav-mobile a:hover{background:var(--brand-soft);color:var(--brand)}
@media(max-width:768px){.nav-toggle{display:inline-flex}.nav-links{display:none!important}}

/* ─── HERO — full viewport (desktop · tablet · mobile) ─── */
.hero{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:var(--canvas)!important;
  border-bottom:1px solid var(--canvas-deep);
  overflow:hidden!important;
  display:flex!important;
  align-items:stretch!important;
  min-height:100svh!important;
  height:100svh!important;
  padding-top:var(--nav-h)!important;
  box-sizing:border-box;
}
.hero-inner{
  display:grid!important;
  position:relative;z-index:1;
  width:100%;
  max-width:1720px;
  margin:0 auto;
  min-height:calc(100svh - var(--nav-h))!important;
  height:calc(100svh - var(--nav-h))!important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;
  gap:clamp(28px,4vw,72px);
  align-items:center;
  padding:clamp(20px,3.5vh,48px) var(--hero-pad-inline);
  box-sizing:border-box;
}
.hero-copy{
  text-align:left;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  font-family:var(--body)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:var(--brand)!important;
  background:var(--brand-soft)!important;
  padding:7px 14px!important;
  border-radius:100px!important;
  margin-bottom:22px!important;
}
.eyebrow-line{display:none!important}
.hero-title{
  font-family:var(--display)!important;
  font-weight:800!important;
  font-size:clamp(36px,4.8vw,56px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
  color:var(--ink)!important;
  margin-bottom:18px!important;
  max-width:none;
}
.hero-title .y,.hero-title .accent{color:var(--brand)!important}
.hero-lead{
  font-size:clamp(17px,1.5vw,20px)!important;
  font-weight:500!important;
  line-height:1.55!important;
  color:var(--ink-body)!important;
  margin-bottom:8px!important;
  max-width:38em;
}
.hero-desc{
  font-size:clamp(15px,1.2vw,17px)!important;
  color:var(--ink-muted)!important;
  line-height:1.6!important;
  text-align:left!important;
  max-width:38em!important;
  margin-bottom:0!important;
}
.hero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  margin-top:26px!important;
  gap:10px!important;
  width:100%;
}
.hero-actions .btn-primary,.hero-actions .btn-ghost{
  padding:13px 22px!important;
  font-size:14px!important;
}
.hero-visual{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  max-height:100%;
  padding:10px;
  box-sizing:border-box;
  background:var(--canvas-muted);
  border:1px solid var(--canvas-deep);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.hero-visual::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse 80% 70% at 55% 45%,rgba(36,133,82,0.1) 0%,rgba(36,133,82,0.03) 50%,transparent 78%);
  pointer-events:none;
  z-index:0;
}
.hero-product-stack{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
  margin:0 auto;
}
.hero-product-stack .hp-main,
.hero-product-stack .hp-sub{
  position:absolute!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center;
  background:transparent;
  border-radius:10px!important;
  transition:transform .4s var(--ease);
}
.hero-product-stack .hp-main{
  height:82%!important;
  width:auto!important;
  max-width:72%!important;
  right:4%!important;
  top:50%!important;
  transform:translateY(-50%);
  box-shadow:0 16px 40px rgba(14,18,16,0.12)!important;
}
.hero-product-stack .hp-sub{
  height:62%!important;
  width:auto!important;
  max-width:52%!important;
  left:2%!important;
  bottom:6%!important;
  box-shadow:0 10px 28px rgba(14,18,16,0.1)!important;
  z-index:2;
}
.hero-visual:hover .hp-main{transform:translateY(calc(-50% - 4px))}
.hero-visual:hover .hp-sub{transform:translateY(-3px)}
.hero-stage{display:none!important}

/* Desktop — visual fills column height */
@media(min-width:901px){
  .hero-title{font-size:clamp(42px,4.2vw,64px)!important;max-width:none!important}
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important}
  .hero-visual{aspect-ratio:16/9!important;height:min(100%,calc((100svh - var(--nav-h)) * 0.72))!important;max-height:calc(100svh - var(--nav-h) - 40px)!important}
  .hero-product-stack .hp-main{height:90%!important;max-width:78%!important}
  .hero-product-stack .hp-sub{height:68%!important;max-width:56%!important}
}

/* Tablet — stacked, full viewport */
@media(min-width:601px) and (max-width:900px){
  .hero-inner{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:clamp(20px,3vh,32px)!important;
    padding:clamp(16px,2.5vh,28px) var(--page-pad)!important;
  }
  .hero-visual{order:-1!important;aspect-ratio:unset!important;height:100%!important;max-height:none!important}
  .hero-copy{align-items:center!important;text-align:center!important}
  .hero-desc,.hero-lead{margin-inline:auto!important;text-align:center!important;max-width:36em!important}
  .hero-title{text-align:center!important}
  .hero-eyebrow{align-self:center!important}
  .hero-actions{justify-content:center!important}
}

/* Mobile — stacked, full viewport */
@media(max-width:600px){
  .hero-title{max-width:none!important;font-size:clamp(32px,8.5vw,44px)!important}
  .hero-inner{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    gap:clamp(14px,2.5vh,24px)!important;
    padding:clamp(12px,2vh,20px) var(--page-pad)!important;
  }
  .hero-visual{order:-1!important;aspect-ratio:16/11!important;height:clamp(190px,34vh,270px)!important;max-height:270px!important;padding:8px!important}
  .hero-copy{align-items:center!important;text-align:center!important}
  .hero-desc,.hero-lead{margin-inline:auto!important;text-align:center!important;max-width:34em!important}
  .hero-title{text-align:center!important}
  .hero-eyebrow{align-self:center!important;margin-bottom:14px!important}
  .hero-actions{justify-content:center!important;margin-top:14px!important}
  .hero-lead{font-size:16px!important}
  .hero-desc{font-size:14px!important}
  .hero-product-stack .hp-main{height:84%!important;max-width:72%!important}
  .hero-product-stack .hp-sub{height:62%!important;max-width:52%!important}
}

/* ─── BUTTONS ─── */
.btn-primary,.btn-cart-add,.btn-checkout,.form-submit,.co-submit{
  font-family:var(--body)!important;
  font-size:15px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  padding:14px 26px!important;
  border-radius:var(--radius-sm)!important;
  background:var(--brand)!important;
  color:#fff!important;
  border:none!important;
  box-shadow:var(--brand-glow)!important;
  cursor:pointer;
  transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease)!important;
}
.nav-cart-btn,.nav-toggle,.var-btn,.qty-btn,.ci-remove{min-height:44px!important}
.foot-legal a,.foot-links a{display:inline-flex!important;align-items:center!important;min-height:32px!important}
.btn-primary:hover,.btn-cart-add:hover,.btn-checkout:hover,.form-submit:hover,.co-submit:hover{
  background:var(--brand-mid)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 14px 40px rgba(26,92,56,0.3)!important;
}
.btn-primary:active,.btn-cart-add:active,.form-submit:active{transform:translateY(0)!important}
.btn-primary svg,.btn-cart-add svg,.form-submit svg,.btn-checkout svg{width:15px;height:15px;opacity:.9}
.btn-ghost,.btn-detail{
  font-family:var(--body)!important;
  font-size:15px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  padding:14px 22px!important;
  border-radius:var(--radius-sm)!important;
  background:var(--canvas-pure)!important;
  color:var(--ink-body)!important;
  border:1px solid var(--canvas-deep)!important;
  box-shadow:var(--shadow-xs)!important;
  transition:all .2s var(--ease)!important;
}
.btn-ghost:hover,.btn-detail:hover{
  border-color:var(--brand-mid)!important;
  color:var(--brand)!important;
  background:var(--brand-soft)!important;
  transform:translateY(-1px)!important;
}
.btn-cart-add.check-avail{
  background:transparent!important;
  color:var(--ink-muted)!important;
  border:1px dashed var(--canvas-deep)!important;
  box-shadow:none!important;
}
.btn-cart-add.check-avail:hover{
  border-color:var(--danger)!important;
  color:var(--danger)!important;
  background:var(--danger-soft)!important;
  box-shadow:none!important;
}
.btn-checkout:disabled,.co-submit:disabled,.form-submit:disabled{
  opacity:.45!important;cursor:not-allowed!important;
  transform:none!important;box-shadow:none!important;
}
.nav-cart-btn{color:#fff!important}

/* ─── TRUST ROADMAP ─── */
.ticker{display:none!important}
.trust-strip{
  background:var(--brand)!important;
  border:none!important;
  padding:0!important;
  overflow:hidden;
}
.trust-strip-track{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:0;
  max-width:var(--content-max);margin:0 auto;
  padding:16px var(--page-pad);
}
.trust-milestone{
  flex:1 1 auto;
  text-align:center;
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.75);
  padding:6px clamp(12px,2vw,24px);
  position:relative;
  line-height:1.4;
}
.trust-milestone:not(:last-child)::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,0.35);
}
.trust-milestone em{
  font-style:normal;
  font-weight:700;
  color:#fff;
}

/* ─── SECTIONS & LABELS ─── */
.section{padding:var(--section-y) var(--pad-inline)!important}
.sec-label,.about-head .sec-label,.promise-head .sec-label,.contact-sec-label{
  font-family:var(--body)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--brand)!important;
}
.sec-label::before,.modal-label::before,.co-label::before,.form-title-row::before{display:none!important}
.sec-title,.about-head h2{
  font-family:var(--display)!important;
  font-weight:700!important;
  font-size:clamp(30px,4vw,44px)!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
  color:var(--ink)!important;
  line-height:1.1!important;
}
.sec-head{
  max-width:var(--content-max);margin:0 auto clamp(44px,5vw,64px)!important;
  flex-direction:column!important;align-items:flex-start!important;
}
.sec-note{
  font-size:17px!important;
  color:var(--ink-muted)!important;
  text-align:left!important;
  max-width:520px!important;
  margin-top:12px!important;
  line-height:1.55!important;
}

/* ─── ABOUT (3 cards, same grid) ─── */
.about-strip{
  background:var(--canvas-pure)!important;
  padding:var(--section-y) var(--pad-inline)!important;
  border-top:1px solid var(--canvas-deep);
  border-bottom:1px solid var(--canvas-deep);
}
.about-head{max-width:560px;margin-bottom:clamp(40px,5vw,56px)}
.about-head p{font-size:17px!important;color:var(--ink-body)!important;line-height:1.6!important}
.about-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.5vw,24px);
  max-width:var(--content-max);margin:0 auto;
}
.about-card{
  background:var(--canvas)!important;
  border:1px solid var(--canvas-deep)!important;
  border-radius:var(--radius-lg)!important;
  padding:clamp(24px,3vw,32px)!important;
  box-shadow:var(--shadow-xs)!important;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)!important;
}
.about-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--shadow-md)!important;
  border-color:var(--border-g)!important;
}
.about-icon{
  width:44px!important;height:44px!important;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft)!important;
  border-radius:var(--radius-sm)!important;
  color:var(--brand)!important;
  margin-bottom:18px!important;
}
.about-icon svg{width:22px;height:22px;stroke-width:1.6}
.about-card h3{
  font-family:var(--display)!important;
  font-size:17px!important;
  font-weight:600!important;
  color:var(--ink)!important;
  margin-bottom:8px!important;
}
.about-card p{font-size:15px!important;color:var(--ink-muted)!important;line-height:1.55!important}

/* ─── PRODUCTS (side-by-side cards) ─── */
#produkty{background:var(--canvas)!important}
.prod-list{max-width:var(--content-max);margin:0 auto;gap:clamp(48px,6vw,72px)!important}
.prod-card,.prod-card.alt{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(320px,1.05fr)!important;
  align-items:stretch!important;
  background:var(--canvas-pure)!important;
  border:1px solid var(--canvas-deep)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-sm)!important;
  overflow:hidden!important;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)!important;
}
.prod-card::after{display:none!important}
.prod-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:var(--shadow-md)!important;
  border-color:var(--border-g)!important;
  background:var(--canvas-pure)!important;
}
.pc-num{display:none!important}
.pc-info{
  padding:clamp(32px,4vw,48px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
}
.pc-tag{
  font-family:var(--body)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  color:var(--brand)!important;
  background:var(--brand-soft)!important;
  border:none!important;
  border-radius:var(--radius-sm)!important;
  padding:6px 12px!important;
  margin-bottom:14px!important;
  display:inline-block!important;
}
.pc-name{
  font-family:var(--display)!important;
  font-size:clamp(28px,3vw,38px)!important;
  font-weight:700!important;
  letter-spacing:-.03em!important;
  color:var(--ink)!important;
  margin-bottom:12px!important;
}
.pc-desc{font-size:16px!important;color:var(--ink-body)!important;line-height:1.6!important;max-width:none!important}
.variants-label{
  font-size:12px!important;font-weight:600!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
  color:var(--ink-muted)!important;margin-top:4px!important;
}
.variants{
  display:inline-flex!important;flex-wrap:wrap;gap:0!important;
  border:1px solid var(--canvas-deep);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--canvas);
  margin-bottom:16px!important;
}
.var-btn{
  font-family:var(--body)!important;
  font-size:14px!important;font-weight:500!important;
  letter-spacing:0!important;text-transform:none!important;
  border:none!important;border-right:1px solid var(--canvas-deep)!important;
  border-radius:0!important;
  padding:11px 18px!important;
  background:transparent!important;
  color:var(--ink-body)!important;
  transition:background .15s,color .15s!important;
}
.var-btn:last-child{border-right:none!important}
.var-btn:hover:not(.active):not(.sold-out){background:var(--canvas-muted)!important;color:var(--ink)!important}
.var-btn.active{
  background:var(--brand)!important;
  color:#fff!important;
  font-weight:600!important;
}
.var-btn.sold-out{
  color:var(--ink-faint)!important;
  text-decoration:line-through!important;
  cursor:not-allowed!important;
}
.var-btn.sold-out:hover{background:var(--danger-soft)!important;color:var(--danger)!important}
.var-btn.sold-out.active{background:var(--danger-soft)!important;color:var(--danger)!important;border-color:transparent!important}
.sold-out-badge{
  font-family:var(--body)!important;
  font-size:12px!important;font-weight:600!important;
  letter-spacing:.04em!important;text-transform:none!important;
  color:var(--danger)!important;
  background:var(--danger-soft)!important;
  padding:6px 12px!important;
  border-radius:var(--radius-sm)!important;
  display:none!important;
  margin-bottom:12px!important;
}
.sold-out-badge.visible{display:inline-block!important}
.pc-price{
  font-family:var(--display)!important;
  font-size:clamp(30px,3.5vw,38px)!important;
  font-weight:700!important;
  color:var(--ink)!important;
  letter-spacing:-.03em!important;
}
.pc-vat,.pc-price-novat{
  font-size:12px!important;text-transform:none!important;
  letter-spacing:0!important;color:var(--ink-muted)!important;
}
.pc-actions{gap:10px!important;margin-bottom:22px!important}
.specs-header-label,.spec-k{
  font-family:var(--body)!important;
  font-size:12px!important;font-weight:500!important;
  letter-spacing:0!important;text-transform:none!important;
  color:var(--ink-muted)!important;
}
.spec-row{border-color:var(--canvas-deep)!important;padding:10px 0!important}
.spec-v{font-weight:600!important;color:var(--brand)!important}
.spec-v.neutral{color:var(--ink-body)!important;font-weight:500!important}
.specs-header-line{background:var(--canvas-deep)!important}
.pc-visual{
  background:
    radial-gradient(ellipse 78% 68% at 50% 44%,rgba(255,255,255,0.94) 0%,transparent 74%),
    var(--canvas-muted)!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  min-height:unset!important;
  padding:clamp(10px,1.8vw,18px)!important;
  box-sizing:border-box!important;
  isolation:isolate!important;
}
.pc-visual-frame{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:unset!important;
  flex:1 1 auto!important;
  min-height:0!important;
}
.pc-visual picture{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
}
.pc-visual img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:clamp(4px,0.8vw,10px)!important;
  box-sizing:border-box!important;
  filter:drop-shadow(0 10px 28px rgba(26,46,34,0.1))!important;
  display:block!important;
  transition:transform .45s var(--ease)!important;
}
.prod-card:hover .pc-visual img{transform:scale(1.03)!important}

/* Desktop — visual column fills card height */
@media(min-width:901px){
  .pc-visual{
    aspect-ratio:unset!important;
    min-height:100%!important;
    align-self:stretch!important;
    padding:clamp(14px,2vw,22px)!important;
  }
  .pc-visual-frame{min-height:min(100%,560px)!important}
}

/* Tablet — image band above/below copy */
@media(min-width:601px) and (max-width:900px){
  .prod-card,.prod-card.alt{grid-template-columns:1fr!important}
  .pc-visual{
    aspect-ratio:4/3!important;
    min-height:clamp(300px,48vw,440px)!important;
    max-height:none!important;
    padding:clamp(10px,2.5vw,16px)!important;
  }
  .pc-visual-frame{max-width:min(100%,560px)!important;margin:0 auto!important}
}

/* Mobile — square showcase */
@media(max-width:600px){
  .pc-visual{
    aspect-ratio:1/1!important;
    min-height:clamp(280px,88vw,420px)!important;
    max-height:none!important;
    padding:10px!important;
  }
  .pc-visual-frame{width:100%!important}
}
.pc-visual .badge-bestseller{
  position:absolute!important;
  top:clamp(12px,2vw,20px)!important;
  right:clamp(12px,2vw,20px)!important;
  left:auto!important;
  z-index:2!important;
  width:clamp(56px,10vw,80px)!important;
  height:auto!important;
  pointer-events:none!important;
}
.badge-bestseller{filter:drop-shadow(0 4px 12px rgba(184,148,46,0.25));transition:transform .3s var(--ease)}
.prod-card:hover .badge-bestseller{transform:scale(1.03)}

/* ─── PROMISE (dark band, 3 cards) ─── */
.promise-section{
  background:var(--ink)!important;
  color:#F2F1EC;
  padding:var(--section-y) var(--pad-inline)!important;
  border:none!important;
}
.promise-head{
  display:grid;grid-template-columns:1fr;
  max-width:var(--content-max);margin:0 auto clamp(44px,5vw,56px)!important;
}
.promise-head .sec-label{color:rgba(242,241,236,0.45)!important}
.promise-head .sec-title{color:#F2F1EC!important}
.promise-intro{font-size:17px!important;color:rgba(242,241,236,0.62)!important;line-height:1.6!important;max-width:540px!important}
.promise-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px);
  max-width:var(--content-max);margin:0 auto;
}
.prom-card{
  background:rgba(255,255,255,0.04)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  border-radius:var(--radius-lg)!important;
  padding:clamp(28px,3vw,36px)!important;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)!important;
}
.prom-card:hover{
  background:rgba(255,255,255,0.07)!important;
  border-color:rgba(47,160,102,0.35)!important;
  transform:translateY(-3px)!important;
}
.prom-title{
  font-family:var(--display)!important;
  font-size:18px!important;font-weight:600!important;
  color:#F2F1EC!important;
  margin-bottom:10px!important;
  text-transform:none!important;
}
.prom-desc{font-size:15px!important;line-height:1.6!important;color:rgba(242,241,236,0.58)!important}

/* ─── CONTACT (left info · right form) ─── */
.contact-section{background:var(--canvas-pure)!important;border-top:1px solid var(--canvas-deep)}
.contact-section .sec-label{margin-bottom:clamp(28px,3vw,40px)}
.contact-inline-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,72px);
  max-width:var(--content-max);margin:0 auto;align-items:start;
}
.contact-left{background:transparent!important;border:none!important;padding:0!important}
.contact-heading{
  font-family:var(--display)!important;
  font-size:clamp(30px,3.5vw,42px)!important;
  font-weight:700!important;
  letter-spacing:-.035em!important;
  color:var(--ink)!important;
  text-transform:none!important;
}
.contact-heading span{color:var(--brand)!important}
.contact-sub-text{font-size:16px!important;color:var(--ink-muted)!important;line-height:1.6!important;margin-bottom:clamp(28px,4vw,36px)!important}
.contact-cards-wrap{display:flex;flex-direction:column;gap:0}
.contact-card{
  display:flex;align-items:flex-start;gap:14px;
  background:transparent!important;
  border:none!important;
  border-bottom:1px solid var(--canvas-deep)!important;
  border-radius:0!important;
  padding:16px 0!important;
  transition:padding-left .2s var(--ease)!important;
}
.contact-card:hover{padding-left:6px!important;background:transparent!important}
.contact-card:last-child{border-bottom:none!important}
.contact-card-icon{
  width:40px!important;height:40px!important;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft)!important;
  border-radius:var(--radius-sm)!important;
  color:var(--brand)!important;flex-shrink:0;
}
.contact-card-label{
  font-size:11px!important;font-weight:700!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
  color:var(--ink-muted)!important;
}
.contact-card-val{font-size:15px!important;font-weight:500!important;color:var(--ink)!important}
.contact-card-val a{color:var(--ink)!important;text-decoration:none}
.contact-card-val a:hover{color:var(--brand)!important}
.contact-form-wrap{
  padding:clamp(28px,4vw,40px)!important;
  background:var(--canvas)!important;
  border:1px solid var(--canvas-deep)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-sm)!important;
}
.form-title-row{
  font-family:var(--body)!important;
  font-size:11px!important;font-weight:700!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:var(--brand)!important;
  margin-bottom:24px!important;
}
.form-label,.co-field-label{
  font-family:var(--body)!important;
  font-size:12px!important;font-weight:600!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  color:var(--ink-body)!important;
}
.form-input,.form-select,.form-textarea,.co-input{
  font-family:var(--body)!important;
  font-size:15px!important;
  color:var(--ink)!important;
  background:var(--canvas-pure)!important;
  border:1px solid var(--canvas-deep)!important;
  border-radius:var(--radius-sm)!important;
  padding:13px 16px!important;
  transition:border-color .2s,box-shadow .2s,background .2s!important;
}
.form-input::placeholder,.form-textarea::placeholder,.co-input::placeholder{color:var(--ink-faint)!important;font-weight:400!important}
.form-input:focus,.form-select:focus,.form-textarea:focus,.co-input:focus{
  border-color:var(--brand-mid)!important;
  box-shadow:0 0 0 3px var(--brand-ring)!important;
  background:var(--canvas-pure)!important;
  outline:none!important;
}
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 6 5-6' stroke='%235C6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
}
.phone-row{
  display:flex;align-items:stretch;
  border:1px solid var(--canvas-deep);border-radius:var(--radius-sm);
  background:var(--canvas-pure);overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.phone-row:focus-within{border-color:var(--brand-mid);box-shadow:0 0 0 3px var(--brand-ring)}
.phone-row input#f-phone{
  color:var(--ink)!important;
  font-family:var(--body)!important;
  font-size:15px!important;
  background:transparent!important;
  border:none;padding:13px 16px;outline:none;flex:1;min-width:0;
}
.phone-select-btn{
  background:var(--canvas-muted)!important;
  border-right:1px solid var(--canvas-deep)!important;
  color:var(--ink-body)!important;
  font-family:var(--body)!important;font-weight:600!important;
  min-width:110px;
}
.phone-select-btn:focus-visible{
  outline:2px solid var(--brand-mid)!important;
  outline-offset:2px!important;
}
.phone-select-dropdown{
  background:var(--canvas-pure)!important;
  border:1px solid var(--canvas-deep)!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:var(--shadow-md)!important;
}
.phone-search{background:var(--canvas)!important;color:var(--ink)!important}
.phone-select-option:hover,.phone-select-option.pso-active{background:var(--brand-soft)!important}
.pso-code{color:var(--brand)!important}
.shipping-note-box{
  margin-top:16px;padding:14px 16px;
  background:var(--brand-soft);border-radius:var(--radius-sm);
  border:1px solid rgba(36,133,82,0.12);
}
.shipping-note-box label{font-family:var(--body)!important;font-size:13px!important;color:var(--ink-body)!important}
.shipping-note-box input[type="checkbox"]{accent-color:var(--brand-mid)!important;width:16px!important;height:16px!important}
.custom-vol-row{border-radius:var(--radius-sm)!important;border-color:var(--canvas-deep)!important;background:var(--canvas-pure)!important}
.custom-vol-unit{font-family:var(--body)!important;color:var(--brand)!important;font-weight:600!important}

/* ─── CART & CHECKOUT ─── */
.cart-overlay{background:rgba(14,18,16,0.4)!important;backdrop-filter:blur(8px)!important;z-index:1100!important}
.cart-drawer{z-index:1110!important}
.cart-drawer,.cart-footer,.checkout-box{background:var(--canvas-pure)!important;border-color:var(--canvas-deep)!important}
.cart-drawer,.checkout-box,.modal-box,.legal-box{border-radius:var(--radius-lg)!important}
.cart-title,.co-title{
  font-family:var(--display)!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:var(--ink)!important;
  text-transform:none!important;
}
.cart-title span{color:var(--brand)!important}
.cart-close,.modal-close,.legal-close,.co-close{
  font-family:var(--body)!important;
  font-size:13px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  border-radius:var(--radius-sm)!important;
  border-color:var(--canvas-deep)!important;
  color:var(--ink-muted)!important;
}
.cart-close:hover,.modal-close:hover,.co-close:hover{color:var(--ink)!important;border-color:var(--ink-muted)!important}
.ci-name,.co-item-name{font-family:var(--body)!important;text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important}
.ci-price,.co-item-price{color:var(--brand)!important;font-family:var(--display)!important}
.cart-total-val{font-family:var(--display)!important;color:var(--ink)!important}
.qty-btn{border-radius:var(--radius-sm)!important;border-color:var(--canvas-deep)!important;background:var(--canvas)!important;color:var(--ink)!important}
.qty-btn:hover{border-color:var(--brand-mid)!important;background:var(--brand-soft)!important}
.checkout-overlay,.modal-overlay,.legal-overlay,.pm-overlay{background:rgba(14,18,16,0.45)!important;backdrop-filter:blur(10px)!important;z-index:1200!important}
.co-gopay-badge{background:var(--brand-soft)!important;border-color:rgba(36,133,82,0.15)!important;border-radius:var(--radius-sm)!important}
.co-gopay-badge strong{color:var(--ink)!important}
.co-gopay-badge p{color:var(--ink-muted)!important;font-family:var(--body)!important;letter-spacing:0!important;text-transform:none!important}

/* ─── MODALS ─── */
.modal-label,.co-label,.legal-label{
  font-family:var(--body)!important;
  font-size:11px!important;font-weight:700!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
  color:var(--brand)!important;
}
.modal-title,.legal-title{
  font-family:var(--display)!important;
  font-weight:700!important;
  letter-spacing:-.03em!important;
  text-transform:none!important;
  color:var(--ink)!important;
}
.modal-lead{
  color:var(--ink-body)!important;
  background:var(--brand-soft)!important;
  border-left:3px solid var(--brand-mid)!important;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0!important;
  font-size:15px!important;
}
.modal-body{font-size:15px!important;color:var(--ink-body)!important}
.modal-body strong{color:var(--ink)!important}
.mf-item{
  background:var(--canvas)!important;
  border:1px solid var(--canvas-deep)!important;
  border-radius:var(--radius-sm)!important;
  padding:16px!important;
}
.mf-num{font-family:var(--display)!important;color:var(--brand)!important}
.mf-label{font-family:var(--body)!important;text-transform:none!important;letter-spacing:0!important;color:var(--ink-muted)!important}
.legal-body h3{font-family:var(--body)!important;text-transform:none!important;letter-spacing:.04em!important}
.legal-pdf-cta{background:var(--canvas-muted)!important;border-color:var(--canvas-deep)!important;border-radius:var(--radius)!important}
.legal-pdf-cta-btn{
  font-family:var(--body)!important;font-weight:600!important;
  text-transform:none!important;letter-spacing:0!important;
  background:var(--brand)!important;border-radius:var(--radius-sm)!important;
}

/* ─── FOOTER ─── */
footer{
  background:var(--canvas)!important;
  border-top:1px solid var(--canvas-deep)!important;
  padding:40px var(--pad-inline)!important;
}
.foot-company,.foot-copy{font-size:13px!important;color:var(--ink-muted)!important;line-height:1.7!important}
.foot-company strong{color:var(--ink)!important}
.foot-legal a,.foot-links a{
  font-family:var(--body)!important;
  font-size:13px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--ink-muted)!important;
}
.foot-legal a:hover{color:var(--brand)!important}

/* ─── COOKIE BANNER ─── */
.cookie-banner{
  position:fixed!important;
  left:clamp(14px,4vw,34px)!important;
  right:clamp(14px,4vw,34px)!important;
  bottom:clamp(14px,4vw,28px)!important;
  z-index:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  max-width:960px!important;
  margin:0 auto!important;
  padding:16px 18px!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(18px)!important;
  transition:opacity .25s var(--ease),transform .25s var(--ease)!important;
  background:var(--canvas-pure)!important;
  border-top:1px solid var(--canvas-deep)!important;
  border:1px solid var(--canvas-deep)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:0 -12px 40px rgba(14,18,16,0.08)!important;
  font-family:var(--body)!important;
}
.cookie-banner.visible{opacity:1!important;pointer-events:auto!important;transform:none!important}
.cookie-text{font-size:14px!important;line-height:1.55!important;color:var(--ink-muted)!important}
.cookie-btn-wrap{display:flex!important;gap:10px!important;flex-shrink:0!important}
.cookie-btn{
  font-family:var(--body)!important;
  font-weight:600!important;
  text-transform:none!important;
  border-radius:var(--radius-sm)!important;
  transition:transform .15s var(--ease)!important;
  min-height:40px!important;
  padding:10px 16px!important;
}
.cookie-btn-accept{background:var(--brand)!important;color:#fff!important}
.cookie-btn-decline{border:1px solid var(--canvas-deep)!important;color:var(--ink-muted)!important;background:transparent!important}
@media(max-width:640px){
  .cookie-banner{flex-direction:column!important;align-items:stretch!important;padding:14px!important}
  .cookie-btn-wrap{width:100%!important}
  .cookie-btn{flex:1!important}
}

/* ─── TYPOGRAPHY RESET ─── */
[data-i18n]{text-transform:inherit}
.cart-title,.co-success h3{letter-spacing:-.02em!important}

/* ─── RESPONSIVE (site-wide) ─── */
@media(max-width:1024px){
  .about-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}

@media(max-width:900px){
  .prod-card,.prod-card.alt{grid-template-columns:1fr!important}
  .prod-card.alt .pc-visual{order:0!important}
  .promise-grid{grid-template-columns:1fr 1fr!important}
  .trust-milestone{flex:1 1 45%;padding:8px 12px}
  .trust-milestone:not(:last-child)::after{display:none}
}

@media(max-width:768px){
  .about-grid{grid-template-columns:1fr!important}
  .contact-inline-grid{grid-template-columns:1fr!important}
  .sec-head{margin-bottom:36px!important}
  .trust-strip-track{flex-direction:column;gap:4px;padding:14px var(--page-pad)}
  .trust-milestone{flex:1 1 100%;padding:4px 0}
}

@media(max-width:600px){
  body{font-size:15px!important}
  .hero-actions{flex-direction:column!important;width:100%;max-width:360px;margin-inline:auto}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;justify-content:center}
  .promise-grid{grid-template-columns:1fr!important}
  .variants{display:flex!important;flex-wrap:wrap!important;border-radius:var(--radius-sm)!important}
  .var-btn{border-right:none!important;border-bottom:1px solid var(--canvas-deep)!important;flex:1 1 45%}
  .pc-actions{flex-direction:column!important}
  .btn-cart-add,.btn-detail,.btn-primary,.btn-ghost{width:100%;justify-content:center}
  .form-row{grid-template-columns:1fr!important}
  footer{text-align:center}
}
@media(max-width:400px){
  .nav-cart-btn span:not(.cart-count){display:none}
  .nav-cart-btn{padding:10px 14px!important}
}

/* ─── LIVE HOSTING POLISH PASS ─────────────────────────────────────────────
   Jemné vizuálne doladenie bez zmeny identity: lepší kontrast produktových
   fotiek, mäkší prémiový rám a výraznejšie CTA/focus stavy pre produkciu. */
.hero-visual,
.pc-visual{
  position:relative!important;
  isolation:isolate!important;
}

.hero-visual::before{
  content:"";
  position:absolute;
  inset:12px;
  z-index:0;
  border-radius:calc(var(--radius-lg) + 8px);
  background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.92),transparent 32%),
    radial-gradient(circle at 72% 72%,rgba(34,139,79,.18),transparent 42%);
  pointer-events:none;
}

.hero-img-stage,
.pc-visual{
  border:1px solid rgba(22,90,52,.13)!important;
  box-shadow:
    0 28px 80px rgba(18,40,28,.13),
    inset 0 1px 0 rgba(255,255,255,.72)!important;
}

.prod-card,
.prod-card.alt{
  min-height:clamp(560px,70vh,720px)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(250,248,240,.9)),
    var(--canvas-pure)!important;
}

.pc-info{
  justify-content:center!important;
  gap:0!important;
}

.pc-visual{
  overflow:hidden!important;
  padding:clamp(16px,2vw,24px)!important;
  background:
    radial-gradient(circle at 24% 18%,rgba(255,255,255,.9),transparent 34%),
    radial-gradient(circle at 75% 72%,rgba(46,139,71,.18),transparent 44%),
    linear-gradient(145deg,#f7f3e8 0%,#edf3e8 100%)!important;
}

.pc-visual::after{
  content:"ECO séria";
  position:absolute;
  top:clamp(14px,2vw,22px);
  left:clamp(14px,2vw,22px);
  z-index:2;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(22,90,52,.12);
  color:var(--brand)!important;
  font:700 11px/1 var(--body);
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 10px 28px rgba(18,40,28,.08);
  backdrop-filter:blur(12px);
}

.pc-visual-frame{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border-radius:calc(var(--radius-lg) - 8px)!important;
  overflow:hidden!important;
}

.pc-visual img{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  object-fit:cover!important;
  border-radius:calc(var(--radius-lg) - 8px)!important;
  filter:saturate(1.08) contrast(1.05) brightness(.98)!important;
  box-shadow:0 18px 48px rgba(18,40,28,.16)!important;
}

.btn-primary,
.btn-cart-add,
.cookie-btn-accept,
.legal-pdf-cta-btn{
  background:
    linear-gradient(135deg,var(--brand) 0%,var(--brand-mid) 100%)!important;
  box-shadow:0 16px 36px rgba(36,133,82,.24)!important;
}

.btn-primary:hover,
.btn-cart-add:hover,
.legal-pdf-cta-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 20px 44px rgba(36,133,82,.3)!important;
}

.btn-ghost,
.btn-detail{
  background:rgba(255,255,255,.68)!important;
  border-color:rgba(22,90,52,.16)!important;
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-cart-add:focus-visible,
.btn-detail:focus-visible,
.var-btn:focus-visible,
.foot-legal a:focus-visible{
  outline:3px solid rgba(46,139,71,.28)!important;
  outline-offset:3px!important;
}

.var-btn.active{
  background:linear-gradient(135deg,rgba(46,139,71,.12),rgba(46,139,71,.05))!important;
  border-color:rgba(46,139,71,.24)!important;
}

@media(min-width:901px){
  .prod-card,
  .prod-card.alt{
    grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr)!important;
    min-height:0!important;
    height:auto!important;
  }
  .pc-visual{
    aspect-ratio:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    align-self:stretch!important;
  }
  .pc-visual-frame{
    flex:0 1 100%!important;
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/3!important;
  }
  .pc-visual picture,
  .pc-visual img{
    min-width:0!important;
    max-width:100%!important;
  }
}

@media(max-width:900px){
  .prod-card,
  .prod-card.alt{
    min-height:auto!important;
  }
  .pc-visual{
    aspect-ratio:4/3!important;
  }
}

/* PROFESSIONAL STOREFRONT HERO — clear hierarchy, restrained motion, direct buying path */
.hero{
  position:relative!important;
  height:auto!important;
  min-height:max(720px,100svh)!important;
  padding-top:var(--nav-h)!important;
  background:
    radial-gradient(circle at 88% 16%,rgba(42,132,80,.10),transparent 31%),
    linear-gradient(180deg,#f8f7f3 0%,var(--canvas) 100%)!important;
  border-bottom:0!important;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(14,18,16,.13),transparent);
}
.hero-inner{
  width:min(100%,1440px)!important;
  max-width:1440px!important;
  min-height:calc(100svh - var(--nav-h))!important;
  height:auto!important;
  grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr)!important;
  gap:clamp(48px,6vw,96px)!important;
  padding:clamp(52px,7vh,88px) clamp(24px,5vw,72px)!important;
}
.hero-copy{
  max-width:620px;
  align-items:flex-start!important;
  text-align:left!important;
}
.hero-eyebrow{
  gap:10px!important;
  margin-bottom:24px!important;
  padding:0!important;
  color:var(--brand)!important;
  background:transparent!important;
  border-radius:0!important;
  font-size:11px!important;
  letter-spacing:.14em!important;
}
.hero-eyebrow-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--brand-bright);
  box-shadow:0 0 0 5px rgba(47,160,102,.12);
}
.hero-title{
  max-width:760px!important;
  margin:0 0 24px!important;
  font-size:clamp(52px,4.55vw,74px)!important;
  font-weight:800!important;
  line-height:.98!important;
  letter-spacing:-.052em!important;
  text-wrap:balance;
}
.hero-title .accent{
  color:var(--brand)!important;
}
.hero-lead{
  max-width:56ch!important;
  margin:0!important;
  font-size:clamp(17px,1.45vw,20px)!important;
  font-weight:500!important;
  line-height:1.65!important;
  color:var(--ink-body)!important;
}
.hero-desc{display:none!important}
.hero-benefits{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  width:100%;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}
.hero-benefits li{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.4;
}
.hero-benefits strong{color:var(--ink);font-weight:700}
.hero-check{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:rgba(36,133,82,.10);
  color:var(--brand);
  font-size:12px;
  font-weight:800;
}
.hero-actions{
  width:auto!important;
  margin-top:30px!important;
  gap:12px!important;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost{
  min-height:50px;
  padding:14px 24px!important;
  border-radius:12px!important;
  font-size:14px!important;
}
.hero-assurance{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin:17px 0 0;
  color:var(--ink-faint);
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.01em;
}
.hero-assurance>span{color:var(--brand-bright);font-size:8px}
.hero-assurance>i{width:1px;height:13px;background:var(--canvas-deep)}
.hero-visual{
  isolation:isolate!important;
  width:100%!important;
  height:min(680px,calc(100svh - 128px))!important;
  min-height:500px!important;
  max-height:680px!important;
  aspect-ratio:1.08!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(14,18,16,.09)!important;
  border-radius:28px!important;
  background:#dfe8dc!important;
  box-shadow:0 36px 90px rgba(18,40,28,.16)!important;
}
.hero-visual::before{
  inset:0!important;
  z-index:1!important;
  border-radius:inherit!important;
  background:linear-gradient(180deg,transparent 48%,rgba(5,18,11,.42) 100%)!important;
}
.hero-product-stack{
  position:absolute!important;
  inset:0;
  width:100%!important;
  height:100%!important;
}
.hero-product-stack .hp-main{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:saturate(.92) contrast(1.03) brightness(.96);
  transform:none!important;
  transition:transform .8s var(--ease)!important;
}
.hero-visual:hover .hp-main{transform:scale(1.015)!important}
.hero-variant-card{
  position:absolute;
  top:22px;
  left:22px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(218px,42%);
  padding:8px;
  color:var(--ink);
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.68);
  border-radius:16px;
  box-shadow:0 14px 34px rgba(13,30,20,.18);
  backdrop-filter:blur(14px);
}
.hero-variant-card .hp-sub{
  position:static!important;
  width:58px!important;
  height:58px!important;
  max-width:none!important;
  flex:0 0 58px;
  object-fit:cover!important;
  border-radius:11px!important;
  box-shadow:none!important;
  transform:none!important;
}
.hero-variant-card>span{display:flex;flex-direction:column;min-width:0}
.hero-variant-card strong{font-family:var(--display);font-size:14px;line-height:1.2}
.hero-variant-card small{margin-top:3px;color:var(--ink-muted);font-size:10px;line-height:1.25}
.hero-buy-card{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:3;
  width:min(360px,calc(100% - 44px));
  padding:18px;
  color:var(--ink);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;
  box-shadow:0 20px 48px rgba(11,29,18,.24);
  backdrop-filter:blur(16px) saturate(1.15);
}
.hero-buy-top,.hero-buy-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-buy-top{margin-bottom:11px}
.hero-stock,.hero-volume{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--brand);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.hero-stock i{width:7px;height:7px;border-radius:50%;background:var(--brand-bright);box-shadow:0 0 0 4px rgba(47,160,102,.12)}
.hero-volume{color:var(--ink-faint)}
.hero-product-name{display:block;font-family:var(--display);font-size:21px;line-height:1.15}
.hero-product-type{display:block;margin-top:4px;color:var(--ink-muted);font-size:12px}
.hero-buy-bottom{margin-top:17px;padding-top:14px;border-top:1px solid var(--canvas-deep)}
.hero-price{display:flex;align-items:baseline;gap:6px}
.hero-price strong{font-family:var(--display);font-size:20px;line-height:1}
.hero-price small{color:var(--ink-faint);font-size:10px}
.hero-buy-card button{
  border:0;
  padding:10px 12px;
  color:#fff;
  background:var(--brand);
  border-radius:10px;
  font-family:var(--body);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.hero-buy-card button:hover{background:var(--brand-mid);transform:translateY(-1px)}
.hero-buy-card button:focus-visible{outline:3px solid rgba(47,160,102,.28);outline-offset:3px}

@media(max-width:1100px) and (min-width:901px){
  .hero-inner{grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr)!important;gap:42px!important}
  .hero-title{font-size:clamp(48px,5vw,64px)!important}
}
@media(max-width:900px){
  .hero{min-height:auto!important}
  .hero-inner{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    min-height:auto!important;
    height:auto!important;
    gap:44px!important;
    padding:54px var(--page-pad) 64px!important;
  }
  .hero-copy{order:0!important;max-width:680px;margin-inline:auto;align-items:flex-start!important;text-align:left!important}
  .hero-title{font-size:clamp(46px,8vw,68px)!important;text-align:left!important}
  .hero-lead{margin-inline:0!important;text-align:left!important}
  .hero-eyebrow{align-self:flex-start!important}
  .hero-actions{justify-content:flex-start!important}
  .hero-visual{
    order:1!important;
    width:min(100%,680px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-inline:auto;
    aspect-ratio:4/3!important;
  }
}
@media(max-width:600px){
  .hero-inner{gap:34px!important;padding:38px 20px 48px!important}
  .hero-title{font-size:clamp(39px,11vw,52px)!important;line-height:1.01!important;text-align:left!important;margin-bottom:19px!important}
  .hero-lead{font-size:16px!important;line-height:1.6!important;text-align:left!important}
  .hero-eyebrow{align-self:flex-start!important;margin-bottom:18px!important;font-size:10px!important}
  .hero-benefits{margin-top:22px;gap:9px}
  .hero-benefits li{font-size:13px}
  .hero-actions{width:100%!important;max-width:none!important;justify-content:flex-start!important;margin:26px 0 0!important}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%!important}
  .hero-assurance{gap:7px;font-size:10px}
  .hero-visual{aspect-ratio:4/3!important;border-radius:20px!important}
  .hero-variant-card{display:none}
  .hero-buy-card{right:12px;bottom:12px;width:calc(100% - 24px);padding:13px;border-radius:14px}
  .hero-buy-top{margin-bottom:7px}
  .hero-product-name{font-size:17px}
  .hero-product-type{font-size:10px}
  .hero-buy-bottom{margin-top:10px;padding-top:10px}
  .hero-price strong{font-size:17px}
  .hero-buy-card button{padding:9px 10px;font-size:10px}
}