/* Tokens live in sgh-tokens.css (the only :root). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; }
img, svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; }
.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* checkpoint banner (design review only, not a product feature) */
.checkpoint { background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); color: var(--warn); font-size: var(--fs-micro); text-align: center; padding: 5px 16px; font-family: var(--mono); }

/* ---------- header ---------- */
.site-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.logo img { height: 38px; display: block; }
.masthead .search { flex: 1; display: flex; max-width: 560px; }
.masthead .search input { flex: 1; min-width: 0; border: 1.5px solid var(--line-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 9px 13px; font: inherit; background: var(--paper); }
.masthead .search input::placeholder { color: var(--slate); }
.masthead .search button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--charcoal); color: var(--paper); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 0 16px; font-weight: 600; }
.head-links { display: flex; gap: 22px; margin-left: auto; }
.head-links a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--fs-micro); color: var(--charcoal); text-decoration: none; position: relative; }
.count { position: absolute; top: -5px; right: -9px; min-width: 17px; text-align: center; background: var(--orange-press); color: var(--paper); font-size: var(--fs-micro); font-weight: 700; border-radius: 999px; padding: 1px 4px; }
.primary-nav { border-top: 1px solid var(--line); }
.primary-nav > ul { list-style: none; display: flex; gap: 28px; margin: 0 auto; padding: 0 20px; overflow-x: auto; }
.primary-nav > ul > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 11px 0; font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); text-decoration: none; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.primary-nav > ul > li > a[aria-current], .primary-nav > ul > li > a:hover { color: var(--ink); border-bottom-color: var(--orange); }

/* ---------- mega menu: two panes (department rail, subcategory tiles), one rule set ---------- */
.primary-nav.mega { position: relative; }
.mega-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 18px 36px rgba(30,30,28,.10); z-index: var(--z-popover); font-family: var(--display, var(--sans)); }
.primary-nav.mega .mega-panel[hidden] { display: none; }
.primary-nav.mega .mega-panel:not([hidden]) { display: block; }
.mega-in { position: relative; max-width: 1260px; display: grid; grid-template-rows: auto auto; padding-top: 14px; padding-bottom: 0; }
.mega-rail { list-style: none; margin: 0; padding: 0 0 12px; width: 300px; border-right: 1px solid var(--line); min-height: 440px; }
.mega-panel a { text-decoration: none; }
.mega-dept .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-item { margin: 0; }
.primary-nav .mega-rail a.mega-dept { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 5px 12px 5px 10px; margin: 0; border: 0; border-radius: 6px 0 0 6px; font: 600 var(--fs-small)/1.25 var(--display, var(--sans)); color: var(--ink); white-space: normal; text-decoration: none; }
.mega-dept .icon { width: 20px; height: 20px; color: var(--slate); }
.mega-dept .n { font: 400 var(--fs-micro)/1 var(--sans); color: var(--slate); font-variant-numeric: tabular-nums; }
.mega-item.is-active > .mega-dept { background: var(--ground); color: var(--ink); box-shadow: inset 3px 0 0 var(--orange-press); }
.mega-item.is-active > .mega-dept .icon { color: var(--orange-press); }
.mega-pane { position: absolute; top: 14px; left: calc(300px + 20px); right: 20px; bottom: 58px; padding: 4px 0 0 28px; overflow: hidden; }
.mega-pane[hidden] { display: none; }
.mega-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mega-pane-t { margin: 0; font: 800 20px/1.2 var(--display, var(--sans)); color: var(--ink); }
.primary-nav .mega-panel a.mega-all { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; font: 600 var(--fs-small)/1.3 var(--sans); color: var(--orange-press); white-space: nowrap; }
.mega-all .icon { width: 16px; height: 16px; }
.mega-pane-body { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 28px; }
.mega-subs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.primary-nav .mega-subs a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px 6px 6px; border: 1px solid transparent; border-radius: 8px; white-space: normal; text-decoration: none; color: var(--ink); }
.primary-nav .mega-subs a:hover, .primary-nav .mega-subs a:focus-visible { border-color: var(--line); background: var(--ground); }
.mega-pic { width: 56px; height: 56px; border-radius: 6px; background: var(--ground); display: grid; place-items: center; overflow: hidden; }
.mega-pic img { width: 50px; height: 50px; object-fit: contain; mix-blend-mode: multiply; }
.mega-pic .icon { width: 24px; height: 24px; color: var(--slate); }
.mega-sub-t b { display: block; font: 600 var(--fs-small)/1.25 var(--display, var(--sans)); }
.mega-sub-t small { display: block; margin-top: 2px; font: 400 var(--fs-micro)/1 var(--sans); color: var(--slate); font-variant-numeric: tabular-nums; }
.primary-nav .mega-more a { display: flex; align-items: center; min-height: 68px; padding: 6px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; font: 600 var(--fs-small)/1.3 var(--sans); color: var(--charcoal); white-space: normal; }
.mega-side { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line); padding-left: 20px; }
.mega-side-h { margin: 0; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.mega-brands { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.primary-nav .mega-brands a { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0; border: 0; white-space: normal; text-decoration: none; color: var(--charcoal); }
.mega-blogo { height: 40px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); display: grid; place-items: center; padding: 6px 8px; overflow: hidden; }
.mega-brand.is-dark .mega-blogo { background: var(--panel, var(--panel)); border-color: var(--panel, var(--panel)); }
.mega-blogo img { max-height: 24px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.mega-blogo .x-dword { font: 800 var(--fs-micro)/1 var(--display, var(--sans)); color: var(--charcoal); }
.mega-brand small { font: 400 var(--fs-micro)/1.3 var(--sans); color: var(--slate); }
.primary-nav .mega-panel a.mega-guide { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding: 12px; border: 0; border-radius: 8px; background: var(--ground); white-space: normal; font: 600 var(--fs-small)/1.3 var(--display, var(--sans)); color: var(--ink); }
.mega-guide .icon { color: var(--orange-press); margin-top: 1px; }
.mega-guide small { display: block; font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 3px; }
.mega-foot { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.primary-nav .mega-foot a { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; font: 600 var(--fs-small)/1.3 var(--sans); color: var(--charcoal); }
.primary-nav .mega-foot a:hover, .primary-nav .mega-panel a.mega-guide:hover { color: var(--orange-press); }
.mega-foot .icon { color: var(--slate); }
@media (min-width: 1201px) { .mega-more.is-narrow-only { display: none; } }
@media (max-width: 1200px) { .mega-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mega-subs:has(.mega-more) > li:nth-child(n+8):not(.mega-more) { display: none; } .mega-pane-body { grid-template-columns: minmax(0, 1fr) 190px; } }
@media (max-width: 1023px) { .primary-nav.mega .mega-panel:not([hidden]) { display: none; } }

/* ---------- footer ---------- */
.site-foot { background: var(--paper); border-top: 1px solid var(--line); margin-top: 48px; font-size: var(--fs-small); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 30px 22px; }
.foot-cols h3 { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin: 0 0 10px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot-cols a { text-decoration: none; color: var(--charcoal); }
.foot-cols a:hover { color: var(--orange-press); }
.foot-legal { border-top: 1px solid var(--line); padding-block: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--slate); font-size: var(--fs-micro); }
.foot-legal a { color: var(--slate); }
.config-pending { color: var(--warn); font-family: var(--mono); font-size: var(--fs-micro); }
.foot-seller { color: var(--slate); font-size: var(--fs-micro); }

/* ---------- buttons & controls ---------- */
.select { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); padding: 8px 10px; font: inherit; color: var(--ink); }

/* ---------- cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 7px; position: relative; }
.pcard:hover { border-color: var(--line-strong); }
.pcard .media { background: var(--ground); border-radius: var(--radius-sm); aspect-ratio: 4/3; display: grid; place-items: center; color: var(--line-strong); font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .05em; }
.pcard .brandline { font-size: var(--fs-micro); color: var(--slate); display: flex; justify-content: space-between; gap: 8px; }
.pcard .brandline .model { font-family: var(--mono); }
.pcard h3 { font-size: var(--fs-small); line-height: 1.35; margin: 0; font-weight: 600; }
.pcard h3 a { text-decoration: none; }
.pcard h3 a:hover { color: var(--orange-press); }
.pcard .keyspecs { font-size: var(--fs-micro); color: var(--slate); margin: 0; }
.pcard .opts { font-size: var(--fs-micro); color: var(--charcoal); }
.pcard .opts b { font-weight: 600; }
.pcard .prow { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 4px; }
.pcard .price { font-size: var(--fs-h3); font-weight: 700; font-variant-numeric: tabular-nums; }
.pcard .from { font-size: var(--fs-micro); color: var(--slate); }
.pcard .avail { font-size: var(--fs-micro); color: var(--ok); }
.pcard .avail.lead { color: var(--warn); }
.pcard .actions { display: flex; gap: 8px; align-items: center; }
.pcard .actions .btn { flex: 1; }
.compare-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--slate); }

/* ---------- listing ---------- */
.sgh-crumbs { padding-block: 12px 2px; }
.sgh-crumbs .woocommerce-breadcrumb { font-size: var(--fs-micro); color: var(--slate); }
.sgh-crumbs .woocommerce-breadcrumb a { text-decoration: none; color: var(--slate); }
.sgh-crumbs .woocommerce-breadcrumb a:hover { color: var(--orange-press); }
.crumbs { font-size: var(--fs-micro); color: var(--slate); padding-block: 14px 4px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--orange-press); }
.listing { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; padding-block: 8px 30px; }
.filters h2 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); margin: 0 0 10px; }
.fgroup { padding: 14px 0; border-top: 1px solid var(--line); }
.fgroup h3 { font-size: var(--fs-small); margin: 0 0 8px; }
.fgroup label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); padding: 3px 0; color: var(--charcoal); }
.fgroup .n { margin-left: auto; color: var(--slate); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.listing-main { min-width: 0; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chips .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--orange-tint); color: var(--orange-press); border: 1px solid var(--orange-line); border-radius: 999px; font-size: var(--fs-micro); padding: 3px 10px; }
.filter-chips .chip a { color: inherit; text-decoration: none; font-size: var(--fs-small); line-height: 1; }
.filter-chips .clear-all { font-size: var(--fs-micro); color: var(--slate); align-self: center; }
.list-head h1 { font-size: var(--fs-h1); margin: 0; letter-spacing: -0.01em; }
.list-head .count { position: static; background: none; color: var(--slate); font-size: var(--fs-small); font-weight: 400; padding: 0; }
.list-head p { color: var(--slate); font-size: var(--fs-small); margin: 4px 0 0; max-width: 70ch; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--orange-tint); color: var(--orange-press); border: 1px solid var(--orange-line); border-radius: 999px; font-size: var(--fs-micro); padding: 4px 11px; }
.chip button { border: 0; background: none; color: inherit; padding: 0; font-size: var(--fs-small); line-height: 1; }
.toolbar .spacer { flex: 1; }
.load-more { text-align: center; margin: 22px 0 4px; }
.load-more .pages { font-size: var(--fs-micro); color: var(--slate); margin-top: 8px; }
.load-more .pages a { color: var(--slate); }

