/* ============================================
   BADGE SHOP TOKENS + BULK BADGE
   ============================================

   Adds the BULK badge (tier price / bulk discount) and the one token a shop re-values to recolour it.

   The four pre-existing badges are NOT governed here — badge-v2.css still owns them. See the note under
   the :root block for why an earlier contrast pass over them was reverted.

   HOW SHOPS OVERRIDE
   ------------------
   Each {shop}_mobileview branch carries its own Themes/SimplexTheme/Content/css/mobile-shop-overrides.css,
   registered as the LAST AddCssFileParts call in Head.cshtml. Because AddCssFileParts appends to the end of
   the list and GenerateCssFiles() emits in list order, that file is always emitted after this one — so a
   plain `:root { --badge-bulk: #xxx; }` there wins. Put shop tokens in a GLOBAL :root, not inside a media
   query: custom-property substitution happens at computed-value time, so a media-scoped token makes the
   badge change colour at the 767px breakpoint.

   REGISTRATION
   ------------
   MUST be registered with AddCssFileParts (end of list), never AppendCssFileParts (index 0) — _ProductBox
   registers badge-v2.css with Append, and an Append here would land this file BEFORE it and lose the cascade.

   CACHE BUSTING
   -------------
   With EnableCssBundling off, NopDefaultAssetHelper.CacheBusting() returns the route verbatim — no ?v= is
   emitted at all. Filename versioning is the only invalidation mechanism, hence the -v1 suffix. To force a
   refresh after this file has shipped, rename it (-v2) and update all three registrations.
   ============================================ */

:root {
    /* --- BULK badge --- */
    /* Deliberately a literal, NOT var(--m-accent, #337ab7): mobile-foundation.css declares
       --m-accent: #ff4f8b in a global :root and is registered at Head.cshtml after this file, so that
       fallback would never fire — the desktop default would silently become hot pink (3.11:1 on white,
       below the 4.5:1 needed for 10px bold text). Shops opt in via mobile-shop-overrides.css. */
    --badge-bulk: #337ab7;              /* 4.56:1 on white */
    --badge-bulk-fg: #ffffff;
}

/* The four pre-existing badges (NEW / Sold Out / Pre-Order / Backorder) are deliberately NOT touched
   here. An earlier revision tokenised their foregrounds and darkened the Sold Out background to clear
   WCAG 4.5:1 (NEW was 2.48:1, Pre-Order 1.95:1, Sold Out 3.96:1 against white text), but the shop owners
   chose to keep the established look, so those overrides were reverted and badge-v2.css governs them
   again. Only the BULK badge below is new, and only --badge-bulk is meant to be re-valued per shop. */

/* ============================================
   BULK badge — mirrors .new-arrival-badge (badge-v2.css:146-174)
   ============================================ */

.bulk-discount-badge {
    display: inline-block;
    background-color: var(--badge-bulk);
    color: var(--badge-bulk-fg);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    vertical-align: middle;
}

.bulk-discount-badge:hover {
    filter: brightness(0.9);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.bulk-discount-badge-catalog {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
}

/* Let the badge row wrap instead of clipping badges away.

   product-box-caption-minimal.css:79-96 caps .product-title-inline at
   max-height: calc(font-size * line-height * 2) — two lines — with !important. The product title is
   white-space:nowrap + text-overflow:ellipsis (simplex.styles.css), so it is ALWAYS one line; that cap
   therefore does nothing for titles and exists only to clamp the badge row to a single line.

   Measured at the tightest column (4-up desktop, 164px): NEW + BULK uses 154px, NEW + BULK + Pre-Order
   fits at exactly 154px with "BULK", 162px with "수량할인" — but a longer badge text ("BULK PRICING")
   wraps and the LAST badge in DOM order, Pre-Order, is silently cut off. Since the badge text is admin
   input, that failure is one settings edit away.

   Removing the cap lets the row wrap. Cards within a grid row still equalise (measured: all four cards
   in the row grow together, 521px -> 542px), so nothing becomes ragged; only the affected row gets one
   badge-line taller. A hidden pre-order date is worse than a 21px taller row. */
.product-item .caption .details .product-title-inline {
    max-height: none !important;
}

/* badge-v2.css:42-52 lists the catalog badges by name for vertical alignment; it cannot be edited (1-year
   cached finalize asset), so the same rule is restated for this class. */
.product-title-inline .bulk-discount-badge-catalog {
    align-self: center;
    vertical-align: middle;
    height: auto;
    line-height: 1.2;
    min-height: 18px;
}

/* ============================================
   Sold Out badge on colour / image swatches — overlay instead of stacking
   ============================================

   badge-v2.css:86-96 renders .sold-out-badge-swatch as `display: block; margin-top: 2px`, i.e. a third
   block after the swatch tile and its colour label. The swatch <ul> is `display:flex; flex-wrap:wrap;
   align-items:flex-start; row-gap:6px`, so that extra block makes ONE item in the row taller than its
   siblings and pushes the badge into the row gap.

   Measured on a 76px swatch grid (Amazon Braid 54", 82 colours): the badge's own <li> was 114px while
   the other eight in its row were 98px. The badge ended up 27px below its own swatch but only 6px above
   the NEXT row — so it read as the following row's badge. Reported as exactly that.

   Absolutely positioning it over the swatch fixes both halves: the <li> keeps its natural 98px so rows
   stay aligned, and the badge is unambiguously attached to its own tile (gap to the next row went
   6px -> 88px). The <li> is already `position: relative`, so no extra containing block is needed.

   pointer-events:none matters — the badge sits over the <label>, and without it the swatch would stop
   being clickable in the region the badge covers. (Out-of-stock swatches carry a disabled radio, but the
   same rule applies to the Matrix UI variants that are not disabled.) */
.color-squares li .sold-out-badge-swatch,
.image-squares li .sold-out-badge-swatch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    pointer-events: none;
    z-index: 2;
}

