/* Grillnurk Child — WooCommerce (Фаза 4): каталог-архив + карточка товара.
 * Стилизует стандартную разметку Woo + вывод хуков inc/woo.php. Зависит от tokens/shell. */

/* ===================== ТУЛБАР АРХИВА: чипы + фильтры ===================== */
.woocommerce .gn-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  margin: 0 0 16px;
}
.gn-chip-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--gn-border-2);
  border-radius: var(--gn-r-pill);
  background: var(--gn-card);
  color: var(--gn-text);
  font-family: var(--gn-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
/* Жёсткая фиксация высоты чипа (защита от переопределений/сабпиксельных скачков):
   выше специфичность (0,3,0) + min/max-height + align-self + не сжимать флексом. */
.woocommerce .gn-chips .gn-chip-cat {
  flex: 0 0 auto;
  align-self: center;
  min-height: 36px;
  max-height: 36px;
  overflow: hidden;
}
.gn-chip-cat:hover { border-color: var(--gn-acc); color: var(--gn-acc); }
.gn-chip-cat--active,
.gn-chip-cat--active:hover { background: var(--gn-dark-btn); border-color: var(--gn-dark-btn); color: var(--gn-on-dark); }

/* строка сортировки + тумблер наличия */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering { float: none; margin: 0; }
/* Тулбар фильтров: счётчик + тумблер + сортировка в одну строку (flex, wrap).
 * Счётчик слева (margin-right:auto), тумблер и сортировка — справа. */
.gn-toolbar { display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; column-gap: 12px; margin: 0 0 18px; }
/* Все контролы на одной оси: убить собственные margin'ы Woo (p.result-count margin-bottom,
   form.ordering и т.п.). Спецификация 0,2,1 > WC (0,2,0) → выигрывает независимо от порядка. */
body.woocommerce .gn-toolbar > *,
body.woocommerce-page .gn-toolbar > * { margin: 0; }
/* Счётчик слева (margin-right:auto), тумблер+сортировка справа. Спец 0,3,1 > нормализатора. */
body.woocommerce .gn-toolbar .woocommerce-result-count,
body.woocommerce-page .gn-toolbar .woocommerce-result-count { margin: 0 auto 0 0; line-height: 1.2; }
.gn-toolbar .gn-instock { order: 2; }
.gn-toolbar .woocommerce-ordering { order: 3; }
.gn-instock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--gn-border-2);
  border-radius: var(--gn-r-pill);
  background: var(--gn-card);
  color: var(--gn-text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
/* Точка-индикатор наличия — всегда зелёная (та же семантика, что точка на карточке товара). */
.gn-instock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gn-stock, #3E9C57); }
.gn-instock--on { background: var(--gn-stock-bg); border-color: var(--gn-stock); color: var(--gn-stock-txt); }
.gn-instock--on .gn-instock__dot { background: var(--gn-stock); }

.woocommerce .woocommerce-result-count { color: var(--gn-text-2); font-size: 14px; }
.woocommerce .woocommerce-ordering select,
.gn-instock,
.woocommerce select.orderby {
  font-family: var(--gn-font-body);
}
.woocommerce .woocommerce-ordering select {
  width: auto;
  max-width: 240px;
  height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--gn-border-2);
  border-radius: var(--gn-r-pill);
  background-color: var(--gn-card);
  color: var(--gn-text);
  font-size: 14px;
}

/* NB: нейтрализация белого GP-бокса (.inside-article) переехала в recolor.css —
 * woo.css грузится только на витрине (is_woocommerce() || storefront-page), поэтому
 * здешние правила для cart/checkout/order-received были мёртвыми. См. recolor.css. */

/* ===================== СЕТКА + PRODUCT CARD ===================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; } /* убрать clearfix-артефакты */

.woocommerce ul.products li.product {
  position: relative;
  width: auto !important;
  margin: 0 !important;
  padding: 12px;
  display: flex;
  flex-direction: column;
  background: var(--gn-card);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-r-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--gn-sh-card); }

/* Медиа (фото или буквица-плейсхолдер) */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  color: var(--gn-text);
  text-decoration: none;
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .gn-ph--letter {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 0 12px;
  border-radius: 12px;
  background: radial-gradient(120% 120% at 30% 20%, var(--gn-ph-1), var(--gn-ph-2));
}
.woocommerce ul.products li.product .gn-ph--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gn-font-head);
  font-weight: 700;
  font-size: 42px;
  color: var(--gn-text-4);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  margin: 0 0 8px;
  font-family: var(--gn-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--gn-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.woocommerce ul.products li.product .price {
  margin: 0;
  font-family: var(--gn-font-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--gn-text);
}
.woocommerce ul.products li.product .price del { color: var(--gn-text-4); font-weight: 400; font-size: 14px; margin-left: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Скидок в концепте больше нет — бейдж −N% скрыт (реверсивно: удалить это правило). */
.woocommerce span.onsale,
.onsale.gn-badge { display: none !important; }

/* Бейдж скидки */
.woocommerce ul.products li.product .onsale.gn-badge,
.gn-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 4px 10px;
  background: var(--gn-acc);
  color: #fff;
  border-radius: var(--gn-r-pill);
  font-family: var(--gn-font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}

/* Точка наличия + рассрочка */
.gn-card-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.gn-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gn-stock-txt); }
.gn-stock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gn-stock); box-shadow: 0 0 0 3px rgba(62, 156, 87, 0.18); }
.gn-stock--out { color: var(--gn-text-4); }
.gn-stock--out .gn-stock__dot { background: var(--gn-text-4); box-shadow: none; }
.gn-inst { font-size: 13px; color: var(--gn-text-2); }
.gn-inst .amount { color: var(--gn-text-2); }