/* ---------- PDP ---------- */
.pdp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 28px; padding-block: 10px 26px; }
.gallery { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; align-self: start; }
.stage { background: var(--ground); border-radius: var(--radius-sm); aspect-ratio: 1/1; display: grid; place-items: center; color: var(--line-strong); font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .06em; text-align: center; }
.thumbs { display: flex; gap: 8px; margin-top: 10px; }
.thumbs button { width: 58px; height: 58px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--ground); color: var(--line-strong); font-family: var(--mono); font-size: var(--fs-micro); }
.thumbs button[aria-pressed="true"] { border-color: var(--orange); }
.buy .brandline { display: flex; gap: 10px; align-items: center; font-size: var(--fs-micro); color: var(--slate); }
.buy .brandline .brand { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal); font-size: var(--fs-micro); }
.buy .brandline .model { font-family: var(--mono); }
.buy h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; margin: 6px 0 4px; text-wrap: balance; font-weight: 700; }
.buy .pitch { color: var(--charcoal); margin: 0 0 10px; }
.keyfacts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.keyfacts span { font-size: var(--fs-micro); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; color: var(--charcoal); }
.opt-group { margin-bottom: 14px; }
.opt-group .lab { font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; }
.opt-group .lab .hint { font-weight: 400; color: var(--slate); }
.opts-row { display: flex; flex-wrap: wrap; gap: 8px; }
.optbtn { border: 1.5px solid var(--line-strong); background: var(--paper); border-radius: var(--radius-sm); padding: 8px 14px; font-size: var(--fs-small); color: var(--ink); }
.optbtn[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-tint); font-weight: 600; }
.selected-config { font-size: var(--fs-micro); color: var(--slate); margin: 2px 0 12px; }
.selected-config b { color: var(--ink); font-weight: 600; }
.buybox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.buybox .price { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.buybox .price small { font-size: var(--fs-small); font-weight: 400; color: var(--slate); margin-left: 6px; }
.buybox .avail { font-size: var(--fs-small); font-weight: 600; margin: 3px 0 12px; }
.buybox .avail.ok { color: var(--ok); }
.buybox .avail.unset { color: var(--slate); font-weight: 400; }
.buyrow { display: flex; gap: 10px; }
.qty { display: flex; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.qty button { width: 34px; border: 0; background: var(--ground); font-size: 16px; color: var(--charcoal); }
.qty input { width: 44px; border: 0; text-align: center; font: inherit; font-weight: 600; }
.buyrow .btn { flex: 1; }
.buy-notes { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-micro); color: var(--slate); margin-top: 12px; }
.jump { display: flex; gap: 20px; overflow-x: auto; border-block: 1px solid var(--line); margin-bottom: 24px; }
.jump a { padding: 10px 0; font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); text-decoration: none; white-space: nowrap; border-bottom: 2.5px solid transparent; }
.jump a:hover { color: var(--ink); border-bottom-color: var(--orange); }
section.pdp-block { margin-bottom: 30px; }
section.pdp-block > h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; margin: 0 0 4px; }
section.pdp-block > .sub { color: var(--slate); font-size: var(--fs-small); margin: 0 0 14px; }
.compat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.compat .row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.compat .row:last-child { border-bottom: 0; }
.compat .row .k { font-weight: 600; }
.compat .row .v { color: var(--charcoal); }
.setup-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.setup-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; display: flex; flex-direction: column; gap: 6px; }
.setup-card .media { background: var(--ground); border-radius: var(--radius-sm); height: 84px; display: grid; place-items: center; color: var(--line-strong); font-family: var(--mono); font-size: var(--fs-micro); }
.setup-card .why { font-size: var(--fs-micro); color: var(--slate); }
.setup-card .kind { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.setup-card .kind.rec { color: var(--orange-press); }
.setup-card .kind.opt { color: var(--slate); }
.setup-card h3 { font-size: var(--fs-small); margin: 0; font-weight: 600; line-height: 1.35; }
.setup-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.setup-card .price { font-weight: 700; font-variant-numeric: tabular-nums; }
.setup-card label { display: flex; gap: 6px; align-items: center; font-size: var(--fs-micro); color: var(--charcoal); }
.setup-total { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: var(--fs-small); }
.specs { background: var(--panel); color: var(--panel-ink); border-radius: var(--radius); overflow: hidden; }
.specs .head { padding: 13px 20px; border-bottom: 1px solid var(--panel-line); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.specs .head h2 { font-size: var(--fs-micro); font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 0; color: var(--paper); }
.specs .head .src { font-size: var(--fs-micro); color: var(--panel-mute); }
.specs h3 { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin: 0; padding: 14px 20px 6px; }
.specs table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.specs td { padding: 8px 20px; border-bottom: 1px solid var(--panel-line); vertical-align: top; }
.specs tr:last-child td { border-bottom: 0; }
.specs td:first-child { width: 250px; color: var(--panel-mute); }
.specs td:last-child { font-variant-numeric: tabular-nums; }
.docs { overflow-x: auto; } /* safety: table scrolls in its block, page body never scrolls sideways */
.docs table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: var(--fs-small); }
.docs th { text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--ground); white-space: nowrap; }
.docs td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.docs td:first-child { min-width: 160px; } /* name wraps instead of forcing the table wide */
.docs td:last-child, .docs th:last-child { text-align: right; white-space: nowrap; }
.docs tr:last-child td { border-bottom: 0; }
.docs .get { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--orange-press); text-decoration: none; white-space: nowrap; }
@media (max-width: 560px) {
  .docs th, .docs td { padding: 9px 10px; font-size: var(--fs-micro); }
  .docs .get span.dl-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* icon-only download on tiny screens */
}
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; padding: 0 16px; }
.faq summary { font-weight: 600; font-size: var(--fs-small); padding: 12px 0; cursor: pointer; }
.faq p { margin: 0 0 14px; font-size: var(--fs-small); color: var(--charcoal); }
.sticky-buy { display: none; }

