/* ============================================================
   NutriForge — компоненты поверх Storefront.
   Разметка шапки, подвала, героя и плиток повторяет статику
   (см. mu-plugins/nf-layout.php), поэтому её стили взяты оттуда же.
   Значения — только из tokens.css.
   ============================================================ */

/* Storefront задаёт свою типографику и ограничитель ширины — приводим к нашим */
body, button, input, select, textarea, .woocommerce-page {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
}
h1, h2, h3, h4 { font-family: var(--font); color: var(--c-ink); letter-spacing: var(--tracking-tight); }
a { color: var(--c-accent); }
a:visited { color: var(--c-accent); }          /* Storefront красит visited своим */
.button:visited, .btn:visited { color: inherit; }

.col-full { max-width: var(--w-page); padding-inline: var(--s-5); }
.site-content { padding-block: 0 var(--s-8); }
#content.site-content { outline: none; }
.storefront-breadcrumb { padding-block: var(--s-4) 0; margin-bottom: 0; background: transparent; }
.storefront-breadcrumb .col-full { padding-bottom: 0; }
.woocommerce-breadcrumb { font-size: var(--t-sm); color: var(--c-ink-3); margin: 0 0 var(--s-5); }
.woocommerce-breadcrumb a { color: var(--c-ink-3); }
.woocommerce-breadcrumb a:hover { color: var(--c-accent); }

/* Контейнер разметки из макета. Без него шапка и полоса растекаются
   по всей ширине: Storefront центрирует только .col-full. */
.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* Storefront оставляет пустую полосу под шапкой — она нам не нужна */
.site-header { padding-block: 0; border-bottom: var(--bw) solid var(--c-line); margin-bottom: 0; }
.site-header .site-header__bar { min-height: 64px; }
.storefront-primary-navigation { display: none; }

.nf-section { margin-top: var(--s-8); }
.nf-related { margin-top: var(--s-8); }


/* ---------------------------------------------------------------- утилитарная полоса */

.topbar {
  background: var(--c-topbar-bg);
  color: var(--c-topbar-ink);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 34px;
}
.topbar__claim { color: var(--c-topbar-ink); opacity: 0.7; }
.topbar__langs { display: flex; gap: var(--s-3); }
.topbar__langs a { color: var(--c-topbar-ink); opacity: 0.58; }
.topbar__langs a:hover,
.topbar__langs a[aria-current="true"] { opacity: 1; color: var(--c-topbar-ink); }

/* ---------------------------------------------------------------- шапка */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: var(--bw) solid var(--c-line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--c-ink);
  white-space: nowrap;
}
.brand:hover { color: var(--c-ink); }
.brand__mark {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: var(--c-on-accent);
  display: grid; place-items: center;
  font-size: var(--t-sm);
  font-weight: 800;
}

.site-header__spacer { flex: 1; }

.catnav {
  border-bottom: var(--bw) solid var(--c-line);
  background: var(--c-surface);
}
.catnav__list {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s-3);
}
.catnav__list::-webkit-scrollbar { display: none; }
.catnav__list a {
  flex: none;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-2);
  background: var(--c-surface-2);
  border: var(--bw) solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.catnav__list a:hover { background: var(--c-surface-3); color: var(--c-ink); }
.catnav__list a[aria-current="page"] {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
}


/* ---------------------------------------------------------------- герой */

.hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-8) var(--s-7);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 88% 8%, var(--c-accent-soft) 0%, transparent 58%),
    var(--c-surface);
  border: var(--bw) solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  background: var(--c-accent-soft);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  margin-bottom: var(--s-4);
}
.hero h1 { font-size: var(--t-3xl); margin-bottom: var(--s-4); }
.hero__lead { color: var(--c-ink-2); font-size: var(--t-md); max-width: 46ch; }
.hero__stats { display: flex; gap: var(--s-6); margin-top: var(--s-6); }
.hero__stat b {
  display: block;
  font-size: var(--t-xl);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-tight);
}
.hero__stat span { font-size: var(--t-sm); color: var(--c-ink-3); }
.hero__art { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.hero__art img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: var(--bw) solid var(--c-line);
}
.hero__art img:nth-child(1) { transform: translateY(var(--s-4)); }

