/**
 * mospion.ru — Каталог: Design System v2
 * ─────────────────────────────────────────────────────────────────
 * Подход: только визуальные переопределения поверх Impreza.
 * НЕ меняем display/position/grid у карточки — Impreza генерирует
 * inline <style> с !important которые ломают любую перекладку DOM.
 *
 * DOM Impreza:
 *   .w-grid.product-list > .w-grid-list > article.w-grid-item
 *   > .w-grid-item-h
 *     > .usg_vwrapper_2       (image wrapper)
 *     > .usg_hwrapper_1       (title + price row, align_justify)
 *     > .usg_hwrapper_2       (buttons row: usg_btn_1 + usg_html_1 + usg_add_to_cart_1)
 */

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADING / CATEGORY PAGE
═══════════════════════════════════════════════════════════════ */

.woocommerce-products-header {
  padding-bottom: 24px !important;
  border-bottom: 1px solid rgba(13,13,13,.08) !important;
  margin-bottom: 32px !important;
}

.woocommerce-products-header__title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: clamp(28px, 5vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: #0D0D0D !important;
  line-height: 1 !important;
}

/* Filter / sort bar */
.woocommerce-result-count,
.woocommerce-ordering {
  font-family: 'DM Sans', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD BASE — визуальный редизайн поверх Impreza
═══════════════════════════════════════════════════════════════ */

.w-grid.product-list .w-grid-item-h {
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(13,13,13,.07) !important;
  overflow: hidden !important;
  transition: box-shadow .22s ease, transform .22s ease !important;
}

.no-touch .w-grid.product-list .w-grid-item-h:hover {
  box-shadow: 0 8px 32px rgba(13,13,13,.1), 0 2px 8px rgba(13,13,13,.06) !important;
  transform: translateY(-2px) !important;
  z-index: 4 !important;
}

/* ── Product image wrapper ──────────────────────────────────── */
.w-grid.product-list .usg_post_image_1 {
  overflow: hidden !important;
}

.w-grid.product-list .usg_post_image_1 img {
  transition: transform .4s ease !important;
}

.no-touch .w-grid.product-list .w-grid-item-h:hover .usg_post_image_1 img {
  transform: scale(1.04) !important;
}

/* ── Category label above title (via ::before pseudo-element) ─ */
/* Применяется только к обычным карточкам (не featured 7n) */
.w-grid.product-list .usg_post_title_1::before {
  content: 'ПИОНЫ';
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #C4547A !important;
  margin-bottom: 5px !important;
  line-height: 1 !important;
}

/* Featured cards (7n) — убрать категорийный лейбл (они занимают половину экрана) */
.w-grid.product-list .w-grid-item:nth-child(7n) .usg_post_title_1::before {
  display: none !important;
}

/* Category-specific labels */
.w-grid.product-list article.product_cat-bukety .usg_post_title_1::before           { content: 'БУКЕТЫ' !important; }
.w-grid.product-list article.product_cat-rozovye-piony .usg_post_title_1::before    { content: 'РОЗОВЫЕ' !important; }
.w-grid.product-list article.product_cat-korallovye-piony .usg_post_title_1::before { content: 'КОРАЛЛОВЫЕ' !important; }
.w-grid.product-list article.product_cat-belye-piony .usg_post_title_1::before      { content: 'БЕЛЫЕ' !important; }
.w-grid.product-list article.product_cat-v-korobke .usg_post_title_1::before        { content: 'В КОРОБКЕ' !important; }
.w-grid.product-list article.product_cat-piony-v-korzine .usg_post_title_1::before  { content: 'В КОРЗИНЕ' !important; }

/* ── Title ──────────────────────────────────────────────────── */
.w-grid.product-list .usg_post_title_1 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: #0D0D0D !important;
}

/* ── Price ──────────────────────────────────────────────────── */
.w-grid.product-list .usg_product_field_3,
.w-grid.product-list .w-post-elm.product_field.price {
  font-family: 'DM Mono', monospace !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #0D0D0D !important;
  letter-spacing: -.01em !important;
}

