/* ==========================================================================
   Miaowser — Redesign (stage 1: header, homepage, footer)
   ========================================================================== */

/* ─── Globals ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }  /* prevent h-scroll from 100vw breakouts */

body {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-fs-md);
  line-height: var(--mw-lh-normal);
  color: var(--mw-text);
  background: var(--mw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.mw-nav-open { overflow: hidden; }

/* ─── Homepage fullwidth breakout ─────────────────────────
   Sober wraps content in bootstrap .container (width: 1170px on big
   screens) and .site-content has its own padding. On the homepage we
   want pure edge-to-edge layout like LV, so we nuke every possible
   constraint at every level. Scoped to body.home so other pages
   (shop/category/product/cart) keep their sober container. */
body.home #page.site,
body.home #content.site-content,
body.home main#primary,
body.home .mw-main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* kill bootstrap .container and sober-container wrappers sober may inject
   inside #content via its hooks */
body.home #content > .container,
body.home #content > .sober-container,
body.home #content > .row,
body.home #content .page-template-homepage {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.home #content.site-content { padding: 0 !important; }

/* non-home pages keep sober's container layout, we only kill top padding
   so the fixed header doesn't overlap */
body:not(.home) #content.site-content { padding-top: 0; }
body.home #page.site,
body #page.site { background: var(--mw-bg); }

/* hide sober's breadcrumb / toolbar on homepage */
body.home .woocommerce-breadcrumb,
body.home .sober-page-header,
body.home .page-header,
body.home .mw-page-header { display: none !important; }

/* Wishlist functionality is disabled site-wide (client decision 24.04).
   Hide every UI surface the wcboost-wishlist plugin and sober's
   wishlist support could render — header icon, loop card, single
   product page, my-account menu fallback, mini-cart. The plugin keeps
   running so theme calls don't error out. */
.wcboost-wishlist-button,
.wcboost-wishlist-edit-link-wrapper,
.wcboost-wishlist-add-to-cart,
.add-to-wishlist-link,
.add-to-wishlist,
.wishlist-link,
.wishlist-button,
.product-add-to-wishlist,
.menu-item-wishlist,
.sober-wishlist-button,
.yith-wcwl-add-to-wishlist,
.yith-wcwl-wishlistexistsbrowse,
.menu-item-account .wishlist,
li.wcboost-wishlist,
li.wishlist {
  display: none !important;
}
/* my-account menu item rendered via woocommerce_account_menu_items */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--wishlist,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--wcboost-wishlist {
  display: none !important;
}

.mw-container {
  max-width: var(--mw-container);
  margin: 0 auto;
  padding: 0 var(--mw-gutter);
}
.mw-container--wide { max-width: var(--mw-container-wide); }
.mw-container--narrow { max-width: var(--mw-container-narrow); }

.mw-section { padding: var(--mw-space-20) 0; }
@media (max-width: 767px) { .mw-section { padding: var(--mw-space-12) 0; } }

.mw-section-title {
  font-size: var(--mw-fs-4xl);
  font-weight: var(--mw-fw-medium);
  line-height: var(--mw-lh-tight);
  letter-spacing: var(--mw-ls-wide);
  margin: 0 0 var(--mw-space-10);
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .mw-section-title { font-size: var(--mw-fs-3xl); margin-bottom: var(--mw-space-8); }
}

.mw-eyebrow {
  display: inline-block;
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-semibold);
  letter-spacing: var(--mw-ls-widest);
  text-transform: uppercase;
  color: var(--mw-text-muted);
  margin-bottom: var(--mw-space-3);
}

/* ─── Buttons ─────────────────────────────────────────────── */
.mw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mw-space-2);
  padding: 16px var(--mw-space-8);
  font-family: var(--mw-font-sans);
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--mw-ls-wider);
  border: var(--mw-border-thin) solid transparent;
  border-radius: var(--mw-radius-none);
  cursor: pointer;
  transition: background-color var(--mw-duration-normal) var(--mw-ease),
              color var(--mw-duration-normal) var(--mw-ease),
              border-color var(--mw-duration-normal) var(--mw-ease),
              opacity var(--mw-duration-normal) var(--mw-ease);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.mw-btn--primary,
.mw-btn--primary:visited {
  background: var(--mw-black);
  color: var(--mw-white);
  border-color: var(--mw-black);
}
.mw-btn--primary:hover { background: var(--mw-gray-800); border-color: var(--mw-gray-800); color: var(--mw-white); }

.mw-btn--secondary,
.mw-btn--secondary:visited {
  background: transparent;
  color: var(--mw-black);
  border-color: var(--mw-black);
}
.mw-btn--secondary:hover { background: var(--mw-black); color: var(--mw-white); }

/* `--light` — кнопка на тёмном фоне (hero "В каталог"). Браузер по умолчанию
   красит :visited ссылки серым/фиолетовым → CTA становится тусклой. Явно
   фиксируем цвет для :visited (CSS позволяет менять только color/border/bg
   у :visited, текст-декорацию не пускает — но нам и не надо). */
.mw-btn--light,
.mw-btn--light:visited {
  background: transparent;
  color: var(--mw-white);
  border-color: var(--mw-white);
}
.mw-btn--light:hover { background: var(--mw-white); color: var(--mw-black); }

.mw-btn--block { width: 100%; }

/* ─── Header ──────────────────────────────────────────────── */
.mw-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--mw-z-sticky);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--mw-space-8);
  height: var(--mw-header-h);
  background: var(--mw-white);
  color: var(--mw-black);
  /* no border — clean look; box-shadow on .is-scrolled handles depth */
  transition: background-color var(--mw-duration-normal) var(--mw-ease),
              color var(--mw-duration-normal) var(--mw-ease),
              height var(--mw-duration-normal) var(--mw-ease),
              box-shadow var(--mw-duration-normal) var(--mw-ease);
}
@media (max-width: 767px) {
  .mw-header { padding: 0 var(--mw-space-4); height: 64px; }
}

/* Scrolled state — shrinks + solid background. Declared FIRST so the
   .is-over-hero rule below wins the cascade when both classes are on
   the element (user scrolled a bit but the hero is still in view).
   Without that ordering, .is-scrolled's white background would override
   .is-over-hero's transparent background and the logo crossfade would
   feel delayed vs the bg swap. */
.mw-header.is-scrolled {
  height: var(--mw-header-h-scrolled);
  box-shadow: var(--mw-shadow-sm);
  background: var(--mw-white);
  color: var(--mw-black);
}
@media (max-width: 767px) {
  .mw-header.is-scrolled { height: 56px; }
}

/* Transparent over hero — wins over .is-scrolled above for colour rules,
   so bg and logo both swap at the exact same moment: when the hero
   scrolls past the header. */
.mw-header.is-over-hero {
  background: transparent;
  color: var(--mw-white);
  box-shadow: none;
}

/* Push page content below fixed header (non-home pages get this too,
   homepage removes it because hero sits under header). */
body:not(.home) #page.site { padding-top: var(--mw-header-h); }
@media (max-width: 767px) {
  body:not(.home) #page.site { padding-top: 64px; }
}

/* Burger */
.mw-burger {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--mw-space-3);
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: var(--mw-space-3);
  margin-left: calc(var(--mw-space-3) * -1);
  font: inherit;
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--mw-ls-wider);
}
.mw-burger svg { width: 22px; height: 22px; stroke: currentColor; }
.mw-burger__label { display: inline; }
@media (max-width: 767px) { .mw-burger__label { display: none; } }

/* Logo — stacked dark + light PNGs, crossfade on scroll/over-hero.
   Both images are loaded eagerly and stay in the DOM so there's no
   flicker during the swap, only a smooth opacity transition. */
.mw-logo {
  justify-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  line-height: 0;
}
.mw-logo__img {
  display: block;
  height: 36px;
  width: auto;
  transition: height var(--mw-duration-normal) var(--mw-ease),
              opacity var(--mw-duration-normal) var(--mw-ease);
}
.mw-header.is-scrolled .mw-logo__img { height: 28px; }
@media (max-width: 767px) {
  .mw-logo__img { height: 28px; }
  .mw-header.is-scrolled .mw-logo__img { height: 24px; }
}

/* Dark stays in flow — defines the container size.
   Light is absolutely positioned on top of it, 0 opacity by default. */
.mw-logo__dark  { opacity: 1; }
.mw-logo__light {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Crossfade when header is over hero — show the white logo instead */
.mw-header.is-over-hero .mw-logo__dark  { opacity: 0; }
.mw-header.is-over-hero .mw-logo__light { opacity: 1; }

/* Header right icons */
.mw-header__icons {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--mw-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mw-header__icons a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--mw-duration-fast) var(--mw-ease);
}
.mw-header__icons a:hover { opacity: 0.7; }
.mw-header__icons svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
@media (max-width: 767px) {
  .mw-header__icons { gap: var(--mw-space-3); }
  .mw-header__icons svg { width: 20px; height: 20px; }
}

.mw-header__cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--mw-black);
  color: var(--mw-white);
  font-size: 10px;
  font-weight: var(--mw-fw-bold);
  line-height: 16px;
  text-align: center;
  border-radius: var(--mw-radius-full);
  transition: background var(--mw-duration-normal) var(--mw-ease), color var(--mw-duration-normal) var(--mw-ease);
}
.mw-header.is-over-hero .mw-header__cart-count {
  background: var(--mw-white);
  color: var(--mw-black);
}

/* ─── Offcanvas navigation ────────────────────────────────── */
.mw-nav {
  position: fixed;
  inset: 0;
  z-index: var(--mw-z-overlay);
  pointer-events: none;
  visibility: hidden;
}
body.mw-nav-open .mw-nav { pointer-events: auto; visibility: visible; }

.mw-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity var(--mw-duration-normal) var(--mw-ease);
}
body.mw-nav-open .mw-nav__backdrop { opacity: 1; }

.mw-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--mw-white);
  transform: translateX(-100%);
  transition: transform var(--mw-duration-slow) var(--mw-ease);
  display: flex;
  flex-direction: column;
  box-shadow: var(--mw-shadow-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.mw-nav-open .mw-nav__panel { transform: translateX(0); }

.mw-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mw-space-5) var(--mw-space-8);
  border-bottom: var(--mw-border-thin) solid var(--mw-border);
}
.mw-nav__title {
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-semibold);
  letter-spacing: var(--mw-ls-wider);
  text-transform: uppercase;
  margin: 0;
}
.mw-nav__close {
  background: none;
  border: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mw-black);
  padding: 0;
  margin-right: -8px;
}
.mw-nav__close svg { width: 22px; height: 22px; stroke: currentColor; }

.mw-nav__body {
  flex: 1;
  padding: var(--mw-space-6) var(--mw-space-8);
}
/* wp_nav_menu uses the same .nav-menu class that sober styles for its
   desktop dropdown (position: absolute, transform, box-shadow...). Inside
   our offcanvas we need a plain vertical list that expands inline, so we
   reset those rules first, then apply our own styling.
   ВАЖНО: sober в @media (max-width: 1199px) ставит .nav-menu { display:none }
   — это его «уберём desktop-меню чтобы рендерить mobile-меню вместо него».
   Наш offcanvas использует тот же класс .nav-menu → попадает под скрытие.
   Принудительно показываем UL и его LI на любой ширине внутри offcanvas. */
.mw-nav__body .nav-menu,
.mw-nav__body .nav-menu ul,
.mw-nav__body .menu {
  display: block !important;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mw-nav__body .nav-menu li,
.mw-nav__body .menu li {
  display: block;
  position: static;
  margin: 0;
  padding: 0;
  border: 0;                 /* no dividers — LV-style clean list */
  background: transparent;
}
/* Neutralise sober's absolute-positioned desktop dropdown.
   sober/style.css:5139-5151 styles .nav-menu li ul with display:none +
   position:absolute + transform + box-shadow — intended for the desktop
   hover dropdown. Inside offcanvas we reset ALL of those so max-height
   animation below can do its job. Critically: display:block overrides
   sober's display:none — without it the sub-menu stays hidden even
   when .is-expanded is added to the parent. */
.mw-nav__body .nav-menu li ul,
.mw-nav__body .nav-menu li ul ul,
.mw-nav__body .menu li ul,
.mw-nav__body .menu li ul ul {
  display: block;
  position: static;
  transform: none;
  top: auto;
  left: auto;
  min-width: 0;
  width: auto;
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: transparent;
  white-space: normal;
  z-index: auto;
}
.mw-nav__body .nav-menu li ul::before { display: none; }
/* Kill the sober underline pseudo on nav links */
.mw-nav__body .site-navigation a::after,
.mw-nav__body .nav-menu a::after,
.mw-nav__body .menu a::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* Top-level items */
.mw-nav__body .nav-menu > li > a,
.mw-nav__body .menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mw-space-4);
  padding: var(--mw-space-4) 0;
  font-size: var(--mw-fs-xl);
  font-weight: var(--mw-fw-regular);
  line-height: 1.4;
  color: var(--mw-text);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--mw-duration-fast) var(--mw-ease);
}
.mw-nav__body .nav-menu > li > a:hover,
.mw-nav__body .menu > li > a:hover { color: var(--mw-gray-600); }

/* +/− toggle next to parent label, flows with flex (no absolute hacks) */
.mw-nav__body .menu-item-has-children > a::before {
  content: '+';
  order: 2;
  margin-left: auto;
  font-size: var(--mw-fs-xl);
  font-weight: var(--mw-fw-regular);
  line-height: 1;
  color: inherit;
  transition: transform var(--mw-duration-normal) var(--mw-ease);
}
.mw-nav__body .menu-item-has-children.is-expanded > a::before {
  content: '−';
}

/* Inline sub-menu drawer — animates max-height so siblings below get
   pushed down smoothly instead of being overlapped by a floating panel. */
.mw-nav__body .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--mw-duration-slow) var(--mw-ease);
}
.mw-nav__body .menu-item-has-children.is-expanded > .sub-menu {
  max-height: 2000px;
}
.mw-nav__body .sub-menu > li > a {
  display: block;
  padding: var(--mw-space-3) 0 var(--mw-space-3) var(--mw-space-6);
  font-size: var(--mw-fs-lg);
  font-weight: var(--mw-fw-regular);
  line-height: 1.4;
  color: var(--mw-text-muted);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: color var(--mw-duration-fast) var(--mw-ease);
}
.mw-nav__body .sub-menu > li:first-child > a { padding-top: var(--mw-space-2); }
.mw-nav__body .sub-menu > li:last-child > a { padding-bottom: var(--mw-space-4); }
.mw-nav__body .sub-menu > li > a:hover { color: var(--mw-black); }

