/* ─── SALE BANNER (Black Friday) ───
   Mobile-first: the base styles are the stacked mobile layout.
   From 901px up the banner switches to the "poster" layout, where every
   element is positioned in container-query units (cqw) so it scales
   perfectly with the banner width.
*/

/* ── Fonts (self-hosted, loaded only on the homepage) ── */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/ibm-plex-sans/IBMPlexSans-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/ibm-plex-sans/IBMPlexSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/ibm-plex-sans/IBMPlexSans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/ibm-plex-sans/IBMPlexSans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../../fonts/libre-baskerville/LibreBaskerville-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Banner shell + local tokens (scoped, so theme tokens are untouched) ── */
.sale-banner {
  --sb-bg: #171719;
  --sb-eyebrow: #dde1ed;
  --sb-title: #e6eaf7;
  --sb-gold-text: #fbcf67;
  --sb-white: #ffffff;
  --sb-btn-text: #171719;
  --sb-sans: "IBM Plex Sans", Arial, sans-serif;
  --sb-serif: "Libre Baskerville", Georgia, serif;

  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--sb-bg);
  container-type: inline-size;
  font-family: var(--sb-sans);
}

.sale-banner__inner {
  position: relative;
  width: 100%;
}

/* ── Decorative artwork (ribbons, lines, glows, dots) ── */
.sale-banner__art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.42;
  pointer-events: none;
}

/* ── Content: stacked, left aligned (mobile) ── */
.sale-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.75rem, 7vw, 3.5rem) clamp(1.25rem, 5vw, 2.75rem) clamp(2.25rem, 8vw, 4rem);
}

.sale-banner__eyebrow {
  font-size: clamp(1.0625rem, 4vw, 1.875rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--sb-eyebrow);
}

.sale-banner__title {
  margin-top: 0.3em;
  font-family: var(--sb-serif);
  font-size: clamp(2.125rem, 9vw, 4.375rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--sb-title);
}

.sale-banner__sale {
  display: block;
  width: clamp(9.375rem, 42vw, 18.75rem);
  height: auto;
  margin: -0.2em 0 -0.6em -0.625rem;
}

.sale-banner__offer {
  margin-top: 0.15em;
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--sb-gold-text);
}

.sale-banner__line1,
.sale-banner__line2 {
  font-size: clamp(0.9375rem, 3.6vw, 1.5rem);
  letter-spacing: 0.05em;
  line-height: 1.45;
  color: var(--sb-white);
}

.sale-banner__line1 {
  margin-top: 0.7em;
}

.sale-banner__dates {
  display: block;
}

