/*
Theme Name: ЯнтарьПром
Theme URI: https://yantarprom.ru/
Description: Дочерняя тема Kadence для интернет-магазина «ЯнтарьПром» — натуральный балтийский янтарь из Калининграда. Реализует дизайн-систему по Фронтенд_промт_№0.
Author: ЯнтарьПром
Author URI: https://yantarprom.ru/
Template: kadence
Version: 1.0.0
Text Domain: yantarprom
*/

/* ==========================================================================
   1. Дизайн-токены (CSS Custom Properties)
   Источник: Фронтенд_промт_№0_Дизайн-система.md §2
   ========================================================================== */
:root {
  --color-bg:        #F2EEE6; /* Warm Ivory — фон страницы */
  --color-surface:   #FFFFFF; /* White — фон карточек, модалок */
  --color-text:      #1E2A35; /* Балтийский синий — основной текст */
  --color-text-soft: #8A847B; /* Прибрежное дерево — второстепенный текст */
  --color-accent:    #C98B3B; /* Янтарный мёд — кнопки, ссылки, акценты */
  --color-badge:     #A7B7B1; /* Sea Glass — бейджи, второстепенные секции */
  --color-footer:    #1E2A35; /* Baltic Navy — фон футера */
  --color-border:    #E6DFD3; /* Linen — бордеры инпутов, разделители */
  --color-skeleton:  #EFEAE0; /* Sand Skeleton — плейсхолдеры загрузки */
  --color-error:     #B85A3E; /* Muted Terracotta — ошибки валидации */
  --color-success:   #5C8A66; /* Sea Moss — успешные действия */

  --container-max:   1200px;
  --container-pad-mobile:  20px;
  --container-pad-tablet:  32px;
  --container-pad-desktop: 40px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 20px;

  --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --shadow-soft: 0 4px 12px rgba(14, 26, 43, 0.12);

  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}

/* ==========================================================================
   2. Базовая типографика
   ========================================================================== */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 0.6em;
  text-transform: none;
}

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; font-weight: 500; }
h4, .h4 { font-size: 1.25rem; font-weight: 500; }
h5 { font-size: 1.125rem; font-weight: 500; }
h6 { font-size: 1rem; font-weight: 500; }

p { margin: 0 0 1em; }
small, .text-small { font-size: 0.85rem; }

/* ==========================================================================
   3. Ссылки (Фронтенд №0 §3.5)
   ========================================================================== */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 150ms ease, text-decoration-thickness 150ms ease;
}
a:hover {
  color: color-mix(in srgb, var(--color-accent) 85%, black);
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
a:active { color: color-mix(in srgb, var(--color-accent) 70%, black); }
a:visited { color: var(--color-accent); }

/* Ссылки без декорации в навигационных контекстах (шапка/футер/меню) */
.nav-link,
.site-header a,
.site-footer a,
.menu a {
  text-decoration: none;
}

/* ==========================================================================
   4. Контейнер сетки
   ========================================================================== */
.amber-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad-mobile);
  padding-right: var(--container-pad-mobile);
}
@media (min-width: 768px) {
  .amber-container {
    padding-left: var(--container-pad-tablet);
    padding-right: var(--container-pad-tablet);
  }
}
@media (min-width: 1024px) {
  .amber-container {
    padding-left: var(--container-pad-desktop);
    padding-right: var(--container-pad-desktop);
  }
}

/* ==========================================================================
   5. Кнопки (Фронтенд №0 §6)
   ========================================================================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: filter var(--duration-base) ease, transform var(--duration-fast) ease,
              background-color var(--duration-base) ease, color var(--duration-base) ease,
              border-color var(--duration-base) ease;
  user-select: none;
}

.btn-primary,
a.btn-primary,
button.btn-primary,
.page-content .btn-primary,
.entry-content .btn-primary,
.wp-block-button .btn-primary,
.wp-block-button .wp-block-button__link.btn-primary,
.wp-block-button__link.btn-primary,
body .btn-primary,
body a.btn-primary {
  background-color: #C98B3B !important;
  background-image: none !important;
  color: #FFFFFF !important;
  padding: 14px 28px !important;
  border: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: none !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}
.btn-primary *,
a.btn-primary *,
button.btn-primary *,
.btn-primary span,
.btn-primary .wp-block-button__link { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
body .btn-primary:hover {
  filter: brightness(0.9);
  color: #FFFFFF !important;
  background-color: #C98B3B !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-text);
  padding: 12px 26px;
}
.btn-secondary:hover  { background: var(--color-text); color: #FFFFFF; }
.btn-secondary:active { transform: scale(0.97); }
.btn-secondary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn-tertiary {
  background: transparent;
  color: var(--color-accent);
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  letter-spacing: 0;
}
.btn-tertiary:hover { color: color-mix(in srgb, var(--color-accent) 85%, black); }

.btn--block { width: 100%; }
.btn--compact { padding: 10px 20px; font-size: 0.9rem; }

/* Состояние loading */
.btn.is-loading,
.btn--loading,
.btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.8;
}
.btn.is-loading .btn__label,
.btn[aria-busy="true"] .btn__label { opacity: 0.6; }

/* ==========================================================================
   6. Формы (Фронтенд №0 §6-bis)
   ========================================================================== */
.field { margin-bottom: 16px; }
.field__label {
  display: block;
  margin-bottom: 6px;
  font: 500 0.875rem/1.4 var(--font-sans);
  color: var(--color-text);
}
.field--required .field__label::after {
  content: ' *';
  color: var(--color-accent);
}

.field input,
.field textarea,
.field select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font: 400 1rem/1.4 var(--font-sans);
  color: var(--color-text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
}
.field input::placeholder,
.field textarea::placeholder,
input::placeholder,
textarea::placeholder { color: var(--color-text-soft); opacity: 0.6; }

.field input:hover,
.field textarea:hover,
.field select:hover,
input:hover,
textarea:hover,
select:hover {
  border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-text-soft));
}

.field input:focus,
.field textarea:focus,
.field select:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.field--error input,
.field--error textarea,
.field--error select,
[aria-invalid="true"] {
  border-color: var(--color-error);
}
.field--error input:focus,
[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
}

.field input:disabled,
.field textarea:disabled,
.field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

textarea, .field textarea {
  resize: vertical;
  min-height: 120px;
}

.field select,
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%230E1A2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  appearance: none;
}

.field__error {
  display: block;
  margin-top: 6px;
  font: 400 0.85rem/1.4 var(--font-sans);
  color: var(--color-error);
}
.field__hint {
  display: block;
  margin-top: 6px;
  font: 400 0.85rem/1.4 var(--font-sans);
  color: var(--color-text-soft);
}

/* Чекбоксы и радио */
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.checkbox input[type="checkbox"] { border-radius: var(--radius-sm); }
.radio input[type="radio"] { border-radius: 50%; }
.checkbox input[type="checkbox"]:hover,
.radio input[type="radio"]:hover { border-color: var(--color-accent); }
.checkbox input[type="checkbox"]:focus-visible,
.radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.checkbox input[type="checkbox"]:checked,
.radio input[type="radio"]:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(45deg);
}
.radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: #FFFFFF;
  border-radius: 50%;
}

/* ==========================================================================
   7. Бейджи и плашки (Фронтенд №0 §7)
   ========================================================================== */
.badge-natural {
  display: inline-block;
  background: var(--color-badge);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font: 500 0.7rem/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-sale {
  display: inline-flex;
  background: var(--color-accent);
  color: #FFFFFF;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font: 600 0.85rem/1 var(--font-sans);
}

/* ==========================================================================
   8. Таблицы (Фронтенд №0 §7-bis)
   ========================================================================== */
table.amber-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 0.95rem/1.5 var(--font-sans);
  color: var(--color-text);
}
table.amber-table thead th {
  background: var(--color-surface);
  font-weight: 500;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
table.amber-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
table.amber-table tbody tr:last-child td { border-bottom: none; }
table.amber-table--striped tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-text-soft));
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .table-scroll table.amber-table { min-width: 600px; }
}

/* ==========================================================================
   9. Скелетоны / Спиннер / Тосты (Фронтенд №0 §8-ter)
   ========================================================================== */
.skeleton {
  background: var(--color-skeleton);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-line   { height: 16px; width: 80%; }
.skeleton-title  { height: 32px; width: 70%; }
.skeleton-image  { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius-lg); }
.skeleton-card   { height: 320px; border-radius: var(--radius-lg); }
.skeleton-button { height: 44px; width: 160px; border-radius: var(--radius-md); }
@keyframes skeleton-pulse {
  0%   { opacity: 0.6; }
  50%  { opacity: 1; }
  100% { opacity: 0.6; }
}

.spinner { display: inline-flex; align-items: center; justify-content: center; }
.spinner svg { animation: spinner-rotate 0.8s linear infinite; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

.toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .toast-stack { top: 16px; left: 16px; right: 16px; }
}
.toast {
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  pointer-events: auto;
  animation: toast-in 200ms ease-out;
}
.toast--success { border-left-color: var(--color-success); }
.toast--error   { border-left-color: var(--color-error); }
.toast__icon { flex-shrink: 0; }
.toast--success .toast__icon { color: var(--color-success); }
.toast--error   .toast__icon { color: var(--color-error); }
.toast__text { font: 400 0.9rem/1.4 var(--font-sans); color: var(--color-text); flex: 1; margin: 0; }
.toast__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
}
.toast--exiting { animation: toast-out 300ms ease-in forwards; }
@keyframes toast-in  { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateX(120%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .skeleton { animation: none; }
}

/* ==========================================================================
   10. Карточки товаров (Фронтенд №0 §9)
   ========================================================================== */
.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  position: relative;
}
.product-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: var(--color-skeleton);
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__title {
  font: 600 1.125rem/1.3 var(--font-serif);
  color: var(--color-text);
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__meta {
  font: 400 0.85rem/1.4 var(--font-sans);
  color: var(--color-text-soft);
  margin: 0 0 8px;
}
.product-card__price {
  font: 400 1.1rem/1 var(--font-sans);
  color: var(--color-accent);
  margin: 0;
}
.product-card__price del {
  color: var(--color-text-soft);
  font-size: 0.85rem;
  margin-right: 8px;
}

/* Карточка-преимущество (Фронтенд №0 §9-bis) */
.feature-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.feature-card__icon { width: 32px; height: 32px; color: var(--color-accent); flex-shrink: 0; }
.feature-card__title { font: 500 1.25rem/1.3 var(--font-serif); color: var(--color-text); margin: 0; }
.feature-card__text  { font: 400 0.95rem/1.55 var(--font-sans); color: var(--color-text-soft); margin: 0; }

/* Цифра-показатель (Фронтенд №0 §9-ter) */
.big-number { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.big-number__value { font: 600 4rem/1 var(--font-serif); color: var(--color-accent); }
.big-number__label { font: 400 1rem/1.4 var(--font-sans); color: var(--color-text-soft); }

/* ==========================================================================
   11. Утилиты
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; }

/* ==========================================================================
   12. Шапка сайта (Фронтенд №12) — детальная реализация в header.php
   Только базовые токены; компоненты — см. секцию header.css ниже
   ========================================================================== */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: padding var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__logo img,
.site-header__logo svg { display: block; height: 48px; width: auto; }
.site-header.is-sticky .site-header__logo img,
.site-header.is-sticky .site-header__logo svg { height: 36px; }
.site-header.is-sticky { box-shadow: 0 2px 8px rgba(14, 26, 43, 0.06); }

.site-header__nav { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 12px; }

.header-icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; padding: 0;
  color: var(--color-text); position: relative;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-base) ease;
}
.header-icon-btn:hover { background: var(--color-bg); }
.header-icon-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.header-icon-btn svg { width: 24px; height: 24px; }

.header-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  background: var(--color-accent); color: #FFFFFF;
  border-radius: 9px;
  font: 600 0.65rem/1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.header-badge[hidden],
.header-badge:empty { display: none; }

@media (min-width: 1024px) {
  .site-header__nav { display: flex; gap: 24px; align-items: center; }
  .site-header__nav a {
    color: var(--color-text);
    font: 700 0.95rem/1 var(--font-sans);
    text-decoration: none;
    padding: 8px 4px;
    border-bottom: 2px solid transparent;
    transition: border-color var(--duration-base) ease, color var(--duration-base) ease;
  }
  .site-header__nav a:hover,
  .site-header__nav a.is-active { border-color: var(--color-accent); color: var(--color-text); }
}

/* Бургер */
.burger-btn { display: inline-flex; }
@media (min-width: 1024px) { .burger-btn { display: none; } }

/* Off-canvas меню (бургер на мобайле) */
.burger-menu {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(86vw, 380px);
  background: var(--color-surface);
  z-index: 200;
  transform: translateX(100%);
  transition: transform var(--duration-slow) ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(14, 26, 43, 0.18);
}
.burger-menu[aria-hidden="false"] { transform: translateX(0); }
.burger-menu__header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.burger-menu__nav { padding: 16px 0; flex: 1; }
.burger-menu__nav a {
  display: block;
  padding: 14px 20px;
  font: 500 1.1rem/1.2 var(--font-sans);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.burger-menu__search { padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.burger-menu__contacts { padding: 20px; background: var(--color-bg); }
.burger-menu__contacts p { margin: 0 0 10px; font: 400 0.95rem/1.4 var(--font-sans); color: var(--color-text); }
.burger-menu__contacts a { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); text-decoration: none; }
.burger-menu__overlay {
  position: fixed; inset: 0;
  background: rgba(14, 26, 43, 0.5);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) ease;
}
.burger-menu__overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* Поиск (выпадающая панель) */
.search-panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0;
  box-shadow: var(--shadow-soft);
  z-index: 90;
}
.search-panel[hidden] { display: none; }

/* Мини-корзина dropdown */
.mini-cart {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(380px, 92vw);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  z-index: 110;
}
.mini-cart[hidden] { display: none; }
.mini-cart__title { font: 500 1.1rem/1 var(--font-serif); margin: 0 0 16px; }
.mini-cart__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.mini-cart__item:last-of-type { border-bottom: none; }
.mini-cart__item img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.mini-cart__item-body { flex: 1; min-width: 0; }
.mini-cart__item-title { font: 500 0.95rem/1.3 var(--font-sans); margin: 0 0 4px; color: var(--color-text); }
.mini-cart__item-meta  { font: 400 0.85rem/1.3 var(--font-sans); color: var(--color-text-soft); margin: 0; }
.mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--color-border); margin-top: 8px; }
.mini-cart__total-label { font: 400 0.95rem/1 var(--font-sans); color: var(--color-text-soft); }
.mini-cart__total-value { font: 600 1.1rem/1 var(--font-sans); color: var(--color-text); }
.mini-cart__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mini-cart__empty { text-align: center; padding: 20px 0; color: var(--color-text-soft); }

/* ==========================================================================
   13. Футер (Фронтенд №10)
   ========================================================================== */
.site-footer {
  background: var(--color-footer);
  color: #FFFFFF;
  padding: 56px 0 24px;
  margin-top: 80px;
}
.site-footer a { color: #FFFFFF; text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); }
/* Утилиты для переключения footer между mobile и desktop layouts */
.footer-only-desktop { display: none; }
.footer-only-mobile  { display: grid; }
@media (min-width: 1024px) {
  .footer-only-desktop { display: grid; }
  .footer-only-mobile  { display: none !important; }
}

/* MOBILE (<1024px) — 3 колонки + brand (через details-аккордеоны) */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
.site-footer__col h3 {
  color: #FFFFFF;
  font: 500 1.1rem/1.2 var(--font-serif);
  margin: 0 0 16px;
}
.site-footer__col p,
.site-footer__col li {
  color: rgba(255, 255, 255, 0.75);
  font: 400 0.95rem/1.6 var(--font-sans);
  margin: 0 0 8px;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }

/* DESKTOP (≥1024px) — компактный layout: лого + контакты */
.site-footer__top {
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
}
.site-footer__brand img,
.site-footer__brand svg { height: 56px; width: auto; margin-bottom: 16px; display: block; }
.site-footer__tagline {
  color: rgba(255, 255, 255, 0.75);
  font: 400 0.95rem/1.6 var(--font-sans);
  margin: 0;
  max-width: 320px;
}
.site-footer__contacts-title {
  color: #FFFFFF;
  font: 500 1.1rem/1.2 var(--font-serif);
  margin: 0 0 16px;
}
.site-footer__contacts-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  color: rgba(255, 255, 255, 0.75);
  font: 400 0.95rem/1.6 var(--font-sans);
}
.site-footer__contacts-list a { color: #FFFFFF; text-decoration: none; }
.site-footer__contacts-list a:hover { color: var(--color-accent); }
.site-footer__hours { display: flex; flex-direction: column; gap: 4px; }
.site-footer__hours span { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.6);
  font: 400 0.85rem/1.4 var(--font-sans);
}
@media (min-width: 1024px) {
  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
  }
}
.site-footer__copyright { margin: 0; }
.site-footer__legal-links { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer__legal-links a { color: rgba(255, 255, 255, 0.6); }
.site-footer__legal-links a:hover { color: var(--color-accent); }

.site-footer__socials { display: inline-flex; gap: 12px; }
@media (min-width: 1024px) {
  .site-footer__socials { margin-left: auto; }
}
.site-footer__social-link {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  border-radius: 50%;
  transition: color var(--duration-base) ease, background-color var(--duration-base) ease;
}
.site-footer__social-link:hover { color: var(--color-accent); background: rgba(255, 255, 255, 0.06); }
.site-footer__social-link svg { display: block; }

/* ==========================================================================
   14. Hero (Фронтенд №9)
   ========================================================================== */
.hero {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}
.hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  max-height: 70vh;
}
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 26, 43, 0.15) 0%, rgba(14, 26, 43, 0.55) 80%);
}
.hero__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px 0 56px;
  color: #FFFFFF;
}
.hero__title {
  font: 600 clamp(2rem, 4vw, 3.5rem)/1.15 var(--font-serif);
  color: #FFFFFF;
  margin: 0 0 16px;
  max-width: 700px;
}
.hero__lead {
  font: 400 clamp(1rem, 1.5vw, 1.2rem)/1.5 var(--font-sans);
  color: rgba(255, 255, 255, 0.92);
  max-width: 600px;
  margin: 0 0 28px;
}

/* ==========================================================================
   15. Каталог (Фронтенд №13)
   ========================================================================== */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .shop-layout { grid-template-columns: 260px 1fr; gap: 40px; }
}
.shop-sidebar {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  align-self: start;
}
.shop-sidebar h3 { font: 500 1rem/1 var(--font-sans); margin: 0 0 12px; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.5px; }
.shop-sidebar__group { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.shop-sidebar__group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.shop-toolbar {
  display: flex; flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.shop-toolbar__count { font: 400 0.9rem/1 var(--font-sans); color: var(--color-text-soft); }

/* Wishlist heart-кнопка на карточке каталога */
.wishlist-toggle {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text);
  transition: color var(--duration-base) ease, background-color var(--duration-base) ease, transform var(--duration-fast) ease;
}
.wishlist-toggle:hover { color: var(--color-accent); }
.wishlist-toggle:active { transform: scale(0.92); }
.wishlist-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.wishlist-toggle svg { width: 22px; height: 22px; }
.wishlist-toggle.is-active { color: var(--color-error); }

/* ==========================================================================
   16. Карточка товара (Фронтенд №14)
   ========================================================================== */
.product-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .product-page {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
  }
}
.product-gallery__main {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.product-gallery__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 0;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumb.is-active { border-color: var(--color-accent); }

@media (min-width: 1024px) {
  .product-info { position: sticky; top: 100px; }
}

.product-info__title { font: 600 2rem/1.2 var(--font-serif); margin: 0 0 8px; color: var(--color-text); }
.product-info__sku { font: 400 0.85rem/1.4 var(--font-sans); color: var(--color-text-soft); margin: 0 0 16px; }
.product-info__price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; }
.product-info__price-current { font: 500 1.8rem/1 var(--font-sans); color: var(--color-accent); }
.product-info__price-old { font: 400 1rem/1 var(--font-sans); color: var(--color-text-soft); text-decoration: line-through; }
.product-info__cta-row { display: flex; gap: 12px; align-items: stretch; margin: 20px 0; }
.product-info__cta-row .btn-primary { flex: 1; }

.product-accordions { margin-top: 32px; border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-item__header {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 18px 0;
  background: transparent; border: none; cursor: pointer;
  font: 500 1.1rem/1.3 var(--font-sans); color: var(--color-text);
  text-align: left;
}
.accordion-item__header:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.accordion-item__header[aria-expanded="true"] .accordion-item__arrow { transform: rotate(180deg); }
.accordion-item__arrow { transition: transform var(--duration-base) ease; flex-shrink: 0; }
.accordion-item__panel { padding: 0 0 18px; font: 400 0.95rem/1.6 var(--font-sans); color: var(--color-text); }
.accordion-item__panel[hidden] { display: none; }

/* Sticky CTA на мобайле */
.product-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  z-index: 90;
  box-shadow: 0 -4px 12px rgba(14, 26, 43, 0.08);
}
@media (min-width: 1024px) { .product-sticky-cta { display: none; } }
.product-sticky-cta__price { font: 500 1.1rem/1 var(--font-sans); color: var(--color-accent); flex-shrink: 0; }
.product-sticky-cta .btn-primary { flex: 1; }

/* ==========================================================================
   17. Корзина (Фронтенд №17)
   ========================================================================== */
.cart-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 24px auto;
  max-width: var(--container-max);
  padding: 0 var(--container-pad-mobile);
  box-sizing: border-box;
  align-items: start;
}
@media (min-width: 768px) {
  .cart-page { padding: 0 var(--container-pad-tablet); }
}
@media (min-width: 1024px) {
  .cart-page {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    padding: 0 var(--container-pad-desktop);
  }
}
.cart-page__main { min-width: 0; }
.cart-page__aside { min-width: 0; }

/* ==========================================================================
   Чекаут — двухколоночный layout (Фронтенд №15)
   ========================================================================== */
.checkout-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: var(--container-max);
  margin: 24px auto;
  padding: 0 var(--container-pad-mobile);
  box-sizing: border-box;
  align-items: start;
}
@media (min-width: 768px) {
  .checkout-page__grid { padding: 0 var(--container-pad-tablet); }
}
@media (min-width: 1024px) {
  .checkout-page__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding: 0 var(--container-pad-desktop);
  }
}
.checkout-page__col { min-width: 0; }
.checkout-page__section-title {
  font: 600 1.5rem/1.2 var(--font-serif);
  margin: 0 0 24px;
  color: var(--color-text);
}
.checkout-page__section { margin-bottom: 24px; }

/* Правая колонка — карточка «Ваш заказ» */
.checkout-page__order {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .checkout-page__col--aside { position: sticky; top: 100px; }
}