.mw-nav__foot {
  padding: var(--mw-space-6) var(--mw-space-8) var(--mw-space-8);
  border-top: var(--mw-border-thin) solid var(--mw-border);
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-4);
}
.mw-nav__foot-socials {
  display: flex;
  gap: var(--mw-space-4);
}
.mw-nav__foot-socials a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mw-black);
  border: var(--mw-border-thin) solid var(--mw-border);
  transition: all var(--mw-duration-fast) var(--mw-ease);
}
.mw-nav__foot-socials a:hover {
  background: var(--mw-black);
  color: var(--mw-white);
  border-color: var(--mw-black);
}
.mw-nav__foot-socials svg { width: 18px; height: 18px; fill: currentColor; }
.mw-nav__foot-contact {
  font-size: var(--mw-fs-sm);
  color: var(--mw-text-muted);
  line-height: var(--mw-lh-normal);
}
.mw-nav__foot-contact a { color: var(--mw-black); text-decoration: none; }
.mw-nav__foot-contact a:hover { text-decoration: underline; }

/* ─── Compact page header ────────────────────────────────────
   Used on shop / category / page / single-post. Overrides sober's
   huge 175px grey banner by rendering our own .mw-page-header class
   from template-parts/page-header.php (child theme). */
.mw-page-header {
  padding: var(--mw-space-10) 0 var(--mw-space-8);
  background: var(--mw-white);
  /* no border — clean redesign */
}
@media (max-width: 767px) {
  .mw-page-header { padding: var(--mw-space-6) 0; }
}

/* Left-align header content flush to viewport edge (with small gutter),
   not constrained inside the centered .mw-container. LV-like. */
.mw-page-header > .mw-container {
  max-width: none;
  margin: 0;
  padding: 0 var(--mw-space-8);
}
@media (max-width: 767px) {
  .mw-page-header > .mw-container { padding: 0 var(--mw-space-5); }
}

/* Breadcrumb styling (works for Yoast, WooCommerce and sober fallback).
   sober ships two variants: .breadcrumb (Yoast wrapper) and .woocommerce-breadcrumb. */
.mw-page-header .breadcrumb,
.mw-page-header .woocommerce-breadcrumb,
.mw-page-header .sober-breadcrumbs {
  margin: 0 0 var(--mw-space-3);
  padding: 0;
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-regular);
  line-height: 1.4;
  letter-spacing: var(--mw-ls-wide);
  text-transform: uppercase;
  color: var(--mw-text-muted);
  background: transparent;
  text-align: left;
  display: block;
}
.mw-page-header .breadcrumb a,
.mw-page-header .woocommerce-breadcrumb a,
.mw-page-header .sober-breadcrumbs a {
  color: var(--mw-text-muted);
  text-decoration: none;
  transition: color var(--mw-duration-fast) var(--mw-ease);
}
.mw-page-header .breadcrumb a:hover,
.mw-page-header .woocommerce-breadcrumb a:hover,
.mw-page-header .sober-breadcrumbs a:hover { color: var(--mw-black); }
.mw-page-header .breadcrumb .delimiter,
.mw-page-header .woocommerce-breadcrumb .delimiter,
.mw-page-header .sober-breadcrumbs .delimiter {
  margin: 0 var(--mw-space-2);
  color: var(--mw-gray-400);
}

.mw-page-header__title {
  margin: 0;
  font-size: var(--mw-fs-3xl);
  font-weight: var(--mw-fw-medium);
  line-height: var(--mw-lh-tight);
  letter-spacing: var(--mw-ls-tight);
  color: var(--mw-text);
  text-align: left;
  /* sober sets .page-title to 9rem; our class is different so that
     selector doesn't match — leaving this rule tight on purpose. */
}
@media (min-width: 1024px) {
  .mw-page-header__title { font-size: var(--mw-fs-4xl); }
}

/* Заголовок категории + shop-toolbar в одной строке (десктоп).
   JS в redesign.js на shop/category страницах перемещает .shop-toolbar
   из своего контейнера в .mw-page-header__row, дальше flex выравнивает
   их горизонтально. На мобиле — wrap, тулбар уезжает на следующую строку. */
.mw-page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mw-space-4);
  margin: 0;
}
.mw-page-header__row .mw-page-header__title { flex: 0 1 auto; margin: 0; }
.mw-page-header__row .shop-toolbar {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  .mw-page-header__row { gap: var(--mw-space-3); }
  .mw-page-header__row .shop-toolbar { width: 100%; }
}

/* Тулбар каталога на мобильных: распределяем по ширине, dropdown сортировки
   позиционируем full-width, чтобы текст опций не обрезался слева. */
@media (max-width: 640px) {
  .woocommerce .shop-toolbar .toolbar-control,
  .woocommerce-page .shop-toolbar .toolbar-control {
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: var(--mw-space-3) !important;
  }
  .woocommerce .shop-toolbar .toolbar-control .product-size {
    display: none !important;  /* прячем grid-switcher на узких экранах */
  }
  /* select2-dropdown сортировки: на мобиле резервируем full-width
     с отступами от краёв, чтобы текст опций не обрезался. */
  .select2-container--open.select2-container--below .select2-dropdown,
  .select2-container--open .select2-dropdown {
    left: var(--mw-space-3) !important;
    right: var(--mw-space-3) !important;
    width: calc(100vw - 2 * var(--mw-space-3)) !important;
    max-width: calc(100vw - 2 * var(--mw-space-3)) !important;
  }
}

/* Defensive: if anywhere the legacy .page-header still renders (e.g. an
   unusual sober page-template not routed through template-parts/page-header),
   tame it visually so it doesn't scream at the user. */
.page-header {
  padding: var(--mw-space-10) 0 var(--mw-space-8) !important;
  background: var(--mw-white) !important;
  text-align: left !important;
}
.page-header .page-title {
  font-size: var(--mw-fs-3xl) !important;
  font-weight: var(--mw-fw-medium) !important;
  line-height: var(--mw-lh-tight) !important;
  color: var(--mw-text) !important;
}
@media (min-width: 1024px) {
  .page-header .page-title { font-size: var(--mw-fs-4xl) !important; }
}

/* ─── Hero ────────────────────────────────────────────────── */
.mw-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--mw-gray-100);
  margin-top: 0;
}
/* Если в ACF не залита hero-картинка — рендерим тёмный градиент-фоллбек,
   чтобы текст и CTA были читаемы. Раньше тут был хардкод-fallback на
   stage.miaowser.com → у клиентов на проде это давало HTTP basic auth попап. */
.mw-hero--no-image {
  background: linear-gradient(135deg, var(--mw-gray-800) 0%, var(--mw-black) 100%);
}
.mw-hero--no-image .mw-hero__overlay { display: none; }

.mw-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mw-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mw-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}
.mw-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mw-container);
  margin: 0 auto;
  padding: var(--mw-space-20) var(--mw-gutter) var(--mw-space-16);
  color: var(--mw-white);
  text-align: center;
}
@media (max-width: 767px) {
  .mw-hero__inner { padding: var(--mw-space-16) var(--mw-space-5) var(--mw-space-12); }
}
.mw-hero .mw-hero__title {
  color: #ffffff;
  font-size: clamp(36px, 6vw, var(--mw-fs-6xl));
  line-height: var(--mw-lh-tight);
  font-weight: var(--mw-fw-medium);
  letter-spacing: var(--mw-ls-tight);
  margin: 0 0 var(--mw-space-5);
  text-wrap: balance;
}
.mw-hero__subtitle {
  font-size: var(--mw-fs-lg);
  font-weight: var(--mw-fw-regular);
  margin: 0 0 var(--mw-space-8);
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: var(--mw-ls-wide);
}
@media (max-width: 767px) {
  .mw-hero__subtitle { font-size: var(--mw-fs-md); margin-bottom: var(--mw-space-6); }
}
.mw-hero__cta { min-width: 220px; }

/* ─── Category grid ───────────────────────────────────────── */
.mw-categories { padding: var(--mw-space-20) 0; }
@media (max-width: 767px) { .mw-categories { padding: var(--mw-space-12) 0; } }

/* Optional block heading (LV-style centered title above grid) */
.mw-categories__head {
  max-width: var(--mw-container-wide);
  margin: 0 auto var(--mw-space-12);
  padding: 0 var(--mw-gutter);
  text-align: center;
}
@media (max-width: 767px) {
  .mw-categories__head { margin-bottom: var(--mw-space-8); }
}
.mw-categories__title {
  margin: 0;
  font-size: var(--mw-fs-3xl);
  font-weight: var(--mw-fw-regular);
  line-height: var(--mw-lh-snug);
  letter-spacing: var(--mw-ls-wide);
  color: var(--mw-text);
  text-transform: uppercase;
}
@media (min-width: 1024px) {
  .mw-categories__title { font-size: var(--mw-fs-4xl); }
}
.mw-categories__title a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--mw-duration-fast) var(--mw-ease);
}
.mw-categories__title a:hover { opacity: 0.7; }

.mw-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mw-space-6);
  max-width: var(--mw-container-wide);
  margin: 0 auto;
  padding: 0 var(--mw-gutter);
}
@media (max-width: 1023px) { .mw-categories__grid { grid-template-columns: repeat(3, 1fr); gap: var(--mw-space-4); } }
@media (max-width: 767px)  { .mw-categories__grid { grid-template-columns: repeat(2, 1fr); gap: var(--mw-space-3); padding: 0 var(--mw-space-4); } }

.mw-category-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  /* transparent background — LV-style, let product photos speak */
}
.mw-category-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.mw-category-card__media img,
.mw-category-card__media .mw-category-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mw-duration-slower) var(--mw-ease);
}
.mw-category-card:hover .mw-category-card__media img { transform: scale(1.06); }

.mw-category-card__title {
  margin: var(--mw-space-4) 0 var(--mw-space-1);
  font-size: var(--mw-fs-md);
  font-weight: var(--mw-fw-regular);
  line-height: 1.4;
  letter-spacing: var(--mw-ls-wide);
  text-transform: uppercase;
  text-align: left;
  color: var(--mw-text);
}
/* Когда карточка ведёт на категорию (а не на товар) — заголовок по центру.
   Сам класс .mw-category-card--term выставляется в template-parts/home/category-grid.php
   на основе url_to_postid()/term-detection. */
.mw-category-card--term .mw-category-card__title {
  text-align: center;
}
.mw-category-card__price {
  margin: 0;
  font-size: var(--mw-fs-md);
  font-weight: var(--mw-fw-regular);
  line-height: 1.4;
  color: var(--mw-text);
  text-align: left;
}
.mw-category-card__price del {
  color: var(--mw-gray-400);
  margin-right: var(--mw-space-2);
  font-weight: var(--mw-fw-regular);
}
.mw-category-card__price ins {
  text-decoration: none;
  color: var(--mw-text);
}
.mw-category-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mw-gray-100);
  color: var(--mw-text-muted);
  font-size: var(--mw-fs-sm);
  letter-spacing: var(--mw-ls-wider);
  text-transform: uppercase;
}

/* ─── Media divider ───────────────────────────────────────── */
.mw-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--mw-gray-100);
}
.mw-divider a,
.mw-divider .mw-divider__inner {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}
.mw-divider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mw-duration-slower) var(--mw-ease);
}
.mw-divider a:hover img { transform: scale(1.03); }
@media (max-width: 767px) {
  .mw-divider a,
  .mw-divider .mw-divider__inner { aspect-ratio: 4 / 5; }
}

/* ─── Reviews carousel ────────────────────────────────────── */
.mw-reviews {
  background: var(--mw-white);
  padding: var(--mw-space-20) 0;
}
@media (max-width: 767px) { .mw-reviews { padding: var(--mw-space-12) 0; } }

.mw-reviews__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--mw-space-10);
  text-align: center;
}
.mw-reviews__viewport {
  position: relative;
  max-width: var(--mw-container-wide);
  margin: 0 auto;
  padding: 0 var(--mw-gutter);
}
.mw-reviews__track {
  display: flex;
  gap: var(--mw-space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Сверху оставляем место под аватарку, которая вылезает за верх карточки. */
  padding: 64px 0 var(--mw-space-4);
}
.mw-reviews__track::-webkit-scrollbar { display: none; }

.mw-reviews__slide {
  flex: 0 0 calc((100% - var(--mw-space-6) * 3) / 4);
  scroll-snap-align: start;
  background: var(--mw-gray-50);
  padding: var(--mw-space-8);
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mw-space-3);
  min-height: 260px;
  text-align: center;
  color: var(--mw-black);
}
@media (max-width: 1200px) {
  .mw-reviews__slide { flex: 0 0 calc((100% - var(--mw-space-6) * 2) / 3); }
}
@media (max-width: 900px) {
  .mw-reviews__slide { flex: 0 0 calc((100% - var(--mw-space-6)) / 2); }
}
@media (max-width: 640px) {
  .mw-reviews__slide { flex: 0 0 80%; padding: var(--mw-space-6); }
}

/* Аватар: 128×128, по центру, вылезает за верх карточки на половину высоты. */
.mw-reviews__photo {
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  margin-top: -64px;
  margin-bottom: var(--mw-space-3);
  overflow: hidden;
  border-radius: var(--mw-radius-full);
  background: var(--mw-white);
  border: 4px solid var(--mw-white);
  box-shadow: var(--mw-shadow-md);
}
.mw-reviews__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Слайд без фото: аватарка не нужна, добавим небольшой отступ сверху,
   чтобы карточка не схлопывалась к верхней границе. */
.mw-reviews__slide:not(.mw-reviews__slide--with-photo) {
  padding-top: var(--mw-space-10);
}

.mw-reviews__quote {
  font-size: var(--mw-fs-md);
  line-height: var(--mw-lh-relaxed);
  color: var(--mw-black);
  margin: 0;
  flex: 1;
}

