/* ============================================================
   VINTAGE SUPPLY — Main Stylesheet
   ============================================================ */

/* ── 1. TOKENS ────────────────────────────────────────────── */
:root {
  /* Color */
  --c-black:     #0c0c0c;
  --c-white:     #ffffff;
  --c-off-white: #f4f3f0;
  --c-g100:      #e9e8e4;
  --c-g200:      #d4d3cf;
  --c-g400:      #9e9d99;
  --c-g600:      #5e5d59;
  --c-g800:      #2c2b29;

  /* Typography */
  --ff-display: 'Archivo', 'Space Grotesk', sans-serif;
  --ff-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* Layout */
  --max-width:    1440px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --header-h:     68px;

  /* Transitions */
  --ease:         cubic-bezier(0.25, 0, 0.1, 1);
  --t-fast:       0.18s;
  --t-mid:        0.35s;
  --t-slow:       0.6s;

  /* Softening pass: the site was 100% hard 90° corners everywhere (buttons,
     cards, inputs, tiles) — client asked for something less severe. These
     are new, used below on the elements that read as "sharp" without
     touching the type/logo/nav, which stay as-is. */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-soft: 0 4px 16px rgba(12, 12, 12, 0.06);
  --shadow-lift: 0 20px 40px rgba(12, 12, 12, 0.14);
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--c-black);
  background: var(--c-white);
  overflow-x: hidden;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ── 3. TYPOGRAPHY ────────────────────────────────────────── */
.t-display-xl {
  font-family: var(--ff-display);
  font-size: clamp(5rem, 14vw, 15rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.02em;
}

.t-display-lg {
  font-family: var(--ff-display);
  font-size: clamp(3.5rem, 7vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.t-display-md {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5vw, 6rem);
  font-weight: 800;
  line-height: 0.95;
}

.t-heading {
  font-family: var(--ff-body);
  font-size: clamp(0.6rem, 0.9vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.t-label {
  font-family: var(--ff-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-g400);
}

.t-body {
  font-family: var(--ff-body);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--c-g600);
}

/* ── 4. LAYOUT UTILITIES ──────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 900px;
}

.section-pad {
  /* Was up to 10rem top AND bottom per section — two adjacent sections
     could stack to 300px+ of pure blank space between them (the "hole"
     between Новинки and Категории). Cut down further per client request. */
  padding-block: clamp(2rem, 3.5vw, 4rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── 5. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}

.btn:hover { opacity: 0.6; }

.btn--outline,
.btn--solid,
.btn--white {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn--outline::before,
.btn--solid::before,
.btn--white::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-mid) var(--ease);
}

.btn--outline {
  padding: 0.9em 2.2em;
  border: 1px solid currentColor;
}

.btn--outline::before { background: var(--c-black); }

.btn--outline:hover {
  opacity: 1;
  color: var(--c-white);
  border-color: var(--c-black);
}

.btn--outline:hover::before { transform: scaleY(1); }

.btn--solid {
  padding: 0.9em 2.2em;
  background: var(--c-black);
  color: var(--c-white);
}

.btn--solid::before { background: var(--c-g800); }

.btn--solid:hover {
  opacity: 1;
}

.btn--solid:hover::before { transform: scaleY(1); }

.btn--white {
  padding: 0.9em 2.2em;
  border: 1px solid var(--c-white);
  color: var(--c-white);
}

.btn--white::before { background: var(--c-white); }

.btn--white:hover {
  color: var(--c-black);
  opacity: 1;
}

.btn--white:hover::before { transform: scaleY(1); }

.btn__arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}

.btn:hover .btn__arrow { transform: translateX(4px); }

/* ── 6. HEADER ────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(244, 243, 240, 0.78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--c-g100);
}

.site-header__inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
}

.site-logo__text {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-white);
  /* Guarantees the white stays crisp wherever the header sits over the hero
     photo/image — without this a thin white line can read as gray against
     a light patch of the photo. Dropped once .is-scrolled swaps to the
     light blurred bar + black text, where a shadow would just look muddy. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: color var(--t-mid) var(--ease);
}

.site-header.is-scrolled .site-logo__text {
  color: var(--c-black);
  text-shadow: none;
}

.site-logo img {
  height: 32px;
  width: auto;
}

/* Primary Nav */
.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
}

.primary-nav__link {
  /* Was inheriting the body font (Space Grotesk) — switched to the same
     bold display face used for headings (Archivo) so the nav reads as
     part of the same type system instead of a plain system-ish label. */
  font-family: var(--ff-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  position: relative;
  transition: color var(--t-mid) var(--ease);
}

.site-header.is-scrolled .primary-nav__link {
  color: var(--c-black);
  text-shadow: none;
}

.primary-nav__link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--t-mid) var(--ease);
}

.primary-nav__link:hover::after { width: 100%; }

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-6);
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: color var(--t-mid) var(--ease),
              opacity var(--t-fast) var(--ease),
              filter var(--t-mid) var(--ease);
}

.site-header.is-scrolled .header-icon {
  color: var(--c-black);
  filter: none;
}
.header-icon:hover { opacity: 0.55; }

.header-icon svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-count {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  position: relative;
  top: -1px;
  min-width: 16px;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
  color: var(--c-white);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: color var(--t-mid) var(--ease),
              filter var(--t-mid) var(--ease);
}

.site-header.is-scrolled .hamburger {
  color: var(--c-black);
  filter: none;
}

.hamburger__line {
  display: block;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform var(--t-mid) var(--ease),
              opacity var(--t-mid) var(--ease);
  transform-origin: center;
}

.hamburger.is-open .hamburger__line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger.is-open .hamburger__line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open .hamburger__line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  /* Tried 950 here (above .site-header's 900) to stop the header's
     .is-scrolled background from showing above the panel — wrong fix: the
     ✕ close toggle lives INSIDE the header, so raising the menu above it
     buried the only way to close the menu under an opaque black panel.
     Back to below the header (the toggle needs to stay clickable/visible
     on top) — the visible strip is fixed properly below by making the
     header's own background transparent while the menu is open, not by
     stacking order. */
  z-index: 800;
  background: var(--c-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-16) var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-16);
}

/* Two "panels" stacked in the same nav — only one shown at a time (the
   other has the [hidden] attribute, JS-toggled). Lets "Категории" drill
   into the category list without leaving/closing the mobile menu. */
.mobile-menu__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Author CSS always beats the browser's own default [hidden]{display:none}
   rule, regardless of source order — so the plain ".mobile-menu__panel"
   flex rule above was silently overriding [hidden] and both panels (main +
   categories) were showing stacked on top of each other at once. This
   selector has higher specificity than the bare class rule, so it wins
   back the hide. */
.mobile-menu__panel[hidden] {
  display: none;
}

.mobile-menu__link {
  display: block;
  width: 100%;
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1;
  text-align: left;
  background: none;
  border: none;
  transition: opacity var(--t-fast) var(--ease);
}

.mobile-menu__link:hover { opacity: 0.45; }

.mobile-menu__link--expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  cursor: pointer;
}

.mobile-menu__link-arrow {
  font-size: 0.5em;
  opacity: 0.5;
}

/* Categories panel: same treatment, but the list is longer (6 categories +
   "Все товары" + the back link), so it scrolls its own height instead of
   overflowing the screen, and sits a size down from the root panel's huge
   type so more of the list is visible at once. */
.mobile-menu__panel--categories {
  max-height: 76vh;
  overflow-y: auto;
}

.mobile-menu__panel--categories .mobile-menu__link {
  font-size: clamp(1.6rem, 7vw, 2.4rem);
}

.mobile-menu__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-g400);
  transition: color var(--t-fast) var(--ease);
}

.mobile-menu__back:hover { color: var(--c-white); }

.mobile-menu__footer {
  display: flex;
  gap: var(--sp-8);
}

.mobile-menu__footer a {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-g400);
  transition: color var(--t-fast) var(--ease);
}

.mobile-menu__footer a:hover { color: var(--c-white); }

/* ── 6b. CART DRAWER ──────────────────────────────────────────
   Slides in from the right over a dimmed backdrop. Content inside
   .widget_shopping_cart_content is WooCommerce's own mini-cart markup
   (woocommerce_mini_cart() — see header.php), refreshed via wc-cart-fragments,
   so these rules target WC's real class names rather than custom ones. */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
  visibility: hidden;
  pointer-events: none;
}

