/* Masons TV SalesGuide prototype — injected-feature styles.
 * Conforms to Masons' own look: brand blue is var(--e-global-color-primary)
 * (#0F7EC2); the Add buttons reuse Elementor's .elementor-button. No separate
 * accent/lime/badge — the feature should read as native Masons. */

:root {
  --sg-blue: var(--e-global-color-primary, #0F7EC2);
  --sg-amber: #D9880C;   /* the assistant's voice: a deeper, richer shade of the kit secondary (#F2A41E) */
  --sg-line: #e6e6e6; --sg-ink: #333; --sg-muted: #6b6b6b;
  --sg-col-rm: 40px;   /* cart's remove column; the drawer indents by it to align */
}

/* ---------- PDP accessory tabs ----------
 * Same assistant as the basket: the band is this section's header (static — a
 * PDP shouldn't hide its own upsell behind a click) and the tabs sit in the
 * same drawer shell, so both pages share one set of rules. */
.sg-accessory-tabs { width: 100%; margin: 0 auto; border-radius: 8px; overflow: hidden; }
.sg-hidden { display: none !important; }

/* Scoped by the section, not just the modifier: the shared .sg-assist/.sg-setup
 * bases are declared further down the file, so a bare modifier would lose the
 * source-order tie and inherit the basket's cell-bleed margins. */
.sg-accessory-tabs .sg-assist--static {
  width: 100%; margin: 0; cursor: default; padding: 14px 16px; gap: 12px;
  /* Longhands, not the shorthand: Elementor's lazy-load rule blanks
   * background-image on every descendant of a container it hasn't marked
   * loaded, and a shorthand would take the colour down with it. Split this way
   * the wash degrades to a flat tint instead of to nothing. */
  background-color: #f7e3c3;
  background-image: linear-gradient(180deg, #fffbf3 0%, #f7e3c3 100%);
}
.sg-accessory-tabs .sg-assist--static .sg-assist__icon { flex: 0 0 34px; width: 34px; height: 34px; }
.sg-accessory-tabs .sg-assist--static .sg-assist__title {
  margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: 0;
  text-transform: none; font-weight: 700; color: #6b4300;
}
.sg-accessory-tabs .sg-assist--static .sg-assist__sub { font-size: 13px; }
.sg-accessory-tabs .sg-setup--static {
  padding: 16px 16px 4px;
  background-color: #fffcf6;
  background-image: linear-gradient(180deg, #f7e3c3 0%, #fffcf6 38%, #fff 100%);
}
.sg-accessory-tabs .sg-setup--static .sg-setup__tabs { margin-bottom: 20px; }
.sg-accessory-tabs .sg-setup--static .sg-tab { padding: 10px 14px; font-size: 12px; }
/* The page ships a WordPress reset that paints EVERY <button> on hover/focus
 * (`button:hover,button:focus{background:#2271b1;color:#fff}`). It outranks a
 * plain .sg-tab on background, so the tabs must hold their own background in
 * every state or the label disappears into a blue block. */
.sg-accessory-tabs .sg-tab, .sg-setup .sg-tab,
.sg-accessory-tabs .sg-tab:hover, .sg-setup .sg-tab:hover,
.sg-accessory-tabs .sg-tab:focus, .sg-setup .sg-tab:focus,
.sg-accessory-tabs .sg-tab:active, .sg-setup .sg-tab:active {
  background: transparent !important; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; box-shadow: none;
}
.sg-tab {
  appearance: none; cursor: pointer;
  font: inherit; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--sg-muted); padding: 12px 18px; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.sg-accessory-tabs .sg-tab:hover, .sg-setup .sg-tab:hover,
.sg-accessory-tabs .sg-tab:focus, .sg-setup .sg-tab:focus { color: var(--sg-blue); border-bottom-color: #bfe0f4; }
.sg-accessory-tabs .sg-tab[aria-selected="true"],
.sg-setup .sg-tab[aria-selected="true"] { color: var(--sg-blue); border-bottom-color: var(--sg-blue); }
.sg-accessory-tabs .sg-tab:focus-visible,
.sg-setup .sg-tab:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; }
.sg-tab__n { font-size: .8em; color: var(--sg-muted); font-weight: 500; }
.sg-tab[aria-selected="true"] .sg-tab__n { color: var(--sg-blue); }

.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.sg-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--sg-line); border-radius: 6px; padding: 18px; background: #fff;
}
.sg-card--pick { border-color: var(--sg-blue); box-shadow: 0 0 0 1px var(--sg-blue) inset; }
.sg-pick-badge {
  display: inline-block; align-self: flex-start; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--sg-blue);
}
.sg-card__imgwrap { display: flex; align-items: center; justify-content: center; height: 150px; margin-bottom: 14px; }
.sg-card__img { max-width: 100%; max-height: 150px; object-fit: contain; }
.sg-card__img--none { width: 100%; height: 100%; background: #f4f4f4; border-radius: 4px; }
.sg-card__title {
  font-weight: 600; text-transform: uppercase; color: var(--sg-blue);
  font-size: 13px; line-height: 1.35; margin-bottom: 6px; min-height: 2.7em;
}
.sg-card__meta { font-size: 12px; color: var(--sg-muted); margin-bottom: 10px; line-height: 1.3; }
.sg-card__price { font-weight: 700; color: var(--sg-ink); font-size: 16px; margin: auto 0 14px; }

/* Inside the drawer the chrome is the assistant's amber, matching the basket.
 * The Add buttons stay Masons blue — they're commerce actions, not the
 * feature's own voice — as do product titles and prices. */
.sg-setup .sg-card { border-color: #e8d6b8; }
.sg-setup .sg-card--pick { border-color: var(--sg-amber); box-shadow: 0 0 0 1px var(--sg-amber) inset; }
.sg-setup .sg-pick-badge { color: #8a5600; }

/* Add button reuses .elementor-button (native blue). Full width; toggled = inverted. */
.sg-card .sg-add { width: 100%; justify-content: center; text-align: center; }
.sg-add.is-added {
  background: #fff !important; color: var(--sg-blue) !important;
  box-shadow: 0 0 0 2px var(--sg-blue) inset;
}

@media (max-width: 767px) {
  .sg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .sg-tab { padding: 10px 12px; font-size: 13px; }
}

/* ---------- Basket: cart layout + "Complete your TV setup" checklist ---------- */
.sg-cart__grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.sg-cart__main, .sg-cart__totals { background: #fff; border: 1px solid var(--sg-line); border-radius: 6px; padding: 22px; }
/* min-width:0 stops wide cell content (the setup panel's card strip) from
 * blowing the 1fr track out and shoving the totals panel off-screen. */
.sg-cart__main { min-width: 0; }

/* Fixed layout locks the columns to the colgroup, so the cart above the setup
 * panel never shifts when a tab with more cards is selected. */
.sg-cart__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sg-col--rm { width: var(--sg-col-rm); }
.sg-col--num { width: 108px; }
.sg-col--qty { width: 116px; }
.sg-qty { width: 68px; }
.sg-cart__name { overflow-wrap: anywhere; }
.sg-cart__table th {
  text-align: left; font-weight: 600; color: var(--sg-muted); font-size: 13px;
  padding: 0 10px 14px; border-bottom: 1px solid var(--sg-line);
}
.sg-cart__row td { padding: 16px 10px; border-bottom: 1px solid var(--sg-line); vertical-align: middle; font-size: 14px; }
.sg-cart__prodinner { display: flex; align-items: center; gap: 14px; }
.sg-cart__thumb { width: 64px; height: 64px; object-fit: contain; }
.sg-cart__name { color: var(--sg-blue); font-weight: 600; }
.sg-cart__rm { width: 34px; }
.sg-remove {
  background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  color: #d34; padding: 4px 8px; border-radius: 3px;
}
.sg-remove:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 1px; }
.sg-cart__empty { text-align: center; padding: 40px 0; }

.sg-totals__title { color: var(--sg-blue); font-size: 18px; margin: 0 0 18px; }
.sg-totals__row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--sg-line); font-size: 14px; }
.sg-totals__row--total { font-weight: 700; font-size: 16px; border-bottom: 0; }
.sg-totals__amt { transition: color .2s; }
.sg-cart__totals .sg-checkout { width: 100%; justify-content: center; text-align: center; margin-top: 16px; }

.sg-uplift {
  margin-top: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.4;
  color: var(--sg-blue); border: 1px dashed var(--sg-blue); border-radius: 4px; background: #f4fafe;
}

/* ---------- "Complete your TV Setup" — on-demand panel on the TV line ----------
 * The disclosure sits under the product name; opening it hangs the panel off
 * the same line item, indented past the thumbnail so the blue rule reads as a
 * continuation of the TV row rather than a new section. */
.sg-cart__prodbody { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }

/* The add-on assistant. Amber is Masons' own secondary (--e-global-color-
 * secondary #F2A41E, deepened) — it reads as a distinct helper voice against blue
 * commerce chrome without introducing a colour the brand doesn't own. The
 * sparkle + amber badge is the recognisable mark; keep it identical wherever
 * the assistant appears so it becomes learnable across categories. */
/* The assistant IS the bottom edge of the product tile: it bleeds out to the
 * cell's padding on both sides and sits flush on the row's bottom rule, so it
 * reads as part of the tile rather than a button dropped inside it. */
.sg-cart__tile { display: flex; flex-direction: column; gap: 12px; }
.sg-cart__prod.has-assist { padding-bottom: 0; }

/* No hard edge: the amber washes in from nothing at the top, so the band melts
 * into the tile instead of sitting on it as a separate yellow rectangle. Tinting
 * with a translucent amber (rather than an opaque cream) also means it blends
 * with whatever the row's own background is. */
.sg-cart__tile .sg-assist,
.sg-cart__tile .sg-assist:hover,
.sg-cart__tile .sg-assist:focus,
.sg-cart__tile .sg-assist:active {
  background: linear-gradient(180deg,
    rgba(217, 136, 12, 0) 0%, rgba(217, 136, 12, .13) 40%, rgba(217, 136, 12, .26) 100%) !important;
  box-shadow: none; border: 0 !important;
  /* The same reset also forces color:#fff on hover/focus. That is what made the
   * previous plain-text disclosure vanish under the cursor: its label was an
   * unclassed span inheriting the button's colour. Every label here carries its
   * own colour rule, and the button's is pinned too. */
  color: var(--sg-ink) !important;
}
.sg-cart__tile .sg-assist:hover, .sg-cart__tile .sg-assist:focus {
  background: linear-gradient(180deg,
    rgba(217, 136, 12, .06) 0%, rgba(217, 136, 12, .22) 40%, rgba(217, 136, 12, .38) 100%) !important;
}
.sg-assist {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  width: calc(100% + 20px); margin: 0 -10px;   /* bleeds to the cell's padding */
  /* the page's button reset sets nowrap, which would stop the copy wrapping */
  white-space: normal;
  font: inherit; text-align: left; padding: 10px 12px; border-radius: 0;
  transition: background .15s, border-color .15s;
}
.sg-assist:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; }