/* WC native checkout reset */
.checkout-page form.checkout > .col2-set,
.checkout-page form.checkout > #order_review_heading,
.checkout-page form.checkout > #order_review { display: contents; }
.checkout-page .col-1,
.checkout-page .col-2 { width: 100%; float: none; padding: 0; }
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font: 500 1.15rem/1.2 var(--font-serif);
  margin: 0 0 16px;
  color: var(--color-text);
}
.woocommerce-checkout .form-row { margin: 0 0 16px; }
.woocommerce-checkout .form-row label {
  display: block;
  font: 500 0.9rem/1.4 var(--font-sans);
  color: var(--color-text-soft);
  margin: 0 0 6px;
}
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  width: 100% !important;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: 400 1rem/1.4 var(--font-sans);
  background: #FFFFFF;
  color: var(--color-text);
  box-sizing: border-box;
  height: auto !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4 !important;
  padding: 0 !important;
  color: var(--color-text) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 10px; right: 6px; }
.woocommerce-checkout .form-row textarea { min-height: 96px; }
.woocommerce-checkout .form-row.validate-required label .required { color: var(--color-error); margin-left: 4px; }

/* Таблица заказа */
.woocommerce-checkout-review-order table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-family: var(--font-sans);
}
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  font-size: 0.95rem;
  color: var(--color-text);
  text-align: left;
}
.woocommerce-checkout-review-order table.shop_table tfoot th,
.woocommerce-checkout-review-order table.shop_table tfoot td { padding: 10px 0; border-bottom: none; }
.woocommerce-checkout-review-order .order-total .amount {
  font: 600 1.15rem/1.2 var(--font-sans);
  color: var(--color-accent);
}
.woocommerce-checkout-review-order .product-name { font-weight: 500; }
.woocommerce-checkout-review-order .product-total { white-space: nowrap; text-align: right; }

/* Способы оплаты */
.woocommerce-checkout #payment {
  background: transparent;
  margin: 16px 0 0;
  padding: 0;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none; padding: 0; margin: 0 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.woocommerce-checkout #payment ul.payment_methods > li {
  border-bottom: 1px solid var(--color-border);
  padding: 14px 16px;
  background: #FFFFFF;
}
.woocommerce-checkout #payment ul.payment_methods > li:last-child { border-bottom: none; }
.woocommerce-checkout #payment ul.payment_methods > li > label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 1rem/1.3 var(--font-sans);
  color: var(--color-text);
  cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 12px 0 0;
  font: 400 0.9rem/1.5 var(--font-sans);
  color: var(--color-text-soft);
}
.woocommerce-checkout #payment ul.payment_methods .payment_box::before { display: none !important; }

.woocommerce-checkout #payment .terms-and-conditions-wrapper { margin: 16px 0; }
.woocommerce-checkout #payment .place-order .button,
.woocommerce-checkout #payment button.button[name="woocommerce_checkout_place_order"] {
  display: block;
  width: 100%;
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  padding: 16px 24px !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font: 500 1rem/1 var(--font-sans) !important;
  cursor: pointer;
  text-transform: none;
  margin-top: 12px;
}
.woocommerce-checkout #payment .place-order .button:hover { filter: brightness(0.92); color: #FFFFFF !important; }

/* WooCommerce error notices */
.woocommerce-NoticeGroup-checkout,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: var(--radius-sm);
  font: 400 0.95rem/1.4 var(--font-sans);
  list-style: none;
}
.woocommerce-error { border-left-color: var(--color-error); }
.woocommerce-message { border-left-color: var(--color-success); }

/* Кнопки действий под списком корзины */
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.cart-actions__continue {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: 0.95rem;
}
.cart-actions__continue:hover { color: var(--color-accent); }
.cart-actions__update {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-transform: lowercase;
  font-family: var(--font-sans);
}
.cart-actions__update:hover { color: var(--color-text); border-color: var(--color-text-soft); }

.cart-line { grid-template-columns: 96px 1fr; }
.cart-line__thumb { display: block; flex-shrink: 0; }
.cart-line__thumb img,
.cart-line .cart-line__img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); display: block; }

.cart-summary__hint {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin: 8px 0 0;
  line-height: 1.4;
}
.cart-summary__row--tax { font-size: 0.85rem; color: var(--color-text-soft); }
.cart-summary__secure {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin: 12px 0 0;
}
.cart-summary__secure svg { color: var(--color-success); }
.cart-list { background: var(--color-surface); border-radius: var(--radius-lg); padding: 20px; }
.cart-line { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.cart-line:last-child { border-bottom: none; }
.cart-line__img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-line__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cart-line__title { font: 500 1rem/1.3 var(--font-sans); margin: 0; }
.cart-line__title a { color: var(--color-text); text-decoration: none; }
.cart-line__meta { font: 400 0.85rem/1.3 var(--font-sans); color: var(--color-text-soft); margin: 0; }
.cart-line__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cart-line__price { font: 500 1.1rem/1 var(--font-sans); color: var(--color-accent); }
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.qty-control button { width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; color: var(--color-text); font-size: 1.1rem; line-height: 1; }
.qty-control button:hover { background: var(--color-bg); }
.qty-control input { width: 44px; height: 36px; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: center; font: 500 0.95rem/1 var(--font-sans); padding: 0; background: transparent; }
.qty-control input:focus { outline: none; box-shadow: none; }
.cart-line__remove { background: none; border: none; color: var(--color-text-soft); cursor: pointer; font: 400 0.85rem/1 var(--font-sans); text-decoration: underline; }
.cart-line__remove:hover { color: var(--color-error); }

.cart-progress {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.cart-progress__bar { height: 6px; border-radius: 3px; background: var(--color-border); margin: 12px 0 8px; overflow: hidden; }
.cart-progress__fill { height: 100%; background: var(--color-accent); transition: width var(--duration-slow) ease; border-radius: 3px; }
.cart-progress__hint { font: 400 0.9rem/1.4 var(--font-sans); color: var(--color-text-soft); margin: 0; }

.cart-summary { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; align-self: start; }
@media (min-width: 1024px) { .cart-summary { position: sticky; top: 100px; } }
.cart-summary h2 { font: 500 1.25rem/1 var(--font-serif); margin: 0 0 16px; }
.cart-summary__row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; }
.cart-summary__row--total { border-top: 1px solid var(--color-border); padding-top: 16px; margin-top: 8px; font: 500 1.1rem/1 var(--font-sans); }
.cart-summary__row--discount { color: var(--color-success); }
.cart-summary__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty p { color: var(--color-text-soft); margin: 0 0 24px; }

/* ==========================================================================
   18. Брейкпоинты — общие правила
   ========================================================================== */
@media (max-width: 767px) {
  h1, .h1 { font-size: 2rem; }
  h2, .h2 { font-size: 1.5rem; }
}

/* ==========================================================================
   19. Контентные страницы (Фронтенд №16)
   ========================================================================== */
.page-content { max-width: 760px; margin: 0 auto; }
.page-content__title { margin-bottom: 32px; }
.page-content__body { font-size: 1rem; line-height: 1.6; }
.page-content__body h2 { margin-top: 2em; margin-bottom: 0.5em; font-size: 1.75rem; }
.page-content__body h3 { margin-top: 1.5em; margin-bottom: 0.5em; }
.page-content__body ul,
.page-content__body ol { padding-left: 1.5em; margin: 0 0 1em; }
.page-content__body ul li::marker { color: var(--color-accent); }
.page-content__body blockquote {
  border-left: 4px solid var(--color-accent);
  padding: 8px 16px;
  margin: 1.5em 0;
  font-style: italic;
  color: var(--color-text);
}
.page-content__body img { border-radius: var(--radius-lg); margin: 1em 0; }
.page-content__body hr { border: 0; border-top: 1px solid var(--color-border); margin: 2.5em 0; }

.amber-breadcrumbs { font: 400 0.85rem/1.4 var(--font-sans); color: var(--color-text-soft); margin-bottom: 16px; }
.amber-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.amber-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--color-text-soft); }
.amber-breadcrumbs a { color: var(--color-text-soft); text-decoration: none; }
.amber-breadcrumbs a:hover { color: var(--color-accent); }
.amber-breadcrumbs [aria-current="page"] { color: var(--color-text); }

.amber-callout {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 1.5em 0;
  border-left: 4px solid var(--color-accent);
}
.amber-callout--quote { font-style: italic; font-family: var(--font-serif); font-size: 1.125rem; }
.amber-callout--legal { background: var(--color-bg); border-left-color: var(--color-text-soft); font-size: 0.95rem; }
.amber-callout p { margin: 0 0 0.5em; }
.amber-callout p:last-child { margin-bottom: 0; }

.amber-accordions { margin: 32px 0; }
.amber-accordions .accordion-item { border-bottom: 1px solid var(--color-border); }
.amber-accordions .accordion-item__header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 18px 0;
  background: transparent; border: none; cursor: pointer;
  font: 500 1.05rem/1.3 var(--font-sans); color: var(--color-text);
  text-align: left;
  list-style: none;
}
.amber-accordions .accordion-item__header::-webkit-details-marker { display: none; }
.amber-accordions .accordion-item__header::after {
  content: '';
  width: 14px; height: 14px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  margin-bottom: 6px;
  transition: transform var(--duration-base) ease;
  flex-shrink: 0;
}
.amber-accordions details[open] .accordion-item__header::after { transform: rotate(-135deg); margin-bottom: -2px; }
.amber-accordions .accordion-item__panel { padding: 0 0 18px; font: 400 0.95rem/1.6 var(--font-sans); color: var(--color-text); }

/* Страница «О мастерской» */
.workshop-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 64px;
}
@media (min-width: 1024px) {
  .workshop-hero { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
}
.workshop-hero__media img {
  width: 100%; height: auto;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.workshop-hero__kicker {
  font: 500 0.7rem/1 var(--font-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 16px;
}
.workshop-hero__text h1 { margin-bottom: 16px; }
.workshop-hero__text p { margin-bottom: 16px; line-height: 1.6; }

.workshop-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 64px;
}
@media (min-width: 768px) { .workshop-features { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.workshop-numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 64px;
  padding: 48px 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .workshop-numbers { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

.workshop-final-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Hero на главной */
.hero--home .hero__content { padding: 56px 0 72px; }
.hero--home .btn-secondary { color: var(--color-text); background: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.95); }
.hero--home .btn-secondary:hover { background: var(--color-text); color: #FFF; }

/* Каталог в карточках */
.payment-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 24px 0;
}
@media (min-width: 768px) { .payment-methods { grid-template-columns: repeat(3, 1fr); } }

/* Страница контактов */
.page-contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .page-contacts { grid-template-columns: 1fr 1.2fr; gap: 48px; }
}
.page-contacts__info h2 { font-size: 1.5rem; margin: 0 0 16px; }
.page-contacts__info h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.page-contacts__channels { list-style: none; padding: 0; margin: 0 0 24px; }
.page-contacts__channels li { padding: 8px 0; }
.page-contacts__invite { font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; color: var(--color-text-soft); margin-top: 24px; }
.page-contacts__hours-note { color: var(--color-text-soft); font-size: 0.9rem; }
.page-contacts__map iframe { width: 100%; }

/* ==========================================================================
   20. Sticky-фиксы для мини-корзины (исправление видимости dropdown)
   ========================================================================== */
.site-header__inner > .header-icon-btn__wrap { position: relative; }

/* Site main padding-top чтобы первый блок не упирался в шапку */
.site-main { min-height: 50vh; }

/* WC default markup на странице корзины — оборачиваем */
.woocommerce-cart .amber-container,
.woocommerce-checkout .amber-container,
.woocommerce-shop .amber-container {
  padding-top: 32px;
  padding-bottom: 64px;
}

/* Список товаров на стандартной шапке /shop/ — пока используем дефолт Kadence,
   но добавляем минимальные стили совместимости */
.woocommerce ul.products li.product { background: var(--color-surface); padding: 16px; border-radius: var(--radius-lg); }
.woocommerce ul.products li.product .price { color: var(--color-accent); font-weight: 500; }
.woocommerce a.button,
.woocommerce button.button {
  background: var(--color-accent);
  color: #FFF;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.5px;
  border: none;
  text-transform: lowercase;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { filter: brightness(0.9); background: var(--color-accent); color: #FFF; }

/* ==========================================================================
   21. Чекаут (Фронтенд №15)
   ========================================================================== */
.woocommerce-form-coupon-toggle,
.woocommerce-form-coupon,
.checkout_coupon { display: none !important; }

.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details { width: 100%; max-width: 100%; }
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--color-surface);
  padding: 24px;
  border-radius: var(--radius-lg);
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    align-items: start;
  }
  .woocommerce-checkout #customer_details { grid-column: 1; }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { grid-column: 2; position: sticky; top: 100px; }
}
.woocommerce-checkout .form-row label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.875rem; }
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-sans);
}
.woocommerce-checkout #place_order {
  width: 100%;
  background: var(--color-accent);
  color: #FFF;
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}
.woocommerce-checkout #place_order:hover { filter: brightness(0.9); background: var(--color-accent); }

/* ==========================================================================
   22. Adaptive fixes — overrides Kadence-родителя
   Без них Kadence-обёртки могут давать "зависание между десктоп и мобайл"
   ========================================================================== */
html, body {
  min-width: 320px;
  overflow-x: hidden;
}
/* Сброс container-max от Kadence-родителя */
body .site-container,
body .wp-site-blocks,
body .content-container,
body .content-wrap,
body > .wp-site-blocks {
  max-width: none !important;
  width: 100% !important;
}
/* Kadence может добавить свой <header> — скрываем, у нас свой */
body > header.site-header.kadence-header,
body > header.kadence-header,
.kadence-header-row-inner:not(.site-header__inner) {
  display: none !important;
}
/* Заглушка для случаев, когда Kadence добавляет .site-content и обертывает наш main */
.site-content { width: 100%; }
.site-main { width: 100%; min-height: 50vh; display: block; }

/* Гарантированный responsive поведение Hero на главной */
.hero,
.hero--home { width: 100%; max-width: 100%; }
.hero__media { width: 100%; }
.hero__content .amber-container { padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); }
@media (min-width: 768px) { .hero__content .amber-container { padding-left: var(--container-pad-tablet); padding-right: var(--container-pad-tablet); } }
@media (min-width: 1024px) { .hero__content .amber-container { padding-left: var(--container-pad-desktop); padding-right: var(--container-pad-desktop); } }

/* На планшетах (768-1023) шапка показывает бургер + лого + правые иконки.
   Главное меню по центру скрыто, чтобы помещалось в одну строку. */
@media (max-width: 1023px) {
  .site-header__nav { display: none !important; }
  .burger-btn { display: inline-flex !important; }
  .site-header__inner { gap: 8px; }
  .site-header__logo img,
  .site-header__logo svg { height: 40px; }
}

/* Мобайл — без иконок поиск/сердце, только корзина */
@media (max-width: 767px) {
  .header-icon-btn--search,
  .header-icon-btn--wishlist { display: none !important; }
  .site-header__inner { padding-top: 12px; padding-bottom: 12px; }
  .site-header__logo img,
  .site-header__logo svg { height: 32px; }
  /* Контентные страницы — уменьшаем отступы */
  .page-content { padding-left: 12px; padding-right: 12px; }
  .workshop-hero { gap: 24px; }
  .workshop-features { gap: 12px; }
  .workshop-numbers { gap: 20px; padding: 32px 16px; }
}

/* Скрыть классы Kadence для главного меню родителя */
.kadence-mobile-active .site-header__nav,
.kadence-secondary-navigation,
#mobile-navigation:not(.burger-menu),
#mobile-secondary-site-navigation { display: none !important; }

/* Чтобы footer не "приклеивался" к контенту с маленьким min-height */
.site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.site-shell > .site-main { flex: 1; }

/* WooCommerce — гарантировать, что .products grid не сужает контейнер */
.woocommerce ul.products { margin: 0; padding: 0; list-style: none; }
.woocommerce-page .amber-container { max-width: var(--container-max); }

/* Скрыть kadence-shop-top (родительский дубль ordering/result_count на /shop/) */
.kadence-shop-top,
.kadence-shop-top-item,
.kadence-woo-ordering,
.woocommerce-result-count,
.woocommerce-ordering { display: none !important; }

/* Гарантированная видимость и явный чёрный цвет иконок в шапке (корзина, поиск, сердце, бургер) */
.site-header .header-icon-btn,
.site-header__actions .header-icon-btn,
.site-header__inner .header-icon-btn,
.site-header .burger-btn,
body .header-icon-btn {
    color: #1E2A35 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.site-header .header-icon-btn svg,
.site-header__actions .header-icon-btn svg,
.site-header__inner .header-icon-btn svg,
.site-header .burger-btn svg,
body .header-icon-btn svg,
body .header-icon-btn svg * {
    color: #1E2A35 !important;
    fill: none !important;
    stroke: #1E2A35 !important;
    stroke-width: 1.6 !important;
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    pointer-events: none;
}
/* Иконка-сердце filled — fill совпадает с stroke (заполненная) */
.site-header .header-icon-btn svg use[href*="icon-heart-filled"],
body .header-icon-btn svg use[href*="icon-heart-filled"] {
    fill: #1E2A35 !important;
}

/* Overflow-фикс для страниц WooCommerce */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account { overflow-x: hidden; }

body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main { max-width: 100vw; overflow-x: hidden; }

/* Если WC-страницы /cart/ /checkout/ обёрнуты Kadence-родителем в нерезиновый блок —
   развязываем их по ширине, чтобы наш .cart-page управлял grid сам. */
.woocommerce-cart .entry-content,
.woocommerce-cart .single-content,
.woocommerce-cart .post-thumbnail-wrap,
.woocommerce-cart .content-area,
.woocommerce-cart .site-main > .container,
.woocommerce-cart .wp-block-post-content {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* На странице /cart/ скрываем стандартный <h1>Корзина</h1>, наш .cart-page и так понятен. */
body.woocommerce-cart .entry-header,
body.woocommerce-cart .page-title-wrap,
body.woocommerce-cart .entry-title { /* оставляем заголовок видимым — это требование заказчика */ }

/* На случай, если в БД ещё лежит WC Cart Block (Gutenberg) — стилизуем его кнопку под бренд */
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .checkout-button,
.woocommerce-cart .button.alt,
.woocommerce-cart input[type="submit"].checkout-button {
    background: var(--color-accent) !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-md) !important;
    text-transform: lowercase !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer;
}

/* Notification: Kadence often injects margin-top на body для admin bar — оставляем как есть */

/* ==========================================================================
   23. Точные размеры шапки по макету (Фронтенд №12)
   ========================================================================== */
.site-header { padding: 0; min-height: 80px; }
.site-header__inner { min-height: 80px; }
.site-header__logo img,
.site-header__logo svg { height: 40px; transition: height 200ms ease; }
.site-header.is-sticky { min-height: 56px; }
.site-header.is-sticky .site-header__inner { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.site-header.is-sticky .site-header__logo img,
.site-header.is-sticky .site-header__logo svg { height: 28px; }

/* Минимальная шапка (чекаут) */
.site-header--minimal { padding: 16px 0; min-height: 0; }
.site-header__inner--minimal { justify-content: center; min-height: 0; padding: 0; }
.site-header__inner--minimal .site-header__logo img,
.site-header__inner--minimal .site-header__logo svg { height: 36px; }

/* Минимальный футер на чекауте */
.site-footer--minimal { background: var(--color-bg); color: var(--color-text-soft); padding: 24px 0; margin-top: 40px; }
.site-footer--minimal a { color: var(--color-text-soft); text-decoration: underline; }
.site-footer--minimal a:hover { color: var(--color-accent); }
.site-footer--minimal .site-footer__minimal-text { text-align: center; margin: 0 0 8px; font-size: 0.95rem; }
.site-footer--minimal .site-footer__minimal-legal { text-align: center; margin: 0; font-size: 0.85rem; }

/* Иконка активного пункта меню — подчёркивание снизу */
@media (min-width: 1024px) {
  .site-header__nav a {
    padding: 8px 16px;
    position: relative;
    border-bottom: none;
  }
  .site-header__nav a::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: -4px;
    height: 2px;
    background: transparent;
    transition: background-color var(--duration-base) ease;
  }
  .site-header__nav a:hover { color: var(--color-accent); }
  .site-header__nav a.is-active,
  .site-header__nav a[aria-current="page"] { color: var(--color-text); }
  .site-header__nav a.is-active::after,
  .site-header__nav a[aria-current="page"]::after { background: var(--color-accent); }
}

/* Грид-расклад шапки: бургер | лого | (меню) | действия */
.site-header__inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1024px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .burger-btn { display: none; }
}
@media (max-width: 1023px) {
  .site-header__nav { display: none; }
}
@media (max-width: 767px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__inner .site-header__logo { justify-self: start; margin-left: 4px; }
}

/* Бургер-меню — search-link */
.burger-menu__search-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font: 500 1.1rem/1.2 var(--font-sans);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.burger-menu__search-link:hover { color: var(--color-accent); }
.burger-menu__nav a { font: 500 1.25rem/1.4 var(--font-serif); color: var(--color-text); }
.burger-menu__nav a.is-active { color: var(--color-accent); border-left: 4px solid var(--color-accent); padding-left: 16px; }

/* ==========================================================================
   24. Hero на главной — stacked (фото сверху, текст под фото)
       Все цвета с !important — защита от Kadence-родителя.
       Внимание: переопределяем устаревшие правила из §14 (которые были
       сделаны под одноколоночный full-width hero с фото-overlay).
   ========================================================================== */
.hero--stacked {
  position: relative !important;
  background: var(--color-bg) !important;
  padding: 24px 0 32px !important;
  text-align: center;
  display: block !important;
  overflow: visible !important;   /* было hidden, резало содержимое */
}
@media (min-width: 768px) {
  .hero--stacked { padding: 32px 0 48px !important; }
}

/* CSS Grid принудительно ставит media первым, content вторым */
.hero--stacked .amber-container {
  display: flex !important;
  flex-direction: column !important;
}

.hero--stacked .hero__media {
  position: relative !important;
  order: 1 !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  aspect-ratio: 21 / 9 !important;
  min-height: 0 !important;
  max-height: none !important;
  background: var(--color-skeleton) !important;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 32px !important;
}
@media (max-width: 767px) {
  .hero--stacked .hero__media { aspect-ratio: 4 / 3 !important; margin-bottom: 24px !important; }
}
.hero--stacked .hero__media img {
  position: absolute !important;   /* для aspect-ratio: cover-fit изнутри */
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* КРИТИЧНО: отменяем position:absolute из секции 14 (старый hero overlay),
   иначе текст рендерится поверх фото. */
.hero--stacked .hero__content {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  inset: auto !important;
  order: 2 !important;
  max-width: 760px;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center;
  color: var(--color-text) !important;   /* отмена color #FFFFFF из §14 */
}

.hero--stacked .hero__kicker {
  font: 500 0.75rem/1 var(--font-sans) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--color-text-soft) !important;
  margin: 0 0 12px !important;
}

.hero--stacked .hero__title,
.hero--stacked h1.hero__title {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  line-height: 1.2 !important;
  color: var(--color-text) !important;   /* тёмно-синий, читабельно на бежевом */
  margin: 0 0 12px !important;
  text-shadow: none !important;
  background: transparent !important;
}

