:root {
  --color-primary: #1a365d;
  --color-primary-light: #2a4a7f;
  --color-btn: #2dd4a8;
  --color-btn-hover: #22c99e;
  --color-btn-text: #1a202c;
  --color-accent: #e53e3e;
  --color-accent-hover: #c53030;
  --color-bg: #f7f7f7;
  --color-surface: #ffffff;
  --color-text: #1a202c;
  /* Was #718096 → 3.7:1 on #f7f7f7 — failed WCAG AA. Darkened to pass 4.5:1. */
  --color-text-muted: #5a6678;
  --color-promo-bg: #1a202c;
  --color-promo-text: #ffffff;
  --color-footer-bg: #1a202c;
  --color-footer-text: #cbd5e0;
  --color-border: #e2e8f0;
  --color-border-light: #edf2f7;
  --color-bg-subtle: #edf2f7;
  --color-bg-hover: #f7fafc;
  /* Was #38a169 → 3.0:1 on #f7f7f7 — failed WCAG AA. Darkened to pass 4.5:1. */
  --color-success: #276749;
  --color-header-bg: #1a2332;
  --max-width: 1440px;
  --gap: 1rem;
  --radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

.price-unit {
  font-size: 0.7em;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* User dropdown menu */
.user-menu-wrap {
  position: relative;
}

.user-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.25rem;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 180px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 0.5rem 0;
  z-index: 100;
}

.user-menu-wrap.open .user-menu-dropdown {
  display: block;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.user-menu-item:hover {
  background: #f0f0f0;
}

.user-menu-divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 0.25rem 0;
}

/* Screen-reader-only utility: visually invisible but exposed to AT.   */
/* Used to add accessible names to icon-only buttons/links where       */
/* aria-label on a custom element trips Lighthouse aria-prohibited.    */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ */
/* CLS prevention for Web Awesome custom elements.                     */
/* WA components register asynchronously (webawesome.loader.js). Before */
/* customElements.define runs, an undefined <wa-*> has no UA box, so   */
/* it collapses to 0×0 and the surrounding layout reflows as soon as it */
/* defines. We reserve the rendered size BEFORE define so the only      */
/* observable change is paint, not layout — CLS stays ~0.               */
/* ------------------------------------------------------------------ */

/* Carousel reservation — measured at ~250px on home brand strip and  */
/* ~300px on the PDP gallery. Pick the larger; visibility hides the   */
/* unstyled markup so users don't see broken slides during boot.       */
/* Per-carousel reservations — measured live, see Phase 5 CLS notes.   */
/* The base rule covers any unlabelled carousel; per-class rules pin    */
/* their actual rendered height so CLS doesn't blow up on define.      */
.pdp-gallery        { min-height: 300px; }
.hero-brands        { min-height: 252px; }
.tag-carousel-wrap  { min-height: 432px; }

wa-carousel:not(:defined) {
  display: block;
  visibility: hidden;
  min-height: 252px;
}
/* Home product/category rows: BEFORE (or if) Web Awesome upgrades, render a
   graceful CSS scroll-strip instead of a tall hidden placeholder. Without this,
   a slow WA CDN on mobile leaves big empty gaps between sections and the raw,
   un-laid-out cards overlap. If WA never loads, this stays a usable strip. */
wa-carousel.tag-carousel:not(:defined),
wa-carousel.cat-carousel:not(:defined) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow-x: auto;
  visibility: visible;
  min-height: 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
wa-carousel.tag-carousel:not(:defined) > wa-carousel-item,
wa-carousel.cat-carousel:not(:defined) > wa-carousel-item {
  flex: 0 0 auto;
  width: 46%;
  scroll-snap-align: start;
}
@media (min-width: 769px) {
  wa-carousel.tag-carousel:not(:defined) > wa-carousel-item,
  wa-carousel.cat-carousel:not(:defined) > wa-carousel-item { width: 23%; }
}

wa-carousel:defined {
  animation: fadeIn 0.2s ease-in;
}

/* Buttons, icons, inputs and other line-level WA elements: give them */
/* an explicit baseline so undefined → defined doesn't change line     */
/* height or push siblings. Sizes match WA's --wa-button/icon tokens.  */
wa-button:not(:defined) {
  display: inline-block;
  min-height: 2.5rem;
  min-width: 2.5rem;
  vertical-align: middle;
}
wa-icon:not(:defined) {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
wa-input:not(:defined),
wa-select:not(:defined),
wa-textarea:not(:defined) {
  display: block;
  min-height: 2.5rem;
}
wa-divider:not(:defined) {
  display: block;
  height: 1px;
}
wa-badge:not(:defined) {
  display: inline-block;
  min-height: 1.25rem;
  min-width: 1.25rem;
}
wa-card:not(:defined) {
  display: block;
  min-height: 100px;
}
/* Product cards render ~400-420px once WA defines wa-card. The bare 100px */
/* reservation above would collapse each card by 300px before define, so   */
/* a grid of product cards is the dominant CLS cluster on home/catalog.    */
wa-card.product-card:not(:defined) { min-height: 400px; }
wa-card.benefit:not(:defined)      { min-height: 140px; }
/* Drawer is hidden until opened anyway — keep it out of layout. */
wa-drawer:not(:defined) {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* WA button overrides — teal brand color */
wa-button[variant="brand"]::part(base),
wa-button[variant="success"]::part(base) {
  background: var(--color-btn);
  border-color: var(--color-btn);
  color: var(--color-btn-text);
  font-weight: 600;
}

wa-button[variant="brand"]::part(base):hover,
wa-button[variant="success"]::part(base):hover {
  background: var(--color-btn-hover);
  border-color: var(--color-btn-hover);
}

wa-button[variant="neutral"][outline]::part(base) {
  border-color: #d1d5db;
  color: var(--color-text);
  background: #fff;
}

wa-button[variant="neutral"][outline]::part(base):hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

/* `clip` cuts horizontal overflow like `hidden` but does NOT create a
   scroll container — `hidden` on body silently breaks position:sticky. */
html {
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* Promo bar */
.promo-bar {
  background: #c4f5e1;
  color: #1a2332;
  text-align: center;
  padding: 0.5rem var(--gap);
  font-size: 0.85rem;
  font-weight: 500;
}
.promo-bar p {
  margin: 0;
}
.promo-bar a {
  color: #1a2332;
  text-decoration: underline;
  font-weight: 500;
}

/* Header */
.site-header {
  background: var(--color-header-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.header-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.6rem 0 0.15rem;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0 0.35rem;
}

.header-nav #menu-toggle {
  flex-shrink: 0;
}

.header-tags {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.header-tags::-webkit-scrollbar { display: none; }

.header-tag {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}

.header-tag:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}

.header-tag wa-icon {
  font-size: 0.75rem;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
}

.logo:hover {
  text-decoration: none;
}

.header-search {
  flex: 1;
  position: relative;
}

/* As-you-type suggest panel (Datastar SSE-patched), ManoMano-style: matching
   categories + brands on the left, product cards on the right, «show all»
   footer. Hidden until it carries the --open modifier (set server-side when
   there are matches). */
#search-suggest { display: none; }
#search-suggest.search-suggest--open {
  display: block;
  position: absolute;
  top: calc(100% + 0.25rem);
  /* Anchor to the input's right edge and grow leftward: a left-anchored wide
     panel can overflow the viewport's right edge on mid-width screens. */
  right: 0;
  left: auto;
  width: min(920px, 96vw);
  z-index: 50;
  background: var(--wa-color-surface-default, #fff);
  border: 1px solid var(--wa-color-neutral-fill-normal, #e5e7eb);
  border-radius: var(--wa-border-radius-l, 0.75rem);
  box-shadow: var(--wa-shadow-l, 0 8px 24px rgba(0, 0, 0, 0.12));
  overflow: hidden;
}
.search-suggest__panel { display: grid; grid-template-columns: 240px 1fr; }
.search-suggest__aside {
  border-right: 1px solid var(--wa-color-neutral-fill-normal, #e5e7eb);
  padding: 0.75rem;
  max-height: 70vh;
  overflow-y: auto;
}
.search-suggest__group { margin-bottom: 0.75rem; }
.search-suggest__group:last-child { margin-bottom: 0; }
.search-suggest__grouptitle {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wa-color-neutral-700, #6b7280);
  margin: 0.25rem 0 0.4rem;
}
.search-suggest__sug {
  display: block;
  padding: 0.3rem 0.4rem;
  border-radius: 0.4rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
}
.search-suggest__sug:hover { background: var(--wa-color-neutral-fill-quiet, #f3f4f6); }
.search-suggest__brands { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.search-suggest__brand {
  border: 1px solid var(--wa-color-neutral-fill-normal, #e5e7eb);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  color: inherit;
  text-decoration: none;
}
.search-suggest__brand:hover { background: var(--wa-color-neutral-fill-quiet, #f3f4f6); }
.search-suggest__main { display: flex; flex-direction: column; min-width: 0; }
.search-suggest__grid {
  display: grid;
  /* minmax(0,1fr) — without the 0 floor, a long unbreakable token in a product
     name (e.g. «BCST-460(800Вт;2000об/мин;…)») forces the track past 1fr and
     blows up the whole grid. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  max-height: 70vh;
  overflow-y: auto;
}
.search-suggest__card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
}
.search-suggest__card:hover { background: var(--wa-color-neutral-fill-quiet, #f3f4f6); }
.search-suggest__thumb {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-neutral-fill-quiet, #f7f7f8);
  border-radius: 0.4rem;
  overflow: hidden;
}
.search-suggest__thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-suggest__thumb wa-icon { font-size: 2rem; opacity: 0.3; }
.search-suggest__cardname {
  font-size: 0.82rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* break long space-less tokens so they wrap instead of forcing track width */
  overflow-wrap: anywhere;
}
.search-suggest__cardprice { font-weight: 700; font-size: 0.9rem; }
.search-suggest__old {
  font-weight: 400;
  font-size: 0.78rem;
  text-decoration: line-through;
  color: var(--wa-color-neutral-600, #9ca3af);
  margin-left: 0.35rem;
}
.search-suggest__all {
  display: block;
  text-align: center;
  padding: 0.85rem;
  margin: 0.25rem 0.75rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  background: var(--color-btn, #0a2540);
  color: var(--color-btn-text, #fff);
  text-decoration: none;
}
.search-suggest__all:hover { filter: brightness(1.08); }

@media (max-width: 640px) {
  #search-suggest.search-suggest--open { width: 96vw; }
  .search-suggest__panel { grid-template-columns: 1fr; }
  .search-suggest__aside {
    border-right: none;
    border-bottom: 1px solid var(--wa-color-neutral-fill-normal, #e5e7eb);
  }
  .search-suggest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.header-search wa-input,
.header-search-mobile wa-input {
  width: 100%;
  --wa-input-border-radius-medium: 999px;
  --wa-input-height-medium: 2.75rem;
}

.header-search-mobile { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  overflow: visible;
}

.header-actions wa-button::part(base) {
  font-size: 1.3rem;
  color: #fff;
  background: transparent;
  border: none;
  padding: 0.5rem;
}

.header-actions wa-button::part(base):hover {
  color: var(--color-btn);
  background: transparent;
}

.cart-badge {
  position: relative;
  display: inline-flex;
}

#cart-badge {
  position: absolute;
  top: 4px;
  right: -2px;
}

#cart-badge::part(base) {
  background: var(--color-btn);
  color: var(--color-btn-text);
  font-size: 0.6rem;
  padding: 1px 5px;
  min-width: 16px;
  min-height: 16px;
  line-height: 1;
}

/* Menu button */
.menu-label {
  font-size: 0.85rem;
  font-weight: 600;
}

#menu-toggle::part(base) {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  background: transparent;
  border: none;
  padding-left: 0;
}

#menu-toggle::part(base):hover {
  color: var(--color-btn);
  background: transparent;
}

/* Catalog drawer */
#catalog-drawer {
  --header-spacing: var(--wa-spacing-medium);
}

#catalog-drawer::part(header) {
  display: none;
}

#catalog-drawer::part(body) {
  padding: 0;
}

.drawer-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* breathing room under the last item ("Бренды") so it never sits flush
     against the viewport bottom, where the browser's URL hover tooltip and
     mobile UI would otherwise cover it */
  padding-bottom: 6rem;
}

.drawer-cat-list li {
  border-bottom: 1px solid var(--color-border-light);
}

.drawer-cat-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background 0.15s;
}

.drawer-cat-list a span {
  flex: 1;
}

.drawer-cat-list a:hover {
  background: var(--color-bg-hover);
  text-decoration: none;
}

.drawer-cat-list .cat-icon {
  font-size: 1.2rem;
  color: var(--color-primary);
  width: 1.5rem;
  flex-shrink: 0;
}

.drawer-cat-list .cat-thumb {
  width: 2.25rem;
  height: 2.25rem;
  /* No frame: the product photo sits bare on the row (no circle, border or
     white box). object-fit: contain keeps the whole product without cropping. */
  object-fit: contain;
  flex-shrink: 0;
}

.drawer-cat-list .cat-arrow {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Drawer title bar: [back] [title] [close] */
.drawer-title-bar {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  gap: 0.5rem;
}

.drawer-title-bar > :first-child { flex-shrink: 0; width: 28px; }
.drawer-title-bar > :last-child { flex-shrink: 0; margin-left: auto; }

.drawer-title {
  font-size: 1.15rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-back {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-back:hover { opacity: 0.7; }

.drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--color-text);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Category banner: image with overlay, buttons, title badge */
.drawer-cat-banner {
  position: relative;
  height: 160px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  margin: 0 0 0.5rem;
}

.drawer-cat-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}

.drawer-banner-btn {
  position: absolute;
  top: 0.75rem;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
}

.drawer-banner-btn:hover { background: #fff; }
.drawer-banner-back { left: 0.75rem; }
.drawer-banner-close { right: 0.75rem; }

.drawer-cat-banner-title {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text);
  background: rgba(255,255,255,0.9);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
}

.drawer-all-link {
  display: block;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-btn);
}

.drawer-all-link:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* Main content */
main {
  min-height: 60vh;
}

/* Hero banner */
.hero {
  position: relative;
  background: var(--color-primary) center/cover no-repeat;
  color: #fff;
  padding: var(--wa-space-5xl) 0;
  margin-bottom: var(--wa-space-l);
}

/* Legibility-first scrim: dark over the headline column (left), fading to the
   photo on the right where the brand carousel sits. Replaces the old decorative
   navy 135deg wash and the empty .hero-overlay <div>. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* "Плотная панель": solid navy band over the headline column (left ~40%),
     hard-ish fade to the bare photo on the right. Editorial, not photographic. */
  background: linear-gradient(90deg,
              rgba(15,23,42,0.95) 0%,
              rgba(15,23,42,0.95) 40%,
              rgba(15,23,42,0) 62%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  z-index: 1;
}

.hero-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wa-space-2xl);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: 0 0 var(--wa-space-s);
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero p {
  font-size: var(--wa-font-size-l);
  margin: 0 0 var(--wa-space-l);
  color: rgba(255,255,255,0.95);
  max-width: 600px;
}

/* Brand carousel in hero */
.hero-brands {
  border-radius: var(--wa-border-radius-l);
  overflow: hidden;
}

.hero-brands wa-carousel {
  --slide-size: 100%;
}

.hero-brands wa-carousel::part(navigation-button) {
  color: #fff;
}

.hero-brands wa-carousel::part(pagination) {
  display: none;
}

.brand-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wa-space-m);
  text-decoration: none;
  color: #fff;
  /* near-solid dark plate so it never melts into the bright hero photo */
  background: rgba(11, 23, 40, 0.93);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-xl);
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.brand-slide:hover {
  background: rgba(13, 27, 46, 0.9);
  border-color: rgba(45,212,168,0.5);
}

.brand-slide-logo {
  width: 100%;
  max-width: 210px;
  height: 84px;
  object-fit: contain;
  /* logos are drawn for white backgrounds — give them one so they don't
     vanish into the dark plate or the photo behind it */
  background: #fff;
  border-radius: 12px;
  padding: 12px 18px;
  box-sizing: border-box;
}

.brand-slide-text {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
}

.brand-slide-name {
  font-weight: 700;
  font-size: var(--wa-font-size-2xl);
}

.brand-slide-tagline {
  font-size: var(--wa-font-size-m);
  opacity: 0.8;
}

.hero-brands-all {
  display: block;
  text-align: center;
  margin-top: var(--wa-space-s, 0.75rem);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.9;
}

.hero-brands-all:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Section layout */
.section {
  padding: var(--wa-space-xl) 0;
}

.section-title {
  font-size: var(--wa-font-size-xl);
  font-weight: 700;
  margin: 0 0 var(--wa-space-m);
}

/* Card grids */
.grid-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--wa-space-m);
}

.grid-categories .cat-card-links {
  min-height: 5.5em;
}

.grid-products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--wa-space-m);
}

/* In catalog with sidebar, max 4 columns */
.catalog-layout .grid-products {
  grid-template-columns: repeat(4, 1fr);
}

/* Benefits grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--wa-space-m);
}

.benefits-section {
  background: var(--wa-color-neutral-fill-quiet);
  padding: var(--wa-space-2xl) 0;
}


/* Category card (wa-card based) */

.cat-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 340px;
  border-radius: var(--wa-border-radius-large, 0.75rem);
  background: var(--wa-color-neutral-0, #fff);
  border: 1px solid var(--wa-color-neutral-200, #e2e8f0);
  color: inherit;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wa-shadow-l);
}

/* Cover-image header with the category title overlaid (Фото-обложка). */
.cat-card-media {
  position: relative;
  display: block;
  height: 170px;            /* fine-tune this to set the title height */
  flex: none;
  text-decoration: none;
  background: var(--color-header-bg, #1a2332);
}

.cat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,23,42,0.8) 0%, rgba(15,23,42,0.12) 52%, transparent 80%);
}

