/* ===========================
   PI Amazon-like Shop Cards
   Safe for Nifty / BoldThemes
   =========================== */

/*
 IMPORTANT:
 We DO NOT touch generic .woocommerce ul.products
 to avoid breaking header / sidebar / layout.
 All selectors are strictly limited to content area.
*/

/* =================================================
   1) Плотная сетка ТОЛЬКО в контенте Shop
   ================================================= */

.woocommerce-page .content-area ul.products,
.woocommerce-page .site-content ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;                 /* Amazon-like density */
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1280px) {
  .woocommerce-page .content-area ul.products,
  .woocommerce-page .site-content ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 992px) {
  .woocommerce-page .content-area ul.products,
  .woocommerce-page .site-content ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 576px) {
  .woocommerce-page .content-area ul.products,
  .woocommerce-page .site-content ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =================================================
   2) Убираем “воздух” у товаров (ТОЛЬКО внутри grid)
   ================================================= */

.woocommerce-page .content-area ul.products li.product,
.woocommerce-page .site-content ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

/* =================================================
   3) Карточка продукта
   ================================================= */

.woocommerce-page ul.products li.product.pi-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  overflow: hidden;                     /* image becomes part of card */
  background: #ffffff;
}

/* Link wrapper */
.pi-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* =================================================
   4) Image: fixed 1:1, no padding, no jumping
   ================================================= */

.pi-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;                  /* strict square */
  overflow: hidden;
  background: #ffffff;
}

.pi-card__media img,
.pi-card__media .attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;          /* fill card fully */
  display: block !important;
  margin: 0 !important;
}

/* =================================================
   5) Card body (top / bottom separation)
   ================================================= */

.pi-card__body {
  display: flex;
  flex-direction: column;
  min-height: 220px;                    /* keeps CTA aligned */
  padding: 10px 10px 12px 10px;          /* minimal inner spacing */
}

/* Top content */
.pi-card__top {}

/* Bottom content always sticks to bottom */
.pi-card__bottom {
  margin-top: auto;
}

/* =================================================
   6) Sponsored label
   ================================================= */

.pi-card__sponsored {
  font-size: 12px;
  line-height: 1.1;
  color: #111111;
  margin: 0 0 6px 0;
  font-weight: 400;
}

/* =================================================
   7) Category label
   ================================================= */

.pi-card__category {
  margin: 0 0 6px 0;
  font-size: 12px;
  line-height: 1.1;
  color: #057485;                        /* PressInspection green */
  font-weight: 600;
}

/* =================================================
   8) Title / description (4 lines, dense)
   ================================================= */

.pi-card__title {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 400;                      /* NOT bold */
  margin: 0 0 8px 0;

  display: -webkit-box;
  -webkit-line-clamp: 4;                 /* exactly 4 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =================================================
   9) Rating
   ================================================= */

.pi-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.1;
  margin: 0 0 10px 0;
}

.pi-card__rating a {
  color: inherit;
  text-decoration: none;
}

.pi-card__rating a:hover {
  text-decoration: underline;
}

/* =================================================
   10) Price (Amazon-like emphasis)
   ================================================= */

.pi-card__price {
  font-size: 20px;
  line-height: 1.1;
  margin: 0 0 8px 0;
}

.pi-card__price .woocommerce-Price-amount {
  font-weight: 700;
}

/* =================================================
   11) Badges (Bookable / Country / Verified)
   ================================================= */

.pi-card__badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px 0;
}

.pi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.1;
  color: #111111;
}

/* Bookable */
.pi-badge--bookable {
  color: #057485;
  font-weight: 600;
}

/* Verified */
.pi-badge--verified {
  color: #111111;
  font-weight: 600;
}

/* =================================================
   12) CTA button
   ================================================= */

.pi-card__cta .pi-btn,
.pi-card__cta .button.pi-btn {
  width: 100%;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.1;
  text-align: center;

  background: #f7c948 !important;        /* Amazon yellow */
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #111111 !important;
  font-weight: 700;
}

.pi-card__cta .pi-btn:hover,
.pi-card__cta .button.pi-btn:hover {
  filter: brightness(0.97);
}


/* =================================================
   FIX: BoldThemes product width conflict
   ================================================= */

/* Сбрасываем ограничения ширины карточек темы */
.woocommerce-page .content-area ul.products li.product,
.woocommerce-page .site-content ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Убираем возможные внутренние колонки BoldThemes */
.woocommerce-page .content-area ul.products,
.woocommerce-page .site-content ul.products {
  box-sizing: border-box;
}

/* Защита от inline-стилей темы */
.woocommerce-page ul.products li.product[style] {
  width: 100% !important;
}

/* =================================================
   HARD OVERRIDE: disable BoldThemes width logic
   ================================================= */

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

/* Ignore column-based widths injected by css-override.php */
body.woocommerce ul.products.columns-2 li.product,
body.woocommerce ul.products.columns-3 li.product,
body.woocommerce ul.products.columns-4 li.product,
body.woocommerce ul.products.columns-5 li.product {
  width: auto !important;
}