.cart-drawer.is-open { visibility: visible; pointer-events: auto; }

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.5);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 100vw);
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-mid) var(--ease);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}

.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-6);
  border-bottom: 1px solid var(--c-g100);
}

.cart-drawer__title {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cart-drawer__close {
  font-size: 1rem;
  color: var(--c-g600);
  transition: color var(--t-fast) var(--ease);
}

.cart-drawer__close:hover { color: var(--c-black); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6);
}

/* WooCommerce mini-cart markup */
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
  padding-top: var(--sp-16);
  text-align: center;
  color: var(--c-g400);
  font-size: 0.9rem;
}

ul.woocommerce-mini-cart {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

li.mini_cart_item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-g100);
}

li.mini_cart_item:last-child { border-bottom: none; padding-bottom: 0; }

li.mini_cart_item img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  background: var(--c-off-white);
}

li.mini_cart_item a:not(.remove) {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-black);
  padding-right: var(--sp-6);
}

li.mini_cart_item a:not(.remove):hover { opacity: 0.6; }

li.mini_cart_item dl.variation {
  margin-top: var(--sp-1);
  font-size: 0.7rem;
  color: var(--c-g400);
}

li.mini_cart_item .quantity {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.78rem;
  color: var(--c-g600);
}

li.mini_cart_item .remove {
  position: absolute;
  top: 0; right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--c-g200);
  border-radius: 50%;
  color: var(--c-g600) !important;
  font-size: 1rem;
  line-height: 1;
  transition: all var(--t-fast) var(--ease);
}

li.mini_cart_item .remove:hover {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-white) !important;
}

.woocommerce-mini-cart__total.total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--sp-6);
  margin-bottom: var(--sp-4);
  border-top: 1px solid var(--c-g100);
  font-size: 1rem;
  font-weight: 800;
}

.woocommerce-mini-cart__buttons.buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.woocommerce-mini-cart__buttons.buttons a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 1.5em;
  border: 1px solid var(--c-black);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-black);
  transition: all var(--t-fast) var(--ease);
}

.woocommerce-mini-cart__buttons.buttons a.button:hover {
  background: var(--c-black);
  color: var(--c-white);
}

.woocommerce-mini-cart__buttons.buttons a.button.checkout {
  background: var(--c-black);
  color: var(--c-white);
}

.woocommerce-mini-cart__buttons.buttons a.button.checkout:hover { opacity: 0.8; }

@media (max-width: 480px) {
  .cart-drawer__panel { width: 100vw; }
}

/* ── 7. HERO ──────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--c-g800);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Fills the space beside the photo when it's a portrait shot that
     doesn't stretch to cover the full wide hero (see below). */
  background: var(--c-g800);
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.9) contrast(1.05) brightness(0.68);
}

/* Portrait source photo (taller than wide) — instead of force-covering the
   full wide hero (which would crop most of the figure away, top and
   bottom), keep it at its own aspect ratio pinned to the right edge at
   full hero height, and fade the rest of the hero into the dark
   background color instead of stretching/cropping the photo. Opt in per
   photo with .hero__media--portrait so a proper wide photo can still use
   the full-bleed cover behavior above. */
.hero__media--portrait img {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: auto;
  height: 100%;
  max-width: 68%;
  object-position: center top;
  /* Feather the photo's OWN left edge to transparent, relative to its own
     box — not a separate overlay guessing at percentages of the full hero
     width (that depended on exactly where the photo happened to land and
     was too subtle to read as a fade). This lets the dark .hero__media
     background underneath show through directly, so the photo itself
     visibly dissolves into it. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 30%);
  mask-image: linear-gradient(90deg, transparent 0%, black 30%);
}

@media (max-width: 900px) {
  /* Screen is narrow enough that a side-pinned portrait photo would leave
     barely any of it visible — go back to full-bleed cover like a normal
     photo instead. */
  .hero__media--portrait img {
    position: static;
    width: 100%;
    max-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Three-photo strip — replaces the old "one photo pinned right + empty dark
   space + scattered side photos" approach. All three sit edge to edge
   across the full hero, same height, same grayscale/contrast treatment, so
   they read as one continuous image rather than a collage. A bottom scrim
   (below) keeps the headline readable regardless of what's directly behind
   it, since photo now reaches the left edge where solid dark background
   used to guarantee contrast. */
.hero__strip {
  position: absolute;
  inset: 0;
  display: flex;
}

.hero__strip-photo {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.9) contrast(1.05) brightness(0.68);
}

/* Thin dark seam between frames — contact-sheet feel instead of a hard
   photo-to-photo cut. */
.hero__strip-photo + .hero__strip-photo {
  margin-left: 2px;
  box-shadow: -2px 0 0 var(--c-g800);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0) 38%, rgba(12, 12, 12, 0.82) 100%);
  pointer-events: none;
}

@media (max-width: 900px) {
  /* Three narrow columns would be unreadable on a phone screen — fall back
     to just the main photo, full-bleed, same as the single-photo mode. */
  .hero__strip-photo--side { display: none; }
  .hero__strip-photo--main { flex: 1 1 100%; }
}

.hero__content {
  position: absolute;
  bottom: clamp(2.5rem, 6vw, 5rem);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}

.hero__title {
  font-family: var(--ff-display);
  /* Was up to 13rem — fine at the old thin weight, but at 800 that filled
     the full width of the hero and left no room for the pills below it
     without the two colliding. Scaled back so the bold headline stays
     commanding without swallowing the rest of the content. */
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--c-white);
}

.hero__title em {
  font-style: italic;
  font-weight: 300;
}

.hero__sub {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.hero__sub-text {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  max-width: 260px;
  line-height: 1.7;
}

.hero__stat {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  max-width: 260px;
}

.hero__stat-num {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-white);
}

.hero__cta-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 0.4rem;
}

/* Stock-status pills — modeled on dropdeadua.com's hero CTA pattern:
   lets shoppers filter by availability right from the first screen,
   which matters more than category browsing on a one-of-a-kind inventory.
   Now a normal row inside .hero__content (see the comment on .hero__content
   above) instead of independently absolute-positioned, so it can never
   land on top of the headline regardless of how large the title renders. */
.hero__stock-filters {
  display: flex;
  gap: var(--sp-2, 0.5rem);
  z-index: 2;
}

.pill {
  padding: 0.75em 1.6em;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all var(--t-fast, 0.18s) var(--ease, cubic-bezier(0.25,0,0.1,1));
  white-space: nowrap;
}

.pill--filled {
  background: rgba(12,12,12,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-white);
  border: 1px solid rgba(255,255,255,0.25);
}

.pill--filled:hover {
  background: rgba(12,12,12,0.8);
  transform: translateY(-2px);
}

.pill--outline {
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--c-white);
  background: transparent;
}

.pill--outline:hover {
  background: var(--c-white);
  color: var(--c-black);
  transform: translateY(-2px);
}

.hero__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  opacity: 0;
  animation: fadeIn 1s 1.5s forwards;
}

.hero__scroll-hint span {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.3);
  animation: scrollPulse 2s 2s infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

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

/* ── 8. SECTION HEADERS ───────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--c-g100);
  margin-bottom: clamp(2rem, 4vw, 4rem);
  gap: var(--sp-4);
}

.section-header__left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.section-eyebrow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-g400);
}

.section-title {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 4.5vw, 5.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
}

/* Categories heading read too heavy/large next to the tighter grid below it. */
.section-title--categories {
  font-size: clamp(1.7rem, 3vw, 3.2rem);
}

.section-link {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-g600);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.section-link:hover { color: var(--c-black); }
.section-link:hover .section-link__arrow { transform: translateX(4px); }

.section-link__arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}

/* ── 9. PRODUCT CARDS (NEW ARRIVALS) ─────────────────────── */
.new-arrivals {
  background: var(--c-white);
}

.new-arrivals__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
}

/* Full catalog carries more inventory than the 4-item homepage teaser,
   so it earns an extra column of density on large screens. */
@media (min-width: 1600px) {
  .catalog-grid { grid-template-columns: repeat(5, 1fr); }
}

.product-card {
  display: block;
  cursor: pointer;
}

.product-card__image-wrap {
  /* This wrap is an <a> tag, which is `display: inline` by default —
     inline elements ignore aspect-ratio entirely, and its only children
     are position:absolute (so they add no size either). Without an
     explicit block-level display the whole box collapsed to 0 height,
     which is why every product image/placeholder was invisible. */
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-off-white);
  margin-bottom: var(--sp-4);
}