/* Имя + город — под аватаркой, чёрным. */
.mw-reviews__author {
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-semibold);
  letter-spacing: var(--mw-ls-wider);
  text-transform: uppercase;
  color: var(--mw-black);
  margin: 0;
}

.mw-reviews__nav {
  display: flex;
  justify-content: center;
  gap: var(--mw-space-3);
  margin-top: var(--mw-space-8);
}
.mw-reviews__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mw-gray-100);
  border: 0;
  color: var(--mw-black);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--mw-duration-fast) var(--mw-ease),
              color var(--mw-duration-fast) var(--mw-ease);
}
.mw-reviews__btn:hover { background: var(--mw-black); color: var(--mw-white); }
.mw-reviews__btn svg { width: 18px; height: 18px; stroke: currentColor; }
.mw-reviews__btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ─── Cart quantity +/- ergonomics on mobile ───────────────── */
/* sober renders SVG decrease/increase inside .quantity but the tap
   targets are tiny on touch screens. Make them 44×44 minimum and
   give the wrapper a clean LV-ish framed look. */
.woocommerce-cart-form .quantity,
.cart-item .quantity,
.mini_cart_item .quantity {
  display: inline-flex !important;
  align-items: center;
  border: var(--mw-border-thin) solid var(--mw-border);
  background: var(--mw-white);
  border-radius: 0;
  overflow: hidden;
}
.woocommerce-cart-form .quantity .decrease,
.woocommerce-cart-form .quantity .increase,
.cart-item .quantity .decrease,
.cart-item .quantity .increase,
.mini_cart_item .quantity .decrease,
.mini_cart_item .quantity .increase {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  transition: background-color var(--mw-duration-fast) var(--mw-ease);
}
.woocommerce-cart-form .quantity .decrease:hover,
.woocommerce-cart-form .quantity .increase:hover,
.cart-item .quantity .decrease:active,
.cart-item .quantity .increase:active {
  background: var(--mw-gray-100) !important;
}
.woocommerce-cart-form .quantity .decrease svg,
.woocommerce-cart-form .quantity .increase svg,
.cart-item .quantity .decrease svg,
.cart-item .quantity .increase svg {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--mw-black) !important;
  fill: var(--mw-black) !important;
}
.woocommerce-cart-form .quantity input.qty,
.cart-item .quantity input.qty,
.mini_cart_item .quantity input.qty,
.woocommerce-cart-form .quantity input[type="number"] {
  width: 48px !important;
  height: 44px !important;
  border: 0 !important;
  border-left: var(--mw-border-thin) solid var(--mw-border) !important;
  border-right: var(--mw-border-thin) solid var(--mw-border) !important;
  background: transparent !important;
  text-align: center !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-medium) !important;
  color: var(--mw-black) !important;
  margin: 0 !important;
  padding: 0 !important;
  -moz-appearance: textfield;
  appearance: textfield;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Hide native browser spinners — we have our own */
.woocommerce-cart-form .quantity input::-webkit-outer-spin-button,
.woocommerce-cart-form .quantity input::-webkit-inner-spin-button,
.cart-item .quantity input::-webkit-outer-spin-button,
.cart-item .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Mobile cart layout (responsive table) — give the qty cell room */
@media (max-width: 767px) {
  .woocommerce-cart-form table.cart .product-quantity,
  .woocommerce-cart-form table.cart .product-quantity::before {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: var(--mw-space-3) 0 !important;
  }
  .woocommerce-cart-form .quantity {
    width: auto;
  }
}

/* "Очистить корзину" — кнопка рядом с update cart, секондари-стиль
   (белый фон + чёрный бордер 2px). При hover — инверсия. */
.woocommerce-cart .actions .mw-cart-clear,
.woocommerce-cart-form__actions .mw-cart-clear,
a.mw-cart-clear {
  display: inline-block !important;
  background: var(--mw-white) !important;
  color: var(--mw-black) !important;
  border: 2px solid var(--mw-black) !important;
  border-radius: 0 !important;
  padding: 14px var(--mw-space-6) !important;
  margin-left: var(--mw-space-3) !important;
  font-family: var(--mw-font-sans) !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-medium) !important;
  letter-spacing: var(--mw-ls-wide) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--mw-duration-fast) var(--mw-ease),
              color var(--mw-duration-fast) var(--mw-ease) !important;
}
a.mw-cart-clear:hover {
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
}
@media (max-width: 640px) {
  a.mw-cart-clear {
    display: block !important;
    width: 100% !important;
    margin: var(--mw-space-3) 0 0 !important;
    text-align: center !important;
  }
}

/* Пустая корзина — наш кастомный шаблон. */
.mw-cart-empty {
  max-width: var(--mw-container-narrow);
  margin: var(--mw-space-12) auto var(--mw-space-16);
  padding: var(--mw-space-10) var(--mw-space-6);
  text-align: center;
}
.mw-cart-empty__title {
  margin: 0 0 var(--mw-space-3);
  font-size: var(--mw-fs-3xl);
  font-weight: var(--mw-fw-medium);
  letter-spacing: var(--mw-ls-wide);
  text-transform: uppercase;
  color: var(--mw-black);
}
.mw-cart-empty__lead {
  margin: 0 0 var(--mw-space-8);
  font-size: var(--mw-fs-md);
  line-height: var(--mw-lh-relaxed);
  color: var(--mw-text-muted);
}
.mw-cart-empty__cta {
  min-width: 220px;
}
/* Скрываем стандартное сообщение «Your cart is currently empty!» от WC,
   которое на ряде хостингов/без .mo всё ещё может пробиваться. */
.cart-empty.woocommerce-info,
.return-to-shop {
  display: none !important;
}
.woocommerce-cart .woocommerce > .cart-empty,
.woocommerce-cart .woocommerce > .return-to-shop { display: none !important; }

/* ─── Checkout — defensive: ensure shipping/PVZ controls are visible
       on mobile. Plugin cdekdelivery may hide them via inline styles
       until address is filled — counter that. */
@media (max-width: 900px) {
  .woocommerce-checkout .shipping_method,
  .woocommerce-checkout #shipping_method,
  .woocommerce-checkout .cdek-pvz-list,
  .woocommerce-checkout .cdek-shipping-block,
  .woocommerce-checkout .cdek-map,
  .woocommerce-checkout .cdek-pvz-pickup,
  .woocommerce-checkout #cdekdelivery_pvz,
  .woocommerce-checkout [class*="cdek-"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    pointer-events: auto !important;
  }
}

/* ─── WooCommerce product loop card ──────────────────────────
   Shop/category listing card. sober decorates these with grey plates,
   coloured ribbons and aggressive hover buttons — we strip all that
   down to image / title / price / swatches. */

/* Force CSS grid on shop loop so cards have proper horizontal gaps
   instead of WC's default float:left + margin-right approach which
   can leave them flush against each other. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--mw-space-8) !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
@media (max-width: 1023px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--mw-space-6) !important;
  }
}
@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mw-space-4) !important;
  }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.products .product {
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
  margin: 0 0 var(--mw-space-4) !important;
  width: auto !important;
  float: none !important;
  border: 0 !important;
  box-shadow: none !important;
  clear: none !important;
}

.woocommerce ul.products li.product a {
  text-decoration: none;
}

/* Thumbnail wrapper */
.products .product .product-thumbnail,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link--image,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  position: relative;
  display: block;
  overflow: hidden;
  background: transparent;
}

.products .product img,
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: auto;
  display: block;
  margin: 0 !important;
  transition: opacity var(--mw-duration-slower) var(--mw-ease),
              transform var(--mw-duration-slower) var(--mw-ease);
}

/* Hover swap — sober prints <img class="product-hover-image"> via
   show_product_loop_hover_thumbnail(). We stack it on top and fade it in. */
.products .product .product-hover-image,
.woocommerce ul.products li.product .product-hover-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 0;
  transform: none !important;
  transition: opacity var(--mw-duration-slower) var(--mw-ease);
}
.products .product:hover .product-hover-image,
.woocommerce ul.products li.product:hover .product-hover-image {
  opacity: 1;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.products .product .woocommerce-loop-product__title,
.products .product h2.woocommerce-loop-product__title,
.products .product h3.woocommerce-loop-product__title {
  margin: var(--mw-space-4) 0 var(--mw-space-1) !important;
  padding: 0 !important;
  font-size: var(--mw-fs-md) !important;
  font-weight: var(--mw-fw-regular) !important;
  line-height: 1.4 !important;
  color: var(--mw-text) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wide) !important;
  text-align: left !important;
  /* Длинные слова типа "ЛЬНЯНОЕ"/"АСИММЕТРИЧНОЕ" не должны рваться по букве,
     но и не должны раздувать карточку — переносим по словам и hyphenate
     при острой нехватке места. */
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
@media (max-width: 767px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .products .product .woocommerce-loop-product__title {
    font-size: var(--mw-fs-xs) !important;
    letter-spacing: var(--mw-ls-normal) !important;
    line-height: 1.3 !important;
  }
}

/* Price */
.woocommerce ul.products li.product .price,
.products .product .price {
  margin: 0 !important;
  font-size: var(--mw-fs-md) !important;
  font-weight: var(--mw-fw-regular) !important;
  line-height: 1.4 !important;
  color: var(--mw-text) !important;
  text-align: left !important;
}
.products .product .price del,
.woocommerce ul.products li.product .price del {
  color: var(--mw-gray-400) !important;
  margin-right: var(--mw-space-2);
  opacity: 1 !important;
}
.products .product .price ins,
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  background: transparent !important;
  color: var(--mw-text) !important;
  font-weight: inherit !important;
}

/* Badges — black, flat, top-left, stack vertically when multiple */
.products .product .woocommerce-badges,
.products .product .ribbons {
  position: absolute !important;
  top: var(--mw-space-3) !important;
  left: var(--mw-space-3) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent !important;
}

.products .product .woocommerce-badge,
.products .product .ribbon,
.products .product .onsale,
.products .product .newness,
.products .product .featured,
.products .product .sold-out {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: inline-block !important;
  background: var(--mw-true-black) !important;
  color: var(--mw-white) !important;
  padding: 5px 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: var(--mw-fs-xxs) !important;
  font-weight: var(--mw-fw-medium) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-widest) !important;
  text-align: center !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Soft grey for "soldout" so it doesn't fight the sale badge */
.products .product .sold-out { background: var(--mw-gray-600) !important; }

/* Color swatches on loop (child theme prints .colswit4 via
   add_variation_color_swit4_photos()). Original styles it absolutely
   with white bg — we override to a simple horizontal row of small dots. */
.products .product .colswit4,
.colswit4 {
  position: static !important;
  display: flex !important;
  gap: var(--mw-space-2) !important;
  margin: var(--mw-space-2) 0 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: left !important;
  background: transparent !important;
  justify-content: flex-start !important;
}
.products .product .colswit4 span,
.colswit4 span {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  border-radius: var(--mw-radius-full) !important;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--mw-border) !important;
  transition: transform var(--mw-duration-fast) var(--mw-ease);
}
.products .product .colswit4 span:hover,
.colswit4 span:hover {
  transform: scale(1.2);
}

/* Hide the add-to-cart button from sober's loop (we want a pure LV-style
   tile — click goes to product page). */
.products .product .add_to_cart_button,
.products .product .ajax_add_to_cart,
.products .product .button.product_type_simple,
.products .product .button.product_type_variable,
.products .product .button.product_type_grouped,
.products .product .button.product_type_external,
.products .product .added_to_cart {
  display: none !important;
}

/* Sober's various icons/quickview/etc on the thumbnail — drop them */
.products .product .yith-wcqv-button,
.products .product .quick-view-btn,
.products .product .quickview-button,
.products .product .sober-wishlist-button,
.products .product .product-loop-buttons {
  display: none !important;
}

/* Shop toolbar (sober renders filters/sort/grid-switch) — keep minimal */
.woocommerce .shop-toolbar,
.woocommerce-page .shop-toolbar {
  padding: 0 var(--mw-space-8);
  margin: 0 0 var(--mw-space-8);
  border: 0;
}
@media (max-width: 767px) {
  .woocommerce .shop-toolbar { padding: 0 var(--mw-space-5); }
}

/* Sort + filter: один уровень, одинаковый шрифт.
   sober ставит select2 на orderby и .toggle-filter рядом, но они выводятся
   с разными font-size/cвет/паддингом → визуально на разных уровнях.
   Здесь приводим их к одному виду (правка после созвона 28.04). */
.woocommerce .shop-toolbar .toolbar-control,
.woocommerce-page .shop-toolbar .toolbar-control {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--mw-space-6) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}
.woocommerce .shop-toolbar .toolbar-control > li,
.woocommerce-page .shop-toolbar .toolbar-control > li {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Сортировка: убираем sober'овский серый цвет и тонкий шрифт,
   делаем всё в LV-стиле — мелким капсом. */
.woocommerce .shop-toolbar .woocommerce-ordering,
.woocommerce-page .shop-toolbar .woocommerce-ordering {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.woocommerce .shop-toolbar .woocommerce-ordering select,
.woocommerce .shop-toolbar .woocommerce-ordering .select2-selection,
.woocommerce .shop-toolbar .woocommerce-ordering .select2-selection--single,
.woocommerce .shop-toolbar .woocommerce-ordering .select2-selection__rendered {
  font-family: var(--mw-font-sans) !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-medium) !important;
  letter-spacing: var(--mw-ls-wide) !important;
  text-transform: uppercase !important;
  color: var(--mw-black) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 24px 0 0 !important;
  line-height: 1 !important;
  height: auto !important;
}
.woocommerce .shop-toolbar .woocommerce-ordering .select2-selection__arrow {
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
}

/* "Фильтр" link: тот же шрифт/размер/цвет, что и сортировка. */
.woocommerce .shop-toolbar .toolbar-control .filter,
.woocommerce-page .shop-toolbar .toolbar-control .filter {
  position: relative;
}
.woocommerce .shop-toolbar .toolbar-control .filter > a,
.woocommerce .shop-toolbar .toolbar-control .filter .toggle-filter,
.woocommerce-page .shop-toolbar .toolbar-control .filter .toggle-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--mw-space-2) !important;
  font-family: var(--mw-font-sans) !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-medium) !important;
  letter-spacing: var(--mw-ls-wide) !important;
  text-transform: uppercase !important;
  color: var(--mw-black) !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  text-decoration: none !important;
}
.woocommerce .shop-toolbar .toolbar-control .filter svg,
.woocommerce-page .shop-toolbar .toolbar-control .filter svg {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  vertical-align: middle !important;
}
.woocommerce .shop-toolbar .toolbar-control .filter > a:hover,
.woocommerce .shop-toolbar .toolbar-control .filter .toggle-filter:hover {
  color: var(--mw-gray-600) !important;
}

