/* Дизайн-токены взяты с qansha.info (price-kz): Onest, зелёный бренд, голубоватый фон, мягкие плитки */
:root{--brand:#16a34a;--brand-dark:#15803d;--page:#f3f7fb;--tile:#e9eff5;--tile-hover:#dfe7ef;--price:#34b27b;
--yellow:#facc15;--ink:#0f172a;--s400:#94a3b8;--s500:#64748b;--s600:#475569;--s200:#e2e8f0;--s100:#f1f5f9}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--page);color:var(--ink);font-family:"Onest",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:80rem;margin:0 auto;padding:0 1rem}
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--s200)}
.top .row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem}
.logo{font-size:1.25rem;font-weight:700;color:var(--brand)}
.city{border:0;border-radius:999px;background:var(--s100);padding:.25rem .75rem;font:inherit;font-size:.875rem;color:var(--s600)}
.search{margin-left:auto;width:20rem;position:relative}
.search input{width:100%;border:1px solid #cbd5e1;border-radius:999px;background:#f8fafc;padding:.5rem 1rem;font:inherit;font-size:.875rem;outline:0}
.search input:focus{border-color:var(--brand);background:#fff}
.suggest{position:absolute;left:0;right:0;top:110%;background:#fff;border:1px solid var(--s200);border-radius:1rem;box-shadow:0 8px 24px rgba(15,23,42,.1);overflow:hidden;display:none}
.suggest a{display:flex;justify-content:space-between;gap:.75rem;padding:.55rem 1rem;font-size:.875rem}
.suggest a:hover{background:var(--s100)}
nav.cats{display:flex;gap:1rem;overflow-x:auto;padding:0 1rem .5rem;font-size:.875rem;max-width:80rem;margin:0 auto}
nav.cats a{white-space:nowrap;color:var(--s600)}nav.cats a:hover{color:var(--brand)}
main{max-width:80rem;margin:0 auto;padding:1.5rem 1rem}
h1{font-size:1.75rem;margin:0 0 .25rem}h2{font-size:1.25rem;margin:2rem 0 1rem}
.muted{color:var(--s500);font-size:.875rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.chip{border:0;border-radius:999px;background:#fff;border:1px solid var(--s200);padding:.4rem .9rem;font:inherit;font-size:.875rem;cursor:pointer}
.chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(5,1fr)}}
.card{position:relative;display:flex;flex-direction:column}
.tile{position:relative;aspect-ratio:1;border-radius:1.5rem;background:var(--tile);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:background .2s}
.card:hover .tile{background:var(--tile-hover)}
.mark{width:42%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:2.5rem;opacity:.9}
.badge{position:absolute;left:.75rem;top:.75rem;background:var(--yellow);border-radius:999px;padding:.2rem .7rem;font-weight:700;font-size:.875rem}
.pack{position:absolute;right:.75rem;bottom:.75rem;background:rgba(30,41,59,.9);color:#fff;border-radius:999px;padding:.2rem .7rem;font-size:.875rem;font-weight:500}
.prices{display:flex;justify-content:flex-end;align-items:baseline;gap:.6rem;margin-top:.75rem}
.price{font-size:1.6rem;font-weight:700;color:var(--price)}.old{color:var(--s400);text-decoration:line-through}
.per{text-align:right;font-size:.875rem;color:var(--s500)}
.name{margin:.5rem 0;font-weight:600;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.name a::after{content:"";position:absolute;inset:0}
.chain{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#334155;margin-bottom:.75rem}
.dot{width:20px;height:20px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.btn{position:relative;z-index:1;margin-top:auto;display:block;text-align:center;border-radius:999px;background:rgba(226,232,240,.7);padding:.6rem;font-weight:600;font-size:.875rem}
.btn:hover{background:rgba(203,213,225,.7)}
.btn.primary{background:var(--brand);color:#fff}.btn.primary:hover{background:var(--brand-dark)}
.cattiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.75rem}
.cattile{background:#fff;border:1px solid var(--s200);border-radius:1.25rem;padding:1rem}
.cattile:hover{border-color:var(--brand)}.cattile b{display:block}
.pdp{display:grid;gap:2rem;margin-top:1rem}@media(min-width:768px){.pdp{grid-template-columns:22rem 1fr}}
.pdp .tile{border-radius:2rem}
.facts{margin:1rem 0;padding:0;list-style:none;font-size:.9rem;color:var(--s600)}
.facts li{padding:.35rem 0;border-bottom:1px solid var(--s200)}
footer{margin-top:3rem;border-top:1px solid var(--s200);background:#fff;padding:1.5rem 1rem;text-align:center;font-size:.8rem;color:var(--s400)}

.offers{list-style:none;margin:.5rem 0 .75rem;padding:0;font-size:.875rem}
.offers li{display:flex;align-items:center;gap:.5rem;padding:.2rem 0}
.offers .on{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155}
.offers b{margin-left:auto;font-variant-numeric:tabular-nums}
.cheap{background:var(--yellow);border-radius:6px;padding:0 .35rem;font-size:10px;font-weight:700;text-transform:uppercase;white-space:nowrap}
.stores{width:100%;border-collapse:collapse;background:#fff;border-radius:1.25rem;overflow:hidden}
.stores td{padding:.75rem 1rem;border-bottom:1px solid var(--s100)}
.stores tr.best{background:#f0fdf4}.stores .r{text-align:right;white-space:nowrap}
.mini{border-radius:999px;background:var(--s100);padding:.35rem .8rem;font-size:.8rem;font-weight:600}.mini:hover{background:var(--s200)}
/* как на qansha: фото на плитке, фильтры-пилюли, сердечко */
.tile{background:var(--tile)}
.photo{width:100%;height:100%;object-fit:contain;padding:.75rem;mix-blend-mode:multiply;transition:transform .3s}
.card:hover .photo{transform:scale(1.05)}.photo.big{padding:1.5rem}
.fav{position:absolute;right:.75rem;top:.75rem;z-index:2;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:#fff;color:#ef4444;box-shadow:0 1px 2px rgba(0,0,0,.08);cursor:pointer;display:flex;align-items:center;justify-content:center}
.fav:hover{transform:scale(1.1)}
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin:.75rem 0}
.pill{border:1px solid var(--s200);border-radius:999px;background:#fff;padding:.55rem 1.1rem;font:inherit;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
.pill.dark{background:#0f172a;border-color:#0f172a;color:#fff;font-weight:600}
.pill[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.pill.dark[aria-pressed=true]{background:#000;box-shadow:0 0 0 2px var(--brand)}
.lg{object-fit:contain;background:#fff;border-radius:50%}
.pill .lg{width:24px;height:24px}
.more{margin:-.4rem 0 .6rem}
.card .name a::after{inset:0}
.tile .badge,.tile .pack{z-index:1}
.pills.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}.pills.scroll::-webkit-scrollbar{display:none}.pills.scroll .pill{flex:none;white-space:nowrap}
.offers b{white-space:nowrap}.offers .on{min-width:0}
/* сетка 4 в ряд и одинаковые квадратные плитки под фото */
.grid{gap:1.75rem 1.5rem}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid>.card{min-width:0}
.tile{aspect-ratio:1/1;width:100%}
.photo,.photo.big{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1rem}
.photo.big{padding:1.5rem}
.offers li{min-height:1.6rem}
:root{--tile:#ececec;--tile-hover:#e4e4e4}
.photo{mix-blend-mode:darken}

/* страница товара как на qansha */
.crumbs{display:flex;align-items:center;gap:1rem;font-size:.875rem;margin-bottom:1rem}
.crumbs .strong{font-weight:500;color:#334155}.crumbs .strong:hover,.share:hover{color:var(--brand)}
.trail{color:var(--s400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.trail a:hover{color:var(--brand)}
@media(max-width:640px){.trail{display:none}}
.share{margin-left:auto;border:0;background:none;font:inherit;font-weight:500;color:#334155;cursor:pointer}
.wcard{background:#fff;border-radius:1.5rem;padding:1rem}@media(min-width:640px){.wcard{padding:1.5rem}}
.wcard.main{display:grid;gap:1.5rem}@media(min-width:768px){.wcard.main{grid-template-columns:360px 1fr}}
.info{display:flex;flex-direction:column}.info .meta{font-size:.875rem;color:var(--s500)}
.info h1{font-size:1.4rem;line-height:1.3;margin:.25rem 0 0}@media(min-width:640px){.info h1{font-size:1.5rem}}
.prices.big{margin-top:1.5rem;gap:.75rem}.prices.big .old{font-size:1.125rem}.prices.big .price{font-size:2.25rem}
.info .per{margin:.1rem 0 0}.info .per b{color:#334155}
.dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.5rem;margin:1.5rem 0 0;font-size:.875rem}.dl dt{color:var(--s500)}.dl dd{margin:0}
.dl.sm{margin:0 0 .75rem 2.75rem;color:var(--s600)}.brandlink{color:var(--brand)}.brandlink:hover{text-decoration:underline}
.stores{margin-top:1rem;padding-top:.5rem;padding-bottom:.5rem}
.od{border-bottom:1px solid var(--s100)}.od:last-child{border:0}
.od summary{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;cursor:pointer;list-style:none}.od summary::-webkit-details-marker{display:none}
.oname{min-width:0}.oprice{margin-left:auto;font-variant-numeric:tabular-nums}
.dot.md{width:32px;height:32px;font-size:14px}
.chev{color:var(--s400);transition:transform .2s}.od[open] .chev{transform:rotate(180deg)}
.sale{background:#fef2f2;color:#dc2626;border-radius:6px;padding:0 .35rem;font-size:10px;font-weight:700;text-transform:uppercase}
.similar{margin-top:2.5rem}.simhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}.simhead h2{margin:0}