/* ---------------------------------------------------------------- секции */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.section-head p { color: var(--c-ink-3); font-size: var(--t-sm); }

.page-head { margin-bottom: var(--s-6); }
.page-head h1 { margin-bottom: var(--s-3); }
.page-head .lead { color: var(--c-ink-2); max-width: var(--w-prose); }
.page-head .meta {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-ink-3);
  font-family: var(--font-mono);
}


/* ---------------------------------------------------------------- плитки категорий */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-4);
  list-style: none; margin: 0; padding: 0;
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 148px;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  box-shadow: var(--shadow-xs);
  color: var(--c-ink);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--c-accent) 34%, var(--c-line));
  color: var(--c-ink);
}
.tile__name { font-weight: 650; font-size: var(--t-md); letter-spacing: var(--tracking-tight); }
.tile__foot { display: flex; align-items: center; justify-content: space-between; }
.tile__count { font-size: var(--t-sm); color: var(--c-ink-3); font-family: var(--font-mono); }
.tile__arrow { color: var(--c-accent); font-size: var(--t-md); transition: transform var(--dur-base) var(--ease); }
.tile:hover .tile__arrow { transform: translateX(4px); }


/* ---------------------------------------------------------------- бейджи */

.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-xs); font-weight: 600;
  padding: 3px var(--s-2);
  border-radius: var(--r-full);
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--in { color: var(--c-ok); background: var(--c-ok-soft); }
.badge--out { color: var(--c-off); background: var(--c-off-soft); }
.card__media .badge { position: absolute; top: var(--s-3); left: var(--s-3); background: var(--c-surface); box-shadow: var(--shadow-sm); }


/* ---------------------------------------------------------------- кнопки */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--t-base); font-weight: 600;
  border: var(--bw) solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }
.btn[aria-disabled="true"] { background: var(--c-surface-3); color: var(--c-ink-4); pointer-events: none; }


/* ---------------------------------------------------------------- подвал */

.site-footer {
  margin-top: var(--s-7);
  border-top: var(--bw) solid var(--c-line);
  background: var(--c-surface);
  padding-block: var(--s-7) var(--s-8);
  font-size: var(--t-sm);
  color: var(--c-ink-3);
}
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); }
.site-footer h3 { font-size: var(--t-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-4); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--c-ink-2); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__bottom {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: var(--bw) solid var(--c-line);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  color: var(--c-ink-4); font-size: var(--t-xs);
}


/* ---------------------------------------------------------------- фасеты и сортировка */

.skip {
  position: absolute; left: -9999px;
  padding: var(--s-2) var(--s-4);
  background: var(--c-accent); color: var(--c-on-accent);
  border-radius: var(--r-sm); z-index: 100;
}
.skip:focus { left: var(--s-4); top: var(--s-4); color: var(--c-on-accent); }

.facets { margin-bottom: var(--s-5); }
.facets h2 {
  font-size: var(--t-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--c-ink-4);
  margin: 0 0 var(--s-3);
}
.facets ul { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.facets a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 500;
  border: var(--bw) solid var(--c-line);
  background: var(--c-surface); color: var(--c-ink-2);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.facets a:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); color: var(--c-ink); }
.facets a span { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--c-ink-4); }
.facets a[aria-current="page"] {
  background: var(--c-accent-soft); color: var(--c-accent-ink);
  border-color: color-mix(in srgb, var(--c-accent) 32%, transparent);
}
.facets a[aria-current="page"] span { color: var(--c-accent-ink); }

.sortbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: var(--bw) solid var(--c-line);
  font-size: var(--t-sm);
}
.sortbar > span {
  color: var(--c-ink-4); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 600;
}
.sortbar a { color: var(--c-ink-2); }
.sortbar a:hover { color: var(--c-accent); }

/* ---------------------------------------------------------------- поиск */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.searchbox {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.searchbox input {
  flex: 1 1 260px;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  color: var(--c-ink);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.searchbox input::placeholder { color: var(--c-ink-4); }
.searchbox input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--focus-ring);
}
#search-status { margin-bottom: var(--s-5); }


/* ============================================================
   Привязка к разметке WooCommerce
   ============================================================ */