/* Грид-свитчер: оставляем, но прижимаем визуально к остальным контролам. */
.woocommerce .shop-toolbar .toolbar-control .product-size {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--mw-space-2) !important;
}
.woocommerce .shop-toolbar .toolbar-control .product-size a {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
}

/* ─── Filter popup (открывается по клику на "Фильтр") ─────── */
/* sober рендерит .filter-widgets как абсолютно-позиционированную панель
   справа от линка. Делаем её LV-style: чёрная рамка, без теней, аккуратные
   отступы, шапка с заголовком "Фильтр" + крестик. */
.woocommerce .shop-toolbar .filter-widgets,
.woocommerce-page .shop-toolbar .filter-widgets {
  position: absolute !important;
  top: calc(100% + var(--mw-space-3)) !important;
  right: 0 !important;
  min-width: 360px !important;
  max-width: 92vw !important;
  padding: var(--mw-space-6) var(--mw-space-6) var(--mw-space-5) !important;
  background: var(--mw-white) !important;
  border: var(--mw-border-thin) solid var(--mw-border) !important;
  box-shadow: var(--mw-shadow-md) !important;
  z-index: var(--mw-z-overlay) !important;
}
.woocommerce .shop-toolbar .filter-widgets .close,
.woocommerce-page .shop-toolbar .filter-widgets .close {
  position: absolute !important;
  top: var(--mw-space-3) !important;
  right: var(--mw-space-3) !important;
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--mw-black) !important;
}
.woocommerce .shop-toolbar .filter-widgets .close svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
.woocommerce .shop-toolbar .filter-widgets .widget-title,
.woocommerce .shop-toolbar .filter-widgets h3,
.woocommerce .shop-toolbar .filter-widgets h4 {
  margin: 0 0 var(--mw-space-3) !important;
  font-family: var(--mw-font-sans) !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-semibold) !important;
  letter-spacing: var(--mw-ls-wide) !important;
  text-transform: uppercase !important;
  color: var(--mw-black) !important;
}
.woocommerce .shop-toolbar .filter-widgets ul,
.woocommerce .shop-toolbar .filter-widgets li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce .shop-toolbar .filter-widgets ul + h3,
.woocommerce .shop-toolbar .filter-widgets ul + h4,
.woocommerce .shop-toolbar .filter-widgets ul + .widget-title {
  margin-top: var(--mw-space-5) !important;
}
/* Pill-стиль только для НЕ цветных фильтров. Цветовые свотчи (UL имеет класс
   .is-color-swatches, а LI — .is-color-swatch / .is-color-swatch-li) рендерятся
   с inline `background-color:#xxxxxx` на <a> — нельзя его перебивать
   нашим серым фоном, иначе все кружки одинаковые серые (что и было). */
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list:not(.is-color-swatches) li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--mw-space-2) !important;
  padding: 10px 16px !important;
  font-size: var(--mw-fs-sm) !important;
  color: var(--mw-text) !important;
  background: var(--mw-gray-100) !important;
  border-radius: var(--mw-radius-full) !important;
  text-decoration: none !important;
  border: 0 !important;
  transition: background-color var(--mw-duration-fast) var(--mw-ease),
              color var(--mw-duration-fast) var(--mw-ease) !important;
}
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list:not(.is-color-swatches) li > a:hover {
  background: var(--mw-gray-200) !important;
  color: var(--mw-black) !important;
}

/* Активный (выбранный) обычный фильтр — чёрная пилюля, белый текст, без тени. */
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list:not(.is-color-swatches) li.active > a,
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list:not(.is-color-swatches) li.active > a:hover {
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
  box-shadow: none !important;
}
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list:not(.is-color-swatches) li.active {
  background: transparent !important; /* убираем серую подложку, что woofill вешает на LI */
  box-shadow: none !important;
}

/* woofill: убираем дефолтные бордеры у элементов фильтра, кроме color-swatches. */
.woofill-filter-group:not(:has(.is-color-swatches)) li {
  border: none !important;
}

/* Все active-LI без тени — на всякий случай (color swatches тоже ловит). */
ul.woofill-filter-list li.active {
  box-shadow: none !important;
}

/* Цветовые свотчи: подкручиваем размер чтобы было видно (woofill ставит 28px),
   и оставляем inline-цвет нетронутым. */
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list.is-color-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--mw-space-2) !important;
}
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list.is-color-swatches li {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: var(--mw-border-thin) solid var(--mw-border) !important;
  border-radius: var(--mw-radius-full) !important;
  overflow: hidden !important;
}
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list.is-color-swatches li > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--mw-radius-full) !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  /* НЕ ставим background — он приходит inline-стилем от woofill. */
}
.woocommerce .shop-toolbar .filter-widgets ul.woofill-filter-list.is-color-swatches li.active {
  border: 2px solid var(--mw-black) !important;
  transform: none !important;
}

/* Reset-кнопка: "Очистить" → белый фон, чёрный текст, чёрная рамка 2px,
   квадратный (LV-style), не пилюля. */