/* Кнопка «в корзину» на карточке — тёмная (перебивает ре-колор) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.added_to_cart {
  margin-top: 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gn-dark-btn);
  border-color: var(--gn-dark-btn);
  color: var(--gn-on-dark);
  border-radius: var(--gn-r-btn);
  font-family: var(--gn-font-body);
  font-weight: 600;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover { background: var(--gn-acc); border-color: var(--gn-acc); color: #fff; }

/* Пустое состояние */
.gn-empty { text-align: center; padding: clamp(40px, 6vw, 80px) 20px; }
.gn-empty__t { font-family: var(--gn-font-head); font-weight: 600; font-size: 22px; color: var(--gn-text); margin: 0 0 8px; }
.gn-empty__s { color: var(--gn-text-2); margin: 0; }

/* ===================== SINGLE-PRODUCT ===================== */
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--gn-r-block);
}
.single-product div.product .flex-control-thumbs li img { border-radius: 12px; }
.single-product div.product .flex-control-thumbs li img.flex-active,
.single-product div.product .flex-control-thumbs li img:hover { outline: 2px solid var(--gn-acc); outline-offset: 1px; }

.gn-pdp-eyebrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.gn-pdp-eyebrow .gn-pdp-cat a { color: var(--gn-text-2); text-decoration: none; }
.gn-pdp-eyebrow .gn-pdp-cat a:hover { color: var(--gn-acc); }
.gn-pdp-sku { color: var(--gn-text-4); }

.single-product div.product .product_title { font-family: var(--gn-font-head); font-weight: 700; color: var(--gn-text); }
.single-product div.product p.price,
.single-product div.product span.price { font-family: var(--gn-font-head); font-weight: 700; color: var(--gn-text); }
.single-product div.product p.price del { color: var(--gn-text-4); font-weight: 400; }

.gn-pdp-badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 12px 0 4px; }
.gn-pdp-esto { display: inline-flex; align-items: center; padding: 6px 12px; background: var(--gn-pill); color: var(--gn-text-3); border-radius: var(--gn-r-pill); font-size: 13px; font-weight: 600; }
.gn-pdp-esto .amount { color: var(--gn-text-3); }

/* Степпер + кнопка */
.single-product div.product .quantity input.qty {
  height: 48px;
  border: 1px solid var(--gn-border-2);
  border-radius: var(--gn-r-btn);
  background: var(--gn-card);
  color: var(--gn-text);
}
.single-product div.product form.cart .button {
  min-height: 48px;
  border-radius: var(--gn-r-btn);
  font-family: var(--gn-font-body);
  font-weight: 600;
}

/* Таблица характеристик */
.gn-pdp-specs { margin: 22px 0; }
.gn-pdp-specs__t { font-family: var(--gn-font-head); font-weight: 600; font-size: 18px; color: var(--gn-text); margin: 0 0 10px; }
.gn-pdp-specs__tbl { width: 100%; border-collapse: collapse; }
.gn-pdp-specs__tbl th,
.gn-pdp-specs__tbl td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--gn-border); font-size: 14px; vertical-align: top; }
.gn-pdp-specs__tbl th { width: 42%; color: var(--gn-text-2); font-weight: 500; }
.gn-pdp-specs__tbl td { color: var(--gn-text); }

/* Похожие товары — та же сетка/карточка (наследует .products выше) */
.single-product .related > h2,
.single-product .up-sells > h2 { font-family: var(--gn-font-head); font-weight: 700; font-size: clamp(22px, 3vw, 32px); color: var(--gn-text); }

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product { transition: none; }
}

/* ===================== «Новинки»: кнопка «Смотреть весь каталог» =====================
 * Под гридом на page-витринах (вариант b: 100 новейших без пагинации). Self-contained
 * (.gn-btn базовый в home.css, который на этих страницах не грузится). */
