/*
 * Spend & Save EOFY 2026
 *
 * Two components that share the homepage hero's visual language
 * (assets/css/hero-homepage.css): the full-width EOFY banner that sits above
 * the hero, and the compact cart progress widget.
 *
 * Brand:
 *   Red    #ff0c3a   Hover red   #e0002e
 *   Navy   #011f30   Secondary   #003857
 *   Display: Bebas Neue   Body: Montserrat
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800&display=swap');

.ecml-ss-banner,
.ecml-ss-widget {
    --ss-red:        #ff0c3a;
    --ss-red-deep:   #e0002e;
    --ss-navy:       #011f30;
    --ss-navy-2:     #003857;
    --ss-ink:        #011f30;
    --ss-ink-muted:  #5b6772;
    --ss-line:       #e3ddc9;
    --ss-success:    #1f7a3a;
    --ss-font-display: 'Bebas Neue', Impact, "Arial Narrow", sans-serif;
    --ss-font-body:    'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ss-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.ecml-ss-banner *,
.ecml-ss-banner *::before,
.ecml-ss-banner *::after,
.ecml-ss-widget *,
.ecml-ss-widget *::before,
.ecml-ss-widget *::after { box-sizing: border-box; }

/* ===================================================================== */
/* EOFY banner (above the hero)                                          */
/* ===================================================================== */

.ecml-ss-banner {
    width: 100%;
    position: relative;
    padding: 0;
    color: #fff;
    font-family: var(--ss-font-body);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(0, 56, 87, 0.85) 0%, rgba(1, 31, 48, 0) 55%),
        linear-gradient(180deg, #022438 0%, var(--ss-navy) 100%);
    border-top: 4px solid var(--ss-red);
    overflow: hidden;
}

.ecml-ss-banner__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(22px, 3.4vw, 40px) clamp(18px, 4vw, 48px);
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    flex-wrap: wrap;
}

/* Lede ---------------------------------------------------------------- */

.ecml-ss-banner__lede {
    flex: 1 1 260px;
    min-width: 240px;
}

.ecml-ss-banner__eyebrow {
    margin: 0 0 6px;
    color: #7fb2d6;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ecml-ss-banner__headline {
    margin: 0;
    font-family: var(--ss-font-display);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-size: clamp(34px, 5vw, 62px);
    color: #fff;
}

.ecml-ss-banner__amount {
    color: var(--ss-red);
    display: inline-block;
}

.ecml-ss-banner__sub {
    margin: 10px 0 0;
    max-width: 36ch;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.5;
}

/* Tier ladder --------------------------------------------------------- */

.ecml-ss-banner__tiers {
    flex: 2 1 420px;
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ecml-ss-banner__tier {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(0, 56, 87, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: transform var(--ss-transition, 0.4s) var(--ss-ease), background-color 0.4s var(--ss-ease);
}

.ecml-ss-banner__tier--2 { background: rgba(0, 56, 87, 0.78); }
.ecml-ss-banner__tier--3 {
    background: linear-gradient(160deg, rgba(255, 12, 58, 0.22), rgba(0, 56, 87, 0.9));
    border-color: rgba(255, 12, 58, 0.5);
}

.ecml-ss-banner__tier:hover { transform: translateY(-3px); }

.ecml-ss-banner__tier-spend {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ecml-ss-banner__tier-save {
    font-family: var(--ss-font-display);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
}

.ecml-ss-banner__tier-pct {
    color: #9fc4dd;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ecml-ss-banner__tier--3 .ecml-ss-banner__tier-pct { color: #ffb3c2; }

/* CTA ----------------------------------------------------------------- */

.ecml-ss-banner__cta-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ecml-ss-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    color: #fff;
    font-family: var(--ss-font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--ss-red);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(255, 12, 58, 0.28);
    transition: background-color 0.3s var(--ss-ease), transform 0.3s var(--ss-ease), box-shadow 0.3s var(--ss-ease);
}

.ecml-ss-banner__cta:hover,
.ecml-ss-banner__cta:focus {
    background: var(--ss-red-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 12, 58, 0.36);
    text-decoration: none;
}

.ecml-ss-banner__ends {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .ecml-ss-banner__inner { gap: 20px; }
    .ecml-ss-banner__lede { flex-basis: 100%; }
    .ecml-ss-banner__tiers { flex-basis: 100%; }
    .ecml-ss-banner__cta-wrap { flex-basis: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (max-width: 560px) {
    .ecml-ss-banner__tiers { flex-direction: column; }
    .ecml-ss-banner__tier { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 12px 14px; }
    .ecml-ss-banner__cta-wrap { flex-direction: column; align-items: stretch; }
    .ecml-ss-banner__cta { justify-content: center; }
    .ecml-ss-banner__ends { text-align: center; }
}

/* ===================================================================== */
/* Cart progress widget                                                  */
/* ===================================================================== */

.ecml-ss-widget {
    margin: 0 0 18px;
    padding: 16px 18px;
    color: var(--ss-ink);
    font-family: var(--ss-font-body);
    background: #fff;
    border: 1px solid var(--ss-line);
    border-left: 3px solid var(--ss-red);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(1, 31, 48, 0.06);
}

.ecml-ss-widget--mini {
    margin: 12px 0;
    padding: 12px 14px;
}

.ecml-ss-widget__message {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ss-ink);
}

.ecml-ss-widget__message strong { font-weight: 800; }

.ecml-ss__tick { color: var(--ss-success); font-weight: 800; }

/* Track */
.ecml-ss-widget__track {
    position: relative;
    height: 8px;
    margin: 0 0 12px;
    background: #eef0ee;
    border-radius: 999px;
    overflow: visible;
}

.ecml-ss-widget__fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ss-navy-2), var(--ss-red));
    transition: width 0.5s var(--ss-ease);
}

.ecml-ss-widget__node {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: translateY(-50%);
    background: #fff;
    border: 2px solid #cfd6d2;
    border-radius: 50%;
    transition: border-color 0.3s var(--ss-ease), background-color 0.3s var(--ss-ease);
}

.ecml-ss-widget__node.is-unlocked {
    background: var(--ss-red);
    border-color: var(--ss-red);
}

/* Tier legend */
.ecml-ss-widget__tiers {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ecml-ss-widget__tier {
    flex: 1 1 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ss-ink-muted);
    text-align: center;
}

.ecml-ss-widget__tier:first-child { text-align: left; }
.ecml-ss-widget__tier:last-child { text-align: right; }

.ecml-ss-widget__tier.is-unlocked { color: var(--ss-success); font-weight: 700; }

@media (max-width: 480px) {
    .ecml-ss-widget__tiers { font-size: 10px; }
}