.woocommerce .shop-toolbar .filter-widgets a.woofill-reset-button,
.woocommerce .shop-toolbar .filter-widgets a.button.woofill-reset-button {
  display: inline-block !important;
  background: var(--mw-white) !important;
  color: var(--mw-black) !important;
  border: 2px solid var(--mw-black) !important;
  border-radius: 0 !important;
  padding: 10px 20px !important;
  margin-top: var(--mw-space-4) !important;
  font-family: var(--mw-font-sans) !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-medium) !important;
  line-height: 1 !important;
  letter-spacing: var(--mw-ls-wide) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  min-width: 0 !important;
  transition: background-color var(--mw-duration-fast) var(--mw-ease),
              color var(--mw-duration-fast) var(--mw-ease) !important;
}
.woocommerce .shop-toolbar .filter-widgets a.woofill-reset-button:hover,
.woocommerce .shop-toolbar .filter-widgets a.button.woofill-reset-button:hover {
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
}
@media (max-width: 640px) {
  .woocommerce .shop-toolbar .filter-widgets,
  .woocommerce-page .shop-toolbar .filter-widgets {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 0 !important;
    border-top: var(--mw-border-thin) solid var(--mw-border) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
}

/* Shop content container — flush with page header (same gutter) */
.woocommerce .site-content,
.woocommerce-page .site-content {
  padding: 0 !important;
}
.woocommerce ul.products,
.woocommerce-page ul.products {
  padding-left: var(--mw-space-8) !important;
  padding-right: var(--mw-space-8) !important;
}
@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    padding-left: var(--mw-space-5) !important;
    padding-right: var(--mw-space-5) !important;
  }
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
  border: 0 !important;
  margin: var(--mw-space-10) 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers {
  color: var(--mw-text-muted);
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-regular);
  padding: var(--mw-space-3) var(--mw-space-4);
  background: transparent;
  border: 0;
  transition: color var(--mw-duration-fast) var(--mw-ease);
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li .page-numbers:hover {
  color: var(--mw-black) !important;
  background: transparent !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ─── Single product page — LV split layout ────────────────── */

/* Page gutter — same 32px edge alignment as listing + page header */
.single-product #content.site-content { padding: 0 !important; }
.single-product div.product {
  padding: 0 var(--mw-space-8);
  max-width: var(--mw-container-wide);
  margin: 0 auto;
}
@media (max-width: 767px) {
  .single-product div.product { padding: 0 var(--mw-space-4); }
}

/* Force LV split layout by making .product a grid and using
   `display: contents` on .product-summary so its children (gallery +
   summary) become grid items directly, sidestepping every width/float
   rule sober has on .product-summary / div.images / div.summary. */
.woocommerce.single-product div.product,
.single-product.woocommerce div.product,
.single-product div.product {
  display: grid !important;
  grid-template-columns: minmax(0, 60%) minmax(0, 40%) !important;
  column-gap: var(--mw-space-12) !important;
  row-gap: var(--mw-space-12) !important;
  align-items: start !important;
  float: none !important;
}

/* .product-summary passes its children through to the grid */
.woocommerce.single-product div.product .product-summary,
.single-product.woocommerce div.product .product-summary,
.single-product div.product .product-summary {
  display: contents !important;
}

/* Gallery → column 1 */
.woocommerce.single-product div.product div.images,
.woocommerce.single-product div.product .woocommerce-product-gallery,
.single-product.woocommerce div.product div.images,
.single-product div.product div.images {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
}

/* Summary → column 2 */
.woocommerce.single-product div.product div.summary,
.woocommerce.single-product div.product .summary.entry-summary,
.single-product.woocommerce div.product div.summary,
.single-product div.product div.summary {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Everything else (tabs, related, upsells, toolbar...) spans both
   columns and sits below the 60/40 row. */
.woocommerce.single-product div.product > .woocommerce-tabs,
.woocommerce.single-product div.product > .related,
.woocommerce.single-product div.product > .upsells,
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .product-toolbar {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Stack on tablet / mobile.
   Расширяем брейкпоинт до 1024px и переключаем на чистый block-layout
   (не grid), чтобы не было шансов на 2-колонки даже если parent grid
   где-то отрабатывает иначе. Заодно чиним 50%-floats от sober. */
@media (max-width: 1024px) {
  .woocommerce.single-product div.product,
  .single-product.woocommerce div.product,
  .single-product div.product {
    display: block !important;
    grid-template-columns: 1fr !important;
    row-gap: var(--mw-space-8) !important;
    column-gap: 0 !important;
  }
  .woocommerce.single-product div.product .product-summary,
  .single-product div.product .product-summary {
    display: block !important;  /* было: contents, на мобиле возвращаем block */
    width: 100% !important;
  }
  .woocommerce.single-product div.product div.images,
  .woocommerce.single-product div.product div.summary,
  .woocommerce.single-product div.product .woocommerce-product-gallery,
  .single-product div.product div.images,
  .single-product div.product div.summary,
  .single-product div.product .woocommerce-product-gallery {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 var(--mw-space-6) !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .woocommerce.single-product div.product > .woocommerce-tabs,
  .woocommerce.single-product div.product > .related,
  .woocommerce.single-product div.product > .upsells,
  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .related,
  .single-product div.product > .upsells,
  .single-product div.product > .product-toolbar {
    display: block !important;
    width: 100% !important;
    grid-column: auto !important;
    margin: 0 !important;
  }
  /* Заголовок продукта — нормальный шрифт, не вертикальный */
  .single-product div.product .product_title,
  .woocommerce div.product .product_title {
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Nuke sober's 100vw breakout on layout-style-5/6 (just in case) */
.woocommerce div.product.layout-style-5 .product-summary,
.woocommerce div.product.layout-style-6 .product-summary {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  left: auto !important;
}
.woocommerce div.product.layout-style-5 div.images .woocommerce-product-gallery__slider,
.woocommerce div.product.layout-style-6 div.images .woocommerce-product-gallery__slider {
  width: 100% !important;
}

/* Kill layout-style-2 left-padding on summary (200px left) that would
   push content off-grid */
.woocommerce.single-product div.product.layout-style-1 div.summary,
.woocommerce.single-product div.product.layout-style-2 div.summary,
.woocommerce.single-product div.product.layout-style-3 div.summary,
.woocommerce.single-product div.product.layout-style-4 div.summary,
.woocommerce.single-product div.product.layout-style-5 div.summary,
.woocommerce.single-product div.product.layout-style-6 div.summary {
  padding: 0 !important;
}

/* (Thumbnails strip position for layout-style-2 is defined below
   — flipped to the right side next to .flex-control-thumbs section.) */

/* Hide sober's product toolbar (prev/next + breadcrumb) — the compact
   page-header already shows breadcrumbs; prev/next is visual noise. */
.single-product .product-toolbar { display: none !important; }

/* Title */
.single-product div.product .summary .product_title {
  margin: 0 0 var(--mw-space-4) !important;
  font-size: var(--mw-fs-3xl) !important;
  font-weight: var(--mw-fw-regular) !important;
  line-height: var(--mw-lh-tight) !important;
  letter-spacing: var(--mw-ls-tight) !important;
  color: var(--mw-text) !important;
}
@media (min-width: 1024px) {
  .single-product div.product .summary .product_title {
    font-size: var(--mw-fs-4xl) !important;
  }
}

/* Price */
.single-product div.product .summary > .price,
.single-product div.product .summary p.price {
  margin: 0 0 var(--mw-space-6) !important;
  font-size: var(--mw-fs-xl) !important;
  font-weight: var(--mw-fw-regular) !important;
  color: var(--mw-text) !important;
  line-height: 1.4 !important;
}
.single-product div.product .summary .price del {
  color: var(--mw-gray-400) !important;
  margin-right: var(--mw-space-3);
  opacity: 1 !important;
  font-weight: var(--mw-fw-regular) !important;
}
.single-product div.product .summary .price ins {
  text-decoration: none !important;
  background: transparent !important;
  color: var(--mw-text) !important;
  font-weight: inherit !important;
}

/* Short description */
.single-product div.product .woocommerce-product-details__short-description {
  margin: 0 0 var(--mw-space-8);
  font-size: var(--mw-fs-md);
  line-height: var(--mw-lh-normal);
  color: var(--mw-text);
}
.single-product div.product .woocommerce-product-details__short-description p {
  margin: 0 0 var(--mw-space-3);
}

/* Rating — keep subtle */
.single-product div.product .woocommerce-product-rating {
  margin: 0 0 var(--mw-space-4);
  font-size: var(--mw-fs-sm);
  color: var(--mw-text-muted);
}

/* Ribbons on single — black, flat, anchored top-left of the gallery
   image (not div.product) so they don't drift into the page padding. */
.single-product div.product { position: relative !important; }

.single-product div.product .woocommerce-badges,
.single-product div.product .ribbons,
.single-product div.product > .ribbons,
.woocommerce.single-product div.product.layout-style-2 .ribbons {
  position: absolute !important;
  top: var(--mw-space-3) !important;
  left: 32px !important;
  z-index: 5;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  background: transparent !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Individual badge styling on single-product page. Beat sober's
   `.woocommerce .ribbons .onsale|.newness|.featured` (0,3,0) and
   `.woocommerce ul.products li.product .onsale` (0,3,2) by using
   higher specificity (compound class + descendant + class) and
   !important on the colour. */
.woocommerce.single-product .ribbons .woocommerce-badge,
.woocommerce.single-product .ribbons .ribbon,
.woocommerce.single-product .ribbons .onsale,
.woocommerce.single-product .ribbons .newness,
.woocommerce.single-product .ribbons .featured,
.woocommerce.single-product .ribbons .sold-out,
.single-product .ribbons .woocommerce-badge,
.single-product .ribbons .ribbon,
.single-product .ribbons .onsale,
.single-product .ribbons .newness,
.single-product .ribbons .featured,
.single-product .ribbons .sold-out {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: inline-block !important;
  background: var(--mw-true-black) !important;
  background-color: var(--mw-true-black) !important;
  color: var(--mw-white) !important;
  padding: 5px 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: var(--mw-fs-xxs) !important;
  font-weight: var(--mw-fw-medium) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-widest) !important;
  text-align: center !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.woocommerce.single-product .ribbons .sold-out,
.single-product .ribbons .sold-out {
  background: var(--mw-gray-600) !important;
  background-color: var(--mw-gray-600) !important;
}

/* Meta / SKU / categories — quieter, left-aligned, no borders */
.single-product div.product .product_meta,
.woocommerce.single-product div.product .product_meta {
  margin-top: var(--mw-space-6) !important;
  padding-top: var(--mw-space-5) !important;
  padding-bottom: 0 !important;
  font-size: var(--mw-fs-xs) !important;
  color: var(--mw-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wider) !important;
  text-align: left !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
.single-product div.product .product_meta::before,
.single-product div.product .product_meta::after {
  display: none !important;
  content: none !important;
}
.single-product div.product .product_meta > span {
  display: block !important;
  margin-bottom: var(--mw-space-1);
  text-align: left !important;
}
.single-product div.product .product_meta a {
  color: var(--mw-text-muted) !important;
  text-decoration: none !important;
}
.single-product div.product .product_meta a:hover { color: var(--mw-black) !important; }

/* Variations form */
.single-product div.product form.cart {
  margin-bottom: var(--mw-space-6);
}
.single-product div.product .variations {
  width: 100%;
  margin: 0 0 var(--mw-space-6);
  border: 0;
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--mw-space-5);
}
.single-product div.product .variations .variable {
  display: block !important;
  flex: 1 1 0 !important;
  min-width: 140px !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Default attribute order: 1=size, 2=color, 3=other.
   Applied via .data-mw-attr-* classes set by redesign.js. */
.single-product div.product .variations .variable[data-mw-attr="size"]  { order: 1; }
.single-product div.product .variations .variable[data-mw-attr="color"] { order: 2; }
.single-product div.product .variations .variable[data-mw-attr="other"] { order: 3; }
.single-product div.product .variations .variable-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mw-space-3);
}
.single-product div.product .variations label {
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-semibold);
  letter-spacing: var(--mw-ls-wider);
  text-transform: uppercase;
  color: var(--mw-text);
  margin: 0;
}
/* "Очистить" — лишний шум (всего 2 атрибута). Скрываем агрессивно
   на любом уровне. */
.single-product .reset_variations,
.single-product a.reset_variations,
.single-product .variations .reset_variations,
.single-product .variations + .reset_variations,
.single-product .single_variation_wrap .reset_variations,
.single-product div.product form.cart .reset_variations,
.single-product .wcboost-variation-swatches__reset,
.single-product .wcboost-variation-swatches__clear {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Primary add-to-cart button */
.single-product div.product .single_add_to_cart_button,
.single-product div.product button.single_add_to_cart_button.button.alt {
  width: 100% !important;
  padding: 18px var(--mw-space-8) !important;
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wider) !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color var(--mw-duration-normal) var(--mw-ease) !important;
  box-shadow: none !important;
}
.single-product div.product .single_add_to_cart_button:hover,
.single-product div.product button.single_add_to_cart_button.button.alt:hover {
  background: var(--mw-gray-800) !important;
  color: var(--mw-white) !important;
}
/* Always render the add-to-cart button as visually active.
   When variations aren't picked WC adds .disabled / .wc-variation-selection-needed;
   instead of greying out we keep the button bold and let JS open
   .mw-pick-size modal on click — much clearer UX than a dead button. */
.single-product div.product .single_add_to_cart_button.disabled,
.single-product div.product .single_add_to_cart_button:disabled,
.single-product div.product .single_add_to_cart_button.wc-variation-selection-needed,
.single-product div.product button.single_add_to_cart_button.button.alt.disabled,
.single-product div.product button.single_add_to_cart_button.button.alt:disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
  pointer-events: auto !important;
}

/* Quantity input next to add-to-cart — hide, default 1 */
.single-product div.product form.cart .quantity {
  display: none !important;
}

/* The whole .single_variation block is hidden so picking a size never
   pushes the CTA downwards. WC still populates this div internally so
   ajax add-to-cart and the variation_id input keep working — we just
   don't render the visible price / description / availability text.
   The button label ("ПРЕДЗАКАЗ" / "В корзину") + .summary > .price
   already convey everything the user needs. */
.single-product .single_variation,
.single-product .woocommerce-variation,
.single-product .woocommerce-variation-availability,
.single-product .woocommerce-variation-description,
.single-product .woocommerce-variation-price,
.single-product .single_variation .stock,
.single-product .single_variation .availability,
.single-product p.stock.available-on-backorder,
.single-product p.stock.in-stock,
.single-product p.stock.out-of-stock {
  display: none !important;
}

/* Reserve a stable min-height on the variation wrapper so the
   "В корзину" button never reflows between states (selected /
   unselected / loading). */
.single-product div.product .single_variation_wrap {
  min-height: 0;
}
.single-product div.product .variations_button {
  margin-top: var(--mw-space-3);
}

/* Preorder button (pod_zakaz) — secondary style */
.single-product div.product form.cart .pod_zakaz {
  width: 100% !important;
  margin-top: var(--mw-space-3);
  padding: 16px var(--mw-space-8) !important;
  background: transparent !important;
  color: var(--mw-black) !important;
  border: var(--mw-border-thin) solid var(--mw-black) !important;
  border-radius: 0 !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wider) !important;
  cursor: pointer !important;
  transition: all var(--mw-duration-fast) var(--mw-ease) !important;
}
.single-product div.product form.cart .pod_zakaz:hover {
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
}

/* Gallery main slide — image fills the 60% column block via object-fit: cover.
   Scope strictly to images INSIDE __slider so the layout-style-2
   thumbnails strip (div.thumbnails) is left alone. Each thumbnail there
   also has class .woocommerce-product-gallery__image and was getting
   100vh height by mistake. */
.single-product .woocommerce-product-gallery__trigger { display: none !important; }
.single-product .woocommerce-product-gallery__slider .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__slider .woocommerce-product-gallery__image > a {
  display: block;
  position: relative;
  height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
.single-product .woocommerce-product-gallery__slider .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 120px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}
@media (max-width: 900px) {
  .single-product .woocommerce-product-gallery__slider .woocommerce-product-gallery__image,
  .single-product .woocommerce-product-gallery__slider .woocommerce-product-gallery__image > a {
    height: 80vh;
    max-height: 80vh;
  }
  .single-product .woocommerce-product-gallery__slider .woocommerce-product-gallery__image img {
    max-height: 80vh !important;
  }
}

/* layout-style-2 thumbnails strip — keep them small clickable previews,
   not viewport-tall blocks. */
.single-product div.product.layout-style-2 div.thumbnails .woocommerce-product-gallery__image,
.single-product div.product.layout-style-2 div.thumbnails .woocommerce-product-gallery__image > a {
  height: auto !important;
  max-height: none !important;
  display: block;
  margin-bottom: var(--mw-space-2);
  overflow: hidden;
}
.single-product div.product.layout-style-2 div.thumbnails .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  max-height: 90px !important;
  object-fit: cover !important;
  display: block;
  margin: 0 !important;
}

/* WC's jquery.zoom layer — make sure it's above thumbnails but captures
   the hover within image bounds. No `overflow:hidden` on the wrapper
   (that would clip the zoom overlay). */
.single-product .zoomImg {
  cursor: zoom-in;
}

.single-product .flex-control-thumbs {
  margin: var(--mw-space-3) 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: var(--mw-space-2);
  flex-wrap: wrap;
}
.single-product .flex-control-thumbs li {
  list-style: none;
  width: calc((100% - var(--mw-space-2) * 3) / 4) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Flip layout-style-2 thumbnails column to the RIGHT of main image.
   sober's default puts them absolute:left:0 with slider margin-left 100px;
   we mirror it: absolute:right:0 with slider margin-right 100px.
   Padding deliberately not overridden — sober's own value works for
   the small previews. */
.woocommerce.single-product div.product.layout-style-2 div.images div.thumbnails,
.single-product div.product.layout-style-2 div.images div.thumbnails {
  left: auto !important;
  right: 0 !important;
}
.woocommerce.single-product div.product.layout-style-2 div.images .woocommerce-product-gallery__slider,
.single-product div.product.layout-style-2 div.images .woocommerce-product-gallery__slider {
  margin-left: 0 !important;
  margin-right: 110px !important;
}

/* Mobile (≤1024px): слайд на всю ширину, без правого отступа под thumbnails
   (на мобиле thumbnails всё равно идут отдельной строкой ниже).
   Раньше десктопный margin-right:110px пробивался на мобилу → главный слайд
   шёл узким, справа торчал кусок следующего фото. */
@media (max-width: 1024px) {
  .woocommerce div.product div.images .woocommerce-product-gallery__slider,
  .woocommerce.single-product div.product.layout-style-2 div.images .woocommerce-product-gallery__slider,
  .single-product div.product.layout-style-2 div.images .woocommerce-product-gallery__slider,
  .single-product div.product div.images .woocommerce-product-gallery__slider {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* Ребро thumbnails на layout-style-2 не должно лежать absolute поверх
     слайда. Возвращаем static и нормальную ширину под слайдом. */
  .woocommerce.single-product div.product.layout-style-2 div.images div.thumbnails,
  .single-product div.product.layout-style-2 div.images div.thumbnails {
    position: static !important;
    width: 100% !important;
    margin-top: var(--mw-space-3) !important;
  }
  /* Картинка слайда — object-fit:cover (уже стоит выше), но дублируем
     специфическим селектором на случай если desktop-rule для height был
     в другом media-блоке. */
  .single-product .woocommerce-product-gallery__slider .woocommerce-product-gallery__image img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Same flip for layout-style-1 (if used) — horizontal thumbs to bottom.
   Actually layout-style-1 already puts thumbs below, just left alone. */

/* Related / upsells below, full-width of container */
.single-product .related.products,
.single-product .upsells.products {
  margin-top: var(--mw-space-16);
  padding-top: var(--mw-space-10);
  clear: both;
}
.single-product .related > h2,
.single-product .upsells > h2 {
  font-size: var(--mw-fs-3xl) !important;
  font-weight: var(--mw-fw-medium) !important;
  text-align: center !important;
  margin: 0 0 var(--mw-space-10) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mw-text) !important;
}

/* Related/upsell products grid — force gap-based layout so WC's
   default float:left + margin-right (which sober keeps) doesn't stack
   tiles flush together. */
.single-product .related ul.products,
.single-product .upsells ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--mw-space-8) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
}
@media (max-width: 1023px) {
  .single-product .related ul.products,
  .single-product .upsells ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--mw-space-6) !important;
  }
}
@media (max-width: 767px) {
  .single-product .related ul.products,
  .single-product .upsells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mw-space-4) !important;
  }
}
.single-product .related ul.products li.product,
.single-product .upsells ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}

/* Safety-net: if another plugin overrides the limit filter and returns
   5+ items, hide the overflow so we never get an orphan on row 2.
   Desktop 4 cols — hide 5th+. Tablet 3 cols — hide 4th+. Mobile 2 cols
   — keep everything (user can scroll). */
.single-product .related ul.products li.product:nth-child(n+5),
.single-product .upsells ul.products li.product:nth-child(n+5) {
  display: none !important;
}
@media (max-width: 1023px) {
  .single-product .related ul.products li.product:nth-child(n+4),
  .single-product .upsells ul.products li.product:nth-child(n+4) {
    display: none !important;
  }
  .single-product .related ul.products li.product:nth-child(-n+3),
  .single-product .upsells ul.products li.product:nth-child(-n+3) {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .single-product .related ul.products li.product:nth-child(n+5),
  .single-product .upsells ul.products li.product:nth-child(n+5) {
    display: none !important;
  }
  .single-product .related ul.products li.product:nth-child(-n+4),
  .single-product .upsells ul.products li.product:nth-child(-n+4) {
    display: block !important;
  }
}

/* Hide sober's share widget + "product_extra_content" — noise */
.single-product div.product .share,
.single-product div.product .social-share,
.single-product div.product .sober-product-share { display: none !important; }

/* Easy Product Bundles container — plugin injects an empty
   <div id="asnp_easy_product_bundle"> inside the .summary column and
   hydrates it with a React UI for picking bundle sub-products.
   Make sure our grid / display:contents doesn't hide or misposition it. */
.single-product #asnp_easy_product_bundle,
.single-product .asnp_easy_product_bundle {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: var(--mw-space-4) 0 !important;
  position: static !important;
  opacity: 1 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
.single-product .asnp_easy_product_bundle * {
  max-width: 100%;
  box-sizing: border-box;
}

/* ─── Variation swatches on single product (size + color) ── */

.single-product .wcboost-variation-swatches {
  margin: 0;
}

.single-product .wcboost-variation-swatches__wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--mw-space-2) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.single-product .wcboost-variation-swatches__wrapper > li {
  margin: 0 !important;
  padding: 0 10px !important;
  list-style: none;
  border: 0;
  background: transparent;
}

/* All variation swatches default to LV-style square text buttons. The
   color/image type is overridden separately below. This way it doesn't
   matter how wcboost is configured for each attribute — labels and
   ranges like "M-XXL" / "S-XL" / "XXS-M" always render as wide enough
   rectangles. */
.single-product .wcboost-variation-swatches__option {
  min-width: 56px !important;
  width: auto !important;
  height: 44px !important;
  padding: 0 var(--mw-space-4) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--mw-white) !important;
  border: var(--mw-border-thin) solid var(--mw-border) !important;
  color: var(--mw-text) !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-medium) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wide) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: border-color var(--mw-duration-fast) var(--mw-ease),
              background-color var(--mw-duration-fast) var(--mw-ease),
              color var(--mw-duration-fast) var(--mw-ease),
              opacity var(--mw-duration-fast) var(--mw-ease);
  box-shadow: none !important;
  user-select: none;
}
.single-product .wcboost-variation-swatches__option:hover {
  border-color: var(--mw-black) !important;
}
.single-product .wcboost-variation-swatches__option.selected,
.single-product .wcboost-variation-swatches__option[aria-checked="true"],
.single-product li.selected .wcboost-variation-swatches__option {
  background: var(--mw-black) !important;
  border-color: var(--mw-black) !important;
  color: var(--mw-white) !important;
}
.single-product .wcboost-variation-swatches__option.disabled,
.single-product .wcboost-variation-swatches__option[aria-disabled="true"] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  pointer-events: none;
}