.hero--stacked .hero__lead {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important;
  line-height: 1.6 !important;
  color: var(--color-text) !important;   /* был soft — теперь чёрный по запросу */
  margin: 0 auto 24px !important;
  max-width: 620px;
  background: transparent !important;
}

.hero--stacked .hero__cta-row {
  display: flex !important;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center !important;
  margin-top: 8px;
}

/* Кнопки в Hero — принудительные цвета, защита от Kadence */
.hero--stacked .btn-primary,
.hero--stacked a.btn-primary {
  background-color: var(--color-accent) !important;   /* медовый #C98B3B */
  background-image: none !important;
  color: #FFFFFF !important;                          /* белый текст — видим всегда */
  border: 1px solid var(--color-accent) !important;
  text-decoration: none !important;
  font: 500 0.95rem/1 var(--font-sans) !important;
  letter-spacing: 0.5px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}
.hero--stacked .btn-primary:hover,
.hero--stacked a.btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-accent) 88%, black) !important;
  color: #FFFFFF !important;
  filter: none !important;
}

.hero--stacked .btn-secondary,
.hero--stacked a.btn-secondary {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-text) !important;                /* тёмно-синий */
  border: 1.5px solid var(--color-text) !important;
  text-decoration: none !important;
  font: 500 0.95rem/1 var(--font-sans) !important;
  letter-spacing: 0.5px;
  padding: 12px 26px;
  border-radius: var(--radius-md);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}
.hero--stacked .btn-secondary:hover,
.hero--stacked a.btn-secondary:hover {
  background-color: var(--color-text) !important;
  color: #FFFFFF !important;
}

/* Удаляем «оверлей» и overlay-классы от родительских тем (если есть) */
.hero--stacked .hero__overlay,
.hero--stacked .wp-block-cover__inner-container,
.hero--stacked .has-text-color { background: transparent !important; color: inherit !important; }

/* Старый двухколоночный — оставлен для совместимости */
.hero--two-col { background: var(--color-bg); padding: 32px 0 48px; overflow: hidden; }
.hero--two-col .hero__inner { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 768px) { .hero--two-col .hero__inner { grid-template-columns: 1fr 1fr; gap: 40px; } }
.hero--two-col .hero__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-skeleton); }
.hero--two-col .hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   25. Каталог — расширенные стили (Фронтенд №13)
   ========================================================================== */
.shop-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.shop-toolbar h1 { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .shop-toolbar { grid-template-columns: 1fr auto auto auto; }
  .shop-toolbar h1 { grid-column: 1 / 2; }
}

.shop-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: 500 0.95rem/1 var(--font-sans);
  color: var(--color-text);
  cursor: pointer;
}
@media (min-width: 1024px) { .shop-filters-toggle { display: none; } }
.shop-filters-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }

.shop-toolbar__sort select {
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.shop-toolbar__count {
  font: 400 0.9rem/1 var(--font-sans);
  color: var(--color-text-soft);
}

/* Sidebar */
.shop-sidebar {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  align-self: start;
}
@media (min-width: 1024px) {
  .shop-sidebar { position: sticky; top: 96px; width: 280px; }
}
.shop-sidebar__close { display: none; }
@media (max-width: 1023px) {
  .shop-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(420px, 95vw);
    height: 100vh;
    z-index: 10000;
    padding: 24px;
    overflow-y: auto;
    transition: right var(--duration-slow) ease;
    box-shadow: -8px 0 24px rgba(14, 26, 43, 0.18);
  }
  .shop-sidebar.is-open { right: 0; }
  .shop-sidebar__close {
    display: inline-flex;
    position: absolute;
    top: 12px; right: 12px;
    width: 40px; height: 40px;
    border: none; background: transparent; cursor: pointer;
    align-items: center; justify-content: center;
  }
}

.shop-sidebar__title { font: 600 1.25rem/1 var(--font-serif); margin: 0 0 24px; }
.shop-sidebar__group { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--color-border); }
.shop-sidebar__group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.shop-sidebar__group h3 {
  font: 500 0.8rem/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text);
  margin: 0 0 12px;
}
.shop-filter-list { list-style: none; padding: 0; margin: 0; }
.shop-filter-list li { padding: 6px 0; }
.shop-filter-list .checkbox { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.shop-filter-count { color: var(--color-text-soft); font-size: 0.85rem; }

/* Двойной слайдер цены */
.filter-price { position: relative; }
.filter-price__labels {
  display: flex; justify-content: space-between;
  font: 500 0.85rem/1 var(--font-sans);
  color: var(--color-text);
  margin-bottom: 12px;
}
.filter-price__sliders { position: relative; height: 32px; }
.filter-price input[type="range"] {
  position: absolute; left: 0; right: 0; top: 12px;
  width: 100%;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
}
.filter-price input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #FFF;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  cursor: grab;
}
.filter-price input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #FFF;
  cursor: grab;
}
.filter-price__sliders::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 13px;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
}

/* Chips применённых фильтров */
.shop-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font: 400 0.85rem/1 var(--font-sans);
  color: var(--color-text);
  cursor: pointer;
  outline: none;
}
.shop-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.shop-chip:focus { outline: none; }
.shop-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.shop-chip__close { color: var(--color-text-soft); font-size: 1rem; }
.shop-chip:hover .shop-chip__close { color: var(--color-accent); }

/* Reset-кнопка: убираем «прилипшую» синюю подсветку после клика */
.shop-chips__reset { outline: none; }
.shop-chips__reset:focus { outline: none; }
.shop-chips__reset:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Загрузка / empty */
.shop-grid.is-loading > .product-card.skeleton-card { opacity: 0.6; }
.shop-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.shop-empty p {
  font: 400 1.05rem/1.4 var(--font-sans);
  color: var(--color-text-soft);
  margin: 0 0 24px;
}

/* Карточка товара в каталоге — улучшения */
.product-card { position: relative; overflow: hidden; }
.product-card__badges { z-index: 2; }
.product-card .wishlist-toggle.product-card__wishlist { top: 12px; right: 12px; z-index: 2; }
.product-card__media-img { transition: transform 400ms ease; }
.product-card:hover .product-card__media-img { transform: scale(1.03); }
.product-card.outofstock::after {
  content: 'Нет в наличии';
  position: absolute; left: 16px; right: 16px; top: 45%;
  background: rgba(14, 26, 43, 0.85);
  color: #FFFFFF;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font: 500 0.85rem/1 var(--font-sans);
  letter-spacing: 0.5px;
  pointer-events: none;
}
.product-card.outofstock { opacity: 0.7; }

/* «Показать ещё» */
.shop-loadmore {
  display: block;
  margin: 32px auto 0;
  padding: 14px 32px;
  background: transparent;
  border: 1.5px solid var(--color-text);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: 500 0.95rem/1 var(--font-sans);
  cursor: pointer;
}
.shop-loadmore:hover { background: var(--color-text); color: #FFF; }
.amber-pagination { margin-top: 32px; text-align: center; }
.amber-pagination ul { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 6px; }
.amber-pagination ul li a, .amber-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  font: 500 0.95rem/1 var(--font-sans);
  color: var(--color-text);
}
.amber-pagination ul li .current { background: var(--color-accent); color: #FFF; border-color: var(--color-accent); }

/* ==========================================================================
   26. Карточка товара — улучшения (Фронтенд №14)
   ========================================================================== */
@media (min-width: 1024px) {
  .product-page {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 48px;
  }
}
.product-info { padding: 0 4px; }
@media (min-width: 1024px) {
  .product-info { padding: 0; }
  .product-info .amber-breadcrumbs { margin-bottom: 12px; }
}
@media (max-width: 1023px) {
  .product-info .amber-breadcrumbs { margin: 0 0 12px; }
}

.product-info__kicker {
  font: 500 0.75rem/1 var(--font-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 8px;
}
.product-info__title { font: 600 clamp(1.5rem, 3vw, 2.5rem)/1.2 var(--font-serif); margin: 0 0 4px; }
.product-info__sku { font: 400 0.85rem/1 var(--font-sans); color: var(--color-text-soft); margin: 0 0 24px; }
.product-info__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.product-info__price-current { font: 500 clamp(1.5rem, 3vw, 2rem)/1 var(--font-sans); color: var(--color-accent); }
.product-info__price-current bdi { text-decoration: none !important; }
.product-info__price-old { font: 400 1rem/1 var(--font-sans); color: var(--color-text-soft); text-decoration: line-through; }
.product-info__price-old bdi { text-decoration: line-through; }
.product-info__savings { font: 400 0.9rem/1.4 var(--font-sans); color: var(--color-success); margin: 0 0 12px; }

.product-info > .badge-natural { display: inline-block; margin: 12px 0; }
.product-info__lead { font: 400 1rem/1.6 var(--font-sans); color: var(--color-text); margin: 12px 0 20px; }
.product-info__stock {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 0.9rem/1 var(--font-sans);
  color: var(--color-success);
  margin: 0 0 16px;
}
.product-info__stock--out { color: var(--color-text-soft); }
.product-info__stock svg { flex-shrink: 0; }

.product-info__cta-row { display: flex; gap: 12px; align-items: stretch; margin: 16px 0 8px; }
.product-info__cta-row .cart { flex: 1; }
.product-info__add-to-cart {
  width: 100%;
  padding: 16px 28px;
  text-transform: lowercase;
}
.product-info__add-to-cart.is-added {
  background: var(--color-badge);
  color: #FFF;
}
.product-info__add-to-cart.is-loading { opacity: 0.85; pointer-events: none; }
.product-info__wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-info__wishlist .tinvwl_add_to_wishlist_button,
.product-info__wishlist .tinv-modal {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  border: 1px solid var(--color-text) !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--color-text) !important;
}
.product-info__wishlist .tinvwl-icon-heart::before { color: var(--color-text); font-size: 22px; }
.product-info__wishlist .tinvwl_button_view i { font-size: 22px; }

.product-info__free-delivery {
  display: inline-flex; align-items: center; gap: 8px;
  text-align: center; justify-content: center;
  font: 400 0.85rem/1 var(--font-sans);
  color: var(--color-text-soft);
  margin: 12px 0 24px;
}
.product-share { margin: 8px 0 24px; }

.product-accordions { margin-top: 16px; border-top: 1px solid var(--color-border); }

/* Галерея товара — zoom + thumbnails */
.product-gallery__main {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  cursor: zoom-in;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 200ms ease; }
.product-gallery__zoom-lens {
  position: absolute; inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: 50% 50%;
  opacity: 0;
  transition: opacity 150ms ease;
}
@media (min-width: 768px) {
  .product-gallery__zoom-lens.is-active { opacity: 1; }
  .product-gallery__main:hover img { opacity: 0; }
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 767px) { .product-gallery__thumbs { display: none; } }
.product-gallery__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 150ms ease;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumb.is-active { border-color: var(--color-accent); }
.product-gallery__thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.product-gallery__dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 12px;
}
@media (min-width: 768px) { .product-gallery__dots { display: none; } }
.product-gallery__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
}
.product-gallery__dot.is-active { background: var(--color-accent); }

/* Блок «Доставка из Калининграда» (Фронтенд №4) */
.product-delivery {
  margin-top: 64px;
  padding: 40px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.product-delivery h2 { margin-top: 0; }
.product-delivery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 768px) { .product-delivery__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.product-delivery .feature-card { background: var(--color-bg); }

/* Блок отзывов */
.product-reviews { margin-top: 64px; }
.product-reviews__summary {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 16px 0 32px;
}
.product-reviews__rating-num {
  font: 600 2.5rem/1 var(--font-serif);
  color: var(--color-text);
}
.product-reviews__stars { color: var(--color-accent); font-size: 1.25rem; letter-spacing: 2px; }
.product-reviews__stars .star { color: var(--color-border); }
.product-reviews__stars .star.is-active { color: var(--color-accent); }
.product-reviews__empty {
  background: var(--color-surface);
  padding: 24px;
  border-radius: var(--radius-lg);
  color: var(--color-text-soft);
  text-align: center;
}

/* WC native review styles overrides */
.commentlist .comment-text {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-left: 60px;
  position: relative;
}
.commentlist .avatar {
  position: absolute;
  left: -60px; top: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
}
.commentlist .star-rating { color: var(--color-accent); }

/* Блок «С этим товаром покупают» — карусель */
.product-related { margin-top: 64px; }
.product-related h2 { text-align: center; margin-bottom: 32px; }
.product-related__carousel { position: relative; }
.product-related__list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-related__list::-webkit-scrollbar { display: none; }
.product-related__list .product-card {
  flex: 0 0 calc(100% - 32px);
  scroll-snap-align: start;
}
@media (min-width: 480px) { .product-related__list .product-card { flex: 0 0 calc(50% - 8px); } }
@media (min-width: 768px) { .product-related__list .product-card { flex: 0 0 calc(33.333% - 11px); } }
@media (min-width: 1024px) { .product-related__list .product-card { flex: 0 0 calc(25% - 12px); } }

.product-related__prev,
.product-related__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(14, 26, 43, 0.08);
}
.product-related__prev { left: -22px; }
.product-related__next { right: -22px; }
.product-related__prev svg { transform: rotate(90deg); }
.product-related__next svg { transform: rotate(0deg); }
.product-related__prev:hover,
.product-related__next:hover { color: var(--color-accent); border-color: var(--color-accent); }
@media (max-width: 767px) {
  .product-related__prev, .product-related__next { display: none; }
}

/* Sticky-CTA на мобайле — анимация появления */
.product-sticky-cta {
  transform: translateY(110%);
  transition: transform 250ms ease;
}
.product-sticky-cta.is-visible { transform: translateY(0); }

/* ==========================================================================
   27. Модалки (Фронтенд №0 §11)
   ========================================================================== */
.modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none !important; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(14, 26, 43, 0.5);
  animation: modal-fade 200ms ease-out;
}
.modal__dialog {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(14, 26, 43, 0.3);
  animation: modal-in 250ms ease-out;
}
.modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-soft);
  border-radius: var(--radius-md);
}
.modal__close:hover { color: var(--color-text); background: var(--color-bg); }
.modal__title { font: 600 1.5rem/1.2 var(--font-serif); margin: 0 0 8px; padding-right: 40px; }
.modal__lead { color: var(--color-text-soft); margin: 0 0 20px; font-size: 0.95rem; }
@keyframes modal-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .modal__dialog, .modal__backdrop { animation: none; }
}

/* ==========================================================================
   28. Sticky-оглавление страниц Политики/Условий (Фронтенд №16 §7/§8)
   ========================================================================== */
.legal-page { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) {
  .legal-page { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
  .legal-page__toc { position: sticky; top: 96px; align-self: start; }
}
.legal-page__toc ul { list-style: none; padding: 0; margin: 0; }
.legal-page__toc li { padding: 6px 0; }
.legal-page__toc a {
  font: 500 0.9rem/1.4 var(--font-sans);
  color: var(--color-text-soft);
  text-decoration: none;
  display: block;
  padding: 4px 12px;
  border-left: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.legal-page__toc a:hover,
.legal-page__toc a.is-active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

/* ==========================================================================
   29. Footer accordions на мобайле (Фронтенд №10)
   ========================================================================== */
.site-footer__col--accordion summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 12px 0;
  user-select: none;
}
.site-footer__col--accordion summary::-webkit-details-marker { display: none; }
.site-footer__col--accordion summary > h3 { margin: 0; }
.site-footer__chevron {
  transition: transform var(--duration-base) ease;
}
.site-footer__col--accordion[open] .site-footer__chevron { transform: rotate(180deg); }
.site-footer__col--accordion ul {
  padding: 8px 0 16px;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-footer__col--accordion summary { pointer-events: none; cursor: default; padding: 0; }
  .site-footer__col--accordion .site-footer__chevron { display: none; }
  .site-footer__col--accordion[open] ul,
  .site-footer__col--accordion ul { padding: 0; display: block !important; }
  details.site-footer__col--accordion[open],
  details.site-footer__col--accordion:not([open]) > ul { display: block !important; }
  details.site-footer__col--accordion > ul { display: block !important; }
}

/* ==========================================================================
   30. Карточка-преимущество улучшения, фото About — корректные размеры
   ========================================================================== */
.workshop-hero__media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.workshop-numbers {
  background: transparent;
  border-radius: 0;
  padding: 48px 0;
  margin: 0 -16px 64px;
  border-top: none; /* v8.136: убрана линия */
  border-bottom: none; /* v8.136: убрана линия */
}
@media (min-width: 768px) {
  .workshop-numbers { margin: 0 0 64px; }
}

/* ==========================================================================
   31. Cookie Notice — кастомизация под бренд
   ========================================================================== */
#cookie-notice {
  font-family: var(--font-sans) !important;
}
#cookie-notice .cookie-notice-container {
  padding: 16px 20px !important;
}
#cookie-notice .cn-set-cookie {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-md) !important;
  text-transform: lowercase !important;
}

/* ==========================================================================
   32. Стили активного пункта меню — aria-current и .is-active
   ========================================================================== */
.site-header__nav a[aria-current="page"],
.site-header__nav a.is-active { font-weight: 700; }

/* ==========================================================================
   33. CartFix — empty cart styling, qty-control, прогресс-бар
   ========================================================================== */
.cart-list.is-loading { opacity: 0.6; pointer-events: none; }
.cart-line.is-removing { opacity: 0.4; transition: opacity 250ms ease; }

/* ==========================================================================
   34. WishlistFix — стилизация TI button
   ========================================================================== */
.product-card__wishlist .tinvwl_add_to_wishlist_button {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: none !important;
}

/* ==========================================================================
   35. Contact Form 7 — стилизация под дизайн-систему
   ========================================================================== */
.wpcf7 .wpcf7-form-control-wrap { display: block; margin: 0 0 16px; }
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font: 400 1rem/1.4 var(--font-sans);
}
.wpcf7 textarea { min-height: 120px; resize: vertical; }
.wpcf7 .wpcf7-submit {
  background: var(--color-accent);
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  border: none;
  font: 500 0.95rem/1 var(--font-sans);
  letter-spacing: 0.5px;
  cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover { filter: brightness(0.9); }
.wpcf7-spinner { vertical-align: middle; }
.wpcf7-not-valid-tip { color: var(--color-error); font-size: 0.85rem; margin-top: 4px; }
.wpcf7-response-output {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--color-success) !important; color: var(--color-success); }
.wpcf7 form.invalid .wpcf7-response-output { border-color: var(--color-error) !important; color: var(--color-error); }

/* ==========================================================================
   36. Аудит-фиксы 2026-05-18 (v7) — Мобильная вёрстка / Доводка по брендбуку
   ========================================================================== */

/* 36.1 Глобальная блокировка горизонтального скролла */
html, body { max-width: 100vw; overflow-x: clip; }
img, svg, video, picture, iframe, table, pre { max-width: 100%; }
main, .site-main, .entry-content { overflow-x: clip; }