/* ---------- homepage ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: center; padding-block: 34px 30px; }
.hero h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 10px; font-weight: 800; text-wrap: balance; }
.hero .sub { font-size: var(--fs-body); color: var(--charcoal); margin: 0 0 20px; max-width: 52ch; }
.hero .cta-row { display: flex; align-items: center; gap: 16px; }
.hero-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-panel .tile { background: var(--ground); border-radius: var(--radius-sm); aspect-ratio: 4/3; display: grid; place-items: center; color: var(--line-strong); font-family: var(--mono); font-size: var(--fs-micro); }
.hero-panel .tile.wide { grid-column: span 2; aspect-ratio: auto; padding: 14px; }
.home-section { padding-block: 8px 26px; }
.home-section > h2 { font-size: var(--fs-h3); letter-spacing: -0.01em; margin: 0 0 3px; }
.home-section > .sub { color: var(--slate); font-size: var(--fs-small); margin: 0 0 14px; }
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cat-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 12px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.cat-tile:hover { border-color: var(--orange); }
.cat-tile .icon { color: var(--charcoal); width: 22px; height: 22px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .listing { grid-template-columns: 1fr; }
  .filters { display: flex; gap: 8px; overflow-x: auto; }
  .fgroup { min-width: 200px; }
  .setup-cards { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .masthead { flex-wrap: wrap; gap: 12px 16px; }
  .masthead .search { order: 3; min-width: 100%; max-width: none; }
  .pdp-hero { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .compat .row { grid-template-columns: 1fr; gap: 3px; }
  .specs td:first-child { width: 40%; }
  .sticky-buy { display: flex; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-bottom-bar); align-items: center; }
  .sticky-buy .price { font-weight: 700; font-size: var(--fs-body); }
  .sticky-buy .btn { flex: 1; }
  body.has-sticky { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }


/* ---------- WooCommerce buttons: mapped onto the .btn component in sgh-v2.css (no !important) ---------- */

/* WooCommerce product loop: the card system lives in sgh-v2.css (batch 3). Only the float
   clearfix removal stays here: its pseudo-elements would become stray grid cells. */
ul.products::before, ul.products::after,
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce .products .star-rating { display: none; } /* no ratings until real reviews exist */
.home-section ul.products { margin-top: 4px; }

/* upsells / related / cross-sell section headings */
.woocommerce .upsells > h2, .woocommerce .related > h2,
.woocommerce .cross-sells > h2, .woocommerce .up-sells > h2 {
  font-size: var(--fs-h2); letter-spacing: -0.01em; margin: 30px 0 12px;
}
.woocommerce .upsells, .woocommerce .related, .woocommerce .up-sells { clear: both; }

/* shop / category page header */
.woocommerce-products-header { padding-top: 8px; }
.woocommerce-products-header__title, .woocommerce .page-title { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 6px; }
.woocommerce-result-count { color: var(--slate); font-size: var(--fs-small); }
.woocommerce-ordering select { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; }

/* Brands grid ([sgh_brands]) */
.sgh-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 8px 0 24px; }
.sgh-brand-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; text-decoration: none; }
.sgh-brand-card:hover { border-color: var(--orange); }
.sgh-brand-card .mark { height: 44px; display: grid; place-items: center; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sgh-brand-card .mark img { max-height: 44px; max-width: 100%; object-fit: contain; }
.sgh-brand-card .nm { font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.sgh-brand-card .ct { font-size: var(--fs-micro); color: var(--slate); }

/* Complete Your Setup accessories strip */
.sgh-setup { margin: 30px 0; }
.sgh-setup h2 { font-size: var(--fs-h3); letter-spacing: -0.01em; margin: 0 0 4px; }
.sgh-setup .sub { color: var(--slate); font-size: var(--fs-small); margin: 0 0 14px; }
.sgh-setup-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sgh-setup-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; display: flex; flex-direction: column; gap: 7px; }
.sgh-setup-card .media { background: var(--ground); border-radius: var(--radius-sm); height: 110px; display: grid; place-items: center; overflow: hidden; }
.sgh-setup-card .media img { max-height: 100px; width: auto; object-fit: contain; }
.sgh-setup-card h3 { font-size: var(--fs-small); margin: 0; font-weight: 600; line-height: 1.35; }
.sgh-setup-card h3 a { text-decoration: none; }
.sgh-setup-card h3 a:hover { color: var(--orange-press); }
.sgh-setup-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.sgh-setup-card .price { font-weight: 700; font-variant-numeric: tabular-nums; }
.sgh-setup-card .price .por { font-size: var(--fs-micro); font-weight: 600; color: var(--slate); }
.woocommerce a.button.add_to_cart_button.loading::after { display: none; }
.woocommerce div.product p.price, .woocommerce ul.products li.product .price { color: var(--ink); font-weight: 700; }
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--orange-tint); color: var(--orange-press); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--orange); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--orange); }
.woocommerce table.variations th, .woocommerce table.variations td { padding: 6px 0; }
.woocommerce table.variations label { font-weight: 600; font-size: var(--fs-small); }
.woocommerce div.product form.cart .variations select { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; }
.sgh-main { max-width: var(--maxw); margin: 0 auto; padding: 10px 20px 40px; }