.product-card__image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease),
              opacity var(--t-mid) var(--ease);
}

.product-card__img--primary  { z-index: 1; }
.product-card__img--secondary { z-index: 2; opacity: 0; }

/* Was completely unstyled — a bare "✦" sitting top-left with default body
   text styles, which read as a broken image rather than an intentional
   "photo coming soon" state. */
.product-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--c-g100) 0%, var(--c-g200) 100%);
  color: var(--c-g400);
  font-size: 1.5rem;
}

.product-card:hover .product-card__img--primary  { transform: scale(1.03); }
.product-card:hover .product-card__img--secondary { opacity: 1; }
.product-card:hover .product-card__img--primary   { opacity: 0; }

.product-card__badge {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  z-index: 3;
  padding: 0.3em 0.7em;
  background: var(--c-black);
  color: var(--c-white);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.product-card__badge--rare {
  background: var(--c-white);
  color: var(--c-black);
  border: 1px solid var(--c-g200);
}

.product-card__badge--stock {
  left: auto;
  right: var(--sp-4);
  background: var(--c-g600);
}

/* Sold-out pieces read as visually "gone" rather than identical to
   available stock — desaturated + dimmed, badge still legible. */
.product-card--soldout .product-card__img--primary {
  filter: grayscale(1) brightness(0.82);
}

.product-card--soldout .product-card__name,
.product-card--soldout .product-card__price {
  color: var(--c-g400);
}

.product-card__attr {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-g400);
  text-transform: uppercase;
}

.product-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.product-card__name {
  font-family: var(--ff-body);
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--c-black);
  transition: opacity var(--t-fast) var(--ease);
}

.product-card:hover .product-card__name { opacity: 0.6; }

.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.product-card__price {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-black);
}

.product-card__price--original {
  text-decoration: line-through;
  color: var(--c-g400);
  font-weight: 400;
}

.product-card__size {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--c-g400);
  text-transform: uppercase;
}

/* ── 10. CATEGORIES ───────────────────────────────────────── */
/* Was a full-bleed beige block — with the header/eyebrow being the only
   content near the top, that read as a big empty colored "hole" before the
   tiles. Swapped for hairline borders (same trick as the marquee strip) so
   the section is still visually set apart without the dead flat-color slab. */
.categories {
  border-top: 1px solid var(--c-g100);
  border-bottom: 1px solid var(--c-g100);
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Fixed row height (not aspect-ratio) so a 2-row block and two 1-row
     blocks stacked next to it always add up to the same total height —
     that mismatch was what caused the empty gaps under Худи/Джинсы. */
  grid-auto-rows: clamp(110px, 13vw, 170px);
  gap: clamp(0.35rem, 0.6vw, 0.6rem);
}

.category-block {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--c-g200);
  cursor: pointer;
}

.category-block--1 {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
}

.category-block--2 {
  grid-column: 8 / 13;
  grid-row: 1 / 2;
}

.category-block--3 {
  grid-column: 8 / 13;
  grid-row: 2 / 3;
}

.category-block--4 {
  grid-column: 1 / 5;
  grid-row: 3 / 4;
}

.category-block--5 {
  grid-column: 5 / 9;
  grid-row: 3 / 4;
}

.category-block--6 {
  grid-column: 9 / 13;
  grid-row: 3 / 4;
}

.category-block__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--t-slow) var(--ease);
  filter: brightness(0.68);
}

/* Куртки tile: default "center center" was cropping the leather jacket a
   bit low (too much empty wall/shadow at top, collar close to the edge).
   Shift the visible window up so the jacket sits better in frame. */
.category-block--1 .category-block__img {
  object-position: center 25%;
}

/* Худи tile is short and wide (1 grid row) while the source photo is tall —
   object-fit:cover on "center center" was cropping to a band around mid-torso,
   cutting off the hood entirely. Shift the visible window toward the top of
   the photo so the hood reads instead. */
.category-block--2 .category-block__img {
  object-position: center 25%;
}

/* Обувь tile: `contain` (letterboxed) looked bad — small floating boot in a
   gray box. Client wants the photo filling the whole tile like every other
   category, just cropped so the SOLE/bottom of the boot stays in frame
   instead of the toe/ankle at the top. Back to `cover`, anchored toward the
   bottom of the source photo. */
.category-block--5 .category-block__img {
  object-position: center 94%;
}

.category-block:hover .category-block__img {
  transform: scale(1.05);
}

.category-block__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 1;
}

.category-block__name {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 3vw, 3rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--c-white);
  letter-spacing: -0.01em;
  transition: transform var(--t-mid) var(--ease);
}

.category-block--2 .category-block__name,
.category-block--3 .category-block__name,
.category-block--4 .category-block__name,
.category-block--5 .category-block__name,
.category-block--6 .category-block__name {
  font-size: clamp(1.1rem, 2vw, 2.2rem);
}

.category-block:hover .category-block__name {
  transform: translateY(-4px);
}

.category-block__count {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: var(--sp-2);
  transition: opacity var(--t-mid) var(--ease);
}

.category-block:hover .category-block__count { opacity: 0; }

.category-block__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
  margin-top: var(--sp-3);
}

.category-block:hover .category-block__cta {
  opacity: 1;
  transform: translateY(0);
}

/* ── 10b. CATALOG FILTER BAR ─────────────────────────────────── */
.catalog-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-g100);
}

.catalog-filter-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.catalog-filter-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-g400);
}

.catalog-filter-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.catalog-filter-pill {
  padding: 0.45em 1em;
  border: 1px solid var(--c-g200);
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-black);
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}

.catalog-filter-pill:hover {
  border-color: var(--c-black);
}

.catalog-filter-pill.is-active {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

.catalog-filter-sort {
  margin-left: auto;
}

.catalog-filter-sort select {
  padding: 0.5em 1em;
  border: 1px solid var(--c-g200);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  background: var(--c-white);
}

/* ── 11. RARE FINDS ───────────────────────────────────────── */
.rare-finds {
  background: var(--c-black);
  color: var(--c-white);
}

.rare-finds__header {
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: clamp(2rem, 4vw, 4rem);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.rare-finds__eyebrow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  display: block;
  margin-bottom: var(--sp-3);
}

.rare-finds__title {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5.5vw, 7rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--c-white);
}

.rare-finds__title em {
  font-style: italic;
  color: rgba(255,255,255,0.5);
}

.rare-finds__tagline {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  max-width: 280px;
  line-height: 1.6;
  text-align: right;
  align-self: flex-end;
}

.rare-finds__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto auto;
  gap: clamp(0.5rem, 1vw, 1rem);
}

.rare-item {
  position: relative;
  overflow: hidden;
  background: var(--c-g800);
  display: block;
  cursor: pointer;
}

.rare-item--hero {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  aspect-ratio: 7 / 9;
}

.rare-item--sm {
  grid-column: 2 / 3;
  aspect-ratio: 5 / 4;
}

.rare-item__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) saturate(0.9);
  transition: transform var(--t-slow) var(--ease),
              filter var(--t-mid) var(--ease);
}

.rare-item:hover .rare-item__img {
  transform: scale(1.04);
  filter: brightness(0.5) saturate(0.8);
}

.rare-item__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--c-g800) 0%, #000 100%);
  color: rgba(255,255,255,0.25);
  font-size: 2rem;
}

.rare-item__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rare-item__tag {
  display: inline-block;
  padding: 0.3em 0.7em;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  width: fit-content;
}

.rare-item__name {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 3vw, 3rem);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1;
  transition: opacity var(--t-fast) var(--ease);
}

.rare-item--sm .rare-item__name {
  font-size: clamp(1rem, 2vw, 1.8rem);
}

.rare-item:hover .rare-item__name { opacity: 0.7; }

.rare-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-2);
}

.rare-item__price {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  font-weight: 600;
  color: var(--c-white);
  letter-spacing: 0.05em;
}

.rare-item__shop {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.rare-item:hover .rare-item__shop { opacity: 1; }

/* ── 12. ABOUT ────────────────────────────────────────────── */
.about-block {
  background: var(--c-white);
}

.about-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: center;
}

.about-block__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-g100);
}

.about-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.about-block__media:hover img { transform: scale(1.03); }

.about-block__media-label {
  position: absolute;
  top: var(--sp-6); right: var(--sp-6);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-g400);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.about-block__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.about-block__eyebrow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-g400);
}