/* Color/image swatches — round circles, no text.
   Применяем правила к двум типам селекторов, чтобы поймать любую разметку wcboost:
   1) UL имеет модификатор --color/--image (на уровне атрибута);
   2) LI/option имеет data-swatch-type на самом элементе.
   Раньше использовался только вариант 2, и LI с size-padding (0 10px) делало
   круг пилюлей (правка клиента 28.04). */
.single-product .wcboost-variation-swatches--color .wcboost-variation-swatches__option,
.single-product .wcboost-variation-swatches--image .wcboost-variation-swatches__option,
.single-product .wcboost-variation-swatches__option[data-swatch-type="color"],
.single-product .wcboost-variation-swatches__option[data-swatch-type="image"] {
  /* Высота совпадает с size-чипом (44px) — иначе цветной кружок прыгает
     по вертикали относительно ряда размеров. Ширина 44px → ровный круг.
     Текст внутри гасим уже не на опции (font-size:0 ломал tooltip и
     соседний span с названием цвета), а внутри `__name` ниже. */
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: var(--mw-radius-full) !important;
  border: var(--mw-border-thin) solid var(--mw-border) !important;
  background-clip: content-box !important;
  position: relative;
  text-transform: none !important;
  letter-spacing: 0 !important;
  vertical-align: middle !important;
}
/* На случай, если LI вокруг option имеет свою высоту/выравнивание —
   внутри color/image-обёртки центрируем содержимое по вертикали. */
.single-product .wcboost-variation-swatches--color .wcboost-variation-swatches__wrapper > li,
.single-product .wcboost-variation-swatches--image .wcboost-variation-swatches__wrapper > li {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
}
/* Гасим size-chip horizontal padding на LI внутри color/image-обёртки —
   именно от него круг превращался в пилюлю. */
.single-product .wcboost-variation-swatches--color .wcboost-variation-swatches__wrapper > li,
.single-product .wcboost-variation-swatches--image .wcboost-variation-swatches__wrapper > li {
  padding: 0 !important;
}
/* Подсказка клиента: в некоторых сборках wcboost видимый кружок цвета —
   это вложенный span .wcboost-variation-swatches__name с инлайн-фоном.
   Заполняем им родителя и гасим текст внутри. ВАЖНО: ограничиваем
   селектор только на __name ВНУТРИ опции/LI — иначе сюда попадает
   соседний `__name`/`selected-name`-элемент с названием выбранного
   цвета, и tooltip/текст «Бордовый» исчезает. */
.single-product .wcboost-variation-swatches--color .wcboost-variation-swatches__option .wcboost-variation-swatches__name,
.single-product .wcboost-variation-swatches--color .wcboost-variation-swatches__wrapper > li > .wcboost-variation-swatches__name,
.single-product .wcboost-variation-swatches--image .wcboost-variation-swatches__option .wcboost-variation-swatches__name,
.single-product .wcboost-variation-swatches--image .wcboost-variation-swatches__wrapper > li > .wcboost-variation-swatches__name {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  border-radius: var(--mw-radius-full) !important;
  background-clip: padding-box !important;
  background-size: cover !important;
  background-position: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
}

/* Отступ сверху у label/value в строке атрибута, чтобы не лип к
   предыдущему ряду свотчей. */
.woocommerce div.product form.cart .variations .label,
.woocommerce div.product form.cart .variations .value {
  margin-top: 16px;
}
.single-product .wcboost-variation-swatches--color .wcboost-variation-swatches__option.selected,
.single-product .wcboost-variation-swatches--color .wcboost-variation-swatches__option[aria-checked="true"],
.single-product .wcboost-variation-swatches--color li.selected .wcboost-variation-swatches__option,
.single-product .wcboost-variation-swatches__wrapper .wcboost-variation-swatches__option[data-swatch-type="color"].selected,
.single-product .wcboost-variation-swatches__wrapper .wcboost-variation-swatches__option[data-swatch-type="color"][aria-checked="true"] {
  border: var(--mw-border-thick) solid var(--mw-black) !important;
  box-shadow: 0 0 0 2px var(--mw-white) inset !important;
}

/* Fallback plain <select> (if product uses native WC dropdown) */
.single-product .variations select {
  appearance: none;
  background: var(--mw-white);
  border: var(--mw-border-thin) solid var(--mw-border);
  padding: 12px var(--mw-space-4);
  font: inherit;
  font-size: var(--mw-fs-sm);
  color: var(--mw-text);
  border-radius: 0;
  width: 100%;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 36px;
}
.single-product .variations select:focus {
  outline: 0;
  border-color: var(--mw-black);
}

/* "Size guide" link next to the size label (if theme renders one) */
.single-product .variations .size-guide-link,
.single-product .variations .sober-size-guide-button,
.single-product .variations [data-size-guide-toggle],
.single-product .mw-size-guide-link {
  display: inline-block;
  margin: var(--mw-space-2) 0 0;
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-regular);
  color: var(--mw-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  letter-spacing: 0;
  text-transform: none;
}
.single-product .variations .size-guide-link:hover,
.single-product .variations .sober-size-guide-button:hover,
.single-product .variations [data-size-guide-toggle]:hover,
.single-product .mw-size-guide-link:hover {
  color: var(--mw-black);
}

/* "Выберите размер" reminder modal — opens when user clicks the
   add-to-cart button while variations aren't all picked yet. */
.mw-pick-size {
  position: fixed;
  inset: 0;
  z-index: var(--mw-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mw-space-6);
  pointer-events: none;
  visibility: hidden;
}
body.mw-pick-size-open .mw-pick-size {
  pointer-events: auto;
  visibility: visible;
}
body.mw-pick-size-open { overflow: hidden; }

.mw-pick-size__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--mw-duration-normal) var(--mw-ease);
}
body.mw-pick-size-open .mw-pick-size__backdrop { opacity: 1; }

.mw-pick-size__panel {
  position: relative;
  background: var(--mw-white);
  max-width: 440px;
  width: 100%;
  padding: var(--mw-space-10) var(--mw-space-8) var(--mw-space-8);
  text-align: center;
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--mw-duration-normal) var(--mw-ease),
              opacity var(--mw-duration-normal) var(--mw-ease);
  box-shadow: var(--mw-shadow-xl);
}
body.mw-pick-size-open .mw-pick-size__panel {
  transform: scale(1);
  opacity: 1;
}

.mw-pick-size__close {
  position: absolute;
  top: var(--mw-space-3);
  right: var(--mw-space-3);
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mw-black);
  font-size: 22px;
  line-height: 1;
  padding: 0;
}
.mw-pick-size__title {
  margin: 0 0 var(--mw-space-3);
  font-size: var(--mw-fs-2xl);
  font-weight: var(--mw-fw-medium);
  color: var(--mw-text);
  letter-spacing: var(--mw-ls-tight);
}
.mw-pick-size__hint {
  margin: 0 0 var(--mw-space-6);
  font-size: var(--mw-fs-md);
  color: var(--mw-text-muted);
  line-height: var(--mw-lh-normal);
}

/* Functional pick-size: groups of chips per attribute */
.mw-pick-size__content {
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-5);
  margin: var(--mw-space-2) 0 var(--mw-space-6);
  text-align: left;
}
.mw-pick-size__group {
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-3);
}
.mw-pick-size__label {
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-semibold);
  letter-spacing: var(--mw-ls-wider);
  text-transform: uppercase;
  color: var(--mw-text-muted);
}
.mw-pick-size__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-space-2);
}
.mw-pick-size__chip {
  min-width: 56px;
  height: 44px;
  padding: 0 var(--mw-space-4);
  background: var(--mw-white);
  border: var(--mw-border-thin) solid var(--mw-border);
  color: var(--mw-text);
  font: inherit;
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-medium);
  letter-spacing: var(--mw-ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
  transition: border-color var(--mw-duration-fast) var(--mw-ease),
              background-color var(--mw-duration-fast) var(--mw-ease),
              color var(--mw-duration-fast) var(--mw-ease);
}
.mw-pick-size__chip:hover { border-color: var(--mw-black); }
.mw-pick-size__chip.is-selected {
  background: var(--mw-black);
  color: var(--mw-white);
  border-color: var(--mw-black);
}
.mw-pick-size__chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Color chips inside modal — circles like the inline form swatches */
.mw-pick-size__chip--color {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: var(--mw-radius-full);
  font-size: 0;
  background-clip: content-box;
}
.mw-pick-size__chip--color.is-selected {
  border-width: 2px;
  box-shadow: 0 0 0 2px var(--mw-white) inset;
}

.mw-pick-size__submit {
  width: 100%;
  padding: 18px var(--mw-space-8) !important;
}
.mw-pick-size__submit[disabled] {
  background: var(--mw-gray-400) !important;
  border-color: var(--mw-gray-400) !important;
  cursor: not-allowed;
}

/* Size guide modal */
.mw-size-guide {
  position: fixed;
  inset: 0;
  z-index: var(--mw-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mw-space-6);
  pointer-events: none;
  visibility: hidden;
}
body.mw-size-guide-open .mw-size-guide {
  pointer-events: auto;
  visibility: visible;
}
body.mw-size-guide-open { overflow: hidden; }

.mw-size-guide__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--mw-duration-normal) var(--mw-ease);
}
body.mw-size-guide-open .mw-size-guide__backdrop { opacity: 1; }

.mw-size-guide__panel {
  position: relative;
  background: var(--mw-white);
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--mw-duration-normal) var(--mw-ease),
              opacity var(--mw-duration-normal) var(--mw-ease);
  box-shadow: var(--mw-shadow-xl);
}
body.mw-size-guide-open .mw-size-guide__panel {
  transform: scale(1);
  opacity: 1;
}

.mw-size-guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mw-space-5) var(--mw-space-8);
  border-bottom: var(--mw-border-thin) solid var(--mw-border);
  flex-shrink: 0;
}
.mw-size-guide__title {
  margin: 0;
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-semibold);
  letter-spacing: var(--mw-ls-wider);
  text-transform: uppercase;
  color: var(--mw-text);
}
.mw-size-guide__close {
  background: none;
  border: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mw-black);
  margin-right: -8px;
  padding: 0;
}
.mw-size-guide__close svg { width: 22px; height: 22px; stroke: currentColor; }

.mw-size-guide__body {
  padding: var(--mw-space-6) var(--mw-space-8);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mw-size-guide__body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Текст под изображением размерной сетки — в табе аккордеона и в модалке.
   Один и тот же контент, поэтому стилизуем оба контейнера разом. */
.mw-sizetable__text,
.mw-size-guide__text {
  margin-top: var(--mw-space-5);
  font-size: var(--mw-fs-sm);
  line-height: var(--mw-lh-relaxed);
  color: var(--mw-text);
}
.mw-sizetable__text p,
.mw-size-guide__text p {
  margin: 0 0 var(--mw-space-3);
}
.mw-sizetable__text p:last-child,
.mw-size-guide__text p:last-child {
  margin-bottom: 0;
}
.mw-sizetable__text table,
.mw-size-guide__text table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--mw-space-3) 0;
  font-size: var(--mw-fs-sm);
}
.mw-sizetable__text th,
.mw-sizetable__text td,
.mw-size-guide__text th,
.mw-size-guide__text td {
  padding: var(--mw-space-2) var(--mw-space-3);
  border: var(--mw-border-thin) solid var(--mw-border);
  text-align: left;
}
.mw-sizetable__text th,
.mw-size-guide__text th {
  background: var(--mw-gray-50);
  font-weight: var(--mw-fw-semibold);
}
.mw-sizetable__text ul,
.mw-sizetable__text ol,
.mw-size-guide__text ul,
.mw-size-guide__text ol {
  margin: 0 0 var(--mw-space-3) var(--mw-space-5);
  padding: 0;
}
@media (max-width: 640px) {
  .mw-size-guide { padding: 0; align-items: flex-end; }
  .mw-size-guide__panel { max-height: 95vh; }
  .mw-size-guide__head,
  .mw-size-guide__body { padding-left: var(--mw-space-5); padding-right: var(--mw-space-5); }
}

/* ─── Accordion (product tabs → LV-style collapsible) ────── */
/* Moved into the .summary column via hook swap in functions.php */
.mw-accordion {
  margin-top: var(--mw-space-8);
  width: 100%;
  border-top: var(--mw-border-thin) solid var(--mw-border);
}
.mw-accordion__item {
  border-bottom: var(--mw-border-thin) solid var(--mw-border);
}
.mw-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mw-space-4);
  width: 100%;
  padding: var(--mw-space-5) var(--mw-space-4);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--mw-text);
  transition: color var(--mw-duration-fast) var(--mw-ease),
              background-color var(--mw-duration-fast) var(--mw-ease);
}
.mw-accordion__header:hover {
  background: var(--mw-black);
  color: var(--mw-white);
}
/* Plus/minus icon turns white on hover (its bars are currentColor-ish
   but actually `background: currentColor` so re-colour explicitly) */
