/* shared-promo.css — promotional banner + strikethrough pricing styles.
 *
 * Loaded by every customer-facing page that wants to display the promo
 * banner and strikethrough sale prices. Self-contained: no dependency
 * on other CocoFlora CSS files. Uses brand vars where available, falls
 * back to literal hex if not.
 *
 * IMPORTANT: shared-header.css is COMPLETELY UNTOUCHED. The header
 * (logo + nav + free shipping bar) renders identically here to all
 * other pages — same colorful sage→terracotta→dusty-rose gradient
 * (135deg diagonal: sage top-left → peachy middle → soft pink bottom-
 * right). The only thing this file adds at the top of the page is the
 * standalone #promoBannerBar (peach gradient sale strip).
 */

/* === Continuous 135deg sage→terracotta→dusty-rose gradient ===
 *
 * Extends the original shared-header.css header gradient to flow
 * across the promo banner and presale-banner too, so all 4 stacked
 * top rows read as one cohesive diagonal block:
 *
 *   sage green       (top-left)
 *   warm terracotta  (middle)
 *   dusty rose       (bottom-right)
 *
 * Mechanism: same gradient on each stacked element with
 * background-attachment: fixed + background-size: 100% 300px. Each
 * element shows its slice of the same viewport-spanning gradient —
 * no per-element repetition, no seams.
 *
 * shared-header.css stays untouched. The header's own gradient still
 * fires for non-promo pages; this just OVERRIDES it on the 3 promo
 * pages with the same color stops in fixed-attachment mode so the
 * promo banner + presale-banner can pick up the same diagonal flow.
 */
