/* HandShop — home
   Витягнуто дослівно з макета home-v2-festive-approved.html. */
:root{
  --ink:#1c1a1b; --body:#5f5a5e; --muted:#989296;
  --line:#e8e2e6; --paper:#fff; --soft:#faf7f8; --soft2:#f3edf1;
  --accent:#996199; --accent-d:#794979; --viber:#7360f2; --ok:#4e8a45; --sale:#b5443f;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1280px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-weight:300;color:var(--body);background:var(--paper);
     -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.62}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
.ov{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 12px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;letter-spacing:-.012em}
h2{font-size:clamp(26px,3.1vw,40px);line-height:1.16}
.sec-head{text-align:center;margin:0 0 40px}
.sec-head .rule{width:38px;height:1px;background:var(--accent);margin:18px auto 0;opacity:.55}

/* ---- top bar ---- */
.topbar{background:var(--ink);color:#e9e4e7;font-size:12.5px;letter-spacing:.03em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.topbar b{font-weight:400;color:#fff}
.topbar .lang b{border-bottom:1px solid rgba(255,255,255,.45)}
.topbar .lang span{opacity:.6}

/* ---- header ---- */
header{background:#fff;border-bottom:1px solid var(--line)}
.topstick{position:sticky;top:0;z-index:30;background:#fff}
.hdr{display:flex;align-items:center;justify-content:space-between;height:86px;gap:30px}
.logo{display:block;flex:0 0 auto;line-height:0}
.logo img{width:156px;height:auto;display:block}
.logo--f img{width:134px}
@media(max-width:767px){ .logo img{width:132px} }
@media(max-width:575px){ .logo img{width:118px} }
nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
nav a{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
      padding-bottom:4px;border-bottom:1px solid transparent;transition:.2s}
nav a:hover,nav a.on{border-color:var(--accent);color:var(--accent)}
.hdr-ico{display:flex;gap:20px;align-items:center;color:var(--ink)}
.hdr-ico svg{width:19px;height:19px}
.cartn{position:relative}
.cartn i{position:absolute;top:-6px;right:-8px;background:var(--accent);color:#fff;font-style:normal;
         font-size:9.5px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center}


/* ---- chips: быстрый переход по поводам ---- */
.chips{border-bottom:1px solid var(--line);background:#fff}
.chips .wrap{display:flex;align-items:center;gap:18px;height:56px}
.chips__lab{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
            flex:0 0 auto}
.chips__wrap{position:relative;flex:1 1 auto;min-width:0}
.chips__wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:52px;
            background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%);pointer-events:none}
.chips__row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
            padding:2px 52px 2px 0}
.chips__row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
      border:1px solid var(--line);padding:7px 15px;font-size:13px;color:var(--ink);
      white-space:nowrap;transition:.16s;background:#fff}
.chip i{font-style:normal;font-size:11px;color:var(--muted);transition:.16s}
.chip:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.chip:hover i{color:rgba(255,255,255,.6)}
.chip--all{border-color:var(--accent);color:var(--accent)}
.chip--all:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.chip--more{border-style:dashed;color:var(--muted)}
.chip--more:hover{border-style:solid;background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:767px){
  .topstick{position:static}
  header{position:sticky;top:0;z-index:30;background:#fff}
  .chips .wrap{height:auto;padding:12px 30px;gap:10px}
  .chips__lab{display:none}
  .chips__wrap{margin:0 -30px}
  .chips__row{padding:0 52px 0 30px}
}

/* ---- promise strip ---- */
.promise{background:var(--soft);border-bottom:1px solid var(--line)}
.promise .wrap{display:flex;align-items:center;justify-content:center;gap:34px;
               height:52px;font-size:13px;letter-spacing:.04em;color:var(--body);flex-wrap:wrap}
.promise b{color:var(--ink);font-weight:500}
.promise span{display:flex;align-items:center;gap:9px}
.promise svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}

/* ---- sections ---- */
section{padding:74px 0}
section.first{padding-top:44px}

/* ---- products ---- */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 28px}
.prod{display:flex;flex-direction:column}
.pimg{margin:0;background:var(--soft2);overflow:hidden;aspect-ratio:1/1;position:relative;display:block}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.prod:hover .pimg img{transform:scale(1.05)}
.lab{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);
     font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:6px 10px}