/* Grey out the sold-out tile.

   _ProductAttributes.cshtml has an inline <style> carrying exactly this intent ("grey-out only, no X
   mark"), but it never worked:

   1. The block lives inside `case AttributeControlType.ColorSquares:` while carrying rules for BOTH
      .color-squares and .image-squares. A product whose only swatch attribute is ImageSquares — the
      common case here — never emits it. Verified on the live page: zero <style> elements matching.
   2. Even where it does render, its `.image-squares li.disabled .attribute-square` (0,3,1) loses to
      simplex.styles.css's `.attributes .attribute-squares .disabled .attribute-square { opacity: 1 }`
      (0,4,0). Specificity beats source order, so the grey-out lost everywhere.

   Adding `.attributes` here takes the selector to 0,4,1 and wins without !important. Living in a real
   stylesheet also means it no longer depends on which attribute control type the product happens to use. */
.attributes .attribute-squares li.disabled .attribute-square {
    opacity: .35;
}

/* The tooltip's "Not available" line is deliberately left alone. The same inline block also tried to
   hide it with !important, but simplex.styles.css asks for it specifically on disabled image swatches
   (`.attributes .attribute-squares.image-squares .disabled .tooltip-container .not-available-text
   { display: block }`, 0,6,0) — that is the theme's intent, not a leak, and the tooltip only opens on
   hover. Overriding it would take an !important to win, for a line that reads fine next to the badge. */

/* ============================================
   Responsive — matches badge-v2.css breakpoints (:259, :285)
   ============================================ */

@media (max-width: 768px) {
    .bulk-discount-badge {
        font-size: 9px;
        padding: 2px 6px;
    }

    .bulk-discount-badge-catalog {
        font-size: 8px;
        padding: 2px 5px;
    }

    /* Let a wide price drop to its own line instead of crushing the badge row.

       THE DEFECT (pre-existing, not a BULK regression — measured with BULK hidden and NEW alone was
       clipped identically). At the 768px grid the card is 175px and .title-price-inline 133px. The row is
       `display:flex` with .prices-inline `flex-shrink:0; white-space:nowrap` and .product-title-inline
       `flex:1; min-width:0; overflow:hidden`, so the price takes whatever it wants and the title — which
       carries the badges — absorbs the entire shortfall. Reproduced at 133px: "$19.75 From $5.00" is
       108.9px, leaving the title 16.1px, and both NEW (30.4px) and BULK (33.1px) are cut off by the
       title's own overflow:hidden. Only tier/attribute products show old-price + "From", which is exactly
       the product set the BULK badge targets — hence it reads as new, but it is not.

       THE FIX. flex-wrap plus a title min-width makes the row break only when it must: line breaking uses
       each item's hypothetical main size, and min-width:60% (79.8px of 133px) clamps the title's flex-basis:0
       up to that, so the price wraps once it exceeds 133 - 79.8 - 8(gap) = 45px. margin-left:auto keeps the
       price flush right on both the one-line and the wrapped layout, so alignment never changes between cards.

       Measured at 133px (Chromium, badge sizes as capped above):
         $19.75 (33.4px) -> inline, title 91.6px      $149.75 (39.0px) -> inline, title 86.0px
         $1,249.75 (47.8px) -> wraps                  $19.75 From $5.00 (108.9px) -> wraps
       Wrapped cards go 49.8px -> 57.1px tall (one badge line, +7.3px) and no badge is clipped; with a third
       badge (Pre-Order) the row stays 57.1px. Ordinary single prices are untouched, so only the cards that
       were broken change.

       min-width is 60%, not the ~66px that NEW + BULK actually needs: the BULK text is admin input
       (catalogsettings.bulkdiscountbadgetext), so a longer word must not start clipping the row again.
       It must carry !important to beat simplex.styles.css's `min-width: 0 !important`; the 0,4,0 selector
       also outranks that file's 0,3,0. margin-left wins over product-box-caption-minimal.css's
       `margin: 0 !important` on equal specificity by source order — this file is registered with
       AddCssFileParts and is emitted after it, the same footing the max-height rule above relies on. */
    .product-item .caption .details .title-price-inline {
        flex-wrap: wrap;
    }

    .product-item .caption .details .product-title-inline {
        min-width: 60% !important;
    }

    .product-item .caption .details .prices-inline {
        margin-left: auto !important;
    }
}

@media (max-width: 480px) {
    .bulk-discount-badge {
        font-size: 8px;
        padding: 2px 5px;
    }

    .bulk-discount-badge-catalog {
        font-size: 7px;
        padding: 1px 4px;
    }
}