/**
 * 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) — лейбл теперь показываем всегда (нет featured) */

/* 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 — синий цвет, высокая специфичность (0,3,0) ────── */
/* Перебивает Impreza inline <style> с (0,2,0) + !important */
.w-grid.product-list .w-grid-list .usg_btn_1,
.w-grid.product-list .w-grid-list .usg_btn_1.go-order {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #4d69be !important;
  color: #fff !important;
  border-radius: 9999px !important;
  border: none !important;
  padding: 8px 20px !important;
  text-decoration: none !important;
  text-underline-offset: unset !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background .15s !important;
}

.w-grid.product-list .w-grid-list .usg_btn_1:hover,
.w-grid.product-list .w-grid-list .usg_btn_1.go-order:hover {
  background: #3a56b0 !important;
  color: #fff !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;
}

/* ═══════════════════════════════════════════════════════════════
   GRID LAYOUT: 4 в ряд на десктопе — только для полноширинных колонок
   Применяется к vc_col-sm-12 (100% ширины) контейнерам.
   us_grid_5/13 (vc_col-sm-6, 50%) и us_grid_15/22 (vc_col-sm-3/lg-9, 75%)
   НЕ затрагиваются — у них cols_2/cols_3 уже даёт 25% страницы.
═══════════════════════════════════════════════════════════════ */

/* Mobile + tablet: 2 колонки (только для полноширинных колонок) */
.vc_col-sm-12 .w-grid.product-list.type_grid .w-grid-list > .w-grid-item.type-product {
  width: 50% !important;
  max-width: 50% !important;
  flex-basis: 50% !important;
  flex-shrink: 0 !important;
}

/* Desktop ≥ 1200px: 4 колонки (только для полноширинных колонок) */
@media (min-width: 1200px) {
  .vc_col-sm-12 .w-grid.product-list.type_grid .w-grid-list > .w-grid-item.type-product {
    width: 25% !important;
    max-width: 25% !important;
    flex-basis: 25% !important;
    flex-shrink: 0 !important;
  }
}

/* Изображение: cover crop на всех карточках */
.w-grid.product-list.type_grid .usg_post_image_1 img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
}

.w-grid.product-list.type_grid .usg_post_image_1 {
  max-height: none !important;
}

/* Square crop on mobile */
@media (max-width: 767px) {
  .w-grid.product-list.type_grid .usg_post_image_1 img {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
}