:root {
  --bg:#F6F7F4;
  --ink:#1B241E;
  --muted:#4B5B50;
  --line:#D7DED5;
  --a:#2F6F4E;
  --b:#B7D7C2;
  --sun:#E9E2C8;
  --r:24px;
  --max:1200px;
  --shadow: 0 18px 40px rgba(14,21,17,.10);
  --shadow2: 0 10px 26px rgba(14,21,17,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  background:
    radial-gradient(900px 520px at 14% 10%, rgba(183,215,194,.55), transparent 60%),
    radial-gradient(900px 520px at 90% 18%, rgba(233,226,200,.55), transparent 62%),
    linear-gradient(180deg, var(--bg), #fff 70%);
  color:var(--ink);
  line-height:1.65;
}
a{color:inherit}
a:hover{opacity:.9; text-decoration:none}
.skip{position:absolute; left:-999px; top:auto}
.skip:focus{left:16px; top:12px; background:#fff; padding:10px 12px; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow2)}
.hdr{position:sticky; top:0; z-index:40; background:rgba(246,247,244,.72); backdrop-filter: blur(10px); border-bottom:1px solid rgba(215,222,213,.9)}
.hdr__bar{max-width:var(--max); margin:0 auto; padding:14px 18px; display:grid; grid-template-columns: 1fr auto 1.4fr; align-items:center; gap:14px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo__mark{width:12px; height:12px; border-radius:6px; background:linear-gradient(135deg,var(--a),#1d3f2e); box-shadow:0 16px 26px rgba(47,111,78,.20)}
.logo__text{font-weight:800; letter-spacing:.2px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}
.nav{display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap}
.nav a{font-family: ui-sans-serif, system-ui; font-size:14px; padding:8px 10px; border-radius:999px}
.nav a:hover{background:rgba(183,215,194,.25)}
.bag{justify-self:center; display:flex; align-items:center; gap:10px; text-decoration:none; padding:8px 12px; border-radius:999px; border:1px solid rgba(215,222,213,.95); background:rgba(255,255,255,.75)}
.bag__label{font-family: ui-sans-serif, system-ui; font-size:13px; color:var(--muted)}
.bag__count{min-width:26px; height:22px; display:grid; place-items:center; border-radius:999px; background:var(--a); color:#fff; font-family: ui-sans-serif, system-ui; font-size:12px}
.shell{max-width:var(--max); margin:0 auto; padding:24px 18px 58px}
h1{margin:0 0 10px; font-size:40px; line-height:1.08; font-family: ui-sans-serif, system-ui; letter-spacing:-.2px}
h2{margin:0 0 8px; font-size:22px; font-family: ui-sans-serif, system-ui}
h3{margin:0 0 6px; font-size:16px; font-family: ui-sans-serif, system-ui}
.kicker{margin:0 0 8px; font-family: ui-sans-serif, system-ui; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.lead{margin:0; color:var(--muted); white-space:pre-line; font-family: ui-sans-serif, system-ui; font-size:15px}
.hero{display:grid; grid-template-columns: .95fr 1.05fr; gap:16px; align-items:stretch}
.hero__media{border-radius:var(--r); overflow:hidden; border:1px solid rgba(215,222,213,.95); box-shadow:var(--shadow2); position:relative}
.hero__media img{width:100%; height:100%; object-fit:cover; display:block}
.hero__stamp{position:absolute; left:14px; bottom:14px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid rgba(215,222,213,.95); font-family: ui-sans-serif, system-ui; font-size:12px; color:var(--muted)}
.hero__copy{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); box-shadow:var(--shadow); padding:18px}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid transparent; font-family: ui-sans-serif, system-ui; font-weight:800; cursor:pointer; text-decoration:none; background:none}
.btn--primary{background:var(--a); color:#fff; box-shadow:0 18px 40px rgba(47,111,78,.22)}
.btn--ghost{border-color:rgba(215,222,213,.95); background:rgba(255,255,255,.72)}
.band{margin-top:16px}
.band__row{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.stat{background:rgba(255,255,255,.72); border:1px solid rgba(215,222,213,.95); border-radius:18px; padding:12px; box-shadow:var(--shadow2); display:flex; justify-content:space-between; align-items:baseline}
.stat b{font-family: ui-sans-serif, system-ui}
.stat span{color:var(--muted); font-family: ui-sans-serif, system-ui; font-size:12px}
.grid{margin-top:18px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.panel{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:16px; box-shadow:var(--shadow2)}
.panel--sun{background:linear-gradient(180deg, rgba(233,226,200,.65), rgba(255,255,255,.78));}
.panel--link{text-decoration:none; transition: transform .12s ease}
.panel--link:hover{transform: translateY(-2px)}
.link{display:inline-block; margin-top:10px; font-family: ui-sans-serif, system-ui; color:var(--a)}
.showcase{margin-top:22px}
.showcase__head{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:10px}
.showcase__head p{margin:0; color:var(--muted); font-family: ui-sans-serif, system-ui}
.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.cards--grid{margin-top:14px}
.card{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:14px; box-shadow:var(--shadow2); display:flex; flex-direction:column; justify-content:space-between}
.card__top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.chip{padding:6px 10px; border-radius:999px; border:1px solid rgba(215,222,213,.95); background:rgba(183,215,194,.22); font-family: ui-sans-serif, system-ui; font-size:12px; color:var(--muted)}
.meta{font-family: ui-sans-serif, system-ui; font-size:12px; color:var(--muted)}
.card__title a{text-decoration:none}
.card__text{margin:0; color:var(--muted); font-family: ui-sans-serif, system-ui; font-size:13px}
.card__btm{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px}
.money{font-family: ui-sans-serif, system-ui; font-weight:900}
.act{padding:9px 12px; border-radius:999px; border:1px solid rgba(47,111,78,.28); background:rgba(183,215,194,.24); font-family: ui-sans-serif, system-ui; font-weight:900; cursor:pointer}
.head{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:start}
.head--single{grid-template-columns:1fr}
.head__left{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.head__right{display:flex; flex-direction:column; gap:12px}
.filter{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:14px; box-shadow:var(--shadow2); display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:end}
.filter label{display:flex; flex-direction:column; gap:6px}
.filter span{font-family: ui-sans-serif, system-ui; font-size:12px; color:var(--muted)}
input,select,textarea{padding:10px 12px; border-radius:16px; border:1px solid rgba(215,222,213,.98); background:#fff; outline:none; font-family: ui-sans-serif, system-ui}
input:focus,select:focus,textarea:focus{border-color: rgba(47,111,78,.55); box-shadow:0 0 0 4px rgba(183,215,194,.25)}
.note{background:rgba(255,255,255,.74); border:1px solid rgba(215,222,213,.95); border-radius:18px; padding:12px; box-shadow:var(--shadow2); color:var(--muted); font-family: ui-sans-serif, system-ui; font-size:12px}
.thumb{width:100%; border-radius:var(--r); border:1px solid rgba(215,222,213,.95); box-shadow:var(--shadow2)}
.prodTop{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:stretch}
.prodTop__left{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.prodTop__right{border-radius:var(--r); overflow:hidden; border:1px solid rgba(215,222,213,.95); box-shadow:var(--shadow2)}
.prodTop__right img{width:100%; height:100%; object-fit:cover; display:block}
.prodInfo{margin-top:14px; background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:16px; box-shadow:var(--shadow2)}
.priceBox{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.big{font-family: ui-sans-serif, system-ui; font-size:28px; font-weight:950}
.mini{font-family: ui-sans-serif, system-ui; color:var(--muted)}
.facts{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px}
.fact{padding:12px; border-radius:18px; border:1px solid rgba(215,222,213,.95); background:rgba(183,215,194,.14)}
.fact span{display:block; font-family: ui-sans-serif, system-ui; font-size:12px; color:var(--muted)}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.small{margin-top:10px; color:var(--muted); font-family: ui-sans-serif, system-ui; font-size:12px}
.bagLayout{margin-top:14px; display:grid; grid-template-columns: 1.1fr .9fr; gap:14px}
.boxTitle{font-family: ui-sans-serif, system-ui; font-weight:950; margin-bottom:10px}
.rows{display:flex; flex-direction:column; gap:10px}
.row{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:12px; box-shadow:var(--shadow2); display:grid; grid-template-columns: 1fr auto; gap:12px}
.row small{display:block; color:var(--muted); font-family: ui-sans-serif, system-ui}
.ctrl{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.step{width:36px; height:36px; border-radius:999px; border:1px solid rgba(215,222,213,.95); background:rgba(183,215,194,.20); cursor:pointer; font-weight:900; font-family: ui-sans-serif, system-ui}
.qty{width:56px; text-align:center}
.zero{display:none; padding:14px; border-radius:var(--r); border:1px dashed rgba(215,222,213,.95); background:rgba(183,215,194,.12)}
.sum{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:14px; box-shadow:var(--shadow2); margin-bottom:12px}
.sum__r{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed rgba(215,222,213,.95); font-family: ui-sans-serif, system-ui}
.sum__r:last-child{border-bottom:0}
.sum__hint{margin-top:10px; color:var(--muted); font-family: ui-sans-serif, system-ui; font-size:12px}
.form{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:14px; box-shadow:var(--shadow2)}
.form label{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.form span{font-family: ui-sans-serif, system-ui; font-size:12px; color:var(--muted)}
.contact{margin-top:14px; display:grid; grid-template-columns: 1fr .8fr; gap:14px}
.contact__card{background:rgba(255,255,255,.80); border:1px solid rgba(215,222,213,.95); border-radius:var(--r); padding:14px; box-shadow:var(--shadow2)}
.plain{margin:10px 0 0; padding-left:18px; color:var(--muted); font-family: ui-sans-serif, system-ui}
.ftr{margin-top:46px; background:rgba(255,255,255,.55); border-top:1px solid rgba(215,222,213,.95)}
.ftr__grid{max-width:var(--max); margin:0 auto; padding:22px 18px; display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:12px}
.ftr h3,.ftr h4{margin:0 0 8px; font-family: ui-sans-serif, system-ui}
.ftr p{margin:0; color:var(--muted); font-family: ui-sans-serif, system-ui}
.ftr__list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; color:var(--muted); font-family: ui-sans-serif, system-ui; font-size:14px}
.ftr__badge{margin-top:10px; display:inline-block; padding:8px 10px; border-radius:999px; background:rgba(183,215,194,.18); border:1px solid rgba(215,222,213,.95); font-family: ui-sans-serif, system-ui; font-size:12px; color:var(--muted)}
.ftr__legal{max-width:var(--max); margin:0 auto; padding:0 18px 22px; display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-family: ui-sans-serif, system-ui; font-size:12px; border-top:1px dashed rgba(215,222,213,.95)}
@media (max-width: 980px){
  h1{font-size:32px}
  .hdr__bar{grid-template-columns: 1fr auto;}
  .nav{grid-column: 1 / -1; justify-content:flex-start}
  .hero{grid-template-columns:1fr}
  .band__row{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .head{grid-template-columns:1fr}
  .filter{grid-template-columns:1fr}
  .prodTop{grid-template-columns:1fr}
  .bagLayout{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
}