/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/
/* FORCE SQUARE CARD IMAGES */
/* FORCE SQUARE IMAGES — ONLY FOR INDIVIDUAL PRODUCTS */

/* 1. Target product image elements that are NOT group cards */
.sa-products-item:not([data-type="group"]) img:not(.object-group-image),
[class*="product-card"]:not([class*="group"]) img:not(.object-group-image) {
  width: 180px !important;
  height: 180px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  margin: 1rem auto !important;
  display: block !important;
  border-radius: 8px !important;
}

/* 2. Format the product image wrapper */
.aspect-product-card-image {
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: transparent !important;
  padding: 8px !important;
}

/* 3. Reset group cards so they stay unaffected */
.aspect-group-card-image,
.object-group-image,
[data-type="group"] img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* FIX CARD TITLE TRUNCATION */

/* 1. Remove one-line restriction and allow text wrapping */
.sa-products-item h3,
.sa-products-item [class*="title"],
[class*="product-card"] h3,
[class*="product-card"] [class*="title"] {
  white-space: normal !important;
  text-overflow: unset !important;
  overflow: visible !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* 2. Stack the title above the price if space is tight */
.sa-products-item .card-header,
[class*="product-card"] > div:first-child {
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

/* ------------------------------------------------------------------ */
/* Product Card Text Glow Effects                                     */
/* ------------------------------------------------------------------ */

/* Product Title Glow */
.sa-products-item h3,
.sa-products-item [class*="title"],
[class*="product-card"] h3,
[class*="product-card"] [class*="title"] {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 
               0 0 16px rgba(255, 255, 255, 0.2) !important;
}

/* Price Text Glow (Cyan / Accent Glow) */
.sa-products-item [class*="price"],
[class*="product-card"] [class*="price"] {
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6), 
               0 0 18px rgba(56, 189, 248, 0.3) !important;
}

/* In Stock Text Glow (Green Glow) */
.sa-products-item [class*="stock"],
.sa-products-item [class*="status"],
[class*="product-card"] [class*="stock"],
[class*="product-card"] [class*="status"] {
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.6), 
               0 0 18px rgba(34, 197, 94, 0.3) !important;
}