.about-block__heading {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
}

.about-block__heading em {
  font-style: italic;
  color: var(--c-g400);
}

.about-block__body {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--c-g600);
  border-left: 1px solid var(--c-g100);
  padding-left: var(--sp-6);
}

.about-block__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-g100);
}

.about-stat__number {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-black);
}

.about-stat__label {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-g400);
  margin-top: var(--sp-2);
}

/* ── 13. MARQUEE / TICKER ─────────────────────────────────── */
.marquee-strip {
  overflow: hidden;
  border-top: 1px solid var(--c-g100);
  border-bottom: 1px solid var(--c-g100);
  padding-block: var(--sp-4);
  background: var(--c-off-white);
}

.marquee-inner {
  display: flex;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}

.marquee-inner__track {
  display: flex;
  gap: var(--sp-12);
  padding-right: var(--sp-12);
}

.marquee-item {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-g600);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.marquee-item::after {
  content: '✦';
  font-size: 0.5rem;
  color: var(--c-g400);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 14. FOOTER ───────────────────────────────────────────── */
.site-footer {
  background: var(--c-black);
  color: var(--c-white);
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: var(--sp-12);
}

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: clamp(2rem, 4vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 6rem);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--sp-8);
}

.footer__brand .site-logo__text {
  color: var(--c-white);
  font-size: 1.1rem;
  display: block;
  margin-bottom: var(--sp-6);
}

.footer__tagline {
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.4);
  max-width: 260px;
  margin-bottom: var(--sp-8);
}

.footer__social {
  display: flex;
  gap: var(--sp-4);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.footer__social-link svg {
  width: 15px; height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer__social-link:hover {
  border-color: var(--c-white);
  color: var(--c-white);
  transform: translateY(-2px);
}

.footer__col-title {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: var(--sp-6);
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer__nav a {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  transition: color var(--t-fast) var(--ease);
}

.footer__nav a:hover { color: var(--c-white); }

.footer__newsletter-text {
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}

.footer__form {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  gap: var(--sp-3);
}

.footer__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--c-white);
  font-size: 0.8rem;
  font-weight: 300;
  padding-block: var(--sp-3);
}

.footer__input::placeholder {
  color: rgba(255,255,255,0.25);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.footer__submit {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding-block: var(--sp-3);
  transition: color var(--t-fast) var(--ease);
}

.footer__submit:hover { color: var(--c-white); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-8);
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.footer__copy {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.22);
}

.footer__legal {
  display: flex;
  gap: var(--sp-6);
}

.footer__legal a {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.22);
  transition: color var(--t-fast) var(--ease);
}

.footer__legal a:hover { color: rgba(255,255,255,0.6); }

/* ── 15. PAGE TEMPLATES ───────────────────────────────────── */
.page-header {
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--c-g100);
  margin-bottom: var(--sp-16);
}

.page-header__title {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6vw, 8rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.post-content {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--c-g600);
  max-width: 680px;
}

.post-content p + p     { margin-top: 1.5em; }
.post-content h2        { font-family: var(--ff-display); font-size: 2.5rem; font-weight: 800; margin-block: 2em 0.5em; }
.post-content h3        { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.05em; margin-block: 1.5em 0.5em; }
.post-content a         { border-bottom: 1px solid var(--c-g200); transition: border-color var(--t-fast) var(--ease); }
.post-content a:hover   { border-color: var(--c-black); }

/* 404 */
.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: var(--sp-16) var(--gutter);
  gap: var(--sp-6);
}

.error-404__code {
  font-family: var(--ff-display);
  font-size: clamp(6rem, 20vw, 20rem);
  font-weight: 800;
  line-height: 0.85;
  color: var(--c-g100);
  letter-spacing: -0.04em;
}

/* ── 16. WOOCOMMERCE BASE ─────────────────────────────────── */
.vs-shop-main {
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-24);
  min-height: 60vh;
}

.woocommerce-products-header {
  padding-inline: var(--gutter);
  max-width: var(--max-width);
  margin-inline: auto;
}

/* ── 17. ANIMATIONS ───────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}

.fade-in.is-visible { opacity: 1; }

/* ── 17b. GRAIN OVERLAY ───────────────────────────────────────
   A very fine film-grain texture over the whole site — the single
   cheapest way to make flat digital color feel like printed/editorial
   paper instead of "default WordPress". Fixed, non-interactive, and
   blended so it never fights legibility or the product photography. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* ── 18. RESPONSIVE ───────────────────────────────────────── */

/* Tablet: 1024px */
@media (max-width: 1024px) {
  .new-arrivals__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .categories__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
  }

  .category-block--1 { grid-column: 1 / 7; aspect-ratio: 2 / 1; }
  .category-block--2 { grid-column: 1 / 4; aspect-ratio: 3 / 2; }
  .category-block--3 { grid-column: 4 / 7; aspect-ratio: 3 / 2; }
  .category-block--4 { grid-column: 1 / 3; aspect-ratio: 3 / 2; }
  .category-block--5 { grid-column: 3 / 5; aspect-ratio: 3 / 2; }
  .category-block--6 { grid-column: 5 / 7; aspect-ratio: 3 / 2; }

  .rare-finds__grid {
    grid-template-columns: 1fr 1fr;
  }

  .rare-item--hero {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    aspect-ratio: 1 / 1;
  }

  .rare-item--sm {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }

  .about-block__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .about-block__media { max-width: 480px; }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12) clamp(2rem, 4vw, 5rem);
  }

  .footer__brand { grid-column: 1 / -1; }
}