/* PDP key-fact chips */
.sgh-keyfacts { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 16px; }
.sgh-keyfacts span { font-size: var(--fs-micro); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; color: var(--charcoal); }

/* PDP sticky buy bar (mobile only) */
.sgh-sticky-buy { display: none; }
@media (max-width: 760px) {
  .sgh-sticky-buy { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottom-bar);
    background: var(--paper); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(30,30,28,.07); }
  .sgh-sticky-buy .sgh-sticky-price { font-weight: 700; font-size: var(--fs-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sgh-sticky-buy .sgh-sticky-price .por { font-size: var(--fs-small); font-weight: 600; color: var(--slate); }
  .sgh-sticky-buy .btn { flex: 1; justify-content: center; }
  body.has-sticky-buy { padding-bottom: 76px; }
}

/* single product buy row: qty + add-to-cart + add-to-quote at one height, aligned */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; margin: 6px 0;
}
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce div.product form.cart .quantity .qty {
  height: 46px; width: 74px; padding: 0 6px; text-align: center; font-size: 15px; font-weight: 600;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); box-sizing: border-box;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  height: 46px; padding: 0 24px; font-size: var(--fs-body); display: inline-flex; align-items: center; justify-content: center; margin: 0;
}
.woocommerce div.product .sgh-add-quote {
  height: 46px; padding: 0 22px; font-size: var(--fs-body); display: inline-flex; align-items: center; justify-content: center; margin: 0;
}
.woocommerce div.product .single_variation_wrap .woocommerce-variation-add-to-cart { margin-top: 8px; }
.woocommerce div.product .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button { cursor: not-allowed; }
.sgh-specs-wrap { margin-top: 30px; }
.sgh-quote-cta { margin: 14px 0; }
.sgh-quote-cta .btn { width: auto; }
.sgh-sample-note { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); font-size: var(--fs-micro); border-radius: var(--radius-sm); padding: 8px 12px; margin: 10px 0; }

/* ---------- block cart/checkout styling pass ---------- */
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-combobox .components-combobox-control__input {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--sans);
}
.wc-block-components-checkout-step__heading .wc-block-components-title,
.wp-block-woocommerce-checkout h2 { font-family: var(--sans); letter-spacing: -0.01em; }
.wc-block-components-radio-control__option { border-radius: var(--radius-sm); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; }
.wc-block-components-button:not(.is-link) { background: var(--orange-press); border-radius: var(--radius-sm); font-weight: 600; }
.wc-block-components-button:not(.is-link):hover { background: var(--orange-press); }
.wc-block-checkout__sidebar .wc-block-components-panel { border-radius: var(--radius); }

/* ---------- quote basket ---------- */
.sgh-quote-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: var(--fs-small); margin-bottom: 18px; }
.sgh-quote-table th { text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); padding: 10px 14px; background: var(--ground); border-bottom: 1px solid var(--line); }
.sgh-quote-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sgh-quote-table tr:last-child td { border-bottom: 0; }
.sgh-quote-table .qty-input { width: 64px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; text-align: center; }
.sgh-quote-table .remove { color: var(--slate); text-decoration: none; font-size: var(--fs-h3); }
.sgh-quote-table .remove:hover { color: var(--error); }
.sgh-quote-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; max-width: 640px; }
.sgh-quote-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sgh-quote-form label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 4px; }
.sgh-quote-form label .opt { font-weight: 400; color: var(--slate); }
.sgh-quote-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), .sgh-quote-form textarea { width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; }
.sgh-quote-form textarea { min-height: 90px; resize: vertical; }
@media (max-width: 640px) { .sgh-quote-form .frow { grid-template-columns: 1fr; } }

/* SGH contextual browsing refinement — 9 November 2026 */
/* Filter groups sit on dividers, not in boxes (design audit step 7). */
.filters .sgh-category-picker,.filters details.fgroup{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0;margin:0;min-width:0}
.filters summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;font-size: var(--fs-small);font-weight: 600;cursor:pointer;line-height:1.4;list-style:none;margin:0}.filters summary::-webkit-details-marker{display:none}.filters summary::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border-right:1.5px solid var(--slate);border-bottom:1.5px solid var(--slate);transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}.filters details[open]>summary::after{transform:rotate(225deg) translate(-2px,0)}
.sgh-category-picker nav{display:grid;gap:3px;margin-top:12px}.sgh-category-picker nav a{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);padding:8px 4px;font-size: var(--fs-micro);line-height:1.4}.sgh-category-picker .icon{width:20px;height:20px;flex-shrink:0;color:var(--orange-press)}
.sgh-filter-options{max-height:230px;overflow:auto;margin-top:12px;padding-right:5px;scrollbar-width:thin}.filters .fgroup label{padding:5px 0}.filters input:focus-visible,.filters a:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(max-width:900px){.filters{display:block;overflow:visible}.filters .fgroup{min-width:0}.filters .sgh-category-picker nav{grid-template-columns:repeat(2,minmax(0,1fr))}.sgh-filter-options{max-height:180px}}

.sgh-specs-wrap>summary{font-size: var(--fs-h3);font-weight: 600;cursor:pointer;padding:18px 0;border-top:1px solid var(--line)}.sgh-specs-wrap:not([open]){margin-bottom:24px}.sgh-specs-wrap .specs{margin-top:12px}

.sgh-category-picker nav{max-height:250px;overflow:auto;scrollbar-width:thin}
@media(max-width:1100px){.filters{display:block;overflow:visible}.filters .fgroup{min-width:0}}
@media(max-width:600px){.sgh-category-picker nav{max-height:210px}}

/* Catalogue sweep: useful filters, native OEM identity, readable identifiers. */
.sgh-brand-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px; }
.sgh-brand-identity { display:flex;align-items:center;justify-content:center;min-height:90px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;text-decoration:none; }
.sgh-brand-identity img { object-fit:contain;max-width:100%;width:auto;height:52px; }
.sgh-brand-dark { background:var(--charcoal); }
.sgh-product-brands { display:flex;gap:8px;margin-bottom:14px; }
.sgh-product-brands .sgh-brand-identity { min-height:52px;padding:10px 18px;max-width:200px; }
.sgh-product-brands .sgh-brand-identity img { height:30px; }
.sgh-archive-brand { width:210px;margin:10px 0 24px; }
.product_meta .sku { overflow-wrap:anywhere;font-family:var(--mono);font-size: var(--fs-micro); }
.filters h2 { margin-bottom:12px; }
.fgroup summary { cursor:pointer; }
@media(max-width:800px) { .sgh-brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:480px) { .sgh-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} }

.sgh-brand-directory-item p { margin:8px 0 18px;text-align:center; }.sgh-brand-directory-item p span { display:block;color:var(--slate);font-size: var(--fs-micro); }