/* 36.2 Сетка каталога: mobile 1 / tablet 2 */
@media (max-width: 767px) {
  .woocommerce ul.products,
  ul.products.shop-grid,
  .shop-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .woocommerce ul.products li.product,
  .shop-grid > li,
  .shop-grid > .product-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .woocommerce ul.products,
  ul.products.shop-grid,
  .shop-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .woocommerce ul.products li.product,
  .shop-grid > li,
  .shop-grid > .product-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important; }
}
/* Отключаем Kadence grid-ss-col-N на мобайле */
@media (max-width: 1023.98px) {
  .grid-cols.grid-ss-col-2,
  .grid-cols.grid-ss-col-3,
  .grid-cols.grid-ss-col-4 { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .grid-cols.grid-sm-col-2,
  .grid-cols.grid-sm-col-3,
  .grid-cols.grid-sm-col-4 { grid-template-columns: 1fr 1fr !important; }
}

/* 36.3 Карточка товара: фон фото #F2EEE6, square aspect */
.product-card,
.product-card.entry,
ul.products li.product {
  background: var(--color-surface) !important;
  border-radius: 8px;
  box-shadow: none !important;
}
.product-card__media,
ul.products li.product .product-card__media {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #F2EEE6 !important;
  border-radius: 6px;
  display: block;
  overflow: hidden;
}
.product-card__media img,
.product-card__media-img { aspect-ratio: 1/1; width: 100%; height: 100%; object-fit: cover; background: #F2EEE6 !important; }

/* 36.4 Бейдж "Натуральный янтарь" pill — по эталону IMG_3255 (casing, не uppercase),
   располагается под ценой в карточке каталога. */
.product-badge--amber,
.product-card__badge--amber {
  display: inline-block;
  background: var(--color-badge);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 6px 14px;
  font: 500 0.78rem/1 var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 10px;
  margin-bottom: 0;
  white-space: nowrap;
}
.product-card .product-badge--amber { margin-top: 10px; }
.badge-sale {
  display: inline-block;
  background: var(--color-accent);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 6px 12px;
  font: 500 0.78rem/1 var(--font-sans);
  white-space: nowrap;
}

/* 36.5 Hero CTA mobile — stacked full-width */
@media (max-width: 767px) {
  .hero--stacked .hero__cta-row,
  .hero__cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100%;
  }
  .hero--stacked .hero__cta-row > a,
  .hero__cta-row > a { width: 100% !important; min-width: 0 !important; }
}

/* 36.5-bis Hero на десктопе — 2 колонки (текст слева, фото справа) согласно IMG_3256.
   На мобайле остаётся stacked (фото сверху, текст под — пересилит media-rule). */
@media (min-width: 1024px) {
  .hero--stacked .amber-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
  }
  .hero--stacked .hero__content {
    order: 1 !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 540px !important;
  }
  .hero--stacked .hero__media {
    order: 2 !important;
    margin: 0 !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }
  .hero--stacked .hero__cta-row {
    justify-content: flex-start !important;
  }
  .hero--stacked .hero__title,
  .hero--stacked .hero__kicker,
  .hero--stacked .hero__subtitle,
  .hero--stacked .hero__lead {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 36.6 Кнопки Primary/Secondary — Inter 500 (брендбук IMG_3256/IMG_3252: обычный casing)
   В Hero/Thank-you эталонах кнопки в обычном casing без letter-spacing;
   только бейдж .product-badge--amber сохраняет uppercase (UI-эталон IMG_3253). */
.btn-primary,
.btn-secondary,
a.btn-primary,
a.btn-secondary,
.hero--stacked .btn-primary,
.hero--stacked .btn-secondary,
.hero--two-col .btn-primary,
.hero--two-col .btn-secondary,
.cart-summary__checkout {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

/* 36.5-ter Карточка каталога — Inter 400, text-soft для подписи. Защита от Kadence-родителя. */
.product-card .product-card__meta,
ul.products li.product .product-card__meta,
.shop-grid li .product-card__meta {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  color: var(--color-text-soft) !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.product-card .product-card__title,
ul.products li.product .product-card__title {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  margin: 0 0 4px !important;
}
.product-card .product-card__title a { color: inherit !important; }
.product-card .product-card__price,
ul.products li.product .product-card__price {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  color: var(--color-accent) !important;
  margin: 0 !important;
}
.product-card .product-card__price * {
  color: var(--color-accent) !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
}

/* 36.6-bis Body фон — натуральный лён (Kateryna Hliznitsova @Unsplash, 2400x1350).
   Реализация через `position: fixed` псевдоэлемент body::before — единое изображение
   на весь viewport, без tile-seams. Работает идентично на iOS Safari и desktop. */
html { background: transparent !important; min-height: 100vh; }
html body,
body.home,
body.front-page,
body.page-template,
body.archive,
body.woocommerce,
body.single-product,
body.woocommerce-account,
body.woocommerce-cart,
body.woocommerce-checkout,
body.page,
body.single {
  background-color: #EEE3CD !important;
  background-image: none !important;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #EEE3CD;
  background-image:
    linear-gradient(180deg, rgba(242, 238, 230, 0.15) 0%, rgba(242, 238, 230, 0.08) 50%, rgba(242, 238, 230, 0.15) 100%),
    url('assets/hero/linen-v3.webp');
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  z-index: -10;
  pointer-events: none;
}
body.woocommerce-checkout::before { display: none !important; }
/* Kadence/WP обёртки прозрачные — чтобы body-gradient был сквозным */
.wp-site-blocks,
.site-container,
.site-content,
.content-wrap,
.site-main,
.entry-content,
.entry,
article.entry,
#main-content,
.page-content,
.content-area,
main#main-content,
body .hero,
body .hero--stacked,
body.home .hero,
body.home .hero--stacked,
.workshop-features,
.workshop-mini,
.front-page-wrap,
.front-page-wrap > *,
.amber-container { background: transparent !important; background-color: transparent !important; background-image: none !important; }

/* НО: специфические block-фоны (карточки, surface-секции) — оставляем cream surface */
.product-card,
.feature-card,
.cart-summary,
.cart-list,
.cart-progress,
.workshop-numbers > div,
.checkout-page__order,
.payment_methods > li,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { background: var(--color-surface) !important; }

/* 36.6-ter Морской фон НА САМОЙ ШАПКЕ (.site-header) — узкий сектор 80–120px,
   картинка прижата нижним краем к низу шапки (background-position: center bottom)
   так что в шапке видна нижняя часть кадра — ВОДА.
   Минимальный overlay (rgba 0.10), чтобы море отчётливо просматривалось. */
.site-header,
body .site-header,
header.site-header {
  position: relative !important;
  background-image: url('assets/hero/sea-sunset.jpg?v=4') !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  min-height: 120px !important;
  z-index: 5 !important;
  /* Большая fade-zone: 50% шапки (с 50% до 100%) плавно к transparent.
     Sea-пиксели полностью растворяются в lien body — без любых "линий". */
  -webkit-mask-image: linear-gradient(180deg,
      #000 0%,
      #000 45%,
      rgba(0,0,0,0.92) 60%,
      rgba(0,0,0,0.72) 72%,
      rgba(0,0,0,0.45) 84%,
      rgba(0,0,0,0.18) 94%,
      transparent 100%) !important;
  mask-image: linear-gradient(180deg,
      #000 0%,
      #000 45%,
      rgba(0,0,0,0.92) 60%,
      rgba(0,0,0,0.72) 72%,
      rgba(0,0,0,0.45) 84%,
      rgba(0,0,0,0.18) 94%,
      transparent 100%) !important;
  padding-bottom: 40px !important;
}
.site-header::after,
header.site-header::after { display: none !important; }
@media (max-width: 767px) {
  .site-header,
  body .site-header,
  header.site-header { min-height: 130px !important; padding-bottom: 50px !important; }
}
.site-header__inner { min-height: 100px !important; }
.site-header.is-sticky { min-height: 72px !important; }
.site-header.is-sticky .site-header__inner { min-height: 72px !important; }

/* На мобайле — шапка чуть тоньше, но море видно */
@media (max-width: 767px) {
  .site-header,
  body .site-header,
  header.site-header { min-height: 84px !important; }
  .site-header__inner { min-height: 84px !important; }
}

/* На чекауте — минимальная шапка без моря */
.site-header--minimal,
body.woocommerce-checkout .site-header,
.site-header.site-header--minimal {
  background-image: none !important;
  background: var(--color-bg) !important;
  min-height: 60px !important;
}

.site-shell { position: relative; z-index: 1; }

/* 36.6-quad-pre: перекрываем `.hero--stacked .hero__media` (line 1872-1894) —
   у неё `background: var(--color-skeleton)` (бежевая подложка) + `overflow: hidden`
   + `border-radius: var(--radius-lg)` + `position: absolute` для img. Это создаёт
   видимый rectangular bezel на главной. Сбрасываем всё с body.home специфичностью. */
body.home .hero--stacked .hero__media,
body.front-page .hero--stacked .hero__media,
.hero--stacked .hero__media {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 none !important;
  /* aspect-ratio оставляем, чтобы pole hero не схлопнулось */
}
body.home .hero--stacked .hero__media img,
body.front-page .hero--stacked .hero__media img,
.hero--stacked .hero__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 36.6-quad Фото — mask-image на всех 4 краях (тот же принцип что у шапки→фон).
   Header использует linear-gradient(180deg, #000 0%, ..., transparent 100%) на bottom edge.
   Для фото — 4 linear-gradient на каждый край, скомпонованные через mask-composite,
   результат: rectangular photo с feathered fade на всех 4 границах. */

/* Удаляем подложку Kadence/Gutenberg на ВСЕХ ancestors фото */
.hero__media,
.hero__media *,
.workshop-hero__media,
.workshop-hero__media *,
.about-hero__media,
.about-hero__media *,
.workshop-mini__media,
.workshop-mini__media *,
.workshop-final-photo,
.workshop-final-photo *,
body.workshop figure,
body.workshop .wp-block-image,
body.workshop .wp-block-image > *,
body.about figure,
body.about .wp-block-image,
body.home .hero figure,
body.home .hero .wp-block-image,
.entry-content figure,
.entry-content .wp-block-image,
.entry-content figure > img,
.entry-content .wp-block-image > img {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hero__media,
.workshop-hero__media,
.about-hero__media,
.workshop-mini__media,
.workshop-final-photo,
.hero__media figure,
.workshop-hero__media figure,
.about-hero__media figure {
  position: relative !important;
  overflow: visible !important;
  margin: 0 auto !important;
}

/* Mask: fade all 4 edges идентично header→body */
.hero__media img,
.workshop-hero__media img,
.about-hero__media img,
.workshop-mini__media img,
.workshop-final-photo img,
img.hero-photo,
.hero__media picture img,
.workshop-hero__media picture img,
body.workshop .entry-content img,
body.workshop figure img,
body.about .entry-content img,
body.about figure img,
body.home .hero img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  /* Desktop: fade 10% top/bottom + 10% left/right.
     На мобильном top/bottom fade увеличим в @media ниже (фото занимает весь экран,
     горизонтальные границы должны плавнее растворяться). */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
  -webkit-mask-mode: alpha !important;
  mask-mode: alpha !important;
  -webkit-mask-repeat: no-repeat, no-repeat !important;
  mask-repeat: no-repeat, no-repeat !important;
  -webkit-mask-size: 100% 100%, 100% 100% !important;
  mask-size: 100% 100%, 100% 100% !important;
  filter: none !important;
  box-shadow: none !important;
}
/* Mobile/tablet: фото занимает весь viewport-width, top/bottom — самые видимые edges.
   Расширяем vertical fade-zone до 22%, horizontal оставляем 5% (eще менее значимы). */
@media (max-width: 1023.98px) {
  .hero__media img,
  .workshop-hero__media img,
  .about-hero__media img,
  .workshop-mini__media img,
  .workshop-final-photo img,
  body.workshop figure img,
  body.workshop .entry-content img,
  body.about figure img,
  body.about .entry-content img,
  body.home .hero img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 8%, #000 22%, #000 78%, rgba(0,0,0,0.6) 92%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
    mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 8%, #000 22%, #000 78%, rgba(0,0,0,0.6) 92%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
  }
}
/* Убираем все псевдо-overlay */
.hero__media::after,
.workshop-hero__media::after,
.about-hero__media::after,
.workshop-mini__media::after,
.workshop-final-photo::after,
.hero__media::before,
.workshop-hero__media::before,
.about-hero__media::before { display: none !important; content: none !important; }
/* Карточки товаров и галерея — БЕЗ mask (catalog остаётся четким) */
.product-card .product-card__media img,
.product-card__media img,
.products img,
.woocommerce-product-gallery img,
.product-gallery img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
}

/* 36.7 Логотип: трёхуровневое переключение primary/compact/icon
   ВАЖНО: используем !important на ВСЕХ правилах, потому что предыдущие правила
   (line 645-646, 1772-1777) ставят `.site-header__logo img { display: block }`
   с такой же specificity и перебивают наши display:none. */
.site-header__logo .logo-primary,
.site-header__logo .logo-compact,
.site-header__logo .logo-mobile { display: none !important; height: auto; width: auto; }

/* Desktop ≥1024px — primary, при скролле compact */
@media (min-width: 1024px) {
  .site-header:not(.is-sticky) .site-header__logo .logo-primary { display: block !important; height: 48px !important; }
  .site-header.is-sticky .site-header__logo .logo-compact { display: block !important; height: 32px !important; }
}
/* Tablet 768–1023 — compact */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-header__logo .logo-compact { display: block !important; height: 40px !important; }
}
/* Mobile ≤767 — icon */
@media (max-width: 767px) {
  .site-header__logo .logo-mobile { display: block !important; height: 36px !important; }
}
/* Гарантируем что родительский <a> не центрирует все 3 в строку */
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { vertical-align: middle; }

/* 36.8 Form fields min-height 44px (touch) */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.woocommerce form .form-row input.input-text,
.field input[type="text"],
.field input[type="email"],
.field textarea {
  min-height: 44px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
}

/* 36.9 Add-to-cart full-width mobile */
@media (max-width: 767px) {
  .product-info__cta-row,
  .single-product div.product form.cart {
    flex-direction: column !important;
    width: 100%;
    gap: 12px;
  }
  .product-info__add-to-cart,
  .single_add_to_cart_button {
    width: 100% !important;
    padding: 14px 24px !important;
  }
}

/* 36.10 Qty +/- центрированные + 44px */
.qty-control button,
.quantity .plus,
.quantity .minus,
.cart .qty-control__plus,
.cart .qty-control__minus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 1.2rem !important;
  min-height: 44px !important;
  min-width: 44px !important;
}
.qty-control input,
.quantity .qty { min-height: 44px !important; }

/* 36.11 Touch-зоны */
.header-icon-btn,
.burger-btn { min-width: 44px; min-height: 44px; }
@media (max-width: 767px) {
  .burger-menu__nav a { min-height: 44px; padding: 12px 16px; }
}

/* 36.12 Footer h3 margins + цвет ссылок + соцсети */
.site-footer__col h3,
.site-footer__col--accordion summary h3 {
  margin: 0 0 8px !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.95rem;
}
.site-footer__col ul li { margin-bottom: 8px; }
.site-footer__col ul li a { color: var(--color-badge); font-size: 0.85rem; }
.site-footer__col ul li a:hover { color: var(--color-accent); }
.site-footer__bottom { border-top-color: rgba(167, 183, 177, 0.3); }
.site-footer__copyright,
.site-footer__legal-links a,
.site-footer__legal-links a:visited { color: var(--color-badge); }
.site-footer__legal-links a:hover { color: var(--color-accent); }
.site-footer__social-link { color: var(--color-badge) !important; }
.site-footer__social-link:hover { color: var(--color-accent) !important; }
.site-footer__social-link svg { fill: currentColor !important; }
.site-footer__tagline { color: var(--color-badge); font-size: 0.85rem; }

/* 36.13 Уведомления WC под бренд */
.woocommerce-message,
.woocommerce-notice,
.woocommerce-info {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 6px !important;
  color: var(--color-text) !important;
  padding: 14px 18px !important;
  font: 400 0.95rem/1.4 var(--font-sans) !important;
  list-style: none !important;
  box-shadow: none !important;
}
.woocommerce-error {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 3px solid var(--color-error) !important;
  border-radius: 6px !important;
  color: var(--color-text) !important;
  padding: 14px 18px !important;
  font: 400 0.95rem/1.4 var(--font-sans) !important;
  list-style: none !important;
  box-shadow: none !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--color-accent) !important; }
.woocommerce-message .button,
.woocommerce-message a.button {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-text) !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font: 500 0.85rem/1 var(--font-sans) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-left: 8px;
}

/* 36.14 Cart progress (free shipping) — убрать */
.cart-progress { display: none !important; }

/* 36.15 Контентные h2 + workshop-features mobile */
@media (max-width: 767px) {
  .entry-content h2,
  .page-content h2 { margin: 24px 0 12px !important; }
  .workshop-features { padding: 16px !important; gap: 12px !important; }
  .workshop-features > .feature-card { padding: 16px !important; min-height: auto !important; }
}

/* 36.16 Wishlist heart на карточках каталога — скрыть */
ul.products li.product .tinvwl-after-add-to-cart,
.product-card .tinvwl-after-add-to-cart,
.tinvwl_add_to_wishlist_button.tinvwl-loop-button-wrapper,
.tinv-wraper.tinvwl-loop-button-wrapper { display: none !important; }

/* 36.17 Mobile filter modal + slider border */
@media (max-width: 1023.98px) {
  .shop-filters,
  .shop-toolbar__filters {
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: 12px 12px 0 0 !important;
  }
}
.filter-price__range,
.price_slider_wrapper .ui-slider,
.price_slider { border: none !important; outline: none !important; box-shadow: none !important; }

/* 36.17.5 Принудительно скрываем header-badge когда [hidden] (Kadence иногда переопределяет) */
[hidden] { display: none !important; }
.header-badge[hidden],
.header-badge:empty,
span.header-badge[hidden] { display: none !important; visibility: hidden !important; opacity: 0 !important; }

/* 36.18 Скрыть Kadence breadcrumbs на главной */
body.home .kadence-breadcrumbs,
body.home .breadcrumb,
body.home .woocommerce-breadcrumb,
body.home #breadcrumbs,
body.home nav[aria-label="Breadcrumbs"],
body.home nav.amber-breadcrumbs,
body.front-page .kadence-breadcrumbs,
body.page-template-front-page .kadence-breadcrumbs { display: none !important; }

/* 36.19 My-account login кнопка */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account button.woocommerce-form-login__submit,
.woocommerce-account button[name="login"] {
  width: auto !important;
  min-width: 160px;
  padding: 12px 28px !important;
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font: 500 0.95rem/1 var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  -webkit-text-fill-color: #FFFFFF !important;
}
@media (max-width: 767px) {
  .woocommerce-account .woocommerce-form-login__submit { width: 100% !important; }
}
.woocommerce-account .entry-title,
.woocommerce-account h1 { margin-bottom: 16px !important; }
.woocommerce-account h2 { margin-top: 16px !important; margin-bottom: 12px !important; }

/* 36.20 Унифицированные блоки доставки/оплаты */
.delivery-block,
.payment-block,
.entry-content .gb-container.delivery-block,
.entry-content .gb-container.payment-block {
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 16px;
}

/* 36.21 Галерея товара — единый фон и стрелки */
.product-gallery,
.product-gallery__main {
  background: #F2EEE6;
  border-radius: 8px;
}
.product-gallery__main img,
.woocommerce-product-gallery__image img {
  background: #F2EEE6 !important;
  object-fit: contain;
}
.flex-direction-nav a,
.product-gallery__nav-prev,
.product-gallery__nav-next { display: flex !important; opacity: 1 !important; min-width: 44px; min-height: 44px; }



/* §40 — Workshop /workshop/ страница: убираем карточки-подложки у трёх блоков «40+ млн лет»,
   «100% натуральный», «Сделано в Калининграде». Цвет и шрифт под брендбук. */
