/* Крути — вітрина 2026. Geologica (заголовки) + Onest (текст), fluid-ширина, один акцент. */
:root {
  --accent: #14181f;
  --accent-deep: #000000;
  --accent-soft: #f0f1f3;
  --accent-ink: #14181f;
  --cta: #00a664;
  --cta-deep: #008751;
  --cta-soft: #e3f6ec;
  --ok: #16a05a;
  --ok-deep: #0e7a43;
  --ok-soft: #e6f6ed;
  --ink: #0f1a2c;
  --ink-2: #3b4659;
  --muted: #6b7587;
  --line: #e4e8ef;
  --bg: #f8f8f6;
  --bg-2: #f0f2f6;
  --panel: #ffffff;
  --night: #0f1a2c;
  --night-2: #1a2840;
  --warm: #00a664;
  --sale: #e5263f;
  --radius: 3px;
  --radius-lg: 4px;
  --gutter: clamp(16px, 3.2vw, 56px);
  --shadow: 0 1px 2px rgba(15, 26, 44, .04), 0 18px 40px -18px rgba(15, 26, 44, .16);
  --shadow-lg: 0 30px 60px -24px rgba(15, 26, 44, .26);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: "Geologica", "Onest", system-ui, sans-serif;
  --text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 170px; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.6 var(--text); font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }
