/* ============================================================================
   PersonaMarket — WooCommerce стили
   Переопределяет/дополняет дефолтные стили WC.
   ============================================================================ */

/* ---- Product loop grid (архивы) ---- */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pm-grid-gap);
  padding: 0;
  margin: 0 0 var(--pm-sp-48);
  list-style: none;
}
@media (max-width: 1199px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.woocommerce ul.products li.product,
ul.products li.product {
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

/* ---- Pagination ---- */
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: var(--pm-sp-8);
  border: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pm-sp-12);
  border: var(--pm-border-w) solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  background: var(--pm-color-bg);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--pm-color-fg);
  color: var(--pm-color-on-primary);
  border-color: var(--pm-color-fg);
}

/* ============================================================================
   Single Product (PDP) — общие WC-стили (cart-form, кнопки)
   Легаси-классы .pm-pdp__* удалены — текущий шаблон использует свою BEM-семью
   (.product-top, .product-info, .buy-row, .stock-deliv) из content-single-product.php.
   ============================================================================ */

/* ---- Add to cart form ---- */
.cart .quantity {
  display: inline-flex;
  align-items: center;
  border: var(--pm-border-w) solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  margin-right: var(--pm-sp-16);
}
.cart .quantity input.qty {
  width: 60px;
  padding: var(--pm-sp-8) var(--pm-sp-12);
  border: 0;
  font: inherit;
  text-align: center;
  background: transparent;
}
.woocommerce button.button,
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce-page button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pm-sp-8);
  padding: var(--pm-sp-12) var(--pm-sp-24);
  font-family: var(--pm-font-sans);
  font-weight: var(--pm-fw-medium);
  font-size: var(--pm-fs-base);
  color: var(--pm-color-on-primary);
  background: var(--pm-color-fg);
  border: var(--pm-border-w) solid var(--pm-color-fg);
  border-radius: var(--pm-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--pm-duration-1) var(--pm-ease);
}
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  opacity: 0.9;
  color: var(--pm-color-on-primary);
  background: var(--pm-color-fg);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt {
  background: var(--pm-color-fg);
  color: var(--pm-color-on-primary);
}

/* ---- Tabs (описание / отзывы) ---- */
.woocommerce-tabs { margin-top: var(--pm-sp-80); }
.woocommerce-tabs .tabs {
  display: flex;
  gap: var(--pm-sp-8);
  padding: 0 !important;
  margin: 0 0 var(--pm-sp-32) !important;
  border-bottom: var(--pm-border-w) solid var(--pm-color-border);
}
.woocommerce-tabs .tabs::before,
.woocommerce-tabs .tabs::after { display: none !important; }
.woocommerce-tabs .tabs li {
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.woocommerce-tabs .tabs li a {
  display: inline-block;
  padding: var(--pm-sp-12) var(--pm-sp-24);
  font-weight: var(--pm-fw-medium);
  color: var(--pm-color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.woocommerce-tabs .tabs li.active a {
  color: var(--pm-color-fg);
  border-bottom-color: var(--pm-color-fg);
}

/* ---- Related products / Upsells ---- */
.related.products,
.upsells.products {
  margin-top: var(--pm-sp-80);
}
.related.products > h2,
.upsells.products > h2 {
  font-family: var(--pm-font-sans);
  font-size: var(--pm-fs-xl);
  font-weight: var(--pm-fw-bold);
  margin-bottom: var(--pm-sp-32);
}

/* ============================================================================
   Checkout
   ============================================================================ */

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--pm-sp-48);
  align-items: start;
}
@media (max-width: 991px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
}
.woocommerce-checkout h3 {
  font-family: var(--pm-font-sans);
  font-size: var(--pm-fs-lg);
  font-weight: var(--pm-fw-bold);
  margin: 0 0 var(--pm-sp-16);
}
.woocommerce form .form-row {
  padding: 0;
  margin: 0 0 var(--pm-sp-16);
}
.woocommerce form .form-row label {
  display: block;
  font-size: var(--pm-fs-sm);
  margin-bottom: var(--pm-sp-8);
  color: var(--pm-color-muted);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: var(--pm-sp-12) var(--pm-sp-16);
  font: inherit;
  border: var(--pm-border-w) solid var(--pm-color-border);
  border-radius: var(--pm-radius-sm);
  background: var(--pm-color-bg);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--pm-color-fg);
  outline-offset: 0;
  border-color: var(--pm-color-fg);
}
#order_review,
#order_review_heading {
  background: var(--pm-color-surface);
  padding: var(--pm-sp-32);
  border-radius: var(--pm-radius-md);
}
#order_review_heading { padding-bottom: 0; }
.woocommerce table.shop_table {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--pm-sp-12) var(--pm-sp-8);
  border-bottom: var(--pm-border-w) solid var(--pm-color-border);
}

/* ---- Messages ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--pm-sp-16) var(--pm-sp-24);
  border-radius: var(--pm-radius-sm);
  border-top: 0;
  margin-bottom: var(--pm-sp-24);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* ============================================================================
   My Account
   ============================================================================ */

/* ---- Logged-in My Account: 2-колонный layout (sidebar + content) ---- */
body.woocommerce-account.logged-in{ background:var(--c-grey-bg); }

