.campaign-promo{--campaign-background:#fff3ce;--campaign-heading:#352078;--campaign-text:#483318;--campaign-button-background:#402080;--campaign-button-text:#fff;box-sizing:border-box;background:var(--campaign-background);color:var(--campaign-text);padding:20px 24px;display:flex;align-items:center;gap:16px;border-radius:20px;font-family:inherit;line-height:1.45;position:relative;z-index:2;text-align:left;min-width:0}
.campaign-promo img{width:38px;height:38px;object-fit:contain;flex:none}.campaign-promo img[hidden]{display:none}.campaign-promo-copy{min-width:0}.campaign-promo strong{display:block;font-size:20px;color:var(--campaign-heading);overflow-wrap:anywhere;line-height:1.3}.campaign-promo p{margin:5px 0 0;font-size:15px;color:var(--campaign-text);overflow-wrap:anywhere}.campaign-promo a{margin-left:auto;display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;background:var(--campaign-button-background);color:var(--campaign-button-text);border-radius:999px;text-decoration:none;font-size:14px;font-weight:700;line-height:1.4;text-align:center;overflow-wrap:anywhere;max-width:100%;flex-shrink:0}.campaign-promo a:focus-visible{outline:3px solid var(--campaign-heading);outline-offset:4px}
.campaign-promo--strip{border-radius:0;padding:12px max(24px,calc((100% - 1200px)/2));gap:14px}.campaign-promo--strip strong{font-size:15px}.campaign-promo--strip p{font-size:14px;margin:0}.campaign-promo--strip img{width:28px;height:28px}.campaign-promo--card{width:420px;flex-wrap:wrap;box-shadow:0 12px 40px #19112826}.campaign-promo--card .campaign-promo-copy{flex:1}.campaign-promo--card a{width:100%;margin:4px 0 0}.campaign-promo--banner{max-width:1152px;margin:24px auto}.campaign-promo--banner a{flex-basis:auto;max-width:35%}
/* Mobile/tablet cards flow below the search; desktop heroes keep their original layout. */
@media (max-width: 999px) {
.hero:has(>.campaign-promo--card),.cat-hero:has(>.campaign-promo--card){display:grid;grid-template-columns:1fr;align-items:start;padding-bottom:24px!important}
.hero>.campaign-promo--card,.cat-hero>.campaign-promo--card{position:relative;grid-column:1;justify-self:end;max-width:calc(100% - 48px);margin:30px 24px 0 0}
.hero:has(>.campaign-promo--card) .hero-content{padding-bottom:24px}.cat-hero:has(>.campaign-promo--card) .cat-hero-inner{padding-top:60px}.cat-hero:has(>.campaign-promo--card) .cat-search{margin-bottom:0}.hero:has(>.campaign-promo--card) .hero-offer{position:relative;grid-row:3}
}
.pdp-gallery-hero:has(>.campaign-promo--card){position:relative}.pdp-gallery-hero>.campaign-promo--card{position:absolute;right:24px;bottom:24px;max-width:calc(100% - 48px)}
/* Fallback for selected pages without a CMS hero. */
header~.campaign-promo--card{max-width:calc(100% - 32px);margin:20px auto}
@media(max-width:900px){.campaign-promo--banner{margin:20px 16px}.campaign-promo--strip{flex-wrap:wrap}.campaign-promo--strip a{flex-shrink:1}}
@media(max-width:640px){.campaign-promo{gap:12px;padding:18px 16px}.campaign-promo strong{font-size:18px}.campaign-promo p{font-size:14px}.campaign-promo img{width:30px;height:30px}.campaign-promo a{min-height:46px;font-size:14px;flex-shrink:1}.campaign-promo--strip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;padding:10px 16px}.campaign-promo--strip img{grid-row:1 / 3;width:28px;height:28px;align-self:start;margin-top:3px}.campaign-promo--strip strong{font-size:14px}.campaign-promo--strip p{font-size:12px}.campaign-promo--strip a{grid-column:2;justify-self:start;min-height:36px;padding:7px 12px;margin:3px 0 0;font-size:13px}.campaign-promo--strip:not(:has(img)) .campaign-promo-copy,.campaign-promo--strip:not(:has(img)) a{grid-column:1 / -1}.campaign-promo--card{box-shadow:none}.hero>.campaign-promo--card,.cat-hero>.campaign-promo--card{max-width:calc(100% - 32px);width:calc(100% - 32px);margin:18px 16px 0;justify-self:center}.campaign-promo--banner{flex-wrap:wrap}.campaign-promo--banner .campaign-promo-copy{flex:1}.campaign-promo--banner a{width:100%;max-width:100%;margin:5px 0 0}.pdp-gallery-hero>.campaign-promo--card{position:relative;inset:auto;width:calc(100% - 32px);max-width:calc(100% - 32px);margin:16px}.cat-hero:has(>.campaign-promo--card) .cat-hero-inner{padding-top:30px}}

/* Outside the flow: the card never changes desktop hero/search geometry. */
@media (min-width: 1000px) {
  .hero > .campaign-promo--card,
  .cat-hero > .campaign-promo--card {
    position: absolute;
    inset: auto 24px 24px auto;
    width: 420px;
    max-width: calc(100% - 48px);
    margin: 0;
  }
}

@media(min-width:901px){.pdp-gallery-hero>.campaign-promo--card{left:56px;right:auto;bottom:48px;max-width:min(420px,calc(55% - 64px))}}
@media(min-width:641px) and (max-width:900px){.pdp-gallery-hero>.campaign-promo--card{position:relative;inset:auto;width:calc(100% - 32px);max-width:calc(100% - 32px);margin:16px auto}}
@media (max-width: 999px) {
.hero:has(>.campaign-promo--card){padding-bottom:0!important}.hero:has(>.campaign-promo--card) .hero-offer{margin-top:24px}
}

/* Keep a visible strip of the hero behind the mobile card's bottom corners. */
@media (max-width: 640px) {
  .cat-hero:has(> .campaign-promo--card) {
    padding-bottom: 24px !important;
  }
  .cat-hero:has(> .campaign-promo--card) .hero-slider,
  .cat-hero:has(> .campaign-promo--card) .cat-hero-bg {
    inset: 0;
  }
}

/* Compact campaign: a separate, smaller treatment for heroes with search. */
.campaign-promo--compact {
  width: 300px;
  padding: 14px 16px;
  gap: 8px 10px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  box-shadow: 0 8px 28px #19112820;
}
.campaign-promo--compact img { width: 26px; height: 26px; align-self: start; }
.campaign-promo--compact strong { font-size: 16px; }
.campaign-promo--compact p { font-size: 13px; line-height: 1.45; margin-top: 4px; }
.campaign-promo--compact a {
  grid-column: 2;
  justify-self: start;
  margin: 0;
  padding: 6px 12px;
  min-height: 40px;
  font-size: 12px;
  flex-shrink: 1;
}
.campaign-promo--compact:not(:has(img:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.campaign-promo--compact:not(:has(img:not([hidden]))) a { grid-column: 1; }
@media (min-width: 1000px) {
  .hero > .campaign-promo--compact,
  .cat-hero > .campaign-promo--compact,
  .pdp-gallery-hero > .campaign-promo--compact {
    position: absolute;
    inset: 24px 24px auto auto;
    max-width: calc(100% - 48px);
    margin: 0;
  }
}
/* Below desktop, style 4 becomes the wide card below the hero search. */
@media (max-width: 999px) {
  .hero:has(> .campaign-promo--compact),
  .cat-hero:has(> .campaign-promo--compact),
  .pdp-gallery-hero:has(> .campaign-promo--compact) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    overflow: visible;
    padding-bottom: 0 !important;
    /* Reserve 28px of overlap + 32px of clear space, overriding CMS inline spacing. */
    margin-bottom: 60px !important;
  }
  .hero:has(> .campaign-promo--compact) .hero-content,
  .cat-hero:has(> .campaign-promo--compact) .cat-hero-inner,
  .pdp-gallery-hero:has(> .campaign-promo--compact) .pdp-gallery {
    grid-column: 1;
    grid-row: 1;
  }
  .hero > .campaign-promo--compact,
  .cat-hero > .campaign-promo--compact,
  .pdp-gallery-hero > .campaign-promo--compact {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    position: relative;
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin: 24px 16px -28px;
    padding: 20px 16px;
    gap: 12px;
    border-radius: 20px;
  }
  .hero:has(> .campaign-promo--compact),
  .cat-hero:has(> .campaign-promo--compact) {
    align-content: start;
    row-gap: 0;
  }
  .hero:has(> .campaign-promo--compact) > .hero-content,
  .cat-hero:has(> .campaign-promo--compact) > .cat-hero-inner {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .hero:has(> .campaign-promo--compact) .hero-search,
  .cat-hero:has(> .campaign-promo--compact) .cat-search {
    position: relative;
    inset: auto;
    margin-bottom: 0;
  }
  .hero > .campaign-promo--compact,
  .cat-hero > .campaign-promo--compact { margin-top: 2rem; }
  .cat-hero:has(> .campaign-promo--compact) .hero-slider,
  .cat-hero:has(> .campaign-promo--compact) .cat-hero-bg { inset: 0; }
  .hero:has(> .campaign-promo--compact) .hero-offer {
    position: relative;
    grid-row: 3;
    margin-top: 52px;
  }
  .hero:has(> .campaign-promo--compact) { margin-bottom: 0 !important; }
  .campaign-promo--compact img { width: 30px; height: 30px; align-self: center; }
  .campaign-promo--compact strong { font-size: 18px; }
  .campaign-promo--compact p { font-size: 14px; line-height: 1.5; }
  .campaign-promo--compact a,
  .campaign-promo--compact:not(:has(img:not([hidden]))) a {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    min-height: 46px;
    margin: 4px 0 0;
    padding: 10px 20px;
    font-size: 14px;
  }
}

header ~ .campaign-promo--compact { max-width: calc(100% - 32px); margin: 16px auto; }