/* Galaxyboxx feature pages (15 October 2026): Rip n Ship (event page; Comic Con 2025 retired 20 October), GB Kidz (the Kidz family),
   Mighty Jaxx (a hub with feature points and the figures), All TCG (the game picker) and the maintenance holding page.
   Built from the shared pieces: the page banner and buttons (base.css), the hub's sections and WhatsApp band
   (hub.css) and the listings' cards (listing.css). Markup: theme/inc/feature-pages.php. */

.gb-feature{--gb-soft:#CBD5E1;--gb-display:var(--wp--preset--font-family--display)}

/* Every section holds its content to the shop's measure, inside the page gutter, one step (48px) below the one
   before it. The first section sits under the banner's own margin; the page keeps its room above the footer. */
.gb-fsec{
  box-sizing:border-box;width:100%;max-width:calc(var(--gb-measure) + 2 * var(--gb-gutter));margin-inline:auto;padding:0 var(--gb-gutter);
}
.gb-feature > * + .gb-fsec{padding-top:48px}
/* a hub page (Mighty Jaxx) has no room of its own above the footer: the WhatsApp band ends it, one step down */
.gb-feature > .gb-fsec:has(+ .gb-hub-alerts){padding-bottom:64px}

.gb-fhead{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.gb-fhead h2{font-family:var(--gb-display);font-size:30px;line-height:38px;font-weight:700;letter-spacing:-.005em;color:var(--wp--preset--color--text)}
.gb-fhead__lede{max-width:72ch;font-size:16px;line-height:24px;color:var(--gb-soft)}
.gb-feature .gb-kicker{font-family:var(--wp--preset--font-family--body);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.14em;gap:10px}
.gb-feature .gb-kicker::before{width:28px}
.gb-feature .gb-button{border:0;cursor:pointer}
.gb-feature .gb-button--ghost{border:1px solid rgba(255,255,255,.24)}
.gb-feature .gb-button svg{flex:none}

/* ---------- How it works: numbered steps ---------- */
.gb-how__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:none}
.gb-how__step{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--wp--preset--color--surface);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium)}
.gb-how__num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--wp--preset--color--cyan);border-radius:50%;font-family:var(--gb-display);font-size:18px;font-weight:700;color:var(--wp--preset--color--cyan)}
.gb-how__title{font-family:var(--gb-display);font-size:20px;line-height:26px;font-weight:700;color:var(--wp--preset--color--text)}
.gb-how__text{font-size:15px;line-height:23px;color:var(--gb-soft)}

