/* HandShop — blog
   Витягнуто дослівно зі схваленого макета blog.html.
   Один шаблон = один такий файл, тому сторінка виглядає точно як
   макет. Оболонка (шапка, підвал, пошук, кошик, порівняння) поки
   повторюється в кожному файлі — зведемо в спільний після приймання
   верстки. Спроба звести автоматично дала розбіжність 2 px у шапці,
   тому свідомо не робимо це наосліп. */
:root{--ink:#312531;--body:#6a586a;--muted:#a290a2;--line:#e9dde9;--paper:#fefbfe;
 --soft:#f9f3f9;--soft2:#f0e5f0;--accent:#996199;--sale:#d4372f;--ok:#4e7a45;
 --accent-d:#794979;--accent-l:#b983b9;--tint:#f4ebf4;--night:#1d161d;--bar:#e2d4e2;--gold:#c0a06b;
 --serif:"Lora",Georgia,serif;--sans:"Inter",-apple-system,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-weight:300;color:var(--body);background:var(--paper);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 30px}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;letter-spacing:-.012em}
.topbar{background:var(--night);color:var(--bar);font-size:12.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar b{color:#fff;font-weight:400}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hdr{display:flex;align-items:center;gap:30px;height:86px}
.hdr img{width:156px}
.crumbs{font-size:12.5px;color:var(--muted);padding:22px 0 6px}
.crumbs a:hover{color:var(--accent)}
h1{font-size:clamp(26px,3vw,38px);margin:0 0 4px}
.count{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.count b{color:var(--ink);font-weight:500}

/* поиск */
.hs-search{position:relative;flex:1 1 240px;min-width:0;max-width:520px}
.hs-search__form{display:flex;align-items:center;border:1px solid var(--line);background:#fff;transition:border-color .18s}
.hs-search__form:focus-within{border-color:var(--accent)}
.hs-search__form input{flex:1;min-width:0;border:0;outline:none;background:none;padding:13px 15px;font-family:inherit;font-size:15px;font-weight:300;color:var(--ink)}
.hs-search__form input::placeholder{color:var(--muted)}
.hs-search__form button{border:0;background:none;cursor:pointer;padding:0 15px;color:var(--ink);display:grid;place-items:center}
.hs-search__form button:hover{color:var(--accent)}
.hs-search__form svg{width:20px;height:20px}
.hs-search__drop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:#fff;
 border:1px solid var(--line);box-shadow:0 18px 44px rgba(28,26,27,.14);max-height:460px;overflow:auto}
.hs-search__drop[hidden]{display:none}
.hs-search__item{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.hs-search__item:hover{background:var(--soft)}
.hs-search__img{flex:0 0 56px;width:56px;height:56px;background:var(--soft2);overflow:hidden}
.hs-search__img img{width:100%;height:100%;object-fit:cover}
.hs-search__txt b{display:block;font-size:14px;font-weight:400;color:var(--ink);line-height:1.35;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-search__price{display:block;margin-top:3px;font-size:13.5px;color:var(--ink)}
.hs-search__all{display:block;text-align:center;padding:13px;font-size:12.5px;letter-spacing:.08em;
 text-transform:uppercase;color:#fff;background:var(--ink)}
.hs-search__all:hover{background:var(--accent)}
.hs-search__empty{padding:18px;font-size:14px;color:var(--muted);text-align:center}

/* фильтры */
.hs-filters{margin:0 0 34px;padding:20px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hs-f{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.hs-f:last-of-type{margin-bottom:0}
.hs-f__t{flex:0 0 78px;padding-top:7px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hs-f__row{display:flex;flex-wrap:wrap;gap:7px}
.hs-sw{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border:1px solid var(--line);
 border-radius:999px;background:#fff;font-size:12.5px;color:var(--ink);cursor:pointer;transition:.16s;font-family:inherit}
.hs-sw i{width:18px;height:18px;border-radius:50%;flex:0 0 auto;background:var(--sw,#ddd);
 border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 0 0 2px #fff}
.hs-sw--multi i{background:conic-gradient(#e879b0,#f2c94c,#5dc13c,#7fc4e8,#8e5bd0,#e879b0)}
.hs-sw:hover{border-color:var(--ink)}
.hs-sw.is-on{border-color:var(--accent);background:var(--soft);color:var(--accent)}
.hs-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:1px solid var(--line);
 border-radius:999px;background:#fff;font-size:12.5px;color:var(--ink);cursor:pointer;transition:.16s;font-family:inherit}
.hs-pill i{font-style:normal;font-size:11px;color:var(--muted)}
.hs-pill:hover{border-color:var(--ink)}
.hs-pill.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.hs-pill.is-on i{color:rgba(255,255,255,.65)}
.hs-f__reset{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--muted);
 text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0;font-family:inherit}
.hs-f__reset:hover{color:var(--accent)}
.hs-f__reset[hidden]{display:none}

/* сетка */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 28px;padding-bottom:70px}
.prod{display:flex;flex-direction:column}
.pimg{display:block;position:relative;overflow:hidden;background:var(--soft2);aspect-ratio:1/1;border-radius:8px}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,opacity .45s ease}
.pimg .im2{position:absolute;inset:0;opacity:0}
.prod:hover .pimg img{transform:scale(1.04)}
.pimg.has-alt:hover .im1{opacity:0}
.pimg.has-alt:hover .im2{opacity:1}
.pimg.has-alt::after{content:"";position:absolute;right:10px;bottom:10px;width:7px;height:7px;
 border-radius:50%;background:rgba(254,251,254,.85);box-shadow:11px 0 0 rgba(254,251,254,.45);
 transition:opacity .25s}
.pimg.has-alt:hover::after{opacity:0}
@media (hover:none){.pimg.has-alt .im2{display:none}.pimg.has-alt::after{display:none}}
.lab--ico{position:absolute;top:12px;left:12px;display:grid;place-items:center;width:32px;height:32px;
 border-radius:50%;background:rgba(254,251,254,.94);border:1px solid rgba(153,97,153,.18);
 color:var(--accent);box-shadow:0 2px 8px rgba(49,37,49,.1)}
.lab--ico svg{width:16px;height:16px}
.ptitle{font-size:14.5px;color:var(--ink);line-height:1.45;margin:15px 0 8px;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.ptitle:hover{color:var(--accent)}
.price{font-family:var(--serif);font-size:18px;color:var(--ink)}
.stock{font-size:12px;color:var(--ok);margin-top:5px;display:flex;align-items:center;gap:6px}
.stock::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:14px}
.buy{display:block;text-align:center;background:var(--accent);color:#fff;padding:12px 8px;font-size:11.5px;
 letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--accent);border-radius:3px;transition:.18s}
.buy:hover{background:var(--accent-d);border-color:var(--accent-d)}
.quick{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--muted);
 text-decoration:underline;text-underline-offset:3px}
.quick:hover{color:var(--accent)}
.empty{padding:60px 0;text-align:center;color:var(--muted);grid-column:1/-1}
.empty b{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:8px;font-weight:400}
@media(max-width:991px){.prods{grid-template-columns:repeat(2,1fr)}.hdr{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}}
@media(max-width:767px){
 .hs-f{flex-direction:column;gap:8px;align-items:stretch}
 .hs-f__t{flex:0 0 auto;padding-top:0}
 .hs-f__row{width:100%;min-width:0;margin:0 -30px;padding:0 30px;
            flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .hs-f__row::-webkit-scrollbar{display:none}
 .hs-sw,.hs-pill{flex:0 0 auto}
 .prods{grid-template-columns:repeat(2,1fr);gap:26px 14px}
 .buy{font-size:10.5px;letter-spacing:.04em;padding:11px 4px}
 .quick{font-size:11px}
 .ptitle{font-size:13.5px}
 .hdr{gap:12px;padding-top:12px;padding-bottom:12px}
 .hdr img{width:120px}
 .cover__in{padding:34px 0 30px}
}
@media(max-width:600px){
 .topbar .wrap span:first-child{display:none}
 .topbar .wrap{justify-content:space-between;gap:10px;font-size:12px}
}
@media(max-width:420px){
 .prods{grid-template-columns:1fr}
 .buy{font-size:11.5px;padding:12px}
 .ptitle{font-size:14.5px}
}

/* ---------- обложка категории: градиент вместо фотографии ---------- */
.cover{position:relative;overflow:hidden;margin-bottom:26px;
 background:
   radial-gradient(1100px 420px at 8% 130%, rgba(153,97,153,.55), transparent 60%),
   radial-gradient(900px 460px at 92% -30%, rgba(185,131,185,.5), transparent 58%),
   linear-gradient(112deg,#3d1a3d10 0%,#3d1a3d 0%,#542654 46%,#6c336c 100%)}
/* мягкие световые пятна — глубина без единой картинки */
.cover::before{content:"";position:absolute;left:-6%;top:-40%;width:46%;height:180%;
 background:radial-gradient(closest-side, rgba(255,255,255,.09), transparent 70%);
 transform:rotate(-18deg);pointer-events:none}
/* золотая нить снизу — та же, что в орнаментах */
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,rgba(192,160,107,.75),transparent)}
.cover__in{position:relative;z-index:2;padding:56px 0 50px;max-width:680px}
.cover .crumbs,.cover .crumbs a{color:rgba(255,255,255,.72)}
.cover .crumbs a:hover{color:#fff}
.cover h1{color:#fff;margin:2px 0 8px}
.cover p{color:rgba(255,255,255,.82);margin:0;font-size:15px;max-width:52ch}
.cover .count{color:rgba(255,255,255,.72);margin:14px 0 0}
.cover .count b{color:#fff}

/* ---------- липкая панель фильтров ---------- */
.stick{position:fixed;left:0;right:0;top:0;z-index:45;background:rgba(254,251,254,.97);
 border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(49,37,49,.07);
 transform:translateY(-100%);transition:transform .25s ease;backdrop-filter:blur(6px)}
.stick.is-on{transform:none}
.stick__in{max-width:1280px;margin:0 auto;padding:10px 30px;display:flex;align-items:center;
 gap:14px;flex-wrap:wrap;min-height:56px}
.stick__c{font-size:13px;color:var(--muted);flex:0 0 auto}
.stick__c b{color:var(--ink);font-weight:500}
.stick__chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.chip-x{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 12px;font-size:12.5px;
 border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;font-family:inherit}
.chip-x:hover{border-color:var(--accent);color:var(--accent)}
.chip-x span{font-size:15px;line-height:1;color:var(--muted)}
.chip-x:hover span{color:var(--accent)}
.stick__reset{font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
 background:none;border:0;cursor:pointer;font-family:inherit;flex:0 0 auto}
.stick__reset:hover{color:var(--accent)}
@media(max-width:767px){.stick__in{padding:8px 16px;min-height:48px}.stick__chips{order:3;width:100%}}

/* ---------- быстрый просмотр на карточке ---------- */
.qv-hint{position:absolute;left:0;right:0;bottom:0;background:rgba(49,37,49,.9);color:#fff;
 text-align:center;padding:11px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
 transform:translateY(100%);transition:transform .25s;cursor:pointer}
.prod:hover .qv-hint{transform:none}
@media (hover:none){.qv-hint{display:none}}

/* ---------- окно быстрого просмотра ---------- */
.qv{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}
.qv[hidden]{display:none}
.qv__bg{position:absolute;inset:0;background:rgba(49,37,49,.62)}
.qv__box{position:relative;background:#fff;width:min(980px,100%);max-height:92vh;overflow:auto;
 border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.qv__x{position:absolute;top:10px;right:14px;z-index:3;background:rgba(255,255,255,.9);border:0;
 width:34px;height:34px;border-radius:50%;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
.qv__x:hover{color:var(--ink)}
.qv__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.qv__media{background:var(--soft2)}
.qv__big{aspect-ratio:1/1;overflow:hidden}
.qv__big img{width:100%;height:100%;object-fit:cover}
.qv__thumbs{display:flex;gap:8px;padding:10px}
.qv__thumbs button{width:58px;height:58px;padding:0;border:1px solid transparent;background:#fff;
 cursor:pointer;overflow:hidden;border-radius:4px}
.qv__thumbs button.is-on{border-color:var(--accent)}
.qv__thumbs img{width:100%;height:100%;object-fit:cover}
.qv__info{padding:34px 34px 30px}
.qv__info h3{font-size:24px;line-height:1.25;margin:0 0 12px}
.qv__price{font-family:var(--serif);font-size:26px;color:var(--ink);margin-bottom:6px}
.qv__stock{font-size:12.5px;color:var(--ok);display:flex;align-items:center;gap:6px;margin-bottom:20px}
.qv__stock::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}

/* паспорт изделия */
.pass{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:22px}
.pass__r{display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.pass__r:last-child{border-bottom:0}
.pass__k{flex:0 0 96px;color:var(--muted);font-size:12px;letter-spacing:.04em}
.pass__v{color:var(--ink)}
.pass__dots{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pass__dot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.pass__dot i{width:14px;height:14px;border-radius:50%;background:var(--sw,#ddd);
 border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 0 0 2px #fff}

.qv__acts{display:flex;flex-direction:column;gap:9px}
.qv__acts .buy{border-radius:4px;padding:14px}
.qv__more{display:block;text-align:center;font-size:12.5px;color:var(--muted);
 text-decoration:underline;text-underline-offset:3px}
.qv__more:hover{color:var(--accent)}

/* похожие по технике */
.qv__sim{border-top:1px solid var(--line);padding:22px 34px 30px}
.qv__sim h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
 margin:0 0 14px;font-family:var(--sans);font-weight:500}
.qv__simrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.qv__simrow a{display:block}
.qv__simrow figure{margin:0 0 8px;aspect-ratio:1/1;overflow:hidden;border-radius:6px;background:var(--soft2)}
.qv__simrow img{width:100%;height:100%;object-fit:cover}
.qv__simrow b{display:block;font-size:12.5px;font-weight:400;color:var(--ink);line-height:1.35;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qv__simrow span{font-size:12.5px;color:var(--muted)}
@media(max-width:767px){
  .qv__grid{grid-template-columns:1fr}
  .qv__info{padding:24px 20px}
  .qv__sim{padding:20px}
  .qv__simrow{grid-template-columns:repeat(2,1fr)}
}

/* ---------- вы смотрели ---------- */
.seen{border-top:1px solid var(--line);padding:32px 0 70px}
.seen[hidden]{display:none}
.seen h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
 margin:0 0 16px;font-family:var(--sans);font-weight:500}
.seen__row{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.seen__row::-webkit-scrollbar{display:none}
.seen__row a{flex:0 0 132px;cursor:pointer}
.seen__row figure{margin:0 0 8px;width:132px;height:132px;overflow:hidden;border-radius:6px;background:var(--soft2)}
.seen__row img{width:100%;height:100%;object-fit:cover}
.seen__row b{display:block;font-size:12px;font-weight:400;color:var(--ink);line-height:1.35;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seen__row span{font-size:12px;color:var(--muted)}

.hs-sw .cnt{font-style:normal;font-size:11px;color:var(--muted);margin-left:2px}
.hs-sw.is-on .cnt{color:var(--accent)}
.hs-sw.is-off,.hs-pill.is-off{opacity:.34;pointer-events:none}
.qv__fast{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
 padding:13px;border:1px solid var(--accent);border-radius:4px;background:#fff;color:var(--accent);
 font-family:inherit;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
 transition:.18s}
.qv__fast:hover{background:var(--accent);color:#fff}
.qv__fast svg{width:16px;height:16px;flex:0 0 auto}
.qv__form[hidden],.qv__done[hidden]{display:none}
.qv__form{padding:0 34px 30px}
.qv__form-t{font-size:13.5px;color:var(--body);margin:0 0 16px}
.qv__form label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:13px}
.qv__form input,.qv__form textarea{display:block;width:100%;margin-top:6px;border:1px solid var(--line);
 padding:12px 14px;font-family:inherit;font-size:15px;font-weight:300;color:var(--ink);border-radius:4px}
.qv__form input:focus,.qv__form textarea:focus{outline:none;border-color:var(--accent)}
.qv__form .buy{border-radius:4px;padding:14px;margin-top:4px}
.qv__back{display:block;width:100%;margin-top:12px;background:none;border:0;cursor:pointer;
 font-family:inherit;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.qv__back:hover{color:var(--accent)}
.qv__done{padding:0 34px 30px;text-align:center}
.qv__ok{font-family:var(--serif);font-size:22px;color:var(--ink);margin:0 0 8px}
.qv__done p{font-size:14px;color:var(--body);margin:0}
@media(max-width:767px){.qv__form,.qv__done{padding:0 20px 24px}}

/* ---------- бургер и мобильное меню ---------- */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
 padding:0;border:0;background:none;cursor:pointer;flex:0 0 auto;margin-left:auto}
.burger span{display:block;height:1.6px;width:22px;background:var(--ink);margin:0 auto;
 transition:transform .25s, opacity .2s}
.mm{position:fixed;inset:0;z-index:9998;visibility:hidden}
.mm.is-open{visibility:visible}
.mm__bg{position:absolute;inset:0;background:rgba(49,37,49,.5);opacity:0;transition:opacity .25s}
.mm.is-open .mm__bg{opacity:1}
.mm__panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;
 box-shadow:-14px 0 40px rgba(49,37,49,.18);transform:translateX(100%);
 transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto}
.mm.is-open .mm__panel{transform:none}
.mm__top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
 border-bottom:1px solid var(--line)}
.mm__top img{width:118px}
.mm__x{background:none;border:0;font-size:28px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.mm__x:hover{color:var(--ink)}
.mm__nav{padding:8px 0}
.mm__nav a{display:block;padding:14px 20px;font-size:16px;color:var(--ink);
 border-bottom:1px solid var(--line)}
.mm__nav a:hover{background:var(--soft);color:var(--accent)}
.mm__sec{padding:18px 20px;border-bottom:1px solid var(--line)}
.mm__sec h5{margin:0 0 10px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--muted);font-family:var(--sans);font-weight:500}
.mm__chips{display:flex;flex-wrap:wrap;gap:6px}
.mm__chips a{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.mm__chips a:hover{border-color:var(--accent);color:var(--accent)}
.mm__foot{margin-top:auto;padding:18px 20px 24px}
.mm__phone{display:block;font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:2px}
.mm__hours{font-size:12.5px;color:var(--muted)}
.mm__lang{display:flex;gap:8px;margin-top:14px}
.mm__lang a{font-size:12.5px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.mm__lang a.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:991px){
  .burger{display:flex}
  /* логотип и бургер — одна строка, поиск уходит под них */
  .hdr{flex-wrap:wrap;align-items:center;gap:10px}
  .hdr > a{order:1;flex:0 0 auto}
  .burger{order:2;margin-left:auto}
  .hs-search{order:3;flex:1 0 100%;max-width:none}
}

.topnav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.topnav a{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
 padding-bottom:4px;border-bottom:1px solid transparent;transition:.2s;white-space:nowrap}
.topnav a:hover,.topnav a.on{border-color:var(--accent);color:var(--accent)}
@media(max-width:1150px){.topnav{display:none}}

/* ---------- подвал ---------- */
footer{padding:62px 0 26px;font-size:14px;border-top:1px solid var(--line);background:var(--paper)}
.fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:44px}
footer h4{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
 margin:0 0 18px;font-weight:500;font-family:var(--sans)}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:10px}
.fbot{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
 display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);flex-wrap:wrap;gap:12px}
.logo--f img{width:134px}
.socs{display:flex;gap:9px}
.soc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
 border:1px solid var(--line);color:var(--body);background:#fff;
 transition:background .18s,border-color .18s,color .18s,transform .18s}
.soc svg{width:18px;height:18px}
.soc:hover{color:#fff;transform:translateY(-2px)}
.soc--fb:hover{background:#1877f2;border-color:#1877f2}
.soc--ig:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7);border-color:transparent}
.soc--tg:hover{background:#2aabee;border-color:#2aabee}
.soc--vb:hover{background:#7360f2;border-color:#7360f2}

/* подчёркивание ссылок в подвале */
footer ul a{position:relative;display:inline-block;color:var(--body);padding-bottom:2px}
footer ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:currentColor;transform:scaleX(0);transform-origin:left;
 transition:transform .25s cubic-bezier(.4,0,.2,1)}
footer ul a:hover{color:var(--accent)}
footer ul a:hover::after{transform:scaleX(1)}
footer .soc::after{display:none}

/* ---------- лифт наверх ---------- */
.lift{position:fixed;right:24px;bottom:24px;z-index:50;width:46px;height:46px;border-radius:50%;
 border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;
 place-items:center;box-shadow:0 8px 24px rgba(49,37,49,.14);
 opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
.lift.is-on{opacity:1;visibility:visible;transform:none}
.lift:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.lift svg{width:18px;height:18px}
@media(max-width:767px){
 .fcols{grid-template-columns:1fr 1fr;gap:28px}
 .lift{right:14px;bottom:14px;width:42px;height:42px}
}
@media(max-width:480px){.fcols{grid-template-columns:1fr}}


/* тонкая обводка при наведении: похожие по технике и «ви дивилися» */
.qv__simrow figure,.seen__row figure{box-shadow:0 0 0 1px transparent;
 transition:box-shadow .2s ease,transform .2s ease}
.qv__simrow img,.seen__row img{transition:transform .5s ease}
.qv__simrow a:hover figure,.seen__row a:hover figure{box-shadow:0 0 0 1px var(--accent)}
.qv__simrow a:hover img,.seen__row a:hover img{transform:scale(1.04)}
.qv__simrow a:hover b,.seen__row a:hover b{color:var(--accent)}
.qv__simrow a b,.seen__row a b{transition:color .2s}


/* ================= СТОРІНКА ТОВАРУ ================= */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:54px;padding:6px 0 20px;align-items:start}

/* --- галерея --- */
.gal{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;position:sticky;top:104px}
.gal__thumbs{display:flex;flex-direction:column;gap:10px}
.gal__thumbs button{padding:0;border:1px solid var(--line);background:var(--soft2);cursor:pointer;
 width:78px;height:78px;overflow:hidden;border-radius:6px;transition:border-color .18s}
.gal__thumbs button img{width:100%;height:100%;object-fit:cover}
.gal__thumbs button:hover{border-color:var(--accent-l)}
.gal__thumbs button.is-on{border-color:var(--accent)}
.gal__big{position:relative;overflow:hidden;border-radius:10px;background:var(--soft2);aspect-ratio:1/1;
 border:1px solid var(--line);cursor:zoom-in}
.gal__big img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gal__big.is-zoom img{transform:scale(1.9)}
.gal__n{position:absolute;right:12px;bottom:12px;background:rgba(254,251,254,.92);border:1px solid var(--line);
 border-radius:999px;padding:4px 11px;font-size:11.5px;color:var(--body);pointer-events:none}
.gal__tag{position:absolute;left:12px;top:12px;background:rgba(254,251,254,.94);border:1px solid rgba(153,97,153,.2);
 color:var(--accent);border-radius:999px;padding:5px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
 pointer-events:none}
.gal__hint{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
.gal__hint--m{display:none}
@media (hover:none){.gal__hint--d{display:none}.gal__hint--m{display:inline}.gal__big{cursor:pointer}.gal__big.is-zoom img{transform:none}}

/* --- правая колонка --- */
.pdp__eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pdp__eyebrow a:hover{color:var(--accent)}
.pdp h1{font-size:clamp(24px,2.6vw,33px);line-height:1.24;margin:0 0 12px}
.pdp__sku{font-size:12.5px;color:var(--muted);margin-bottom:22px}
.pdp__sku a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.pdp__price{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-size:34px;color:var(--ink)}
.pdp__price small{font-size:17px;color:var(--body);font-family:var(--sans);font-weight:300}
.pdp__stock{font-size:13px;color:var(--ok);display:flex;align-items:center;gap:7px;margin:8px 0 24px}
.pdp__stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

.pdp__buy{display:flex;gap:10px;align-items:stretch}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:4px;background:#fff;flex:0 0 auto}
.qty button{width:40px;height:100%;border:0;background:none;cursor:pointer;font-size:18px;color:var(--body);font-family:inherit}
.qty button:hover{color:var(--accent)}
.qty input{width:40px;border:0;outline:none;text-align:center;font-family:inherit;font-size:15px;color:var(--ink);background:none}
.pdp__buy .buy{flex:1;border-radius:4px;padding:15px 10px;font-size:12px}
.fav{flex:0 0 auto;width:52px;border:1px solid var(--line);border-radius:4px;background:#fff;cursor:pointer;
 display:grid;place-items:center;color:var(--muted);transition:.18s}
.fav svg{width:20px;height:20px}
.fav:hover{border-color:var(--accent);color:var(--accent)}
.fav.is-on{border-color:var(--accent);color:var(--accent)}
.fav.is-on svg{fill:currentColor}
.pdp__fast{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:10px;
 padding:13px;border:1px solid var(--accent);border-radius:4px;background:#fff;color:var(--accent);
 font-family:inherit;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.18s}
.pdp__fast:hover{background:var(--accent);color:#fff}
.pdp__fast svg{width:16px;height:16px}

.pdp .pass{margin:26px 0 22px}
.pdp .pass__k{flex:0 0 120px}

/* обещания */
.prom{list-style:none;margin:0 0 22px;padding:18px 20px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.prom li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--body);margin-bottom:11px}
.prom li:last-child{margin-bottom:0}
.prom svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--gold)}
.prom b{color:var(--ink);font-weight:500}

.share{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.share .soc{width:34px;height:34px}
.share .soc svg{width:16px;height:16px}

/* --- липкая панель покупки --- */
.pbar{position:fixed;left:0;right:0;top:0;z-index:46;background:rgba(254,251,254,.97);backdrop-filter:blur(6px);
 border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(49,37,49,.07);
 transform:translateY(-100%);transition:transform .25s ease}
.pbar.is-on{transform:none}
.pbar__in{max-width:1280px;margin:0 auto;padding:9px 30px;display:flex;align-items:center;gap:16px}
.pbar figure{margin:0;width:46px;height:46px;border-radius:5px;overflow:hidden;background:var(--soft2);flex:0 0 auto}
.pbar img{width:100%;height:100%;object-fit:cover}
.pbar__t{flex:1;min-width:0;font-size:13.5px;color:var(--ink);line-height:1.3;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pbar__p{font-family:var(--serif);font-size:19px;color:var(--ink);flex:0 0 auto}
.pbar .buy{flex:0 0 auto;padding:11px 30px;border-radius:4px}
@media(max-width:767px){
 .pbar__in{padding:8px 16px;gap:10px}
 .pbar figure,.pbar__t{display:none}
 .pbar__p{flex:1}
 .pbar .buy{flex:0 0 auto;padding:11px 22px}
}

/* --- вкладки --- */
.tabs{border-top:1px solid var(--line);margin-top:46px}
.tabs__nav{display:flex;gap:34px;overflow-x:auto;scrollbar-width:none}
.tabs__nav::-webkit-scrollbar{display:none}
.tabs__nav button{background:none;border:0;padding:20px 0 17px;font-family:inherit;font-size:13px;
 letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap;
 border-bottom:2px solid transparent;margin-bottom:-1px;transition:.18s}
.tabs__nav button:hover{color:var(--ink)}
.tabs__nav button.is-on{color:var(--accent);border-color:var(--accent)}
.tabs__nav i{font-style:normal;color:var(--muted);font-size:12px}
.tabs__p{display:none;padding:26px 0 8px;max-width:78ch}
.tabs__p.is-on{display:block}
.tabs__p p{margin:0 0 14px;font-size:15px;line-height:1.75}
.tabs__p b{font-weight:500;color:var(--ink)}
.tabs__p h4{font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--muted);margin:26px 0 12px}
.tabs__p ul{margin:0 0 14px;padding-left:18px}
.tabs__p li{margin-bottom:8px;font-size:15px}
.spec{border:1px solid var(--line);border-radius:6px;overflow:hidden;max-width:640px}
.spec__r{display:flex;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px}
.spec__r:nth-child(odd){background:var(--soft)}
.spec__r:last-child{border-bottom:0}
.spec__k{flex:0 0 190px;color:var(--muted);font-size:13px}
.spec__v{color:var(--ink)}
.spec__v a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* примечание про ручную работу */
.note{position:relative;margin:26px 0 0;padding:20px 22px 20px 56px;background:var(--tint);border-radius:8px;
 font-size:14px;line-height:1.7;color:var(--body);max-width:78ch}
.note::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--gold)}
.note svg{position:absolute;left:20px;top:20px;width:20px;height:20px;color:var(--gold)}
.note b{color:var(--ink);font-weight:500}

/* блок «схожі» */
.sec{padding:56px 0 0}
.sec__h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px}
.sec__h h2{font-size:26px}
.sec__h a{font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sec__h a:hover{color:var(--accent)}
.rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px auto 26px;max-width:230px}
.rule::before,.rule::after{content:"";height:1px;flex:1}
.rule::before{background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.rule i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

/* лайтбокс */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(49,37,49,.88);display:grid;place-items:center;padding:24px}
.lb[hidden]{display:none}
.lb img{max-width:min(92vw,1000px);max-height:88vh;object-fit:contain;border-radius:6px}
.lb__x,.lb__a{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;
 width:46px;height:46px;border-radius:50%;font-size:24px;line-height:1;display:grid;place-items:center}
.lb__x{top:20px;right:20px}
.lb__a{top:50%;transform:translateY(-50%)}
.lb__a--p{left:20px}.lb__a--n{right:20px}
.lb__x:hover,.lb__a:hover{background:rgba(255,255,255,.24)}

@media(max-width:991px){
 .pdp{grid-template-columns:1fr;gap:30px}
 .gal{position:static}
}
@media(max-width:767px){
 .gal{grid-template-columns:1fr;gap:10px}
 .gal__thumbs{flex-direction:row;order:2;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
 .gal__thumbs::-webkit-scrollbar{display:none}
 .gal__thumbs button{flex:0 0 62px;width:62px;height:62px}
 .gal__big{order:1}
 .pdp .pass__k{flex:0 0 96px}
 .tabs__nav{gap:20px}
 .sec__h h2{font-size:22px}
}


/* ================= СТОРІНКА ТОВАРУ · ВЕРСІЯ 2 «ВІТРИНА» ================= */
.crumbbar{background:var(--soft);border-bottom:1px solid var(--line)}
.crumbbar .crumbs{padding:15px 0}

.pdp2{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:44px;padding:34px 0 0;align-items:stretch}

/* --- поток фотографий --- */
.stream{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stream figure{margin:0;position:relative;overflow:hidden;border-radius:12px;background:var(--soft2);
 border:1px solid var(--line);aspect-ratio:1/1;cursor:zoom-in}
.stream figure:first-child{grid-column:1/-1;aspect-ratio:4/3}
.stream img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.stream figure:hover img{transform:scale(1.03)}
.stream figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px transparent;
 transition:box-shadow .2s;pointer-events:none;border-radius:12px}
.stream figure:hover::after{box-shadow:inset 0 0 0 1px var(--accent)}
.stream__tag{position:absolute;left:14px;top:14px;background:rgba(254,251,254,.94);
 border:1px solid rgba(153,97,153,.2);color:var(--accent);border-radius:999px;padding:5px 13px;
 font-size:11px;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.stream__zoom{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:34px;height:34px;
 border-radius:50%;background:rgba(254,251,254,.92);border:1px solid var(--line);color:var(--body);z-index:2}
.stream__zoom svg{width:16px;height:16px}

/* --- карточка покупки --- */
.rail{display:flex;flex-direction:column;gap:20px}
.card{border:1px solid var(--line);border-radius:12px;background:#fff;
 padding:28px 26px 26px;box-shadow:0 12px 36px rgba(49,37,49,.06)}
.card__eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.card__eyebrow a:hover{color:var(--accent)}
.card h1{font-size:24px;line-height:1.28;margin:0 0 10px}
.card__sku{font-size:12.5px;color:var(--muted);margin-bottom:20px}
.card__sku a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.card__price{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-size:32px;color:var(--ink)}
.card__price small{font-size:16px;font-family:var(--sans);font-weight:300;color:var(--body)}
.card__size{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--body);
 border:1px solid var(--line);border-radius:999px;padding:5px 12px;align-self:center}
.card__stock{font-size:13px;color:var(--ok);display:flex;align-items:center;gap:7px;margin:9px 0 0}
.card__stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

.eta{display:flex;gap:11px;align-items:flex-start;margin:16px 0 18px;padding:13px 14px;
 border-radius:8px;background:var(--tint);font-size:13px;line-height:1.55;color:var(--body)}
.eta svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--accent)}
.eta b{color:var(--ink);font-weight:500}

.opt{display:flex;gap:11px;align-items:flex-start;margin-top:11px;padding:12px 14px;border:1px solid var(--line);
 border-radius:8px;font-size:13.5px;color:var(--body);cursor:pointer;transition:border-color .18s}
.opt:hover{border-color:var(--accent-l)}
.opt input{margin:3px 0 0;accent-color:var(--accent);flex:0 0 auto}
.opt b{color:var(--ink);font-weight:500}
.opt span{color:var(--muted);font-size:12.5px}

.card .pass{margin:20px 0 0;border-radius:8px}
.card .pass__k{flex:0 0 104px}
.card .pass__r{padding:10px 13px;font-size:13px}

.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;
 padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.card__foot .socs{gap:7px}
.card__foot .soc{width:32px;height:32px}
.card__foot .soc svg{width:15px;height:15px}

/* --- полоса доверия --- */
.band{margin-top:58px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft)}
.band__in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:30px 0}
.band__i{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--body);line-height:1.55}
.band__i svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;color:var(--gold)}
.band__i b{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}

/* --- сегментные вкладки в правой колонке --- */
.tabsbox{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow:auto;
 border:1px solid var(--line);border-radius:12px;background:#fff;
 box-shadow:0 12px 36px rgba(49,37,49,.06)}
.seg{display:flex;gap:4px;padding:6px;background:var(--soft);border-bottom:1px solid var(--line)}
.seg button{flex:1;padding:10px 4px;border:0;border-radius:7px;background:none;font-family:inherit;
 font-size:12px;color:var(--body);cursor:pointer;transition:.16s;white-space:nowrap;line-height:1.2}
.seg button:hover{color:var(--accent)}
.seg button.is-on{background:#fff;color:var(--accent);box-shadow:0 1px 5px rgba(49,37,49,.1)}
.tabsbox__p{display:none;padding:22px 22px 24px}
.tabsbox__p.is-on{display:block}
.tabsbox__p p{margin:0 0 12px;font-size:14.5px;line-height:1.7}
.tabsbox__p b{font-weight:500;color:var(--ink)}
.tabsbox__p h5{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--muted);margin:20px 0 9px}
.tabsbox__p h5:first-child{margin-top:0}
.tabsbox__p ul{margin:0 0 12px;padding-left:17px}
.tabsbox__p li{margin-bottom:7px;font-size:14.5px;line-height:1.6}
.tabsbox .spec{border:0;border-radius:0;max-width:none}
.tabsbox .spec__r{padding:10px 0;font-size:13.5px;background:none !important;border-color:var(--line)}
.tabsbox .spec__k{flex:0 0 108px;font-size:12.5px}
.tabsbox .note{margin-top:18px;padding:16px 16px 16px 46px;font-size:13.5px}
.tabsbox .note svg{left:16px;top:17px;width:18px;height:18px}
/* свёртка длинного описания */
.clamp{position:relative;overflow:hidden;max-height:290px}
.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
 background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.clamp.is-open{max-height:none}
.clamp.is-open::after{display:none}
.more{display:block;width:100%;margin-top:10px;padding:10px;background:none;border:1px solid var(--line);
 border-radius:6px;font-family:inherit;font-size:12.5px;color:var(--body);cursor:pointer;transition:.18s}
.more:hover{border-color:var(--accent);color:var(--accent)}

/* --- лента похожих --- */
.film{position:relative;margin-top:8px}
.film__row{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;
 scroll-snap-type:x mandatory;padding-bottom:6px}
.film__row::-webkit-scrollbar{display:none}
.film__row .prod{flex:0 0 264px;scroll-snap-align:start}
.film__a{position:absolute;top:118px;z-index:3;width:44px;height:44px;border-radius:50%;background:#fff;
 border:1px solid var(--line);color:var(--ink);cursor:pointer;display:grid;place-items:center;
 box-shadow:0 8px 22px rgba(49,37,49,.12);transition:.18s}
.film__a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.film__a svg{width:17px;height:17px}
.film__a--p{left:-22px}.film__a--n{right:-22px}
@media(max-width:1360px){.film__a--p{left:4px}.film__a--n{right:4px}}

/* --- заголовок секции с золотым орнаментом --- */
.head{text-align:center;margin:64px 0 0}
.head .ov{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.head h2{font-size:clamp(22px,2.4vw,30px);margin:10px 0 0}
.head .rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 26px;max-width:230px}
.head .rule::before,.head .rule::after{content:"";height:1px;flex:1}
.head .rule::before{background:linear-gradient(90deg,transparent,var(--gold))}
.head .rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.head .rule i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

/* --- нижняя панель покупки (мобильная) --- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:47;background:rgba(254,251,254,.98);
 border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(49,37,49,.08);
 display:none;align-items:center;gap:8px;padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
.mbar__p{flex:0 0 auto;font-family:var(--serif);font-size:19px;line-height:1.15;color:var(--ink)}
.mbar__p span{display:block;font-family:var(--sans);font-size:11px;color:var(--ok)}
/* дві дії поруч: холодна — «у 1 клік», гаряча — «в кошик» */
.mbar__fast{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
 padding:12px 6px;border:1px solid var(--accent);border-radius:4px;background:#fff;color:var(--accent);
 font-family:inherit;font-size:11px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
 white-space:nowrap;transition:.18s}
.mbar__fast:hover{background:var(--accent);color:#fff}
.mbar__fast svg{width:14px;height:14px;flex:0 0 auto}
.mbar .buy{flex:1 1 0;min-width:0;border-radius:4px;padding:12px 6px;font-size:11px;
 letter-spacing:.05em;white-space:nowrap}
@media(max-width:359px){.mbar__p span{display:none}.mbar__fast,.mbar .buy{font-size:10.5px;padding:12px 4px}}

@media(max-width:1100px){.pdp2{grid-template-columns:minmax(0,1fr) 400px;gap:30px}}
@media(max-width:991px){
 .pdp2{grid-template-columns:1fr;gap:26px}
 .card{padding:24px 20px}
 .tabsbox{position:static;max-height:none}
 .band__in{grid-template-columns:1fr 1fr;gap:22px}
}
@media(max-width:767px){
 /* на телефоні — свайп-галерея, щоб картка покупки була одразу під фото,
    а не після п'яти екранів прокрутки */
 .stream{display:flex;grid-template-columns:none;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
         scrollbar-width:none}
 .stream::-webkit-scrollbar{display:none}
 .stream figure{flex:0 0 86%;scroll-snap-align:center;aspect-ratio:1/1}
 .stream figure:first-child{aspect-ratio:1/1}
 .band__in{grid-template-columns:1fr;gap:18px;padding:24px 0}
 .film__row .prod{flex:0 0 200px}
 .mbar{display:flex}
 body{padding-bottom:72px}
 .lift{bottom:78px}
}


/* ============================================================
   ЄДИНА ШАПКА — однакова на головній, у каталозі та на товарі.
   Блок стоїть останнім у стилях, тому перекриває старі правила.
   ============================================================ */
.hdr{display:flex;align-items:center;gap:24px;height:86px;justify-content:flex-start}
.hdr .logo{flex:0 0 auto;line-height:0}
.hdr .logo img{width:156px;height:auto;display:block}
.topnav{flex:0 0 auto}
.topnav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.topnav a{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
 padding-bottom:4px;border-bottom:1px solid transparent;transition:.2s;white-space:nowrap}
.topnav a:hover,.topnav a.on{border-color:var(--accent);color:var(--accent)}
@media(max-width:1240px){.topnav{display:none}}

.hs-search{position:relative;flex:1 1 200px;min-width:0;max-width:460px}
.hs-search__form{display:flex;align-items:center;border:1px solid var(--line);background:#fff;transition:border-color .18s}
.hs-search__form:focus-within{border-color:var(--accent)}
.hs-search__form input{flex:1;min-width:0;border:0;outline:none;background:none;padding:12px 15px;
 font-family:inherit;font-size:15px;font-weight:300;color:var(--ink)}
.hs-search__form input::placeholder{color:var(--muted)}
.hs-search__form button{border:0;background:none;cursor:pointer;padding:0 14px;color:var(--ink);display:grid;place-items:center}
.hs-search__form button:hover{color:var(--accent)}
.hs-search__form svg{width:19px;height:19px}
.hs-search__drop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:#fff;
 border:1px solid var(--line);box-shadow:0 18px 44px rgba(49,37,49,.14);max-height:460px;overflow:auto}
.hs-search__drop[hidden]{display:none}
.hs-search__item{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.hs-search__item:hover{background:var(--soft)}
.hs-search__img{flex:0 0 56px;width:56px;height:56px;background:var(--soft2);overflow:hidden}
.hs-search__img img{width:100%;height:100%;object-fit:cover}
.hs-search__txt b{display:block;font-size:14px;font-weight:400;color:var(--ink);line-height:1.35;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-search__price{display:block;margin-top:3px;font-size:13.5px;color:var(--ink)}
.hs-search__all{display:block;text-align:center;padding:13px;font-size:12.5px;letter-spacing:.08em;
 text-transform:uppercase;color:#fff;background:var(--ink)}
.hs-search__all:hover{background:var(--accent)}
.hs-search__empty{padding:18px;font-size:14px;color:var(--muted);text-align:center}

.hdr-ico{display:flex;gap:16px;align-items:center;color:var(--ink);flex:0 0 auto;order:0}
.hdr-ico a{display:grid;place-items:center;color:inherit;transition:color .18s}
.hdr-ico a:hover{color:var(--accent)}
.hdr-ico svg{width:20px;height:20px}
.cartn{position:relative}
.cartn i{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
 background:var(--accent);color:#fff;font-style:normal;font-size:10.5px;line-height:16px;text-align:center}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
 padding:0;border:0;background:none;cursor:pointer;flex:0 0 auto}
.burger span{display:block;height:1.6px;width:22px;background:var(--ink);margin:0 auto}

@media(max-width:991px){
  /* логотип, іконки та бургер — один рядок; пошук іде під ними */
  .burger{display:flex}
  .hdr{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:12px}
  .hdr .logo{order:1}
  .hdr-ico{order:2;margin-left:auto}
  .burger{order:3}
  .hs-search{order:4;flex:1 0 100%;max-width:none}
}
@media(max-width:767px){.hdr .logo img{width:126px}}

/* ---- підвал: однакова адаптивність на всіх сторінках ---- */
.fcols > *{min-width:0}
@media(max-width:767px){.fcols{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:480px){.fcols{grid-template-columns:1fr;gap:22px}}

/* ---- дуже вузькі екрани (320 px): перемикач вкладок не розпирає сторінку ---- */
.rail,.card,.tabsbox,.stream{min-width:0}
@media(max-width:991px){.pdp2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){
  .seg{overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:0 0 auto;white-space:nowrap;padding:10px 12px}
}

/* ================= КВІЗ: ПІДБІР ПОДАРУНКА ================= */
.qz{max-width:900px;margin:0 auto;padding:44px 0 70px}
.qz__head{text-align:center;margin-bottom:30px}
.qz__head .ov{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.qz__head h1{font-size:clamp(26px,3vw,36px);margin:10px 0 0}
.qz__head p{font-size:15px;color:var(--body);margin:12px 0 0}
.qz__rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;max-width:230px}
.qz__rule::before,.qz__rule::after{content:"";height:1px;flex:1}
.qz__rule::before{background:linear-gradient(90deg,transparent,var(--gold))}
.qz__rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.qz__rule i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

/* прогрес */
.qz__bar{display:flex;align-items:center;gap:12px;margin:0 0 26px}
.qz__bar b{font-size:12.5px;letter-spacing:.04em;color:var(--muted);font-weight:400;flex:0 0 auto}
.qz__track{flex:1;height:3px;background:var(--soft2);border-radius:2px;overflow:hidden}
.qz__fill{height:100%;background:var(--accent);width:33%;transition:width .35s cubic-bezier(.4,0,.2,1)}

.qz__q{font-family:var(--serif);font-size:clamp(21px,2.4vw,27px);color:var(--ink);text-align:center;margin:0 0 8px}
.qz__hint{text-align:center;font-size:13.5px;color:var(--muted);margin:0 0 26px}

.qz__opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qz__opts--4{grid-template-columns:repeat(4,1fr)}
.opt-c{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 14px 20px;
 border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;
 text-align:center;transition:.18s;color:var(--ink)}
.opt-c:hover{border-color:var(--accent);box-shadow:0 10px 26px rgba(49,37,49,.07);transform:translateY(-2px)}
.opt-c.is-on{border-color:var(--accent);background:var(--tint)}
.opt-c svg{width:30px;height:30px;color:var(--accent)}
.opt-c b{font-weight:400;font-size:15px;line-height:1.3}
.opt-c span{font-size:12.5px;color:var(--muted)}
.opt-c[disabled]{opacity:.4;pointer-events:none}

.qz__nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px}
.qz__back{background:none;border:0;padding:0;font-family:inherit;font-size:13px;color:var(--muted);
 cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.qz__back:hover{color:var(--accent)}
.qz__back[hidden]{visibility:hidden;display:block}
.qz__skip{background:none;border:0;padding:0;font-family:inherit;font-size:13px;color:var(--muted);
 cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.qz__skip:hover{color:var(--accent)}

/* результат */
.qz__res h2{font-size:clamp(23px,2.6vw,30px);text-align:center;margin:0}
.qz__chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 6px}
.qz__chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);
 border-radius:999px;background:#fff;font-size:12.5px;color:var(--ink);cursor:pointer;font-family:inherit}
.qz__chip:hover{border-color:var(--accent);color:var(--accent)}
.qz__note{text-align:center;font-size:13px;color:var(--muted);margin:14px 0 0}
.qz__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.qz__cta .buy{border-radius:4px;padding:14px 30px}
.qz__again{padding:14px 26px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
 font-family:inherit;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.18s}
.qz__again:hover{border-color:var(--accent);color:var(--accent)}
.qz__res .prods{grid-template-columns:repeat(4,1fr);padding-bottom:0;margin-top:26px}

/* допомога живою людиною */
.qz__help{margin-top:44px;padding:24px 26px;border:1px solid var(--line);border-radius:12px;
 background:var(--soft);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.qz__help p{margin:0;font-size:14.5px;color:var(--body);flex:1;min-width:220px}
.qz__help b{color:var(--ink);font-weight:500}
.qz__help a{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:4px;
 background:var(--accent);color:#fff;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;transition:.18s}
.qz__help a:hover{background:var(--accent-d)}
.qz__help svg{width:16px;height:16px}

@media(max-width:767px){
 .qz{padding:30px 0 60px}
 .qz__opts,.qz__opts--4{grid-template-columns:repeat(2,1fr);gap:10px}
 .opt-c{padding:18px 10px 16px}
 .opt-c svg{width:26px;height:26px}
 .opt-c b{font-size:14px}
 .qz__res .prods{grid-template-columns:repeat(2,1fr);gap:26px 14px}
}
@media(max-width:420px){.qz__opts,.qz__opts--4{grid-template-columns:1fr}}

/* ---- блок квізу на головній ---- */
.edit__quiz{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px}
.edit__quiz a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);
 border-radius:999px;background:#fff;font-size:13.5px;color:var(--ink);transition:.18s}
.edit__quiz a:hover{border-color:var(--accent);color:var(--accent)}
.edit__quiz svg{width:16px;height:16px;color:var(--accent)}
.edit__or{font-size:13px;color:var(--muted)}
.edit__or a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}


.qz__card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
 margin-top:26px;padding:16px 20px;border:1px dashed var(--line);border-radius:10px;background:var(--tint);
 font-size:14px;color:var(--body)}
.qz__card[hidden]{display:none}
.qz__card b{color:var(--ink);font-weight:500}
.qz__card a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.qz__sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;margin:20px 0 0}
.qz__sub[hidden]{display:none}
.qz__sub-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.qz__sub-b{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;
 font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;transition:.16s}
.qz__sub-b i{font-style:normal;font-size:11px;color:var(--muted);margin-left:3px}
.qz__sub-b:hover{border-color:var(--ink)}
.qz__sub-b.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.qz__sub-b.is-on i{color:rgba(255,255,255,.7)}

.mm__chips a.mm__chips--q{border-color:var(--accent);color:var(--accent);background:var(--tint)}

/* ================= БЛОГ ================= */
/* обкладинка розділу — той самий градієнт, що на сторінці категорії */
.bcover{position:relative;overflow:hidden;
 background:
   radial-gradient(1100px 420px at 8% 130%, rgba(153,97,153,.55), transparent 60%),
   radial-gradient(900px 460px at 92% -30%, rgba(185,131,185,.5), transparent 58%),
   linear-gradient(112deg,#50255010 0%,#502550 0%,#673267 46%,#7d3f7d 100%)}
.bcover::before{content:"";position:absolute;left:-6%;top:-40%;width:46%;height:180%;
 background:radial-gradient(closest-side, rgba(255,255,255,.09), transparent 70%);
 transform:rotate(-18deg);pointer-events:none}
.bcover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,rgba(192,160,107,.75),transparent)}
.bcover__in{position:relative;z-index:2;padding:52px 0 46px;max-width:660px}
.bcover .crumbs,.bcover .crumbs a{color:rgba(255,255,255,.72)}
.bcover .crumbs a:hover{color:#fff}
.bcover h1{color:#fff;font-size:clamp(28px,3.2vw,40px);margin:2px 0 10px}
.bcover p{color:rgba(255,255,255,.82);margin:0;font-size:15px;max-width:54ch}
.bcover__n{color:rgba(255,255,255,.72);margin-top:14px;font-size:13.5px}
.bcover__n b{color:#fff;font-weight:500}

/* пошук + рубрики */
.bbar{border-bottom:1px solid var(--line);background:var(--paper);padding:18px 0}
.bbar__in{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bsearch{position:relative;flex:0 0 300px;max-width:100%}
.bsearch input{width:100%;border:1px solid var(--line);background:#fff;border-radius:999px;
 padding:10px 16px 10px 40px;font-family:inherit;font-size:14px;font-weight:300;color:var(--ink);outline:none}
.bsearch input:focus{border-color:var(--accent)}
.bsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.btopics{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.btopic{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;
 font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;transition:.16s;white-space:nowrap}
.btopic i{font-style:normal;font-size:11px;color:var(--muted);margin-left:4px}
.btopic:hover{border-color:var(--ink)}
.btopic.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.btopic.is-on i{color:rgba(255,255,255,.7)}

/* головна стаття */
.bfeat{display:grid;grid-template-columns:1.15fr 1fr;gap:0;margin:38px 0 44px;
 border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
 box-shadow:0 12px 36px rgba(49,37,49,.06);transition:.2s}
.bfeat:hover{box-shadow:0 18px 46px rgba(49,37,49,.11);transform:translateY(-2px)}
.bfeat figure{margin:0;aspect-ratio:16/11;overflow:hidden;background:var(--soft2)}
.bfeat img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.bfeat:hover img{transform:scale(1.04)}
.bfeat__b{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.bfeat__lab{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font-size:10.5px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--accent);background:var(--tint);
 border-radius:999px;padding:5px 12px;margin-bottom:14px}
.bfeat h2{font-size:clamp(21px,2.2vw,28px);line-height:1.28;margin:0 0 12px}
.bfeat:hover h2{color:var(--accent)}
.bfeat p{margin:0 0 18px;font-size:14.5px;line-height:1.7;color:var(--body)}
.bmeta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.bmeta span{display:inline-flex;align-items:center;gap:6px}
.bmeta svg{width:14px;height:14px}

/* сітка статей */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 28px;padding-bottom:10px}
.bcard{display:flex;flex-direction:column}
.bcard figure{margin:0 0 15px;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--soft2);
 box-shadow:0 0 0 1px transparent;transition:box-shadow .2s}
.bcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bcard:hover figure{box-shadow:0 0 0 1px var(--accent)}
.bcard:hover img{transform:scale(1.04)}
.bcard h3{font-size:17px;line-height:1.35;margin:0 0 9px;transition:color .2s}
.bcard:hover h3{color:var(--accent)}
.bcard p{margin:0 0 14px;font-size:13.5px;line-height:1.65;color:var(--body);
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard .bmeta{margin-top:auto}
.bcard__tag{align-self:flex-start;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--muted);margin-bottom:8px}
.bempty{grid-column:1/-1;padding:56px 0;text-align:center;color:var(--muted)}
.bempty b{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:8px;font-weight:400}

/* пагінація */
.bpage{display:flex;justify-content:center;align-items:center;gap:8px;padding:44px 0 0}
/* На сайті сторінки перемикаються посиланнями, а не кнопками: їх бачить
   пошук, їх можна відкрити в новій вкладці. Вигляд той самий. */
.bpage button,.bpage a{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:6px;
 background:#fff;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;transition:.16s}
.bpage a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.bpage button:hover,.bpage a:hover{border-color:var(--accent);color:var(--accent)}
.bpage button.is-on,.bpage a.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.bpage button[disabled],.bpage a.is-off{opacity:.35;pointer-events:none}
.bpage .bp--dots{min-width:auto;padding:0 2px;border:0;background:none}
.bpage span{color:var(--muted);font-size:13px;margin:0 6px}

/* смуга квізу під списком */
.bquiz{margin-top:56px;padding:30px 34px;border:1px solid var(--line);border-radius:12px;
 background:var(--soft);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.bquiz div{flex:1;min-width:240px}
.bquiz h4{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink);margin:0 0 6px;
 letter-spacing:normal;text-transform:none}
.bquiz p{margin:0;font-size:14px;color:var(--body)}
.bquiz a{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:4px;
 background:var(--accent);color:#fff;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;transition:.18s}
.bquiz a:hover{background:var(--accent-d)}

@media(max-width:991px){
 .bgrid{grid-template-columns:repeat(2,1fr)}
 .bfeat{grid-template-columns:1fr}
 .bfeat__b{padding:26px 24px 28px}
}
@media(max-width:767px){
 .bcover__in{padding:34px 0 30px}
 .bbar__in{gap:12px}
 .bsearch{flex:1 0 100%}
 .btopics{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .btopics::-webkit-scrollbar{display:none}
 .btopic{flex:0 0 auto}
 .bgrid{grid-template-columns:1fr;gap:30px}
 .bquiz{padding:24px 20px}
}


/* нижній відступ підвала: 26 px притискало копірайт до краю екрана */
footer{padding-bottom:46px}
@media(max-width:767px){footer{padding-bottom:38px}}

/* повітря між останнім блоком сторінки й підвалом — як на решті сторінок (70 px) */
.bquiz{margin-bottom:70px}
.artsim{padding-bottom:70px}
@media(max-width:767px){.bquiz{margin-bottom:52px}.artsim{padding-bottom:52px}}

/* ============================================================
   ОБРАНЕ Й МІНІ-КОШИК — наскрізний блок, однаковий на всіх сторінках
   ============================================================ */
.hs-cartwrap{position:relative;display:grid;place-items:center}
.hs-mini{position:absolute;right:-6px;top:calc(100% + 14px);width:344px;z-index:70;
 background:#fff;border:1px solid var(--line);border-radius:12px;
 box-shadow:0 22px 54px rgba(49,37,49,.16);padding:16px;
 opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.hs-cartwrap:hover .hs-mini,.hs-mini.is-open{opacity:1;visibility:visible;transform:none}
.hs-mini::before{content:"";position:absolute;right:16px;top:-7px;width:12px;height:12px;background:#fff;
 border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.hs-mini::after{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.hs-mini__list{max-height:270px;overflow:auto;margin:0 -4px 0 0;padding-right:4px}
.hs-mini__i{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.hs-mini__i:last-child{border-bottom:0}
.hs-mini__i figure{margin:0;flex:0 0 54px;width:54px;height:54px;border-radius:6px;overflow:hidden;background:var(--soft2)}
.hs-mini__i img{width:100%;height:100%;object-fit:cover}
.hs-mini__t{display:block;font-size:13px;line-height:1.35;color:var(--ink);
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-mini__t:hover{color:var(--accent)}
.hs-mini__q{font-size:12.5px;color:var(--muted);margin-top:4px}
.hs-mini__x{flex:0 0 auto;background:none;border:0;padding:2px;cursor:pointer;color:var(--muted);
 font-size:17px;line-height:1}
.hs-mini__x:hover{color:var(--accent)}
.hs-mini__sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
 margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--body)}
.hs-mini__sum b{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:400}
.hs-mini__b{display:block;text-align:center;padding:12px;border-radius:4px;margin-top:9px;
 font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;transition:.18s}
.hs-mini__b--o{border:1px solid var(--line);color:var(--ink);background:#fff}
.hs-mini__b--o:hover{border-color:var(--accent);color:var(--accent)}
.hs-mini__b--f{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.hs-mini__b--f:hover{background:var(--accent-d);border-color:var(--accent-d)}
.hs-mini__empty{padding:18px 4px 14px;text-align:center;font-size:13.5px;color:var(--muted)}
@media(max-width:991px){.hs-mini{display:none}}

/* сповіщення «додано» */
.hs-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:9998;
 background:var(--ink);color:#fff;border-radius:8px;padding:13px 20px;font-size:14px;
 box-shadow:0 16px 40px rgba(49,37,49,.28);opacity:0;visibility:hidden;transition:.22s;
 display:flex;align-items:center;gap:12px}
.hs-toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hs-toast a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ============================================================
   ДОСТУПНІСТЬ — WCAG 2.1 AA, необхідний мінімум.
   Блок навмисно окремий і в кінці: усе, що тут, легко звірити
   й так само легко відкотити. Копія макетів «до» — у _до-WCAG.
   ============================================================ */

/* 1. КОНТРАСТ ДРІБНОГО ТЕКСТУ.
   Було --muted #a290a2 = 2,9:1 на білому при нормі 4,5:1. Ним набрані
   лічильники, хлібні крихти, підписи, «Показано 24 з 70», підвал —
   близько 55 місць у макетах. Одна змінна лікує всі.
   Нове значення підібрано так, щоб зберегти той самий відтінок
   і насиченість, лише знизити світлоту: 4,57:1 на найсвітлішому
   з наших фонів. Це не «сірий став чорним» — це той самий бузковий сірий,
   просто читомий. */
/* Власник: текст виглядає блідим, «зроби контрастніше».
   Опускаємо світлоту --body і --muted, зберігаючи той самий сливовий
   відтінок — це не «сірий став чорним», а той самий колір, тільки густіший.
   --ink НЕ чіпаю: він і так 11,9:1, і ним залито 98 фонів у макетах —
   затемнення зробило б ці блоки майже чорними й вибило з палітри.
     --body   5,34:1 → 8,09:1
     --muted  4,57:1 → 6,95:1 */
:root{ --body:#4c3f4c; --muted:#574857; --gold-t:#806437; }

/* 2. АКЦЕНТ ЯК ДРІБНИЙ ТЕКСТ НА ТОНОВАНОМУ ФОНІ.
   Сам --accent #996199 лишаємо недоторканим: на білому він дає 4,64:1
   і це фірмовий колір, який уже затверджений. Але на бузкових підкладках
   (--soft, --soft2, --tint) той самий колір падає до 3,8–4,25:1.
   Тому в цих конкретних місцях беремо --accent-d #794979 (5,6–6,3:1).
   Фон, рамки й заливки акцентом не чіпаємо — там діє норма 3:1 для
   елементів інтерфейсу, і вона виконується. */
.cxnote a, .cxbest__go, .chip--quiz, .bfeat__lab, .art__tag,
.fs__n, .way__n, .way__go, .ov, .qz__step b, .seasons__all{
  color:var(--accent-d,#794979)!important;
}
/* Виняток для наведення: чип «Підібрати за 3 кроки» при наведенні
   заливається акцентом, і !important вище лишав на ньому темно-фіолетовий
   текст — читалося як пляма. Робимо білим. */
.chip--quiz:hover{ color:#fff!important; }

/* 3. ЗОЛОТО. #c0a06b на білому — 2,4:1. Як декор (лінійка під заголовком,
   ромбик) це припустимо: декоративна графіка під норму не підпадає.
   Але там, де ним НАБРАНИЙ ТЕКСТ, потрібен темніший відтінок. */
.n, .way i, .fs i, .step__n{ color:var(--gold-t)!important; }
.season-card__when{ background:#91713e!important; }   /* білим по золоту: було 2,48 → 4,53 */

/* 4. ЛІЧИЛЬНИКИ ВСЕРЕДИНІ ЗАЛИТИХ АКЦЕНТОМ ЧИПІВ.
   Були напівпрозорим білим (0.75) = 2,9–3,4:1. Робимо суцільним білим. */
.chip.is-on i, .catsw__row a.is-on i, .tab.is-on i, .hs-pill.is-on .cnt,
.hs-pill.is-on i, .qz__opt.is-on i{ color:#fff!important; }

/* 5. ВЕЛИКЕ ЧИСЛО 404 — 1,44:1. Воно дублює заголовок словами,
   тобто декоративне, але лишати майже невидимим немає сенсу. */
.e4 p.e4__n{ color:#b084b0; }

/* 6. ПІДПИС НА ТЕМНІЙ СЛИВІ — був 3,64:1. */
.who{ color:#c3b2c3!important; }

/* 7. ВИДИМИЙ ФОКУС З КЛАВІАТУРИ (WCAG 2.4.7).
   У макетах у 60 місцях стояло outline:none — людина, яка ходить
   табом, не бачила, де вона. :focus-visible спрацьовує тільки на
   клавіатурі: миша обведення не малює, тож вигляд не змінюється.
   !important тут виправданий — інакше кожен окремий outline:none
   з більшою вагою знову його погасить. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:1.5px solid var(--accent-d,#794979)!important;
  outline-offset:2px;
  border-radius:3px;
}
/* на темних підкладках обведення акцентом само по собі темне */
.cover a:focus-visible, .cover button:focus-visible,
.topbar a:focus-visible, .season a:focus-visible,
.buy:focus-visible, .btn--fill:focus-visible, .more-b:focus-visible{
  outline-color:#fff!important;
}

/* 8. ПОЛЯ ФОРМИ — ОДИН ІНДИКАТОР ФОКУСА, А НЕ ДВА.
   Спершу я додав сюди ще й кільце box-shadow — і разом з обведенням
   із пункту 7 виходило дві лінії одна за одною: товста й тонка.
   Кільце прибрано: текстові поля отримують :focus-visible і від миші
   теж (браузери так поводяться саме з полями вводу), тож обведення
   видно в будь-якому разі, і воно одне. */

/* 9. МЕНШЕ РУХУ (WCAG 2.3.3).
   Якщо в системі увімкнено «зменшити анімацію» — прибираємо
   збільшення фото на ховері, плавні переходи й автопрокрутку. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .prod:hover .pimg img, .cat:hover .cat__ico svg, .cx:hover .cx__ico svg{
    transform:none!important;
  }
}

/* 10. КНОПКА-ПОСИЛАННЯ ВСЕРЕДИНІ ТЕКСТОВОГО БЛОКУ.
   .doc a{color:var(--accent)} має вагу (0,2,0) і перебивало
   .btn--fill{color:#fff} (0,1,0) — текст кнопки збігався з її фоном
   і ставав невидимим. Четвертий випадок тієї самої пастки. */
.doc a.btn{ color:var(--accent); }
.doc a.btn--fill, .doc a.btn:hover{ color:#fff; }

/* 11. ДОБИВАЄМО ЗАЛИШКИ ПІСЛЯ ПОВТОРНОГО ЗАМІРУ.
   Пункт 2 вище задав .ov{color:accent-d} надто широко: цей клас є
   і на ТЕМНИХ блоках («Найближчі свята», «Про майстерню»),
   де темно-бузковий по сливі дав 1,31:1 — я зіпсував те, що працювало.
   Повертаємо світлий відтінок там, де підкладка темна. */
.season .ov, .manifest .ov{ color:#e7dbe7!important; }

/* Золоті номери кроків на «Як замовити» — 2,48:1 */
.path__i i{ color:var(--gold-t)!important; }

/* Лічильник у вибраній темі блогу — напівпрозорий білий по акценту */
.btopic.is-on i{ color:#fff!important; }

/* Мітка «Ручна робота» — 4,47 замість 4,5, не вистачало трьох сотих */
.stream__tag{ color:var(--accent-d,#794979)!important; }

/* 12. ТЕКСТ НА ГРАДІЄНТНІЙ ОБКЛАДИНЦІ.
   Порахувати з CSS тут не можна — під текстом градієнт, тому міряв
   по реальних пікселях: найсвітліша точка обкладинки rgb(135,76,135).
   Заголовок (білий) дає 6,15:1, підзаголовок (alpha .82) — 4,74:1,
   а от хлібні крихти й лічильник на alpha .72 давали 4,06:1.
   Піднімаємо їх до .86 — це 5,04:1 і візуально та сама прозорість. */
.cover .crumbs, .cover .crumbs a, .cover .count,
.bcover__n, .bcover .crumbs, .bcover .crumbs a{ color:rgba(255,255,255,.86)!important; }

/* 14. ПРОПУСТИТИ ШАПКУ (WCAG 2.4.1, рівень A — суворіше за контраст).
   У шапці 6 пунктів меню, пошук і кошик. Людина з клавіатури
   проходила їх табом НА КОЖНІЙ сторінці, перш ніж дістатися до товарів.
   Посилання видно тільки тоді, коли на нього перейшли табом. */
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--accent);color:#fff;
      padding:12px 20px;border-radius:0 0 6px 6px;font-size:13.5px;text-decoration:none;
      transition:top .15s ease}
.skip:focus{top:0}

/* 15. ЗАЛИТІ АКЦЕНТОМ КНОПКИ, ЯКІ ЖИВУТЬ У ПРИХОВАНИХ ПОПАПАХ.
   «Оформити замовлення» в міні-кошику успадковувала color:var(--ink)
   від .hs-mini__b — темний по бузковому, ~3:1, і на око просто чорний.
   Мій замір цього не бачив: попап прихований, а прихований елемент
   аудит пропускає. Тому тут — явно й для всіх таких кнопок. */
.hs-mini__b--f, .hs-mini__b--f:hover, .hs-mini__b--f:focus{ color:#fff!important; }

/* 16. Чип «Підібрати за 3 кроки» в мобільному меню — 3,99:1. */
.mm__chips--q{ color:var(--accent-d,#794979)!important; }

/* 18. ПОДВІЙНА ЛІНІЯ ПРИ ФОКУСІ В ПОЛІ ПОШУКУ.
   Поле пошуку — це не окремий input, а форма з рамкою, всередині якої
   і поле, і кнопка з лупою. Рамка форми вже підсвічувалася акцентом
   при :focus-within — це і був другий контур. Моє обведення лягало
   всередину неї, за 2 px, тож виходили дві лінії поспіль.
   Рішення: обводимо ГРУПУ, а не поле всередині неї. Один контур
   навколо всього віджета — і семантично вірніше: поле й кнопка
   працюють як один елемент керування.
   Те саме стосується лічильника кількості та варіантів у формі. */
.hs-search__form input:focus-visible,
.qty input:focus-visible,
.opt input:focus-visible{ outline:none!important; }

/* Обведення з відступом давало ДРУГУ лінію поруч із власною рамкою
   форми. Тому не обводимо зовні, а підсилюємо саму рамку: box-shadow
   зі spread 1px лягає ВПРИТУЛ до неї, без проміжку — і разом вони
   читаються як одна лінія завтовшки 2 px, а не як дві по одному. */
.hs-search__form:focus-within,
.qty:focus-within,
.opt:focus-within{
  border-color:var(--accent-d,#794979)!important;
  box-shadow:0 0 0 1px var(--accent-d,#794979);
}

/* 23. ЗАМАЛІ ЦІЛІ ДЛЯ ПАЛЬЦЯ (перевірка QA на 420 px).
   WCAG 2.1 AA розміру цілі не вимагає — це рівень AAA, а в WCAG 2.2
   він став AA (24×24). Але справа не в літері: «Швидке замовлення»
   мало 12 px висоти, «Видалити» 14, крихти 14, підрозділи в плитці 19.
   На телефоні в такі промахуються, і людина тисне сусіднє.
   Збільшуємо саме ОБЛАСТЬ НАТИСКАННЯ падінгом — розмір шрифту
   й вигляд не міняються, десктоп не чіпаємо взагалі. */
@media(max-width:600px){
  .quick{padding:9px 0}
  .crumbs a{display:inline-block;padding:6px 0}
  .cx__subs a{padding:6px 0}
  .cx__more a, .cxbar__q, .cxnote a, .cart__back, .ci__acts button, .stick__reset,
  .card__eyebrow a, .card__sku a{display:inline-block;padding:6px 0}
  .qty input{padding:8px 0}
  .hs-search__form button{padding:12px 14px}
  .cartn{padding:10px;margin:-10px}
}

/* 24. ТОВЩИНА ШРИФТУ: Inter Light 300 → Regular 400.
   Увесь дрібний текст був 300-м накресленням на 12,5–13,5 px.
   Inter Light на такому кеглі відчутно бліде — тонкі штрихи
   просто не витримують малого розміру, особливо на Windows.
   Перевірив, де 300 стоїть явно: це поля вводу та підписи біля цін,
   усі 14–17 px. Великого «виставкового» тексту серед них немає,
   тож підняти можна все одразу, нічого не обважнівши.
   Накреслення 400 уже завантажується разом зі шрифтом — нових
   запитів у мережу не додається.
   Разом із темнішим кольором (пункт 1) це і є та «контрастність»,
   якої бракувало: колір дає густоту, вага — тіло літери. */
body,
.hs-search__form input, .qv__form input, .qv__form textarea,
.bsearch input, .modal input, .modal textarea,
.pdp__price small, .card__price small{ font-weight:400; }

/* ================= порівняння двох товарів =================
   Ручна робота — це передусім «як воно виглядає». Тому порівняння
   тут фото-орієнтоване: дві великі картки поруч, а таблиця
   характеристик іде нижче й уміє ховати однакові рядки.
   Максимум два товари: саме стільки поміщається поруч на телефоні,
   і саме такий сценарій у людини — «вагаюсь між цими двома».
   ============================================================ */
.prod{position:relative}
.cmp-b{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;
  display:grid;place-items:center;padding:0;cursor:pointer;border-radius:50%;
  border:1px solid rgba(153,97,153,.22);background:rgba(254,251,254,.94);
  color:var(--accent-d,#794979);opacity:0;transform:scale(.92);
  transition:opacity .15s ease,transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.prod:hover .cmp-b,.cmp-b:focus-visible,.cmp-b.is-on{opacity:1;transform:none}
.cmp-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cmp-b:hover{border-color:var(--accent);background:#fff}
.cmp-b.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (hover:none){ .cmp-b{opacity:1;transform:none;width:40px;height:40px} }

/* кнопка на сторінці товару */
.cmp-p{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:#fff;color:var(--accent-d,#794979);border-radius:8px;padding:11px 16px;
  font-size:13.5px;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.cmp-p svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cmp-p:hover{border-color:var(--accent)}
.cmp-p.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

/* нижня панель */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(49,37,49,.10);
  transform:translateY(115%);transition:transform .22s ease}
.cmpbar.is-on{transform:none}
.cmpbar__in{max-width:1280px;margin:0 auto;padding:12px 30px;
  display:flex;align-items:center;gap:16px}
.cmpbar__slots{display:flex;gap:10px;flex:none}
.cmpbar__s{position:relative;width:54px;height:54px;flex:none;border-radius:8px;
  overflow:hidden;border:1px solid var(--line);background:var(--soft2)}
.cmpbar__s img{width:100%;height:100%;object-fit:cover;display:block}
.cmpbar__s--empty{border-style:dashed;display:grid;place-items:center;
  color:var(--muted);font-size:10.5px;text-align:center;line-height:1.2;padding:4px}
.cmpbar__x{position:absolute;top:3px;right:3px;width:24px;height:24px;padding:0;
  border:0;border-radius:50%;background:rgba(49,37,49,.74);color:#fff;
  font-size:13px;line-height:1;cursor:pointer}
.cmpbar__x:hover{background:rgba(49,37,49,.92)}
.cmpbar__t{font-size:13px;color:var(--body);line-height:1.4}
.cmpbar__t b{color:var(--ink)}
.cmpbar__acts{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.cmpbar__clr{border:0;background:none;color:var(--muted);font-size:12.5px;
  cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px}
.cmpbar__clr:hover{color:var(--accent-d,#794979)}
.cmpbar__go{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  border-radius:8px;padding:12px 22px;font-size:13.5px;border:0;cursor:pointer}
.cmpbar__go[aria-disabled="true"]{background:var(--soft2);color:var(--muted);
  cursor:default;pointer-events:none}
body.has-cmpbar{padding-bottom:92px}
@media(max-width:700px){
  /* На телефоні смуга з'їдала чверть екрана. Порожній слот сам каже
     «оберіть другий», тому підказку й «Очистити» тут прибираємо —
     лишаються дві мініатюри з хрестиками і кнопка. */
  .cmpbar__in{padding:10px 16px;gap:12px}
  .cmpbar__t,.cmpbar__clr{display:none}
  .cmpbar__s{width:48px;height:48px}
  .cmpbar__go{padding:12px 18px;font-size:13px}
}

/* сторінка порівняння */
.cmp-wrap{max-width:1280px;margin:0 auto;padding:0 30px 70px}
/* Спершу підписи рядків стояли вузькою колонкою зліва — і через неї
   обидва фото сиділи зміщені праворуч від блоку, хоча самі колонки
   були рівні. Прибрали її зовсім: підпис рядка тепер стоїть НАД
   парою значень і займає всю ширину, а картки та їхні характеристики
   йдуть від краю до краю блоку, рівно одна під одною. */
/* Ширину блоку тримаємо 980: на всю сторінку (1220) фото виходять
   по 597 px і самі займають цілий екран — до характеристик людина
   доскролює наосліп. 477 px достатньо, щоб роздивитися роботу,
   і пара фото разом із цінами та кнопками поміщається в один екран.
   Таблиця лежить у тому самому контейнері, тому колонки збігаються
   з фото піксель у піксель, а весь блок стоїть рівно по центру. */
.cmp-in{max-width:980px;margin:0 auto}
.cmp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 26px;margin:26px 0 0}
.cmp-cols__lab,.cmp-cols__pad{display:none}
/* Колонки мають рівнятися між собою: назва в одної в два рядки,
   в іншої в один — і ціна з кнопками роз'їжджалися по висоті.
   display:contents віддає дочірні елементи в ту саму сітку, тому
   фото, назва, ціна й кнопки лягають рядок у рядок. */
.cmp-col{display:contents}
.cmp-col__ph{grid-row:1}
.cmp-col__t{grid-row:2}
.cmp-col__p{grid-row:3}
.cmp-col__acts{grid-row:4}
.cmp-fast{grid-row:5}
.cmp-empty{grid-row:1/6}
.cmp-col--a>*{grid-column:1}
.cmp-col--b>*{grid-column:2}

/* Швидке замовлення — те саме, що на картці й на сторінці товару:
   людина вже вибрала, і змушувати її йти через кошик зайве. */
/* .quick має підкреслення (там це текстове посилання-кнопка).
   Тут це рамкова кнопка — підкреслення знімаємо явно. */
.cmp-fast{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin:10px 0 0;padding:11px 14px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--body);font-size:13px;font-family:inherit;cursor:pointer;
  letter-spacing:0;text-transform:none;text-decoration:none;
  transition:border-color .15s ease,color .15s ease}
.cmp-fast svg{width:15px;height:15px;fill:currentColor;flex:none}
.cmp-fast:hover{border-color:var(--accent);color:var(--accent-d,#794979)}

/* ---------- ховери, яких бракувало (аудит наведення) ----------
   Перевіряли не «чи є правило :hover», а чи справді МІНЯЄТЬСЯ картинка
   під курсором: знімок елемента до наведення й після, попіксельне
   порівняння. Так знайшлися місця, де правило начебто було, але його
   перебивав !important із блоку доступності, — на око такого не видно. */

/* Логотип у шапці й підвалі. */
.logo{transition:opacity .15s ease}
.logo:hover{opacity:.7}

/* Хлібні крихти. В обкладинці колір зафіксовано !important заради
   контрасту на сливовому тлі, тому там ховер робимо підкресленням. */
.crumbs a{transition:color .15s ease}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.cover .crumbs a:hover,.bcover .crumbs a:hover{color:#fff!important}

/* Текстові посилання в документах, контактах, якірному меню й примітках.
   Вони вже підкреслені за замовчуванням, тому підкреслення при наведенні
   нічого не змінює — міняємо колір на темніший акцент. */
.doc a:not(.btn),.ct a,.jump a,.cxnote a,.spec__v a,
.card__sku a,.card__eyebrow a{transition:color .15s ease}
.doc a:not(.btn):hover,.ct a:hover,.jump a:hover,.cxnote a:hover,.spec__v a:hover,
.card__sku a:hover,.card__eyebrow a:hover{
  color:var(--accent-d,#794979);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* Питання в акордеоні «Часті питання». */
.qa__q{transition:color .15s ease}
.qa__q:hover{color:var(--accent-d,#794979)}

/* «Усі подарунки ›» під блоком свят. */
.seasons__all:hover{text-decoration:underline;text-underline-offset:4px}

/* Нижня панель порівняння: не реагувала жодна з двох кнопок. */
.cmpbar__clr{transition:color .15s ease}
.cmpbar__clr:hover{color:var(--accent-d,#794979);text-decoration-thickness:2px}
.cmpbar__go{transition:background .15s ease}
.cmpbar__go:hover{background:var(--accent-d,#794979)}
.cmpbar__go[aria-disabled="true"]:hover{background:var(--soft2)}

/* Фото в колонці порівняння веде на товар — показуємо це курсору
   тим самим прийомом, що й на картках у каталозі: легкий наїзд. */
.cmp-col__ph img{transition:transform .5s ease}
.cmp-col__ph:hover img{transform:scale(1.03)}

/* Значок ⇄ уже доданого товару: підказуємо, що клік прибере його. */
.cmp-b.is-on:hover{background:var(--accent-d,#794979);border-color:var(--accent-d,#794979)}

/* Рамка поля пошуку була кольору --line — це бузковий відтінок,
   і збоку, поруч із порожнім місцем, вона читалася як випадкова
   рожева риска, а не як край поля. Робимо нейтральною й трохи
   виразнішою: тепер це очевидно поле вводу. */
.hs-search__form{border-color:#d5cfd5}

/* Плейсхолдер у пошуку був --muted (8.5:1) — це майже колір
   справжнього тексту, і порожнє поле читалося як заповнене.
   Освітлюємо до 4.84:1: підказка стає підказкою, але AA лишається.
   Тільки в пошуку — в інших полях підказки несуть формат вводу. */
.hs-search__form input::placeholder{color:#7a6e7a}

/* Повернення в каталог рівно туди, де людина зупинилася. */
.cmp-back-row{max-width:980px;margin:22px auto 0}
.cmp-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--accent-d,#794979);text-decoration:none;padding:6px 0}
.cmp-back:hover{text-decoration:underline;text-underline-offset:3px}
.cmp-back[hidden]{display:none}
.cmp-col__ph{display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:var(--soft2);position:relative}
.cmp-col__ph img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-col__t{display:block;margin:14px 0 0;font-size:15px;line-height:1.45;
  color:var(--ink);text-decoration:none}
.cmp-col__t:hover{color:var(--accent-d,#794979)}
.cmp-col__p{margin:8px 0 0;font-size:19px;color:var(--ink)}
.cmp-col__p s{color:var(--muted);font-size:14px;margin-right:8px}
.cmp-col__acts{display:flex;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.cmp-col__acts .buy{flex:1 1 auto;text-align:center}
.cmp-drop{border:1px solid var(--line);background:none;color:var(--muted);
  border-radius:8px;padding:11px 14px;font-size:13px;cursor:pointer}
.cmp-drop:hover{color:var(--accent-d,#794979);border-color:var(--accent)}
.cmp-empty{display:grid;place-items:center;aspect-ratio:1/1;border:1px dashed var(--line);
  border-radius:10px;background:var(--soft);color:var(--muted);font-size:13.5px;
  text-align:center;padding:24px;line-height:1.5}
/* Посилання в порожньому стані було єдиним у порівнянні без ховера —
   людина наводить, нічого не змінюється, і незрозуміло, чи це взагалі
   посилання. Даємо ту саму плашку, що й у підрозділах каталогу. */
.cmp-empty a{display:inline-block;color:var(--accent-d,#794979);
  text-decoration:none;margin-top:6px;padding:7px 14px;border-radius:7px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .15s ease, box-shadow .15s ease}
.cmp-empty a:hover{background:var(--soft2);box-shadow:inset 0 0 0 1px var(--accent)}

/* Таблиця свідомо перестала бути таблицею в сенсі розкладки:
   рядок — це сітка з двох рівних колонок, а підпис над ними на всю
   ширину. Так значення завжди стоять точно під своїм фото, і жодні
   підгонки падінгів під проміжок сітки більше не потрібні.
   Семантика при цьому лишається табличною: th/td, scope="row". */
.cmp-tbl{width:100%;margin:30px 0 0;font-size:13.5px;display:block}
.cmp-tbl tbody{display:block}
.cmp-tbl colgroup{display:none}
.cmp-pad{display:none}
.cmp-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:26px;border-top:1px solid var(--line);padding:16px 0 4px}
.cmp-tbl th{grid-column:1/-1;text-align:left;font-weight:400;color:var(--muted);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:0 0 9px}
.cmp-tbl td{padding:0 0 12px;color:var(--body);line-height:1.55}
.cmp-tbl tr.is-same{opacity:.6}
.cmp-tbl tr.is-same td{color:var(--muted)}
.cmp-tbl .cmp-vals{display:flex;flex-wrap:wrap;gap:6px}
.cmp-tbl .cmp-vals span{background:var(--soft2);border-radius:5px;padding:3px 8px;font-size:12.5px}
.cmp-tbl .cmp-vals span.is-same-v{background:none;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line)}
.cmp-none{color:var(--muted)}
.cmp-only{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--body);cursor:pointer;margin:26px 0 0}
.cmp-only input{width:16px;height:16px;accent-color:var(--accent)}
@media(max-width:700px){
  .cmp-wrap{padding:0 16px 60px}
  .cmp-cols{gap:0 12px;margin-top:18px}
  .cmp-fast{font-size:12px;padding:10px 8px;gap:6px}
  .cmp-col__t{font-size:13.5px;margin-top:10px}
  .cmp-col__p{font-size:16px}
  .cmp-col__acts{flex-direction:column}
  .cmp-tbl{font-size:12.5px}
  .cmp-tbl tr{column-gap:12px}
  /* На телефоні сім плашок матеріалу — це 350 px висоти на порожньому
     місці. Той самий перелік через кому читається так само, а місця
     займає вчетверо менше. */
  .cmp-tbl .cmp-vals{display:block}
  /* .is-same-v має вищу вагу (клас+клас+тег), тому рамку знімаємо
     окремим правилом — інакше на телефоні спільні значення
     обводилися прямокутником просто посеред тексту. */
  .cmp-tbl .cmp-vals span,
  .cmp-tbl .cmp-vals span.is-same-v{display:inline;background:none;padding:0;
    box-shadow:none;font-size:12.5px}
  .cmp-tbl .cmp-vals span+span::before{content:", "}
}