/* --- товарная плитка: у WooCommerce это li.product, у макета был .card --- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--s-4);
  margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
  width: 100% !important;          /* Storefront задаёт проценты под float */
  float: none !important;
  margin: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  padding-bottom: var(--s-4);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-line));
}
.woocommerce ul.products li.product a img {
  margin: 0 0 var(--s-4);
  border-bottom: var(--bw) solid var(--c-line);
  background: var(--c-surface-2);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.woocommerce ul.products li.product .badge {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
.woocommerce ul.products li.product .card__cat {
  display: block;
  margin: 0 var(--s-4) var(--s-1);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink-4);
  font-weight: 600;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 var(--s-4) var(--s-2);
  padding: 0;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--c-ink);
}
.woocommerce ul.products li.product .price {
  margin: auto var(--s-4) var(--s-3);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--c-ink);
}
.woocommerce ul.products li.product .price del { color: var(--c-ink-4); font-weight: 400; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { margin: 0 var(--s-4); }

/* --- кнопки WooCommerce под наш стиль --- */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.wc-block-components-button {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--t-sm);
  padding: var(--s-3) var(--s-5);
  text-shadow: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.woocommerce a.button.disabled, .woocommerce button.button:disabled {
  background: var(--c-surface-3); color: var(--c-ink-4);
}

/* --- шапка каталога --- */
.woocommerce-products-header { padding: 0; min-height: 0; }
.woocommerce-products-header__title, .woocommerce .page-title {
  text-align: left; font-size: var(--t-2xl); margin-bottom: var(--s-3);
}
.term-description { text-align: left; margin-bottom: var(--s-5); }
.term-description p { color: var(--c-ink-2); max-width: 66ch; margin: 0; }
.woocommerce .woocommerce-result-count { color: var(--c-ink-3); font-size: var(--t-sm); }
.woocommerce .woocommerce-ordering select {
  padding: var(--s-2) var(--s-4);
  font: inherit; font-size: var(--t-sm);
  color: var(--c-ink); background: var(--c-surface);
  border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--r-sm); max-width: 260px;
}
.woocommerce .woocommerce-ordering select:focus {
  outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring);
}

/* --- пагинация --- */
.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: var(--s-2); }
.woocommerce nav.woocommerce-pagination ul li {
  border: var(--bw) solid var(--c-line); border-radius: var(--r-sm); overflow: hidden;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: var(--s-2) var(--s-3); color: var(--c-ink-2); background: var(--c-surface);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 600;
}

/* --- страница товара --- */
.woocommerce div.product .product_title { font-size: var(--t-xl); }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--font-mono); font-size: var(--t-2xl);
  font-weight: 700; color: var(--c-ink);
}
.woocommerce div.product .stock {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-xs); font-weight: 600;
  padding: 3px var(--s-2); border-radius: var(--r-full);
}
.woocommerce div.product .stock.in-stock { color: var(--c-ok); background: var(--c-ok-soft); }
.woocommerce div.product .stock.out-of-stock { color: var(--c-off); background: var(--c-off-soft); }
.woocommerce div.product form.cart .quantity input {
  padding: var(--s-3); border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink);
}
.woocommerce div.product .product_meta { font-size: var(--t-sm); color: var(--c-ink-3); }
.woocommerce div.product .product_meta .sku { font-family: var(--font-mono); }

/* --- поиск в шапке --- */
.hdr-search { flex: 0 1 260px; }
.hdr-search input {
  width: 100%; padding: var(--s-2) var(--s-4);
  font: inherit; font-size: var(--t-sm);
  color: var(--c-ink); background: var(--c-surface-2);
  border: var(--bw) solid transparent; border-radius: var(--r-full);
}
.hdr-search input:focus {
  outline: none; background: var(--c-surface);
  border-color: var(--c-accent); box-shadow: var(--focus-ring);
}

/* --- элементы шапки, которых не было в статике --- */
.hdr-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-sm); color: var(--c-ink-2);
}
.hdr-link:hover { background: var(--c-surface-2); color: var(--c-ink); }
.hdr-cart__badge[hidden] { display: none; }
.hdr-cart__badge {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--c-accent); color: var(--c-on-accent);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--s-4); top: var(--s-4); z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--r-sm);
}

