.promotions-page[hidden] { display: none !important; }
body.promotions-open .main > :not(.promotions-page):not(#siteFooter) { display: none !important; }

.promotions-page {
  --promo-accent: #a5e54d;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 0 36px;
}
.promotions-heading { margin: 7px 0 17px; }
.promotions-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #a8d876; font-size: 10px; font-weight: 800; letter-spacing: 1.15px; text-transform: uppercase; }
.promotions-eyebrow:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #91d34d; box-shadow: 0 0 9px #9bdd5270; }
.promotions-heading h1 { margin: 7px 0 4px; color: #f3f5f6; font-size: clamp(23px, 3.2vw, 31px); line-height: 1.08; letter-spacing: -.55px; }
.promotions-heading p { margin: 0; color: #a7afba; font-size: 12px; line-height: 1.5; }

.promo-category-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0 0 15px; }
.promo-category-tab { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 11px; border: 1px solid #394555; border-radius: 11px; background: linear-gradient(135deg, #2b3543, #252e3b); color: #c7cdd5; font-size: 10px; font-weight: 800; letter-spacing: .2px; transition: border-color .18s, background .18s, color .18s, transform .18s; }
.promo-category-tab:hover { transform: translateY(-1px); border-color: #678452; color: #f5f7f8; }
.promo-category-tab.is-active { border-color: #80c749; background: linear-gradient(135deg, #3a5539, #304434); box-shadow: inset 0 1px #ffffff14; color: #e9f8d8; }
.promo-category-icon { font-size: 15px; line-height: 1; }
.promo-page-list { display: grid; gap: 12px; }

.promo-showcase-card { position: relative; min-height: 238px; display: flex; align-items: center; overflow: hidden; isolation: isolate; border: 1px solid #4d6650; border-radius: 14px; background: linear-gradient(110deg, #17251f, #263a32 57%, #202b38); box-shadow: 0 5px 16px #0d121b70; }
.promo-showcase-card:before { position: absolute; z-index: -1; inset: 5px; border: 1px solid #a3e15a38; border-radius: 10px; content: ""; pointer-events: none; }
.promo-showcase-art { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 79% 45%, #9bdb4b40 0 13%, transparent 14% 21%, #9bdb4b20 22% 23%, transparent 24%), radial-gradient(circle at 88% 22%, #f9d66f40 0 3px, transparent 4px), linear-gradient(120deg, #172920 0%, #254735 52%, #293543 100%); }
.promo-showcase-art:after { position: absolute; z-index: 1; inset: 0; content: ""; background: linear-gradient(90deg, #141c1beF 0%, #18221fe0 39%, #19232bbb 67%, #18212d62 100%), linear-gradient(0deg, #1119248a 0%, transparent 62%); }
.promo-showcase-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-showcase-orb { position: absolute; z-index: 0; top: 50%; right: 10%; width: 170px; aspect-ratio: 1; border: 1px solid #c4f28738; border-radius: 50%; background: radial-gradient(circle at 42% 37%, #fff4c7 0 9%, #f0c55e 10% 13%, #b97b2a 14% 20%, #162435 21% 37%, #415a3d 38% 39%, #1c3729 40% 60%, transparent 61%); box-shadow: 0 0 36px #9ddc4c25; transform: translateY(-50%); }
.promo-showcase-flare { position: absolute; z-index: 0; top: 14%; right: 8%; width: 220px; height: 72%; border: 1px solid #b6e96535; border-left-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-18deg); }
.promo-showcase-symbol { position: absolute; z-index: 2; top: 50%; right: calc(10% + 52px); display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #d8f6a450; border-radius: 18px; background: linear-gradient(145deg, #91c94c, #477d35); box-shadow: 0 8px 20px #06130c66; color: #17301c; font-size: 36px; font-weight: 900; transform: translateY(-50%) rotate(-7deg); }
.promo-showcase-content { position: relative; z-index: 1; width: min(650px, 76%); padding: 22px clamp(19px, 4vw, 42px); }
.promo-showcase-badge { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 9px; border: 1px solid #afea7255; border-radius: 99px; background: #658e42; color: #f2f8e9; font-size: 9px; font-weight: 850; letter-spacing: .2px; }
.promo-showcase-content h2 { max-width: 520px; margin: 9px 0 3px; color: #fff; font-size: clamp(23px, 3.1vw, 32px); font-weight: 900; line-height: 1.05; letter-spacing: -.7px; text-shadow: 0 2px 12px #0008; }
.promo-showcase-offer { display: block; margin: 6px 0; color: #a5e54d; font-size: clamp(18px, 2.6vw, 25px); font-weight: 900; line-height: 1.08; letter-spacing: -.45px; text-shadow: 0 2px 10px #0008; }
.promo-showcase-content p { max-width: 420px; margin: 6px 0 12px; color: #d3dbd6; font-size: 11px; line-height: 1.42; }
.promo-showcase-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; padding: 0 12px 0 15px; border: 1px solid #80c749; border-radius: 9px; background: linear-gradient(135deg, #70b83d, #4b9235); box-shadow: 0 3px 10px #0a130b55, inset 0 1px #ffffff35; color: #fff; font-size: 10px; font-weight: 850; text-decoration: none; transition: transform .18s, filter .18s, box-shadow .18s; }
.promo-showcase-action:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 5px 13px #0a130b66, inset 0 1px #ffffff40; }
.promo-showcase-action:focus-visible, .promo-category-tab:focus-visible, .promo-detail-dialog button:focus-visible, .promo-detail-dialog a:focus-visible { outline: 2px solid #c4f28a; outline-offset: 3px; }
.promo-showcase-action-arrow { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #ffffff20; font-size: 15px; line-height: 1; transition: transform .18s, background .18s; }
.promo-showcase-action:hover .promo-showcase-action-arrow { transform: translateX(2px); background: #ffffff30; }

.promo-theme-teal { border-color: #3e7875; background: linear-gradient(110deg, #14262a, #234341 57%, #202d3b); }
.promo-theme-teal .promo-showcase-art { background: radial-gradient(circle at 83% 48%, #51d9ba50 0 11%, transparent 12% 20%, #51d9ba24 21% 22%, transparent 23%), linear-gradient(120deg, #142b31, #22524f 52%, #293847); }
.promo-theme-teal .promo-showcase-badge { border-color: #5ce4cf55; background: #34776e; color: #e6fff9; }
.promo-theme-teal .promo-showcase-offer { color: #75d9c1; }
.promo-theme-teal .promo-showcase-symbol { border-color: #62e2d155; background: linear-gradient(145deg, #66cdbb, #237f78); }
.promo-theme-violet { border-color: #62527e; background: linear-gradient(110deg, #211d30, #383049 57%, #202d3b); }
.promo-theme-violet .promo-showcase-art { background: radial-gradient(ellipse at 83% 45%, #c173ff4d 0 12%, transparent 13% 22%, #b777fb26 23% 24%, transparent 25%), linear-gradient(120deg, #211d30, #463650 54%, #293847); }
.promo-theme-violet .promo-showcase-badge { border-color: #d4a5ff55; background: #765895; color: #faf4ff; }
.promo-theme-violet .promo-showcase-offer { color: #d0a5ee; }
.promo-theme-violet .promo-showcase-symbol { border-color: #d5a6ff5b; background: linear-gradient(145deg, #bd8de1, #684c94); color: #26153f; }
.promo-theme-gold { border-color: #776543; background: linear-gradient(110deg, #29251f, #494033 57%, #202d3b); }
.promo-theme-gold .promo-showcase-art { background: radial-gradient(ellipse at 83% 45%, #f1c4584d 0 12%, transparent 13% 22%, #f1c45824 23% 24%, transparent 25%), linear-gradient(120deg, #2a241e, #62502f 54%, #293847); }
.promo-theme-gold .promo-showcase-badge { border-color: #ffe2915e; background: #95753a; color: #fff9e9; }
.promo-theme-gold .promo-showcase-offer { color: #e7c76d; }
.promo-theme-gold .promo-showcase-symbol { border-color: #ffe59a60; background: linear-gradient(145deg, #e8cf83, #a47732); color: #503614; }

.promo-page-empty { padding: 30px 18px; border: 1px dashed #465466; border-radius: 12px; color: #aab3bf; text-align: center; }
.promo-page-empty[hidden] { display: none !important; }

/* The campaign details open as a compact, focused dialog instead of navigating away. */
.promo-detail-dialog { width: min(540px, calc(100vw - 28px)); max-width: none; max-height: min(86dvh, 720px); padding: 0; overflow: auto; border: 1px solid #465466; border-radius: 16px; background: #252d3b; color: #f3f5f6; box-shadow: 0 22px 70px #05080dc9; }
.promo-detail-dialog::backdrop { background: #080d16c9; backdrop-filter: blur(5px); }
.promo-detail-art { position: relative; height: clamp(150px, 34vw, 215px); overflow: hidden; background: linear-gradient(120deg, #1b3327, #394c37 55%, #253244); }
.promo-detail-art:after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, #17202cba, transparent 75%); pointer-events: none; }
.promo-detail-art img { width: 100%; height: 100%; object-fit: cover; }
.promo-theme-teal .promo-detail-art { background: linear-gradient(120deg, #173238, #28605b 55%, #253244); }
.promo-theme-violet .promo-detail-art { background: linear-gradient(120deg, #242039, #59416a 55%, #253244); }
.promo-theme-gold .promo-detail-art { background: linear-gradient(120deg, #332a20, #765f34 55%, #253244); }
.promo-detail-art .promo-showcase-orb { width: 170px; right: 17%; }
.promo-detail-art .promo-showcase-symbol { right: calc(17% + 48px); width: 58px; height: 58px; font-size: 33px; }
.promo-detail-close { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffff38; border-radius: 50%; background: #151d29c9; color: #fff; font-size: 21px; }
.promo-detail-body { padding: 20px 22px 22px; }
.promo-detail-body h2 { margin: 10px 0 5px; font-size: clamp(21px, 5vw, 27px); line-height: 1.12; letter-spacing: -.45px; }
.promo-detail-body strong { display: block; margin: 7px 0; color: #a5e54d; font-size: 20px; }
.promo-detail-body p { margin: 9px 0 18px; color: #b7c0cb; font-size: 13px; line-height: 1.55; }
.promo-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 14px; border-top: 1px solid #374252; }
.promo-detail-back { min-height: 38px; padding: 0 14px; border: 1px solid #465466; border-radius: 9px; background: #2d3544; color: #d5dae0; font-size: 11px; font-weight: 750; }
.promo-detail-join { min-height: 38px; padding: 0 15px; border: 1px solid #80c749; border-radius: 9px; background: linear-gradient(135deg, #70b83d, #4b9235); color: #fff; font-size: 11px; font-weight: 850; text-decoration: none; }

@media (max-width: 680px) {
  .promotions-page { padding: 7px 0 26px; }
  .promotions-heading { margin: 4px 2px 12px; }
  .promotions-eyebrow { font-size: 9px; letter-spacing: .85px; }
  .promotions-heading h1 { margin: 6px 0 3px; font-size: 22px; }
  .promotions-heading p { max-width: 320px; font-size: 10px; }
  .promo-category-tabs { grid-template-columns: repeat(4, minmax(68px, 1fr)); gap: 6px; margin: 0 -10px 12px; padding: 1px 10px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .promo-category-tabs::-webkit-scrollbar { display: none; }
  .promo-category-tab { min-height: 39px; flex-direction: row; gap: 5px; padding: 6px 7px; border-radius: 9px; font-size: 8px; letter-spacing: 0; white-space: nowrap; scroll-snap-align: start; }
  .promo-category-icon { font-size: 13px; }
  .promo-page-list { gap: 10px; }
  .promo-showcase-card { min-height: 214px; border-radius: 12px; }
  .promo-showcase-card:before { inset: 4px; border-radius: 9px; }
  .promo-showcase-art:after { background: linear-gradient(90deg, #141c1bf2 0%, #18221fe3 43%, #19232bcc 72%, #18212d72 100%), linear-gradient(0deg, #11192488 0%, transparent 62%); }
  .promo-showcase-orb { right: -8%; width: 126px; opacity: .78; }
  .promo-showcase-flare { right: -15%; width: 170px; }
  .promo-showcase-symbol { right: 7%; width: 46px; height: 46px; border-radius: 14px; font-size: 27px; }
  .promo-showcase-content { width: 91%; padding: 15px 13px; }
  .promo-showcase-badge { min-height: 19px; padding: 2px 7px; font-size: 8px; }
  .promo-showcase-content h2 { max-width: 255px; margin: 7px 0 3px; font-size: clamp(19px, 5.7vw, 24px); letter-spacing: -.45px; }
  .promo-showcase-offer { max-width: 235px; margin: 5px 0; font-size: clamp(16px, 4.8vw, 21px); letter-spacing: -.25px; }
  .promo-showcase-content p { max-width: 225px; margin: 5px 0 9px; font-size: 9px; line-height: 1.35; }
  .promo-showcase-action { min-height: 32px; gap: 8px; padding: 0 9px 0 12px; border-radius: 8px; font-size: 9px; }
  .promo-showcase-action-arrow { width: 19px; height: 19px; font-size: 14px; }
  .promo-detail-body { padding: 17px 16px 16px; }
  .promo-detail-body p { margin-bottom: 15px; font-size: 12px; }
  .promo-detail-actions { gap: 7px; }
  .promo-detail-back, .promo-detail-join { min-height: 36px; padding: 0 11px; font-size: 10px; }
}
@media (max-width: 370px) {
  .promo-category-tabs { grid-template-columns: repeat(4, 70px); }
  .promo-showcase-card { min-height: 205px; }
  .promo-showcase-content { width: 94%; padding: 13px 11px; }
  .promo-showcase-content h2 { font-size: 19px; }
  .promo-showcase-content p { max-width: 195px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-category-tab, .promo-showcase-action, .promo-showcase-action-arrow { transition: none; }
}