.mw-accordion__header:hover .mw-accordion__icon::before,
.mw-accordion__header:hover .mw-accordion__icon::after {
  background: var(--mw-white);
}
.mw-accordion__title {
  flex: 1;
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-semibold);
  letter-spacing: var(--mw-ls-wider);
  text-transform: uppercase;
  line-height: 1.3;
}
.mw-accordion__icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mw-accordion__icon::before,
.mw-accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--mw-duration-normal) var(--mw-ease),
              opacity var(--mw-duration-normal) var(--mw-ease);
}
.mw-accordion__icon::before {
  /* horizontal bar */
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}
.mw-accordion__icon::after {
  /* vertical bar → forms plus */
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}
.mw-accordion__item.is-open .mw-accordion__icon::after {
  opacity: 0;  /* hide vertical bar → plus becomes minus */
}
.mw-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--mw-duration-slow) var(--mw-ease);
}
.mw-accordion__item.is-open .mw-accordion__panel {
  max-height: 3000px;
}
.mw-accordion__content {
  padding: 0 var(--mw-space-4) var(--mw-space-5);
  font-size: var(--mw-fs-md);
  line-height: var(--mw-lh-normal);
  color: var(--mw-text);
}
.mw-accordion__content p { margin: 0 0 var(--mw-space-3); }
.mw-accordion__content p:last-child { margin-bottom: 0; }
.mw-accordion__content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--mw-space-3) 0;
}
.mw-accordion__content ul,
.mw-accordion__content ol {
  margin: 0 0 var(--mw-space-3) var(--mw-space-5);
  padding: 0;
}
/* Override sober's tab content hide behaviour — we handle expansion ourselves */
.mw-accordion__content.woocommerce-Tabs-panel {
  display: block !important;
}

/* ─── 404 page ──────────────────────────────────────────────
   sober wraps the 404 in a white card with a drop shadow + 16rem
   (256px!) page title. Strip back to a flat, centred layout. */
.error-404,
section.error-404,
.error-404.not-found {
  margin: var(--mw-space-16) auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  max-width: var(--mw-container-narrow);
  text-align: center !important;
}
.error-404 .page-header,
section.error-404 .page-header {
  padding: var(--mw-space-12) 0 var(--mw-space-4) !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
  margin: 0 !important;
}
.error-404 .page-header .page-title,
.error-404 .page-title,
section.error-404 .page-header .page-title {
  font-size: var(--mw-fs-6xl) !important;
  font-weight: var(--mw-fw-medium) !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: var(--mw-text) !important;
  letter-spacing: var(--mw-ls-tight) !important;
  text-align: center !important;
}
.error-404 .page-content {
  font-size: var(--mw-fs-lg) !important;
  font-weight: var(--mw-fw-regular) !important;
  color: var(--mw-text-muted) !important;
  margin: 0 0 var(--mw-space-12) !important;
  padding: 0 var(--mw-space-6) !important;
  text-align: center !important;
}

/* Search section — single tidy row */
.error-404 .page-search {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  gap: var(--mw-space-6) !important;
  padding: var(--mw-space-6) var(--mw-space-8) !important;
  background: var(--mw-gray-50) !important;
  text-align: left !important;
}
.error-404 .page-search h4 {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-semibold) !important;
  letter-spacing: var(--mw-ls-wider) !important;
  text-transform: uppercase !important;
  color: var(--mw-text-muted) !important;
}
.error-404 .page-search .search-form {
  flex: 1 !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  border-bottom: var(--mw-border-thin) solid var(--mw-border) !important;
  padding-bottom: 4px !important;
  position: relative;
}
.error-404 .page-search .search-form .search-field {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: var(--mw-fs-md) !important;
  font-weight: var(--mw-fw-regular) !important;
  color: var(--mw-text) !important;
  padding: var(--mw-space-2) 32px var(--mw-space-2) 0 !important;
}
.error-404 .page-search .search-form svg {
  stroke: var(--mw-text-muted) !important;
  fill: var(--mw-text-muted) !important;
  width: 16px !important;
  height: 16px !important;
  right: 4px !important;
}
@media (max-width: 640px) {
  .error-404 .page-search {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--mw-space-3) !important;
    padding: var(--mw-space-5) !important;
  }
}

/* sober/style.css:7030 sets `.site-content table { border: 2px solid #23232c }`
   plus `.site-content td/th { border-right: 1px solid #23232c }` plus
   `.site-content thead tr { border-bottom: 2px solid #23232c }`. That's
   meant for prose/content tables but bleeds into every WC page (cart,
   checkout, account, orders). Override across all WC contexts so our
   own thin separators win uncontested. */
.woocommerce .site-content table,
.woocommerce-cart .site-content table,
.woocommerce-checkout .site-content table,
.woocommerce-account .site-content table,
.woocommerce-page .site-content table,
body[class*="woocommerce"] .site-content table {
  border: 0 !important;
}
.woocommerce .site-content td,
.woocommerce .site-content th,
.woocommerce-cart .site-content td,
.woocommerce-cart .site-content th,
.woocommerce-checkout .site-content td,
.woocommerce-checkout .site-content th,
.woocommerce-account .site-content td,
.woocommerce-account .site-content th,
.woocommerce-page .site-content td,
.woocommerce-page .site-content th,
body[class*="woocommerce"] .site-content td,
body[class*="woocommerce"] .site-content th {
  border-right: 0 !important;
}
.woocommerce .site-content thead tr,
.woocommerce-cart .site-content thead tr,
.woocommerce-checkout .site-content thead tr,
.woocommerce-account .site-content thead tr,
.woocommerce-page .site-content thead tr,
body[class*="woocommerce"] .site-content thead tr {
  border-bottom: var(--mw-border-thin) solid var(--mw-border) !important;
}

/* ─── My Account login/register tabs (Вход / Регистрация) ─── */
.woocommerce-account .login-tabs-nav,
.woocommerce-account h2.login-tabs-nav,
.woocommerce-account h2.tabs-nav {
  margin-top: var(--mw-space-12) !important;
  margin-bottom: var(--mw-space-10) !important;
  padding-top: var(--mw-space-6);
  display: flex !important;
  justify-content: center;
  gap: var(--mw-space-8);
  font-size: var(--mw-fs-2xl) !important;
  font-weight: var(--mw-fw-medium) !important;
  text-align: center !important;
}
.woocommerce-account h2.login-tabs-nav .tab-nav,
.woocommerce-account h2.tabs-nav .tab-nav {
  cursor: pointer;
  color: var(--mw-text-muted);
  transition: color var(--mw-duration-fast) var(--mw-ease);
  padding-bottom: var(--mw-space-2);
  /* sober's .line-hover already draws the underline via :after on
     .active, so we don't add a second border-bottom here. */
  border-bottom: 0 !important;
}
.woocommerce-account h2.login-tabs-nav .tab-nav.active,
.woocommerce-account h2.tabs-nav .tab-nav.active {
  color: var(--mw-text);
}
.woocommerce-account h2.login-tabs-nav .tab-nav:hover,
.woocommerce-account h2.tabs-nav .tab-nav:hover {
  color: var(--mw-text);
}

/* ─── Cart page cleanup ─────────────────────────────────────
   Remove the heavy black borders around the cart-form table the
   client called out, normalise to thin grey row separators. */

.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .woocommerce-cart-form table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-cart .shop_table_responsive {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-collapse: collapse !important;
}

.woocommerce-cart table.cart thead,
.woocommerce-cart table.cart thead tr {
  background: transparent !important;
  border: 0 !important;
}
.woocommerce-cart table.cart thead th {
  border: 0 !important;
  border-bottom: var(--mw-border-thin) solid var(--mw-border) !important;
  padding: var(--mw-space-4) var(--mw-space-3) !important;
  background: transparent !important;
  font-size: var(--mw-fs-xs) !important;
  font-weight: var(--mw-fw-semibold) !important;
  letter-spacing: var(--mw-ls-wider) !important;
  text-transform: uppercase !important;
  color: var(--mw-text-muted) !important;
  text-align: left !important;
}

.woocommerce-cart table.cart tbody tr,
.woocommerce-cart table.cart .cart_item {
  border: 0 !important;
  border-bottom: var(--mw-border-thin) solid var(--mw-border) !important;
  background: transparent !important;
}
.woocommerce-cart table.cart tbody tr:last-child {
  border-bottom: 0 !important;
}
.woocommerce-cart table.cart td {
  border: 0 !important;
  background: transparent !important;
  padding: var(--mw-space-4) var(--mw-space-3) !important;
  vertical-align: top;
}

/* Cart actions row (coupon + update button) */
.woocommerce-cart .cart_coupon,
.woocommerce-cart .cart_coupon.actions {
  border: 0 !important;
  padding: var(--mw-space-5) 0 !important;
  background: transparent !important;
}

/* Cart collaterals — sober's "Сумма заказов" sidebar — strip its
   heavy borders to match the new cart aesthetic */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart_totals table {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  border: 0 !important;
  border-bottom: var(--mw-border-thin) solid var(--mw-border) !important;
  background: transparent !important;
  padding: var(--mw-space-3) 0 !important;
}
.woocommerce-cart .cart_totals table tr:last-child th,
.woocommerce-cart .cart_totals table tr:last-child td {
  border-bottom: 0 !important;
}

/* "Удалить товар" link style under each cart item */
.woocommerce-cart table.cart a.remove,
.woocommerce-cart table.cart .product-remove a {
  background: transparent !important;
  color: var(--mw-text-muted) !important;
  font-size: var(--mw-fs-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wide) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  border: 0 !important;
}
.woocommerce-cart table.cart a.remove:hover {
  color: var(--mw-black) !important;
  background: transparent !important;
}

/* "Перейти к оформлению заказа" / proceed-to-checkout button */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .button.alt {
  width: 100% !important;
  padding: 18px var(--mw-space-8) !important;
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wider) !important;
  line-height: 1 !important;
}

/* ─── Checkout page — 2-column layout ──────────────────────────
   sober's form-checkout.php structure inside <form class="checkout">:
     row 1: <h3>Оплата и доставка</h3>            (from billing_title hook)
     row 2: <div class="col2-set" id="customer_details">
     row 3: <h3 id="order_review_heading">
     row 4: <div id="order_review">
   We pin everything to a deterministic 3-row grid:
     row 1 → notices, login/coupon (full width)
     row 2 → "Оплата и доставка" + "Ваш заказ" headings on same line
     row 3 → form fields  +  order review
*/
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.woocommerce-checkout {
  display: grid !important;
  grid-template-columns: 1fr minmax(320px, 420px) !important;
  grid-auto-rows: auto;
  column-gap: var(--mw-space-12);
  row-gap: var(--mw-space-6);
  align-items: start;
  border: 0 !important;
  background: transparent !important;
}

/* Notices etc — full width row 1 */
.woocommerce-checkout form.checkout > .woocommerce-form-login-toggle,
.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout > .woocommerce-info,
.woocommerce-checkout form.checkout > .woocommerce-form-login,
.woocommerce-checkout form.checkout > .woocommerce-form-coupon,
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-error {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

/* Row 2 — "Оплата и доставка" left, "Ваш заказ" right, same line */
.woocommerce-checkout form.checkout > h3:first-of-type {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  font-size: var(--mw-fs-2xl) !important;
  font-weight: var(--mw-fw-medium) !important;
  letter-spacing: var(--mw-ls-tight) !important;
  text-align: left !important;
  text-transform: none !important;
  color: var(--mw-text) !important;
}
.woocommerce-checkout form.checkout > h3#order_review_heading {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  font-size: var(--mw-fs-2xl) !important;
  font-weight: var(--mw-fw-medium) !important;
  letter-spacing: var(--mw-ls-tight) !important;
  color: var(--mw-text) !important;
  text-align: left !important;
}

/* Row 3 — form fields left, order review right */
.woocommerce-checkout form.checkout > .col2-set,
.woocommerce-checkout form.checkout > #customer_details,
.woocommerce-checkout form.checkout > .woocommerce-billing-fields,
.woocommerce-checkout form.checkout > .woocommerce-shipping-fields,
.woocommerce-checkout form.checkout > .woocommerce-additional-fields {
  grid-column: 1 !important;
  grid-row: 3 !important;
}
.woocommerce-checkout form.checkout > #order_review {
  grid-column: 2 !important;
  grid-row: 3 !important;
  background: var(--mw-gray-50) !important;
  padding: var(--mw-space-6) !important;
  border: 0 !important;
  margin: 0 !important;
}

/* Stack inner col-1 / col-2 instead of WC's default float */
.woocommerce-checkout form.checkout > .col2-set .col-1,
.woocommerce-checkout form.checkout > .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
.woocommerce-checkout form.checkout > .col2-set .col-2 {
  margin-top: var(--mw-space-6);
}

/* Kill sober's heavy 2px border + 60px padding around .col2-set and
   .woocommerce-checkout-review-order (style.css:10656). */
.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* And the legacy form-row 200px-left-padding for stacked-label layout */
.woocommerce-checkout form.checkout .form-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}
.woocommerce-checkout form.checkout .form-row-first,
.woocommerce-checkout form.checkout .form-row-last {
  width: calc(50% - var(--mw-space-2)) !important;
  padding: 0 !important;
  margin-right: 0 !important;
}
.woocommerce-checkout form.checkout .form-row-first {
  margin-right: var(--mw-space-3) !important;
}
.woocommerce-checkout form.checkout .form-row-wide {
  width: 100% !important;
}

/* Inner section h3 (sober may render extra "Billing details" labels) */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-size: var(--mw-fs-md) !important;
  font-weight: var(--mw-fw-semibold) !important;
  letter-spacing: var(--mw-ls-wider) !important;
  margin: 0 0 var(--mw-space-4) !important;
  text-align: left !important;
  text-transform: uppercase !important;
  color: var(--mw-text-muted) !important;
}