.page-workshop .workshop-numbers .big-number,
.workshop-numbers > div.big-number,
.workshop-numbers .big-number {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.page-workshop .workshop-numbers .big-number__value,
.workshop-numbers .big-number__value,
.big-number__value {
  color: var(--color-text) !important;
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
}
.page-workshop .workshop-numbers .big-number__label,
.workshop-numbers .big-number__label,
.big-number__label {
  color: var(--color-text) !important;
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
}

/* §41 — Toolbar каталога: унифицируем шрифт кнопок «Фильтры» и «По умолчанию» (Inter 400). */
.shop-toolbar,
.shop-toolbar *,
.shop-toolbar .shop-toolbar__filter-toggle,
.shop-toolbar .shop-toolbar__sort,
.shop-toolbar select,
.shop-toolbar button,
.amber-filters-toggle,
.amber-orderby,
form.woocommerce-ordering select.orderby {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* §42 — Мобильная модалка фильтров: добавляем кнопку закрытия (если в DOM есть .filters-close),
   ограничиваем высоту, плавный скролл, ползунок без border/outline. */
@media (max-width: 1023px) {
  .amber-filters,
  .amber-filters--modal,
  .shop-filters,
  .shop-filters-modal,
  .filters-modal,
  .mobile-filters {
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: 12px 12px 0 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  .amber-filters__close,
  .filters-close,
  .filters-modal__close,
  .mobile-filters__close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 24px;
    line-height: 1;
    z-index: 10;
  }
  .amber-filters__close::before,
  .filters-close::before,
  .filters-modal__close::before,
  .mobile-filters__close::before { content: '×'; }
}

.amber-filters input[type="range"],
.shop-filters input[type="range"],
.filters-modal input[type="range"],
.mobile-filters input[type="range"],
.price-range input[type="range"],
input.amber-price-slider,
input[type="range"].price-slider {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}
.amber-filters input[type="range"]:focus,
.shop-filters input[type="range"]:focus,
.filters-modal input[type="range"]:focus,
.mobile-filters input[type="range"]:focus,
.price-range input[type="range"]:focus,
input.amber-price-slider:focus,
input[type="range"].price-slider:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* §43 — Точечные фиксы под актуальные классы (после анализа реального HTML).
   - Toolbar каталога: «Фильтры» (.shop-filters-toggle) и «По умолчанию» (#amber-sort) — Inter 400.
   - Мобильная модалка фильтров (.shop-sidebar на ≤1023px): max-height 80vh,
     position полу-внизу (не на полный экран), close-кнопка крупнее, видимая.
   - Слайдер цены (#filter-price-min/max): без border/outline/box-shadow. */

.shop-toolbar,
.shop-toolbar .shop-filters-toggle,
.shop-toolbar .shop-toolbar__sort,
.shop-toolbar .amber-sort,
.shop-toolbar #amber-sort,
.shop-toolbar select,
.shop-toolbar button,
.shop-toolbar span,
.shop-toolbar label {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 1023px) {
  .shop-sidebar.shop-sidebar.shop-sidebar {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    padding-top: 56px !important;
    -webkit-overflow-scrolling: touch;
    transition: transform var(--duration-slow) ease !important;
    transform: translateY(100%);
    box-shadow: 0 -8px 24px rgba(14, 26, 43, 0.18) !important;
  }
  .shop-sidebar.is-open.shop-sidebar.shop-sidebar {
    transform: translateY(0) !important;
    right: 0 !important;
  }
  .shop-sidebar__close.shop-sidebar__close {
    display: inline-flex !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--color-text) !important;
    font-size: 28px;
    line-height: 1;
    z-index: 10;
  }
  .shop-sidebar__close.shop-sidebar__close::before {
    content: '×';
    font-family: var(--font-sans);
    font-weight: 300;
  }
  /* Если иконка/текст внутри кнопки уже есть — спрятать (показываем только ×) */
  .shop-sidebar__close > * { display: none !important; }
}

.shop-sidebar input[type="range"],
.shop-sidebar #filter-price-min,
.shop-sidebar #filter-price-max,
input[type="range"]#filter-price-min,
input[type="range"]#filter-price-max,
.shop-sidebar__group input[type="range"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 !important;
}
.shop-sidebar input[type="range"]:focus,
.shop-sidebar input[type="range"]:active,
.shop-sidebar #filter-price-min:focus,
.shop-sidebar #filter-price-max:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* §44 — Уведомление «Добавлено в корзину» под бренд:
   - Кастомный JS-тост (.toast / .toast--success) — без тени, скругление 6px,
     border-left 3px accent (даже для success — не зелёный), иконка ✓ accent.
   - WC native `.woocommerce-message` (для не-AJAX случаев) уже стилизован в §36.13;
     дополнительно — иконка-галочка через ::before. */

.toast,
.amber-toast {
  background: var(--color-surface) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 14px 18px !important;
}
.toast.toast--success,
.toast--success {
  border-left-color: var(--color-accent) !important;
}
.toast.toast--success .toast__icon,
.toast--success .toast__icon {
  color: var(--color-accent) !important;
}
/* Если у тоста нет SVG-иконки внутри — рисуем ✓ через ::before на success-варианте */
.toast--success:not(:has(.toast__icon))::before,
.amber-toast--success:not(:has(svg))::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  color: var(--color-accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* WC native message — иконка ✓ через ::before, accent цвет, перебивает дефолтный WC font-icon */
.woocommerce-message::before {
  content: '✓' !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  position: static !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}
.woocommerce-message {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.woocommerce-message .button,
.woocommerce-message a.button {
  margin-left: auto !important;
}

/* §45 — Мини-корзина видна над контентом ниже шапки.
   Корень: .site-header { z-index: 100 } создаёт собственный stacking context
   при position: sticky. Если siblings ниже (Hero, sections) имеют свой z-index
   или transform-related stacking context — dropdown .mini-cart может уходить
   под них. Поднимаем header и mini-cart на 1000 / 1100, явно разрешаем
   overflow: visible на header и его inner. */

.site-header,
header.site-header,
body .site-header {
  z-index: 1000 !important;
  overflow: visible !important;
}
.site-header__inner,
.site-header > .amber-container,
.site-header .header-icons,
.site-header__icons {
  overflow: visible !important;
}
.mini-cart,
.site-header .mini-cart,
.header-icons .mini-cart,
.site-header__icons .mini-cart {
  z-index: 1100 !important;
  /* dropdown должен «вырасти» в новый stacking context над содержимым ниже */
  position: absolute !important;
}

/* §46 — Центровка ± в qty-кнопках (расширенный набор селекторов).
   Дополняет §36.10 для кейсов где padding/text-indent/baseline ломали центровку. */

.qty-control button,
.qty-control__minus,
.qty-control__plus,
.cart .qty-control__plus,
.cart .qty-control__minus,
.mini-cart .qty-control__plus,
.mini-cart .qty-control__minus,
.quantity .plus,
.quantity .minus,
.quantity__button,
button.qty-button,
.wc-block-components-quantity-selector__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  min-height: 44px !important;
  min-width: 44px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* §47 — Mini-cart НЕ маскируется. Корень v8.22-фейла:
   `.site-header { mask-image: linear-gradient(...transparent 100%) }` (§36.6-ter)
   применяется ко ВСЕМУ элементу включая абсолютно-позиционированные дети.
   .mini-cart висит ниже шапки (top: 100% + 8px) — в области, где маска alpha=0.
   Решение: переносим фон+маску с самой шапки на её ::before-псевдоэлемент.
   Тогда маска влияет только на фон, а dropdown как реальный child — чист. */

.site-header,
body .site-header,
header.site-header {
  background-image: none !important;
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-composite: add !important;
  mask-composite: add !important;
}

.site-header::before,
body .site-header::before,
header.site-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background-image: url('assets/hero/sea-sunset.jpg?v=4') !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(180deg,
      #000 0%,
      #000 45%,
      rgba(0,0,0,0.92) 60%,
      rgba(0,0,0,0.72) 72%,
      rgba(0,0,0,0.45) 84%,
      rgba(0,0,0,0.18) 94%,
      transparent 100%) !important;
  mask-image: linear-gradient(180deg,
      #000 0%,
      #000 45%,
      rgba(0,0,0,0.92) 60%,
      rgba(0,0,0,0.72) 72%,
      rgba(0,0,0,0.45) 84%,
      rgba(0,0,0,0.18) 94%,
      transparent 100%) !important;
}

/* Гарантия что mini-cart visible поверх всего */
.mini-cart,
.site-header .mini-cart {
  z-index: 1100 !important;
  position: absolute !important;
  /* На случай overflow родителя ICON-кнопки */
  contain: none !important;
}

/* §48 — Убираем белый шов между шапкой и страницей.
   Появился после v8.23 (§47) когда фон шапки переехал на ::before:
   - `.site-header { border-bottom: 1px solid var(--color-border) }` (line 625)
     стал видимой границей, потому что сам header теперь прозрачный, а border
     накладывался поверх линолевого body-фона.
   - `.site-header.is-sticky { box-shadow }` усиливал эффект при scroll. */

.site-header,
body .site-header,
header.site-header,
.site-header.is-sticky,
body .site-header.is-sticky,
header.site-header.is-sticky {
  border-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* §49 — Корзина: убираем плашку у Cart Summary, делаем кнопку «Обновить корзину»
   как Primary, ссылку «Продолжить покупки» — черной. */

/* 1. Плашка — убрать фон/border/тени, оставить текст на фоне страницы */
.cart-summary,
.cart-page__aside.cart-summary,
aside.cart-summary,
.cart-collaterals .cart_totals,
.woocommerce-cart-form .cart_totals {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.cart-summary h2,
.cart-summary > h2,
.cart_totals h2,
.cart_totals > h2 {
  background: transparent !important;
  color: var(--color-text) !important;
  font: 600 1.5rem/1.2 var(--font-serif) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
}

/* 2. Кнопка «Обновить корзину» — Primary (янтарная) как «Оформить заказ» */
button[name="update_cart"],
input[name="update_cart"],
.woocommerce-cart-form button[name="update_cart"],
.shop_table button[name="update_cart"],
.cart .button[name="update_cart"],
.cart input.button[name="update_cart"],
button[name="update_cart"][disabled],
input[name="update_cart"][disabled] {
  background: var(--color-accent) !important;
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius-md, 6px) !important;
  padding: 12px 28px !important;
  font: 500 0.95rem/1 var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: background var(--duration-base, 200ms) ease !important;
}
button[name="update_cart"]:hover,
input[name="update_cart"]:hover {
  background: #B07930 !important;
  background-color: #B07930 !important;
  border-color: #B07930 !important;
}

/* 3. «Продолжить покупки» — чёрный текст */
.return-to-shop,
.return-to-shop a,
.cart-empty + .return-to-shop a,
.wp-block-button__link.wc-block-cart__submit-button + a,
.woocommerce-cart .return-to-shop a,
a.wc-backward,
.wc-backward,
.cart-actions__continue,
.cart-page__continue,
a.cart-page__continue,
a[href*="/shop/"].return-to-shop,
.cart_totals + .return-to-shop a {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  background: transparent !important;
  border: none !important;
}
.return-to-shop a:hover,
a.wc-backward:hover,
.cart-page__continue:hover {
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
}

/* 4. WC Blocks fallback — на случай если используется новый Cart Block,
   где заголовок «Cart Summary» приходит через i18n JS (не gettext) */
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-components-totals-wrapper--cart-totals h2,
.wc-block-cart-items__header-product {
  /* Скрываем оригинальный текст */
  font-size: 0 !important;
  line-height: 0 !important;
}
.wc-block-cart__totals-title::before,
.wp-block-woocommerce-cart-order-summary-heading-block::before {
  content: 'Ваш заказ';
  display: block;
  font: 600 1.5rem/1.2 var(--font-serif);
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
  color: var(--color-text);
}

/* §50 — Корзина: серые подсказки чёрным + скрытие дублирующего add-to-cart notice */

/* 1. .cart-summary__hint («Цена с НДС 22%...») — чёрный */
.cart-summary__hint,
aside.cart-summary .cart-summary__hint,
.cart-page__aside .cart-summary__hint {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* 2. .cart-summary__secure («Безопасная оплата через ЮKassa») — чёрный */
.cart-summary__secure,
aside.cart-summary .cart-summary__secure,
.cart-page__aside .cart-summary__secure {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}
/* Иконка-щиток рядом с «Безопасная оплата» остаётся accent (бренд) */
.cart-summary__secure svg {
  color: var(--color-accent) !important;
}

/* 3. .cart-empty («Загляните в каталог...») — чёрный текст */
.cart-empty,
.cart-empty p,
.cart-empty h2,
.woocommerce-cart .cart-empty,
.woocommerce-cart .cart-empty p {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* 4. Скрыть WC native «X added to cart / Перейти в корзину» notice на самой /cart/.
   Пользователь уже в корзине — видит товар, message избыточен и ломает стиль. */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-message,
body.woocommerce-cart .woocommerce-message,
.woocommerce-cart .wc-block-components-notice-banner,
.woocommerce-cart .wp-block-woocommerce-store-notices,
.cart-page .woocommerce-message,
.cart-page__main > .woocommerce-message {
  display: none !important;
}

/* §51 — Чекаут: вернуть linen-фон, развязать обёртки по ширине, убрать форму логина */

/* 1. Linen-фон на /checkout/ как на главной.
   Раньше body.woocommerce-checkout::before { display: none } перебивало body::before
   (которое position:fixed с linen). Возвращаем block. */
body.woocommerce-checkout::before {
  display: block !important;
}
/* Гасим сплошной фон body на чекауте — он бил поверх linen */
body.woocommerce-checkout,
html body.woocommerce-checkout {
  background-color: transparent !important;
  background-image: none !important;
}

/* 2. Развязываем ширину Kadence/WP-обёрток на /checkout/ — иначе .checkout-page__grid
   сжимается родительским max-width (.page-content 760px, .entry-content и др.). */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .single-content,
.woocommerce-checkout .post-thumbnail-wrap,
.woocommerce-checkout .content-area,
.woocommerce-checkout .site-main > .container,
.woocommerce-checkout .wp-block-post-content,
.woocommerce-checkout .page-content,
body.woocommerce-checkout .page-content,
body.woocommerce-checkout main,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3. Скрываем форму логина «Уже покупали? Нажмите для входа» */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-info.woocommerce-info--login,
.woocommerce-checkout form.woocommerce-form-login,
.woocommerce-checkout .showlogin,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-login {
  display: none !important;
}

/* 4. На /checkout/ карточка «Ваш заказ» — фон льняной, ширина нормальная.
   Из v8.x правая колонка имела .checkout-page__order { background: surface; padding 28; }
   Если правая колонка сейчас стала узкой — это от max-width родителя. После п.2
   ширина восстановится, оставим карточку как раньше. */
@media (min-width: 1024px) {
  .checkout-page__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr) !important;
    gap: 48px !important;
  }
}

/* §52 — Чекаут layout v2: откатываем агрессивный width:100% на Kadence-обёртки,
   используем viewport-trick на самом .checkout-page__grid:
   - grid вылазит на всю ширину viewport
   - центрируется max-width: var(--container-max)
   - левая колонка ровно по левому краю контейнера (где «Оформление заказа»)
   - правая колонка справа с явной шириной */

/* Отменяем width:100%/padding:0 для Kadence-обёрток на чекауте — они ломали
   нормальный sidebar/content layout родителя. Оставляем только max-width:none. */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .single-content,
.woocommerce-checkout .post-thumbnail-wrap,
.woocommerce-checkout .content-area,
.woocommerce-checkout .site-main > .container,
.woocommerce-checkout .wp-block-post-content,
.woocommerce-checkout .page-content {
  max-width: none !important;
  width: auto !important;          /* откатываем 100% — пусть Kadence сам решает */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-container {
  /* не трогаем width — Kadence-родитель пусть рулит */
  max-width: none !important;
}

/* Viewport-trick: грид вырывается на всю ширину viewport, центрируется,
   max-width = var(--container-max) (1280px) */
.checkout-page__grid {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding-left: var(--container-pad-mobile) !important;
  padding-right: var(--container-pad-mobile) !important;
}
@media (min-width: 768px) {
  .checkout-page__grid {
    padding-left: var(--container-pad-tablet) !important;
    padding-right: var(--container-pad-tablet) !important;
  }
}
@media (min-width: 1024px) {
  .checkout-page__grid {
    /* возвращаемся к обычной центровке через max-width на десктопе */
    width: auto !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--container-max, 1280px) !important;
    padding-left: var(--container-pad-desktop) !important;
    padding-right: var(--container-pad-desktop) !important;
    /* Левая колонка — гибкая (Платёжные реквизиты), правая — фикс 380px (Ваш заказ) */
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 48px !important;
  }
}
@media (min-width: 1280px) {
  .checkout-page__grid {
    grid-template-columns: minmax(0, 1fr) 420px !important;
  }
}

/* Левая колонка не выходит за пределы 1fr — клейка к левому краю контейнера */
.checkout-page__col--main {
  min-width: 0 !important;
}
.checkout-page__col--aside {
  min-width: 0 !important;
}

/* §53 — Чекаут layout v3: bullet-proof. Принудительно расширяем ВСЕ обёртки
   shortcode'а до 100% и центрируем grid максимум на 1280px. Откатываем
   viewport-trick из §52 — он мог наследовать broken left/right. */

/* Откат viewport-trick из §52 — возвращаем нормальное поведение */
.checkout-page__grid,
form.checkout.checkout-page > .checkout-page__grid {
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: var(--container-max, 1280px) !important;
  box-sizing: border-box !important;
}

/* Принудительно растянуть всех родителей checkout shortcode'а на 100% */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout form.checkout.checkout-page,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .single-content,
body.woocommerce-checkout .entry-content > *,
body.woocommerce-checkout article.entry,
body.woocommerce-checkout .page-content,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout main.site-main,
body.woocommerce-checkout .content-container,
body.woocommerce-checkout .site-container,
body.woocommerce-checkout .wp-site-blocks {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Padding по горизонтали отменяем только на shortcode-обёртках до grid'a */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.checkout.checkout-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Грид: центрирован, на ≥1024 — 2 колонки */
.checkout-page__grid {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  padding-left: var(--container-pad-mobile, 16px) !important;
  padding-right: var(--container-pad-mobile, 16px) !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
}
@media (min-width: 768px) {
  .checkout-page__grid {
    padding-left: var(--container-pad-tablet, 24px) !important;
    padding-right: var(--container-pad-tablet, 24px) !important;
  }
}
@media (min-width: 1024px) {
  .checkout-page__grid {
    padding-left: var(--container-pad-desktop, 32px) !important;
    padding-right: var(--container-pad-desktop, 32px) !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 48px !important;
  }
}
@media (min-width: 1280px) {
  .checkout-page__grid {
    grid-template-columns: minmax(0, 1fr) 420px !important;
  }
}

/* Сбрасываем left:50%, margin-left:-50vw, отменяющие позицию из §52, чтобы
   на мобайле тоже не вылазили на 100vw */
@media (max-width: 1023px) {
  .checkout-page__grid {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* v8.39 — FAQ ответы: принудительно чистый чёрный (раньше #1E2A35 выглядел как тёмно-серый) */
.amber-accordions .accordion-item__panel,
.amber-accordions .accordion-item__panel *,
.accordion-item__panel,
.accordion-item__panel * {
  color: #000 !important;
}

/* =============================================================
   v8.41 (2026-05-22) — «Матовое стекло» на .amber-callout
   Тёплая бумажная текстура (paper-warm.webp) с полупрозрачностью,
   льняной фон страницы мягко просвечивает сквозь подложку.
   ============================================================= */
.amber-callout {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
  border-left: 4px solid var(--color-accent);
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
  overflow: hidden;
}
.amber-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 280px 280px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.68;
  pointer-events: none;
  border-radius: inherit;
}
.amber-callout::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
.amber-callout > * { position: relative; }
.amber-callout--legal::before { opacity: 0.55; }
.amber-callout--legal { border-left-color: var(--color-text-soft); }

@media (prefers-reduced-motion: no-preference) {
  .amber-callout { transition: box-shadow 0.25s ease; }
}

/* =============================================================
   v8.42 (2026-05-22) — Тоньше текстура + .feature-card на /delivery-payment/
   Размываем зерно (filter: blur), уменьшаем opacity и крупнее тайл.
   Распространяем тот же эффект на 2 .feature-card в секции «Доставка»
   (Самовывоз — бесплатно, Доставка по России), но только в скоупе
   страницы /delivery-payment/ (page-id-20) — чтобы не задевать
   карточки преимуществ на других страницах.
   ============================================================= */
.amber-callout::before {
  background-size: 360px 360px !important;
  opacity: 0.52 !important;
  filter: blur(0.6px);
}

body.page-id-20 .feature-card,
body.page-delivery-payment .feature-card {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
  border-left: 4px solid var(--color-accent);
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
  overflow: hidden;
}
body.page-id-20 .feature-card::before,
body.page-delivery-payment .feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.52;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.page-id-20 .feature-card::after,
body.page-delivery-payment .feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.page-id-20 .feature-card > *,
body.page-delivery-payment .feature-card > * { position: relative; }

/* =============================================================
   v8.43 (2026-05-22) — Эффект матового стекла на .feature-card в /workshop/
   3 блока «Официальное сырьё / Ручная работа / Все документы».
   Те же параметры, что в v8.42 (opacity 0.52, blur 0.6px, тайл 360px).
   ============================================================= */
body.page-id-19 .feature-card,
body.page-workshop .feature-card {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
  border-left: 4px solid var(--color-accent);
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
  overflow: hidden;
}
body.page-id-19 .feature-card::before,
body.page-workshop .feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.52;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.page-id-19 .feature-card::after,
body.page-workshop .feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.page-id-19 .feature-card > *,
body.page-workshop .feature-card > * { position: relative; }

/* =============================================================
   v8.44 (2026-05-22) — Матовое стекло на главной (.home)
   - 3 .feature-card в секции «Преимущества» (Официальное сырьё,
     Ручная работа, Все документы)
   - .product-card в секции «Новинки каталога»
   Те же параметры (opacity 0.52, blur 0.6px, тайл 360px).
   ============================================================= */
body.home .feature-card,
body.page-id-25 .feature-card,
body.home .product-card,
body.page-id-25 .product-card {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
  border-left: 4px solid var(--color-accent);
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
  overflow: hidden;
}
body.home .feature-card::before,
body.page-id-25 .feature-card::before,
body.home .product-card::before,
body.page-id-25 .product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.52;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.home .feature-card::after,
body.page-id-25 .feature-card::after,
body.home .product-card::after,
body.page-id-25 .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.home .feature-card > *,
body.page-id-25 .feature-card > *,
body.home .product-card > *,
body.page-id-25 .product-card > * { position: relative; }

/* =============================================================
   v8.45 (2026-05-22) — Уравнять прозрачность .product-card на главной
   с .feature-card. Перебиваем shorthand background и поднимаем
   opacity ::before для компенсации того, что в карточке товара
   фото занимает большую часть площади.
   ============================================================= */
body.home .product-card,
body.page-id-25 .product-card {
  background: none !important;
  background-color: transparent !important;
}
body.home .product-card::before,
body.page-id-25 .product-card::before {
  opacity: 0.65 !important;
}

/* =============================================================
   v8.46 (2026-05-22) — Финальный фикс фона .product-card на главной
   Проблема v8.45: pseudo ::before с z-index: -2 уходил ниже
   background самой карточки. Если background не перебился —
   текстура невидима. Решение: pseudo на z-index: 0 (выше background,
   ниже content), повышенная специфичность через [class].
   ============================================================= */
html body.home .product-card,
html body.home .product-card[class],
html body.page-id-25 .product-card,
html body.page-id-25 .product-card[class] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.home .product-card::before,
body.page-id-25 .product-card::before {
  z-index: 0 !important;
  opacity: 0.75 !important;
}
body.home .product-card::after,
body.page-id-25 .product-card::after {
  z-index: 0 !important;
}
body.home .product-card > *,
body.page-id-25 .product-card > * {
  position: relative;
  z-index: 1;
}

/* =============================================================
   v8.47 (2026-05-22) — Матовое стекло на .product-card в каталоге
   Покрывает /shop/, /product-category/*, /product-tag/* через
   универсальный селектор body.archive.woocommerce.
   Не задевает single-product (/product/.../) и cart/checkout.
   Новые товары автоматически получают стиль — селектор по классу,
   не по ID.
   ============================================================= */
html body.archive.woocommerce .product-card,
html body.archive.woocommerce .product-card[class] {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-left: 4px solid var(--color-accent);
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
  overflow: hidden;
}
body.archive.woocommerce .product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.75;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.archive.woocommerce .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.archive.woocommerce .product-card > * {
  position: relative;
  z-index: 1;
}

/* =============================================================
   v8.48 (2026-05-22) — Карусель на странице товара + зона фильтров
   Часть 1: .product-card в карусели «С этим товаром покупают»
              на /product/.../ (body.single-product)
   Часть 2: .shop-sidebar__inner — подложка зоны фильтров каталога
              на /shop/, /product-category/*, /product-tag/*
   ============================================================= */

/* --- Часть 1: карусель related products --- */
html body.single-product .product-card,
html body.single-product .product-card[class] {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-left: 4px solid var(--color-accent);
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
  overflow: hidden;
}
body.single-product .product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.75;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.single-product .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.single-product .product-card > * {
  position: relative;
  z-index: 1;
}

/* --- Часть 2: зона фильтров каталога --- */
html body.archive.woocommerce .shop-sidebar,
html body.archive.woocommerce .shop-sidebar[class] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html body.archive.woocommerce .shop-sidebar__inner,
html body.archive.woocommerce .shop-sidebar__inner[class] {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-left: 4px solid var(--color-accent);
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
  overflow: hidden;
}
body.archive.woocommerce .shop-sidebar__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.65;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.archive.woocommerce .shop-sidebar__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.archive.woocommerce .shop-sidebar__inner > * {
  position: relative;
  z-index: 1;
}

/* =============================================================
   v8.49 (2026-05-22) — Фикс зоны фильтров + галерея фото товара
   1. Откат v8.48 для .shop-sidebar__inner (он внутри padding 24px,
      не имел border-radius — ужал ширину и углы стали прямыми).
   2. Применить эффект к .shop-sidebar (внешний контейнер) —
      ширина и border-radius наследуются из исходного правила.
   3. Применить эффект к .product-gallery на странице товара.
   ============================================================= */

/* --- 1) Откат v8.48 для shop-sidebar__inner --- */
html body.archive.woocommerce .shop-sidebar__inner,
html body.archive.woocommerce .shop-sidebar__inner[class] {
  background: inherit !important;
  background-color: transparent !important;
  border-left: 0 !important;
  box-shadow: none !important;
  isolation: auto !important;
  overflow: visible !important;
  position: static !important;
}
html body.archive.woocommerce .shop-sidebar__inner::before,
html body.archive.woocommerce .shop-sidebar__inner::after {
  content: none !important;
}

/* --- 2) Эффект на .shop-sidebar (внешний контейнер) --- */
/* Position (sticky/fixed) и border-radius/padding/width НЕ трогаем. */
html body.archive.woocommerce .shop-sidebar,
html body.archive.woocommerce .shop-sidebar[class] {
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
body.archive.woocommerce .shop-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.65;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.archive.woocommerce .shop-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.archive.woocommerce .shop-sidebar > * {
  position: relative;
  z-index: 1;
}

/* --- 3) Галерея фото на странице товара --- */
html body.single-product .product-gallery,
html body.single-product .product-gallery[class] {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
body.single-product .product-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.65;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.single-product .product-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.single-product .product-gallery > * {
  position: relative;
  z-index: 1;
}

/* =============================================================
   v8.50 (2026-05-22) — Однотонный фон у .product-gallery__main
   Проблема v8.49: у .product-gallery__main был свой
   background: var(--color-surface) (белый), который перекрывал
   текстуру .product-gallery. При object-fit: cover + aspect-ratio
   4/5 фото товара могло оставлять видимые поля — на них светился
   белый. Делаем фон прозрачным — текстура paper-warm.webp с
   opacity 0.65 от .product-gallery будет видна сквозь main.
   ============================================================= */
html body.single-product .product-gallery__main,
html body.single-product .product-gallery__main[class] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* =============================================================
   v8.51 (2026-05-22) — Растворить белый студийный фон фото товара
   Корневая причина «белых полос» сверху и снизу от товара:
   исходные фотографии отсняты на БЕЛОМ фоне (студия). object-fit
   и background:transparent контейнера не помогают — белое внутри
   самой картинки. mix-blend-mode: multiply делает белые пиксели
   "прозрачными" визуально, сохраняя цвет и контур товара.
   Применяем к главному фото галереи и к миниатюрам.
   ============================================================= */
html body.single-product .product-gallery__main img,
html body.single-product .product-gallery__thumb img {
  mix-blend-mode: multiply;
}

/* =============================================================
   v8.52 (2026-05-23) — Финальный фикс галереи фото товара
   1. Снять mix-blend-mode (v8.51) — он не убирал белый внутри
      картинки, только тонировал края.
   2. Вернуть белый фон у .product-gallery__main, чтобы зоны
      "letterbox" сверху/снизу (где первое фото не покрывает
      контейнер 4:5) сливались с белым студийным фоном самого фото.
   3. Убрать default browser focus outline на миниатюрах
      (синяя обводка при клике курсором).
   ============================================================= */

/* 1) Снять mix-blend-mode */
html body.single-product .product-gallery__main img,
html body.single-product .product-gallery__thumb img {
  mix-blend-mode: normal !important;
}

/* 2) Белый фон под main (без бежевых полос вокруг фото) */
html body.single-product .product-gallery__main,
html body.single-product .product-gallery__main[class] {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
}

/* 3) Убрать default outline на фокусе миниатюр */
html body.single-product .product-gallery__thumb,
html body.single-product .product-gallery__thumb:focus,
html body.single-product .product-gallery__thumb:focus-visible,
html body.single-product .product-gallery__thumb:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* =============================================================
   v8.53 (2026-05-23) — Футер: ссылка «Политика обработки данных»
   + уменьшение отступа заголовков колонок на мобайле
   ============================================================= */

/* --- 1) Ссылка "Политика обработки данных" --- */
.footer-privacy-link {
  text-align: center;
  margin: 12px auto 0;
  padding: 0;
  width: 100%;
}
.footer-privacy-link a {
  color: #888888;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}
.footer-privacy-link a:hover,
.footer-privacy-link a:focus {
  color: #333333;
}
@media (max-width: 768px) {
  .footer-privacy-link { text-align: center; }
}

/* --- 2) Мобайл: уменьшить отступы заголовков колонок футера --- */
@media (max-width: 767.98px) {
  .site-footer__col h3 { margin: 0 0 10px; }
  .site-footer__col--accordion summary { padding: 6px 0; }
  .site-footer__col--accordion[open] ul { padding: 4px 0 16px; }
}

/* =============================================================
   v8.54 (2026-05-23) — Ссылка «Политика обработки данных»
   в средней колонке верхней зоны футера на десктопе.
   На мобайле остаётся в нижней зоне (видна v8.53 вставка).
   ============================================================= */

/* 3-колоночный layout верхней зоны на десктопе (≥1024px) */
@media (min-width: 1024px) {
  .site-footer__top {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }
  .site-footer__top > .site-footer__brand,
  .site-footer__top > .site-footer__top-col--privacy,
  .site-footer__top > .site-footer__contacts {
    flex: 1 1 0;
    min-width: 0;
  }
  .site-footer__top > .site-footer__top-col--privacy {
    text-align: center;
    /* Выровнять вертикально с заголовками «ЯнтарьПром» (в brand) и «Связаться» */
    padding-top: 0;
    margin-top: 0;
  }
  .site-footer__top > .site-footer__contacts {
    text-align: right;
  }
  /* На десктопе скрыть старую ссылку в нижней зоне футера */
  .site-footer__bottom > .footer-privacy-link {
    display: none !important;
  }
}

/* Стилизация ссылки в средней колонке (тон тёмного фона футера) */
.site-footer__top-col--privacy .footer-privacy-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
  font-family: inherit;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.site-footer__top-col--privacy .footer-privacy-link:hover,
.site-footer__top-col--privacy .footer-privacy-link:focus {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* На мобайле новая колонка не видна (она в .footer-only-desktop) — */
/* но страхуем явно: */
@media (max-width: 1023.98px) {
  .site-footer__top > .site-footer__top-col--privacy {
    display: none;
  }
}

/* =============================================================
   v8.55 (2026-05-23) — Фикс v8.54: переключение на CSS grid 3-cols
   В v8.54 flex layout привёл к неправильному порядку из-за того,
   что исходный grid + width существующих колонок перебивал
   `flex: 1 1 0`. Grid с 3 явными треками гарантирует порядок:
   brand → col 1 (left), privacy → col 2 (center), contacts → col 3 (right).
   ============================================================= */
@media (min-width: 1024px) {
  .site-footer__top {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
  }
  .site-footer__top > .site-footer__brand {
    text-align: left !important;
    width: auto !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }
  .site-footer__top > .site-footer__top-col--privacy {
    text-align: center !important;
    width: auto !important;
    min-width: 0 !important;
    grid-column: 2 !important;
    /* Поднять текст так, чтобы он был на уровне заголовков
       «ЯнтарьПром» (логотип в brand) и «Связаться» */
    padding-top: 16px !important;
  }
  .site-footer__top > .site-footer__contacts {
    text-align: right !important;
    width: auto !important;
    min-width: 0 !important;
    grid-column: 3 !important;
  }
}

/* =============================================================
   v8.56 (2026-05-23) — Выровнять «Политика обработки данных»
   и «Связаться» по одной горизонтальной линии с центром
   логотипа «ЯнтарьПром».
   ============================================================= */
@media (min-width: 1024px) {
  .site-footer__top > .site-footer__top-col--privacy {
    padding-top: 20px !important;
  }
  .site-footer__top > .site-footer__contacts {
    padding-top: 20px !important;
  }
}

/* v8.57 (2026-05-23) — Корректировка выравнивания: 20px → 28px */
@media (min-width: 1024px) {
  .site-footer__top > .site-footer__top-col--privacy {
    padding-top: 28px !important;
  }
  .site-footer__top > .site-footer__contacts {
    padding-top: 28px !important;
  }
}

/* =============================================================
   v8.58 (2026-05-23) — Шапка: меню в одну строку
   1. «О бренде» в одну строчку (white-space: nowrap)
   2. Равное расстояние между всеми пунктами (gap)
   3. Выровнять по верхнему краю текста (align-items: center)
   ============================================================= */
@media (min-width: 1024px) {
  .site-header__nav {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 24px !important;
  }
  .site-header__nav a {
    white-space: nowrap !important;
    flex-shrink: 0;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
  }
}

/* =============================================================
   v8.60 (2026-05-23) — Унифицировать цвет «Политика обработки данных»
   с остальным текстом футера + выровнять по левому краю на мобайле.
   ============================================================= */

/* Цвет ссылки в нижней зоне (общая для мобайла + десктопа) */
.footer-privacy-link a {
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-privacy-link a:hover,
.footer-privacy-link a:focus {
  color: #FFFFFF !important;
}

/* Десктопная средняя колонка — те же цвета (унификация) */
.site-footer__top-col--privacy .footer-privacy-link {
  color: rgba(255, 255, 255, 0.75) !important;
}
.site-footer__top-col--privacy .footer-privacy-link:hover,
.site-footer__top-col--privacy .footer-privacy-link:focus {
  color: #FFFFFF !important;
}

/* На мобайле (≤1023px) — выровнять по левому краю */
@media (max-width: 1023.98px) {
  .site-footer__bottom > .footer-privacy-link {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* =============================================================
   v8.64 (2026-05-23) — Цвет контактных ссылок на /contacts/
   Делаем tel:, mailto:, t.me/, vk.ru/ ссылки на странице
   контактов чёрными (var(--color-text)), как обычный текст.
   На остальных страницах ссылки остаются янтарными как было.
   ============================================================= */
body.page-id-22 .entry-content a[href^="tel:"],
body.page-id-22 .entry-content a[href^="mailto:"],
body.page-id-22 .entry-content a[href*="t.me/"],
body.page-id-22 .entry-content a[href*="vk.ru/"],
body.page-id-22 .entry-content a[href*="vk.com/"],
body.page-id-22 .page-content a[href^="tel:"],
body.page-id-22 .page-content a[href^="mailto:"],
body.page-id-22 .page-content a[href*="t.me/"],
body.page-id-22 .page-content a[href*="vk.ru/"],
body.page-id-22 .page-content a[href*="vk.com/"] {
  color: var(--color-text) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
body.page-id-22 .entry-content a[href^="tel:"]:hover,
body.page-id-22 .entry-content a[href^="mailto:"]:hover,
body.page-id-22 .entry-content a[href*="t.me/"]:hover,
body.page-id-22 .entry-content a[href*="vk.ru/"]:hover,
body.page-id-22 .entry-content a[href*="vk.com/"]:hover,
body.page-id-22 .page-content a[href^="tel:"]:hover,
body.page-id-22 .page-content a[href^="mailto:"]:hover,
body.page-id-22 .page-content a[href*="t.me/"]:hover,
body.page-id-22 .page-content a[href*="vk.ru/"]:hover,
body.page-id-22 .page-content a[href*="vk.com/"]:hover {
  color: var(--color-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================
   v8.65 (2026-05-23) — Убрать белый фон у чекбокса согласия
   в форме обратной связи (Contact Form 7) на мобайле.
   ============================================================= */
@media (max-width: 767.98px) {
  .wpcf7-acceptance,
  .wpcf7 .wpcf7-acceptance,
  .wpcf7-list-item,
  .wpcf7 .wpcf7-list-item,
  .wpcf7 .wpcf7-list-item-label,
  .wpcf7 .wpcf7-form-control-wrap,
  .wpcf7 label.wpcf7-acceptance,
  .wpcf7 form .wpcf7-acceptance,
  .wpcf7-form input[type="checkbox"],
  .wpcf7-form input[type="checkbox"] + span,
  .wpcf7-form input[type="checkbox"] + label,
  .wpcf7-form .wpcf7-form-control-wrap input[type="checkbox"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
}

/* =============================================================
   v8.66 (2026-05-23) — Подложка чекбокса согласия на /contacts/
   как матовое стекло (paper-warm.webp), аналогично .feature-card
   на главной.
   ============================================================= */
body.page-id-22 .wpcf7-checkbox {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  display: block !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
}
body.page-id-22 .wpcf7-checkbox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.52;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.page-id-22 .wpcf7-checkbox::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.page-id-22 .wpcf7-checkbox > * {
  position: relative;
  z-index: 1;
}
/* Внутренние wrapper'ы и form-control-wrap тоже прозрачные */
body.page-id-22 .wpcf7-form-control-wrap,
body.page-id-22 .wpcf7-list-item,
body.page-id-22 .wpcf7-list-item-label,
body.page-id-22 .wpcf7-checkbox label {
  background: transparent !important;
  background-color: transparent !important;
}

/* =============================================================
   v8.68 (2026-05-23) — Подложка чекбокса CF7 на /contacts/:
   1) Высота: padding 14px 16px (двухстрочный текст помещается).
   2) Ширина: box-sizing: border-box + width: 100% от wrap.
   3) Wrap всех полей формы — display: block; width: 100% (чтобы
      input, textarea и checkbox имели одинаковые границы).
   ============================================================= */

/* Единообразный wrap для всех полей формы — только на /contacts/ */
body.page-id-22 .wpcf7-form .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Подложка чекбокса — full width, box-border, выше vertical padding */
body.page-id-22 .wpcf7-form .wpcf7-form-control.wpcf7-checkbox {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
}

/* =============================================================
   v8.69 (2026-05-23) — Подложка «Ваш заказ» на чекауте:
   матовое стекло как у чекбокса согласия на /contacts/.
   Увеличиваем padding (подложка чуть шире границ текста).
   ============================================================= */
body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout aside.woocommerce-checkout-review-order-wrap,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .checkout-page__grid > aside[class] {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 12px !important;
  padding: 28px 32px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10);
  box-sizing: border-box !important;
}
body.woocommerce-checkout .checkout-page__grid > aside::before,
body.woocommerce-checkout #order_review::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.52;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
}
body.woocommerce-checkout .checkout-page__grid > aside::after,
body.woocommerce-checkout #order_review::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
}
body.woocommerce-checkout .checkout-page__grid > aside > *,
body.woocommerce-checkout #order_review > * {
  position: relative;
  z-index: 1;
}
/* Внутренние элементы review-order (таблица, заголовки) — прозрачные */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  background: transparent !important;
  background-color: transparent !important;
}

/* =============================================================
   v8.70 (2026-05-23) — Чекаут «Ваш заказ»: единая подложка
   1. Убрать дубль текстуры (pseudo на #order_review).
   2. Прозрачные внутренние элементы (h2, #order_review,
      table, thead/tbody/tr/th/td).
   3. Выровнять заголовок и таблицу по левому краю подложки.
   4. Уменьшить padding aside (контент выровнен с main).
   ============================================================= */

/* 1) Снимаем дубликат pseudo с #order_review (оставляем только на aside) */
body.woocommerce-checkout #order_review::before,
body.woocommerce-checkout #order_review::after {
  content: none !important;
}

/* 2) #order_review и все внутренние элементы — прозрачные */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout aside h2,
body.woocommerce-checkout aside h3,
body.woocommerce-checkout .checkout-page__grid > aside h2,
body.woocommerce-checkout .checkout-page__grid > aside h3,
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  isolation: auto !important;
}

/* Восстанавливаем нужные отступы у ячеек таблицы */
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 8px 0 !important;
  vertical-align: top;
}

/* 3) Заголовок «Ваш заказ» — никакого левого отступа */
body.woocommerce-checkout .checkout-page__grid > aside h2,
body.woocommerce-checkout .checkout-page__grid > aside h3 {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* 4) Уменьшаем padding у aside (контент ближе к левому краю) */
body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout .checkout-page__grid > aside[class] {
  padding: 24px 24px !important;
}

/* 5) Таблица — width 100%, без собственных margin */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
}

/* =============================================================
   v8.71 (2026-05-23) — Чекаут «Ваш заказ»: финал
   1. padding-top: 0 — заголовок «Ваш заказ» на одной линии
      с «Платёжные реквизиты».
   2. padding-bottom: 32px — текстура продолжается ниже последней
      строки таблицы (Итого), не обрезает контент.
   3. Универсально прозрачные ВСЕ потомки aside (убрать любую
      оставшуюся белую подложку под заголовком).
   ============================================================= */
body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout .checkout-page__grid > aside[class] {
  padding: 0 24px 32px !important;
}

/* Универсально прозрачные ВСЕ потомки aside */
body.woocommerce-checkout .checkout-page__grid > aside *:not(input):not(button):not(select):not(textarea) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Заголовок «Ваш заказ»: убираем верхний отступ так, чтобы он
   начался от самого верха aside content area */
body.woocommerce-checkout .checkout-page__grid > aside > :first-child,
body.woocommerce-checkout .checkout-page__grid > aside h2,
body.woocommerce-checkout .checkout-page__grid > aside h3 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =============================================================
   v8.72 (2026-05-23) — Чекаут «Ваш заказ»: финальная подстройка
   1. Поднять заголовок «Ваш заказ» выше (margin-top: -24px aside).
   2. Уменьшить отступ от заголовка до таблицы (margin-bottom h2 → 4px).
   3. padding-bottom 24px (≈ 1 см) — отступ от нижней строки.
   ============================================================= */

/* Подъём всего aside выше для выравнивания «Ваш заказ» */
body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout .checkout-page__grid > aside[class] {
  padding: 0 24px 24px !important;
  margin-top: -24px !important;
}

/* Заголовок «Ваш заказ»: меньший margin-bottom = таблица ближе */
body.woocommerce-checkout .checkout-page__grid > aside h2,
body.woocommerce-checkout .checkout-page__grid > aside h3,
body.woocommerce-checkout .checkout-page__grid > aside > :first-child {
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Таблица — без верхнего отступа, чтобы прилегала к заголовку */
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =============================================================
   v8.73 (2026-05-23) — Чекаут «Ваш заказ»: ещё выше + ближе таблица
   1. margin-top aside: -24px → -48px (поднимаем на 48px вверх).
   2. padding-top: 0 у первой строки таблицы (thead th) —
      убираем 8px отступа над «Товар / Подытог».
   ============================================================= */

body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout .checkout-page__grid > aside[class] {
  margin-top: -48px !important;
  padding: 0 24px 24px !important;
}

/* Первая строка таблицы — без padding-top */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:first-child th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:first-child td {
  padding-top: 4px !important;
  padding-bottom: 8px !important;
}

/* Заголовок «Ваш заказ» — отступ ниже минимальный (как label → input) */
body.woocommerce-checkout .checkout-page__grid > aside h2,
body.woocommerce-checkout .checkout-page__grid > aside h3,
body.woocommerce-checkout .checkout-page__grid > aside > :first-child {
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Гарантия: thead/tbody/table — без своих отступов */
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody {
  margin: 0 !important;
  padding-top: 0 !important;
}

/* =============================================================
   v8.74 (2026-05-23) — Поднять таблицу «Ваш заказ» выше
   (заголовок «Ваш заказ» остаётся на месте, таблица сдвигается
   ближе к нему — на уровень «Имя»/«Фамилия» в main).
   ============================================================= */
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  margin-top: -16px !important;
}

/* =============================================================
   v8.75 (2026-05-23) — Чекаут: убрать обрезание + поднять таблицу
   1. overflow: visible на aside — текст не обрезается рамкой.
   2. padding-bottom: 48px — «Итого» помещается внутри подложки.
   3. margin-top таблицы -24px (с -16) — поднята ещё выше.
   ============================================================= */

body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout .checkout-page__grid > aside[class] {
  overflow: visible !important;
  padding: 0 24px 48px !important;
  /* pseudo текстура с border-radius: inherit обрежется по углам сама */
}

body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  margin-top: -24px !important;
}

/* Pseudo текстура: явно скруглить углы, чтобы текстура не вышла */
body.woocommerce-checkout .checkout-page__grid > aside::before,
body.woocommerce-checkout .checkout-page__grid > aside::after {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* =============================================================
   v8.76 (2026-05-23) — Чекаут: убрать перекрытие thead + растянуть подложку
   1. margin-top таблицы -24px → 0 (или -4px) — thead снова виден.
   2. padding-bottom 48px → 72px — нижняя строка с запасом.
   ============================================================= */

body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout .checkout-page__grid > aside[class] {
  padding: 0 24px 72px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  margin-top: 0 !important;
}

/* =============================================================
   v8.77 (2026-05-24) — Чекаут: таблица между v8.76 (0) и v8.75 (-24)
   1. margin-top -12px — таблица ближе к заголовку, без overlap thead.
   2. padding-bottom 96px — подложка точно покрывает «Итого».
   ============================================================= */

body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout .checkout-page__grid > aside[class] {
  padding: 0 24px 96px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  margin-top: -12px !important;
}

/* =============================================================
   v8.78 (2026-05-24) — Чекаут: синхронизация заголовков таблицы с полями
   1. Снять negative margin-top таблицы (вернуть 0).
   2. Увеличить margin-bottom у <h2> «Ваш заказ» — чтобы расстояние
      h2→thead совпадало с h2→label в main («Платёжные реквизиты»→«Имя»).
   3. Усилить transparent у thead th (агрессивный selector).
   ============================================================= */

/* Снимаем negative margin-top, который я ставил в v8.74-77 */
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  margin-top: 0 !important;
}

/* Увеличить отступ от заголовка до таблицы — синхронизация с main */
body.woocommerce-checkout .checkout-page__grid > aside h2,
body.woocommerce-checkout .checkout-page__grid > aside h3,
body.woocommerce-checkout .checkout-page__grid > aside > :first-child {
  margin: 0 0 32px !important;
  padding: 0 !important;
}

/* Усиленная прозрачность thead — несколько селекторов */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead tr,
body.woocommerce-checkout .shop_table thead,
body.woocommerce-checkout .shop_table thead th,
body.woocommerce-checkout .shop_table thead td,
body.woocommerce-checkout aside table thead th,
body.woocommerce-checkout aside table thead td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-text) !important;
  border-bottom: none !important;
}

/* =============================================================
   v8.79 (2026-05-24) — Чекаут: ширина и пропорции таблицы заказа
   На десктопе (≥1024px):
   - Таблица width: 100%
   - Колонка «Товар» — 62%, «Подытог» — 38%
   - Ячейки td/th: padding 12px 16px
   - Слова не обрезаются: word-break: normal; white-space: normal
   ============================================================= */
@media (min-width: 1024px) {
  body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:first-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td:first-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th:first-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td:first-child {
    width: 62% !important;
    text-align: left !important;
  }
  body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td:last-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th:last-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td:last-child {
    width: 38% !important;
    text-align: right !important;
  }
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 12px 16px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    vertical-align: top !important;
  }
}

/* =============================================================
   v8.80 (2026-05-24) — Чекаут: автовысота контейнеров заказа
   1. height: auto, max-height: none — содержимое растёт свободно.
   2. overflow: visible — текст не обрезается рамкой.
   3. Снять position: sticky, если задан — содержимое перестаёт
      ограничиваться viewport-высотой.
   ============================================================= */
body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout .checkout-page__grid > aside[class],
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  top: auto !important;
}

/* Grid items должны растягиваться по содержимому, а не по соседу */
@media (min-width: 1024px) {
  body.woocommerce-checkout .checkout-page__grid {
    align-items: start !important;
  }
}

/* =============================================================
   v8.81 (2026-05-24) — Скрыть дубль заголовка «Платёжные реквизиты»
   WC выводит свой <h3>Billing details</h3> внутри
   .woocommerce-billing-fields. Мой кастомный заголовок уже есть выше.
   ============================================================= */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-billing-fields > legend,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > h3,
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout #customer_details legend {
  display: none !important;
}

/* =============================================================
   v8.83 (2026-05-24) — Чекаут: усиленные версии трёх правок
   1. Усиленный transparent на .shop_table thead th + перекрытие.
   2. Синхронизация col2-set и woocommerce-checkout-review-order
      через одинаковый padding-top.
   3. Колонки таблицы 62/38 + padding 12px 16px (повтор v8.79
      с большей специфичностью).
   4. height: auto + overflow: visible (усиление v8.80).
   ============================================================= */

/* 1) Белый фон thead — максимально широкие селекторы */
body.woocommerce-checkout .shop_table thead,
body.woocommerce-checkout .shop_table thead tr,
body.woocommerce-checkout .shop_table thead th,
body.woocommerce-checkout .shop_table thead td,
html body.woocommerce-checkout aside .shop_table thead th,
html body.woocommerce-checkout .checkout-page__grid > aside .shop_table thead th {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-text) !important;
  border: none !important;
}

/* 2) Синхронизация левой и правой колонок: одинаковый padding-top.
      Снимаем margin-top: -48px (v8.73) — делаем выравнивание
      через одинаковые отступы. */
@media (min-width: 1024px) {
  body.woocommerce-checkout .col2-set,
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .checkout-page__grid > main,
  body.woocommerce-checkout .checkout-page__grid > aside,
  body.woocommerce-checkout .woocommerce-checkout-review-order {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.woocommerce-checkout .checkout-page__grid {
    align-items: start !important;
  }
}

/* 3) Колонки 62/38 + padding 12 16 + word-break normal */
@media (min-width: 1024px) {
  body.woocommerce-checkout .shop_table,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  body.woocommerce-checkout .shop_table th:first-child,
  body.woocommerce-checkout .shop_table td:first-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th:first-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td:first-child {
    width: 62% !important;
    text-align: left !important;
  }
  body.woocommerce-checkout .shop_table th:last-child,
  body.woocommerce-checkout .shop_table td:last-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child {
    width: 38% !important;
    text-align: right !important;
  }
  body.woocommerce-checkout .shop_table th,
  body.woocommerce-checkout .shop_table td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 12px 16px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    vertical-align: top !important;
  }
}

/* 4) Автовысота контейнера: height: auto, overflow: visible */
body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* =============================================================
   v8.84 (2026-05-24) — Чекаут: пропорциональные колонки 58/42
   В v8.32 правая колонка была фиксированная 480px / 560px,
   что узко для таблицы заказа. Меняем на пропорцию 1.4fr / 1fr
   (примерно 58% / 42%).
   ============================================================= */
@media (min-width: 1024px) {
  body.woocommerce-checkout .checkout-page__grid {
    grid-template-columns: 1.4fr 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
}
@media (min-width: 1280px) {
  body.woocommerce-checkout .checkout-page__grid {
    grid-template-columns: 1.35fr 1fr !important;
    gap: 40px !important;
  }
}

/* Aside и review-order — 100% от своей grid-cell */
body.woocommerce-checkout .checkout-page__grid > aside,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100% !important;
  max-width: none !important;
}

/* =============================================================
   v8.85 (2026-05-24) — Чекаут: заголовки «Платёжные реквизиты»
   и «Ваш заказ» на одной горизонтальной линии.
   ============================================================= */
@media (min-width: 1024px) {
  /* Родительские контейнеры — одинаковые отступы (без top) */
  body.woocommerce-checkout .checkout-page__grid > main,
  body.woocommerce-checkout .checkout-page__grid > aside,
  body.woocommerce-checkout .col2-set,
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .woocommerce-checkout-review-order,
  body.woocommerce-checkout #order_review {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Сами заголовки — margin: 0 0 32px (унифицировано) */
  body.woocommerce-checkout .checkout-page__grid > main > h2,
  body.woocommerce-checkout .checkout-page__grid > main > h3,
  body.woocommerce-checkout .checkout-page__grid > aside > h2,
  body.woocommerce-checkout .checkout-page__grid > aside > h3,
  body.woocommerce-checkout .checkout-page__grid > main h2:first-child,
  body.woocommerce-checkout .checkout-page__grid > aside h2:first-child,
  body.woocommerce-checkout #order_review_heading {
    margin: 0 0 32px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  /* Гарантия grid alignment */
  body.woocommerce-checkout .checkout-page__grid {
    align-items: start !important;
  }
}

/* =============================================================
   v8.86 (2026-05-24) — Чекаут: жёсткий фикс выравнивания заголовков
   Превращаем обе колонки в flex-column с align-items: stretch
   start. Первый ребёнок (заголовок) с margin: 0.
   ============================================================= */
@media (min-width: 1024px) {
  /* Grid container */
  body.woocommerce-checkout .checkout-page__grid,
  body.woocommerce-checkout .checkout-page__grid[class] {
    align-items: start !important;
    align-content: start !important;
  }

  /* Обе колонки flex-column с верхом */
  body.woocommerce-checkout .checkout-page__grid > main,
  body.woocommerce-checkout .checkout-page__grid > aside,
  body.woocommerce-checkout .checkout-page__grid > main[class],
  body.woocommerce-checkout .checkout-page__grid > aside[class] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Первый ребёнок любой колонки — без верхних отступов */
  body.woocommerce-checkout .checkout-page__grid > main > :first-child,
  body.woocommerce-checkout .checkout-page__grid > aside > :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Заголовки h2/h3 в обеих колонках — идентичные параметры */
  body.woocommerce-checkout .checkout-page__grid > main h2,
  body.woocommerce-checkout .checkout-page__grid > main h3,
  body.woocommerce-checkout .checkout-page__grid > aside h2,
  body.woocommerce-checkout .checkout-page__grid > aside h3 {
    margin: 0 0 32px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    transform: none !important;
  }

  /* Все wrap-обёртки внутри колонок — без top-margin */
  body.woocommerce-checkout .checkout-page__grid > main > form,
  body.woocommerce-checkout .checkout-page__grid > main > div,
  body.woocommerce-checkout .checkout-page__grid > aside > div,
  body.woocommerce-checkout .checkout-page__grid > aside > section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* WC inline-style override */
  body.woocommerce-checkout .col2-set,
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .woocommerce-checkout-review-order,
  body.woocommerce-checkout #order_review,
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* =============================================================
   v8.87 (2026-05-24) — Чекаут: поднять «Платёжные реквизиты» к уровню «Ваш заказ»
   Корневая причина: h2 «Платёжные реквизиты» сидит внутри <form>
   обёртки, которая имеет свой padding/margin-top. v8.86 правило
   `> main > :first-child` не цепляет h2 через form.
   ============================================================= */
@media (min-width: 1024px) {
  /* form внутри main — снять все top отступы */
  body.woocommerce-checkout .checkout-page__grid > main form,
  body.woocommerce-checkout .checkout-page__grid > main form.checkout,
  body.woocommerce-checkout .checkout-page__grid > main .woocommerce {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Любой ПЕРВЫЙ глубокий потомок main / aside — обнуляем margin-top */
  body.woocommerce-checkout .checkout-page__grid > main *:first-child,
  body.woocommerce-checkout .checkout-page__grid > aside *:first-child {
    margin-top: 0 !important;
  }
  /* h2 в main — поднимаем явно если по умолчанию ниже */
  body.woocommerce-checkout .checkout-page__grid > main h2,
  body.woocommerce-checkout .checkout-page__grid > main form h2,
  body.woocommerce-checkout .checkout-page__grid > main form > h2,
  body.woocommerce-checkout .checkout-page__grid > main .woocommerce h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* «Платёжные реквизиты» внутри form имеет parent (form) и предка
     (main). Если эти обёртки имеют padding-top — обнуляем рекурсивно. */
  body.woocommerce-checkout .checkout-page__grid > main > *,
  body.woocommerce-checkout .checkout-page__grid > main > * > *,
  body.woocommerce-checkout .checkout-page__grid > aside > *,
  body.woocommerce-checkout .checkout-page__grid > aside > * > * {
    padding-top: 0 !important;
  }
  /* notices, breadcrumbs etc. над form могут создавать offset — скрыть пустые */
  body.woocommerce-checkout .woocommerce-notices-wrapper:empty {
    display: none !important;
  }
  body.woocommerce-checkout .woocommerce-notices-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =============================================================
   v8.88 (2026-05-24) — Чекаут: эмпирический фикс выравнивания
   Скрываем notices-wrapper полностью + padding-top: 24px на aside.
   ============================================================= */
@media (min-width: 1024px) {
  /* Скрываем notices-wrapper (он создаёт offset над form) */
  body.woocommerce-checkout .woocommerce-notices-wrapper,
  body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    display: none !important;
  }

  /* Эмпирический сдвиг aside вниз на 24px для выравнивания */
  body.woocommerce-checkout .checkout-page__grid > aside,
  body.woocommerce-checkout .checkout-page__grid > aside[class] {
    padding-top: 24px !important;
  }
}

/* =============================================================
   v8.89 (2026-05-24) — Чекаут: padding-top aside 24 → 48px
   Эмпирически опускаем aside ниже для выравнивания h2.
   ============================================================= */
@media (min-width: 1024px) {
  body.woocommerce-checkout .checkout-page__grid > aside,
  body.woocommerce-checkout .checkout-page__grid > aside[class] {
    padding-top: 48px !important;
  }
}

/* =============================================================
   v8.90 (2026-05-24) — Чекаут: margin-top вместо padding-top
   padding-top расширял aside вверх (подложка вылезала за текст).
   margin-top сдвигает весь aside (включая подложку) вниз —
   подложка остаётся плотно под текстом «Ваш заказ».
   ============================================================= */
@media (min-width: 1024px) {
  body.woocommerce-checkout .checkout-page__grid > aside,
  body.woocommerce-checkout .checkout-page__grid > aside[class] {
    padding-top: 0 !important;
    margin-top: 56px !important;
  }
}

/* =============================================================
   v8.93 (2026-05-24) — Чекаут: вернуть навигацию + фон страницы
   1. body.woocommerce-checkout::before — вернуть фон (был
      display: none со строки 2929 → теперь display: block).
   2. site-header__nav — гарантированно видимый на чекауте на
      десктопе/планшете.
   ============================================================= */

/* 1) Возвращаем body::before на чекауте (фон-сглаживание) */
body.woocommerce-checkout::before {
  display: block !important;
}

/* 2) Навигация в шапке на чекауте */
@media (min-width: 1024px) {
  body.woocommerce-checkout .site-header__nav,
  body.woocommerce-checkout .site-header__nav[class] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.woocommerce-checkout .site-header__nav a {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =============================================================
   v8.95 (2026-05-24) — Чекаут: шапка и фон страницы как на главной
   Старое правило строки 3022 задавало особый фон шапки на чекауте
   (для упрощённого режима, который теперь отключён v8.94). Возвращаем
   базовые стили: background var(--color-surface) + border-bottom.
   ============================================================= */

/* Шапка: фон как у обычной */
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .site-header[class],
html body.woocommerce-checkout .site-header {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Фон страницы (body::before) — точно как на главной */
body.woocommerce-checkout::before,
html body.woocommerce-checkout::before {
  display: block !important;
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: #EEE3CD !important;
  background-image:
    linear-gradient(180deg, rgba(242, 238, 230, 0.15) 0%, rgba(242, 238, 230, 0.08) 50%, rgba(242, 238, 230, 0.15) 100%),
    url('assets/hero/linen-v3.webp') !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  z-index: -10 !important;
  pointer-events: none !important;
}

/* =============================================================
   v8.96 (2026-05-24) — Чекаут: полный body/html bg как на главной
   ============================================================= */

/* HTML / body: полная копия стилей body.home */
html body.woocommerce-checkout {
  background-color: #EEE3CD !important;
  background-image: none !important;
  position: relative !important;
  min-height: 100vh !important;
}
html.woocommerce-checkout,
body.woocommerce-checkout html {
  background: transparent !important;
}

/* body::before — полная копия */
body.woocommerce-checkout::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: #EEE3CD !important;
  background-image:
    linear-gradient(180deg, rgba(242, 238, 230, 0.15) 0%, rgba(242, 238, 230, 0.08) 50%, rgba(242, 238, 230, 0.15) 100%),
    url('assets/hero/linen-v3.webp') !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
  z-index: -10 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Site-header — точно как у обычной */
html body.woocommerce-checkout .site-header {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-top: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: auto !important;
}
html body.woocommerce-checkout .site-header.is-sticky {
  box-shadow: 0 2px 8px rgba(14, 26, 43, 0.06) !important;
}

/* WP/Kadence обёртки прозрачные */
body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-checkout .site-container,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout .content-wrap,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout main#main-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* =============================================================
   v8.97 (2026-05-24) — Чекаут: шапка с sea-sunset + mask-image
   Копирует base правило .site-header (sea-sunset + mask-image)
   и применяет к шапке на чекауте. Перебивает мои v8.95/96
   которые задавали белый фон.
   ============================================================= */
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .site-header[class],
html body.woocommerce-checkout .site-header,
html body.woocommerce-checkout header.site-header {
  position: relative !important;
  background-image: url('assets/hero/sea-sunset.jpg?v=4') !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  background: url('assets/hero/sea-sunset.jpg?v=4') center bottom / cover no-repeat !important;
  min-height: 120px !important;
  z-index: 5 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(180deg,
      #000 0%,
      #000 45%,
      rgba(0,0,0,0.92) 60%,
      rgba(0,0,0,0.72) 72%,
      rgba(0,0,0,0.45) 84%,
      rgba(0,0,0,0.18) 94%,
      transparent 100%) !important;
  mask-image: linear-gradient(180deg,
      #000 0%,
      #000 45%,
      rgba(0,0,0,0.92) 60%,
      rgba(0,0,0,0.72) 72%,
      rgba(0,0,0,0.45) 84%,
      rgba(0,0,0,0.18) 94%,
      transparent 100%) !important;
  padding-bottom: 40px !important;
}
body.woocommerce-checkout .site-header::after,
body.woocommerce-checkout header.site-header::after { display: none !important; }

/* =============================================================
   v8.98 (2026-05-24) — Чекаут: стандартный размер чекбокса согласия
   ============================================================= */
body.woocommerce-checkout .yp-pd-consent input[type="checkbox"],
body.woocommerce-checkout input#yp_pd_consent {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  margin-top: 3px !important;
  vertical-align: middle !important;
  accent-color: var(--color-accent) !important;
  cursor: pointer !important;
}
/* WC privacy policy text — нормальный inline-стиль */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
  margin: 12px 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-soft, #6b6b6b) !important;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--color-accent) !important;
  text-decoration: underline !important;
}

/* =============================================================
   v8.99 (2026-05-24) — Чекаут: чёрный текст privacy + чекбокс 18px
   ============================================================= */

/* 1) Цвет текста privacy — чёрный */
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-privacy-policy-text p,
body.woocommerce-checkout .woocommerce-privacy-policy-text span {
  color: var(--color-text) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--color-accent) !important;
  text-decoration: underline !important;
}

/* 2) Чекбокс согласия — стандартный 18×18 (максимальная специфичность) */
html body.woocommerce-checkout input#yp_pd_consent,
html body.woocommerce-checkout input[name="yp_pd_consent"],
html body.woocommerce-checkout .yp-pd-consent input[type="checkbox"],
html body.woocommerce-checkout form.checkout input#yp_pd_consent,
html body.woocommerce-checkout .yp-pd-consent input,
body.woocommerce-checkout input#yp_pd_consent {
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  max-width: 18px !important;
  min-height: 0 !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  accent-color: var(--color-accent) !important;
  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  transform: none !important;
  zoom: 1 !important;
}

/* Wrapper параграф чекбокса — flex чтобы input и текст были на одной линии */
body.woocommerce-checkout p.yp-pd-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}
body.woocommerce-checkout p.yp-pd-consent label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  cursor: pointer !important;
}

/* =============================================================
   v8.100 (2026-05-25) — Чекаут: матовое стекло на блоке оплаты
   Те же параметры что у aside «Ваш заказ»: paper-warm.webp tile,
   warm gradient, mягкая тень, border-radius 12px, padding 24px.
   ============================================================= */
body.woocommerce-checkout .checkout-page__payment-row,
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 12px !important;
  padding: 24px 24px 32px !important;
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10) !important;
  margin: 24px auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
body.woocommerce-checkout .checkout-page__payment-row::before,
body.woocommerce-checkout #payment::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.52;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
body.woocommerce-checkout .checkout-page__payment-row::after,
body.woocommerce-checkout #payment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
body.woocommerce-checkout .checkout-page__payment-row > *,
body.woocommerce-checkout #payment > * {
  position: relative;
  z-index: 1;
}

/* Все внутренние элементы payment-секции прозрачные */
body.woocommerce-checkout #payment *:not(input):not(button):not(.button):not(select):not(textarea) {
  background: transparent !important;
  background-color: transparent !important;
}
body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout #payment ul.payment_methods li,
body.woocommerce-checkout #payment .payment_box {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* =============================================================
   v8.101 (2026-05-25) — Чекаут: подложка только на ul.payment_methods
   Откатываем v8.100 (подложка на #payment покрывала privacy + submit).
   Применяем эффект только к списку выбора методов оплаты.
   ============================================================= */

/* 1) Откат v8.100 — снять pseudo с #payment и .checkout-page__payment-row */
body.woocommerce-checkout .checkout-page__payment-row::before,
body.woocommerce-checkout .checkout-page__payment-row::after,
body.woocommerce-checkout #payment::before,
body.woocommerce-checkout #payment::after {
  content: none !important;
}
body.woocommerce-checkout .checkout-page__payment-row,
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 24px 0 !important;
  isolation: auto !important;
}