/* --- сообщения --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--c-accent);
  background: var(--c-surface-2); color: var(--c-ink);
  border-radius: var(--r-sm);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--c-accent); }

@media (max-width: 768px) {
  .hdr-search { display: none; }
  .site-header__bar { gap: var(--s-3); }
}

/* --- Storefront подчёркивает все ссылки; в плитках и подвале это мешает --- */
.tile, .tile:hover,
.site-footer a, .site-footer a:hover,
.catnav__list a, .topbar__langs a,
.brand, .hdr-link, .facets a,
.woocommerce ul.products li.product a {
  text-decoration: none;
}
.tile__count, .tile__name { text-decoration: none; }

/* --- на главной заголовок страницы не нужен: его роль играет герой --- */
/* заголовок страницы на главной снят в nf-layout.php (remove_action),
   прятать его здесь не нужно — в DOM его больше нет */
.home .site-content { padding-top: var(--s-5); }

/* --- пустая полоса между шапкой и навигацией категорий --- */
.site-header + .catnav { margin-top: 0; }
.storefront-primary-navigation, .site-header .storefront-primary-navigation { display: none; }
.site-header { padding-bottom: 0; }

/* --- Storefront резервирует место под фоновое изображение категории --- */
.woocommerce-products-header,
.page-header, .archive-header {
  min-height: 0 !important;
  padding: 0 !important;
  margin-bottom: var(--s-5);
  background-image: none !important;
}
.woocommerce .term-description { margin-bottom: var(--s-5); }
.woocommerce-products-header + .woocommerce-notices-wrapper { margin: 0; }
.woocommerce .woocommerce-ordering { margin-bottom: var(--s-4); float: none; }
.woocommerce .woocommerce-result-count { float: none; margin-bottom: var(--s-4); }
.woocommerce nav.woocommerce-pagination { float: none; }

/* --- Storefront отбивает шапку на главной, ожидая свой шаблон главной.
   Селектор повторён один в один: у оригинала специфичность 0,4,0,
   и правилом вида .site-header его не перебить. --- */
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
  margin-bottom: 0;
}

/* --- Storefront задаёт form { margin-bottom: 1.618em }. Во flex-строке шапки
   центрируется внешний бокс, поэтому поле поиска поднималось на 12 px
   относительно корзины и кнопки. --- */
.site-header__bar .hdr-search { margin: 0; }
.site-header__bar > * { align-self: center; }


/* ============================================================
   Адаптив: перенесён из статики (при первом извлечении CSS этот
   блок был пропущен, из-за чего подвал и герой не сворачивались)
   плюс правила под разметку WooCommerce.
   ============================================================ */
/* ---------------------------------------------------------------- адаптив */

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding: var(--s-7) var(--s-5); }
  .hero h1 { font-size: var(--t-2xl); }
  .hero__art { max-width: 380px; }
  .product { grid-template-columns: 1fr; gap: var(--s-6); }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .wrap { padding-inline: var(--s-4); }
  main { padding-block: var(--s-5) var(--s-7); }
  h1 { font-size: var(--t-xl); }
  .hero { padding: var(--s-6) var(--s-4); }
  .hero__stats { gap: var(--s-5); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .spec { grid-template-columns: 1fr; gap: var(--s-1); }
  .spec dd { margin-bottom: var(--s-3); }
  .site-footer__cols { grid-template-columns: 1fr; }
  .topbar__claim { display: none; }
}



@media (max-width: 960px) {
  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--t-sm); }
  .site-footer__cols { grid-template-columns: 1fr; }
  .hero__art { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .hero__art img:nth-child(1) { transform: none; }
  .catnav__list { padding-inline: var(--s-4); }
  .wrap { padding-inline: var(--s-4); }
  .col-full { padding-inline: var(--s-4); }
  /* блок фасетов на узком экране — горизонтальная прокрутка вместо переноса */
  .facets ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s-2); }
  .facets ul::-webkit-scrollbar { display: none; }
  .facets a { flex: none; }
  .woocommerce .woocommerce-ordering select { max-width: 100%; width: 100%; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: var(--t-xl); }
  .hero__stats { gap: var(--s-4); }
}