/* ---------- Feature points (Mighty Jaxx: why collect) ---------- */
.gb-points__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.gb-points__item{display:flex;flex-direction:column;gap:8px;padding:20px;border-top:2px solid var(--wp--preset--color--cyan);background:var(--wp--preset--color--surface);border-radius:0 0 var(--wp--custom--radius--medium) var(--wp--custom--radius--medium)}
.gb-points__item:nth-child(2){border-top-color:var(--wp--preset--color--gold)}
.gb-points__item:nth-child(3){border-top-color:#B266FF}
.gb-points__item:nth-child(4){border-top-color:#FF7A40}
.gb-points__title{font-family:var(--gb-display);font-size:17px;line-height:23px;font-weight:700;color:var(--wp--preset--color--text)}
.gb-points__text{font-size:14px;line-height:21px;color:var(--gb-soft)}

/* ---------- Product cards: the listings' grid, inside the section's own gutter ---------- */
.gb-fcards .gb-lbody{max-width:none;padding-inline:0}
/* products are photographed square; a card's picture is a square (single cards keep the listings' card shape) */
.gb-fcards .gb-results.is-grid .gb-item:not(.gb-item--card) .gb-item__photo{aspect-ratio:1}
.gb-fcards .gb-results.is-grid .gb-item:not(.gb-item--card) .gb-item__img{padding:0}
/* five across: "In stock" is left to the button (as on phones), so a long subscription price has the row */
@media (min-width:1101px){
  .gb-fcards--5 .gb-results.is-grid .gb-items{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .gb-fcards--5 .gb-results.is-grid .gb-item__stock.is-in{display:none}
}
/* A row of cards that must read alike (the Mystery Boxxes): every name takes two lines' room, so the line under it,
   the price and the button sit at the same height on every card, whatever the name's length */
.gb-fcards--same .gb-results.is-grid .gb-item__name{min-height:44px;align-items:flex-start}

/* ---------- Event status panel ---------- */
.gb-event__panel{display:grid;grid-template-columns:minmax(0,1fr);gap:32px 56px;align-items:center;padding:40px;background:var(--wp--preset--color--panel);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium)}
.gb-event__panel.has-picture{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
.gb-event__words{display:flex;flex-direction:column;gap:12px;min-width:0}
.gb-event__words h2{font-family:var(--gb-display);font-size:36px;line-height:42px;font-weight:700;letter-spacing:-.01em;color:var(--wp--preset--color--text);text-wrap:balance}
.gb-event__words p:not(.gb-kicker){max-width:64ch;font-size:16px;line-height:25px;color:var(--gb-soft)}
.gb-event__words p strong{color:var(--wp--preset--color--text)}
.gb-event__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.gb-event__media{display:flex;align-items:center;justify-content:center}
.gb-event .gb-event__img{display:block;width:100%;max-width:360px;height:auto;max-height:340px;object-fit:contain}

/* ---------- GB Kidz: the four Boxxes side by side ---------- */
.gb-kidz__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gb-kidz__card, .gb-kidz__card > article{display:flex;flex-direction:column;min-width:0}
.gb-kidz__card > article{flex:1;background:var(--wp--preset--color--surface);border:1px solid var(--wp--custom--line);border-top:3px solid var(--wp--preset--color--cyan);border-radius:var(--wp--custom--radius--medium);overflow:hidden}
.gb-kidz__card--2 > article{border-top-color:#6EE7B7}
.gb-kidz__card--3 > article{border-top-color:var(--wp--preset--color--gold)}
.gb-kidz__card--4 > article{border-top-color:#FF7A40}
.gb-kidz__photo{display:flex;align-items:center;justify-content:center;aspect-ratio:1;margin:12px 12px 0;background:#FFFFFF;border-radius:6px;overflow:hidden}
.gb-kidz .gb-kidz__img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;padding:6px;box-sizing:border-box}
.gb-kidz__card.is-out .gb-kidz__img{opacity:.6}
.gb-kidz__body{display:flex;flex:1;flex-direction:column;gap:10px;padding:16px 16px 18px}
.gb-kidz__label{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.gb-kidz__name{font-family:var(--gb-display);font-size:22px;line-height:28px;font-weight:700}
.gb-kidz__name a{color:var(--wp--preset--color--text);text-decoration:none}
.gb-kidz__name a:hover{color:var(--wp--preset--color--cyan-hi)}
.gb-kidz__price{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--gb-display);font-size:19px;line-height:1.3;font-weight:600;color:var(--wp--preset--color--cyan)}
.gb-kidz__price.is-out{color:var(--wp--preset--color--muted)}
.gb-kidz__text{font-size:14px;line-height:21px;color:var(--gb-soft)}
.gb-kidz__sizes{display:grid;gap:0;margin:2px 0 0;border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--small)}
.gb-kidz__size{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-size:14px;line-height:20px}
.gb-kidz__size + .gb-kidz__size{border-top:1px solid var(--wp--custom--line)}
.gb-kidz__size dt{font-weight:600;color:var(--wp--preset--color--text)}
.gb-kidz__size dd{margin:0;font-weight:600;color:var(--gb-soft);font-variant-numeric:tabular-nums}
.gb-kidz__ask{padding:12px;background:var(--wp--preset--color--panel);border-radius:var(--wp--custom--radius--small);font-size:14px;line-height:21px;color:var(--gb-soft)}
.gb-kidz__ask-title{margin-bottom:2px !important;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FF7A40}
.gb-kidz__go{margin-top:auto;width:100%;min-height:44px}

/* ---------- All TCG: the game picker ---------- */
.gb-games__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gb-game{display:flex;flex-direction:column;gap:6px;min-width:0}
.gb-game__name{margin:0;font-size:inherit}
.gb-game__tile{
  position:relative;display:flex;align-items:flex-end;height:180px;overflow:hidden;
  background:var(--wp--preset--color--well);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium);
  color:var(--wp--preset--color--text);text-decoration:none;transition:border-color .2s var(--wp--custom--ease);
}
.gb-game__tile:hover{border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--text)}
.gb-game__tile:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:2px}
.gb-game .gb-game__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.7;transition:transform .4s var(--wp--custom--ease)}
.gb-game__tile:hover .gb-game__bg{transform:scale(1.04)}
.gb-game .gb-game__logo{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:auto;max-width:70%;height:64px;object-fit:contain}
.gb-game--star-wars .gb-game__logo{top:6px;height:120px}
/* a game with no picture: the drawn galaxy backdrop the banners use */
.gb-game.is-plain .gb-game__tile{
  background:
    radial-gradient(1.5px 1.5px at 22% 30%, rgba(94,235,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 22%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 58%, rgba(178,102,255,.85) 50%, transparent 51%),
    radial-gradient(70% 120% at 85% 0%, rgba(139,0,255,.32) 0%, transparent 62%),
    linear-gradient(120deg, #14151C 0%, #181922 55%, #1B1530 100%);
}
.gb-game__words{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:12px}
.gb-game__title{padding:6px 10px;border-radius:var(--wp--custom--radius--small);background:rgba(15,16,21,.92);font-family:var(--gb-display);font-size:18px;line-height:1.2;font-weight:700}
.gb-game__count{padding:2px 10px;border-radius:var(--wp--custom--radius--small);background:rgba(15,16,21,.92);font-size:13px;line-height:20px;font-weight:600;color:#6EE7B7}
.gb-game__links li + li{border-top:1px solid var(--wp--custom--line)}
.gb-game__link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:var(--gb-soft);font-size:15px;font-weight:600;text-decoration:none}
.gb-game__link:hover{color:var(--wp--preset--color--cyan-hi)}
.gb-game__link svg{flex:none;color:var(--wp--preset--color--muted)}
.gb-game__fact{flex:none;font-size:13px;font-weight:500;color:var(--wp--preset--color--muted);font-variant-numeric:tabular-nums}
/* Other TCG: the whole row, with a shelf of its products' pictures beside its links (25 October 2026) */
.gb-game.is-wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);grid-template-rows:auto 1fr;gap:6px 20px;align-items:start}
.gb-game.is-wide .gb-game__name{grid-column:1;grid-row:1}
.gb-game.is-wide .gb-game__links{grid-column:1;grid-row:2}
.gb-game__shelf{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.gb-game__shelf-item{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:6px;background:#FFFFFF;border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--small)}
.gb-game__shelf-item:hover{border-color:var(--wp--preset--color--cyan)}
.gb-game__shelf-item:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:2px}
.gb-game .gb-game__shelf-img{display:block;width:100%;height:100%;object-fit:contain}

/* ---------- Maintenance holding page ---------- */
.wp-site-blocks main:has(.gb-hold){padding-block:0}
.gb-hold{
  display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 72px);min-height:calc(100dvh - 72px);padding:56px var(--gb-gutter);
  background:
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 71%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 18%, rgba(94,235,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 62%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 34%, rgba(178,102,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 77%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(50% 60% at 50% 30%, rgba(0,229,255,.12) 0%, transparent 64%),
    linear-gradient(180deg, #14151C 0%, #0F1015 100%);
}
.gb-hold.gb-hold{margin-block:0}
.gb-hold__inner{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:560px;margin:0 auto;text-align:center}
.gb-hold :is(h1, p){margin:0}
.gb-hold__logo{display:block;width:112px;height:112px;margin:0 auto}
.gb-hold h1{font-family:var(--wp--preset--font-family--display);font-size:clamp(28px,5vw,44px);line-height:1.15;font-weight:700;letter-spacing:-.015em;text-wrap:balance;color:var(--wp--preset--color--text)}
.gb-hold__lede{max-width:44ch;font-size:17px;line-height:1.6;color:var(--gb-soft,#CBD5E1)}
.gb-hold__count{display:flex;justify-content:center;gap:10px}
.gb-hold__unit{min-width:96px;padding:16px 12px;background:var(--wp--preset--color--surface);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium)}
.gb-hold__num{display:block;font-family:var(--wp--preset--font-family--display);font-size:clamp(30px,5vw,42px);line-height:1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--wp--preset--color--text)}
.gb-hold__lbl{display:block;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.gb-hold__when{font-size:15px;color:var(--wp--preset--color--muted)}
.gb-hold__when b{color:var(--wp--preset--color--text)}
.gb-hold__when span{display:block;margin-top:4px;font-size:13px}
.gb-hold__done{display:none;font-size:17px;line-height:1.6;color:var(--wp--preset--color--text)}
.gb-hold__done a{color:var(--wp--preset--color--cyan-hi);text-decoration:underline;text-underline-offset:.18em}
/* once the time has passed: the countdown and "back shortly" go, "We're back" shows */
.gb-hold.is-open :is(.gb-hold__count, .gb-hold__when, .gb-hold__lede){display:none}
.gb-hold.is-open .gb-hold__done{display:block}

/* ---------- Tablets ---------- */
@media (max-width:1100px){
  .gb-kidz__list, .gb-games__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gb-event__panel.has-picture{grid-template-columns:minmax(0,1fr) minmax(0,280px)}
}

/* ---------- Phones ---------- */
@media (max-width:781px){
  .gb-feature > * + .gb-fsec{padding-top:32px}
  .gb-feature > .gb-fsec:has(+ .gb-hub-alerts){padding-bottom:40px}
  .gb-fhead{margin-bottom:16px}
  .gb-fhead h2{font-size:24px;line-height:30px}
  .gb-fhead__lede{font-size:15px;line-height:22px}

  .gb-how__steps{grid-template-columns:1fr;gap:10px}
  .gb-how__step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px}
  .gb-how__num{grid-row:span 2}
  .gb-how__title{font-size:17px;line-height:23px;align-self:center}
  .gb-how__text{font-size:14px;line-height:21px}

  .gb-points__list{grid-template-columns:1fr;gap:10px}
  .gb-points__item{padding:14px 16px}

  .gb-event__panel, .gb-event__panel.has-picture{grid-template-columns:1fr;padding:20px}
  .gb-event__media{order:-1}
  .gb-event .gb-event__img{max-width:220px;max-height:200px}
  .gb-event__words h2{font-size:26px;line-height:32px}
  .gb-event__words p:not(.gb-kicker){font-size:15px;line-height:23px}
  .gb-event__actions{flex-direction:column}
  .gb-event__actions .gb-button{width:100%}

  .gb-kidz__list{grid-template-columns:1fr;gap:12px}
  .gb-kidz__card > article{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:0}
  .gb-kidz__photo{grid-column:1;grid-row:1 / span 3;align-self:start;width:92px;height:92px;aspect-ratio:auto;margin:14px 0 0 12px}
  .gb-kidz__body{padding:14px 14px 16px;gap:8px}
  .gb-kidz__name{font-size:20px;line-height:26px}
  .gb-kidz__price{font-size:17px}
  .gb-kidz__text, .gb-kidz__sizes, .gb-kidz__ask, .gb-kidz__go{grid-column:1 / -1}
  .gb-kidz__body{display:contents}
  .gb-kidz__body > :is(.gb-kidz__label, .gb-kidz__name, .gb-kidz__price){grid-column:2;margin-inline:14px !important}
  .gb-kidz__body > .gb-kidz__label{margin-top:16px !important}
  .gb-kidz__body > :is(.gb-kidz__text, .gb-kidz__sizes, .gb-kidz__ask, .gb-kidz__go){margin:10px 14px 0 !important;width:auto}
  .gb-kidz__body > .gb-kidz__go{margin-bottom:16px !important}

  .gb-games__grid{grid-template-columns:1fr;gap:16px}
  .gb-game.is-wide{grid-template-columns:1fr}
  .gb-game.is-wide :is(.gb-game__name, .gb-game__links, .gb-game__shelf){grid-column:1;grid-row:auto}
  .gb-game__shelf{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .gb-game__shelf li:nth-child(n+9){display:none}
  .gb-game__tile{height:140px}
  .gb-game .gb-game__logo{height:52px;top:16px}
  .gb-game--star-wars .gb-game__logo{top:4px;height:88px}

  .gb-hold{min-height:calc(100dvh - 140px);padding-block:40px}
  .gb-hold__unit{min-width:0;flex:1 1 0;padding:14px 8px}
  .gb-hold__logo{width:88px;height:88px}
}