.cat-card-media-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(255,255,255,0.85);
}

.cat-card-title {
  position: absolute;
  left: 14px;
  bottom: 11px;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.cat-card-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 5px 1rem 1rem;   /* +5px breathing room between the photo and the menu items */
}

.cat-card-header {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  margin-bottom: var(--wa-space-s);
}

.cat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wa-color-brand-fill-quiet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--wa-font-size-l);
  color: var(--wa-color-brand-text-normal);
}

.cat-card-title:hover {
  text-decoration: underline;
}

.cat-card-links {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  margin-bottom: 0.5rem;
}

.cat-card-links span,
.cat-card-links a {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0.2rem 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-card-links a:hover {
  color: var(--color-btn);
  text-decoration: underline;
}

.cat-card-more {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-btn);
  margin-top: auto;
  text-decoration: none;
}

.cat-card-more:hover {
  text-decoration: underline;
}

.cat-card-more:hover {
  text-decoration: none;
  color: var(--color-btn-hover);
}

.cat-subcats {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.cat-subcats li {
  padding: 0.2rem 0;
}

.cat-subcats a {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.cat-subcats a:hover {
  color: var(--color-primary);
}

.cat-see-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Product card */
.product-card {
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: var(--radius);
  overflow: hidden;
}

.product-card::part(base) {
  padding: 0;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.product-card::part(body) {
  padding: 0;
}

.grid-products > a {
  display: flex;
  min-width: 0;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.product-img {
  position: relative;
  width: 100%;
  height: 260px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
}

.product-info {
  padding: 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-brand {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-height: 1.1em;
}

.product-title {
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0.2rem 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  height: 2.6em;
}

.product-rating-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  min-height: 1.2em;
}

.product-review-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.product-price-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
  padding-top: 0.25rem;
}

.product-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}

.product-cart-btn {
  display: block;
  margin-top: 0.5rem;
}

.product-cart-btn::part(base) {
  width: 100%;
}

.product-old-price {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
  height: 1.2em;
}

.product-old-price-spacer {
  height: 1.2em;
}

/* Benefits */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0;
}

.benefit {
  text-align: center;
  padding: 1rem;
}

.benefit wa-icon {
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.benefit-title {
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}

.benefit-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Footer */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 3rem 0 1.5rem;
  margin-top: 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-col h3 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 1rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: var(--color-footer-text);
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid #2d3748;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: #4a5568;
}

/* Catalog page */
.catalog-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
}