/* 2) Подложка ТОЛЬКО на ul.payment_methods (список выбора методов) */
body.woocommerce-checkout ul.payment_methods,
body.woocommerce-checkout #payment ul.payment_methods {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
  list-style: none !important;
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10) !important;
  box-sizing: border-box !important;
}
body.woocommerce-checkout ul.payment_methods::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp);
  background-size: 360px 360px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.52;
  filter: blur(0.6px);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
body.woocommerce-checkout ul.payment_methods::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.35), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.18), rgba(252, 244, 226, 0.10));
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
body.woocommerce-checkout ul.payment_methods > *,
body.woocommerce-checkout ul.payment_methods li {
  position: relative;
  z-index: 1;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* =============================================================
   v8.102 (2026-05-25) — Чекаут: усилить плотность подложки
   payment-methods (визуально слабее aside из-за меньшего размера).
   ============================================================= */
body.woocommerce-checkout ul.payment_methods::before {
  opacity: 0.75 !important;
}
body.woocommerce-checkout ul.payment_methods::after {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.50), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.28), rgba(252, 244, 226, 0.18)) !important;
}

/* =============================================================
   v8.103 (2026-05-25) — Чекаут: плотный фон ul.payment_methods
   Добавляем полупрозрачный кремовый bg-color прямо на ul —
   плотность не зависит от размера блока.
   ============================================================= */
