/* ============================================================================
 * SoulxDoll — Collection / shortcode-grid fixes  (v5.9.7)
 * ----------------------------------------------------------------------------
 * Loaded ONLY on Pages that render a product grid via a WooCommerce shortcode
 * (Sale, Ready to Ship, Best Sellers, New Arrivals, material/SEO landing
 * pages). Every rule is scoped under `.page-prose` / `.page-hero`, so it never
 * touches the shop archive or PDP.
 *
 * Goal: make these pages match the SHOP exactly. The shared card CSS in
 * styles.css already covers `body.page-generic` (same rules as the shop's
 * body.page-shop), so we do NOT restyle the cards — we only remove what breaks
 * them here and fix two theme bugs:
 *
 *   1. Image leak — `body.page-generic .page-prose img { height:auto;
 *      margin:8px 0; border-radius:14px }` was styling the card <img>s, which
 *      broke the square (1:1) image fill and showed BOTH the primary and hover
 *      image stacked. We reset it so the shop's own .pcard-img rule (square,
 *      overflow-clipped) renders a single cover-filled image like the shop.
 *
 *   2. Star rating — the global .star-rating never hides its "Rated 4.8 out of
 *      5" text, so it overlaps the stars. We draw a clean gold/grey 5-star row
 *      (same ★ glyphs the theme already uses) driven by the inline width %.
 *
 *   3. Breadcrumb — breadcrumb.php outputs `.luxe-breadcrumb > ol.breadcrumb-
 *      list`, but the only breadcrumb CSS targets `.breadcrumb` /
 *      `.woocommerce-breadcrumb` (wrong class), so the <ol> showed raw list
 *      numbers. We style the real markup to match the muted shop breadcrumb.
 * ========================================================================== */

/* ── 1. Product-card image: undo the .page-prose img leak ────────────────────
 * Do NOT set aspect-ratio/overflow here — the shared shop rule
 * `:is(… body.page-generic) .pcard-img { aspect-ratio:1/1; overflow:hidden }`
 * already provides the square, clipped frame. We only fix the <img>.
 *
 * NB: :not(.pcard-quick) is essential — variable products render their
 * "View Options" button as <a class="pcard-quick"> that is ALSO a direct child
 * of .pcard-img. Without the exclusion this rule would stretch that button to
 * fill the whole card (the big dark blob). Simple products use a <button>, so
 * they were never affected. */
.page-prose ul.products .pcard-img > a:not(.pcard-quick) {
    display: block;
    width: 100%;
    height: 100%;
}
.page-prose ul.products .pcard-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
    display: block;
}
/* No JS/CSS ever reveals the hover image (the shop simply clips it); hide it
 * outright so a single square image shows, exactly like the shop. */
.page-prose ul.products .pcard-img .pcard-img-hover { display: none !important; }

/* ── 2. Star rating — hide the literal text, draw clean stars ───────────────*/
.page-prose ul.products .pcard-stars .star-rating {
    position: relative;
    display: inline-block;
    width: 5.4em;
    height: 1.05em;
    line-height: 1.05;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;              /* hides "Rated 4.8 out of 5" */
}
.page-prose ul.products .pcard-stars .star-rating::before {
    content: '\2605\2605\2605\2605\2605';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--line, #E8E8ED);     /* empty track */
}
.page-prose ul.products .pcard-stars .star-rating > span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;              /* hides inner text */
}
.page-prose ul.products .pcard-stars .star-rating > span::before {
    content: '\2605\2605\2605\2605\2605';
    position: absolute;
    left: 0;
    top: 0;
    color: #FFC107;                  /* filled */
    float: none;
}
/* `body.page-generic .page-prose strong { color:#1D1D1F }` leaked ink onto the
 * <strong class="rating">4.8</strong>, showing a faint number over the stars —
 * keep it transparent like the rest of the rating text. */
.page-prose ul.products .pcard-stars .star-rating strong {
    color: transparent;
    font-weight: inherit;
}

/* ── 3. Links & price — undo the .page-prose link leak, match the shop ──────
 * `body.page-generic .page-prose a { color:brand; text-decoration:underline }`
 * was turning every card link (name, View Options, price) pink + underlined.
 * Restore the shop's look. */
.page-prose ul.products .pcard-name a {
    color: var(--ink, #1D1D1F);
    text-decoration: none;
    transition: color var(--t-xs, 220ms) ease;
}
.page-prose ul.products .pcard-name a:hover { color: var(--brand, #FF2D55); }

/* Quick Add / View Options: white text on the dark pill, no underline */
.page-prose ul.products .pcard-quick {
    color: #fff;
    text-decoration: none;
}

/* Price: kill the default <ins> underline + any link underline; keep the
 * struck-through regular price grey and the sale price in brand colour. */
.page-prose ul.products .pcard-pr a,
.page-prose ul.products .pcard-pr ins { text-decoration: none; }
.page-prose ul.products .pcard-pr ins {
    color: var(--brand, #FF2D55);
    font-weight: 700;
}
.page-prose ul.products .pcard-pr del {
    text-decoration: line-through;
    color: var(--muted-3, #AEAEB2);
}

/* ── 4. Breadcrumb — style the real markup to match the shop ────────────────*/
.page-hero .luxe-breadcrumb {
    margin-bottom: 18px;
}
.page-hero .luxe-breadcrumb .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;                /* removes the "1. 2." numbering */
    font-size: 12.5px;
    color: var(--muted-2, #86868B);
}
.page-hero .luxe-breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.page-hero .luxe-breadcrumb .breadcrumb-item::before,
.page-hero .luxe-breadcrumb .breadcrumb-item::marker { content: none; }
.page-hero .luxe-breadcrumb .breadcrumb-item a {
    color: var(--muted, #515154);
    text-decoration: none;
    transition: color .2s ease;
}
.page-hero .luxe-breadcrumb .breadcrumb-item a:hover { color: var(--brand, #FF2D55); }
.page-hero .luxe-breadcrumb .breadcrumb-item.current > span,
.page-hero .luxe-breadcrumb .breadcrumb-item [aria-current="page"] {
    color: var(--ink, #1D1D1F);
}
.page-hero .luxe-breadcrumb .breadcrumb-sep {
    color: var(--muted-3, #AEAEB2);
    margin-left: 2px;
}