/*
  Best Shaker Cabinets: component styles.

  Rules here exist ONLY for things theme.json cannot express. Everything reads
  from the token custom properties theme.json generates, so changing a colour or
  a size means editing theme.json, never this file.

  Token reference:
    --wp--preset--color--{base|surface|sunk|ink|muted|line|accent|accent-soft|in-stock|lead-time}
    --wp--preset--color--finish-{pure-white|proper-gray|marine-blue|ideal-gray|rustic-hickory}
    --wp--preset--font-family--{display|body|spec}
    --wp--preset--font-size--{x-small|small|medium|large|x-large|xx-large|display}
    --wp--preset--spacing--{20|30|40|50|60|70}
    --wp--custom--radius--{sm|md|lg}
*/

/* ---------------------------------------------------------------
   Spec data: SKUs, dimensions, anything read off a spec sheet.
   Tabular figures so columns of numbers line up.
   --------------------------------------------------------------- */
.bsc-spec {
  font-family: var(--wp--preset--font-family--spec);
  font-size: var(--wp--preset--font-size--x-small);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--muted);
  letter-spacing: 0.01em;
}

.bsc-price {
  font-family: var(--wp--preset--font-family--display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------
   Eyebrow label above a heading.
   --------------------------------------------------------------- */
.bsc-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------
   Availability pills. The in-stock story is the whole competitive
   position, so it gets a form of its own and not just words.
   --------------------------------------------------------------- */
.bsc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  line-height: 1;
  padding: 0.45em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--line);
}

.bsc-pill::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.bsc-pill--in-stock { color: var(--wp--preset--color--in-stock); background: color-mix(in srgb, var(--wp--preset--color--in-stock) 10%, transparent); }
.bsc-pill--lead     { color: var(--wp--preset--color--lead-time); background: color-mix(in srgb, var(--wp--preset--color--lead-time) 10%, transparent); }
.bsc-pill--accent   { color: var(--wp--preset--color--accent);    background: var(--wp--preset--color--accent-soft); }

/* ---------------------------------------------------------------
   Finish swatches. Five real products, so the grid is sized to
   five and never stretches a lone item across a row.
   --------------------------------------------------------------- */
.bsc-finishes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--wp--preset--spacing--30);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bsc-finish {
  min-width: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}

.bsc-finish__chip {
  display: block;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.bsc-finish__body { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); }
.bsc-finish__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.bsc-finish__note { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }

/* The chips carry the real finish colours. */
.bsc-finish__chip--pure-white     { background: var(--wp--preset--color--finish-pure-white); }
.bsc-finish__chip--proper-gray    { background: var(--wp--preset--color--finish-proper-gray); }
.bsc-finish__chip--marine-blue    { background: var(--wp--preset--color--finish-marine-blue); }
.bsc-finish__chip--ideal-gray     { background: var(--wp--preset--color--finish-ideal-gray); }
.bsc-finish__chip--rustic-hickory { background: var(--wp--preset--color--finish-rustic-hickory); }

/* ---------------------------------------------------------------
   Card. Used sparingly, by role, not on every block.
   --------------------------------------------------------------- */
.bsc-card {
  min-width: 0;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--40);
}

.bsc-card--accent { border-left: 3px solid var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------
   Trade band. Marks the contractor-facing route as a different
   thing from the homeowner route rather than another section.
   --------------------------------------------------------------- */
.bsc-trade-band {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--50);
}

.bsc-trade-band :where(h2, h3) { color: inherit; }
.bsc-trade-band a:not(.wp-element-button) { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------
   NAP block. Google reads this to corroborate the Business Profile,
   so it must stay crawlable text and never become an image.
   --------------------------------------------------------------- */
.bsc-nap {
  font-style: normal;
  line-height: 1.7;
}

.bsc-nap__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; }

/* ---------------------------------------------------------------
   Running text stays readable regardless of container width.
   --------------------------------------------------------------- */
.bsc-measure { max-width: var(--wp--custom--measure); }

/* ---------------------------------------------------------------
   Wide tables scroll inside their own container so the page body
   never scrolls sideways.
   --------------------------------------------------------------- */
.bsc-tablewrap { overflow-x: auto; }
.bsc-tablewrap > table { min-width: 36rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}