/* ============================================================================
 * GORILLA - ЛИЧНЫЙ КАБИНЕТ (WooCommerce My Account), раунд 09.09.2026
 * ----------------------------------------------------------------------------
 * Шаблоны: woocommerce/myaccount/*, woocommerce/order/*, woocommerce/notices/*;
 * PHP: inc/account.php. Грузится после gorilla-woocommerce.css только на
 * страницах кабинета (и перебивает его старые кабинетные правила: чёрная
 * капсула чипов, серая плашка контента).
 *
 * Язык: кикер зелёным капсом, H1 Jawbreak с короной по центру, серые карточки
 * rgb(navy/.04) со скруглением 16px, чёрные плашки #101010, кнопки .g-btn.
 * Обычный текст - БЕЗ капса (глобальный p{uppercase} критического CSS
 * перебит внутри кабинета).
 *
 * Классы WooCommerce, на которые вешает стили его woocommerce.css
 * (.woocommerce-MyAccount-*, .woocommerce-error/-message/-info, .button,
 * .col2-set, .woocommerce-customer-details), в шаблонах намеренно не
 * используются - иначе плавали флоаты и серые кнопки.
 *
 * ВАЖНО про специфичность (правка 09.09): gorilla-woocommerce.css красит ЛЮБУЮ
 * ссылку страницы правилом `body.gorilla-wc-page .gorilla-page-content a
 * { color: navy }` (специфичность 0,2,2). Оно перебивало наши состояния:
 * ghost-dark кнопка на ховере давала чёрный текст на чёрном, плитка обзора -
 * тёмный заголовок на чёрной заливке. Поэтому ВСЕ правила, задающие цвет
 * ссылки (кнопки, плитки, номер заказа, «Все заказы», ссылки в уведомлениях),
 * пишем с префиксом `body.gorilla-wc-page` - иначе они молча не работают.
 * ========================================================================== */

/* --- Сцена: контейнер и отступ под фиксированную шапку --------------------- */
body.woocommerce-account .gorilla-page-content {
  max-width: var(--g-container-max, 1440px);
  margin: 0 auto;
  /* от реальной высоты шапки (--g-header-h ставит gorilla-header.js), как у соседей */
  padding: calc(var(--g-header-h, 152px) + clamp(20px, 2vw, 32px)) var(--g-container-pad, clamp(19px, 4vw, 48px)) clamp(48px, 7vw, 88px);
}

.g-account,
.g-order,
.g-notice {
  font-family: 'DIN 2014 UI', 'DIN 2014', system-ui, sans-serif;
  color: #24262b;
}
.g-account *,
.g-account *::before,
.g-account *::after,
.g-order *,
.g-notice * { box-sizing: border-box; }

/* обычный текст без Shopify-капса (p{uppercase} в критическом CSS) */
.g-account p,
.g-account address,
.g-account li,
.g-account dt,
.g-account dd,
.g-account time,
.g-order p,
.g-order address,
.g-notice,
.g-notice p,
.g-auth p { text-transform: none; }

/* ширина - общая сетка сайта (.g-container): раньше стоял свой max-width
   1180px и кабинет был визуально уже шапки и футера («недоделанный») */
.g-account { max-width: none; margin: 0; }

/* --- Шапка кабинета: кикер, H1 с короной, крошки --------------------------- */
.g-account__head {
  text-align: center;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.g-account__kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--g-color-green);
  margin-bottom: 10px;
}
/* H1 кабинета мельче секционного (48px): это служебный экран, а не лендинг */
.g-account .g-account__title {
  font-size: clamp(28px, 3.2vw, 40px);
  margin-bottom: 8px;
}
.g-account__lead {
  max-width: 62ch;
  margin: 0 auto 12px;
  color: #4a4f5c;
  font-size: var(--g-fs-lead, 16px);
  line-height: 1.55;
}
.g-account__head .gorilla-breadcrumbs { justify-content: center; margin: 0; }

/* --- Раскладка: слева покупатель + меню, справа контент -------------------- */
.g-account__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}
/* min-width:0 обязателен: строка чипов меню (overflow:auto) всё равно отдаёт
   треку сетки свою min-content-ширину - на мобиле колонка вылезала за экран */
.g-account__side { min-width: 0; }
/* колонка меню растёт вместе с контейнером - иначе на 1440+ она выглядит
   ниткой рядом с широким контентом */
@media (min-width: 900px) {
  .g-account__layout { grid-template-columns: 288px minmax(0, 1fr); }
  .g-account__side { position: sticky; top: calc(var(--g-header-h, 152px) + 16px); }
}
@media (min-width: 1280px) { .g-account__layout { grid-template-columns: 312px minmax(0, 1fr); } }
@media (min-width: 1600px) { .g-account__layout { grid-template-columns: 332px minmax(0, 1fr); } }