:root { --header-grad: linear-gradient(135deg,
    var(--sage-green, #9CAF88) 0%,
    var(--terracotta, #D4704A) 50%,
    var(--dusty-rose, #D4A5A5) 100%); }

header {
    background: var(--header-grad) fixed !important;
    background-size: 100% 300px !important;
    background-repeat: no-repeat !important;
    /* Bottom divider on <header> (full-width) instead of on <nav>
       (max-width:1400px). Keeps the shadow line continuous on wide
       viewports rather than ending at the nav's left/right edges. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
header .header-timer-bar {
    /* Transparent so the diagonal gradient flows through unbroken;
       text stays white from shared-header.css. */
    background: transparent !important;
    /* Border + soft outer shadow as combined divider. The border is
       part of the box and always visible; the outer shadow adds a
       subtle lift where stacking allows it. Adjacent lower element
       (nav, also at z=1000 via header context) can cover the outer
       shadow but not the border. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Presale banner inherits the same fixed-attachment gradient so it
   reads as the bottom band of the same continuous diagonal flow.
   border-top covers the area where the 1px overlap with the promo
   banner above hides the promo's bottom divider; border-bottom adds
   the divider for the 4th row. */
#presale-banner {
    background: var(--header-grad) fixed !important;
    background-size: 100% 300px !important;
    background-repeat: no-repeat !important;
    border-top: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* === Top-of-page promo banner ===
 *
 * Lighter peachy/coral gradient for a softer, boutique feel. Text is a
 * warm dark brown rather than white — gives the banner a premium
 * editorial tone (think Aēsop, Diptyque) instead of a discount-bar
 * shout. Sale price stays in saturated terracotta for natural pop.
 *
 * Sticky: position:fixed sitting BELOW the existing fixed <header>.
 * shared-promo-pricing.js measures header.offsetHeight and inline-sets
 * the banner's `top` to that value, so the banner pins right under the
 * nav. body padding-top reads --promo-banner-h to keep first content
 * element below both. z-index < header (1000) so any nav dropdowns
 * still render above the banner.
 */
#promoBannerBar {
    width: 100%;
    /* Same fixed-attachment 135deg gradient as the header so the
       banner reads as the middle band of one continuous diagonal flow. */
    background: var(--header-grad) fixed;
    background-size: 100% 300px;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    padding: 9px 16px;
    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2px;
    position: fixed;
    /* JS sets --promo-header-h from header.offsetHeight after layout
       settles. Fallback 105px = the header's clamped max so the banner
       sits exactly at the header's bottom edge on first paint, no gap
       and no overlap. JS updates the var to the exact value once
       measured (mostly relevant for narrower viewports where the
       clamped value is smaller). */
    top: var(--promo-header-h, 105px);
    left: 0;
    right: 0;
    /* z=998 — above all in-page body content (typical max ~100), below
       header (z:1000) and below WhatsApp widget (z:999). Banner is
       positioned at top: header.offsetHeight so it never visually
       overlaps the header. Nav dropdowns inside the header (locally
       z=1000) are trapped in header's z=1000 stacking group → globally
       still ABOVE banner z=998 wherever they extend down past the nav.
       shared-header.css remains completely untouched. */
    z-index: 998;
    /* border-bottom + outer shadow divider matching the other rows. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#promoBannerBar[hidden] {
    display: none !important;
}

.promo-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    justify-content: center;
}

/* === Carousel chrome (only renders when 2+ promos active) === */
/* When multi-slide, the bar becomes a positioning context for the
 * absolute-positioned arrows and dots. The inner row stays centered. */
#promoBannerBar[data-multi="1"] {
    padding-left: 44px;
    padding-right: 44px;
    padding-bottom: 18px;   /* leave room for indicator dots */
}

.promo-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #5C3520;
    font-size: 22px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 160ms ease, transform 160ms ease;
    font-family: inherit;
}
.promo-banner-arrow:hover,
.promo-banner-arrow:focus {
    opacity: 1;
    outline: none;
}
.promo-banner-arrow:focus-visible {
    outline: 2px solid rgba(92, 53, 32, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}
.promo-banner-arrow-prev {
    left: 10px;
}
.promo-banner-arrow-prev:hover {
    transform: translateY(-50%) translateX(-2px);
}
.promo-banner-arrow-next {
    right: 10px;
}
.promo-banner-arrow-next:hover {
    transform: translateY(-50%) translateX(2px);
}

.promo-banner-dots {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    align-items: center;
}
.promo-banner-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(92, 53, 32, 0.30);
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}
.promo-banner-dot:hover {
    background: rgba(92, 53, 32, 0.55);
}
.promo-banner-dot.is-active {
    background: #5C3520;
    transform: scale(1.25);
}
.promo-banner-dot:focus-visible {
    outline: 2px solid rgba(92, 53, 32, 0.55);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    #promoBannerBar[data-multi="1"] {
        padding-left: 32px;
        padding-right: 32px;
    }
    .promo-banner-arrow { font-size: 20px; padding: 4px 8px; }
    .promo-banner-arrow-prev { left: 4px; }
    .promo-banner-arrow-next { right: 4px; }
}

.promo-banner-tag {
    display: inline-block;
    background: rgba(92, 53, 32, 0.14);
    color: #5C3520;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.promo-banner-name,
a.promo-banner-name,
a.promo-banner-name:visited {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid rgba(92, 53, 32, 0.0);
    transition: border-color 160ms ease;
}
a.promo-banner-name:hover,
a.promo-banner-name:focus {
    border-bottom-color: rgba(92, 53, 32, 0.7);
    outline: none;
}

.promo-banner-time {
    opacity: 0.7;
    font-size: 13px;
}

@media (max-width: 600px) {
    #promoBannerBar {
        font-size: 13px;
        padding: 7px 12px;
    }
    .promo-banner-tag { font-size: 10px; }
}

/* === Strikethrough sale price (used on cards, modal, banner) ===
 *
 * Visual hierarchy: original price is de-emphasized (smaller, lighter,
 * struck through); sale price is the hero (larger, bolder, with a soft
 * glow). No animation / flashing — premium brand feel.
 */
.promo-original {
    text-decoration: line-through;
    opacity: 0.7;
    font-weight: 400;
    font-size: 0.85em;       /* relative — shrinks vs. surrounding text */
    margin-right: 6px;
    letter-spacing: 0.1px;
}

.promo-sale {
    font-weight: 700;
    font-size: 1.1em;        /* relative — slightly larger than surrounding */
    color: inherit;
    letter-spacing: 0.2px;
}

/* === Banner-context overrides (on the lighter peach gradient) ===
 * Saturated terracotta sale price pops naturally against the soft peach
 * background. Subtle warm glow keeps it sitting above the bar without
 * any animation.
 */
#promoBannerBar .promo-original {
    color: rgba(92, 53, 32, 0.55);   /* warm brown at low opacity */
    font-size: 13px;
}
#promoBannerBar .promo-sale {
    /* Pill highlight + warm outer glow. The semi-transparent cream
     * background gives the price a clear focal "spotlight" against the
     * peach bar; the box-shadow extends a soft peachy halo outward
     * (warmer & more visible than text-shadow alone, which got
     * chromatically absorbed into the warm bg). All static — no
     * animation. */
    display: inline-block;
    color: #B53D12;                            /* deeper terracotta for pop on cream pill */
    font-size: 18px;
    font-weight: 800;                          /* bolder than the surrounding 700 */
    padding: 2px 10px;
    border-radius: 7px;
    background: rgba(255, 240, 220, 0.50);     /* warm cream highlight */
    box-shadow:
        0 0 15px rgba(255, 140, 100, 0.40),    /* warm peachy outer glow (per design ask) */
        0 0 2px  rgba(194, 69, 27, 0.10);      /* tight terracotta edge for definition */
    line-height: 1.25;
    letter-spacing: 0.3px;
}

/* === Card / modal context (on white-ish backgrounds) ===
 * Terracotta keeps the sale price on-brand. Soft glow uses the brand
 * accent's own color so it sits naturally with the rest of the UI.
 */
.product-card-price .promo-sale,
.modal-product-price .promo-sale {
    color: #D4704A;
    text-shadow: 0 0 8px rgba(212, 112, 74, 0.18);
}
.product-card-price .promo-original,
.modal-product-price .promo-original {
    color: #888;
}