body.woocommerce-checkout ul.payment_methods,
body.woocommerce-checkout #payment ul.payment_methods {
  background-color: rgba(238, 227, 205, 0.85) !important;
}

/* =============================================================
   v8.104 (2026-05-25) — Чекаут: плотная подложка payment_methods
   через прямой background (без pseudo, чтобы не конфликтовало).
   ============================================================= */

/* Снять pseudo предыдущих версий — они скорее всего и были
   причиной размытости */
html body.woocommerce-checkout ul.payment_methods::before,
html body.woocommerce-checkout ul.payment_methods::after,
html body.woocommerce-checkout #payment ul.payment_methods::before,
html body.woocommerce-checkout #payment ul.payment_methods::after {
  content: none !important;
}

/* Плотный фон + текстура прямо на ul */
html body.woocommerce-checkout ul.payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods,
html body.woocommerce-checkout form.checkout ul.payment_methods,
html body.woocommerce-checkout .checkout-page__payment-row ul.payment_methods {
  background-color: rgba(238, 227, 205, 0.95) !important;
  background-image:
    linear-gradient(rgba(255, 248, 232, 0.20), rgba(252, 244, 226, 0.10)),
    url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp) !important;
  background-size: cover, 360px 360px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center !important;
  background-blend-mode: normal, normal !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
  list-style: none !important;
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10) !important;
  box-sizing: border-box !important;
  isolation: auto !important;
}

/* li внутри — прозрачные */
html body.woocommerce-checkout ul.payment_methods li,
html body.woocommerce-checkout #payment ul.payment_methods li {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}

/* =============================================================
   v8.105 (2026-05-25) — Чекаут: плотный фон на ul + li payment_methods
   Применяем фон на ВСЕ уровни — ul и каждый li — чтобы покрыть
   независимо от того кто из них имеет видимую зону.
   ============================================================= */

/* Снять любые pseudo */
html body.woocommerce-checkout ul.payment_methods::before,
html body.woocommerce-checkout ul.payment_methods::after,
html body.woocommerce-checkout ul.payment_methods li::before,
html body.woocommerce-checkout ul.payment_methods li::after {
  content: none !important;
}

/* ul растягиваем на 100% и плотный фон */
html body.woocommerce-checkout ul.payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods,
html body.woocommerce-checkout form.checkout ul.payment_methods {
  display: block !important;
  width: 100% !important;
  background-color: rgba(238, 227, 205, 0.95) !important;
  background-image:
    linear-gradient(rgba(255, 248, 232, 0.20), rgba(252, 244, 226, 0.10)),
    url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp) !important;
  background-size: cover, 360px 360px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
  list-style: none !important;
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10) !important;
  box-sizing: border-box !important;
  isolation: auto !important;
}

/* li — прозрачный, но display: block чтобы занимать всю ширину ul */
html body.woocommerce-checkout ul.payment_methods > li,
html body.woocommerce-checkout #payment ul.payment_methods > li,
html body.woocommerce-checkout form.checkout ul.payment_methods > li {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

/* payment_box (раскрывающийся раздел с реквизитами) — прозрачный */
html body.woocommerce-checkout .payment_box,
html body.woocommerce-checkout div.payment_box {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* DEBUG v8.test: красный фон, если применится — селектор работает */
html body.woocommerce-checkout ul.payment_methods,
html body.woocommerce-checkout ul.wc_payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods,
html body.woocommerce-checkout #payment ul.wc_payment_methods {
  background: red !important;
  background-color: red !important;
  outline: 3px solid magenta !important;
  outline-offset: 4px !important;
}

/* =============================================================
   v8.106 (2026-05-25) — Чекаут: плотный фон НА ul + li + label
   Снимаем debug-красный, применяем настоящую кремовую плотную
   подложку на все слои чтобы перекрыть любой непрозрачный фон.
   ============================================================= */

/* Снимаем debug-red v8.test */
html body.woocommerce-checkout ul.payment_methods,
html body.woocommerce-checkout ul.wc_payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods,
html body.woocommerce-checkout #payment ul.wc_payment_methods {
  outline: none !important;
}

/* Плотный bg на ul */
html body.woocommerce-checkout ul.payment_methods,
html body.woocommerce-checkout ul.wc_payment_methods {
  background-color: rgba(238, 227, 205, 0.95) !important;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp) !important;
  background-size: 360px 360px !important;
  background-repeat: repeat !important;
  background-blend-mode: multiply !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  box-shadow:
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10) !important;
  list-style: none !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Тот же фон на каждый li — на случай если они непрозрачные */
html body.woocommerce-checkout ul.payment_methods > li,
html body.woocommerce-checkout ul.wc_payment_methods > li,
html body.woocommerce-checkout li.wc_payment_method,
html body.woocommerce-checkout li.payment_method_bacs,
html body.woocommerce-checkout li.payment_method_cod {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  display: block !important;
  width: 100% !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

/* label и payment_box тоже transparent */
html body.woocommerce-checkout ul.payment_methods label,
html body.woocommerce-checkout .payment_box,
html body.woocommerce-checkout div.payment_box {
  background: transparent !important;
  background-color: transparent !important;
}

/* =============================================================
   v8.107 (2026-05-25) — Чекаут: подложка через box-shadow: inset
   v8.100 универсальное правило `#payment *:not(...) { background: transparent }`
   перебивает наш background на ul.payment_methods (несмотря на специфичность).
   Решение: использовать box-shadow inset — он НЕ относится к свойству background
   и не отменяется правилами `background: transparent`.
   ============================================================= */

/* Подложка через box-shadow inset (не background — поэтому никаким `background: transparent` не отменяется) */
html body.woocommerce-checkout ul.payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods {
  box-shadow:
    inset 0 0 0 9999px rgba(238, 227, 205, 0.92),
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin: 16px 0 !important;
  list-style: none !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* =============================================================
   v8.108 (2026-05-25) — Чекаут: добавить paper-warm текстуру
   поверх box-shadow inset подложки.
   ============================================================= */

/* Position: relative для anchor pseudo */
html body.woocommerce-checkout ul.payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods {
  position: relative !important;
  isolation: isolate !important;
}

/* Pseudo ::before — текстура paper-warm.webp */
html body.woocommerce-checkout ul.payment_methods::before,
html body.woocommerce-checkout #payment ul.payment_methods::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url(/wp-content/themes/yantarprom/assets/textures/paper-warm.webp) !important;
  background-size: 360px 360px !important;
  background-repeat: repeat !important;
  background-position: center !important;
  opacity: 0.55 !important;
  filter: blur(0.6px) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  mix-blend-mode: multiply !important;
}

/* Pseudo ::after — warm gradient overlay */
html body.woocommerce-checkout ul.payment_methods::after,
html body.woocommerce-checkout #payment ul.payment_methods::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 248, 232, 0.30), rgba(255, 248, 232, 0) 60%),
    linear-gradient(180deg, rgba(252, 244, 226, 0.15), rgba(252, 244, 226, 0.08)) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* Content (li, label, input radio) — над pseudo */
html body.woocommerce-checkout ul.payment_methods > *,
html body.woocommerce-checkout ul.payment_methods > li,
html body.woocommerce-checkout #payment ul.payment_methods > li {
  position: relative !important;
  z-index: 1 !important;
}