/* карточка покупателя - чёрная плашка */
.g-account__user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  background: #101010;
  color: #fff;
}
.g-account__avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--g-color-green);
  color: #0a0a0a;
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
}
.g-account__user-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-account__user-name { font-weight: 800; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.g-account__user-mail { font-size: 13px; color: rgba(255, 255, 255, .6); overflow-wrap: anywhere; }

/* меню разделов */
.g-account__nav ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.gorilla-wc-page .g-account__nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--g-color-navy);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
body.gorilla-wc-page .g-account__nav a:hover {
  background: rgb(var(--g-navy-rgb) / .06);
  color: var(--g-color-navy);
}
body.gorilla-wc-page .g-account__nav li.is-active a {
  background: var(--g-color-green);
  color: #0a0a0a;
}
/* активный пункт на ховере не «тускнеет» - остаётся зелёным */
body.gorilla-wc-page .g-account__nav li.is-active a:hover {
  background: var(--g-color-green);
  color: #0a0a0a;
}
body.gorilla-wc-page .g-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #8a8f9c; }
body.gorilla-wc-page .g-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: rgba(211, 0, 0, .07);
  color: #8a0000;
}
.g-account__ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* мобила: покупатель компактно, меню - строка чипов с горизонтальным скроллом */
@media (max-width: 899px) {
  .g-account__user { padding: 14px 16px; }
  .g-account__avatar { width: 40px; height: 40px; font-size: 17px; }
  .g-account__nav ul {
    flex-direction: row;
    gap: 8px;
    margin: 12px calc(-1 * var(--g-container-pad, 19px)) 0;
    padding: 0 var(--g-container-pad, 19px) 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .g-account__nav ul::-webkit-scrollbar { display: none; }
  /* подсказка «дальше есть ещё»: правый край строки растворяется */
  .g-account__nav ul {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .g-account__nav li { flex: 0 0 auto; }
  /* префикс body.gorilla-wc-page - чтобы перебить десктопное правило пунктов
     (оно тоже с префиксом, см. шапку файла про специфичность) */
  body.gorilla-wc-page .g-account__nav a {
    padding: 9px 14px;
    border: 1.5px solid rgb(var(--g-navy-rgb) / .12);
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
    gap: 8px;
  }
  body.gorilla-wc-page .g-account__nav li.is-active a { border-color: var(--g-color-green); }
  .g-account__ico { width: 17px; height: 17px; }
}

/* --- Контент и карточки ---------------------------------------------------- */
.g-account__content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.g-account__card {
  background: rgb(var(--g-navy-rgb) / .04);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 26px);
}
.g-account__card--dark { background: #101010; color: #fff; }
.g-account .g-account__card-title {
  font-family: 'DIN 2014 UI', 'DIN 2014', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--g-color-navy);
  margin: 0 0 14px;
}
.g-account__card--dark .g-account__card-title { color: #fff; }
.g-account__muted { color: #8a8f9c; }
.g-account__lead-sm { margin: 0; color: #4a4f5c; font-size: 14px; line-height: 1.5; }

/* кнопки внутри кабинета: компактный размер */
.g-account .g-btn--sm,
.g-order .g-btn--sm {
  font-size: 12px;
  letter-spacing: .08em;
  padding: 11px 20px;
  gap: 8px;
}
.g-account .g-btn--ghost-dark.g-btn--sm,
.g-order .g-btn--ghost-dark.g-btn--sm { padding: 9px 18px; }
.g-btn .g-account__ico { width: 16px; height: 16px; }
/* «Повторить заказ» - без переноса слов в узкой карточке */
.g-account__actions .g-btn,
.g-order__actions .g-btn { white-space: nowrap; }

/* --- Состояния кнопок (правка 09.09) ---------------------------------------
   Цвет ссылок-кнопок глушило глобальное `.gorilla-page-content a` (см. шапку
   файла): ghost-dark на ховере заливалась чёрным, а текст оставался чёрным -
   кнопка «Повторить заказ» / «Изменить» превращалась в чёрную таблетку без
   надписи. Возвращаем цвета с нужной специфичностью. */
body.gorilla-wc-page .g-account .g-btn--green,
body.gorilla-wc-page .g-order .g-btn--green,
body.gorilla-wc-page .g-notice .g-btn--green { color: #0a0a0a; }
/* ховер зелёной кнопки - фирменная «бумага», но с зелёной кромкой: на серой
   карточке белая таблетка без кромки просто растворялась */
body.gorilla-wc-page .g-account .g-btn--green:hover,
body.gorilla-wc-page .g-account .g-btn--green:focus-visible,
body.gorilla-wc-page .g-order .g-btn--green:hover,
body.gorilla-wc-page .g-order .g-btn--green:focus-visible {
  color: #0a0a0a;
  box-shadow: inset 0 0 0 2px var(--g-color-green);
}
body.gorilla-wc-page .g-account .g-btn--ghost-dark,
body.gorilla-wc-page .g-order .g-btn--ghost-dark { color: var(--g-color-navy); }
body.gorilla-wc-page .g-account .g-btn--ghost-dark:hover,
body.gorilla-wc-page .g-account .g-btn--ghost-dark:focus-visible,
body.gorilla-wc-page .g-order .g-btn--ghost-dark:hover,
body.gorilla-wc-page .g-order .g-btn--ghost-dark:focus-visible {
  background-color: var(--g-color-navy);
  color: #fff;
}
/* внутри карточек кнопки не «прыгают» масштабом (в тесной сетке это заметно),
   а мягко темнеют/светлеют */
.g-account .g-btn:hover,
.g-order .g-btn:hover { transform: none; }
/* зелёная на тёмной карточке: ховер - белая без зелёного ореола */
.g-account__card--dark .g-btn--green { box-shadow: none; }
body.gorilla-wc-page .g-account__card--dark .g-btn--green:hover,
body.gorilla-wc-page .g-account__card--dark .g-btn--green:focus-visible {
  background-color: #fff;
  color: #0a0a0a;
}
/* контурная кнопка на тёмной карточке - светлая кромка, ховер = белая заливка */
body.gorilla-wc-page .g-account__card--dark .g-btn--ghost-dark {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
body.gorilla-wc-page .g-account__card--dark .g-btn--ghost-dark:hover,
body.gorilla-wc-page .g-account__card--dark .g-btn--ghost-dark:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: #0a0a0a;
}

/* --- Единый фокус с клавиатуры -------------------------------------------- */
.g-account a:focus-visible,
.g-account button:focus-visible,
.g-order a:focus-visible,
.g-notice a:focus-visible {
  outline: 2px solid var(--g-color-green);
  outline-offset: 3px;
}
.g-account__card--dark a:focus-visible,
.g-account__user a:focus-visible { outline-color: var(--g-color-green); }

/* --- Обзор: плитки разделов ------------------------------------------------ */
/* Три в ряд только на широком десктопе (от 1180px): ниже подписи плиток
   («Данные аккаунта», «История и статусы») ломались в две строки, а плитки
   превращались в ниточки. До 1180px - плотный столбец, как на мобиле, который
   клиенту нравится больше. */
.g-account__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 1180px) { .g-account__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Ховер плиток (правка 09.09). Была чёрная заливка - на ней заголовок
   оставался тёмным (глобальное правило ссылок, см. шапку файла) и текст
   пропадал. Модель заменена на спокойную: карточка «всплывает» белым с
   зелёной кромкой, все тексты сохраняют цвет. Рамка есть всегда (прозрачная),
   чтобы на ховере не прыгала геометрия. */
body.gorilla-wc-page .g-account__tile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: rgb(var(--g-navy-rgb) / .04);
  color: var(--g-color-navy);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
body.gorilla-wc-page .g-account__tile:hover,
body.gorilla-wc-page .g-account__tile:focus-visible {
  background: #fff;
  border-color: var(--g-color-green);
  box-shadow: 0 12px 26px -18px rgb(var(--g-navy-rgb) / .55);
  transform: translateY(-2px);
  color: var(--g-color-navy);
}
.g-account__tile-ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--g-color-green);
  color: #0a0a0a;
}
.g-account__tile-ico .g-account__ico { width: 22px; height: 22px; }
.g-account__tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-account__tile-label {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.g-account__tile-sub { font-size: 13px; color: #6b7280; line-height: 1.3; }
.g-account__tile:hover .g-account__tile-sub,
.g-account__tile:focus-visible .g-account__tile-sub { color: #4a4f5c; }
.g-account__tile-count {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #101010;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  transition: background-color .18s ease, color .18s ease;
}
.g-account__tile:hover .g-account__tile-count,
.g-account__tile:focus-visible .g-account__tile-count { background: var(--g-color-green); color: #0a0a0a; }

/* --- Заказ: шапка, миниатюры, итог (обзор и список) ------------------------ */
.g-account__last-head,
.g-account__order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.g-account__last-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.gorilla-wc-page .g-account__order-num {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--g-color-navy);
  text-decoration: none;
  transition: color .18s ease;
}
body.gorilla-wc-page a.g-account__order-num:hover {
  color: var(--g-color-green-deep, #3f6300);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* на чёрной карточке - белый, ховер зелёным */
body.gorilla-wc-page .g-account__card--dark .g-account__order-num { color: #fff; }
body.gorilla-wc-page .g-account__card--dark a.g-account__order-num:hover { color: var(--g-color-green); }
.g-account__order-date { font-size: 13px; color: #6b7280; }
.g-account__card--dark .g-account__order-date { color: rgba(255, 255, 255, .6); }

.g-account__thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.g-account__thumb {
  width: 64px;
  height: 64px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.g-account__thumb img,
.g-account__thumb-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.g-account__thumb--more {
  background: rgb(var(--g-navy-rgb) / .08);
  font-weight: 800;
  font-size: 14px;
  color: var(--g-color-navy);
}
.g-account__card--dark .g-account__thumb--more { background: rgba(255, 255, 255, .12); color: #fff; }
.g-account__thumb-empty { display: grid; place-items: center; width: 100%; height: 100%; color: #9aa0ad; }
.g-account__thumb-empty .g-account__ico { width: 24px; height: 24px; }

.g-account__last-foot,
.g-account__order-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.g-account__order-total {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
}
.g-account__order-total-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.g-account__card--dark .g-account__order-total-label { color: rgba(255, 255, 255, .6); }
.g-account__order-total .woocommerce-Price-currencySymbol { font-weight: 600; }
/* частичный возврат: WooCommerce отдаёт <del>старая</del><ins>новая</ins> -
   у <ins> браузерное подчёркивание выглядело ссылкой */
.g-account__order-total del,
.g-order__total dd del { opacity: .45; font-weight: 600; }
.g-account__order-total ins,
.g-order__total dd ins { text-decoration: none; background: transparent; }

/* список заказов - карточки */
.g-account__orders { display: flex; flex-direction: column; gap: 14px; }
.g-account__order-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}
.g-account__order-body .g-account__thumbs { margin: 0; flex: 0 0 auto; }
.g-account__order-names { font-size: 14px; line-height: 1.45; color: #4a4f5c; min-width: 0; }
.g-account__qty { color: #8a8f9c; }
.g-account__order-foot {
  border-top: 1px solid rgb(var(--g-navy-rgb) / .08);
  padding-top: 14px;
}
.g-account__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.g-account__order--cancelled .g-account__thumb img,
.g-account__order--failed .g-account__thumb img,
.g-account__order--refunded .g-account__thumb img { opacity: .55; filter: grayscale(1); }

/* та же анатомия карточки на тёмной плашке «Последний заказ» (обзор) */
.g-account__card--dark .g-account__order-names { color: rgba(255, 255, 255, .82); }
.g-account__card--dark .g-account__qty { color: rgba(255, 255, 255, .55); }
.g-account__card--dark .g-account__order-foot { border-top-color: rgba(255, 255, 255, .14); }
.g-account__card--dark .g-account__thumb:not(.g-account__thumb--more) { background: rgba(255, 255, 255, .96); }

/* ссылка «Все заказы →» под последним заказом */
body.gorilla-wc-page .g-account__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  text-decoration: none;
  transition: color .18s ease;
}
body.gorilla-wc-page .g-account__all:hover,
body.gorilla-wc-page .g-account__all:focus-visible {
  color: var(--g-color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.g-account__all .g-account__ico { width: 15px; height: 15px; transform: rotate(180deg); }
@media (max-width: 640px) {
  .g-account__order-body { flex-direction: column; align-items: flex-start; gap: 10px; }
  .g-account__last-foot,
  .g-account__order-foot { align-items: stretch; flex-direction: column; }
  .g-account__actions .g-btn,
  .g-account__last-foot .g-btn { flex: 1 1 auto; }
}

/* пагинация */
.g-account__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.g-account__pager-info { font-size: 13px; font-weight: 700; color: #6b7280; }

/* бейдж статуса заказа */
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.g-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* На светлой карточке - мягкая заливка + тёмный текст статуса.
   Правка 09.09: добавлены draft и тёмные варианты для ВСЕХ статусов - на
   чёрной карточке «жёлтый на коричневом» (ожидание/черновик) был нечитаемым. */
.g-badge--active { background: rgb(var(--g-green-rgb) / .18); color: #2f5d00; }
.g-badge--done   { background: #101010; color: #fff; }
.g-badge--done::before { background: var(--g-color-green); }
.g-badge--wait   { background: rgba(240, 160, 0, .18); color: #7a4a00; }
.g-badge--off    { background: rgba(211, 0, 0, .10); color: #8a0000; }
.g-badge--draft  { background: rgb(var(--g-navy-rgb) / .10); color: #4a4f5c; }
/* на чёрной плашке - светлая заливка, тёмный текст (максимальный контраст) */
.g-account__card--dark .g-badge--done   { background: #fff; color: #0a0a0a; }
.g-account__card--dark .g-badge--done::before { background: var(--g-color-green); }
.g-account__card--dark .g-badge--active { background: var(--g-color-green); color: #0a0a0a; }
.g-account__card--dark .g-badge--wait   { background: #ffd07a; color: #4a2c00; }
.g-account__card--dark .g-badge--off    { background: #ffb3b3; color: #6b0000; }
.g-account__card--dark .g-badge--draft  { background: rgba(255, 255, 255, .22); color: #fff; }

/* --- Пустое состояние ------------------------------------------------------ */
.g-account__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: clamp(32px, 5vw, 56px) clamp(18px, 3vw, 32px);
}
.g-account__empty-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--g-color-green);
  margin-bottom: 4px;
}
.g-account__empty-ico .g-account__ico { width: 28px; height: 28px; }
.g-account .g-account__empty .g-account__card-title { margin: 0; font-size: 18px; }
.g-account__empty-text { max-width: 48ch; margin: 0 0 10px; color: #4a4f5c; font-size: 15px; line-height: 1.55; }

/* --- Ссылка назад ---------------------------------------------------------- */
body.gorilla-wc-page .g-account__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: rgb(var(--g-navy-rgb) / .04);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
body.gorilla-wc-page .g-account__back:hover,
body.gorilla-wc-page .g-account__back:focus-visible {
  background: rgb(var(--g-navy-rgb) / .09);
  color: var(--g-color-navy);
}
.g-account__back .g-account__ico { width: 16px; height: 16px; }

/* --- Заметки магазина по заказу ------------------------------------------- */
.g-account__notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.g-account__note-date { display: block; font-size: 12px; color: #6b7280; margin-bottom: 2px; }
.g-account__note-text p { margin: 0; font-size: 14px; line-height: 1.5; }

/* --- Адреса ---------------------------------------------------------------- */
.g-account__addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 640px) { .g-account__addresses { grid-template-columns: 1fr; } }
.g-account__address { display: flex; flex-direction: column; gap: 12px; }
.g-account__address-head { display: flex; align-items: center; gap: 10px; }
.g-account .g-account__address-head .g-account__card-title { margin: 0; }
.g-account__address-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--g-color-navy);
}
.g-account__address-ico .g-account__ico { width: 18px; height: 18px; }
.g-account__address-text {
  flex: 1;
  font-style: normal;
  font-size: 15px;
  line-height: 1.55;
  color: #24262b;
}
/* телефон и e-mail отдельными строками, приглушённо */
.g-account__address-line { display: block; margin-top: 6px; color: #6b7280; font-size: 14px; }
.g-account__address-line:first-of-type { margin-top: 10px; }
.g-account__address .g-btn { align-self: flex-start; }

/* --- Формы (адрес, данные аккаунта) ---------------------------------------- */
.g-account__form { display: flex; flex-direction: column; gap: 16px; }
.g-account__form fieldset { border: 0; margin: 0; min-width: 0; }
.g-account__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
@media (max-width: 640px) { .g-account__fields { grid-template-columns: 1fr; } }
.g-account .g-account__fields .form-row {
  margin: 0 0 14px;
  padding: 0;
  float: none;
  width: auto;
}
.g-account .g-account__fields .form-row-wide { grid-column: 1 / -1; }
/* Город, область, индекс, телефон и e-mail - по два в ряд: во всю колонку они
   выглядели «простынёй» на десктопе. Класс form-row-wide этим полям вешает
   скрипт WooCommerce (wc-address-i18n.js) уже в браузере, поэтому перебиваем
   по id, а не фильтром в PHP. */
@media (min-width: 641px) {
  .g-account__fields #billing_city_field,
  .g-account__fields #billing_state_field,
  .g-account__fields #billing_postcode_field,
  .g-account__fields #billing_phone_field,
  .g-account__fields #billing_email_field,
  .g-account__fields #shipping_city_field,
  .g-account__fields #shipping_state_field,
  .g-account__fields #shipping_postcode_field,
  .g-account__fields #shipping_phone_field { grid-column: auto; }
}
/* пустая ячейка-заполнитель (см. форму смены пароля) */
.g-account__field-gap { display: none; }
@media (min-width: 641px) { .g-account__field-gap { display: block; } }
.g-account .g-account__fields .form-row.hidden,
.g-account .g-account__fields .form-row[style*="display: none"] { display: none; }
.g-account .g-account__fields label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--g-color-navy);
  margin: 0 0 6px;
}
.g-account .g-account__fields .required { color: #d30000; font-weight: 700; border: 0; }
.g-account .g-account__fields .optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #9aa0ad;
}
.g-account .g-account__fields .woocommerce-input-wrapper { display: block; }
/* Единственная доступная страна WooCommerce рисует как «плоский» select
   (.country_to_state--single, без рамки) или как <strong> - и то и другое
   выглядело оборванной строкой рядом с полями. Приводим к виду
   нередактируемого поля. */
.g-account .g-account__fields .woocommerce-input-wrapper > strong,
body.gorilla-wc-page .g-account .g-account__fields select.country_to_state--single {
  display: block;
  width: 100%;
  height: auto;
  padding: 13px 16px;
  border: 1.5px solid rgb(var(--g-navy-rgb) / .10);
  border-radius: 12px;
  background: rgb(var(--g-navy-rgb) / .03);
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: #4a4f5c;
}
.g-account .g-account__fields input[type="text"],
.g-account .g-account__fields input[type="email"],
.g-account .g-account__fields input[type="tel"],
.g-account .g-account__fields input[type="password"],
.g-account .g-account__fields select,
.g-account .g-account__fields textarea {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 13px 16px;
  border: 1.5px solid rgb(var(--g-navy-rgb) / .16);
  border-radius: 12px;
  background: #fff;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  color: var(--g-color-navy);
  transition: border-color .2s ease;
}
.g-account .g-account__fields input:hover,
.g-account .g-account__fields select:hover,
.g-account .g-account__fields textarea:hover { border-color: rgb(var(--g-navy-rgb) / .30); }
/* фокус заметный, но спокойный: тёмная кромка + мягкое кольцо (та же геометрия,
   поле не «прыгает») */
.g-account .g-account__fields input:focus,
.g-account .g-account__fields select:focus,
.g-account .g-account__fields textarea:focus {
  outline: none;
  border-color: var(--g-color-navy);
  box-shadow: 0 0 0 3px rgb(var(--g-navy-rgb) / .10);
}
.g-account .g-account__fields .woocommerce-invalid input { border-color: #d30000; }
.g-account .g-account__fields .woocommerce-invalid input:focus { box-shadow: 0 0 0 3px rgba(211, 0, 0, .14); }
.g-account .g-account__fields .woocommerce-validated input { border-color: rgb(var(--g-green-rgb) / .55); }
/* select2 (страна) - под наши поля */
.g-account .g-account__fields .select2-container .select2-selection--single {
  height: auto;
  padding: 11px 16px;
  border: 1.5px solid rgb(var(--g-navy-rgb) / .16);
  border-radius: 12px;
}
.g-account .g-account__fields .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.3; padding: 0; font-size: 15px; }
.g-account .g-account__fields .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; right: 10px; }
/* «показать пароль» - как на форме входа (WooCommerce красит кнопку зелёным) */
.g-account .g-account__fields .password-input { position: relative; display: block; }
.g-account .g-account__fields .show-password-input {
  position: absolute;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%);
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9aa0ad !important;
  opacity: .8;
  cursor: pointer;
}
.g-account .g-account__fields .show-password-input:hover { opacity: 1; }
.g-account__hint {
  display: block;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  font-style: normal;
  color: #6b7280;
}
.g-account__hint--top { margin: -6px 0 14px; }
.g-account__hint em { font-style: normal; }
.g-account__form-actions { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .g-account__form-actions .g-btn { width: 100%; } }
/* индикатор надёжности пароля WooCommerce */
.g-account .woocommerce-password-strength {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
}
.g-account .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 12px; color: #6b7280; }

/* --- Детали заказа (.g-order - самодостаточно, работает и на «спасибо») ---- */
.g-order {
  background: rgb(var(--g-navy-rgb) / .04);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 26px);
}
.g-order__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(var(--g-navy-rgb) / .08);
}
.g-order__head-body { display: flex; flex-direction: column; gap: 3px; }
.g-order .g-order__title {
  font-family: 'DIN 2014 UI', 'DIN 2014', system-ui, sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--g-color-navy);
  margin: 0;
}
.g-order__date { font-size: 13px; color: #6b7280; }

.g-order__items { list-style: none; margin: 0; padding: 0; }
.g-order__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgb(var(--g-navy-rgb) / .08);
}
.g-order__item-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.g-order__item-thumb a { display: block; width: 100%; height: 100%; }
.g-order__item-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.g-order__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-order__item-name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--g-color-navy); }
.g-order__item-name a { color: inherit; text-decoration: none; }
.g-order__item-name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.g-order__item-meta { font-size: 13px; color: #6b7280; }
.g-order__item-meta .wc-item-meta { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; }
.g-order__item-meta .wc-item-meta p { display: inline; margin: 0; }
.g-order__item-note { font-size: 12.5px; color: #6b7280; }
.g-order__item-total { flex: 0 0 auto; font-weight: 800; font-size: 15px; white-space: nowrap; }

.g-order__totals { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.g-order__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.g-order__total dt { color: #6b7280; }
.g-order__total dd { margin: 0; font-weight: 700; text-align: right; }
.g-order__total--order_total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgb(var(--g-navy-rgb) / .08);
}
.g-order__total--order_total dt {
  color: var(--g-color-navy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.g-order__total--order_total dd { font-size: 20px; font-weight: 800; }
.g-order__total dd .woocommerce-Price-currencySymbol { font-weight: 600; }
.g-order__total dd small { font-size: 12px; color: #6b7280; font-weight: 500; }

.g-order__note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.g-order__note-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
}
.g-order__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
@media (max-width: 640px) {
  .g-order__actions .g-btn { flex: 1 1 auto; }
  .g-order__item { flex-wrap: wrap; }
  .g-order__item-body { flex-basis: calc(100% - 78px); }
  .g-order__item-total { margin-left: 78px; }
}

/* адреса и оплата заказа */
.g-order__customer { margin-top: 16px; }
.g-order__addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.g-order__address {
  background: rgb(var(--g-navy-rgb) / .04);
  border-radius: 16px;
  padding: 18px 20px;
}
.g-order__address-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--g-color-navy); }
.g-order__address-head .g-account__ico { width: 18px; height: 18px; }
.g-order .g-order__address-title {
  font-family: 'DIN 2014 UI', 'DIN 2014', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  margin: 0;
  color: var(--g-color-navy);
}
/* .g-order__customer - СОСЕД .g-order, а не потомок (order-details-customer.php
   подключается после закрытия секции заказа), поэтому селектор нужен отдельный:
   без него адреса оставались курсивом от браузерного address{} */
.g-order address,
.g-order__customer address { font-style: normal; font-size: 14px; line-height: 1.55; color: #24262b; }
.g-order address p,
.g-order__customer address p { margin: 4px 0 0; }
.g-order__customer p,
.g-order__customer address { text-transform: none; }
.g-order__muted { color: #8a8f9c; }

/* --- Уведомления WooCommerce (success / error / info) ---------------------- */
/* --- Гость: вход, восстановление пароля ------------------------------------ */
/* шапка кабинета уже даёт отступ - у карточек входа свой не нужен.
   Ширину форм ограничиваем и центрируем: это осознанная композиция, а не
   «контент уже контейнера», как было у самого кабинета. */
.g-account--guest .g-auth {
  padding: 0 0 clamp(24px, 4vw, 48px);
  max-width: 1060px;
  margin-inline: auto;
}
/* форма восстановления/нового пароля - внутри карточки, без старой серой
   рамки (.woocommerce-ResetPassword в gorilla-woocommerce.css) */
body.woocommerce-account .g-auth .woocommerce-ResetPassword {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}
body.woocommerce-account .g-auth form .form-row input.input-text {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1.5px solid rgb(var(--g-navy-rgb) / .16);
  border-radius: 12px;
  background: #fff;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 15px;
  color: var(--g-color-navy);
}
body.woocommerce-account .g-auth form .form-row input.input-text:hover { border-color: rgb(var(--g-navy-rgb) / .30); }
body.woocommerce-account .g-auth form .form-row input.input-text:focus {
  outline: none;
  border-color: var(--g-color-navy);
  box-shadow: 0 0 0 3px rgb(var(--g-navy-rgb) / .10);
}
/* на тёмной карточке регистрации кольцо фокуса светлое */
body.woocommerce-account .g-auth__card--register form .form-row input.input-text:focus {
  border-color: var(--g-color-green);
  box-shadow: 0 0 0 3px rgb(var(--g-green-rgb) / .30);
}
body.gorilla-wc-page .g-auth a:focus-visible,
body.gorilla-wc-page .g-auth button:focus-visible {
  outline: 2px solid var(--g-color-green);
  outline-offset: 3px;
}
/* «Забыли пароль?» - серым (глобальное правило ссылок делало её чёрной) */
body.gorilla-wc-page .g-auth .g-auth__lost { color: #6b7280; transition: color .18s ease; }
body.gorilla-wc-page .g-auth .g-auth__lost:hover { color: var(--g-color-navy); }
/* ссылка на политику в тёмной карточке регистрации */
body.gorilla-wc-page .g-auth__card--register a { color: var(--g-color-green); }
body.gorilla-wc-page .g-auth__card--register a:hover { color: #fff; }
body.woocommerce-account .g-auth .woocommerce-ResetPassword .g-btn { width: 100%; }
/* тексты карточек входа/регистрации без глобального капса */
.g-auth .g-auth__lead,
.g-auth .g-auth__note,
.g-auth .woocommerce-privacy-policy-text,
.g-auth .woocommerce-privacy-policy-text p { text-transform: none; }
/* зелёная кнопка - бренд-стандарт: чёрный текст на зелёном (перебиваем
   старое правило кабинета с !important) */
body.woocommerce-account .woocommerce-form button.g-btn--green,
body.woocommerce-account .g-account .g-btn--green,
body.woocommerce-account .g-auth .g-btn--green {
  background: var(--g-color-green) !important;
  color: #0a0a0a !important;
}
body.woocommerce-account .woocommerce-form button.g-btn--green:hover,
body.woocommerce-account .g-account .g-btn--green:hover,
body.woocommerce-account .g-auth .g-btn--green:hover {
  background: var(--g-color-paper, #f6f7f8) !important;
  color: #0a0a0a !important;
}
.g-auth__card--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.g-auth__card--center .g-auth__lead { margin-bottom: 22px; }
.g-account__done-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(var(--g-green-rgb) / .15);
  color: #2f5d00;
  margin-bottom: 14px;
}
.g-account__done-ico .g-account__ico { width: 30px; height: 30px; }
.g-auth__note--center { text-align: center; margin: 18px 0 0; }
/* «Запомнить меня» - обычным текстом (старое правило кабинета капсило все
   label формы входа) */
body.woocommerce-account .g-auth .woocommerce-form-login__rememberme {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: #4a4f5c;
}

/* --- Страница «Заказ оформлен» (order-received), 09.09 ----------------------
   Клиент: «страницы, когда заказ оформлен, просто нет» - она отдавала 404
   (правило вложений WP перехватывало эндпоинт, чинится в inc/account.php).
   Саму страницу рисует блок подтверждения заказа WooCommerce (шаблон темы
   checkout/thankyou.php при блочном чекауте НЕ участвует - переопределять его
   бесполезно), поэтому оформляем по его же разметке: строка-уведомление
   становится заголовком страницы, список фактов - плитками, детали заказа
   ниже уже рисует woocommerce/order/order-details.php темы. */
body.woocommerce-order-received .woocommerce-order { max-width: 1060px; margin: 0 auto; }
body.woocommerce-order-received p.woocommerce-thankyou-order-received {
  margin: 0 0 clamp(18px, 3vw, 28px);
  text-align: center;
  font-family: 'Jawbreak Sans Cut', 'DIN 2014', system-ui, sans-serif;
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--g-color-navy);
}
/* зелёный круг с галочкой над заголовком - маркер успеха вместо служебной
   плашки WooCommerce (одной картинкой, чтобы круг и галка не разъезжались) */
body.woocommerce-order-received p.woocommerce-thankyou-order-received::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'><circle cx=\'32\' cy=\'32\' r=\'32\' fill=\'%2384c003\'/><path d=\'M18 33.5 28 43.5 46 24\' fill=\'none\' stroke=\'%23101010\' stroke-width=\'6\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>") center / contain no-repeat;
}
body.woocommerce-order-received ul.woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 0 0 clamp(20px, 3vw, 30px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgb(var(--g-navy-rgb) / .08);
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  background: #f3f4f3;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--g-navy-rgb) / .55);
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--g-color-navy);
}
/* WooCommerce иногда отдаёт в списке пустой пункт - в сетке он давал дыру */
body.woocommerce-order-received ul.woocommerce-order-overview li:empty { display: none; }
/* клирфикс WooCommerce (ul::before/::after с content " ") в grid превращался
   в пустую плитку - гасим */
body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after { content: none; }

/* Guest forms: one scale and explicit dark-card contrast above WC defaults. */
body.woocommerce-account .g-auth__grid { align-items: stretch; }
body.woocommerce-account .g-auth__card { min-width: 0; display: flex; flex-direction: column; }
body.woocommerce-account .g-auth .g-auth__title { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; margin: 0 0 12px; }
body.woocommerce-account .g-auth__card--register .g-auth__title,
body.woocommerce-account .g-auth__card--register form label { color: #fff; }
body.woocommerce-account .g-auth__card--register .g-auth__lead,
body.woocommerce-account .g-auth__card--register .g-auth__note,
body.woocommerce-account .g-auth__card--register .woocommerce-privacy-policy-text p { color: #c2c5bf; }
body.woocommerce-account .g-auth .g-auth__lead { font-size: 16px; line-height: 1.5; }
body.woocommerce-account .g-auth .g-auth__oauth { margin-top: auto; padding-top: 24px; }
body.woocommerce-account .g-auth .g-btn { min-height: 48px; font-size: 14px; }
body.woocommerce-account .g-auth__card--register button[name="register"] { background: var(--g-color-green); border-color: var(--g-color-green); color: #0a0a0a !important; }
body.woocommerce-account .g-auth__card--register button[name="register"]:hover { background: #b4ea31; border-color: #b4ea31; color: #0a0a0a !important; }
body.woocommerce-account .g-auth form .form-row input.input-text { font-size: 16px; min-height: 48px; }

/* Separate checkout consent details from the address cards. */
.g-order__customer .wc-block-order-confirmation-additional-fields-wrapper {
  margin-top: 32px;
  clear: both;
}
.g-order__customer .wc-block-order-confirmation-additional-fields-wrapper > h2 {
  margin: 0 0 16px;
  line-height: 1.3;
}
.g-order__customer .wc-block-order-confirmation-additional-fields-wrapper table {
  width: 100%;
  table-layout: fixed;
}
.g-order__customer .wc-block-order-confirmation-additional-fields-wrapper th,
.g-order__customer .wc-block-order-confirmation-additional-fields-wrapper td {
  overflow-wrap: anywhere;
  vertical-align: top;
}
.g-order__customer .wc-block-order-confirmation-additional-fields-wrapper th { width: 85%; }
@media (max-width: 640px) {
  .g-order__customer .wc-block-order-confirmation-additional-fields-wrapper { margin-top: 24px; }
}