.w-grid.product-list .usg_product_field_3 del,
.w-grid.product-list del .woocommerce-Price-amount {
  font-size: 11px !important;
  color: #ABABAB !important;
  font-weight: 400 !important;
}

/* ── Buttons — синий цвет (оригинальный Impreza) ────────────── */
/* "Заказать" ссылка на страницу товара */
.w-grid.product-list .usg_btn_1 .w-btn,
.w-grid.product-list .usg_btn_1 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  background: #4d69be !important;
  color: #fff !important;
  border-radius: 9999px !important;
  border: none !important;
  transition: background .15s, transform .1s !important;
  text-decoration: none !important;
}

.w-grid.product-list .usg_btn_1:hover .w-btn,
.w-grid.product-list .usg_btn_1:hover {
  background: #3a56b0 !important;
}

/* WooCommerce add-to-cart кнопка */
.w-grid.product-list .w-btn-wrapper a.button,
.w-grid.product-list .w-btn-wrapper a.add_to_cart_button {
  background: #4d69be !important;
  color: #fff !important;
  border-radius: 9999px !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  transition: background .15s !important;
}

.w-grid.product-list .w-btn-wrapper a.button:hover,
.w-grid.product-list .w-btn-wrapper a.add_to_cart_button:hover {
  background: #3a56b0 !important;
}

/* ── hwrapper spacing ────────────────────────────────────────── */
.layout_524588 .usg_hwrapper_1 {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 14px !important;
  min-height: auto !important;
}

.layout_524588 .usg_hwrapper_2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

/* ── Hover overlay buttons (hwrapper_3) ─────────────────────── */
.layout_524588 .usg_hwrapper_3 {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(13,13,13,.06) !important;
  padding: 12px !important;
}

/* ── Wishlist icon ──────────────────────────────────────────── */
.w-grid.product-list .usg_html_2 {
  z-index: 99 !important;
}

.w-grid.product-list .usg_html_2 .tinvwl_add_to_wishlist_button {
  width: 34px !important;
  height: 34px !important;
  background: rgba(13,13,13,.55) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(4px) !important;
  transition: background .15s !important;
}

.w-grid.product-list .usg_html_2 .tinvwl_add_to_wishlist_button:hover {
  background: rgba(13,13,13,.8) !important;
}

.w-grid.product-list .usg_html_2 .tinvwl-icon-heart::before,
.w-grid.product-list .usg_html_2 .tinvwl-icon-heart-solid::before {
  color: #fff !important;
  font-size: 14px !important;
}

/* ── Text label (custom field) ──────────────────────────────── */
.w-grid.product-list .usg_text_1 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #C4547A !important;
}