/* Обёртка от page.php (только для logged-in account) */
.pm-account-page{
    padding:32px 64px 80px;
    background:var(--c-grey-bg);
}
.pm-account-page__inner{
    max-width:var(--container-w); margin:0 auto;
}
.pm-account-page__title{
    font-family:var(--ff-display); font-weight:700; font-size:36px;
    margin:0 0 24px; color:var(--c-black);
}
.pm-account-page .woocommerce,
body.woocommerce-account.logged-in .woocommerce{
    display:flex !important;
    flex-direction:row;
    gap:24px;
    align-items:flex-start;
    margin:0;
    width:100%;
    max-width:none;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.pm-account-page .woocommerce-MyAccount-navigation{
    flex:0 0 280px !important;
    width:280px !important;
    max-width:280px !important;
    float:none !important;
    margin:0 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content,
.pm-account-page .woocommerce-MyAccount-content{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    float:none !important;
    margin:0 !important;
}

@media (max-width:991px){
    .pm-account-page{ padding:24px 20px 64px; }
    .pm-account-page__title{ font-size:28px; margin:0 0 16px; }
    .pm-account-page .woocommerce,
    body.woocommerce-account.logged-in .woocommerce{
        flex-direction:column !important;
        gap:16px;
    }
    body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
    .pm-account-page .woocommerce-MyAccount-navigation{
        flex:0 0 auto !important;
        width:100% !important;
        max-width:none !important;
    }
}
@media (max-width:767px){
    .pm-account-page{ padding:16px 12px 48px; }
    .pm-account-page__title{ font-size:24px; }
}

/* Заголовок «Мой аккаунт» — h1 в стиле темы */
body.woocommerce-account.logged-in .h1,
body.woocommerce-account.logged-in h1.entry-title,
body.woocommerce-account.logged-in h1.h1{
    font-family:var(--ff-display); font-weight:700; font-size:36px;
    margin:0 0 24px; color:var(--c-black);
}

/* User-card в шапке сайдбара (имя + edit-icon). Figma my-account.
   Рендерится ВНУТРИ <nav class="woocommerce-MyAccount-navigation"> через override
   шаблона `woocommerce/myaccount/navigation.php`. */
.woocommerce-MyAccount-navigation .pm-account__user,
.pm-account__user{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:0 0 16px;
    margin:0 0 16px;
    background:transparent;
    border-bottom:1px solid var(--c-grey-bg-3);
}
.pm-account__user-name{
    flex:1 1 auto; min-width:0;
    font-family:var(--ff-display); font-weight:700; font-size:18px;
    line-height:1.3; color:var(--c-black);
    /* Не дробим по буквам — только по словам. */
    overflow-wrap:break-word; word-break:normal; hyphens:auto;
}
.pm-account__user-edit{
    flex:0 0 28px; width:28px; height:28px;
    display:grid; place-items:center;
    color:var(--c-text-muted);
    background:transparent; border:0; cursor:pointer;
    transition:color .15s;
}
.pm-account__user-edit:hover{ color:var(--c-black); }
.pm-account__user-edit svg{ width:16px; height:16px; }

/* Sidebar nav — белая card с пунктами */
.woocommerce-MyAccount-navigation{
    background:var(--c-white);
    padding:16px 16px 24px;
    align-self:start;
    /* user-card отрисован перед nav — скрываем верхний padding nav, чтобы они слиплись. */
    border-top:0;
}
.pm-account__user + .woocommerce-MyAccount-navigation{
    padding-top:16px;
}
.woocommerce-MyAccount-navigation ul{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:0;
}
.woocommerce-MyAccount-navigation li{
    list-style:none; margin:0; padding:0;
}
.woocommerce-MyAccount-navigation li::before{ display:none !important; }
.woocommerce-MyAccount-navigation a{
    display:block; position:relative;
    padding:12px 16px;
    font-family:var(--ff-display); font-weight:400; font-size:15px;
    color:var(--c-black); text-decoration:none;
    background:transparent;
    transition:color .15s, background .15s;
}
.woocommerce-MyAccount-navigation a:hover{ color:var(--c-accent-burgundy); }
.woocommerce-MyAccount-navigation li.is-active a{
    font-weight:600;
    color:var(--c-black);
    text-decoration:none;  /* без подчёркивания, только bold */
}
/* «Выйти» — отделяем линией сверху. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
    margin-top:16px; padding-top:16px;
    border-top:1px solid var(--c-grey-bg-3);
}

/* Заголовок раздела внутри content (Профиль/Заказы/Бонусы/Избранное). */
.pm-account__h2,
.woocommerce-MyAccount-content > .pm-account__h2{
    font-family:var(--ff-display); font-weight:700; font-size:24px;
    margin:0 0 24px; color:var(--c-black);
}

/* Chips на дашборде. */
.pm-account__chips{
    display:flex; gap:12px; flex-wrap:wrap;
    margin:0 0 32px;
}
.pm-account__chip{
    display:inline-flex; align-items:center; gap:10px;
    height:48px; padding:0 20px;
    background:var(--c-white);
    border:1px solid var(--c-grey-bg-3);
    border-radius:999px;
    font-family:var(--ff-display); font-weight:500; font-size:14px;
    color:var(--c-black); text-decoration:none !important;
    transition:background .15s, color .15s, border-color .15s;
}
.pm-account__chip:hover{ background:var(--c-grey-bg); }
.pm-account__chip-icon{ display:inline-flex; width:18px; height:18px; }
.pm-account__chip-icon svg{ width:18px; height:18px; }
.pm-account__chip--muted{ color:var(--c-text-muted); }
.pm-account__chip--muted .pm-account__chip-icon{ color:var(--c-text-muted); }
.pm-account__chip.is-current{
    background:var(--c-black); color:var(--c-white); border-color:var(--c-black);
}

/* Content — белая card */
.woocommerce-MyAccount-content{
    background:var(--c-white);
    padding:32px 40px;
    min-width:0;
}
.woocommerce-MyAccount-content > p:first-child{ margin-top:0; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{
    font-family:var(--ff-display); font-weight:700; font-size:22px;
    margin:0 0 20px; color:var(--c-black);
}
.woocommerce-MyAccount-content p{
    font-family:var(--ff-body); font-size:15px; line-height:1.6;
    margin:0 0 16px; color:var(--c-black);
}
.woocommerce-MyAccount-content a{
    color:var(--c-black); text-decoration:underline;
}
.woocommerce-MyAccount-content a:hover{ color:var(--c-accent-burgundy); }

/* Внутри сетки избранного / товарных карточек — не подчёркиваем
   (карточка имеет свой стиль: чёрная full-width кнопка без подчёркивания, имя без линии). */
.woocommerce-MyAccount-content .product-card a,
.woocommerce-MyAccount-content .product-card .btn,
.woocommerce-MyAccount-content .product-card__name a,
.woocommerce-MyAccount-content .pm-favorites a,
.woocommerce-MyAccount-content .pm-favorites .btn,
.woocommerce-MyAccount-content .pm-account__chip{
    text-decoration:none !important;
}
.woocommerce-MyAccount-content .product-card a:hover,
.woocommerce-MyAccount-content .product-card .btn:hover{
    color:inherit;
}
.woocommerce-MyAccount-content .product-card__name a{
    color:var(--c-black);
}
.woocommerce-MyAccount-content .product-card__name a:hover{
    color:var(--c-accent-burgundy);
}
/* Кнопка «В корзину» — белый текст на чёрной плашке. */
.woocommerce-MyAccount-content .product-card .btn--primary,
.woocommerce-MyAccount-content .product-card .add_to_cart_button{
    color:var(--c-white) !important;
}
.woocommerce-MyAccount-content .product-card .btn--primary:hover,
.woocommerce-MyAccount-content .product-card .add_to_cart_button:hover{
    color:var(--c-white) !important;
}

/* Welcome-message: ссылка «Выйти» в скобках */
.woocommerce-MyAccount-content .woocommerce-MyAccount-content-welcome,
.woocommerce-MyAccount-content > p:first-of-type strong{
    color:var(--c-black); font-weight:600;
}

/* Таблица заказов */
.woocommerce-MyAccount-content table.shop_table{
    width:100%; border-collapse:collapse; border:0;
    margin:0 0 24px;
}
.woocommerce-MyAccount-content table.shop_table thead th{
    padding:12px 12px; border-bottom:1px solid var(--c-grey-bg-3);
    font-family:var(--ff-display); font-weight:700; font-size:13px;
    color:var(--c-text-muted); text-align:left;
    text-transform:uppercase; letter-spacing:.5px;
}
.woocommerce-MyAccount-content table.shop_table tbody td{
    padding:14px 12px; border-bottom:1px solid var(--c-grey-bg-3);
    font-family:var(--ff-display); font-size:14px;
    color:var(--c-black); vertical-align:middle;
}
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child td{ border-bottom:0; }
.woocommerce-MyAccount-content table.shop_table .order-status{
    display:inline-flex; padding:4px 10px;
    background:var(--c-grey-bg); font-size:12px; font-weight:500;
    border-radius:var(--radius-pill, 999px);
}

/* Кнопки (View, Pay, Cancel и пр.) */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content button[type=submit]{
    display:inline-flex; align-items:center; justify-content:center;
    height:40px; padding:0 16px; min-width:120px;
    background:var(--c-black); color:var(--c-white); border:0; cursor:pointer;
    font-family:var(--ff-display); font-weight:500; font-size:13px;
    text-decoration:none;
    transition:opacity .2s;
    text-transform:none; letter-spacing:0;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type=submit]:hover{ opacity:.85; color:var(--c-white); text-decoration:none; }
.woocommerce-MyAccount-content .button.alt{ background:var(--c-accent-burgundy); }

/* Пагинация заказов */
.woocommerce-MyAccount-content .woocommerce-pagination ul{
    display:flex; gap:4px; justify-content:center; list-style:none; margin:0; padding:0;
}
.woocommerce-MyAccount-content .woocommerce-pagination a,
.woocommerce-MyAccount-content .woocommerce-pagination span{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; padding:0;
    background:var(--c-grey-bg); color:var(--c-black);
    font-family:var(--ff-display); font-size:13px; text-decoration:none;
}
.woocommerce-MyAccount-content .woocommerce-pagination .current{
    background:var(--c-black); color:var(--c-white);
}

/* «Нет заказов» message */
.woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-MyAccount-content .woocommerce-info{
    background:var(--c-grey-bg); border-left:3px solid var(--c-black);
    padding:16px 20px; margin:0 0 16px;
    font-family:var(--ff-display); font-size:14px;
    display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

/* Mobile — одна колонка */
@media (max-width:991px){
    body.woocommerce-account.logged-in .woocommerce{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:767px){
    body.woocommerce-account.logged-in .h1,
    body.woocommerce-account.logged-in h1.entry-title,
    body.woocommerce-account.logged-in h1.h1{ font-size:28px; }
    .woocommerce-MyAccount-content{ padding:24px 20px; }
    .woocommerce-MyAccount-navigation{ padding:8px; }
    .woocommerce-MyAccount-content table.shop_table thead{ display:none; }
    .woocommerce-MyAccount-content table.shop_table tbody tr{
        display:block; padding:12px 0; border-bottom:1px solid var(--c-grey-bg-3);
    }
    .woocommerce-MyAccount-content table.shop_table tbody td{
        display:flex; justify-content:space-between; gap:12px;
        padding:6px 0; border:0;
    }
    .woocommerce-MyAccount-content table.shop_table tbody td::before{
        content:attr(data-title);
        font-weight:500; color:var(--c-text-muted);
    }
}

/* Незалогиненный: страница /my-account/ показывает SMS-форму через шорткод
   (override myaccount/form-login.php). Используем тот же UI-кит что на checkout
   (.field-style серая плашка + floating-label, чёрная кнопка). */

/* Карточка-форма (только одна обёртка, без вложенного контейнера). */
.pm-account-auth{
    background:var(--c-white);
    padding:48px 40px;
    width:100%; max-width:480px;
    margin:32px auto 64px;
    display:flex; flex-direction:column; gap:24px;
    box-sizing:border-box;
}

/* Иконка телефона перед заголовком (как в UI-ките hero-кнопки/арроу) */
.pm-account-auth__icon{
    width:56px; height:56px; margin:0 auto;
    display:grid; place-items:center;
    background:var(--c-grey-bg); border-radius:50%;
    color:var(--c-black);
}
.pm-account-auth__icon svg{ width:24px; height:24px; }

.pm-account-auth__title{
    font-family:var(--ff-display); font-weight:700; font-size:32px; line-height:1.15;
    margin:0; color:var(--c-black); text-align:center; letter-spacing:-.5px;
}
.pm-account-auth__lead{
    font-family:var(--ff-display); font-weight:400; font-size:14px; line-height:1.5;
    color:var(--c-text-muted);
    margin:-16px 0 0; text-align:center;
}

/* ---- Шорткод плагина: контейнер ---- */
.pm-account-auth .sms-auth-container{ max-width:none; margin:0; padding:0; }
.pm-account-auth .sms-auth-form{
    background:transparent; padding:0; border-radius:0; box-shadow:none;
    display:flex; flex-direction:column; gap:20px;
}
.pm-account-auth .sms-auth-step{ display:flex; flex-direction:column; gap:20px; }

/* Дублирующий h3 («Вход через SMS» / «Введите код») скрыт — заголовок наш собственный */
.pm-account-auth .sms-auth-form h3{ display:none; }

/* Описание шага */
.pm-account-auth .sms-auth-description{
    font-family:var(--ff-display); font-weight:400; font-size:14px; line-height:1.55;
    color:var(--c-text-muted);
    margin:0; text-align:center;
}
.pm-account-auth .sms-auth-description strong{
    display:inline-block; margin-top:4px;
    color:var(--c-black); font-weight:600; font-size:18px;
    letter-spacing:.5px;
}

/* ---- Поле в стиле .field из checkout (floating-label) ---- */
.pm-account-auth .sms-auth-field{
    position:relative; margin:0;
    background:var(--c-grey-bg);
    transition:box-shadow .15s;
}
.pm-account-auth .sms-auth-field label{
    position:absolute; left:16px; top:8px; margin:0;
    font-family:var(--ff-display); font-weight:400; font-size:11px;
    color:var(--c-text-muted); pointer-events:none;
    text-transform:uppercase; letter-spacing:.5px;
}
.pm-account-auth .sms-auth-field input[type=tel],
.pm-account-auth .sms-auth-field input[type=text]{
    width:100%; height:64px; padding:24px 16px 8px;
    background:transparent; border:0; border-radius:0;
    font-family:var(--ff-display); font-weight:500; font-size:18px;
    color:var(--c-black); letter-spacing:.5px;
    box-sizing:border-box; outline:none;
}
.pm-account-auth .sms-auth-field:focus-within{
    box-shadow:inset 0 0 0 1.5px var(--c-black); background:var(--c-white);
}

/* Поле кода — крупнее и центрировано (выглядит как OTP) */
.pm-account-auth #sms-auth-step-code .sms-auth-field input{
    text-align:center;
    font-size:24px; font-weight:700; letter-spacing:8px;
    padding:24px 0 8px;
}

/* ---- Кнопка submit ---- */
.pm-account-auth .sms-auth-button{
    width:100%; height:52px; padding:0 24px;
    background:var(--c-black); color:var(--c-white); border:0; border-radius:0;
    font-family:var(--ff-display); font-weight:500; font-size:15px;
    letter-spacing:.5px;
    cursor:pointer; transition:opacity .2s;
}
.pm-account-auth .sms-auth-button:hover{ opacity:.85; }
.pm-account-auth .sms-auth-button:disabled{
    background:var(--c-grey-line); color:var(--c-white); cursor:not-allowed; opacity:1;
}

/* ---- Линки под кнопкой ---- */
.pm-account-auth .sms-auth-actions{
    display:flex; gap:24px; margin:0;
    justify-content:center; align-items:center; flex-wrap:wrap;
    padding-top:8px; border-top:1px solid var(--c-grey-bg-3);
}
.pm-account-auth .sms-auth-link-button{
    background:transparent; border:0; padding:8px 0; cursor:pointer;
    font-family:var(--ff-display); font-weight:500; font-size:13px;
    color:var(--c-text-muted); text-decoration:none;
    text-transform:uppercase; letter-spacing:.5px;
    transition:color .15s;
}
.pm-account-auth .sms-auth-link-button:hover{ color:var(--c-black); }

/* ---- Сообщения (success/error) ---- */
.pm-account-auth .sms-auth-message{
    padding:12px 16px; margin:0;
    font-family:var(--ff-display); font-size:13px; line-height:1.45;
    background:var(--c-grey-bg);
    border-left:3px solid var(--c-accent-burgundy);
}
.pm-account-auth .sms-auth-message.success{
    border-left-color:#39A769; background:rgba(57,167,105,.08); color:#1B6E3F;
}
.pm-account-auth .sms-auth-message.error{
    border-left-color:var(--c-accent-pink); background:rgba(255,52,116,.06); color:var(--c-accent-burgundy);
}

/* ---- Mobile ---- */
@media (max-width:767px){
    .pm-account-auth{
        padding:32px 20px;
        margin:16px 16px 32px;
        max-width:none;
        gap:20px;
    }
    .pm-account-auth__icon{ width:48px; height:48px; }
    .pm-account-auth__icon svg{ width:20px; height:20px; }
    .pm-account-auth__title{ font-size:24px; letter-spacing:0; }
    .pm-account-auth__lead{ font-size:13px; margin-top:-8px; }
    .pm-account-auth .sms-auth-field input[type=tel],
    .pm-account-auth .sms-auth-field input[type=text]{
        height:56px; padding:22px 14px 6px; font-size:16px;
    }
    .pm-account-auth #sms-auth-step-code .sms-auth-field input{
        font-size:22px; letter-spacing:6px;
    }
    .pm-account-auth .sms-auth-button{ height:48px; font-size:14px; }
    .pm-account-auth .sms-auth-actions{ gap:8px; flex-direction:column; padding-top:4px; }
    .pm-account-auth .sms-auth-link-button{ font-size:12px; }
}


/* ============================================
   PDP (Product Detail Page) — Figma 2026-04-27
   ============================================ */

    .product-page{ padding:32px 64px 80px; }
    .product-page__inner{ max-width:var(--container-w); margin:0 auto; }
    .breadcrumbs{ display:flex; gap:8px; font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted); margin-bottom:24px; }
    .product-top{ display:grid; grid-template-columns:minmax(0,680px) minmax(0,1fr); gap:48px; }
    .gallery{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:16px; min-width:0; }
    .gallery__thumbs{ display:flex; flex-direction:column; gap:12px; }
    .gallery__thumb{ width:80px; height:80px; border:1px solid var(--c-grey-bg-3); background:#f4f4f4 center/contain no-repeat; cursor:pointer; transition:border-color .2s; padding:8px; }
    .gallery__thumb.is-active{ border-color:var(--c-black); }
    .gallery__thumb img{ width:100%; height:100%; object-fit:contain; }
    .gallery__main{ aspect-ratio:1/1; min-width:0; max-height:680px; background:#f4f4f4 center/contain no-repeat; padding:48px; position:relative; }
    .gallery__sale{ position:absolute; left:0; top:0; width:40px; height:40px; background:var(--c-accent-pink); color:var(--c-white); display:grid; place-items:center; font-size:24px; font-weight:900; font-family:"Inter"; }
    .product-info{ display:flex; flex-direction:column; gap:20px; }
    .product-info__description{ margin:0; font-family:var(--ff-display); font-weight:400; font-size:18px; line-height:1.4; color:var(--c-text-muted); }
    .product-info__title{ margin:0; font-family:var(--ff-display); font-weight:700; font-size:42px; line-height:1.15; color:var(--c-black); }

    /* Color dropdown */
    .color-select{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      width:100%; padding:14px 16px;
      border:1px solid var(--c-grey-line); background:var(--c-white);
      font-family:var(--ff-display); font-weight:400; font-size:16px; color:var(--c-black);
      cursor:pointer;
    }
    .color-select:hover{ border-color:var(--c-black); }
    .color-select.is-open{ border-color:var(--c-black); }
    .color-select.is-open .color-select__chevron{ transform:rotate(180deg); }
    .color-select__chevron{ transition:transform .15s; }
    .color-select__left{ display:flex; align-items:center; gap:12px; }
    .color-select__dot{ width:16px; height:16px; border-radius:50%; background:#A6BD8C; flex-shrink:0; }
    .color-select__chevron{ width:14px; height:8px; color:var(--c-black); flex-shrink:0; }

    /* Volume options */
    .volumes{ display:flex; gap:12px; flex-wrap:wrap; }
    .volume-opt{
      height:40px; min-width:80px; padding:8px 16px;
      border:1px solid var(--c-black); background:var(--c-white);
      font-family:var(--ff-display); font-weight:400; font-size:16px; color:var(--c-black);
      cursor:pointer; transition:all .2s; white-space:nowrap;
      display:inline-flex; align-items:center; justify-content:center;
      position:relative;
    }
    .volume-opt.is-active{ background:var(--c-white); color:var(--c-black); border-color:var(--c-black); }
    .volume-opt:not(.is-active){ border-color:var(--c-grey-line); color:var(--c-text-muted); }

    /* Color dropdown — listbox для variable products */
    .color-select-wrap{ position:relative; }
    .color-select__list{
      position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5;
      list-style:none; margin:0; padding:4px 0;
      background:var(--c-white); border:1px solid var(--c-black);
      max-height:240px; overflow-y:auto;
    }
    .color-select__list li{
      display:flex; align-items:center; gap:12px;
      padding:10px 16px;
      font-family:var(--ff-display); font-weight:400; font-size:16px; color:var(--c-black);
      cursor:pointer; transition:background .15s;
    }
    .color-select__list li:hover{ background:var(--c-grey-bg); }
    .color-select__list li[aria-selected="true"]{ background:var(--c-grey-bg-3); }

    /* Bonus pill */
    .bonus-pill{
      display:inline-flex; align-items:center; gap:8px;
      background:#FBB3C2; color:var(--c-black);
      padding:4px 16px 4px 4px; border-radius:999px;
      font-family:var(--ff-body); font-weight:400; font-size:14px;
      align-self:flex-start; max-width:100%;
    }
    .bonus-pill__ico{
      width:24px; height:24px; border-radius:50%; background:var(--c-white);
      display:grid; place-items:center; color:#FF3474; flex-shrink:0;
    }
    .bonus-pill__ico svg{ width:14px; height:14px; }

    /* Price */
    .product-info__price{ display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; margin:0; }
    .product-info__price-current{ font-family:var(--ff-display); font-weight:700; font-size:42px; line-height:1; white-space:nowrap; }
    .product-info__price-old{ font-family:var(--ff-display); font-weight:400; font-size:28px; line-height:1; color:var(--c-grey-line-2); text-decoration:line-through; white-space:nowrap; }

    /* Discount note */
    .discount-note{
      margin:-8px 0 0; font-family:var(--ff-body); font-size:14px; color:var(--c-text-muted);
    }

    /* Buy row */
    .buy-row{ display:flex; gap:12px; }
    .buy-row .btn{ flex:1; height:54px; }
    .buy-row .ico-btn{
      width:54px; height:54px; padding:0;
      display:grid; place-items:center;
      background:var(--c-white); border:1px solid var(--c-black); color:var(--c-black);
      transition:background .2s, color .2s; cursor:pointer;
    }
    .buy-row .ico-btn svg{ width:22px; height:20px; display:block; }
    .buy-row .ico-btn:hover{ background:var(--c-black); color:var(--c-white); }
    .buy-row .pm-pdp-fav.is-active{
      background:var(--c-accent-burgundy); color:var(--c-white); border-color:var(--c-accent-burgundy);
    }
    .buy-row .pm-pdp-fav.is-active svg{ fill:currentColor; }
    .buy-row .pm-pdp-fav:disabled{ opacity:.5; cursor:wait; }

    /* Stock & delivery — dot-leader rows */
    .stock-deliv{
      display:flex; flex-direction:column; gap:12px;
      padding:20px 0 0; margin-top:8px;
      border-top:1px solid var(--c-grey-bg-3);
    }
    .stock-deliv__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
    .stock-deliv__title{ font-family:var(--ff-display); font-weight:500; font-size:18px; color:var(--c-black); }
    .stock-deliv__city{
      font-family:var(--ff-display); font-weight:400; font-size:14px;
      color:var(--c-accent-burgundy); text-decoration:none;
    }
    .stock-deliv__row{
      display:flex; align-items:baseline; gap:8px;
      font-family:var(--ff-display); font-size:14px; color:var(--c-black);
    }
    .stock-deliv__label{ flex-shrink:0; }
    .stock-deliv__dots{
      flex:1; border-bottom:1px dotted #C9C9C9;
      transform:translateY(-3px);
    }
    .stock-deliv__value{ flex-shrink:0; color:var(--c-black); }
    .stock-deliv__link{
      align-self:flex-end; margin-top:4px;
      display:inline-flex; align-items:center; gap:6px;
      font-family:var(--ff-display); font-weight:400; font-size:14px;
      color:var(--c-accent-burgundy); text-decoration:none;
    }
    .stock-deliv__link svg{ width:14px; height:10px; }

    /* Tabs under product */
    .product-tabs{ margin-top:64px; padding-top:32px; }
    .tabs-bar{ display:flex; gap:48px; border-bottom:1px solid var(--c-grey-bg-4); margin-bottom:40px; overflow:hidden; }
    .tabs-bar button{
      padding:12px 0; background:transparent; border:0; cursor:pointer;
      font-family:var(--ff-display); font-weight:500; font-size:18px;
      color:var(--c-black); position:relative; transition:opacity .2s;
      white-space:nowrap;
    }
    .tabs-bar button:hover{ opacity:.7; }
    .tabs-bar button.is-active::after{
      content:""; position:absolute; left:0; right:0; bottom:-1px;
      height:2px; background:var(--c-black);
    }
    .tab-content{ display:none; font-family:var(--ff-display); font-size:18px; line-height:1.55; color:var(--c-black); }
    .tab-content.is-active{ display:block; }
    .tab-content p{ margin:0 0 16px; max-width:1100px; }
    .tab-content p:last-child{ margin-bottom:0; }

    /* Specs as dot-leader rows */
    .specs-leader{ display:flex; flex-direction:column; gap:6px; margin-top:32px; }
    .specs-leader__row{
      display:flex; align-items:baseline; gap:8px;
      font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted);
    }
    .specs-leader__key{ flex-shrink:0; }
    .specs-leader__dots{ flex:1; border-bottom:1px dotted #C9C9C9; transform:translateY(-3px); }
    .specs-leader__value{ flex-shrink:0; }

    .reviews{ display:flex; flex-direction:column; gap:24px; }
    .review{ padding:16px 0; border-bottom:1px solid var(--c-grey-bg-4); }
    .review__head{ display:flex; gap:12px; align-items:center; margin-bottom:8px; }
    .review__author{ font-family:var(--ff-display); font-weight:700; }
    .review__date{ font-size:13px; color:var(--c-text-muted); }

    @media (max-width:767px){
      .product-page{ padding:16px 20px 48px; }
      .product-top{ grid-template-columns:1fr; gap:24px; }
      .gallery{ grid-template-columns:1fr; }
      .gallery__thumbs{ flex-direction:row; order:2; overflow-x:auto; }
      .gallery__main{ padding:24px; }
      .product-info__title{ font-size:30px; }
      .product-info__price-current{ font-size:30px; }
      .product-info__price-old{ font-size:30px; }
      /* Tabs → Accordion on mobile (Figma about-product-accordeon) */
      .tabs-bar{ display:none; }
      .product-tabs{ border-top:1px solid var(--c-grey-bg-4); padding-top:0; margin-top:32px; }
      .tab-content{ display:block; max-width:100%; padding:0; border-bottom:1px solid var(--c-grey-bg-4); }
      .tab-content > .acc-head{
        display:flex; justify-content:space-between; align-items:center;
        font-family:var(--ff-display); font-weight:500; font-size:14px;
        color:var(--c-black); padding:14px 0; cursor:pointer; user-select:none;
      }
      .tab-content > .acc-head::after{ content:"+"; font-size:20px; line-height:1; transition:transform .2s; }
      .tab-content.is-active > .acc-head::after{ content:"−"; }
      .tab-content > .acc-body{ display:none; padding-bottom:14px; }
      .tab-content.is-active > .acc-body{ display:block; }
      .specs{ grid-template-columns:1fr; gap:4px 0; }
      .specs dt{ margin-top:12px; }
    }
  

    /* See-also: tag-pill list */
    .see-also-section{ background:var(--c-white); padding:64px 64px 32px; }
    .tag-pill-list{ display:flex; gap:24px; flex-wrap:wrap; }
    .tag-pill{
      display:inline-flex; align-items:center; gap:14px;
      padding:6px 28px 6px 6px;
      border:1px solid var(--c-black); border-radius:999px;
      background:var(--c-white);
      font-family:var(--ff-display); font-weight:500; font-size:18px;
      color:var(--c-black); text-decoration:none;
      transition:opacity .2s;
    }
    .tag-pill:hover{ opacity:.7; }
    .tag-pill__dot{ width:42px; height:42px; border-radius:50%; background:var(--c-grey-bg-3); flex-shrink:0; }

    /* Bleed-right slider (same as home.html) */
    .section--bleed-right{ overflow:hidden; }
    .section--bleed-right .product-slider{
      margin-right: calc(-1 * (100vw - 100%) / 2 - var(--page-pad-x));
      padding-right:0;
    }
    .product-card__desc,
    .product-card__name,
    .product-card__price{ padding-left:16px; padding-right:16px; }

    /* Гарантия что текст в карточке не вылезает за её правую границу:
       обрезка по 3 строки + жёсткий break-word. */
    .product-card__name{
        display:-webkit-box !important;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden !important;
        text-overflow:ellipsis;
        word-break:break-word;
        overflow-wrap:break-word;
    }
    .product-card{ overflow:hidden; }

    /* Recs (slider, bleed-right) */
    .recs-section{ background:var(--c-grey-bg); padding:48px 0 80px; overflow:hidden; }
    .recs-section .container{ max-width:var(--container-w); margin:0 auto; padding:0 var(--page-pad-x); }
    .rec-slider{
      display:flex; gap:32px; overflow-x:auto;
      scroll-snap-type:x mandatory; padding-bottom:8px;
      scrollbar-width:none;
      margin-right: calc(-1 * (100vw - 100%) / 2 - var(--page-pad-x));
    }
    .rec-slider::-webkit-scrollbar{ display:none; }
    .rec-frame{
      position:relative; height:380px; flex:0 0 480px;
      background:#D4D6CB center/cover no-repeat;
      padding:24px;
      display:flex; flex-direction:column; justify-content:flex-end;
      scroll-snap-align:start;
      text-decoration:none;
      transition:opacity .2s;
    }
    .rec-frame:hover{ opacity:.92; }
    .rec-frame__btn{
      background:var(--c-white); color:var(--c-black);
      min-height:54px; padding:12px 24px;
      font-family:var(--ff-display); font-weight:500; font-size:18px; line-height:1.3;
      text-align:center;
      /* Длинные заголовки переносим на 3 строки. */
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
      overflow:hidden; text-overflow:ellipsis;
      word-break:break-word; overflow-wrap:break-word;
    }
    @media (max-width:767px){
      .see-also-section{ padding:32px 20px 24px; }
      .recs-section{ padding:32px 0 48px; }
      .recs-section .container{ padding:0 20px; }
      .rec-slider{ margin-right: calc(-1 * (100vw - 100%) / 2 - 20px); gap:16px; }
      .rec-frame{ min-height:280px; height:auto; flex:0 0 280px; padding:16px; }
      .rec-frame__btn{ min-height:44px; font-size:14px; -webkit-line-clamp:4; }
      .tag-pill-list{ flex-direction:column; align-items:stretch; gap:12px; }
      .tag-pill{ width:100%; padding:8px 24px 8px 8px; font-size:15px; }
      .tag-pill__dot{ width:36px; height:36px; }
      .see-also-section h2{ font-size:24px; margin-bottom:20px !important; }

      /* С этим покупают slider on mobile */
      .section--bleed-right .product-slider{
        margin-right: calc(-1 * (100vw - 100%) / 2 - 20px);
      }

      /* Product info tweaks */
      .product-info{ gap:16px; }
      .product-info__description{ font-size:15px; line-height:1.4; }
      .stock-deliv__title{ font-size:16px; }

      /* Tabs section margin */
      .product-tabs{ margin-top:32px; }
    }


/* Hide accordion-head on desktop (tabs-bar отвечает за заголовки) */
.tab-content > .acc-head{ display:none; }

/* ---------- Reviews tab (PDP, задача 7.5) ---------- */
.pm-reviews{
  font-family:var(--ff-display); color:var(--c-black);
  display:flex; flex-direction:column; gap:32px;
  max-width:900px;
}
.pm-reviews__heading{
  font-family:var(--ff-display); font-weight:700; font-size:24px; line-height:1.3;
  margin:0 0 16px;
}
.pm-reviews .commentlist{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:24px;
}
.pm-reviews .commentlist li.comment{
  border-bottom:1px solid var(--c-grey-bg-3);
  padding-bottom:24px;
}
.pm-reviews .commentlist li.comment:last-child{ border-bottom:0; }
.pm-reviews .comment_container{ display:flex; gap:16px; align-items:flex-start; }
.pm-reviews .avatar{
  width:44px; height:44px; border-radius:50%;
  flex-shrink:0; background:var(--c-grey-bg);
}
.pm-reviews .comment-text{ flex:1; min-width:0; }
.pm-reviews .meta{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline;
  margin:0 0 8px; font-size:14px; color:var(--c-text-muted);
}
.pm-reviews .meta strong{ color:var(--c-black); font-weight:600; font-size:15px; }
.pm-reviews .description p{ margin:0 0 8px; font-size:16px; line-height:1.55; }

/* Star rating (наследует WC `.star-rating`, перекрашиваем под тёмный) */
.pm-reviews .star-rating{
  position:relative; display:inline-block;
  width:5.4em; height:1em; line-height:1; font-size:1em;
  font-family:"Inter", "Roboto", sans-serif;
  overflow:hidden;
}
.pm-reviews .star-rating::before{
  content:"\2606\2606\2606\2606\2606";
  color:var(--c-grey-line);
  letter-spacing:.2em;
  position:absolute; left:0; top:0;
}
.pm-reviews .star-rating span{
  display:block; overflow:hidden; padding-top:1.5em;
}
.pm-reviews .star-rating span::before{
  content:"\2605\2605\2605\2605\2605";
  color:var(--c-black);
  letter-spacing:.2em;
  position:absolute; left:0; top:0;
}

/* Comment form */
.pm-reviews #review_form_wrapper{
  background:var(--c-grey-bg);
  padding:24px;
  margin-top:16px;
}
.pm-reviews__form-heading,
.pm-reviews .comment-reply-title{
  font-family:var(--ff-display); font-weight:700; font-size:20px;
  margin:0 0 16px;
}
.pm-reviews .comment-form,
.pm-reviews #commentform{
  display:flex; flex-direction:column; gap:16px;
}
.pm-reviews .comment-form p,
.pm-reviews #commentform p{
  display:flex; flex-direction:column; gap:6px; margin:0;
}
.pm-reviews .comment-form label,
.pm-reviews #commentform label{
  font-family:var(--ff-display); font-size:14px; font-weight:500; color:var(--c-black);
}
.pm-reviews .required{ color:var(--c-accent-pink); }
.pm-reviews .comment-form input[type="text"],
.pm-reviews .comment-form input[type="email"],
.pm-reviews .comment-form textarea,
.pm-reviews .comment-form select{
  width:100%; padding:12px 14px;
  background:var(--c-white); border:1px solid var(--c-grey-line);
  font-family:var(--ff-display); font-size:16px; color:var(--c-black);
  transition:border-color .2s;
}
.pm-reviews .comment-form input[type="text"]:focus,
.pm-reviews .comment-form input[type="email"]:focus,
.pm-reviews .comment-form textarea:focus,
.pm-reviews .comment-form select:focus{
  outline:0; border-color:var(--c-black);
}
.pm-reviews .comment-form textarea{ min-height:120px; resize:vertical; }
.pm-reviews .comment-form-rating select{ max-width:240px; }
.pm-reviews .form-submit input[type="submit"],
.pm-reviews .form-submit .submit{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:12px 24px;
  background:var(--c-text-3); color:var(--c-white); border:0;
  font-family:var(--ff-body); font-weight:500; font-size:16px;
  cursor:pointer; transition:background .2s;
}
.pm-reviews .form-submit input[type="submit"]:hover,
.pm-reviews .form-submit .submit:hover{ background:var(--c-accent-olive); }
.pm-reviews .woocommerce-noreviews{
  margin:0; padding:16px; background:var(--c-grey-bg);
  font-style:italic; color:var(--c-text-muted);
}
.pm-reviews .must-log-in{
  margin:0; padding:16px; background:var(--c-grey-bg);
  border-left:3px solid var(--c-accent-pink);
}
.pm-reviews .must-log-in a{ color:var(--c-accent-burgundy); text-decoration:underline; }

@media (max-width:767px){
  .pm-reviews .comment_container{ flex-direction:column; gap:8px; }
  .pm-reviews .avatar{ width:36px; height:36px; }
  .pm-reviews #review_form_wrapper{ padding:16px; }
  .pm-reviews__heading{ font-size:20px; }
}


/* ============================================
   Catalog (Shop archive) — Figma 2026-04-27
   ============================================ */

    .catalog-head{ padding:48px 64px 24px; background:var(--c-grey-bg); }
    .catalog-head .breadcrumbs{ display:flex; gap:8px; font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted); margin-bottom:16px; }
    .catalog-head .breadcrumbs a:hover{ color:var(--c-accent-burgundy); }
    .catalog-head h1{ font-family:var(--ff-roboto); font-size:48px; }
    .catalog-layout{ padding:32px 64px 112px; background:var(--c-grey-bg); }
    .catalog-inner{ max-width:var(--container-w); margin:0 auto; display:grid; grid-template-columns:264px 1fr; gap:32px; }
    .filters{ background:var(--c-white); padding:24px; display:flex; flex-direction:column; gap:24px; }
    .filter-group{ display:flex; flex-direction:column; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--c-grey-bg-4); }
    .filter-group:last-child{ border-bottom:0; padding-bottom:0; }
    .filter-group__title{ font-family:var(--ff-display); font-weight:700; font-size:16px; }
    .filter-check{ display:flex; gap:8px; align-items:center; font-family:var(--ff-display); font-size:14px; cursor:pointer; }
    .filter-check input{ width:16px; height:16px; accent-color:var(--c-black); }
    .filter-check .count{ color:var(--c-text-muted); margin-left:auto; }
    .range{ display:flex; gap:8px; }
    .range input{ flex:1; min-width:0; height:40px; padding:8px 12px; border:1px solid var(--c-grey-line); background:var(--c-white); font-family:var(--ff-display); font-size:14px; }
    .chips{ display:flex; gap:8px; flex-wrap:wrap; }
    .chip{ padding:6px 12px; border:1px solid var(--c-grey-line); border-radius:var(--radius-pill); font-family:var(--ff-display); font-size:14px; cursor:pointer; transition:all .2s; }
    .chip.is-active, .chip:hover{ background:var(--c-black); color:var(--c-white); border-color:var(--c-black); }
    .catalog-main{ display:flex; flex-direction:column; gap:24px; }
    .catalog-toolbar{ display:flex; justify-content:space-between; align-items:center; background:var(--c-white); padding:16px 24px; }
    .catalog-toolbar__count{ font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted); }
    .sort{ display:flex; gap:8px; align-items:center; font-family:var(--ff-display); font-size:14px; }
    .sort select{ height:36px; padding:6px 12px; border:1px solid var(--c-grey-line); background:var(--c-white); }
    .grid-4{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .pagination{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
    .pagination a{ width:40px; height:40px; display:grid; place-items:center; background:var(--c-white); font-family:var(--ff-display); font-size:14px; transition:all .2s; }
    .pagination a:hover, .pagination a.is-active{ background:var(--c-black); color:var(--c-white); }
    /* Filters collapsible wrapper (desktop = always visible, mobile = <details>) */
    .filters-details{ display:contents; }
    .filters-summary{ display:none; }

    @media (max-width:767px){
      .catalog-head{ padding:24px 20px; }
      .catalog-head h1{ font-size:28px; margin:0; }
      .catalog-head .breadcrumbs{
        font-size:13px; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap;
        scrollbar-width:none; margin-bottom:12px;
      }
      .catalog-head .breadcrumbs::-webkit-scrollbar{ display:none; }

      .catalog-layout{ padding:12px 16px 48px; }
      .catalog-inner{ grid-template-columns:minmax(0,1fr); gap:12px; }
      .catalog-main{ min-width:0; }

      /* Make <details> render as a normal block with bg on mobile */
      .filters-details{ display:block; background:var(--c-white); }
      .filters-summary{
        display:flex; justify-content:space-between; align-items:center;
        padding:14px 16px; cursor:pointer; user-select:none;
        font-family:var(--ff-display); font-weight:700; font-size:15px;
        color:var(--c-black);
        list-style:none;
      }
      .filters-summary::-webkit-details-marker{ display:none; }
      .filters-summary::after{
        content:"+"; font-size:22px; line-height:1; color:var(--c-black);
        transition:transform .2s;
      }
      .filters-details[open] .filters-summary::after{ content:"−"; }

      .filters-details{ min-width:0; max-width:100%; }
      .filters{ position:static; padding:0 16px 16px; gap:16px; min-width:0; box-sizing:border-box; }
      .filter-group{ padding-bottom:12px; gap:10px; min-width:0; }
      .filter-group__title{ font-size:15px; }
      .chips{ flex-wrap:wrap; }
      .chip{ padding:5px 10px; font-size:13px; }
      .range{ flex-wrap:wrap; }
      .range input{ height:36px; min-width:0; }
      .filter-check{ min-width:0; }
      .filter-check span:not(.count){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

      .catalog-toolbar{
        flex-direction:column; align-items:stretch; gap:12px;
        padding:12px 16px;
      }
      .sort{ flex-wrap:wrap; gap:6px; }
      .sort select{ flex:1; min-width:0; height:40px; }

      .grid-4{ grid-template-columns:1fr 1fr; gap:12px; }
      .product-card{ width:100%; min-width:0; gap:8px; }
      .product-card__body{ gap:6px; min-height:0; padding-bottom:0; }
      .product-card__desc{ font-size:12px; padding:0 12px; min-height:0; }
      .product-card__name{
        font-size:14px; line-height:1.3; padding:0 16px; min-height:0;
        /* Жёсткая обрезка длинных названий — не более 3 строк, остальное «…».
           Без этого длинные английские слова в карточке вылезают за правую границу. */
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
        overflow:hidden; text-overflow:ellipsis;
      }
      .product-card__price{ font-size:14px; padding:0 12px; min-height:0; gap:6px; }
      .product-card__price--old{ font-size:12px; }
      .product-card .btn{ height:40px; font-size:13px; padding:8px 12px; }
      .product-card__sale{ width:32px; height:32px; font-size:18px; }

      .pagination{ gap:4px; flex-wrap:wrap; }
      .pagination a{ width:36px; height:36px; font-size:13px; }
    }
    @media (max-width:480px){
      .grid-4{ grid-template-columns:1fr; gap:16px; }
    }


/* ============================================
   Checkout (Order page) — Figma 2026-04-27
   ============================================ */

    .order-steps{ background:var(--c-accent-pink-soft); padding:21px 0; display:flex; justify-content:center; gap:16px; align-items:center; font-family:var(--ff-display); font-weight:600; font-size:16px; color:var(--c-white); }
    .order-steps .line{ width:85px; height:0; border-top:1px dashed var(--c-white); }
    .order-steps .line--pending{ border-color:var(--c-accent-pink-light); }
    .order-steps .step--pending{ color:var(--c-accent-pink-light); }

    .order-page{ padding:32px 64px 80px; background:#F9F9F9; }
    .order-page__inner{ max-width:var(--container-w); margin:0 auto; }
    .order-title{ display:flex; gap:16px; align-items:center; margin-bottom:24px; }
    .order-title h1{ font-family:var(--ff-display); font-weight:700; font-size:36px; line-height:1.15; margin:0; }
    .order-title .back{
      width:24px; height:24px; padding:0; background:transparent; color:var(--c-black);
      display:grid; place-items:center; border:0; cursor:pointer;
    }
    .order-title .back svg{ width:24px; height:18px; }

    .order-grid{ display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start; }
    .order-col{ display:flex; flex-direction:column; gap:16px; }
    /* R1 + R3 (13.05.2026, Figma 246:3088): отступы и воздух в карточках чекаута.
       Левая колонка — 32 по бокам/сверху, 48 снизу. Правая — 32 со всех сторон.
       Внутренний gap — 32px между подзаголовками блока. */
    .card{ background:var(--c-white); padding:32px; display:flex; flex-direction:column; gap:32px; }
    .order-grid > .order-col:first-child .card{ padding:32px 32px 48px; }
    .card > h2{ margin:0; font-family:var(--ff-display); font-weight:700; font-size:18px; }

    .tabs-line{ display:flex; border:1px solid var(--c-black); border-radius:0; }
    .tabs-line button{ flex:1; height:48px; font-family:var(--ff-display); font-size:16px; transition:all .2s; }
    .tabs-line button.is-active{ background:var(--c-black); color:var(--c-white); }

    /* Delivery way (Курьер / Самовывоз): title-sub left, price right */
    .delivery-way{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .delivery-way__opt{
      display:grid; grid-template-columns:1fr auto;
      align-items:center; gap:8px;
      padding:16px 20px; background:var(--c-white);
      border:1px solid var(--c-grey-line); cursor:pointer;
      transition:border-color .2s; font-family:var(--ff-display);
    }
    .delivery-way__opt.is-active{ border:2px solid var(--c-black); padding:15px 19px; }
    .delivery-way__opt input[type=radio]{ display:none; }
    .delivery-way__label{ display:flex; flex-direction:column; gap:4px; }
    .delivery-way__title{ font-size:15px; font-weight:700; color:var(--c-black); }
    .delivery-way__sub{ font-size:13px; color:var(--c-text-muted); }
    .delivery-way__price{ font-size:14px; font-weight:500; color:var(--c-black); }
    .delivery-way__opt.is-disabled{
      opacity:.45; cursor:not-allowed; pointer-events:none;
      background:var(--c-grey-bg);
    }
    .delivery-way__opt.is-disabled .delivery-way__sub{ font-style:italic; }

    .pickup-map__iframe,
    #pm-leaflet-map{
      display:block; width:100% !important; height:400px !important; border:0;
      background:#F3F5F7; min-height:400px;
    }
    /* Leaflet: убираем дефолтные тени маркеров (мы рисуем свои капли) */
    .leaflet-marker-shadow{ display:none !important; }
    .leaflet-container{ font-family:var(--ff-display); }
    .pickup-map__hint{
      margin:12px 0 0; font-family:var(--ff-display); font-size:13px;
      color:var(--c-text-muted); text-align:center;
    }

    /* Courier fields panel */
    .courier-fields{ display:flex; flex-direction:column; gap:12px; }
    [data-method-block][hidden]{ display:none !important; }
    .btn-deliver{
      width:100%; height:48px;
      background:transparent; color:var(--c-text-muted);
      border:1px solid var(--c-grey-line);
      font-family:var(--ff-display); font-weight:500; font-size:15px;
      cursor:not-allowed; transition:all .2s;
    }
    .btn-deliver.is-active{
      background:var(--c-black); color:var(--c-white); border-color:var(--c-black); cursor:pointer;
    }
    .btn-deliver.is-active:hover{ opacity:.85; }

    /* City select (Замечание #5) — стилизуем как обычное поле формы. */
    .pm-city-select{
        display:block; width:100%; height:48px; padding:0 12px;
        font-family:var(--ff-body); font-size:15px; color:var(--c-black);
        background:var(--c-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='%23000' stroke-width='1.5'><path d='M1 1l6 6 6-6'/></svg>") no-repeat right 14px center;
        background-size:14px 8px;
        border:1px solid var(--c-grey-line, #DFDFDF);
        appearance:none; -webkit-appearance:none;
    }

    /* Selected salon panel — снизу под map/list. Figma 32-621.
       По умолчанию hidden, появляется после "Заберу отсюда". */
    .pickup-selected[hidden]{ display:none !important; }
    .pickup-selected{
        margin:16px 0 0;
        padding:16px 0 0;
        font-family:var(--ff-display);
    }
    .pickup-selected__name{
        font-weight:700; font-size:16px; color:var(--c-black);
        text-transform:uppercase; letter-spacing:.02em;
        margin-bottom:8px;
    }
    .pickup-selected__addr{ font-size:14px; color:var(--c-text-muted); margin-bottom:2px; }
    .pickup-selected__hours{ font-size:14px; color:var(--c-text-muted); margin-bottom:8px; }
    .pickup-selected__date{ font-size:13px; color:var(--c-text-muted-2, #757575); }

    /* Когда салон выбран — список и popup скрыты, видим только search + selected info. */
    [data-pickup-state="confirmed"] [data-panel="list"] .pickup-list,
    [data-pickup-state="confirmed"] [data-panel="list"] .pickup-list__confirm{
        display:none !important;
    }

    /* Pickup tabs (На карте / Списком) — underlined */
    .pickup-tabs{ display:flex; gap:0; position:relative; border-bottom:2px solid rgba(172,172,172,0.31); }
    .pickup-tabs button{
      padding:0 16px 12px; height:35px;
      font-family:var(--ff-display); font-size:16px; font-weight:500; color:var(--c-text-muted);
      position:relative; transition:color .2s;
    }
    .pickup-tabs button.is-active{ color:var(--c-text); }
    .pickup-tabs button.is-active::after{
      content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--c-text);
    }

    /* Pickup map (Yandex iframe + popup поверх) */
    .pickup-map{ position:relative; min-height:400px; background:#F3F5F7; }
    .pickup-map__stub{ position:absolute; inset:0; }
    .pickup-map__stub svg{ width:100%; height:100%; display:block; }
    .pickup-map__iframe{ display:block; width:100%; height:400px; border:0; background:#F3F5F7; }
    /* 13.05.2026: контейнер для Y.Maps JS API v3 — рендерится maps SDK как div */
    .pickup-map__container{ width:100%; height:400px; background:#F3F5F7; }
    .pickup-map__container:empty::before{
        content:"Загрузка карты…"; display:grid; place-items:center;
        height:100%; color:var(--c-text-muted); font-family:var(--ff-body); font-size:14px;
    }
    .pickup-map__popup{
      position:absolute; right:16px; top:16px; width:300px;
      background:var(--c-white);
      padding:20px 20px 16px; display:flex; flex-direction:column; gap:10px;
      font-family:var(--ff-body); line-height:1.5;
      box-shadow:0 4px 16px rgba(0,0,0,.10);
      z-index:2;
    }
    .pickup-map__nav{
      position:absolute; top:50%; transform:translateY(-50%);
      width:28px; height:28px; padding:0;
      background:var(--c-white); border:1px solid var(--c-grey-bg-3); border-radius:50%;
      display:grid; place-items:center;
      font-size:18px; line-height:1; color:var(--c-black); cursor:pointer;
      transition:background .15s;
    }
    .pickup-map__nav:hover{ background:var(--c-grey-bg); }
    .pickup-map__nav--prev{ left:-14px; }
    .pickup-map__nav--next{ right:-14px; }

    /* Скрываем стандартные WC-нотисы на checkout — у нас свой блок .pm-checkout-errors в sidebar */
    body.woocommerce-checkout > .woocommerce-error,
    body.woocommerce-checkout > .woocommerce-message,
    body.woocommerce-checkout > .woocommerce-info,
    body.woocommerce-checkout > .woocommerce-NoticeGroup,
    body.woocommerce-checkout form.checkout > .woocommerce-error,
    body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
    body.woocommerce-checkout .woocommerce-NoticeGroup-checkout{
      display:none !important;
    }

    /* Leaflet маркер — кастомная капля (без image, чисто CSS) */
    .pm-leaflet-marker{ background:transparent; border:0; }
    .pm-leaflet-marker__pin{
      display:block; width:28px; height:36px;
      background:var(--c-black);
      border-radius:50% 50% 50% 0;
      transform:rotate(-45deg);
      border:3px solid var(--c-white);
      box-shadow:0 2px 6px rgba(0,0,0,.25);
      transition:background .15s, transform .15s;
    }
    .pm-leaflet-marker__pin::after{
      content:""; display:block;
      width:8px; height:8px;
      background:var(--c-white);
      border-radius:50%;
      position:relative; top:7px; left:7px;
    }
    .pm-leaflet-marker.is-active .pm-leaflet-marker__pin{
      background:var(--c-accent-burgundy);
      transform:rotate(-45deg) scale(1.15);
    }
    .pickup-map__name{ font-family:var(--ff-body); font-weight:500; font-size:16px; color:var(--c-black); padding-right:24px; }
    .pickup-map__close{
      position:absolute; top:16px; right:16px; width:20px; height:20px;
      display:grid; place-items:center; cursor:pointer; color:var(--c-text-muted);
      font-size:18px; line-height:1; background:transparent; border:0;
    }
    .pickup-map__close:hover{ color:var(--c-black); }
    .pickup-map__addr{ font-family:var(--ff-body); font-weight:400; font-size:12px; color:var(--c-black); }
    .pickup-map__hours{ font-family:var(--ff-body); font-weight:400; font-size:12px; color:var(--c-text-muted); }
    .pickup-map__delivery{ font-family:var(--ff-body); font-weight:400; font-size:12px; color:var(--c-black); margin-top:8px; }
    .pickup-map__badges{ display:flex; gap:6px; margin-top:8px; }
    .pickup-map__badge{
      width:24px; height:24px; border-radius:50%;
      background:var(--c-grey-bg-3); display:grid; place-items:center;
      font-size:11px;
    }
    .pickup-map__cta{
      width:100%; height:48px; margin-top:12px;
      background:var(--c-text-3); color:var(--c-white);
      display:flex; align-items:center; justify-content:center; gap:8px;
      font-family:var(--ff-body); font-weight:500; font-size:16px;
      border:0; cursor:pointer; transition:background .2s;
    }
    .pickup-map__cta:hover{ background:var(--c-accent-olive); }
    .pickup-map__pin{
      position:absolute; width:28px; height:28px; transform:translate(-50%,-100%);
      background:var(--c-accent-pink); border-radius:50% 50% 50% 0;
      rotate:-45deg; border:2px solid var(--c-white);
      box-shadow:0 2px 6px rgba(0,0,0,.25);
    }
    .pickup-map__pin--dim{ background:var(--c-grey-line); opacity:.6; }
    .pickup-map__attr{
      position:absolute; right:8px; bottom:6px;
      display:flex; gap:8px; align-items:center;
      font-family:var(--ff-display); font-size:11px; color:var(--c-text-muted);
    }
    .pickup-map__attr-link{ color:var(--c-text-muted); text-decoration:none; }
    .pickup-map__attr-yandex{ color:#FC3F1D; font-weight:700; }

    /* Pickup search */
    .pickup-search{ position:relative; margin-bottom:8px; }
    .pickup-search input{
      width:100%; height:48px; padding:0 16px 0 44px;
      background:var(--c-grey-bg); border:0;
      font-family:var(--ff-display); font-size:14px; color:var(--c-black);
    }
    .pickup-search input:focus:not(:focus-visible){ outline:0; }
    .pickup-search svg{
      position:absolute; left:14px; top:50%; transform:translateY(-50%);
      width:18px; height:18px; color:var(--c-text-muted);
    }

    /* Pickup list — max 4 items visible, scroll for more */
    .pickup-list{
      display:flex; flex-direction:column; gap:0;
      max-height:296px; overflow-y:auto;
    }
    .pickup-list__item{
      position:relative;
      display:flex; flex-direction:column; gap:4px;
      padding:14px 16px 14px 44px;
      background:transparent;
      border:1px solid var(--c-grey-bg-3);
      border-radius:0;
      margin-bottom:8px;
      cursor:pointer; font-family:var(--ff-display); transition:all .15s;
    }
    .pickup-list__item:last-child{ margin-bottom:0; }
    .pickup-list__item:hover{ background:var(--c-grey-bg); border-color:var(--c-grey-line); }
    .pickup-list__item input[type=radio]{
      position:absolute; opacity:0; pointer-events:none;
    }
    /* Custom radio-индикатор */
    .pickup-list__item::before{
      content:""; position:absolute; left:14px; top:50%;
      transform:translateY(-50%);
      width:18px; height:18px; border-radius:50%;
      border:2px solid var(--c-grey-line);
      background:var(--c-white);
      transition:border-color .15s, background .15s;
    }
    .pickup-list__item::after{
      content:""; position:absolute; left:19px; top:50%;
      transform:translateY(-50%) scale(0);
      width:8px; height:8px; border-radius:50%;
      background:var(--c-black);
      transition:transform .15s;
    }
    /* Checked state */
    .pickup-list__item:has(input[type=radio]:checked){
      border-color:var(--c-black); background:var(--c-grey-bg);
    }
    .pickup-list__item:has(input[type=radio]:checked)::before{
      border-color:var(--c-black);
    }
    .pickup-list__item:has(input[type=radio]:checked)::after{
      transform:translateY(-50%) scale(1);
    }
    .pickup-list__name{ font-family:var(--ff-display); font-weight:700; font-size:15px; color:var(--c-black); }
    .pickup-list__addr{ font-family:var(--ff-display); font-size:13px; color:var(--c-text-muted); }
    .pickup-list__addr-sep{ display:inline-block; width:24px; }
    .pickup-list__date{ font-family:var(--ff-display); font-size:13px; color:var(--c-text-muted); }

    /* Кнопка «Заберу отсюда» под списком — показывается только когда салон выделен. */
    .pickup-list__confirm[hidden]{ display:none !important; }
    .pickup-list__confirm{
        margin-top:12px; width:100%; height:48px;
        background:var(--c-black); color:var(--c-white);
        border:0; cursor:pointer;
        font-family:var(--ff-display); font-weight:500; font-size:15px;
        transition:opacity .15s;
    }
    .pickup-list__confirm:hover{ opacity:.85; }

    /* Popup поверх карты — hidden по умолчанию, появляется когда юзер выбрал салон в списке. */
    .pickup-map__popup[hidden]{ display:none !important; }

    /* Своя сетка для рядов «Телефон + Email» / «Кв./Домофон» / «Подъезд/Этаж».
       НЕ .form-row — это имя занято дефолтным WC checkout (<p class="form-row">). */
    .fields-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    /* Pickup panels: показываем только активную (заменяет inline style display:none) */
    #pickup-panels > .pickup-panel{ display:none; }
    #pickup-panels > .pickup-panel.is-active{ display:block; }
    /* Floating-label gray field */
    .field{ position:relative; display:block; }
    .field label{
      position:absolute; left:16px; top:8px; pointer-events:none;
      font-family:var(--ff-display); font-size:11px; color:var(--c-text-muted);
    }
    .field input, .field select, .field textarea{
      width:100%; height:56px; padding:22px 16px 8px;
      background:var(--c-grey-bg); border:0;
      font-family:var(--ff-display); font-size:15px; color:var(--c-black);
    }
    .field textarea{ height:auto; min-height:96px; resize:vertical; padding-top:24px; }
    /* Mouse-focus: убираем outline. Keyboard-focus (focus-visible) подсвечен в theme.css 13.6.5. */
    .field input:focus:not(:focus-visible), .field select:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible){ outline:0; }
    .field--error input, .field--error select{ background:transparent; border:1px solid #FF3474; }
    .field--error label{ color:#FF3474; }
    /* Город — required asterisk */
    .field--required label::after{ content:" *"; }

    .pay-options{ display:flex; flex-direction:column; gap:0; }
    .pay-card{
      display:grid; grid-template-columns:40px 1fr 20px;
      align-items:center; gap:16px;
      padding:14px 0; background:transparent;
      font-family:var(--ff-display); cursor:pointer;
      transition:opacity .2s;
    }
    .pay-card:hover{ opacity:.85; }
    .pay-card input[type=radio]{ display:none; }
    .pay-card__ico{
      width:40px; height:40px; border-radius:50%;
      background:var(--c-grey-bg-3);
      flex-shrink:0; overflow:hidden;
      display:inline-flex; align-items:center; justify-content:center;
    }
    /* WC-плагины (YooKassa и др.) рендерят <img> внутри блока — вписываем в круг с padding. */
    .pay-card__ico img,
    .pay-card .wc_payment_method img,
    .pay-card label img{
      max-width:24px !important; max-height:24px !important;
      width:auto !important; height:auto !important;
      object-fit:contain;
      display:block;
      margin:0 !important; padding:0 !important;
      border:0 !important; box-shadow:none !important;
    }
    .pay-card__body{ display:flex; flex-direction:column; gap:2px; }
    .pay-card__name{ font-weight:700; font-size:15px; color:var(--c-black); }
    .pay-card__desc{ font-size:13px; color:var(--c-text-muted); }
    .pay-card__radio{
      width:20px; height:20px; border-radius:50%; border:1px solid var(--c-grey-line);
      display:grid; place-items:center;
    }
    .pay-card__radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:transparent; }
    .pay-card.is-active .pay-card__radio{ border-color:var(--c-black); }
    .pay-card.is-active .pay-card__radio::after{ background:var(--c-black); }
    .pay-opt{ display:flex; gap:12px; align-items:center; padding:16px; border:1px solid var(--c-grey-line); cursor:pointer; font-family:var(--ff-display); font-size:15px; }
    .pay-opt.is-active{ border-color:var(--c-black); background:var(--c-grey-bg-2); }
    .pay-opt input[type=radio]{ accent-color:var(--c-black); }

    /* cart item — flex single-row layout */
    .cart-list{ display:flex; flex-direction:column; gap:0; }
    .cart-list h2{ font-family:var(--ff-display); font-weight:700; font-size:18px; margin:0 0 8px; }
    .cart-item{
      display:flex; align-items:center; gap:16px;
      padding:16px 0;
      border-bottom:1px solid var(--c-grey-bg-4);
    }
    .cart-item:last-of-type{ border-bottom:0; }
    .cart-item__img{
      flex:0 0 72px; width:72px; height:72px;
      background:var(--c-grey-bg-2); overflow:hidden; display:block;
    }
    .cart-item__img img{ width:100%; height:100%; object-fit:contain; display:block; }
    .cart-item__info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
    .cart-item__name{
      font-family:var(--ff-display); font-weight:500; font-size:15px; line-height:1.35;
      color:var(--c-black); text-decoration:none;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .cart-item__name:hover{ color:var(--c-accent-burgundy); }
    .cart-item__meta{ font-size:12px; color:var(--c-text-muted); }
    .cart-item__meta p{ margin:0; }
    .cart-item__backorder{ font-size:12px; color:var(--c-accent-pink); margin:4px 0 0; }
    .cart-item__qty{ flex:0 0 auto; }
    .cart-item__qty .quantity{ display:inline-flex; align-items:center; }
    .cart-item__qty input.qty{
      width:56px; height:36px; padding:0 8px; text-align:center;
      border:1px solid var(--c-grey-line); background:var(--c-white);
      font-family:var(--ff-display); font-size:15px; color:var(--c-black);
      -moz-appearance:textfield;
    }
    .cart-item__qty input.qty::-webkit-outer-spin-button,
    .cart-item__qty input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
    .cart-item__price{
      flex:0 0 auto; min-width:80px; text-align:right;
      font-family:var(--ff-display); font-weight:700; font-size:16px;
      white-space:nowrap; color:var(--c-black);
    }
    .cart-item__price .amount{ font-weight:700; }
    .cart-item__remove{
      flex:0 0 24px;
      width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
      border-radius:50%; color:var(--c-text-muted); background:transparent;
      font-size:18px; line-height:1; text-decoration:none;
      transition:color .15s, background .15s;
    }
    .cart-item__remove:hover{ color:var(--c-white); background:var(--c-accent-burgundy); }

    /* Right column — Сумма заказа (dot-leader) */
    .sum-rows{ display:flex; flex-direction:column; gap:6px; }
    .sum-row{
      display:flex; align-items:baseline; gap:8px;
      font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted);
    }
    .sum-row__label{ flex-shrink:0; }
    .sum-row__dots{ flex:1; border-bottom:1px dotted #C9C9C9; transform:translateY(-3px); }
    .sum-row__value{ flex-shrink:0; color:var(--c-black); }
    .sum-total{
      display:flex; justify-content:space-between; align-items:baseline;
      margin-top:8px;
      font-family:var(--ff-display); font-weight:700; font-size:16px; color:var(--c-black);
    }

    /* Card "Списать бонусы" */
    .bonus-card{
      display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
    }
    .bonus-card__title{ font-family:var(--ff-display); font-weight:700; font-size:16px; color:var(--c-black); }
    .bonus-card__sub{ font-family:var(--ff-display); font-size:13px; color:var(--c-text-muted); margin-top:4px; }
    .bonus-card__value{ font-family:var(--ff-display); font-weight:500; font-size:18px; color:var(--c-accent-burgundy); }

    /* Card "К оплате" */
    .pay-final{ display:flex; flex-direction:column; gap:16px; }
    .pay-final__row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
    .pay-final__label{ font-family:var(--ff-display); font-weight:700; font-size:18px; color:var(--c-black); }
    .pay-final__price{ font-family:var(--ff-display); font-weight:700; font-size:32px; color:var(--c-black); white-space:nowrap; }
    .pay-final__btn{
      width:100%; height:48px;
      background:var(--c-black); color:var(--c-white); border:0;
      font-family:var(--ff-display); font-weight:500; font-size:16px;
      cursor:pointer; transition:opacity .2s;
    }
    .pay-final__btn:hover{ opacity:.85; }
    .pay-final__desc{ font-family:var(--ff-display); font-size:12px; color:var(--c-text-muted); text-align:center; margin:0; }

    @media (max-width:767px){
      .order-steps{ font-size:13px; padding:12px 16px; }
      .order-steps .line{ width:24px; }
      .order-steps .step--pending{ display:none; }
      .order-steps .line--pending{ display:none; }
      .order-page{ padding:24px 16px 64px; }
      .order-title h1{ font-size:18px; }
      .order-title .back{ width:36px; height:36px; }
      .order-grid{ grid-template-columns:1fr; }
      .card{ padding:20px; }
      .fields-row{ grid-template-columns:1fr; }
      .delivery-way{ grid-template-columns:1fr; }
      .pay-card{ padding:14px 16px; gap:10px; }
      .pay-card__name{ font-size:14px; }
      .pay-card__desc{ font-size:12px; }
      .pay-final__price{ font-size:24px; }
      /* Z32+Z34 (13.05.2026): на mobile sum-card (с кнопкой Перейти/Оплатить)
         должна быть ВНИЗУ после всех опций (cart) или полей checkout. Раньше стояло
         order:-1 (наверх) — пользователи жали «Оплатить» до выбора способа/салона и
         получали ошибку оплаты, или вообще не находили кнопку. Оставляем естественный
         порядок HTML: items/options сверху, totals + button внизу. */
    }

/* ============================================
   Checkout: SMS verification, bonuses input, errors, spinner
   ============================================ */

.pm-hidden-field{ display:none !important; }

.pm-checkout-errors[hidden],
.pm-checkout-errors:empty{ display:none !important; }
.pm-checkout-errors{
    background:#fef0f0;
    border:1px solid #f5c2c0;
    color:#8a1f1c;
    border-radius:8px;
    padding:12px 16px;
    margin-bottom:16px;
    font-size:14px;
    line-height:1.4;
}
.pm-checkout-errors ul{ margin:0; padding-left:18px; }
.pm-checkout-errors li{ margin:2px 0; }

.pm-checkout-notice{
    background:var(--c-grey-bg-3, #F3F5F7);
    color:var(--c-text-muted, #6c7480);
    padding:12px 16px;
    border-radius:8px;
    font-size:14px;
}

/* Place order button loading state */
.pay-final__btn.is-loading{
    opacity:.75;
    cursor:wait;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.pay-final__btn .spinner{
    display:inline-block;
    width:14px; height:14px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:pm-spin .7s linear infinite;
    vertical-align:middle;
}
@keyframes pm-spin{ to{ transform:rotate(360deg); } }

/* SMS verification block — единый стиль с UI-китом checkout (.field) */
/* `[hidden]` всегда побеждает наши display:flex — атрибут hidden работает корректно */
.pm-sms-verify [hidden],
.pm-sms-verify[hidden]{ display:none !important; }

.pm-sms-verify{
    margin:8px 0 4px;
    display:flex; flex-direction:column; gap:10px;
    font-family:var(--ff-display);
}
.pm-sms-verify__send,
.pm-sms-verify__check{
    background:var(--c-black);
    color:var(--c-white);
    border:0; border-radius:0;
    height:40px; padding:0 20px;
    font-family:var(--ff-display); font-weight:500; font-size:13px;
    letter-spacing:.3px;
    cursor:pointer; align-self:flex-start;
    transition:opacity .15s;
}
.pm-sms-verify__send:hover:not(:disabled),
.pm-sms-verify__check:hover:not(:disabled){ opacity:.85; }
.pm-sms-verify__send:disabled,
.pm-sms-verify__check:disabled{ opacity:.4; cursor:not-allowed; }

.pm-sms-verify__code{
    display:flex; align-items:stretch; gap:8px;
    background:var(--c-grey-bg);
    padding:0;
    position:relative;
}
.pm-sms-verify__code label{
    position:absolute; left:16px; top:8px;
    font-family:var(--ff-display); font-weight:400; font-size:11px;
    color:var(--c-text-muted); pointer-events:none;
    text-transform:uppercase; letter-spacing:.5px;
    z-index:1;
}
.pm-sms-verify__code input{
    flex:1 1 auto; min-width:0;
    height:56px; padding:22px 16px 8px;
    background:transparent; border:0; border-radius:0;
    font-family:var(--ff-display); font-weight:600; font-size:18px;
    letter-spacing:8px; text-align:left;
    color:var(--c-black); outline:none;
    box-sizing:border-box;
}
.pm-sms-verify__code input:focus{
    box-shadow:inset 0 0 0 1.5px var(--c-black); background:var(--c-white);
}
.pm-sms-verify__code .pm-sms-verify__check{
    flex:0 0 auto; height:56px;
}

.pm-sms-verify__msg{
    font-size:13px; color:var(--c-text-muted);
    min-height:0; margin:0;
}
.pm-sms-verify__msg:empty{ display:none; }
.pm-sms-verify__msg.is-error{ color:var(--c-accent-pink); }

.pm-sms-verify__ok{
    display:flex; align-items:center; gap:8px;
    background:var(--c-grey-bg);
    padding:12px 16px;
    color:#1f7a2e; font-weight:600; font-size:13px;
}
.pm-sms-verify__ok-mark{
    width:18px; height:18px; flex-shrink:0;
    border-radius:50%;
    background:#1f7a2e; color:var(--c-white);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700;
}

/* Bonuses input — стилизованный number-input под существующий .bonus-card__value */
input.bonus-card__value{
    border:1px solid #d8dde2;
    background:#fff;
    border-radius:8px;
    padding:6px 10px;
    width:84px;
    text-align:right;
    font-weight:700;
    font-size:18px;
    color:var(--c-black, #111);
}
input.bonus-card__value:focus{ outline:none; border-color:var(--c-black, #111); }

/* Gateway extra fields (CVC/iframe etc.) */
.pay-card__extra{
    padding:12px 18px;
    margin:-6px 0 8px;
    background:var(--c-grey-bg-3, #F3F5F7);
    border-radius:8px;
    font-size:13px;
}
.pay-card__extra p:last-child{ margin-bottom:0; }


/* ============================================
   WC checkout/cart adjustments — обёртки в canonical container
   ============================================ */

/* Серый фон страницы для cart/checkout (как в order.html) */
body.woocommerce-cart,
body.woocommerce-checkout{ background:#EFEFEF; }

/* WC notices, login toggle, login form — в container */
body.woocommerce-cart > .woocommerce > .woocommerce-message,
body.woocommerce-cart > .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout > .woocommerce > .woocommerce-form-login,
body.woocommerce-checkout > .woocommerce > .woocommerce-NoticeGroup,
body.woocommerce-checkout > .woocommerce > .woocommerce-error,
body.woocommerce-checkout > form.woocommerce-form-coupon-toggle,
body.woocommerce-checkout > form.checkout_coupon{
    max-width:var(--container-w); margin:0 auto;
    padding:12px var(--page-pad-x);
    background:transparent;
}

/* Cart-страница: убираем дефолтную WC обёртку и грид cart-collaterals — у нас свой layout
   через .order-grid (cart.php override) + .cart-collaterals содержит только cart_totals (.card). */
body.woocommerce-cart .cart-collaterals{ display:block; margin:0; width:100%; }
body.woocommerce-cart .cart-collaterals .cross-sells{ display:none; }
/* WC core ставит .cart_totals на float:right; width:48% — отключаем чтобы карта занимала
   всю ширину aside.order-col (380px из .order-grid). */
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart .cart_totals{
    width:100%; float:none;
}

/* Кнопка "Перейти к оформлению" в .card cart_totals — full-width в стиле .pay-final__btn */
body.woocommerce-cart .wc-proceed-to-checkout{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout .button{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:48px; padding:0 16px;
    background:var(--c-black); color:var(--c-white); border:0; cursor:pointer;
    font-family:var(--ff-display); font-weight:500; font-size:16px;
    text-decoration:none; transition:opacity .2s;
    white-space:nowrap;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout .button:hover{ opacity:.85; }

/* Скрываем элементы внутри cart_totals, которые не нужны (есть свои строки) */
body.woocommerce-cart .cart_totals .shipping-calculator-button{ display:none; }

/* Empty-cart: notice + кнопка "Вернуться в магазин" в стиле темы */
body.woocommerce-cart .cart-empty.woocommerce-info{
    background:var(--c-white); padding:32px;
    font-family:var(--ff-display); font-size:16px; color:var(--c-black);
    text-align:center; margin:0 0 24px;
}
body.woocommerce-cart .return-to-shop{ text-align:center; margin:0 0 32px; }
body.woocommerce-cart .return-to-shop .wc-backward,
body.woocommerce-cart .return-to-shop .button{
    display:inline-flex; align-items:center; justify-content:center;
    height:48px; padding:0 32px;
    background:var(--c-black); color:var(--c-white); border:0;
    font-family:var(--ff-display); font-weight:500; font-size:15px;
    text-decoration:none; transition:opacity .2s;
}
body.woocommerce-cart .return-to-shop .wc-backward:hover,
body.woocommerce-cart .return-to-shop .button:hover{ opacity:.85; }

/* Цена с зачёркнутой старой — компактно в строке */
body.woocommerce-cart .cart-item__price del{ color:var(--c-grey-line-2); font-weight:500; margin-right:6px; }
body.woocommerce-cart .cart-item__price ins{ background:transparent; text-decoration:none; }

/* Form checkout — гарантируем что наша order-page получает container */
body.woocommerce-checkout form.checkout{ display:block; width:100%; }
body.woocommerce-checkout form.checkout > .order-page,
body.woocommerce-checkout form.checkout > .order-steps{ width:100%; box-sizing:border-box; }

/* Mobile */
@media (max-width:767px){
    body.woocommerce-checkout .woocommerce-info,
    body.woocommerce-checkout .woocommerce-form-login-toggle{
        padding-left:20px; padding-right:20px;
    }
    body.woocommerce-cart .cart-item{ flex-wrap:wrap; row-gap:8px; }
    body.woocommerce-cart .cart-item__img{ flex:0 0 64px; width:64px; height:64px; }
    body.woocommerce-cart .cart-item__info{ flex:1 1 calc(100% - 64px - 16px - 24px - 32px); }
    body.woocommerce-cart .cart-item__remove{ order:99; }
    body.woocommerce-cart .cart-item__qty{ flex:0 0 auto; margin-left:88px; }
    body.woocommerce-cart .cart-item__price{ flex:1 1 auto; min-width:0; text-align:right; }
}

/* Force order-page wrapper inside form.checkout */
body.woocommerce-checkout form.checkout > .order-page,
body.woocommerce-cart .order-page{
    padding:32px var(--page-pad-x) 80px !important;
    background:#EFEFEF;
    width:100%; box-sizing:border-box;
}
body.woocommerce-checkout form.checkout > .order-page > .order-page__inner,
body.woocommerce-cart .order-page > .order-page__inner{
    max-width:var(--container-w); margin:0 auto;
}

/* Mobile: уменьшаем боковые отступы и заголовок */
@media (max-width:991px){
    body.woocommerce-cart .order-page,
    body.woocommerce-checkout form.checkout > .order-page{
        padding:24px 20px 64px !important;
    }
}
@media (max-width:767px){
    body.woocommerce-cart .order-page,
    body.woocommerce-checkout form.checkout > .order-page{
        padding:16px 12px 48px !important;
    }
    body.woocommerce-cart .order-page__inner > h1,
    body.woocommerce-cart .order-title-h1{
        font-size:24px !important;
        margin:0 0 16px !important;
    }
    body.woocommerce-cart .card,
    body.woocommerce-checkout .card{
        padding:16px !important;
    }
}

/* ============================================================================
   Privacy checkbox в чекауте (задача 3.9)
   Серая плашка с чекбоксом перед кнопкой «Оплатить» в .pay-final.
   ============================================================================ */
.pm-privacy-check{
    display:flex; gap:12px; align-items:flex-start;
    padding:14px 16px;
    background:var(--c-grey-bg);
    cursor:pointer;
    font-family:var(--ff-display); font-size:13px; line-height:1.5;
    color:var(--c-black);
}
.pm-privacy-check input[type=checkbox]{
    position:absolute; opacity:0; width:0; height:0;
    pointer-events:none;
}
.pm-privacy-check__box{
    flex:0 0 18px; width:18px; height:18px; margin-top:1px;
    background:var(--c-white);
    border:1px solid var(--c-grey-bg-4, #E5E5E5);
    display:inline-grid; place-items:center;
    transition:background .15s, border-color .15s;
    position:relative;
}
.pm-privacy-check input[type=checkbox]:checked + .pm-privacy-check__box{
    background:var(--c-black); border-color:var(--c-black);
}
.pm-privacy-check input[type=checkbox]:checked + .pm-privacy-check__box::after{
    content:""; position:absolute; left:5px; top:1px;
    width:5px; height:10px;
    border:solid var(--c-white); border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.pm-privacy-check input[type=checkbox]:focus-visible + .pm-privacy-check__box{
    outline:2px solid var(--c-black); outline-offset:2px;
}
.pm-privacy-check__text{ flex:1; }
.pm-privacy-check__text a{ color:var(--c-black); text-decoration:underline; }
.pm-privacy-check__text a:hover{ color:var(--c-accent-burgundy); }


/* ============================================================================
   Thank-you page (задача 3.8)
   ============================================================================ */
body.woocommerce-checkout.woocommerce-order-received{ background:var(--c-grey-bg); }

.ty-page{ padding:32px var(--page-pad-x, 64px) 80px; background:var(--c-grey-bg); }
.ty-page .order-page__inner{ display:flex; flex-direction:column; gap:16px; max-width:var(--container-w, 1200px); margin:0 auto; }

.ty-head{ margin:0 0 8px; }
.ty-title{
    font-family:var(--ff-display); font-weight:700; font-size:36px; line-height:1.15;
    margin:0 0 12px; color:var(--c-black);
}
.ty-sub{
    font-family:var(--ff-display); font-size:16px; line-height:1.5;
    margin:0; color:var(--c-text-muted);
}
.ty-sub strong{ color:var(--c-black); font-weight:500; }

/* Failed-state — заголовок акцентный бордовый */
.ty-head--failed .ty-title{ color:var(--c-accent-burgundy); }

/* Дефолтные WC блоки внутри thank-you оборачиваем в card-look (white card) */
.ty-page .woocommerce-order,
.ty-page .woocommerce-order-overview,
.ty-page .woocommerce-order-details,
.ty-page .woocommerce-customer-details{
    background:var(--c-white);
    padding:32px;
    margin:0;
}
.ty-page .woocommerce-order > * + *{ margin-top:16px; }
.ty-page .woocommerce-order-overview{
    list-style:none;
    display:flex; flex-wrap:wrap; gap:24px 32px;
    margin:0; padding:24px 32px;
    background:var(--c-white);
}
.ty-page .woocommerce-order-overview li{
    display:flex; flex-direction:column; gap:4px;
    font-family:var(--ff-display); font-size:13px; color:var(--c-text-muted);
    text-transform:none; border:0; margin:0; padding:0;
}
.ty-page .woocommerce-order-overview li strong{
    color:var(--c-black); font-weight:700; font-size:15px;
}
.ty-page h2{
    font-family:var(--ff-display); font-weight:700; font-size:22px;
    margin:0 0 20px; color:var(--c-black);
}
.ty-page .woocommerce-table{
    width:100%; border-collapse:collapse; margin:0 0 16px;
}
.ty-page .woocommerce-table th{
    padding:12px; border-bottom:1px solid var(--c-grey-bg-3);
    font-family:var(--ff-display); font-weight:500; font-size:13px;
    color:var(--c-text-muted); text-align:left;
}
.ty-page .woocommerce-table td{
    padding:14px 12px; border-bottom:1px solid var(--c-grey-bg-3);
    font-family:var(--ff-display); font-size:14px; color:var(--c-black);
    vertical-align:top;
}
.ty-page .woocommerce-table tfoot tr:last-child td{
    font-weight:700; font-size:16px; border-bottom:0;
}

.ty-page address{
    font-style:normal;
    font-family:var(--ff-display); font-size:14px; line-height:1.6;
    color:var(--c-black);
}

.ty-actions{
    display:flex; flex-wrap:wrap; gap:12px;
    margin-top:8px;
}
.ty-btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:48px; min-width:220px; padding:0 32px;
    font-family:var(--ff-display); font-weight:500; font-size:15px;
    text-decoration:none; cursor:pointer;
    transition:opacity .2s, background .2s, color .2s;
    border:1px solid transparent; border-radius:0;
}
.ty-btn--primary{ background:var(--c-black); color:var(--c-white); border-color:var(--c-black); }
.ty-btn--primary:hover{ opacity:.85; color:var(--c-white); }
.ty-btn--stroke{ background:transparent; color:var(--c-black); border-color:var(--c-black); }
.ty-btn--stroke:hover{ background:var(--c-black); color:var(--c-white); }

@media (max-width:767px){
    .ty-page{ padding:24px 16px 64px; }
    .ty-title{ font-size:28px; }
    .ty-actions{ flex-direction:column; }
    .ty-btn{ width:100%; min-width:0; }
}


/* ============================================================================
   My Account — view-order (задача 8.3)
   ============================================================================ */
.pm-view-order{
    display:flex; flex-direction:column; gap:16px;
    /* Container Query — pm-view-order адаптируется под ширину родительской
       колонки my-account (а она у́же viewport-а из-за sidebar-а). Без этого
       при viewport>767 применяется desktop-сетка, а контейнер на самом деле
       тесный — товар-row рассыпается. */
    container-type:inline-size;
    container-name:pm-view-order;
    min-width:0;
}

.pm-view-order__head{
    display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
    flex-wrap:wrap;
}
.pm-view-order__title{
    font-family:var(--ff-display); font-weight:700; font-size:28px; line-height:1.15;
    margin:0 0 4px; color:var(--c-black);
}
.pm-view-order__title span{ color:var(--c-text-muted); font-weight:500; }
.pm-view-order__date{
    font-family:var(--ff-display); font-size:13px; color:var(--c-text-muted);
}
.pm-view-order__status{
    display:inline-flex; align-items:center; padding:6px 14px;
    background:var(--c-grey-bg); color:var(--c-black);
    font-family:var(--ff-display); font-weight:500; font-size:12px;
    border-radius:999px; text-transform:uppercase; letter-spacing:.5px;
    white-space:nowrap;
}
.pm-view-order__status--processing{ background:#FFF1D6; color:#7A5500; }
.pm-view-order__status--completed{ background:#E5F4DA; color:#3E6F1A; }
.pm-view-order__status--on-hold{ background:#F6E5BD; color:#7A5500; }
.pm-view-order__status--pending{ background:var(--c-grey-bg-3); color:var(--c-black); }
.pm-view-order__status--cancelled,
.pm-view-order__status--failed{ background:#FFE3EA; color:#A8164A; }
.pm-view-order__status--refunded{ background:var(--c-grey-bg-3); color:var(--c-text-muted); }

.pm-view-order__notice{
    background:var(--c-grey-bg); border-left:3px solid var(--c-accent-burgundy);
    padding:12px 16px; margin:0;
    font-family:var(--ff-display); font-size:14px; color:var(--c-black);
}

/* Card 1 — позиции.
   Flex с wrap — элементы переносятся естественно по доступной ширине
   без media queries: при тесном контейнере qty и subtotal уходят вниз. */
.pm-view-order__items{ gap:0; }
.pm-view-order__items > h2{ margin:0 0 16px; }
.pm-view-order__row{
    display:flex;
    flex-wrap:wrap;
    gap:12px 16px;
    align-items:flex-start;
    padding:16px 0;
    border-top:1px solid var(--c-grey-bg-3);
}
.pm-view-order__row:first-of-type{ border-top:0; padding-top:0; }
.pm-view-order__img-wrap{
    flex:0 0 64px;
    width:64px; height:64px;
    background:var(--c-grey-bg);
    overflow:hidden;
    display:block;
}
/* `<a>` внутри img-wrap по умолчанию inline → не передаёт 100% размеры
   на вложенный <img>, и WC-шный <img width=300> выходит за 64×64. */
.pm-view-order__img-wrap > a{ display:block; width:100%; height:100%; }
.pm-view-order__img-wrap img,
.pm-view-order__img{
    width:100% !important; height:100% !important;
    max-width:100% !important; max-height:100% !important;
    object-fit:cover; display:block;
}
.pm-view-order__info{
    display:flex; flex-direction:column; gap:4px;
    /* flex-shrink:0 — info НЕ сжимается ниже basis (200px). При узком контейнере
       не влезает рядом с image → flex-wrap автоматически переносит на новую
       строку, где занимает всю ширину контейнера. */
    flex:1 0 200px;
    min-width:0;
}
.pm-view-order__name{
    font-family:var(--ff-display); font-weight:500; font-size:15px;
    color:var(--c-black); text-decoration:none;
    overflow-wrap:anywhere; word-break:break-word;
}
.pm-view-order__name:hover{ color:var(--c-accent-burgundy); text-decoration:underline; }
.pm-view-order__sku,
.pm-view-order__info .wc-item-meta{
    font-family:var(--ff-display); font-size:12px; color:var(--c-text-muted);
    margin:0;
}
.pm-view-order__qty{
    font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted);
    white-space:nowrap;
    flex:0 0 auto;
}
.pm-view-order__subtotal{
    font-family:var(--ff-display); font-weight:700; font-size:16px;
    color:var(--c-black); white-space:nowrap; text-align:right;
    flex:0 0 auto; margin-left:auto;
}
.pm-view-order__subtotal .amount{ font-weight:700; }

/* Card 3 — адрес и оплата */
.pm-view-order__addr-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.pm-view-order__addr h3{
    font-family:var(--ff-display); font-weight:700; font-size:14px;
    color:var(--c-text-muted); text-transform:uppercase; letter-spacing:.5px;
    margin:0 0 8px;
}
.pm-view-order__addr address,
.pm-view-order__addr p{
    font-family:var(--ff-display); font-size:14px; line-height:1.6;
    color:var(--c-black); margin:0 0 12px; font-style:normal;
}
.pm-view-order__phone,
.pm-view-order__email{
    font-family:var(--ff-display); font-size:13px; color:var(--c-text-muted);
}

/* Действия */
.pm-view-order__actions{
    display:flex; flex-wrap:wrap; gap:12px;
    margin-top:8px;
}
.pm-view-order__actions .button{
    display:inline-flex; align-items:center; justify-content:center;
    height:48px; padding:0 32px; min-width:200px;
    background:var(--c-black); color:var(--c-white); border:1px solid var(--c-black);
    font-family:var(--ff-display); font-weight:500; font-size:15px;
    text-decoration:none; cursor:pointer;
    transition:opacity .2s, background .2s, color .2s;
}
.pm-view-order__actions .button:hover{ opacity:.85; color:var(--c-white); }
.pm-view-order__actions .button.pay{ background:var(--c-accent-burgundy); border-color:var(--c-accent-burgundy); }
.pm-view-order__actions .button.pay:hover{ opacity:.9; }
.pm-view-order__actions .button--ghost{
    background:transparent; color:var(--c-black); border-color:var(--c-black);
}
.pm-view-order__actions .button--ghost:hover{ background:var(--c-black); color:var(--c-white); }

/* На узких viewport — стек шапки и доп.настройки.
   Главный layout (.pm-view-order__row) на flex-wrap, ему media query не нужен. */
@media (max-width:767px){
    .pm-view-order__head{ flex-direction:column; align-items:stretch; }
    .pm-view-order__addr-grid{ grid-template-columns:1fr; gap:16px; }
    .pm-view-order__actions{ flex-direction:column; }
    .pm-view-order__actions .button{ width:100%; min-width:0; }
    .pm-view-order__subtotal{ margin-left:0; }  /* не прижимать к правому краю на узком */
}

/* =========================================================================
   Loyalty (charmdirect): My Account dashboard widget + bonus history table
   ========================================================================= */
/* Бонусный виджет — pink-yellow gradient как в фигме my-account. */
.pm-loyalty-widget{
    margin: 0 0 24px;
    padding: 28px 32px;
    background: linear-gradient(90deg, #F7B5C2 0%, #FFE4B0 100%);
    display: flex; flex-direction: column; gap: 12px;
}
.pm-loyalty-widget h3,
.pm-loyalty-widget__title{
    margin: 0;
    font-family: var(--ff-display); font-weight: 700; font-size: 16px;
    color: var(--c-black);
    letter-spacing: 0;
    text-transform: none;
}
.pm-loyalty-widget__balance{
    font-family: var(--ff-display); font-weight: 700;
    font-size: 48px; line-height: 1; color: var(--c-black);
}
.pm-loyalty-widget__balance span{
    font-family: var(--ff-display); font-weight: 400; font-size: 16px;
    margin-left: 8px;
    /* R6 (07.05.2026): слово «бонусов» — pale pink #C58989 (Figma review). */
    color: #C58989;
}
.pm-loyalty-widget__pending{
    margin: 0; font-family: var(--ff-display); font-size: 14px;
    color: var(--c-black);
}
/* 13.05.2026 (Figma 246:3088, img-card2): «История бонусов» на pink-gradient
   подложке должна быть БЕЛОЙ с чёрным текстом и стрелкой, а не чёрной (так в
   дизайне). На hover — лёгкая тень. */
.pm-loyalty-widget__link,
.pm-loyalty-widget .btn{
    margin-top: 8px; align-self: flex-start;
    text-decoration: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 44px; padding: 0 24px;
    background: var(--c-white) !important; color: var(--c-black) !important;
    border: 0; border-radius: 0;
    font-family: var(--ff-display); font-weight: 500; font-size: 14px;
    letter-spacing: .3px;
    transition: box-shadow .15s, transform .15s;
}
.pm-loyalty-widget__link::after{
    content: "→"; font-size: 16px; line-height: 1;
}
.pm-loyalty-widget__link:hover,
.pm-loyalty-widget .btn:hover{
    box-shadow:0 6px 16px rgba(0,0,0,.10);
    transform:translateY(-1px);
}

.pm-loyalty-history{
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 14px;
}
.pm-loyalty-history thead th{
    text-align: left;
    padding: 12px 16px;
    background: rgba(212, 165, 116, 0.08);
    border-bottom: 1px solid var(--color-border, #e8d8d4);
    font-weight: 500;
    color: var(--color-muted, #786762);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
}
.pm-loyalty-history tbody td{
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-soft, #f2e7e3);
    vertical-align: middle;
}
.pm-loyalty-history tbody tr:last-child td{ border-bottom: 0; }
.pm-loyalty-history td.is-accrual{ color: #2a8a4f; font-weight: 600; }
.pm-loyalty-history td.is-debit{ color: #b14352; font-weight: 600; }
.pm-loyalty-history__nav{
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
.pm-loyalty-history__nav a{
    color: var(--color-primary, #1d1714);
    text-decoration: underline;
}
@media (max-width: 600px){
    .pm-loyalty-widget{ padding: 18px 20px; }
    .pm-loyalty-widget__balance{ font-size: 32px; }
    .pm-loyalty-history thead{ display: none; }
    .pm-loyalty-history tbody td{
        display: block;
        padding: 4px 0;
        border: 0;
    }
    .pm-loyalty-history tbody tr{
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border-soft, #f2e7e3);
    }
}

/* =========================================================================
   Salons archive (/salons/)
   ========================================================================= */
.catalog-head__sub{
    margin: 8px 0 0;
    font-family: var(--ff-display);
    font-size: 16px;
    color: var(--c-text-muted);
}
.pm-salons{
    padding: 0 var(--page-pad-x) 80px;
    max-width: var(--container-w);
    margin: 0 auto;
}
.pm-salons__map{
    margin: 0 0 32px;
    background: var(--c-white);
    overflow: hidden;
}
.pm-salons__map iframe{ display: block; width: 100%; border: 0; }
.pm-salons__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.pm-salon-card{
    background: var(--c-white);
    padding: 24px 24px 28px;
    display: flex; flex-direction: column; gap: 12px;
    transition: box-shadow .15s;
}
.pm-salon-card:hover{ box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.pm-salon-card__name{
    margin: 0 0 4px;
    font-family: var(--ff-display); font-weight: 700; font-size: 18px;
    line-height: 1.25; color: var(--c-black);
    text-transform: uppercase; letter-spacing: .02em;
}
.pm-salon-card__metro{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ff-display); font-size: 14px;
    color: var(--c-black);
}
.pm-salon-card__metro-ico{
    width: 14px; height: 14px; color: #C58989;
}
.pm-salon-card__rating{
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
    font-family: var(--ff-display); font-size: 14px;
    color: var(--c-text-muted);
}
.pm-salon-card__star{
    width: 14px; height: 13px;
    color: #DFDFDF;
}
.pm-salon-card__star.is-full{ color: #F0B400; }
.pm-salon-card__rating-num{
    margin-left: 4px; color: var(--c-black); font-weight: 500;
}
.pm-salon-card__row{
    display: flex; align-items: flex-start; gap: 10px;
    font-family: var(--ff-display); font-size: 14px; line-height: 1.5;
    color: var(--c-text-muted);
}
.pm-salon-card__icon{
    flex: 0 0 16px; width: 16px; height: 16px;
    margin-top: 3px; color: var(--c-accent-burgundy);
}
.pm-salon-card__route{
    margin-top: auto; padding-top: 8px;
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    font-family: var(--ff-display); font-weight: 500; font-size: 14px;
    color: var(--c-black); text-decoration: none;
    border-bottom: 1px solid var(--c-black);
    line-height: 28px;
}
.pm-salon-card__route svg{ width: 18px; height: 14px; }
.pm-salon-card__route:hover{ color: var(--c-accent-burgundy); border-bottom-color: var(--c-accent-burgundy); }
.pm-salons__empty{
    padding: 48px 0; text-align: center; color: var(--c-text-muted);
    font-family: var(--ff-display);
}

@media (max-width: 1199px){
    .pm-salons__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
    .pm-salons{ padding: 0 16px 48px; }
    .pm-salons__map iframe{ height: 320px !important; }
    .pm-salons__grid{ grid-template-columns: 1fr; gap: 12px; }
    .pm-salon-card{ padding: 20px; }
}

/* =========================================================================
   WooCommerce Product Collection block (Gutenberg) — стилизация в постах
   и страницах. Без этих правил `<ul.wc-block-product-template>` рендерится
   как простой column-flow без сетки и карточки выглядят криво.
   ========================================================================= */
.wp-block-woocommerce-product-collection{ margin: 32px 0; }

/* Z19 (07.05.2026): Product Collection в статье. .post-body__inner имеет
   max-width:760px (для читабельной длинной строки текста). Делаем блок
   full-bleed: внешний контейнер занимает 100vw, внутренний ul.product-template
   центрируется в container_w. Это стандартный Gutenberg breakout-pattern,
   работает независимо от flex/grid у parent'а. */
.post-body__inner .wp-block-woocommerce-product-collection{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 48px;
    margin-bottom: 48px;
    box-sizing: border-box;
    padding: 0 var(--page-pad-x, 64px);
}
.post-body__inner .wp-block-woocommerce-product-collection > *{
    max-width: var(--container-w, 1312px);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px){
    .post-body__inner .wp-block-woocommerce-product-collection{
        padding: 0 20px;
    }
}
.wc-block-product-template{
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.wc-block-product-template.columns-3{ grid-template-columns: repeat(3, 1fr); }
.wc-block-product-template.columns-2{ grid-template-columns: repeat(2, 1fr); }
.wc-block-product-template.columns-1{ grid-template-columns: 1fr; }

.wc-block-product-template .wc-block-product{
    background: var(--c-white, #fff);
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
    padding: 0;
    list-style: none !important;
    width: auto !important;
    overflow: hidden;
}
.wc-block-product-template .wc-block-product::before,
.wc-block-product-template .wc-block-product::marker{ display: none; }

/* Картинка */
.wc-block-product-template .wc-block-components-product-image{
    margin: 0;
    width: 100%;
    aspect-ratio: 1/1;
    background: #f4f4f4;
    overflow: hidden;
}
.wc-block-product-template .wc-block-components-product-image a{
    display: block; width: 100%; height: 100%;
}
.wc-block-product-template .wc-block-components-product-image img{
    width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Название */
.wc-block-product-template .wp-block-post-title{
    font-family: var(--ff-display, "Roboto", sans-serif);
    font-size: 16px !important; line-height: 1.3 !important;
    font-weight: 600;
    color: var(--c-black, #000);
    margin: 14px 16px 8px !important;
    text-align: left !important;
    /* 3 строки макс */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
    word-break: break-word; overflow-wrap: break-word;
}
.wc-block-product-template .wp-block-post-title a{
    color: inherit; text-decoration: none;
}
.wc-block-product-template .wp-block-post-title a:hover{
    color: var(--c-accent-burgundy, #C58989);
}

/* Цена */
.wc-block-product-template .wp-block-woocommerce-product-price{
    margin: 0 16px 16px !important;
    font-family: var(--ff-display, "Roboto", sans-serif);
    font-weight: 700; font-size: 16px;
    color: var(--c-black, #000);
    text-align: left !important;
    margin-top: auto !important;
}
.wc-block-product-template .wc-block-components-product-price{
    text-align: left !important;
}

/* Кнопка «В корзину» — full-width, чёрная, как у обычного .product-card. */
.wc-block-product-template .wp-block-woocommerce-product-button{
    margin: 0 !important;
    width: 100% !important;
    text-align: left !important;  /* WP `.align-center` ставит text-align:center, что даёт inline-кнопку центрированной */
}
.wc-block-product-template .wp-block-woocommerce-product-button.align-center,
.wc-block-product-template .wp-block-button.align-center{
    /* override WP block-editor `align-center` — нам нужно full-width */
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.wc-block-product-template .wp-block-button__link{
    display: block !important;
    width: 100% !important;
    height: 44px;
    line-height: 44px;
    background: var(--c-black, #000) !important;
    color: var(--c-white, #fff) !important;
    border: 0; border-radius: 0 !important;
    font-family: var(--ff-display, "Roboto", sans-serif);
    font-weight: 500; font-size: 14px;
    padding: 0 !important;
    cursor: pointer;
    transition: opacity .15s;
    text-align: center;
    box-sizing: border-box;
}
.wc-block-product-template .wp-block-button__link:hover{ opacity: .85; }
/* «Просмотр корзины» — скрываем, у нас есть toast/бейдж */
.wc-block-product-template .added_to_cart{ display: none !important; }

@media (max-width: 991px){
    .wc-block-product-template,
    .wc-block-product-template.columns-4,
    .wc-block-product-template.columns-3{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
    .wc-block-product-template,
    .wc-block-product-template.columns-4,
    .wc-block-product-template.columns-3,
    .wc-block-product-template.columns-2{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .wc-block-product-template .wp-block-post-title{ font-size: 14px !important; margin: 12px 12px 6px !important; }
    .wc-block-product-template .wp-block-woocommerce-product-price{ margin: 0 12px 12px !important; font-size: 14px; }
    .wc-block-product-template .wp-block-button__link{ height: 40px; line-height: 40px; font-size: 13px; }
}

/* =========================================================================
   CPT pm_promo — архив /akcii/ + single
   ========================================================================= */
/* Архив акций — выравниваем по `.catalog-head`: padding 64px на самой секции,
   max-width у внутреннего .container. Без этого heading и сетка карточек
   расходятся по горизонтали (heading у viewport-edge+64, сетка у +158). */
.pm-promos{
    padding: 0 var(--page-pad-x) 80px;
}
.pm-promos > .container{ max-width: var(--container-w); margin: 0 auto; }
.pm-promos__grid{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.pm-promo-card{
    display: flex; flex-direction: column;
    background: var(--c-white);
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow .15s;
    overflow: hidden;
}
.pm-promo-card:hover{ box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.pm-promo-card__media{
    height: 240px;
    background: var(--c-grey-bg, #F9F9F9) center/cover no-repeat;
}
.pm-promo-card__body{
    padding: 16px 24px 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.pm-promo-card__period{
    font-family: var(--ff-display); font-size: 14px; font-weight: 500;
    color: var(--c-accent-pink, #FF3474);
}
.pm-promo-card__title{
    font-family: var(--ff-display); font-weight: 700; font-size: 20px;
    line-height: 1.25; color: var(--c-black);
    margin: 0;
}
.pm-promo-card__desc{
    margin: 0;
    font-family: var(--ff-body); font-size: 14px; line-height: 1.5;
    color: var(--c-text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 991px){
    .pm-promo-card__media{ height: 200px; }
}
@media (max-width: 767px){
    .pm-promos{ padding: 0 16px 48px; }
    .pm-promos__grid{ grid-template-columns: 1fr; gap: 16px; }
    .pm-promo-card__media{ height: 180px; }
    .pm-promo-card__title{ font-size: 18px; }
    .pm-promo-card__body{ padding: 14px 18px 16px; }
}

/* Single промо */
.pm-promo-single__period{
    margin-top: 4px;
    font-family: var(--ff-display); font-size: 14px; font-weight: 500;
    color: var(--c-accent-pink, #FF3474);
}
.pm-promo-single{
    padding: 32px var(--page-pad-x);
}
.pm-promo-single > .container{ max-width: var(--container-w); margin: 0 auto; }
.pm-promo-single__layout{
    display: grid; grid-template-columns: 360px 1fr; gap: 48px;
    align-items: start;
}
.pm-promo-single__media img{
    display: block; width: 100%; height: auto;
}
.pm-promo-single__content{
    font-family: var(--ff-body); font-size: 16px; line-height: 1.6; color: var(--c-black);
}
.pm-promo-single__content h2,
.pm-promo-single__content h3{
    font-family: var(--ff-display); font-weight: 700;
    margin: 24px 0 16px;
}
.pm-promo-single__content h2{ font-size: 24px; }
.pm-promo-single__content h3{ font-size: 20px; }
.pm-promo-single__content p{ margin: 0 0 16px; }

.pm-promo-products{
    padding: 32px var(--page-pad-x) 80px;
}
.pm-promo-products > .container{ max-width: var(--container-w); margin: 0 auto; }
.pm-promo-products .grid-4{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 991px){
    .pm-promo-single__layout{ grid-template-columns: 1fr; gap: 24px; }
    .pm-promo-products .grid-4{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 767px){
    .pm-promo-single{ padding: 24px 16px; }
    .pm-promo-products{ padding: 24px 16px 48px; }
    .pm-promo-products .grid-4{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
}