.catalog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.filter-card {
  overflow: hidden;
}

.filter-card h3 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
  font-weight: 600;
}

/* Collapsible filter card (wa-details) */
wa-details.filter-card {
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid var(--wa-color-neutral-200, #e2e8f0);
}

wa-details.filter-card::part(base) {
  border: none;
}

wa-details.filter-card::part(header) {
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 0;
}

wa-details.filter-card::part(content) {
  padding: 0 0 0.75rem;
}

.filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-list li {
  margin-bottom: 0.25rem;
}

.filter-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background 0.15s;
}

.filter-list a:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}

.filter-list a.active {
  background: var(--color-primary);
  color: #fff;
}

.filter-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
}

.filter-list a.active .filter-count {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.catalog-main {
  min-width: 0;
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.catalog-toolbar-actions {
  display: flex;
  /* Sort has a label above its box; the filter button doesn't — align both
     controls on the same bottom baseline instead of centering. */
  align-items: flex-end;
  gap: 0.5rem;
  /* Desktop: filter button is hidden, so push the lone sort dropdown to the
     right edge above the grid. Mobile overrides this to flex-start below. */
  justify-content: flex-end;
}

/* Standalone catalog actions row (between subcategory pills and the grid) needs
   bottom spacing so it doesn't stick to the products. Scoped to the catalog
   layout so the brand/tag/fits in-toolbar actions are unaffected. */
.catalog-main > .catalog-toolbar-actions {
  margin-bottom: 1.25rem;
}

/* Desktop: title (left) + sort (right) share the header row, products below.
   Subcategory navigation lives in the LEFT sidebar (sidebar-browse-category),
   so the horizontal pills are hidden here. Mobile keeps the block stack
   (title → pills → filters+sort → grid) and the pills as the subcategory nav. */
@media (min-width: 769px) {
  .catalog-main {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    align-items: center;
    /* Keep rows content-sized and pinned to the top — otherwise, when the
       sidebar is taller than a short product grid, the grid stretches its rows
       and the header drifts to the vertical centre. */
    align-content: start;
  }
  .catalog-main > .sibling-pills-wrap,
  .catalog-main > .sibling-pills { display: none; }
  .catalog-main > .catalog-toolbar { grid-column: 1; grid-row: 1; }
  .catalog-main > .catalog-toolbar-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-bottom: 0;
  }
  .catalog-main > .grid-products,
  .catalog-main > .catalog-empty,
  .catalog-main > .pagination {
    grid-column: 1 / -1;
  }
}

.catalog-result-count {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.catalog-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

/* Sort dropdown shouldn't stretch full-width — size it to its content. */
.catalog-sort wa-select {
  width: 14rem;
  max-width: 100%;
}

.catalog-sort label {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.catalog-empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--color-text-muted);
}

.catalog-empty wa-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

/* Filter button: hidden on desktop, visible on mobile */
.mobile-filter-btn { display: none; }

/* Breadcrumbs */
.breadcrumbs {
  padding: 1rem 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.breadcrumbs a { color: var(--color-primary); }
.breadcrumbs span { margin: 0 0.4rem; }

/* Product detail page */
.pdp {
  padding: 2rem 0;
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.pdp-grid > * {
  min-width: 0;
}

.pdp-gallery {
  /* Sticky: the (shorter) gallery pins while the taller info column scrolls
     past, then releases at the bottom of the grid — no empty gap under the
     image, no nested/visible scrollbars. */
  position: sticky;
  top: 1rem;
  align-self: start;
}

.pdp-carousel {
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  --aspect-ratio: 4/3;
}

.pdp-carousel wa-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdp-thumbnails {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow-x: auto;
}

.pdp-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-thumb.active,
.pdp-thumb:hover {
  border-color: var(--color-primary);
}

.pdp-no-image {
  /* match the carousel's 4/3 — a 1:1 square is far too tall full-width on mobile */
  aspect-ratio: 4/3;
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.pdp-info h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  overflow-wrap: break-word;
  line-height: 1.3;
}

.pdp-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.pdp-rating-count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.pdp-price-block {
  margin: 1.5rem 0;
}

.pdp-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
}

.pdp-old-price {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-left: 0.75rem;
}

.pdp-stock {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.pdp-stock.in-stock { color: var(--color-success); }
.pdp-stock.out-of-stock { color: var(--color-accent); }

.pdp-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.pdp-actions wa-button {
  flex: 1;
}

.pdp-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-features li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.pdp-features li:last-child {
  border-bottom: none;
}

.pdp-feat-label {
  color: var(--color-text-muted);
}

.pdp-feat-value {
  font-weight: 500;
}

/* Product description tabs */
.pdp-tabs {
  margin-top: 2.5rem;
}

.pdp-tab-content {
  padding: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* Related products */
.related-section {
  padding: 2rem 0;
}

/* PDP buy row with quantity */
.pdp-buy-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.pdp-cart-btn {
  flex: 1 1 auto;
}

.pdp-wish-btn {
  flex-shrink: 0;
}

/* Shared quantity selector component */
.qty-selector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.qty-selector wa-button {
  --wa-input-border-width: 0;
}

.qty-selector wa-button::part(base) {
  border: none;
  border-radius: 0;
  padding: 0.5rem 0.85rem;
  background: transparent;
  color: #9ca3af;
  font-size: 1.2rem;
}

.qty-selector wa-button::part(base):hover {
  background: #f3f4f6;
  color: var(--color-text);
}

.qty-input {
  width: 40px;
  border: none;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  background: transparent;
  -moz-appearance: textfield;
  outline: none;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* PDP info rows (open drawers) */
.pdp-info-rows {
  margin-top: 1.5rem;
}

.pdp-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0.25rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  font-family: inherit;
  transition: color 0.15s;
}

.pdp-info-row:first-child {
  border-top: 1px solid var(--color-border);
}

.pdp-info-row:hover {
  color: var(--color-primary);
}

.pdp-info-row > wa-icon {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.pdp-info-row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pdp-info-row-count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* PDP drawers */
#drawer-product-info,
#drawer-delivery,
#drawer-reviews {
  --size: 560px;
}

/* Drawer content */
.drawer-body {
  padding: 0.5rem 0;
}

.drawer-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.drawer-features {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.drawer-features tr:nth-child(even) {
  background: var(--color-bg-hover);
}

.drawer-features td {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}

.drawer-features td:first-child {
  color: var(--color-text-muted);
  width: 40%;
}

.drawer-features.collapsible tr:nth-child(n+8) {
  display: none;
}

.drawer-features.collapsible.expanded tr:nth-child(n+8) {
  display: table-row;
}

.drawer-view-all {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}

.drawer-view-all:hover {
  text-decoration: none;
}

.drawer-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
}

.drawer-list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 2;
}

/* ===== Reviews drawer (ManoMano-style) ===== */
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.reviews-avg-num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
}

.reviews-avg-max {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.reviews-histogram {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.reviews-hist-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.reviews-hist-star {
  width: 1rem;
  color: var(--color-text-muted);
  text-align: right;
}

.reviews-hist-track {
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-bg-hover);
  overflow: hidden;
}

.reviews-hist-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
}

.reviews-hist-count {
  width: 2rem;
  color: var(--color-text-muted);
}

.reviews-verified-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 0.5rem;
}

.reviews-hint {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  background: var(--color-bg-hover);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  text-align: center;
}

.review-add summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  padding: 0.5rem 0;
}