/* Order review table styling — flat list, thin separators */
.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #order_review .shop_table {
  background: transparent !important;
  border: 0 !important;
  margin: 0 0 var(--mw-space-4) !important;
}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
  border: 0 !important;
  border-bottom: var(--mw-border-thin) solid var(--mw-border) !important;
  background: transparent !important;
  padding: var(--mw-space-3) 0 !important;
  text-align: left !important;
  vertical-align: top;
}
.woocommerce-checkout #order_review .shop_table tfoot th,
.woocommerce-checkout #order_review .shop_table tfoot td {
  font-weight: var(--mw-fw-medium) !important;
}
.woocommerce-checkout #order_review .shop_table tr:last-child th,
.woocommerce-checkout #order_review .shop_table tr:last-child td {
  border-bottom: 0 !important;
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
  font-size: var(--mw-fs-md) !important;
  font-weight: var(--mw-fw-semibold) !important;
  padding-top: var(--mw-space-4) !important;
  padding-bottom: var(--mw-space-4) !important;
}

/* Payment methods block */
.woocommerce-checkout #payment {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: var(--mw-space-4) !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 var(--mw-space-4) !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
  background: transparent !important;
  list-style: none !important;
  padding: var(--mw-space-3) 0 !important;
  border: 0 !important;
  border-bottom: var(--mw-border-thin) solid var(--mw-border) !important;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: 0 !important;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--mw-gray-100) !important;
  border: 0 !important;
  margin: var(--mw-space-3) 0 0 !important;
  padding: var(--mw-space-4) !important;
  font-size: var(--mw-fs-sm);
}
.woocommerce-checkout #payment div.payment_box::before {
  display: none !important;
}

/* Place order button */
.woocommerce-checkout #place_order,
.woocommerce-checkout .place-order .button,
.woocommerce-checkout #payment .form-row.place-order .button {
  width: 100% !important;
  padding: 18px var(--mw-space-8) !important;
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--mw-fs-sm) !important;
  font-weight: var(--mw-fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wider) !important;
  line-height: 1 !important;
  margin-top: var(--mw-space-4) !important;
}

/* Form fields polish — applies to both the main checkout form and the
   login/coupon forms rendered above it. */
.woocommerce-checkout form.checkout .form-row,
.woocommerce-checkout .woocommerce-form-login .form-row,
.woocommerce-checkout .woocommerce-form-coupon .form-row {
  margin: 0 0 var(--mw-space-4);
  padding: 0;
}
.woocommerce-checkout form.checkout label,
.woocommerce-checkout .woocommerce-form-login label,
.woocommerce-checkout .woocommerce-form-coupon label,
.woocommerce-checkout .woocommerce-form label {
  display: block;
  font-size: var(--mw-fs-xs);
  letter-spacing: var(--mw-ls-wider);
  color: var(--mw-text-muted);
  margin: 0 0 var(--mw-space-2);
  text-transform: uppercase;
  line-height: 1.4;
}
/* Inline-with-input labels (e.g. "Запомнить меня" checkbox label,
   "Зарегистрировать вас?" checkbox) keep their natural inline layout */
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.checkbox {
  display: inline !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--mw-fs-sm) !important;
  color: var(--mw-text) !important;
  margin: 0 0 0 var(--mw-space-2) !important;
}

/* Hide WC's "show password" eye toggle — purpose is unclear in our UX
   and the unstyled icon was rendering as a heavy black block. */
.woocommerce-checkout .show-password-input,
.woocommerce-checkout .password-input .show-password-input,
.woocommerce-form .show-password-input {
  display: none !important;
}
.woocommerce-checkout .password-input {
  display: block;
  width: 100%;
}
.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea,
.woocommerce-checkout form.checkout .select2-container .select2-selection,
.woocommerce-checkout .checkout_coupon .input-text,
.woocommerce-checkout .woocommerce-form-coupon .input-text,
.woocommerce-checkout .woocommerce-form-login .input-text {
  width: 100% !important;
  padding: 12px var(--mw-space-4) !important;
  background: var(--mw-white) !important;
  border: var(--mw-border-thin) solid var(--mw-border) !important;
  border-radius: 0 !important;
  font: inherit !important;
  font-size: var(--mw-fs-sm) !important;
  color: var(--mw-black) !important;
  height: auto !important;
  box-sizing: border-box;
}
.woocommerce-checkout form.checkout .input-text:focus,
.woocommerce-checkout form.checkout select:focus,
.woocommerce-checkout form.checkout textarea:focus,
.woocommerce-checkout .checkout_coupon .input-text:focus,
.woocommerce-checkout .woocommerce-form-coupon .input-text:focus {
  outline: 0 !important;
  border-color: var(--mw-black) !important;
}

/* Country/region select — use a custom SVG chevron centred vertically.
   For native <select> we set background-image directly; for Select2 the
   __arrow span is repositioned so it stays centred. */
.woocommerce-checkout form.checkout select,
.woocommerce-checkout select#billing_country,
.woocommerce-checkout select#shipping_country {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-right: 40px !important;
}

/* Select2 arrow (used by WC for country/state). sober renders the
   chevron via the :after pseudo on .select2-choice / .select2-selection.
   Just nudge it 10px from the right edge so it sits cleanly inside our
   wider input box instead of glued to the corner. */
.woocommerce-checkout form.checkout .select2-container .select2-choice:after,
.woocommerce-checkout form.checkout .select2-container .select2-selection:after {
  right: 10px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: auto !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4 !important;
  padding: 0 32px 0 0 !important;
  color: var(--mw-black) !important;
}

/* Payment method radio + label on the same line.
   Use CSS grid (more deterministic than flex when WC inserts img logos
   or Robokassa adds a description span between radio and label). */
.woocommerce-checkout #payment ul.payment_methods li {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: var(--mw-space-3) !important;
  row-gap: var(--mw-space-2) !important;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"],
.woocommerce-checkout #payment ul.payment_methods li input[type="checkbox"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  cursor: pointer;
  font-size: var(--mw-fs-md) !important;
  font-weight: var(--mw-fw-medium) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--mw-text) !important;
  line-height: 1.4 !important;
  align-self: center !important;
}
.woocommerce-checkout #payment ul.payment_methods li label img {
  vertical-align: middle;
  margin-left: var(--mw-space-2);
  max-height: 24px;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  /* indent under the label (radio width 18 + gap 12 + extra ≈ 52px)
     so payment description aligns with text, not under the radio */
  margin: 0 0 0 52px !important;
  width: calc(100% - 52px) !important;
}
.woocommerce-checkout #payment div.payment_box {
  width: calc(100% - 52px) !important;
}

/* Coupon form (rendered above the form via woocommerce_before_checkout_form) */
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-form-coupon {
  display: flex !important;
  gap: var(--mw-space-3) !important;
  align-items: stretch;
  margin: var(--mw-space-4) 0 var(--mw-space-6) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.woocommerce-checkout .checkout_coupon .form-row,
.woocommerce-checkout .woocommerce-form-coupon .form-row {
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-checkout .checkout_coupon .form-row-first,
.woocommerce-checkout .woocommerce-form-coupon .form-row-first {
  flex: 1 1 auto !important;
  max-width: none !important;
}
.woocommerce-checkout .checkout_coupon .form-row-last,
.woocommerce-checkout .woocommerce-form-coupon .form-row-last {
  flex: 0 0 auto !important;
}

/* Apply-coupon button: real button look, not link. Same height as the
   coupon input (48px) so they line up clean side-by-side. */
.woocommerce-checkout .checkout_coupon button.button,
.woocommerce-checkout .checkout_coupon input[type="submit"],
.woocommerce-checkout .woocommerce-form-coupon button.button,
.woocommerce-checkout .woocommerce-form-coupon button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 var(--mw-space-6) !important;
  background: var(--mw-black) !important;
  color: var(--mw-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--mw-fs-xs) !important;
  font-weight: var(--mw-fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mw-ls-wider) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1 !important;
  height: 48px !important;
  width: auto !important;
  white-space: nowrap;
  box-sizing: border-box !important;
  transition: background-color var(--mw-duration-fast) var(--mw-ease);
}
.woocommerce-checkout .checkout_coupon button.button:hover,
.woocommerce-checkout .woocommerce-form-coupon button[type="submit"]:hover {
  background: var(--mw-gray-800) !important;
}

/* Match input height too so they're equal */
.woocommerce-checkout .checkout_coupon .input-text,
.woocommerce-checkout .woocommerce-form-coupon .input-text {
  min-height: 48px !important;
  height: 48px !important;
  box-sizing: border-box !important;
}

/* form-row wrappers also stretch to keep alignment crisp */
.woocommerce-checkout .checkout_coupon .form-row,
.woocommerce-checkout .woocommerce-form-coupon .form-row {
  display: flex !important;
  align-items: stretch !important;
}

/* Mobile / tablet — stack columns */
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout,
  .woocommerce-checkout form.woocommerce-checkout {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-checkout form.checkout > h3#order_review_heading,
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 1;
    position: static;
    max-height: none;
  }
}

/* ─── Footer ──────────────────────────────────────────────── */
.mw-footer {
  background: var(--mw-gray-100);
  color: var(--mw-text);
  padding: var(--mw-space-20) 0 var(--mw-space-8);
  margin-top: 0;
}
@media (max-width: 767px) { .mw-footer { padding: var(--mw-space-12) 0 var(--mw-space-6); } }

.mw-footer__top {
  max-width: var(--mw-container);
  margin: 0 auto;
  padding: 0 var(--mw-gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.5fr;
  gap: var(--mw-space-10);
}
@media (max-width: 1024px) {
  .mw-footer__top { grid-template-columns: 1fr 1fr; gap: var(--mw-space-8); }
}
@media (max-width: 640px) {
  .mw-footer__top { grid-template-columns: 1fr; gap: var(--mw-space-8); }
}

.mw-footer__col h4 {
  font-size: var(--mw-fs-sm);
  font-weight: var(--mw-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mw-ls-wider);
  margin: 0 0 var(--mw-space-5);
  color: var(--mw-black);
}
.mw-footer__col ul { list-style: none; margin: 0; padding: 0; }
.mw-footer__col li { margin-bottom: var(--mw-space-2); }
.mw-footer__col a {
  color: var(--mw-text-muted);
  text-decoration: none;
  font-size: var(--mw-fs-sm);
  line-height: 1.9;
  transition: color var(--mw-duration-fast) var(--mw-ease);
}
.mw-footer__col a:hover { color: var(--mw-black); }

.mw-footer__col p {
  margin: 0 0 var(--mw-space-3);
  font-size: var(--mw-fs-sm);
  color: var(--mw-text-muted);
  line-height: var(--mw-lh-normal);
}
.mw-footer__col p a { color: var(--mw-black); }
.mw-footer__col p strong { color: var(--mw-black); display: block; margin-bottom: var(--mw-space-1); }

.mw-footer__socials {
  display: flex;
  gap: var(--mw-space-3);
  margin-top: var(--mw-space-4);
}
.mw-footer__socials a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mw-black);
  background: var(--mw-white);
  border: var(--mw-border-thin) solid var(--mw-border);
  transition: all var(--mw-duration-fast) var(--mw-ease);
}
.mw-footer__socials a:hover {
  background: var(--mw-black);
  color: var(--mw-white);
  border-color: var(--mw-black);
}
.mw-footer__socials svg { width: 18px; height: 18px; fill: currentColor; }

/* Newsletter */
.mw-footer__newsletter form {
  display: flex;
  gap: 0;
  margin: 0 0 var(--mw-space-3);
  max-width: 420px;
}
.mw-footer__newsletter input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 14px var(--mw-space-4);
  background: var(--mw-white);
  border: var(--mw-border-thin) solid var(--mw-border);
  border-right: 0;
  font: inherit;
  font-size: var(--mw-fs-sm);
  color: var(--mw-black);
  border-radius: 0;
}
.mw-footer__newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--mw-black);
}
.mw-footer__newsletter input[type="submit"],
.mw-footer__newsletter .form-btn {
  padding: 14px var(--mw-space-6);
  background: var(--mw-black);
  color: var(--mw-white);
  border: var(--mw-border-thin) solid var(--mw-black);
  font: inherit;
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mw-ls-wider);
  cursor: pointer;
  border-radius: 0;
  transition: background var(--mw-duration-fast) var(--mw-ease);
}
.mw-footer__newsletter input[type="submit"]:hover { background: var(--mw-gray-800); }
.mw-footer__newsletter .agree {
  font-size: var(--mw-fs-xs);
  color: var(--mw-text-muted);
  line-height: var(--mw-lh-normal);
  margin: 0;
}
.mw-footer__newsletter .agree label { display: inline-flex; align-items: flex-start; gap: var(--mw-space-2); }
.mw-footer__newsletter .mc4wp-response { font-size: var(--mw-fs-xs); color: var(--mw-success); margin-top: var(--mw-space-2); }

.mw-footer__bottom {
  max-width: var(--mw-container);
  margin: var(--mw-space-16) auto 0;
  padding: var(--mw-space-6) var(--mw-gutter) 0;
  /* no divider — copyright row is visually distinct on its own */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--mw-space-4);
  font-size: var(--mw-fs-xs);
  color: var(--mw-text-muted);
}
.mw-footer__bottom a { color: var(--mw-text-muted); text-decoration: none; }
.mw-footer__bottom a:hover { color: var(--mw-black); }
@media (max-width: 767px) {
  .mw-footer__bottom { flex-direction: column; text-align: center; }
}

/* ─── Misc overrides for sober we need on non-home pages ──── */
/* Hide sober's old header (should not render since we override template-parts/header.php) */
#masthead.site-header { display: none; }
/* Hide sober's old footer block */
#colophon.site-footer:empty { display: none; }

/* Make sure sober's cart/account pages work under our sticky header */
body:not(.home) .woocommerce-breadcrumb { margin-top: 0; }

/* ─── Full-viewport-width breakout (MUST BE LAST) ──────────
   Safety net placed at the end of the file so it wins source-order
   over any earlier width: 100% on the same selectors. Combined with
   overflow-x:hidden on html/body, this makes each top-level home
   section span the full viewport independent of any parent container
   (sober's bootstrap .container, .sober-container, or otherwise). */
.mw-hero,
.mw-categories,
.mw-divider,
.mw-reviews,
.mw-footer {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}