/* Mobile: 768px */
@media (max-width: 768px) {
  /* Client asked to scale the whole mobile interface up earlier (was 16px
     → 18px → 21px); later feedback flipped the other way — "everything on
     the site smaller" — so this comes back down. Same rem-cascade trick,
     just in reverse: every text/spacing value built off this one root
     shrinks together. Product tile/photo dimensions are unaffected either
     way (aspect-ratio + grid-column width, not font-size-driven). */
  html { font-size: 16px; }

  /* --gutter is normally clamp(1.25rem, 4vw, 3rem) — those rem endpoints
     would otherwise grow along with the html bump above and quietly eat
     into the product grid's available width. Re-pin it in px so the
     container padding (and therefore every product tile's width) stays
     exactly what it was before this scale-up. */
  :root { --gutter: clamp(20px, 4vw, 48px); }

  :root { --header-h: 56px; }

  /* Header — the cart/hamburger icons and logo mark are hard px values,
     not rem, so the html font-size change above never touches them: sized
     explicitly here instead, coming back down along with everything else
     now that the site-wide scale is smaller again. Only widths/sizes
     change, not the hamburger's gap/line-height — those feed the fixed-px
     "→ X" open animation further down this file and would need re-tuning
     together if touched. */
  .primary-nav { display: none; }

  .hamburger { display: flex; }

  .site-logo img { height: 30px; }

  .header-icon svg { width: 20px; height: 20px; }

  .hamburger__line { width: 24px; }

  /* Base .site-header__inner is a 3-column grid (logo | nav | actions).
     .primary-nav is display:none on mobile, and a display:none element
     takes no grid cell at all — so with only 2 real children left (logo,
     actions) they were filling the grid's first two columns (1fr, auto)
     instead of first + LAST, leaving the 3rd column empty and pushing the
     cart/hamburger away from the right edge ("объекты сдвинуты налево").
     Two columns for the two children that actually exist on mobile. */
  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  /* While the mobile menu is open: drop the logo + cart icon out of the
     header entirely (client: "оставил бы просто три полоски и все") —
     the ✕ toggle itself stays exactly where it always sits (no fixed
     positioning here anymore: an earlier attempt pinned it to the far
     left and it ended up floating oddly over the menu content instead of
     living in a clean header strip — client called it out as "кривой").
     With logo/cart hidden, .header-actions' own flex-end alignment puts
     the ✕ at the right, same spot the ☰ was in before opening. */
  .site-header--menu-open .site-logo,
  .site-header--menu-open .header-icon--cart {
    display: none;
  }

  /* The actual "gray strip" bug: .site-header spans the FULL width, but
     the drawer is only 80% wide — so the leftmost 20% of the header (over
     the untouched part of the page) was always going to peek through
     regardless of stacking order. What made it read as a strip was that
     sliver still carrying .is-scrolled's opaque blurred background.
     Kill the background specifically while the menu is open (higher
     specificity + !important so it beats .is-scrolled) — the header
     region left of the drawer goes fully transparent, and the ✕ toggle
     (which must stay on top of the drawer to stay clickable) switches to
     white so it still reads against the black panel behind it. */
  .site-header--menu-open,
  .site-header--menu-open.is-scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
  }

  /* .site-header.is-scrolled .hamburger (further up this file) is 3
     classes deep — heavier than the 2-class rule this used to be, so on
     any page/scroll position where .is-scrolled was also active it won,
     turning the ✕ black-on-black and invisible ("только когда на хиро" —
     hero is the one spot .is-scrolled is never true). !important pins
     white regardless of what else is active on the header. */
  .site-header--menu-open .hamburger {
    color: var(--c-white) !important;
    filter: none !important;
  }

  /* Menu as an 80%-wide side panel sliding in from the right (not a
     bottom sheet — client wants the extra space on the SIDE, not
     underneath), same edge the hamburger/cart already live on. Slides in
     with a transform instead of just fading, so it actually reads as a
     drawer. */
  .mobile-menu {
    top: 0;
    left: auto;
    width: 80%;
    /* Base rule's padding (sp-16/gutter) assumes a full-width screen —
       at 80% width that left almost nothing for the actual links to sit
       in. Smaller, side-panel-appropriate padding instead. */
    padding: var(--sp-12) var(--sp-6);
    transform: translateX(100%);
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
  }

  .mobile-menu.is-open {
    transform: translateX(0);
  }

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

  /* Hero */
  .hero__content {
    /* At narrow widths the "bottom" clamp above floors out at its 2.5rem
       minimum, which put this block's last row (the pills) right on top
       of .hero__scroll-hint (a separate, independently-positioned element
       sitting at bottom:2rem) — pick a taller mobile-only floor so there's
       real clearance between the two instead of them fighting for the
       same strip of space. */
    bottom: 5.5rem;
    gap: var(--sp-4);
  }

  .hero__scroll-hint {
    bottom: 1.1rem;
  }

  /* Client asked for these removed from the mobile hero entirely (was
     previously just shrunk down). Hidden with CSS rather than pulled from
     the template — keeps the desktop markup/behavior untouched and is a
     one-line revert if that changes again. */
  .hero__stock-filters {
    display: none;
  }

  /* New Arrivals — gap pinned in px (0.75rem's old, pre-scale value) for
     the same reason as --gutter above: this is product-tile geometry, not
     text, so it holds steady while the html bump grows everything else. */
  .new-arrivals__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Categories — the tile grid was cramped/hard to read at phone width
     (see the object-position patch this replaced), so on mobile the whole
     section is hidden here and the same categories live in the mobile
     menu instead ("Категории" drills into the category list — see
     header.php / .mobile-menu__panel--categories in this file). */
  .categories {
    display: none;
  }

  /* Rare Finds */
  .rare-finds__header {
    flex-direction: column;
    gap: var(--sp-6);
  }

  .rare-finds__tagline { text-align: left; }

  .rare-finds__grid {
    grid-template-columns: 1fr;
  }

  .rare-item--hero {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 3 / 4;
  }

  .rare-item--sm { aspect-ratio: 3 / 4; }

  /* About */
  .about-block__stats {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Section header */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  /* Error 404 */
  .error-404__code { font-size: clamp(5rem, 20vw, 12rem); }

  /* Small caps/label text — badges, eyebrows, pills, footer/nav links —
     reads fine at arm's length on a desktop monitor but comes across as
     illegibly tiny on a phone screen. Nudge every sub-0.7rem instance of
     it up a notch, mobile only; layout/spacing is untouched. */
  .t-label,
  .mobile-menu__footer a,
  .hero__stat,
  .section-eyebrow,
  .section-link,
  .product-card__attr,
  .catalog-filter-pill,
  .catalog-filter-label,
  .rare-finds__eyebrow,
  .about-block__eyebrow,
  .marquee-item,
  .footer__col-title,
  .footer__copy,
  .footer__legal a,
  .product-detail__breadcrumb,
  .product-detail__cat,
  .product-detail__condition,
  .product-detail__form .variations th.label,
  .product-detail__form .reset_variations,
  .woocommerce-message .button,
  .woocommerce-error .button,
  .woocommerce-info .button,
  .woocommerce form .form-row label {
    font-size: 0.74rem;
  }

  .hero__sub-text,
  .catalog-filter-sort select {
    font-size: 0.76rem;
  }

  .product-card__badge,
  .product-card__size,
  .category-block__count,
  .category-block__cta,
  .rare-item__tag,
  .hero__scroll-hint span {
    font-size: 0.66rem;
  }
}

/* Very small: 480px */
@media (max-width: 480px) {
  .new-arrivals__grid {
    grid-template-columns: 1fr;
  }

  .about-block__stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6) var(--sp-4);
  }

  .hero__title {
    font-size: clamp(3.5rem, 16vw, 6rem);
  }
}

/* ── 18b. SINGLE PRODUCT PAGE ────────────────────────────────── */
.product-detail {
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: var(--sp-24);
}

.product-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--c-g400);
  margin-bottom: var(--sp-12);
}

.product-detail__breadcrumb a { color: var(--c-g400); transition: color var(--t-fast) var(--ease); }
.product-detail__breadcrumb a:hover { color: var(--c-black); }
.product-detail__breadcrumb .is-current,
.product-detail__breadcrumb a:last-of-type { color: var(--c-black); }

.product-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}

.product-gallery__main {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--c-g100);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }

.product-gallery__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--c-g200);
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.product-gallery__thumb {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-g100);
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t-fast) var(--ease);
}

.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active,
.product-gallery__thumb:hover { border-color: var(--c-black); }

.product-detail__info { padding-top: var(--sp-4); }

.product-detail__cat {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-g400);
  margin-bottom: var(--sp-2);
}

.product-detail__name {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}

.product-detail__price {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: var(--sp-6);
}

.product-detail__condition {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  background: var(--c-g100);
  color: var(--c-g600);
  margin-bottom: var(--sp-8);
}

.product-detail__condition--onbackorder,
.product-detail__condition--backorder { background: var(--c-g800); color: var(--c-white); }
.product-detail__condition--out { background: var(--c-g100); color: var(--c-g400); text-decoration: line-through; }

.product-detail__form { margin-bottom: var(--sp-8); }

/* Restyle WooCommerce's native add-to-cart form/variations — kept functional
   (AJAX price updates, stock checks), just re-skinned to match the site. */
.product-detail__form .variations { width: 100%; margin-bottom: var(--sp-6); border-collapse: collapse; }
.product-detail__form .variations tr { display: flex; flex-direction: column; margin-bottom: var(--sp-4); }
.product-detail__form .variations th.label {
  text-align: left;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: var(--sp-2);
}
.product-detail__form .variations td.value { padding: 0; }
.product-detail__form .variations select {
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid var(--c-g200);
  background: var(--c-white);
  font-family: var(--ff-body);
  font-size: 0.82rem;
}
.product-detail__form .reset_variations {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: 0.65rem;
  color: var(--c-g400);
  text-decoration: underline;
}
.product-detail__form .woocommerce-variation-price { margin-bottom: var(--sp-4); font-weight: 600; }
.product-detail__form .woocommerce-variation-availability p { font-size: 0.75rem; color: var(--c-g600); }

.product-detail__form .cart { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: stretch; }
.product-detail__form .quantity { display: flex; }
.product-detail__form .quantity .qty {
  width: 64px;
  padding: 0.85em 0.5em;
  text-align: center;
  border: 1px solid var(--c-g200);
  font-family: var(--ff-body);
  font-size: 0.85rem;
}
.product-detail__form .single_add_to_cart_button {
  flex: 1;
  min-width: 200px;
  padding: 1em 2em;
  background: var(--c-black);
  color: var(--c-white);
  border: none;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}
.product-detail__form .single_add_to_cart_button:hover { opacity: 0.8; }
.product-detail__form .single_add_to_cart_button.disabled {
  background: var(--c-g200);
  color: var(--c-g400);
  cursor: not-allowed;
}
.product-detail__form p.stock {
  width: 100%;
  font-size: 0.72rem;
  color: var(--c-g600);
  margin-top: var(--sp-2);
}

.product-detail__attrs {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-g100);
  margin-bottom: var(--sp-6);
}

.product-detail__attr-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-1);
  font-size: 0.82rem;
}

.product-detail__attr-row dt {
  color: var(--c-g400);
  font-weight: 400;
}

