/* ==========================================================================
   GPDStore sale mode (inc/sale.php) — design "Summer Sale Home".

   Enqueued site-wide ONLY while droix_gpd_sale is active; every rule scopes to
   body.gpd-sale-on (or the ended state) so switching the sale off leaves zero
   CSS residue. Tokens only — --orange-500 is the designated sale colour
   (gpd-tokens.css). Countdown digits ship empty (.is-pending) and are filled
   by gpd-sale.js; body.gpd-sale-ended hides the sale chrome on cached HTML
   after the end datetime passes.
   ========================================================================== */

@keyframes gpdSalePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Top bar: promo (left) + "Ends in" countdown (right) ─────────────────── */
body.gpd-sale-on .top-bar-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}
body.gpd-sale-on .gpd-sale-promo {
    display: inline-flex;
    align-items: center;
    gap: 8px 14px;
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    padding: 7px 0;
}
body.gpd-sale-on .gpd-sale-promo-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-0);
}
body.gpd-sale-on .gpd-sale-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange-500);
    animation: gpdSalePulse 1.6s ease infinite;
    flex: 0 0 auto;
}
body.gpd-sale-on .gpd-sale-promo-link {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lime-500);
    white-space: nowrap;
}
body.gpd-sale-on .gpd-sale-promo-link:hover { color: var(--lime-600); }
/* Keep the utility labels on one line next to the promo. */
body.gpd-sale-on .top-bar-left .gpd-util-link { white-space: nowrap; }
/* The promo + countdown fill the bar: the brand strip is the element the sale
   header trades away (design's bar carries no brand strip), and the right
   cluster must not shrink into the left links. */
body.gpd-sale-on .gpd-util-brandstrip { display: none; }
body.gpd-sale-on .top-bar-right { flex: 0 0 auto; }
body.gpd-sale-on .top-bar-right .gpd-sale-ends {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fg-secondary);
    white-space: nowrap;
    margin-right: 14px;
}

/* ── Countdown widgets (gpd-sale.js) ─────────────────────────────────────── */
body.gpd-sale-on .gpd-sale-cd.is-pending,
body.gpd-sale-on .gpd-sale-cd.is-ended { visibility: hidden; }
body.gpd-sale-on .gpd-sale-cd--inline {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--orange-500);
    font-variant-numeric: tabular-nums;
}
body.gpd-sale-on .gpd-sale-cd--inline b { font-weight: 500; }
body.gpd-sale-on .gpd-sale-cd--inline .dl { color: var(--orange-500); }
body.gpd-sale-on .gpd-sale-cd--boxes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.gpd-sale-on .gpd-sale-cd--boxes .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 62px;
    background: var(--surface-glass);
    border: 1px solid rgba(255, 107, 53, 0.35);
    border-radius: var(--r-lg);
    padding: 9px 11px;
}
body.gpd-sale-on .gpd-sale-cd--boxes .box b {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
}
body.gpd-sale-on .gpd-sale-cd--boxes .box .k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange-500);
}

/* ── Primary-nav lime "Summer Sale" pill ─────────────────────────────────── */
/* The nav ul forces ~90px line-height as its height mechanism — pin the pill
   to a fixed 34px box exactly like the Contact Us button (gpd-theme.css). */
body.gpd-sale-on li.gpd-sale-nav-li { display: flex; align-items: center; }
body.gpd-sale-on li.gpd-sale-nav-li > a.gpd-sale-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    margin-left: 6px;
    padding: 0 15px;
    border-radius: var(--r-full);
    background: var(--lime-500);
    color: #101400 !important;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.25s, box-shadow 0.25s;
}
body.gpd-sale-on li.gpd-sale-nav-li > a.gpd-sale-nav-pill:hover {
    background: var(--lime-600);
    box-shadow: var(--shadow-glow);
}
body.gpd-sale-on li.gpd-sale-nav-li > a.gpd-sale-nav-pill svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Footer Shop-column "Summer Sale" link ───────────────────────────────── */
body.gpd-sale-on .gpd-sale-foot-li a {
    color: var(--orange-500) !important;
    font-weight: 700;
}

/* ── Shared price chrome: struck was + orange save chip ──────────────────── */
/* Absolute size — an em here resolves against the flex PARENT (≈14px), not the
   big .now price, and rendered a barely-legible ~9px strike-through. */