/* ── Descriptions / excerpts — no italic, DM Sans ───────────── */
.w-grid.product-list .w-post-elm.post_excerpt,
.w-grid.product-list .usg_post_excerpt_1,
.w-grid.product-list .post-excerpt,
.w-grid.product-list p,
.w-grid.product-list em,
.w-grid.product-list i {
  font-family: 'DM Sans', sans-serif !important;
  font-style: normal !important;
  font-size: 13px !important;
  color: #6A6A6A !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* ── FEATURED CARD — text section ──────────────────────────── */
.w-grid.product-list .w-grid-item:nth-child(7n) .usg_post_title_1 {
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
  text-transform: none !important;
  width: auto !important;
}

.w-grid.product-list .w-grid-item:nth-child(7n) .usg_product_field_3 {
  font-size: 22px !important;
}

.w-grid.product-list .w-grid-item:nth-child(7n) .usg_hwrapper_1 {
  padding: 24px 28px 8px !important;
}

.w-grid.product-list .w-grid-item:nth-child(7n) .usg_hwrapper_2 {
  padding: 0 28px 24px !important;
}

/* ═══════════════════════════════════════════════════════════════
   ALTERNATING GRID LAYOUT
   Mobile  <768px  → 2 колонки (50%)
   Tablet  768-1199px → 2 колонки (50%), featured (7n) = 100%
   Desktop ≥1200px → 4 колонки (25%), 7n-2/7n-1 = 50%, 7n = 100%
═══════════════════════════════════════════════════════════════ */

/* ── Базовые (mobile + tablet): 2 колонки ──────────────────── */
.w-grid.product-list .w-grid-list > .w-grid-item:not(:nth-child(7n)) {
  width: 50% !important;
  max-width: 50% !important;
  flex-basis: 50% !important;
  flex-shrink: 0 !important;
}

/* 7n-2 и 7n-1 тоже 50% на mobile/tablet */
.w-grid.product-list .w-grid-list > .w-grid-item:nth-child(7n-2),
.w-grid.product-list .w-grid-list > .w-grid-item:nth-child(7n-1) {
  width: 50% !important;
  max-width: 50% !important;
  flex-basis: 50% !important;
  flex-shrink: 0 !important;
}

/* ── DESKTOP ≥1200px: 4 колонки ─────────────────────────────── */
@media (min-width: 1200px) {
  .w-grid.product-list .w-grid-list > .w-grid-item:not(:nth-child(7n)) {
    width: 25% !important;
    max-width: 25% !important;
    flex-basis: 25% !important;
    flex-shrink: 0 !important;
  }

  /* 7n-2 и 7n-1 занимают полный ряд по 2 товара — 50% каждый */
  .w-grid.product-list .w-grid-list > .w-grid-item:nth-child(7n-2),
  .w-grid.product-list .w-grid-list > .w-grid-item:nth-child(7n-1) {
    width: 50% !important;
    max-width: 50% !important;
    flex-basis: 50% !important;
    flex-shrink: 0 !important;
  }
}

/* Изображение: cover crop на всех карточках кроме featured */
.w-grid.product-list .w-grid-item:not(:nth-child(7n)) .usg_post_image_1 img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
}

.w-grid.product-list .w-grid-item:not(:nth-child(7n)) .usg_post_image_1 {
  max-height: none !important;
}

/* square crop only on mobile */
@media (max-width: 767px) {
  .w-grid.product-list .w-grid-item:not(:nth-child(7n)) .usg_post_image_1 img {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
}

/* Featured: full width */
.w-grid.product-list .w-grid-list > .w-grid-item:nth-child(7n) {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  flex-shrink: 0 !important;
}

.w-grid.product-list .w-grid-item:nth-child(7n) > .w-grid-item-h {
  display: grid !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
}

.w-grid.product-list .w-grid-item:nth-child(7n) .usg_post_image_1,
.w-grid.product-list .w-grid-item:nth-child(7n) .usg_vwrapper_2 {
  max-height: none !important;
}

.w-grid.product-list .w-grid-item:nth-child(7n) .usg_post_image_1 img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: auto !important;
}

.w-grid.product-list .w-grid-item:nth-child(7n) .w-btn,
.w-grid.product-list .w-grid-item:nth-child(7n) .add_to_cart_button,
.w-grid.product-list .w-grid-item:nth-child(7n) .tinvwl_add_to_wishlist_button {
  position: relative;
  z-index: 5;
}

/* Featured: image LEFT — 14n+7 */
.w-grid.product-list .w-grid-item:nth-child(14n + 7) > .w-grid-item-h {
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr) !important;
  grid-template-rows: auto auto !important;
}

.w-grid.product-list .w-grid-item:nth-child(14n + 7) > .w-grid-item-h > .usg_vwrapper_2 {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  min-width: 0 !important;
}

.w-grid.product-list .w-grid-item:nth-child(14n + 7) > .w-grid-item-h > .usg_hwrapper_1 {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.w-grid.product-list .w-grid-item:nth-child(14n + 7) > .w-grid-item-h > .usg_hwrapper_2 {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* Featured: image RIGHT — 14n */
.w-grid.product-list .w-grid-item:nth-child(14n) > .w-grid-item-h {
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important;
  grid-template-rows: auto auto !important;
}

.w-grid.product-list .w-grid-item:nth-child(14n) > .w-grid-item-h > .usg_vwrapper_2 {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  min-width: 0 !important;
}

.w-grid.product-list .w-grid-item:nth-child(14n) > .w-grid-item-h > .usg_hwrapper_1 {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.w-grid.product-list .w-grid-item:nth-child(14n) > .w-grid-item-h > .usg_hwrapper_2 {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