.product-detail__attr-row dd {
  font-weight: 500;
  text-align: right;
}

.product-detail__policies {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-8);
  margin-top: var(--sp-8);
  border-top: 1px solid var(--c-g100);
}

.product-detail__policy {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.78rem;
  color: var(--c-g600);
}

.product-detail__policy svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  stroke: var(--c-g600);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-detail__excerpt {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--c-g600);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-g100);
  margin-bottom: var(--sp-6);
}

.product-detail__description { padding-top: var(--sp-6); border-top: 1px solid var(--c-g100); }
.product-detail__desc-title {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: var(--sp-3);
}
.product-detail__description div {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--c-g600);
}

.related-products { border-top: 1px solid var(--c-g100); margin-top: var(--sp-24); }

@media (max-width: 900px) {
  .product-detail__grid { grid-template-columns: 1fr; }
}

/* ── 18c. CART & CHECKOUT ─────────────────────────────────────
   Corzина/checkout were still 100% default WooCommerce markup (the plugin's
   own cart.php/checkout templates, rendered through page.php's generic
   "post-content" branch) — no theme classes to hook into, so this section
   restyles WooCommerce's own selectors directly instead of adding template
   overrides. Deliberately CSS-only: cart quantity AJAX, coupon validation,
   the checkout's live order-review refresh and payment-method switching are
   all WooCommerce core JS wired to these exact class names, and a hand-copied
   template rewrite risks silently breaking that (same lesson as the earlier
   nav-walker bug — don't reinvent what's already wired up). A few properties
   use !important because woocommerce/assets/css (still enqueued, not
   dequeued) sets them with equivalent selector specificity. */

body.woocommerce-cart .post-content,
body.woocommerce-checkout .post-content,
body.woocommerce-order-received .post-content {
  max-width: none;
}

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none;
  display: block;
  padding: 1.1em 1.4em;
  margin-bottom: var(--sp-8);
  border: 1px solid var(--c-g200);
  border-left: 3px solid var(--c-black);
  background: var(--c-off-white);
  font-size: 0.82rem;
  color: var(--c-black);
}

.woocommerce-error { border-left-color: #b3261e; }

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  margin-left: var(--sp-4);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
}

/* ── Cart table ── */
.woocommerce-cart-form table.shop_table,
table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-8);
}

.woocommerce-cart-form table.shop_table thead th {
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-g100);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-g400);
  text-align: left;
}

.woocommerce-cart-form table.shop_table thead th.product-remove,
.woocommerce-cart-form table.shop_table thead th.product-thumbnail { color: transparent; }

.woocommerce-cart-form table.shop_table td {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--c-g100);
  vertical-align: middle;
  font-size: 0.85rem;
}

.woocommerce-cart-form table.shop_table td.product-remove { width: 32px; padding-right: 0; }

.woocommerce-cart-form td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--c-g200) !important;
  border-radius: 50%;
  color: var(--c-g600) !important;
  background: transparent !important;
  font-size: 1rem;
  line-height: 1;
  transition: all var(--t-fast) var(--ease);
}

.woocommerce-cart-form td.product-remove a.remove:hover {
  border-color: var(--c-black) !important;
  color: var(--c-white) !important;
  background: var(--c-black) !important;
}

.woocommerce-cart-form td.product-thumbnail { width: 90px; }

.woocommerce-cart-form td.product-thumbnail img {
  width: 78px;
  height: 96px;
  object-fit: cover;
  background: var(--c-off-white);
}

.woocommerce-cart-form td.product-name a {
  font-weight: 600;
  color: var(--c-black);
}

.woocommerce-cart-form td.product-name a:hover { opacity: 0.6; }

.woocommerce-cart-form td.product-name .variation {
  margin-top: var(--sp-2);
  font-size: 0.72rem;
  color: var(--c-g400);
}

.woocommerce-cart-form .quantity .qty,
.product-detail__form .quantity .qty {
  width: 58px;
  padding: 0.7em 0.4em;
  text-align: center;
  border: 1px solid var(--c-g200) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--c-white) !important;
  font-family: var(--ff-body);
  font-size: 0.82rem;
  color: var(--c-black) !important;
}

.woocommerce-cart-form .amount { font-weight: 600; }

.woocommerce-cart-form table.shop_table tr.woocommerce-cart-form__cart-item:last-of-type td,
tr.cart-actions_row td { border-bottom: none; }

.woocommerce-cart-form table.shop_table td.actions {
  padding-top: var(--sp-6);
  border-bottom: none;
}

.woocommerce-cart-form table.shop_table td.actions .coupon {
  display: inline-flex;
  gap: var(--sp-2);
  margin-right: var(--sp-4);
}

.woocommerce-cart-form #coupon_code {
  padding: 0.85em 1em;
  border: 1px solid var(--c-g200);
  font-family: var(--ff-body);
  font-size: 0.8rem;
  min-width: 180px;
}

/* Generic "vs-btn" look shared by every plain WooCommerce <button class="button">
   across cart/checkout — coupon apply, update cart, place order, pay button —
   so they read as the same control as the rest of the site's .btn--outline/solid
   instead of the browser's default grey button chrome. */
.woocommerce-cart-form table.shop_table td.actions button.button,
.woocommerce-cart-form #coupon_code + button.button,
button.button.alt,
#place_order,
a.checkout-button,
.wc-proceed-to-checkout a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.9em 2.2em !important;
  border: 1px solid var(--c-black) !important;
  background: var(--c-white) !important;
  color: var(--c-black) !important;
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.woocommerce-cart-form table.shop_table td.actions button.button:hover,
.woocommerce-cart-form #coupon_code + button.button:hover {
  background: var(--c-black) !important;
  color: var(--c-white) !important;
}

/* Primary actions (proceed to checkout, place order, pay) get the solid
   black treatment so they read as the one obvious next step. */
button.button.alt,
#place_order,
a.checkout-button,
.wc-proceed-to-checkout a.button {
  width: 100%;
  background: var(--c-black) !important;
  color: var(--c-white) !important;
  border-color: var(--c-black) !important;
  padding: 1.05em 2em !important;
}

button.button.alt:hover,
#place_order:hover,
a.checkout-button:hover,
.wc-proceed-to-checkout a.button:hover {
  opacity: 0.8;
}

button.button.alt:disabled,
#place_order:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Cart totals / order review sidebar ── */
.cart-collaterals { margin-top: var(--sp-8); display: flex; justify-content: flex-end; }

.cart_totals,
#order_review_wrapper,
#order_review {
  width: 100%;
  max-width: 420px;
}

.cart_totals { padding: var(--sp-8); border: 1px solid var(--c-g100); background: var(--c-off-white); }

.cart_totals h2 {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: var(--sp-6);
}

.cart_totals table.shop_table,
table.woocommerce-checkout-review-order-table { border: none; }

.cart_totals table.shop_table tr th,
.cart_totals table.shop_table tr td,
table.woocommerce-checkout-review-order-table tr th,
table.woocommerce-checkout-review-order-table tr td {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-g200);
  font-size: 0.82rem;
  text-align: left;
}

.cart_totals table.shop_table tr th,
table.woocommerce-checkout-review-order-table tr th {
  font-weight: 500;
  color: var(--c-g600);
}

.cart_totals table.shop_table tr td,
table.woocommerce-checkout-review-order-table tr td { text-align: right; }

.cart_totals tr.order-total th,
.cart_totals tr.order-total td,
table.woocommerce-checkout-review-order-table tr.order-total th,
table.woocommerce-checkout-review-order-table tr.order-total td {
  border-bottom: none;
  padding-top: var(--sp-4);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-black);
}

.wc-proceed-to-checkout { margin-top: var(--sp-6); }

table.woocommerce-checkout-review-order-table thead { display: none; }

table.woocommerce-checkout-review-order-table td.product-name .product-quantity { color: var(--c-g400); }

/* ── Checkout two-column layout ──
   Default markup: form.checkout > div#customer_details.col2-set (billing +
   shipping) then h3#order_review_heading + div#order_review as separate
   siblings. WooCommerce's own CSS floats col-1/col-2 inside col2-set but
   never puts the whole form into a form-left / summary-right layout — that's
   done here with a simple 2-column grid on the form itself. */
form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0 var(--sp-16);
  align-items: start;
}

