/* ============================================================================
   SP PRO-SHOP / TRAINING — COMPONENT SYSTEM
   ----------------------------------------------------------------------------
   Shared, tokenized styles for the four templates (shop archive, gear product,
   course product, training hub). Consumes ONLY the custom properties defined in
   tokens.css (the designer's contract) — NO color is hardcoded here, so a light
   palette renders as correctly as the dark placeholder. The only literals are
   depth shadows (neutral black at low alpha, palette-agnostic).

   SCOPING: every selector is prefixed .sp-proshop (the body class added on
   pro-shop / training surfaces) so these styles never touch the rest of the
   site. The parent theme's real header, footer and nav are used as-is — the
   mockups' standalone chrome is intentionally NOT reproduced.

   FULL-BLEED SECTIONS (hero, alt band, related band) break out of the theme's
   boxed .container with .sp-bleed, then re-box inner content with .sp-wrap.
   ========================================================================== */

/* --- region paint (uses the palette ground/ink) --- */
.sp-proshop #cms-content.site-content { background: var(--bg); color: var(--ink); }

/* Kill the ~180px of near-white space above the full-bleed hero on the pro-shop
   ARCHIVES (shop home + product_cat / product_tag taxonomy archives). ROOT
   CAUSE: spchild_woo_wrapper_start() (inc/woo-wrappers.php) emits its OWN
   <div id="cms-content" class="site-content"> inside the one the parent theme's
   header already outputs — two nested #cms-content. The theme's base
   `#cms-content{padding:90px 0}` (specificity 1,0,0) beats the generic
   `.site-content{padding-top:0}` (0,1,0), so BOTH wrappers keep their 90px TOP
   pad = ~180px above the hero. (The `#cms-content{padding-top:0!important}` reset
   is scoped to `.is-jobboard` / jobboard-tax bodies and does NOT reach these
   archives — verified against production static.css.) This body-scoped selector
   (2 ids + 4 classes) outranks the base rule and zeroes the top pad on both
   nested wrappers; `.sp-proshop` confines it to our reskinned surfaces and it
   also clears the taxonomy archives. The header is in-flow (not fixed), so the
   hero seats flush beneath it. FUTURE STRUCTURAL CLEANUP: stop emitting the
   second #cms-content in spchild_woo_wrapper_start (reuse the parent's) — then
   this CSS bandage, and the twin 90px BOTTOM pads, go away for good. */
#cms-theme.woocommerce.archive.sp-proshop #cms-content.site-content,
#cms-theme.woocommerce-page.archive.sp-proshop #cms-content.site-content { padding-top: 0; }
.sp-proshop #primary.sp-proshop-primary { max-width: var(--maxw); }
.sp-proshop .sp-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.sp-proshop .sp-bleed { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; }
.sp-proshop .sp-altband { background: var(--ground-2); border-top: 1px solid var(--rule); }

/* Gear page ONLY: the "Complete the loadout" upsell band renders on a WHITE
   ground for contrast against the near-black product page (operator: "that
   background should be contrasting the rest of the page in a white
   background"). Re-declaring the light (pal-cool) token set ON THE BAND flips
   every card consumer — surface, ink-strong, accent, rule, plinth, btn-* — to
   light coherently, so a clean white shelf with dark-teal accents and readable
   cards replaces the barely-different --ground-2 near-black. background:#fff
   (specificity 0,2,1) overrides the .sp-altband base ground. The resting card
   shadow lifts the white cards off the white band so they still read. Other
   palettes' altbands (archive/hub) are already light and are untouched. */
body.sp-page-gear .sp-altband {
  --surface:#ffffff; --plinth:#f0f2f2;
  --ink:#2b3138; --ink-strong:#12161a; --muted:#5c6570; --rule:rgba(18,22,26,.12);
  --accent:#036b6b; --btn-bg:#00504e; --btn-fg:#ffffff; --btn-hov:#003b39;
  background: #ffffff;
}
body.sp-page-gear .sp-altband .gc { box-shadow: 0 1px 3px rgba(16,22,26,.09); }
/* Kill the orphan dark strip below the loadout band. The parent theme's
   #cms-content carries 90px BOTTOM padding (its TOP is zeroed by later theme
   rules, its bottom is not) which rendered as a near-black void — a hair off
   the old dark band's colour — between the band and the teal footer CTA
   (operator: "it almost looks like there's a whole separate dark strip added
   under that section ... just remove that whole blank block"). It is padding,
   not a stray element. On gear products the band is the last content, so
   collapse that padding and let the white band seat cleanly against the teal
   CTA. Scoped to sp-page-gear so no other surface's footer rhythm changes. */
body.sp-page-gear #cms-content.site-content { padding-bottom: 0; }

/* --- typography --- *
   TYPE SIZES ARE IN px, NOT rem — DELIBERATE. The parent theme sets
   `html { font-size: 10px }` (bootstrap.min.css, verified on staging), so the
   whole site runs a 10px rem base. The mockups
   (site-drafts/proshop-system-*.html) are standalone documents authored against
   the 16px browser-default root, so their rem values mean rem×16 px. When this
   component system was first written in rem, every size rendered at 62.5% on
   staging — the operator's "everything is TINY". We CANNOT fix that by resetting
   the root (`rem` is always root-relative; raising html to 16px would enlarge the
   entire rest of the site, whose own components are tuned to 10px). So every
   font-size below is the mockup's COMPUTED px (its rem × 16), immune to the 10px
   root. clamp() keeps vw (viewport-based, root-independent). Tradeoff: type no
   longer rem-scales with the user's browser base size — acceptable and contained;
   the real cure would be the theme's 10px root, a site-wide decision above this
   template. Keep new sizes in px here; do not reintroduce rem.
   Base below also re-establishes 16px/400/normal Roboto for any unstyled text
   (the parent forces body{font-size:13px;font-weight:500;Poppins}). */
.sp-proshop .sp-region { font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: normal; line-height: 1.62; }
/* SCOPED TO .sp-region — LOAD-BEARING. This rule must NOT reach headings that
   are on the pro-shop page but belong to the parent theme's chrome (the global
   teal .page-cta-wrap .cta-title, the footer .wg-title/.wg-title2 widget
   titles). Those are h3s outside our region; while this rule was scoped only to
   body.sp-proshop it beat the theme's `h1..h6{font-family:Poppins}` (0,0,1 vs
   0,1,1) and painted them Raleway 800 on pro-shop pages ONLY — the operator's
   "the bottom CTA teal block has different fonts than the rest of the site."
   Confining it to .sp-region lets those parent-theme headings fall back to the
   theme's Poppins, matching every other page. Every heading in our templates is
   inside .sp-region, so nothing we own loses this styling. */
.sp-proshop .sp-region h1, .sp-proshop .sp-region h2, .sp-proshop .sp-region h3 {
  font-family: var(--head); font-weight: 800; line-height: 1.13;
  margin: 0; color: var(--ink-strong); letter-spacing: -.01em;
}
.sp-proshop .sp-region a { color: var(--accent); text-decoration: none; }
.sp-proshop .sp-region img { max-width: 100%; display: block; }
.sp-proshop .eyebrow { font-size: 11.52px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }

/* --- buttons --- */
/* Buttons use the audited --btn-* pair (AAA). Never --primary as a white-on-teal fill. */
.sp-proshop .btn { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 14.4px; letter-spacing: .04em; padding: 15px 22px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); border-radius: 3px; transition: background .2s, transform .2s; cursor: pointer; }
.sp-proshop .btn:hover { background: var(--btn-hov); border-color: var(--btn-hov); transform: translateY(-1px); }
.sp-proshop .btn.block { display: block; width: 100%; text-align: center; }
.sp-proshop .btn.ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.sp-proshop .btn.ghost:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
/* Button LINKS keep the audited --btn-fg. Without this, `.sp-proshop .sp-region a`
   (0,2,1) beats `.btn` (0,2,0) and paints button labels with --accent — invisible
   accent-on-accent on the dark gear buy CTA (#7dd6d6 on #7dd6d6), ~1.3:1 on the
   light course CTAs. (0,4,1) wins on every palette; :not(.ghost) preserves the
   ghost variant's intentional accent-on-transparent text. (review-wave design FAIL 2) */
.sp-proshop .sp-region a.btn:not(.ghost),
.sp-proshop .sp-region a.btn:not(.ghost):hover { color: var(--btn-fg); }
/* Safety net: any stray WooCommerce .button that surfaces inside our region
   (pagination, notices, an unstyled Woo fragment) adopts the system button skin
   instead of Woo's default green — which was colliding on the dark gear ground.
   Specificity .sp-proshop .sp-region a.button (0,3,1) beats Woo's a.button. The
   single-product related block no longer emits Woo buttons (custom card loop),
   so this is defense-in-depth, not the primary fix. */
.sp-proshop .sp-region a.button,
.sp-proshop .sp-region button.button {
  background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg);
  font-family: var(--sans); font-weight: 700; border-radius: 3px; text-transform: none;
}
.sp-proshop .sp-region a.button:hover,
.sp-proshop .sp-region button.button:hover { background: var(--btn-hov); border-color: var(--btn-hov); color: var(--btn-fg); }

/* --- affiliate disclosure (FTC — beside every affiliate CTA) --- */
.sp-proshop .affil-disc { font-size: 12.48px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }

/* --- hero (shop home / training hub); text sits over a photo scrim --- */
.sp-proshop .sp-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.sp-proshop .sp-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* scrim hardcoded dark in every palette (palette lock) — keeps hero text light on light grounds */
.sp-proshop .sp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,11,.95) 0%, rgba(8,10,11,.78) 45%, rgba(8,10,11,.45) 100%); }
.sp-proshop .sp-hero .inner { position: relative; z-index: 2; padding: 76px 0 66px; }
.sp-proshop .sp-hero h1 { font-size: clamp(33.6px, 4.6vw, 51.2px); max-width: 16ch; color: var(--hero-ink); }
.sp-proshop .sp-hero .lede { font-size: 17.92px; color: var(--hero-sub); max-width: 48ch; margin-top: 18px; }
/* Value-prop deck under the shop-home H1 — restores the mockup's hero hook
   ("What the professionals carry…") while the keyword H1 stays "Pro Shop".
   (review-wave UX W4) */
.sp-proshop .sp-hero .hook { font-family: var(--head); font-weight: 800; font-size: clamp(24px, 2.6vw, 33.6px); line-height: 1.15; letter-spacing: -.01em; color: var(--hero-ink); max-width: 22ch; margin-top: 14px; }

/* ---- Option-A palette lock (designer): dark image bands (hero/chero) keep LIGHT
   text in every palette. Critical for the light palettes — the scrim is hardcoded
   dark, so hero eyebrow/text must use the light tokens, not --accent/--ink. ---- */
.sp-proshop .sp-hero h1, .sp-proshop .chero h1 { color: var(--hero-ink); }
.sp-proshop .sp-hero .eyebrow, .sp-proshop .chero .ek { color: var(--lume); }
.sp-proshop .sp-hero .lede, .sp-proshop .chero .prov { color: var(--hero-sub); }
.sp-proshop .chero .prov b { color: #fff; }

/* --- section head --- */
.sp-proshop .sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin-bottom: 30px; }
.sp-proshop .sechead h2 { font-size: 28px; }
.sp-proshop .sechead p { color: var(--muted); margin: 8px 0 0; font-size: 15.36px; }
.sp-proshop .sechead .tag { font-size: 11.2px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

/* --- gear grid (product cards) --- */
.sp-proshop .gcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sp-proshop .gc { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.sp-proshop .gc:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.22); border-color: var(--accent); }
.sp-proshop .gc .ph { height: 158px; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--plinth); }
.sp-proshop .gc .ph img { max-height: 126px; width: auto; object-fit: contain; }
.sp-proshop .gc .b { padding: 15px 15px 17px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sp-proshop .gc .cc { font-size: 10.24px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
.sp-proshop .gc h3 { font-size: 15.36px; line-height: 1.22; }
.sp-proshop .gc .row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; }
.sp-proshop .gc .cp { font-family: var(--head); font-weight: 700; font-size: 16.8px; color: var(--accent); }
.sp-proshop .gc .view { font-size: 10.88px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--btn-fg); background: var(--btn-bg); padding: 7px 11px; border-radius: 3px; }

/* --- course list rows (shop home + hub) --- */
.sp-proshop .courses { display: flex; flex-direction: column; gap: 16px; }
.sp-proshop .course { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--primary); border-radius: var(--radius); padding: 22px 26px; transition: border-color .2s, transform .2s; }
.sp-proshop .course:hover { border-left-color: var(--accent); transform: translateX(2px); }
.sp-proshop .course .meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-proshop .course .pill { font-size: 10.56px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--band-ink); background: var(--band); border-radius: 2px; padding: 5px 9px; }
.sp-proshop .course h3 { font-size: 19.52px; margin-bottom: 6px; }
.sp-proshop .course .desc { color: var(--muted); font-size: 14.72px; max-width: 60ch; }
.sp-proshop .course .rhs { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 150px; }
.sp-proshop .course .price { font-family: var(--head); font-weight: 800; font-size: 24px; color: var(--accent); line-height: 1; }
.sp-proshop .course .price small { display: block; font-family: var(--sans); font-weight: 400; font-size: 10.88px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* --- single gear: buy panel, chips, spec table --- */
.sp-proshop .top { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; padding: 8px 0 20px; }
.sp-proshop .gallery { position: sticky; top: 96px; }
.sp-proshop .gmain { background: var(--plinth); border-radius: 5px; padding: 36px; display: flex; align-items: center; justify-content: center; min-height: 440px; box-shadow: 0 10px 34px rgba(0,0,0,.22); }
.sp-proshop .gmain img { max-height: 400px; width: auto; object-fit: contain; }
.sp-proshop .thumbs { display: flex; gap: 10px; margin-top: 12px; }
.sp-proshop .thumbs div { width: 74px; height: 74px; background: var(--plinth); border: 1px solid var(--rule); border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 8px; cursor: pointer; }
.sp-proshop .thumbs div.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sp-proshop .thumbs img { max-height: 56px; width: auto; }
.sp-proshop .buy .cat { font-size: 11.52px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.sp-proshop .buy h1 { font-size: clamp(27.2px, 3.2vw, 38.4px); margin-bottom: 14px; line-height: 1.1; }
.sp-proshop .buy .price { font-family: var(--head); font-weight: 800; font-size: 38.4px; color: var(--accent); line-height: 1; margin: 6px 0 4px; }
.sp-proshop .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.sp-proshop .chip { background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 7px 12px; font-size: 12.48px; color: var(--ink); }
.sp-proshop .chip b { color: var(--ink-strong); font-weight: 700; }
.sp-proshop .buy .blurb { font-size: 15.68px; color: var(--ink); margin: 18px 0 0; }
/* gear Field Notes body copy (the_content) — mockup: .detailbody p{font-size:16px}.
   Ported explicitly so it never falls back to the parent's 13px body inheritance. */
.sp-proshop .detailbody p { font-size: 16px; color: var(--ink); margin: 0 0 16px; line-height: 1.62; }
.sp-proshop .trust { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.48px; color: var(--muted); margin-top: 12px; }
.sp-proshop .trust span::before { content: "✓ "; color: var(--accent); }
.sp-proshop .spectable { width: 100%; border-collapse: collapse; font-size: 14.72px; }
.sp-proshop .spectable td { padding: 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink); }
.sp-proshop .spectable td:first-child { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11.84px; font-weight: 700; width: 40%; }
.sp-proshop .h-sec { font-size: 11.84px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.sp-proshop .h-sec::before { content: ""; width: 26px; height: 1px; background: var(--primary); }

/* --- single course: hero, meta strip, credential, accordion, enroll card --- */
.sp-proshop .chero { position: relative; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sp-proshop .chero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.sp-proshop .chero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,11,.96), rgba(8,10,11,.8) 55%, rgba(8,10,11,.5)); }
.sp-proshop .chero .inner { position: relative; z-index: 2; padding: 56px 0 50px; display: grid; grid-template-columns: 1.5fr .9fr; gap: 40px; align-items: end; }
.sp-proshop .chero h1 { font-size: clamp(30.4px, 3.6vw, 43.2px); max-width: 20ch; color: var(--hero-ink); }
.sp-proshop .chero .prov { margin-top: 14px; font-size: 14.72px; color: var(--hero-sub); }
.sp-proshop .chero .prov b { color: var(--hero-ink); }
.sp-proshop .enrol { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--primary); border-radius: 5px; padding: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.sp-proshop .enrol .pl { font-size: 11.52px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.sp-proshop .enrol .price { font-family: var(--head); font-weight: 800; font-size: 33.6px; color: var(--accent); line-height: 1; margin: 4px 0 2px; }
.sp-proshop .enrol .sub { font-size: 13.12px; color: var(--muted); margin-bottom: 16px; }
.sp-proshop .enrol .datebox { background: var(--band); border-radius: 4px; padding: 12px 14px; margin-bottom: 14px; }
.sp-proshop .enrol .datebox .dl { font-size: 10.56px; text-transform: uppercase; letter-spacing: .12em; color: var(--band-ink); font-weight: 700; }
.sp-proshop .enrol .datebox .dv { font-family: var(--head); font-weight: 700; font-size: 16.8px; margin-top: 2px; color: var(--band-ink); }
.sp-proshop .enrol .fine { font-size: 12.16px; color: var(--muted); margin-top: 12px; }
.sp-proshop .mstrip { background: var(--ground-2); border-bottom: 1px solid var(--rule); }
.sp-proshop .mstrip .inner { display: flex; flex-wrap: wrap; }
.sp-proshop .mstrip .m { flex: 1; min-width: 160px; padding: 20px 24px; border-right: 1px solid var(--rule); }
.sp-proshop .mstrip .m:last-child { border-right: 0; }
.sp-proshop .mstrip .ml { font-size: 10.56px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.sp-proshop .mstrip .mv { font-family: var(--head); font-weight: 700; font-size: 17.6px; margin-top: 4px; color: var(--ink-strong); }
.sp-proshop .cbody p { font-size: 16.64px; color: var(--ink); margin: 0 0 18px; }
.sp-proshop .marker { font-size: 11.52px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; display: flex; align-items: center; gap: 12px; }
.sp-proshop .marker::before { content: ""; width: 28px; height: 1px; background: var(--primary); }
.sp-proshop .cred { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 4px; padding: 20px 22px; margin: 26px 0; }
.sp-proshop .cred .ct { font-family: var(--head); font-weight: 800; font-size: 17.92px; margin-bottom: 6px; color: var(--ink-strong); }
.sp-proshop .cred p { font-size: 15.04px; margin: 0; color: var(--ink); }
.sp-proshop .acc details { border-bottom: 1px solid var(--rule); }
.sp-proshop .acc summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; font-family: var(--head); font-weight: 700; font-size: 17.28px; color: var(--ink-strong); }
.sp-proshop .acc summary::-webkit-details-marker { display: none; }
.sp-proshop .acc summary .pl { color: var(--accent); font-size: 22.4px; font-weight: 400; line-height: 1; transition: transform .2s; }
.sp-proshop .acc details[open] summary .pl { transform: rotate(45deg); }
.sp-proshop .acc .ac { padding: 0 0 18px; color: var(--ink); font-size: 15.52px; }

/* --- responsive --- */
@media (max-width: 900px) { .sp-proshop .gcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) {
  .sp-proshop .top { grid-template-columns: 1fr; gap: 26px; }
  .sp-proshop .gallery { position: static; }
  .sp-proshop .chero .inner { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
  .sp-proshop .gcards { grid-template-columns: 1fr 1fr; }
  .sp-proshop .course { grid-template-columns: 1fr; gap: 16px; }
  .sp-proshop .course .rhs { text-align: left; align-items: flex-start; }
  .sp-proshop .sechead { flex-direction: column; }
}