/* ── Gold pill button ── */
.sale-banner__btn {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.625rem;
  padding: 0.95em 1.6em 0.85em;
  border-radius: 6249.9375rem;
  font-family: var(--sb-serif);
  font-size: clamp(0.875rem, 3.4vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sb-btn-text);
  background: linear-gradient(90deg,
    #c19a45 0%, #d1b264 6%, #e6d38f 13%, #f7eeb0 20%, #f3e8a6 24%,
    #e0cb81 32%, #cdae5b 40%, #b4882a 50%, #c09a3e 56%, #d2b65e 64%,
    #e6d582 71%, #fbf5a7 80%, #ebdb89 86%, #d2b45e 92%, #be9640 100%);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sale-banner__btn:hover,
.sale-banner__btn:focus-visible {
  filter: brightness(1.07);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.4rem 1.2rem rgba(246, 201, 91, 0.3);
  outline: none;
}

/* ── Countdown timer ── */
.sale-banner__timer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.875rem;
}

.sale-banner__timer-label {
  margin-bottom: 0.625rem;
  font-size: clamp(0.8125rem, 3.2vw, 1.125rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1;
  color: var(--sb-white);
}

.sale-banner__timer-units {
  display: flex;
  gap: clamp(0.5rem, 2.2vw, 0.875rem);
}

.sale-banner__timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sale-banner__timer-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.625rem, 15vw, 5.25rem);
  height: clamp(3.375rem, 14vw, 4.875rem);
  border: 0.09375rem solid transparent;
  border-radius: clamp(0.5rem, 2vw, 0.75rem);
  background:
    linear-gradient(180deg, #3b2f1d 0%, #2a2116 100%) padding-box,
    linear-gradient(160deg, #f7e7a3 0%, #b88a35 45%, #f1d27a 75%, #8c6526 100%) border-box;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 236, 170, 0.12);
  font-size: clamp(1.625rem, 7vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sb-white);
}

.sale-banner__timer-name {
  margin-top: 0.5rem;
  font-size: clamp(0.6875rem, 2.8vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--sb-white);
}

/* ── VIP note ── */
.sale-banner__note {
  margin-top: 1.375rem;
  font-size: clamp(0.9375rem, 3.6vw, 1.5rem);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--sb-white);
}

.sale-banner__timer + .sale-banner__note {
  margin-top: 1.125rem;
}

/* ── Small phones and up: button hugs its text instead of full width ── */
@media (min-width: 421px) {
  .sale-banner__btn {
    align-self: auto;
  }
}

/* ── Desktop: poster layout ──
   Everything is placed in cqw (1cqw = 1% of the banner width), so the whole
   banner scales like an image. Browsers without container-query units keep
   the stacked layout above. */
@media (min-width: 901px) {
  @supports (width: 1cqw) {

    .sale-banner__inner {
      aspect-ratio: 2576 / 664;
    }

    .sale-banner__art {
      left: 29.503cqw;
      width: 70.497cqw;
      opacity: 1;
    }

    .sale-banner__content {
      position: absolute;
      inset: 0;
      display: block;
      padding: 0;
    }

    .sale-banner__content > * {
      position: absolute;
      margin: 0;
      line-height: 1;
      white-space: nowrap;
    }

    .sale-banner__eyebrow {
      left: 2.407cqw;
      top: 2.989cqw;
      font-size: 2.252cqw;
      letter-spacing: 0.0835em;
    }

    .sale-banner__title {
      left: 2.446cqw;
      top: 6.405cqw;
      font-size: 4.604cqw;
      letter-spacing: -0.031em;
      line-height: 1;
    }

    .sale-banner__sale {
      left: 40.373cqw;
      top: 0.582cqw;
      width: 16.304cqw;
      margin: 0;
      overflow: visible;
    }

    .sale-banner__offer {
      left: 2.562cqw;
      top: 11.452cqw;
      font-size: 2.601cqw;
      letter-spacing: 0.09em;
    }

    .sale-banner__line1,
    .sale-banner__line2 {
      font-size: 1.708cqw;
      letter-spacing: 0.08em;
    }

    .sale-banner__line1 {
      left: 2.601cqw;
      top: 15.062cqw;
    }

    .sale-banner__dates {
      display: inline;
      margin-left: 1.553cqw;
    }

    .sale-banner__line2 {
      left: 2.562cqw;
      top: 17.508cqw;
    }

    .sale-banner__btn {
      left: 2.407cqw;
      top: 21.273cqw;
      width: 17.818cqw;
      height: 3.571cqw;
      padding: 0 0 0.233cqw;
      font-size: 1.32cqw;
    }

    .sale-banner__btn:hover,
    .sale-banner__btn:focus-visible {
      box-shadow: 0 0.4cqw 1.2cqw rgba(246, 201, 91, 0.3);
    }

    .sale-banner__timer {
      left: 63.043cqw;
      top: 10.559cqw;
      width: 18.866cqw;
      align-items: center;
    }

    .sale-banner__timer-label {
      margin-bottom: 0.543cqw;
      padding-left: 0.24em; /* balances the trailing letter-spacing */
      font-size: 1.32cqw;
    }

    .sale-banner__timer-units {
      gap: 0.699cqw;
    }

    .sale-banner__timer-box {
      width: 4.193cqw;
      height: 4.037cqw;
      border-width: 0.08cqw;
      border-radius: 0.543cqw;
      box-shadow: 0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 236, 170, 0.12);
      font-size: 2.329cqw;
    }

    .sale-banner__timer-name {
      margin-top: 0.543cqw;
      font-size: 0.932cqw;
    }

    .sale-banner__note {
      left: 61.452cqw;
      top: 20.419cqw;
      font-size: 1.669cqw;
      letter-spacing: 0.088em;
    }

    .sale-banner__timer + .sale-banner__note {
      margin-top: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sale-banner__btn {
    transition: none;
  }
}