.review-add summary::-webkit-details-marker {
  display: none;
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.review-form-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Native CSS star-rating input — wa-rating is not form-associated, so a radio
   group is used to submit the value reliably (no JS). Stars render 5→1 in DOM
   and are reversed visually, so :checked ~ label fills the star and all to its
   left. */
.review-form-rating-label {
  font-size: 0.85rem;
  font-weight: 600;
}

.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
  border: none;
  padding: 0;
  margin: 0.25rem 0 0;
}

.star-rating input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.star-rating label {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--color-border);
  cursor: pointer;
  transition: color 0.1s;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #f5a623;
}

.star-rating input:focus-visible + label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-card {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.review-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.review-author {
  font-weight: 600;
  font-size: 0.9rem;
}

.review-verified-badge {
  font-size: 0.72rem;
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.review-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.review-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

.review-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
  white-space: pre-line;
}

.review-reply {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-bg-hover);
  border-radius: 0.5rem;
  font-size: 0.85rem;
}

.review-reply-label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.2rem;
}

.reviews-empty {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem 0;
}

/* Page hero banners (shared base for hub, brand, tag) */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #2a4a7f 100%);
  color: #fff;
  text-align: center;
  padding: 2.5rem 1rem;
  margin-bottom: 1.5rem;
}

.page-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.page-hero-icon {
  font-size: 2.5rem;
  opacity: 0.85;
  margin-bottom: 0.75rem;
  display: block;
}

.page-hero-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.page-hero-desc {
  max-width: 700px;
  margin: 0 auto;
  font-size: 0.9rem;
  opacity: 0.75;
  line-height: 1.5;
}

/* Brand description is markdown — keep paragraphs tight inside the hero. */
.page-hero-desc p {
  margin: 0 0 0.4rem;
}
.page-hero-desc p:last-child {
  margin-bottom: 0;
}

/* Hub hero: supports background-image */
.page-hero--hub {
  background-size: cover;
  background-position: center;
}

.page-hero--hub .page-hero-desc {
  max-width: 600px;
  font-size: 0.95rem;
  opacity: 0.85;
}

.page-hero--has-image {
  background-blend-mode: overlay;
  background-color: rgba(26, 35, 50, 0.65);
}

/* Brand hero: logo + tagline */
.page-hero-logo {
  height: 80px;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.page-hero-tagline {
  font-size: 1.1rem;
  opacity: 0.85;
  margin: 0 0 0.75rem;
  font-style: italic;
}

/* Tag hero: purple gradient */
.page-hero--tag {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
}

/* --- Tag product rows (homepage) --- */
.tag-row-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}


.tag-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.tag-row-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.tag-row-title:hover .section-title {
  color: var(--color-primary);
}

.tag-carousel {
  --slide-gap: 0.75rem;
}

