/* ==========================================================================
   CUSTOM WOOCOMMERCE PRODUCT DISPLAY ARCHITECTURE
   
   Path: astra-child/assets/css/wc-custom-products.css
   Description: Layout architecture for vertical/horizontal cards, Swiper sliders,
                wishlist overlays, sale badges, and shop archive responsive grids.
   All colors respect brand palette: accent #e5456d, text #2d2b3a, grey #f9f9f9.
   Font-family and most font-sizes inherit from Astra's theme settings.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL PRODUCT PRICE BLUEPRINT
   Reserves vertical space to prevent content shifts.
   -------------------------------------------------------------------------- */
.product-price {
  display: block !important;
  min-height: 1.5em; /* Reserve area for pricing */
  margin-top: auto !important; /* Push price block directly above buttons */
  margin-bottom: 12px !important;
}

/* --------------------------------------------------------------------------
   2. VERTICAL PRODUCT CARDS (Sliders, Featured, & Category Grids)
   -------------------------------------------------------------------------- */

/* Ensure Swiper slides maintain structural flex boundaries */
.swiper-slide.custom-product-card-vertical {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Equal height flexbox outer container for vertical cards */
.custom-product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important; /* Force cards to stretch equally */
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
}

/* Legacy support wrapper fallback */
.custom-product-card-vertical {
  box-sizing: border-box;
}

/* Image container wrapper (holds absolute overlays like wishlist & badges) */
.card-image-wrap {
  width: 100%;
  height: 220px; /* Standardized image box height */
  display: flex !important;
  align-items: center; /* Center shorter images vertically */
  justify-content: center; /* Center images horizontally */
  background-color: #f9f9f9; /* Neutral grey background (brand grey) */
  overflow: hidden;
  border-radius: 8px;
  position: relative !important; /* Anchor point for absolute overlay icons */
  margin-bottom: 10px;
}

/* Thumbnail sizing and aspect ratio rules */
.card-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain; /* Scale image cleanly without distortion */
  display: block;
}

/* Inner content area wrapper */
.card-content-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1; /* Expand dynamically to fill card height */
}

/* Product title typography and link wrap */
.card-content-wrap .product-title {
  line-height: 1.3;
  margin: 0 0 6px 0 !important;
}

.card-content-wrap .product-title a {
  text-decoration: none;
  color: #2d2b3a; /* Brand text color */
}

/* Footer container for buttons */
.card-footer-buttons {
  display: flex !important;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

/* AJAX Add to Cart button layout overrides */
.custom-ajax-add-to-cart-btn {
  flex: 0 1 auto !important;
  width: auto !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Inherits font-family from theme */
}

/* Out of Stock Button State */
.custom-ajax-add-to-cart-btn.out-of-stock,
.custom-ajax-add-to-cart-btn.out-of-stock:hover,
.custom-ajax-add-to-cart-btn.out-of-stock:focus,
.custom-ajax-add-to-cart-btn.out-of-stock:active {
  background-color: #e5456d !important; /* Accent */
  color: #ffffff !important;
  border-color: #e5456d !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   3. HORIZONTAL PRODUCT CARDS (Trending Widgets & Sidebar Lists)
   -------------------------------------------------------------------------- */

/* Horizontal card flexbox wrapper */
.custom-product-card-horizontal {
  display: flex !important;
  align-items: center !important;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 15px;
  gap: 15px;
}

/* Thumbnail image wrapper for horizontal items */
.horizontal-img-wrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.horizontal-img-wrap img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 8px;
}

/* Content wrapper for horizontal items */
.horizontal-content-wrap {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
}

/* --------------------------------------------------------------------------
   4. SWIPER SLIDER NAVIGATION & CONTROLS
   -------------------------------------------------------------------------- */

/* Main slider section wrapper */
.wc-custom-slider-section {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

/* Top control row for slider arrows */
.wc-custom-section-control-row {
  position: absolute;
  top: -50px;
  right: 0;
  z-index: 10;
}

/* Navigation button wrapper */
.swiper-navigation-wrapper {
  display: flex !important;
  gap: 8px;
}

/* Custom previous & next navigation arrows */
.swiper-button-prev-custom,
.swiper-button-next-custom {
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 4px 10px;
  border-radius: 4px;
  user-select: none;
  transition: background 0.2s ease-in-out;
  font-size: 18px; /* Only size for arrow symbols, inherits font-family */
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
  background: #f9f9f9; /* Brand grey */
}

/* ==========================================================================
   5. OVERLAY BADGES & WISHLIST BUTTONS
   ========================================================================== */

/* Top-Left Sale Percentage Badge */
.custom-sale-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;
  background-color: #e5456d !important; /* Accent */
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Top-Right Floating Wishlist Overlay Container */
.custom-top-wishlist-wrapper {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
}

/* Custom Circle Button Container */
.custom-top-wishlist-wrapper .custom-wishlist-btn {
  width: 36px !important;
  height: 36px !important;
  background-color: #f9f9f9 !important; /* Brand grey background */
  border: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.2s ease-in-out !important;
  padding: 0 !important;
}

.custom-top-wishlist-wrapper .custom-wishlist-btn:hover {
  transform: scale(1.08) !important;
}

/* Default State: Outline Color #2D2B3A, Fill None */
.custom-top-wishlist-wrapper .custom-wishlist-btn svg.wishlist-heart-icon {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: #2d2b3a !important; /* Brand text color */
  stroke-width: 2px !important;
  transition: all 0.2s ease-in-out !important;
}

/* Active / Added State: Filled and Outlined with #E5456D */
.custom-top-wishlist-wrapper
  .custom-wishlist-btn.active
  svg.wishlist-heart-icon {
  fill: #e5456d !important; /* Accent fill */
  stroke: #e5456d !important;
}

/* --------------------------------------------------------------------------
   6. SHOP ARCHIVE AND CATEGORY PAGES RESPONSIVE GRID STYLING
   -------------------------------------------------------------------------- */

/* Target WooCommerce shop archive product grid layout */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(
    2,
    1fr
  ) !important; /* Mobile Default: 2 Columns */
  gap: 15px !important;
  padding: 0 !important;
  margin: 0 0 3em 0 !important;
}

/* Override default WooCommerce float rules on list items */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}

/* Card image adjustments for shop grid */
.custom-shop-grid-item .card-image-wrap {
  position: relative !important;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.custom-shop-grid-item .card-image-wrap img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
}

/* Tablet Media Query (3 Columns) */
@media (min-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* Desktop Media Query (4 Columns) */
@media (min-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}

/* ==========================================================================
   7. INLINE RATING STARS & COUNTER SIDE-BY-SIDE (.product-rating)
   ========================================================================== */

/* Main Rating Row inside Product Card */
.product-rating {
  min-height: 22px !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Horizontal Flex Row Container */
.product-rating .custom-card-rating-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  line-height: 1 !important;
}

/* Stars Wrapper */
.product-rating .star-rating-stars {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Review Count Badge directly beside stars */
.product-rating .rating-count-text {
  display: inline-block !important;
  font-size: 13px !important;
  color: rgb(107, 114, 128) !important; /* Grey for count */
  font-weight: 500 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* Precise Percentage Star Fill (uses accent for filled part) */
.star-precise {
  display: inline-block;
  font-size: 14px;
  background: linear-gradient(
    90deg,
    #e5456d var(--fill),
    rgb(209, 213, 219) var(--fill)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}