.hp-banner{--hp-muted:#555663;box-sizing:border-box;width:min(1164px,calc(100% - 40px));margin:24px auto 32px;font-family:inherit;text-align:left;line-height:1.4}
.hp-banner *,.hp-banner *::before{box-sizing:border-box}
.hp-disclosure{margin:0 0 6px;color:inherit;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.hp-deck{display:grid;gap:8px}
.hp-banner[data-hp-enhanced] .hp-deck{gap:0}
.hp-banner[data-hp-enhanced] .hp-slide{grid-area:1/1}
.hp-slide[data-hp-active="false"]{visibility:hidden;pointer-events:none}
.hp-slide{min-width:0;display:grid;grid-template-columns:minmax(100px,172px) minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2.5vw,28px);padding:clamp(14px,2.4vw,24px);border:1px solid var(--hp-border);border-radius:18px;background:var(--hp-bg);color:#fff;isolation:isolate}
.hp-aisle{--hp-border:#638574;--hp-bg:radial-gradient(ellipse at 0 5%,#304f3c,transparent 70%),#142d24;--hp-action:#deff70;--hp-ink:#192d1c;--hp-accent:#deff70}
.hp-itrip{--hp-border:#6960a3;--hp-bg:radial-gradient(ellipse at 0 10%,#493781,transparent 75%),#201735;--hp-action:#e8e0ff;--hp-ink:#21153d;--hp-accent:#d8caff}
.hp-alt{--hp-border:#575272;--hp-bg:linear-gradient(115deg,#10162d,#261433);--hp-action:#fff;--hp-ink:#261433;--hp-accent:#eadcf3}
.hp-art{width:100%;height:auto;min-width:0;aspect-ratio:3 / 2;border-radius:11px;align-self:center}
.hp-photo{display:block;object-fit:cover}
.hp-pack-art{aspect-ratio:8 / 3;object-fit:contain}
.hp-mark{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px;background:#fff1;border:1px solid #fff3;background-image:radial-gradient(#fff3 1px,transparent 1px);background-size:12px 12px}
.hp-mark img{width:min(39%,62px);height:auto;flex-shrink:0}
.hp-mark span{font-size:clamp(8px,1vw,10px);font-weight:750;line-height:1.3;color:#fff;letter-spacing:.04em}
.hp-copy{min-width:0}
.hp-banner .hp-copy p{margin:4px 0 0;color:#f5f2fa;font-size:14px;line-height:1.4}
.hp-banner .hp-copy .hp-brand{margin:0 0 3px;color:var(--hp-accent);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hp-banner .hp-copy h2{margin:0;color:#fff;font-family:inherit;font-size:clamp(22px,3vw,34px);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.hp-banner .hp-copy .hp-warning{font-size:11px;color:#ded6e7}
.hp-banner .hp-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 13px;border-radius:9px;background:var(--hp-action);color:var(--hp-ink);font-size:13px;font-weight:800;text-align:center;text-decoration:none}
.hp-cta:hover{filter:brightness(.92)}
.hp-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.hp-controls{display:flex;gap:5px;flex-wrap:wrap}
.hp-controls[hidden]{display:none}
.hp-controls button,.hp-footer{appearance:none;border:0;background:none;color:inherit;font:inherit;font-size:12px;font-weight:650;text-decoration:underline;text-underline-offset:3px;min-height:36px;padding:5px 7px;cursor:pointer}
.hp-footer{display:inline-flex;align-items:center;margin-left:auto}
.hp-banner :focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hp-banner .hp-cta:focus-visible{outline-color:#fff}
.hp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp-compact{margin:12px auto 16px}
.hp-compact .hp-slide{grid-template-columns:minmax(65px,105px) minmax(0,1fr) auto;padding:11px 13px;gap:12px}
.hp-compact .hp-mark span{display:none}
.hp-compact .hp-mark img{width:min(62%,43px)}
.hp-banner.hp-compact h2{font-size:21px}
@media(max-width:640px){
  .hp-banner{width:calc(100% - 28px)}
  .hp-banner .hp-slide{grid-template-columns:minmax(68px,110px) minmax(0,1fr);gap:10px;padding:12px;border-radius:13px}
  .hp-banner .hp-cta{grid-column:1/-1}
  .hp-mark span{display:none}
  .hp-mark img{width:min(65%,55px)}
  .hp-banner .hp-copy p{font-size:13px}
}

/* Aisle Relay's single shared placement sits below the main navigation. */
.top-promotion {background:#eeebfb;border-bottom:1px solid #e2dcf3}
.top-promotion .hp-banner {
  width:min(1220px,calc(100% - 72px));margin:0 auto;padding:7px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 11px;align-items:center;
}
.top-promotion .hp-disclosure {grid-column:1/-1;margin:0;font-size:9px;color:#514676;opacity:1}
.top-promotion .hp-deck {min-width:0}
.top-promotion .hp-banner:not([data-hp-enhanced]) .hp-slide:not(:first-child) {display:none}
.top-promotion .hp-banner .hp-slide {grid-template-columns:104px minmax(0,1fr) auto;gap:10px;padding:4px 7px;border-radius:10px}
.top-promotion .hp-art {border-radius:5px;max-height:40px}
.top-promotion .hp-mark {padding:1px;max-width:62px;justify-self:center}
.top-promotion .hp-mark img {max-width:27px}
.top-promotion .hp-copy .hp-brand {margin:0;font-size:9px}
.top-promotion .hp-copy h2 {font-size:16px}
.top-promotion .hp-copy p:not(.hp-brand) {display:none}
.top-promotion .hp-copy p.hp-warning {display:block;margin:2px 0 0;font-size:9px}
.top-promotion .hp-banner .hp-cta {grid-column:auto;min-height:34px;padding:4px 9px;font-size:11px;gap:4px}
.top-promotion .hp-tools {color:#443768}
.top-promotion .hp-controls {gap:1px}
.top-promotion .hp-controls button {font-size:10px;padding:3px 5px}
@media(max-width:900px) {.top-promotion .hp-banner {width:calc(100% - 44px)}}
@media(max-width:620px) {
  .top-promotion .hp-banner {width:calc(100% - 32px);grid-template-columns:minmax(0,1fr) auto;gap:1px 6px}
  .top-promotion .hp-deck {grid-row:2;grid-column:1/-1}
  .top-promotion .hp-disclosure {grid-column:1;grid-row:1}
  .top-promotion .hp-tools {grid-column:2;grid-row:1;justify-self:end}
  .top-promotion .hp-controls button {min-height:28px;padding:0 4px}
  .top-promotion .hp-banner .hp-slide {grid-template-columns:76px minmax(0,1fr) auto;gap:6px}
  .top-promotion .hp-copy h2 {font-size:13px}
  .top-promotion .hp-copy p.hp-warning {font-size:8px}
  .top-promotion .hp-banner .hp-cta {max-width:91px;min-height:36px;font-size:9px;padding:4px 5px}
}