.sgh-discovery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 48px}.sgh-discovery-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;text-decoration:none}.sgh-discovery-card .icon{width:32px;height:32px;color:var(--orange)}.sgh-discovery-card h3{font-size:19px;margin:14px 0 10px}.sgh-discovery-card p{color:var(--slate);font-size: var(--fs-small);line-height:1.7}.sgh-discovery-card span{font-weight: 600;color:var(--orange-press);font-size: var(--fs-small)}.sgh-resource-search{margin:25px 0 34px;max-width:700px}.sgh-resource-search label{display:block;font-weight: 600;margin-bottom:10px}.sgh-resource-search>div{display:flex;gap:10px}.sgh-resource-search input[type=search]{min-width:0;flex:1;padding:12px;border:1px solid var(--line-strong);border-radius:6px}.sgh-brand-directory-item p span{display:block;margin-top:3px}
@media(max-width:800px){.sgh-discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.sgh-discovery-grid{grid-template-columns:1fr}.sgh-resource-search>div{flex-direction:column}}

.sgh-subcategory-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}.sgh-subcategory-links a{display:block;padding:8px 12px;border:1px solid var(--line);border-radius:20px;background:var(--paper);text-decoration:none;font-size: var(--fs-micro)}.sgh-subcategory-links a:hover{border-color:var(--orange);color:var(--orange-press)}

.sgh-enquiry-note{padding:12px 14px;background:var(--orange-tint);border-radius:8px;font-size: var(--fs-small);color:var(--ink);line-height:1.6}
.sgh-photo-pending{height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;background:var(--paper);color:var(--slate);font-size: var(--fs-micro);text-align:center}
.woocommerce ul.products li.product .sgh-photo-pending img,.sgh-photo-pending img{height:72px!important;width:auto!important;max-width:150px!important;object-fit:contain;padding:0!important;margin:0!important}
.sgh-photo-pending .icon{width:64px;height:64px;opacity:.4}.woocommerce-product-gallery .sgh-photo-pending{height:350px;border:1px solid var(--line);border-radius:12px}
@media(max-width:600px){.sgh-photo-pending{height:180px}}

/* Category copy: short intro above the grid, buying guide below it */
.woocommerce .term-description { max-width: 78ch; color: var(--charcoal); font-size: var(--fs-body); margin: 4px 0 14px; }
.woocommerce .term-description p { margin: 0; }
.sgh-cat-guide { max-width: 78ch; margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--charcoal); }
.sgh-cat-guide h2 { font-size: var(--fs-h3); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; }
.sgh-cat-guide h3 { font-size: var(--fs-body); color: var(--ink); margin: 18px 0 6px; }
.sgh-cat-guide p, .sgh-cat-guide li { font-size: var(--fs-body); line-height: 1.65; }
.sgh-cat-guide ul { padding-left: 20px; margin: 8px 0; }
.sgh-cat-guide a { color: var(--orange-press); }

/* Content pages: policies, Resources hub, buying guides */
.sgh-article { max-width: 76ch; margin: 6px auto 40px; padding: 0 4px; color: var(--charcoal); }
.sgh-article h1 { font-size: var(--fs-h1); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); margin: 10px 0 18px; text-wrap: balance; }
.sgh-article-body { font-size: var(--fs-body); line-height: 1.7; }
.sgh-article-body h2 { font-size: 21px; letter-spacing: -0.01em; color: var(--ink); margin: 34px 0 10px; }
.sgh-article-body h3 { font-size: var(--fs-h3); color: var(--ink); margin: 24px 0 8px; }
.sgh-article-body p { margin: 0 0 14px; }
.sgh-article-body ul, .sgh-article-body ol { padding-left: 22px; margin: 0 0 16px; }
.sgh-article-body li { margin-bottom: 6px; }
.sgh-article-body a:not(.btn) { color: var(--orange-press); }
.sgh-article-body table { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: var(--fs-small); background: var(--paper); border: 1px solid var(--line); display: block; overflow-x: auto; }
.sgh-article-body th { text-align: left; background: var(--ground); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.sgh-article-body th, .sgh-article-body td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sgh-article-body td { font-variant-numeric: tabular-nums; }
.sgh-more-guides { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.sgh-more-guides h2 { font-size: var(--fs-h3); color: var(--ink); margin: 0 0 12px; }

/* Guide cards ([sgh_guides] on Resources, and the More guides list) */
.sgh-guide-grid { list-style: none; padding: 0; margin: 8px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sgh-guide-grid li { margin: 0; }
.sgh-guide-card { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; }
.sgh-guide-card:hover { border-color: var(--orange); }
.sgh-guide-card strong { color: var(--ink); font-size: var(--fs-body); line-height: 1.35; }
.sgh-guide-card span { color: var(--slate); font-size: var(--fs-small); line-height: 1.5; }
.sgh-article-body .sgh-guide-card { color: inherit; }

/* ---------- search: live suggestions + results context ---------- */
.masthead .search { position: relative; }
.sgh-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-popover); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(30,30,28,.12); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px 0; }
.sgh-suggest[hidden] { display: none; }
.sgh-suggest .grp + .grp { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.sgh-suggest .grp-h { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); padding: 8px 14px 4px; }
.sgh-suggest [role="option"] { display: flex; align-items: center; gap: 10px; padding: 7px 14px; text-decoration: none; color: var(--ink); }
.sgh-suggest [role="option"][aria-selected="true"], .sgh-suggest [role="option"]:hover { background: var(--ground); }
.sgh-suggest img { width: 36px; height: 36px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; flex: none; }
.sgh-suggest .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sgh-suggest .ti { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sgh-suggest .m { font-size: var(--fs-micro); color: var(--slate); font-family: var(--mono); }
.sgh-suggest .p { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; color: var(--charcoal); }
.sgh-suggest .exact { font-style: normal; font-size: var(--fs-micro); font-weight: 700; color: var(--ok); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.sgh-suggest .all { display: block; padding: 10px 14px; font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); border-top: 1px solid var(--line); margin-top: 4px; }
.sgh-suggest .none { padding: 12px 14px; font-size: var(--fs-small); color: var(--charcoal); }
.sgh-search-note { font-size: var(--fs-small); color: var(--ok); margin: 0 0 10px; }
.sgh-search-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sgh-search-terms a { border: 1px solid var(--line-strong); background: var(--paper); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-small); text-decoration: none; }
.sgh-search-terms a span { color: var(--slate); margin-left: 2px; }
.sgh-search-docs { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 18px; }
.sgh-search-docs h2 { font-size: var(--fs-body); margin: 0 0 8px; }
.sgh-search-docs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 18px; }
.sgh-search-docs a { display: flex; gap: 8px; align-items: flex-start; text-decoration: none; padding: 6px 0; }
.sgh-search-docs strong { display: block; font-size: var(--fs-small); }
.sgh-search-docs small { display: block; color: var(--slate); font-size: var(--fs-micro); }
.sgh-zero { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; max-width: 760px; }
.sgh-zero h2 { margin: 0 0 8px; font-size: var(--fs-h3); }
.sgh-zero h2 span { color: var(--charcoal); }
.sgh-zero-suggest { margin: 0 0 12px; padding-left: 18px; }
.sgh-zero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 760px) { .masthead .search button .lbl { display: none; } .sgh-suggest { max-height: 60vh; } }

