/* gear.css V1.5 - 2026-10-05, Nolan (Karl's walk GSH-03). The inline Notify me link, the one-size line, the delivery address sheet. */
/* gear.css V1.4 - 2026-10-05, Nolan (Karl's walk GSH-01/02). The private controls are gone: the head wears the global round back and top-bar icons, search is the standard search row, buttons are .h-btn, choices are the global segment or the styled drop list, sizes are one row. */
/* gear.css V1.3 - 2026-10-05, Harmony. Class namespace is h-gshop: h-gs already belongs to the game sheet in hub.css, and twobodies-scope caught __card and __chips declared twice. */
/* gear.css V1.2 - 2026-10-05, Harmony. Evidence pass: no Sample photo label on thumbnails, the hero keeps its square art beside the words on wide screens, family initials as token ink on panel (axe). */
/* gear.css V1.1 - 2026-10-05, Harmony. Contrast pass: opaque panel behind the heart and gallery arrows, ghost gold pre-order button, page ink on the family initials; the sheet wrapper rule. */
/* gear.css V1.0 - 2026-10-05, Harmony. The member Gear Shop layer: store, product, bag, wishlist, My Gear (Parker's accepted GS-01…36 on the app's own tokens). Tokens only. */
/* ============================================================================
   GEAR SHOP - a full-screen module layer over the app (the Stat Tracker's own
   pattern: both navs under it, every sheet above it). Phone is one column at
   390; tablet and wide keep the same content in the same order inside a wider
   column, driven by a container query on the layer so the Tools card preview
   matches by width.

   NOT ONE COLOUR, RADIUS OR FONT IS INVENTED HERE. Tints are made with opacity
   on a pseudo-element so a theme swap reaches them; status colours are the
   app's semantic tokens (--warn for low stock, --info for special order,
   --gold for drops, --purple for Pro, --danger for cancellations).
   ========================================================================== */

/* --- the layer ---------------------------------------------------------- */
.h-gshop {
  position: absolute; inset: 0; z-index: 46; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); container: h365gs / inline-size;
  opacity: 0; transform: translateY(8px); transition: opacity var(--t-fast), transform var(--t-fast);
}
.h-gshop.is-open { opacity: 1; transform: none; }
.h-gshop__head {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--sp-4) 12px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.h-gshop__head .h-topicons { flex: none; gap: 16px; padding-right: 4px; }
.h-gshop__badge--am { background: var(--warn); color: var(--on-warn); }   /* a child's request is amber, like every needs-attention mark */
.h-gshop__tt { flex: 1; min-width: 0; }
.h-gshop__tt small {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; color: var(--green);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-gshop__tt h2 {
  margin: 2px 0 0; font-family: var(--font-head); font-weight: 400; font-size: 18px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-gshop__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.h-gshop__col { width: 100%; max-width: 100%; margin: 0 auto; padding: var(--sp-4) var(--sp-4) calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.h-gshop__foot {
  flex: none; display: flex; gap: var(--sp-3); align-items: center;
  padding: 12px var(--sp-4) calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--panel);
}
.h-gshop__foot .h-btn { flex: 1; }
.h-gshop__fp { flex: none; min-width: 0; }
.h-gshop__fp small { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
.h-gshop__ic { flex: none; }

/* --- buttons, labels, notes ------------------------------------------------ */
/* Buttons are the global `.h-btn` family (green only for the one main action). In a row they keep their words. */
.h-gshop .h-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); white-space: nowrap; text-decoration: none; }
.h-gshop__linkb { background: none; border: 0; padding: 0; color: var(--green); font: 800 inherit var(--font-body); font-size: inherit; cursor: pointer; }
.h-gshop__lab {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: 24px 2px 10px;
  font: 400 13px var(--font-head); letter-spacing: .14em; text-transform: uppercase;
}
.h-gshop__lab small { font: 700 12px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--faint); }
.h-gshop__note { font-size: 12.5px; color: var(--faint); line-height: 1.5; margin: 8px 0 0; }
.h-gshop__note--end { margin-top: 22px; }
.h-gshop__note--top { margin: 0 0 12px; }
.h-gshop__row { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 2px; border-bottom: 1px solid var(--hairline); font-size: 13.5px; }
.h-gshop__l { flex: 1; min-width: 0; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.h-gshop__tag { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-pill); background: var(--panel2); color: var(--muted); }
.h-gshop__kv { font-size: 11.5px; color: var(--faint); font-weight: 700; }
.h-gshop__kv--pro { color: var(--purple); }