/* Зернистість — фіксований шар, не перемальовується при скролі */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-deep); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 1.6vw + 1.1rem, 2.5rem); }
h2 { font-size: clamp(1.2rem, .8vw + 1rem, 1.7rem); }
h3 { font-size: 1.05rem; }
.wrap { width: 100%; max-width: 2200px; margin: 0 auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); font-size: .93rem; }
.ic { flex: 0 0 auto; }
.staging { background: #1a1f1d; color: #e8c15a; text-align: center; font-size: .76rem; padding: 3px 8px; letter-spacing: .02em; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(28, 154, 94, .45); } 50% { box-shadow: 0 0 0 7px rgba(28, 154, 94, 0); } }

/* ---------- Верхня смуга ---------- */
.topbar { background: var(--night); color: #b9c7c1; font-size: .8rem; }
.topbar__in { display: flex; gap: 28px; align-items: center; min-height: 36px; flex-wrap: wrap; }
.topbar__in > span, .topbar a, .topbar__hours { display: inline-flex; align-items: center; gap: 7px; }
.topbar .ic { color: #6fd3a0; }
.topbar__right { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.topbar a:hover { color: #fff; }
.topbar .lang { font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 3px; padding: 1px 11px; }

/* ---------- Шапка ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(251, 252, 251, .88); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line); }
.hdr__main { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 24px); padding-block: 12px; }
.logo img { width: 140px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.search { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1.5px solid transparent; border-radius: 3px; padding-left: 16px; transition: border-color .3s var(--ease), background .3s var(--ease); }
.search:focus-within { border-color: var(--accent); background: var(--panel); }
.search .ic { color: var(--muted); }
.search input { flex: 1; border: 0; background: transparent; padding: 13px 0; font: inherit; min-width: 0; outline: none; }
.search button { border: 0; background: var(--accent); color: #fff; padding: 0 22px; align-self: stretch; border-radius: 0 3px 3px 0; font: inherit; font-weight: 600; cursor: pointer; }
.search--big { max-width: 560px; margin: 24px auto; }
.actions { display: flex; gap: 4px; }
.action { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .74rem; color: var(--ink-2); padding: 5px 12px; border-radius: 3px; transition: background .25s var(--ease); }
.action:hover { background: var(--bg-2); }
.action__n { position: absolute; top: -2px; right: 8px; background: var(--accent); color: #fff; font-size: .7rem; min-width: 19px; height: 19px; border-radius: 3px; display: grid; place-items: center; padding: 0 5px; }
.navrow__in { display: flex; gap: clamp(18px, 2vw, 34px); overflow-x: auto; padding-block: 10px 12px; font-weight: 500; font-size: .95rem; scrollbar-width: none; }
.navrow__in a { position: relative; white-space: nowrap; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.navrow__in a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.navrow__in a:hover::after { transform: scaleX(1); }
.navrow__hl { color: var(--accent-deep) !important; font-weight: 600; }

/* ---------- Кнопки, бейджі, чипи ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 3px; border: 1.5px solid transparent; cursor: pointer; font: inherit; font-weight: 600; letter-spacing: -.005em; transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.btn:active { transform: scale(.98) translateY(1px); }
.btn--lg { padding: 16px 26px; font-size: 1.02rem; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 26px -12px rgba(28, 154, 94, .7); }
.btn--primary:hover { background: var(--accent-deep); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--panel); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--light { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn--light:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.btn--wide { width: 100%; margin-top: 10px; }
form .btn--wide { margin-top: 12px; }
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 3px; margin: 6px 0; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--shop { background: var(--accent-soft); color: var(--accent-deep); }
.badge--stock { background: #eef3f8; color: #2d5a86; }
.badge--order, .badge--preorder { background: #fbf1e6; color: #8a4a12; }
.badge--out { background: var(--bg-2); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; }
.chip { padding: 8px 15px; border: 1px solid var(--line); border-radius: 3px; font-size: .9rem; font-weight: 500; white-space: nowrap; background: var(--panel); transition: border-color .25s var(--ease), background .25s var(--ease); }
.chip:hover, .chip.is-active { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.pill { padding: 7px 14px; border-radius: 3px; font-size: .88rem; color: var(--ink-2); border: 0; background: none; cursor: pointer; font: inherit; }
.pill.is-active { background: var(--ink); color: #fff; }
.stars { color: #e0a126; letter-spacing: 1px; white-space: nowrap; }
.stars i { color: #d5dbd8; font-style: normal; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 16px; display: flex; align-items: center; }

/* ---------- Hero: асиметричний ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 72px); align-items: center; margin-top: clamp(14px, 1.6vw, 28px); padding: clamp(36px, 4.5vw, 84px) clamp(24px, 4.5vw, 84px); border-radius: var(--radius-lg); overflow: hidden; color: #eef3f0; isolation: isolate;
  background: radial-gradient(1000px 520px at 88% 18%, rgba(28, 154, 94, .32), transparent 62%), linear-gradient(160deg, #0f1814, #13211b 58%, #0e1612); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 40%, #000 30%, transparent 75%); }
.hero__word { position: absolute; right: -2%; bottom: -8%; z-index: -1; font-family: var(--display); font-weight: 800; font-size: clamp(7rem, 19vw, 22rem); line-height: .8; letter-spacing: -.06em; color: rgba(255, 255, 255, .05); user-select: none; }
.hero .eyebrow { color: #7fdcac; }
.hero h1 { font-size: clamp(2rem, 2.8vw + 1rem, 3.9rem); font-weight: 700; color: #fff; letter-spacing: -.045em; margin-bottom: .45em; max-width: 14ch; }
.hero h1 em { font-style: normal; color: #8fe3b6; }
.lead { font-size: clamp(1rem, .3vw + .95rem, 1.15rem); color: #b7c7c0; max-width: 52ch; line-height: 1.65; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 38px; }
.hero .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .22); }
.hero .btn--ghost:hover { border-color: #fff; color: #fff; }
.hero__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(20px, 3vw, 48px); margin: 0; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1); }
.hero__stats dt { font-family: var(--display); font-size: clamp(1.4rem, 1.2vw + 1rem, 2.1rem); font-weight: 600; color: #fff; letter-spacing: -.03em; }
.hero__stats dd { margin: 2px 0 0; font-size: .85rem; color: #93a69d; max-width: 16ch; }
.hero__stage { position: relative; display: block; aspect-ratio: 4/3.2; border-radius: 3px; background: radial-gradient(circle at 50% 46%, #ffffff 0%, #f2f5f3 58%, #dfe7e3 100%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .8); transition: transform .6s var(--ease); }
.hero__stage:hover { transform: translateY(-6px) rotate(-.4deg); }
.hero__stage img { position: absolute; inset: 7% 5%; width: 90%; height: 86%; object-fit: contain; mix-blend-mode: multiply; animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero__ring { position: absolute; inset: 12% 14%; border-radius: 50%; border: 1px dashed rgba(17, 26, 22, .12); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__tag { position: absolute; left: 18px; bottom: 18px; background: rgba(17, 26, 22, .82); backdrop-filter: blur(10px); color: #fff; border-radius: 3px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; max-width: 72%; border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.hero__tag small { color: #8fe3b6; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; }
.hero__tag b { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }

/* ---------- Бігуча стрічка брендів ---------- */
.marquee { overflow: hidden; margin: clamp(18px, 2vw, 30px) calc(var(--gutter) * -1) 0; padding-block: 18px; border-block: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1vw + .8rem, 1.7rem); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.marquee i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Секції ---------- */
.block { margin-block: clamp(40px, 4.5vw, 76px); }
.block__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.block__head h2 { margin: 0; }
.block__head p { margin: 6px 0 0; }
.rail-nav { display: flex; gap: 8px; align-items: center; }
.rail-more { color: var(--accent-deep); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; margin-right: 8px; }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.rail-btn[data-dir="-1"] .ic { transform: rotate(180deg); }
.rail-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 15.5vw, 300px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > .card { scroll-snap-align: start; }

/* ---------- Бенто категорій ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 11vw, 210px); gap: 14px; }
.bento__tile { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-2); padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; transition: background .4s var(--ease), transform .4s var(--ease); }
.bento__tile:hover { background: var(--accent-soft); color: var(--ink); transform: translateY(-3px); }
.bento__tile img { position: absolute; right: 6%; bottom: 8%; width: 58%; height: 70%; object-fit: contain; mix-blend-mode: multiply; z-index: -1; transition: transform .6s var(--ease); }
.bento__tile:hover img { transform: scale(1.06) translateX(-4px); }
.bento__t { font-family: var(--display); font-weight: 600; font-size: clamp(.95rem, .4vw + .85rem, 1.15rem); letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; max-width: 80%; }
.bento__t .ic { opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); color: var(--accent-deep); }
.bento__tile:hover .bento__t .ic { opacity: 1; transform: none; }
.bento__tile--0 { grid-column: span 2; grid-row: span 2; background: var(--night); color: #fff; }
.bento__tile--0:hover { background: var(--night-2); color: #fff; }
.bento__tile--0 .bento__t { font-size: clamp(1.3rem, 1vw + 1rem, 1.9rem); }
.bento__tile--0 img { mix-blend-mode: normal; background: radial-gradient(circle, #fff 58%, transparent 60%); border-radius: 50%; width: 62%; height: auto; aspect-ratio: 1; padding: 8%; right: 8%; bottom: 10%; }
.bento__tile--1, .bento__tile--2 { grid-column: span 2; }
.bento__tile--7, .bento__tile--8 { grid-column: span 3; }
.bento__tile--7 img, .bento__tile--8 img { width: 34%; }

/* ---------- Промо: асиметрія 1.35fr / 1fr ---------- */
.promos { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; margin-block: clamp(40px, 4.5vw, 76px); }
.promo { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: var(--radius-lg); padding: clamp(22px, 2.4vw, 40px); overflow: hidden; color: #fff; isolation: isolate; transition: transform .5s var(--ease); }
.promo:hover { color: #fff; transform: translateY(-4px); }
.promo--0 { grid-row: span 2; align-items: flex-end; min-height: 380px; }
.promo--green { background: radial-gradient(600px 300px at 90% 10%, rgba(143, 227, 182, .35), transparent 60%), linear-gradient(150deg, #137449, #1c9a5e); }
.promo--dark { background: linear-gradient(150deg, #151d1a, #22302a); }
.promo--orange { background: linear-gradient(150deg, #a8551a, #d9771f); }
.promo__text { display: flex; flex-direction: column; gap: 8px; z-index: 1; max-width: 26ch; }
.promo__text b { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1vw + 1rem, 2rem); line-height: 1.05; letter-spacing: -.035em; }
.promo--0 .promo__text b { font-size: clamp(1.8rem, 2vw + 1rem, 3rem); }
.promo__text span { opacity: .85; }
.promo__text em { font-style: normal; font-weight: 600; background: #fff; color: var(--ink); border-radius: 3px; padding: 9px 15px; margin-top: 12px; display: inline-flex; gap: 6px; align-items: center; width: max-content; font-size: .9rem; }
.promo__img { flex: 0 0 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 55%, rgba(255, 255, 255, .85)); display: grid; place-items: center; padding: 11%; }
.promo--0 .promo__img { position: absolute; right: 5%; top: 8%; width: 46%; flex: none; }
.promo__img img { mix-blend-mode: multiply; object-fit: contain; }
.promo__img--icon { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }

/* ---------- Відгуки: стрічка ---------- */
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 30%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.quote { scroll-snap-align: start; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.6; flex: 1; }
.quote figcaption { display: flex; gap: 12px; align-items: center; font-size: .88rem; }
.quote figcaption b { display: block; }
.quote figcaption a { color: var(--muted); }
.avatar { width: 44px; height: 44px; border-radius: 3px; background: var(--night); color: #8fe3b6; font-family: var(--display); font-weight: 600; display: grid; place-items: center; flex: 0 0 auto; }

/* ---------- Консультація + FAQ (split) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin-block: clamp(40px, 4.5vw, 76px); }
.consult { position: sticky; top: 170px; padding: clamp(28px, 3vw, 48px); border-radius: var(--radius-lg); color: #fff; background: radial-gradient(700px 360px at 100% 0%, rgba(28, 154, 94, .35), transparent 60%), linear-gradient(160deg, #111a16, #18241f); }
.consult .eyebrow { color: #7fdcac; }
.consult h2 { color: #fff; font-size: clamp(1.4rem, 1.2vw + 1rem, 2.2rem); }
.consult p { color: #b7c7c0; margin: 0 0 24px; }
.consult__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121716' stroke-width='2'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p, .faq .rich { color: var(--ink-2); margin: 10px 0 0; max-width: 70ch; }

/* ---------- Картка товару ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 14vw, 270px), 1fr)); gap: 16px; }
.card { --mx: 50%; --my: 50%; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
/* Spotlight-рамка під курсором */
.card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(28, 154, 94, .75), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; z-index: 2; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { opacity: 1; }
.card__img { background: var(--bg-2); padding: 20px; }
.card__img img { aspect-ratio: 1/1; object-fit: contain; width: 100%; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.card:hover .card__img img { transform: scale(1.05); }
.card__sale, .card__flag { position: absolute; top: 12px; z-index: 1; font-size: .72rem; font-weight: 700; border-radius: 3px; padding: 3px 8px; letter-spacing: .01em; }
.card__sale { left: 12px; background: var(--sale); color: #fff; }
.card__flag { right: 12px; background: var(--night); color: #8fe3b6; }
.card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.card__brand { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.card__title { font-weight: 500; font-size: .94rem; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.76em; }
.card__rating { display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--muted); }
.card__stock { font-size: .78rem; font-weight: 500; color: var(--muted); }
.card__stock--shop { color: var(--accent-deep); }
.card__foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.card__price { display: flex; flex-direction: column; line-height: 1.15; }
.card__price b { font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.03em; }
.card__price s { color: var(--muted); font-size: .82rem; }
.card__cart { width: 44px; height: 44px; border-radius: 3px; background: var(--bg-2); display: grid; place-items: center; color: var(--ink); flex: 0 0 auto; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.card__cart:hover, .card:hover .card__cart { background: var(--accent); color: #fff; }
.card__cart:active { transform: scale(.94); }

/* Поява при скролі (клас .reveal → .is-in через IntersectionObserver) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Списки, фільтри ---------- */
.crumbs { font-size: .84rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; padding-block: 20px 8px; }
.crumbs a:hover { color: var(--accent-deep); }
.list-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 4px 0 16px; font-size: .9rem; color: var(--muted); background: var(--bg-2); border-radius: 3px; padding: 6px 10px; }
.intro { color: var(--ink-2); max-width: 92ch; margin-bottom: 10px; }
.intro > *:not(:first-child) { display: none; }
.intro.is-open > * { display: block; }
.outro { margin-top: 48px; color: var(--ink-2); background: var(--bg-2); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 44px); }
.outro > * { max-width: 90ch; }
.note { background: #fbf1e6; border-radius: 3px; padding: 10px 14px; color: #8a4a12; }
.empty { padding: 40px 0; color: var(--muted); }
.pager { display: flex; gap: 6px; justify-content: center; margin: 36px 0; flex-wrap: wrap; }
.pager a, .pager span { min-width: 46px; text-align: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 3px; font-weight: 600; transition: border-color .25s var(--ease); }
.pager a:hover { border-color: var(--ink); }
.pager span[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.rich table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: .95rem; }
.rich td, .rich th { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.rich img { max-width: 100%; height: auto; border-radius: 3px; }
.rich iframe { max-width: 100%; border-radius: 3px; }
.rich h2, .rich h3 { font-size: 1.15rem; margin-top: 1.4em; }
.catalog-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(20px, 2vw, 36px); align-items: start; }
.facets { position: sticky; top: 170px; max-height: calc(100vh - 190px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.facets__box > summary { font-family: var(--display); font-weight: 600; font-size: 1rem; cursor: pointer; list-style: none; padding: 2px 0 10px; }
.facets__box > summary::-webkit-details-marker { display: none; }
.facets__sel { margin-bottom: 10px; }
.facet { border-top: 1px solid var(--line); padding: 11px 0; }
.facet > summary { font-weight: 600; cursor: pointer; font-size: .94rem; }
.facet__opts { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; max-height: 260px; overflow: auto; }
.facet__opt { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 3px; font-size: .92rem; color: var(--ink-2); }
.facet__opt:hover { background: var(--bg-2); }
.facet__opt em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .8rem; }
.facet__opt .box { width: 18px; height: 18px; border: 1.5px solid #bfc8c4; border-radius: 3px; flex: 0 0 auto; transition: background .2s, border-color .2s; }
.facet__opt.is-on { color: var(--ink); font-weight: 600; }
.facet__opt.is-on .box { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px #fff; }
.props { width: 100%; border-collapse: collapse; font-size: .95rem; }
.props th, .props td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.props th { font-weight: 400; color: var(--muted); width: 45%; }
.props th small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.props td.price { font-family: var(--display); font-weight: 600; white-space: nowrap; text-align: right; }
.props tr:nth-child(odd) { background: var(--bg-2); }

/* ---------- Товар ---------- */
.phead { margin: 4px 0 18px; }
.phead h1 { font-size: clamp(1.35rem, 1.2vw + 1rem, 2.1rem); max-width: 58ch; margin-bottom: 10px; letter-spacing: -.035em; }
.phead__meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.phead__meta b { color: var(--ink); font-weight: 600; }
.phead__rating { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
.ptabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ptabs a { padding: 11px 16px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .25s, border-color .25s; }
.ptabs a:first-child, .ptabs a:hover { border-color: var(--ink); color: var(--ink); }
.product { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin-top: 20px; }
.gallery__main { background: radial-gradient(circle at 50% 45%, #fff, var(--bg-2) 72%); border-radius: var(--radius-lg); padding: clamp(18px, 2.4vw, 40px); }
.gallery__main img { width: 100%; aspect-ratio: 4/3; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.thumb { border: 1.5px solid transparent; background: var(--bg-2); border-radius: 3px; padding: 4px; cursor: pointer; flex: 0 0 auto; transition: border-color .25s; }
.thumb.is-active { border-color: var(--ink); }
.thumb img { width: 88px; height: 66px; object-fit: contain; mix-blend-mode: multiply; }
.buybox { position: sticky; top: 170px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 2vw, 30px); box-shadow: var(--shadow); }
.buybox__top { display: flex; justify-content: space-between; align-items: center; }
.buybox__sale { background: var(--sale); color: #fff; font-weight: 700; font-size: .85rem; border-radius: 3px; padding: 4px 10px; }
.buybox__price { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 8px; }
.buybox__price b { font-family: var(--display); font-size: clamp(2rem, 1.4vw + 1.4rem, 2.7rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; }
.buybox__price s { color: var(--muted); font-size: 1.02rem; }
.save { color: var(--sale); font-weight: 600; font-size: .9rem; }
.buybox__parts { display: flex; gap: 8px; align-items: center; background: #fbf1e6; color: #8a4a12; border-radius: 3px; padding: 10px 12px; font-size: .9rem; margin: 6px 0 4px; }
.variants { margin-top: 18px; }
.variants__t { font-weight: 600; margin-bottom: 8px; }
.variants__t span { color: var(--muted); font-weight: 500; }
.perks { list-style: none; padding: 18px 0 0; margin: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; font-size: .9rem; color: var(--ink-2); }
.perks li { display: flex; gap: 12px; align-items: flex-start; }
.perks .ic { color: var(--accent); margin-top: 2px; }
.perks b { display: block; color: var(--ink); font-weight: 600; }
.perks em { color: var(--accent-deep); font-style: normal; font-weight: 600; }
.sections { display: grid; gap: 40px; margin-top: 48px; max-width: 1080px; }
.review { border-bottom: 1px solid var(--line); padding: 16px 0; }
.review__answer { background: var(--bg-2); border-radius: 3px; padding: 10px 14px; }
.stickybuy { display: none; }
.notfound { text-align: center; padding: 56px 0; }

/* ---------- Сторінки, сервіс, новини, бренди ---------- */
.page { max-width: 1080px; }
.page .lead { color: var(--ink-2); }
.page__body { margin-top: 20px; color: var(--ink-2); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; margin: 16px 0 24px; }
.contact-card { background: var(--bg-2); border-radius: var(--radius); padding: 26px; }
.map { width: 100%; min-height: 360px; border: 0; border-radius: var(--radius); }
.svc { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 20px; margin: 12px 0; background: var(--panel); }
.svc > summary { font-family: var(--display); font-weight: 600; font-size: .98rem; cursor: pointer; padding: 10px 0; }
.svc > summary em { color: var(--muted); font-family: var(--text); font-style: normal; font-weight: 400; font-size: .85rem; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 22vw, 380px), 1fr)); gap: 20px; }
.post { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.post__title { font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.02em; }
.post__body p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.article { max-width: 840px; }
.article__img { border-radius: var(--radius-lg); margin: 12px 0 22px; width: 100%; }
.article .rich { font-size: 1.06rem; line-height: 1.78; }
.brands { columns: 5 220px; column-gap: 30px; }
.brands section { break-inside: avoid; margin-bottom: 20px; }
.brands a { display: flex; justify-content: space-between; padding: 3px 0; color: var(--ink-2); }
.brands em { color: var(--muted); font-style: normal; font-size: .85rem; }

/* ---------- Кошик і оформлення ---------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding: 14px 0; }
.cart-line img { border-radius: 3px; background: var(--bg-2); object-fit: contain; mix-blend-mode: multiply; }
.cart-line__title { font-weight: 600; display: block; }
.cart-line__sum { font-family: var(--display); font-weight: 600; white-space: nowrap; font-size: 1.05rem; }
.cart-line__del { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.1rem; }
.cart-lines > .btn { margin-top: 14px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.qty input { width: 44px; border: 0; text-align: center; font: inherit; -moz-appearance: textfield; background: transparent; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty__btn { border: 0; background: var(--bg-2); width: 36px; height: 38px; cursor: pointer; font-size: 1.1rem; }
.summary { position: sticky; top: 170px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.summary__row, .summary__total { display: flex; justify-content: space-between; gap: 10px; }
.summary__total { border-top: 1px solid var(--line); padding-top: 12px; font-size: 1.2rem; }
.summary__total b { font-family: var(--display); }
.summary__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.summary__item img { border-radius: 3px; background: var(--bg-2); object-fit: contain; }
.summary .small { font-size: .8rem; margin: 0; }
.empty-cart { padding: 40px 0; }
.checkout fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px 22px; margin: 0 0 16px; background: var(--panel); }
.checkout legend { font-family: var(--display); font-weight: 600; padding: 0 8px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--ink-2); position: relative; margin-top: 8px; }
.field input, .field select, .checkout textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; width: 100%; transition: border-color .2s; }
.field input:focus, .field select:focus, .checkout textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.field__err { color: var(--sale); font-size: .82rem; }
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.option { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 3px; padding: 13px 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.option input { accent-color: var(--accent); }
.dlv { margin-top: 10px; }
.ac__list { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-lg); max-height: 260px; overflow: auto; }
.ac__list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 14px; cursor: pointer; font: inherit; }
.ac__list button:hover { background: var(--bg-2); }
.done { text-align: center; padding: 48px 0; max-width: 640px; margin: 0 auto; }
.done .lead { color: var(--ink-2); }
.done__icon { width: 80px; height: 80px; border-radius: 3px; background: var(--accent); color: #fff; font-size: 2.3rem; display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 18px 36px -14px rgba(28, 154, 94, .7); }
.done__pay { max-width: 320px; margin: 16px auto; }

/* ---------- Смуга гарантій і підвал ---------- */
.trustbar { margin-top: clamp(48px, 5vw, 88px); border-block: 1px solid var(--line); background: var(--panel); }
.trustbar__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-block: 28px; }
.trustbar__in > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.trustbar .ic { grid-row: span 2; color: var(--accent-deep); background: var(--accent-soft); border-radius: 3px; padding: 12px; width: 54px; height: 54px; }
.trustbar b { font-weight: 600; }
.trustbar span { color: var(--muted); font-size: .86rem; }
.ftr { background: var(--night); color: #a8b8b1; padding-top: 56px; overflow: hidden; position: relative; }
.ftr::before { content: "КРУТИ"; position: absolute; left: var(--gutter); bottom: -.18em; font-family: var(--display); font-weight: 800; font-size: clamp(6rem, 18vw, 20rem); line-height: 1; letter-spacing: -.06em; color: rgba(255, 255, 255, .035); pointer-events: none; }
.ftr a { color: #d5e0db; display: block; padding: 3px 0; }
.ftr a:hover { color: #fff; }
.ftr h3 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.ftr p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; }
.ftr p a { display: inline; }
.ftr .ic { color: #6fd3a0; margin-top: 3px; }
.ftr__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(24px, 3vw, 56px); }
.ftr__brand img { filter: brightness(0) invert(1); margin-bottom: 14px; }
.ftr__brand p { display: block; max-width: 40ch; }
.social { display: flex; gap: 8px; margin-top: 14px; }
.social a { border: 1px solid rgba(255, 255, 255, .18); border-radius: 3px; padding: 7px 13px; font-weight: 600; font-size: .85rem; }
.ftr__more { color: #8fe3b6 !important; font-weight: 600; }
.ftr__bottom { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 44px; padding-block: 20px 26px; font-size: .84rem; color: #7f928a; }
.pays { display: flex; gap: 8px; flex-wrap: wrap; }
.pays b { background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 3px; padding: 4px 10px; font-size: .74rem; font-weight: 700; }

/* Кнопка каталогу: бургер, що морфиться у хрестик */
.catbtn { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; padding: 12px 22px 12px 18px; border: 0; border-radius: 3px; cursor: pointer; transition: background .3s var(--ease), transform .2s var(--ease); }
.catbtn:hover, .catbtn[aria-expanded="true"] { background: var(--accent-deep); }
.catbtn:active { transform: scale(.98); }
.catbtn__ico { width: 18px; height: 14px; position: relative; }
.catbtn__ico i { position: absolute; left: 0; height: 2px; border-radius: 3px; background: currentColor; transition: transform .45s var(--ease), opacity .3s, width .45s var(--ease); }
.catbtn__ico i:nth-child(1) { top: 0; width: 100%; }
.catbtn__ico i:nth-child(2) { top: 6px; width: 70%; }
.catbtn__ico i:nth-child(3) { top: 12px; width: 100%; }
.catbtn:hover .catbtn__ico i:nth-child(2) { width: 100%; }
.catbtn[aria-expanded="true"] .catbtn__ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.catbtn[aria-expanded="true"] .catbtn__ico i:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.catbtn[aria-expanded="true"] .catbtn__ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Мега-меню на всю ширину: темна панель під шапкою */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--night); color: #e9efec; border-top: 1px solid rgba(255,255,255,.06);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; box-shadow: 0 40px 80px -30px rgba(10, 18, 14, .55); }
.mega.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.mega::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 420px at var(--gx, 70%) 0%, rgba(28, 154, 94, .22), transparent 70%); }
.mega__in { position: relative; display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); padding-block: 28px 34px; max-height: calc(100dvh - 160px); }
.mega__tabs { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid rgba(255,255,255,.08); padding-right: clamp(14px, 2vw, 28px); overflow: auto; }
.mega__tab { display: grid; grid-template-columns: 46px 1fr 18px; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 3px; color: #c9d3cf; position: relative; transition: background .2s, color .2s; }
.mega__tab img { width: 46px; height: 34px; object-fit: contain; background: #fff; border-radius: 3px; padding: 3px; }
.mega__tab b { display: block; font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: -.01em; color: #fff; line-height: 1.2; }
.mega__tab small { color: #7f8c87; font-size: .78rem; }
.mega__arr { opacity: 0; color: var(--accent); }
.mega__tab.is-on, .mega__tab:hover { background: rgba(255,255,255,.06); color: #fff; }
.mega__tab.is-on .mega__arr { opacity: 1; }
.mega__tab.is-on::before { content: ""; position: absolute; left: -2px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--accent); }
.mega__tab--plain { grid-template-columns: 1fr; margin-top: 8px; border: 1px dashed rgba(255,255,255,.14); }
.mega__panes { position: relative; min-height: 420px; }
.mega__pane { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 19vw, 320px); gap: clamp(18px, 2.4vw, 44px); visibility: hidden; opacity: 0; overflow: auto; }
.mega__pane.is-on { position: relative; opacity: 1; }
.mega.is-open .mega__pane.is-on { visibility: visible; }
.mega:not(.is-open), .mega:not(.is-open) * { pointer-events: none !important; }
.mega__phead { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.mega__big { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 3rem); line-height: 1; letter-spacing: -.04em; color: #fff; }
.mega__big::after { content: "."; color: var(--accent); }
.mega__all { white-space: nowrap; color: #fff; font-weight: 600; font-size: .9rem; padding: 10px 16px; border-radius: 3px; background: var(--accent); transition: background .2s; }
.mega__all:hover { color: #fff; background: var(--accent-deep); }
.mega__subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 10px; }
.mega__subs a { display: flex; align-items: center; gap: 12px; padding: 7px 10px 7px 7px; border-radius: 3px; color: #d5ddda; font-size: .9rem; line-height: 1.25; transition: background .3s var(--ease), color .3s; }
.mega__subs a:hover { background: rgba(255,255,255,.07); color: #fff; }
.mega__simg { flex: none; width: 56px; height: 42px; background: #fff; border-radius: 3px; display: grid; place-items: center; overflow: hidden; }
.mega__simg img { max-width: 88%; max-height: 86%; object-fit: contain; }
.mega__brands { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.mega__lbl { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7f8c87; margin-bottom: 12px; }
.mega__logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.mega__logos a { height: 58px; border-radius: 3px; background: #fff; display: grid; place-items: center; padding: 8px 14px; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: .8rem; text-align: center; transition: box-shadow .2s; }
.mega__logos a:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.mega__logos img { max-height: 40px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .35s, opacity .35s; }
.mega__logos a:hover img { filter: none; opacity: 1; }
.mega__feat { position: relative; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(160deg, #fff, #eef4f1); color: var(--ink); border-radius: 3px; padding: 18px; align-self: start; overflow: hidden; }
.mega__feat:hover { color: var(--ink); }
.mega__feat img { aspect-ratio: 4 / 3; object-fit: contain; width: 100%; mix-blend-mode: multiply; }
.mega__flag { align-self: flex-start; font-size: .72rem; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); padding: 4px 10px; border-radius: 3px; }
.mega__flag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.mega__ft { font-weight: 600; font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega__fp { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.02em; }
.mega-dim { position: fixed; inset: 0; background: rgba(10, 16, 13, .38); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.mega-dim.is-on { opacity: 1; pointer-events: auto; }
.navrow__in a.is-mega { color: var(--ink); }
.navrow__in a.is-mega::after { transform: scaleX(1); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(28,154,94,.6); } 70% { box-shadow: 0 0 0 7px rgba(28,154,94,0); } 100% { box-shadow: 0 0 0 0 rgba(28,154,94,0); } }
@media (prefers-reduced-motion: reduce) {
  .mega, .mega__tab, .mega__pane, .mega__pane * { animation: none !important; transition: none !important; }
  .mega__tab { opacity: 1; transform: none; }
}

/* ---------- Характеристики з іконками ---------- */
.spec-hl { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 18px 0 4px; }
.spec-hl a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 3px; background: var(--bg-2); color: var(--ink); font-size: .8rem; line-height: 1.25; transition: background .3s var(--ease), transform .3s var(--ease); }
.spec-hl a:hover { background: var(--accent-soft); color: var(--ink); transform: translateY(-2px); }
.spec-hl .bi { flex: none; color: var(--accent); }
.spec-hl small { display: block; color: var(--muted); font-size: .7rem; }
.spec-hl em { font-style: normal; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 3px; border: 1px solid var(--line); background: var(--panel); font-size: .86rem; color: var(--ink); transition: border-color .3s, background .3s; }
.tag i { font-style: normal; color: var(--muted); }
.tag i::after { content: "·"; margin-left: 8px; color: var(--line); }
.tag--ok { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.specgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 56px); counter-reset: s; }
.srow { display: grid; grid-template-columns: 44px minmax(120px, 38%) minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); transition: background .3s var(--ease); }
.srow:hover { background: var(--bg-2); }
.srow__ic { width: 44px; height: 44px; border-radius: 3px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); transition: transform .45s var(--ease), background .3s, color .3s; }
.srow:hover .srow__ic { transform: rotate(-8deg) scale(1.06); background: var(--accent); color: #fff; }
.srow__k { color: var(--muted); font-size: .88rem; line-height: 1.3; }
.srow__v { font-weight: 500; font-size: .94rem; line-height: 1.4; overflow-wrap: anywhere; }
.specs-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(18px, 2.4vw, 36px); }
.specs-wrap__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.specs-wrap__head span { color: var(--muted); font-size: .88rem; }
@media (max-width: 900px) {
  .specgrid { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 38px minmax(0, 40%) minmax(0, 1fr); gap: 10px; }
  .srow__ic { width: 38px; height: 38px; }
  .tags { gap: 6px; }
  .tag { font-size: .76rem; padding: 5px 10px; gap: 5px; }
  .tag i::after { margin-left: 5px; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1280px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento__tile--1, .bento__tile--2, .bento__tile--7, .bento__tile--8 { grid-column: span 2; }
  .topbar__hours { display: none !important; }
}
@media (max-width: 1024px) {
  .mega__in { grid-template-columns: 1fr; max-height: calc(100dvh - 130px); overflow: auto; padding-block: 16px 24px; }
  .mega__tabs { border-right: 0; padding-right: 0; }
  .mega__panes, .mega__tab .mega__arr { display: none; }
  .hero, .product, .catalog-layout, .contact-grid, .cart-layout, .split { grid-template-columns: 1fr; }
  .hero__word { font-size: 9rem; }
  .promos { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .promo--0 { grid-column: span 2; grid-row: auto; min-height: 300px; }
  .quotes { grid-auto-columns: minmax(280px, 70%); }
  .trustbar__in, .ftr__grid { grid-template-columns: 1fr 1fr; }
  .buybox, .facets, .summary, .consult { position: static; max-height: none; }
  .topbar__in > span:not(.topbar__right) { display: none; }
  .actions .action span { display: none; }
}
@media (max-width: 767px) {
  .hdr__main { flex-wrap: wrap; gap: 10px; }
  .logo img { width: 112px; }
  .search { order: 5; flex-basis: 100%; }
  .search button { padding: 0 14px; }
  .catbtn { padding: 11px 14px; }
  .catbtn > span:last-child { display: none; }
  .actions { margin-left: auto; }
  .hero { border-radius: 3px; padding: 30px 20px; }
  .hero h1 { max-width: none; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero__stats dd { font-size: .75rem; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; }
  .bento__tile--0 { grid-column: span 2; grid-row: span 2; }
  .bento__tile--1, .bento__tile--2, .bento__tile--7, .bento__tile--8 { grid-column: span 1; }
  .bento__tile--7 img, .bento__tile--8 img { width: 58%; }
  .bento__tile { padding: 14px; }
  .bento__t { font-size: .84rem; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
  .bento__tile img { width: 52%; height: 58%; right: 6%; bottom: 6%; }
  .bento__tile--0 .bento__t { font-size: 1.25rem; }
  .promos { grid-template-columns: 1fr; }
  .promo--0 { grid-column: auto; }
  .rail { grid-auto-columns: 62%; }
  .rail-btn { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card__body { padding: 10px 12px 12px; }
  .card__price b { font-size: 1.02rem; }
  .card__cart { width: 38px; height: 38px; }
  .trustbar__in, .ftr__grid { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-line .qty, .cart-line__sum { grid-column: 2; }
  .stickybuy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--panel); border-top: 1px solid var(--line); padding: 10px 14px; justify-content: space-between; align-items: center; gap: 12px; box-shadow: 0 -10px 30px -12px rgba(17, 26, 22, .2); }
  .stickybuy b { font-family: var(--display); font-size: 1.2rem; display: block; }
  .stickybuy .badge { margin: 0; }
  body:has(.stickybuy) .ftr { padding-bottom: 70px; }
}

/* =====================================================================
   Палітра «довіра + дія»: світлий теплий фон, глибокий синій (як «К» у логотипі) —
   довіра й навігація; помаранчевий — лише кнопки покупки (найвища конверсія CTA);
   зелений — тільки «є в наявності». Темно-зелених фонів більше немає.
   ===================================================================== */
.dot, .mega__flag::before { background: var(--ok); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 160, 90, .45); } 50% { box-shadow: 0 0 0 7px rgba(22, 160, 90, 0); } }

/* Кнопки дії — помаранчеві */
.btn--primary { background: var(--cta); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 26px -12px rgba(0, 166, 100, .6); }
.btn--primary:hover { background: var(--cta-deep); color: #fff; }
.search button, .mega__all { background: var(--cta); }
.search button:hover, .mega__all:hover { background: var(--cta-deep); }
.action__n { background: var(--cta); }
.card__cart:hover, .card:hover .card__cart { background: var(--cta); color: #fff; }
.card::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(20, 24, 31, .6), transparent 60%); }

/* Наявність — зелена */
.badge--shop, .tag--ok, .mega__flag { background: var(--ok-soft); color: var(--ok-deep); }
.card__stock--shop { color: var(--ok-deep); }
.card__flag { background: var(--ok); color: #fff; }
.done__icon { background: var(--ok); box-shadow: 0 18px 36px -14px rgba(22, 160, 90, .6); }

/* Верхня смуга і підвал — глибокий синій замість зеленого */
.topbar { background: var(--night); color: #b8c3d6; }
.topbar .ic, .ftr .ic { color: #25d08a; }
.ftr { background: var(--night); color: #a9b5c9; }
.ftr a { color: #dbe3f0; }
.ftr__more { color: #7fe0b3 !important; }
.ftr__bottom { color: #7d8aa1; }
.staging { background: #fff4d6; color: #7a5200; }

/* Hero — світлий, з м'якими плямами синього й персикового */
.hero { color: var(--ink); background: radial-gradient(900px 520px at 90% 10%, rgba(20, 24, 31, .13), transparent 60%), radial-gradient(700px 480px at 0% 100%, rgba(255, 138, 76, .14), transparent 60%), linear-gradient(160deg, #f3f6fd, #fdf7f1); border: 1px solid var(--line); }
.hero::before { background-image: linear-gradient(rgba(15, 26, 44, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 26, 44, .045) 1px, transparent 1px); }
.hero__word { color: rgba(15, 26, 44, .04); }
.hero .eyebrow { color: var(--accent); }
.hero h1 { color: var(--ink); }
.hero h1 em { color: var(--accent); }
.lead { color: var(--ink-2); }
.hero .btn--ghost { color: var(--ink); border-color: rgba(15, 26, 44, .18); background: rgba(255, 255, 255, .6); }
.hero .btn--ghost:hover { color: var(--ink); border-color: var(--ink); }
.hero__stats { border-top-color: rgba(15, 26, 44, .1); }
.hero__stats dt { color: var(--ink); }
.hero__stats dd { color: var(--muted); }
.hero__stage { box-shadow: 0 40px 80px -36px rgba(15, 26, 44, .35), inset 0 1px 0 #fff; }
.hero__tag { background: rgba(15, 26, 44, .86); }
.hero__tag small { color: #7fe0b3; }

/* Плитки, промо, консультація */
.bento__tile--0 { background: linear-gradient(150deg, #14181f, #000000); }
.bento__tile--0:hover { background: linear-gradient(150deg, #1f242d, #0a0c10); }
.promo--green { background: radial-gradient(600px 300px at 90% 10%, rgba(37, 208, 138, .45), transparent 60%), linear-gradient(150deg, #14181f, #2a303b); }
.promo--dark { background: linear-gradient(150deg, #13233f, #22375e); }
.promo--orange { background: linear-gradient(150deg, #008751, #00b870); }
.avatar { background: var(--accent-soft); color: var(--accent-deep); }
.consult { background: radial-gradient(700px 360px at 100% 0%, rgba(37, 208, 138, .35), transparent 60%), linear-gradient(160deg, #0d1117, #14181f); }
.consult .eyebrow { color: #9fe8c6; }

/* Мега-меню — світле */
.mega { background: var(--panel); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 40px 70px -30px rgba(15, 26, 44, .3); }
.mega::before { background: radial-gradient(900px 420px at var(--gx, 70%) 0%, rgba(20, 24, 31, .06), transparent 70%); }
.mega__tabs { border-right-color: var(--line); }
.mega__tab { color: var(--ink-2); }
.mega__tab b { color: var(--ink); }
.mega__tab small { color: var(--muted); }
.mega__tab.is-on, .mega__tab:hover { background: var(--accent-soft); color: var(--ink); }
.mega__tab--plain { border-color: var(--line); }
.mega__tab img, .mega__simg, .mega__logos a { border: 1px solid var(--line); }
.mega__big { color: var(--ink); }
.mega__subs a { color: var(--ink-2); }
.mega__subs a:hover { background: var(--bg-2); color: var(--ink); }
.mega__brands { border-top-color: var(--line); }
.mega__lbl { color: var(--muted); }
.mega__feat { background: linear-gradient(160deg, #f3f6fd, #fdf5ee); border: 1px solid var(--line); }
.mega-dim { background: rgba(15, 26, 44, .28); }

/* Фото по центру і крупніше */
.mega__tab { grid-template-columns: 56px 1fr 18px; }
.mega__tab img { width: 56px; height: 44px; padding: 4px; object-fit: contain; object-position: center; }
.mega__simg { width: 68px; height: 54px; padding: 5px; }
.mega__simg img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center; }
.mega__subs { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 12px; }
.card__img { display: grid; place-items: center; padding: 14px; }
.card__img img { object-position: center; }
.thumb img { object-position: center; }
.gallery__main { display: grid; place-items: center; }
.gallery__main img { object-position: center; }

/* ---------- Живий пошук ---------- */
.search { position: relative; }
.search.is-loading .ic { animation: spin 1s linear infinite; }
.search.is-suggest { border-color: var(--accent); background: var(--panel); border-bottom-left-radius: 0; }
.suggest { position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 1px); z-index: 70; background: var(--panel); border: 1.5px solid var(--accent); border-top: 1px solid var(--line); border-radius: 0 0 3px 3px; box-shadow: 0 30px 60px -24px rgba(15, 26, 44, .35); max-height: min(72vh, 640px); overflow: auto; padding: 10px; }
.suggest__fix { padding: 8px 10px 4px; font-size: .9rem; color: var(--muted); }
.suggest__fix a { color: var(--accent); font-weight: 600; }
.suggest__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.suggest__chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 3px; background: var(--bg-2); font-size: .86rem; color: var(--ink); }
.suggest__chip img { width: 30px; height: 24px; object-fit: contain; background: #fff; border-radius: 3px; padding: 2px; }
.suggest__chip--brand { background: var(--accent-soft); font-weight: 600; }
.suggest__chip:hover { background: var(--accent-soft); color: var(--accent-deep); }
.suggest__lbl { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.suggest__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 10px; border-radius: 3px; color: var(--ink); }
.suggest__item:hover, .suggest__item.is-active { background: var(--bg-2); color: var(--ink); }
.suggest__img { width: 64px; height: 52px; background: #fff; border: 1px solid var(--line); border-radius: 3px; display: grid; place-items: center; padding: 4px; }
.suggest__img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.suggest__t { font-size: .9rem; line-height: 1.3; }
.suggest__t small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.suggest__t small.is-shop { color: var(--ok-deep); }
.suggest__item b { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.suggest mark { background: #fff0c2; color: inherit; border-radius: 3px; padding: 0 1px; }
.suggest__all, .suggest a.is-active.suggest__all { display: block; text-align: center; margin-top: 6px; padding: 11px; border-radius: 3px; background: var(--cta-soft); color: var(--cta-deep); font-weight: 600; }
.suggest__all:hover { background: var(--cta); color: #fff; }
.suggest__empty { padding: 16px 12px; color: var(--muted); font-size: .92rem; }
.search-note { background: var(--accent-soft); border-radius: 3px; padding: 12px 16px; color: var(--accent-ink); }
@media (max-width: 767px) {
  .suggest { position: fixed; left: 10px; right: 10px; top: auto; margin-top: 6px; border-radius: 3px; border-top: 1.5px solid var(--accent); }
  .suggest__item { grid-template-columns: 52px minmax(0, 1fr); }
  .suggest__item b { grid-column: 2; }
}

/* ---------- Тонкі світлі скролбари замість темних системних ---------- */
* { scrollbar-width: thin; scrollbar-color: #cfd6e2 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #d3d9e4; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #aab4c5; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ---------- Підкатегорії: плитки з іконками старого сайту, без скролу ---------- */
.subcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 14px 0 22px; }
.subcat { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: .9rem; line-height: 1.25; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.subcat:hover { border-color: var(--accent); color: var(--ink); box-shadow: 0 10px 24px -16px rgba(20, 24, 31, .6); }
.subcat__ic { flex: none; width: 48px; height: 48px; border-radius: 3px; background: var(--bg-2); display: grid; place-items: center; overflow: hidden; color: var(--accent); }
.subcat__ic img { width: 86%; height: 86%; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
.subcat__ic--svg { background: var(--accent-soft); }
.subcat__ic--svg img { width: 64%; height: 64%; opacity: .82; mix-blend-mode: normal; }
.subcat:hover .subcat__ic--svg img { opacity: 1; }
.subcat__t { hyphens: auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subcats.is-collapsed .subcat--more { display: none; }
.subcat--toggle { background: var(--bg-2); border-style: dashed; font-weight: 600; }
.subcat--toggle .subcat__ic { background: #fff; }
.subcats:not(.is-collapsed) .subcat--toggle svg { transform: rotate(180deg); }
@media (max-width: 767px) {
  .subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .subcat { padding: 8px 10px 8px 8px; font-size: .84rem; gap: 10px; }
  .subcat__ic { width: 40px; height: 40px; }
}

/* ---------- Фільтри: без внутрішніх скролів, «Показати ще» ---------- */
.facets { max-height: none; overflow: visible; position: static; padding: 18px 18px 8px; }
.facet__opts { max-height: none; overflow: visible; }
.facet__opts.is-collapsed .facet__opt--more { display: none; }
.facet__more { align-self: flex-start; margin: 6px 0 2px 4px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: .86rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.facet__more:hover { color: var(--accent-deep); text-decoration: underline; }
.facet > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.facet[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.facet__opt .box { border-color: #c5cdda; }
.facet__v { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Картки: мітки, вигода, частинами ---------- */
.card__flags { position: absolute; top: 12px; left: 12px; z-index: 1; display: flex; gap: 6px; }
.card__flags .card__sale { position: static; }
.card__hit { font-size: .72rem; font-weight: 700; border-radius: 3px; padding: 3px 8px; background: var(--ink); color: #fff; }
.card__old { display: flex; gap: 6px; align-items: baseline; }
.card__old em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--sale); }
.card__price small { color: var(--muted); font-size: .74rem; margin-top: 2px; }

/* ---------- Блок покупки: дефіцит, доставка, соцдоказ ---------- */
.buybox__hit { font-size: .76rem; font-weight: 700; background: var(--ink); color: #fff; border-radius: 3px; padding: 4px 10px; }
.buybox__scarce { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--ink-2); margin: 4px 0 12px; }
.buybox__scarce b { color: var(--sale); }
.buybox__bar { flex: 0 0 90px; height: 6px; border-radius: 3px; background: #fde3e6; overflow: hidden; }
.buybox__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a3d, var(--sale)); }
.buybox__eta { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); margin: 12px 0; padding: 10px 12px; border-radius: 3px; background: var(--ok-soft); }
.buybox__eta .ic { color: var(--ok-deep); margin-top: 1px; }
.buybox__eta b { color: var(--ink); }
.buybox__proof { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--muted); margin-top: 14px; }
.buybox__proof b { color: var(--ink); }
.buybox__size { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--accent); }
.buybox__size .bi { color: var(--accent); }

/* ---------- Липка панель товару (десктоп) ---------- */
.pbar { position: fixed; left: 0; right: 0; top: 0; z-index: 65; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 14px 30px -22px rgba(15, 26, 44, .4); transform: translateY(-105%); transition: transform .3s var(--ease); }
.pbar.is-on { transform: none; }
.pbar__in { display: flex; align-items: center; gap: 18px; min-height: 76px; padding-block: 10px; }
.pbar__img { width: 64px; height: 48px; object-fit: contain; object-position: center; background: var(--bg-2); border-radius: 3px; padding: 3px; mix-blend-mode: multiply; }
.pbar__info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.pbar__t { font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar__meta { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--muted); }
.pbar__meta .badge { font-size: .74rem; padding: 2px 8px; }
.pbar__nav { display: flex; gap: 4px; }
.pbar__nav a { padding: 8px 12px; border-radius: 3px; font-size: .88rem; color: var(--ink-2); }
.pbar__nav a:hover { background: var(--bg-2); color: var(--ink); }
.pbar__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pbar__price s { color: var(--muted); font-size: .8rem; }
.pbar__price b { font-family: var(--display); font-size: 1.35rem; letter-spacing: -.02em; white-space: nowrap; }
.pbar form { margin: 0; }
.pbar__buy { padding: 13px 34px; }
@media (max-width: 1280px) { .pbar__nav { display: none; } }
@media (max-width: 1024px) { .pbar { display: none; } }

/* ---------- З цим купують ---------- */
.xsell__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.xsell__item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, box-shadow .2s; }
.xsell__item:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.xsell__img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--bg-2); border-radius: 3px; padding: 10px; }
.xsell__img img { width: 100%; height: 100%; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
.xsell__t { font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.xsell__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.xsell__foot b { font-family: var(--display); font-size: 1.05rem; }
.xsell__add { font-size: .82rem; font-weight: 600; color: var(--cta-deep); background: var(--cta-soft); border-radius: 3px; padding: 7px 10px; white-space: nowrap; }
.xsell__add:hover { background: var(--cta); color: #fff; }

/* ---------- Нещодавно переглянуті ---------- */
.recent__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.recent__item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.recent__item:hover { border-color: var(--accent); color: var(--ink); }
.recent__item img { width: 64px; height: 52px; object-fit: contain; object-position: center; background: var(--bg-2); border-radius: 3px; padding: 3px; mix-blend-mode: multiply; }
.recent__item span { font-size: .84rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent__item b { display: block; font-family: var(--display); font-size: .92rem; margin-top: 3px; }
@media (max-width: 767px) {
  .xsell__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xsell__item { padding: 10px; }
  .xsell__foot { flex-direction: column; align-items: stretch; }
  .xsell__add { text-align: center; }
  .facets__box > summary { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); border-radius: 3px; padding: 12px 14px; }
  .facets { padding: 8px; }
}

/* =====================================================================
   Stage — повноекранний фото-слайдер: величезна типографіка, лінії-шторки,
   нумерована навігація з прогресом, «живий» товар з магазину.
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: clamp(560px, calc(100dvh - 150px), 980px); color: #fff; overflow: hidden; isolation: isolate; background: #0d1622; }
.stage__media { position: absolute; inset: 0; z-index: -2; }
.stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease, transform 7s cubic-bezier(.2, .6, .2, 1); }
.stage__img.is-on { opacity: 1; transform: scale(1); }
.stage__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 14, 22, .78) 0%, rgba(8, 14, 22, .42) 45%, rgba(8, 14, 22, .08) 75%), linear-gradient(0deg, rgba(8, 14, 22, .8) 0%, transparent 42%); }
.stage__in { position: relative; min-height: inherit; display: grid; grid-template-rows: auto 1fr auto; padding-block: clamp(20px, 2.4vw, 36px); }
.stage__top { display: flex; justify-content: space-between; gap: 16px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); border-bottom: 1px solid rgba(255, 255, 255, .18); padding-bottom: 14px; }
.stage__heads { display: grid; align-items: center; }
.stage__h { grid-area: 1 / 1; margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 8.6vw, 10.5rem); line-height: .86; letter-spacing: -.055em; text-transform: uppercase; pointer-events: none; }
.stage__line { display: block; overflow: hidden; padding-bottom: .04em; }
.stage__line > span { display: inline-block; transform: translateY(108%); transition: transform .9s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--d) * 90ms); }
.stage__line:nth-child(2) > span { color: #25d08a; padding-left: clamp(0px, 7vw, 140px); }
.stage__line:nth-child(3) > span { padding-left: clamp(0px, 2.5vw, 48px); }
.stage__h.is-on .stage__line > span { transform: none; transition-delay: calc(var(--d) * 90ms + 250ms); }
.stage__bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 2.4vw, 44px); align-items: end; }
.stage__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.stage__link { display: inline-flex; gap: 8px; align-items: center; color: #fff; font-weight: 600; font-size: .92rem; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 2px; }
.stage__link:hover { color: #fff; border-color: #fff; }
.stage__nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 24px); }
.stage__tab { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; padding: 14px 0 16px; color: rgba(255, 255, 255, .6); transition: color .3s; }
.stage__tab:hover, .stage__tab.is-on { color: #fff; }
.stage__num { font-family: var(--display); font-size: .78rem; font-weight: 600; grid-row: span 2; padding-top: 2px; }
.stage__k { font-weight: 600; font-size: .98rem; line-height: 1.2; }
.stage__cnt { font-size: .76rem; color: rgba(255, 255, 255, .55); }
.stage__cnt::after { content: " моделей"; }
:lang(ru) .stage__cnt::after { content: " моделей"; }
.stage__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.stage__bar i { display: block; height: 100%; width: 100%; background: #25d08a; transform: scaleX(0); transform-origin: left; }
.stage__tab.is-on .stage__bar i { animation: stageFill var(--dur, 6.5s) linear forwards; }
.stage.is-paused .stage__tab.is-on .stage__bar i { animation-play-state: paused; }
@keyframes stageFill { to { transform: scaleX(1); } }
.stage__prod { display: grid; grid-template-columns: 96px minmax(0, 220px); gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 3px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); color: #fff; transition: background .3s; }
.stage__prod:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.stage__pimg { width: 96px; height: 72px; border-radius: 3px; background: #fff; display: grid; place-items: center; padding: 4px; }
.stage__pimg img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.stage__pt { display: flex; flex-direction: column; gap: 2px; font-size: .84rem; line-height: 1.3; }
.stage__pt small { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7fe0b3; font-weight: 600; }
.stage__pt b { font-family: var(--display); font-size: 1.15rem; margin-top: 2px; }
.stage + .marquee { margin-top: 0; border-top: 0; }
.v-home main > .stage:first-child { margin-top: 0; }
@media (max-width: 1280px) {
  .stage__bottom { grid-template-columns: auto minmax(0, 1fr); }
  .stage__prod { display: none; }
}
@media (max-width: 900px) {
  .stage { min-height: clamp(470px, 72dvh, 680px); }
  .stage__top span:last-child { display: none; }
  .stage__bottom { grid-template-columns: 1fr; }
  .stage__nav { order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .stage__k { font-size: .8rem; }
  .stage__cnt { display: none; }
  .stage__line:nth-child(2) > span { padding-left: 0; }
  .stage__shade { background: linear-gradient(0deg, rgba(8, 14, 22, .88) 0%, rgba(8, 14, 22, .35) 60%, rgba(8, 14, 22, .25) 100%); }
}
@media (max-width: 520px) {
  .stage__num { display: none; }
  .stage__tab { grid-template-columns: 1fr; padding: 10px 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__img { transition: opacity .3s; transform: none !important; }
  .stage__line > span { transition: none; transform: none; }
  .stage__tab.is-on .stage__bar i { animation: none; transform: scaleX(1); }
}

/* ---------- Плитки категорій з фото ---------- */
.bento__tile--photo { background: #0d1622; color: #fff; }
.bento__tile--photo:hover { background: #0d1622; color: #fff; }
.bento__tile--photo .bento__photo { position: absolute; inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: normal; z-index: -2; border-radius: 0; padding: 0; background: none; aspect-ratio: auto; transition: transform .8s var(--ease); }
.bento__tile--photo:hover .bento__photo { transform: scale(1.05); }
.bento__tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 14, 22, .55) 0%, rgba(8, 14, 22, .05) 55%, rgba(8, 14, 22, .35) 100%); }
.bento__tile--photo .bento__t { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.bento__tile--photo .bento__t .ic { color: #fff; }
.bento__tile--0.bento__tile--photo .bento__photo { width: 100%; height: 100%; right: 0; bottom: 0; }

/* ---------- Промо з фото ---------- */
.promo--photo { background: #0d1622; }
.promo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; transition: transform .9s var(--ease); }
.promo--photo:hover .promo__bg { transform: scale(1.04); }
.promo--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 14, 22, .78) 0%, rgba(8, 14, 22, .25) 70%, rgba(8, 14, 22, .1) 100%); }
.promo--photo.promo--0::after { background: linear-gradient(0deg, rgba(8, 14, 22, .85) 0%, rgba(8, 14, 22, .1) 60%); }

/* ---------- Консультація з фото ---------- */
.consult--photo { position: sticky; overflow: hidden; isolation: isolate; background: #0d1622; }
.consult__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.consult--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(10, 12, 16, .9), rgba(10, 12, 16, .55)); }

/* =====================================================================
   Строгий редакційний стиль: гострі кути, тонкі лінії замість тіней,
   без зерна, градієнтних плям, скла і «світіння» — тільки фото, шрифт і колір.
   ===================================================================== */
:root { --shadow: none; --shadow-lg: 0 18px 40px -28px rgba(15, 26, 44, .35); }
body::after { display: none; }
.dot, .mega__flag::before { animation: none; }
.eyebrow .dot { display: none; }
.btn--primary { box-shadow: none; }
.btn--primary:hover { box-shadow: none; }
.btn { letter-spacing: .01em; }
.mega::before { display: none; }
.hero::before { display: none; }
.stage__prod { background: #fff; color: var(--ink); border: 0; backdrop-filter: none; box-shadow: none; }
.stage__prod:hover { background: #fff; color: var(--ink); }
.stage__pt small { color: var(--ok-deep); }
.stage__pimg { background: var(--bg-2); }

/* Картки товарів: рамка-лінія, без підйому й прожектора */
.card { border: 1px solid var(--line); box-shadow: none; transition: border-color .25s; }
.card::before { display: none; }
.card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.card__img { background: #f2f3f5; border-bottom: 1px solid var(--line); }
.card__brand { letter-spacing: .14em; }
.card__title { font-weight: 500; }
.card__price b { font-weight: 700; }
.card__cart { border: 1px solid var(--line); background: #fff; }
.card__cart:hover, .card:hover .card__cart { background: var(--cta); border-color: var(--cta); color: #fff; }
.card__sale, .card__flag, .card__hit { border-radius: 0; letter-spacing: .04em; text-transform: uppercase; font-size: .66rem; padding: 4px 7px; }
.card__flag { background: #fff; color: var(--ok-deep); border: 1px solid currentColor; }
.grid, .rail { gap: 0; }
.grid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.grid > .card { border-width: 0 1px 1px 0; border-radius: 0; }
.grid > .card:hover { box-shadow: inset 0 0 0 1px var(--ink); border-color: var(--line); }
.rail { gap: 0; border-left: 1px solid var(--line); }
.rail > .card { border-left-width: 0; border-radius: 0; }
.rail > .card:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* «Частинами» у картці */
.card__parts { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .74rem; color: var(--ink-2); }
.card__parts span:last-child { margin-left: 3px; }
.bank { display: inline-grid; line-height: 0; }
.bank svg { display: block; }

/* Блок «частинами» у товарі */
.parts { border: 1px solid var(--line); padding: 14px 16px; margin: 4px 0 14px; background: #fff; }
.parts__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .88rem; }
.parts__banks { display: inline-flex; gap: 4px; }
.parts__banks .bank { width: auto; height: 26px; }
.parts__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.parts__sum { display: flex; align-items: baseline; gap: 8px; }
.parts__m { font-family: var(--display); font-size: 1.45rem; letter-spacing: -.02em; }
.parts__sum span { color: var(--muted); font-size: .88rem; }
.parts__sum i { font-style: normal; color: var(--ink); font-weight: 600; }
.parts__opts { display: flex; border: 1px solid var(--line); }
.parts__opt { min-width: 38px; height: 34px; border: 0; border-left: 1px solid var(--line); background: #fff; font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.parts__opt:first-child { border-left: 0; }
.parts__opt:hover { background: var(--bg-2); }
.parts__opt.is-on { background: var(--ink); color: #fff; }
.parts__note { display: block; margin-top: 8px; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.buybox__parts { display: none; }

/* Платіжні знаки в підвалі */
.pays { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pay { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; background: #fff; border-radius: 3px; }
.pay svg { display: block; }
.pay b { font-size: .76rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.pay b { border: 0; padding: 0; background: none; }
@media (max-width: 767px) { .grid { gap: 0; } }

/* Блок покупки та інші панелі — лінії замість тіней */
.buybox { box-shadow: none; }
.bento__tile:hover { transform: none; }
.promo:hover { transform: none; }
.subcat:hover { box-shadow: none; }
.xsell__item:hover { box-shadow: none; border-color: var(--ink); }
.spec-hl a:hover { transform: none; }
.srow:hover .srow__ic { transform: none; }
.mega__logos a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.suggest { box-shadow: 0 24px 48px -30px rgba(15, 26, 44, .45); }
.pill, .chip, .tag, .badge, .suggest__chip, .mega__all, .mega__flag, .buybox__hit, .stage__link { border-radius: 3px; }
.avatar { border-radius: 0; }
.rail-btn { border-radius: 0; }

.parts__w { font-style: normal; }

.bank { display: inline-block; width: auto; height: 18px; object-fit: contain; vertical-align: middle; }
.pay img { display: block; width: auto; height: 22px; object-fit: contain; }

/* Фото й іконки категорій — завжди по центру своєї рамки */
.mega__tab img, .mega__simg img, .subcat__ic img, .suggest__chip img, .bento__tile img:not(.bento__photo) { object-fit: contain; object-position: 50% 50%; margin: auto; }
.mega__simg, .subcat__ic, .mega__tab img { display: grid; place-items: center; }
.subcat__ic img { width: 84%; height: 84%; }
.subcat__ic--svg img { width: 62%; height: 62%; }
.mega__simg { display: flex; align-items: center; justify-content: center; }
.mega__simg img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; margin: 0; }
.mega__tab img { display: block; }

/* ---------- Іконки Tabler (маска SVG, колір — currentColor) ---------- */
.ti { display: inline-block; width: 24px; height: 24px; flex: none; background: currentColor; -webkit-mask: var(--ti) center / contain no-repeat; mask: var(--ti) center / contain no-repeat; }
.subcat__ic--ti { background: var(--accent-soft); color: var(--accent); }
.subcat__ic--ti .ti { width: 26px; height: 26px; }
.subcat:hover .subcat__ic--ti { background: var(--accent); color: #fff; }
.mega__tab { grid-template-columns: 44px 1fr 18px; }
.mega__ti { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 3px; }
.mega__ti .ti { width: 24px; height: 24px; }
.mega__tab.is-on .mega__ti, .mega__tab:hover .mega__ti { background: var(--accent); color: #fff; }

/* ---------- Порівняння ---------- */
.action__ti { width: 24px; height: 24px; }
.card__acts { display: flex; gap: 6px; align-items: center; }
.cmp { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .88rem; font-weight: 600; }
.cmp .ti { width: 18px; height: 18px; }
.cmp:hover { color: var(--accent); }
.cmp.is-on { color: var(--accent); }
.cmp--icon { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--line); background: #fff; flex: none; }
.cmp--icon span { display: none; }
.cmp--icon.is-on { border-color: var(--accent); background: var(--accent-soft); }
.cmp--wide { width: 100%; justify-content: center; padding: 11px; border: 1px solid var(--line); }
.cmp--wide.is-on { border-color: var(--accent); background: var(--accent-soft); }
.buybox__row2 { margin: 10px 0; }
.cmp-tools { display: flex; gap: 16px; align-items: center; margin: 8px 0 14px; }
.cmp-diff { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); }
.cmp-table { border-collapse: collapse; min-width: calc(220px + var(--cols) * 230px); width: 100%; font-size: .9rem; }
.cmp-table th, .cmp-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.cmp-table tbody th { width: 220px; font-weight: 500; color: var(--muted); background: #fafbfc; position: sticky; left: 0; z-index: 1; }
.cmp-table tbody th .cmp-ic { display: inline-grid; vertical-align: -4px; margin-right: 8px; color: var(--accent); }
.cmp-table tr.is-diff td { background: #fffdf3; font-weight: 500; }
.cmp-table.only-diff tr.is-same { display: none; }
.cmp-table__corner { position: sticky; left: 0; background: #fff; z-index: 2; }
.cmp-prod { position: relative; width: 230px; background: #fff; }
.cmp-prod__del { position: absolute; top: 6px; right: 8px; color: var(--muted); font-size: .9rem; }
.cmp-prod__img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #f2f3f5; margin-bottom: 10px; padding: 8px; }
.cmp-prod__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cmp-prod__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; line-height: 1.35; min-height: 4em; }
.cmp-prod__st { display: block; font-size: .78rem; color: var(--muted); margin: 6px 0; font-weight: 500; }
.cmp-prod__st--shop { color: var(--ok-deep); }
.cmp-prod__price { display: block; font-family: var(--display); font-size: 1.2rem; margin-bottom: 8px; }
.cmp-prod__buy { width: 100%; padding: 9px; }
.empty-cmp { display: grid; justify-items: start; gap: 14px; padding: 40px 0; max-width: 520px; }
.empty-cmp > .ti { width: 44px; height: 44px; color: var(--accent); }

/* ---------- Кабінет ---------- */
.auth { display: grid; place-items: center; padding: clamp(24px, 5vw, 72px) 0; }
.auth__card { width: min(460px, 100%); border: 1px solid var(--line); background: #fff; padding: clamp(22px, 3vw, 36px); }
.auth__card h1 { font-size: 1.6rem; }
.auth__form { display: grid; gap: 14px; margin: 18px 0 10px; }
.auth__form .field { display: grid; gap: 6px; }
.auth__form .field span { font-size: .86rem; font-weight: 600; }
.auth__form input { font: inherit; padding: 13px 14px; border: 1px solid var(--line); border-radius: 3px; }
.auth__form input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.auth__code { font-size: 1.5rem !important; letter-spacing: .35em; text-align: center; font-family: var(--display) !important; }
.auth__alt { font-size: .86rem; color: var(--accent); }
.auth__why { list-style: none; padding: 16px 0 0; margin: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: .9rem; color: var(--ink-2); }
.auth__why li { display: flex; gap: 10px; align-items: center; }
.auth__why .ti { color: var(--accent); width: 20px; height: 20px; }
.auth__help { margin-top: 14px; font-size: .84rem; }
.form-err { background: #fdecee; color: #a3172b; padding: 10px 12px; font-size: .9rem; }
.cab__head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-end; padding: 22px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.cab__head h1 { margin: 0 0 4px; }
.cab__stats { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.cab__stats > div b { display: block; font-family: var(--display); font-size: 1.4rem; }
.cab__stats > div span { color: var(--muted); font-size: .82rem; }
.cab__cmp, .cab__out { display: inline-flex; gap: 8px; align-items: center; font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink); background: none; border: 1px solid var(--line); padding: 9px 14px; cursor: pointer; }
.cab__cmp .ti, .cab__out .ti { width: 18px; height: 18px; }
.cab__cmp:hover, .cab__out:hover { border-color: var(--ink); color: var(--ink); }
.orders { border-top: 1px solid var(--line); }
.order { border-bottom: 1px solid var(--line); }
.order > summary { list-style: none; display: grid; grid-template-columns: 110px 110px 1fr auto auto; gap: 16px; align-items: center; padding: 14px 4px; cursor: pointer; }
.order > summary::-webkit-details-marker { display: none; }
.order > summary:hover { background: #fafbfc; }
.order__no { font-weight: 700; }
.order__date { color: var(--muted); }
.order__st { justify-self: start; font-size: .78rem; font-weight: 700; padding: 3px 8px; letter-spacing: .02em; }
.order__st--ok { background: var(--ok-soft); color: var(--ok-deep); }
.order__st--wait { background: var(--accent-soft); color: var(--accent-deep); }
.order__st--new { background: #fff4d6; color: #7a5200; }
.order__st--off { background: #f1f2f4; color: var(--muted); }
.order__ttn { display: inline-flex; gap: 6px; align-items: center; font-size: .84rem; color: var(--ink-2); }
.order__ttn .ti { width: 16px; height: 16px; }
.order__sum { font-family: var(--display); }
.order__items { padding: 4px 4px 16px; display: grid; gap: 8px; }
.order__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; font-size: .9rem; }
.order__item img { width: 64px; height: 48px; object-fit: contain; background: #f2f3f5; }
.order__noimg { width: 64px; height: 48px; background: #f2f3f5; }
.order__track { font-weight: 600; color: var(--accent); font-size: .9rem; }
@media (max-width: 767px) {
  .order > summary { grid-template-columns: 1fr auto; row-gap: 4px; }
  .order__date, .order__ttn { grid-column: 1; }
  .cmp--icon { width: 38px; height: 38px; }
  .actions .action:first-child { display: none; }
}
.ti { font-style: normal; }

/* ---------- Слайдер акцій ---------- */
.promo-band { margin: 16px 0 6px; }
.promo-sl { position: relative; overflow: hidden; background: #0d1622; color: #fff; isolation: isolate; }
.promo-sl--band { height: clamp(150px, 13vw, 210px); }
.promo-sl--card { height: 100%; min-height: 380px; }
.promo-sl__slide { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 2.4vw, 40px); padding: 0 clamp(18px, 3vw, 48px); color: #fff; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.promo-sl__slide.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.promo-sl__slide:hover { color: #fff; }
.promo-sl__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 6s ease; }
.promo-sl__slide.is-on .promo-sl__bg { transform: scale(1); }
.promo-sl__slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 14, 22, .9) 0%, rgba(8, 14, 22, .6) 50%, rgba(8, 14, 22, .15) 100%); }
.promo-sl__tag { position: absolute; top: 14px; left: clamp(18px, 3vw, 48px); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--cta); padding: 4px 8px; }
.promo-sl__big { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .9; letter-spacing: -.05em; color: #25d08a; }
.promo-sl__body { display: flex; flex-direction: column; gap: 6px; max-width: 60ch; }
.promo-sl__t { font-family: var(--display); font-size: clamp(1.05rem, 1.4vw, 1.6rem); line-height: 1.1; letter-spacing: -.02em; }
.promo-sl__x { font-size: .88rem; color: rgba(255, 255, 255, .78); line-height: 1.4; }
.promo-sl__cta { font-weight: 600; font-size: .88rem; margin-top: 4px; border-bottom: 1px solid rgba(255, 255, 255, .5); align-self: flex-start; }
.promo-sl__dots { position: absolute; right: clamp(14px, 2vw, 28px); bottom: 12px; display: flex; gap: 6px; z-index: 2; }
.promo-sl__dot { width: 26px; height: 16px; padding: 7px 0; border: 0; background: none; cursor: pointer; }
.promo-sl__dot i { display: block; height: 2px; background: rgba(255, 255, 255, .4); }
.promo-sl__dot.is-on i { background: #25d08a; }
.promo-sl__all { position: absolute; right: clamp(14px, 2vw, 28px); top: 12px; z-index: 2; color: #fff; font-size: .8rem; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.promo-sl__all:hover { color: #fff; }
/* варіант «картка» — вертикальний, як товар у сітці */
.promo-sl--card .promo-sl__slide { grid-template-columns: 1fr; align-content: end; padding: 18px 18px 42px; }
.promo-sl--card .promo-sl__slide::after { background: linear-gradient(0deg, rgba(8, 14, 22, .92) 0%, rgba(8, 14, 22, .55) 55%, rgba(8, 14, 22, .15) 100%); }
.promo-sl--card .promo-sl__tag { left: 18px; }
.promo-sl--card .promo-sl__big { font-size: 3.4rem; }
.promo-sl--card .promo-sl__t { font-size: 1.15rem; }
.promo-sl--card .promo-sl__x { font-size: .82rem; }
.promo-sl--card .promo-sl__dots { left: 18px; right: auto; }
.grid-promo { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 100%; }
.navrow__promo { color: var(--cta-deep) !important; font-weight: 700; }
@media (max-width: 767px) {
  .promo-sl--band { height: 190px; }
  .promo-sl__slide { grid-template-columns: 1fr; align-content: end; padding-bottom: 34px; gap: 4px; }
  .promo-sl__big { font-size: 2.4rem; }
  .promo-sl__x { display: none; }
  .promo-sl__all { display: none; }
  .promo-sl--card { min-height: 300px; }
  .grid-promo { grid-column: span 2; }
  .grid-promo .promo-sl--card { min-height: 220px; }
}

/* ---------- Сторінка акцій ---------- */
.promos-page { display: grid; gap: 14px; margin: 18px 0 40px; }
.promos-page .promo-sl { height: clamp(220px, 20vw, 320px); }
.promo-cond { margin: 8px 0 0; color: var(--muted); font-size: .86rem; }

/* ---------- Сторінка бренду ---------- */
.brand-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; padding: clamp(18px, 2.4vw, 32px) 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.brand-hero__logo { width: clamp(120px, 14vw, 200px); aspect-ratio: 3 / 2; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; padding: 14px; }
.brand-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-hero h1 { margin: 0 0 8px; }
.brand-hero__lead { margin: 0; color: var(--ink-2); max-width: 78ch; font-size: 1.02rem; line-height: 1.6; }
.brand-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: .88rem; color: var(--muted); }
.brand-hero__meta b { color: var(--ink); }
.brand-hero__meta a { color: var(--accent); font-weight: 600; }
.brand-about { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--line); margin-top: 32px; }
.brand-about__side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: sticky; top: 170px; align-self: start; }
.brand-about__side img { width: 160px; max-height: 90px; object-fit: contain; }
.brand-about__side b { font-family: var(--display); font-size: 1.3rem; line-height: 1.15; }
.brand-about__text { max-width: 80ch; columns: 2 360px; column-gap: 40px; }
.brand-about__text > * { break-inside: avoid; }
@media (max-width: 767px) {
  .brand-hero, .brand-about { grid-template-columns: 1fr; }
  .brand-about__side { position: static; }
}

/* ---------- Логотипи доставки й оплати ---------- */
.option { display: flex; align-items: center; gap: 10px; }
.option__logos { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.option__logos img { width: auto; display: block; }
.perk-logo { display: inline-block; width: auto; height: 18px; vertical-align: -4px; margin-left: 6px; }
.perk-logos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.perk-logos img { width: auto; display: block; }
.summary__disc b { color: var(--sale); }

/* ---------- Товар: липка галерея + банери переваг під фото ---------- */
@media (min-width: 1025px) { .product > .gallery { position: sticky; top: 150px; align-self: start; } }
.pbans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 14px; }
.pban { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); background: #fff; }
.pban:hover { border-color: var(--ink); color: var(--ink); }
.pban__big { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.04em; min-width: 52px; text-align: center; color: var(--cta); }
.pban__t { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.pban__t b { font-size: .92rem; color: var(--ink); line-height: 1.25; margin-bottom: 2px; }
.pban--dark { background: #0d1622; border-color: #0d1622; color: #fff; }
.pban--dark:hover { color: #fff; border-color: #25d08a; }
.pban--dark .pban__big { color: #25d08a; font-size: 2.6rem; }
.pban--dark .pban__t { color: rgba(255,255,255,.72); }
.pban--dark .pban__t b { color: #fff; }
.pban--green .pban__big { color: var(--cta); }

/* ---------- Соцмережі (оригінальні знаки й кольори брендів) і NOVUS ---------- */
.social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.social a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 3px; color: #fff; font-size: .82rem; font-weight: 600; transition: background .2s, border-color .2s; }
.social a svg { color: var(--c); flex: none; }
.social a:hover { background: var(--c); border-color: var(--c); color: #fff; }
.social a:hover svg { color: #fff; }
.novus-logo { display: inline-block; height: 16px; width: auto; vertical-align: -3px; margin-left: 6px; }
.novus-logo--ftr { height: 13px; margin-left: 8px; filter: brightness(0) invert(1); opacity: .85; }

/* ---------- Телефони з випадайкою ---------- */
.phones { position: relative; }
.phones__main { display: inline-flex; align-items: center; gap: 7px; color: #fff; }
.phones__main b { font-weight: 700; }
.phones__chev { opacity: .7; transition: transform .2s; }
.phones:hover .phones__chev, .phones:focus-within .phones__chev { transform: rotate(180deg); }
.phones__drop { position: absolute; right: 0; top: 100%; z-index: 80; min-width: 280px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(15, 26, 44, .45); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s; }
.phones:hover .phones__drop, .phones:focus-within .phones__drop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s, visibility 0s; }
.phones__drop > a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 10px; color: var(--ink) !important; font-size: .95rem; }
.phones__drop > a:hover { background: var(--bg-2); }
.phones__drop > a span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.phones__drop > a b { font-family: var(--display); font-weight: 600; }
.phones__msg { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.msg { display: flex; gap: 6px; flex-wrap: wrap; }
.msg a { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); color: var(--c) !important; }
.msg a span { display: none; }
.msg a:hover { background: var(--c); border-color: var(--c); color: #fff !important; }
.phones__hours { margin: 8px 2px 2px; font-size: .78rem; color: var(--muted); line-height: 1.5; display: block !important; }

/* ---------- Менші іконки ---------- */
.subcat__ic { width: 38px; height: 38px; }
.subcat__ic--ti .ti { width: 19px; height: 19px; }
.mega__tab { grid-template-columns: 34px 1fr 16px; gap: 12px; padding: 8px 10px; }
.mega__ti { width: 34px; height: 34px; }
.mega__ti .ti { width: 18px; height: 18px; }
.srow { grid-template-columns: 34px minmax(120px, 38%) minmax(0, 1fr); }
.srow__ic { width: 34px; height: 34px; }
.srow__ic .bi { width: 18px; height: 18px; }
.spec-hl .bi { width: 18px; height: 18px; }
.pban__big { font-size: 1.6rem; min-width: 42px; }
.pban--dark .pban__big { font-size: 2rem; }
.trustbar .ic { width: 42px; height: 42px; padding: 10px; }
.perks .ic { width: 18px; height: 18px; }

/* ---------- Промокод у кошику ---------- */
.promo-form { margin: 14px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.promo-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.promo-form__row { display: flex; }
.promo-form__row input { flex: 1; min-width: 0; font: inherit; text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px; border: 1px solid var(--line); border-right: 0; }
.promo-form__row button { border: 1px solid var(--ink); background: var(--ink); color: #fff; font: inherit; font-weight: 600; padding: 0 14px; cursor: pointer; }
.promo-form__err { color: var(--sale); font-size: .82rem; margin: 6px 0 0; }
.promo-form__ok { color: var(--ok-deep); font-size: .82rem; margin: 6px 0 0; }

/* ---------- Пасхалки ---------- */
.egg-bike { position: fixed; left: -60px; bottom: 10px; z-index: 30; border: 0; background: none; color: var(--ok); cursor: pointer; opacity: .55; animation: eggRide 38s linear infinite; animation-delay: 25s; padding: 4px; }
.egg-bike:hover { opacity: 1; }
@keyframes eggRide { 0% { transform: translateX(0); } 12% { transform: translateX(calc(100vw + 120px)); } 100% { transform: translateX(calc(100vw + 120px)); } }
@media (prefers-reduced-motion: reduce) { .egg-bike { animation: none; left: auto; right: 10px; opacity: .25; } }
.egg-modal { position: fixed; inset: 0; z-index: 120; background: rgba(10, 16, 26, .55); display: grid; place-items: center; padding: 16px; }
.egg-modal[hidden] { display: none; }
.egg-modal__box { position: relative; width: min(420px, 100%); background: #fff; padding: 30px 26px 24px; text-align: center; border-top: 4px solid var(--cta); }
.egg-modal__x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.egg-modal__tag { margin: 0 0 6px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cta-deep); font-weight: 700; }
.egg-modal h3 { font-size: 1.5rem; margin: 0 0 16px; }
.egg-modal__code { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px; border: 2px dashed var(--cta); background: var(--cta-soft); cursor: pointer; font: inherit; }
.egg-modal__code span { font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: .12em; color: var(--ink); }
.egg-modal__code small { color: var(--muted); font-size: .76rem; }
.egg-modal__note { font-size: .84rem; color: var(--ink-2); margin: 14px 0 16px; }
.egg-404 button { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ---------- Акція на покришки: підказки й банер ---------- */
.tyre-nudge { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin: 12px 0; border: 1px dashed var(--cta); background: var(--cta-soft); font-size: .9rem; }
.tyre-nudge b { font-family: var(--display); font-size: 1.3rem; color: var(--cta-deep); }
.tyre-nudge--ok { border-style: solid; }
.cart-lines.is-busy { opacity: .55; pointer-events: none; transition: opacity .2s; }
.tyre-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 16px 20px; margin: 4px 0 18px; background: #0d1622; color: #fff; }
.tyre-banner:hover { color: #fff; }
.tyre-banner b { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: #25d08a; letter-spacing: -.04em; }
.tyre-banner span { display: flex; flex-direction: column; font-size: .88rem; color: rgba(255,255,255,.75); }
.tyre-banner strong { font-family: var(--display); font-size: 1.15rem; color: #fff; }
.tyre-banner em { font-style: normal; font-weight: 600; font-size: .86rem; border-bottom: 1px solid rgba(255,255,255,.5); }
@media (max-width: 767px) { .tyre-banner { grid-template-columns: auto 1fr; } .tyre-banner em { display: none; } }

/* ---------- Свотчі кольорів у варіантах ---------- */
.chip--color { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.sw { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.chip.is-active .sw { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 0 0 2px #fff, 0 0 0 3px var(--ink); }

/* ---------- Калькулятор розміру рами ---------- */
.sz-modal { position: fixed; inset: 0; z-index: 120; background: rgba(10, 16, 26, .55); display: grid; place-items: center; padding: 16px; }
.sz-modal[hidden] { display: none; }
.sz { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; padding: 26px 24px 20px; border-top: 4px solid var(--cta); }
.sz h3 { font-size: 1.4rem; margin: 0 0 14px; }
.sz__x { position: absolute; right: 12px; top: 10px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.sz__type { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-bottom: 14px; }
.sz__type button { border: 0; border-left: 1px solid var(--line); background: #fff; font: inherit; font-size: .84rem; font-weight: 600; padding: 10px 6px; cursor: pointer; color: var(--ink-2); }
.sz__type button:first-child { border-left: 0; }
.sz__type button.is-on { background: var(--ink); color: #fff; }
.sz__in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sz__in .field { display: grid; gap: 6px; }
.sz__in .field span { font-size: .84rem; font-weight: 600; }
.sz__in input { font: inherit; font-size: 1.2rem; padding: 10px 12px; border: 1px solid var(--line); width: 100%; }
.sz__in input:focus { outline: 2px solid var(--cta-soft); border-color: var(--cta); }
.sz__how { font-size: .78rem; color: var(--muted); margin: 8px 0 14px; line-height: 1.45; }
.sz__res { border-top: 1px solid var(--line); padding-top: 14px; min-height: 90px; }
.sz__big { font-family: var(--display); font-weight: 800; font-size: 3.2rem; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.sz__big small { font-size: 1.1rem; font-weight: 600; color: var(--muted); margin-left: 10px; letter-spacing: 0; }
.sz__frame { margin: 10px 0 0; font-size: .92rem; }
.sz__tip { margin: 10px 0 0; font-size: .84rem; color: var(--ink-2); background: var(--bg-2); padding: 10px 12px; line-height: 1.45; }
.sz__go { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sz__foot { font-size: .78rem; color: var(--muted); margin: 14px 0 0; }
@media (max-width: 520px) { .sz__type { grid-template-columns: 1fr 1fr; } .sz__type button:nth-child(3) { border-left: 0; } .sz__type button:nth-child(n+3) { border-top: 1px solid var(--line); } .sz__in { grid-template-columns: 1fr; } }

/* ---------- Форма відгуку ---------- */
.rv-done { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--ok-soft); color: var(--ok-deep); margin-bottom: 16px; }
.rv-done .ti { width: 22px; height: 22px; }
.rv-done span { display: flex; flex-direction: column; font-size: .9rem; }
.rv-form { border: 1px solid var(--line); margin: 6px 0 20px; background: #fff; }
.rv-form > summary { list-style: none; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 16px; cursor: pointer; }
.rv-form > summary::-webkit-details-marker { display: none; }
.rv-form[open] > summary .btn { background: var(--ink); }
.rv { padding: 4px 16px 18px; display: grid; gap: 14px; }
.rv__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rv__stars { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rv__stars legend { font-weight: 600; font-size: .9rem; margin-bottom: 6px; width: 100%; }
.rv__stars.is-err legend { color: var(--sale); }
.stars-in { display: inline-flex; flex-direction: row-reverse; }
.stars-in input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-in label { cursor: pointer; padding: 2px; color: #d9dde3; transition: color .12s, transform .12s; }
.stars-in label svg { display: block; fill: currentColor; }
.stars-in label:hover, .stars-in label:hover ~ label, .stars-in input:checked ~ label { color: #f5a623; }
.stars-in label:active { transform: scale(.9); }
.stars-in input:focus-visible + label { outline: 2px solid var(--ink); }
.rv__hint { font-weight: 700; color: var(--ink); min-width: 90px; }
.rv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rv__grid .field { display: grid; gap: 6px; }
.rv__grid .field > span { font-size: .84rem; font-weight: 600; }
.rv__grid .field small { font-weight: 400; color: var(--muted); }
.rv__grid input, .rv__grid textarea { font: inherit; padding: 11px 12px; border: 1px solid var(--line); width: 100%; }
.rv__grid input:focus, .rv__grid textarea:focus { outline: 2px solid var(--cta-soft); border-color: var(--cta); }
.rv__grid .is-err input, .rv__grid .is-err textarea { border-color: var(--sale); }
.field--wide { grid-column: 1 / -1; }
.rv .btn { justify-self: start; }
@media (max-width: 640px) { .rv__grid { grid-template-columns: 1fr; } }

/* ---------- Банери брендів ---------- */
.bbn { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 30px) / 3)); gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.bbn__card { position: relative; scroll-snap-align: start; display: grid; grid-template-rows: 1fr auto; min-height: 340px; background: #f2f3f5; color: var(--ink); overflow: hidden; isolation: isolate; border: 1px solid var(--line); }
.bbn__card:hover { color: var(--ink); border-color: var(--ink); }
.bbn__word { position: absolute; left: -4px; top: 6px; z-index: -1; font-family: var(--display); font-weight: 800; font-size: 5.4rem; line-height: .85; letter-spacing: -.05em; color: rgba(15, 26, 44, .06); white-space: nowrap; }
.bbn__bike { width: 100%; height: 220px; object-fit: contain; object-position: center; padding: 18px 18px 0; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.bbn__card:hover .bbn__bike { transform: scale(1.04); }
.bbn__info { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 18px; background: #fff; border-top: 1px solid var(--line); }
.bbn__logo { height: 28px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; margin-bottom: 4px; }
.bbn__t { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.bbn__meta { font-size: .8rem; color: var(--muted); }
.bbn__cta { font-weight: 700; font-size: .86rem; color: var(--cta-deep); margin-top: 4px; }
.bikes-brands { margin: 6px 0 20px; }
@media (max-width: 767px) { .bbn { grid-auto-columns: 78%; } .bbn__card { min-height: 300px; } .bbn__bike { height: 180px; } }

.swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.swatch { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); background: #fff; }
.swatch .sw { width: 26px; height: 26px; }
.swatch:hover { border-color: var(--ink); }
.swatch.is-active { border: 2px solid var(--ink); }
.swatches__n { font-size: .8rem; color: var(--muted); margin-left: 4px; }

/* ---------- Кошик: довгі назви й рядки знижок не вилазять ---------- */
.cart-line__info, .cart-line__title { min-width: 0; overflow-wrap: anywhere; }
.summary { min-width: 0; }
.summary__item { grid-template-columns: 56px minmax(0, 1fr) auto; }
.summary__item span { overflow-wrap: anywhere; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; }
.summary__row span { min-width: 0; overflow-wrap: anywhere; }
.summary__row b { white-space: nowrap; }
.promo-form__row input { min-width: 0; width: 100%; }
.promo-form__row button { flex: none; }

/* ---------- Горизонтальні стрічки зі стрілками замість смуг прокрутки ---------- */
.hs { position: relative; }
.hs > .bbn, .hs > .quotes, .hs > .recent__row, .hs > .rail { scrollbar-width: none; }
.hs > .bbn::-webkit-scrollbar, .hs > .quotes::-webkit-scrollbar, .hs > .recent__row::-webkit-scrollbar, .hs > .rail::-webkit-scrollbar { display: none; }
.hs__btn { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, .96); color: var(--ink); cursor: pointer; box-shadow: 0 10px 24px -14px rgba(15, 26, 44, .5); transition: background .2s, color .2s, opacity .2s; }
.hs__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hs__btn--prev { left: -12px; }
.hs__btn--next { right: -12px; }
.hs__btn[hidden] { display: grid; opacity: 0; pointer-events: none; }
.hs--static .hs__btn { display: none; }
@media (max-width: 767px) { .hs__btn { width: 38px; height: 38px; margin-top: -19px; } .hs__btn--prev { left: 0; } .hs__btn--next { right: 0; } }

/* ---------- Текстові сторінки: колонка з допомогою, акцією і посиланнями ---------- */
.page__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 64px); align-items: start; }
.page__side { position: sticky; top: 150px; display: grid; gap: 14px; }
.side-help { border: 1px solid var(--line); padding: 18px; background: #fff; display: grid; gap: 6px; }
.side-help__t { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; }
.side-help__ph { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.side-help .msg { margin-top: 8px; }
.side-promo .promo-sl--card { min-height: 320px; }
.side-links { border: 1px solid var(--line); padding: 16px 18px; background: #fff; display: grid; }
.side-links a { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; }
.side-links a:first-of-type { border-top: 0; }
.side-links a:hover, .side-links a[aria-current] { color: var(--ink); font-weight: 600; }
.side-links a span { color: var(--muted); }
@media (max-width: 1024px) { .page__wrap { grid-template-columns: 1fr; } .page__side { position: static; } }

/* ---------- «Показати ще» ---------- */
.more-wrap { display: flex; justify-content: center; margin: 22px 0 6px; }
.more-btn { min-width: 260px; }
.more-btn.is-busy { opacity: .6; }

/* ---------- Підвал: телефони ---------- */
.ftr-phones { display: grid; gap: 6px; margin: 4px 0 10px; }
.ftr-phones a { display: grid !important; grid-template-columns: 18px auto 1fr; align-items: center; gap: 10px; padding: 8px 12px !important; border: 1px solid rgba(255,255,255,.14); color: #fff !important; }
.ftr-phones a:hover { border-color: #25d08a; }
.ftr-phones b { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: .01em; }
.ftr-phones span { justify-self: end; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ftr-phones .ic { color: #25d08a; margin: 0 !important; }

/* ---------- Пасхалка: повільніший велосипед ---------- */
.egg-bike { animation: eggRide 90s linear infinite; animation-delay: 20s; opacity: .7; }
@keyframes eggRide { 0% { transform: translateX(0); } 22% { transform: translateX(calc(100vw + 120px)); } 100% { transform: translateX(calc(100vw + 120px)); } }
.egg-bike:hover { animation-play-state: paused; }

/* ---------- Відгук у спливаючому вікні ---------- */
.rv-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); background: #fff; margin: 6px 0 20px; }
.rv-modal { position: fixed; inset: 0; z-index: 120; background: rgba(10, 16, 26, .55); display: grid; place-items: center; padding: 16px; }
.rv-modal[hidden] { display: none; }
.rv-modal__box { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; padding: 26px 24px 20px; border-top: 4px solid var(--cta); }
.rv-modal__box h3 { font-size: 1.4rem; margin: 0 0 4px; }
.rv-modal__prod { margin: 0 0 12px; font-size: .86rem; }
.rv-modal__x { position: absolute; right: 12px; top: 10px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.rv-modal .rv { padding: 0; }

/* ---------- Заявка ---------- */
.lead-modal { position: fixed; inset: 0; z-index: 125; background: rgba(10, 16, 26, .55); display: grid; place-items: center; padding: 16px; }
.lead-modal[hidden] { display: none; }
.lead { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; padding: 26px 24px 20px; border-top: 4px solid var(--cta); }
.lead h3 { font-size: 1.35rem; margin: 0 0 6px; }
.lead__sub { margin: 0 0 14px; font-size: .86rem; }
.lead__x { position: absolute; right: 12px; top: 10px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.lead__form { display: grid; gap: 12px; }
.lead__form[hidden] { display: none; }
.lead__form .field { display: grid; gap: 6px; }
.lead__form .field > span { font-size: .84rem; font-weight: 600; }
.lead__form input, .lead__form textarea { font: inherit; padding: 11px 12px; border: 1px solid var(--line); width: 100%; }
.lead__form input:focus, .lead__form textarea:focus { outline: 2px solid var(--cta-soft); border-color: var(--cta); }
.lead__res { margin: 10px 0 0; font-weight: 600; font-size: .92rem; }
.lead__res.is-ok { color: var(--ok-deep); background: var(--ok-soft); padding: 12px 14px; }
.lead__res.is-err { color: var(--sale); }
.lead__alt { font-size: .84rem; color: var(--muted); margin: 12px 0 0; }

/* ---------- Таблиця всіх варіантів ---------- */
.vt { border: 1px solid var(--line); margin: 14px 0 4px; }
.vt > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; font-weight: 700; font-size: .9rem; }
.vt > summary::-webkit-details-marker { display: none; }
.vt > summary span { font-weight: 600; font-size: .8rem; color: var(--ok-deep); background: var(--ok-soft); padding: 3px 8px; }
.vt__list { max-height: 320px; overflow: auto; border-top: 1px solid var(--line); }
.vt__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .84rem; }
.vt__row:last-child { border-bottom: 0; }
.vt__row:hover { background: var(--bg-2); color: var(--ink); }
.vt__row.is-self { background: var(--bg-2); box-shadow: inset 3px 0 0 var(--ink); }
.vt__size { font-family: var(--display); }
.vt__color { display: flex; gap: 8px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.vt__color .sw { width: 16px; height: 16px; }
.vt__st { font-size: .74rem; font-weight: 600; white-space: nowrap; }
.vt__row--shop .vt__st { color: var(--ok-deep); }
.vt__row--stock .vt__st { color: var(--ink-2); }
.vt__row--preorder .vt__st { color: #a86b00; }
.vt__price { white-space: nowrap; font-family: var(--display); }
@media (max-width: 480px) { .vt__row { grid-template-columns: 42px minmax(0, 1fr) auto; } .vt__price { display: none; } }

/* ---------- Контакти: мозаїка фото магазину ---------- */
.shopwall { margin: clamp(28px, 4vw, 56px) 0; }
.shopwall__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 18px; max-width: 760px; }
.shopwall__kick { margin: 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--cta-deep); }
.shopwall__head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.shopwall__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 11vw, 190px); gap: 8px; }
.shopwall__it { position: relative; overflow: hidden; border: 0; padding: 0; background: #0d1622; cursor: zoom-in; display: block; }
.shopwall__it img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: saturate(.92); }
.shopwall__it:hover img { transform: scale(1.06); filter: saturate(1.05); }
.shopwall__n { position: absolute; left: 10px; bottom: 8px; font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); letter-spacing: -.02em; }
.shopwall__it--1 { grid-column: span 3; grid-row: span 2; }
.shopwall__it--2 { grid-column: span 2; }
.shopwall__it--3 { grid-column: span 1; grid-row: span 2; }
.shopwall__it--4 { grid-column: span 2; }
.shopwall__it--5 { grid-column: span 2; grid-row: span 2; }
.shopwall__it--6 { grid-column: span 2; }
.shopwall__it--7 { grid-column: span 2; }
.shopwall__it--8 { grid-column: span 1; }
.shopwall__it--9 { grid-column: span 1; }
.shopwall__it--10 { grid-column: span 2; }
.shopwall__cta { grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px; background: var(--cta); color: #fff; cursor: pointer; }
.shopwall__cta:hover { background: var(--cta-deep); color: #fff; }
.shopwall__cta b { font-family: var(--display); font-size: 1.1rem; }
.shopwall__cta span { font-size: .84rem; opacity: .85; }
@media (max-width: 767px) {
  .shopwall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
  .shopwall__it, .shopwall__cta { grid-column: span 1 !important; grid-row: span 1 !important; }
  .shopwall__it--1 { grid-column: span 2 !important; grid-row: span 2 !important; }
}
.lightbox { position: fixed; inset: 0; z-index: 130; background: rgba(8, 12, 18, .92); display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: min(92vw, 1400px); max-height: 84dvh; object-fit: contain; }
.lightbox__x { position: absolute; top: 14px; right: 16px; border: 0; background: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox__nav:hover { background: rgba(255,255,255,.2); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__c { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: .9rem; }

/* ---------- Текстові сторінки на всю ширину ---------- */
.page { max-width: none; }
.page__wrap { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 400px); }
.page__body { max-width: none; }
.page__body p, .page__body li { max-width: 95ch; }
.page__body img { max-width: 100%; height: auto; }
.page__body table { width: 100%; }

/* ---------- Без порожнечі справа: секції товару, статті, тексти ---------- */
.sections { max-width: none; }
.sections .rich > p, .sections .rich > ul, .sections .rich > ol { max-width: 110ch; }
.article { max-width: none; }
.article p, .article li { max-width: 110ch; }
.intro { max-width: 120ch; }
.outro > * { max-width: 120ch; }

/* ---------- Рамка картки при наведенні — поверх фото (видно всі 4 сторони) ---------- */
.card { position: relative; }
.card::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); opacity: 0; pointer-events: none; z-index: 4; transition: opacity .2s; }
.card:hover::after { opacity: 1; }
.grid > .card:hover, .rail > .card:hover, .card:hover { box-shadow: none; }
.bbn__card { position: relative; }
.bbn__card::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); opacity: 0; pointer-events: none; z-index: 4; transition: opacity .2s; }
.bbn__card:hover::after { opacity: 1; }

.ftr__legal { display: inline-block; margin-top: 4px; font-size: .74rem; color: rgba(255,255,255,.5); }

/* ---------- Рамка при наведенні точно поверх сірої лінії картки (однакова товщина з усіх боків) ---------- */
.card::after, .bbn__card::after { inset: -1px; }
.card:hover, .bbn__card:hover { z-index: 5; }
.rail > .card { position: relative; }

/* ---------- Слайдер брендів ---------- */
.bslide__brand { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: .9; letter-spacing: -.04em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.promo-sl--card .bslide__brand { font-size: 2.3rem; }
.bslide .promo-sl__tag { background: #fff; color: var(--ink); }
.promo-sl--band.bslide { height: clamp(220px, 22vw, 380px); }
.gap14 { height: 14px; }
.bikes-brands .bslide { margin-bottom: 14px; }

/* ---------- Оформлення: пропозиція входу для відомого номера ---------- */
.co-auth { grid-column: 1 / -1; border: 1px solid var(--cta); background: var(--cta-soft); padding: 12px 14px; margin: 2px 0 6px; }
.co-auth[hidden] { display: none; }
.co-auth--in { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-deep); font-size: .88rem; }
.co-auth__t { margin: 0 0 2px; font-weight: 700; }
.co-auth__x { margin: 0 0 10px; font-size: .86rem; color: var(--ink-2); }
.co-auth__step1, .co-auth__step2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.co-auth__step1[hidden], .co-auth__step2[hidden] { display: none; }
.co-auth__skip { border: 0; background: none; font: inherit; font-size: .86rem; color: var(--muted); cursor: pointer; text-decoration: underline; }
.co-auth__code { font: inherit; font-size: 1.1rem; letter-spacing: .2em; padding: 9px 12px; border: 1px solid var(--line); width: 160px; }
.co-auth__msg { margin: 6px 0 0; font-size: .84rem; color: var(--sale); }
.co-auth__msg:empty { display: none; }

/* ---------- Кількість поруч із «Купити» ---------- */
.buyform--qty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.qty--buy { display: inline-grid; grid-template-columns: 44px 52px 44px; border: 1px solid var(--line); background: #fff; }
.qty--buy .qty__btn { border: 0; background: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink); }
.qty--buy .qty__btn:hover { background: var(--bg-2); }
.qty--buy input { width: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: inherit; font-weight: 700; font-size: 1.05rem; -moz-appearance: textfield; }
.qty--buy input::-webkit-outer-spin-button, .qty--buy input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buyform--qty .btn { width: 100%; }

/* ---------- Кошик на мобільному: фото | назва | ✕ ; фото | кількість · сума ---------- */
@media (max-width: 720px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img info del" "img qty sum"; gap: 8px 12px; align-items: start; padding: 14px 0; }
  .cart-line > a:first-child { grid-area: img; }
  .cart-line img { width: 72px; height: 72px; }
  .cart-line__info { grid-area: info; font-size: .92rem; }
  .cart-line__info .muted { display: block; margin-top: 3px; font-size: .8rem; }
  .cart-line .qty { grid-area: qty; grid-column: auto; justify-self: start; align-self: center; border: 1px solid var(--line); border-radius: 0; background: #fff; }
  .cart-line .qty__btn { width: 34px; height: 34px; background: #fff; border: 0; }
  .cart-line .qty input { width: 38px; height: 34px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; font-weight: 700; }
  .cart-line__sum { grid-area: sum; grid-column: auto; align-self: center; justify-self: end; }
  .cart-line__del { grid-area: del; width: 32px; height: 32px; margin: -6px -6px 0 0; display: grid; place-items: center; line-height: 1; }
}

/* ---------- Фільтри каталогу: панель, чипи, діапазони; на телефоні — висувна шторка (закривається лише ✕) ---------- */
.facets, .facet__opt, .facet__opt .box, .fx-chip, .fx-open, .fx-range input, .fx-range__go, .facets__foot .btn { border-radius: 0; }
.facets__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; }
.facets__head b { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.facets__close { display: none; width: 40px; height: 40px; margin: -8px -8px -8px 0; border: 0; background: none; color: var(--ink); cursor: pointer; place-items: center; }
.facets__close:hover { background: var(--bg-2); }
.facets__foot { display: none; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.fx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 11px; background: var(--ink); color: #fff; font-size: .84rem; font-weight: 500; line-height: 1.25; }
.fx-chip i { font-style: normal; font-size: 1.05rem; line-height: 1; opacity: .7; }
.fx-chip:hover { background: #000; color: #fff; }
.fx-chip:hover i { opacity: 1; }
.fx-reset { font-size: .84rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; }
.fx-reset:hover { color: var(--cta-deep); }
.facet__opt.is-on .box { background: var(--ink); border-color: var(--ink); }
.fx-range { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.fx-range label { flex: 1 1 0; min-width: 0; }
.fx-range input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .9rem; color: var(--ink); -moz-appearance: textfield; }
.fx-range input::-webkit-outer-spin-button, .fx-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fx-range input:focus { outline: none; border-color: var(--ink); }
.fx-range__dash { color: var(--muted); }
.fx-range__go { height: 40px; padding: 0 14px; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.fx-range__go:hover { background: var(--cta); }
.fx-open { display: none; }
@media (max-width: 1024px) {
  .fx-open { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 11px 16px; border: 1px solid var(--ink); background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; font-size: .94rem; cursor: pointer; }
  .fx-open b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; background: var(--cta); color: #fff; font-size: .78rem; }
  .catalog-layout > .facets { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; width: min(420px, 100vw); max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); transform: translateX(-102%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; }
  .catalog-layout > .facets.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease); box-shadow: 0 0 0 100vmax rgba(10, 16, 13, .45); }
  .facets__box { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 0 18px; }
  .facets__head { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
  .facets__close { display: grid; }
  .facets__foot { display: block; position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 16px; background: var(--panel); border-top: 1px solid var(--line); }
  .facets__foot .btn { width: 100%; }
  html.fx-lock, html.fx-lock body { overflow: hidden; }
  .fx-dim { position: fixed; inset: 0; z-index: 999; background: transparent; }
}

/* ---------- Тест-драйв у магазині ---------- */
.ride-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ride { width: min(500px, 100%); }
.ride__head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 26px 14px 0; }
.ride__head img { width: 88px; height: 88px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 6px; box-sizing: border-box; display: block; }
.ride__head h3 { margin: 4px 0 2px; }
.ride__live { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--cta); text-transform: uppercase; letter-spacing: .04em; }
.ride__live i { width: 8px; height: 8px; background: var(--cta); border-radius: 50%; animation: ridePulse 1.8s ease-out infinite; }
@keyframes ridePulse { 0% { box-shadow: 0 0 0 0 rgba(0, 135, 81, .45); } 100% { box-shadow: 0 0 0 9px rgba(0, 135, 81, 0); } }
@media (prefers-reduced-motion: reduce) { .ride__live i { animation: none; } }
.ride__prod { margin: 0; font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.ride__perks { list-style: none; margin: 0 0 14px; padding: 12px 14px; background: var(--bg-2); display: grid; gap: 6px; font-size: .88rem; }
.ride__perks[hidden] { display: none; }
.ride__perks li { position: relative; padding-left: 20px; }
.ride__perks li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 9px; height: 5px; border-left: 2px solid var(--cta); border-bottom: 2px solid var(--cta); transform: rotate(-45deg); }
.ride__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ride__row[hidden], .ride__form .field[hidden], .ride__form button[hidden] { display: none; }
.ride__form select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); background: #fff; border-radius: 0; }
.ride__addr { margin: 10px 0 0; font-size: .8rem; color: var(--muted); text-align: center; }
@media (max-width: 420px) { .ride__row { grid-template-columns: 1fr; } .ride__head { grid-template-columns: 64px minmax(0, 1fr); } .ride__head img { width: 64px; height: 64px; } }

/* ---------- Картка: ціни без переносу розрядів ---------- */
.card__price { min-width: 0; }
.card__price b, .card__old s, .card__old em, .card__parts span { white-space: nowrap; }
.card__old { flex-wrap: nowrap; }
@media (max-width: 760px) {
  .card__foot { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .card__price { flex: 1 1 100%; }
  .card__acts { margin-left: auto; }
}

/* ---------- Хлібні крихти на мобільному: один рядок, скрол, м'які краї ---------- */
@media (max-width: 760px) {
  .crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    --fl: 0px; --fr: 28px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
  .crumbs::-webkit-scrollbar { display: none; }
  .crumbs > * { flex: 0 0 auto; }
  .crumbs.is-mid { --fl: 28px; }
  .crumbs.is-end { --fl: 28px; --fr: 0px; }
}

/* ---------- Картка на телефоні: мітки не налазять одна на одну ---------- */
@media (max-width: 760px) {
  .card__flags { top: 8px; left: 8px; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
  .card__flag { top: 8px; right: 8px; }
  .card__sale, .card__flag, .card__hit { font-size: .6rem; padding: 3px 5px; }
}

/* ---------- Слайдер акцій на телефоні: компактна смужка, щоб одразу було видно товари ---------- */
@media (max-width: 760px) {
  .promo-band .promo-sl--band { height: 74px; }
  .promo-band .promo-sl__slide { grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; gap: 12px; padding: 0 14px 0 14px; }
  .promo-band .promo-sl__slide::after { background: linear-gradient(90deg, rgba(8, 14, 22, .94) 0%, rgba(8, 14, 22, .82) 65%, rgba(8, 14, 22, .55) 100%); }
  .promo-band .promo-sl__tag, .promo-band .promo-sl__x, .promo-band .promo-sl__all { display: none; }
  .promo-band .promo-sl__big { font-size: 1.9rem; }
  .promo-band .promo-sl__body { gap: 2px; min-width: 0; padding-right: 8px; }
  .promo-band .promo-sl__t { font-size: .92rem; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .promo-band .promo-sl__cta { font-size: .76rem; margin-top: 0; }
  .promo-band .promo-sl__dots { bottom: 3px; right: 10px; gap: 3px; }
  .promo-band .promo-sl__dot { width: 12px; height: 8px; padding: 3px 0; }
}

/* ---------- Плитки брендів у розділі «Велосипеди» ---------- */
.btiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 18px 0 8px; }
.btile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; padding: 12px 14px; overflow: hidden; color: #fff; background: #0d1622; isolation: isolate; }
.btile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.btile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 14, 22, .88) 0%, rgba(8, 14, 22, .35) 55%, rgba(8, 14, 22, .05) 100%); }
.btile:hover { color: #fff; }
.btile:hover img { transform: scale(1.06); }
.btile__b { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1; }
.btile__t { font-size: .74rem; color: rgba(255, 255, 255, .8); margin-top: 4px; line-height: 1.25; }
@media (max-width: 1024px) { .btiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .btiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 4px; } .btile { aspect-ratio: 1 / 1; padding: 8px; } .btile__b { font-size: .82rem; } .btile__t { display: none; } }

/* ---------- Смужка акцій на десктопі нижча ---------- */
.promo-band .promo-sl--band { height: clamp(120px, 9vw, 150px); }
.promo-band .promo-sl__big { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
@media (max-width: 760px) { .promo-band .promo-sl--band { height: 74px; } .promo-band .promo-sl__big { font-size: 1.9rem; } }

/* =====================================================================
   Анімації: поява спливаючих вікон, хвиля карток, м'який відгук кнопок
   ===================================================================== */
@keyframes kmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kmPop { 0% { opacity: 0; transform: translateY(34px) scale(.96); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes kmUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kmSlideL { from { opacity: 0; transform: translateX(-14px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes kmZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kmGlow { 0% { box-shadow: 0 0 0 0 rgba(0, 135, 81, .45); } 100% { box-shadow: 0 0 0 14px rgba(0, 135, 81, 0); } }

.lead-modal:not([hidden]), .sz-modal:not([hidden]), .rv-modal:not([hidden]), .egg-modal:not([hidden]), .lightbox:not([hidden]) { animation: kmFade .3s ease both; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lead-modal:not([hidden]) > .lead, .sz-modal:not([hidden]) > .sz, .rv-modal:not([hidden]) .rv-modal__box, .egg-modal:not([hidden]) .egg-modal__box { animation: kmPop .55s cubic-bezier(.2, 1.25, .35, 1) both; }
.lightbox:not([hidden]) .lightbox__img { animation: kmZoom .45s cubic-bezier(.2, 1, .3, 1) both; }
/* вміст вікна підтягується слідом за рамкою */
.lead-modal:not([hidden]) .lead > h3, .lead-modal:not([hidden]) .lead__sub, .sz-modal:not([hidden]) .sz > h3 { animation: kmUp .45s .12s ease both; }
.lead-modal:not([hidden]) .lead__form > .field, .lead-modal:not([hidden]) .lead__form > .ride__row, .lead-modal:not([hidden]) .lead__form > .btn { animation: kmUp .45s ease both; animation-delay: .2s; }
.lead-modal:not([hidden]) .lead__form > .btn { animation-delay: .3s; }
/* тест-драйв: велосипед «виїжджає», переваги з'являються по черзі, кнопка дихає */
.ride-modal:not([hidden]) .ride__head img { animation: kmSlideL .6s .1s cubic-bezier(.2, 1.2, .35, 1) both; }
.ride-modal:not([hidden]) .ride__perks li { animation: kmUp .45s ease both; }
.ride-modal:not([hidden]) .ride__perks li:nth-child(1) { animation-delay: .22s; }
.ride-modal:not([hidden]) .ride__perks li:nth-child(2) { animation-delay: .32s; }
.ride-modal:not([hidden]) .ride__perks li:nth-child(3) { animation-delay: .42s; }
.ride-modal:not([hidden]) .ride__form .btn--primary { animation: kmUp .45s .3s ease both, kmGlow 1.6s 1.2s ease-out 2; }
/* шторка фільтрів на телефоні */
.facets.is-open .facets__box { animation: kmUp .35s ease both; }

/* хвиля карток під час прокрутки */
.card-wait { opacity: 0; transform: translateY(22px); }
.card-wait.is-in { opacity: 1; transform: none; transition: opacity .6s ease var(--cd, 0ms), transform .7s cubic-bezier(.2, .9, .3, 1) var(--cd, 0ms); }

/* м'який відгук на натискання */
.btn, .card__cart, .qty__btn, .cmp, .fx-open { transition: transform .15s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.btn:active, .card__cart:active, .qty__btn:active, .fx-open:active { transform: scale(.96); }
.btn--primary:hover { box-shadow: 0 8px 22px -12px rgba(0, 135, 81, .8); }
/* стрілка в посиланнях-«CTA» трохи рухається вперед */
.promo-sl__cta, .rail-more, .btile__b { transition: letter-spacing .3s ease, transform .3s ease; }
.promo-sl__slide:hover .promo-sl__cta, .rail-more:hover { letter-spacing: .02em; }
.btile:hover .btile__b { transform: translateX(3px); }
/* лічильник кошика підстрибує при завантаженні, якщо в кошику є товари */
.hdr .cart-count, .hdr__cart b, .icon-btn__badge { animation: kmZoom .5s .4s cubic-bezier(.2, 1.6, .4, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .lead-modal, .sz-modal, .rv-modal, .egg-modal, .lightbox, .lead-modal *, .sz-modal *, .rv-modal *, .egg-modal *, .lightbox *, .facets__box, .hdr * { animation: none !important; }
  .card-wait { opacity: 1; transform: none; }
  .btn:active, .card__cart:active, .qty__btn:active, .fx-open:active { transform: none; }
}

/* ---------- Плитки типів велосипедів ---------- */
.btiles--types { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.btile--type { aspect-ratio: 16 / 7; padding: 16px 18px; }
.btile--type .btile__b { font-size: 1.45rem; }
.btile--type .btile__t { font-size: .82rem; color: #7ff0bf; font-weight: 600; }
@media (max-width: 1024px) { .btiles--types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .btiles--types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .btile--type { aspect-ratio: 16 / 9; padding: 10px 12px; } .btile--type .btile__b { font-size: 1rem; } .btile--type .btile__t { display: block; font-size: .7rem; } }

/* ---------- Картка на телефоні: «У кошик» — головна дія, порівняння — другорядне ---------- */
@media (max-width: 760px) {
  .card__cart { background: var(--cta); border-color: var(--cta); color: #fff; width: 42px; height: 42px; }
  .card__acts .cmp--icon { width: 32px; height: 32px; border-color: transparent; background: transparent; color: var(--muted); }
  .card__acts .cmp--icon svg { width: 17px; height: 17px; }
  .card__acts .cmp--icon.is-on { color: var(--cta); background: transparent; }
}

/* ---------- Рамка при наведенні: рівна 2px з усіх боків у слайдерах і сітках ----------
   Шар ::after на межі картки поверх усього вмісту (картка без overflow — обрізання лише у фото) */
.card, .bbn__card { overflow: visible; }
.card__img, .bbn__card > img, .bbn__img { overflow: hidden; }
.card::after, .bbn__card::after, .xsell__item::after, .recent__item::after { content: ""; display: block; position: absolute; inset: -1px; border: 2px solid var(--ink); opacity: 0; pointer-events: none; z-index: 20; transition: opacity .2s ease; border-radius: 0; }
.xsell__item, .recent__item { position: relative; }
.card:hover, .bbn__card:hover, .xsell__item:hover, .recent__item:hover { z-index: 5; box-shadow: none; outline: 0; }
.card:hover::after, .bbn__card:hover::after, .xsell__item:hover::after, .recent__item:hover::after { opacity: 1; }
.xsell__item:hover, .recent__item:hover { border-color: var(--line); }
.grid > .card:hover, .rail > .card:hover { box-shadow: none; }
.rail { padding-left: 2px; padding-right: 2px; }

/* ---------- «Про бренд» на всю ширину ---------- */
.brand-about__text { max-width: none; columns: 3 300px; column-gap: 48px; }
.brand-about__text > h2, .brand-about__text > h3 { column-span: all; }
.brand-about { grid-template-columns: 1fr; gap: 22px; }
.brand-about__side { position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.brand-about__side img { width: 140px; max-height: 64px; }

/* ---------- Банери брендів-лідерів продажів у категоріях (app/brandbanners.php: cat_brand_slider / cat_brand_wide) ---------- */
.cbb .promo-sl__tag { background: #fff; color: var(--ink); }
.cbb-wide { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.6vw, 40px); height: clamp(140px, 12vw, 180px); margin: 24px 0 6px; padding: 0 clamp(18px, 3vw, 44px); overflow: hidden; color: #fff; background: #0d1622; isolation: isolate; }
.cbb-wide:hover { color: #fff; }
.cbb-wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.cbb-wide:hover img { transform: scale(1.03); }
.cbb-wide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 14, 22, .92) 0%, rgba(8, 14, 22, .7) 45%, rgba(8, 14, 22, .2) 100%); }
.cbb-wide__brand { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 3.3rem); line-height: .9; letter-spacing: -.04em; }
.cbb-wide__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cbb-wide__body b { font-family: var(--display); font-size: clamp(1.02rem, 1.3vw, 1.3rem); line-height: 1.15; letter-spacing: -.01em; }
.cbb-wide__body span { font-size: .88rem; color: rgba(255, 255, 255, .78); line-height: 1.4; }
.cbb-wide__cta { background: var(--cta); color: #fff; font-weight: 700; font-size: .88rem; padding: 12px 18px; white-space: nowrap; transition: background .2s; }
.cbb-wide:hover .cbb-wide__cta { background: var(--cta-deep); }
@media (max-width: 760px) {
  .cbb-wide { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 6px; height: auto; min-height: 200px; padding: 18px 16px; margin-top: 18px; }
  .cbb-wide::after { background: linear-gradient(0deg, rgba(8, 14, 22, .92) 0%, rgba(8, 14, 22, .55) 60%, rgba(8, 14, 22, .15) 100%); }
  .cbb-wide__brand { font-size: 1.9rem; }
  .cbb-wide__body span { display: none; }
  .cbb-wide__cta { justify-self: start; padding: 10px 14px; font-size: .84rem; }
}
.btiles--home { margin: 0; }

/* ---------- Оформлення: вибір, куди надіслати код ---------- */
.co-auth__step1 .btn[hidden] { display: none; }
.co-auth__msg.is-ok { color: var(--ok-deep); }

/* ---------- Сортування на телефоні: один рядок, свайп, м'який край ---------- */
@media (max-width: 760px) {
  .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: none; padding: 0 0 2px; gap: 6px; margin: 2px 0 12px; border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > span { display: none; }
  .toolbar .pill { flex: 0 0 auto; white-space: nowrap; padding: 8px 13px; font-size: .84rem; border: 1px solid var(--line); background: #fff; border-radius: 0; }
  .toolbar .pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
  .toolbar .fx-open { flex: 0 0 auto; }
}

/* ---------- Опис категорії на телефоні: 4 рядки + «Читати більше» по центру ---------- */
@media (max-width: 760px) {
  .intro:not(.is-open) { position: relative; max-height: 6.6em; overflow: hidden; margin-bottom: 0; font-size: .92rem; line-height: 1.65; }
  .intro:not(.is-open) > * { display: block; }
  .intro:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
  .intro:not(.is-open) + .intro__more[hidden], .intro:not(.is-open) + .intro__more { display: flex; }
  .intro__more { align-items: center; gap: 8px; margin: 6px auto 16px; padding: 9px 18px; border: 1px solid var(--ink); background: #fff; color: var(--ink); font-weight: 600; font-size: .84rem; border-radius: 0; }
  .intro__more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
}

/* ---------- Колонка каталогу не розтягується вмістом (сортування гортається всередині) ---------- */
.catalog-layout > * { min-width: 0; }
@media (max-width: 1024px) { .catalog-layout { grid-template-columns: minmax(0, 1fr); } }
.toolbar { max-width: 100%; min-width: 0; }

/* ---------- Телефони в шапці на сенсорних екранах: відкриваються дотиком ---------- */
@media (hover: none) {
  .phones:hover .phones__drop, .phones:focus-within .phones__drop { opacity: 0; visibility: hidden; }
  .phones.is-open .phones__drop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s, visibility 0s; }
  .phones:hover .phones__chev, .phones:focus-within .phones__chev { transform: none; }
  .phones.is-open .phones__chev { transform: rotate(180deg); }
}

/* ---------- «Читати повністю» — просто підкреслений напис, без фону й рамки ---------- */
.intro__more, .intro__more.pill { background: none !important; border: 0 !important; padding: 4px 0 !important; box-shadow: none; color: var(--ink); font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; border-radius: 0; }
.intro__more:hover { color: var(--cta); }
.intro__more::after { display: none !important; }
@media (max-width: 760px) { .intro__more { margin: 8px auto 16px; } }

/* =====================================================================
   Верх категорії на телефоні: компактно, щоб одразу було видно картки
   ===================================================================== */
@media (max-width: 760px) {
  .promo-band { margin-bottom: 0; }
  .crumbs { padding-block: 8px 2px; font-size: .78rem; }
  h1 { margin: 2px 0 8px; font-size: 1.45rem; }
  /* підкатегорії — один рядок-стрічка, гортається пальцем */
  .subcats, .subcats.is-collapsed { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 4px 0 10px; padding-bottom: 2px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .subcats::-webkit-scrollbar { display: none; }
  .subcats .subcat, .subcats.is-collapsed .subcat--more { display: inline-flex; flex: 0 0 auto; width: auto; padding: 5px 12px 5px 5px; gap: 8px; font-size: .82rem; white-space: nowrap; }
  .subcats .subcat__ic { width: 30px; height: 30px; }
  .subcats .subcat__t { display: block; -webkit-line-clamp: unset; white-space: nowrap; }
  .subcats .subcat--toggle { display: none !important; }
  /* типи велосипедів — стрічка з невеликих плиток; бренди — у слайдері в сітці товарів */
  .btiles--types { display: flex; overflow-x: auto; gap: 6px; margin: 0 0 10px; scrollbar-width: none; }
  .btiles--types::-webkit-scrollbar { display: none; }
  .btiles--types .btile--type { flex: 0 0 42%; aspect-ratio: 16 / 9; padding: 8px 10px; }
  .btiles:not(.btiles--types):not(.btiles--home) { display: none; }
  /* опис — 2 рядки, «Читати повністю» поруч */
  .intro:not(.is-open) { max-height: 3.3em; font-size: .88rem; line-height: 1.65; }
  .intro:not(.is-open)::after { height: 1.6em; }
  .intro__more { margin: 2px 0 10px !important; font-size: .82rem; }
  /* «Фільтри» — плаваюча кнопка внизу екрана, не займає місце над товарами */
  .fx-open { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 70; margin: 0; padding: 12px 20px; background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 12px 28px -10px rgba(10, 16, 26, .55); }
  .fx-open b { background: var(--cta); color: #fff; min-width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: .75rem; padding: 0 5px; }
  .fx-open:active { transform: translateX(-50%) scale(.96); }
  html.fx-lock .fx-open { display: none; }
  .toolbar { margin-bottom: 8px; }
  .grid { margin-top: 0; }
}

/* =====================================================================
   Кнопка «Ми на зв'язку» (як на старому сайті) — з анімацією
   ===================================================================== */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab__btn { position: relative; width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--cta); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(0, 135, 81, .7); transition: transform .25s cubic-bezier(.2, 1.3, .4, 1), background .25s; }
.fab__btn:hover { transform: scale(1.06); }
.fab__btn:active { transform: scale(.94); }
.fab__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cta); animation: fabRing 2.4s ease-out infinite; pointer-events: none; }
.fab__ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--cta); animation: fabRing 2.4s 1.2s ease-out infinite; }
@keyframes fabRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
/* іконки по черзі: телефон → Viber → Telegram → WhatsApp */
.fab__ico { position: absolute; display: grid; place-items: center; opacity: 0; transform: scale(.4) rotate(-40deg); animation: fabIco 8s infinite; }
.fab__ico--0 { animation-delay: 0s; } .fab__ico--1 { animation-delay: 2s; } .fab__ico--2 { animation-delay: 4s; } .fab__ico--3 { animation-delay: 6s; }
@keyframes fabIco { 0% { opacity: 0; transform: scale(.4) rotate(-40deg); } 4%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: scale(.4) rotate(40deg); } }
.fab__ico--0 svg { animation: fabShake 2s infinite; }
@keyframes fabShake { 0%, 60%, 100% { transform: rotate(0); } 64%, 72%, 80% { transform: rotate(-14deg); } 68%, 76% { transform: rotate(14deg); } }
.fab__x { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.5); transition: opacity .25s, transform .3s cubic-bezier(.2, 1.3, .4, 1); display: grid; }
.fab.is-open .fab__btn { background: var(--ink); box-shadow: 0 14px 30px -10px rgba(10, 16, 26, .6); }
.fab.is-open .fab__ico, .fab.is-open .fab__ring { animation: none; opacity: 0; }
.fab.is-open .fab__x { opacity: 1; transform: none; }
.fab__tip { position: absolute; right: 72px; bottom: 16px; background: #fff; color: var(--ink); font-size: .8rem; font-weight: 600; padding: 6px 10px; border: 1px solid var(--line); white-space: nowrap; box-shadow: 0 8px 20px -12px rgba(10, 16, 26, .4); animation: fabTip 8s 3s infinite; opacity: 0; pointer-events: none; }
@keyframes fabTip { 0%, 100% { opacity: 0; transform: translateX(8px); } 6%, 30% { opacity: 1; transform: none; } 36% { opacity: 0; transform: translateX(8px); } }
.fab.is-open .fab__tip { display: none; }
.fab__list { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.fab__it { display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--ink);
  opacity: 0; transform: translateY(18px) scale(.6); transition: opacity .25s ease calc((var(--n) - var(--i)) * 35ms), transform .35s cubic-bezier(.2, 1.3, .4, 1) calc((var(--n) - var(--i)) * 35ms); }
.fab__it svg { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 10px 22px -10px rgba(10, 16, 26, .55); box-sizing: border-box; }
.fab__it span { background: #fff; border: 1px solid var(--line); padding: 6px 10px; font-size: .84rem; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -12px rgba(10, 16, 26, .35); }
.fab__it:hover svg { transform: scale(1.08); transition: transform .2s; }
.fab.is-open .fab__list { pointer-events: auto; }
.fab.is-open .fab__it { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms); }
@media (prefers-reduced-motion: reduce) { .fab__ring, .fab__ring::after, .fab__tip, .fab__ico--0 svg { animation: none; } .fab__ico { animation: none; } .fab__ico--0 { opacity: 1; transform: none; } }

/* =====================================================================
   Нижня панель на телефоні
   ===================================================================== */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .tabbar__it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 3px; border: 0; background: none; font: inherit; font-size: .66rem; font-weight: 600; color: var(--muted); cursor: pointer; }
  .tabbar__it svg { transition: transform .2s; }
  .tabbar__it:active svg { transform: scale(.88); }
  .tabbar__it.is-on { color: var(--ink); }
  .tabbar__it.is-on::before { content: ""; position: absolute; top: -5px; left: 30%; right: 30%; height: 2px; background: var(--cta); }
  .tabbar__n { position: absolute; top: 1px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; background: var(--cta); color: #fff; font-size: .64rem; display: grid; place-items: center; animation: kmZoom .5s .3s cubic-bezier(.2, 1.6, .4, 1) both; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .fab { right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .fab__btn { width: 52px; height: 52px; }
  .fab__tip { right: 62px; bottom: 12px; }
  .fx-open { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .stickybuy { bottom: calc(58px + env(safe-area-inset-bottom)); }
  body:has(.stickybuy) .fab { bottom: calc(136px + env(safe-area-inset-bottom)); }
  html.fx-lock .tabbar, html.fx-lock .fab { display: none; }
  /* банер «−3% на другу покришку» — тонка смужка */
  .tyre-banner { grid-template-columns: auto 1fr; gap: 12px; padding: 8px 12px; margin: 2px 0 10px; }
  .tyre-banner b { font-size: 1.55rem; }
  .tyre-banner span { font-size: 0; }
  .tyre-banner span strong { font-size: .86rem; color: #fff; }
  .tyre-banner > :nth-child(3) { display: none; }
}

/* пасхалки: «діє навіть на велосипеди» */
.egg-modal__bike { color: var(--cta); }

/* кнопка зв'язку: невидиме меню не перехоплює дотики (кнопка «Фільтри» під ним натискається) */
.fab { pointer-events: none; }
.fab__btn { pointer-events: auto; }
.fab.is-open .fab__list, .fab.is-open .fab__it { pointer-events: auto; }
@media (max-width: 760px) { .fab__tip { display: none; } }

/* ---------- Текстові сторінки й новини на телефоні/планшеті: одна колонка, бічна панель під текстом ---------- */
@media (max-width: 1024px) {
  .page__wrap { grid-template-columns: minmax(0, 1fr); }
  .page__side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 760px) {
  .page .rich, .post { font-size: 1rem; line-height: 1.7; }
  .page .rich img { max-width: 100%; height: auto; }
  .page .rich table { display: block; overflow-x: auto; max-width: 100%; }
  .page h1 { font-size: 1.5rem; line-height: 1.2; }
}

@media (max-width: 760px) { .page .rich p, .page .rich li { font-size: 1rem; line-height: 1.7; } }

/* ---------- Пошук на телефоні: шар зверху екрана ---------- */
.msearch__x { display: none; }
@media (max-width: 760px) {
  html.msearch body::after { content: ""; position: fixed; inset: 0; z-index: 94; background: rgba(10, 16, 26, .45); }
  html.msearch .search { position: fixed; top: 0; left: 0; right: 0; z-index: 96; margin: 0; padding: 10px 56px 10px 12px; background: #fff; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: 0 10px 30px -18px rgba(10, 16, 26, .6); }
  html.msearch .search input { font-size: 16px; }
  html.msearch .msearch__x { display: grid; place-items: center; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--ink); cursor: pointer; }
  html.msearch .suggest { position: fixed; left: 0; right: 0; top: 74px; margin: 0; max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain; border-radius: 0; border: 0; border-top: 1px solid var(--line); z-index: 96; }
  html.msearch .tabbar, html.msearch .fab, html.msearch .fx-open { display: none; }
}

/* ---------- Гайд «Як обрати велосипед» (/choose/, текст у rm_*_articles.id=165) ---------- */
.guide h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); line-height: 1.25; margin: 2em 0 .6em; color: var(--ink); scroll-margin-top: 140px; }
.guide h3 { font-size: 1.12rem; margin: 1.5em 0 .4em; color: var(--ink); }
.guide ul, .guide ol { padding-left: 1.3em; }
.guide li { margin: .35em 0; }
.guide a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cta); text-underline-offset: 3px; }
.guide__kick { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.guide__quick { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--cta); border-radius: var(--radius-lg); padding: 18px 22px; margin: 4px 0 24px; }
.guide__quick ol { margin: 0; }
.guide__toc { background: var(--bg-2); border-radius: var(--radius-lg); padding: 16px 22px; margin: 24px 0; }
.guide__toc ol { margin: 0; columns: 2 240px; column-gap: 32px; }
.guide__toc li { break-inside: avoid; }
.guide__tbl { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.page .guide__tbl table { margin: 0; width: 100%; display: table; overflow: visible; }
.guide__tbl caption { caption-side: top; text-align: left; font-weight: 600; color: var(--ink); padding: 12px 12px 6px; }
.guide__tbl th { background: var(--bg-2); color: var(--ink); font-weight: 600; white-space: nowrap; }
.guide__tbl td:first-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
.guide .faq { margin-top: 4px; }
.guide .faq details { padding: 14px 0; }
.guide__tbl--nw td { white-space: nowrap; }
@media (max-width: 760px) { .guide__tbl th, .guide__tbl td { padding: 8px 9px; font-size: .9rem; } .guide__tbl th { white-space: normal; } .guide__tbl:not(.guide__tbl--nw) td:first-child { white-space: normal; width: 30%; } .guide__quick, .guide__toc { padding: 14px 16px; } }

/* ---------- Огляди та поради: стрічка статей ---------- */
.newsrow { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 22vw, 320px); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-left: 1px solid var(--line); padding: 2px 2px 10px; }
.newsrow::-webkit-scrollbar { display: none; }
.newscard { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-left-width: 0; scroll-snap-align: start; color: var(--ink); }
.newscard::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2; }
.newscard:hover { color: var(--ink); z-index: 3; }
.newscard:hover::after { opacity: 1; }
.newscard__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.newscard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.newscard:hover .newscard__img img { transform: scale(1.05); }
.newscard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.newscard__body time { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
.newscard__body b { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.newscard__body small { font-size: .82rem; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .newsrow { grid-auto-columns: 76%; } }

/* ---------- Мініатюри товарів на суцільному білому фоні (кошик, «з цим купують», панель товару, переглянуті) ---------- */
.cart-line img, .xsell__img, .xsell__img img, .pbar__img, .recent__item img, .ride__head img, .co-sum img, .summary img {
  background: #fff !important; mix-blend-mode: normal !important; }
.cart-line img, .pbar__img, .recent__item img { border: 1px solid var(--line); padding: 4px; box-sizing: border-box; border-radius: 0; object-fit: contain; }
.xsell__img { border: 1px solid var(--line); }

/* =====================================================================
   Ремонт і сервіс: прайс, який легко читати
   ===================================================================== */
.svc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 28px 0 10px; }
.svc-head h2 { margin: 0; }
.svc-find { display: flex; align-items: center; gap: 8px; flex: 0 1 380px; border: 1px solid var(--line); background: #fff; padding: 0 12px; color: var(--muted); }
.svc-find:focus-within { border-color: var(--ink); color: var(--ink); }
.svc-find input { border: 0; outline: 0; font: inherit; font-size: .95rem; padding: 11px 0; width: 100%; background: none; }
.svc-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding-bottom: 2px; }
.svc-nav::-webkit-scrollbar { display: none; }
.svc-nav a { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--line); background: #fff; font-size: .84rem; color: var(--ink); white-space: nowrap; }
.svc-nav a:hover { border-color: var(--ink); }
.svc2 { border: 1px solid var(--line); background: #fff; margin: 0 0 10px; scroll-margin-top: 150px; }
.svc2 > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; }
.svc2 > summary::-webkit-details-marker { display: none; }
.svc2__t { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
.svc2__meta { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.svc2__chev { transition: transform .25s; color: var(--muted); }
.svc2[open] > summary { border-bottom: 1px solid var(--line); background: #0d1622; color: #fff; }
.svc2[open] .svc2__meta { color: rgba(255, 255, 255, .7); }
.svc2[open] .svc2__chev { transform: rotate(180deg); color: #fff; }
.svcl { list-style: none; margin: 0; padding: 0; }
.svcl__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 14px 20px; border-bottom: 1px solid var(--line); transition: background .2s; }
.svcl__row:last-child { border-bottom: 0; }
.svcl__row:hover { background: #f7f8f6; }
.svcl__row[hidden] { display: none; }
.svcl__name { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.svcl__short { display: block; margin-top: 3px; font-size: .86rem; color: var(--ink-2); }
.svcl__price { font-family: var(--display); font-weight: 800; font-size: 1.15rem; white-space: nowrap; color: var(--ink); padding: 2px 0 0; }
.svcl__more { margin-top: 6px; }
.svcl__more > summary { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--cta); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.svcl__more > summary::-webkit-details-marker { display: none; }
.svcl__more > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.svcl__more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.svcl__items { list-style: none; margin: 10px 0 4px; padding: 12px 14px; background: #f5f7f5; columns: 2 260px; column-gap: 28px; }
.svcl__items li { position: relative; padding: 3px 0 3px 20px; font-size: .88rem; line-height: 1.45; color: var(--ink-2); break-inside: avoid; }
.svcl__items li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 4px; border-left: 2px solid var(--cta); border-bottom: 2px solid var(--cta); transform: rotate(-45deg); }
.svcl__note { margin: 6px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.svc-empty { padding: 16px 20px; border: 1px dashed var(--line); background: #fff; }
.svc-foot { font-size: .82rem; margin-top: 14px; }
@media (max-width: 760px) {
  .svc2 > summary { padding: 13px 14px; gap: 10px; }
  .svc2__t { font-size: 1rem; }
  .svc2__meta { display: none; }
  .svcl__row { padding: 12px 14px; gap: 12px; }
  .svcl__price { font-size: 1.02rem; }
  .svc-find { flex-basis: 100%; }
}

/* ---------- Телефон: шапка з пошуком не прилипає до верху (пошук — кнопкою в нижній панелі) ---------- */
@media (max-width: 760px) {
  .hdr { position: relative; top: auto; backdrop-filter: none; -webkit-backdrop-filter: none; background: #fbfcfb; }
  html.msearch .search { top: 0 !important; }
  .svc2 { scroll-margin-top: 12px; }
}

/* ---------- Бонусна програма: шапка, кошик/оформлення, картка товару, кабінет ---------- */
.action__bn { position: absolute; top: -2px; right: 4px; background: var(--ink); color: #fff; font: 600 .66rem/19px var(--text); height: 19px; padding: 0 5px; border-radius: 0; letter-spacing: .01em; }
.bn-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .86rem; font-weight: 600; color: var(--cta-deep); text-decoration: none; }
.bn-line .ti { width: 16px; height: 16px; }
.bn-line:hover { text-decoration: underline; }
.bn-box { display: grid; gap: 8px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.bn-box__form { margin: 0; }
.bn-box__form.is-busy { opacity: .55; pointer-events: none; }
.bn-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .95rem; user-select: none; }
.bn-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bn-switch i { flex: 0 0 38px; height: 22px; background: var(--line); position: relative; transition: background .2s; }
.bn-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; transition: transform .2s var(--ease); }
.bn-switch input:checked + i { background: var(--cta); }
.bn-switch input:checked + i::after { transform: translateX(16px); }
.bn-switch input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.bn-switch b { font-family: var(--display); }
.bn-box__note { margin: 0; font-size: .8rem; color: var(--muted); }
.bn-box__earn { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .86rem; color: var(--ink-2); }
.bn-box__earn .ti { flex: 0 0 18px; width: 18px; height: 18px; color: var(--cta-deep); margin-top: 1px; }
.bn-box__earn b { color: var(--cta-deep); }
.bn-box__earn a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.done__bn { display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--cta); background: var(--cta-soft); font-size: .92rem; }
.done__bn .ti { width: 18px; height: 18px; color: var(--cta-deep); }
.cab__bn { display: block; text-decoration: none; color: inherit; }
.cab__bn b { display: block; font-family: var(--display); font-size: 1.4rem; color: var(--cta-deep); }
.cab__bn span { color: var(--muted); font-size: .82rem; }
.bn { margin: 0 0 34px; scroll-margin-top: 150px; }
.bn__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bn__head h2 { margin: 0 0 14px; }
.bn__tag { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bn__tag b { color: var(--ink); }
.bn__flash { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--cta); background: var(--cta-soft); font-weight: 600; }
.bn__grid { display: grid; grid-template-columns: 1.25fr 1fr 1.3fr; gap: 0; border: 1px solid var(--ink); }
.bn__bal, .bn__card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; min-width: 0; }
.bn__bal { background: var(--ink); color: #fff; }
.bn__card + .bn__card, .bn__bal + .bn__card { border-left: 1px solid var(--line); }
.bn__k { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.bn__big { font-family: var(--display); font-size: clamp(2.4rem, 3vw + 1rem, 3.4rem); line-height: 1; letter-spacing: -.04em; }
.bn__mid { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.bn__mid small { font-size: .95rem; color: var(--muted); font-weight: 500; }
.bn__u { font-size: .82rem; color: var(--muted); }
.bn__bal .bn__u { color: rgba(255, 255, 255, .7); }
.bn__bal .btn { margin-top: 8px; align-self: flex-start; }
.bn__bar { height: 6px; background: var(--bg-2); margin-top: 6px; }
.bn__bar i { display: block; height: 100%; background: var(--cta); }
.bn__soon { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--sale); font-size: .9rem; }
.bn__soon .ti { width: 20px; height: 20px; color: var(--sale); flex: 0 0 20px; }
.bn__soon div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bn__soon b { width: 100%; }
.bn__cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; margin-top: 22px; }
.bn__cols h3 { font-size: 1.05rem; margin: 0 0 10px; }
.bn__rules ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .88rem; color: var(--ink-2); }
.bn__rules li { padding-left: 16px; position: relative; }
.bn__rules li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 2px; background: var(--cta); }
.bn__tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bn__tbl td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bn__tbl small { display: block; color: var(--muted); font-size: .76rem; }
.bn__tbl tr.is-pend { color: var(--muted); }
.bn__d { white-space: nowrap; color: var(--muted); width: 92px; }
.bn__a { text-align: right; white-space: nowrap; font-family: var(--display); font-weight: 600; }
.bn__a.is-plus { color: var(--cta-deep); }
.bn__a.is-minus { color: var(--ink); }
@media (max-width: 860px) {
  .bn__grid { grid-template-columns: 1fr; }
  .bn__card + .bn__card, .bn__bal + .bn__card { border-left: 0; border-top: 1px solid var(--line); }
  .bn__cols { grid-template-columns: 1fr; }
  .action__bn { right: 0; }
}

/* ---------- Сітка товарів на телефоні: колонки рівні й не розтягуються вмістом картки ---------- */
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > *, .card, .card__body, .card__foot, .card__price { min-width: 0; }
  .card__title { overflow-wrap: anywhere; }
  .card__parts { flex-wrap: wrap; }
  .card__parts span { white-space: normal; }
  .grid-promo { grid-column: 1 / -1; min-width: 0; }
}

.auth__bonus { margin: -4px 0 14px; padding: 10px 12px; background: var(--cta-soft, #e8f5ee); border-left: 3px solid var(--cta); font-size: .9rem; }

/* ---------- Картка: без «Порівняти», кошик у рядку з ціною ---------- */
.card__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; flex-wrap: nowrap; }
.card__price { flex: none; min-width: 0; }
.card__acts { margin-left: 0; align-self: end; }
.card__old { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
@media (max-width: 760px) {
  .card__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .card__price { flex: none; }
  .card__acts { margin-left: 0; }
  .card__cart { width: 40px; height: 40px; }
}

/* ---- Статус наявності в картці (замість бейджа «У магазині» зверху) ---- */
.card__stock { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .76rem; line-height: 1.25; color: var(--muted); margin-top: 2px; }
.card__stock i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #9aa3a0; position: relative; }
.card__stock b { font-weight: 600; color: var(--ink); }
.card__stock span { color: var(--muted); }
.card__stock span::before { content: '·'; margin-right: 6px; color: #c3c9c6; }
.card__stock--shop i { background: var(--cta); box-shadow: 0 0 0 0 rgba(0,135,81,.45); animation: stockPulse 2.2s ease-out infinite; }
.card__stock--shop b { color: var(--cta); }
.card__stock--stock i { background: var(--cta); opacity: .55; }
.card__stock--order i, .card__stock--preorder i { background: #d08a14; }
.card__stock--out b { color: var(--muted); font-weight: 500; }
@keyframes stockPulse { 0% { box-shadow: 0 0 0 0 rgba(0,135,81,.45); } 70% { box-shadow: 0 0 0 6px rgba(0,135,81,0); } 100% { box-shadow: 0 0 0 0 rgba(0,135,81,0); } }
@media (prefers-reduced-motion: reduce) { .card__stock--shop i { animation: none; } }
@media (max-width: 760px) { .card__stock { font-size: .7rem; gap: 5px; } .card__stock span::before { margin-right: 5px; } }
.card__stock { row-gap: 1px; }
.card__stock span { flex-basis: 100%; padding-left: 13px; font-size: .92em; }
.card__stock span::before { content: none; }

/* ---- Бейдж розміру на фото покришки ---- */
.card__img, .gallery__main { position: relative; }
.tsize { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 9px 5px; background: var(--ink, #0f1720); color: #fff; border-left: 3px solid var(--cta); line-height: 1; pointer-events: none;
  box-shadow: 0 6px 18px -8px rgba(15,23,32,.55); }
.tsize b { font-family: 'Geologica', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.tsize small { font-size: .6rem; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.62); text-transform: uppercase; }
.tsize--lg { left: 16px; bottom: 16px; padding: 9px 13px 8px; }
.tsize--lg b { font-size: 1.35rem; }
.tsize--lg small { font-size: .7rem; }
@media (max-width: 760px) { .tsize { left: 6px; bottom: 6px; padding: 4px 7px 4px; } .tsize b { font-size: .8rem; } .tsize small { font-size: .52rem; } .tsize--lg b { font-size: 1.1rem; } }

/* ---- Пошук: «Знайдено в категоріях» — слайдер ---- */
.fcats { margin: 6px 0 18px; }
.fcats__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fcats__head > span:first-child { font-family: 'Geologica', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.fcats__nav { display: flex; gap: 6px; }
.fcats__btn { width: 34px; height: 34px; border: 1px solid var(--line, #e3e6e4); background: #fff; color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; transition: background .2s, color .2s; }
.fcats__btn:hover { background: var(--ink); color: #fff; }
.fcats__row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; scroll-behavior: smooth; }
.fcats__row::-webkit-scrollbar { display: none; }
.fcat { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: #fff; border: 1px solid var(--line, #e3e6e4);
  color: var(--ink); text-decoration: none; font-size: .86rem; font-weight: 500; white-space: nowrap; transition: border-color .2s, transform .2s; }
.fcat:hover { border-color: var(--ink); transform: translateY(-1px); }
.fcat__ic { display: inline-flex; color: var(--muted); }
.fcat__ic svg { width: 18px; height: 18px; }
.fcat__n { font-size: .72rem; font-weight: 700; padding: 2px 6px; background: #f1f3f2; color: var(--muted); font-variant-numeric: tabular-nums; }
.fcat.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fcat.is-on .fcat__ic { color: #8fe3b6; }
.fcat.is-on .fcat__n { background: var(--cta); color: #fff; }
@media (max-width: 760px) { .fcats__nav { display: none; } .fcats__row { margin: 0 -16px; padding: 0 16px 2px; } .fcat { padding: 8px 10px; font-size: .8rem; } }

/* ---- Артикул: кнопка «скопіювати» ---- */
.sku { display: inline-flex; align-items: center; gap: 4px; }
.sku__copy { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 2px; padding: 0;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.sku__copy:hover { color: var(--ink); border-color: var(--line, #e3e6e4); background: #fff; }
.sku__copy:active { transform: scale(.94); }
.sku__copy .sku__ok { display: none; }
.sku__copy.is-done { color: var(--cta); }
.sku__copy.is-done svg:first-child { display: none; }
.sku__copy.is-done .sku__ok { display: block; }
.sku__tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); padding: 4px 8px; background: var(--ink); color: #fff;
  font-size: .7rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.sku__copy.is-done .sku__tip { opacity: 1; transform: translate(-50%, 0); }

/* ---- Популярні категорії (слайдер) ---- */
.tcats { margin: 34px 0 10px; }
.tcats__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.tcats__head h2 { margin: 0; font-family: 'Geologica', sans-serif; font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -.02em; }
.tcats__sub { color: var(--muted); font-size: .85rem; }
.tcats__nav { margin-left: auto; display: flex; gap: 6px; align-self: center; }
.tcats__btn { width: 38px; height: 38px; border: 1px solid var(--line, #e3e6e4); background: #fff; color: var(--ink); cursor: pointer; font-size: 1.05rem; transition: background .2s, color .2s; }
.tcats__btn:hover { background: var(--ink); color: #fff; }
.tcats__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.tcats__row::-webkit-scrollbar { display: none; }
.tcat { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 14px; background: #fff; border: 1px solid var(--line, #e3e6e4);
  color: var(--ink); text-decoration: none; min-width: 0; transition: border-color .25s, transform .25s cubic-bezier(.16,1,.3,1); }
.tcat:hover { border-color: var(--ink); transform: translateY(-2px); }
.tcat__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin-bottom: 6px; background: #f6f7f6; overflow: hidden; }
.tcat__img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.tcat:hover .tcat__img img { transform: scale(1.06); }
.tcat__rank { position: absolute; top: 12px; left: 12px; font-family: 'Geologica', sans-serif; font-weight: 700; font-size: .72rem; padding: 3px 6px; background: var(--ink); color: #fff; letter-spacing: .04em; }
.tcat:nth-child(-n+3) .tcat__rank { background: var(--cta); }
.tcat__t { font-weight: 600; font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcat__n { font-size: .75rem; color: var(--muted); }
@media (max-width: 760px) {
  .tcats { margin-top: 24px; }
  .tcats__nav { display: none; }
  .tcats__row { grid-auto-columns: 42%; margin: 0 -16px; padding: 0 16px 4px; scroll-padding-left: 16px; gap: 10px; }
  .tcat { padding: 10px 10px 12px; }
  .tcat__t { font-size: .82rem; }
}

/* ---- Головна: консультація не «липне» поверх FAQ на планшеті/мобільному ---- */
@media (max-width: 1024px) { .consult, .consult--photo { position: relative; top: auto; } .split { gap: 28px; } }

/* ---- Слайдери: один свайп — одна картка, без «перелітання» через дві ---- */
.rail > .card, .tcat, .bbn__card { scroll-snap-stop: always; }
.rail { overscroll-behavior-x: contain; }

/* ---- Компактні заголовки стрічок на мобільному ---- */
@media (max-width: 760px) {
  .block { margin-top: 26px; }
  .block__head { flex-wrap: nowrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
  .block__head > div:first-child { min-width: 0; }
  .block__head h2 { font-size: 1.22rem; line-height: 1.15; margin: 0; }
  .block__head .muted { font-size: .76rem; line-height: 1.35; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .block__head .rail-nav { flex: none; }
  .block__head .rail-btn { display: none; }
  .block__head .rail-more { font-size: .8rem; white-space: nowrap; gap: 4px; padding-bottom: 2px; }
  .block__head .rail-more svg { width: 14px; height: 14px; }
  .rail { grid-auto-columns: 48%; }
}
@media (max-width: 760px) {
  main .block .block__head h2, .block .block__head h2 { font-size: 1.22rem !important; letter-spacing: -.015em; }
  .block .block__head .rail-more { font-size: .8rem !important; }
  .block .block__head .muted { font-size: .76rem !important; }
  .consult { padding: 22px 18px !important; }
  .consult h2 { font-size: 1.3rem !important; margin-bottom: 8px; }
  .consult p { font-size: .88rem; line-height: 1.5; margin-bottom: 16px; }
  .consult__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .consult__cta .btn { padding: 12px 10px; font-size: .88rem; justify-content: center; min-height: 0; }
  .consult__cta .btn--primary { grid-column: 1 / -1; }
}

/* ---- Іконка відгуків ---- */
.rv-btn { display: inline-flex; align-items: center; gap: 8px; }
.rv-btn .rv-ic { flex: none; }
.rv-link { display: inline-flex; align-items: center; gap: 6px; }
.rv-link .rv-ic { color: var(--cta); flex: none; }
.btn.rv-btn svg.rv-ic { width: 19px !important; height: 19px !important; }
.rv-link svg.rv-ic { width: 16px !important; height: 16px !important; }

/* Сітка: наступна картка заповнює порожню клітинку перед банером на всю ширину */
.grid { grid-auto-flow: row dense; }

/* ---- Google Business Profile: рейтинг і відгуки ---- */
.gstars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 1px; color: #dadce0; vertical-align: middle; }
.gstars__fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #fbbc04; }
.g-logo { flex: none; }
.gbadge { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; padding: 3px 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #fff; text-decoration: none; font-size: .78rem; line-height: 1.2; transition: background .2s; }
.gbadge:hover { background: rgba(255,255,255,.16); }
.gbadge b { font-weight: 700; }
.gbadge__star { color: #fbbc04; }
.gbadge__n { color: rgba(255,255,255,.72); }
.gline { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--line, #e3e6e4); background: #fff; color: var(--ink); text-decoration: none; font-size: .86rem; transition: border-color .2s; }
.gline:hover { border-color: var(--ink); }
.gline b { font-size: 1rem; margin-right: 2px; }
.gline__t { margin-left: auto; color: var(--muted); font-size: .78rem; text-align: right; }
.gblock { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; margin: 48px 0 8px; }
.gsum { display: flex; flex-direction: column; padding: 26px; background: var(--ink, #0f1720); color: #fff; }
.gsum__top { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; }
.gsum__rate { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; }
.gsum__rate b { font-family: 'Geologica', sans-serif; font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.gsum__rate .gstars { font-size: 1.35rem; }
.gsum__rate .gstars__bg { color: rgba(255,255,255,.18); }
.gsum__n { margin: 0; color: rgba(255,255,255,.7); font-size: .88rem; }
.gsum__lead { margin: 16px 0 20px; color: rgba(255,255,255,.62); font-size: .85rem; line-height: 1.5; }
.gsum__cta { margin-top: auto; display: grid; gap: 8px; }
.gsum__cta .btn { justify-content: center; }
.gsum__cta .btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28); }
.gsum__cta .btn--ghost:hover { border-color: #fff; }
.grow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, calc((100% - 32px) / 3)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.grow::-webkit-scrollbar { display: none; }
.grv { scroll-snap-align: start; scroll-snap-stop: always; margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: 1px solid var(--line, #e3e6e4); min-width: 0; }
.grv__who { display: flex; align-items: center; gap: 10px; }
.grv__who > span { display: flex; flex-direction: column; min-width: 0; }
.grv__who b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grv__who small { color: var(--muted); font-size: .74rem; }
.grv__who .g-logo { margin-left: auto; }
.grv__ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #eef1ef; }
.grv__ava--i { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink); }
.grv__t { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2, #33403a); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.grv__more { margin-top: auto; font-size: .78rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) { .gbadge__n { display: none; } }
@media (max-width: 760px) {
  .gblock { grid-template-columns: 1fr; margin-top: 30px; gap: 12px; }
  .gsum { padding: 20px 18px; }
  .gsum__rate { margin-top: 12px; }
  .gsum__rate b { font-size: 2.6rem; }
  .gsum__lead { display: none; }
  .gsum__cta { grid-template-columns: 1fr 1fr; margin-top: 14px; }
  .gsum__cta .btn { padding: 11px 8px; font-size: .84rem; }
  .grow { grid-auto-columns: 84%; margin: 0 -16px; padding: 0 16px; scroll-padding-left: 16px; gap: 10px; }
  .gbadge { margin-right: 8px; padding: 2px 7px; }
}

/* Рейтинг Google — зліва в шапці, завжди видно (і на мобільному) */
.topbar__in > .gbadge { display: inline-flex !important; margin-right: 18px; }
@media (max-width: 1024px) { .topbar__in > .gbadge { margin-right: auto; } }

/* Слайдери не повинні «ловити» вертикальний свайп сторінки (iOS/Android) */
.rail, .tcats__row, .grow, .bbn, .quotes, .fcats__row, .newsrow, .hs > * { overscroll-behavior-x: auto !important; touch-action: pan-x pan-y; }
@media (hover: none) { .rail > .card, .tcat, .grv, .bbn__card { scroll-snap-stop: normal; } .rail, .tcats__row, .grow { scroll-snap-type: x proximity; } }

/* Рядок Google у блоці покупки: «148 відгуків» не переноситься */
.gline__t { white-space: nowrap; }
@media (max-width: 400px) { .gline { flex-wrap: wrap; } .gline__t { margin-left: 0; text-align: left; } }

/* ---- Блок покупки: «Порівняти» + «Тест-драйв» в один ряд, компактно ---- */
.buybox__row2--ride { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buybox__row2--ride > * { width: 100%; min-width: 0; }
.buybox__row2--ride .ride-btn, .buybox__row2--ride .cmp { min-height: 44px; padding: 10px 12px; font-size: .88rem; white-space: nowrap; gap: 7px; justify-content: center; }
.ride-btn__s { display: none; }
@media (max-width: 1280px) { .ride-btn__l { display: none; } .ride-btn__s { display: inline; } }

/* ---- Без «штампу» зеленої лівої риски: м'яка зелена плашка з тонкою рамкою ---- */
.guide__quick, .bn__flash, .auth__bonus { border: 1px solid rgba(0,135,81,.22) !important; border-left-width: 1px !important; background: #f2f8f4 !important; }
.tsize { border-left: 0 !important; padding-left: 10px; }
.tsize b { display: inline-flex; align-items: center; gap: 6px; }
.tsize b::before { content: ""; width: 6px; height: 6px; background: var(--cta); flex: none; }

/* iOS: horizontal scroller з overflow-x:auto неявно отримує overflow-y:auto; якщо вміст вищий хоч на кілька px,
   вертикальний свайп «застрягає» у слайдері замість прокрутки сторінки. Забороняємо вертикальний скрол у всіх горизонтальних стрічках. */
.rail, .tcats__row, .grow, .quotes, .newsrow, .bbn, .fcats__row, .pp-cmp__scroll, .ptabs, .gallery__thumbs, .toolbar, .crumbs, .recent__row, .subcats, .mega__cats { overflow-y: hidden !important; }
.rail { padding-bottom: 16px; }
.navrow__in { overflow-y: hidden !important; }

/* ---- Бігучий рядок у верхній смузі ---- */
.topbar__in { flex-wrap: nowrap; gap: 16px; }
.topbar__in > .sc-top { display: none !important; }            /* «до 16:00» — тепер у бігучому рядку */
.tick { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.tick__track { display: flex; width: max-content; animation: tickMove 55s linear infinite; }
.tick:hover .tick__track { animation-play-state: paused; }
.tick__set { display: flex; flex: none; }
.tick__i { display: inline-flex; align-items: center; gap: 7px; padding: 0 22px; white-space: nowrap; color: #d5ddd9; position: relative; }
.tick__i + .tick__i::before, .tick__set + .tick__set .tick__i:first-child::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--cta); }
.tick__i .ic, .tick__i svg { color: #6fd3a0; flex: none; }
@keyframes tickMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tick__track { animation: none; } }
.topbar__in > .gbadge { flex: none; margin-right: 0 !important; }
.topbar__right { flex: none; }
@media (max-width: 1024px) {
  .topbar__in { gap: 10px; }
  .topbar__in > .tick { display: block !important; }
  .tick__i { padding: 0 16px; font-size: .74rem; }
  .tick__track { animation-duration: 45s; }
  .topbar__hours { display: none !important; }
}
html body .topbar .topbar__in > .sc-top { display: none !important; }
@media (max-width: 520px) {
  .topbar .phones__main b, .topbar .phones__chev { display: none; }
  .topbar .phones__main { width: 30px; height: 26px; justify-content: center; border: 1px solid rgba(255,255,255,.22); gap: 0; }
  .topbar__right { gap: 8px; }
  .topbar .lang { padding: 1px 8px; }
}

/* ---- Блок «Технології та рішення» в описі товару (іконки Tabler) ---- */
.rich .ptech, .ptech { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 14px 0 22px; padding: 0; }
.ptech__i { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px; background: #fff; border: 1px solid var(--line); }
.ptech__ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; background: #f2f8f4; color: var(--cta); }
.ptech__ic svg { width: 22px; height: 22px; }
.ptech__i b { font-family: 'Geologica', sans-serif; font-size: .95rem; color: var(--ink); line-height: 1.25; }
.ptech__i span.ptech__t { font-size: .86rem; color: var(--ink-2, #33403a); line-height: 1.5; }
@media (max-width: 760px) { .rich .ptech, .ptech { grid-template-columns: 1fr; } }

/* Заявка: поле «Посилання на пропозицію» — лише для «Знайшли дешевше» (атрибут hidden має перемагати display поля) */
.lead [hidden], .lead__link[hidden] { display: none !important; }
.lead__prod { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 10px 12px; background: #f2f8f4; border: 1px solid rgba(0,135,81,.22); font-size: .86rem; }
.lead__prod span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lead__prod b { color: var(--ink); font-weight: 600; line-height: 1.35; }

/* ---- Кошик: оновлений дизайн ---- */
.cart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 18px; }
.cart-head h1 { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cart-head__n { font-family: var(--text, 'Onest'), sans-serif; font-size: .95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.cart-head__back { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cart-head__back:hover { color: var(--cta); }
.cart-lines { display: grid; gap: 10px; }
.cart-line { grid-template-columns: 104px minmax(0, 1fr) auto auto 36px; gap: 18px; padding: 14px 16px 14px 14px; background: #fff; border: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: border-color .2s; }
.cart-line:hover { border-color: #c9cfcc; }
.cart-line > a:first-child { display: grid; place-items: center; width: 104px; height: 104px; background: #f6f7f6; }
.cart-line img { width: 92px; height: 92px; background: transparent; }
.cart-line__info { display: flex; flex-direction: column; gap: 5px; }
.cart-line__title { font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-line__title:hover { color: var(--cta); }
.cart-line__meta { font-size: .78rem; color: var(--muted); letter-spacing: .01em; }
.cart-line__st { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.cart-line__st i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3a0; flex: none; }
.cart-line__st--shop { color: var(--cta); font-weight: 600; }
.cart-line__st--shop i, .cart-line__st--stock i { background: var(--cta); }
.cart-line__st--order i, .cart-line__st--preorder i { background: #d08a14; }
.cart-line .qty { border: 1px solid var(--line); background: #fff; border-radius: 0; }
.cart-line .qty__btn { width: 34px; height: 36px; background: #fff; color: var(--ink); transition: background .15s; }
.cart-line .qty__btn:hover { background: #f1f3f2; }
.cart-line .qty input { width: 40px; font-weight: 700; border-left: 1px solid var(--line); border-right: 1px solid var(--line); height: 36px; }
.cart-line__sum { font-size: 1.12rem; min-width: 96px; text-align: right; }
.cart-line__del { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; color: var(--muted); transition: color .2s, border-color .2s; }
.cart-line__del:hover { color: var(--sale, #e5484d); border-color: var(--line); }
.tyre-nudge { border: 1px solid rgba(0,135,81,.22) !important; background: #f2f8f4 !important; margin: 4px 0 0; }
.summary { border-radius: 0; box-shadow: 0 20px 44px -30px rgba(15,23,32,.35); padding: 22px; }
.summary__total { align-items: baseline; }
.summary__total b { font-size: 1.5rem; letter-spacing: -.01em; }
@media (max-width: 760px) {
  .cart-head { margin: 10px 0 12px; }
  .cart-head h1 { font-size: 1.6rem; }
  .cart-head__back { font-size: .82rem; }
  .cart-line { grid-template-columns: 84px minmax(0, 1fr) 32px; grid-template-areas: "img info del" "img qty sum"; gap: 8px 12px; padding: 12px; align-items: start; }
  .cart-line > a:first-child { grid-area: img; width: 84px; height: 84px; }
  .cart-line img { width: 74px; height: 74px; }
  .cart-line__info { grid-area: info; }
  .cart-line__title { font-size: .9rem; }
  .cart-line .qty { grid-area: qty; justify-self: start; align-self: end; }
  .cart-line__sum { grid-area: sum; align-self: end; min-width: 0; font-size: 1.05rem; }
  .cart-line__del { grid-area: del; width: 32px; height: 32px; }
}

/* ---- Доставка в підсумку: безкоштовно / прогрес до безкоштовної; мінімальне замовлення ---- */
.ship-free { color: var(--cta); font-family: var(--display, 'Geologica'), sans-serif; }
.ship-from { color: var(--muted); font-size: .88rem; }
.ship-note { margin: -4px 0 2px; font-size: .78rem; color: var(--muted); }
.ship-bar { margin: -2px 0 4px; }
.ship-bar__t { font-size: .8rem; color: var(--ink-2, #33403a); margin-bottom: 6px; }
.ship-bar__t b { color: var(--ink); }
.ship-bar__track { height: 4px; background: #e8ecea; overflow: hidden; }
.ship-bar__track i { display: block; height: 100%; background: var(--cta); transition: width .4s cubic-bezier(.16,1,.3,1); }
.min-order { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #fff6e8; border: 1px solid #f0d3a6; font-size: .84rem; }
.min-order b { color: #8a5a00; }
.btn.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }

/* ---- Мобільна панель «ціна + Купити»: з'являється лише коли основна кнопка покупки пішла з екрана ---- */
@media (max-width: 760px) {
  .stickybuy { transform: translateY(calc(100% + 80px)); transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .stickybuy.is-on { transform: none; }
  body:has(.stickybuy) .fab { bottom: calc(70px + env(safe-area-inset-bottom)); transition: bottom .35s cubic-bezier(.16,1,.3,1); }
  body:has(.stickybuy.is-on) .fab { bottom: calc(136px + env(safe-area-inset-bottom)); }
}

/* ---- Мобільне меню: акордеон підкатегорій ---- */
@media (max-width: 1024px) {
  .mega__tabs { max-height: calc(100dvh - 190px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 90px; }
  .mega__tab[data-tab]::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s; flex: none; margin-right: 6px; }
  .mega__tab.is-acc::after { transform: rotate(-135deg); border-color: var(--cta); }
  .mega__tab.is-acc { background: #f2f8f4; }
  .macc { padding: 6px 0 14px; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
  .macc.is-in { opacity: 1; transform: none; }
  .macc__all { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; padding: 12px 14px; background: var(--ink, #0f1720); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; }
  .macc__all b { color: #6fd3a0; margin-left: 4px; }
  .macc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .macc__i { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 8px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .82rem; line-height: 1.25; }
  .macc__i:active { border-color: var(--cta); }
  .macc__img { flex: none; display: grid; place-items: center; width: 38px; height: 38px; background: #f6f7f6; }
  .macc__img img { max-width: 34px; max-height: 34px; object-fit: contain; mix-blend-mode: multiply; }
  .macc__t { min-width: 0; overflow-wrap: anywhere; }
}

/* Мобільне меню: «Дивитися всі» — легкий зелений рядок замість чорної плашки */
@media (max-width: 1024px) {
  .macc__all { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 11px 12px; background: #f2f8f4; border: 1px solid rgba(0,135,81,.22);
    color: var(--cta-deep, #006b40); font-weight: 600; font-size: .88rem; text-decoration: none; }
  .macc__all b { margin-left: 0; padding: 2px 8px; background: #fff; border: 1px solid rgba(0,135,81,.22); color: var(--ink); font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .macc__all span { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; background: var(--cta); color: #fff; font-size: .9rem; line-height: 1; }
  .macc__all:active { background: #e6f2eb; }
}

/* Мега-меню (десктоп): довгий список підкатегорій прокручується всередині панелі */
@media (min-width: 1025px) { .mega__pane .mega__subs { max-height: calc(100vh - 330px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; } }

/* Мобільна панель покупки: фото + назва товару + ціна + кнопка */
@media (max-width: 760px) {
  .stickybuy { gap: 10px; padding: 8px 12px; justify-content: flex-start; }
  .stickybuy__img { flex: none; width: 44px; height: 44px; object-fit: contain; background: #f6f7f6; mix-blend-mode: multiply; }
  .stickybuy__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .stickybuy__t { font-size: .76rem; line-height: 1.25; color: var(--ink-2, #33403a); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .stickybuy__info b { font-size: 1.05rem; line-height: 1.2; }
  .stickybuy form, .stickybuy > .btn { flex: none; }
  .stickybuy .qty, .stickybuy .qty--buy { display: none; }
}
.facets__box.is-loading .facet__opts, .facets__box.is-loading .fx-chips { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* Смужка акцій: мітка («ЧЕСНА ЦІНА», «АКЦІЯ») — у потоці над великою цифрою, не накладається на заголовок на вузьких екранах */
@media (min-width: 761px) {
  .promo-sl--band .promo-sl__slide { grid-template-rows: auto auto; align-content: center; row-gap: 6px; }
  .promo-sl--band .promo-sl__tag { position: static; grid-column: 1; grid-row: 1; justify-self: start; line-height: 1.2; }
  .promo-sl--band .promo-sl__big { grid-column: 1; grid-row: 2; }
  .promo-sl--band .promo-sl__body { grid-column: 2; grid-row: 1 / span 2; }
}

/* Доступність (Lighthouse): контраст статусу «у магазині» в таблиці порівняння; більша зона натиску крапок слайдера */
.pp-cmp__st--shop { color: #006b40 !important; }
.pp-cmp__t .is-self .pp-cmp__st--shop { color: #005a36 !important; }
@media (max-width: 760px) {
  .promo-band .promo-sl__dots { gap: 0; }
  .promo-band .promo-sl__dot { width: 24px; height: 24px; padding: 8px 6px; background-clip: content-box; }
}

/* Горизонтальні стрічки: точка «прилипання» = внутрішній відступ, щоб браузер не підкручував їх під час завантаження
   (така прокрутка зупиняє вимір LCP — у PageSpeed була помилка NO_LCP) */
.rail, .newsrow { scroll-padding-inline: 2px; }
.tcats__row, .grow, .quotes, .bbn, .fcats__row { scroll-padding-inline: 0; }
@media (max-width: 760px) { .tcats__row, .grow, .catbns__row, .fcats__row { scroll-padding-inline: 16px; } }
.catbns__row { scroll-behavior: auto; }

.cart-pre { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: #fff6e8; border: 1px solid #f0d3a6; font-size: .86rem; }
.cart-pre svg { color: #b06d00; flex: none; margin-top: 1px; }
.cart-pre span { display: flex; flex-direction: column; gap: 2px; color: #5c4200; }
.cart-pre b { color: #3d2c00; }

.svc-geo { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.svc-geo > p { max-width: 75ch; color: var(--ink-2, #33403a); line-height: 1.6; }

/* Кольори варіантів фото-плитками (картка товару) */
.vimgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.vimg { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 4px 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease); min-width: 0; }
.vimg img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.vimg span { font-size: .72rem; font-weight: 500; line-height: 1.2; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.vimg:hover { border-color: var(--ink); }
.vimg.is-active { border: 2px solid var(--ink); padding: 3px 3px 5px; }
.vimg.is-active span { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .vimgs { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); } }

/* Головна: фото магазину під героєм */
.sfr { padding: 48px 0 8px; }
.sfr__in { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.sfr__ph { position: relative; margin: 0; overflow: hidden; background: #111; }
.sfr__ph img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 896; object-fit: cover; }
.sfr__ph figcaption { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: #111; color: #fff; font-size: .82rem; font-weight: 600; }
.sfr__eye { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cta); margin-bottom: 12px; }
.sfr__txt h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; }
.sfr__txt > p { color: var(--muted); line-height: 1.6; margin: 0 0 22px; max-width: 52ch; }
.sfr__facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sfr__facts > div { padding: 14px 12px 14px 0; }
.sfr__facts > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.sfr__facts dt { font-family: Geologica, sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.sfr__facts dt span { color: #f5a623; font-size: 1rem; margin-left: 2px; }
.sfr__facts dd { margin: 4px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.sfr__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.sfr__cta .btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 900px) {
  .sfr { padding: 32px 0 4px; }
  .sfr__in { grid-template-columns: 1fr; gap: 20px; }
  .sfr__ph { margin: 0 -16px; }
  .sfr__facts dt { font-size: 1.1rem; }
  .sfr__cta .btn { flex: 1 1 auto; justify-content: center; }
}