.lab--sale{background:var(--sale);color:#fff;font-size:13px;letter-spacing:.02em;
     font-weight:500;padding:8px 12px;text-transform:none;
     box-shadow:0 3px 12px rgba(181,68,63,.35)}
.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)}
.price s{color:var(--muted);font-size:14px;margin-right:8px;font-family:var(--sans)}
.price--sale{color:var(--sale)}
.save{display:inline-block;margin-left:8px;font-family:var(--sans);font-size:11.5px;
      color:var(--sale);border:1px solid var(--sale);padding:2px 7px;vertical-align:2px}
.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)}
.stock--out{color:#b04a4a}
.stock--out::before{background:#b04a4a}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:14px}
.buy{display:block;text-align:center;background:var(--ink);color:#fff;padding:12px 8px;
     font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;transition:.18s;border:1px solid var(--ink)}
.buy:hover{background:var(--accent);border-color:var(--accent)}
.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;transition:color .15s}
.quick:hover{color:var(--accent)}

/* ---- окно быстрого заказа ---- */
.modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__bg{position:absolute;inset:0;background:rgba(28,26,27,.55)}
.modal__box{position:relative;background:#fff;max-width:420px;width:100%;padding:38px 34px 32px;
     box-shadow:0 24px 60px rgba(0,0,0,.18)}
.modal__x{position:absolute;top:8px;right:14px;background:none;border:0;font-size:28px;
     line-height:1;color:var(--muted);cursor:pointer}
.modal__x:hover{color:var(--ink)}
.modal h3{font-size:26px;margin:0 0 6px}
.modal__prod{font-size:13.5px;color:var(--body);margin:0 0 22px;padding-bottom:18px;
     border-bottom:1px solid var(--line)}
.modal label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.modal input,.modal textarea{display:block;width:100%;margin-top:6px;border:1px solid var(--line);
     padding:12px 14px;font-family:var(--sans);font-size:15px;font-weight:300;color:var(--ink)}
.modal input:focus,.modal textarea:focus{outline:none;border-color:var(--accent)}
.modal__go{width:100%;background:var(--ink);color:#fff;border:0;padding:14px;font-family:var(--sans);
     font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.18s;margin-top:4px}
.modal__go:hover{background:var(--accent)}
.modal__note{font-size:12px;color:var(--muted);margin:14px 0 0;text-align:center}
.more{text-align:center;margin-top:50px}
.btn{display:inline-block;padding:15px 36px;font-size:12.5px;letter-spacing:.09em;
     text-transform:uppercase;border:1px solid var(--ink);color:var(--ink);background:#fff;transition:.18s}
.btn:hover{background:var(--ink);color:#fff}
.btn--fill{background:var(--ink);color:#fff}
.btn--fill:hover{background:var(--accent);border-color:var(--accent)}


/* ---- праздничный блок ---- */
.season{background:var(--soft2)}
.season .sec-head{margin-bottom:38px}
.seasons{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.season-card{background:#fff;display:block;overflow:hidden;transition:.2s}
.season-card:hover{box-shadow:0 14px 34px rgba(28,26,27,.13);transform:translateY(-3px)}
.season-card figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--soft2)}
.season-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.season-card:hover img{transform:scale(1.05)}
.season-card__b{padding:22px 24px 24px}
.season-card__when{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
      color:#fff;background:var(--accent);padding:4px 9px;margin-bottom:12px}
.season-card__when--soon{background:var(--sale)}
.season-card h3{font-size:21px;margin:0 0 4px}
.season-card__n{font-size:13px;color:var(--muted)}
.season-card__go{display:block;margin-top:14px;font-size:12px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--ink)}
.season-card:hover .season-card__go{color:var(--accent)}
@media(max-width:991px){ .seasons{grid-template-columns:1fr;gap:20px} }

/* ---- categories ---- */
.catband{background:var(--soft)}
/* 8 розділів каталогу: 4+4 на десктопі, далі 3 і 2.
   Шість колонок під вісім плиток давали рваний ряд 6+2. */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat figure{margin:0 auto 14px;background:var(--soft2);overflow:hidden;
            width:100%;aspect-ratio:1/1}
/* Контурні іконки категорій (SVG інлайном, колір = --accent).
   Малюнок — залиті контури, тому колір задається через fill:currentColor
   на <svg>, а не stroke. Padding у % — щоб масштаб не залежав від ширини. */
.cat__ico{display:grid;place-items:center;padding:15%}
.cat__ico svg{display:block;width:100%;height:100%;color:var(--accent);
              transition:transform .5s ease, color .2s ease}
.cat:hover .cat__ico svg{transform:scale(1.06);color:var(--accent-d)}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cat:hover img{transform:scale(1.07)}
.cat h3{font-size:14.5px;text-align:center;font-family:var(--sans);font-weight:400;line-height:1.35}
.cat span{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:2px}

/* ---- editorial ---- */
.edit{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.edit figure{margin:0;aspect-ratio:4/3.1;overflow:hidden}
.edit img{width:100%;height:100%;object-fit:cover}
.edit__txt{padding:0 clamp(30px,5vw,80px)}
.edit h2{margin-bottom:18px}
.edit p{margin:0 0 30px;max-width:44ch}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.step .n{font-family:var(--serif);font-size:32px;color:var(--accent);opacity:.35;display:block;line-height:1;margin-bottom:14px}
.step h3{font-size:19px;margin-bottom:10px}
.step p{margin:0;font-size:14.5px;line-height:1.72}

/* ---- manifesto ---- */
.manifest{background:var(--ink);color:#dfd8df;text-align:center;padding:92px 30px}
.manifest .ov{color:#b384b3}
.manifest blockquote{font-family:var(--serif);font-size:clamp(21px,2.5vw,31px);line-height:1.45;
                     color:#fff;max-width:23ch;margin:0 auto;font-style:italic}
.manifest p{max-width:56ch;margin:24px auto 0;font-size:15.5px;line-height:1.8;color:#c9c3c8}
.who{margin-top:26px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#a09aa0}

/* ---- journal ---- */
.journal{border-top:1px solid var(--line)}
.jrow{display:grid;grid-template-columns:115px 1fr 24px;align-items:center;gap:24px;
      padding:25px 0;border-bottom:1px solid var(--line);transition:.22s}
.jrow:hover{padding-left:12px}
.jrow:hover .jtitle{color:var(--accent)}
.jdate{font-size:12.5px;letter-spacing:.08em;color:var(--muted)}
.jtitle{font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.35;transition:color .2s}
.jarr{color:var(--muted);text-align:right}

/* ---- about ---- */
.about{background:var(--soft);padding:84px 30px}
.about .inner{max-width:730px;margin:0 auto}
.about .ov,.about h2{text-align:center}
.about h2{margin-bottom:28px}
.about p{font-size:15.5px;line-height:1.9;margin:0 0 1.1em}
.about .fin{text-align:center;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);margin-top:1.6em}

/* ---- footer ---- */
footer{padding:62px 0 26px;font-size:14px;border-top:1px solid var(--line)}
.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}
footer a:hover{color:var(--accent)}
.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}

/* 8 плиток: тримаємо 4 колонки якнайдовше, далі одразу 2.
   Три колонки давали б осиротілий ряд 3+3+2 з діркою праворуч. */
@media(max-width:1100px){ .cats{gap:18px} }
@media(max-width:700px){ .cats{grid-template-columns:repeat(2,1fr);gap:20px} }
@media(max-width:991px){
  nav{display:none}
  .prods{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:34px}
  .edit{grid-template-columns:1fr}
  .edit__txt{padding:40px 30px}
  .fcols{grid-template-columns:1fr 1fr}
  section{padding:56px 0}
  .promise .wrap{height:auto;padding-top:12px;padding-bottom:12px;gap:14px;font-size:12.5px}
}
@media(max-width:575px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .jrow{grid-template-columns:1fr;gap:6px}
  .jarr{display:none}
  .prods{gap:26px 16px}
  .buy{font-size:10.5px;letter-spacing:.06em;padding:11px 4px}
  .ask{flex:0 0 40px}
}

/* ============================================================
   СВЯТКОВА ВЕРСІЯ — тёплая палитра, золотые линии, орнаменты.
   Структура та же, что в утверждённой: изменена только «кожа».
   ============================================================ */
:root{
  --ink:#312531; --body:#6a586a; --muted:#a290a2;
  --line:#e9dde9; --paper:#fefbfe; --soft:#f9f3f9; --soft2:#f0e5f0;
  --accent:#996199; --sale:#d4372f; --ok:#4e7a45;
  --gold:#c0a06b; --plum:#653965; --pink:#cf81b5;
  --accent-d:#794979; --accent-l:#b983b9; --tint:#f4ebf4; --night:#1d161d; --bar:#e2d4e2;
}
body{background:var(--paper)}

/* мягкие углы — праздничное всегда чуть округлее */
.pimg,.cat figure,.edit figure,.season-card,.season-card figure,.modal__box{border-radius:8px}
.pimg,.cat figure{overflow:hidden}
.buy,.btn,.modal__go{border-radius:3px}
.chip{border-radius:999px}

/* верхняя полоса — сливовая, с золотой чертой снизу */
.topbar{background:var(--night);color:var(--bar);border-bottom:0}
.topbar b{color:#ffffff}
.topbar .lang span{opacity:.55}

/* шапка */
header{border-bottom:1px solid var(--line)}
nav a:hover,nav a.on{border-color:var(--gold);color:var(--accent)}
.cartn i{background:var(--accent)}

/* теги */
.chips{background:var(--paper);border-bottom:1px solid var(--line)}
.chips__wrap::after{background:linear-gradient(90deg,rgba(254,251,254,0),var(--paper) 78%)}
.chip{border-color:#e7dae7;background:#fefbfe}
.chip:hover{background:var(--accent);border-color:var(--accent)}
.chip--all{border-color:var(--gold);color:var(--accent);background:#faf5ec}
.chip--all:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* полоса преимуществ — кремовая, иконки золотые */
.promise{background:var(--soft);border-top:1px solid rgba(185,141,74,.35);
         border-bottom:1px solid rgba(185,141,74,.35)}
.promise svg{color:var(--gold)}

/* заголовки секций: золотая линия с ромбом посередине */
.ov{color:var(--accent)}
.sec-head .rule{width:auto;height:auto;background:none;margin:16px auto 0;
                display:flex;align-items:center;justify-content:center;gap:12px;opacity:1}
.sec-head .rule::before,.sec-head .rule::after{content:"";width:56px;height:1px;
                background:linear-gradient(90deg,transparent,var(--gold))}
.sec-head .rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.sec-head .rule i{display:block;width:7px;height:7px;background:var(--gold);
                transform:rotate(45deg);flex:0 0 auto}

/* кнопки */
.buy{background:var(--accent);border-color:var(--accent)}
.buy:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn{border-color:var(--accent);color:var(--accent)}
.btn:hover{background:var(--accent);color:#fff}
.btn--fill{background:var(--accent);color:#fff}
.btn--fill:hover{background:var(--accent-d);border-color:var(--accent-d)}
.quick:hover{color:var(--accent)}

/* карточка */
.lab{background:rgba(254,251,254,.95);border:1px solid rgba(185,141,74,.5)}
.lab--sale{background:var(--sale);border-color:var(--sale);box-shadow:0 3px 12px rgba(192,57,43,.3)}
.price{color:var(--ink)}
.save{border-color:var(--sale)}

/* праздничный блок — сливовая лента */
.season{background:var(--plum);position:relative}
.season::before,.season::after{content:"";position:absolute;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.season::before{top:0}.season::after{bottom:0}
.season .ov{color:#dcc18e}
.season h2{color:#fff}
.season .rule::before{background:linear-gradient(90deg,transparent,#dcc18e)}
.season .rule::after{background:linear-gradient(90deg,#dcc18e,transparent)}
.season .rule i{background:#dcc18e}
.season-card{background:#fefbfe}
.season-card__when{background:var(--gold)}
.season-card__when--soon{background:var(--sale)}
.season-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.28)}
/* стрічка приводів лежить на сливовій смузі, тож підпис і рамки — світлі */
.season .seasons__more > span{color:#dcc18e}
.season .seasons__more a{background:rgba(254,251,254,.96);border-color:transparent}
.season .seasons__more a:hover{background:#fff;border-color:var(--gold);color:var(--accent-d)}
.season .seasons__all{border-color:var(--gold)!important;color:var(--accent-d)!important}

/* блок с фото и текстом */
.edit{background:var(--soft)}

/* шаги */
.step .n{color:var(--gold);opacity:1;font-size:38px}

/* тёмный блок — сливовый, с золотой рамкой внутри */
.manifest{background:var(--plum)}
.manifest .ov{color:#dcc18e}
.manifest blockquote{color:#fff}
.manifest p{color:#e4d3e4}
.who{color:#b39eb3}

/* журнал */
.journal{border-top:1px solid var(--line)}
.jrow{border-bottom:1px solid var(--line)}
.jrow:hover .jtitle{color:var(--accent)}

/* о магазине и подвал */
.about{background:var(--soft)}
footer{border-top:1px solid var(--line);background:var(--paper)}
footer a:hover{color:var(--accent)}

/* модальное окно */
.modal__bg{background:rgba(49,37,49,.6)}
.modal input:focus,.modal textarea:focus{border-color:var(--gold)}
.modal__go{background:var(--accent)}
.modal__go:hover{background:var(--accent-d)}


/* ============================================================
   Звёздочки — только на тёмных блоках, никогда поверх товаров.
   Чистый CSS: анимируются transform и opacity, то есть работу
   делает видеокарта. Процессор не греется, батарея не садится.
   ============================================================ */
.sparkles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.season .wrap,.manifest .wrap{position:relative;z-index:1}
.manifest{position:relative}
.spk{position:absolute;display:block;width:var(--s);height:var(--s);color:var(--c);
     opacity:0;will-change:transform,opacity;
     filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor);
     animation:spk var(--d) ease-in-out var(--delay) infinite}
.spk::before{content:"";position:absolute;inset:0;background:currentColor;
     -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%200C53.5%2031%2069%2046.5%20100%2050C69%2053.5%2053.5%2069%2050%20100C46.5%2069%2031%2053.5%200%2050C31%2046.5%2046.5%2031%2050%200Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
     mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%200C53.5%2031%2069%2046.5%20100%2050C69%2053.5%2053.5%2069%2050%20100C46.5%2069%2031%2053.5%200%2050C31%2046.5%2046.5%2031%2050%200Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.spk::after{content:"";position:absolute;left:50%;top:50%;width:36%;height:36%;
     transform:translate(-50%,-50%);border-radius:50%;
     background:radial-gradient(circle,#fff 0 40%,transparent 72%);opacity:.85}
@keyframes spk{
   0%{opacity:0;
      transform:translate3d(0,20px,0) scale(calc(var(--flip) * .4),.4) rotate(var(--r0))}
  14%{opacity:var(--o)}
  50%{opacity:var(--o);
      transform:translate3d(calc(var(--dx)/2),-14px,0) scale(calc(var(--flip) * 1),1)
                rotate(calc(var(--r0) + var(--rd)))}
  72%{opacity:calc(var(--o) * .8)}
 100%{opacity:0;
      transform:translate3d(var(--dx),-58px,0) scale(calc(var(--flip) * .75),.75)
                rotate(calc(var(--r0) + var(--rd) * 2))}
}
/* если человек просил систему убрать анимации — уважаем */
@media (prefers-reduced-motion: reduce){ .sparkles{display:none} }


/* «Обрати» — при наведении подчёркивается и стрелка отъезжает */
.season-card__go{position:relative;display:inline-flex;align-items:center;gap:8px;
    margin-top:16px;padding-bottom:5px;transition:color .2s}
.season-card__go::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform .28s cubic-bezier(.4,0,.2,1)}
.season-card__go i{font-style:normal;transition:transform .2s}
.season-card:hover .season-card__go{color:var(--accent)}
.season-card:hover .season-card__go::after{transform:scaleX(1)}
.season-card:hover .season-card__go i{transform:translateX(4px)}
.season-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.season-card:focus-visible .season-card__go::after{transform:scaleX(1)}


/* соцсети в подвале */
.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}
@media(max-width:575px){ .soc{width:42px;height:42px} }


/* переключатель разделов над сеткой товаров */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 38px}
.tab{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;
     letter-spacing:.03em;cursor:pointer;padding:9px 20px;border:1px solid var(--line);
     border-radius:999px;background:#fff;color:var(--body);transition:.18s}
.tab i{font-style:normal;font-size:11px;color:var(--muted);transition:.18s}
.tab.is-on i{color:rgba(255,255,255,.65)}
.tab:hover i{color:var(--accent)}
.tab:hover{border-color:var(--accent);color:var(--accent)}
.tab.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.pane[hidden]{display:none}
#shop-head .ov,#shop-head h2{transition:opacity .18s}
#shop-head.is-swap .ov,#shop-head.is-swap h2{opacity:0}
.pane{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .pane{animation:none} }
@media(max-width:575px){ .tab{padding:8px 15px;font-size:12.5px} }


/* метка-иконка вместо слова: название вкладки уже всё сказало */
.lab--ico{display:grid;place-items:center;width:32px;height:32px;padding:0;
    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}


/* ---------- бургер и мобильное меню ---------- */
.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} }

.burger{margin-left:0;order:3}
.hdr-ico{order:4}

/* вторая фотография при наведении */
.pimg .im2{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.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;z-index:2}
.pimg.has-alt:hover::after{opacity:0}
@media (hover:none){.pimg.has-alt .im2{display:none}.pimg.has-alt::after{display:none}}

/* подсказка быстрого просмотра */
.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;z-index:3}
.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(940px,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__grid{display:grid;grid-template-columns:1fr 1fr}
.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:32px 32px 28px}
.qv__info h3{font-size:23px;line-height:1.25;margin:0 0 12px}
.qv__price{font-family:var(--serif);font-size:25px;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:20px}
.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}
.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;display:block;text-align:center;background:var(--accent);
 color:#fff;border:1px solid var(--accent);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.qv__acts .buy:hover{background:var(--accent-d);border-color:var(--accent-d)}
.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}
.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)}
@media(max-width:767px){.qv__grid{grid-template-columns:1fr}.qv__info{padding:22px 20px}}


/* подчёркивание ссылок в подвале */
footer ul a{position:relative;display:inline-block;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::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){.lift{right:14px;bottom:14px;width:42px;height:42px}}

/* тонкая обводка при наведении — как в каталоге */
.pimg,.cat figure{box-shadow:0 0 0 1px transparent;transition:box-shadow .2s ease}
.prod:hover .pimg,.cat:hover figure{box-shadow:0 0 0 1px var(--accent)}
.ptitle{transition:color .2s}
.cat h3{transition:color .2s}
.cat:hover h3{color:var(--accent)}


/* ============================================================
   ЄДИНА ШАПКА — однакова на головній, у каталозі та на товарі.
   Блок стоїть останнім у стилях, тому перекриває старі правила.
   ============================================================ */
.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}}

/* ---- блок підбору подарунка ---- */
.edit__quiz{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 18px}
.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);flex:0 0 auto}
.edit__or{font-size:13px;color:var(--muted);margin:14px 0 0}
.edit__or a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* рядок «Кому» — тепер він на першому екрані один, тож центруємо.
   Коли чипи не вміщуються (мобільний), JS знімає .is-fit — і рядок
   знову притискається ліворуч, зі скролом і градієнтом-підказкою праворуч. */
.chips .wrap{justify-content:center}
.chips__wrap{flex:0 1 auto}
.chips__wrap.is-fit{overflow:visible}
.chips__wrap.is-fit::after{display:none}
.chips__wrap.is-fit .chips__row{padding-right:0;overflow-x:visible}
.chip--who svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto;margin-right:-2px}
/* При наведенні чип заливається акцентом — іконка того ж кольору на ньому
   зникала. Робимо її білою разом із текстом. */
.chip:hover svg{color:#fff}
.chip--who{display:inline-flex;align-items:center;gap:7px}
.chip--quiz{border-color:var(--accent);color:var(--accent);background:var(--tint)}
.chip--quiz:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

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

/* блок підбору: раніше сітка розтягувалась на всю ширину вікна,
   тож на широких моніторах фото роздувалось до півекрана.
   Тепер вміст обмежений тією ж шириною, що й решта сторінки,
   а висота фото має стелю. */
.edit{display:block;padding:60px 0}
.edit__in{max-width:1280px;margin:0 auto;padding:0 30px;display:grid;
 grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);align-items:stretch;gap:0}
/* фото тягнеться на всю висоту текстової колонки, щоб верхня й нижня лінії
   збігалися з текстом. Пропорція не фіксована — її задає висота тексту,
   кадрування бере на себе object-fit:cover. Стеля ширини лишається
   за .edit__in (1280 px), тому на широких моніторах фото не розповзається. */
.edit figure{aspect-ratio:auto;max-height:none;height:100%;min-height:320px;position:relative}
/* фото абсолютне всередині рамки, інакше <img> вносить свою природну висоту
   і рядок сітки розтягується під фото, а не під текст (саме через це блок
   ставав удвічі вищим за текстову колонку). */
.edit figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* нинішнє зображення — намальована листівка на білому тлі й вертикальніша
   за рамку, тому cover зрізав би їй верх і низ (близько третини висоти).
   contain лишає малюнок цілим, а біле тло рамки зливається з тлом малюнка.
   КОЛИ ТУТ БУДЕ СПРАВЖНЄ ФОТО З МАЙСТЕРНІ — поверни object-fit:cover
   і прибери background, щоб фото заповнювало рамку без полів. */
.edit figure{background:#fff}
.edit img{width:100%;height:100%;object-fit:cover}
/* рядок решти приводів під картками дат: замість другого рядка чипів
   на першому екрані — тут, поруч із блоком, який і так про приводи */
.seasons__more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.seasons__more > span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--muted);margin-right:4px}
.seasons__more a{display:inline-flex;align-items:baseline;gap:7px;padding:9px 16px;
 border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;
 color:var(--ink);transition:.18s;white-space:nowrap}
.seasons__more a:hover{border-color:var(--accent);color:var(--accent)}
.seasons__more a i{font-style:normal;font-size:12px;color:var(--muted)}
.seasons__more a:hover i{color:var(--accent)}
.seasons__all{border-color:var(--accent-l)!important;color:var(--accent)!important}
@media(max-width:520px){
  .seasons__more{gap:8px;margin-top:20px}
  .seasons__more a{padding:8px 13px;font-size:13px}
}

@media(max-width:900px){
  .edit{padding:0}
  .edit__in{grid-template-columns:1fr;padding:0}
  /* на вузьких екранах фото знову зі своєю пропорцією й стелею висоти:
     скидаємо min-height/height, інакше min-height із базового правила
     переважає max-height і фото роздувається. */
  .edit figure{aspect-ratio:16/9;max-height:280px;min-height:0;height:auto;width:100%}
  .edit__txt{padding:32px 30px 40px}
}

/* дві кнопки поруч: підбір — заливкою, Viber — контуром без заливки.
   Сітка з двох рівних колонок за шириною ширшої кнопки (width:max-content),
   тому обидві кнопки однакові й по ширині, і по висоті. */
.edit__cta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
 align-items:stretch;width:max-content;max-width:100%}
.edit__cta .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
 width:100%;padding-left:18px;padding-right:18px;text-align:center}
.btn--line{background:#fff;border-color:var(--accent);color:var(--accent)}
.btn--line:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--line svg{width:17px;height:17px;flex:0 0 auto}
/* .edit p{margin:0 0 30px} має вищу вагу (клас+тег), тому просто
   .edit__or{margin-top} не спрацьовував і підпис прилипав до кнопок. */
.edit .edit__or{margin:20px 0 0}
@media(max-width:479px){
  .edit__cta{grid-template-columns:1fr;width:100%}
}

/* картки «Подарунки до дати»: опис був інлайновим, тож у короткому тексті
   «Обрати →» підтягувалось до нього в той самий рядок. Тепер опис — блок,
   а посилання притиснуте до низу картки, тож у всіх трьох воно на одній лінії. */
.season-card{display:flex;flex-direction:column}
.season-card__b{display:flex;flex-direction:column;flex:1}
.season-card__n{display:block}
/* у flex-колонці інлайнові елементи розтягуються на всю ширину —
   мітку й посилання лишаємо по контенту */
.season-card__when{align-self:flex-start}
.season-card__go{align-self:flex-start;margin-top:auto;padding-top:16px}

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

/* ============================================================
   ОБРАНЕ Й МІНІ-КОШИК — наскрізний блок, однаковий на всіх сторінках
   ============================================================ */
.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:", "}
}

/* ============================================================
   Вузькі телефони (360 px і менше): один товар у рядку.
   У всіх інших стилях (каталог, пошук, блог) цей брейкпоінт уже є —
   у головній його забули. Через це на 360 px дві колонки по 160 px
   (мінімальна ширина картки: «В наявності» + сердечко + порівняння
   в одному рядку) не влазили у 300 px контенту, і сторінка їхала
   вбік на 6 px. На 375 px скролу не було, але праве поле сідало
   з 30 px до 9 px — картки виглядали зсунутими.
   Один стовпчик і прибирає скрол, і робить фото більшим.
   ============================================================ */
@media(max-width:420px){
  .prods{grid-template-columns:1fr}
  .buy{font-size:11.5px;padding:12px}
  .ptitle{font-size:14.5px}
}

/* ============================================================
   Верхня смуга на телефоні (600 px і менше).
   Той самий випадок, що й з .prods: правило є в усіх інших
   стилях (hs-base, hs-catalog, hs-cart…), а в головній його
   забули. Без нього три написи не влазять у смугу заввишки
   38 px: текст переносився на три рядки, вилазив за межі
   темної плашки і його зверху накривала біла шапка.
   Ховаємо промо-рядок — телефон і перемикач мов лишаються.
   ============================================================ */
@media(max-width:600px){
  .topbar .wrap span:first-child{display:none}
  .topbar .wrap{justify-content:space-between;gap:10px;font-size:12px}
}