/* ---------- procurement workspace (RFQ, quick order, projects, quote view) ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.sgh-notice ul { margin: 0; padding-left: 18px; }
.sgh-ws { display: grid; gap: 18px; max-width: 980px; }
.sgh-ws-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.sgh-ws-steps a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: var(--fs-small); font-weight: 600; text-decoration: none; color: var(--charcoal); }
.sgh-ws-steps strong { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--charcoal); color: var(--paper); font-size: var(--fs-micro); }
.sgh-ws-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.sgh-ws-card > h2, .sgh-ws-card h3 { margin: 0 0 12px; font-size: var(--fs-h3); }
.sgh-ws-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sgh-ws-head h2, .sgh-ws-head h3 { margin: 0; }
.sgh-ws-count, .sgh-hint { font-size: var(--fs-small); color: var(--slate); }
.sgh-empty { color: var(--charcoal); margin: 0; }
.sgh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sgh-ws .sgh-quote-table, .sgh-rfq-view .sgh-quote-table { margin-bottom: 12px; }
.sgh-quote-table input[type="text"], .sgh-quote-table input:not([type]), .sgh-quote-table select { width: 100%; min-width: 140px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; font-size: 13.5px; background: var(--paper); }
.sgh-quote-table code { font-family: var(--mono); font-size: var(--fs-micro); color: var(--slate); }
.sgh-tag { display: inline-block; font-size: var(--fs-micro); font-weight: 700; color: var(--warn); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.sgh-remove { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--slate); padding: 4px 8px; }
.sgh-remove:hover { color: var(--error); }
.sgh-ws-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.sgh-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.sgh-inline-form label { font-size: var(--fs-small); font-weight: 600; }
.sgh-inline-form input { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; min-width: 220px; }
.sgh-ws-card textarea, .sgh-ws-card input[type="file"], .sgh-project-form textarea, .sgh-project-form input { width: 100%; }
.sgh-ws-card > form > label, .sgh-project-form > label { display: block; font-size: var(--fs-small); font-weight: 600; margin: 12px 0 4px; }
.sgh-ws-card textarea, .sgh-project-form textarea, .sgh-project-form input:not([type="file"]):not([type="number"]) { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; }
.sgh-ws .sgh-quote-form { max-width: none; border: 0; padding: 0; }
.sgh-quote-form h3 { font-size: var(--fs-body); margin: 20px 0 10px; }
.sgh-quote-form select { width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; background: var(--paper); }
.sgh-hp { position: absolute; left: -9999px; }
.sgh-seg { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sgh-seg legend { font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; padding: 0; }
.sgh-seg label { display: inline-flex !important; align-items: center; gap: 6px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; font-weight: 600 !important; cursor: pointer; margin: 0 !important; }
.sgh-seg label:has(input:checked) { border-color: var(--orange); background: var(--orange-tint); }
.sgh-seg input { width: auto !important; accent-color: var(--orange); }
.frow3 { display: grid; grid-template-columns: 1fr 1.6fr .6fr; gap: 12px; margin-bottom: 12px; }
.frow3[hidden] { display: none; }
.sgh-checks { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.sgh-checks label { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 400 !important; }
.sgh-checks input { width: auto !important; margin-top: 3px; accent-color: var(--orange); }
.sgh-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 0; }
.sgh-import-table .st-none td, .sgh-import-table .st-ambiguous td { background: var(--warn-bg); }
.sgh-ok { color: var(--ok); font-weight: 700; }
.sgh-st { display: block; color: var(--warn); font-size: var(--fs-micro); margin-top: 3px; }
.sgh-rfq-view { display: grid; gap: 16px; max-width: 980px; }
.sgh-rfq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sgh-rfq-head h2 { margin: 2px 0; font-family: var(--mono); font-size: var(--fs-h3); }
.sgh-rfq-head .sub { margin: 0; color: var(--slate); font-size: var(--fs-small); }
.sgh-progress { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; margin: 0; counter-reset: s; }
.sgh-progress li { position: relative; font-size: var(--fs-micro); color: var(--slate); padding-top: 12px; border-top: 3px solid var(--line); }
.sgh-progress li.done { border-top-color: var(--charcoal); color: var(--ink); }
.sgh-progress li.now { border-top-color: var(--orange); font-weight: 700; }
.sgh-quotation table[border] { font-size: var(--fs-small); }
.sgh-rfq-view table[border], .sgh-ws table[border] { border-collapse: collapse; width: 100%; background: var(--paper); border: 1px solid var(--line) !important; }
.sgh-rfq-view table[border] th { background: var(--ground); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.sgh-rfq-view table[border] th, .sgh-rfq-view table[border] td { border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 9px 12px !important; }
.sgh-totals { margin: 12px 0 0 auto; min-width: 280px; border-collapse: collapse; font-size: var(--fs-small); }
.sgh-totals th { text-align: left; font-weight: 400; color: var(--charcoal); padding: 4px 16px 4px 0; }
.sgh-totals td { text-align: right; padding: 4px 0; }
.sgh-totals .grand th, .sgh-totals .grand td { font-weight: 800; font-size: var(--fs-body); border-top: 1px solid var(--line-strong); padding-top: 8px; }
.sgh-terms { margin-top: 14px; font-size: var(--fs-small); color: var(--charcoal); }
.sgh-terms h4 { margin: 0 0 4px; font-size: var(--fs-small); }
.sgh-accept { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.sgh-po { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-small); font-weight: 600; }
.sgh-po input { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 10px; font: inherit; width: 180px; }
.sgh-changes summary { list-style: none; }
.sgh-changes summary::-webkit-details-marker { display: none; }
.sgh-changes form { margin-top: 10px; display: grid; gap: 6px; min-width: min(420px, 90vw); }
.sgh-changes textarea { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px; font: inherit; }
.sgh-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 12px 0 0; font-size: var(--fs-small); }
.sgh-dl dt { color: var(--slate); }
.sgh-dl dd { margin: 0; }
.sgh-project-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sgh-project-list a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; }
.sgh-project-list span { font-size: var(--fs-small); color: var(--slate); }
.sgh-project-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sgh-project-form .frow label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 4px; }
.sgh-share { margin-top: 18px; }
.sgh-share label { font-size: var(--fs-small); font-weight: 600; display: block; margin-bottom: 4px; }
.sgh-share div { display: flex; gap: 8px; flex-wrap: wrap; }
.sgh-share input { flex: 1; min-width: 240px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--mono); font-size: 12.5px; }
.sgh-account-actions { margin: 0 0 14px; }
@media (max-width: 700px) {
  .frow3, .sgh-project-form .frow { grid-template-columns: 1fr; }
  .sgh-progress { grid-template-columns: repeat(5, minmax(56px,1fr)); font-size: var(--fs-micro); }
  .sgh-ws .sgh-quote-table thead { display: none; }
  .sgh-ws .sgh-quote-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .sgh-ws .sgh-quote-table td { padding: 0; border: 0; }
  .sgh-ws .sgh-quote-table td:first-child { grid-column: 1 / -1; }
  .sgh-totals { min-width: 0; width: 100%; }
}
@media print {
  .site-head, .site-foot, .sgh-ws-actions, .sgh-accept, .sgh-changes, .sgh-ws-steps, .sgh-share, .sgh-sticky-buy, .woocommerce-MyAccount-navigation { display: none !important; }
  body { background: var(--paper); }
  .sgh-ws-card { border: 0; padding: 0; }
}

/* ---------- support center ---------- */
.sgh-support { display: grid; gap: 18px; max-width: 980px; }
.sgh-context { background: var(--ground); border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-small); }
.sgh-quote-form select { margin-bottom: 4px; }
.sgh-quote-form > label { margin-top: 12px; }
.sgh-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sgh-thread li { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius); padding: 10px 14px; }
.sgh-thread li.from-staff { border-left-color: var(--orange); }
.sgh-thread li.from-system { background: var(--ground); font-size: var(--fs-small); }
.sgh-thread .who { font-size: var(--fs-micro); font-weight: 700; color: var(--charcoal); }
.sgh-thread .who time { font-weight: 400; color: var(--slate); margin-left: 6px; }
.sgh-thread .body p { margin: 6px 0 0; }
.sgh-help-link { display: block; margin-top: 8px; font-size: var(--fs-small); }
.sgh-order-help { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- resource library ---------- */
.sgh-library { display: grid; gap: 16px; }
.sgh-library-search { display: flex; gap: 8px; max-width: 720px; }
.sgh-library-search input { flex: 1; min-width: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; background: var(--paper); }
.sgh-library-body { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
.sgh-library-facets h2 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); margin: 14px 0 6px; }
.sgh-library-facets h2:first-child { margin-top: 0; }
.sgh-library-facets ul { list-style: none; margin: 0; padding: 0; }
.sgh-library-facets a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); text-decoration: none; font-size: var(--fs-small); color: var(--ink); }
.sgh-library-facets a:hover { background: var(--paper); }
.sgh-library-facets a[aria-current] { background: var(--charcoal); color: var(--paper); }
.sgh-library-facets a span { color: var(--slate); font-size: var(--fs-micro); }
.sgh-library-facets a[aria-current] span { color: var(--line); }
.sgh-doc-list { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.sgh-doc-list li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.sgh-doc-list li:last-child { border-bottom: 0; }
.sgh-doc-list .doc { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--ink); }
.sgh-doc-list .doc strong { display: block; font-size: var(--fs-small); }
.sgh-doc-list .doc small { display: block; color: var(--slate); font-size: var(--fs-micro); }
.sgh-doc-list .prod { font-size: var(--fs-small); color: var(--charcoal); }
.sgh-pager { display: flex; gap: 14px; align-items: center; margin-top: 14px; font-size: var(--fs-small); }
@media (max-width: 820px) { .sgh-library-body { grid-template-columns: 1fr; } .sgh-library-facets { display: flex; flex-wrap: wrap; gap: 4px 14px; } .sgh-library-facets ul { display: flex; flex-wrap: wrap; gap: 4px; } .sgh-library-facets h2 { width: 100%; } .sgh-doc-list li { grid-template-columns: 1fr; } }
.sgh-article.is-tool { max-width: var(--maxw); padding: 0 20px; }
.sgh-article.is-tool .sgh-article-body { font-size: var(--fs-body); line-height: 1.55; }
.sgh-article.is-tool .sgh-article-body > p:first-child { max-width: 76ch; }
.sgh-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 18px 0; }
.sgh-contact-grid p { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.foot-contact { font-size: var(--fs-small); line-height: 1.6; margin: 12px 0 0; }

/* ---------- solutions: component list ---------- */
.sgh-parts { margin: 14px 0 6px; }
.sgh-parts h3 { font-size: var(--fs-body); margin: 18px 0 8px; }
.sgh-part-list { list-style: none; counter-reset: part; margin: 0; padding: 0; display: grid; gap: 10px; }
.sgh-part-list > li { counter-increment: part; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 10px; }
.sgh-part-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.sgh-part-head strong::before { content: counter(part) ". "; color: var(--slate); font-weight: 600; }
.sgh-part-head span { font-size: var(--fs-small); color: var(--charcoal); }
.sgh-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sgh-mini { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: var(--fs-small); }
.sgh-mini .img img { width: 44px; height: 44px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; display: block; }
.sgh-mini .t a { font-weight: 600; text-decoration: none; color: var(--ink); }
.sgh-mini .t small { display: block; font-family: var(--mono); font-size: var(--fs-micro); color: var(--slate); }
.sgh-mini .p { font-weight: 600; white-space: nowrap; }
.sgh-mini .add { font-size: var(--fs-micro); white-space: nowrap; }
.sgh-part-list .more { display: inline-block; margin-top: 6px; font-size: var(--fs-small); }
.sgh-parts-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 4px; }
@media (max-width: 600px) { .sgh-mini { grid-template-columns: 40px minmax(0, 1fr); } .sgh-mini .p, .sgh-mini .add { grid-column: 2; } }