/* =============================================================
   v8.109 (2026-05-25) — Чекаут payment_methods: чуть прозрачнее
   box-shadow inset alpha 0.92 → 0.72
   ============================================================= */
html body.woocommerce-checkout ul.payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods {
  box-shadow:
    inset 0 0 0 9999px rgba(238, 227, 205, 0.72),
    0 1px 2px rgba(30, 42, 53, 0.04),
    0 8px 24px -12px rgba(30, 42, 53, 0.10) !important;
}

/* =============================================================
   v8.110 (2026-05-25) — Чекаут: checkbox согласия и текст на одной линии
   align-items: flex-start (по верху) → center.
   ============================================================= */
html body.woocommerce-checkout p.yp-pd-consent,
html body.woocommerce-checkout #yp_pd_consent_field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}
html body.woocommerce-checkout p.yp-pd-consent label,
html body.woocommerce-checkout #yp_pd_consent_field label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin: 0 !important;
}
html body.woocommerce-checkout input#yp_pd_consent {
  margin: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* =============================================================
   v8.111 (2026-05-25) — Мобильный off-canvas фильтр каталога:
   1. Насыщенный фон через box-shadow inset.
   2. Кнопка закрытия 48×48 в правом верхнем углу (внутри панели).
   3. Padding-top sidebar 72px чтобы close не залазил за шапку.
   ============================================================= */
@media (max-width: 1023.98px) {
  /* Плотный фон через box-shadow inset (обходит transparent overrides) */
  html body.archive.woocommerce .shop-sidebar,
  html body.archive.woocommerce .shop-sidebar[class] {
    box-shadow:
      inset 0 0 0 9999px rgba(238, 227, 205, 0.95),
      -8px 0 24px rgba(14, 26, 43, 0.18) !important;
    padding: 72px 24px 24px !important;
    overflow-y: auto !important;
  }

  /* Кнопка закрытия — sticky в верхнем правом углу */
  html body.archive.woocommerce .shop-sidebar__close,
  html body.archive.woocommerce .shop-sidebar__close[class] {
    display: inline-flex !important;
    position: sticky !important;
    top: 12px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: -60px !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--color-surface, #FFFFFF) !important;
    border: 1px solid var(--color-border, #E6DFD3) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(14, 26, 43, 0.12) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    float: right !important;
  }
  html body.archive.woocommerce .shop-sidebar__close svg,
  html body.archive.woocommerce .shop-sidebar__close img {
    width: 24px !important;
    height: 24px !important;
    color: var(--color-text) !important;
  }
  /* На случай если crosshair в виде символа */
  html body.archive.woocommerce .shop-sidebar__close::before {
    font-size: 28px !important;
    line-height: 1 !important;
  }
}

/* =============================================================
   v8.122 (2026-05-25) — Чекаут: только снять mask-image у header
   ОДНА цель — убрать mask который маскирует children (mini-cart).
   Sea-sunset подложка остаётся, нижний край header станет резким.
   ============================================================= */
body.woocommerce-checkout header.site-header,
body.woocommerce-checkout .site-header,
html body.woocommerce-checkout header.site-header {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

/* =============================================================
   v8.124 (2026-05-25) — Чекаут: минимальный z-index фикс для mini-cart
   Только z-index для header и mini-cart. Ничего больше.
   ============================================================= */
body.woocommerce-checkout header.site-header,
body.woocommerce-checkout .site-header {
  z-index: 9999 !important;
}

body.woocommerce-checkout .mini-cart,
body.woocommerce-checkout #mini-cart {
  z-index: 99999 !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* =============================================================
   v8.125 (2026-05-25) — Чекаут: скрыть mini-cart полностью.
   Клик на иконку корзины редиректит на /cart/ (через JS отдельно).
   ============================================================= */
body.woocommerce-checkout #mini-cart,
body.woocommerce-checkout .mini-cart {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =============================================================
   v8.128 (2026-05-26) — Контакты: чёрный текст вместо серого
   Пользователь: «текст серого цвета сделай черным» (на /contacts/).
   Переопределяем переменную --color-text-soft в скоупе body.page-id-22 —
   все muted-тексты на странице берут основной --color-text (#1E2A35).
   Placeholder остаётся визуально светлее за счёт opacity: 0.6 (строка 282).
   ============================================================= */
body.page-id-22 { --color-text-soft: var(--color-text); }

/* =============================================================
   v8.129 (2026-05-26) — /workshop/ feature-cards: заголовок жирнее,
   текст чёрный, подложка компактнее по вертикали
   Затрагиваем только 3 карточки в секции .workshop-features
   (не задеваем .product-delivery .feature-card и /delivery-payment/).
   На мобайле специальный override строки 3340 (padding: 16px !important)
   продолжает работать поверх — это намеренно.
   ============================================================= */
.workshop-features .feature-card {
  padding-top: 20px;
  padding-bottom: 20px;
}
.workshop-features .feature-card__title {
  font-weight: 600; /* было 500. Crimson Pro подгружен 500;600 */
}
.workshop-features .feature-card__text {
  color: var(--color-text); /* было var(--color-text-soft) — серый */
}

/* =============================================================
   v8.130 (2026-05-26) — /workshop/ feature-cards: убрать пустые <p>
   Источник лишнего пустого места над заголовком (~30-50px) — пустые
   <p></p>, которые браузер вставляет вместо «бродячих» </p> в HTML
   (wpautop в WP делает их рядом с блочными элементами SVG/DIV).
   Прячем все <p> внутри карточки, у которых нет класса feature-card__text.
   ============================================================= */
.workshop-features .feature-card > p:not(.feature-card__text),
.workshop-features .feature-card > p:empty {
  display: none !important;
}


/* =============================================================
   v8.132 (2026-05-26) — /workshop/ feature-cards: возвращаем иконки
   с принудительными стилями и оставляем компактный padding-top
   ============================================================= */
.workshop-features .feature-card { padding-top: 12px !important; }
.workshop-features .feature-card__icon {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  color: var(--color-text) !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.workshop-features .feature-card__icon use {
  stroke: currentColor !important;
  fill: none !important;
}

/* =============================================================
   v8.135 (2026-05-26) — /workshop/ feature-cards: иконки выглядят
   некрасиво, снова скрываем. Подложка остаётся короткой (padding-top
   12px из v8.132 — выше).
   ============================================================= */
.workshop-features .feature-card__icon {
  display: none !important;
}

/* =============================================================
   v8.138 (2026-05-26) — /checkout/ мобайл: убрать дёрганье фона и
   уменьшить масштаб льняной текстуры. На iOS Safari/Chrome Mobile
   background-attachment: fixed на pseudo-элементе с position:fixed
   вызывает jank при momentum-scroll. cover при узком viewport
   растягивает текстуру слишком крупно. На ≤767px заменяем:
   - attachment: fixed → scroll (устраняет дёрганье)
   - size: cover → 240px 240px для текстуры (плиточка normalного
     размера, не растянутая), оставляем cover для градиент-оверлея
   - repeat: no-repeat → repeat для текстуры (теперь плитка)
   ============================================================= */
@media (max-width: 767px) {
  body.woocommerce-checkout::before {
    background-size: cover, 240px 240px !important;
    background-repeat: no-repeat, repeat !important;
    background-attachment: scroll, scroll !important;
  }
}

/* =============================================================
   v8.139 (2026-05-26) — .btn-primary жирнее и крупнее для заметности
   ТЗ пользователя: кнопки «Смотреть каталог» на /about/, /workshop/
   и других страницах визуально теряются (тонкий 500 шрифт, 0.95rem).
   Перебиваем inline-стили (font-weight:500;font-size:0.9-0.95rem)
   и базовое правило через !important. Размер 1rem (16px) — минимум
   по a11y/touch.
   ============================================================= */
.btn-primary {
  font-weight: 600 !important;
  font-size: 1rem !important;
}

/* =============================================================
   v8.140 (2026-05-27) — Иконки соцсетей в первой колонке футера
   под текстом «Натуральный балтийский янтарь.». Размер SVG 28px,
   touch-зона 44×44, gap 14px. mu-plugin yantarprom-footer-socials-move.php
   переносит элемент через JS, чтобы не править footer.php.
   ============================================================= */
.site-footer__col--brand .site-footer__socials {
  display: inline-flex !important;
  gap: 14px !important;
  margin-top: 16px !important;
  margin-left: 0 !important;
}
.site-footer__col--brand .site-footer__social-link {
  width: 44px !important;
  height: 44px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
.site-footer__col--brand .site-footer__social-link svg {
  width: 28px !important;
  height: 28px !important;
}

/* =============================================================
   v8.142 (2026-05-27) — Те же стили иконок и для десктопной brand-колонки
   .site-footer__top-col--brand (на мобайле работает .site-footer__col--brand
   из v8.140; на десктопе другая разметка и нужен отдельный селектор).
   ============================================================= */
.site-footer__top-col--brand .site-footer__socials {
  display: inline-flex !important;
  gap: 14px !important;
  margin-top: 16px !important;
  margin-left: 0 !important;
}
.site-footer__top-col--brand .site-footer__social-link {
  width: 44px !important;
  height: 44px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
.site-footer__top-col--brand .site-footer__social-link svg {
  width: 28px !important;
  height: 28px !important;
}

/* =============================================================
   v8.144 (2026-05-27) — Исправляю селектор для иконок в брендовой
   колонке футера. Реальный класс — .site-footer__brand (а не
   .site-footer__col--brand как я предполагал в v8.140/v8.142).
   Правила: туч-зона 44×44, SVG 28×28, gap 14, margin-top 16,
   margin-left 0 (чтобы не уходили вправо).
   ============================================================= */
.site-footer__brand .site-footer__socials {
  display: inline-flex !important;
  gap: 14px !important;
  margin-top: 16px !important;
  margin-left: 0 !important;
}
.site-footer__brand .site-footer__social-link {
  width: 44px !important;
  height: 44px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
.site-footer__brand .site-footer__social-link svg {
  width: 28px !important;
  height: 28px !important;
}

/* =============================================================
   v8.145 (2026-05-27) — Жёсткие правила видимости иконок в первой
   колонке футера. Перебиваем правило строки 832 (.site-footer__brand svg
   { height: 56px; width: auto; }), которое из-за специфичности или
   порядка могло пересилить v8.144. Также явно ставим белый цвет —
   чтобы на тёмном фоне футера иконки были железно видны.
   ============================================================= */
.site-footer__brand .site-footer__socials,
.site-footer .site-footer__brand .site-footer__socials {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  gap: 14px !important;
  margin-top: 16px !important;
  margin-left: 0 !important;
}
.site-footer__brand .site-footer__social-link,
.site-footer .site-footer__brand .site-footer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  color: #FFFFFF !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.site-footer__brand .site-footer__social-link:hover,
.site-footer .site-footer__brand .site-footer__social-link:hover {
  color: var(--color-accent) !important;
}
.site-footer__brand .site-footer__social-link svg,
.site-footer .site-footer__brand .site-footer__social-link svg {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  display: block !important;
  fill: currentColor !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* === Product gallery enhancements (2026-06-05, P2.1-P2.3) === */
/* P2.1: стрелки и точки навигации FlexSlider; P2.2: убрать полосы вокруг фото; P2.3: центрирование миниатюр */

/* --- P2.1: стрелки --- */
.woocommerce-product-gallery .flex-direction-nav {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-product-gallery .flex-direction-nav li {
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-product-gallery .flex-direction-nav a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 1 !important;
  margin-top: -22px !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  position: absolute !important;
  top: 50% !important;
  z-index: 5 !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
}
.woocommerce-product-gallery .flex-direction-nav a:hover {
  background: #FFFFFF !important;
  transform: scale(1.05);
}
.woocommerce-product-gallery .flex-direction-nav a::before {
  content: '' !important;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
  margin: 0 !important;
  padding: 0;
  font-family: inherit !important;
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev {
  left: 12px !important;
  right: auto !important;
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
  transform: rotate(-135deg);
  margin-left: 3px !important;
}
.woocommerce-product-gallery .flex-direction-nav .flex-next {
  right: 12px !important;
  left: auto !important;
}
.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
  transform: rotate(45deg);
  margin-right: 3px !important;
}

/* --- P2.1: точки-пагинация (если активна вместо thumbs) --- */
.woocommerce-product-gallery .flex-control-paging {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.woocommerce-product-gallery .flex-control-paging li {
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-product-gallery .flex-control-paging li a {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--color-border);
  border-radius: 50%;
  text-indent: -9999px;
  font-size: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  box-shadow: none;
}
.woocommerce-product-gallery .flex-control-paging li a:hover {
  transform: scale(1.2);
}
.woocommerce-product-gallery .flex-control-paging li a.flex-active {
  background: var(--color-accent) !important;
}

/* --- P2.2: убрать пустые полосы вокруг главного фото --- */
.woocommerce-product-gallery {
  position: relative;
}
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-product-gallery__image {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image > a {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}
.woocommerce-product-gallery__image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 600px;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* --- P2.3: центрирование миниатюр --- */
.woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-product-gallery ol.flex-control-thumbs,
.woocommerce-product-gallery ul.flex-control-thumbs {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 0 0 !important;
  margin: 0 !important;
  text-align: center !important;
  list-style: none !important;
}
.woocommerce-product-gallery .flex-control-thumbs li {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
  list-style: none !important;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, border-color 0.2s;
}
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1 !important;
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1 !important;
  border-color: var(--color-accent) !important;
}

/* --- Mobile: touch-target ≥ 44×44, миниатюры компактнее --- */
@media (max-width: 767px) {
  .woocommerce-product-gallery .flex-direction-nav a {
    width: 44px !important;
    height: 44px !important;
  }
  .woocommerce-product-gallery .flex-direction-nav .flex-prev {
    left: 8px !important;
  }
  .woocommerce-product-gallery .flex-direction-nav .flex-next {
    right: 8px !important;
  }
  .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 56px !important;
    height: 56px !important;
  }
  .woocommerce-product-gallery__image img {
    max-height: 70vh;
  }
}

/* === /Product gallery enhancements === */

/* === amber-gallery v2 enhancements (2026-06-06, P2.1-P2.3 переделано под product-gallery__*) === */
/* Старый блок выше остаётся (.flex-direction-nav и пр.) — он холостой, не вредит */

/* --- P2.2: контейнер главного фото без полос вокруг --- */
.product-gallery__main {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important; /* снимаем потенциальный 4/5 от skeleton */
  background: transparent !important;
  line-height: 0 !important;
}
.product-gallery__main > img,
.product-gallery__main > a > img,
.product-gallery__main .product-gallery__stage,
.product-gallery__main .product-gallery__stage > img,
.product-gallery__main .attachment-shop_single,
.product-gallery__main .attachment-woocommerce_single,
.product-gallery__main img[class*='attachment-'] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 600px;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Сам стейдж/wrapper если он есть */
.product-gallery__stage {
  display: block !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

/* --- P2.1: точки-индикаторы (которые JS создаёт amber-gallery.js) --- */
.product-gallery__dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  margin: 0;
  list-style: none;
  line-height: 1;
}
.product-gallery__dot {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--color-border, #E6DFD3);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  font-size: 0;
}
.product-gallery__dot:hover {
  background: var(--color-text-muted, #8C8678);
  transform: scale(1.15);
}
.product-gallery__dot:focus-visible {
  outline: 2px solid var(--color-accent, #D6A259);
  outline-offset: 2px;
}
.product-gallery__dot.is-active {
  background: var(--color-accent, #D6A259) !important;
  transform: scale(1.15);
}

/* --- P2.3: контейнер миниатюр (имя неизвестно, используем известные имена + :has()) --- */
.product-gallery__thumbs,
.product-gallery__thumbs-bar,
.product-gallery__pills,
.product-gallery__nav,
.product-gallery__strip {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
  text-align: center !important;
}
/* :has() — fallback для родителя если имя другое (Chrome 105+, Safari 15.4+, Firefox 121+) */
:where(div, ol, ul, section):has(> .product-gallery__thumb) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
  text-align: center !important;
}

/* --- Каждая миниатюра — button.product-gallery__thumb с img внутри --- */
.product-gallery__thumb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  cursor: pointer !important;
  overflow: hidden !important;
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 auto !important;
  opacity: 0.65 !important;
  transition: opacity 0.2s ease, border-color 0.2s ease !important;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.product-gallery__thumb:hover {
  opacity: 1 !important;
}
.product-gallery__thumb:focus-visible {
  outline: 2px solid var(--color-accent, #D6A259);
  outline-offset: 2px;
}
.product-gallery__thumb.is-active,
.product-gallery__thumb[aria-current='true'] {
  opacity: 1 !important;
  border-color: var(--color-accent, #D6A259) !important;
}
.product-gallery__thumb img,
.product-gallery__thumb .attachment-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Mobile: компактнее + touch-target ≥ 44 для точек/миниатюр --- */
@media (max-width: 767px) {
  .product-gallery__dot {
    width: 12px;
    height: 12px;
  }
  .product-gallery__thumb {
    width: 56px !important;
    height: 56px !important;
  }
  .product-gallery__main > img,
  .product-gallery__main > a > img,
  .product-gallery__main .product-gallery__stage > img,
  .product-gallery__main img[class*='attachment-'] {
    max-height: 70vh;
  }
}

/* === /amber-gallery v2 === */

/* === amber-gallery v3: prev/next arrows (2026-06-06, P2.1.bis) === */

.product-gallery__main {
  position: relative !important;
}

.product-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border, #E6DFD3);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  cursor: pointer;
  opacity: 1;
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 0;
}
.product-gallery__arrow:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  border-color: var(--color-accent, #D6A259);
}
.product-gallery__arrow:focus-visible {
  outline: 2px solid var(--color-accent, #D6A259);
  outline-offset: 2px;
}
.product-gallery__arrow:active {
  transform: translateY(-50%) scale(0.97);
}
.product-gallery__arrow--prev { left: 12px; right: auto; }
.product-gallery__arrow--next { right: 12px; left: auto; }

.product-gallery__arrow > span {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-text, #2C3536);
  border-right: 2px solid var(--color-text, #2C3536);
  pointer-events: none;
}
.product-gallery__arrow--prev > span {
  transform: rotate(-135deg);
  margin-left: 4px;
}
.product-gallery__arrow--next > span {
  transform: rotate(45deg);
  margin-right: 4px;
}

/* Mobile: ближе к краям, тот же touch-target 44×44 */
@media (max-width: 767px) {
  .product-gallery__arrow--prev { left: 8px; }
  .product-gallery__arrow--next { right: 8px; }
}

/* === /amber-gallery v3 arrows === */

/* §43 — Mobile filters modal: header не должен перекрывать модалку (2026-06-07) */
@media (max-width: 1023px) {
  body.no-scroll .site-header { z-index: 1 !important; }
}
/* §44 — Поиск: миниатюры в выпадающем списке результатов (2026-06-07) */
.search-results__list { list-style: none; margin: 0; padding: 0; }
.search-results__count { margin: 0 0 8px; padding: 0 16px; font-size: 0.875rem; color: var(--color-text-muted, #5a5a5a); }
.search-results__msg { margin: 0; padding: 16px; color: var(--color-text-muted, #5a5a5a); }
.search-results__item { border-bottom: 1px solid var(--color-border, #E6DFD3); }
.search-results__item:last-child { border-bottom: none; }
.search-results__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--duration-fast, 150ms) ease;
}
.search-results__link:hover,
.search-results__link:focus-visible { background: rgba(214, 162, 89, 0.08); }
.search-results__thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--color-skeleton, #EFEAE0);
  display: block;
}
.search-results__thumb--placeholder { background: var(--color-skeleton, #EFEAE0); }
.search-results__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-results__title { font: 500 1rem/1.3 var(--font-sans, Inter, sans-serif); color: var(--color-text); }
.search-results__price { font: 600 0.9375rem/1.3 var(--font-sans, Inter, sans-serif); color: var(--color-accent, #D6A259); margin-top: 2px; }
.search-results__price del { opacity: 0.6; margin-right: 6px; font-weight: 400; }
.search-results__snippet { font: 400 0.8125rem/1.4 var(--font-sans, Inter, sans-serif); color: var(--color-text-muted, #6a6a6a); margin-top: 2px; }
.search-results__snippet mark { background: rgba(214, 162, 89, 0.25); color: inherit; padding: 0 2px; border-radius: 2px; }

/* §45 — Trigger «Поиск по каталогу» на /shop/ + close-arrow в search-panel (2026-06-08) */
.shop-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: var(--color-surface, #FAF7F0);
  border: 1.5px solid var(--color-border, #E6DFD3);
  border-radius: 6px;
  font: 400 1rem/1.3 var(--font-sans, Inter, sans-serif);
  color: var(--color-text-muted, #6a6a6a);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast, 150ms) ease, background var(--duration-fast, 150ms) ease;
  min-height: 48px;
}
.shop-search-trigger:hover,
.shop-search-trigger:focus-visible {
  border-color: var(--color-accent, #D6A259);
  background: #fff;
  outline: none;
}
.shop-search-trigger .icon--search {
  color: var(--color-text, #0E1A2B);
  flex-shrink: 0;
}
.shop-search-trigger span { flex: 1 1 auto; }
@media (min-width: 1024px) {
  .shop-search-trigger { display: none; }
}

/* Кнопка «назад» в мобильной search-panel */
.search-panel__close {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text, #0E1A2B);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
}
.search-panel__close:hover,
.search-panel__close:focus-visible {
  color: var(--color-accent, #D6A259);
  outline: none;
}
@media (max-width: 1023px) {
  .search-panel__close { display: flex; }
}

/* §46 — Inline search form на /shop/ (2026-06-08, замена trigger из §45) */
.shop-inline-search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 16px;
  position: relative;
}
.shop-inline-search__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--color-text-muted, #6a6a6a);
  pointer-events: none;
  display: flex;
}
.shop-inline-search input[name="s"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 8px 14px 8px 42px;
  background: var(--color-surface, #FAF7F0);
  border: 1.5px solid var(--color-border, #E6DFD3);
  border-radius: 6px;
  font: 400 1rem/1.3 var(--font-sans, Inter, sans-serif);
  color: var(--color-text, #0E1A2B);
  -webkit-appearance: none;
  appearance: none;
}
.shop-inline-search input[name="s"]:focus {
  border-color: var(--color-accent, #D6A259);
  outline: none;
  background: #fff;
}
.shop-inline-search input[name="s"]::placeholder { color: var(--color-text-muted, #6a6a6a); }
.shop-inline-search .btn-primary { flex: 0 0 auto; min-height: 48px; }
.shop-inline-search__results {
  display: none;
  margin: -8px 0 16px;
  background: #fff;
  border: 1px solid var(--color-border, #E6DFD3);
  border-radius: 6px;
  max-height: 480px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(14, 26, 43, 0.08);
}
.shop-inline-search__results.is-open { display: block; }
@media (min-width: 1024px) {
  .shop-inline-search,
  .shop-inline-search__results { display: none !important; }
}

/* §47 shipping method description под названием метода */
.shipping-method-description {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-soft, rgba(14, 26, 43, 0.6));
    font-weight: 400;
    margin-top: 2px;
}