:root {
  --ink: #161616;
  --ink-2: #4a4a4a;
  --muted: #8a8a8a;
  --line: #e7e5e1;
  --bg: #ffffff;
  --bg-2: #f6f4f1;
  --accent: #5b7f95;       /* PANTONE 5415 C — фірмовий колір */
  --accent-dark: #4a6a7e;
  --danger: #a33a2c;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", system-ui, -apple-system, sans-serif;
  --pad: clamp(16px, 2.2vw, 32px);
  --header-h: 72px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 300 14px/1.6 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0; }
h4 { font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }
#main { min-height: 70vh; outline: none; }

.eyebrow { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 28px; background: var(--accent); color: #fff;
  font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  transition: background .2s;
}
.btn:hover { background: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link-u { border-bottom: 1px solid currentColor; padding-bottom: 2px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--header-h);
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
  transition: background .3s, color .3s, border-color .3s;
}
.header__inner { height: 100%; display: flex; align-items: center; gap: 36px; padding: 0 var(--pad); }
.header--hero:not(.is-scrolled) { background: transparent; border-color: transparent; }
.header--hero:not(.is-scrolled)::before {
  content: ""; position: absolute; inset: 0 0 -50px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.55) 60%, transparent);
}
/* Логотип — оригінальні файли бренду (прозорий PNG, колір PMS 5415 C), завжди у фірмовому кольорі. */

.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--accent); transition: color .2s; }
.logo:hover { color: var(--accent-dark); }
.logo__m { width: 38px; height: 38px; flex-shrink: 0; }
.logo__text { display: flex; flex-direction: column; }
.logo__name { font: 600 26px/1 var(--serif); letter-spacing: .22em; }
.logo__sub { font: 500 8px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: .8; margin-top: 5px; }
.logo--footer .logo__m { width: 34px; height: 34px; }
.logo--footer .logo__name { font-size: 22px; }

.nav { display: flex; gap: 26px; }
.d-nav { display: contents; }
.mnav { display: none; }
.d-nav a { font-size: 12px; letter-spacing: .1em; position: relative; padding: 6px 0; white-space: nowrap; }
.d-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .25s; }
.d-nav a:hover::after, .d-nav a.is-active::after { right: 0; }

