/*!
 * Gamstery Phase 2 — additive CSS layer (candidate v1)
 * Covers: GMS-12 (compact home categories), GMS-18 (compact collection categories),
 *         GMS-27 (heading/type consistency), GMS-28 (contrast), GMS-20/21 focus styles.
 * Load AFTER the existing gamstery CSS. Does not edit any existing file.
 * Rollback: remove the single <link> that references this file from Settings > Header Code.
 * Never touches: prices, checkout, payment, variants, quantity logic, cart handlers.
 */

:root{
  --gms2-text:#F7F5FF;
  --gms2-focus:#C4B5FD;
  --gms2-eyebrow:#C4B5FD;       /* >= 4.5:1 on #09090c; replaces #5900FF for small text */
}

/* ------------------------------------------------------------------ */
/* GMS-18 + GMS-12: compact category links (home + collection pages)    */
/* Same .ab-categories component renders on both. Links/hrefs untouched. */
/* ------------------------------------------------------------------ */
.ab-categories .ab-categories-header{margin-bottom:0!important}
.ab-categories .ab-categories-title{margin:0 0 14px!important}
.ab-categories .ab-categories-arrow{display:none!important}
.ab-categories .ab-categories-carousel{padding:0!important}
.ab-categories .ab-categories-track{
  display:flex!important;flex-wrap:wrap!important;gap:10px!important;
  overflow:visible!important;transform:none!important;scroll-snap-type:none!important;
  padding:0!important;margin:0!important;
}
.ab-categories .ab-cat-card[href]{
  display:inline-flex!important;flex-direction:row!important;align-items:center!important;
  flex:0 0 auto!important;width:auto!important;min-width:0!important;height:auto!important;
  min-height:48px!important;padding:6px 16px 6px 6px!important;gap:10px!important;
  border-radius:12px!important;transform:none!important;
}
.ab-categories .ab-cat-card[href]:hover{transform:none!important}
.ab-categories .ab-cat-card[href] .ab-cat-media,
.ab-categories .ab-cat-card[href][href] .ab-cat-media{
  flex:0 0 36px!important;width:36px!important;height:36px!important;aspect-ratio:1/1!important;
  border-radius:8px!important;background:rgba(124,58,237,.14)!important;
}
.ab-categories .ab-cat-card[href] .ab-cat-media img{object-fit:cover!important}
/* Collection pages: the 640x480 category art is unreadable at chip size, so show text-only chips there. */
.collection_container .ab-categories .ab-cat-card[href] .ab-cat-media{display:none!important}
.collection_container .ab-categories .ab-cat-card[href]{padding:6px 18px!important;min-height:44px!important}
.ab-categories .ab-cat-card[href] .ab-cat-copy{position:static!important;inset:auto!important;background:none!important;padding:0!important}
.ab-categories .ab-cat-card[href] .ab-cat-label{font-size:14px!important;font-weight:600!important;white-space:nowrap}
.ab-categories .ab-cat-card[href]:focus-visible{outline:3px solid var(--gms2-focus)!important;outline-offset:3px!important}
@media (max-width:520px){
  .ab-categories .ab-categories-track{gap:8px!important}
  .ab-categories .ab-cat-card[href]{padding-right:12px!important}
}

/* ------------------------------------------------------------------ */
/* GMS-28: Reviews eyebrow. Builder prop descriptioncolor="#5900FF"     */
/* (2.72:1 on #09090c). Scoped to that exact attribute value only.      */
/* ------------------------------------------------------------------ */
div[descriptioncolor="#5900FF" i] > .description{color:var(--gms2-eyebrow)!important}
/* Sample-chat sender label: 4.11:1 -> white on the purple bubble (>= 4.5:1) */
.gms16-message.customer > small{color:#fff!important}

/* ------------------------------------------------------------------ */
/* GMS-27: one section-heading scale for builder-authored sections      */
/* Same values the store already uses for .ab-*-title (Outfit/700).     */
/* ------------------------------------------------------------------ */
.gms-compare-v16 .gms16-top h1,
section.gms-order-guide h2,
div.gms16-support h2,
section:has(.gms-faq-grid) h2{
  font-family:"Outfit","Poppins",sans-serif!important;
  font-weight:700!important;letter-spacing:-.02em!important;color:var(--gms2-text)!important;
}
section.gms-order-guide h2,
div.gms16-support h2,
section:has(.gms-faq-grid) h2{
  font-size:clamp(24px,3.2vw,36px)!important;line-height:1.1!important;
}

/* ------------------------------------------------------------------ */
/* GMS-20/21: visible keyboard focus on drawer and product controls     */
/* (outline only; no layout, no handlers)                               */
/* ------------------------------------------------------------------ */
#eo-mobile-menu a:focus-visible,
#eo-mobile-menu button:focus-visible,
#eo-menu-btn:focus-visible,
.quantity_btn_container button:focus-visible,
.button_variation:focus-visible{
  outline:3px solid var(--gms2-focus)!important;outline-offset:2px!important;
}

@media (prefers-reduced-motion:reduce){
  .ab-categories .ab-cat-card[href]{transition:none!important}
}