.tag-carousel wa-carousel-item > a {
  display: block;
  height: 100%;
  /* the slide is a flex container — a block link still shrinks to content
     (collapses an imageless card), so force it to fill the slide */
  width: 100%;
}

.tag-carousel wa-carousel-item wa-card {
  height: 100%;
  /* fill the slide — without this an imageless card collapses to content width */
  width: 100%;
}

.tag-carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.tag-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--wa-color-neutral-300, #cbd5e1);
  background: var(--wa-color-neutral-0, #fff);
  color: var(--wa-color-neutral-600, #475569);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s, border-color 0.15s;
}

.tag-nav-btn:hover {
  background: var(--wa-color-neutral-100, #f1f5f9);
  border-color: var(--wa-color-neutral-400, #94a3b8);
}

/* --- Tags index grid --- */
.grid-tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.tag-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border-radius: var(--wa-border-radius-large, 0.75rem);
  background: var(--wa-color-neutral-0, #fff);
  border: 1px solid var(--wa-color-neutral-200, #e2e8f0);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.tag-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tag-card-icon {
  font-size: 2rem;
}

.tag-card-name {
  font-size: 1.15rem;
  font-weight: 700;
}

.tag-card-count {
  font-size: 0.85rem;
  color: var(--wa-color-neutral-500, #64748b);
}

.tag-card-desc {
  font-size: 0.85rem;
  color: var(--wa-color-neutral-500, #64748b);
  line-height: 1.4;
}

.brand-card {
  align-items: center;
  text-align: center;
}

.brand-card-logo {
  width: 100%;
  height: 72px;
  object-fit: contain;
  margin-bottom: 0.25rem;
}

/* --- Tag badges on product cards --- */
.product-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
}

.product-tag-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(108, 92, 231, 0.9);
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
}

.hub-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 1rem 0 1.5rem;
}

.hub-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.hub-title-row .hub-title {
  margin: 0;
}

/* Sibling category pills (leaf catalog pages) */
.sibling-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sibling-pill {
  padding: 0.4rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  background: #fff;
  white-space: nowrap;
}

/* Navigation state, not an action — navy per the One Action Color Rule */
.sibling-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.sibling-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Collapsible sibling pills — keeps a long category row from pushing the
   product grid below the fold on mobile. CSS-only disclosure via hidden
   checkbox. .sibling-pills-wrap is the desktop-hide hook (sidebar takes over). */
.sibling-pills-wrap { margin-bottom: 1.25rem; }
.sibling-pills-wrap > .sibling-pills { margin-bottom: 0; }

.sibling-pills.collapsible {
  max-height: 6.2rem;            /* ~2 rows of pills */
  overflow: hidden;
  /* fade the clipped edge so it reads as "there's more" */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.sib-toggle:checked ~ .sibling-pills.collapsible {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}

.sibling-pills-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}
.sibling-pills-more::before { content: "Показать все"; }
.sibling-pills-more::after {
  content: "▾";
  font-size: 0.7rem;
}
.sib-toggle:checked ~ .sibling-pills-more::before { content: "Свернуть"; }
.sib-toggle:checked ~ .sibling-pills-more::after  { content: "▴"; }

.hub-description {
  max-width: 750px;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-hover);
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

.hub-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 2rem;
  max-width: 750px;
  margin: 0 auto;
}

.hub-block {
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  padding: 1.75rem 2rem;
}

.hub-block-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
}

.hub-block-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.6rem;
  color: var(--color-primary);
  overflow: hidden;
}

.hub-block-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-block-title {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-text);
}

.hub-block-title:hover {
  text-decoration: underline;
}

.hub-block-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 2.5rem;
}

.hub-block-links a {
  font-size: 0.95rem;
  color: var(--color-text);
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 500;
}

.hub-block-links a:hover {
  color: var(--color-btn);
  text-decoration: none;
}

.hub-see-more {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.hub-see-more:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* Sidebar nav enhancements */
.filter-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.filter-back:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* gap for filter-list links (extends base .filter-list a rule above) */
.filter-list a {
  gap: 0.25rem;
}

.filter-card details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-card details summary::after {
  content: '▼';
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.filter-card details[open] summary::after {
  content: '▲';
}

.filter-card details summary h3 {
  margin: 0;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-checkbox .filter-count {
  margin-left: auto;
  flex-shrink: 0;
}

.filter-checkbox input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.filter-price-input {
  font-size: 0.9rem;
}

/* Show more/less for filter lists */
.filter-checkbox-list.collapsible .filter-checkbox:nth-child(n+8) {
  display: none;
}

.filter-checkbox-list.collapsible.expanded .filter-checkbox:nth-child(n+8) {
  display: flex;
}

.filter-toggle {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}

.filter-toggle:hover {
  text-decoration: none;
}

/* Color filter swatches */
.filter-color-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.25rem 0;
}
.filter-color-swatch .color-label {
  flex: 1;
}
.filter-color-swatch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  width: 100%;
}
.filter-color-swatch .color-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-color-swatch input:checked + .color-circle {
  border-color: var(--color-btn);
  box-shadow: 0 0 0 2px var(--color-btn);
}
.filter-color-swatch .filter-count {
  font-size: 0.7rem;
  color: #888;
}
.color-circle[data-visual="transparent"] {
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50%/8px 8px;
}
.color-circle[data-visual="multicolor"] {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

/* Color dot for PDP specs table */
.color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.1);
}
.color-dot[data-visual="transparent"] {
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50%/6px 6px;
}
.color-dot[data-visual="multicolor"] {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

/* Variant swatches on a collapsed catalog card (primary axis preview) */
.product-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0.35rem 0 0;
  min-height: 1.1rem;
}
.product-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}
.product-swatch--text {
  width: auto;
  height: auto;
  border-radius: 4px;
  padding: 0 0.3rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--color-text-muted);
  background: var(--color-surface, #f3f3f3);
}
.product-swatch--more {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.product-price-from {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* PDP variant switchers */
.pdp-variants {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}
.pdp-variant-axis {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pdp-variant-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.pdp-variant-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.variant-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border, #d0d0d0);
  border-radius: 8px;
  background: var(--color-bg, #fff);
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.variant-opt:hover:not(.variant-opt--disabled) {
  border-color: var(--color-primary);
}
.variant-opt--selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  font-weight: 600;
}
.variant-opt--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.variant-opt--unavail {
  opacity: 0.55;
}
.variant-opt--unavail .variant-opt-label {
  text-decoration: line-through;
}

/* Matrix ⇄ list toggle */
.pdp-variant-modes {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--color-border, #d0d0d0);
  border-radius: 8px;
  padding: 2px;
}
.pdp-variant-modes button {
  border: none;
  background: transparent;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--color-text-muted);
}
.pdp-variant-modes button.active {
  background: var(--color-primary);
  color: #fff;
}
/* List view */
.pdp-variant-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.variant-list-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #d0d0d0);
  border-radius: 8px;
  background: var(--color-bg, #fff);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text);
}
.variant-list-item:hover { border-color: var(--color-primary); }
.variant-list-item--selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  font-weight: 600;
}
.variant-list-item--oos { opacity: 0.55; }
.variant-list-coord {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}
.variant-list-coord .variant-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}
.variant-list-price { font-weight: 700; white-space: nowrap; }
.variant-list-oos-tag {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.variant-opt--color .variant-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}

/* Active filter chips */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.active-filters a.reset-all {
  font-size: 0.8rem;
  color: var(--color-primary);
  margin-left: auto;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
}

.filter-chip:hover {
  opacity: 0.85;
  text-decoration: none;
  color: #fff;
}

.filter-chip .chip-x {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2rem;
  padding: 1rem 0;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s;
}

.page-link:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}

.page-link.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Checkout page */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2rem;
  padding: 1.5rem 0;
}