.tools { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.tool { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; position: relative; }
.tool svg, .search__bar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.currency { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .1em; }
.currency button { opacity: .55; padding: 4px 0; }
.currency button.is-active { opacity: 1; border-bottom: 1px solid currentColor; }
.currency span { opacity: .4; }
/* перемикач мови UA / EN — у тому ж стилі, що й валюта */
.langsw { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .1em; }
.langsw a { opacity: .55; padding: 4px 0; color: inherit; text-decoration: none; }
.langsw a:hover { opacity: .85; }
.langsw a.is-active { opacity: 1; border-bottom: 1px solid currentColor; cursor: default; }
.langsw span { opacity: .4; }
/* шапка: мова й валюта одним перемикачем «UA · ₴» з панеллю вибору */
.locale { position: relative; }
.locale__btn { display: flex; align-items: center; gap: 4px; font-size: 12px; letter-spacing: .1em; padding: 6px 0; white-space: nowrap; }
.locale__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .2s; }
.locale__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.locale__panel { position: absolute; right: -14px; top: calc(100% + 12px); z-index: 60; min-width: 200px; padding: 16px 14px 10px; background: #fff; color: var(--ink); border: 1px solid var(--line, rgba(0,0,0,.1)); box-shadow: 0 14px 40px -18px rgba(0,0,0,.25); }
.locale__h { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.locale__h + .locale__list { margin-bottom: 14px; }
.tools .locale__list { display: grid; gap: 0; letter-spacing: .04em; font-size: 13px; }
.tools .locale__list a, .tools .locale__list button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 0; opacity: .7; border: 0; cursor: pointer; }
.tools .locale__list a:hover, .tools .locale__list button:hover { opacity: 1; }
.tools .locale__list .is-active { opacity: 1; border: 0; cursor: default; font-weight: 500; }
.tools .locale__list .is-active::after { content: "✓"; margin-left: auto; color: var(--accent); }
.tools .locale__list b { font-weight: 500; width: 14px; }
.tools .locale__list span { opacity: 1; }
.bag-count {
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-grid; place-items: center; background: var(--accent); color: #fff; font-size: 10px; font-weight: 500;
}
.bag-count.is-empty { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .6; }
.bag-count.bump { animation: bump .4s; }
@keyframes bump { 50% { transform: scale(1.35); } }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; font-size: 16px; }
.burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.burger span { width: 22px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .2s; }
/* Відкрите меню: верхня й нижня смужки складаються в хрестик, середня зникає */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; min-height: 560px; max-height: 1000px; }
.hero__tile { position: relative; overflow: hidden; color: #fff; }
.hero__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hero__tile:hover img { transform: scale(calc(var(--z, 1) * 1.04)); }
/* Кадр з адмінки: --z — збільшення, точка фокусу задана в style (object-position і transform-origin) */
.hero__tile img, .card__media img, .pdp__ph img, .colhead__img, .coltile img, .dnav-col__img img { transform: scale(var(--z, 1)); }
.hero__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.45)); }
.hero__caption { position: absolute; left: var(--pad); bottom: 40px; z-index: 1; }
.hero__caption .eyebrow { color: #fff; opacity: .9; }
.hero__caption h2 { font-size: clamp(30px, 3.4vw, 50px); margin: 8px 0 14px; }
.hero__caption .link-u { color: #fff; }

/* ---------- Sections ---------- */
.section { padding: 72px var(--pad); }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.section__head h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 8px; }


/* ---------- Product grid ---------- */
.grid { display: grid; gap: 40px 8px; grid-template-columns: repeat(var(--cols, 4), 1fr); }
.card { position: relative; }
.card__media { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-2); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform .8s; }
.card__media img.alt { opacity: 0; }
.card:hover .card__media img.alt { opacity: 1; }
.card:hover .card__media img:only-of-type { transform: scale(calc(var(--z, 1) * 1.03)); }
.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; color: var(--ink);
  font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 6px 8px;
}
.badge--soldout { background: var(--ink); color: #fff; }
/* знижки: стара ціна закреслена, нова й мітка «−%» — теплим акцентом */
.badge--sale { background: var(--sale, #a2492a); color: #fff; letter-spacing: .12em; }
.price-old { color: var(--muted); text-decoration-thickness: 1px; margin-right: 2px; }
.price-sale { color: var(--sale, #a2492a); }
.pdp__sale { display: inline-block; margin-left: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sale, #a2492a); vertical-align: 2px; }
.line__price { text-align: right; }
.line__price .price-old { display: block; font-size: 11px; margin: 0; }
/* промокод в оформленні */
.promo-box { padding: 6px 0 2px; }
.promo-box > .linkish, #promoRemove { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#promoRemove { font-size: 11px; color: var(--muted); margin-left: 4px; }
.promo-form { display: flex; gap: 8px; margin-top: 8px; }
.promo-form input { flex: 1; min-width: 0; border: 1px solid var(--line); padding: 10px 12px; font: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; background: #fff; }
.promo-form input::placeholder { text-transform: none; letter-spacing: 0; }
.promo-msg { font-size: 12px; margin: 6px 0 0; color: var(--muted); min-height: 0; }
.promo-msg:empty { display: none; }
.promo-msg.is-err { color: var(--danger); }
.summary .promo-row { color: var(--sale, #a2492a); }
.card__quick {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; background: rgba(255,255,255,.95);
  display: flex; justify-content: center; gap: 4px; padding: 8px; opacity: 0; transform: translateY(8px); transition: .25s;
}
.card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }
.card__quick button { min-width: 36px; height: 30px; font-size: 11px; letter-spacing: .08em; }
.card__quick button:hover { background: var(--ink); color: #fff; }
.card__quick button[disabled] { color: #c4c4c4; text-decoration: line-through; pointer-events: none; }
.card__info { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 12px; }
.card__info a:hover { color: var(--accent); }
.card__price { white-space: nowrap; }

/* ---------- Made to measure banner ---------- */
.mtm { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; align-items: stretch; background: var(--bg-2); }
.mtm__img { min-height: 520px; }
.mtm__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.mtm__text { padding: clamp(32px, 6vw, 90px); align-self: center; }
.mtm__text h2 { font-size: clamp(30px, 3.2vw, 46px); margin: 14px 0 18px; }
.mtm__text p { color: var(--ink-2); max-width: 460px; }
.steps { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; gap: 14px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; font-size: 13px; color: var(--ink-2); }
.steps li::before { content: "0" counter(s); font: 400 20px/1 var(--serif); color: var(--accent); }

/* ---------- Catalog ---------- */
.page-top { padding-top: var(--header-h); }
/* ---------- сезонні колекції ---------- */
.colhead { display: grid; grid-template-columns: 1.15fr 1fr; margin-top: var(--header-h); min-height: min(72vh, 680px); background: var(--bg-2); }
.colhead__media { overflow: hidden; min-height: 420px; }
.colhead__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.colhead__text { align-self: center; padding: 56px clamp(28px, 6vw, 96px); max-width: 640px; }
.colhead__text h1 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.05; margin: 14px 0 20px; }
.colhead__text p { font: italic 400 clamp(18px, 1.5vw, 21px)/1.6 var(--serif); color: var(--ink-2); margin: 0; }
.colhead--plain { grid-template-columns: 1fr; min-height: 0; text-align: center; }
.colhead--plain .colhead__text { margin: 0 auto; padding: 70px var(--pad) 56px; }
.page-top--col { padding-top: 0; }
.colindex .section__head { padding: 48px var(--pad) 0; }
.colindex__title { font-size: clamp(36px, 4vw, 56px); margin-top: 8px; }
.colgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 var(--pad) 80px; }
.coltile { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-2); color: #fff; }
.coltile--wide { grid-column: 1 / -1; aspect-ratio: 16/8; }
.coltile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.coltile:hover img { transform: scale(calc(var(--z, 1) * 1.03)); }
.coltile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 55%); }
.coltile__ph { display: grid; place-items: center; height: 100%; color: var(--accent); }
.coltile__ph svg { width: 90px; height: 84px; opacity: .5; }
.coltile__cap { position: absolute; left: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 36px); z-index: 1; }
.coltile__cap .eyebrow { color: #fff; opacity: .9; }
.coltile__cap h2 { font-size: clamp(28px, 3vw, 44px); margin: 6px 0 14px; color: #fff; }
.coltile:has(.coltile__ph) { color: var(--ink); }
.coltile:has(.coltile__ph)::after { display: none; }
.coltile:has(.coltile__ph) .coltile__cap .eyebrow, .coltile:has(.coltile__ph) h2 { color: var(--ink); }
.pdp__eyebrow { margin-bottom: 10px; }
.pdp__eyebrow a { border-bottom: 1px solid transparent; transition: border-color .2s; }
.pdp__eyebrow a:hover { border-color: currentColor; }
/* «Колекції» в шапці на комп'ютері: випадна панель з обкладинками */
.dnav-dd__btn { display: inline-flex; align-items: center; gap: 6px; }
.dnav-dd__btn::before { content: ""; order: 2; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.dnav-dd__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.dnav-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; } /* «місток», щоб панель не зникала дорогою від пункту */
.dnav-dd:hover .dnav-dd__panel, .dnav-dd:focus-within .dnav-dd__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.dnav-dd__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 200px)) auto; gap: 24px; padding: 26px var(--pad) 30px; align-items: start; }
.d-nav .dnav-col { display: flex; flex-direction: column; gap: 4px; padding: 0; white-space: normal; letter-spacing: 0; }
.d-nav .dnav-col::after, .d-nav .dnav-dd__all::after { display: none; }
.dnav-col__img { display: grid; place-items: center; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-2); margin-bottom: 8px; color: var(--accent); }
.dnav-col__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.dnav-col:hover .dnav-col__img img { transform: scale(calc(var(--z, 1) * 1.04)); }
.dnav-col__img svg { width: 44px; height: 40px; opacity: .5; }
.dnav-col small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.dnav-col b { font: 400 20px/1.2 var(--serif); }
.d-nav .dnav-dd__all { align-self: end; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding: 0 0 2px; justify-self: start; }
.subnav { display: flex; gap: 28px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: 16px 0 14px; font-size: 12px; white-space: nowrap; color: var(--ink-2); border-bottom: 1px solid transparent; }
.subnav a.is-active { color: var(--ink); border-color: var(--ink); font-weight: 500; }
.subnav sup { color: var(--muted); margin-left: 3px; }
.toolbar { display: flex; align-items: center; gap: 24px; padding: 14px var(--pad); border-bottom: 1px solid var(--line); font-size: 12px; flex-wrap: wrap; }
.toolbar .views { display: flex; gap: 14px; align-items: center; color: var(--ink-2); }
.toolbar .views button { padding: 2px 4px; color: var(--muted); }
.toolbar .views button.is-active { color: var(--ink); border-bottom: 1px solid var(--ink); }
.toolbar label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.toolbar select { border: 0; font: inherit; background: transparent; cursor: pointer; }
.toolbar .spacer { flex: 1; }
.toolbar { gap: 20px; }

/* Кнопка «Фільтри», лічильник, мітки активних фільтрів */
.filter-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--ink); font-size: 12px; letter-spacing: .06em; transition: background .2s, color .2s; }
.filter-btn:hover { background: var(--ink); color: #fff; }
.filter-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.filter-btn__n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--accent); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.result-count { color: var(--muted); }

/* Меню сортування */
.sortdd { position: relative; }
.sortdd__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 2px; font-size: 12px; letter-spacing: .04em; color: var(--ink-2); }
.sortdd__btn b { font-weight: 500; color: var(--ink); }
.sortdd__lbl::after { content: ":"; }
.sortdd__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .25s; }
.sortdd__btn:hover b { color: var(--accent); }
.sortdd.is-open .sortdd__btn svg { transform: rotate(180deg); }
.sd-short { display: none; }
.sortdd__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 236px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(22,22,22,.28);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.sortdd.is-open .sortdd__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.sortdd__menu li { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; padding: 0 12px; font-size: 13px; color: var(--ink-2); cursor: pointer; outline: none; }
.sortdd__menu li:hover, .sortdd__menu li:focus-visible, .sortdd__menu li:focus { background: var(--bg-2); color: var(--ink); }
.sortdd__menu li svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; opacity: 0; }
.sortdd__menu li[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.sortdd__menu li[aria-selected="true"] svg { opacity: 1; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px var(--pad) 0; }
.fchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 15px; background: #fff; font-size: 12px; }
.fchip:hover { border-color: var(--ink); }
.fchip span { font-size: 15px; line-height: 1; color: var(--muted); }
.fchip--reset { border-color: transparent; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.fchip--reset:hover { border-color: transparent; color: var(--ink); }

/* Панель фільтрів */
.fdrawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(440px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s .35s; }
.fdrawer.is-open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fdrawer__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.fdrawer__head h3 { font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.fdrawer__body { flex: 1; overflow-y: auto; padding: 0 24px 12px; overscroll-behavior: contain; }
.fdrawer__foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.fdrawer__foot .btn { height: 48px; padding: 0 12px; }
.fsec { padding: 20px 0 14px; border-bottom: 1px solid var(--line); }
.fsec:last-child { border-bottom: 0; }
.fsec h4 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.fsec__n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0; }
.fopt { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; cursor: pointer; }
.fopt input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.fopt small { margin-left: auto; color: var(--muted); font-size: 11px; }
.fopt.is-off { opacity: .4; cursor: default; }
.fswatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); flex-shrink: 0; }
.fsizes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.fsize { position: relative; }
.fsize input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fsize span { display: inline-grid; place-items: center; min-width: 52px; height: 42px; padding: 0 12px; border: 1px solid var(--line); font-size: 12px; transition: background .15s, border-color .15s; }
.fsize:hover span { border-color: var(--ink); }
.fsize input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.fsize input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fsize.is-off span { color: #c4c4c4; border-color: var(--line); background: repeating-linear-gradient(135deg, transparent 0 6px, #f2f2f2 6px 7px); }
.fsize.is-off input { cursor: not-allowed; }
.fprice { display: flex; align-items: flex-end; gap: 10px; padding-top: 4px; }
.fprice label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--ink-2); }
.fprice input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 0; font: 400 14px var(--sans); background: #fff; -moz-appearance: textfield; }
.fprice input::-webkit-outer-spin-button, .fprice input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fprice input:focus { outline: none; border-color: var(--ink); }
.fprice > span { padding-bottom: 12px; color: var(--muted); }
.catalog { padding: 32px var(--pad) 80px; }
.empty { padding: 80px 0; text-align: center; color: var(--ink-2); }
.empty h3 { font-size: 30px; margin-bottom: 10px; color: var(--ink); }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: 1.25fr 1fr; padding-top: var(--header-h); }
/* Фото товару — слайдер. На комп'ютері: одне фото рівно на висоту екрана, стрілки ‹ › і крапки;
   ширина колонки = 3/4 висоти, тож вертикальне фото вміщається повністю. Натискання відкриває фото на весь екран. */