#customer_details.col2-set { grid-column: 1; grid-row: 1 / 3; display: block; width: 100%; }
#customer_details .col-1,
#customer_details .col-2 { width: 100%; float: none; }
#customer_details .col-2 { margin-top: var(--sp-8); }

#order_review_heading { grid-column: 2; grid-row: 1; font-family: var(--ff-display); font-size: 1.3rem; font-weight: 800; margin-bottom: var(--sp-6); }
#order_review { grid-column: 2; grid-row: 2; max-width: none; padding: var(--sp-8); border: 1px solid var(--c-g100); background: var(--c-off-white); }

/* ── Form fields (billing/shipping/order notes) ── */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: var(--sp-6);
}

.woocommerce form .form-row { margin-bottom: var(--sp-4); }

.woocommerce form .form-row label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-g400);
}

.woocommerce form .form-row label .required { color: #b3261e; text-decoration: none; }

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid var(--c-g200) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--c-white) !important;
  font-family: var(--ff-body);
  font-size: 0.85rem;
  color: var(--c-black);
  box-shadow: none !important;
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
  outline: none;
  border-color: var(--c-black) !important;
}

.woocommerce form .select2-container .select2-selection--single {
  height: auto;
  padding: 0.85em 1em;
  border: 1px solid var(--c-g200);
  border-radius: 0;
}

.woocommerce-additional-fields { margin-top: var(--sp-8); }

/* ── Payment methods (BACS included) ── */
ul.wc_payment_methods {
  border: 1px solid var(--c-g200);
  margin-bottom: var(--sp-6);
}

li.wc_payment_method {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-g200);
}

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

li.wc_payment_method label {
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

li.wc_payment_method input[type="radio"] { margin-right: var(--sp-2); accent-color: var(--c-black); }

.payment_box {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-off-white);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--c-g600);
}

/* BACS ("Перевод на карту") shows the card number + instructions here —
   this is the one moment in the whole flow the buyer needs to actually copy
   something down, so it gets a visibly distinct bordered panel instead of
   blending into the rest of the muted payment_box text. */
.payment_box.payment_method_bacs {
  border-left: 3px solid var(--c-black);
  background: var(--c-white);
  border-top: 1px solid var(--c-g200);
  border-right: 1px solid var(--c-g200);
  border-bottom: 1px solid var(--c-g200);
  white-space: pre-line;
  font-size: 0.85rem;
  color: var(--c-black);
}

.woocommerce-terms-and-conditions-wrapper {
  margin: var(--sp-6) 0;
  font-size: 0.8rem;
}

.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
}

.woocommerce-form__input-checkbox { margin-top: 0.3em; accent-color: var(--c-black); }

#ship-to-different-address label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--c-black); }
#ship-to-different-address-checkbox { accent-color: var(--c-black); }

.woocommerce-shipping-fields h3 label { display: flex; align-items: center; gap: var(--sp-2); }

/* ── Thank-you / order-received page ── */
.woocommerce-order-received .post-content { max-width: 720px; }

.woocommerce-order .woocommerce-thankyou-order-received {
  display: block;
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
  border-left: 3px solid var(--c-black);
  background: var(--c-off-white);
  font-size: 1rem;
  font-weight: 600;
}

ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
  margin-bottom: var(--sp-8);
  border-top: 1px solid var(--c-g100);
  border-bottom: 1px solid var(--c-g100);
  list-style: none;
}

ul.woocommerce-order-overview li {
  font-size: 0.72rem;
  color: var(--c-g600);
}

ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: var(--sp-1);
  font-size: 1rem;
  color: var(--c-black);
  font-weight: 700;
}

.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--c-g100);
  font-size: 0.82rem;
  text-align: left;
}

@media (max-width: 900px) {
  form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
  #customer_details.col2-set,
  #order_review_heading,
  #order_review { grid-column: 1; grid-row: auto; }
  #order_review { margin-top: var(--sp-8); }
  .cart_totals, #order_review_wrapper, #order_review { max-width: none; }
  .woocommerce-cart-form table.shop_table thead { display: none; }
  .woocommerce-cart-form table.shop_table tr { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-g100); }
  .woocommerce-cart-form table.shop_table td { border-bottom: none; padding: var(--sp-1) 0; }
  .woocommerce-cart-form td.product-thumbnail { grid-row: 1 / 5; }
  .woocommerce-cart-form table.shop_table td.actions { grid-column: 1 / -1; display: block; }
  .cart-collaterals { justify-content: stretch; }
}

/* ── 18d. CART & CHECKOUT (WooCommerce BLOCKS) ─────────────────
   Turns out this store's Cart/Checkout pages hold the block-based
   [woocommerce/cart] / [woocommerce/checkout] blocks, not the classic
   shortcodes — confirmed from the "Contact information / Billing address
   (Edit) / Order summary" layout in the screenshot, which is the Blocks
   package's UI, not the classic template. That's why section 18c above
   (classic .woocommerce-cart-form / form.checkout selectors) never took
   effect here: wrong markup entirely, not a bug in that CSS. Left 18c in
   place as harmless in case the site ever reverts to the classic shortcodes;
   this section targets the Blocks package's real component classes instead,
   which are stable, documented class names, not React-generated hashes. */

/* The huge gap between the "Checkout"/"Корзина" H1 and the form was
   .page-header's own bottom padding+margin (8rem combined) stacking with
   .post-content.section-pad's top padding (up to 4rem) — ~12rem of dead
   space before block content this theme didn't know about got a chance to
   render. Collapse that on cart/checkout specifically. */
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header {
  padding-bottom: 0;
  margin-bottom: 0;
}

body.woocommerce-cart .post-content.section-pad,
body.woocommerce-checkout .post-content.section-pad {
  padding-top: var(--sp-8);
}

.wc-block-components-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0 var(--sp-16);
  align-items: start;
}

.wc-block-components-main { grid-column: 1; }
.wc-block-components-sidebar { grid-column: 2; }

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar > * {
  max-width: none;
}

/* Step titles ("Contact information", "Billing address", "Payment", …) —
   no border between steps per client request ("убери рамки по всему
   чекауту"), just spacing. */
.wc-block-components-checkout-step {
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--ff-display) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: var(--c-black) !important;
}

.wc-block-components-checkout-step__description {
  font-size: 0.8rem;
  color: var(--c-g600);
}

/* Numbered circle badge WC Blocks puts before each step title */
.wc-block-components-checkout-step__title-icon,
.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title-icon {
  background: var(--c-black) !important;
  color: var(--c-white) !important;
  border-color: var(--c-black) !important;
}

/* Text inputs (floating-label style) */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-checkout__additional-fields input,
.wc-block-components-textarea {
  border: 1px solid var(--c-g200) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--ff-body) !important;
  box-shadow: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus {
  border-color: var(--c-black) !important;
  box-shadow: none !important;
}

.wc-block-components-text-input label,
.wc-block-components-address-form label {
  font-family: var(--ff-body) !important;
  color: var(--c-g400) !important;
}

select.wc-block-components-select-input,
.wc-block-components-select-input select,
.wc-block-components-combobox input {
  border: 1px solid var(--c-g200) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--ff-body) !important;
}

/* Saved-address summary card ("SAIENKO YAROSLAV … Edit") — no border, just
   type + spacing, per client request to drop the boxed-frame look. */
.wc-block-components-address-card {
  padding: var(--sp-4) 0;
  font-size: 0.85rem;
}

.wc-block-components-address-card__edit {
  color: var(--c-black) !important;
  font-weight: 600;
  text-decoration: underline;
}

/* Buttons — same black/white treatment as the rest of the site */
.wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  border-radius: var(--radius) !important;
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 1em 2em !important;
  transition: opacity var(--t-fast) var(--ease) !important;
}

.wc-block-components-button.wp-element-button:not(.is-link) {
  background: var(--c-black) !important;
  color: var(--c-white) !important;
  border: 1px solid var(--c-black) !important;
}

.wc-block-components-button.wp-element-button:not(.is-link):hover {
  opacity: 0.8 !important;
}