.sg-assist__icon {
  position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sg-amber); color: #fff;
}
/* A few slow pulses draw the eye on arrival, then it stops nagging. */
.sg-assist[aria-expanded="false"] .sg-assist__icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(217, 136, 12, .65);
  animation: sg-assist-pulse 2.4s ease-out 3;
}
@keyframes sg-assist-pulse {
  60%, 100% { box-shadow: 0 0 0 11px rgba(217, 136, 12, 0); }
}

.sg-assist__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.sg-assist__title { font-size: 13px; font-weight: 700; color: #6b4300; line-height: 1.25; }
.sg-assist__sub { font-size: 11.5px; color: var(--sg-muted); line-height: 1.25; }
/* Rotation lives on the span and the nudge on the svg inside, so the two
 * transforms never fight over the same element. */
.sg-assist__chev {
  flex: 0 0 auto; display: flex; color: var(--sg-amber);
  transition: transform .22s cubic-bezier(.22, .68, .28, 1);
}
.sg-assist[aria-expanded="true"] .sg-assist__chev { transform: rotate(180deg); }
.sg-assist[aria-expanded="false"] .sg-assist__chev svg {
  animation: sg-chev-nudge 1.9s ease-in-out infinite;
}
@keyframes sg-chev-nudge {
  0%, 62%, 100% { transform: translateY(0); }
  76%           { transform: translateY(3.5px); }
  88%           { transform: translateY(1px); }
}

.sg-cart__rm .sg-remove, .sg-cart__rm .sg-remove:hover,
.sg-cart__rm .sg-remove:focus, .sg-cart__rm .sg-remove:active {
  background: transparent !important; border: 0; box-shadow: none;
}

/* The TV row and its panel are one unit, so no rule runs between them. The
 * product cell keeps zero bottom padding either way — the assistant bar is the
 * tile's bottom edge, open or closed. */
.sg-cart__row.has-setup td { border-bottom: 0; }
.sg-cart__row.has-setup td.sg-cart__prod.has-assist { padding-bottom: 0; }
/* The drawer starts exactly where the assistant band starts — the left edge of
 * the product column — so the two read as one object. Padding the cell by the
 * remove column's own width keeps that alignment true if the column changes. */
.sg-setup-row td { padding: 0 0 0 var(--sg-col-rm) !important; border-bottom: 1px solid var(--sg-line); }
.sg-setup {
  /* Continues the assistant's wash at full strength and lets it fade out down
   * the drawer, so the colour hands over to the products rather than boxing them. */
  background: linear-gradient(180deg,
    rgba(217, 136, 12, .26) 0%, rgba(217, 136, 12, .10) 38%, rgba(217, 136, 12, 0) 100%);
  padding: 10px 12px 14px; min-width: 0;   /* the strip scrolls; it never widens the cell */
}
.sg-setup__panels, .sg-setup__panel { min-width: 0; }
/* Slide-out: the clip opens its height from nothing while the panel inside
 * rises from behind the row above and settles — so it grows out from under the
 * product tile instead of popping in below it. No `forwards` on the clip: once
 * the animation ends the height must go back to auto, or tall content clips. */
.sg-setup-clip { overflow: hidden; }
.sg-setup-clip.is-opening { animation: sg-clip-open .58s cubic-bezier(.18, .72, .26, 1); }
.sg-setup-clip.is-opening .sg-setup { animation: sg-panel-rise .58s cubic-bezier(.18, .72, .26, 1); }
.sg-setup-clip.is-closing { animation: sg-clip-close .34s cubic-bezier(.4, 0, .75, .5) forwards; }
.sg-setup-clip.is-closing .sg-setup { animation: sg-panel-sink .34s cubic-bezier(.4, 0, .75, .5) forwards; }

@keyframes sg-clip-open  { from { max-height: 0; }   to { max-height: 640px; } }
@keyframes sg-clip-close { from { max-height: 640px; } to { max-height: 0; } }
@keyframes sg-panel-rise {
  from { opacity: 0; transform: translateY(-22px) scaleY(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes sg-panel-sink {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-18px) scaleY(.92); }
}
.sg-setup { transform-origin: top left; }

@media (prefers-reduced-motion: reduce) {
  .sg-setup-clip.is-opening, .sg-setup-clip.is-opening .sg-setup,
  .sg-setup-clip.is-closing, .sg-setup-clip.is-closing .sg-setup,
  .sg-assist[aria-expanded="false"] .sg-assist__icon::after,
  .sg-assist[aria-expanded="false"] .sg-assist__chev svg { animation: none; }
  .sg-assist__chev, .sg-assist { transition: none; }
}

/* Inside the drawer the chrome speaks amber — it belongs to the assistant, not
 * to the cart. Product titles and prices stay Masons blue: those are the shop's
 * own voice and shouldn't be recoloured by the feature wrapping them. */
.sg-setup__tabs {
  display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(217, 136, 12, .45);
}
.sg-setup .sg-tab { padding: 8px 12px; font-size: 11px; }
.sg-setup .sg-tab:hover, .sg-setup .sg-tab:focus { color: #7d5200; border-bottom-color: rgba(217, 136, 12, .6); }
.sg-setup .sg-tab[aria-selected="true"] { color: #6b4300; border-bottom-color: var(--sg-amber); }
.sg-setup .sg-tab:focus-visible { outline-color: var(--sg-amber); }
.sg-tab__tick { font-size: .9em; color: var(--sg-amber); font-weight: 700; }

.sg-setup .sg-scard { border-color: #e8d6b8; }
.sg-setup .sg-scard--pick { border-color: var(--sg-amber); box-shadow: 0 0 0 1px var(--sg-amber) inset; }
.sg-setup .sg-scard__badge { color: #8a5600; }
.sg-scard__in {
  font-size: 12px; font-weight: 600; color: #7d5200; text-align: center;
  padding: 8px 0; border: 1px dashed rgba(217, 136, 12, .65); border-radius: 3px;
}
.sg-scard--in { opacity: .72; }
.sg-cart__rm .sg-remove:hover, .sg-cart__rm .sg-remove:focus { color: #a02; }

.sg-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  min-width: 0;   /* without this the flex items' intrinsic width wins over the scroll */
}
.sg-strip::-webkit-scrollbar { height: 8px; }
.sg-strip::-webkit-scrollbar-track { background: #f2f2f2; border-radius: 4px; }
.sg-strip::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 4px; }
.sg-strip:hover::-webkit-scrollbar-thumb { background: #b3b3b3; }

.sg-scard {
  flex: 0 0 196px; scroll-snap-align: start; display: flex; flex-direction: column;
  border: 1px solid var(--sg-line); border-radius: 6px; padding: 12px; background: #fff;
}
.sg-scard--pick { border-color: var(--sg-blue); box-shadow: 0 0 0 1px var(--sg-blue) inset; }
.sg-scard__badge {
  min-height: 13px; font-size: 10px; font-weight: 600; line-height: 13px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--sg-blue);
}
.sg-scard__img { height: 84px; display: flex; align-items: center; justify-content: center; margin: 6px 0 10px; }
.sg-scard__img img { max-width: 100%; max-height: 84px; object-fit: contain; }
.sg-scard__title { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--sg-blue); text-transform: uppercase; }
.sg-scard__meta { font-size: 11px; color: var(--sg-muted); margin-top: 4px; line-height: 1.3; }
.sg-scard__price { font-weight: 700; font-size: 14px; color: var(--sg-ink); margin: auto 0 8px; padding-top: 10px; }
.sg-scard .sg-pick-add { width: 100%; justify-content: center; text-align: center; }

/* Order summary modal */
.sg-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.sg-modal__box { background: #fff; border-radius: 6px; padding: 26px; width: 100%; max-width: 460px; }
.sg-modal__title { color: var(--sg-blue); margin: 0 0 16px; font-size: 18px; }
.sg-sum__line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--sg-line); font-size: 14px; }
.sg-sum__total { font-weight: 700; border-bottom: 0; margin-top: 4px; }
.sg-modal__note { font-size: 12px; color: var(--sg-muted); margin: 12px 0 18px; }
.sg-modal__close { width: 100%; justify-content: center; text-align: center; }

@media (max-width: 900px) {
  .sg-cart__grid { grid-template-columns: 1fr; }
  .sg-cart__table thead { display: none; }
  .sg-setup { margin-left: 0; }
}

/* ── Enriched product information (pdp-specs.js) ─────────────────────────
   The description tile shows three lines behind a chevron; the specification
   table sits open beneath it, because a spec sheet is precisely what the live
   PDPs are missing and hiding it would bury the point. */
.sg-pdp-host { display: block; }
.sg-pdp-block { border: 1px solid var(--sg-line); border-radius: 6px; background: #fff; margin-bottom: 18px; }
.sg-pdp-block__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 18px; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
.sg-pdp-block__head:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: -2px; }
.sg-pdp-block__title {
  font-size: 16px; font-weight: 700; color: var(--sg-blue);
  text-transform: uppercase; letter-spacing: .5px;
}
.sg-pdp-block__aside { display: block; margin-top: 3px; font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--sg-muted); }
/* The spec sheet closes flat — nothing showing but its heading and count. */
.sg-pdp-block--spec:not(.is-open) .sg-pdp-block__body { display: none; }
.sg-pdp-block--spec .sg-pdp-block__body { padding: 0; max-width: none; }
.sg-pdp-block__toggle { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--sg-muted); font-size: 13px; font-weight: 600; }
.sg-pdp-chev { width: 20px; height: 20px; transition: transform .18s ease; }
.sg-pdp-block.is-open .sg-pdp-chev { transform: rotate(180deg); }

/* A readable measure: full page width would put the whole description on two
   very long lines, which is both bad typography and nothing for a three-line
   clamp to bite on. */
.sg-pdp-block__body { padding: 0 18px 18px; max-width: 900px; }
.sg-pdp-desc__lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sg-ink); }
/* Collapsed: three lines, nothing below. The theme forces `display` on
   paragraphs, which kills the line clamp — hence the !important. */