/* ---------- catalogue UI: MRP, key specs, siblings, relationships, FAQs ---------- */
.sgh-mrp { display: inline-block; font-size: var(--fs-small); font-weight: 400; color: var(--slate); margin-left: 6px; }
.sgh-mrp del { color: var(--slate); }
.sgh-mrp .off { color: var(--ok); font-weight: 600; margin-left: 4px; }
.sgh-keyspecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; margin: 12px 0; padding: 12px 14px; background: var(--ground); border-radius: var(--radius); font-size: var(--fs-small); }
.sgh-keyspecs div { display: flex; flex-direction: column; }
.sgh-keyspecs dt { color: var(--slate); font-size: var(--fs-micro); }
.sgh-keyspecs dd { margin: 0; font-weight: 600; }
.sgh-siblings { margin: 10px 0; }
.sgh-siblings .lbl { display: block; font-size: var(--fs-micro); font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
.sgh-siblings div { display: flex; flex-wrap: wrap; gap: 6px; }
.sgh-siblings .chip { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--fs-small); text-decoration: none; color: var(--ink); }
.sgh-siblings .chip.on { border-color: var(--charcoal); background: var(--charcoal); color: var(--paper); }
.sgh-series-link { font-size: var(--fs-small); margin: 8px 0; }
.sgh-compare-toggle { padding: 4px 0; font-size: var(--fs-small); }
.sgh-compare-toggle.on::before, .sgh-card-compare.on::before { content: "\2713 "; }
.sgh-rel h3 { font-size: var(--fs-body); margin: 16px 0 8px; }
.sgh-rel-note { list-style: none; font-size: var(--fs-micro); color: var(--slate); margin: -2px 0 6px 54px; }
.sgh-faqs details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.sgh-faqs summary { cursor: pointer; font-weight: 600; }
.sgh-faqs details p { margin: 8px 0 0; }

/* ---------- listings: compare, view switch, technical table ---------- */
.sgh-card-compare { background: none; border: 0; padding: 4px 0; font-size: var(--fs-micro); color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; }
.sgh-viewswitch { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; margin: 0 0 14px 12px; vertical-align: middle; }
.sgh-viewswitch a { padding: 5px 12px; font-size: var(--fs-small); text-decoration: none; color: var(--charcoal); }
.sgh-viewswitch a + a { border-left: 1px solid var(--line-strong); }
.sgh-viewswitch a[aria-current] { background: var(--charcoal); color: var(--paper); }
.sgh-tech-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-small); margin-bottom: 18px; }
.sgh-tech-table th { text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); padding: 9px 10px; background: var(--ground); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sgh-tech-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sgh-tech-table .prod a { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); font-weight: 600; min-width: 240px; }
.sgh-tech-table .prod img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.sgh-tech-table small { display: block; font-family: var(--mono); font-size: var(--fs-micro); color: var(--slate); font-weight: 400; }
.sgh-tech-table .price { font-weight: 600; white-space: nowrap; }
.na { color: var(--line-strong); }