.pdp { grid-template-columns: min(calc((100vh - var(--header-h)) * .75), 58vw) 1fr; }
/* Комп'ютер: фото й опис — одна композиція з однаковими відступами зліва, між ними й справа */
@media (min-width: 1081px) {
  .pdp { grid-template-columns: min(calc((100vh - var(--header-h)) * .75), 44vw) minmax(340px, 500px); justify-content: space-evenly;
    column-gap: clamp(32px, 4vw, 72px); padding-inline: clamp(24px, 3vw, 48px); }
  .pdp .pdp__sticky { max-width: none; margin: 0; padding: 40px 0 60px; }
}
.gal { position: sticky; top: var(--header-h); align-self: start; min-width: 0; }
.pdp__gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; height: calc(100vh - var(--header-h)); outline: none; }
.pdp__sticky { max-width: 640px; margin-inline: auto; }
.pdp__gallery::-webkit-scrollbar { display: none; }
.pdp__ph { height: 100%; overflow: hidden; background: var(--bg-2); cursor: zoom-in; scroll-snap-align: start; }
.gal__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.88); color: var(--ink); z-index: 2; opacity: 0; transition: opacity .25s, background .2s; }
.gal:hover .gal__btn, .gal__btn:focus-visible { opacity: 1; }
.gal__btn:hover { background: #fff; }
.gal__btn[disabled] { opacity: 0 !important; pointer-events: none; }
.gal__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.gal__prev { left: 16px; } .gal__next { right: 16px; }
.gal__dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 8px; z-index: 2; pointer-events: none; }
.gal__dots button { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: auto; transition: background .2s, transform .2s; }
.gal__dots button.is-active { background: #fff; transform: scale(1.3); }
.pdp__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp__gallery .wide { aspect-ratio: auto; }
.pdp__panel { position: relative; }
/* перегляд фото на весь екран */
.lightbox { position: fixed; inset: 0; z-index: 120; background: #fafaf8; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__img { grid-column: 2; justify-self: center; max-width: 100%; max-height: 100vh; height: 100vh; width: auto; object-fit: contain; padding: 24px 0; user-select: none; -webkit-user-drag: none; }
.lightbox__btn { width: 48px; height: 48px; display: grid; place-items: center; justify-self: center; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.85); transition: background .2s; }
.lightbox__btn:hover { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lightbox__btn[disabled] { opacity: .2; pointer-events: none; }
.lightbox__close { position: absolute; top: 14px; right: 14px; }
.lightbox__count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .16em; color: var(--ink-2); }
.pdp__sticky { position: sticky; top: var(--header-h); padding: 36px clamp(24px, 5vw, 80px) 60px; }
.crumbs { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-bottom: 40px; }
.crumbs a:hover { color: var(--ink); }
.pdp h1 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 10px; }
.pdp__price { font-size: 16px; letter-spacing: .06em; margin-bottom: 6px; }
.pdp__fabric { color: var(--ink-2); font-size: 12px; margin-bottom: 26px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-label { font-size: 12px; margin-bottom: 10px; }
.field-label b { font-weight: 500; }
.swatches { display: flex; gap: 10px; margin-bottom: 24px; }
.swatch { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); outline-offset: 3px; }
button.swatch { cursor: pointer; transition: outline-color .2s; outline: 1px solid transparent; }
button.swatch:hover { outline-color: var(--line); }
.swatch.is-active, button.swatch.is-active { outline: 1px solid var(--ink); }
.card__colors { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.card__colors a { width: 12px; height: 12px; border: 1px solid var(--line); position: relative; }
.card__colors a::after { content: ""; position: absolute; inset: -8px -3px; } /* більша зона натискання на телефоні */
.card__colors a:hover { outline: 1px solid var(--ink); outline-offset: 2px; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button { padding: 10px 0; font-size: 12px; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.tabs button.is-active { color: var(--ink); border-color: var(--ink); }
.tabs .spacer { flex: 1; }
.tabs .linkish { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.sizes { display: flex; gap: 6px; margin-bottom: 10px; }
.size { min-width: 52px; padding: 0 12px; height: 42px; border: 1px solid var(--line); font-size: 12px; }
.size:hover { border-color: var(--ink); }
.size.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.size[disabled] { color: #c4c4c4; background: repeating-linear-gradient(135deg, transparent 0 6px, #f2f2f2 6px 7px); cursor: not-allowed; }
/* розпроданий розмір: можна обрати, щоб підписатися на надходження */
.size.is-out { color: #b5b5b5; background: repeating-linear-gradient(135deg, transparent 0 6px, #f2f2f2 6px 7px); text-decoration: line-through; text-decoration-color: #cfcfcf; }
.size.is-out:hover { border-color: #b5b5b5; }
.size.is-out.is-active { border-color: var(--ink-2); background: #fff; color: var(--ink-2); }
.stock-note { font-size: 12px; color: var(--accent); min-height: 20px; margin-bottom: 18px; }
.notify-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin: -6px 0 16px; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: background .2s, color .2s; }
.notify-btn:hover { background: var(--accent); color: #fff; }
.notify-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.notify-btn.is-done { border-style: dashed; }
.notify .eyebrow { display: block; margin-bottom: 8px; }
.notify .fields { margin-bottom: 4px; }
.notify .legal { margin: 0 0 18px; }
.notify .legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.notify--done { text-align: center; }
/* статус онлайн-оплати на сторінці «Дякуємо» */
.paystate { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px auto 18px; padding: 12px 18px; border: 1px solid var(--line); font-size: 13px; max-width: 560px; }
.paystate__msg { display: flex; align-items: baseline; gap: 10px; text-align: left; }
.paystate__msg .paystate__dot { transform: translateY(-1px); }
.paystate__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.paystate[data-s="pending"] .paystate__dot { animation: mg-pulse 1.2s ease-in-out infinite; }
.paystate[data-s="paid"] { border-color: #b9d3c2; background: #f3f8f4; }
.paystate[data-s="paid"] .paystate__dot { background: #3e7d55; }
.paystate[data-s="failed"] { border-color: #e8c9c3; background: #fbf4f2; }
.paystate[data-s="failed"] .paystate__dot { background: var(--danger); }
.paystate .btn { height: 38px; padding: 0 18px; font-size: 10px; }
@keyframes mg-pulse { 50% { opacity: .25; } }
.stock-note.warn { color: var(--danger); }
/* ---------- «Як зняти мірки» ---------- */
.mguide { margin: 8px 0 40px; }
.mguide__intro { font-size: 14px; color: var(--ink-2); max-width: 640px; }
.mguide__grid { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 18px; }
.mguide__item { display: flex; flex-direction: column; gap: 14px; }
.mguide__fig { aspect-ratio: 4 / 5; background: var(--bg-2); display: grid; place-items: center; padding: 14px 0; }
.mfig { height: 100%; width: auto; overflow: visible; }
.mf-body { fill: #fff; stroke: #b7c3cb; stroke-width: 1; stroke-linejoin: round; }
.mf-tape { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.mf-back { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2 2.5; opacity: .55; }
.mf-dot { fill: var(--accent); }
.mguide__txt { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.mguide__txt p { grid-column: 1 / -1; }
.mguide__n { font: italic 400 24px/1 var(--serif); color: var(--accent); }
.mguide__txt h4 { margin: 0; font: 500 13px/1.3 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--ink); }
.mguide__txt h4 small { display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mguide__txt p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.mguide__help { margin-top: 26px; padding: 16px 20px; background: var(--bg-2); font-size: 13px; }
/* у вікні на сторінці товару */
.modal__box:has(.mguide--compact) { max-width: 920px; }
.mguide--compact { margin: 0; }
.mguide--compact h3 { margin-bottom: 8px; }
.mguide--compact .mguide__grid { gap: 22px 14px; }
.style-pick { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.style-pick legend { padding: 0; margin-bottom: 10px; width: 100%; }
.style-pick legend small { color: var(--muted, #8a8a8a); font-weight: 400; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.style-pick .check { margin-bottom: 0; font-size: 13px; color: var(--ink); }
.style-ready { margin: -4px 0 12px; }
.mtm-howto {display: inline-block; margin: -4px 0 14px; font-size: 12px; color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.measures-more { margin: -2px 0 14px; }
.measures-more summary { cursor: pointer; font-size: 12px; color: var(--ink-2); list-style: none; }
.measures-more summary::before { content: "+ "; color: var(--accent); }
.measures-more[open] summary::before { content: "− "; }
.measures-more .measures { margin-top: 12px; }
.measures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.measures label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.measures input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 8px 0; font: inherit; font-size: 14px; background: transparent; }
.measures input:focus { outline: none; border-color: var(--ink); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--ink-2); margin-bottom: 18px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); }
.hint { font-size: 12px; color: var(--ink-2); margin: 0 0 16px; }
.add-btn { width: 100%; justify-content: space-between; height: 54px; }
.secondary-cta { display: block; text-align: center; margin-top: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.secondary-cta:hover { color: var(--accent); }
.share-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; }
.share-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.acc { margin-top: 36px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 16px; line-height: 1; }
.acc details[open] summary::after { content: "–"; }
.acc .acc__body { padding: 0 0 18px; color: var(--ink-2); font-size: 13px; }
.acc ul { padding-left: 18px; margin: 0; }
.err { color: var(--danger); font-size: 12px; margin-top: 6px; min-height: 18px; }

.related { padding: 72px var(--pad); border-top: 1px solid var(--line); }

/* ---------- Drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(20,20,20,.35); z-index: 60; backdrop-filter: blur(2px); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; z-index: 70;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.drawer__head h3 { font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.drawer__foot .row { margin-bottom: 6px; font-size: 13px; }
.drawer__foot .row.total { font-size: 15px; font-weight: 500; margin: 10px 0 16px; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line img { width: 76px; height: 101px; object-fit: cover; }
.line__name { font-size: 13px; font-weight: 400; margin-bottom: 4px; }
.line__meta { font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.line__meta .accent { color: var(--accent); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); margin-top: 10px; }
.qty button { width: 28px; height: 28px; }
.qty span { min-width: 22px; text-align: center; font-size: 12px; }
.line__side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 13px; }
.line__remove { font-size: 11px; color: var(--muted); text-decoration: underline; }
.free-ship { font-size: 12px; color: var(--ink-2); margin-bottom: 14px; }
.free-ship .bar { height: 2px; background: var(--line); margin-top: 8px; }
.free-ship .bar i { display: block; height: 100%; background: var(--accent); }

/* ---------- Search ---------- */
.search { position: fixed; inset: 0; z-index: 80; background: rgba(255,255,255,.98); overflow-y: auto; }
.search__inner { max-width: 1100px; margin: 0 auto; padding: 28px var(--pad); }
.search__bar { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.search__bar input { flex: 1; border: 0; font: 400 26px/1.2 var(--serif); padding: 8px 0; background: transparent; outline: none; }
.search__results { padding-top: 30px; }
.search__results .grid { --cols: 4; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(20,20,20,.4); display: grid; place-items: center; padding: 16px; }
.modal__box { background: #fff; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 40px; position: relative; }
.modal__close { position: absolute; top: 10px; right: 10px; }
.modal h3 { font-size: 30px; margin-bottom: 18px; }
table.sizes-t { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0 18px; }
.sizes-t th, .sizes-t td { border-bottom: 1px solid var(--line); padding: 10px 6px; text-align: left; }
.sizes-t th { font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 14px 22px; font-size: 12px; letter-spacing: .06em; transition: .3s; max-width: calc(100% - 32px);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Checkout ---------- */
.checkout { max-width: 1160px; margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--pad) 90px; }
.checkout h1 { font-size: clamp(32px, 3.6vw, 48px); margin-bottom: 30px; }
.checkout__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.fieldset { border: 0; padding: 0; margin: 0 0 34px; }
.fieldset legend { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; padding: 0; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields .full { grid-column: 1 / -1; }
.f { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .08em; color: var(--ink-2); }
.f input, .f select, .f textarea {
  border: 1px solid var(--line); background: #fff; height: 48px; padding: 0 14px; font: 400 14px var(--sans); color: var(--ink); letter-spacing: 0; border-radius: 0;
}
.f textarea { height: 90px; padding: 12px 14px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--ink); }
.f.invalid input, .f.invalid select { border-color: var(--danger); }
.f .err { margin: 0; min-height: 0; }
.options { display: grid; gap: 10px; }
.option { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: start; border: 1px solid var(--line); padding: 16px; cursor: pointer; font-size: 13px; }
.option:has(input:checked) { border-color: var(--ink); }
.option input { accent-color: var(--accent); margin-top: 3px; }
.option small { display: block; color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.option .price { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.summary { background: var(--bg-2); padding: 30px; position: sticky; top: calc(var(--header-h) + 20px); }
.summary h3 { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; }
.summary .line { grid-template-columns: 60px 1fr auto; }
.summary .line img { width: 60px; height: 80px; }
.summary .row { font-size: 13px; padding: 4px 0; }
.summary .row.total { font-size: 16px; font-weight: 500; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
/* Поля з підказками (Нова Пошта) */
.combo { position: relative; }
.combo input { width: 100%; }
.combo input:disabled { background: var(--bg-2); color: var(--muted); cursor: not-allowed; }
.combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(22,22,22,.28);
}
.combo__list li[data-i] { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; cursor: pointer; font-size: 13px; letter-spacing: 0; color: var(--ink); }
.combo__list li b { font-weight: 500; }
.combo__list li small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.combo__list li.is-active, .combo__list li[data-i]:hover { background: var(--bg-2); }
.combo__empty { padding: 12px; font-size: 12px; letter-spacing: 0; color: var(--muted); }
.wh-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wh-types button { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 15px; background: #fff; font-size: 12px; letter-spacing: 0; color: var(--ink-2); }
.wh-types button small { color: var(--muted); }
.wh-types button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.wh-types button.is-active small { color: rgba(255,255,255,.7); }
.np-note { color: var(--danger); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.legal {font-size: 11px; color: var(--muted); margin-top: 12px; }

/* ---------- Text pages ---------- */
.text-page { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h) + 60px) var(--pad) 90px; }
.text-page h1 { font-size: clamp(36px, 4.4vw, 60px); margin: 12px 0 22px; }
.text-page h2 { font-size: 28px; margin: 40px 0 12px; }
.text-page p, .text-page li { color: var(--ink-2); }
.lead { font-size: 16px; color: var(--ink-2); }
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin: 50px 0; }
.about-split img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; text-align: center; }
.facts b { display: block; font: 400 42px/1 var(--serif); color: var(--accent); }
.facts span { font-size: 12px; color: var(--ink-2); }
.success { text-align: center; }
.success__mail { max-width: 460px; margin: 14px auto 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.f__hint { font-size: 11px; letter-spacing: .02em; color: var(--muted); line-height: 1.5; }
/* Банер cookie */
.cookie {
  position: fixed; left: 20px; bottom: 20px; z-index: 85; width: min(440px, calc(100% - 40px));
  background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(22,22,22,.35);
  padding: 22px 22px 18px; animation: cookieIn .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cookieIn { from { transform: translateY(16px); } }
.cookie__title { font: 400 22px/1.2 var(--serif); margin: 0 0 8px; }
.cookie__text { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
.cookie__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie__opts { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 8px; }
.cookie__opts .check { margin-bottom: 10px; }
.cookie__btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cookie__btns .btn { height: 42px; padding: 0 18px; font-size: 10px; }
.cookie__more { font-size: 12px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; margin-left: auto; }
.cookie__more:hover { color: var(--ink); }
@media (max-width: 680px) {
  .cookie { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 18px 16px 14px; }
  .cookie__btns .btn { flex: 1; padding: 0 10px; }
  .cookie__more { margin: 0 auto; }
}

/* Юридичні сторінки */
.legal-date { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.legal-date ~ h2 { font-size: 24px; margin: 34px 0 10px; }
.legal-date ~ p, .legal-date ~ ul li { font-size: 14px; line-height: 1.7; }
.legal-date ~ ul { padding-left: 20px; }
.legal-date ~ p a, .legal-date ~ ul a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
mark.todo { background: #fbf1dd; color: #9a6a12; padding: 1px 6px; font-size: .9em; }
.check a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.success__mono { width: 70px; height: 64px; display: block; margin: 0 auto 24px; color: var(--accent); }

/* ---------- Brand story ---------- */
.story { padding-top: var(--header-h); overflow: hidden; }
.script { font-family: "Great Vibes", var(--serif); color: var(--accent); font-weight: 400; font-size: 1.55em; line-height: 0; margin-right: .02em; }
.script--word { font-size: 1.35em; }
.story-intro { position: relative; text-align: center; padding: 70px var(--pad) 60px; color: var(--accent); }
.story-intro::before { /* великий водяний знак M, як на стенді */
  content: ""; position: absolute; inset: 0; margin: auto; width: min(560px, 90vw); height: min(520px, 84vw); z-index: -1; opacity: .06;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110'%3E%3Cpath d='M14 14 H33 V16.5 C27.5 16.5 26 18 26 24 V80 C26 86 28 88.5 36 88.5 V91 H12 V88.5 C19.5 88.5 21 86 21 80 V24 C21 18 19.5 16.5 14 16.5 Z M25 14 L31.5 14 L63 76 C68.5 86.5 74 91.5 81 94.5 L80.2 96 C70.5 93.5 62.5 87.5 55.5 75.5 L23 16.5 Z M90.5 14 L94 16 L63.5 68.5 L59.5 65 Z M90.5 14 H108 V16.5 C101.5 16.5 99.5 18.5 99.5 25 L101 80 C101.2 86 103.5 88.5 110 88.5 V91 H81 V88.5 C88.5 88.5 90.8 86 90.6 80 L89 22 Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110'%3E%3Cpath d='M14 14 H33 V16.5 C27.5 16.5 26 18 26 24 V80 C26 86 28 88.5 36 88.5 V91 H12 V88.5 C19.5 88.5 21 86 21 80 V24 C21 18 19.5 16.5 14 16.5 Z M25 14 L31.5 14 L63 76 C68.5 86.5 74 91.5 81 94.5 L80.2 96 C70.5 93.5 62.5 87.5 55.5 75.5 L23 16.5 Z M90.5 14 L94 16 L63.5 68.5 L59.5 65 Z M90.5 14 H108 V16.5 C101.5 16.5 99.5 18.5 99.5 25 L101 80 C101.2 86 103.5 88.5 110 88.5 V91 H81 V88.5 C88.5 88.5 90.8 86 90.6 80 L89 22 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.story-intro { isolation: isolate; }
.story-intro__mark svg { width: 54px; height: 50px; margin: 0 auto; display: block; }
.story-intro__brand { margin-top: 10px; display: flex; flex-direction: column; align-items: center; }
.story-intro__brand span { font: 500 clamp(30px, 4vw, 44px)/1 var(--serif); letter-spacing: .14em; }
.story-intro__brand small { font: 400 15px/1 var(--serif); letter-spacing: .06em; margin-top: 8px; opacity: .85; }
.story-intro__lead { font: 400 clamp(19px, 2vw, 24px)/1.45 var(--serif); color: var(--ink); margin: 34px auto 0; max-width: 640px; }
.story-intro__lead b { color: var(--accent); font-weight: 500; letter-spacing: .06em; }
.story-title { font-size: clamp(40px, 6vw, 76px); text-transform: uppercase; letter-spacing: .04em; margin-top: 46px; color: var(--ink); }
.story-title .script { text-transform: none; font-size: 1.7em; vertical-align: -.08em; }

.story-wide { margin: 0; }
.story-wide img { width: 100%; height: min(78vh, 760px); object-fit: cover; object-position: 50% 45%; }

.story-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1240px; margin: 0 auto; padding: 100px var(--pad); }
.story-split > img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.story-split--rev { grid-template-columns: .8fr 1.2fr; padding-top: 40px; }
.story-text p { font: 400 clamp(18px, 1.6vw, 21px)/1.65 var(--serif); color: var(--ink-2); margin: 0 0 20px; }
.story-text .story-big { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.4; color: var(--ink); }
.nowrap { white-space: nowrap; }
.story-text b { font-weight: 500; letter-spacing: .06em; color: var(--ink); }
.story-text em { color: var(--ink); }
.story-text .accent { color: var(--accent); font-weight: 500; }

.story-note { margin: 0; padding: 90px var(--pad); background: var(--bg-2); text-align: center; }
.story-note { font: italic 400 clamp(21px, 2.3vw, 30px)/1.5 var(--serif); color: var(--ink); }
.story-note::before { content: ""; display: block; width: 40px; height: 1px; background: var(--accent); margin: 0 auto 30px; }
.story-note { padding-inline: max(var(--pad), calc((100% - 860px) / 2)); }
.story-letter { padding-inline: max(var(--pad), calc((100% - 900px) / 2)); }

.story-center { text-align: center; max-width: 780px; margin: 0 auto; padding: 100px var(--pad) 60px; }
.story-year { display: block; font: 400 clamp(70px, 10vw, 130px)/1 var(--serif); color: var(--accent); opacity: .9; margin-bottom: 18px; }
.story-center p { font: 400 clamp(20px, 2vw, 26px)/1.55 var(--serif); color: var(--ink); margin: 0; }

.story-color { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.story-color__dot { width: min(300px, 60vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8aa6b8, var(--accent) 55%, #46677b); box-shadow: 0 30px 60px -30px rgba(70,103,123,.6); }
.story-color__cap { font: 500 10px/1.8 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); text-align: center; }

.story-section { max-width: 1320px; margin: 0 auto; padding: 90px var(--pad) 40px; }
.story-section__head { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.story-section__head h2 { font-size: clamp(36px, 4.4vw, 58px); margin: 12px 0 18px; }
.story-section__head p { font: 400 clamp(18px, 1.7vw, 22px)/1.6 var(--serif); color: var(--ink-2); margin: 0; }
.story-gallery { display: grid; gap: 8px; }
.story-gallery img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.story-gallery--atelier { grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: min(56vw, 760px); }
.story-gallery--atelier img:first-child { grid-row: span 2; }
.story-gallery--showroom { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
.story-gallery--showroom img { aspect-ratio: 9/16; }
.story-gallery--pair { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.story-gallery--pair img { aspect-ratio: 4/5; }
.story-wall { margin: 48px auto 0; max-width: 520px; }
.story-wall img { width: 100%; aspect-ratio: 927/1280; object-fit: cover; }
.story-wall figcaption { margin-top: 12px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }

/* Відео з відкриття */
.opening-video { margin: 0; position: relative; background: #111; }
.opening-video video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #111; }
.opening-video figcaption { position: absolute; left: 0; right: 0; top: 0; padding: 14px 16px 30px; font: 500 10px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #fff; background: linear-gradient(rgba(0,0,0,.45), transparent); pointer-events: none; }
.story-visit { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 28px; }
.story-visit p { margin: 0; color: var(--ink-2); }
.story-visit b { color: var(--ink); font-weight: 500; }

.story-letter { margin: 60px 0 0; padding: 100px var(--pad) 110px; text-align: center; color: var(--accent); font: italic 400 clamp(22px, 2.4vw, 32px)/1.55 var(--serif); }
.story-letter__mark svg { width: 44px; height: 40px; display: block; margin: 0 auto 30px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 60px var(--pad) 26px; margin-top: 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer p { font-size: 12px; max-width: 320px; margin-top: 18px; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 12px; }
.footer__links a:hover { color: var(--accent); }
.footer__contacts a { border-bottom: 1px solid var(--line); }
/* іконки соцмереж */
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: color .2s, border-color .2s, background .2s; }
.footer__social a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.footer__social svg .fill { fill: currentColor; stroke: none; }
/* заголовок розділу — кнопка лише на телефоні; на комп'ютері виглядає як звичайний заголовок */
.fcol__btn { all: unset; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; pointer-events: none; }
.fcol__btn::after { display: none; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .06em; }

/* reveal animation (content always visible if JS/animation disabled) */
.reveal { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1380px) {
  .nav { gap: 18px; }
  .tool__label { display: none; }
}
@media (max-width: 1080px) {
  :root { --header-h: 60px; }
  .burger { display: flex; }
  .header__inner { gap: 12px; }
  .logo { margin: 0 auto; }
  .logo { gap: 9px; }
  .logo__m { width: 30px; height: 30px; }
  .logo__name { font-size: 20px; letter-spacing: .18em; }
  .logo__sub { font-size: 7px; letter-spacing: .26em; }
  .tools { margin-left: 0; gap: 14px; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: #fff; color: var(--ink);
    flex-direction: column; gap: 0; padding: 20px var(--pad); transform: translateX(-100%); transition: transform .3s; overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a::after { display: none; }
  .d-nav { display: none; }
  .mnav { display: flex; flex-direction: column; min-height: 100%; }
  #searchBtn { display: none; } /* пошук на телефоні — угорі меню */
  /* пошук */
  .mnav__search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 0 14px; height: 50px; margin: 4px 0 14px; transition: border-color .2s; }
  .mnav__search:focus-within { border-color: var(--ink); }
  .mnav__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 15px var(--sans); color: var(--ink); outline: none; -webkit-appearance: none; }
  .mnav__search input::placeholder { color: var(--muted); letter-spacing: .04em; }
  .mnav__search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
  .mnav__search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; flex: none; }
  /* пункти */
  .mnav__item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line);
    font: 500 21px/1.2 var(--serif); letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--ink); }
  .mnav__item svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 1.3; transition: transform .25s; flex: none; }
  .mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mnav__toggle[aria-expanded="true"] { border-bottom-color: transparent; }
  .mnav__sub { display: flex; flex-direction: column; padding: 0 0 12px 2px; border-bottom: 1px solid var(--line); }
  .mnav__sub a { padding: 9px 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
  .mnav__sub a:hover, .mnav__sub a.is-active { color: var(--accent); }
  /* результати пошуку */
  .mnav__found { font-size: 12px; color: var(--ink-2); margin: 0 0 6px; }
  .mnav__res { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .mnav__res img { width: 54px; height: 70px; object-fit: cover; flex: none; background: var(--line); }
  .mnav__res span { display: flex; flex-direction: column; gap: 4px; }
  .mnav__res b { font: 400 18px/1.2 var(--serif); }
  .mnav__res small { font-size: 12px; color: var(--ink-2); }
  /* низ меню: валюта й контакти */
  .mnav__foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
  .mnav__loc { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 0 4px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); text-align: left; }
  .mnav__loc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; flex-shrink: 0; }
  .mnav__loc .mnav__chev { margin-left: auto; transition: transform .2s; }
  .mnav__loc[aria-expanded="true"] .mnav__chev { transform: rotate(180deg); }
  .mnav__loc[aria-expanded="true"] svg:first-child { transform: none; }
  .mnav__loc[aria-expanded="true"] { border-bottom-color: transparent; }
  .mnav__locp { display: grid; gap: 4px; padding-left: 24px; }
  .mnav__locp .currency, .mnav__locp .langsw { display: flex; gap: 18px; font-size: 13px; letter-spacing: .04em; color: var(--ink); }
  .mnav__locp a, .mnav__locp button { padding: 8px 0; }
  .mnav__foot { padding-bottom: env(safe-area-inset-bottom); }
  .colhead { grid-template-columns: 1fr; }
  .colhead__media { height: 62vh; min-height: 360px; }
  .colhead__text { padding: 34px var(--pad) 30px; max-width: none; }
  .header.menu-open { background: #fff !important; color: var(--ink) !important; }
  .grid { --cols: 3 !important; }
  .pdp { grid-template-columns: 1fr; }
  .lightbox { grid-template-columns: 1fr; }
  .lightbox__img { grid-column: 1; padding: 56px 0 44px; }
  .lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); }
  .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; }
  .gal { position: relative; top: auto; }
  .pdp__gallery { grid-auto-columns: 86%; gap: 4px; height: auto; }
  .pdp__sticky { max-width: none; }
  .pdp__ph { height: auto; aspect-ratio: 3 / 4; }
  .gal__btn { display: none; }
  .gal__dots { bottom: 12px; }
  .pdp__sticky { position: static; }
  .checkout__grid { grid-template-columns: 1fr; }
  .summary { position: static; order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .mtm { grid-template-columns: 1fr; }
  .mtm__img { min-height: 380px; }
}
@media (max-width: 680px) {
  /* на телефоні мова й валюта — внизу меню */
  .tools .locale { display: none; }
  .colgrid { grid-template-columns: 1fr; }
  .coltile--wide { aspect-ratio: 4/5; }
  /* Телефон: у шапці лише напис, обидва рядки по центру один під одним.
     Від'ємний відступ справа прибирає «хвіст» розрядки після останньої літери, щоб центр був точним. */
  .header .logo__m { display: none; }
  .header .logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .header .tools { margin-left: auto; }
  .header .logo__text { align-items: center; text-align: center; }
  .header .logo__name { margin-right: -.18em; }
  .header .logo__sub { margin-right: -.26em; }
  .hero { grid-template-columns: 1fr; height: auto; max-height: none; }
  .hero__tile { height: 78vh; min-height: 440px; }
  .hero__tile + .hero__tile { height: 60vh; }
  .grid { --cols: 2 !important; gap: 28px 6px; }
  .toolbar .views { display: none; }
  .toolbar { gap: 10px; flex-wrap: nowrap; }
  .toolbar .spacer { min-width: 0; }
  .filter-btn { padding: 0 10px; gap: 6px; flex-shrink: 0; letter-spacing: .02em; }
  .sortdd__btn { letter-spacing: 0; gap: 4px; }
  .result-count { white-space: nowrap; }
  .sortdd__lbl, .sd-full { display: none; }
  .sd-short { display: inline; }
  .sortdd__btn { white-space: nowrap; }
  .sortdd__menu { min-width: 220px; }
  .fdrawer__head, .fdrawer__body, .fdrawer__foot { padding-left: 18px; padding-right: 18px; }
  .card__quick { display: none; }
  .card__info { flex-direction: column; gap: 2px; font-size: 11px; }
  .measures { grid-template-columns: 1fr 1fr; }
  .mguide__grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .mguide__n { font-size: 20px; }
  .fields { grid-template-columns: 1fr; }
  .about-split, .facts { grid-template-columns: 1fr; }
  .story-split, .story-split--rev { grid-template-columns: 1fr; padding: 60px var(--pad); }
  .story-split--rev .story-color { order: 1; }
  .story-gallery--atelier { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .story-gallery--atelier img { aspect-ratio: 3/4; }
  .story-gallery--atelier img:first-child { grid-row: auto; grid-column: span 2; aspect-ratio: 3/2; }
  .story-gallery--showroom { grid-template-columns: 1fr 1fr; }
  .story-gallery--showroom .opening-video { grid-column: span 2; order: -1; }
  .story-gallery--showroom img { aspect-ratio: 2/3; }  .story-wide img { height: 60vh; }
  .story-note, .story-letter { padding: 60px var(--pad); }
  .footer__grid { grid-template-columns: 1fr; gap: 0; }
  .footer__grid > div:first-child { padding-bottom: 26px; }
  .fcol { border-top: 1px solid var(--line); }
  .fcol:last-child { border-bottom: 1px solid var(--line); }
  .fcol h4 { margin: 0; }
  .fcol__btn { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; box-sizing: border-box; }
  .fcol__btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
  /* «+», що перетворюється на «−» */
  .fcol__btn::after { content: ""; display: block; width: 12px; height: 12px; flex: none;
    background: linear-gradient(currentColor, currentColor) center / 12px 1.2px no-repeat, linear-gradient(currentColor, currentColor) center / 1.2px 12px no-repeat; transition: transform .25s; }
  .fcol.is-open .fcol__btn::after { background-size: 12px 1.2px, 1.2px 0; transform: rotate(180deg); }
  .fcol__body { display: none; padding-bottom: 20px; }
  .fcol.is-open .fcol__body { display: grid; }
  .footer__bottom { border-top: 0; margin-top: 26px; padding-top: 0; }
  .search__results .grid { --cols: 2; }
  .modal__box { padding: 28px 20px; }
  .section { padding: 52px var(--pad); }
}