/*
Theme Name: Shop Template
Theme URI: https://example.com/
Description: Дизайн-болванка интернет-магазина. Дочерняя тема Storefront: от
             родителя берём рабочие механизмы WooCommerce (корзина, оформление
             заказа, личный кабинет), весь визуал — свой, здесь.
             Под конкретного клиента правятся переменные в блоке ниже —
             в большинстве случаев этого достаточно, лезть в код не нужно.
Author: RocketLab
Template: storefront
Version: 0.1.0
Text Domain: shop-template
*/

/* ═══════════════════════════════════════════════════════════════════════════
   ФИРМЕННЫЙ СТИЛЬ КЛИЕНТА
   Всё, что меняется под каждого клиента, собрано здесь, в одном месте.
   Меняем цвета и шрифты тут — они подхватываются по всему сайту.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ВАЖНО: сами значения задаются НЕ здесь.
     Универсальные — в assets/css/tokens.css, брендовые клиента — в
     assets/css/client/<клиент>.css. Ниже только связка имён этой темы с
     общими токенами шаблона.

     Зачем так: цвет должен задаваться ровно в одном месте. Если вписать
     его сюда, у клиента будет два источника правды, и однажды они разойдутся
     — кнопка станет одного цвета, а плашка скидки другого. */

  --shop-accent: var(--st-color-primary);
  --shop-accent-hover: var(--st-color-primary-hover);
  --shop-accent-text: var(--st-color-on-primary);

  --shop-text: var(--st-color-text);
  --shop-text-muted: var(--st-color-text-muted);
  --shop-bg: var(--st-color-surface);
  --shop-bg-soft: var(--st-color-surface-soft);
  --shop-border: var(--st-color-border);

  --shop-price: var(--st-color-text);
  --shop-sale: var(--st-color-sale);
  --shop-success: var(--st-color-success);

  --shop-font: var(--st-font-body);
  --shop-font-heading: var(--st-font-heading);

  --shop-radius: var(--st-radius-card);
  --shop-shadow: var(--st-shadow-card);

  --shop-width: var(--st-container);
}

/* ═══════════════════════════════════════════════════════════════════════════
   БАЗА
   Дальше — наш визуал поверх Storefront. Родительская тема грузится сама
   (см. functions.php), здесь только то, чем мы её перекрываем.
   ═══════════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--shop-font);
  color: var(--shop-text);
  background: var(--shop-bg);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--shop-font-heading);
  color: var(--shop-text);
  line-height: 1.25;
  font-weight: 700;
}

a { color: var(--shop-accent); }
a:hover { color: var(--shop-accent-hover); }

/* Контейнер: Storefront по умолчанию уже 66.4%, задаём свою ширину */
.col-full {
  max-width: var(--shop-width);
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* ─── Кнопки ─────────────────────────────────────────────────────────────── */
button, input[type="button"], input[type="submit"],
.button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--shop-accent);
  color: var(--shop-accent-text);
  border: none;
  border-radius: var(--shop-radius);
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  transition: background .15s ease;
}

button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce button.button.alt:hover {
  background: var(--shop-accent-hover);
  color: var(--shop-accent-text);
}

/* Главная кнопка действия («В корзину», «Оформить заказ») */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
  background: var(--shop-accent);
  color: var(--shop-accent-text);
}

/* ─── Каталог товаров ────────────────────────────────────────────────────── */
.woocommerce ul.products li.product {
  background: var(--shop-bg);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius);
  padding: 14px;
  box-sizing: border-box;
  box-shadow: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.woocommerce ul.products li.product:hover {
  border-color: transparent;
  box-shadow: var(--shop-shadow), 0 8px 24px rgba(16, 24, 40, .08);
}

.woocommerce ul.products li.product img {
  border-radius: calc(var(--shop-radius) - 4px);
  margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  padding: 0;
  color: var(--shop-text);
}

.woocommerce ul.products li.product .price {
  color: var(--shop-price);
  font-size: 18px;
  font-weight: 700;
}

.woocommerce ul.products li.product .price del {
  color: var(--shop-text-muted);
  font-size: 14px;
  font-weight: 400;
  opacity: 1;
}

.woocommerce ul.products li.product .price ins {
  color: var(--shop-sale);
  text-decoration: none;
}

/* Плашка «Скидка» */
.woocommerce span.onsale {
  background: var(--shop-sale);
  color: #fff;
  border-radius: 999px;
  min-height: auto;
  min-width: auto;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* ─── Карточка товара ────────────────────────────────────────────────────── */
.woocommerce div.product .product_title {
  font-size: 28px;
  margin-bottom: 12px;
}

.woocommerce div.product p.price {
  color: var(--shop-price);
  font-size: 30px;
  font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: var(--shop-radius) var(--shop-radius) 0 0;
}

/* Наличие товара — покупателю это важнее, чем принято рисовать */
.woocommerce div.product .stock { font-weight: 600; }
.woocommerce div.product .stock.in-stock { color: var(--shop-success); }
.woocommerce div.product .stock.out-of-stock { color: var(--shop-sale); }

/* ─── Формы: корзина, оформление заказа ──────────────────────────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius);
  padding: 11px 14px;
  font-size: 15px;
  background: var(--shop-bg);
  color: var(--shop-text);
  box-sizing: border-box;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--shop-accent);
  outline: 2px solid color-mix(in srgb, var(--shop-accent) 25%, transparent);
  outline-offset: 0;
}

.woocommerce-checkout #payment,
.woocommerce .cart-collaterals .cart_totals > *,
.woocommerce-checkout-review-order {
  background: var(--shop-bg-soft);
  border-radius: var(--shop-radius);
}

/* ─── Сообщения магазина ─────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--shop-accent);
  border-radius: var(--shop-radius);
}

.woocommerce-error { border-top-color: var(--shop-sale); }

/* ─── Главная ────────────────────────────────────────────────────────────── */
/* Заголовок «Главная» посреди первого экрана — обычная болячка шаблонной
   главной: техническое название страницы, которое покупателю ничего не
   говорит и занимает лучшее место на экране. */
.home.page .entry-header,
.home.page .entry-title {
  display: none;
}

/* Первый блок главной без заголовка иначе начинается с большого провала */
.home.page .site-main {
  padding-top: 0;
}

/* ─── Мобильные ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { font-size: 15px; }
  .woocommerce div.product .product_title { font-size: 22px; }
  .woocommerce div.product p.price { font-size: 24px; }
  .col-full { padding-left: 16px; padding-right: 16px; }
}