/**
 * Product Cards
 * Individual WooCommerce product card styling — shared by the shop
 * archive, taxonomy archives, related/recently-viewed products on the
 * single product page, and any product grid embedded elsewhere
 * (e.g. an Elementor "WooCommerce Products" widget on a landing page).
 *
 * Deliberately excludes grid/column-count rules (grid-template-columns
 * etc.) — those are shop-archive-specific responsive decisions and
 * live in shop.css instead, so they don't fight with a widget's own
 * column settings elsewhere. Gap is the exception: it's set here,
 * sitewide, since it's a much softer default than column count — any
 * widget/page with its own deliberate gap setting has a more specific
 * selector and still wins over this.
 */

/* ============================================================
   PRODUCT GRID SPACING — sitewide fallback
   ============================================================ */

.woocommerce ul.products,
.woocommerce-page ul.products {
    gap: 20px !important;
}

/* ============================================================
   PRODUCT CARDS — default state
   ============================================================ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    /* Force full row height regardless of the parent grid's own
       align-items setting — needed so the Learn More button (pinned to
       the bottom via margin-top:auto below) lines up flush with the
       card edge even inside a grid we don't control, like Elementor's
       "WooCommerce Products" widget on a landing page. */
    align-self: stretch !important;
    height: 100%;
}

/* ---- Card image ---- */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background-color: var(--color-bg-grey);
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap a {
    display: block;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* Placeholder image — maintain same aspect ratio */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img.woocommerce-placeholder,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap img.woocommerce-placeholder {
    object-fit: contain;
    padding: 24px;
    background-color: var(--color-bg-grey);
}

/* Hide Astra's on-card basket overlay — Learn More replaces this */
.ast-on-card-button {
    display: none !important;
}

/* ---- Card summary body ---- */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
    padding: 0 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---- Product title link — remove default link style ---- */
.woocommerce ul.products li.product a.ast-loop-product__link,
.woocommerce-page ul.products li.product a.ast-loop-product__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ---- Price (output via hook before title) ---- */
.woocommerce ul.products li.product .so-loop-price {
    display: block;
    margin: 12px 0 4px;
}

.woocommerce ul.products li.product .so-loop-price .woocommerce-Price-amount,
.woocommerce ul.products li.product .so-loop-price .woocommerce-Price-amount bdi {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--color-indigo);
}

/* ---- Product title ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    color: var(--color-indigo);
    margin: 0 0 8px;
    line-height: 1.3;
}

/* ---- Short description ---- */
.woocommerce ul.products li.product .ast-woo-shop-product-description,
.woocommerce-page ul.products li.product .ast-woo-shop-product-description {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.woocommerce ul.products li.product .ast-woo-shop-product-description p,
.woocommerce-page ul.products li.product .ast-woo-shop-product-description p {
    color: var(--color-body-text);
    margin: 0;
}

/* ---- Learn More CTA wrapper + button ---- */
.so-learn-more-wrap {
    padding: 12px 0 16px;
    margin-top: auto;
}

.woocommerce ul.products li.product .so-learn-more-btn,
.woocommerce-page ul.products li.product .so-learn-more-btn {
    display: block !important;
    width: 100% !important;
    padding: 11px 20px !important;
    text-align: center !important;
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-button) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: none !important;
    box-sizing: border-box !important;
    transition: opacity 0.2s ease !important;
}

.woocommerce ul.products li.product .so-learn-more-btn:hover,
.woocommerce-page ul.products li.product .so-learn-more-btn:hover {
    opacity: 0.88 !important;
    color: var(--color-white) !important;
    text-decoration: none !important;
}

/* ============================================================
   CARD HOVER — SELECTED / ACTIVE STATE
   ============================================================ */

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    background-color: var(--color-indigo);
    box-shadow: 0 4px 16px rgba(35, 21, 89, 0.25);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--color-white);
}