/* Grid items must be allowed to shrink below their content min-content,
   otherwise wa-card/wa-input force the track wider than the viewport
   (content overflows + gets clipped on mobile). */
.checkout-form,
.checkout-summary {
  min-width: 0;
}

.checkout-form .form-group {
  margin-bottom: 1rem;
}

.checkout-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

/* Login CTA banner — guest-checkout nudge. Replaces the wa-callout (its
   icon slot rendered the user glyph as a stray blue blob). */
.login-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: #eafaf4;
  border: 1px solid #bfeede;
  border-radius: var(--radius);
}
.login-cta__icon {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-btn);
  color: #fff;
  font-size: 1.35rem;
}
.login-cta__body { flex: 1 1 auto; min-width: 0; }
.login-cta__title { margin: 0 0 0.2rem; font-size: 1.05rem; font-weight: 700; }
.login-cta__sub { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--color-text-muted); }
.login-cta__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
}
.login-cta__benefits li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text, #1a202c);
}
.login-cta__benefits wa-icon {
  color: var(--color-success, #276749);
  font-size: 0.9rem;
}
.login-cta__action { flex: none; }
@media (max-width: 680px) {
  .login-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1.1rem;
  }
  .login-cta__icon { display: none; }
  .login-cta__action wa-button { width: 100%; }
}

/* Buyer type selector (B2B): native radios styled as a segmented control.
   Native (not wa-radio) so light-DOM :has() can drive conditional requisite
   blocks below — no JS. */
.buyer-type-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.buyer-type-option {
  flex: 1 1 0;
  min-width: 4.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--wa-color-surface-border, #d4d4d8);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  text-align: center;
  user-select: none;
}
.buyer-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.buyer-type-option:has(input:checked) {
  border-color: var(--color-btn);
  background: #eafaf4;
  font-weight: 600;
}
.buyer-type-option:focus-within {
  outline: 2px solid var(--color-btn);
  outline-offset: 1px;
}

/* Inline field validation error (checkout requisites). */
.field-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-accent, #dc2626);
}

/* Requisite blocks reveal based on the checked buyer type. */
.req-block { display: none; }
.checkout-form:has(input[name="buyer-type"][value="sole-proprietor"]:checked) .req-company,
.checkout-form:has(input[name="buyer-type"][value="legal"]:checked) .req-company { display: block; }
.checkout-form:has(input[name="buyer-type"][value="legal"]:checked) .req-legal { display: block; }

.checkout-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.form-input {
  width: 100%;
  padding: 0.7rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  transition: border-color 0.15s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(26,54,93,0.1);
}

textarea.form-input {
  resize: vertical;
}

.checkout-submit-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-btn-text);
  background: var(--color-btn);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.checkout-submit-btn:hover {
  background: var(--color-btn-hover);
}

.checkout-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.checkout-item:last-child {
  border-bottom: none;
}

.checkout-item-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-item-info {
  flex: 1;
  min-width: 0;
}

.checkout-item-title {
  display: block;
  font-size: 0.85rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-item-qty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.checkout-item-price {
  flex-shrink: 0;
  font-weight: 600;
}

.checkout-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 600;
  padding-top: 0.75rem;
}

/* Orders page */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-card {
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.order-id {
  font-weight: 600;
}

.order-items {
  margin-bottom: 0.75rem;
}

.order-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.order-total {
  font-weight: 700;
}

.order-detail {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0.25rem 0;
}

.order-detail-label {
  font-weight: 500;
  color: var(--color-text);
}

.order-reorder {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: underline;
}

.order-reorder:hover {
  text-decoration: none;
}

.order-delete {
  font-size: 0.85rem;
  color: var(--color-accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.order-delete:hover {
  text-decoration: none;
}

.order-date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Cart page */
/* Cart: two-column layout */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 0.5rem 1.25rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  align-items: center;
}

.cart-item-img {
  width: 120px;
  height: 120px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  grid-row: 1 / -1;
}

.cart-item-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  line-height: 1.4;
  grid-column: 2 / -1;
  align-self: end;
}

.cart-item-title:hover {
  text-decoration: underline;
}

.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 2 / -1;
  align-self: start;
}

.cart-item-prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.cart-item-price {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-text);
}

.cart-item-old-price {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.cart-item-delete {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  grid-column: 2 / -1;
}

.cart-item-delete:hover {
  color: var(--color-accent);
}


/* Cart sidebar */
.cart-sidebar {
  position: sticky;
  top: 1rem;
}

.cart-summary {
  padding: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.cart-summary-top {
  display: none;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
}

.cart-total-price {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-text);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  background: #16a34a;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.toast-hide {
  opacity: 0;
  transform: translateY(1rem);
}

/* Scroll-to-top floating button (pure CSS anchor → #top).
   Translucency lives in the background, not the element, so the white
   arrow stays fully opaque and readable on any backdrop (incl. dark footer). */
.scroll-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(26, 54, 93, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 1.15rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background: rgba(26, 54, 93, 0.95);
  transform: translateY(-2px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 641px) and (max-width: 1024px) {
  .tag-carousel { --slides-per-page: 3; }
}

@media (max-width: 800px) {
  #categories { display: none; }
}

@media (max-width: 768px) {
  /* Header */
  .header-top { flex-wrap: nowrap; }
  .header-search { display: none; }
  .header-actions { margin-left: auto; }
  .header-nav { display: flex; align-items: center; gap: 0.25rem; padding-bottom: 0.5rem; }
  .header-nav .header-tags { display: none; }
  .header-nav .menu-label { display: none; }
  .header-search-mobile { display: block; flex: 1; }

  /* Hero */
  .hero h1 { font-size: 1.5rem; }
  .hero-columns { grid-template-columns: 1fr; }
  .hero-brands { display: none; }

  /* Product grids */
  .grid-products { grid-template-columns: repeat(2, 1fr); }
  .catalog-layout .grid-products { grid-template-columns: repeat(2, 1fr); }

  /* Catalog sidebar */
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-layout > .catalog-sidebar { display: none; }
  .mobile-filter-btn { display: inline-flex; }
  /* Mobile: filter button + sort sit together on the left. */
  .catalog-toolbar-actions { justify-content: flex-start; }

  /* Hub blocks */
  .hub-blocks { grid-template-columns: 1fr; }

  /* PDP */
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }   /* no sticky when stacked */
  .pdp-buy-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
  }
  .pdp-cart-btn { grid-column: 1 / -1; }
  .pdp-wish-btn { grid-column: 3; grid-row: 1; }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr; }

  /* Cart */
  .cart-grid { grid-template-columns: 1fr; }
  .cart-item {
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.5rem 0.75rem;
    padding: 1rem;
  }
  .cart-item-img { width: 70px; height: 70px; grid-row: 1; grid-column: 1; }
  .cart-item-title { grid-row: 1; grid-column: 2; }
  .cart-item-row { grid-row: 2; grid-column: 1 / -1; }
  .cart-item-delete { grid-row: 3; grid-column: 1 / -1; justify-content: center; }
  .cart-item-price { font-size: 1.1rem; }
  .cart-summary-top { display: block; margin-bottom: 1rem; }
  .cart-summary { padding: 1rem; }
}

@media (max-width: 640px) {
  .tag-carousel { --slides-per-page: 2; }
  .tag-carousel-nav { display: none; }
}