body.gpd-sale-on .gpd-sale-was,
body.gpd-sale-on .gpd-sale-was .woocommerce-Price-amount {
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-secondary) !important;
    -webkit-text-fill-color: var(--fg-secondary);
    text-decoration: line-through;
    letter-spacing: 0;
}
body.gpd-sale-on .gpd-sale-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--orange-500);
    background: rgba(255, 107, 53, 0.12);
    border: 1px solid rgba(255, 107, 53, 0.35);
    border-radius: var(--r-full);
    padding: 5px 11px;
    white-space: nowrap;
}
body.gpd-sale-on .gpd-sale-chip .woocommerce-Price-amount {
    color: var(--orange-500);
    -webkit-text-fill-color: var(--orange-500);
    font-weight: 700;
}

/* ── Hero: sale slide + product-slide sale pricing ───────────────────────── */
body.gpd-home-surface.gpd-sale-on .gh-slide--sale .gh-eyebrow .gs-dot { background: var(--orange-500); box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18); animation: gpdSalePulse 1.8s ease infinite; }
body.gpd-home-surface.gpd-sale-on .gh-slide--sale .gh-eyebrow { color: var(--orange-500); }
body.gpd-home-surface.gpd-sale-on .gh-slide--sale .gh-h1 .b { color: var(--orange-500); }
body.gpd-home-surface.gpd-sale-on .gh-slide--sale .gpd-sale-cd--boxes { margin: 0 0 26px; }
body.gpd-home-surface.gpd-sale-on .gh-slide--sale .bloom.sale {
    background: radial-gradient(closest-side, rgba(255, 107, 53, 0.24), rgba(211, 255, 95, 0.10) 60%, transparent 75%);
}
body.gpd-home-surface.gpd-sale-on .gh-price--sale .now {
    color: var(--orange-500);
    -webkit-text-fill-color: var(--orange-500);
    white-space: nowrap;
}
body.gpd-home-surface.gpd-sale-on .gh-price--onsale { flex-wrap: wrap; align-items: baseline; row-gap: 4px; }
body.gpd-home-surface.gpd-sale-on .gpd-sale-tag {
    position: absolute;
    top: 8px;
    right: 14px;
    z-index: 3;
    background: var(--orange-500);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    padding: 9px 14px;
    border-radius: var(--r-lg);
    transform: rotate(6deg);
}
body.gpd-home-surface.gpd-sale-on .gpd-sale-tag--sm { font-size: 13px; padding: 7px 11px; }

/* ── #summer-sale deals band ─────────────────────────────────────────────── */
body.gpd-home-surface.gpd-sale-on .gpd-sale-band {
    border: 1px solid rgba(255, 107, 53, 0.28);
    border-radius: var(--r-2xl);
    background: linear-gradient(160deg, rgba(255, 107, 53, 0.10) 0%, var(--bg-1) 42%);
    padding: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 44px);
}
body.gpd-home-surface.gpd-sale-on .gpd-sale-head { margin-bottom: 28px; }
body.gpd-home-surface.gpd-sale-on .gpd-sale-eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* !important: gpd-theme.css forces every .gs-eyebrow teal (single-source rule);
   the sale band + newsletter eyebrows are deliberately orange. */
body.gpd-home-surface.gpd-sale-on .gpd-sale-eyebrow-row .gs-eyebrow { color: var(--orange-500) !important; }
body.gpd-home-surface.gpd-sale-on .gpd-sale-upto {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--orange-500);
    color: #fff;
    border-radius: var(--r-full);
    padding: 5px 11px;
    white-space: nowrap;
}
body.gpd-home-surface.gpd-sale-on .gpd-sale-head-cd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}
body.gpd-home-surface.gpd-sale-on .gpd-sale-head-cd .lab {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
body.gpd-home-surface.gpd-sale-on .gpd-sale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
    gap: 18px;
}
body.gpd-home-surface.gpd-sale-on .gpd-sale-grid .gs-pcard:hover { border-color: rgba(255, 107, 53, 0.4); }