/* ---------- compare page and tray ---------- */
.sgh-compare-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottom-bar); background: var(--paper); border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 20px rgba(30,30,28,.08); }
.sgh-compare-tray[hidden] { display: none; }
.sgh-compare-tray .wrap { display: flex; align-items: center; gap: 10px; padding-block: 10px; flex-wrap: wrap; }
.sgh-compare-tray .items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.sgh-compare-tray .it { background: var(--ground); border-radius: var(--radius-sm); padding: 4px 4px 4px 10px; font-size: var(--fs-small); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgh-compare-tray .it button { background: none; border: 0; font-size: var(--fs-body); color: var(--slate); }
.sgh-compare-tray .hint { font-size: var(--fs-small); color: var(--slate); align-self: center; }
.sgh-compare-tray .go.disabled { pointer-events: none; opacity: .5; }
/* One bottom-bar slot on phones: where the page has its own bar (product buy bar, configurator
   total, quote list), the tray folds into a "Compare N" pill that sits just above that bar
   (sgh.js measures the bar and sets --bar-h). The pill is never orange: the page bar keeps the
   only primary action at the bottom. */
.sgh-compare-tray .go .n { display: none; }
@media (max-width: 760px) {
  .sgh-compare-tray.is-pill { left: auto; right: 16px; bottom: calc(var(--bar-h, 0px) + 12px); border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 6px 18px rgba(30,30,28,.14); transition: bottom .15s ease; }
  .sgh-compare-tray.is-pill .wrap { padding: 0; width: auto; }
  .sgh-compare-tray.is-pill .items, .sgh-compare-tray.is-pill .clear { display: none; }
  .sgh-compare-tray.is-pill .go { min-height: 44px; padding: 0 18px; gap: 8px; background: var(--paper); color: var(--ink); border: 0; border-radius: 999px; box-shadow: none; }
  .sgh-compare-tray.is-pill .go .n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--fs-micro); font-weight: 700; }
  .sgh-compare-tray.is-pill .go.disabled { opacity: 1; color: var(--slate); }
  .sgh-compare-tray.is-pill .go.disabled .n { background: var(--slate); }
}
@media (prefers-reduced-motion: reduce) { .sgh-compare-tray.is-pill { transition: none; } }
@media print { .sgh-compare-tray, .sgh-compare-tools { display: none !important; } }

/* ---------- homepage v2 ---------- */
.hero-v2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 28px; align-items: start; padding-block: 34px 10px; }
.hero-v2 h1 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: balance; }
.hero-search { display: flex; gap: 8px; margin: 18px 0 8px; max-width: 640px; }
.hero-search input { flex: 1; min-width: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 13px 14px; font: inherit; font-size: 16px; background: var(--paper); }
.hero-try { font-size: var(--fs-small); color: var(--slate); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.hero-try a { color: var(--charcoal); }
.hero-procure { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 14px; }
.hero-procure h2 { font-size: var(--fs-body); margin: 0 0 10px; }
.hero-procure ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hero-procure a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.hero-procure a:hover { background: var(--ground); }
.hero-procure strong { display: block; font-size: var(--fs-body); }
.hero-procure span { display: block; font-size: var(--fs-small); color: var(--slate); }
.hero-procure-foot { font-size: var(--fs-micro); color: var(--slate); margin: 10px 10px 0; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.home-head h2 { margin: 0; }
.home-head a { font-size: var(--fs-small); font-weight: 600; }
.cat-tile .n { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--slate); margin-top: 2px; }
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.series-card { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; text-decoration: none; color: var(--ink); }
.series-card img { width: 56px; height: 56px; object-fit: contain; }
.series-card small { display: block; color: var(--slate); }
.gym-band { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; background: var(--panel); color: var(--panel-ink); border-radius: var(--radius); padding: 24px 26px; }
.gym-band .eyebrow { color: var(--panel-mute); }
.gym-band h2 { color: var(--paper); margin: 4px 0 8px; }
.gym-band p { max-width: 70ch; margin: 0; }
.gym-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gym-band .btn-secondary { background: transparent; color: var(--paper); border-color: var(--panel-mute); }
.home-resources { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.guide-list { margin: 0; padding-left: 18px; columns: 2 220px; }
.guide-list li { margin-bottom: 6px; }
.doc-search-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.doc-search-card h2 { margin: 0 0 6px; font-size: var(--fs-h3); }
.trust-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trust-strip li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: var(--fs-small); }
.trust-strip strong { display: block; margin-bottom: 2px; }
.trust-strip span { color: var(--charcoal); }
@media (max-width: 900px) { .hero-v2, .home-resources { grid-template-columns: 1fr; } .trust-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust-strip { grid-template-columns: 1fr; } .hero-search { flex-direction: column; } }
.sgh-ws-card .sgh-quote-form { border: 0; padding: 0; max-width: none; background: none; }
.sgh-brand-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.sgh-brand-nav a { border: 1px solid var(--line-strong); background: var(--paper); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-small); text-decoration: none; color: var(--ink); }
.sgh-brand-nav a.docs { border-color: var(--charcoal); }
.sgh-series-brand { font-size: var(--fs-small); color: var(--charcoal); margin: 0 0 12px; }

/* ---------- B2B operations: quote acceptance, fulfilment, preferences ---------- */
.sgh-accept { flex-direction: column; align-items: stretch; }
.sgh-po-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sgh-po input[type=file] { width: 220px; padding: 6px; }
.sgh-po-note textarea { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 10px; font: inherit; width: 100%; max-width: 560px; }
.sgh-accept .btn-primary { align-self: flex-start; }
.sgh-alt-approve { border: 1px solid var(--warn); background: var(--warn-bg); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0; }
.sgh-alt-approve legend { font-weight: 700; padding: 0 4px; }
.sgh-alt-approve ul { margin: 4px 0 8px; padding-left: 18px; font-size: var(--fs-small); }
.sgh-buy-notes { font-size: var(--fs-small); color: var(--slate); margin: 10px 0 0; line-height: 1.5; }
.sgh-buy-notes a { color: var(--orange-press); }
.sgh-line-state { font-size: var(--fs-micro); font-weight: 600; color: var(--warn); margin-top: 2px; }
.sgh-shipments, .sgh-po-files { margin-top: 22px; }
.sgh-shipments ol { padding-left: 20px; }
.sgh-shipments li { margin-bottom: 8px; }
.sgh-cancel-req { margin-top: 14px; }
.sgh-cancel-req summary { list-style: none; display: inline-block; }
.sgh-cancel-req ul { list-style: none; padding: 0; }
.sgh-pref-list { list-style: none; padding: 0; margin: 0 0 16px; }
.sgh-pref-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .sgh-po input, .sgh-po input[type=file] { width: 100%; } .sgh-po-grid .sgh-po { flex: 1 1 100%; } }
body:not(.sgh-v2) .sgh-main > .sgh-crumbs, body:not(.sgh-v2) .sgh-main > .wrap.sgh-crumbs { padding-inline: 0; }