.gn-novinki-all { text-align: center; margin: 24px 0 4px; }
.gn-novinki-all .gn-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border: 1.5px solid var(--gn-border-2);
  border-radius: var(--gn-r-btn);
  background: transparent;
  color: var(--gn-text);
  font-family: var(--gn-font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.gn-novinki-all .gn-btn--ghost:hover { border-color: var(--gn-acc); color: var(--gn-acc); }

/* ===================== SINGLE-PRODUCT POLISH ==================================
 * Кнопка add-to-cart / табы / липкий бар — под палитру.
 *
 * КАСКАД (проверено по served CSS на PDP): woo.css = позиция 23, а перебивать надо
 * тех, кто ПОЗЖЕ:
 *   32. gp-premium/woocommerce/functions/css/woocommerce.min.css
 *   33. generate-woocommerce-inline-css  ← синева живёт здесь
 * Источник синевы: `.woocommerce button.button.alt { background-color:#1e73be }` (0,3,1).
 * Цвет захардкожен ЛИТЕРАЛОМ, а не var(--accent) — поэтому ре-маппинг токенов GP в
 * recolor.css до него не дотянулся. Бьём специфичностью, !important не нужен нигде.
 * Геометрия кнопки/степпера (min-height, радиус, шрифт) — выше, в «Степпер + кнопка». */

/* --- Кнопка add-to-cart (основная форма) — терракота вместо синей.
 *     (0,4,2)/(0,5,3) > GP-inline (0,3,1); hover (0,5,2) > GP (0,4,1). --- */
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product form.cart button.button.alt {
  background: var(--gn-acc);
  border-color: var(--gn-acc);
  color: #fff;
}
.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product form.cart button.button.alt:hover {
  background: var(--gn-acc-d);
  border-color: var(--gn-acc-d);
  color: #fff;
}

/* --- Табы Kirjeldus / Arvustused — пилюли вместо Woo-«папок».
 *     Селекторы WC и GP Premium совпадают: `.woocommerce div.product .woocommerce-tabs
 *     ul.tabs li` (0,4,3). WC грузится РАНЬШЕ нас (11) — его бьём порядком, а GP (32) —
 *     ПОЗЖЕ, поэтому нужен префикс `body` → (0,4,4) > (0,4,3). GP задаёт на табах
 *     background-color, border-width/color, margin, border-radius и `li a, li.active a`
 *     ((0,4,4)/(0,5,4)) → наши a-правила подняты до (0,4,5)/(0,5,5).
 *     `.active` в HTML нет — его вешает WC-JS при загрузке. --- */
body.woocommerce div.product .woocommerce-tabs ul.tabs {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
body.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: var(--gn-card);
  border: 1px solid var(--gn-border-2);
  border-radius: var(--gn-r-pill);
  top: 0;
  overflow: visible;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; border: 0; }
body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 9px 18px;
  color: var(--gn-text-2);
  font-family: var(--gn-font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li:hover { border-color: var(--gn-acc); }
body.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a { color: var(--gn-acc); }
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--gn-acc);
  border-color: var(--gn-acc);
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce div.product .woocommerce-Tabs-panel { padding-top: 4px; }

/* --- Липкий add-to-cart бар (GP Premium, `sticky_add_to_cart_panel`):
 *       #wc-sticky-cart-panel.add-to-cart-panel > .inside-add-to-cart-panel
 *         > .product-image / .product-title / .product-price / form.cart
 *     Бар прижат к ВЕРХУ (`position:fixed; top:0; transform:translateY(-100%)`, показ по
 *     классу .show-sticky-add-to-cart) → граница/тень СНИЗУ, не сверху. Механику показа
 *     (position/opacity/transform/transition/z-index) НЕ трогаем — только вид.
 *     Префикс по id (1,x,x) уверенно бьёт GP-inline `.add-to-cart-panel` (0,1,0)
 *     и `.woocommerce button.button.alt` (0,3,1). --- */
#wc-sticky-cart-panel {
  background: var(--gn-card);
  border-bottom: 1px solid var(--gn-border-3);
  box-shadow: 0 8px 30px -18px rgba(60, 40, 20, 0.4);
  color: var(--gn-text);
  font-family: var(--gn-font-body);
}
#wc-sticky-cart-panel .product-title { color: var(--gn-text); font-weight: 600; }
#wc-sticky-cart-panel .product-price,
#wc-sticky-cart-panel .product-price .amount {
  font-family: var(--gn-font-head);
  font-weight: 600;
  color: var(--gn-text);
}
#wc-sticky-cart-panel img { border-radius: 8px; }
#wc-sticky-cart-panel .quantity input.qty {
  height: 40px;
  border: 1px solid var(--gn-border-2);
  border-radius: var(--gn-r-btn);
  background: var(--gn-card);
  color: var(--gn-text);
}
#wc-sticky-cart-panel form.cart button.button.alt {
  background: var(--gn-acc);
  border-color: var(--gn-acc);
  color: #fff;
  border-radius: var(--gn-r-btn);
  font-family: var(--gn-font-body);
  font-weight: 600;
  min-height: 40px;
}
#wc-sticky-cart-panel form.cart button.button.alt:hover {
  background: var(--gn-acc-d);
  border-color: var(--gn-acc-d);
  color: #fff;
}