/* ═══════════════════════════════════════════════════════════════
   SMACK BANG — COLOUR PAIR SYSTEM
   Each .sb-pair--{key} class sets three custom properties used
   by all campaign/category components below.
   Also overrides --btn-shadow so hover shadows stay visible
   on coloured backgrounds.
   ═══════════════════════════════════════════════════════════════ */

.sb-pair--pink-blue    { --pair-bg: #FF9AEA; --pair-text: #1283E8; --pair-accent: #FFDD00; }
.sb-pair--blue-pink    { --pair-bg: #1283E8; --pair-text: #FF9AEA; --pair-accent: #FFDD00; }
.sb-pair--yellow-blue  { --pair-bg: #FFDD00; --pair-text: #1283E8; --pair-accent: #FD5D2D; }
.sb-pair--yellow-green { --pair-bg: #FFDD00; --pair-text: #007B32; --pair-accent: #FD5D2D; }
.sb-pair--yellow-coral { --pair-bg: #FFDD00; --pair-text: #FD5D2D; --pair-accent: #FF9AEA; }
.sb-pair--coral-yellow { --pair-bg: #FD5D2D; --pair-text: #FFDD00; --pair-accent: #FFDD00; }
.sb-pair--coral-black  { --pair-bg: #FD5D2D; --pair-text: #151515; --pair-accent: #FFDD00; }
.sb-pair--green-yellow { --pair-bg: #007B32; --pair-text: #FFDD00; --pair-accent: #FF9AEA; }
.sb-pair--green-pink   { --pair-bg: #007B32; --pair-text: #FF9AEA; --pair-accent: #FFDD00; }
.sb-pair--green-white  { --pair-bg: #007B32; --pair-text: #FFFCF9; --pair-accent: #FFDD00; }
.sb-pair--black-yellow { --pair-bg: #151515; --pair-text: #FFDD00; --pair-accent: #FD5D2D; }
.sb-pair--black-coral  { --pair-bg: #151515; --pair-text: #FD5D2D; --pair-accent: #FFDD00; }
.sb-pair--black-pink   { --pair-bg: #151515; --pair-text: #FF9AEA; --pair-accent: #FFDD00; }
.sb-pair--black-white  { --pair-bg: #151515; --pair-text: #FFFCF9; --pair-accent: #FFDD00; }
.sb-pair--white-black  { --pair-bg: #FFFCF9; --pair-text: #151515; --pair-accent: #FD5D2D; }

/* Button hover shadow is always #151515 — see main.css .btn:hover */

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN / CATEGORY HERO BANNER
   ═══════════════════════════════════════════════════════════════ */

.sb-campaign-hero {
  position: relative;
  overflow: hidden;
  background: var(--pair-bg);
  color: var(--pair-text);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 360px;
  padding: var(--space-component) var(--gutter);
  gap: var(--gap);
}

.sb-campaign-hero--bg-media { position: relative; }

.sb-campaign-hero__bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sb-campaign-hero__content,
.sb-campaign-hero__image-wrap {
  position: relative;
  z-index: 1;
}
/* Content always renders above fill-style images */
.sb-campaign-hero__content { z-index: 2; }

.sb-campaign-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;     /* vertically centre content within the hero */
  align-self: center;
}

.sb-campaign-hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);       /* 40px → 128px */
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--pair-text);
  margin: 0 0 var(--space-element);  /* gap between headline and subheading */
}

.sb-campaign-hero__subheading {
  font-size: var(--text-body-lg);    /* 16px → 22px */
  font-weight: 400;
  color: var(--pair-text);
  margin: 0 0 var(--space-element);
  opacity: 0.85;
  line-height: 1.25;
}

/* Category/shop variant: subheading always black — aesthetic rule */
.sb-campaign-hero--category .sb-campaign-hero__subheading {
  color: var(--black);
  opacity: 1;
}

.sb-campaign-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-element);  /* consistent gap above pills */
}

.sb-campaign-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: var(--space-element);
}

.sb-campaign-hero__pill {
  display: inline-block;
  background: var(--pair-text);
  color: #151515;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 14px;
}

/* Image: contained */
.sb-campaign-hero__image-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
}

.sb-campaign-hero__image-wrap--contained img {
  max-height: 280px;
  max-width: 340px;
  object-fit: contain;
  display: block;
}

/* Image: overflow — extends below the hero */
.sb-campaign-hero__image-wrap--overflow {
  align-self: stretch;
  position: relative;
  overflow: visible;
}
.sb-campaign-hero__image-wrap--overflow img {
  position: absolute;
  bottom: calc(-1 * var(--overflow-pct, 15) * 1%);
  right: 0;
  max-height: calc(100% + var(--overflow-pct, 15) * 1%);
  width: auto;
  max-width: 420px;
  object-fit: contain;
  display: block;
}

/* Image: cover */
.sb-campaign-hero__image-wrap--cover {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 45%;
}
.sb-campaign-hero__image-wrap--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image: fill — centred vertically, overflows hero height, clipped by hero overflow */
.sb-campaign-hero__image-wrap--fill {
  position: relative;
  align-self: stretch;
  min-width: clamp(320px, 52vw, 780px);
  overflow: visible;
  z-index: 0;
}
.sb-campaign-hero__image-wrap--fill img {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 175%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Category variant — hero size headline, black subheading */
.sb-campaign-hero--category {
  min-height: 280px;
  padding: var(--space-component) var(--gutter);
}
.sb-campaign-hero--category .sb-campaign-hero__headline {
  font-size: var(--text-hero);       /* same as campaign — user wants it big */
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .sb-campaign-hero {
    grid-template-columns: 1fr;
    min-height: 260px;
    padding: var(--space-component) var(--gutter);
  }
  .sb-campaign-hero__image-wrap--overflow {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
  }
  .sb-campaign-hero__image-wrap--overflow img {
    position: absolute;
    bottom: 0;
    right: 0;
    max-height: 100%;
    max-width: 60%;
  }
  .sb-campaign-hero__image-wrap--cover {
    position: relative;
    width: 100%;
    height: 200px;
    inset: auto;
  }
  .sb-campaign-hero__image-wrap--fill {
    min-width: unset;
    width: 100%;
    height: auto;
    overflow: visible;
    align-self: auto;
  }
  .sb-campaign-hero__image-wrap--fill img {
    position: static;
    transform: none;
    width: 72%;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
    margin: var(--space-element) auto 0;
    object-fit: contain;
  }
  .sb-campaign-hero__content {
    align-items: center;
    text-align: center;
  }
  .sb-campaign-hero--category { padding: 24px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN HERO 2 — display headline + starburst + image
   ═══════════════════════════════════════════════════════════════ */

.sb-hero2 {
  position: relative;
  background: var(--pair-bg);
  color: var(--pair-text);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-component);
  padding: var(--space-component) var(--gutter);
  min-height: 480px;
  overflow: hidden;
}

/* Left — text content */
.sb-hero2__content {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-element);
  text-align: center;
  position: relative;
  z-index: 1;
}

.sb-hero2__display {
  font-family: var(--font-display);
  font-size: var(--text-display);     /* 64px → 224px — default */
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--pair-text);
  margin: 0;
  text-align: center;
}

/* Display size variants — pick smaller for long headlines */
.sb-hero2__display--s1 { font-size: clamp(36px, 6vw,  88px);  }
.sb-hero2__display--s2 { font-size: clamp(48px, 8vw,  128px); }
.sb-hero2__display--s3 { font-size: var(--text-display);       }
.sb-hero2__display--s4 { font-size: clamp(80px, 14vw, 260px);  }
.sb-hero2__display--s5 { font-size: clamp(96px, 18vw, 320px); line-height: 0.82; }

.sb-hero2__sub-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}

.sb-hero2__subheading {
  font-family: var(--font-display);
  font-size: var(--text-heading);     /* 24px → 56px */
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.sb-hero2__body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);     /* 16px → 22px */
  line-height: 1.4;
  color: var(--pair-text);
  opacity: 0.85;
  margin: 0 auto;
  max-width: 560px;
  text-align: center;
}

.sb-hero2__pills {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.sb-hero2__pill {
  background: var(--pair-text);
  color: #151515;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--input-py) var(--input-px);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}


@media (max-width: 768px) {
  .sb-hero2 {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: var(--space-element);
  }
  .sb-hero2__content { align-items: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN TICKER
   ═══════════════════════════════════════════════════════════════ */

.sb-campaign-ticker {
  background: var(--pair-bg);
  color: var(--pair-text);
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
}

.sb-campaign-ticker__track {
  display: inline-flex;
  animation: sb-ticker-scroll 25s linear infinite;
}

.sb-campaign-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 28px;
}
.sb-campaign-ticker__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sb-campaign-ticker__item::after {
  content: none;
}

@keyframes sb-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ═══════════════════════════════════════════════════════════════
   PROMO BANNER — contained banner, mirrors au-mystery-new pattern exactly.
   --banner-indent (10%) creates the proportional side narrowing.
   Image: position absolute, top -33%, same overflow trick as au-mystery-new.
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile-first: full-bleed, stacked layout ─────────────── */
.sb-promo-banner-wrap {
  background: var(--white);
  padding: 0; /* full-bleed on mobile/tablet — no side indent */
  margin-bottom: var(--space-section);
}

.sb-promo-banner {
  background: var(--pair-bg);
  color: var(--pair-text);
  position: relative;
}

/* Mobile content: gutter padding, full width, centred */
.sb-promo-banner__inner {
  padding: var(--space-component) var(--gutter);
}
.sb-promo-banner__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sb-promo-banner--no-image .sb-promo-banner__inner {
  padding: var(--space-component) var(--gutter);
}

.sb-promo-banner__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 4.375rem);
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--pair-text);
  margin: 0 0 16px;
}

.sb-promo-banner__body {
  font-size: var(--text-body);
  line-height: 1.25;
  color: var(--pair-text);
  opacity: 0.9;
  margin: 0 0 24px;
  max-width: 440px;
}

.sb-promo-banner__btn {
  display: inline-block;
  background: var(--pair-accent);
  color: #151515;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 24px;
  border: 2px solid var(--pair-accent);
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-promo-banner__btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 #151515;
}

/* Centred variant — no image, hero headline, everything centred */
.sb-promo-banner--centered .sb-promo-banner__inner { text-align: center; display: flex; flex-direction: column; align-items: center; padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%); }
.sb-promo-banner--centered .sb-promo-banner__headline { font-size: var(--text-heading); line-height: 0.95; }
.sb-promo-banner--centered .sb-promo-banner__body { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; opacity: 0.85; }
.sb-promo-banner--centered .sb-promo-banner__btn { font-size: var(--text-body); padding: var(--space-element) var(--space-component); }
.sb-promo-banner__btns { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; }
.sb-promo-banner__btn--alt  { background: var(--blue);  color: var(--white); border-color: var(--blue); }
.sb-promo-banner__btn--alt2 { background: var(--coral); color: var(--white); border-color: var(--coral); }

/* Image — stacks below content on mobile */
.sb-promo-banner__image-wrap {
  position: static;
  width: 100%;
  height: clamp(180px, 50vw, 300px);
}
.sb-promo-banner__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ── Desktop ≥ 1024px: contained with indent, side-by-side ── */
@media (min-width: 64rem) {
  .sb-promo-banner-wrap {
    padding: 60px var(--banner-indent) 40px;
  }
  .sb-promo-banner__inner {
    padding: 60px 47% 60px 80px;
  }
  .sb-promo-banner__content {
    align-items: flex-start;
    text-align: left;
  }
  .sb-promo-banner--centered .sb-promo-banner__content {
    align-items: center;
    text-align: center;
  }
  .sb-promo-banner--centered .sb-promo-banner__inner {
    padding: var(--space-section) clamp(var(--gutter), calc(50vw - 40rem), 15%);
  }
  .sb-promo-banner--no-image .sb-promo-banner__inner {
    padding: 60px 80px;
  }
  .sb-promo-banner__image-wrap {
    position: absolute;
    right: 0;
    top: -33%;
    bottom: 0;
    width: 43%;
    height: auto;
  }
  .sb-promo-banner__image-wrap img {
    object-position: bottom center;
  }
  .sb-promo-banner__image-wrap--contained {
    top: 0;
  }
  .sb-promo-banner__image-wrap--left {
    right: auto;
    left: 0;
  }
  .sb-promo-banner__image-wrap--left + .sb-promo-banner__inner {
    padding: 60px 80px 60px 47%;
  }
}