.sg-pdp-block--desc:not(.is-open) .sg-pdp-desc__lead {
  display: -webkit-box !important; display: box !important;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-pdp-block--desc:not(.is-open) .sg-pdp-desc__points { display: none; }
.sg-pdp-desc__points { margin: 14px 0 0; padding-left: 20px; }
.sg-pdp-desc__points li { font-size: 14px; line-height: 1.6; color: var(--sg-ink); margin-bottom: 7px; }

.sg-spec { width: 100%; border-collapse: collapse; margin: 14px 0 0; }
.sg-spec__group th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--sg-blue);
  padding: 18px 18px 8px; border-bottom: 2px solid var(--sg-line);
}
.sg-spec__row th, .sg-spec__row td { padding: 10px 18px; border-bottom: 1px solid var(--sg-line); font-size: 14px; vertical-align: top; }
.sg-spec__name { text-align: left; font-weight: 600; color: var(--sg-muted); width: 38%; }
.sg-spec__val { color: var(--sg-ink); }
.sg-spec__row.is-missing .sg-spec__val { color: #a9a9a9; font-style: italic; }
.sg-spec__note { font-size: 12px; color: var(--sg-muted); line-height: 1.5; padding: 14px 18px 18px; margin: 0; }
.sg-spec__gap { display: block; margin-top: 4px; color: var(--sg-amber); font-weight: 600; }

@media (max-width: 600px) {
  .sg-spec__name { width: 45%; }
  .sg-spec__row th, .sg-spec__row td { padding: 9px 12px; font-size: 13px; }
  .sg-spec__group th { padding: 14px 12px 8px; }
}

/* cache-bust: forces a fresh asset URL past a poisoned edge entry */