/* --- empty and state cards ------------------------------------------------- */
.h-gshop__empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2);
  padding: 30px 12px; border-radius: var(--r-2xl); border: 1px dashed var(--line2); margin-top: 14px; color: var(--muted);
}
.h-gshop__empty b { font-size: 15px; color: var(--ink); }
.h-gshop__empty p { margin: 0; font-size: 13px; color: var(--muted); max-width: 32ch; line-height: 1.5; }
.h-gshop__empty--bag { margin-top: 30px; }
.h-gshop__state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 28px 18px; border-radius: var(--r-2xl); border: 1px solid var(--line); background: var(--panel2); margin-top: 20px; color: var(--muted);
}
.h-gshop__state b { display: block; margin: 10px 0 6px; font: 400 22px/1.05 var(--font-head); text-transform: uppercase; color: var(--ink); }
.h-gshop__state p { margin: 0 auto 14px; max-width: 34ch; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.h-gshop__caution { color: var(--muted); }
.h-gshop__sk { border-radius: var(--r-xl); background: var(--panel2); position: relative; overflow: hidden; }
.h-gshop__sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--elev), transparent); animation: h365gs-shm 1.2s linear infinite; }
.h-gshop__sk--bar { height: 46px; }
.h-gshop__sk--seg { height: 42px; margin-top: 10px; }
.h-gshop__sk--drop { height: 132px; margin-top: 14px; border-radius: var(--r-2xl); }
.h-gshop__sk--card { aspect-ratio: 3 / 4; }
.h-gshop__grid--sk { margin-top: 14px; }
@keyframes h365gs-shm { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --- search and filters ----------------------------------------------------- */
.h-gshop .h-searchrow { margin: 0 0 10px; }   /* the standard search row (`.h-search`): its own glow, no inner outline */
.h-gshop__clr { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.h-gshop__clr[hidden] { display: none; }
/* Every choice is the global segment `.h-seg` (fits the row, never scrolls) or the styled drop list. */
.h-gshop__choice { margin: 6px 0 0; }
.h-gshop__choice.h-seg button { min-width: 0; min-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-gshop__choice .h-drop { width: 100%; }

/* --- art and badges ----------------------------------------------------------- */
.h-gshop__ph { position: relative; display: block; overflow: hidden; background: var(--panel2); }
.h-gshop__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-gshop__sample { position: absolute; right: 6px; bottom: 5px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.h-gshop__li .h-gshop__sample, .h-gshop__thumbs .h-gshop__sample, .h-gshop__kits .h-gshop__sample { display: none; }
.h-gshop__bdg { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 800; background: var(--panel); border: 1px solid var(--line2); }
.h-gshop__bdg--ft { color: var(--warn); border-color: var(--warn); }
.h-gshop__bdg--nw { color: var(--green); border-color: var(--green); }
.h-gshop__bdg--dr { color: var(--gold); border-color: var(--gold); }
.h-gshop__hrt { position: absolute; top: 6px; right: 6px; z-index: 2; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--ink); cursor: pointer; padding: 0; }
.h-gshop__hrt.is-on { color: var(--danger); }
.h-gshop__hrt--gal { top: 12px; right: 12px; }
.h-gshop__stk { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: var(--faint); }
.h-gshop__stk--low { color: var(--warn); }
.h-gshop__stk--sp { color: var(--info); }
.h-gshop__stk--out { color: var(--muted); }
.h-gshop__stk--pre { color: var(--gold); }
.h-gshop__stk--q { color: var(--ink); }
.h-gshop__price { font: 400 20px/1 var(--font-head); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.h-gshop__price--big { font-size: 26px; }
.h-gshop__price--line { font-size: 17px; }
.h-gshop__was { font: 600 12px var(--font-body); color: var(--faint); text-decoration: line-through; margin-left: 6px; }
.h-gshop__prop { display: inline-block; margin-left: 6px; font: 800 10.5px var(--font-body); color: var(--purple); letter-spacing: .04em; }

/* --- store ------------------------------------------------------------------------ */
.h-gshop__drop {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; text-align: left;
  margin-top: 14px; padding: 10px; border-radius: var(--r-2xl); border: 1px solid var(--gold); background: var(--panel2); color: inherit; cursor: pointer; overflow: hidden;
}
.h-gshop__drop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, var(--gold), transparent 60%); opacity: .12; pointer-events: none; }
.h-gshop__drop .h-gshop__ph { height: 112px; border-radius: var(--r-xl); }
.h-gshop__drop small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--gold); }
.h-gshop__drop strong { display: block; font: 400 22px/1 var(--font-head); text-transform: uppercase; margin: 4px 0; }
.h-gshop__drop p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.h-gshop__cd { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.h-gshop__cd span { padding: 4px 7px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--gold); font-size: 11px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.h-gshop__cd .h-gshop__cd--pro { color: var(--purple); border-color: var(--purple); }
.h-gshop__hero { display: block; width: 100%; text-align: left; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--hairline); background: var(--panel2); margin-top: 12px; padding: 0; color: inherit; cursor: pointer; }
.h-gshop__hero .h-gshop__ph { height: 220px; }
.h-gshop__hero .h-gshop__tx { padding: 12px 14px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.h-gshop__hero h3 { margin: 0; font: 400 26px/1 var(--font-head); text-transform: uppercase; }
.h-gshop__hero p { margin: 4px 0 0; font-size: 12.5px; color: var(--faint); }
.h-gshop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.h-gshop__card { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--panel2); border: 1px solid var(--hairline); }
.h-gshop__go { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.h-gshop__card .h-gshop__ph { aspect-ratio: 1 / 1; }
.h-gshop__card .h-gshop__tx { display: block; padding: 10px 10px 12px; }
.h-gshop__card strong { display: block; font-size: 13.5px; line-height: 1.25; min-height: 34px; }
.h-gshop__pr { display: block; margin-top: 4px; }
.h-gshop__st { display: block; margin-top: 6px; }

/* --- product ------------------------------------------------------------------------ */
.h-gshop__pg { display: block; }
.h-gshop__gal { position: relative; height: 330px; margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) 0; }
.h-gshop__gal .h-gshop__ph { position: absolute; inset: 0; }
.h-gshop__dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 4px; }
.h-gshop__dots button { width: 24px; height: 24px; border: 0; padding: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.h-gshop__dots button i { display: block; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--muted); }
.h-gshop__dots button.is-on i { background: var(--ink); }
.h-gshop__gnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--panel); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.h-gshop__gnav--l { left: 10px; }
.h-gshop__gnav--r { right: 10px; }
.h-gshop__pt { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-top: 14px; }
.h-gshop__pt h1 { margin: 0; font: 400 28px/1 var(--font-head); text-transform: uppercase; min-width: 0; }
.h-gshop__pp { text-align: right; flex: none; }
.h-gshop__pp small { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; }
.h-gshop__desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 8px 0 0; }
.h-gshop__fl { font-size: 11.5px; font-weight: 800; color: var(--faint); margin: 12px 2px 2px; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.h-gshop__fl button { background: none; border: 0; padding: 0 2px; color: var(--green); font: 800 12px var(--font-body); min-height: 40px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* One row of sizes, always (no second row): up to six share the width; more become the drop list (gear-render). */
.h-gshop__sz { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.h-gshop__sz button {
  position: relative; min-height: 48px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel);
  font: 800 14px var(--font-body); color: var(--ink); padding: 0 2px; cursor: pointer; overflow: hidden;
}
.h-gshop__sz button.is-on { border-color: var(--green); color: var(--green); }
.h-gshop__sz button.is-on::before { content: ""; position: absolute; inset: 0; background: var(--green); opacity: .1; pointer-events: none; }
.h-gshop__sz button.is-out { color: var(--faint); text-decoration: line-through; background: transparent; border-style: dashed; }
.h-gshop__sz button.is-out.is-on { border-color: var(--line2); color: var(--muted); }
.h-gshop__sz button.is-out.is-on::before { opacity: 0; }
.h-gshop__sz button.is-sp::after, .h-gshop__sz button.is-lo::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--info); }
.h-gshop__sz button.is-lo::after { background: var(--warn); }
.h-gshop__key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11px; color: var(--faint); }
.h-gshop__key span { display: inline-flex; align-items: center; gap: 5px; }
.h-gshop__key i { width: 6px; height: 6px; border-radius: var(--r-pill); display: inline-block; }
.h-gshop__key--lo { background: var(--warn); }
.h-gshop__key--sp { background: var(--info); }
.h-gshop__mem { font-size: 12px; color: var(--green); font-weight: 800; margin-top: 8px; display: flex; gap: 5px; align-items: center; }
.h-gshop__av { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: 12px; padding: 11px 12px; border-radius: var(--r-xl); background: var(--panel2); border: 1px solid var(--hairline); font-size: 13px; line-height: 1.45; color: var(--ink); }
.h-gshop__av--top { margin-top: 0; }
.h-gshop__avi { flex: none; margin-top: 1px; color: var(--muted); }
.h-gshop__av--ok .h-gshop__avi { color: var(--green); }
.h-gshop__av--sp .h-gshop__avi { color: var(--info); }
.h-gshop__av--low .h-gshop__avi { color: var(--warn); }
.h-gshop__av--low { border-color: var(--warn); }
.h-gshop__av--out .h-gshop__avi { color: var(--faint); }
.h-gshop__av--pre { border-color: var(--gold); }
.h-gshop__av--pre .h-gshop__avi { color: var(--gold); }
.h-gshop__av--kid { border-color: var(--warn); }
.h-gshop__av--kid .h-gshop__avi { color: var(--warn); }
.h-gshop__stp { display: inline-flex; align-items: center; height: 42px; border-radius: var(--r-lg); border: 1px solid var(--line2); overflow: hidden; flex: none; }
.h-gshop__stp button { width: 42px; height: 100%; display: grid; place-items: center; background: var(--panel2); border: 0; color: var(--ink); cursor: pointer; padding: 0; }
.h-gshop__stp button:disabled { opacity: .35; cursor: default; }
.h-gshop__stp b { min-width: 34px; text-align: center; font: 400 18px var(--font-head); }
.h-gshop__stp--sm { height: 36px; }
.h-gshop__stp--sm button { width: 36px; }
.h-gshop__stp--sm b { min-width: 26px; font-size: 15px; }
.h-gshop__kit { border-radius: var(--r-xl); border: 1px solid var(--hairline); background: var(--panel2); padding: 12px; }
.h-gshop__kits { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.h-gshop__kits .h-gshop__ph { width: 64px; height: 64px; border-radius: var(--r-lg); flex: none; }
.h-gshop__kplus { color: var(--faint); display: grid; }
.h-gshop__kt { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin: 10px 0; font-size: 12.5px; color: var(--muted); }
.h-gshop__kt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.h-gshop__ret { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 14px; }
.h-gshop__ret b { color: var(--ink); }

/* --- bag -------------------------------------------------------------------------- */
.h-gshop__li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.h-gshop__li .h-gshop__ph { width: 64px; height: 64px; border-radius: var(--r-lg); }
.h-gshop__li strong { display: block; font-size: 13.5px; }
.h-gshop__li small { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.h-gshop__li--gone strong { color: var(--muted); }
.h-gshop__est { margin-top: 5px; }
.h-gshop__ctl { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.h-gshop__rm { background: none; border: 0; color: var(--faint); font: 700 12.5px var(--font-body); padding: 0; min-height: 32px; cursor: pointer; }
.h-gshop__lp { text-align: right; }
.h-gshop__lp small { color: var(--purple); display: block; font-size: 11px; margin-top: 3px; }
.h-gshop__li.is-chg { position: relative; border-radius: var(--r-xl); padding: 12px 8px; border: 1px solid var(--warn); overflow: hidden; }
.h-gshop__li.is-chg::before { content: ""; position: absolute; inset: 0; background: var(--warn); opacity: .06; pointer-events: none; }
.h-gshop__warn { margin-top: 8px; font-size: 12.5px; color: var(--warn); font-weight: 700; line-height: 1.4; }
.h-gshop__bagcols { display: block; }
.h-gshop__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.h-gshop__dl button {
  position: relative; padding: 10px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel); text-align: left;
  color: var(--muted); font: 400 12.5px/1.35 var(--font-body); min-height: 70px; cursor: pointer; overflow: hidden;
}
.h-gshop__dl button b { display: flex; gap: 6px; align-items: center; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }
.h-gshop__dl button.is-on { border-color: var(--green); }
.h-gshop__dl button.is-on::before { content: ""; position: absolute; inset: 0; background: var(--green); opacity: .08; pointer-events: none; }
.h-gshop__ad { display: flex; gap: var(--sp-3); align-items: center; padding: 12px; border-radius: var(--r-xl); background: var(--panel2); border: 1px solid var(--hairline); margin-top: 10px; font-size: 13px; color: var(--muted); }
.h-gshop__adg { flex: 1; min-width: 0; }
.h-gshop__adg b { color: var(--ink); }
.h-gshop__adg small { display: block; color: var(--faint); font-size: 12px; }
.h-gshop__ship { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-xl); border: 1px solid var(--hairline); background: var(--panel2); font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.h-gshop__ship b { color: var(--ink); }
.h-gshop__tot .h-gshop__row { padding: 9px 2px; }
.h-gshop__tot b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.h-gshop__row--pro b { color: var(--purple); }
.h-gshop__row--total { border: 0; }
.h-gshop__row--total .h-gshop__l { color: var(--ink); font-weight: 800; }
.h-gshop__big { font: 400 24px var(--font-head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.h-gshop__free { color: var(--green); }

/* --- My Gear ----------------------------------------------------------------------- */
.h-gshop__gearcols { display: block; }
.h-gshop__or { border-radius: var(--r-xl); background: var(--panel2); border: 1px solid var(--hairline); padding: 12px; margin-bottom: 12px; }
.h-gshop__or.is-need { border-color: var(--warn); }
.h-gshop__otog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; min-height: 44px; cursor: pointer; }
.h-gshop__oh { grid-column: 1; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.h-gshop__oh strong { font-size: 14px; }
.h-gshop__oh small { font-size: 12px; color: var(--faint); }
.h-gshop__chev { grid-column: 2; grid-row: 1 / span 3; color: var(--faint); transition: transform var(--t-fast); }
.h-gshop__otog[aria-expanded="true"] .h-gshop__chev { transform: rotate(90deg); }
.h-gshop__osum { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.h-gshop__more { font-size: 11.5px; font-weight: 700; color: var(--faint); }
.h-gshop__thumbs { display: flex; gap: 6px; flex: none; }
.h-gshop__thumbs .h-gshop__ph { width: 44px; height: 44px; border-radius: var(--r-md); }
.h-gshop__thumbs--o { grid-column: 1; margin-top: 8px; }
.h-gshop__thumbs--o .h-gshop__ph { width: 36px; height: 36px; border-radius: var(--r-sm); }
.h-gshop__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.h-gshop__st2 { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); overflow: hidden; color: var(--muted); }
.h-gshop__st2::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .12; pointer-events: none; }
.h-gshop__st2--ok { color: var(--green); }
.h-gshop__st2--sh { color: var(--info); }
.h-gshop__st2--pr { color: var(--muted); }
.h-gshop__st2--pay { color: var(--warn); }
.h-gshop__st2--pre { color: var(--gold); }
.h-gshop__st2--cx { color: var(--danger); }
.h-gshop__shp { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.h-gshop__shh { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.h-gshop__its { display: flex; gap: var(--sp-2); margin-top: 8px; align-items: center; }
.h-gshop__its small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.h-gshop__its small b { color: var(--ink); }
.h-gshop__tl { display: flex; gap: 3px; margin-top: 10px; }
.h-gshop__tl span { flex: 1; height: 4px; border-radius: var(--r-sm); background: var(--line); }
.h-gshop__tl span.is-on { background: var(--green); }
.h-gshop__tl span.is-sp { background: var(--info); }
.h-gshop__tll { display: flex; justify-content: space-between; gap: 4px; font-size: 10.5px; color: var(--faint); margin-top: 4px; }
.h-gshop__acts { display: flex; gap: var(--sp-2); margin-top: 10px; flex-wrap: wrap; }
.h-gshop__dly { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--gold); font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.h-gshop__done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 10px 10px; }
.h-gshop__ok { position: relative; width: 72px; height: 72px; border-radius: var(--r-pill); color: var(--green); display: grid; place-items: center; overflow: hidden; }
.h-gshop__ok::before { content: ""; position: absolute; inset: 0; background: var(--green); opacity: .14; }
.h-gshop__ok .h-gshop__ic { position: relative; }
.h-gshop__done h3 { margin: 14px 0 6px; font: 400 28px var(--font-head); text-transform: uppercase; }
.h-gshop__done p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 36ch; line-height: 1.5; }
.h-gshop__saved { margin-top: 10px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--purple); color: var(--purple); font-size: 12.5px; font-weight: 800; }

/* --- sheets (inside ui.js's sheet) --------------------------------------------------- */
.h-gshop__sheetwrap .h-gshop__lab { margin: 12px 2px 8px; }
.h-gshop__sheet { display: block; }
.h-gshop__sheet p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.h-gshop__szwrap { overflow-x: auto; }
.h-gshop__szt { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.h-gshop__szt th, .h-gshop__szt td { padding: 8px 6px; border-bottom: 1px solid var(--hairline); text-align: center; }
.h-gshop__szt th { color: var(--faint); font-size: 11px; }
.h-gshop__comp { display: flex; gap: var(--sp-2); align-items: center; }
.h-gshop__comp .h-input { flex: 1; min-width: 0; }

/* --- wider columns: tablet and laptop, same content in the same order ------------------ */
@container h365gs (min-width: 640px) {
  .h-gshop.h-gshop .h-gshop__col { max-width: 1120px; }
  .h-gshop.h-gshop .h-gshop__foot { padding-inline: max(var(--sp-4), calc((100% - 1120px) / 2)); }
  .h-gshop.h-gshop .h-gshop__foot .h-btn { flex: 0 1 420px; margin-left: auto; }
  .h-gshop.h-gshop .h-gshop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h-gshop.h-gshop .h-gshop__pg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .h-gshop.h-gshop .h-gshop__gal { margin: 0; height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-2xl); overflow: hidden; }
  .h-gshop.h-gshop .h-gshop__bagcols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .h-gshop.h-gshop .h-gshop__hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; }
  .h-gshop.h-gshop .h-gshop__hero .h-gshop__ph { height: 300px; }
  .h-gshop.h-gshop .h-gshop__hero .h-gshop__tx { padding: 24px; }
}
@container h365gs (min-width: 1000px) {
  .h-gshop.h-gshop.h-gshop .h-gshop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .h-gshop.h-gshop.h-gshop .h-gshop__gearcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .h-gshop { transition: none; transform: none; }
  .h-gshop__sk::after { animation: none; }
  .h-gshop__chev { transition: none; }
}

/* GSH-03 (Karl, 2026-10-05): Notify me inside the sold-out tip is a slim green link at the text's own size. */
.h-gshop__lnk { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--green); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.h-gshop__lnk:disabled { color: var(--muted); text-decoration: none; cursor: default; }
/* A one-size item says its size. */
.h-gshop__onesz { margin: 12px 0; font-size: 13.5px; color: var(--muted); }
.h-gshop__onesz b { color: var(--ink); }
/* The delivery address sheet: only the address. */
.h-gshop__adsheet { display: flex; flex-direction: column; gap: 10px; }
.h-gshop__adsheet p { margin: 0; }
.h-gshop__af { display: flex; flex-direction: column; gap: 5px; }
.h-gshop__af > span { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.h-gshop__af .h-input { width: 100%; }
.h-gshop__aerr { font-size: 12.5px; color: var(--danger); }
.h-gshop__adacc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); text-align: left; cursor: pointer; }
.h-gshop__adacc > span:last-child { flex: 1; min-width: 0; }
.h-gshop__adacc b { display: block; font-size: 13.5px; }
.h-gshop__adacc small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }