/* =====================================================================
   SKS PAGES (product .sks-pdp / category .sks-plp) — BigCommerce-only overrides.
   Rule 6 (docs/sks-pdp/00-PLAN.md): the copied Shopify CSS files are never
   edited. This file counters what Cornerstone/Citadel does differently from
   the Shopify theme (Dawn) at the base level, so the copied CSS renders on
   the same foundation. Every rule names what it counters; values come from
   the computed-style diff in docs/sks-pdp/compare/<date>/report.md.
   Element-level rules use :where() so they only beat Citadel's element
   resets (same specificity, later in the document) and never a class rule
   from the copied CSS.
   ===================================================================== */

/* Cornerstone wraps the page block in .body > .container (max-width 1280px,
   side padding). The Shopify sections are full-bleed (hero, stats bar,
   tiles), so the container is neutralised for this template — same rule the
   ported category template uses. */
.body > .container:has(.sks-pdp, .sks-plp) { padding-left: 0; padding-right: 0; max-width: none; }
.body:has(.sks-pdp, .sks-plp) { margin-top: 0 !important; padding-top: 0 !important; }

/* Dawn body: font Assistant, 15px (<750px) / 16px, line-height 1.8,
   color rgba(18,18,18,.75). Cornerstone body: Karla 14px, line-height 1.5,
   #333. Measured in docs/sks-pdp/compare (e.g. .sks-prod-wrap 16px/24.8px
   vs 14px/21.7px at 1280; .sks-coll-tiles__wrap Assistant vs Karla).
   Inherited by everything the copied CSS does not set explicitly. */
.sks-pdp, .sks-plp {
  /* Dawn :root variables the copied CSS references (live values) */
  --font-body-family: Assistant, sans-serif;
  --font-heading-family: Assistant, sans-serif;
  --font-body-scale: 1.0;
  --font-heading-scale: 1.0;
  --color-foreground: 18,18,18;
  --color-background: 255,255,255;
  font-family: Assistant, sans-serif;
  font-size: 15px;
  /* Dawn body: calc(1 + 0.8 / var(--font-body-scale)) = 1.8 (measured 28.8px @16px) */
  line-height: 1.8;
  color: rgba(18, 18, 18, 0.75);
}
@media screen and (min-width: 750px) {
  .sks-pdp, .sks-plp { font-size: 16px; }
}

/* Citadel: button/input/select/textarea { font: inherit; color: inherit;
   line-height: inherit; text-transform … }. Dawn leaves the browser defaults
   (Arial 400, line-height normal, black) and the copied CSS was written
   against those. */
:where(.sks-pdp, .sks-plp) button,
:where(.sks-pdp, .sks-plp) input,
:where(.sks-pdp, .sks-plp) select,
:where(.sks-pdp, .sks-plp) textarea {
  font-family: Arial, sans-serif;
  font-size: 13.3333px;   /* browser default for form controls (measured on Shopify) */
  font-weight: 400;
  line-height: normal;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0;
}
:where(.sks-pdp, .sks-plp) button { color: #000; }

/* Citadel: p { margin: 0 0 1.5rem }. Dawn keeps the browser default p
   margin (1em 0) — measured 14px/15px top+bottom on Shopify vs 0/21px on BC. */
:where(.sks-pdp, .sks-plp) p { margin: 1em 0; }

/* Dawn ships `div:empty { display: none }` (theme-wide). The copied markup
   relies on it — e.g. the empty .sks-div-line separator is hidden on Shopify. */
:where(.sks-pdp, .sks-plp) div:empty { display: none; }

/* Citadel's `img { max-width:100%; height:auto }` matches Dawn — nothing to counter. */

/* Dawn base.css headings (h1–h5): line-height calc(1 + .3/max(1,scale)) = 1.3,
   letter-spacing calc(scale * .06rem) = 0.6px at Dawn's 10px root, word-break,
   heading font/colour vars. Citadel leaves headings at line-height 1.2 / Karla.
   Measured on the collection page: h2.sks-guides__heading line-height 39.6px
   (inherited 1.8 from the body emulation above) vs 28.6px on Shopify.
   Sizes: Dawn h1 3rem/4rem, h2 2rem/2.4rem, h3 1.7rem/1.8rem, h4 1.5rem,
   h5 1.2rem (÷ 10px root; second value ≥750px). :where() keeps the copied
   class rules in charge. */
:where(.sks-pdp, .sks-plp) h1,
:where(.sks-pdp, .sks-plp) h2,
:where(.sks-pdp, .sks-plp) h3,
:where(.sks-pdp, .sks-plp) h4,
:where(.sks-pdp, .sks-plp) h5 {
  font-family: var(--font-heading-family);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: rgb(18, 18, 18);
  line-height: 1.3;
  word-break: break-word;
}
:where(.sks-pdp, .sks-plp) h1 { font-size: 30px; }
:where(.sks-pdp, .sks-plp) h2 { font-size: 20px; }
:where(.sks-pdp, .sks-plp) h3 { font-size: 17px; }
:where(.sks-pdp, .sks-plp) h4 { font-size: 15px; }
:where(.sks-pdp, .sks-plp) h5 { font-size: 12px; }
@media screen and (min-width: 750px) {
  :where(.sks-pdp, .sks-plp) h1 { font-size: 40px; }
  :where(.sks-pdp, .sks-plp) h2 { font-size: 24px; }
  :where(.sks-pdp, .sks-plp) h3 { font-size: 18px; }
}

/* Dawn base.css utility used by the collection grid's off-screen <h2>
   (`.visually-hidden`, verbatim). Cornerstone has no such class. */
:where(.sks-pdp, .sks-plp) .visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

/* Collection grid filter bar without availability pills (GAPS #23: no
   filters on BigCommerce category pages). The Liquid bar is
   `justify-content: space-between` with the pills on the left, so the
   count + sort block sits on the right; with no pills it would collapse to
   the left. Keep it where the reference shows it. */
.sks-cgrid__filter > .sks-cgrid__right:first-child { margin-left: auto; }
@media screen and (max-width: 749px) {
  .sks-cgrid__filter > .sks-cgrid__right:first-child { margin-left: 0; }
}

/* Citadel (normalize.css): input[type="search"] { box-sizing: content-box }.
   Dawn keeps border-box everywhere, and the copied CSS sizes search inputs
   with width:100% + padding (measured: .sks-itart-prod__search 380px on BC
   vs 300px on Shopify inside a 300px wrap). */
:where(.sks-pdp, .sks-plp) input[type="search"] { box-sizing: border-box; }