@media (max-width: 480px) {
  :root { --gap: 0.75rem; }
  .section { padding: var(--wa-space-m) 0; }
  .section-title { font-size: var(--wa-font-size-l); margin-bottom: var(--wa-space-s); }
  .product-img { height: 160px; }
  .grid-categories { grid-template-columns: 1fr; }

  /* Benefits compact layout */
  .benefits-section { padding: var(--wa-space-s) 0; }
  .benefits-grid { grid-template-columns: 1fr; gap: 0; }
  .benefit { padding: 0; border-bottom: 1px solid var(--wa-color-neutral-200, #e2e8f0); }
  .benefit:last-child { border-bottom: none; }
  .benefit .wa-stack {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.75rem; row-gap: 0;
    align-items: center !important; text-align: left !important;
    padding: 0.5rem 0;
  }
  .benefit .wa-stack wa-icon { grid-row: 1 / 3; font-size: 1.25rem; }
  .benefit .wa-stack strong { font-size: 0.8rem; line-height: 1.3; }
  .benefit .wa-stack span { font-size: 0.7rem !important; line-height: 1.3; }
  .product-price { font-size: 0.85rem; white-space: nowrap; }
}

/* ===========================================================================
   Content pages (About / Delivery / Contacts) — ManoMano-style hero + prose
   =========================================================================== */
.content-hero {
  position: relative;
  background: linear-gradient(135deg,
              var(--wa-color-brand-fill-loud, #1e3a5f),
              var(--wa-color-neutral-fill-loud, #0f172a));
  background-size: cover;
  background-position: center;
  padding: 3.5rem 0;
  margin-bottom: 2rem;
}
.content-hero--image { background-color: #0f172a; }
.content-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,12,20,0.78) 0%, rgba(8,12,20,0.45) 60%, rgba(8,12,20,0.25) 100%);
}
.content-hero .container { position: relative; }
.content-hero-card {
  display: inline-block;
  max-width: 640px;
  background: rgba(255,255,255,0.96);
  border-radius: var(--wa-border-radius-l, 12px);
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.content-hero-title { margin: 0; font-size: 2rem; line-height: 1.15; }
.content-hero-subtitle { margin: 0.5rem 0 0; color: var(--wa-color-text-quiet, #475569); }

.content-body { padding-bottom: 3rem; }
.content-prose { max-width: 820px; line-height: 1.7; color: var(--wa-color-text-normal, #1e293b); }
.content-prose h2 { margin: 1.75rem 0 0.75rem; font-size: 1.35rem; }
.content-prose h3 { margin: 1.5rem 0 0.5rem; font-size: 1.1rem; }
.content-prose p { margin: 0 0 1rem; }
.content-prose ul, .content-prose ol { margin: 0 0 1rem 1.25rem; }
.content-prose li { margin: 0.25rem 0; }
/* Inline text links — ManoMano-style: brand teal, semibold, underlined.
   `:not([class])` skips the shortcode widgets (product/category cards keep
   their own styling). */
.content-prose a:not([class]) {
  color: var(--color-btn);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-btn);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.content-prose a:not([class]):hover { color: var(--color-btn-hover); }
/* Media is centered by default — matches how the admin editor previews it. */
.content-prose img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin-left: auto; margin-right: auto; }
.content-prose iframe { display: block; margin: 0 auto 1rem; max-width: 100%; }
.content-prose blockquote { margin: 0 0 1rem; padding: 0.25rem 1rem; border-left: 3px solid var(--color-bg-subtle); color: var(--color-text-muted); }
.content-prose pre { overflow-x: auto; background: var(--color-bg-subtle); padding: 0.75rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; }
.content-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.content-prose th, .content-prose td { border: 1px solid var(--color-bg-subtle); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.content-prose thead th { background: var(--color-bg-subtle); }
.content-prose figure { margin: 0 0 1.25rem; }
.content-prose figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted); text-align: center; }
.content-empty { color: var(--wa-color-text-quiet, #64748b); }

/* --- Content shortcode embeds (article/CMS bodies) ----------------------- */
.content-embed-missing {
  color: var(--wa-color-warning-text, #b45309);
  border-bottom: 1px dashed currentColor;
  font-size: 0.9em;
}
/* Inline product card */
.content-product-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--wa-color-neutral-200, #e2e8f0);
  border-radius: var(--wa-border-radius-l, 12px);
  background: var(--wa-color-surface-default, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.content-product-card:hover {
  border-color: var(--wa-color-brand-border, #93c5fd);
  box-shadow: var(--wa-shadow-s, 0 1px 4px rgba(0,0,0,0.08));
}
.content-product-card-img {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
}
.content-product-card-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.content-product-card-title { font-weight: 600; line-height: 1.3; }
.content-product-card-price { color: var(--wa-color-brand-text-normal, #2563eb); font-weight: 700; }
/* Category / catalog CTA card (ManoMano-style: label + name + round arrow) */
.content-category-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-subtle);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.content-category-card:hover {
  border-color: var(--color-btn);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
}
.content-category-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.content-category-card-label { font-size: 0.88rem; color: var(--color-text-muted); }
.content-category-card-name { font-size: 1.15rem; font-weight: 800; color: var(--color-primary); line-height: 1.25; }
.content-category-card-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; font-size: 1.05rem;
  transition: background 0.15s;
}
.content-category-card:hover .content-category-card-arrow { background: var(--color-primary-light); }
/* Gallery carousel */
.content-gallery { margin: 0 0 1.25rem; --aspect-ratio: 16 / 10; }
.content-gallery img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); }
/* Comparison table */
.content-compare-wrap { overflow-x: auto; margin: 0 0 1.25rem; }
.content-compare { border-collapse: collapse; min-width: 100%; }
.content-compare th, .content-compare td {
  border: 1px solid var(--color-bg-subtle);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.content-compare tbody th { white-space: nowrap; color: var(--color-text-muted); font-weight: 600; }
.content-compare thead th { background: var(--color-bg-subtle); }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.contact-card {
  border: 1px solid var(--wa-color-neutral-200, #e2e8f0);
  border-radius: var(--wa-border-radius-l, 12px);
  padding: 1.25rem;
  background: var(--wa-color-surface-default, #fff);
  text-align: center;
}
.contact-card-icon {
  font-size: 1.75rem;
  color: var(--wa-color-brand-text-normal, #2563eb);
  margin-bottom: 0.5rem;
}
.contact-card-title { font-weight: 600; margin-bottom: 0.25rem; }
.contact-card-lines { display: flex; flex-direction: column; gap: 0.25rem; color: var(--wa-color-text-quiet, #475569); }
.contact-card-lines a { color: var(--wa-color-brand-text-normal, #2563eb); text-decoration: none; }
.contact-card-lines a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .content-hero { padding: 2.5rem 0; }
  .content-hero-card { padding: 1.25rem 1.25rem; }
  .content-hero-title { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   Editorial blog — listing pills, card grid, detail
   --------------------------------------------------------------------------- */
.article-rubrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.75rem;
}
/* Rubric filter chips follow the catalog chip language (DESIGN.md): subtle
   fill, slate text, small radius — 999px pills belong to the navy header only. */
.article-rubric-pill {
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.article-rubric-pill:hover {
  background: var(--color-border);
  color: var(--color-text);
}
.article-rubric-pill.active {
  /* --color-btn-text is the DARK text for the mint button — wrong on navy */
  background: var(--color-primary);
  color: #fff;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.article-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--wa-border-radius-large, 0.75rem);
  background: var(--wa-color-neutral-0, #fff);
  border: 1px solid var(--wa-color-neutral-200, #e2e8f0);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.article-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.article-card-cover { aspect-ratio: 16 / 9; background: var(--wa-color-neutral-100, #f1f5f9); }
.article-card-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Coverless variant: the title is typeset on a quiet brand surface — deep navy
   easing into the header ink. Navy = orientation (DESIGN.md), never mint here.
   Compact band sized by the title, NOT the 16:9 image slot. */
.article-card-cover--text {
  aspect-ratio: auto;
  min-height: 7rem;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-header-bg) 100%);
  padding: 1.6rem 1.25rem 1.1rem;
}
.article-card-cover-title {
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.35;
  font-weight: 700;
  /* Long titles must not blow the 16:9 slot */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.25rem 1.25rem; }
.article-card-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.article-card-date { font-size: 0.8rem; color: var(--wa-color-neutral-500, #64748b); }
.article-card-title { margin: 0; font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
.article-card-excerpt {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--wa-color-text-quiet, #475569);
}

.article-detail { max-width: 820px; margin: 0 auto; padding-bottom: 3rem; }
.article-header { margin-bottom: 1.5rem; }
.article-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.article-meta-date { font-size: 0.85rem; color: var(--wa-color-neutral-500, #64748b); }
.article-title { margin: 0; font-size: 2rem; line-height: 1.2; }
.article-cover { margin: 1.5rem 0; }
.article-cover img { width: 100%; border-radius: var(--wa-border-radius-large, 0.75rem); display: block; }
.article-related { max-width: 820px; margin: 2.5rem auto 0; }

/* --- Editorial article styling (inspired by buying-guide layouts) -------- */
/* Accent comes from the tenant brand tokens (--color-btn / --color-primary),
   never a hardcoded hue — this is a multi-tenant platform. */

/* Hero: full-width cover + a title card overlapping its bottom edge. */
.article-hero { margin: 0 0 1.75rem; }
.article-hero-media {
  width: 100%; aspect-ratio: 16 / 7; overflow: hidden;
  border-radius: 16px; background: var(--color-bg-subtle);
}
.article-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-hero-card {
  position: relative; z-index: 1;
  margin: -3.25rem auto 0; max-width: 94%;
  background: var(--color-surface); border-radius: 16px;
  padding: 1.5rem 1.75rem 1.65rem;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.13);
}
.article-hero-card .article-title { margin: 0.6rem 0 0; }
.article-hero-card::after {
  content: ""; display: block; width: 56px; height: 4px;
  margin-top: 1rem; border-radius: 2px; background: var(--color-btn);
}
.article-title { font-size: 2.1rem; line-height: 1.18; font-weight: 800; color: var(--color-primary); }
.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  margin-top: 0.5rem; font-size: 0.9rem; color: var(--color-text-muted); }
.article-byline .dot { opacity: 0.5; }

/* Heading rhythm: short accent tick above each H2, navy display headings. */
.content-prose h2 {
  position: relative; margin: 2.4rem 0 0.9rem; padding-top: 0.95rem;
  font-size: 1.6rem; line-height: 1.25; font-weight: 800; color: var(--color-primary);
}
.content-prose h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 4px; border-radius: 2px; background: var(--color-btn);
}
.content-prose h3 { margin: 1.7rem 0 0.5rem; font-size: 1.2rem; font-weight: 700; color: var(--color-primary); }

/* Lead paragraph reads a touch larger. */
.content-prose > p:first-of-type { font-size: 1.13rem; line-height: 1.75; }

/* Editorial images sit in a soft frame (only standalone markdown images —
   widget images live in their own containers, not directly in <p>/<figure>). */
.content-prose p > img,
.content-prose figure > img {
  border: 1px solid var(--color-border); padding: 6px;
  background: var(--color-surface); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

/* Pull-quote: accent rule + tinted panel, italic. */
.content-prose blockquote {
  margin: 1.6rem 0; padding: 1rem 1.3rem;
  border-left: 4px solid var(--color-btn); border-radius: 0 12px 12px 0;
  background: var(--color-bg-subtle); color: var(--color-text);
  font-style: italic; font-size: 1.1rem; line-height: 1.6;
}

/* «Коротко о главном» summary card (:::tldr). */
.content-tldr {
  margin: 1.75rem 0; padding: 1.2rem 1.45rem 1.35rem;
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-btn);
  border-radius: 14px; background: var(--color-surface);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.content-tldr::before {
  content: "Коротко о главном"; display: block;
  font-size: 1.05rem; font-weight: 800; color: var(--color-primary); margin-bottom: 0.6rem;
}
.content-tldr > :last-child { margin-bottom: 0; }
.content-tldr ul, .content-tldr ol { margin: 0 0 0 1.15rem; }
.content-tldr li { margin: 0.3rem 0; }

@media (max-width: 640px) {
  .article-hero-card { margin-top: -2.25rem; max-width: 100%; padding: 1.25rem 1.1rem 1.35rem; }
  .article-title { font-size: 1.7rem; }
  .content-prose h2 { font-size: 1.4rem; }
}

/* --- Sticky table-of-contents with scroll-spy progress line -------------- */
.content-prose h2 { scroll-margin-top: 140px; }  /* clears the 128px sticky header on anchor jump */
.article-body-grid { display: block; }

.article-toc { margin: 0 0 1.75rem; }
.article-toc-summary {
  font-weight: 800; color: var(--color-primary); cursor: pointer;
  padding: 0.5rem 0; list-style: none;
}
.article-toc-summary::-webkit-details-marker { display: none; }
.article-toc-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.article-toc-item { position: relative; padding: 0 0 0.95rem 1.6rem; }
.article-toc-item:last-child { padding-bottom: 0; }
/* connector segment below each dot — greys by default, accent once visited */
.article-toc-item:not(:last-child)::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: -2px;
  width: 2px; background: var(--color-border);
}
.article-toc-item.is-done:not(:last-child)::before { background: var(--color-btn); }
/* node dot */
.article-toc-item::after {
  content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px;
  box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--color-border); background: var(--color-surface);
}
.article-toc-item.is-done::after,
.article-toc-item.is-active::after { border-color: var(--color-btn); background: var(--color-btn); }
.article-toc-item a {
  display: block; color: var(--color-text-muted); text-decoration: none;
  font-size: 0.92rem; line-height: 1.35; transition: color 0.15s;
}
.article-toc-item a:hover { color: var(--color-primary); }
.article-toc-item.is-active a { color: var(--color-primary); font-weight: 700; }

/* Wide screens: content stays a normal centered column; the TOC is pulled out
   of flow and FIXED, vertically centered in the viewport, floating in the left
   margin just beside the text. Below this width it falls back to the inline
   collapsible «Содержание» at the top of the article. */
@media (min-width: 1340px) {
  .article-toc {
    position: fixed; top: 50%; transform: translateY(-50%);
    left: calc(50vw - 410px - 250px);   /* left of the 820px centered column */
    width: 220px; margin: 0;
    max-height: 82vh; overflow-y: auto;
    opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
  }
  .article-toc.is-visible { opacity: 1; pointer-events: auto; }
  .article-toc-summary { display: none; }
  .article-toc-list { display: block !important; }  /* force-open on desktop */
}

/* Reverse-link «Полезные статьи» block (PDP + category pages).
   Compact horizontal cards: small cover thumb + rubric/date + title. */
.article-reverse { margin: 2.5rem 0 0; }
.article-reverse-wrap { margin-top: 2.5rem; }
.article-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.article-compact-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem;
  border-radius: var(--wa-border-radius-medium, 0.5rem);
  background: var(--wa-color-neutral-0, #fff);
  border: 1px solid var(--wa-color-neutral-200, #e2e8f0);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.article-compact-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.article-compact-thumb {
  flex: 0 0 84px;
  width: 84px;
  height: 64px;
  border-radius: var(--wa-border-radius-small, 0.375rem);
  overflow: hidden;
  background: var(--wa-color-neutral-100, #f1f5f9);
}
.article-compact-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-compact-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.article-compact-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.article-compact-title {
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--wa-color-text-normal, #1e293b);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* «Статьи» header nav pill — same look as a tag pill, with a touch of left
   separation from the tag list. */
.header-tag-articles { font-weight: 600; }