/* pcard sale chrome: −N% chip top-left (primary flag keeps top-right). */
body.gpd-home-surface.gpd-sale-on .gs-pcard .gs-flag--pct {
    right: auto;
    left: 14px;
}
body.gpd-home-surface.gpd-sale-on .gs-price .gpd-sale-save {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--orange-500);
    margin-top: 2px;
}
body.gpd-home-surface.gpd-sale-on .gs-price .gpd-sale-save .woocommerce-Price-amount {
    color: var(--orange-500);
    -webkit-text-fill-color: var(--orange-500);
    font-weight: 700;
    font-size: 12px;
}

/* Category tiles: orange "N on sale · up to −X%" chip. */
body.gpd-home-surface.gpd-sale-on .gpd-sale-catchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    color: var(--orange-500);
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.32);
    border-radius: var(--r-full);
    padding: 5px 11px;
}
body.gpd-home-surface.gpd-sale-on .gpd-sale-catchip svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Eco band + showcase: was/save alongside the lime now-price. */
body.gpd-home-surface.gpd-sale-on .gh-eco-card .price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
body.gpd-home-surface.gpd-sale-on .gpd-home-show .ctas { align-items: center; }
body.gpd-home-surface.gpd-sale-on .gpd-home-show .gs-btn-primary .gpd-sale-was,
body.gpd-home-surface.gpd-sale-on .gpd-home-show .gs-btn-primary .gpd-sale-was .woocommerce-Price-amount {
    color: rgba(16, 20, 0, 0.62) !important;
    -webkit-text-fill-color: rgba(16, 20, 0, 0.62);
}

/* Newsletter eyebrow. */
body.gpd-home-surface.gpd-sale-on .gpd-home-news .gpd-sale-eyebrow {
    display: block;
    color: var(--orange-500) !important;
    margin-bottom: 10px;
}

/* ── Ended state (gpd-sale.js): hide sale chrome on stale cached HTML ────── */
body.gpd-sale-ended .gpd-sale-promo,
body.gpd-sale-ended .gpd-sale-ends,
body.gpd-sale-ended .gpd-sale-nav-li,
body.gpd-sale-ended .gpd-sale-foot-li,
body.gpd-sale-ended .gpd-sale-cd,
body.gpd-sale-ended .gpd-home-salesec,
body.gpd-sale-ended .gh-slide--sale .gpd-sale-cd--boxes { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    body.gpd-home-surface.gpd-sale-on .gpd-sale-head { flex-direction: column; align-items: flex-start; }
    body.gpd-home-surface.gpd-sale-on .gpd-sale-head-cd { align-items: flex-start; }
}
@media (max-width: 1200px) {
    /* Design: the sale strip collapses to message + countdown — the utility
       links hide while the promo needs the room (they stay reachable via the
       footer/menu; 820px in the design, higher here because our bar also
       carries the language selector). */
    body.gpd-sale-on .top-bar-left .gpd-util-links { display: none; }
}
@media (max-width: 600px) {
    /* Two stacked rows: promo message + link, then countdown + language. */
    body.gpd-sale-on .top-bar > .col-full { flex-wrap: wrap; }
    body.gpd-sale-on .top-bar-left { flex: 1 1 100%; }
    body.gpd-sale-on .top-bar-right {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 6px;
    }
    body.gpd-sale-on .gpd-sale-promo { gap: 4px 10px; padding-bottom: 2px; }
    body.gpd-sale-on .gpd-sale-promo-msg { font-size: 11px; }
    body.gpd-sale-on .gpd-sale-promo-link { font-size: 11.5px; }
    body.gpd-sale-on .top-bar-right .gpd-sale-ends { margin-right: 8px; }
    body.gpd-home-surface.gpd-sale-on .gpd-sale-cd--boxes { gap: 6px; }
    body.gpd-home-surface.gpd-sale-on .gpd-sale-cd--boxes .box { min-width: 52px; padding: 7px 9px; }
    body.gpd-home-surface.gpd-sale-on .gpd-sale-cd--boxes .box b { font-size: 19px; }
    body.gpd-home-surface.gpd-sale-on .gpd-sale-tag { font-size: 13px; padding: 7px 11px; top: 4px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    body.gpd-sale-on .gpd-sale-dot,
    body.gpd-home-surface.gpd-sale-on .gh-slide--sale .gh-eyebrow .gs-dot { animation: none; }
}