.woocommerce ul.products li.product:hover .ast-woo-shop-product-description,
.woocommerce ul.products li.product:hover .ast-woo-shop-product-description p,
.woocommerce-page ul.products li.product:hover .ast-woo-shop-product-description,
.woocommerce-page ul.products li.product:hover .ast-woo-shop-product-description p {
    color: rgba(255, 255, 255, 0.85);
}

.woocommerce ul.products li.product:hover .so-loop-price .woocommerce-Price-amount,
.woocommerce ul.products li.product:hover .so-loop-price .woocommerce-Price-amount bdi,
.woocommerce-page ul.products li.product:hover .so-loop-price .woocommerce-Price-amount,
.woocommerce-page ul.products li.product:hover .so-loop-price .woocommerce-Price-amount bdi {
    color: var(--color-white);
}

/* Button inverts on card hover */
.woocommerce ul.products li.product:hover .so-learn-more-btn,
.woocommerce-page ul.products li.product:hover .so-learn-more-btn {
    background-color: var(--color-white) !important;
    color: var(--color-indigo) !important;
    opacity: 1 !important;
}

/* ============================================================
   MIGRATED FROM CUSTOMIZER "ADDITIONAL CSS" (2026-07-18)
   These !important overrides are what's actually rendering in
   production today — see the base rules above for the theme's
   original (superseded) intent.
   ============================================================ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 15px 15px 7px 15px !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: background 0.3s, border 0.3s, box-shadow 0.3s, transform 0.4s !important;
  cursor: pointer;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  background-color: #231559 !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
  border-radius: 12px !important;
  overflow: hidden !important;
  height: 240px !important;
  flex-shrink: 0 !important;
  background-color: transparent !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap img {
  width: 100% !important;
  height: 240px !important;
  aspect-ratio: unset !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
  padding: 0px 0 0 0 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #F2811D !important;
  display: block !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

.woocommerce ul.products li.product .woocommerce-Price-amount,
.woocommerce-page ul.products li.product .woocommerce-Price-amount,
.woocommerce ul.products li.product .woocommerce-Price-amount bdi,
.woocommerce-page ul.products li.product .woocommerce-Price-amount bdi {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #f2811d !important;
  line-height: 1.3 !important;
}

.woocommerce ul.products li.product:hover .price,
.woocommerce-page ul.products li.product:hover .price,
.woocommerce ul.products li.product:hover .woocommerce-Price-amount,
.woocommerce-page ul.products li.product:hover .woocommerce-Price-amount,
.woocommerce ul.products li.product:hover .woocommerce-Price-amount bdi,
.woocommerce-page ul.products li.product:hover .woocommerce-Price-amount bdi {
  color: #FFFFFF !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #4a4c56 !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__title {
  color: #FFFFFF !important;
}

.woocommerce ul.products li.product .ast-woo-shop-product-description p,
.woocommerce-page ul.products li.product .ast-woo-shop-product-description p {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgb(119, 121, 128) !important;
  line-height: 1.65 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.woocommerce ul.products li.product:hover .ast-woo-shop-product-description p,
.woocommerce-page ul.products li.product:hover .ast-woo-shop-product-description p {
  color: rgb(210, 210, 213) !important;
}

.woocommerce ul.products li.product .so-learn-more-btn,
.woocommerce-page ul.products li.product .so-learn-more-btn {
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  background-color: #F2811D !important;
  border-radius: 99px !important;
  padding: 12px 24px !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  border: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
  opacity: 1 !important;
}

.woocommerce ul.products li.product .so-learn-more-btn:hover,
.woocommerce-page ul.products li.product .so-learn-more-btn:hover,
.woocommerce ul.products li.product:hover .so-learn-more-btn,
.woocommerce-page ul.products li.product:hover .so-learn-more-btn {
  background-color: #FFFFFF !important;
  color: #4a4c56 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

.so-learn-more-wrap {
	padding-bottom:0px !important;
}