.wc-block-components-button.is-link {
  color: var(--c-black) !important;
  text-decoration: underline;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Order summary sidebar */
.wc-block-components-order-summary,
.wc-block-cart__totals-title {
  font-family: var(--ff-display);
}

/* Flat column, no card/frame around it — client wants just photo + name +
   price stacked per item, total at the bottom, no boxed panel. */
.wc-block-components-order-summary {
  padding: var(--sp-6) 0;
}

.wc-block-components-sidebar .wc-block-components-panel {
  padding: var(--sp-4) 0;
}

.wc-block-components-order-summary-item__image img,
.wc-block-components-product-image img {
  border-radius: var(--radius-sm) !important;
}

/* BUG FIX (round 2): the first attempt at this fix didn't hold on the live
   site — some property here was still losing to WooCommerce Blocks' own
   stylesheet because it wasn't flagged !important and/or wasn't specific
   enough to win the cascade. Every property below is now !important, the
   selectors are scoped under the sidebar (two classes, beats a lone WC
   class of equal specificity), and the row gets an explicit 100% width +
   nowrap so nothing can squeeze the name column back down to a sliver. */
/* BUG FIX (round 3 — real cause found via DevTools inspection):
   The name element is NOT ".../__name" (that class doesn't exist in this WC
   version) — it's <h3 class="wc-block-components-product-name">. WooCommerce's
   own stylesheet sets `overflow-wrap: anywhere` on that h3 and `word-break:
   break-word` on `__description`. Per the CSS text spec, both of those (unlike
   plain `overflow-wrap: break-word`) count toward the element's *automatic
   minimum size* in a flex layout — so the browser decided this flex item's
   minimum content width was "one character" and happily shrank it to that
   the moment the row ran a little tight. Fix: turn that wrapping mode back to
   normal (wrap at spaces only) so the browser's real min-content width is a
   whole word, and give the item a concrete min-width as a floor besides. */
.wc-block-components-order-summary-item {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: var(--sp-3) !important;
}

.wc-block-components-order-summary-item__image {
  flex: 0 0 auto !important;
  width: 56px !important;
}

.wc-block-components-order-summary-item__description {
  flex: 1 1 auto !important;
  min-width: 90px !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.wc-block-components-product-name {
  display: block !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
  max-width: none !important;
  width: auto !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__individual-prices {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-align: right !important;
  font-size: 0.82rem !important;
}

/* "Too many prices" — was showing regular+sale price under the name AND a
   "Save X" badge AND the final price on the right. Keep just one number:
   the plain price on the right. Also drop the short product description
   under the name — client asked for photo + name + price only. */
.wc-block-components-order-summary-item__description .wc-block-components-product-price,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
.wc-block-components-product-metadata__description,
.wc-block-components-sale-badge,
.wc-block-components-product-badge {
  display: none !important;
}

/* "Add coupon" panel removed entirely — not part of the trimmed-down
   summary the client wants (photo, name, price, total — nothing else). */
.wc-block-components-totals-coupon {
  display: none !important;
}

.wc-block-components-order-summary-item__quantity,
.wc-block-components-quantity-badge {
  background: var(--c-black) !important;
  color: var(--c-white) !important;
  border-radius: 50% !important;
}

.wc-block-components-totals-item__label { color: var(--c-g600); }
.wc-block-components-totals-item__value { font-weight: 600; }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-black);
}

.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
  color: var(--c-black) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wc-block-components-totals-coupon__input input {
  border: 1px solid var(--c-g200) !important;
  border-radius: var(--radius-sm) !important;
}

/* Radio options (shipping method, payment method) — no boxed border per
   client request; a hairline divider between options is enough, and this
   also fixes the label text overlapping the radio dot: my earlier uniform
   padding override was clobbering WC Blocks' own reserved space for the
   custom radio circle. Not setting padding here at all lets that default
   spacing do its job again. */
.wc-block-components-radio-control__option {
  border: none !important;
  border-bottom: 1px solid var(--c-g100) !important;
}

.wc-block-components-radio-control__option:last-child {
  border-bottom: none !important;
}

.wc-block-components-radio-control__input {
  accent-color: var(--c-black);
}

.wc-block-components-radio-control__option-checked {
  border-color: var(--c-black) !important;
}

.wc-block-components-checkbox svg { color: var(--c-black) !important; }

@media (max-width: 900px) {
  .wc-block-components-sidebar-layout { grid-template-columns: 1fr; }
  .wc-block-components-main,
  .wc-block-components-sidebar { grid-column: 1; }
}

/* ── 18e. SOFTER UI ───────────────────────────────────────────
   Client feedback: too many hard 90° corners, wants it "softer", plus more
   motion. Kept the type system (nav, headlines, uppercase labels) exactly as
   is — that's the brand voice — and rounded the things that read as UI
   chrome: buttons, cards, photos, inputs, panels. Also layered in a bit more
   hover motion (lift + shadow) beyond the existing image-zoom/opacity
   transitions, using the new --radius/--shadow tokens from section 1. */

.btn--outline,
.btn--solid,
.btn--white {
  border-radius: var(--radius);
}

.catalog-filter-sort select { border-radius: var(--radius-sm); }

.product-card__image-wrap { border-radius: var(--radius); }

.product-card {
  transition: transform var(--t-mid) var(--ease);
}

.product-card:hover {
  transform: translateY(-6px);
}

.product-card:hover .product-card__image-wrap {
  box-shadow: var(--shadow-lift);
}

.category-block {
  border-radius: var(--radius);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.category-block:hover {
  box-shadow: var(--shadow-lift);
}

.cart-drawer__panel {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

li.mini_cart_item img,
.woocommerce-cart-form td.product-thumbnail img,
.product-gallery__main,
.product-gallery__thumb,
.wc-block-components-order-summary-item__image img,
.wc-block-components-product-image img {
  border-radius: var(--radius-sm) !important;
}

.cart_totals,
.payment_box,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
#order_review {
  border-radius: var(--radius);
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.wc-block-components-text-input input,
.wc-block-components-address-form input,
select.wc-block-components-select-input,
.wc-block-components-select-input select,
li.wc_payment_method,
ul.wc_payment_methods {
  border-radius: var(--radius-sm) !important;
}

.product-card__badge { border-radius: var(--radius-sm); }

/* Buttons everywhere get a touch of lift on hover, on top of the existing
   opacity/fill transitions — makes clicking feel more responsive/alive. */
.btn:hover,
.wc-block-components-button.wp-element-button:not(.is-link):hover,
.woocommerce-cart-form table.shop_table td.actions button.button:hover,
button.button.alt:hover,
#place_order:hover,
a.checkout-button:hover {
  transform: translateY(-2px);
}

/* Cart badge "bump" — main.js toggles .is-bumped for a beat whenever the
   count changes, instead of it just silently updating a number. */
@keyframes vs-cart-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.cart-count.is-bumped {
  animation: vs-cart-bump 0.4s var(--ease);
}

/* ── 19. PRINT ────────────────────────────────────────────── */
@media print {
  .site-header, .mobile-menu, .hero__scroll-hint, .site-footer { display: none; }
  body { color: #000; background: #fff; }
}

/* ── 20. THANK YOU PAGE ───────────────────────────────────────
   Replaces WooCommerce's default order-received layout (order-overview
   stat row + order-details table + billing address) with a simple
   centered message: success icon, thank-you line, the bank-transfer
   instructions (still pulled from the BACS gateway's own hook), and a
   Telegram contact line. See woocommerce/checkout/thankyou.php. */
body.woocommerce-order-received .page-header {
  display: none;
}

.vs-thankyou {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-16, 4rem) var(--sp-4) var(--sp-16, 4rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vs-thankyou__icon {
  color: var(--c-black);
  margin-bottom: var(--sp-6);
}

.vs-thankyou__icon--failed {
  color: var(--c-g600);
}

.vs-thankyou__title {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  margin: 0 0 var(--sp-3) 0;
}

.vs-thankyou__order-number {
  color: var(--c-g800);
  font-size: 0.95rem;
  margin: 0 0 var(--sp-6) 0;
}

.vs-thankyou__message {
  color: var(--c-g800);
  line-height: 1.7;
  margin: 0 0 var(--sp-6) 0;
}

.vs-thankyou__instructions {
  background: none;
  border-top: 1px solid var(--c-g200);
  border-bottom: 1px solid var(--c-g200);
  border-radius: 0;
  padding: var(--sp-6) 0;
  margin: 0 0 var(--sp-8) 0;
  line-height: 1.8;
  font-size: 0.95rem;
  color: var(--c-black);
}

.vs-thankyou__instructions p:last-child {
  margin-bottom: 0;
}

.vs-thankyou__contact {
  color: var(--c-black);
  margin: 0 0 var(--sp-8) 0;
}

.vs-thankyou__contact a {
  color: var(--c-black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vs-thankyou__back {
  display: inline-flex;
}