/*
 * Rukola — стилі теми.
 * Токени й компоненти за docs/design-spec.md: один гротеск Onest, нульові
 * скруглення, без тіней і градієнтів у UI, акцент #55603A ~2 % площі.
 */
/* ---------- шрифт (self-host, variable 100–900) ---------- */
@font-face{
  font-family:"Onest";
  src:url("../fonts/onest-cyrillic-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
  font-family:"Onest";
  src:url("../fonts/onest-cyrillic.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Onest";
  src:url("../fonts/onest-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --ink:#0E0E0C;
  --paper:#FFFFFF;
  --hair:#DCDCD6;
  /* Межа інтерактивного елемента: `--hair` задекоративна для полів (1.27:1). */
  --line:#8E8F86;
  --wash:#F6F6F2;
  --wash-2:#ECECE5;
  --muted:#6A6B62;
  --herb:#55603A;
  --warn:#8A5F1E;
  --error:#9A2F2D;
  --ui:"Onest","Helvetica Neue",Arial,sans-serif;
  --pad:32px;
  --max:1360px;
}
*{box-sizing:border-box}
/* Атрибут hidden діє лише в UA-стилях; авторське display його перебиває. */
[hidden]{display:none !important}
/* Сіра плашка, яку Safari й Chrome малюють поверх посилання чи кнопки на
   дотик. У нас свої стани ховера й фокуса, а ця плашка перекриває логотип
   і кнопки темним прямокутником на кожен тап. */
html{-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a,button,summary,label,select,[role="button"]{-webkit-tap-highlight-color:transparent}
img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
/* Плавна поява фото в картках товару. Клас rk-anim ставить JS, тому без нього
   картинки видно одразу — сторінка не лишиться порожньою, якщо скрипт не
   виконався. Лише lazy: перші картки йдуть eager з fetchpriority=high, це
   кандидати на LCP, їх ховати не можна. Лише opacity — transform конфліктував
   би з .card:hover img{scale}. Галерею товару не чіпаємо: gallery.js підмінює
   кадри, і кожне перемикання блимало б. */
/* :not(.is-in) підіймає специфічність до 0,4,1 — інакше нічия з
   `.card.out .card-media img{opacity:.55}` (0,3,1), і те правило перемагало
   як пізніше у файлі: розпродані картки зʼявлялися ривком, без фейду. */
.rk-anim .card-media img[loading="lazy"]:not(.is-in){opacity:0}
.rk-anim .card-media img[loading="lazy"]{transition:opacity .7s cubic-bezier(.33,.1,.25,1)}
.rk-anim .card-media img[loading="lazy"].is-in{opacity:1}
/* Розпродані картки притлумлені (.card.out нижче). Без цього рядка правило
   вище перебило б їх за специфічністю й «увімкнуло» на повну. */
.rk-anim .card.out .card-media img[loading="lazy"].is-in{opacity:.55}
@media (prefers-reduced-motion:reduce){
  .rk-anim .card-media img[loading="lazy"]{opacity:1;transition:none}
  .rk-anim .card.out .card-media img[loading="lazy"]{opacity:.55}
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--herb);outline-offset:2px}
button{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap-gap{padding-top:64px}
.lab{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.lab.muted,.muted{color:var(--muted)}
.lab.herb,.herb{color:var(--herb)}
.num{font-variant-numeric:tabular-nums}
.img-placeholder{display:block;width:100%;height:100%;background:var(--wash)}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:100;width:auto;height:auto;clip:auto;
  background:var(--ink);color:var(--paper);padding:12px 18px;font-size:12px;
}
.rk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------- utility + шапка ---------- */
.util{border-bottom:1px solid var(--hair)}
.util-in{
  max-width:var(--max);margin:0 auto;padding:9px var(--pad);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.head{border-bottom:1px solid var(--hair);background:var(--paper)}
.head-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:62px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;
}
.brand{font-size:15px;font-weight:700;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.nav a{padding:2px 0;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover,.nav a.on{border-bottom-color:var(--herb)}
.tools{display:flex;gap:20px;align-items:center}
.head-cart{white-space:nowrap}
.head-cart:hover{color:var(--herb)}
.header-cart-count[data-empty]{color:var(--muted)}
.nav-toggle{display:none;width:26px;height:26px;padding:0;border:0;background:transparent;cursor:pointer;position:relative}
.nav-toggle i,.nav-toggle i::before,.nav-toggle i::after{position:absolute;left:3px;width:20px;height:1.5px;background:var(--ink);transition:transform .18s,opacity .18s}
.nav-toggle i{top:12px}
.nav-toggle i::before{content:"";top:-6px;left:0}
.nav-toggle i::after{content:"";top:6px;left:0}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{display:none;border-top:1px solid var(--hair);padding:18px var(--pad) 26px}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav .mobile-main li a{display:block;padding:13px 0;border-bottom:1px solid var(--hair);font-size:17px;font-weight:600;letter-spacing:-.02em}
.mobile-nav .mobile-help li a{display:block;padding:9px 0;font-size:14px;color:var(--muted)}
.mobile-nav .mobile-lab{margin:22px 0 6px;color:var(--muted)}
.mobile-nav a:hover{color:var(--herb)}
/* ---------- герой ---------- */
.hero{position:relative;height:min(680px,80vh);min-height:520px;background:var(--ink);overflow:hidden;color:var(--paper)}
.hero img{object-position:50% 40%}
/* Зупинки градієнта підібрані під висоту блоку копії. */
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,12,.74) 0%,rgba(14,14,12,.62) 32%,rgba(14,14,12,.22) 64%,rgba(14,14,12,.06) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;max-width:var(--max);margin:0 auto;padding:0 var(--pad) 64px;display:flex;flex-direction:column;align-items:flex-start}
.hero-copy .lab{margin-bottom:16px;opacity:.88}
.hero h1{margin:0;font-size:clamp(28px,4.8vw,66px);font-weight:700;letter-spacing:-.04em;line-height:1.02;max-width:15ch;text-wrap:balance}
.hero-copy p{margin:16px 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.86);max-width:40ch}
.hero-copy .btn{margin-top:28px}
/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;line-height:1.2;padding:14px 26px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;background:transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn-light{color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-ink{color:var(--ink);border-color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:var(--paper)}
/* ---------- біжучий рядок ---------- */
.ticker{border-bottom:1px solid var(--hair);background:var(--paper);overflow:hidden;padding:11px 0;white-space:nowrap}
.ticker-track{display:inline-flex;gap:0;animation:tick 42s linear infinite}
.ticker span{display:inline-block;padding:0 28px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.ticker span::after{content:"";display:inline-block;width:5px;height:5px;background:var(--herb);margin-left:28px;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}
/* ---------- секції ---------- */
.sec{padding:72px 0}
.sec-tight{padding-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.sec-head-gap{margin-top:64px}
.sec-head h2{min-width:0;margin:0;font-size:clamp(19px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:1.05}
.sec-head .lab{color:var(--muted)}
.more{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.more:hover{color:var(--herb);border-color:var(--herb)}
/* ---------- категорії ---------- */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:22px}
/* Пропорція на самій плитці: ряд сітки може бути вищим за неї (флагман 2x2),
   тому медіа розтягується абсолютно, інакше знизу лишалася смуга фону. */
.cat{position:relative;overflow:hidden;background:var(--wash);display:block;aspect-ratio:3/4}
.cat-media{position:absolute;inset:0}
.cat img{transition:transform .6s ease}
.cat:hover img{transform:scale(1.04)}
.cat-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,12,.72) 0%,rgba(14,14,12,.44) 16%,rgba(14,14,12,.2) 34%,rgba(14,14,12,.06) 50%,rgba(14,14,12,0) 66%)}
.cat-label{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:var(--paper);display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.cat-label .lab{transition:transform .35s ease}
.cat:hover .cat-label .lab{transform:translateY(-2px)}
/* Цифри без міжлітерного інтервалу: з ним «17» читається як «1 7». */
.cat-label .num{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;opacity:.6;font-variant-numeric:tabular-nums}
.cat-lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.cat-lead .cat-label{padding:26px 28px}
.cat-lead .cat-label .lab{font-size:15px;letter-spacing:.18em}
.cat-lead .cat-label .num{font-size:12px}
/* ---------- сітка товарів ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px;padding-top:22px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px}
.card{background:var(--paper);display:block}
.card-media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--wash)}
.card img{transition:transform .6s ease}
.card:hover img{transform:scale(1.03)}
.tag{position:absolute;top:10px;left:10px;z-index:2;background:var(--paper);font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--ink)}
.tag-herb{background:var(--herb);border-color:var(--herb);color:var(--paper)}
.card-row{display:flex;justify-content:space-between;gap:14px;padding:13px 0 0}
.card-name{font-size:13.5px;font-weight:400;line-height:1.4}
.card-price{font-size:13.5px;font-weight:500;white-space:nowrap;text-align:right}
.card-price del{display:none}
.card-price ins{text-decoration:none}
.card-was{display:block;font-size:12px;font-weight:400;color:var(--muted);text-decoration:line-through;text-align:right}
.card-sub{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;
  padding:5px 0 0;font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
/* Крапка наявності — один із небагатьох дозволених акцентів (спека §1). */
.card-state{display:inline-flex;align-items:center;gap:7px;color:var(--herb)}
.card-state i{width:4px;height:4px;flex:none;background:currentColor;border-radius:50%}
/* Наявність кольором крапки: зелена є, червона немає. */
.card-state.out{color:var(--muted)}
.card-state.out i{background:var(--error)}
.card-colors{color:var(--muted)}
.card.out .card-media img{opacity:.55}
.card.out .card-price{color:var(--muted)}
/* ---------- банери ---------- */
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ban{position:relative;height:540px;overflow:hidden;background:var(--ink);color:var(--paper);display:block}
.ban img{object-position:50% 20%;transition:transform .7s ease}
.ban:hover img{transform:scale(1.03)}
.ban-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,12,.66) 0%,rgba(14,14,12,.14) 50%,rgba(14,14,12,.04) 100%)}
.ban-copy{position:absolute;inset:auto 0 0 0;padding:0 clamp(28px,3vw,48px) 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ban-copy h3{margin:0;font-size:clamp(24px,2.6vw,38px);font-weight:700;letter-spacing:-.035em;text-transform:uppercase;line-height:.95}
.ban-copy .lab{opacity:.85}
/* ---------- про бренд ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.about-txt{background:var(--wash);padding:clamp(36px,5vw,84px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.about-txt .lab{color:var(--herb)}
.about-txt h2{margin:16px 0 0;font-size:clamp(24px,3vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1.04;max-width:13ch;text-wrap:balance}
.about-txt p{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.65;max-width:44ch}
.about-txt .btn{margin-top:26px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--hair);padding-top:24px}
.facts .lab{color:var(--herb);margin-bottom:10px}
.facts b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-bottom:6px}
.facts span{display:block;font-size:12px;line-height:1.5;color:var(--muted)}
.about-media{min-height:520px;overflow:hidden;background:var(--wash)}
.about-media img{object-position:50% 18%}
/* ---------- інстаграм ---------- */
.ig-head{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ig-head h2{margin:0;font-size:clamp(19px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:1.05}
.ig{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.ig-cell{aspect-ratio:1;overflow:hidden;background:var(--wash);display:block}
.ig-cell img{object-position:50% 22%}
/* ---------- футер ---------- */
.foot{padding:44px 0 30px;background:var(--wash);margin-top:56px}
.wordmark{padding:0 0 36px;border-bottom:1px solid var(--hair);margin-bottom:48px}
.wordmark svg{display:block;width:100%;height:auto;overflow:visible}
.wordmark text{font-family:var(--ui);font-weight:700;fill:var(--ink)}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.foot .lab{margin:0 0 14px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot li{font-size:13.5px}
.foot li a:hover{color:var(--herb)}
.foot-base{margin-top:44px;padding-top:18px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.foot-base a{border-bottom:1px solid transparent}
.foot-base a:hover{color:var(--herb)}
.foot-base .agency{color:var(--ink);border-bottom:1px solid var(--hair)}
.foot-base .agency:hover{color:var(--herb);border-color:var(--herb)}
/* ---------- службові сторінки ---------- */
.pg{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 84px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;align-items:start}
.pg-wide{grid-template-columns:minmax(0,1fr)}
.pnav{position:sticky;top:24px}
.pnav .lab{color:var(--muted);margin-bottom:14px}
.pnav .pnav-second{margin-top:26px}
.pnav a{display:block;padding:11px 0;border-bottom:1px solid var(--hair);font-size:14px;font-weight:500;transition:color .15s,padding-left .15s}
.pnav a:hover{color:var(--herb)}
.pnav a.on{color:var(--herb);padding-left:10px;border-bottom-color:var(--herb)}
.pnav .pnav-note{margin-top:22px;font-size:12px;color:var(--muted);line-height:1.6}
.pnav .pnav-note a{display:inline;padding:0;border-bottom:1px solid var(--hair)}
.pbody{max-width:760px}
.pg-wide .pbody{max-width:860px}
.pbody .eyebrow{color:var(--herb);margin-bottom:14px}
.pbody h1{margin:0;font-size:clamp(24px,3.6vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.pbody .lead{margin:18px 0 0;font-size:15px;line-height:1.65;color:var(--muted);max-width:32em}
.pbody .upd{margin:22px 0 0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:26px;border-bottom:1px solid var(--hair)}
.pbody h2{margin:44px 0 12px;font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.pbody h3{margin:26px 0 8px;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pbody p{margin:0 0 12px;font-size:15px;line-height:1.7;max-width:36em}
.pbody ul,.pbody ol{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.7;max-width:36em}
.pbody li{margin-bottom:5px}
.pbody img{width:auto;height:auto;max-width:100%;margin:20px 0}
/* Лінійка кольором `--hair` дає 1.38:1 — посилання в тексті були невидимі. */
.pbody a{border-bottom:1px solid var(--herb);transition:border-color .15s,color .15s}
.pbody a:hover{color:var(--herb);border-color:var(--herb)}
.pbody a.btn,.pbody a.more{border-bottom:0}
.post-list{list-style:none;padding:0;margin:24px 0 0}
.post-list li{padding:12px 0;border-bottom:1px solid var(--hair)}
/* Без max-width: 36em тут давало 504px (1em таблиці = 14px), з яких 170px
   з'їдала колонка підпису — значенню лишалося 334px, і таблиця була помітно
   вужча за лінію та заголовки над нею. Абзацам 36em лишаємо: це міра
   читабельності для суцільного тексту, а тут короткі значення. */
.kv{width:100%;border-collapse:collapse;margin:8px 0 18px}
.kv th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:12px 20px 12px 0;vertical-align:top;width:170px;border-bottom:1px solid var(--hair)}
.kv td{padding:12px 0;border-bottom:1px solid var(--hair);vertical-align:top;font-size:14px;line-height:1.6}
/* Вирівняно по таблицях і лінії: у блоку є заливка, тож видимі краї вужчі за
   решту читалися б як збій верстки. Абзаци поруч лишаються 36em — там меж не
   видно, і вузька міра працює на читабельність. */
.callout{background:var(--wash);padding:22px 26px;margin:18px 0 22px;font-size:14px;line-height:1.65}
.callout .lab{color:var(--herb);margin-bottom:8px}
.callout p{margin:0}
.sizes-table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-variant-numeric:tabular-nums}
.sizes-table th{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--hair)}
.sizes-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--hair);font-size:14px}
.sizes-table td:first-child{font-weight:700}
.sizes-table tr:hover td{background:var(--wash)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px;padding:0;list-style:none}
.chips span,.chips li{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 11px;border:1px solid var(--hair)}
.legal ol{counter-reset:item;list-style:none;padding-left:0}
.legal ol>li{counter-increment:item;padding-left:48px;position:relative;margin-bottom:6px}
.legal ol>li::before{content:counter(sec) "." counter(item);position:absolute;left:0;top:0;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.legal h2{counter-increment:sec}
.legal h2::before{content:counter(sec) ". ";color:var(--muted)}
.legal{counter-reset:sec}
/* ---------- про нас ---------- */
.ab-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ab-txt{background:var(--wash);padding:clamp(36px,5vw,84px);display:flex;flex-direction:column;justify-content:center}
.ab-txt .lab{color:var(--herb)}
.ab-txt h1{margin:16px 0 0;font-size:clamp(24px,3.6vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.02;max-width:14ch;text-wrap:balance}
.ab-txt p{margin:20px 0 0;font-size:15px;line-height:1.65;color:var(--muted);max-width:46ch}
.ab-media{height:620px;overflow:hidden;background:var(--wash)}
.ab-media img{object-position:50% 20%}
.ab-story{max-width:var(--max);margin:0 auto;padding:72px var(--pad) 0;display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px}
.ab-story .lab{color:var(--muted)}
.ab-story p{margin:0 0 14px;font-size:15px;line-height:1.7;max-width:33em}
.ab-story p.big{font-size:clamp(20px,2.1vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.3;margin-bottom:22px;color:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:22px}
.step{background:var(--wash);padding:30px 28px 34px;min-height:220px;display:flex;flex-direction:column;gap:12px}
.step .n{font-size:10.5px;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums}
.step h3{margin:auto 0 0;font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.25}
.step p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.ab-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:var(--max);margin:0 auto;padding:22px var(--pad) 0}
.ab-photos div{aspect-ratio:3/4;overflow:hidden;background:var(--wash)}
.ab-cta{max-width:var(--max);margin:0 auto;padding:72px var(--pad) 84px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--hair)}
.ab-cta h2{margin:0;font-size:clamp(19px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:1.05}
/* ---------- контакти ---------- */
.ct{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 84px;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:64px;align-items:start}
.ct-title{margin:0 0 18px;font-size:clamp(24px,3.6vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.ct-lead{margin:0 0 34px;font-size:15px;line-height:1.65;color:var(--muted);max-width:52ch}
.ct-list{border-top:1px solid var(--hair)}
.ct-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.ct-row .lab{color:var(--muted)}
.ct-row b{font-size:17px;font-weight:600;letter-spacing:-.02em;display:block}
.ct-row span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.ct-row a.big{font-size:17px;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--hair)}
.ct-row a.big:hover{color:var(--herb);border-color:var(--herb)}
.ct-row a.in{border-bottom:1px solid var(--hair)}
.ct-body{margin-top:32px}
.form{background:var(--wash);padding:clamp(24px,3vw,44px)}
.form h2{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.form>p{margin:0 0 22px;font-size:13.5px;color:var(--muted)}
.form-msg{margin:0 0 18px;padding:12px 14px;font-size:13.5px;background:var(--paper);border-left:2px solid var(--herb)}
.form-msg.err{border-left-color:var(--error);color:var(--error)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{font:inherit;font-size:14px;padding:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:0;transition:border-color .15s}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.form .btn{margin-top:6px;background:var(--ink);color:var(--paper);border-color:var(--ink);cursor:pointer}
.form .btn:hover{background:var(--herb);border-color:var(--herb)}
.form small{display:block;margin-top:14px;font-size:12px;color:var(--muted);line-height:1.5}
.form small a{border-bottom:1px solid var(--hair)}
.search-form{display:flex;gap:10px;margin-top:20px;max-width:460px;flex-wrap:wrap}
.search-form input{flex:1;min-width:0;font:inherit;padding:14px;border:1px solid var(--line);border-radius:0}
.search-form input:focus{border-color:var(--ink)}
/* ---------- хлібні крихти ---------- */
.crumbs{max-width:var(--max);margin:0 auto;padding:18px var(--pad) 0;display:flex;gap:10px;flex-wrap:wrap;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crumbs a:hover{color:var(--herb)}
.crumbs span::before{content:"/";margin-right:10px;color:var(--hair)}
.crumbs span:first-child::before{content:none}
.crumbs b{color:var(--ink);font-weight:600}
/* ---------- каталог ---------- */
.freset{display:block;margin-top:18px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.freset:hover{color:var(--herb)}
.cat-head{max-width:var(--max);margin:0 auto;padding:34px var(--pad) 0}
.cat-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
/* Кнопка фільтрів і сортування — одна група керування. На ПК кнопки немає
   (фільтри стоять сайдбаром), тож лишається сам селект. */
.cat-tools{display:flex;align-items:center;gap:16px;margin-left:auto}
.cat-head h1{margin:0;font-size:clamp(24px,3.6vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.cat-head .count{margin-left:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);vertical-align:middle}
.cat-head p{margin:14px 0 0;font-size:15px;line-height:1.65;color:var(--muted);max-width:33em}
.subcats{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.subcats a{display:inline-flex;align-items:center;min-height:38px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--hair);transition:border-color .15s,color .15s}
.subcats a:hover{border-color:var(--ink)}
.subcats a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.shop{max-width:var(--max);margin:0 auto;padding:36px var(--pad) 84px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.fgroup{padding:14px 0;border-bottom:1px solid var(--hair)}
.fgroup:first-child{padding-top:0}
.fgroup .lab{display:flex;justify-content:space-between;color:var(--ink);margin-bottom:14px}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.flist li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.flist li a:hover{color:var(--herb)}
.flist li.on a{font-weight:600;color:var(--herb)}
.flist li small{color:var(--muted);font-variant-numeric:tabular-nums}
.sizes-f{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sizes-f a{display:block;text-align:center;padding:9px 0;border:1px solid var(--hair);font-size:10.5px;font-weight:600;letter-spacing:.08em;transition:border-color .15s}
.sizes-f a:hover{border-color:var(--ink)}
.sizes-f a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.price-f{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.price-f input{width:100%;font:inherit;font-size:13.5px;padding:9px 10px;border:1px solid var(--hair);background:var(--paper);border-radius:0;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.price-f input::-webkit-outer-spin-button,.price-f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.price-f i{font-style:normal;color:var(--muted)}
.price-bar{position:relative;height:2px;background:var(--hair);margin:16px 4px 10px}
.price-bar b{position:absolute;top:0;bottom:0;left:var(--from,0%);right:var(--to,0%);background:var(--ink)}
.price-bar span{position:absolute;top:50%;left:var(--at,0%);width:12px;height:12px;background:var(--paper);border:1.5px solid var(--ink);transform:translate(-50%,-50%)}
.price-go{margin-top:10px;width:100%;padding:9px 0;border:1px solid var(--hair);background:transparent;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,background .15s}
.price-go:hover{border-color:var(--ink)}
.swatches-f{display:flex;gap:8px;flex-wrap:wrap}
.swatches-f a{width:22px;height:22px;border:1px solid var(--hair);position:relative;display:block;background:var(--swatch,var(--wash))}
.swatches-f a.on{outline:1.5px solid var(--ink);outline-offset:2px}
.toggle{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.toggle i{width:34px;height:18px;border:1px solid var(--ink);position:relative;display:inline-block;flex:none}
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--ink);transition:left .15s}
.toggle.on i::after{left:18px;background:var(--herb)}
.woocommerce-ordering{display:flex;align-items:center;gap:10px;margin:0}
/* Тулбар каталогу — два тихі текстові контроли. Рамка навколо «Фільтрів» і
   підкреслення під сортуванням читалися як два різні елементи керування з
   різних наборів; тепер обидва — просто текст із мікро-іконкою. */
.woocommerce-ordering select{
  font:inherit;font-size:10.5px;font-weight:500;letter-spacing:.12em;line-height:1.2;
  text-transform:uppercase;min-height:34px;border:0;background:transparent;
  padding:0 18px 0 0;appearance:none;-webkit-appearance:none;color:var(--ink);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 8px) 15px,calc(100% - 4px) 15px;background-size:4px 4px;background-repeat:no-repeat;
  transition:color .18s;
}
.woocommerce-ordering select:hover{color:var(--herb)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:44px;padding-top:22px;border-top:1px solid var(--hair);font-size:12px;color:var(--muted);flex-wrap:wrap}
.pages-n{display:flex;gap:4px;align-items:center}
.pages-n a,.pages-n span,.nav-links .page-numbers{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;font-size:12px;font-variant-numeric:tabular-nums}
.pages-n a:hover{border-color:var(--hair)}
.pages-n .current,.nav-links .current{border-color:var(--ink);font-weight:600}
.pages-n a.nx{padding:0 14px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.seo{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 84px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px}
.seo h2{margin:0 0 12px;font-size:19px;font-weight:700;letter-spacing:-.025em}
.seo p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--ink);max-width:36em}
.no-results{padding:60px 0 20px;text-align:center}
.no-results h2{margin:0 0 10px;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.no-results p{margin:0 auto 22px;color:var(--muted);max-width:44ch}
/* ---------- картка товару ---------- */
.prod{max-width:var(--max);margin:0 auto;padding:26px var(--pad) 64px;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:start}
.gallery{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px}
.gallery-empty,.gallery[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumb{aspect-ratio:3/4;overflow:hidden;background:var(--wash);border:1px solid transparent;cursor:pointer;position:relative;padding:0;transition:border-color .15s}
.thumb:hover{border-color:var(--hair)}
.thumb.on{border-color:var(--ink)}
.thumb img{pointer-events:none}
.thumb .vid-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.thumb .vid-mark::before{content:"";width:0;height:0;border-left:11px solid var(--paper);border-top:7px solid transparent;border-bottom:7px solid transparent;}
.stage{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--wash);touch-action:pan-y}
.track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.slide{flex:0 0 100%;height:100%;position:relative;overflow:hidden}
.slide img,.slide video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.stage .tag{top:14px;left:14px;z-index:3}
.arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;background:rgba(255,255,255,.92);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .15s;opacity:0}
.stage:hover .arr{opacity:1}
.arr:focus-visible{opacity:1}
.arr:hover{background:var(--paper)}
.arr::before{content:"";width:9px;height:9px;border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)}
.arr.prev{left:14px}
.arr.prev::before{transform:translateX(2px) rotate(-45deg)}
.arr.next{right:14px}
.arr.next::before{transform:translateX(-2px) rotate(135deg)}
.counter{position:absolute;right:14px;bottom:14px;z-index:3;background:rgba(255,255,255,.92);padding:6px 10px;font-size:10.5px;font-weight:600;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.gal-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:none;justify-content:center;gap:6px}
.gal-dots i{width:6px;height:6px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.25)}
.gal-dots i.on{background:var(--ink);border-color:var(--ink)}
.summary{position:sticky;top:24px}
.summary .lab{color:var(--muted)}
.summary .lab a:hover{color:var(--herb)}
.summary h1{margin:10px 0 0;font-size:clamp(22px,2.6vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.price-row{display:flex;align-items:baseline;gap:12px;margin:16px 0 0;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.price-row ins{text-decoration:none;font-size:22px;font-weight:700;letter-spacing:-.02em}
.price-row del{color:var(--muted);font-size:14px}
.price-row .disc{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:4px 8px}
.summary .excerpt{margin:16px 0 0;font-size:14px;line-height:1.65;color:var(--muted);max-width:44ch}
.summary .excerpt p{margin:0 0 8px}
.variations .opt,.opt{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.opt .lab{display:flex;justify-content:space-between;gap:12px;color:var(--ink);margin-bottom:12px;flex-wrap:wrap}
.opt .lab a{color:var(--muted);font-weight:500;border-bottom:1px solid var(--hair)}
.opt .lab a:hover{color:var(--herb);border-color:var(--herb)}
.opt .lab i{font-style:normal;color:var(--muted);font-weight:500;letter-spacing:.06em;text-transform:none;font-size:12px}
.colors{display:flex;gap:10px;flex-wrap:wrap}
.colors button,.colors a,.colors span{display:block;width:30px;height:30px;border:1px solid var(--hair);cursor:pointer;padding:0;background:var(--swatch,var(--wash))}
.colors button.on,.colors span.on{outline:1.5px solid var(--ink);outline-offset:3px}
.colors button:hover,.colors a:hover{outline:1px solid var(--muted);outline-offset:3px}
.colors button.out{opacity:.4;cursor:not-allowed}
.opt-color .lab i{text-transform:none;letter-spacing:0;font-size:12px}
.szs{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:8px}
.szs button{display:block;text-align:center;padding:13px 0;border:1px solid var(--hair);font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;background:transparent;transition:border-color .15s;position:relative}
.szs button:hover{border-color:var(--ink)}
.szs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.szs button.out{color:var(--muted);cursor:not-allowed}
.szs button.out::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1px;background:var(--muted);transform:rotate(-14deg)}
.reset_variations{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair)}
.stock{margin-top:12px;font-size:12px;color:var(--muted)}
.stock b{color:var(--herb);font-weight:600}
.stock b::before{content:"";display:inline-block;width:6px;height:6px;background:var(--herb);margin-right:8px;vertical-align:middle}
.stock.low b,.stock.low b::before{color:var(--warn)}
.stock.low b::before{background:var(--warn)}
/* Розпроданий рядок мав зелену крапку — сигнал протилежного значення. */
.stock.out-of-stock b{color:var(--error)}
.stock.out-of-stock b::before{background:var(--error)}
.stock.out-of-stock{color:var(--ink)}
/* Блок розпроданого: клас був у розмітці variable.php без жодного правила. */
.sold-out{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)}
.sold-out .stock{margin-top:0}
.sold-out p{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:34em}
.sold-out .btn{margin-top:16px}
/* Блок варіації дублює ціну й наявність; variation.js відкриває його
   інлайновим display:block, тому потрібен !important. */
.single_variation_wrap .woocommerce-variation{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rk-stock p{margin:0}
.rk-stock .stock{margin:0}
.buy,.variations_button{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;margin-top:22px;align-items:stretch}
.qty-box{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;border:1px solid var(--ink);height:50px;align-items:center;text-align:center}
.qty-box button{border:0;background:transparent;font:inherit;font-size:19px;line-height:1;color:var(--muted);cursor:pointer;height:100%;transition:color .15s}
.qty-box button:hover{color:var(--ink)}
.qty-box button:disabled{opacity:.3;cursor:not-allowed}
.qty-box input{border:0;background:transparent;font:inherit;font-weight:600;text-align:center;width:100%;font-variant-numeric:tabular-nums;-moz-appearance:textfield;padding:0}
.qty-box input::-webkit-outer-spin-button,.qty-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-fixed{display:flex;align-items:center;justify-content:center;border:1px solid var(--ink);height:50px;font-weight:600}
.single_add_to_cart_button{display:flex;align-items:center;justify-content:center;height:auto;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:12px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out;min-height:50px;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.single_add_to_cart_button:hover{background:var(--herb);border-color:var(--herb)}
/* Неактивний стан — контурний, щоб не читався як робоча кнопка. */
.single_add_to_cart_button.disabled,.single_add_to_cart_button:disabled{
  background:transparent;border-color:var(--hair);color:var(--muted);cursor:not-allowed;
}
.single_add_to_cart_button.disabled:hover,.single_add_to_cart_button:disabled:hover{
  background:transparent;border-color:var(--hair);
}
.oneclick{display:flex;align-items:center;justify-content:center;min-height:50px;width:100%;text-align:center;margin-top:10px;padding:14px;border:1px solid var(--ink);background:transparent;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.oneclick:hover{background:var(--herb);border-color:var(--herb);color:var(--paper)}
.acc{margin-top:24px;border-top:1px solid var(--hair)}
.acc details{border-bottom:1px solid var(--hair)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:400;color:var(--muted);font-size:19px;line-height:1}
.acc details[open] summary::after{content:"–"}
.acc .body{padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--ink);overflow-x:auto;-webkit-overflow-scrolling:touch}
.acc .body p{margin:0 0 10px;max-width:50ch}
.acc .body ul{margin:0 0 10px;padding-left:18px}
.acc .body a{border-bottom:1px solid var(--hair)}
.acc .body a:hover{color:var(--herb);border-color:var(--herb)}
.meas{width:max-content;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:4px;min-width:100%}
.meas th{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 8px 8px 0;border-bottom:1px solid var(--hair)}
.meas td{padding:8px 8px 8px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--ink)}
.meas td:first-child{font-weight:600}
.meas-note{margin-top:10px}
.sku{margin-top:18px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pterms{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pterm{padding:clamp(24px,3vw,44px) clamp(24px,2.6vw,38px)}
.pterm:nth-child(odd){background:var(--wash)}
.pterm:nth-child(even){background:var(--wash-2)}
.pterm .lab{color:var(--herb);margin-bottom:14px}
.pterm h3{margin:0 0 8px;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.pterm p{margin:0;color:var(--ink);font-size:13.5px;max-width:32ch}
.pterm a{border-bottom:1px solid var(--hair)}
.pterm a:hover{color:var(--herb);border-color:var(--herb)}
.related{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 84px}
a.bag-name:hover{color:var(--herb)}
.btn-go,.btn-alt{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;
  padding:16px;border:1px solid var(--ink);
  font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.btn-go{margin-top:22px;background:var(--ink);color:var(--paper)}
.btn-go:hover{background:var(--herb);border-color:var(--herb)}
.btn-alt{margin-top:10px;background:transparent;color:var(--ink)}
.btn-alt:hover{background:var(--herb);border-color:var(--herb);color:var(--paper)}
.empty{max-width:var(--max);margin:0 auto;padding:84px var(--pad);text-align:center}
.empty h2{margin:0 0 12px;font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.empty p{margin:0 auto 26px;font-size:15px;color:var(--muted);max-width:44ch}
.co-grid label,.fld label{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.co-grid label .required,.fld label em{color:var(--herb);text-decoration:none;font-style:normal}
.co-grid input[type=text],.co-grid input[type=tel],.co-grid input[type=email],.co-grid input[type=password],.co-grid input[type=number],.co-grid select,.co-grid textarea,
.fld input,.fld select,.fld textarea,
.co-sec textarea,.co-sec input[type=text]{
  font:inherit;font-size:14px;padding:14px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);
  border-radius:0;transition:border-color .15s;width:100%;
}
.co-grid input:focus,.co-grid select:focus,.co-grid textarea:focus,.fld input:focus,.fld select:focus,.fld textarea:focus,.co-sec textarea:focus{border-color:var(--ink)}
.co-grid select,.fld select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.woocommerce-invalid input,.woocommerce-invalid select{border-color:var(--error)}
.fld .err{font-size:12px;color:var(--error);display:none}
.opts,ul.opts{display:flex;flex-direction:column;gap:10px;list-style:none;margin:16px 0 0;padding:0}
.ship-empty{margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.woocommerce-terms-and-conditions-wrapper .chk{margin-top:14px}
.woocommerce-terms-and-conditions-wrapper{margin-top:8px}
.woocommerce-privacy-policy-text p{font-size:12px;color:var(--muted);margin:14px 0 0}
.validate-required.woocommerce-invalid label{color:var(--error)}
/* ---------- повідомлення Woo ---------- */
/* Плашка тримає бічні поля контейнера; кнопка в рядку, без float. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  width:calc(100% - var(--pad) * 2);max-width:calc(var(--max) - var(--pad) * 2);
  margin:20px auto 0;padding:14px 18px;list-style:none;
  background:var(--wash);border-left:2px solid var(--herb);font-size:13.5px;
}
/* Плашка з кнопкою — рядком; список помилок лишається списком. */
.woocommerce-message,.woocommerce-info{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;
}
.woocommerce-error{display:block;border-left-color:var(--error);color:var(--error)}
.woocommerce-error li{margin:0 0 6px;padding:0}
.woocommerce-error li:last-child{margin-bottom:0}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{border-bottom:1px solid var(--hair)}
.woocommerce-message .button,.woocommerce-info .button{
  float:none;flex:none;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid var(--ink);
}
.blockUI.blockOverlay{background:var(--paper)!important;opacity:.5!important}
.is-busy{opacity:.5;pointer-events:none}
/* ---------- модалка «купити в один клік» ---------- */
.oc-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.oc-backdrop{position:absolute;inset:0;background:rgba(14,14,12,.55)}
.oc-box{position:relative;background:var(--paper);width:min(420px,100%);padding:36px 34px 34px;max-height:90vh;overflow:auto}
.oc-box h2{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.oc-box>p{margin:0 0 22px;font-size:13.5px;color:var(--muted)}
.oc-box .fld{margin-bottom:14px}
.oc-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:0}
.oc-x::before,.oc-x::after{content:"";position:absolute;left:8px;top:14px;width:14px;height:1.5px;background:currentColor}
.oc-x::before{transform:rotate(45deg)}
.oc-x::after{transform:rotate(-45deg)}
.oc-msg{margin:14px 0 0;font-size:13.5px;min-height:18px}
.oc-msg.err{color:var(--error)}
.oc-msg.ok{color:var(--herb)}
/* ---------- адаптив ---------- */
@media (max-width:1080px){
  :root{--pad:24px}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-lead{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ban{height:440px}
  .ig{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg{grid-template-columns:minmax(0,1fr);gap:36px}
  .pnav{position:static;display:flex;flex-wrap:wrap;gap:6px 18px}
  .pnav .lab{width:100%}
  .pnav a{border-bottom:0;padding:6px 0}
  .pnav a.on{padding-left:0}
  .ab-story{grid-template-columns:minmax(0,1fr);gap:20px}
  .ct{grid-template-columns:minmax(0,1fr);gap:40px}
  .shop{grid-template-columns:minmax(0,1fr);gap:28px}
  .filters{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
  .seo{grid-template-columns:minmax(0,1fr);gap:12px}
  .prod{grid-template-columns:minmax(0,1fr);gap:36px}
  .pterms{grid-template-columns:minmax(0,1fr)}
  .summary{position:static}
}
@media (max-width:760px){
  :root{--pad:16px}
  .nav{display:none}
  .nav-toggle{display:block}
  .mobile-nav[data-open]{display:block}
  /* Логотип ліворуч, кошик і бургер притиснуті до правого краю. */
  .head-in{height:54px;grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .tools{justify-content:flex-end;gap:16px}
  /* Utility-рядок в один рядок: лишається доставка й обмін. */
  .util-in{flex-wrap:nowrap;justify-content:center;padding:7px var(--pad)}
  .util-in span:first-child{display:none}
  /* Кнопка фільтрів і сортування — по краях контейнера. */
  .cat-tools{flex:1 0 100%;margin-left:0;justify-content:space-between;gap:12px}
  /* Картка: назва й ціна в один рядок на телефоні не працюють — назва
     переноситься на два рядки, ціна тулиться до правого краю й читається
     як чужа. Складаємо стовпчиком. */
  .card-row{flex-direction:column;gap:3px;padding-top:11px}
  .card-price,.card-was{text-align:left}
  .card-sub{padding-top:5px;flex-wrap:wrap;justify-content:flex-start;gap:2px 12px}
  /* Шапка каталогу на телефоні: рейка, заголовок, керування й сітка мають
     читатися як один блок, а не як чотири окремі екрани. */
  .shop{padding-top:8px}
  .cat-head{padding-top:16px}
  .cat-top{gap:10px 16px}
  .catrail{margin-top:14px}
  .hero{height:520px;min-height:0}
  .hero-copy{padding-bottom:36px}
  .sec{padding:48px 0}
  .cat-label{padding:12px 14px}
  .pair{grid-template-columns:minmax(0,1fr)}
  .ban{height:380px}
  .about{grid-template-columns:minmax(0,1fr)}
  .about-media{height:auto;aspect-ratio:3/4}
  .facts{grid-template-columns:minmax(0,1fr);gap:12px}
  .ig{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-hero{grid-template-columns:minmax(0,1fr)}
  .ab-media{height:auto;aspect-ratio:3/4}
  .steps,.ab-photos{grid-template-columns:minmax(0,1fr)}
  .kv th{width:110px}
  .ct-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .filters{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .thumbs{flex-direction:row;order:2;overflow-x:auto}
  .thumb{flex:0 0 60px}
  .arr{opacity:1}
  .gal-dots{display:flex}
  .counter{display:none}
  .buy,.variations_button{grid-template-columns:100px minmax(0,1fr)}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:26px}
  .foot-base{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
/* ==========================================================================
   РЕЙКА КАТЕГОРІЙ (мобайл)
   ========================================================================== */
.catrail{display:none}
@media (max-width:1080px){
  /* Категорії рядком над заголовком: на мобільному сайдбар — шторка, тож
     перелінковка мусить лишитися на самій сторінці. Рейка тримає градієнт
     праворуч, бо сам ряд їде під нею. */
  .catrail{
    display:block;position:relative;margin:18px 0 0;
  }
  .catrail-row{
    display:flex;gap:8px;overflow-x:auto;
    padding:2px var(--pad);
    scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .catrail-row::-webkit-scrollbar{display:none}
  .catrail-chip{
    flex:none;scroll-snap-align:start;
    display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:9px 14px;
    border:1px solid var(--hair);color:var(--ink);
    font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    white-space:nowrap;transition:border-color .15s,background .15s,color .15s;
  }
  .catrail-chip small{color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums;letter-spacing:0}
  .catrail-chip:hover{border-color:var(--ink)}
  .catrail-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .catrail-chip.on small{color:var(--paper);opacity:.6}
  .catrail::after{
    content:"";position:absolute;top:0;bottom:0;right:0;width:28px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),var(--paper));
  }
}
/* Filter Everything на ≤768px ставить `body #main{display:flex;flex-direction:column}`
   — сумісність із чужими темами. Нам це ламає розмітку: наші контейнери
   центруються через `margin-inline:auto`, а авто-поля у флексі скасовують
   розтягування, тож кожен блок стискається до ширини вмісту. Повертаємо потік. */
@media (max-width:768px){
  body #main{display:block}
}
/* ==========================================================================
   ПОП-АП «ДОДАНО В КОШИК»
   ========================================================================== */
/* Woo дописує після кнопки посилання «Переглянути кошик» — з поп-апом воно
   зайве й ламає рядок під кнопкою. */
.added_to_cart{display:none}
.cartpop{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.cartpop-back{position:absolute;inset:0;background:rgba(14,14,12,.45)}
.cartpop-panel{
  position:relative;width:100%;max-width:420px;max-height:calc(100vh - var(--pad) * 2);
  overflow-y:auto;background:var(--paper);border:1px solid var(--hair);padding:22px 24px 24px;
}
.cartpop-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.cartpop-close{position:relative;width:30px;height:30px;flex:none;border:0;background:transparent;cursor:pointer;color:var(--muted)}
.cartpop-close::before,
.cartpop-close::after{content:"";position:absolute;left:8px;top:14px;width:14px;height:1.5px;background:currentColor}
.cartpop-close::before{transform:rotate(45deg)}
.cartpop-close::after{transform:rotate(-45deg)}
.cartpop-close:hover{color:var(--ink)}
.cartpop-item{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
.cartpop-media{aspect-ratio:3/4;background:var(--wash);overflow:hidden}
.cartpop-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.cartpop-name{font-size:14px;font-weight:500;line-height:1.3}
.cartpop-meta{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cartpop-meta:empty{display:none}
.cartpop-price{font-size:14px;font-weight:600}
.cartpop-price del{display:none}
.cartpop-price ins{text-decoration:none}
.cartpop-sum{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.cartpop-sum .rk-cart-sum{font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
.cartpop-act{display:flex;flex-direction:column}
.cartpop-more{
  margin-top:12px;padding:0;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:underline;text-underline-offset:4px;
}
.cartpop-more:hover{color:var(--herb)}
body.rk-pop-open{overflow:hidden}
@media (max-width:760px){
  .cartpop{align-items:flex-end;padding:0}
  .cartpop-panel{max-width:none;max-height:86vh;border:0;border-top:1px solid var(--hair);padding:18px var(--pad) 24px}
}
.field input:focus-visible,.search-form input:focus-visible,.promo-form input:focus-visible,
.fld input:focus-visible,.co-grid input:focus-visible,.co-grid select:focus-visible,
.co-grid textarea:focus-visible{outline:2px solid var(--herb);outline-offset:2px}
/* «Скинути вибір» — єдина текстова дія теми без стану. */
.reset_variations:hover{color:var(--herb);border-color:var(--herb)}
/* Посилання в плашках Woo лишалися без ховера. */
.woocommerce-message a:hover,.woocommerce-info a:hover,
.woocommerce-message .button:hover,.woocommerce-info .button:hover{color:var(--herb);border-color:var(--herb)}
/* Хрестик модалки «один клік» був іншого розміру, ніж у поп-апі кошика. */
.oc-x:hover{color:var(--ink)}
/* У поп-апі кошика верхнє поле кнопки підібране під панель кошика — тут зайве. */
.cartpop-act .btn-go{margin-top:14px}
/* Ціну варіації Woo віддає власною розміткою без `<ins>`, під яке написані
   стилі, — після вибору розміру кегль падав з 22px до 14px. */
.price-row .price{display:contents}
.price-row .woocommerce-Price-amount{font-size:22px;font-weight:700;letter-spacing:-.02em}
.price-row del,.price-row del .woocommerce-Price-amount{font-size:14px;font-weight:400;color:var(--muted)}
/* Недоступні розміри й кольори не мають ловити тап. */
.szs button.out,.colors button.out{pointer-events:none}
/* Таблиця замірів може мати до семи колонок із нерозривними заголовками. */
.meas th,.meas td{white-space:nowrap}
/* Підпис кнопки містить ціну — на вузькому екрані це два-три рядки. */
/* Довгі назви й артикули в вузьких колонках. */
.summary h1,.bag-name,.sum-item strong,.opt-row b{overflow-wrap:anywhere}
/* Поля, що вміють бути ширшими за свою колонку. */
.co-grid select,.co-grid input,.co-grid textarea,.fld select,.fld input,
.qty-box input,.promo-form input{min-width:0;max-width:100%}
@media (max-width:1080px){
  /* На планшеті галерея розтягувалася на всю ширину й блок купівлі йшов під згин. */
  .prod{justify-items:center}
  .gallery,.summary{width:100%;max-width:560px}
}
/* Клікабельні елементи, що лишалися без стану. */
.swatches-f a:hover{outline:1px solid var(--muted);outline-offset:2px}
.toggle:hover i{border-color:var(--herb)}
/* ---------- розміри на фото картки ----------
   Грід із рівних комірок: будь-яка кількість розмірів лишається в одному рядку. */
.card-sizes{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;
  background:rgba(255,255,255,.4);
  font-size:9.5px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1;
}
.card-sizes span{
  display:flex;align-items:center;justify-content:center;
  min-width:0;padding:5px 2px;overflow:hidden;
  background:rgba(255,255,255,.92);color:var(--ink);
}
.card-sizes span.out{background:rgba(255,255,255,.6);color:var(--muted);text-decoration:line-through}
/* ---------- довантаження каталогу ---------- */
.loadmore{display:flex;justify-content:center;margin-top:34px}
.loadmore-btn{gap:10px}
.loadmore-left{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;
  padding:0 5px;background:var(--wash-2);color:var(--muted);
  font-size:10.5px;font-variant-numeric:tabular-nums;letter-spacing:0;
}
.loadmore-btn:hover .loadmore-left{background:transparent;color:inherit}
.loadmore-btn.is-busy{opacity:.6;pointer-events:none}
/* Клітинки «Доставка / Оплата / Обмін» ведуть на свої сторінки. */
.facts a{display:block;color:inherit;transition:color .18s}
.facts a:hover b{color:var(--herb)}
/* Пошук у мобільному меню. */
.mobile-nav .search-form{margin:0 0 22px}
.mobile-nav .search-form input{width:100%}
/* Підсвічування рядка «Оберіть розмір», коли людина оминула вибір. */
.rk-nudge{animation:rk-nudge 1.4s ease-out}
@keyframes rk-nudge{0%,100%{opacity:1}20%,60%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .rk-nudge{animation:none;outline:2px solid var(--herb);outline-offset:4px}
}
/* ---------- «Купити в один клік»: що саме купують ---------- */
.oc-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;margin:18px 0 4px;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.oc-item__media{aspect-ratio:3/4;background:var(--wash);overflow:hidden}
.oc-item__info{display:flex;flex-direction:column;gap:5px;min-width:0}
.oc-item__name{font-size:13.5px;font-weight:400;line-height:1.35}
.oc-item__meta{font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.oc-item__meta:empty{display:none}
.oc-item__price{font-size:13.5px;font-weight:500}
.oc-done__msg{margin:18px 0 0;font-size:15px;line-height:1.6}
/* Woo ховає посилання через visibility:hidden і лишає його висоту в потоці. */
.reset_variations[style*="visibility: hidden"],
.reset_variations[style*="visibility:hidden"]{display:none}
/* Пошук на сторінці 404. */
.empty .search-form{max-width:420px;margin:0 auto 22px}
@media (max-width:760px){
  /* Має йти після базового .card-sizes: вага однакова, вирішує порядок. */
  .card-sizes{left:6px;right:6px;bottom:6px;letter-spacing:0}
  .card-sizes span{padding:4px 1px}
}