/* SGH design system v2 components (2026-11-10). Tokens live in sgh-tokens.css (the only :root).
   New page sections use the x- prefix so they never collide with legacy classes. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
.x-page { color: var(--ink); }
.x-page img { max-width: 100%; display: block; }
/* SGH design system v2 (proposal). Single light look: the storefront is not theme-switched. */
.x-page img { max-width: 100%; display: block; }
.x-page .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.x-page h1, .x-page h2, .x-page h3 { font-family: var(--display); letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.x-page .eyebrow { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); margin: 0 0 12px; }
.x-page .mono { font-family: var(--mono); font-size: .92em; }
/* ---------- Button: one component (design audit step 5) ----------
   Sizes: .btn--sm 36, md 44 (default), .btn--lg 48. Variants: .btn-primary (orange, the one main action
   in a view), .btn-secondary (outlined), .btn-quiet (text), .btn-on-dark (outlined on charcoal bands).
   WooCommerce buttons map onto the same rules; the body carries woocommerce-block-theme-has-button-styles
   so WooCommerce's own button colours step aside without !important. */
.btn, .btn-quiet, .button, .single_add_to_cart_button, .wc-block-components-button:not(.is-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-md); margin: 0; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: var(--radius-2); background: var(--paper); color: var(--ink);
  font: 600 var(--fs-body)/1.2 var(--sans); letter-spacing: 0; text-align: center; text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn .icon, .button .icon { width: 18px; height: 18px; flex: none; }
.btn--sm, .btn-sm { min-height: var(--btn-sm); padding: 0 14px; font-size: var(--fs-small); gap: 6px; }
.btn--lg { min-height: var(--btn-lg); padding: 0 28px; }
.btn-primary, .button.alt, .single_add_to_cart_button, .woocommerce-form-login__submit, .woocommerce-Button, .wc-block-components-button.contained:not(.is-link) { background: var(--orange-press); border-color: var(--orange-press); color: var(--paper); }
.btn-primary:hover, .button.alt:hover, .single_add_to_cart_button:hover, .woocommerce-form-login__submit:hover, .woocommerce-Button:hover, .wc-block-components-button.contained:not(.is-link):hover { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--paper); }
.btn-secondary, .button:not(.alt), .wc-block-components-button.outlined { background: var(--paper); border-color: var(--charcoal); color: var(--ink); }
.btn-secondary:hover, .button:not(.alt):hover, .wc-block-components-button.outlined:hover { background: var(--ground); border-color: var(--ink); color: var(--ink); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink); padding-inline: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.btn-quiet:hover { color: var(--orange-press); }
.btn-on-dark, .btn-ghost-dark { background: transparent; border-color: color-mix(in srgb, var(--panel-ink) 35%, var(--panel)); color: var(--panel-ink); }
.btn-on-dark:hover, .btn-ghost-dark:hover { border-color: var(--panel-ink); color: var(--panel-ink); }
a.btn-primary, a.btn-primary:visited { color: var(--paper); }
a.btn-secondary, a.btn-secondary:visited, a.btn-quiet, a.btn-quiet:visited { color: var(--ink); }
a.btn-on-dark, a.btn-on-dark:visited { color: var(--panel-ink); }
.btn:focus-visible, .button:focus-visible, .single_add_to_cart_button:focus-visible, .wc-block-components-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"], .button:disabled, .button.disabled { opacity: .5; cursor: not-allowed; }
/* A variable product's main action never reads as a grey, disabled "Buy online": it keeps its colour,
   and a press before an option is chosen points to the options (sgh.js). */
.single_add_to_cart_button.disabled.wc-variation-selection-needed { opacity: 1; cursor: pointer; }
.sgh-choose-hint { flex: 1 0 100%; margin: 0 0 4px; font-size: var(--fs-small); font-weight: 600; color: var(--warn); }
.x-page .icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* utility bar + header */
.x-util { background: var(--panel); color: var(--panel-mute); font-size: var(--fs-small); }
/* hero */
.x-hero { background: var(--panel); color: var(--panel-ink); overflow: hidden; }
.x-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--s5); padding-block: 72px 64px; align-items: center; }
.x-hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; font-weight: 800; }
.x-hero h1 em { font-style: normal; color: var(--orange); }
.x-hero .x-lead { font-size: var(--fs-h3); color: var(--panel-mute); margin: 20px 0 28px; max-width: 54ch; }
.x-hero-search { display: flex; background: var(--paper); border-radius: var(--radius); padding: 6px; gap: 6px; max-width: 600px; }
.x-hero-search input { flex: 1; min-width: 0; border: 0; font: 16px var(--sans); padding: 0 14px; color: var(--ink); background: transparent; }
.x-hero-search input:focus { outline: none; }
.x-hero-search:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.x-hero-try { font-size: var(--fs-small); color: var(--panel-mute); margin: 14px 0 30px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.x-hero-try a { color: var(--panel-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--panel-ink) 32%, var(--panel)); }
.x-routes { display: flex; flex-wrap: wrap; gap: 12px; }
.x-hero-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.x-hw { background: var(--ground); border-radius: var(--radius); padding: 10px 10px 12px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .15s; }
.x-hw:hover { transform: translateY(-2px); }
.x-hw img { aspect-ratio: 1; object-fit: contain; width: 100%; mix-blend-mode: multiply; }
.x-hw b { font: 700 var(--fs-micro)/1.2 var(--display); margin-top: 6px; }
.x-hw span { font-size: var(--fs-micro); color: var(--slate); }
.x-hw.x-tall { grid-row: span 2; justify-content: center; }
.x-hw.x-tall img { aspect-ratio: auto; }
/* section scaffolding */
.x-sec { padding-block: var(--s6) 0; }
.x-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.x-sec-head h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 800; max-width: 22ch; }
.x-sec-head p { margin: 10px 0 0; color: var(--slate); max-width: 60ch; }
.x-sec-head .x-more { font-weight: 600; color: var(--orange-press); text-decoration: none; white-space: nowrap; }
.x-sec-head .x-more:hover { text-decoration: underline; }
/* departments */
.x-depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.x-dept { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.x-dept-img { background: var(--ground-2); aspect-ratio: 4 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 14px; }
.x-dept-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.x-dept-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.x-dept h3 { font-size: 20px; font-weight: 800; }
.x-dept h3 a { text-decoration: none; }
.x-dept h3 a:hover { color: var(--orange-press); }
.x-dept ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.x-dept li a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--fs-body); }
.x-dept li a:hover { color: var(--orange-press); }
.x-dept li .x-n { color: var(--slate); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.x-dept .x-all { margin-top: auto; font-weight: 600; color: var(--orange-press); text-decoration: none; font-size: var(--fs-body); }
.x-also { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: var(--fs-small); color: var(--slate); }
.x-also a { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; text-decoration: none; color: var(--ink); font-weight: 600; }
/* ranges */
.x-ranges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.x-range { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; position: relative; min-width: 0; }
.x-range .x-go { margin-top: auto; }
.x-range:hover { border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(30,30,28,.07); }
.x-range .x-brandline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; min-width: 0; }
.x-range .x-ct { white-space: nowrap; }
.x-range .x-brandline img { height: 22px; width: auto; max-width: 110px; object-fit: contain; }
.x-range .x-wordmark { font: 800 var(--fs-body)/1 var(--display); letter-spacing: .02em; }
.x-range .x-ct { font-size: var(--fs-micro); color: var(--slate); }
.x-range .x-pic { aspect-ratio: 1.25; background: var(--ground); border-radius: var(--radius-sm); padding: 12px; overflow: hidden; }
.x-range .x-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.x-range h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; }
.x-range ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--charcoal); display: grid; gap: 4px; }
.x-range li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--orange); margin-right: 8px; vertical-align: 2px; }
.x-range .x-go { font-weight: 600; font-size: var(--fs-small); color: var(--orange-press); }
/* solutions */
.x-sol-band { background: var(--paper); border-block: 1px solid var(--line); margin-top: var(--s6); padding-block: var(--s6); }
.x-sol-band .x-sec-head { margin-top: 0; }
.x-sols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.x-sol { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; background: var(--paper); }
.x-sol:hover { border-color: var(--line-strong); }
.x-sol-vis { background: linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%); aspect-ratio: 16 / 8; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 16px 16px 0; position: relative; }
.x-sol-vis img { height: 88%; width: auto; max-width: 46%; object-fit: contain; mix-blend-mode: multiply; }
.x-sol-vis .x-tag { position: absolute; top: 12px; left: 12px; font: 600 var(--fs-micro)/1 var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--charcoal); }
.x-sol-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.x-sol h3 { font-size: 19px; font-weight: 800; }
.x-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--charcoal); }
.x-flow span { background: var(--ground); border-radius: 4px; padding: 3px 8px; }
.x-flow i { font-style: normal; color: var(--slate); }
.x-sol .x-brands { margin-top: auto; font-size: var(--fs-micro); color: var(--slate); }
.x-sol .x-brands b { color: var(--ink); font-weight: 600; }
/* project band */
.x-proj { background: var(--panel); color: var(--panel-ink); border-radius: 14px; padding: 44px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; }
.x-proj h2 { font-size: var(--fs-h2); font-weight: 800; }
.x-proj p { color: var(--panel-mute); }
.x-paths { display: grid; gap: 12px; }
.x-path { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--panel-ink); }
.x-path:hover { border-color: var(--orange); }
.x-path .x-ic { width: 44px; height: 44px; border-radius: 8px; background: var(--panel-line); display: grid; place-items: center; color: var(--orange); }
.x-path b { font: 700 var(--fs-body)/1.2 var(--display); display: block; }
.x-path small { color: var(--panel-mute); font-size: var(--fs-small); }
.x-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; font-size: var(--fs-small); }
.x-steps span { border: 1px solid var(--panel-line); border-radius: 999px; padding: 5px 11px; color: var(--panel-ink); }
.x-steps span:first-child { border-color: var(--orange); }
/* brands */
.x-brand-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.x-bw { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); height: 92px; display: grid; place-items: center; padding: 18px; text-decoration: none; position: relative; }
.x-bw:hover { border-color: var(--line-strong); }
.x-bw img { max-height: 34px; max-width: 80%; width: auto; object-fit: contain; }
.x-bw.x-lead { grid-column: span 2; height: 120px; }
.x-bw.x-lead img { max-height: 44px; }
.x-bw .x-wm { font: 800 19px/1 var(--display); color: var(--charcoal); letter-spacing: .01em; }
.x-bw .x-flag { position: absolute; bottom: 6px; right: 8px; font-size: var(--fs-micro); color: var(--warn); }
.x-brand-foot { margin-top: 14px; color: var(--slate); font-size: var(--fs-small); }
/* gymntry */
.x-gym { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; background: var(--orange-tint); border: 1px solid var(--orange-line); border-radius: 14px; padding: 26px 30px; }
.x-gym .x-badge { width: 58px; height: 58px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; color: var(--orange-press); border: 1px solid var(--orange-line); }
.x-gym h3 { font-size: 22px; font-weight: 800; }
.x-gym p { margin: 6px 0 0; color: var(--charcoal); max-width: 70ch; }
.x-gym .x-acts { display: flex; gap: 10px; flex-wrap: wrap; }
/* guides */
.x-guides { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.x-guide-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 22px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.x-guide-list a { display: flex; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: var(--fs-body); }
.x-guide-list a:hover { color: var(--orange-press); }
.x-guide-list a span { font: 700 var(--fs-micro)/1 var(--sans); color: var(--slate); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.x-docs { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.x-docs h3 { font-size: 20px; font-weight: 800; }
.x-docs p { margin: 0; color: var(--slate); }
.x-docs form { display: flex; gap: 8px; }
.x-docs input { flex: 1; min-width: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 11px 12px; font: inherit; }
.x-doc-types { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); }
.x-doc-types a { border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; text-decoration: none; }
/* trust + footer */
.x-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-top: var(--s6); }
.x-trust div { padding: 22px 22px; border-right: 1px solid var(--line); }
.x-trust div:last-child { border-right: 0; }
.x-trust b { display: block; font: 700 var(--fs-body)/1.3 var(--display); margin-bottom: 6px; }
.x-trust span { color: var(--slate); font-size: var(--fs-small); }
/* review notes (mockup only) */
.x-note { font: 12px/1.4 var(--mono); color: var(--warn); background: var(--warn-bg); border: 1px dashed var(--warn-line); border-radius: 6px; padding: 6px 10px; margin-top: 12px; }
@media (max-width: 1100px) {
.x-ranges {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-depts {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-brand-wall {grid-template-columns: repeat(4, minmax(0, 1fr));}
}
@media (max-width: 900px) {
.x-hero .wrap {grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 44px 40px;}
.x-sols {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-proj {grid-template-columns: 1fr; padding: 28px; gap: 24px;}
.x-guides {grid-template-columns: 1fr;}
.x-trust {grid-template-columns: 1fr 1fr;}
.x-trust div:nth-child(2) {border-right: 0;}
.x-trust div:nth-child(-n+2) {border-bottom: 1px solid var(--line);}
.x-gym {grid-template-columns: 1fr;}
}
@media (max-width: 600px) {
.x-hero .x-lead {font-size: var(--fs-body);}
.x-hero-wall {grid-template-columns: repeat(3, 1fr); gap: 8px;}
.x-hw b {font-size: var(--fs-micro);}
.x-hw span {display: none;}
.x-routes .btn {flex: 1 1 100%;}
.x-depts, .x-sols {grid-template-columns: minmax(0, 1fr);}
.x-ranges {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.x-range {padding: 12px; gap: 8px;}
.x-range h3 {font-size: var(--fs-body);}
.x-range ul li + li, .x-range .x-ct {display: none;}
.x-range ul {font-size: var(--fs-micro);}
.x-range .x-go {font-size: var(--fs-small);}
.x-hw.x-tall, .x-hw:last-child {display: none;}
.x-hero-search .btn {padding: 0 14px;}
.x-hero-search .btn .icon {display: none;}
.x-dept-img {aspect-ratio: 16 / 7;}
.x-brand-wall {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-bw.x-lead {grid-column: span 2;}
.x-guide-list {grid-template-columns: 1fr;}
.x-trust {grid-template-columns: 1fr;}
.x-trust div {border-right: 0; border-bottom: 1px solid var(--line);}
.x-trust div:last-child {border-bottom: 0;}
.x-path {grid-template-columns: 40px 1fr;}
.x-path .x-arr {display: none;}
.x-docs form {flex-direction: column;}
}
/* brand page components (shared by all brand pages; per-brand art direction via .x-bhero-<slug>) */
.x-crumbs { display: flex; gap: 8px; font-size: var(--fs-small); color: var(--slate); padding-block: 14px; }
.x-crumbs a { color: var(--slate); }
.x-bhero { background: var(--panel); color: var(--panel-ink); }
.x-bhero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 56px; }
.x-bhero-zk { background: radial-gradient(ellipse at 85% 30%, color-mix(in srgb, var(--ok) 20%, var(--panel)) 0%, var(--panel) 60%); }
.x-bhero-logo { height: 40px; width: auto; margin-bottom: 22px; }
.x-bhero h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.06; font-weight: 800; }
.x-bhero .x-lead { color: var(--panel-mute); font-size: var(--fs-h3); margin: 18px 0 26px; max-width: 58ch; }
.x-bhero-facts { list-style: none; padding: 0; margin: 28px 0 0; display: flex; gap: 28px; flex-wrap: wrap; }
.x-bhero-facts b { display: block; font: 800 28px/1 var(--display); color: var(--paper); }
.x-bhero-facts span { font-size: var(--fs-small); color: var(--panel-mute); }
.x-bhero-vis { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a b c" "a d d"; gap: 12px; height: 420px; }
.x-bv-1 { grid-area: a; }
.x-bv-2 { grid-area: b; }
.x-bv-3 { grid-area: c; }
.x-bv-4 { grid-area: d; }
.x-bv { background: var(--ground); border-radius: 12px; padding: 14px; display: grid; place-items: center; overflow: hidden; }
.x-bv img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.x-note-dark { background: var(--panel-2); color: var(--warn-line); border-color: var(--warn); margin-top: 0; margin-bottom: 18px; }
.x-jumpbar { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 68px; z-index: var(--z-sticky); }
.x-jumpbar .wrap { display: flex; gap: 26px; overflow-x: auto; }
.x-jumpbar a { padding: 14px 0; font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); text-decoration: none; white-space: nowrap; border-bottom: 2.5px solid transparent; }
.x-jumpbar a:hover { border-bottom-color: var(--orange); }
.x-fams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.x-fam { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.x-fam:hover { border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(30,30,28,.07); }
.x-fam-lg { grid-column: span 2; flex-direction: row; }
.x-fam-pic { background: var(--ground); display: grid; grid-template-columns: 1fr 1fr; padding: 14px; gap: 4px; aspect-ratio: 16 / 9; }
.x-fam-lg .x-fam-pic { width: 46%; aspect-ratio: auto; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.x-fam-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; min-height: 0; }
.x-fam-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.x-fam h3 { font-size: 19px; font-weight: 800; }
.x-fam p { margin: 0; color: var(--slate); font-size: var(--fs-small); }
.x-fam-links { list-style: none; padding: 0; margin: 6px 0 0; font-size: var(--fs-small); }
.x-fam-links li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.x-fam-links span { color: var(--slate); font-size: var(--fs-small); }
.x-cmp-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.x-cmp { width: 100%; border-collapse: collapse; min-width: 760px; font-size: var(--fs-small); }
.x-cmp th, .x-cmp td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.x-cmp thead th { font: 700 var(--fs-body)/1.2 var(--display); vertical-align: bottom; background: var(--paper); }
.x-cmp thead th img { height: 96px; width: auto; margin-bottom: 8px; mix-blend-mode: multiply; }
.x-cmp thead th:first-child, .x-cmp tbody th { width: 170px; color: var(--slate); font: 700 var(--fs-micro)/1.3 var(--sans); text-transform: uppercase; letter-spacing: .1em; }
.x-cmp tbody tr:last-child th, .x-cmp tbody tr:last-child td { border-bottom: 0; }
.x-sys { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 36px; align-items: center; }
.x-sys h2 { font-size: var(--fs-h2); font-weight: 800; }
.x-sys-copy p { color: var(--charcoal); }
.x-sys-copy .x-small { font-size: var(--fs-small); color: var(--slate); }
.x-sys-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.x-sys-flow li { background: var(--ground); border-radius: var(--radius); padding: 14px; position: relative; display: flex; flex-direction: column; gap: 6px; }
.x-sys-flow li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50px; width: 10px; height: 2px; background: var(--orange); }
.x-sf-ic { height: 92px; display: grid; place-items: center; }
.x-sf-ic img { max-height: 92px; width: auto; mix-blend-mode: multiply; }
.x-sys-flow b { font: 800 var(--fs-body)/1.2 var(--display); counter-increment: s; }
.x-sys-flow b::before { content: counter(s) ". "; color: var(--orange-press); }
.x-sys-flow small { color: var(--slate); font-size: var(--fs-micro); }
.x-mini-sols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.x-mini-sols a { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 10px 10px; text-decoration: none; }
.x-mini-sols a:hover { border-color: var(--line-strong); }
.x-mini-sols img { width: 76px; height: 76px; object-fit: contain; background: var(--ground); border-radius: 6px; mix-blend-mode: multiply; }
.x-mini-sols b { display: block; font: 700 var(--fs-body)/1.2 var(--display); }
.x-mini-sols small { color: var(--slate); font-size: var(--fs-small); }
.x-docband { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; background: var(--orange-tint); border: 1px solid var(--orange-line); border-radius: 14px; padding: 32px; align-items: center; }
.x-docband h2 { font-size: var(--fs-h2); font-weight: 800; }
.x-docband p { color: var(--charcoal); margin-bottom: 0; }
.x-docband-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.x-docband-links a:not(.btn) { color: var(--orange-press); font-weight: 600; }
.x-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; }
.x-tabs button { border: 1px solid var(--line-strong); background: var(--paper); border-radius: 999px; padding: 9px 15px; font-weight: 600; font-size: var(--fs-small); white-space: nowrap; color: var(--ink); }
.x-tabs button span { color: var(--slate); font-weight: 400; margin-left: 4px; }
.x-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.x-tabs button[aria-selected="true"] span { color: var(--line-strong); }
.x-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.x-pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.x-pc-img { display: block; aspect-ratio: 1; background: var(--paper); border-radius: 6px; padding: 8px; }
.x-pc-img img { width: 100%; height: 100%; object-fit: contain; }
.x-pc-model { margin: 6px 0 0; color: var(--slate); font-size: var(--fs-micro); }
.x-pcard h3 { font: 700 var(--fs-body)/1.3 var(--display); min-height: 2.6em; }
.x-pcard h3 a { text-decoration: none; }
.x-pcard h3 a:hover { color: var(--orange-press); }
.x-pc-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.x-pc-specs li { font-size: var(--fs-micro); background: var(--ground); border-radius: 4px; padding: 2px 7px; color: var(--charcoal); }
.x-pc-price { margin: auto 0 4px; padding-top: 8px; font-size: var(--fs-small); color: var(--slate); }
.x-pc-price b { font: 800 19px/1 var(--display); color: var(--ink); }
.x-pc-quote { font-weight: 600; color: var(--charcoal); font-size: var(--fs-small); }
.x-cat-foot { display: flex; gap: 16px; align-items: center; margin-top: 20px; flex-wrap: wrap; color: var(--slate); font-size: var(--fs-small); }
@media (max-width: 1100px) {
.x-fams {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-pgrid {grid-template-columns: repeat(3, minmax(0, 1fr));}
.x-sys {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 900px) {
.x-bhero .wrap {grid-template-columns: minmax(0, 1fr);}
.x-bhero-vis {height: 300px;}
.x-jumpbar {top: 60px;}
.x-mini-sols {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-docband {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 600px) {
.x-fams {grid-template-columns: minmax(0, 1fr);}
.x-fam-lg {grid-column: auto; flex-direction: column;}
.x-fam-lg .x-fam-pic {width: auto; aspect-ratio: 16 / 9; grid-template-columns: 1fr 1fr; grid-template-rows: none;}
.x-sys {padding: 22px;}
.x-sys-flow {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-sys-flow li::after {display: none;}
.x-mini-sols {grid-template-columns: minmax(0, 1fr);}
.x-pgrid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.x-pcard {padding: 10px;}
.x-pcard h3 {font-size: var(--fs-small);}
.x-bhero-vis {height: 240px;}
.x-bhero-facts {gap: 18px;}
.x-bhero-facts b {font-size: 22px;}
}
/* solution page */
.x-shero { background: var(--paper); border-bottom: 1px solid var(--line); }
.x-shero .wrap { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-block: 40px 52px; }
.x-shero h1 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; line-height: 1.05; }
.x-shero .x-lead { font-size: var(--fs-h3); color: var(--charcoal); margin: 16px 0 18px; max-width: 54ch; }
.x-fit { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.x-fit li { background: var(--ground); border-radius: 999px; padding: 6px 12px; font-size: var(--fs-small); font-weight: 600; }
.x-brands-line { margin-top: 20px; font-size: var(--fs-small); color: var(--slate); }
.x-brands-line a { color: var(--ink); font-weight: 600; }
.x-door-fig { margin: 0; }
.x-door-fig svg { width: 100%; height: auto; display: block; }
.x-door-fig figcaption { margin-top: 12px; }
.x-callouts { list-style: none; counter-reset: c; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: var(--fs-small); }
.x-callouts li { counter-increment: c; display: flex; gap: 8px; align-items: baseline; }
.x-callouts li::before { content: counter(c); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-press); color: var(--paper); font: 800 var(--fs-micro)/20px var(--display); text-align: center; }
.x-illus { display: block; margin-top: 8px; font-size: var(--fs-micro); color: var(--slate); }
.x-steps4 { list-style: none; counter-reset: s4; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.x-steps4 li { counter-increment: s4; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--radius); padding: 18px; }
.x-steps4 b { display: block; font: 800 var(--fs-h3)/1.2 var(--display); margin-bottom: 6px; }
.x-steps4 b::before { content: counter(s4, decimal-leading-zero) "  "; color: var(--orange-press); }
.x-steps4 span { color: var(--charcoal); font-size: var(--fs-small); }
.x-setbox { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.x-set-table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.x-set-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 560px; }
.x-set-table th, .x-set-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.x-set-table thead th { font: 700 var(--fs-micro)/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.x-set-table .x-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.x-set-table tfoot th { text-align: right; font-weight: 600; }
.x-set-table tfoot td b { font: 800 20px/1 var(--display); }
.x-pn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-press); color: var(--paper); font: 800 var(--fs-micro)/1 var(--display); margin-right: 8px; }
.x-prow { display: flex; gap: 12px; align-items: center; }
.x-prow img { width: 52px; height: 52px; object-fit: contain; flex: none; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.x-prow a { font-weight: 600; text-decoration: none; }
.x-prow a:hover { color: var(--orange-press); }
.x-prow small { display: block; color: var(--slate); font-size: var(--fs-micro); }
.x-set-side { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.x-set-side h3 { font-size: var(--fs-h3); font-weight: 800; }
.x-omit { margin: 0; padding-left: 18px; font-size: var(--fs-small); display: grid; gap: 6px; }
.x-chk { margin: 0; background: var(--orange-tint); border-radius: 6px; padding: 10px 12px; font-size: var(--fs-small); }
.x-hint { font-size: var(--fs-micro); color: var(--slate); }
.x-plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.x-plat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.x-plat img { height: 120px; width: 100%; object-fit: contain; }
.x-plat h3 { font-size: var(--fs-h3); font-weight: 800; }
.x-plat p { margin: 6px 0 0; font-size: var(--fs-small); color: var(--charcoal); }
.x-plat-p { color: var(--slate) !important; }
.x-plat-p b { font: 800 var(--fs-h3)/1 var(--display); color: var(--ink); }
.x-plat .btn { margin-top: auto; align-self: flex-start; }
.x-acc { display: grid; gap: 8px; }
.x-acc details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; }
.x-acc summary { cursor: pointer; padding: 15px 0; font: 700 var(--fs-body)/1.3 var(--display); list-style: none; display: flex; justify-content: space-between; }
.x-acc summary::after { content: "+"; color: var(--orange-press); font-size: 20px; line-height: 1; }
.x-acc details[open] summary::after { content: "\2212"; }
.x-acc details p { margin: 0 0 16px; color: var(--charcoal); max-width: 80ch; }
.x-small-note { font-size: var(--fs-small); color: var(--slate); margin-top: 14px; }
.x-needs { margin: 14px 0 0; padding-left: 18px; color: var(--panel-ink); display: grid; gap: 6px; font-size: var(--fs-body); }
@media (max-width: 1000px) {
.x-shero .wrap {grid-template-columns: minmax(0, 1fr);}
.x-setbox {grid-template-columns: minmax(0, 1fr);}
.x-steps4 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-plats {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 600px) {
.x-steps4 {grid-template-columns: minmax(0, 1fr);}
.x-callouts {grid-template-columns: repeat(2, minmax(0, 1fr));}
.x-plat {flex-direction: column;}
}
/* additions for live templates */
.x-page .x-eyebrow-on-dark { color: var(--orange); }
.x-page .x-wordmark { font: 800 var(--fs-body)/1 var(--display); letter-spacing: .02em; color: var(--charcoal); }
.x-bw .x-wordmark { font-size: 19px; }
.x-bw.x-lead .x-wordmark { font-size: 22px; }
.x-bw.x-dark { background: var(--panel); border-color: var(--panel); }
.x-bw.x-dark .x-wordmark { color: var(--paper); }
.x-range .x-brandline img { height: 22px; width: auto; max-width: 110px; object-fit: contain; }
.x-bw img { height: auto; }
.x-guide-list a { min-width: 0; }
.x-sol-vis img, .x-dept-img img, .x-pic img, .x-hw img { height: auto; }
.x-dept-img img, .x-pic img { height: 100%; }
.x-hero .screen-reader-text, .x-page .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* homepage: the hero search replaces the header search on wide screens */
/* header search stays visible on every page */
/* v2 pages run edge to edge: the legacy .sgh-main column is released on these pages */
body.sgh-v2 .sgh-main { max-width: none; padding: 0; }
body.sgh-v2 .x-page { padding-bottom: 8px; }
.x-hero-wall { grid-auto-rows: 1fr; }
.x-hw.x-tall img { aspect-ratio: auto; height: 0; flex: 1 1 auto; min-height: 0; }
.x-range .x-wordmark { text-transform: none; }
/* brand landing (live template) */
.x-brand .x-bhero { margin-top: 0; }
.x-bhero-name { font: 800 28px/1 var(--display); color: var(--paper); margin: 0 0 18px; }
.x-bhero-logo { max-width: 220px; object-fit: contain; object-position: left; }
.x-bhero-vis.x-n1 { grid-template-columns: 1fr; grid-template-areas: "a"; }
.x-bhero-vis.x-n2 { grid-template-columns: 1fr 1fr; grid-template-areas: "a b"; grid-template-rows: 1fr; }
.x-bhero-vis.x-n3 { grid-template-columns: 1.2fr 1fr; grid-template-areas: "a b" "a c"; }
.x-bv img { height: 100%; }
.x-jumpbar { top: 0; }
.x-fam-pic { display: grid; }
.x-fam h3 a { text-decoration: none; }
.x-fam h3 a:hover { color: var(--orange-press); }
.x-fam-links li { padding: 0; }
.x-fam-links li a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; text-decoration: none; width: 100%; }
.x-fam-links li a:hover { color: var(--orange-press); }
.x-cmp thead th a { text-decoration: none; display: block; }
.x-cmp thead th img { height: 96px; width: auto; display: block; margin-bottom: 8px; }
.x-mini-sols.x-text-only a { grid-template-columns: 1fr; padding: 14px 16px; }
.x-cat-head { padding-top: var(--s5); padding-bottom: 12px; }
.x-cat-head h2 { font: 800 var(--fs-h2)/1.1 var(--display); margin: 0; }
body.sgh-v2 .listing { max-width: var(--maxw, 1220px); margin: 0 auto; padding: 0 20px 40px; }
body.sgh-v2 .sgh-crumbs { padding-top: 12px; }
/* solution pages (live template) */
.x-shero .x-routes .btn-secondary { background: var(--paper); }
.x-door-fig svg { width: 100%; height: auto; display: block; }
.x-sol-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.x-sv { background: var(--ground); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.x-sv img { width: 100%; aspect-ratio: 1.2; object-fit: contain; mix-blend-mode: multiply; }
.x-sv span { font: 700 var(--fs-small)/1.2 var(--display); text-align: center; }
.x-plat > img { height: 120px; width: 100%; object-fit: contain; }
.x-plat h3 a { text-decoration: none; }
.x-prow img { width: 52px; height: 52px; object-fit: contain; flex: none; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
body.sgh-v2 .sgh-article.is-solution { max-width: 820px; margin: 0 auto var(--s4, 40px); padding: 0 20px; }
body.sgh-v2 .sgh-crumbs { max-width: var(--maxw, 1220px); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
/* batch 2 */
@media (min-width: 901px) { .x-gym { grid-template-columns: auto minmax(0, 1fr) auto; } }
.x-gym-logo { width: 190px; height: auto; }
@media (max-width: 900px) { .x-gym-logo { width: 160px; } }
@media (prefers-reduced-motion: reduce) { .x-page *, .x-page *::before { transition: none !important; } }
.x-bhero-logo { background: var(--paper); padding: 10px 16px; border-radius: 8px; box-sizing: content-box; max-height: 40px; width: auto; }
.x-bhero-zkteco .x-bhero-logo { background: none; padding: 0; }

/* ===================================================================================
   Batch 3: product cards (every WooCommerce loop) and the single product page.
   "Technical gallery": white image surfaces on the warm ground, charcoal type and
   controls, orange only for the purchase action. Cards: ul.products.sgh-cards.
   =================================================================================== */

/* ---------- cards ---------- */
ul.products.sgh-cards { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 16px; }
ul.products.sgh-cards > li.product { width: auto; float: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; overflow: hidden; transition: border-color .15s ease; }
ul.products.sgh-cards > li.product:hover { border-color: var(--line-strong); }
ul.products.sgh-cards li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; padding: 0 16px; text-decoration: none; color: var(--ink); }
ul.products.sgh-cards li.product .sgh-card-media { display: block; aspect-ratio: 1; margin: 0 -16px; padding: 8%; background: var(--paper); overflow: hidden; }
ul.products.sgh-cards li.product .sgh-card-media img { display: block; width: 100%; height: 100%; margin: 0; padding: 0; object-fit: contain; background: none; border-radius: 0; box-shadow: none; transition: transform .3s ease; }
ul.products.sgh-cards li.product:hover .sgh-card-media img { transform: scale(1.025); }
ul.products.sgh-cards li.product .sgh-card-media .sgh-photo-pending { height: 100%; padding: 0; gap: 10px; }
.sgh-card-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 12px; line-height: 1.3; }
.sgh-card-id .b { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal); }
.sgh-card-id .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-micro); color: var(--slate); }
.sgh-card-id .b + .m { padding-left: 8px; border-left: 1px solid var(--line-strong); }
ul.products.sgh-cards li.product h2.woocommerce-loop-product__title { margin: 5px 0 0; padding: 0; font: 600 var(--fs-body)/1.35 var(--display); letter-spacing: -0.005em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.05em; text-wrap: pretty; }
ul.products.sgh-cards li.product a.woocommerce-loop-product__link:hover h2.woocommerce-loop-product__title { color: var(--orange-press); }
.sgh-card-specs { margin: 12px 16px 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; line-height: 1.3; }
.sgh-card-specs div { min-width: 0; }
.sgh-card-specs dt { font-size: var(--fs-micro); color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgh-card-specs dd { margin: 1px 0 0; font-size: var(--fs-small); color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgh-card-price { margin: auto 16px 0; padding-top: 14px; display: flex; flex-direction: column; gap: 2px; }
ul.products.sgh-cards li.product .sgh-card-price .price { display: block; margin: 0; color: var(--ink); font: 700 var(--fs-h3)/1.25 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
ul.products.sgh-cards li.product .sgh-card-price .price .from { margin: 0; font: 400 var(--fs-micro) var(--sans); letter-spacing: 0; text-transform: none; color: var(--slate); }
ul.products.sgh-cards li.product .sgh-card-price .woocommerce-price-suffix { font: 400 var(--fs-micro) var(--sans); letter-spacing: 0; color: var(--slate); margin-left: 3px; }
ul.products.sgh-cards li.product .sgh-card-price .sgh-mrp { display: block; margin: 1px 0 0; font: 400 var(--fs-micro)/1.3 var(--sans); letter-spacing: 0; }
ul.products.sgh-cards li.product .sgh-card-price .sgh-mrp .off { display: none; }
ul.products.sgh-cards li.product .sgh-card-price .sgh-por { font: 600 var(--fs-body)/1.25 var(--sans); letter-spacing: 0; color: var(--charcoal); }
.sgh-card-stock { font-size: var(--fs-micro); font-weight: 600; color: var(--warn); }
.sgh-card-stock.is-out { color: var(--slate); }
.sgh-card-actions { display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; }
/* compare sits quietly on the image corner, so every card keeps one full-width primary action */
ul.products.sgh-cards li.product .sgh-card-actions .sgh-card-compare { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .92); font-size: var(--fs-micro); }
/* one calm action style on every card; orange is kept for the product page purchase action */
ul.products.sgh-cards li.product .sgh-card-actions .button { display: inline-flex; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 12px; font-size: var(--fs-small); }
ul.products.sgh-cards li.product .sgh-card-actions .button.loading { opacity: .6; }
ul.products.sgh-cards li.product .sgh-card-actions .added_to_cart { font-size: var(--fs-micro); font-weight: 600; color: var(--orange-press); white-space: nowrap; }
ul.products.sgh-cards li.product .sgh-card-actions .button.added { display: none; }
/* compare control (cards and product page) */
.sgh-card-compare { display: inline-flex; align-items: center; gap: 7px; flex: none; background: none; border: 0; padding: 6px 0; font: 400 var(--fs-micro)/1 var(--sans); color: var(--slate); text-decoration: none; cursor: pointer; }
.sgh-card-compare .box { position: relative; flex: none; width: 15px; height: 15px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--paper); transition: border-color .15s ease, background-color .15s ease; }
.sgh-card-compare:hover { color: var(--ink); }
.sgh-card-compare:hover .box { border-color: var(--ink); }
.sgh-card-compare[aria-pressed="true"] { color: var(--ink); }
.sgh-card-compare[aria-pressed="true"] .box { background: var(--ink); border-color: var(--ink); }
.sgh-card-compare[aria-pressed="true"] .box::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 4px; height: 8px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sgh-card-compare.on::before, .sgh-compare-toggle.on::before { content: none; }
/* list view */
body.sgh-view-list ul.products.sgh-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.sgh-view-list ul.products.sgh-cards > li.product { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 210px; grid-template-areas: "link specs price" "link specs actions"; align-items: center; }
body.sgh-view-list ul.products.sgh-cards li.product a.woocommerce-loop-product__link { grid-area: link; display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 18px; padding: 12px 16px; }
body.sgh-view-list ul.products.sgh-cards li.product .sgh-card-media { grid-row: 1 / -1; aspect-ratio: 1; margin: 0; padding: 8%; }
body.sgh-view-list .sgh-card-id { grid-column: 2; grid-row: 2; margin: 0; }
body.sgh-view-list ul.products.sgh-cards li.product h2.woocommerce-loop-product__title { grid-column: 2; grid-row: 3; min-height: 0; }
body.sgh-view-list .sgh-card-specs { grid-area: specs; margin: 0; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--line); }
body.sgh-view-list .sgh-card-price { grid-area: price; margin: 0; padding: 14px 16px 0; align-self: end; }
body.sgh-view-list .sgh-card-actions { grid-area: actions; align-self: start; }
body.sgh-view-list ul.products.sgh-cards li.product .sgh-card-actions .sgh-card-compare { position: static; background: none; padding: 6px 0; }

/* ---------- single product: two columns ---------- */
.single-product div.product { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); column-gap: 56px; align-items: start; margin-top: 6px; }
.single-product div.product > * { grid-column: 1 / -1; min-width: 0; }
.single-product.woocommerce div.product > div.woocommerce-product-gallery { grid-column: 1; grid-row: 1; width: auto; float: none; margin: 0; position: sticky; top: 16px; }
.single-product.woocommerce div.product > div.summary { grid-column: 2; grid-row: 1; width: auto; float: none; margin: 0; padding-top: 4px; }
/* gallery */
.single-product div.product div.woocommerce-product-gallery { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.single-product div.product div.woocommerce-product-gallery .flex-viewport, .single-product div.product .woocommerce-product-gallery__wrapper { border-radius: 6px; }
.single-product div.product .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--paper); }
.single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs { display: flex; gap: 8px; margin: 16px 0 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li { flex: none; width: 68px; float: none; margin: 0; }
.single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img { width: 68px; height: 68px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 4px; opacity: 1; transition: border-color .15s ease; }
.single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img:hover { border-color: var(--line-strong); }
.single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active { border: 1.5px solid var(--ink); }
.single-product div.product .woocommerce-product-gallery__trigger { top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); box-shadow: none; font-size: 0; }
.single-product div.product .woocommerce-product-gallery .sgh-photo-pending { height: auto; aspect-ratio: 1; border: 0; }
/* identity row */
.sgh-pdp-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.sgh-pdp-id .sgh-brand-identity.sgh-pdp-brand { min-height: 0; padding: 6px 10px; border-radius: 6px; }
.sgh-pdp-id .sgh-brand-identity.sgh-pdp-brand img { height: 22px; width: auto; max-width: 132px; }
.sgh-pdp-id .sgh-brand-identity.sgh-pdp-brand span { font: 800 var(--fs-small)/1 var(--display); color: var(--ink); }
.sgh-pdp-model { font-size: var(--fs-small); color: var(--slate); }
.sgh-pdp-model .v { font-family: var(--mono); font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; }
.sgh-life { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: var(--fs-micro); font-weight: 600; color: var(--charcoal); }
.sgh-life::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.sgh-life.is-current::before, .sgh-life.is-new::before { background: var(--ok); }
.sgh-life.is-last::before, .sgh-life.is-ended::before { background: var(--warn); }
.sgh-life.is-ended { color: var(--warn); }
/* title, price, summary text */
.single-product div.product .summary .product_title { margin: 0 0 14px; font: 700 clamp(26px, 2.5vw, 34px)/1.12 var(--display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.single-product div.product .summary p.price { margin: 0 0 18px; color: var(--ink); font: 700 30px/1.15 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.single-product div.product .summary p.price .woocommerce-price-suffix { font: 400 var(--fs-small) var(--sans); letter-spacing: 0; color: var(--slate); margin-left: 4px; }
.single-product div.product .summary p.price .sgh-mrp { display: block; margin: 4px 0 0; font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0; }
.single-product div.product .summary p.price .sgh-por { font: 700 24px/1.2 var(--display); color: var(--ink); }
.single-product div.product .summary .woocommerce-product-details__short-description { max-width: 62ch; margin: 0 0 16px; font-size: var(--fs-body); line-height: 1.6; color: var(--charcoal); }
.single-product div.product .summary .woocommerce-product-details__short-description p { margin: 0 0 8px; }
.single-product .summary .sgh-keyfacts { margin: 0 0 16px; gap: 6px; }
.single-product .summary .sgh-keyfacts span { padding: 3px 10px; font-size: var(--fs-micro); background: var(--paper); }
.single-product .summary .sgh-keyspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0 0 18px; padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--line); }
.single-product .summary .sgh-keyspecs div { padding: 9px 0; border-bottom: 1px solid var(--line); }
.single-product .summary .sgh-keyspecs dt { font-size: var(--fs-micro); color: var(--slate); }
.single-product .summary .sgh-keyspecs dd { font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.single-product .summary .sgh-siblings { margin: 0 0 16px; }
.single-product .summary .sgh-series-link { margin: 0 0 16px; color: var(--slate); }
.single-product .summary .sgh-series-link a { color: var(--ink); }
/* configuration controls */
.single-product div.product form.cart { margin: 4px 0 0; }
.single-product div.product form.cart table.variations { width: 100%; margin: 0 0 6px; border: 0; }
.single-product div.product form.cart table.variations tr { display: block; margin: 0 0 14px; }
.single-product div.product form.cart table.variations th, .single-product div.product form.cart table.variations td { display: block; padding: 0; text-align: left; line-height: 1.4; border: 0; }
.single-product div.product form.cart table.variations th.label label { display: block; margin: 0 0 8px; font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); }
.single-product div.product form.cart table.variations th.label label::first-letter { text-transform: uppercase; }
.single-product div.product form.cart table.variations td.value select { min-width: 220px; max-width: 100%; height: 44px; background-color: var(--paper); }
.sgh-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sgh-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); font: 400 var(--fs-small)/1.2 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.sgh-choice:hover { border-color: var(--ink); }
.sgh-choice[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sgh-choice:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.sgh-choice .sw { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.sgh-choice[aria-pressed="true"] .sw { box-shadow: 0 0 0 1.5px var(--paper); }
.single-product div.product form.cart select.sgh-choice-src { position: absolute; width: 1px; height: 1px; min-width: 0; opacity: 0; pointer-events: none; }
.single-product div.product form.cart .reset_variations { display: inline-block; margin-top: 8px; font-size: var(--fs-small); color: var(--slate); }
.single-product div.product .single_variation_wrap .woocommerce-variation-price .price { font: 700 22px/1.2 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.single-product div.product .single_variation_wrap .woocommerce-variation-price .price .woocommerce-price-suffix { font: 400 var(--fs-small) var(--sans); color: var(--slate); }
.single-product div.product .single_variation_wrap .woocommerce-variation-description p { margin: 4px 0; font-size: var(--fs-small); color: var(--charcoal); }
.single-product div.product .stock { font-size: var(--fs-small); font-weight: 600; color: var(--ok); margin: 0 0 10px; }
.single-product div.product .stock.out-of-stock { color: var(--slate); }
.single-product div.product .stock.available-on-backorder { color: var(--warn); }
/* buy actions */
.single-product div.product form.cart .single_add_to_cart_button { flex: 1 1 180px; min-height: var(--btn-lg); }
.single-product div.product form.cart .quantity .qty { height: 48px; }
.single-product div.product form.cart .sgh-add-quote { height: 48px; flex: 0 1 auto; }
.single-product .summary .sgh-quote-cta { margin: 16px 0 0; }
.single-product .summary .sgh-quote-cta .btn { min-height: var(--btn-lg); padding: 0 32px; }
.single-product .summary .sgh-enquiry-note { margin: 0 0 4px; padding: 0; background: none; font-size: var(--fs-small); color: var(--slate); }
.sgh-quote-options { display: grid; gap: 12px; margin: 0 0 16px; }
.sgh-quote-options .lbl { display: block; margin: 0 0 6px; font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); }
.sgh-quote-options ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.sgh-quote-options li { padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--fs-small); }
/* assurance panel */
.sgh-assure { list-style: none; margin: 22px 0 0; padding: 2px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.sgh-assure li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.5; color: var(--charcoal); }
.sgh-assure li:last-child { border-bottom: 0; }
.sgh-assure .icon { width: 19px; height: 19px; margin-top: 1px; color: var(--ink); }
.sgh-assure b { display: block; font-weight: 600; color: var(--ink); }
.sgh-assure a { color: var(--orange-press); }
.sgh-pdp-tools { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; }
.sgh-pdp-tools .sgh-card-compare { font-size: var(--fs-small); }
.single-product div.product .product_meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--slate); }
.single-product div.product .product_meta > span { display: block; }
.single-product div.product .product_meta a { color: var(--charcoal); }
.single-product div.product .product_meta .tagged_as { display: none; }
.single-product div.product .product_meta .sku { font-size: var(--fs-micro); color: var(--ink); }
/* jump bar and stacked sections */
.sgh-pdp-nav { position: sticky; top: 0; z-index: var(--z-sticky); margin: 56px 0 0; background: var(--ground); border-bottom: 1px solid var(--line); }
.sgh-pdp-nav div { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.sgh-pdp-nav a { padding: 14px 0 12px; border-bottom: 2px solid transparent; font: 600 var(--fs-small)/1 var(--sans); color: var(--charcoal); text-decoration: none; white-space: nowrap; }
.sgh-pdp-nav a:hover { border-bottom-color: var(--orange); color: var(--ink); }
.single-product .sgh-pdp-sec { margin: 0; padding-top: 44px; scroll-margin-top: 48px; }
.single-product .sgh-pdp-sec > h2, .single-product .sgh-sec-head h2, .single-product .related > h2, .single-product .upsells > h2 { margin: 0 0 14px; font: 800 var(--fs-h2)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.single-product .sgh-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin: 0 0 16px; }
.single-product .sgh-sec-head h2 { margin: 0; }
.single-product .sgh-sec-head .src { margin: 0; font-size: var(--fs-small); color: var(--slate); }
.single-product .sgh-pdp-description { max-width: 860px; font-size: var(--fs-body); line-height: 1.65; color: var(--charcoal); }
.single-product .sgh-pdp-description ul { padding-left: 20px; }
.single-product .sgh-pdp-description li { margin: 4px 0; }
.single-product .sgh-pdp-description img { height: auto; }
.sgh-spec-list { margin: 0; padding: 4px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); columns: 2; column-gap: 48px; }
.sgh-spec-list > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: var(--fs-small); line-height: 1.5; }
.sgh-spec-list dt { color: var(--slate); }
.sgh-spec-list dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sgh-spec-list > div.wide { column-span: all; border-bottom: 0; grid-template-columns: minmax(0, .42fr) minmax(0, 1.58fr); }
.sgh-spec-list > div.wide a { color: var(--orange-press); }
.sgh-more-attrs { margin: 12px 0 0; font-size: var(--fs-small); }
.sgh-more-attrs summary { cursor: pointer; color: var(--charcoal); font-weight: 600; padding: 6px 0; }
.sgh-more-attrs table.woocommerce-product-attributes { margin: 8px 0 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.sgh-doc-group + .sgh-doc-group { margin-top: 26px; }
.sgh-doc-group h3 { margin: 0 0 2px; font: 700 var(--fs-body)/1.3 var(--display); color: var(--ink); }
.sgh-doc-group .sub { margin: 0 0 12px; font-size: var(--fs-small); color: var(--slate); }
.sgh-pdp-docs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.sgh-pdp-docs li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease; }
.sgh-pdp-docs li:hover { border-color: var(--ink); }
.sgh-pdp-docs .icon { width: 22px; height: 22px; color: var(--charcoal); }
.sgh-doc-group.is-family .sgh-pdp-docs .icon, .sgh-doc-group.is-regional .sgh-pdp-docs .icon { color: var(--slate); }
.sgh-pdp-docs .t { min-width: 0; }
.sgh-pdp-docs .t > a { font-weight: 600; font-size: var(--fs-small); line-height: 1.4; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.sgh-pdp-docs .t > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sgh-pdp-docs .t small { display: block; margin-top: 3px; font-size: var(--fs-micro); color: var(--slate); }
.sgh-pdp-docs .src-link { position: relative; z-index: 1; color: var(--slate); }
.sgh-pdp-docs .get { font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); white-space: nowrap; }
.sgh-compat-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sgh-compat-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600; }
.sgh-compat-list .status { font-size: var(--fs-micro); font-weight: 600; color: var(--ok); }
.single-product .sgh-rel h3 { margin: 18px 0 8px; font: 700 var(--fs-body)/1.3 var(--display); }
.single-product .sgh-rel .sgh-mini-list { padding: 4px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); gap: 0; }
.single-product .sgh-rel .sgh-mini { padding: 10px 0; }
.single-product .sgh-rel .sgh-mini-list > li + li.sgh-mini { border-top: 1px solid var(--line); }
.single-product .sgh-rel .sgh-rel-note { margin-top: -4px; padding-bottom: 10px; }
.single-product .sgh-rel .sgh-mini .p { font-variant-numeric: tabular-nums; }
.single-product .sgh-rel .sgh-mini .add { color: var(--orange-press); font-weight: 600; }
.single-product .sgh-setup { margin: 0; }
.single-product .sgh-setup-card .price { font-variant-numeric: tabular-nums; }
.single-product .sgh-faqs details { margin: 0 0 8px; padding: 0 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.single-product .sgh-faqs summary { padding: 14px 0; font-weight: 600; font-size: var(--fs-body); }
.single-product .sgh-faqs details p { margin: 0 0 16px; color: var(--charcoal); max-width: 80ch; }
.single-product .related, .single-product .upsells { padding-top: 48px; }
/* product page: tablet and phone */
@media (max-width: 960px) {
  .single-product div.product { grid-template-columns: minmax(0, 1fr); }
  .single-product.woocommerce div.product > div.woocommerce-product-gallery { position: static; grid-column: 1; grid-row: auto; margin: 0 0 22px; }
  .single-product.woocommerce div.product > div.summary { grid-column: 1; grid-row: auto; }
  .sgh-spec-list { columns: 1; }
  .sgh-pdp-docs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .single-product div.product div.woocommerce-product-gallery { padding: 10px; }
  .single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs { margin-top: 10px; }
  .single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li, .single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img { width: 54px; height: 54px; }
  .single-product div.product .summary .product_title { font-size: 24px; }
  .single-product div.product .summary p.price { font-size: 26px; margin-bottom: 14px; }
  .single-product div.product .summary .woocommerce-product-details__short-description { font-size: var(--fs-body); }
  .single-product .summary .sgh-keyspecs { gap: 0 16px; }
  .single-product div.product form.cart .sgh-add-quote { flex: 1 1 100%; }
  .single-product .summary .sgh-quote-cta .btn { width: 100%; }
  .sgh-assure { padding: 2px 14px; }
  .sgh-pdp-nav { margin-top: 36px; }
  .sgh-pdp-nav div { gap: 22px; }
  .single-product .sgh-pdp-sec { padding-top: 34px; }
  .sgh-spec-list { padding: 2px 14px; }
  .sgh-spec-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; font-size: var(--fs-small); }
  .sgh-spec-list > div.wide { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sgh-pdp-docs li { grid-template-columns: 20px minmax(0, 1fr); }
  .sgh-pdp-docs .get { grid-column: 2; }
}
/* cards: phone */
@media (max-width: 600px) {
  ul.products.sgh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  ul.products.sgh-cards li.product a.woocommerce-loop-product__link { padding: 0 12px; }
  ul.products.sgh-cards li.product .sgh-card-media { aspect-ratio: 1; margin: 0 -12px; padding: 8%; }
  .sgh-card-id { flex-wrap: wrap; gap: 1px 8px; }
  .sgh-card-id .b { max-width: 100%; font-size: var(--fs-micro); }
  .sgh-card-id .m { flex-basis: 100%; font-size: var(--fs-micro); }
  .sgh-card-id .b + .m { padding-left: 0; border-left: 0; }
  ul.products.sgh-cards li.product h2.woocommerce-loop-product__title { font-size: var(--fs-small); -webkit-line-clamp: 3; min-height: 4.05em; }
  .sgh-card-specs { margin: 10px 12px 0; padding-top: 8px; gap: 6px; }
  .sgh-card-specs dd { font-size: var(--fs-micro); }
  .sgh-card-specs div:nth-child(3) { display: none; }
  .sgh-card-price { margin: auto 12px 0; padding-top: 10px; }
  ul.products.sgh-cards li.product .sgh-card-price .price { font-size: var(--fs-h3); }
  .sgh-card-actions { padding: 10px 12px 12px; }
  ul.products.sgh-cards li.product .sgh-card-actions .sgh-card-compare { top: 4px; right: 4px; padding: 6px; }
  ul.products.sgh-cards li.product .sgh-card-actions .sgh-card-compare .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.sgh-view-list ul.products.sgh-cards > li.product { display: flex; }
  body.sgh-view-list ul.products.sgh-cards li.product a.woocommerce-loop-product__link { display: flex; padding: 0 12px; }
  body.sgh-view-list .sgh-card-specs { border-left: 0; padding: 8px 0 0; margin: 10px 12px 0; border-top: 1px solid var(--line); }
  body.sgh-view-list .sgh-card-price { margin: auto 12px 0; padding: 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  ul.products.sgh-cards li.product:hover .sgh-card-media img { transform: none; }
  ul.products.sgh-cards li.product, .sgh-card-media img, .sgh-choice, .sgh-pdp-docs li, .sgh-card-compare .box { transition: none; }
}

/* Solution modules: feature cards, diagram figures, hardware roles, FAQs (config-driven, inc/solution.php) */
.x-sol-fig { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2); max-width: 440px; justify-self: end; }
.x-sol-fig svg { display: block; width: 100%; height: auto; }
.x-sol-fig figcaption { margin-top: var(--s1); }
.x-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.x-feat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; gap: 10px; }
.x-feat h3 { margin: 0; font: 700 19px/1.25 var(--display); }
.x-feat p { margin: 0; color: var(--charcoal); font-size: var(--fs-body); }
.x-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.x-fig { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.x-fig-art svg { display: block; width: 100%; height: auto; }
.x-fig h3 { margin: 0 0 8px; font: 700 19px/1.25 var(--display); }
.x-fig p { margin: 0; color: var(--charcoal); font-size: var(--fs-body); }
.x-hwgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.x-hwc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); min-width: 0; }
.x-hwc:hover { border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(30,30,28,.07); }
.x-hwc-img { aspect-ratio: 1; background: var(--ground); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.x-hwc-img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.x-hwc b { font-size: var(--fs-body); line-height: 1.35; }
.x-hwc small { color: var(--slate); font-size: var(--fs-small); line-height: 1.45; flex: 1; }
.x-hwc-p { font-weight: 600; font-size: var(--fs-small); }
.x-faq { display: grid; gap: 10px; max-width: 900px; }
.x-faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--s3); }
.x-faq summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; font-weight: 600; font-size: var(--fs-body); position: relative; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font: 400 24px/1 var(--sans); color: var(--orange-press); }
.x-faq details[open] summary::after { content: "\2212"; }
.x-faq details p { margin: 0 0 18px; color: var(--charcoal); }
@media (max-width: 1024px) { .x-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x-figs { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .x-feats { grid-template-columns: 1fr; } .x-fig { grid-template-columns: 1fr; } .x-sol-fig { justify-self: stretch; max-width: none; } }
/* ---------- SGH Assistance panels (phase 1, behind the "assistance" flag) ----------
   Contextual, not a chat: search "Narrow this down", product "Setup and documents", quote list "Check my list". */
.x-assist { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--orange-press); border-radius: var(--radius); padding: 18px 20px 14px; margin: 20px 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; }
.x-assist-head { margin-bottom: 10px; }
.x-assist-tag { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); margin: 0 0 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.x-assist-tag span { letter-spacing: .04em; text-transform: none; font-weight: 600; color: var(--slate); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 8px; }
.x-assist h2 { font-family: var(--display, var(--sans)); font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; margin: 0; letter-spacing: -0.005em; }
.x-assist-lead { margin: 4px 0 0; color: var(--slate); font-size: var(--fs-small); }
.x-assist-body { border-top: 1px solid var(--line); padding-top: 12px; }
.x-assist-body:empty { display: none; }
.x-assist-body p { margin: 0 0 10px; }
.x-assist-body h3 { font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; margin: 14px 0 6px; color: var(--charcoal); }
.x-assist.is-busy .x-assist-body { opacity: .55; }
.x-assist-q { font-weight: 600; }
.x-assist-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.x-assist-opts button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 999px; font: 600 var(--fs-small)/1.25 var(--sans); text-align: left; max-width: 100%; }
.x-assist-opts button:hover { border-color: var(--ink); }
.x-assist-opts button span { font: 600 var(--fs-micro)/1 var(--mono); color: var(--slate); background: var(--ground); border-radius: 999px; padding: 3px 7px; }
.x-assist-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 12px; background: var(--ground); border-radius: var(--radius-sm); margin: 0 0 10px; }
.x-assist-card .nm { font-weight: 600; text-decoration: none; grid-column: 1; }
.x-assist-card .nm:hover { text-decoration: underline; }
.x-assist-card .meta { grid-column: 1; font-size: var(--fs-micro); color: var(--slate); }
.x-assist-card .mono { font-family: var(--mono); font-size: var(--fs-micro); }
.x-assist-card .life { border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.x-assist-card .price { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
.x-assist-card .price small { display: block; color: var(--slate); font-size: var(--fs-micro); }
.x-assist-card .stock { grid-column: 2; grid-row: 2; text-align: right; font-size: var(--fs-micro); color: var(--ok); }
.x-assist-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; margin: 0 0 10px; }
.x-assist-facts div { border-bottom: 1px solid var(--line); padding: 4px 0; }
.x-assist-facts dt { font-size: var(--fs-micro); color: var(--slate); }
.x-assist-facts dd { margin: 0; font-weight: 600; font-size: var(--fs-small); }
.x-assist ul.x-assist-list, .x-assist ul.x-assist-docs { list-style: none; margin: 0 0 10px; padding: 0; }
.x-assist-list li, .x-assist-docs li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.x-assist-list li:last-child, .x-assist-docs li:last-child { border-bottom: 0; }
.x-assist-list a, .x-assist-docs a, .x-assist-body p a { color: var(--orange-press); font-weight: 600; }
.x-assist-docs span { color: var(--slate); font-size: var(--fs-micro); }
.x-assist-table { overflow-x: auto; margin: 0 0 10px; -webkit-overflow-scrolling: touch; }
.x-assist-table table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-small); }
.x-assist-table th, .x-assist-table td { border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0; text-align: left; vertical-align: top; min-width: 120px; }
.x-assist-table thead th { font-weight: 600; }
.x-assist-table tbody th { color: var(--slate); font-weight: 400; }
.x-assist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.x-assist-actions > span { width: 100%; font-size: var(--fs-small); color: var(--slate); }
.x-assist-ask { margin-top: 12px; }
.x-assist-ask label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; }
.x-assist-ask .row { display: flex; gap: 8px; align-items: flex-start; }
.x-assist-ask input, .x-assist-ask textarea { flex: 1; min-width: 0; min-height: 42px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; font: 14.5px/1.4 var(--sans); background: var(--paper); color: var(--ink); }
.x-assist-ask textarea { font-family: var(--mono); font-size: 13.5px; resize: vertical; }
.x-assist-ask input:focus, .x-assist-ask textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.x-assist-foot { margin: 10px 0 0; font-size: var(--fs-micro); color: var(--slate); }
/* Product page entry: "Ask about this model", answered on demand, after the page's own sections. */
.x-assist--pdp { padding: 0; border-left: 1px solid var(--line); margin: 40px 0 8px; }
.x-assist--pdp > summary { list-style: none; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 20px; cursor: pointer; border-radius: var(--radius); }
.x-assist--pdp > summary::-webkit-details-marker { display: none; }
.x-assist-sum { display: grid; gap: 2px; flex: 1; min-width: 0; }
.x-assist-sum-t { font: 700 var(--fs-h3)/1.3 var(--display, var(--sans)); color: var(--ink); }
.x-assist-sum-d { font-size: var(--fs-small); line-height: 1.45; color: var(--slate); }
.x-assist--pdp > summary .icon { width: 20px; height: 20px; flex: none; color: var(--slate); transition: transform .2s ease; }
.x-assist--pdp[open] > summary .icon { transform: rotate(180deg); }
.x-assist--pdp > summary:hover .x-assist-sum-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.x-assist--pdp > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.x-assist--pdp .x-assist-in { padding: 4px 20px 16px; border-top: 1px solid var(--line); }
.x-assist--pdp .x-assist-ask { margin-top: 16px; }
.x-assist-prompts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.x-assist-prompts button { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); color: var(--ink); font: 600 var(--fs-small)/1.3 var(--sans); text-align: left; cursor: pointer; }
.x-assist-prompts button:hover { border-color: var(--ink); }
.x-assist-prompts a { font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); text-underline-offset: 3px; }
.x-assist-prompts button:focus-visible, .x-assist-prompts a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.x-assist--pdp .x-assist-body { margin-top: 16px; }
.x-assist--pdp .x-assist-foot { margin-top: 14px; }
@media (max-width: 760px) {
  .x-assist--pdp > summary { padding: 14px 16px; }
  .x-assist--pdp .x-assist-in { padding: 4px 16px 16px; }
}
@media (max-width: 600px) {
  .x-assist { padding: 14px 14px 12px; margin: 16px 0; }
  .x-assist-card { grid-template-columns: minmax(0, 1fr); }
  .x-assist-card .price, .x-assist-card .stock { grid-column: 1; grid-row: auto; text-align: left; }
  .x-assist-ask .row { flex-direction: column; align-items: stretch; }
  .x-assist-opts button { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .x-assist * { transition: none !important; } }
/* ===================================================================================
   Batch 4: storefront. Listing filters and drawer, neutral image tile, card identity and
   selling unit, category tiles, header Products toggle, information pages, brand
   directory, Solutions hub, account dashboard and the cart.
   =================================================================================== */

/* ---------- cards: keep the grid at phone widths (WooCommerce's small-screen 48% widths lose otherwise) ---------- */
.woocommerce ul.products.sgh-cards > li.product, .woocommerce-page ul.products.sgh-cards > li.product, .woocommerce ul.products.sgh-cards[class*=columns-] > li.product, .woocommerce-page ul.products.sgh-cards[class*=columns-] > li.product, .woocommerce ul.products.sgh-cards[class*=columns-] > li.product:nth-child(2n) { width: auto; float: none; margin: 0; clear: none; }
.woocommerce ul.products.sgh-cards::before, .woocommerce ul.products.sgh-cards::after { content: none; }

/* ---------- products without an image ---------- */
.sgh-noimg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; min-height: 160px; background: var(--ground); border-radius: 8px; color: var(--slate); font: 400 var(--fs-micro)/1.3 var(--sans); text-align: center; }
.sgh-noimg .icon { width: 44px; height: 44px; stroke-width: 1.3; color: var(--panel-mute); }
ul.products.sgh-cards li.product .sgh-card-media .sgh-noimg { min-height: 0; }
.woocommerce-product-gallery .sgh-noimg { aspect-ratio: 1; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.woocommerce-product-gallery .sgh-noimg .icon { width: 72px; height: 72px; }
ul.products.sgh-cards li.product .sgh-card-media img.sgh-sw-art { object-fit: cover; border-radius: 6px; }

/* ---------- card identity: brand, then the full model (wraps, never cut mid-code) ---------- */
.sgh-card-id { flex-wrap: wrap; row-gap: 2px; }
.sgh-card-id .m { flex: 0 1 auto; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sgh-card-unit { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ground); color: var(--charcoal); font: 600 var(--fs-micro)/1.5 var(--sans); }
@media (max-width: 600px) { .sgh-card-id .m { -webkit-line-clamp: 2; } }

/* ---------- listing filters ---------- */
.listing > .filters { align-self: start; }
.filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filters-head h2 { margin: 0 0 12px; }
.filters-close, .filters-foot, .sgh-filter-btn { display: none; }
.filters .fgroup .fsel { float: right; margin-top: 3px; font: 600 var(--fs-micro)/1 var(--sans); color: var(--orange-press); }
.sgh-filter-options { max-height: none; overflow: visible; }
.fopts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.fopts li[hidden] { display: none; }
.fopt { display: flex; align-items: center; gap: 9px; padding: 5px 4px; margin: 0 -4px; border-radius: 6px; color: var(--charcoal); text-decoration: none; font-size: var(--fs-small); line-height: 1.3; }
.fopt:hover { background: var(--ground); color: var(--ink); }
.fopt .box { flex: none; position: relative; width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--paper); }
.fopt.on .box { background: var(--ink); border-color: var(--ink); }
.fopt.on .box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fopt.on { color: var(--ink); font-weight: 600; }
.fopt .t { min-width: 0; overflow-wrap: anywhere; }
.fopt .n { margin-left: auto; padding-left: 8px; color: var(--slate); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.fsearch { width: 100%; margin: 0 0 8px; padding: 7px 10px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-small); background: var(--paper); }
.fmore { margin-top: 6px; padding: 4px 0; background: none; border: 0; color: var(--orange-press); font: 600 var(--fs-micro)/1.3 var(--sans); cursor: pointer; }
.fmore:hover { text-decoration: underline; }
.fnone { margin: 6px 0 0; font-size: var(--fs-micro); color: var(--slate); }
.sgh-js [data-fgroup]:not(.show-all):not(.searching) .fopts li.is-extra { display: none; }
.sgh-js [data-fgroup].searching .fmore { display: none; }
html:not(.sgh-js) .fmore, html:not(.sgh-js) .fsearch { display: none; }
.sgh-category-picker nav a[aria-current] { background: var(--ground); font-weight: 600; }

/* selected-filter chips above the products */
.filter-chips { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 16px; }
.filter-chips .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: var(--fs-micro); text-decoration: none; }
.filter-chips .chip .k { color: var(--slate); }
.filter-chips .chip .x { font-size: var(--fs-body); line-height: 1; color: var(--slate); }
.filter-chips .chip:hover { border-color: var(--ink); }
.filter-chips .chip:hover .x { color: var(--ink); }
.filter-chips .clear-all { margin-left: 4px; font-size: var(--fs-micro); font-weight: 600; color: var(--orange-press); }

/* phones and tablets: filters live in a drawer behind "Filters (n)" */
@media (max-width: 980px) {
  .sgh-filter-btn { display: inline-flex; align-items: center; gap: 7px; float: left; min-height: 38px; margin: 0 10px 12px 0; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 600 var(--fs-small)/1 var(--sans); }
  .sgh-filter-btn .icon { width: 18px; height: 18px; }
  .sgh-filter-btn .n { color: var(--orange-press); }
  .listing-main .woocommerce-result-count { line-height: 38px; }
  html.sgh-js .listing > .filters { position: fixed; top: 0; bottom: 0; left: 0; align-self: stretch; height: 100%; height: 100dvh; z-index: var(--z-drawer); width: min(88vw, 380px); margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--ground); box-shadow: 0 0 40px rgba(0,0,0,.18); transform: translateX(-104%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  html.sgh-js .listing > .filters.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
  html.sgh-js .filters-head { display: flex; position: sticky; top: 0; padding: 14px 16px 10px; background: var(--paper); border-bottom: 1px solid var(--line); }
  html.sgh-js .filters-head h2 { margin: 0; font-size: var(--fs-body); text-transform: none; letter-spacing: 0; color: var(--ink); }
  html.sgh-js .filters-close { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px -6px 0; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }
  html.sgh-js .filters-body { flex: 1; overflow-y: auto; padding: 14px 16px 6px; overscroll-behavior: contain; }
  html.sgh-js .filters-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); }
  html.sgh-js .filters-foot .btn { flex: 1; }
  .sgh-filters-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--scrim); }
  .sgh-filters-backdrop[hidden] { display: none; }
  html.sgh-drawer-open, html.sgh-drawer-open body { overflow: hidden; }
  html:not(.sgh-js) .sgh-filter-btn { display: none; }
}
/* Table view: the table takes the full width and the filters move into the same drawer as on phones
   (design audit step 9), so wide tables are not clipped. */
@media (min-width: 981px) {
  body.sgh-view-table .listing { grid-template-columns: minmax(0, 1fr); }
  body.sgh-view-table .sgh-filter-btn { display: inline-flex; align-items: center; gap: 7px; float: left; min-height: 38px; margin: 0 10px 12px 0; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 600 var(--fs-small)/1 var(--sans); }
  body.sgh-view-table .sgh-filter-btn .icon { width: 18px; height: 18px; }
  body.sgh-view-table .sgh-filter-btn .n { color: var(--orange-press); }
  body.sgh-view-table .listing-main .woocommerce-result-count { line-height: 38px; }
  html.sgh-js body.sgh-view-table .listing > .filters { position: fixed; top: 0; bottom: 0; left: 0; align-self: stretch; height: 100%; height: 100dvh; z-index: var(--z-drawer); width: min(88vw, 380px); margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--ground); box-shadow: 0 0 40px rgba(0,0,0,.18); transform: translateX(-104%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  html.sgh-js body.sgh-view-table .listing > .filters.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
  html.sgh-js body.sgh-view-table .filters-head { display: flex; position: sticky; top: 0; padding: 14px 16px 10px; background: var(--paper); border-bottom: 1px solid var(--line); }
  html.sgh-js body.sgh-view-table .filters-head h2 { margin: 0; font-size: var(--fs-body); text-transform: none; letter-spacing: 0; color: var(--ink); }
  html.sgh-js body.sgh-view-table .filters-close { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px -6px 0; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }
  html.sgh-js body.sgh-view-table .filters-body { flex: 1; overflow-y: auto; padding: 14px 16px 6px; overscroll-behavior: contain; }
  html.sgh-js body.sgh-view-table .filters-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); }
  html.sgh-js body.sgh-view-table .filters-foot .btn { flex: 1; }
  body.sgh-view-table .sgh-filters-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--scrim); }
  body.sgh-view-table .sgh-filters-backdrop[hidden] { display: none; }
  html.sgh-drawer-open, html.sgh-drawer-open body { overflow: hidden; }
  html:not(.sgh-js) body.sgh-view-table .sgh-filter-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { html.sgh-js .listing > .filters { transition: none; } }

/* ---------- category pages: subcategory tiles and buying guidance ---------- */
.sgh-subcats { clear: both; margin: 4px 0 18px; }
.sgh-subcats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.sgh-subcats a { display: flex; flex-direction: column; height: 100%; padding: 10px 12px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.sgh-subcats a:hover { border-color: var(--ink); }
.sgh-subcats .pic { display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 8px; }
.sgh-subcats .pic img { width: 100%; height: 100%; object-fit: contain; }
.sgh-subcats .pic .icon { width: 40px; height: 40px; stroke-width: 1.3; color: var(--slate); }
.sgh-subcats .nm { font: 600 var(--fs-small)/1.3 var(--display); }
.sgh-subcats .ct { margin-top: 2px; font-size: var(--fs-micro); color: var(--slate); }
.sgh-buyguide { clear: both; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 20px; margin: 0 0 20px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--orange-press); border-radius: var(--radius); }
.sgh-buyguide h2 { margin: 1px 0 0; font: 700 var(--fs-small)/1.4 var(--display); white-space: nowrap; }
.sgh-buyguide ul { margin: 0; padding: 0 0 0 16px; display: grid; gap: 3px; font-size: var(--fs-small); color: var(--charcoal); }
.sgh-buyguide a { font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); white-space: nowrap; }
@media (max-width: 700px) {
  .sgh-subcats ul { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .sgh-subcats li { flex: 0 0 132px; scroll-snap-align: start; }
  .sgh-buyguide { grid-template-columns: 1fr; padding: 12px 14px; }
}

/* ---------- header: Products link and its separate menu toggle ---------- */
.primary-nav li.has-mega { display: flex; align-items: center; gap: 0; }
.primary-nav .nav-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 2px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--charcoal); cursor: pointer; }
.primary-nav .nav-toggle .icon { width: 16px; height: 16px; transition: transform .15s ease; }
.primary-nav .nav-toggle:hover { background: var(--ground); color: var(--ink); }
.primary-nav .nav-toggle[aria-expanded="true"] { background: var(--ground); color: var(--ink); }
.primary-nav .nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .primary-nav > ul { gap: 20px; } .primary-nav .nav-toggle { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .primary-nav .nav-toggle .icon { transition: none; } }

/* ---------- information pages ---------- */
body.sgh-v2 .x-info { padding-bottom: var(--s5); }
.x-ihero { background: var(--paper); border-bottom: 1px solid var(--line); }
.x-ihero > .wrap { padding-block: 28px 32px; }
.x-ihero h1 { font: 800 clamp(30px, 3.8vw, 44px)/1.08 var(--display); letter-spacing: -0.015em; margin: 0; max-width: 24ch; }
.x-ihero .x-lead { margin: 14px 0 0; max-width: 62ch; font-size: var(--fs-h3); color: var(--charcoal); }
.x-ichips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.x-ichips a { padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 600; }
.x-ichips a:hover { border-color: var(--ink); }
.x-ibody { padding-top: 36px; }
.x-ibody.has-side { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.x-ibody:not(.has-side) > .x-prose:not(.is-tool) { max-width: 780px; }
.x-iside { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; display: grid; gap: 22px; font-size: var(--fs-small); scrollbar-width: thin; }
.x-toc summary { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); cursor: pointer; list-style: none; margin-bottom: 10px; }
.x-toc summary::-webkit-details-marker { display: none; }
.x-toc ol { list-style: none; margin: 0; padding: 0 0 0 2px; border-left: 2px solid var(--line); display: grid; }
.x-toc a { display: block; padding: 5px 0 5px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--charcoal); text-decoration: none; line-height: 1.35; }
.x-toc a:hover { color: var(--ink); border-left-color: var(--orange-press); }
.x-helpnav p { margin: 0 0 8px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.x-helpnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.x-helpnav a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--charcoal); text-decoration: none; }
.x-helpnav a:hover { background: var(--paper); color: var(--ink); }
.x-helpnav a[aria-current] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--orange-press); }
.x-prose { min-width: 0; color: var(--charcoal); font-size: var(--fs-body); line-height: 1.7; }
.x-prose > p:first-child { font-size: var(--fs-h3); color: var(--ink); }
.x-prose h2 { font: 800 clamp(21px, 2.2vw, 25px)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.x-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.x-prose h3 { font: 700 var(--fs-h3)/1.35 var(--display); color: var(--ink); margin: 24px 0 8px; }
.x-prose p { margin: 0 0 14px; max-width: 72ch; }
.x-prose ul, .x-prose ol { padding-left: 22px; margin: 0 0 18px; max-width: 72ch; }
.x-prose li { margin-bottom: 7px; }
.x-prose li::marker { color: var(--slate); }
.x-prose a:not(.btn) { color: var(--orange-press); }
.x-prose strong { color: var(--ink); }
.x-prose table { width: 100%; border-collapse: collapse; margin: 6px 0 22px; font-size: var(--fs-body); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; display: block; overflow-x: auto; }
.x-prose th { text-align: left; background: var(--ground); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.x-prose th, .x-prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.x-prose.is-tool { font-size: var(--fs-body); line-height: 1.55; }
.x-prose.is-tool > p:first-child { font-size: var(--fs-body); max-width: 76ch; }
/* FAQ accordions */
.x-faq { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 8px; }
.x-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; cursor: pointer; list-style: none; font: 600 var(--fs-body)/1.4 var(--display); color: var(--ink); }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border: solid var(--charcoal); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); transition: transform .15s ease; }
.x-faq[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.x-faq summary:hover { color: var(--orange-press); }
.x-faq-a { padding: 0 18px 4px; }
.x-faq-a > *:last-child { margin-bottom: 14px; }
/* contact page routes */
.x-prose .sgh-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.x-prose .sgh-contact-grid p { margin: 0; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-body); line-height: 1.5; }
.x-prose .sgh-contact-grid a { font-weight: 600; }
@media (max-width: 900px) {
  .x-ibody.has-side { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .x-iside { position: static; }
  .x-toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
  .x-toc summary { margin: 0; display: flex; justify-content: space-between; }
  .x-toc summary::after { content: "+"; font-size: var(--fs-body); line-height: 12px; }
  .x-toc[open] summary { margin-bottom: 10px; }
  .x-toc[open] summary::after { content: "\2212"; }
  .x-helpnav { display: none; }
  .x-ihero > .wrap { padding-block: 20px 24px; }
  .x-ibody { padding-top: 22px; }
  .x-prose { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: reduce) { .x-faq summary::after { transition: none; } }

/* ---------- brand directory ---------- */
.x-bdir { padding: 26px 0 0; }
.x-bdir-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.x-bdir-jump span { margin-right: 6px; font: 700 var(--fs-small)/1 var(--sans); color: var(--slate); }
.x-bdir-jump a { padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 600; }
.x-bdir-jump a:hover { border-color: var(--ink); }
.x-bdir-group { padding-top: 30px; scroll-margin-top: 12px; }
.x-bdir-group h2 { font: 800 var(--fs-h3)/1.2 var(--display); margin: 0 0 14px; }
.x-bdir-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.x-btile { display: flex; flex-direction: column; height: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); overflow: hidden; }
.x-btile:hover { border-color: var(--ink); }
.x-bmark { display: grid; place-items: center; height: 112px; padding: 16px 12px; border-bottom: 1px solid var(--line); }
.x-bmark.is-dark { background: var(--panel); border-bottom-color: var(--panel); }
.x-bmark .x-dlogo { width: auto; height: var(--h, 40px); max-width: 94%; max-height: 64px; object-fit: contain; }
.x-dword { font: 800 25px/1 var(--display); letter-spacing: .01em; color: var(--charcoal); text-align: center; }
.x-binfo { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 15px; }
.x-binfo b { font: 700 var(--fs-body)/1.3 var(--display); }
.x-binfo .ct { font-size: var(--fs-micro); font-weight: 600; color: var(--orange-press); }
.x-binfo .d { margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  .x-bdir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .x-bmark { height: 84px; padding: 12px 14px; }
  .x-bmark .x-dlogo { max-height: 46px; height: calc(var(--h, 40px) * .78); }
  .x-dword { font-size: 19px; }
  .x-binfo { padding: 10px 12px 12px; }
  .x-binfo .d { -webkit-line-clamp: 3; font-size: var(--fs-micro); }
}

/* ---------- Solutions hub ---------- */
.x-ihero-sol > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 44px; align-items: center; padding-block: 34px 44px; }
.x-ihero-sol .x-routes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.x-ihero-sol .x-sol-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-ihero-sol .x-sv img { aspect-ratio: 1.45; max-height: 170px; }
.x-solhub .x-sec { padding-top: var(--s5); }
.x-solhub .x-sol-vis .x-sol-ic { width: 54px; height: 54px; align-self: center; stroke-width: 1.2; color: var(--slate); }
.x-solhub .x-sol-ex { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--charcoal); }
.x-solhub .x-sol-go { margin-top: auto; padding-top: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); }
.x-solhub .x-sol .x-brands { margin-top: 0; }
.x-solhub .x-sol h3 { color: var(--ink); }
.x-solhub .sgh-discovery-grid { margin: 0; }
@media (max-width: 900px) { .x-ihero-sol > .wrap { grid-template-columns: 1fr; gap: 24px; padding-block: 22px 30px; } .x-ihero-sol .x-sol-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .x-ihero-sol .x-sv { padding: 8px; } .x-ihero-sol .x-sv span { display: none; } }

/* ---------- account: navigation and dashboard ---------- */
.woocommerce-account .sgh-article-body > .woocommerce { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 32px; align-items: start; }
.woocommerce-account .sgh-article-body > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .sgh-article-body > .woocommerce > .woocommerce-MyAccount-navigation, .woocommerce-account .sgh-article-body > .woocommerce > .woocommerce-MyAccount-content { float: none; width: auto; }
.sgh-acc-nav { position: sticky; top: 16px; padding: 0; border-right: 1px solid var(--line); }
.sgh-acc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sgh-acc-nav a, .sgh-article-body .sgh-acc-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 0; color: var(--charcoal); text-decoration: none; font-size: var(--fs-small); font-weight: 400; }
.sgh-acc-nav a .icon { width: 18px; height: 18px; color: var(--slate); }
.sgh-acc-nav a:hover, .sgh-article-body .sgh-acc-nav a:hover { background: var(--ground-2); color: var(--ink); }
.sgh-acc-nav li.is-active a, .sgh-acc-nav a[aria-current], .sgh-article-body .sgh-acc-nav li.is-active a { background: none; color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--orange-press); }
.sgh-acc-nav li.is-active a .icon { color: var(--ink); }
.sgh-acc-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.sgh-acc-hello { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sgh-acc-hello .eyebrow { margin: 0 0 6px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); }
.sgh-acc-hello h2 { margin: 0; font: 800 var(--fs-h2)/1.15 var(--display); color: var(--ink); }
.sgh-acc-hello .sub { margin: 6px 0 0; font-size: var(--fs-small); color: var(--slate); }
.sgh-acc-quick { display: flex; flex-wrap: wrap; gap: 8px; }
/* Summary rows on dividers (section language): one count per row, the next action under it. */
.sgh-acc-cards { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--line-strong); }
.sgh-acc-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sgh-acc-card .top { display: flex; align-items: center; gap: 10px; }
.sgh-acc-card .ic { display: grid; place-items: center; width: 24px; height: 24px; color: var(--slate); }
.sgh-acc-card .ic .icon { width: 19px; height: 19px; }
.sgh-acc-card h3 { margin: 0; font: 700 var(--fs-body)/1.2 var(--display); }
.sgh-acc-card .num { margin-left: auto; font: 800 24px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }
.sgh-acc-card p { margin: 0; flex: 1; font-size: var(--fs-small); line-height: 1.45; color: var(--slate); }
.sgh-acc-card .go { align-self: flex-start; font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); text-decoration: none; }
.sgh-acc-card .go:hover { text-decoration: underline; }
.sgh-acc-settings h3 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); font: 700 var(--fs-h3)/1.3 var(--display); color: var(--ink); }
.sgh-acc-settings ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.sgh-acc-settings a, .sgh-article-body .sgh-acc-settings a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: var(--fs-body); }
.sgh-acc-settings a:hover { color: var(--orange-press); }
.sgh-acc-settings .icon { width: 18px; height: 18px; color: var(--slate); }
@media (max-width: 860px) {
  .woocommerce-account .sgh-article-body > .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sgh-acc-nav { position: static; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .sgh-acc-nav ul { display: flex; gap: 4px; }
  .sgh-acc-nav a { white-space: nowrap; padding: 8px 10px; font-size: var(--fs-small); }
  .sgh-acc-nav li.is-active a, .sgh-acc-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--orange-press); }
  .sgh-acc-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
  .sgh-acc-hello h2 { font-size: var(--fs-h2); }
  .sgh-acc-cards, .sgh-acc-settings ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- cart ---------- */
.sgh-empty-cart { display: grid; gap: 22px; padding: 6px 0 10px; }
.sgh-ec-head { display: flex; align-items: flex-start; gap: 16px; }
.sgh-ec-head > .icon { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.sgh-ec-head h2 { margin: 0 0 4px; font: 800 26px/1.15 var(--display); color: var(--ink); }
.sgh-ec-head p { margin: 0; max-width: 60ch; color: var(--charcoal); }
.sgh-ec-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sgh-empty-cart h3 { margin: 0 0 10px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.sgh-ec-cats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.sgh-ec-cats a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 600; }
.sgh-ec-cats a:hover { border-color: var(--ink); }
.sgh-ec-cats .icon { color: var(--slate); }
.sgh-cart-notes { display: grid; gap: 8px; margin: 18px 0 0; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-small); color: var(--charcoal); }
.sgh-cart-notes p { display: flex; gap: 10px; margin: 0; }
.sgh-cart-notes .icon { flex: none; width: 18px; height: 18px; color: var(--slate); }
.sgh-cart-notes a { color: var(--orange-press); font-weight: 600; }
.wc-block-components-product-details__sold-as { font-weight: 600; }

/* page breadcrumbs (content pages) match the listing breadcrumbs; on v2 content pages they sit on the header surface */
nav.sgh-crumbs.woocommerce-breadcrumb { font-size: var(--fs-micro); color: var(--slate); }
nav.sgh-crumbs.woocommerce-breadcrumb a { color: var(--slate); text-decoration: none; }
nav.sgh-crumbs.woocommerce-breadcrumb a:hover { color: var(--orange-press); }
body.sgh-page-info .sgh-main > .sgh-crumbs, body.sgh-page-tool .sgh-main > .sgh-crumbs, body.sgh-page-brands .sgh-main > .sgh-crumbs, body.sgh-page-solutions-hub .sgh-main > .sgh-crumbs { max-width: none; margin: 0; padding: 14px max(20px, calc((100% - var(--maxw, 1260px)) / 2 + 20px)) 0; background: var(--paper); }
/* account: the page column is the full content width; WooCommerce's clearfix pseudo-elements would take grid cells */
.sgh-wide-article .sgh-article { max-width: var(--maxw, 1260px); padding: 0; }
.woocommerce-account .sgh-article-body > .woocommerce::before, .woocommerce-account .sgh-article-body > .woocommerce::after { content: none; display: none; }
.woocommerce-account .sgh-article > h1 { margin-bottom: 20px; }
.sgh-article-body ul.sgh-acc-cards, .sgh-article-body .sgh-acc-settings ul, .sgh-article-body .sgh-acc-nav ul, .sgh-article-body .sgh-ec-cats ul { padding-left: 0; }
.sgh-article-body .sgh-acc-cards li, .sgh-article-body .sgh-acc-settings li, .sgh-article-body .sgh-acc-nav li, .sgh-article-body .sgh-ec-cats li { margin-bottom: 0; }
.sgh-wide-article .sgh-article { max-width: var(--maxw, 1260px); padding: 0; }
.sgh-empty-cart { max-width: 980px; }
.sgh-ec-recent ul.products.sgh-cards { margin-bottom: 0; }
@media (max-width: 600px) { .x-ihero-sol .x-sol-wall { display: none; } }
.x-ihero-sol .x-sv { justify-content: center; }
/* tool pages (support, document library, compare) keep their own component styling */
.x-prose.is-tool h2 { margin: 8px 0 12px; padding-top: 0; border-top: 0; }
.x-prose.is-tool p, .x-prose.is-tool ul { max-width: none; }

/* =====================================================================================
 * Batch 5 home (2026-11-10): header trust strip, masthead, drawer, homepage, footer, 404,
 * brand directory and brand pages. The mega menu rules live in sgh.css (one rule set).
 * ===================================================================================== */

/* ---------- header: trust strip (spec 10.1, true facts only) ---------- */
.x-util { background: var(--panel); color: var(--panel-mute); font: 400 var(--fs-micro)/1.2 var(--sans); }
.x-util-in { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; min-height: 36px; display: flex; align-items: center; gap: 22px; }
.x-util ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.x-util-facts { gap: 22px; min-width: 0; }
.x-util-facts li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.x-util .icon { width: 16px; height: 16px; color: var(--orange); flex: none; vertical-align: -3px; }
.x-util-contact { margin: 0 0 0 auto; display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--panel-mute); }
.x-util a { color: var(--panel-ink); text-decoration: none; }
.x-util a:hover, .x-util a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.x-util-contact .icon { margin-right: 3px; }
.x-util-contact .u-num { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }
.u-short { display: none; }
.x-util-facts { overflow: hidden; }
.x-util .u-docs, .x-util .u-hours { display: none; }
@media (min-width: 1440px) { .x-util .u-docs { display: flex; } }
@media (min-width: 1680px) { .x-util .u-hours { display: inline; } }
@media (max-width: 1023px) { .x-util .u-long { display: none; } .x-util .u-short { display: inline; } }
@media (max-width: 760px) { .x-util .u-gst { display: none; } .x-util-in { gap: 12px; padding: 0 16px; } .x-util-contact .u-num { display: none; } }
@media (max-width: 339px) { .x-util .u-seller { display: none; } }
/* utility links (spec 10.1 right side) sit at the right of the nav row on wide screens */
.primary-nav .nav-util { display: none; }
@media (min-width: 1240px) {
  .primary-nav .nav-util { display: list-item; }
  .primary-nav .nav-util-first { margin-left: auto; }
  .primary-nav .nav-util a { font: 400 var(--fs-small)/1.2 var(--sans); color: var(--slate); }
  .primary-nav .nav-util a:hover { color: var(--ink); }
}

/* ---------- header: masthead and primary nav ---------- */
.site-head { font-family: var(--display); position: relative; z-index: var(--z-header); }
.masthead .search input { font-family: var(--sans); }
.head-links a { min-height: 44px; min-width: 44px; justify-content: center; font: 600 var(--fs-micro)/1.2 var(--display); }
.head-links .count { top: -2px; right: 2px; }
/* Create account (signed out, registration on): a quiet pill beside Account; phones have it in the menu. */
.head-links .hl-register { align-self: center; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; color: var(--ink); white-space: nowrap; }
.head-links .hl-register:hover { border-color: var(--ink); }
.x-reg-anchor { display: block; position: relative; top: -96px; visibility: hidden; }
@media (max-width: 760px) { .head-links .hl-register { display: none; } }
.primary-nav > ul > li > a { min-height: 44px; font: 600 var(--fs-body)/1.2 var(--display); }
.primary-nav .nav-products .icon { width: 18px; height: 18px; margin-right: 2px; }
.nav-burger { display: none; }
@media (max-width: 760px) { .masthead .search button .lbl { display: inline; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 1023px) {
  .primary-nav { display: none; }
  .nav-burger { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); }
  .nav-burger .icon { width: 24px; height: 24px; }
  .masthead { flex-wrap: wrap; gap: 10px 14px; padding-block: 10px 12px; }
  .masthead .search { order: 3; min-width: 100%; max-width: none; }
  .masthead .logo img { height: 34px; width: auto; }
}
@media (max-width: 600px) {
  .head-links { gap: 4px; }
  .head-links .hl-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .head-links a { min-width: 44px; }
  .head-links .icon { width: 22px; height: 22px; }
}

/* ---------- phone and tablet menu drawer ---------- */
.sgh-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(85vw, 380px); z-index: var(--z-drawer); background: var(--paper); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.18); font-family: var(--display); color: var(--ink); }
.sgh-drawer[hidden] { display: none; }
.sgh-drawer > * { flex-shrink: 0; }
.sgh-drawer.is-open { transform: none; }
.sgh-drawer-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--scrim); }
.sgh-drawer-backdrop[hidden] { display: none; }
html.sgh-drawer-open, html.sgh-drawer-open body { overflow: hidden; }
.dr-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 8px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.dr-head .logo img { height: 32px; width: auto; display: block; }
.dr-close { width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--ink); border-radius: 8px; }
.dr-close .icon { width: 24px; height: 24px; }
.dr-search { display: flex; margin: 12px 16px 4px; border: 1.5px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.dr-search input { flex: 1; min-width: 0; border: 0; padding: 0 12px; height: 44px; font: 16px var(--sans); background: var(--paper); }
.dr-search button { width: 48px; border: 0; background: var(--charcoal); color: var(--paper); display: grid; place-items: center; }
.dr-h { margin: 16px 16px 6px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.dr-depts, .dr-depts ul, .dr-links { list-style: none; margin: 0; padding: 0; }
.dr-depts summary, .dr-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; min-height: 44px; padding: 4px 16px; font: 600 var(--fs-body)/1.25 var(--display); color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; border-top: 1px solid var(--line); }
.dr-depts summary::-webkit-details-marker { display: none; }
.dr-row { grid-template-columns: 22px minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
.dr-depts .icon { color: var(--slate); width: 20px; height: 20px; }
.dr-depts .n { font: 400 var(--fs-micro)/1 var(--sans); color: var(--slate); font-variant-numeric: tabular-nums; }
.dr-depts .dr-chev { width: 16px; height: 16px; transition: transform .15s ease; }
.dr-depts details[open] > summary { background: var(--ground); }
.dr-depts details[open] > summary .dr-chev { transform: rotate(180deg); }
.dr-depts details ul { padding: 2px 0 8px 50px; background: var(--ground); }
.dr-depts details ul a { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 0; font: 400 var(--fs-body)/1.3 var(--sans); color: var(--charcoal); text-decoration: none; }
.dr-depts .dr-all { font-weight: 700; color: var(--orange-press); }
.dr-links { margin-top: 8px; padding-top: 4px; }
.dr-links a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; font: 600 var(--fs-body)/1.2 var(--display); color: var(--ink); text-decoration: none; }
.dr-links .icon { color: var(--slate); width: 20px; height: 20px; }
.dr-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-top: 1px solid var(--line); margin-top: 8px; }
.dr-acts .btn { padding: 0 10px; }
.dr-contact { padding: 0 16px 28px; }
.dr-contact .dr-h { margin-left: 0; }
@media (min-width: 1024px) { .sgh-drawer, .sgh-drawer-backdrop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sgh-drawer, .dr-depts .dr-chev { transition: none; } }

/* ---------- contact chips (drawer, footer, 404) ---------- */
.x-cchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.x-cchips a, .x-cchip-static { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); font: 600 var(--fs-small)/1.2 var(--sans); color: var(--ink); text-decoration: none; }
.x-cchips a:hover { border-color: var(--ink); }
.x-cchip-static { border-color: transparent; background: none; color: var(--slate); font-weight: 400; padding-left: 4px; }
.x-cchips .icon { width: 18px; height: 18px; color: var(--orange-press); flex: none; }
.x-cchips.is-stack { flex-direction: column; align-items: stretch; }
.x-cchips.is-stack a { border-radius: 8px; min-height: 44px; }

/* ---------- homepage (batch 5): density, hero, rail, departments, tiles, solutions, business, new ---------- */
.x-home { --s6: 56px; --s5: 40px; }
.x-home .x-sec { padding-block: 56px 0; }
.x-home .x-sec-head { margin-bottom: 22px; }
.x-home .x-sec-head h2 { font-size: var(--fs-h2); max-width: none; }
.x-home .x-sec-head p { margin-top: 6px; }
.x-page .x-n, .x-page .x-ct, .x-page .n { font-variant-numeric: tabular-nums; }
.x-home .x-hero .wrap { padding-block: 48px; gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.x-home .x-hero h1 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.08; }
.x-home .x-hero .x-lead { font-size: var(--fs-h3); margin: 16px 0 18px; }
.x-home .x-hero-try { margin: 0 0 24px; align-items: center; }
.x-home .x-hero-try span { color: var(--panel-mute); }
.x-home .x-hero-try a { border: 1px solid var(--charcoal); border-radius: 999px; padding: 5px 11px; text-decoration: none; font-weight: 400; }
.x-home .x-hero-try a:hover { border-color: var(--panel-ink); }
.x-home .x-hero-wall { gap: 10px; }
.x-home .x-hw { padding: 8px 8px 10px; }
.x-home .x-hw span i { font-style: normal; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.x-home .x-hw span i::before { content: "\00B7\00A0"; color: var(--slate); font-weight: 400; }
/* brand rail (spec 10.4) */
.x-brandband { background: var(--paper); border-bottom: 1px solid var(--line); padding-block: 18px 16px; }
.x-brandband .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
.x-brandband-h { font: 600 var(--fs-small)/1.3 var(--sans); color: var(--slate); letter-spacing: 0; max-width: 9ch; }
.x-brail-list { position: relative; list-style: none; margin: 0; padding: 2px 0 4px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.x-brail-list li { flex: 0 0 160px; scroll-snap-align: start; }
.x-brail-tile { position: relative; height: 72px; display: grid; place-items: center; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.x-brail-tile:hover { border-color: var(--line-strong); }
.x-brail-tile.is-dark { background: var(--panel); border-color: var(--panel); }
.x-brail-tile .x-dlogo { height: min(var(--h, 34px), 40px); width: auto; max-width: 100%; object-fit: contain; }
.x-brail-tile .x-dword { font: 800 var(--fs-body)/1 var(--display); color: var(--charcoal); }
.x-brail-all { display: flex; gap: 6px; font: 700 var(--fs-small)/1.2 var(--display); color: var(--orange-press); background: var(--ground); border-style: dashed; }
.x-brail-all .icon { width: 16px; height: 16px; }
/* departments */
.x-home .x-dept-img { aspect-ratio: 16 / 9; padding: 10px; }
.x-home .x-dept-body { padding: 16px 18px 18px; gap: 10px; }
.x-home .x-dept h3 { font-size: var(--fs-h3); }
.x-dept details > summary { display: none; }
.x-dept details ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.x-also { gap: 8px; }
.x-also > span { margin-right: 4px; }
.x-also .x-n { color: var(--slate); font-weight: 400; margin-left: 4px; }
/* category tiles (spec 10.3; local fallback until the listing builder's tiles merge) */
.x-ctiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.x-ctile { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 10px 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.x-ctile:hover { border-color: var(--line-strong); }
.x-ctile-pic { aspect-ratio: 1; background: var(--ground); border-radius: 8px; display: grid; place-items: center; margin-bottom: 6px; overflow: hidden; }
.x-ctile-pic img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.x-ctile-pic .icon { width: 40px; height: 40px; color: var(--slate); stroke-width: 1.4; }
.x-ctile b { font: 600 var(--fs-small)/1.25 var(--display); }
.x-ctile-n { font-size: var(--fs-micro); color: var(--slate); font-variant-numeric: tabular-nums; }
/* ranges: one denser row per four */
.x-home .x-range { padding: 16px; gap: 10px; }
.x-home .x-range .x-pic { aspect-ratio: 1.6; }
.x-home .x-range h3 { font-size: var(--fs-h3); }
/* solutions with system thumbnails */
.x-home .x-sol-band { margin-top: 56px; padding-block: 56px; }
.x-sols-home .x-sol-vis.is-diagram { aspect-ratio: 2 / 1; padding: 0; background: var(--ground); display: block; }
.x-sols-home .x-sol-vis.is-diagram svg { display: block; width: 100%; height: 100%; }
.x-sols-home .x-sol-vis.is-diagram .x-tag { top: auto; bottom: 8px; left: 10px; }
.x-sols-home .x-sol-body { padding: 14px 16px 16px; gap: 8px; }
.x-sols-home .x-sol h3 { font-size: var(--fs-h3); }
.x-flow .x-arr { display: inline-grid; place-items: center; color: var(--slate); }
.x-flow .x-arr .icon { width: 14px; height: 14px; }
.x-flow .x-or { font-style: normal; color: var(--slate); }
/* buy for your business */
.x-biz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 36px 40px; }
.x-biz h2 { margin-bottom: 18px; }
.x-biz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.x-biz-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; color: var(--panel-mute); font-size: var(--fs-body); line-height: 1.45; }
.x-biz-list .icon { color: var(--orange); width: 22px; height: 22px; }
.x-biz-list b { display: block; color: var(--panel-ink); font: 700 var(--fs-body)/1.3 var(--display); margin-bottom: 1px; }
.x-biz-right { display: flex; flex-direction: column; gap: 18px; }
.x-journey { width: 100%; height: auto; font-family: var(--sans); }
/* new in the catalogue */
.x-newgrid { list-style: none; margin: 0; padding: 2px 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; position: relative; }
.x-newgrid li { scroll-snap-align: start; }
.x-newcard { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.x-newcard:hover { border-color: var(--line-strong); }
.x-newpic { aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 6px; }
.x-newpic img { width: 100%; height: 100%; object-fit: contain; }
.x-newbrand { font: 600 var(--fs-micro)/1.2 var(--sans); color: var(--slate); }
.x-newcard b { font: 600 var(--fs-small)/1.3 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x-newprice { margin-top: auto; padding-top: 6px; font: 700 var(--fs-body)/1.2 var(--display); font-variant-numeric: tabular-nums; }
.x-newprice del { color: var(--slate); font-weight: 400; font-size: var(--fs-small); }
/* guides */
.x-home .x-guide-list a { align-items: flex-start; gap: 12px; }
.x-home .x-guide-list .icon { color: var(--orange-press); margin-top: 1px; }
.x-home .x-guide-list a .x-gt { font: 600 var(--fs-body)/1.35 var(--display); text-transform: none; letter-spacing: 0; color: var(--ink); white-space: normal; }
.x-home .x-guide-list a:hover .x-gt { color: var(--orange-press); }
.x-guide-list .x-gt small { display: block; font: 400 var(--fs-micro)/1.3 var(--sans); color: var(--slate); margin-top: 3px; }
.x-docs h3 { display: flex; align-items: center; gap: 10px; }
.x-docs h3 .icon { color: var(--orange-press); }
/* GymNtry: white, after the guides, with the flow diagram */
.x-gym.x-gym-v5 { background: var(--paper); border-color: var(--line); grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; padding: 32px 36px; }
.x-gym-v5 .x-gym-copy { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.x-gym-v5 h2 { font-size: var(--fs-h3); font-weight: 800; }
.x-gym-v5 p { margin: 0; }
.x-gym-fig { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.x-gym-fig svg { display: block; width: 100%; height: auto; }
/* trust row with icons and links */
.x-trust.x-trust-v5 { margin-top: 56px; }
.x-trust-v5 > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-content: start; }
.x-trust-v5 .icon { grid-row: span 2; color: var(--orange-press); width: 24px; height: 24px; }
.x-trust-v5 a { color: var(--ink); }
.x-trust-v5 b a { text-decoration: none; }
.x-trust-v5 b a:hover { color: var(--orange-press); }
/* tablets keep the desktop columns down to 1000 px (density, spec 10.6) */
@media (min-width: 1000px) and (max-width: 1100px) {
  .x-home .x-ranges, .x-home .x-depts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 999px) { .x-ctiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 601px) and (max-width: 900px) { .x-home .x-ranges { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x-home .x-sols-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .x-home .x-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 36px 32px; }
  .x-home .x-hero-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
  .x-home .x-hw.x-tall, .x-home .x-hw:nth-child(n+6) { display: none; }
  .x-home .x-hw img { aspect-ratio: 1; height: auto; }
  .x-biz { grid-template-columns: minmax(0, 1fr); padding: 28px; gap: 28px; }
  .x-gym.x-gym-v5 { grid-template-columns: minmax(0, 1fr); }
  .x-gym-fig { max-width: 300px; }
  .x-brandband .wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .x-brandband-h { max-width: none; }
}
@media (max-width: 600px) {
  .x-home .x-sec { padding-top: 40px; }
  .x-home .x-sol-band { margin-top: 40px; padding-block: 40px; }
  .x-home .x-hero .wrap { padding-block: 28px 28px; }
  .x-home .x-hero h1 { font-size: 30px; }
  .x-home .x-hero .x-lead { font-size: var(--fs-body); margin: 12px 0 14px; }
  .x-home .x-hero-try { margin-bottom: 18px; font-size: var(--fs-small); }
  .x-home .x-hero-wall { display: none; }
  .x-home .x-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .x-home .x-routes .btn { flex: none; padding: 0 10px; }
  .x-home .x-routes .x-route-3 { display: none; }
  .x-brail-list li { flex-basis: 136px; }
  .x-brail-tile { height: 64px; padding: 10px 12px; }
  .x-brail-tile .x-dlogo { height: min(var(--h, 34px), 34px); }
  .x-home .x-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .x-home .x-dept-img { aspect-ratio: 4 / 3; padding: 6px; }
  .x-home .x-dept-body { padding: 10px 12px 12px; gap: 6px; }
  .x-home .x-dept h3 { font-size: var(--fs-body); line-height: 1.2; }
  .x-dept details > summary { display: list-item; font: 600 var(--fs-small)/1.3 var(--sans); color: var(--slate); cursor: pointer; padding: 4px 0; }
  .x-dept details li a { font-size: var(--fs-small); padding: 8px 0; }
  .x-home .x-dept .x-all { display: none; }
  .x-ctiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .x-ctile { padding: 6px 6px 8px; }
  .x-ctile b { font-size: var(--fs-micro); }
  .x-ctile-n { font-size: var(--fs-micro); }
  .x-home .x-sols-home { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; position: relative; }
  .x-home .x-sols-home .x-sol { flex: 0 0 84%; scroll-snap-align: start; }
  .x-biz { padding: 22px 18px; }
  .x-journey text { font-size: var(--fs-body); }
  .x-newgrid { gap: 8px; grid-auto-columns: 150px; }
  .x-newcard { padding: 8px; }
  .x-newcard b { font-size: var(--fs-small); }
  .x-gym.x-gym-v5 { padding: 22px 18px; }
}

/* ---------- footer (batch 5) ---------- */
.site-foot { font-family: var(--sans); }
.foot-band { background: var(--ground); border-bottom: 1px solid var(--line); }
.foot-band-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-block: 18px; }
.foot-logo img { height: 40px; width: auto; display: block; }
.foot-band-t { margin: 0; font: 700 var(--fs-body)/1.3 var(--display); color: var(--ink); flex: 1 1 260px; }
.foot-cols.foot-cols-5 { grid-template-columns: 1.2fr 1.2fr 1.1fr .9fr .9fr; gap: 24px 28px; }
.foot-cols h3 { font-family: var(--sans); }
.foot-cols .foot-all { font-weight: 700; color: var(--orange-press); }
.foot-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--charcoal); }
.foot-pay-h { font-weight: 700; color: var(--ink); }
.foot-pay ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-pay li { display: inline-flex; align-items: center; gap: 7px; }
.foot-pay-note { color: var(--slate); }
.foot-pay .icon { width: 18px; height: 18px; color: var(--slate); }
.foot-pay a { color: var(--slate); }
.foot-seller-row { border-top: 1px solid var(--line); padding-block: 12px 0; }
.foot-seller-row p { margin: 0; font-size: var(--fs-small); color: var(--charcoal); }
.nowrap { white-space: nowrap; }
.foot-legal { border-top: 0; }
@media (max-width: 1100px) { .foot-cols.foot-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .foot-cols.foot-cols-5 { grid-template-columns: 1fr 1fr; }
  .foot-cols a { display: inline-block; padding: 4px 0; }
  .foot-chips a { min-height: 44px; }
}

/* ---------- 404 (batch 5) ---------- */
.x-404 .x-nf-hero { background: var(--paper); border-bottom: 1px solid var(--line); }
.x-404 .x-nf-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; padding-block: 48px; }
.x-404 h1 { font-size: var(--fs-h1); line-height: 1.1; font-weight: 800; }
.x-404 .x-lead { color: var(--charcoal); font-size: var(--fs-h3); margin: 14px 0 22px; max-width: 58ch; }
.x-nf-search label { display: block; font: 700 var(--fs-small)/1.3 var(--display); margin-bottom: 8px; }
.x-nf-field { display: flex; gap: 8px; max-width: 560px; }
.x-nf-field input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font: 16px var(--sans); }
.x-nf-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; }
.x-nf-links a { font-weight: 600; color: var(--orange-press); }
.x-nf-fig { margin: 0; }
.x-nf-fig svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 16px; }
.x-404 .x-sec { padding-top: 48px; }
.x-404 .x-sec-head h2 { font-size: var(--fs-h2); }
.x-nf-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px; }
.x-nf-help h2 { font-size: var(--fs-h3); font-weight: 800; }
.x-nf-help p { margin: 6px 0 0; color: var(--slate); }
@media (max-width: 900px) { .x-404 .x-nf-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 32px; } .x-nf-fig { max-width: 360px; } }
@media (max-width: 600px) { .x-nf-field { flex-direction: column; } .x-nf-field .btn { width: 100%; } .x-nf-fig { display: none; } }

/* ---------- brand pages (batch 5) ---------- */
.x-brand .x-sec { padding-top: 56px; }
.x-brand .x-sec-head h2 { font-size: var(--fs-h2); max-width: none; }
.x-bhero-facts li { font-variant-numeric: tabular-nums; }
.x-bhero-compact .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
.x-bhero-compact h1 { font-size: clamp(26px, 3vw, 36px); }
.x-bhero-compact .x-lead { max-width: 70ch; }
/* MEAN WELL selector */
.x-sel-h { font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin: 0 0 10px; }
.x-mounts { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.x-mounts a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.x-mounts a:hover { border-color: var(--orange-press); }
.x-mounts .icon { width: 40px; height: 40px; stroke-width: 1.3; color: var(--orange-press); margin-bottom: 4px; }
.x-mounts b { font: 700 var(--fs-body)/1.2 var(--display); }
.x-mounts span { font-size: var(--fs-small); color: var(--slate); font-variant-numeric: tabular-nums; }
.x-sel-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.x-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.x-chips a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; align-items: center; padding: 0 16px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--ink); }
.x-chips a:hover { border-color: var(--ink); }
.x-chips b { font: 700 var(--fs-body)/1 var(--display); font-variant-numeric: tabular-nums; }
.x-chips span { font-size: var(--fs-micro); color: var(--slate); font-variant-numeric: tabular-nums; }
/* series strip */
.x-series { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.x-ser { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; }
.x-ser-main { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 10px; text-decoration: none; color: var(--ink); }
.x-ser-main b { font: 800 20px/1.1 var(--display); }
.x-ser-main span { font-size: var(--fs-small); color: var(--charcoal); }
.x-ser-main small { font-size: var(--fs-micro); color: var(--slate); font-variant-numeric: tabular-nums; }
.x-ser-main:hover b { color: var(--orange-press); }
.x-ser-terms { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.x-ser-terms a { font: 600 var(--fs-micro)/1 var(--mono); padding: 6px 8px; border-radius: 4px; background: var(--ground); color: var(--charcoal); text-decoration: none; }
.x-ser-terms a:hover { background: var(--ground-2); color: var(--ink); }
/* compare (BR9, BR10) */
.x-swipe { display: none; align-items: center; gap: 6px; margin: -8px 0 10px; font-size: var(--fs-small); color: var(--slate); }
.x-swipe .icon { width: 16px; height: 16px; }
.x-cmp-v5 td { font-variant-numeric: tabular-nums; }
.x-cmp-v5 td.x-na { color: var(--slate); }
.x-cchips-s { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.x-cchips-s li { font-size: var(--fs-micro); background: var(--ground); border-radius: 4px; padding: 2px 7px; color: var(--charcoal); }
@media (max-width: 760px) {
  .x-swipe { display: flex; }
  .x-cmp-v5 { min-width: 0; width: max-content; }
  .x-cmp-v5 thead th:not(:first-child), .x-cmp-v5 td { min-width: 160px; max-width: 200px; }
  .x-cmp-v5 thead th:first-child, .x-cmp-v5 tbody th { position: sticky; left: 0; z-index: 1; width: 96px; min-width: 96px; max-width: 96px; background: var(--paper); box-shadow: 1px 0 0 var(--line); font-size: var(--fs-micro); padding: 10px; }
  .x-cmp-v5 th, .x-cmp-v5 td { padding: 10px 12px; }
  .x-cmp-v5 thead th img { height: 72px; }
}
/* how it fits together with the door diagram */
.x-sys.x-sys-dia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.x-sys-steps { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.x-sys-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: var(--fs-small); color: var(--charcoal); }
.x-sys-steps .icon { color: var(--orange-press); }
.x-sys-steps b { display: block; font: 700 var(--fs-body)/1.3 var(--display); color: var(--ink); }
.x-sys .x-door-fig { margin: 0; }
.x-sys .x-door-fig figcaption { margin-top: 6px; }
/* solution cards with thumbnails */
.x-mini-sols-v5 a { grid-template-columns: 1fr; padding: 0; overflow: hidden; align-items: stretch; }
.x-ms-vis { display: block; aspect-ratio: 2 / 1; background: var(--ground); }
.x-ms-vis svg { width: 100%; height: 100%; display: block; }
.x-ms-t { display: block; padding: 12px 16px 14px; }
.x-ms-t small { display: block; margin-top: 4px; }
/* documents band */
.x-docband.x-docband-v5 { background: var(--paper); border-color: var(--line); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.x-docband-v5 .btn { margin-top: 16px; }
.x-doctypes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.x-doctypes a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; background: var(--ground); border-radius: 8px; text-decoration: none; color: var(--ink); }
.x-doctypes a:hover { background: var(--ground-2); }
.x-doctypes .icon { color: var(--orange-press); }
.x-doctypes b { font: 600 var(--fs-small)/1.25 var(--display); }
.x-doctypes span { font: 700 var(--fs-body)/1 var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .x-mounts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .x-sys.x-sys-dia { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .x-sel-rows, .x-docband.x-docband-v5 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .x-brand .x-sec { padding-top: 40px; }
  .x-mounts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .x-mounts a { padding: 12px; }
  .x-mounts .icon { width: 32px; height: 32px; }
  .x-doctypes { grid-template-columns: minmax(0, 1fr); }
  .x-series { grid-template-columns: minmax(0, 1fr); }
  .x-mini-sols.x-mini-sols-v5 { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; position: relative; }
  .x-mini-sols-v5 a { flex: 0 0 84%; scroll-snap-align: start; }
  .x-fam-pic { aspect-ratio: 16 / 7; }
}

/* ---------- brand directory (batch 5): largest ranges, A to Z grid, filter ---------- */
.x-bdir-v5 h2 { font: 800 var(--fs-h3)/1.2 var(--display); margin: 0 0 14px; }
.x-bdir-v5 .x-bdir-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.x-bdir-v5 .x-bmark { height: 88px; padding: 14px 12px; }
.x-bdir-v5 .x-bmark .x-dlogo { max-height: 50px; height: calc(var(--h, 40px) * .85); }
.x-bdir-v5 .x-dword { font-size: 20px; }
.x-bdir-v5 .x-binfo { padding: 10px 12px 12px; }
.x-bdir-v5 .x-binfo .d { -webkit-line-clamp: 2; font-size: var(--fs-micro); }
.x-bsec { margin-top: 6px; font-size: var(--fs-micro); color: var(--slate); }
.x-btile-lg .x-bmark { height: 104px; }
.x-bdir-all { padding-top: 40px; }
.x-bdir-finder { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.x-bdir-finder .x-bdir-az { margin: 0; }
.x-bdir.is-finding :is(.x-bdir-feat, .x-bdir-fam) { display: none; }
.x-bdir-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.x-bdir-find { display: flex; flex-direction: column; gap: 6px; min-width: min(320px, 100%); }
.x-bdir-find label { font: 700 var(--fs-small)/1.2 var(--sans); }
.x-bdir-find input { height: 44px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font: 16px var(--sans); background: var(--paper); }
.x-bdir-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 10px; }
.x-bdir-az a, .x-bdir-az span { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: 6px; font: 700 var(--fs-small)/1 var(--display); }
.x-bdir-az a { background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; }
.x-bdir-az a:hover { border-color: var(--ink); }
.x-bdir-az span { color: var(--line-strong); }
.x-bdir-sectors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.x-bdir-sectors button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); font: 600 var(--fs-small)/1 var(--sans); color: var(--ink); }
.x-bdir-sectors button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.x-bdir-letter { padding-top: 10px; }
.x-bdir-letter li { position: relative; scroll-margin-top: 16px; }
.x-bdir-first::before { content: attr(data-letter); position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: var(--ink); color: var(--paper); font: 700 var(--fs-micro)/1 var(--display); }
.x-bdir-none { color: var(--slate); }
@media (max-width: 1100px) { .x-bdir-v5 .x-bdir-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .x-bdir-v5 .x-bdir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .x-bdir-v5 .x-bdir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .x-bdir-az a, .x-bdir-az span { min-width: 32px; height: 36px; }
  .x-bdir-v5 .x-bmark { height: 72px; }
}
/* ============================================================================   Batch 5: listings (inc/category.php, inc/storefront.php sections 9 and 10).
   Category landing, shared category tiles, "How to choose", cards (badges, status, series,
   44 px compare), table view, zero-result and empty states, search summary.
   =================================================================================== */

/* ---------- cards: title, badges, price block, status, actions ---------- */
ul.products.sgh-cards li.product .woocommerce-loop-product__title { margin: 5px 0 0; padding: 0; font: 600 var(--fs-body)/1.35 var(--display); letter-spacing: -0.005em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; text-wrap: pretty; }
ul.products.sgh-cards li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title { color: var(--orange-press); }
ul.products.sgh-cards li.product .sgh-card-media { position: relative; }
.sgh-card-badges { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 16px); pointer-events: none; }
.sgh-card-badges .bdg { padding: 3px 7px; border-radius: 5px; font: 600 var(--fs-micro)/1.3 var(--sans); letter-spacing: .01em; background: var(--ground-2, var(--ground-2)); color: var(--charcoal); }
.sgh-card-badges .bdg.is-mrp { background: var(--orange-tint); color: var(--orange-press); }
.sgh-card-badges .bdg.is-eol { background: var(--paper); color: var(--slate); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sgh-card-series { margin-top: 3px; font-size: var(--fs-micro); line-height: 1.35; color: var(--slate); }
.sgh-card-stock { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-micro); font-weight: 400; line-height: 1.35; color: var(--slate); }
.sgh-card-stock::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sgh-card-stock.is-in { color: var(--ok); }
.sgh-card-stock.is-low, .sgh-card-stock.is-back { color: var(--warn); }
.sgh-card-stock.is-quote { color: var(--charcoal); }
.sgh-card-stock.is-opts::before { content: none; }
.sgh-card-stock.is-opts { margin-top: 2px; }
.sgh-card-actions { gap: 8px; }
ul.products.sgh-cards li.product .sgh-card-actions .button { min-height: var(--btn-sm); }
ul.products.sgh-cards li.product .sgh-card-actions .sgh-card-compare.is-icon, .sgh-tech-table .sgh-card-compare.is-icon { position: static; flex: none; display: inline-grid; place-items: center; width: var(--btn-sm); height: var(--btn-sm); padding: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--charcoal); text-decoration: none; }
ul.products.sgh-cards li.product .sgh-card-actions .sgh-card-compare.is-icon:hover, .sgh-tech-table .sgh-card-compare.is-icon:hover { border-color: var(--ink); color: var(--ink); }
ul.products.sgh-cards li.product .sgh-card-actions .sgh-card-compare.is-icon[aria-pressed="true"], .sgh-tech-table .sgh-card-compare.is-icon[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sgh-card-compare.is-icon svg { width: 20px; height: 20px; }
body.sgh-view-list .sgh-card-actions { padding: 12px 16px 16px; }
body.sgh-view-list ul.products.sgh-cards li.product .woocommerce-loop-product__title { grid-column: 2; grid-row: 3; min-height: 0; }
@media (max-width: 600px) {
  ul.products.sgh-cards li.product .woocommerce-loop-product__title { font-size: var(--fs-small); min-height: 2.7em; }
  .sgh-card-badges { top: 6px; left: 6px; }
  .sgh-card-badges .bdg { font-size: var(--fs-micro); padding: 2px 6px; }
  .sgh-card-actions { gap: 6px; }
  ul.products.sgh-cards li.product .sgh-card-actions .button { padding: 0 8px; font-size: var(--fs-small); }
}

/* ---------- category and department tiles (sgh_render_category_tiles) ---------- */
.sgh-ctiles { clear: both; margin: 0 0 28px; }
.sgh-ctiles-h, .sgh-choose h2, .sgh-cl-rec h2 { margin: 0 0 12px; font: 700 var(--fs-h3)/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.sgh-ctiles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sgh-ctiles a { display: flex; flex-direction: column; height: 100%; padding: 8px 8px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.sgh-ctiles a:hover { border-color: var(--ink); }
.sgh-ctiles a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sgh-ctiles .pic { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 10px; border-radius: 6px; background: var(--ground); overflow: hidden; }
.sgh-ctiles .pic img { width: 100%; height: 100%; padding: 10%; object-fit: contain; mix-blend-mode: multiply; }
.sgh-ctiles .pic .icon { width: 44px; height: 44px; stroke-width: 1.3; color: var(--slate); }
.sgh-ctiles .nm { padding: 0 4px; font: 600 var(--fs-small)/1.3 var(--display); text-wrap: balance; }
.sgh-ctiles .ct { margin-top: 3px; padding: 0 4px; font-size: var(--fs-micro); color: var(--slate); font-variant-numeric: tabular-nums; }
.sgh-shop-depts ul { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.sgh-shop-depts .pic { margin-bottom: 8px; }
.sgh-shop-depts .nm { font-size: var(--fs-small); }
@media (max-width: 980px) {
  .sgh-ctiles ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgh-shop-depts ul { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}
@media (max-width: 600px) {
  .sgh-ctiles ul { gap: 8px; }
  .sgh-ctiles.is-auto ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding-bottom: 6px; margin-right: -20px; padding-right: 20px; overscroll-behavior-x: contain; }
  .sgh-ctiles.is-auto li { flex: 0 0 38%; scroll-snap-align: start; }
  .sgh-shop-depts.is-auto li { flex-basis: 31%; }
  .sgh-ctiles .nm { font-size: var(--fs-small); }
  .sgh-ctiles-h, .sgh-choose h2, .sgh-cl-rec h2 { font-size: var(--fs-h3); }
}

/* ---------- category landing ---------- */
.sgh-cl { margin: 6px 0 4px; }
.sgh-cl-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; margin: 0 0 28px; padding: 26px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.sgh-cl-hero.no-media { grid-template-columns: minmax(0, 1fr); }
.sgh-cl-hero h1 { margin: 0 0 8px; font: 700 var(--fs-h1)/1.15 var(--display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.sgh-cl-hero .lead { max-width: 64ch; margin: 0 0 16px; font-size: var(--fs-body); line-height: 1.6; color: var(--charcoal); }
.sgh-cl-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sgh-cl-stats li { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--ground); font-size: var(--fs-micro); color: var(--charcoal); }
.sgh-cl-stats b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sgh-cl-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }
.sgh-cl-brands .lbl { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.sgh-cl-brands ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sgh-cl-brands a { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 88px; padding: 6px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--charcoal); }
.sgh-cl-brands a:hover { border-color: var(--ink); }
.sgh-cl-brands img.mk { display: block; width: auto; max-width: 104px; height: 26px; object-fit: contain; }
.sgh-cl-brands .x-wordmark { font: 800 var(--fs-small)/1 var(--display); letter-spacing: .03em; color: var(--charcoal); white-space: nowrap; }
.sgh-cl-brands .more { font-size: var(--fs-micro); color: var(--slate); }
.sgh-cl-media { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.sgh-cl-media a { display: block; aspect-ratio: 1; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.sgh-cl-media a:hover { border-color: var(--line-strong); }
.sgh-cl-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sgh-cl-also { margin: -16px 0 28px; font-size: var(--fs-small); color: var(--slate); }
.sgh-cl-also span { color: var(--slate); }
.sgh-cl-also a { color: var(--charcoal); }
.sgh-cl-all { clear: both; margin: 0 0 12px; font: 700 var(--fs-h3)/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.sgh-cl-rec { margin: 0 0 28px; }
.sgh-cl-rec ul.products.sgh-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }

/* how to choose */
.sgh-choose { margin: 0 0 28px; padding: 22px 24px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.sgh-choose ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; counter-reset: none; }
.sgh-choose li { position: relative; padding: 2px 0 2px 16px; border-left: 2px solid var(--line); }
.sgh-choose .ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 10px; background: var(--orange-tint); color: var(--orange-press); }
.sgh-choose .ic svg { width: 26px; height: 26px; }
.sgh-choose .no { position: absolute; top: 0; left: 46px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 var(--fs-micro)/1 var(--sans); }
.sgh-choose h3 { margin: 0 0 4px; font: 600 var(--fs-body)/1.3 var(--display); color: var(--ink); }
.sgh-choose p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--charcoal); }
.sgh-choose .note { margin: 14px 0 0; font-size: var(--fs-micro); color: var(--slate); }

@media (max-width: 980px) {
  .sgh-cl-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .sgh-cl-media { max-width: 480px; }
  .sgh-choose ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .sgh-cl-rec ul.products.sgh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sgh-cl-hero { padding: 16px; border-radius: 10px; margin-bottom: 22px; }
  .sgh-cl-hero h1 { font-size: var(--fs-h1); }
  .sgh-cl-hero .lead { font-size: var(--fs-small); margin-bottom: 12px; }
  .sgh-cl-stats li { font-size: var(--fs-micro); padding: 4px 9px; }
  .sgh-cl-brands .lbl { flex-basis: 100%; }
  .sgh-cl-brands a { height: 40px; min-width: 0; padding: 6px 10px; }
  .sgh-cl-brands img.mk { height: 22px; max-width: 84px; }
  .sgh-cl-media a { padding: 6px; }
  .sgh-choose { padding: 16px 0 14px 16px; }
  .sgh-choose h2 { padding-right: 16px; }
  .sgh-choose ol { display: flex; overflow-x: auto; gap: 12px; padding: 0 16px 6px 0; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .sgh-choose li { flex: 0 0 76%; scroll-snap-align: start; }
  .sgh-choose .note { padding-right: 16px; }
  .sgh-cl-rec ul.products.sgh-cards { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .sgh-cl-rec ul.products.sgh-cards > li.product { flex: 0 0 46%; scroll-snap-align: start; }
  .sgh-cl-also { margin-top: -12px; }
}
@media (prefers-reduced-motion: reduce) { .sgh-ctiles a { transition: none; } }

/* ---------- table view: fixed layout, 2-line cells, sticky price and compare ---------- */
.sgh-table-wrap { overflow-x: auto; }
.sgh-tech-table { table-layout: fixed; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.sgh-tech-table col.c-prod { width: 34%; }
.sgh-tech-table col.c-price { width: 136px; }
.sgh-tech-table col.c-act { width: 188px; }
.sgh-tech-table.cols-0 col.c-prod, .sgh-tech-table.cols-1 col.c-prod { width: auto; }
.sgh-tech-table th { white-space: normal; overflow-wrap: break-word; hyphens: auto; letter-spacing: .03em; font-size: var(--fs-micro); vertical-align: bottom; }
.sgh-tech-table .prod a { min-width: 0; align-items: flex-start; }
.sgh-tech-table .prod a > span { min-width: 0; }
.sgh-tech-table .prod .nm, .sgh-tech-table td .v { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sgh-tech-table td { overflow: hidden; }
.sgh-tech-table td .na { display: block; width: 14px; border-top: 1.5px solid var(--line-strong); }
.sgh-tech-table th:nth-last-child(2), .sgh-tech-table td.price { position: sticky; right: 188px; z-index: 1; background: var(--paper); box-shadow: -1px 0 0 var(--line); }
.sgh-tech-table th:nth-last-child(2) { background: var(--ground); }
.sgh-tech-table th:last-child, .sgh-tech-table td.act { position: sticky; right: 0; z-index: 1; background: var(--paper); text-align: center; }
.sgh-tech-table th:last-child { background: var(--ground); }
.sgh-tech-table td.act .sgh-card-compare.is-icon { width: 40px; height: 40px; }
.sgh-tech-table td.act { white-space: nowrap; }
.sgh-tech-table td.act .sgh-rec-act { margin-right: 6px; vertical-align: middle; }
.sgh-tech-table { min-width: 880px; }

/* ---------- empty and zero-result listings ---------- */
.listing.is-empty { grid-template-columns: minmax(0, 1fr); }
.listing.is-empty .sgh-zero { max-width: none; margin-bottom: 26px; }
.sgh-zero p { max-width: 70ch; }
.sgh-contact-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.sgh-contact-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.sgh-contact-chips li:first-child a { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sgh-contact-chips a:hover { border-color: var(--ink); }
.sgh-contact-chips .icon { width: 18px; height: 18px; }
.sgh-zero-all { margin: -8px 0 24px; font-size: var(--fs-small); }
.sgh-zero-all a { color: var(--orange-press); font-weight: 600; }

/* ---------- search: summary line and capped note ---------- */
.sgh-search-summary { margin: -2px 0 12px; font-size: var(--fs-small); color: var(--slate); }
.sgh-search-note.is-capped { color: var(--charcoal); background: var(--ground); border-left: 3px solid var(--line-strong); padding: 8px 12px; border-radius: 0 6px 6px 0; }
.woocommerce-result-count .pg { color: var(--slate); }
@media (max-width: 600px) { .sgh-cl-stats li.sub { display: none; } }
@media (max-width: 600px) { .sgh-cl-rec ul.products.sgh-cards > li.product { flex-basis: 58%; } }
@media (max-width: 400px) { ul.products.sgh-cards li.product .sgh-card-actions .button { white-space: normal; line-height: 1.15; padding: 0 6px; font-size: var(--fs-micro); } }
.post-type-archive-product .woocommerce-products-header__title + .sgh-ctiles, .sgh-shop-depts { margin-top: 4px; }
/* ===================================================================================
 * Product page, batch 5 (inc/product-ui.php): sticky left column with "At a glance" and
 * "In the box", ex-GST line, highlights, version chips, bulk row, 44 px compare, grouped
 * specifications, document cards, wiring diagram, phone gallery dots and jump-bar fade.
 * =================================================================================== */
.single-product.woocommerce div.product > .sgh-pdp-media { grid-column: 1; grid-row: 1; position: sticky; top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-self: start; min-width: 0; }
.single-product.woocommerce div.product .sgh-pdp-media > div.woocommerce-product-gallery { position: relative; top: auto; width: auto; float: none; margin: 0; }
.sgh-inbox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; }
/* At a glance: a definition list on dividers, not tiles in a panel (design audit step 7). */
.sgh-glance { padding: 0; background: none; border: 0; }
.sgh-side-h { margin: 0 0 12px; font: 700 var(--fs-body)/1.3 var(--display); letter-spacing: 0; color: var(--ink); }
.sgh-glance dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin: 0; }
.sgh-glance dl > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 10px; row-gap: 2px; align-content: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sgh-glance .icon { grid-row: 1 / 3; width: 22px; height: 22px; margin-top: 1px; color: var(--orange-press); vertical-align: 0; }
.sgh-glance dt { font-size: var(--fs-micro); line-height: 1.3; color: var(--slate); }
.sgh-glance dd { margin: 0; font-size: var(--fs-small); line-height: 1.35; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sgh-glance.is-inline { display: none; }
.sgh-inbox ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; margin: 0; padding: 0; }
.sgh-inbox li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); line-height: 1.4; color: var(--charcoal); }
.sgh-inbox .icon { flex: none; width: 20px; height: 20px; color: var(--charcoal); vertical-align: 0; }
/* buying column */
.sgh-pdp-model.is-sku .v { color: var(--slate); }
.single-product div.product .summary p.price + .sgh-exgst { margin-top: -12px; }
.sgh-exgst { margin: 0 0 18px; font-size: var(--fs-small); color: var(--slate); font-variant-numeric: tabular-nums; }
.sgh-exgst .woocommerce-Price-amount { color: var(--charcoal); font-weight: 600; }
.sgh-highlights { margin: 0 0 18px; padding: 0 0 0 18px; max-width: 62ch; font-size: var(--fs-body); line-height: 1.55; color: var(--charcoal); }
.sgh-highlights li { margin: 0 0 4px; padding-left: 2px; }
.sgh-highlights li::marker { color: var(--orange-press); }
.sgh-versions { margin: 0 0 14px; }
.sgh-versions .lbl { display: block; margin: 0 0 7px; font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); }
.sgh-versions .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sgh-versions .chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--fs-small); font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.sgh-versions a.chip:hover { border-color: var(--ink); }
.sgh-versions .chip.on { border-color: var(--charcoal); background: var(--charcoal); color: var(--paper); }
.sgh-version-legend { display: grid; gap: 2px; margin: 10px 0 0; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-micro); line-height: 1.45; }
.sgh-version-legend > dt.h { margin: 0 0 4px; font-weight: 600; color: var(--charcoal); }
.sgh-version-legend > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
.sgh-version-legend > div dt { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink); }
.sgh-version-legend > div dd { margin: 0; color: var(--charcoal); }
.single-product .summary .sgh-series-link { margin: 0 0 16px; font-size: var(--fs-small); }
.sgh-avail { margin: 0 0 16px; font-size: var(--fs-body); line-height: 1.5; }
.sgh-avail .h { display: block; margin: 0 0 3px; font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); }
.sgh-avail p { margin: 0 0 2px; color: var(--ink); }
.sgh-avail .k { color: var(--slate); }
.sgh-bulk { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--charcoal); }
.sgh-bulk .icon { flex: none; color: var(--charcoal); vertical-align: 0; }
.sgh-bulk a { color: var(--orange-press); font-weight: 600; }
.sgh-pdp-tools { align-items: center; gap: 10px 20px; margin: 14px 0 0; }
.sgh-pdp-tools .sgh-pdp-compare { min-height: 44px; padding: 0 16px; gap: 8px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); font: 600 var(--fs-small)/1 var(--sans); color: var(--ink); }
.sgh-pdp-tools .sgh-pdp-compare .box { display: none; }
.sgh-pdp-tools .sgh-pdp-compare .icon { width: 18px; height: 18px; vertical-align: 0; }
.sgh-pdp-tools .sgh-pdp-compare:hover { border-color: var(--ink); }
.sgh-pdp-tools .sgh-pdp-compare[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }
.sgh-pdp-ask { font-size: var(--fs-small); color: var(--charcoal); }
/* grouped specifications */
.sgh-specs.is-grouped { columns: 2; column-gap: 20px; }
.sgh-specs.is-grouped .sgh-spec-group { break-inside: avoid; margin: 0 0 20px; }
.sgh-specs.is-grouped .sgh-spec-list { columns: 1; padding: 2px 18px; }
.sgh-specs.is-grouped .sgh-spec-list > div:last-child { border-bottom: 0; }
.sgh-spec-group h3 { margin: 0 0 8px; font: 700 var(--fs-body)/1.3 var(--display); color: var(--ink); }
.sgh-spec-warranty { margin-top: 12px; columns: 1; }
.sgh-specs:not(.is-grouped) + .sgh-spec-warranty { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.sgh-js .sgh-specs.is-clipped:not(.is-open) .is-more { display: none; }
/* per-option rows on variable products (b17, sgh.js): marked, and never hidden behind "Show all rows" */
.sgh-spec-list > div.is-opt { position: relative; }
.sgh-spec-list > div.is-opt::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--orange-press); }
.sgh-spec-list > div.is-opt dd { font-weight: 600; }
.sgh-spec-tag { display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: var(--radius-1); background: var(--orange-tint); color: var(--orange-deep); font: 600 11px/18px var(--sans); white-space: nowrap; vertical-align: 1px; }
.sgh-js .sgh-specs.is-clipped:not(.is-open) .sgh-spec-list > div.is-more.is-opt { display: grid; }
.sgh-js .sgh-specs.is-clipped:not(.is-open) .sgh-spec-group.is-more.has-opt { display: block; }
.sgh-spec-optnote[hidden] { display: none; }
.sgh-spec-optnote { display: block; margin: 0 0 14px; }
.sgh-spec-optnote p { margin: 0; }
.sgh-spec-optnote p.d { margin-top: 4px; color: var(--charcoal); }
.sgh-spec-optnote p[hidden] { display: none; }
.sgh-spec-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.sgh-spec-pick[hidden] { display: none; }
.sgh-spec-pick label { font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); }
.sgh-spec-pick select { min-width: 220px; max-width: 100%; height: var(--field-h); background-color: var(--paper); }
.sgh-specs-more { margin: 12px 0 0; min-height: 44px; }
/* document cards */
.sgh-doc-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.sgh-doc { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease; }
.sgh-doc:hover { border-color: var(--ink); }
.sgh-doc .badge { display: flex; align-items: flex-end; justify-content: center; width: 40px; height: 48px; padding-bottom: 6px; border-radius: 3px 10px 3px 3px; background: var(--error); color: var(--paper); font: 800 10.5px/1 var(--sans); letter-spacing: .04em; }
.sgh-doc.is-cert .badge { background: var(--ok); }
.sgh-doc.is-web .badge, .sgh-doc.is-file .badge { background: var(--slate); }
.sgh-doc .t { min-width: 0; }
.sgh-doc .t > a { font-weight: 600; font-size: var(--fs-small); line-height: 1.4; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.sgh-doc .t > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sgh-doc .t small { display: block; margin-top: 3px; font-size: var(--fs-micro); color: var(--slate); }
.sgh-doc .get { font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); white-space: nowrap; }
.sgh-doc-foot { margin: 12px 0 0; font-size: var(--fs-small); color: var(--slate); }
.sgh-doc-foot a { color: var(--charcoal); }
/* wiring diagram */
.sgh-diagram-fig { margin: 0; max-width: 760px; }
.sgh-diagram-svg { display: block; width: 100%; height: auto; }
@media (max-width: 1200px) {
  .sgh-specs.is-grouped { columns: 1; }
}
@media (max-width: 960px) {
  /* one column: gallery, buying column (with At a glance under the price), then In the box */
  .single-product.woocommerce div.product > .sgh-pdp-media { display: contents; }
  .single-product.woocommerce div.product .sgh-pdp-media > div.woocommerce-product-gallery { order: -2; margin: 0 0 22px; }
  .single-product.woocommerce div.product > div.summary { order: -1; }
  .sgh-pdp-media .sgh-glance { display: none; }
  .sgh-inbox { margin: 22px 0 0; }
  .sgh-glance.is-inline { display: block; margin: 0 0 18px; padding: 0; border: 0; background: none; }
  .sgh-glance.is-inline .sgh-side-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sgh-glance.is-inline dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgh-glance.is-inline dl > div { background: var(--paper); }
  .sgh-doc-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  /* phones: swipe gallery (flexslider) with dots instead of thumbnails */
  .single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs { justify-content: center; gap: 0; margin: 8px 0 0; overflow: visible; }
  .single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li { width: 24px; height: 24px; position: relative; }
  .single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img { position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; object-fit: none; object-position: -9999px -9999px; background: var(--line-strong); }
  .single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active { border: 0; background: var(--ink); }
  .sgh-pdp-nav div { -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); padding-right: 32px; }
  .sgh-glance dl > div { padding: 10px; column-gap: 8px; }
  .sgh-glance dd { font-size: var(--fs-small); }
  .sgh-doc { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .sgh-doc .badge { width: 34px; height: 42px; font-size: 9.5px; }
  .sgh-doc .get { grid-column: 2; }
  .sgh-version-legend > div { grid-template-columns: 48px minmax(0, 1fr); }
  .sgh-diagram-fig { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
  .sgh-diagram-svg { min-width: 600px; }
  .sgh-sticky-buy .sgh-sticky-price .from { font: 400 var(--fs-micro) var(--sans); color: var(--slate); }
}
@media (prefers-reduced-motion: reduce) {
  .sgh-doc { transition: none; }
}
/* ===== Batch 5: Resources, buying guides, Document Library, help and company pages (inc/resources-ui.php) ===== */
/* live prices and product cards (sgh-core [sgh_price], [sgh_product]) */
.sgh-lp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sgh-lp.is-por { white-space: normal; }
.sgh-pcard { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; max-width: 520px; }
.sgh-pcard-img { display: grid; place-items: center; width: 72px; height: 72px; background: var(--paper); border-radius: var(--radius-sm); overflow: hidden; }
.sgh-pcard-img img { width: 100%; height: 100%; object-fit: contain; }
.sgh-pcard-noimg { width: 100%; height: 100%; background: var(--ground); }
.sgh-pcard-body { display: grid; gap: 3px; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.x-prose .sgh-pcard a.sgh-pcard-name, .sgh-pcard a.sgh-pcard-name { grid-column: 1 / -1; color: var(--ink); text-decoration: none; font: 600 var(--fs-small)/1.35 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sgh-pcard a.sgh-pcard-name:hover { color: var(--orange-press); }
.sgh-pcard-price { font: 700 var(--fs-body)/1.2 var(--display, var(--sans)); color: var(--ink); }
.sgh-pcard-price small { font: 400 var(--fs-micro)/1 var(--sans); color: var(--slate); }
.sgh-pcard-price.is-por { font: 600 var(--fs-small)/1.2 var(--sans); color: var(--charcoal); }
.x-prose .sgh-pcard a.sgh-pcard-cta, .sgh-pcard a.sgh-pcard-cta { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 600 var(--fs-small)/1 var(--sans); background: var(--paper); }
.sgh-pcard a.sgh-pcard-cta:hover { border-color: var(--ink); }

/* buying guide layout: article plus a sticky rail */
.x-guide .x-ghero h1 { max-width: 30ch; }
.x-gmeta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; color: var(--slate); font-size: var(--fs-small); }
.x-gmeta li { display: inline-flex; align-items: center; gap: 7px; }
.x-gmeta .icon { width: 17px; height: 17px; color: var(--orange-press); }
.x-gbody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; padding-top: 36px; }
.x-gprose { max-width: 760px; }
.x-gprose > p:first-child { font-size: var(--fs-h3); color: var(--ink); }
.x-grail { align-self: stretch; }
.x-grail-in { position: sticky; top: 16px; display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
.x-takeaways { background: var(--orange-tint); border: 1px solid var(--orange-line); border-radius: var(--radius); padding: 16px 18px; }
.x-takeaways h2 { font: 800 var(--fs-body)/1.2 var(--display); margin: 0 0 10px; color: var(--ink); }
.x-takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.x-takeaways li { position: relative; padding-left: 22px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
.x-takeaways li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border: solid var(--orange-press); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.x-gtoc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: var(--fs-small); }
.x-gtoc summary { margin: 0; display: flex; justify-content: space-between; }
.x-gtoc summary::after { content: "+"; font-size: var(--fs-body); line-height: 12px; }
.x-gtoc[open] summary { margin-bottom: 10px; }
.x-gtoc[open] summary::after { content: "\2212"; }
.x-gprods h2 { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin: 4px 0 8px; }
.x-gprods-list { display: grid; gap: 8px; }
.sgh-pcard.is-compact { grid-template-columns: 56px minmax(0, 1fr); margin: 0; padding: 8px 10px; gap: 10px; max-width: none; }
.sgh-pcard.is-compact .sgh-pcard-img { width: 56px; height: 56px; }
.sgh-pcard.is-compact a.sgh-pcard-name { font-size: var(--fs-small); }
.sgh-pcard.is-compact .sgh-pcard-price { font-size: var(--fs-small); }
.sgh-pcard.is-compact a.sgh-pcard-cta { min-height: 30px; padding: 0 10px; font-size: var(--fs-micro); }
/* tables stay inside the prose column and scroll in their own box */
.x-tablewrap { max-width: 100%; overflow-x: auto; margin: 6px 0 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); -webkit-overflow-scrolling: touch; }
.x-tablewrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.x-prose .x-tablewrap table { display: table; width: 100%; margin: 0; border: 0; border-radius: 0; min-width: 520px; }
.x-prose .x-tablewrap tr:last-child td { border-bottom: 0; }
.x-prose td .sgh-lp { font-weight: 600; color: var(--ink); }
/* guide diagram */
.x-gfig { margin: 26px 0 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; max-width: 760px; }
.x-gfig svg { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.x-gfig figcaption { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--slate); }
.x-gfig-tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ground); color: var(--charcoal); font-size: var(--fs-micro); font-weight: 600; }
@media (max-width: 980px) {
  .x-gbody { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 22px; }
  .x-grail { order: -1; }
  .x-grail-in { position: static; max-height: none; overflow: visible; }
  .x-gprods-list { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .x-gprods-list .sgh-pcard { flex: 0 0 min(280px, 82%); scroll-snap-align: start; }
}
@media (max-width: 600px) { .x-gfig { padding: 10px; margin-inline: -4px; } .x-gprose > p:first-child { font-size: var(--fs-body); } }

/* Resources hub */
.x-rhub .x-ihero { border-bottom: 0; }
.x-rlib { background: var(--panel); color: var(--panel-ink); }
.x-rlib-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 40px 44px; }
.x-rlib h2 { font: 800 var(--fs-h2)/1.12 var(--display); color: var(--paper); margin: 0 0 10px; max-width: 22ch; }
.x-rlib p { color: var(--panel-mute); margin: 0 0 20px; max-width: 60ch; }
.x-rlib p a { color: var(--paper); }
.x-rlib-search { display: flex; gap: 8px; max-width: 620px; }
.x-rlib-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--paper); border-radius: var(--radius-sm); padding: 0 12px; }
.x-rlib-field .icon { color: var(--slate); }
.x-rlib-field input { flex: 1; min-width: 0; border: 0; outline: 0; min-height: 48px; font: inherit; font-size: 15px; background: transparent; color: var(--ink); }
.x-rlib-field:focus-within { box-shadow: 0 0 0 3px var(--orange); }
.x-rlib-search .btn { min-height: var(--btn-lg); }
.x-rlib-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.x-rlib-types a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--panel-line); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--panel-ink); text-decoration: none; font-size: var(--fs-small); }
.x-rlib-types a:hover { border-color: var(--panel-mute); }
.x-rlib-types i { width: 10px; height: 10px; border-radius: 3px; background: var(--chip, var(--orange)); }
.x-rlib-types b { font-variant-numeric: tabular-nums; color: var(--paper); }
.x-gcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.x-gcard { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 22px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 22px 14px 14px; text-decoration: none; color: var(--ink); }
.x-gcard:hover { border-color: var(--charcoal); }
.x-gcard-vis { display: grid; place-items: center; gap: 6px; align-content: center; height: 104px; background: var(--ground); border-radius: var(--radius-sm); color: var(--orange-press); text-align: center; padding: 8px; }
.x-gcard-vis .icon { width: 40px; height: 40px; stroke-width: 1.5; }
.x-gcard-vis small { font-size: var(--fs-micro); line-height: 1.25; color: var(--charcoal); font-weight: 600; }
.x-gcard-body { display: grid; gap: 5px; min-width: 0; }
.x-gcard-topic { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); }
.x-gcard b { font: 700 clamp(17px, 1.6vw, 20px)/1.25 var(--display); }
.x-gcard-ex { color: var(--slate); font-size: var(--fs-small); line-height: 1.5; max-width: 80ch; }
.x-gcard-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-small); color: var(--orange-press); white-space: nowrap; }
.x-gcard-go .icon { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .x-rlib-in { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 28px 32px; }
  .x-gcard { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .x-gcard-vis { height: 64px; }
  .x-gcard-vis small { display: none; }
  .x-gcard-vis .icon { width: 30px; height: 30px; }
  .x-gcard-go { grid-column: 2; }
}
@media (max-width: 520px) { .x-rlib-search { flex-direction: column; } .x-rlib-types { grid-template-columns: minmax(0, 1fr); } .x-gcard-ex { display: none; } }

/* Document Library */
.sgh-library .t-datasheet, .x-rlib-types .t-datasheet { --chip: var(--orange-press); --chip-bg: var(--orange-tint); }
.sgh-library .t-manual, .x-rlib-types .t-manual { --chip: var(--ink); --chip-bg: var(--ground-2); }
.sgh-library .t-installation, .x-rlib-types .t-installation { --chip: var(--charcoal); --chip-bg: var(--ground-2); }
.sgh-library .t-brochure, .x-rlib-types .t-brochure { --chip: var(--ok); --chip-bg: var(--ok-bg); }
.sgh-library .t-compliance, .x-rlib-types .t-compliance { --chip: var(--warn); --chip-bg: var(--warn-bg); }
.sgh-library .t-web, .x-rlib-types .t-web { --chip: var(--slate); --chip-bg: var(--ground-2); }
.x-rlib-types .t-manual i, .x-rlib-types .t-installation i, .x-rlib-types .t-brochure i, .x-rlib-types .t-compliance i, .x-rlib-types .t-web i { background: var(--chip); filter: brightness(1.5); }
.sgh-library-search input { min-height: 44px; }
.x-prose .sgh-library-facets h2.sgh-facet-h, .sgh-library-facets h2.sgh-facet-h { font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin: 18px 0 6px; padding: 0; border: 0; }
.sgh-facet-note { font-size: var(--fs-micro); color: var(--slate); margin: 0 0 4px; line-height: 1.4; }
.sgh-library-facets a { align-items: center; }
.sgh-library-facets a .n { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sgh-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--chip); flex: none; }
.sgh-library-facets a[aria-current] .sgh-dot { outline: 1px solid var(--paper); }
.sgh-facet-more summary { cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); padding: 4px 8px; list-style: none; }
.sgh-facet-more summary::-webkit-details-marker { display: none; }
.sgh-facet-none { font-size: var(--fs-small); color: var(--slate); margin: 0 0 4px 8px; }
.sgh-library-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.sgh-library-status .sgh-hint { margin: 0; }
.sgh-active-filters { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sgh-active-filters a { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: var(--fs-micro); font-weight: 600; }
.sgh-active-filters a.clear { background: transparent; color: var(--orange-press); padding-inline: 4px; }
.sgh-doc-list .doc { align-items: center; gap: 12px; }
.sgh-dhost { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--ground); color: var(--charcoal); }
.sgh-dhost.k-pdf { background: var(--error-bg); color: var(--orange-deep); }
.sgh-dhost.k-download { background: var(--ground-2); color: var(--ink); }
.sgh-dmain { display: grid; gap: 4px; min-width: 0; }
.sgh-doc-list .doc small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sgh-dchip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--chip); font: 700 var(--fs-micro)/1.4 var(--sans); letter-spacing: .02em; }
.sgh-doc-list .prod { display: grid; gap: 1px; text-decoration: none; }
.sgh-doc-list .prod span { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.sgh-doc-list .prod:hover { color: var(--orange-press); }
.sgh-pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
@media (max-width: 760px) {
  .sgh-library-body { grid-template-columns: minmax(0, 1fr); }
  .sgh-doc-list li { grid-template-columns: minmax(0, 1fr); }
  .sgh-doc-list .prod { padding-left: 48px; }
}

/* FAQ: chevron centred on the question line */
.x-faq summary::after { transform: rotate(45deg); margin-top: -5px; align-self: center; }
.x-faq[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }

/* policies: entity line and update date */
.x-prose > p.sgh-entity:first-child, .x-prose p.sgh-entity { font-size: var(--fs-small); color: var(--slate); margin: 0 0 16px; padding: 8px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); display: inline-block; }
.x-prose p.sgh-entity + p { font-size: var(--fs-h3); color: var(--ink); }
.x-prose p.sgh-updated { font-size: var(--fs-small); color: var(--slate); margin-top: 24px; }

/* icon rows (About "How we work", Partner benefits, Warranty steps, account benefits) */
.x-iconrow { list-style: none; margin: 14px 0 22px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: none; }
.x-prose .x-iconrow { padding: 0; max-width: none; }
.x-iconrow li { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 6px; align-content: start; font-size: var(--fs-small); line-height: 1.5; color: var(--charcoal); }
.x-iconrow .icon { width: 28px; height: 28px; color: var(--orange-press); margin-bottom: 4px; }
.x-iconrow b { font: 700 var(--fs-body)/1.3 var(--display); color: var(--ink); }
.x-iconrow.is-steps { counter-reset: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; margin: 8px 0 0; }
.x-iconrow.is-steps li { position: relative; }
.x-iconrow.is-steps li:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 50%; width: 14px; height: 14px; border: solid var(--line-strong); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
.x-wsteps { margin: 8px 0 28px; padding: 16px; background: var(--ground-2, var(--ground-2)); border-radius: var(--radius); }
.x-wsteps figcaption { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 12px; }
@media (max-width: 700px) {
  .x-iconrow.is-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .x-iconrow.is-steps li:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -17px; transform: rotate(135deg); }
}
.x-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* About: counts band, logo strip, company facts */
.x-counts { background: var(--paper); border-bottom: 1px solid var(--line); }
.x-counts ul { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.x-counts li { border-left: 1px solid var(--line); }
.x-counts li:first-child { border-left: 0; }
.x-counts a { display: grid; gap: 2px; padding: 18px 20px; text-decoration: none; color: var(--ink); }
.x-counts li:first-child a { padding-left: 0; }
.x-counts b { font: 800 clamp(22px, 2.4vw, 30px)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.x-counts span { font-size: var(--fs-small); color: var(--slate); }
.x-counts a:hover b { color: var(--orange-press); }
@media (max-width: 700px) { .x-counts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x-counts li:nth-child(3) { border-left: 0; } .x-counts li:nth-child(n+3) { border-top: 1px solid var(--line); } .x-counts li:nth-child(3) a { padding-left: 0; } }
.x-logostrip { list-style: none; margin: 16px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; max-width: none; }
.x-prose .x-logostrip { padding: 0; }
.x-logostrip li { margin: 0; }
.x-logostrip a { display: grid; place-items: center; height: 64px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.x-logostrip a.is-dark { background: var(--panel); border-color: var(--panel); }
.x-logostrip a:hover { border-color: var(--charcoal); }
.x-logostrip img { max-width: 100%; max-height: min(var(--h, 34px), 40px); width: auto; height: auto; object-fit: contain; }
.x-logostrip .x-dword { font: 800 var(--fs-body)/1 var(--display); color: var(--ink); }
.x-facts { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.x-facts h2 { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; }
.x-facts dl { margin: 0; display: grid; gap: 10px; }
.x-facts dt { font-size: var(--fs-micro); color: var(--slate); }
.x-facts dd { margin: 1px 0 0; color: var(--ink); font-weight: 600; font-size: var(--fs-small); line-height: 1.45; overflow-wrap: anywhere; }
.x-facts a { color: var(--orange-press); }

/* Contact and Support: channel cards; Contact topic cards are clickable as a whole */
.x-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 14px 0 20px; }
.x-channel { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); color: var(--charcoal); text-decoration: none; font-size: var(--fs-small); line-height: 1.45; overflow-wrap: anywhere; }
.x-prose a.x-channel { color: var(--charcoal); }
a.x-channel:hover { border-color: var(--charcoal); }
.x-channel .icon { width: 24px; height: 24px; color: var(--orange-press); margin-top: 2px; }
.x-channel span { display: grid; gap: 2px; }
.x-channel b { color: var(--ink); font-size: var(--fs-body); }
.x-channel small { color: var(--slate); font-size: var(--fs-micro); }
.x-channel.is-wa { background: var(--ok); border-color: var(--ok); color: var(--paper); }
.x-prose a.x-channel.is-wa, .x-channel.is-wa b { color: var(--paper); }
.x-channel.is-wa .icon { color: var(--paper); }
a.x-channel.is-wa:hover { background: var(--ok); }
.x-channel.is-hours { background: var(--ground-2, var(--ground-2)); border-color: transparent; }
.x-channels.is-compact { margin: 10px 0 0; }
.x-prose .sgh-contact-grid p { position: relative; transition: border-color .15s ease; }
.x-prose .sgh-contact-grid p:hover { border-color: var(--charcoal); }
.x-prose .sgh-contact-grid p a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.x-prose .sgh-contact-grid p a { position: static; }
.x-prose .sgh-contact-grid p:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* signed-out account page */
.x-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.x-login-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.x-login-form .eyebrow, .x-login-biz .eyebrow { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); margin: 0 0 10px; }
.x-login-form h2 { margin-top: 0; }
.x-login-form form.login { border: 0; padding: 0; margin: 0; }
.x-login-form .woocommerce-form-login__submit { min-height: 44px; padding: 0 22px; background: var(--orange-press); color: var(--paper); border-radius: var(--radius-sm); }
.x-login-biz { background: var(--panel, var(--panel)); color: var(--panel-ink, var(--panel-ink)); border-radius: var(--radius); padding: 24px 26px; }
.x-login-biz .eyebrow { color: var(--orange); }
.x-login-biz h2 { color: var(--paper); margin: 0 0 8px; font-size: var(--fs-h3); }
.x-login-biz > p { color: var(--panel-mute, var(--panel-mute)); }
.x-login-biz .x-iconrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-login-biz .x-iconrow li { background: var(--panel-2, var(--panel-2)); border-color: var(--panel-line, var(--panel-line)); color: var(--panel-mute, var(--panel-mute)); }
.x-login-biz .x-iconrow b { color: var(--paper); }
.x-login-biz .x-iconrow .icon { color: var(--orange); }
.x-login-note { font-size: var(--fs-small); color: var(--panel-mute, var(--panel-mute)); margin: 12px 0 0; }
@media (max-width: 820px) { .x-login { grid-template-columns: minmax(0, 1fr); } .x-login-biz .x-iconrow { grid-template-columns: minmax(0, 1fr); } }

/* 404 cards */
.x-nf-sec { margin-top: 32px; }
.x-nf-sec h2 { font-size: var(--fs-h3); margin: 0 0 12px; }
.x-nf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.x-nf-cards li { margin: 0; }
.x-nf-cards a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; height: 100%; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.x-nf-cards a:hover { border-color: var(--charcoal); }
.x-nf-cards .icon { grid-row: span 2; width: 28px; height: 28px; color: var(--orange-press); fill: none; stroke: currentColor; }
.x-nf-cards b { font-size: var(--fs-body); }
.x-nf-cards span { font-size: var(--fs-small); color: var(--slate); }
@media (prefers-reduced-motion: reduce) { .x-prose .sgh-contact-grid p, .x-faq summary::after { transition: none; } }
.sgh-pcard { position: relative; }
.x-gprods-list { position: relative; }
.x-gfig svg.x-gchart { max-width: 470px; }
.x-prose .sgh-library-facets ul, .x-prose ul.sgh-doc-list, .x-prose ul.sgh-active-filters { padding-left: 0; max-width: none; margin-bottom: 0; }
.x-prose .sgh-library-facets li, .x-prose .sgh-doc-list li, .x-prose .sgh-active-filters li { margin-bottom: 0; }
.x-facts dd a { font-size: var(--fs-small); overflow-wrap: break-word; word-break: break-all; }
.x-facts dd a[href^="tel"], .x-facts dd a[href*="support/"] { word-break: normal; }
.woocommerce-account .sgh-article-body > .woocommerce > .x-login { grid-column: 1 / -1; }
.x-login-form form.login .form-row { padding: 0; margin: 0 0 14px; }
.x-login-form form.login input.input-text { width: 100%; min-height: 44px; }
.x-login-biz ul.x-iconrow, .sgh-article-body .x-iconrow { padding-left: 0; } .sgh-article-body .x-iconrow li { margin-bottom: 0; }
.x-grail, .x-grail-in, .x-gprods, .x-gprods-list { min-width: 0; }
.sgh-lib-filterlink { display: none; }
@media (max-width: 760px) {
  .sgh-library-body { display: flex; flex-direction: column; }
  .sgh-library-facets { order: 2; border-top: 1px solid var(--line); padding-top: 8px; scroll-margin-top: 12px; }
  .sgh-lib-filterlink { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--orange-press); }
}

/* ---------- Solution pages v3 (batch 5): hotspots, jump bar, intro, step strip, topology, set cards, downloads, accordions (inc/solution.php) ---------- */
.x-solution .x-sec { padding-top: 72px; }
.x-solution [id] { scroll-margin-top: 64px; }
.x-solution .x-sec-head { margin-bottom: 24px; }
.x-solution .x-sec-head h2 { max-width: 30ch; }
/* hero art and hotspots */
.x-hero-fig .x-hero-art-m { display: none; }
.x-hero-fig svg { display: block; width: 100%; height: auto; }
.x-hs { cursor: pointer; }
.x-hs circle { transition: fill .15s ease; }
.x-hs:hover circle, .x-hs:focus circle, .x-hs.is-hot circle { fill: var(--ink); }
.x-hs:focus { outline: none; }
.x-hs:focus-visible circle { stroke: var(--focus); stroke-width: 3; }
.x-hero-fig .x-callouts { gap: 2px 12px; }
.x-hero-fig .x-callouts li { padding: 4px 6px; border-radius: 6px; transition: background-color .15s ease; }
.x-hero-fig .x-callouts li.is-hot { background: var(--orange-tint); }
.x-hero-fig .x-callouts a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.x-hero-fig .x-callouts a:hover { color: var(--orange-press); }
.x-set-table tr.is-hot td, .x-set-table tr:target td { background: var(--orange-tint); }
@media (max-width: 600px) {
  .x-hero-fig.has-mobile .x-hero-art { display: none; }
  .x-hero-fig.has-mobile .x-hero-art-m { display: block; }
  .x-hero-fig .x-callouts { grid-template-columns: minmax(0, 1fr); }
}
/* sticky jump bar */
.x-solution .x-sjump { top: 0; z-index: var(--z-sticky); }
.x-solution .x-sjump .wrap { gap: 22px; scrollbar-width: none; }
.x-solution .x-sjump .wrap::-webkit-scrollbar { display: none; }
.x-solution .x-sjump a[aria-current] { color: var(--ink); border-bottom-color: var(--orange-press); }
@media (max-width: 900px) {
  .x-solution .x-sjump { -webkit-mask-image: linear-gradient(90deg, black 85%, transparent); mask-image: linear-gradient(90deg, black 85%, transparent); }
  .x-solution .x-sjump a { padding: 13px 0; }
}
/* two-column intro */
.x-sintro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 56px !important; }
.x-sintro > .x-sintro-col:first-child { padding-top: 25px; }
.x-sintro-col h2 { font: 800 var(--fs-h3)/1.15 var(--display); margin: 0 0 12px; padding: 0; border: 0; color: var(--ink); }
.x-sintro-col p { margin: 0 0 12px; }
.x-sintro-who { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px 14px; }
.x-sintro-who ul { margin: 0 0 12px; padding-left: 18px; }
.x-sintro-who li { margin-bottom: 8px; }
@media (max-width: 900px) { .x-sintro { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 40px !important; } }
/* How it works: icon step strip */
.x-stepstrip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 20px; counter-reset: none; }
.x-stepstrip li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.x-stepstrip li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 68px; right: -12px; border-top: 2px dashed var(--line-strong); }
.x-step-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--orange-tint); color: var(--orange-press); display: grid; place-items: center; margin-bottom: 8px; position: relative; z-index: 1; }
.x-step-ic .icon { width: 26px; height: 26px; }
.x-step-n { font: 700 var(--fs-micro)/1 var(--sans); color: var(--orange-press); letter-spacing: .08em; }
.x-stepstrip b { font: 800 var(--fs-h3)/1.2 var(--display); }
.x-step-t { font-size: var(--fs-small); color: var(--charcoal); line-height: 1.5; }
@media (max-width: 860px) {
  .x-stepstrip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .x-stepstrip li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding-bottom: 20px; }
  .x-stepstrip li > :not(.x-step-ic) { grid-column: 2; }
  .x-step-ic { grid-row: 1 / span 3; margin: 0; }
  .x-stepstrip li:not(:last-child)::after { top: 60px; bottom: 0; left: 27px; right: auto; border-top: 0; border-left: 2px dashed var(--line-strong); }
}
/* system diagram (HTML topology) */
.x-topo { display: flex; align-items: stretch; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.x-topo-lanes { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.x-lane-l { display: block; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin: 0 0 5px 2px; }
.x-lane-row { display: flex; align-items: center; }
.x-lane-row > .x-tn { flex: 0 0 236px; }
.x-tn { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 12px; min-width: 0; min-height: 58px; }
.x-tn-ic { flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--ground); color: var(--charcoal); display: grid; place-items: center; }
.x-tn-t { min-width: 0; }
.x-tn b { display: block; font: 700 var(--fs-small)/1.25 var(--display); }
.x-tn b a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.x-tn b a:hover { color: var(--orange-press); }
.x-tn small { display: block; font-size: var(--fs-micro); line-height: 1.35; color: var(--slate); margin-top: 2px; }
.x-topo-hub { display: flex; align-items: stretch; flex: 0 0 190px; }
.x-tn.is-hub { flex-direction: column; justify-content: center; text-align: center; width: 100%; background: var(--panel); border-color: var(--panel); color: var(--panel-ink); padding: 16px 14px; }
.x-tn.is-hub .x-tn-ic { background: var(--panel-2); color: var(--orange); width: 44px; height: 44px; }
.x-tn.is-hub small { color: var(--panel-mute); }
.x-tn.is-hub b a { border-bottom-color: color-mix(in srgb, var(--panel-ink) 32%, var(--panel)); }
.x-topo-chain { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.x-topo-chain > .x-tn { flex: 0 1 180px; min-width: 150px; }
.x-tl { flex: 1 1 100px; min-width: 92px; align-self: stretch; position: relative; display: flex; align-items: center; }
.x-tl::before { content: ""; position: absolute; left: 0; right: 7px; top: 50%; border-top: 2px solid var(--orange-press); }
.x-tl.is-dash::before { border-top-style: dashed; }
.x-tl::after { content: ""; position: absolute; right: 0; top: calc(50% - 5px); border-left: 8px solid var(--orange-press); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.x-tl span { position: absolute; left: 6px; right: 12px; bottom: calc(50% + 5px); text-align: center; font: 600 var(--fs-micro)/1.25 var(--sans); color: var(--ink); }
.x-lane-row > .x-tl:last-child span, .x-topo-chain > .x-tl span { color: var(--orange-deep); }
.x-topo-notes { margin: 14px 0 0; padding-left: 18px; font-size: var(--fs-small); color: var(--charcoal); display: grid; gap: 4px; }
.x-solution .x-illus { font-size: var(--fs-micro); color: var(--slate); margin: 10px 0 0; }
@media (max-width: 1179px) {
  .x-topo { display: block; padding: 18px; }
  .x-topo-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
  .x-lane-row { flex-direction: column; align-items: stretch; }
  .x-lane-row > .x-tn, .x-topo-chain > .x-tn { flex: none; }
  .x-tl { flex: none; min-height: 40px; min-width: 0; }
  .x-tl::before { left: 27px; right: auto; top: 0; bottom: 7px; border-top: 0; border-left: 2px solid var(--orange-press); }
  .x-tl.is-dash::before { border-left-style: dashed; }
  .x-tl::after { left: 23px; right: auto; top: auto; bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--orange-press); border-bottom: 0; }
  .x-tl span { position: static; padding: 8px 0 12px 44px; text-align: left; }
  .x-topo-hub { display: block; max-width: 420px; margin: 0 auto; }
  .x-tn.is-hub { flex-direction: row; text-align: left; justify-content: flex-start; }
  .x-topo-chain { display: flex; flex-direction: column; align-items: stretch; max-width: 420px; margin: 0 auto; }
  .x-topo.no-lanes .x-topo-hub, .x-topo-lanes + .x-topo-hub { margin-top: 0; }
}
/* wide systems on wide screens: lanes, hub, then the chain as one row */
@media (min-width: 1180px) {
  .x-topo.is-tiers { display: block; padding: 24px 28px; }
  .x-topo.is-tiers .x-topo-lanes { display: grid; grid-template-columns: repeat(auto-fill, 300px); justify-content: start; gap: 14px 28px; }
  .x-topo.is-tiers .x-lane-row { flex-direction: column; align-items: stretch; }
  .x-topo.is-tiers .x-lane-row > .x-tn { flex: none; }
  .x-topo.is-tiers .x-topo-hub { display: block; width: min(628px, 100%); margin: 0; }
  .x-topo.is-tiers .x-tn.is-hub { flex-direction: row; text-align: left; justify-content: flex-start; }
  .x-topo.is-tiers .x-topo-chain { flex-wrap: wrap; justify-content: flex-start; align-items: stretch; }
  .x-topo.is-tiers .x-topo-chain > .x-tn { flex: 0 1 200px; }
  .x-topo.is-tiers .x-topo-chain > .x-tl { flex: 0 1 120px; }
  .x-topo.is-tiers .x-lane-row > .x-tl, .x-topo.is-tiers .x-topo-chain > .x-tl:first-child { flex: none; min-height: 44px; min-width: 0; width: 100%; }
  .x-topo.is-tiers .x-lane-row > .x-tl::before, .x-topo.is-tiers .x-topo-chain > .x-tl:first-child::before { left: 50%; right: auto; top: 0; bottom: 7px; border-top: 0; border-left: 2px solid var(--orange-press); }
  .x-topo.is-tiers .x-lane-row > .x-tl.is-dash::before, .x-topo.is-tiers .x-topo-chain > .x-tl.is-dash:first-child::before { border-left-style: dashed; }
  .x-topo.is-tiers .x-lane-row > .x-tl::after, .x-topo.is-tiers .x-topo-chain > .x-tl:first-child::after { left: calc(50% - 4px); right: auto; top: auto; bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--orange-press); border-bottom: 0; }
  .x-topo.is-tiers .x-lane-row > .x-tl span, .x-topo.is-tiers .x-topo-chain > .x-tl:first-child span { position: static; padding: 12px 0 14px calc(50% + 12px); text-align: left; }
  .x-topo.is-tiers .x-topo-chain > .x-tl:first-child::before { left: 100px; }
  .x-topo.is-tiers .x-topo-chain > .x-tl:first-child::after { left: 96px; }
  .x-topo.is-tiers .x-topo-chain > .x-tl:first-child span { padding-left: 112px; }
}
/* figures: art above the caption */
.x-solution .x-figs { gap: 20px; }
.x-solution .x-figs-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-solution .x-figs-one { grid-template-columns: minmax(0, 1fr); }
.x-solution .x-fig { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.x-solution .x-figs-one .x-fig { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 24px; }
.x-solution .x-figs-one .x-fig h3 { font-size: 21px; }
.x-solution .x-figs-one .x-fig p { font-size: var(--fs-body); line-height: 1.6; max-width: 46ch; }
.x-solution .x-fig-art { display: flex; justify-content: center; }
.x-solution .x-fig-art svg { max-height: 480px; width: 100%; max-width: 600px; }
@media (max-width: 900px) { .x-solution .x-figs-two, .x-solution .x-figs-one .x-fig { grid-template-columns: minmax(0, 1fr); } }
/* example set: table, then cards under 600 px */
.x-solution .x-set-table td.x-set-part { font-weight: 600; }
@media (max-width: 600px) {
  .x-set-table-wrap { overflow: visible; border: 0; background: none; }
  .x-set-table { min-width: 0; }
  .x-set-table thead { display: none; }
  .x-set-table, .x-set-table tbody, .x-set-table tfoot { display: block; }
  .x-set-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
  .x-set-table td { display: block; padding: 0; border: 0; }
  .x-set-table td.x-set-part { grid-column: 1 / -1; font: 700 var(--fs-micro)/1.3 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
  .x-set-table td.x-set-model { grid-column: 1 / -1; }
  .x-set-table td.x-set-qty, .x-set-table td.x-set-line { text-align: left; font-size: var(--fs-small); }
  .x-set-table td.x-set-line { text-align: right; font-weight: 700; }
  .x-set-table td.x-set-qty::before, .x-set-table td.x-set-line::before { content: attr(data-label) ": "; font-weight: 400; color: var(--slate); }
  .x-set-table tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
  .x-set-table tfoot th, .x-set-table tfoot td { display: block; padding: 0; border: 0; text-align: left; }
}
/* platforms: as many columns as cards, no orphans */
.x-plats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-plats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .x-plats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .x-plats.x-plats-2, .x-plats.x-plats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .x-plats.x-plats-2, .x-plats.x-plats-4 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 641px) and (max-width: 1000px) { .x-plats.x-plats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .x-plats-3 .x-plat img { height: 96px; } }
/* related page card */
.x-xlink { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--orange-tint); border: 1px solid var(--orange-line); border-radius: var(--radius); padding: 20px 22px; text-decoration: none; color: var(--ink); }
.x-xlink:hover { border-color: var(--orange-press); }
.x-xlink-ic { width: 56px; height: 56px; border-radius: 12px; background: var(--paper); color: var(--orange-press); display: grid; place-items: center; }
.x-xlink-ic .icon { width: 28px; height: 28px; }
.x-xlink .eyebrow { display: block; margin-bottom: 6px; }
.x-xlink b { display: block; font: 800 19px/1.25 var(--display); }
.x-xlink small { display: block; color: var(--charcoal); font-size: var(--fs-small); margin-top: 4px; }
.x-xlink-go { font-weight: 600; color: var(--orange-press); white-space: nowrap; }
@media (max-width: 640px) { .x-xlink { grid-template-columns: 44px minmax(0, 1fr); } .x-xlink-ic { width: 44px; height: 44px; } .x-xlink-go { grid-column: 2; } }
/* components: the sgh-core parts list on solution pages */
.x-parts-wrap > p:first-child { max-width: 75ch; font-size: var(--fs-body); }
.x-parts-wrap .sgh-parts { margin-top: 18px; }
.x-parts-wrap .sgh-parts h3 { font: 800 var(--fs-h3)/1.2 var(--display); margin: 26px 0 12px; }
.x-parts-wrap .sgh-part-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; padding-left: 0; }
.x-parts-wrap .sgh-part-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.x-parts-wrap .sgh-mini-list { max-width: none; padding-left: 0; margin: 0; }
.x-parts-wrap .sgh-mini-list > li { margin: 0; }
.x-parts-wrap .sgh-part-head span { line-height: 1.5; }
.x-parts-wrap .sgh-part-list > li { margin: 0; padding: 14px 16px 12px; }
.x-parts-wrap .sgh-part-head strong::before { content: counter(part, upper-alpha); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 6px; background: var(--ground-2); color: var(--charcoal); font: 800 var(--fs-micro)/1 var(--display); vertical-align: 1px; }
.x-parts-wrap .sgh-mini { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.x-parts-wrap .sgh-mini .p { font-size: var(--fs-small); }
.x-solution .sgh-mini .add { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
.x-solution .sgh-mini .add:hover { border-color: var(--orange-press); color: var(--orange-press); }
.x-parts-wrap .sgh-parts-cta { margin-top: 22px; }
@media (max-width: 1000px) { .x-parts-wrap .sgh-part-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .x-parts-wrap .sgh-mini { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 6px; }
  .x-parts-wrap .sgh-mini .p { grid-column: 2; }
  .x-parts-wrap .sgh-mini .add { grid-column: 3; grid-row: 1 / span 2; }
}
/* accordions: details and questions */
.x-qas { display: grid; gap: 10px; max-width: 920px; }
.x-qa { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.x-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 20px; cursor: pointer; list-style: none; font: 700 var(--fs-body)/1.35 var(--display); color: var(--ink); }
.x-qa summary::-webkit-details-marker { display: none; }
.x-qa summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px; border: solid var(--charcoal); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s ease; }
.x-qa[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.x-qa summary:hover { color: var(--orange-press); }
.x-qa-a { padding: 0 20px 6px; color: var(--charcoal); font-size: var(--fs-body); line-height: 1.65; }
.x-qa-a > *:last-child { margin-bottom: 14px; }
.x-qa-a ul { padding-left: 20px; }
.x-faq-note { max-width: 920px; margin-top: 14px; font-size: var(--fs-body); color: var(--slate); }
/* downloads */
.x-dls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.x-dl { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; text-decoration: none; color: var(--ink); min-height: 64px; }
.x-dl:hover { border-color: var(--line-strong); }
.x-dl:hover b { color: var(--orange-press); }
.x-dl-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--ground); color: var(--charcoal); display: grid; place-items: center; }
.x-dl-t { min-width: 0; }
.x-dl b { display: block; font-size: var(--fs-body); }
.x-dl small { display: block; font-size: var(--fs-micro); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-dl-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.x-chip { display: inline-block; font: 600 var(--fs-micro)/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: var(--ground); color: var(--charcoal); white-space: nowrap; }
.x-chip.is-type { background: var(--orange-tint); color: var(--orange-deep); }
@media (max-width: 760px) { .x-dls { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .x-dl { grid-template-columns: 40px minmax(0, 1fr); } .x-dl-b { grid-column: 2; justify-content: flex-start; } }
/* quotation band: talk to a person */
.x-expert { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--panel-line); color: var(--panel-ink) !important; font-size: var(--fs-body); }
.x-expert .icon { color: var(--orange); margin-top: 2px; }
.x-expert a { color: var(--paper); font-weight: 600; }
@media (max-width: 900px) { .x-solution .x-proj { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; gap: 24px; } }
@media (max-width: 600px) { .x-solution .x-sec { padding-top: 48px; } .x-solution .x-shero .wrap { padding-block: 24px 32px; gap: 28px; } }
.x-parts-wrap .sgh-mini-list.is-collapsed > li:nth-child(n+3) { display: none; }
.x-more-models { display: inline-flex; align-items: center; min-height: 40px; margin: 8px 0 2px; padding: 0 14px; border: 1px dashed var(--line-strong); border-radius: 999px; background: var(--paper); font: 600 var(--fs-small)/1 var(--sans); color: var(--charcoal); cursor: pointer; }

/* ---------- Solutions hub cards (batch 5): mini diagram, eyebrow, one-sentence excerpt, flow, brands, set price; site filter ---------- */
.x-solfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 22px; }
.x-solfilter > span { font-size: var(--fs-small); font-weight: 600; color: var(--slate); margin-right: 4px; }
.x-solfilter button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); font: 600 var(--fs-small)/1 var(--sans); color: var(--ink); cursor: pointer; }
.x-solfilter button:hover { border-color: var(--ink); }
.x-solfilter button[aria-pressed="true"] { background: var(--panel); border-color: var(--panel); color: var(--paper); }
.x-solcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.x-solc[hidden] { display: none; }
.x-solc > a { height: 100%; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); }
.x-solc > a:hover { border-color: var(--line-strong); }
.x-solc > a:hover .x-solc-h { color: var(--orange-press); }
.x-solc-vis { display: block; background: var(--ground); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.x-solc-vis svg { display: block; width: 100%; height: auto; aspect-ratio: 32 / 17; }
.x-solc-vis .x-sol-ic { width: 54px; height: 54px; margin: 30px auto; color: var(--slate); }
.x-solc-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.x-solc-eb { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); }
.x-solc-h { font: 800 var(--fs-h3)/1.2 var(--display); letter-spacing: -0.01em; }
.x-solc-ex { font-size: var(--fs-small); line-height: 1.5; color: var(--charcoal); }
.x-solc-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; font-size: var(--fs-micro); color: var(--charcoal); }
.x-solc-flow span { background: var(--ground); border-radius: 4px; padding: 3px 7px; }
.x-solc-flow i { font-style: normal; color: var(--orange-press); font-weight: 700; }
.x-solc-br { font-size: var(--fs-micro); color: var(--slate); }
.x-solc-foot { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.x-solc-p { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.x-solc-go { font-size: var(--fs-small); font-weight: 600; color: var(--orange-press); }
.x-solfilter-none { color: var(--slate); }
@media (max-width: 1199px) { .x-solcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x-solc > a { flex-direction: row; } .x-solc-vis { flex: 0 0 42%; border-bottom: 0; border-right: 1px solid var(--line); display: flex; align-items: center; } }
@media (max-width: 760px) { .x-solcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .x-solc > a { flex-direction: column; } .x-solc-vis { border-right: 0; border-bottom: 1px solid var(--line); } }
.x-solhub .x-proj .x-expert { margin-top: 18px; }
/* phones: bigger hotspot markers on hero scenes, tighter figure frames */
@media (max-width: 600px) {
  .x-scene .x-hs circle { r: 25px; }
  .x-scene .x-hs text { font-size: 24px; transform: translateY(3px); }
  .x-solution .x-fig { padding: 10px; gap: 12px; }
  .x-solution .x-figs-one .x-fig { padding: 10px 10px 16px; gap: 14px; }
  .x-solution .x-fig figcaption { padding: 0 6px; }
}

/* ---------- batch 6 catcards: listing details ---------- */
/* Screen-reader labels inside the table stay inside its scroll box (they widened the page on phones). */
.sgh-table-wrap { position: relative; }
/* Deeper types under "Shop by type": one quiet line per type, stacked without overlap. */
.sgh-cl-also + .sgh-cl-also { margin-top: -22px; }
.sgh-cl-deep > span { color: var(--ink); font-weight: 600; }
/* Thin ranges: a sourcing note and the neighbouring ranges after the products. */
.sgh-thin { clear: both; margin: 32px 0 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.sgh-thin h2 { margin: 0 0 8px; font: 700 var(--fs-h3)/1.25 var(--display); color: var(--ink); }
.sgh-thin p { max-width: 62ch; margin: 0 0 14px; color: var(--slate); }
.sgh-thin-near { margin-top: 8px; }
/* ============================================================================ * Product page, batch 6 (inc/product-ui.php, pdp2): ex-GST line, buying facts (sold as,
 * plug), module code legend, limitation lists, feature section, phone sticky bar.
 * =================================================================================== */
.sgh-exgst .t { color: var(--slate); }
.sgh-buyfacts { list-style: none; display: grid; gap: 8px; margin: 0 0 18px; padding: 0; max-width: 62ch; }
.sgh-buyfacts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-small); line-height: 1.45; color: var(--charcoal); }
.sgh-buyfacts .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--charcoal); vertical-align: 0; }
.sgh-buyfacts b { font-weight: 600; color: var(--ink); }
.sgh-buyfacts .u { display: block; font-size: var(--fs-small); color: var(--slate); }
.sgh-buyfacts .u .woocommerce-Price-amount { color: var(--charcoal); font-weight: 600; }
.sgh-modcode { margin: 0 0 14px; }
.sgh-modcode > div { grid-template-columns: auto minmax(0, 1fr); }
.sgh-modcode > div dt { padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 4px; align-self: start; }
/* limitation lists: four items, then a toggle */
.sgh-js .sgh-limits.is-clipped:not(.is-open) > li.is-more { display: none; }
.sgh-limits-more { display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 12px; padding: 0; border: 0; background: none; font: 600 var(--fs-small)/1.2 var(--sans); color: var(--orange-press); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sgh-limits-more:hover { color: var(--orange-deep); }
.sgh-limits-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* feature section: alternating rows, a close-up strip, the drawing beside the size rows */
.sgh-features > h2 { margin-bottom: 8px; }
.sgh-feat-row, .sgh-feat-dim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
.sgh-feat-row:first-of-type { border-top: 0; padding-top: 12px; }
.sgh-feat-row.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sgh-feat-row.is-flip .sgh-feat-media { order: 2; }
.sgh-feat-media { margin: 0; }
.sgh-feat-media img { display: block; width: auto; max-width: 100%; height: auto; max-height: 460px; object-fit: contain; border-radius: var(--radius); background: var(--paper); }
.sgh-feat-row.is-flip .sgh-feat-media img { margin-left: auto; }
.sgh-feat-media figcaption { padding: 8px 12px 10px; font-size: var(--fs-micro); color: var(--slate); }
.sgh-feat-text { max-width: 46ch; }
.sgh-feat-text .n { display: block; margin: 0 0 6px; font: 700 var(--fs-small)/1 var(--mono); letter-spacing: .04em; color: var(--orange-press); }
.sgh-feat-text h3 { margin: 0 0 10px; font: 700 22px/1.25 var(--display); color: var(--ink); }
.sgh-feat-text p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--charcoal); }
.sgh-feat-text ul { margin: 0; padding-left: 18px; font-size: var(--fs-body); line-height: 1.55; color: var(--charcoal); }
.sgh-feat-text dl { margin: 0; display: grid; gap: 0; }
.sgh-feat-text dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45; }
.sgh-feat-text dl > div:first-child { border-top: 1px solid var(--line); }
.sgh-feat-text dt { color: var(--slate); }
.sgh-feat-text dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sgh-feat-strip { margin: 0; padding: 28px 0; border-top: 1px solid var(--line); }
.sgh-feat-strip .imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 320px)); gap: 12px; }
.sgh-feat-strip img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; background: var(--paper); border-radius: var(--radius-sm); }
.sgh-feat-strip figcaption { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: var(--fs-small); color: var(--charcoal); }
.sgh-feat-strip figcaption b { font-weight: 600; color: var(--ink); }
.sgh-feat-dim { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
.sgh-feat-dim .sgh-feat-media img { border: 1px solid var(--line); }
/* phone sticky bar: amount plus a short tax note; the button keeps one line */
.sgh-sticky-buy .sgh-sticky-price { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sgh-sticky-buy .sgh-sticky-price .tax { font: 400 var(--fs-micro)/1.2 var(--sans); color: var(--slate); }
@media (max-width: 760px) {
  .sgh-sticky-buy .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 960px) {
  .sgh-feat-row, .sgh-feat-row.is-flip, .sgh-feat-dim { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .sgh-feat-row.is-flip .sgh-feat-media { order: 0; }
  .sgh-feat-text { max-width: none; }
  .sgh-feat-text h3 { font-size: 19px; }
  .sgh-feat-media img { max-height: 400px; margin: 0 auto; }
  .sgh-feat-row.is-flip .sgh-feat-media img { margin: 0 auto; }
}
@media (max-width: 600px) {
  .sgh-feat-strip .imgs, .sgh-feat-strip.is-screens .imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgh-feat-strip .imgs img:nth-child(3) { display: none; }
  .sgh-feat-text dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.sgh-feat-strip.is-screens .imgs { grid-template-columns: repeat(auto-fill, minmax(160px, 240px)); }
.sgh-feat-strip.is-screens img { aspect-ratio: 3 / 4; }
/* stacked gallery (tablet): the main image is capped so the buying column starts within the first screen */
@media (min-width: 601px) and (max-width: 960px) {
  body.single-product div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image img { aspect-ratio: auto; height: min(460px, 56vh); object-fit: contain; }
}
/* At a glance: long values span two tiles and are never clamped */
.sgh-glance dl { grid-auto-flow: row dense; }
.sgh-glance dl > div.is-wide { grid-column: span 2; }
.sgh-glance dl > div.is-wide dd { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* device compatibility rows listed after a flat specification */
.sgh-specs:not(.is-grouped) .sgh-spec-group + .sgh-spec-group { margin-top: 22px; }
/* ==========================================================================
   Brand pages v6 (batch 6, brandsA): official logos, visual heroes (product-led,
   application-led, ecosystem, diagram-led), story sections, family panel.
   Markup: inc/brand-story.php. Config: inc/brands/<slug>.json.
   ========================================================================== */
.x-logo { display: inline-block; vertical-align: middle; max-width: 100%; }
.x-logo-text { font: 800 1em/1 var(--display, var(--sans)); letter-spacing: .02em; color: var(--charcoal); white-space: nowrap; }
.x-logo-text.is-on-dark { color: var(--paper); }
.x-bhero .x-bhero-brand { margin: 0 0 22px; line-height: 0; }
.x-bhero .x-bhero-brand .x-logo-text { line-height: 1; }
/* figures and captions */
.x-bh figure, .x-st figure { margin: 0; }
.x-fig-in { position: relative; }
.x-fig-in img { width: 100%; height: auto; }
.x-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--slate); }
.x-credit { font-size: var(--fs-micro); letter-spacing: .02em; color: var(--slate); opacity: .9; }
.x-bh--dark .x-cap, .x-bh--dark .x-credit, .x-st--dark .x-cap, .x-st--dark .x-credit { color: var(--panel-mute); }

/* hero base */
.x-bh .wrap { display: block; padding-block: 0; }
.x-bh--light { background: var(--ground); color: var(--ink); }
.x-bh--dark { background: var(--panel); color: var(--panel-ink); }
.x-bh .x-bhero-copy h1 { font-size: clamp(30px, 3.5vw, 50px); line-height: 1.05; font-weight: 800; max-width: 20ch; }
.x-bh .x-lead { margin: 18px 0 24px; }
.x-bh--light .x-lead { color: var(--slate); }
.x-bh--light .x-bhero-facts b { color: var(--ink); }
.x-bh--light .x-bhero-facts span { color: var(--slate); }
.x-bh .x-bhero-facts { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.x-bh--dark .x-bhero-facts { border-top-color: var(--panel-line); }

/* product-led */
.x-bh--product-led .x-bh-grid, .x-bh-side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding-block: 44px 36px; }
.x-bh--product-led .x-bh-grid.is-stacked { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.x-bh--product-led .x-bh-grid.is-stacked .x-bhero-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 56px; }
.x-bh--product-led .x-bh-grid.is-stacked .x-bhero-copy > * { grid-column: 2; }
.x-bh--product-led .x-bh-grid.is-stacked .x-bhero-copy > .x-bhero-brand, .x-bh--product-led .x-bh-grid.is-stacked .x-bhero-copy > h1 { grid-column: 1; }
.x-bh--product-led .x-bh-grid.is-stacked .x-bhero-copy > h1 { grid-row: 2 / span 3; align-self: start; }
.x-bh-vis { position: relative; min-width: 0; }
.x-bh-vis .x-bh-main .x-fig-in { width: fit-content; max-width: 100%; margin-inline: auto; }
.x-bh-vis .x-bh-main img { max-height: 540px; width: auto; max-width: 100%; margin-inline: auto; }
.x-bh-vis .x-bh-main.is-portrait img { max-height: 600px; }
.x-bh-vis .x-bh-main.is-wide img { max-height: none; width: 100%; }
.x-bh-vis .x-bh-screen { position: relative; width: 52%; margin: -9% 0 0 auto; z-index: 2; }
.x-bh-screen .x-fig-in { border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--paper); }
.x-bh--dark .x-bh-screen .x-fig-in { border-color: var(--panel-line); background: var(--ink); }
/* supporting strip: close-ups divided by fine rules, never boxed cards */
.x-bh-strip { list-style: none; margin: 0; padding: 18px 0 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 1px solid var(--line-strong); }
.x-bh--dark .x-bh-strip { border-top-color: var(--panel-line); }
.x-bh-strip li { min-width: 0; padding: 4px 18px; border-left: 1px solid var(--line); }
.x-bh--dark .x-bh-strip li { border-left-color: var(--panel-line); }
.x-bh-strip li:first-child { border-left: 0; padding-left: 0; }
.x-bh-strip li > a, .x-bh-strip li > .x-bh-sp { color: inherit; text-decoration: none; }
.x-bh-strip li > a, .x-bh-strip li:not(:has(> a)) { display: flex; align-items: center; gap: 14px; }
.x-bh-strip li > a:hover .x-bh-sc { text-decoration: underline; }
.x-bh-sp { flex: none; width: 76px; height: 76px; display: grid; place-items: center; background: var(--paper); border-radius: 6px; overflow: hidden; }
.x-bh-sp img { width: 100%; height: 100%; object-fit: contain; }
.x-bh-sc { font-size: var(--fs-small); line-height: 1.4; }
.x-bh-sc i { display: block; font: 700 var(--fs-micro)/1 var(--mono); font-style: normal; color: var(--orange-press); margin-bottom: 4px; }
.x-bh--dark .x-bh-sc i { color: var(--orange); }
.x-bh-sc .x-credit { display: block; margin-top: 3px; }

/* application-led: full-width scene, copy on a solid panel over its lower edge */
.x-bh--application-led { padding-bottom: 0; }
.x-bh-scene .x-bh-main .x-cap { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; justify-content: flex-end; }
.x-bh-scene .x-fig-in:not(:has(.x-co)) img { height: clamp(380px, 44vw, 620px); object-fit: cover; }
.x-bh-over { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 32px; align-items: end; margin-top: -150px; padding-bottom: 36px; }
.x-bh-over .x-bhero-copy { background: var(--panel); color: var(--panel-ink); padding: 34px 38px 30px; border-top: 3px solid var(--orange-press); }
.x-bh-over .x-bhero-copy .x-lead { color: var(--panel-mute); }
.x-bh-over .x-bhero-copy .x-bhero-facts b { color: var(--paper); }
.x-bh-over .x-bhero-copy .x-bhero-facts span { color: var(--panel-mute); }
.x-bh-over .x-bhero-copy .x-bhero-facts { border-top-color: var(--panel-line); }
.x-bh-inset { justify-self: end; width: min(100%, 440px); }
.x-bh--application-led.x-bh--light .x-bh-strip { margin-top: 0; }
.x-bh--application-led .x-bh-cap-after { display: none; }

/* ecosystem and diagram-led: copy in two columns over one composition */
.x-bh-top { padding-top: 46px; }
.x-bh-top .x-bhero-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 56px; }
.x-bh-top .x-bhero-copy > * { grid-column: 2; }
.x-bh-top .x-bhero-copy > .x-bhero-brand, .x-bh-top .x-bhero-copy > h1 { grid-column: 1; }
.x-bh-top .x-bhero-copy > h1 { grid-row: 2 / span 3; align-self: start; }
.x-bh-top .x-lead { margin-top: 0; }
.x-bh-eco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; margin: 36px 0 28px; }
.x-bh-eco > figure { grid-column: 1 / -1; grid-row: 1; }
.x-bh-eco.is-pair .x-bh-screen { grid-column: 1 / span 8; align-self: start; }
.x-bh-eco.is-pair .x-bh-main { grid-column: 7 / span 6; z-index: 2; margin-bottom: -8px; }
.x-bh-eco .x-bh-main .x-fig-in { width: fit-content; max-width: 100%; margin-left: auto; }
.x-bh-eco .x-bh-main img { max-height: 460px; width: auto; max-width: 100%; }
.x-bh-eco:not(.is-pair) .x-bh-main .x-fig-in { margin-inline: auto; }
.x-bh-eco:not(.is-pair) .x-bh-main img { max-height: 560px; }
.x-bh-dia { margin: 32px 0 24px; padding: 24px; background: var(--paper); border-top: 1px solid var(--line-strong); }
.x-bh-dia .x-fig-in { width: fit-content; max-width: 100%; margin-inline: auto; }
.x-bh-dia img { max-height: 640px; width: auto; max-width: 100%; }
.x-bh-dia-screen { width: min(100%, 520px); margin: -8px 0 24px auto; }

/* callouts: a dot at x, y with its label above; a numbered list below 768 px */
.x-co { list-style: none; margin: 0; padding: 0; }
.x-co-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange-press); color: var(--paper); font: 700 var(--fs-micro)/1 var(--sans); }
@media (min-width: 768px) {
  .x-fig-in > .x-co { position: absolute; inset: 0; pointer-events: none; }
  .x-co-i { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
  .x-co-dot { position: absolute; left: -11px; top: -11px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
  .x-co-t { position: absolute; left: 0; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: 240px; padding: 6px 9px; border-radius: 4px; background: var(--ink); color: var(--paper); font: 600 var(--fs-micro)/1.3 var(--sans); }
  .x-co-i.is-start .x-co-t { transform: translateX(-12px); }
  .x-co-i.is-end .x-co-t { transform: translateX(calc(-100% + 12px)); }
  .x-co-i.is-below .x-co-t { bottom: auto; top: 18px; }
}
@media (max-width: 767.98px) {
  .x-co { display: grid; gap: 8px; margin: 14px 0 0; }
  .x-co-i { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); line-height: 1.4; }
  .x-co-dot { flex: none; }
  .x-bh-scene .x-co { padding-inline: 20px; }
}

/* range note */
.x-bnote { background: var(--paper); border-bottom: 1px solid var(--line); }
.x-bnote p { margin: 0; padding: 14px 0; max-width: 96ch; font-size: var(--fs-body); line-height: 1.55; color: var(--slate); }
.x-bnote b { color: var(--ink); margin-right: 4px; }

/* story sections */
.x-st { padding-block: 72px; }
.x-st--ground { background: var(--ground); }
.x-st--dark { background: var(--panel); color: var(--panel-ink); }
.x-st--light + .x-st--light { border-top: 1px solid var(--line); }
.x-st h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 800; max-width: 24ch; }
.x-st-text { margin: 14px 0 0; max-width: 62ch; font-size: var(--fs-h3); line-height: 1.6; color: var(--slate); }
.x-st--dark .x-st-text { color: var(--panel-mute); }
.x-st--dark .eyebrow { color: var(--orange); }
.x-st-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 600; color: var(--orange-press); text-decoration: none; }
.x-st--dark .x-st-link { color: var(--orange); }
.x-st-link:hover { text-decoration: underline; }
.x-st-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.x-st-split:not(.is-left) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.x-st-split:not(.is-left) .x-st-fig { order: 2; }
.x-st-split.no-fig { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.x-st-fig .x-fig-in { width: fit-content; max-width: 100%; margin-inline: auto; }
.x-st-fig img { border-radius: 4px; }
.x-st-split .x-st-fig img { max-height: 560px; width: auto; max-width: 100%; }
.x-st-split .x-st-fig.is-landscape img, .x-st-split .x-st-fig.is-wide img { width: 100%; max-height: none; }
/* numbered explanation lists */
.x-st-items { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.x-st--dark .x-st-items { border-top-color: var(--panel-line); }
.x-st-items > li { position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--line); }
.x-st--dark .x-st-items > li { border-bottom-color: var(--panel-line); }
.x-st-items > li:not(:has(.x-st-n)) { padding-left: 0; }
.x-st-items a { display: block; color: inherit; text-decoration: none; }
.x-st-items a:hover b { text-decoration: underline; }
.x-st-n { position: absolute; left: 0; top: 16px; font: 700 var(--fs-small)/1 var(--mono); color: var(--orange-press); }
.x-st--dark .x-st-n { color: var(--orange); }
.x-st-items b { display: block; font: 700 var(--fs-body)/1.3 var(--display); }
.x-st-items b + span { display: block; margin-top: 4px; font-size: var(--fs-body); line-height: 1.5; color: var(--slate); }
.x-st--dark .x-st-items b + span { color: var(--panel-mute); }
/* detail strip */
.x-st-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; }
.x-st-head-row .x-st-link { margin-top: 0; }
.x-st-items.has-img { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 30px; border-top: 0; }
.x-st-items.has-img > li { padding: 0 20px; border-bottom: 0; border-left: 1px solid var(--line); }
.x-st--dark .x-st-items.has-img > li { border-left-color: var(--panel-line); }
.x-st-items.has-img > li:first-child { padding-left: 0; border-left: 0; }
.x-st-items.has-img .x-st-n { position: static; display: inline-block; margin: 0 8px 6px 0; }
.x-st-items.has-img .x-st-n + b { display: inline; }
.x-st-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 14px; background: var(--paper); border-radius: 4px; overflow: hidden; }
.x-st-pic img { width: 100%; height: 100%; object-fit: contain; }
/* full bleed */
.x-st--full-bleed { padding-top: 0; }
.x-st--full-bleed .x-st-fig .x-fig-in { width: auto; }
.x-st--full-bleed .x-st-fig img { width: 100%; height: clamp(300px, 40vw, 580px); object-fit: cover; border-radius: 0; }
.x-st--full-bleed .x-st-fig .x-cap { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; justify-content: flex-end; }
.x-st-bleed-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; padding-top: 36px; }
.x-st-bleed-copy .x-st-items { margin-top: 0; }
.x-st-bleed-copy > .x-st-head:only-child { grid-column: 1 / -1; }
/* ecosystem story: numbered markers on the image, the words in the list */
.x-st-eco { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px 56px; align-items: start; }
.x-st-eco > .x-st-head { grid-column: 1 / -1; }
.x-st-eco > .x-st-items { margin-top: 0; }
.x-st-eco > .x-st-head:last-child { grid-column: 1 / -1; }
.x-st-marks { position: absolute; inset: 0; pointer-events: none; }
.x-st-mark { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange-press); color: var(--paper); font: 700 var(--fs-micro)/1 var(--sans); box-shadow: 0 0 0 3px var(--paper); }

/* brand family panel */
.x-bfamily { padding-block: 56px; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.x-bfamily-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px; align-items: start; }
.x-bfamily h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 800; }
.x-bfamily-copy p:not(.eyebrow) { margin: 14px 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--slate); }
.x-bfamily-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--line-strong); }
.x-bfamily-list > li { border-bottom: 1px solid var(--line); }
.x-bfamily-a { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; color: inherit; text-decoration: none; }
a.x-bfamily-a:hover b { text-decoration: underline; }
.x-bfamily-logo { flex: none; width: 124px; min-height: 40px; display: flex; align-items: center; }
.x-bfamily-t b { display: block; font: 700 var(--fs-body)/1.25 var(--display); }
.x-bfamily-t span { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--slate); }
.x-bfamily-t small { display: block; margin-top: 6px; font-size: var(--fs-micro); color: var(--slate); }
.x-bfamily-list .is-current small { color: var(--orange-press); font-weight: 600; }
.x-bfamily-list .is-related { grid-column: 1 / -1; }
.x-bfamily-list .is-related .x-bfamily-t span::before { content: ""; }

@media (max-width: 1100px) {
  .x-bh--product-led .x-bh-grid, .x-bh-side { gap: 32px; }
  .x-bh-over { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); margin-top: -110px; }
}
@media (max-width: 960px) {
  .x-bh--product-led .x-bh-grid, .x-bh-side { grid-template-columns: minmax(0, 1fr); padding-block: 32px 24px; }
  .x-bh--product-led .x-bh-grid.is-stacked .x-bhero-copy, .x-bh-top .x-bhero-copy { display: block; }
  .x-bh-vis .x-bh-main img { max-height: 420px; }
  .x-bh-over { grid-template-columns: minmax(0, 1fr); margin-top: -80px; }
  .x-bh-inset { justify-self: stretch; width: min(100%, 520px); }
  .x-bh-eco.is-pair .x-bh-screen { grid-column: 1 / span 10; }
  .x-bh-eco.is-pair .x-bh-main { grid-column: 6 / -1; margin-top: 0; }
  .x-st { padding-block: 56px; }
  .x-st-split, .x-st-split:not(.is-left), .x-st-bleed-copy, .x-st-eco, .x-bfamily-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .x-st-split:not(.is-left) .x-st-fig { order: 0; }
}
@media (max-width: 767.98px) {
  .x-bh-eco.is-pair { display: block; }
  .x-bh-eco.is-pair .x-bh-main { margin-top: 16px; }
  .x-bh-eco .x-bh-main .x-fig-in { margin-inline: auto; }
  .x-bh-vis .x-bh-screen { width: 100%; margin: 16px 0 0; }
}
@media (max-width: 640px) {
  .x-bh .x-bhero-copy h1 { font-size: 28px; }
  .x-bh .x-lead { font-size: var(--fs-body); }
  .x-bh-top { padding-top: 28px; }
  .x-bh-scene .x-fig-in:not(:has(.x-co)) img { height: auto; max-height: 520px; }
  .x-bh-over { margin-top: 0; padding-bottom: 20px; }
  .x-bh-over .x-bhero-copy { padding: 26px 20px 22px; margin-inline: -20px; border-top: 0; }
  .x-bh-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding-bottom: 22px; }
  .x-bh-strip li, .x-bh-strip li:first-child { padding: 0; border-left: 0; }
  .x-bh-strip li > a, .x-bh-strip li:not(:has(> a)) { flex-direction: column; align-items: flex-start; gap: 8px; }
  .x-bh-sp { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .x-bh-dia { padding: 12px; margin-inline: -20px; }
  .x-st { padding-block: 44px; }
  .x-st--full-bleed { padding-top: 0; }
  .x-st-items.has-img { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .x-st-items.has-img > li, .x-st-items.has-img > li:first-child { padding: 0; border-left: 0; }
  .x-st--full-bleed .x-st-fig img { height: auto; max-height: 420px; }
  .x-bfamily { padding-block: 40px; }
  .x-bfamily-list { grid-template-columns: minmax(0, 1fr); }
  .x-bfamily-logo { width: 96px; }
}
/* wide product-led main with a screen: side by side, not overlapping */
.x-bh--product-led .x-bh-grid.is-stacked .x-bh-vis:has(.x-bh-screen) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: end; }
.x-bh--product-led .x-bh-grid.is-stacked .x-bh-vis .x-bh-screen { width: 100%; margin: 0; }
@media (max-width: 960px) { .x-bh--product-led .x-bh-grid.is-stacked .x-bh-vis:has(.x-bh-screen) { grid-template-columns: minmax(0, 1fr); } }
/* v6 fixes: SVG figures fill their column (aspect from width/height); ecosystem keeps the main image dominant */
.x-bh .x-fig-in:has(img.is-svg), .x-st .x-fig-in:has(img.is-svg) { width: 100%; }
.x-bh img.is-svg, .x-st img.is-svg { width: 100%; height: auto; max-height: none; }
.x-bh-eco.is-pair .x-bh-main { grid-column: 1 / span 9; grid-row: 1; margin-bottom: 0; z-index: 1; }
.x-bh-eco.is-pair .x-bh-main .x-fig-in { margin-left: 0; margin-right: auto; }
.x-bh-eco.is-pair .x-bh-main img { max-height: 560px; }
.x-bh-eco.is-pair .x-bh-screen { grid-column: 9 / -1; grid-row: 1; align-self: end; justify-self: end; width: clamp(240px, 24vw, 320px); z-index: 2; margin-bottom: 36px; }
.x-bh-eco .x-bh-screen .x-fig-in { padding: 8px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 14px; }
.x-bh--dark .x-bh-eco .x-bh-screen .x-fig-in { background: var(--paper); border-color: var(--paper); }
.x-bh-eco .x-bh-screen img { border-radius: 8px; }
.x-bh-eco .x-bh-screen .x-cap { justify-content: flex-start; }
.x-bh .x-bh-main .x-cap { justify-content: flex-start; }
@media (max-width: 960px) {
  .x-bh-eco.is-pair .x-bh-main { grid-column: 1 / span 10; }
  .x-bh-eco.is-pair .x-bh-screen { grid-column: 8 / -1; width: clamp(200px, 30vw, 280px); }
}
@media (max-width: 767.98px) {
  .x-bh-eco.is-pair .x-bh-screen { width: min(100%, 280px); margin: 16px auto 0; }
}
/* "What <brand> covers": an open, image-led list with fine dividers, one image per family */
.x-fams-v6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--line-strong); }
.x-fams-v6 .x-fam { flex-direction: row; align-items: flex-start; gap: 20px; padding: 20px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: visible; }
.x-fams-v6 .x-fam:hover { box-shadow: none; }
.x-fams-v6 .x-fam-pic { flex: none; display: grid; place-items: center; width: 112px; height: 112px; padding: 6px; aspect-ratio: auto; background: var(--paper); border-radius: 6px; }
.x-fams-v6 .x-fam-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.x-fams-v6 .x-fam-body { padding: 0; gap: 6px; }
.x-fams-v6 .x-fam h3 { font-size: var(--fs-h3); }
.x-fams-v6 .x-fam-links { margin-top: 4px; columns: 2; column-gap: 24px; }
.x-fams-v6 .x-fam-links li { break-inside: avoid; border-top: 0; }
.x-fams-v6 .x-fam-links li a { padding: 4px 0; }
@media (max-width: 960px) { .x-fams-v6 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .x-fams-v6 .x-fam { gap: 14px; padding: 16px 0; }
  .x-fams-v6 .x-fam-pic { width: 76px; height: 76px; }
  .x-fams-v6 .x-fam-links { columns: 1; }
  .x-fams-v6 .x-fam p { font-size: var(--fs-small); }
}
.x-bh-eco.is-pair .x-bh-main .x-cap { max-width: 72%; }
.x-bh-eco.is-pair { align-items: start; }
.x-bh-eco.is-pair .x-bh-main img { max-height: 680px; }
.x-bh-eco.is-pair .x-bh-screen.is-portrait { width: clamp(200px, 18vw, 250px); }
@media (max-width: 767.98px) { .x-bh-eco.is-pair .x-bh-screen.is-portrait { width: min(70%, 220px); } }
/* the hero's own wraps keep their grids (".x-bh .wrap" resets the v5 hero grid) */
.x-bh .wrap.x-bh-over { display: grid; padding-bottom: 36px; }
.x-bh .wrap.x-bh-side { display: grid; padding-block: 44px 36px; }
/* full-width scene: a 2.2:1 band, with or without callouts (callouts are remapped in PHP) */
.x-bh-scene .x-fig-in img, .x-bh-scene .x-fig-in:not(:has(.x-co)) img { width: 100%; height: auto; aspect-ratio: 2.2 / 1; object-fit: cover; max-width: none; }
.x-bh-scene .x-fig-in { overflow: hidden; }
@media (max-width: 960px) { .x-bh .wrap.x-bh-side { padding-block: 32px 24px; } }
@media (max-width: 640px) {
  .x-bh-scene .x-fig-in img, .x-bh-scene .x-fig-in:not(:has(.x-co)) img { aspect-ratio: auto; height: auto; max-height: 560px; }
  .x-bh .wrap.x-bh-over { padding-bottom: 20px; }
}
.x-bh .wrap.x-bh-over { margin-top: -150px; }
.x-bh-side .x-bh-vis .x-bh-screen { width: 36%; margin-top: -18%; }
@media (max-width: 1100px) { .x-bh .wrap.x-bh-over { margin-top: -110px; } }
@media (max-width: 960px) { .x-bh .wrap.x-bh-over { margin-top: -80px; } }
@media (max-width: 640px) { .x-bh .wrap.x-bh-over { margin-top: 0; } .x-bh-side .x-bh-vis .x-bh-screen { width: 60%; margin: 16px auto 0; } }
.x-bh-scene .x-fig-in img, .x-bh-scene .x-fig-in:not(:has(.x-co)) img { aspect-ratio: var(--ar, 2.2); }
.x-bh .wrap.x-bh-over.is-right { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); }
.x-bh .wrap.x-bh-over.is-right > .x-bhero-copy { grid-column: 2; grid-row: 1; }
.x-bh .wrap.x-bh-over.is-right > .x-bh-inset { grid-column: 1; grid-row: 1; justify-self: start; }
@media (max-width: 960px) { .x-bh .wrap.x-bh-over.is-right { grid-template-columns: minmax(0, 1fr); } .x-bh .wrap.x-bh-over.is-right > .x-bhero-copy, .x-bh .wrap.x-bh-over.is-right > .x-bh-inset { grid-column: 1; grid-row: auto; } }
/* landscape software screens sit in the empty upper right of an ecosystem composition */
.x-bh-eco.is-pair .x-bh-screen.is-landscape, .x-bh-eco.is-pair .x-bh-screen.is-wide { grid-column: 8 / -1; align-self: start; justify-self: stretch; width: 100%; margin: 0; }
@media (max-width: 960px) { .x-bh-eco.is-pair .x-bh-screen.is-landscape, .x-bh-eco.is-pair .x-bh-screen.is-wide { grid-column: 6 / -1; } }
@media (max-width: 767.98px) { .x-bh-eco.is-pair .x-bh-screen.is-landscape, .x-bh-eco.is-pair .x-bh-screen.is-wide { width: 100%; margin: 16px 0 0; } }
.x-bh--product-led .x-bh-grid:not(.is-stacked) .x-bh-vis .x-bh-screen { width: 46%; margin-top: -5%; }
/* /brands/ directory v6: official logos at balanced optical sizes, featured ranges weighted by depth, brand families */
.x-bdir-v6 .x-bmark { background: var(--paper); }
.x-bdir-v6 .x-bmark .x-logo { max-width: 92%; }
.x-bdir-v6 .x-bmark .x-logo-text { font-size: 20px; }
.x-bfeat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.x-bfeat-i { grid-column: span 3; display: flex; flex-direction: column; padding: 22px 22px 20px 0; border-bottom: 1px solid var(--line); }
.x-bfeat-i + .x-bfeat-i { padding-left: 22px; border-left: 1px solid var(--line); }
.x-bfeat-i.is-big { grid-column: span 6; padding-block: 28px 24px; }
.x-bfeat-i:nth-child(3) { border-left: 0; padding-left: 0; }
.x-bfeat-main { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.x-bfeat-logo { display: flex; align-items: center; min-height: 64px; margin-bottom: 12px; }
.x-bfeat-i.is-big .x-bfeat-logo { min-height: 84px; }
.x-bfeat-main b { font: 800 19px/1.2 var(--display); }
.x-bfeat-i.is-big .x-bfeat-main b { font-size: 24px; }
.x-bfeat-main .ct { font: 700 var(--fs-small)/1.3 var(--sans); color: var(--orange-press); }
.x-bfeat-main .d { font-size: var(--fs-small); color: var(--slate); }
.x-bfeat-main:hover b { text-decoration: underline; }
.x-bfeat-fams { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; font-size: var(--fs-small); }
.x-bfeat-i.is-big .x-bfeat-fams { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.x-bfeat-fams a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.x-bfeat-fams a:hover { color: var(--orange-press); }
.x-bfeat-fams span { color: var(--slate); font-size: var(--fs-small); }
.x-bdir-fam { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 48px; margin-top: 44px; padding: 32px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.x-bdir-fam h2 { font: 800 var(--fs-h3)/1.2 var(--display); margin: 0; }
.x-bdir-fam-copy p:not(.eyebrow) { margin: 12px 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--slate); }
.x-bdir-fam-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.x-bdir-fam-list a { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.x-bdir-fam-list a:hover b { text-decoration: underline; }
.x-bdir-fam-logo { flex: none; width: 110px; min-height: 34px; display: flex; align-items: center; }
.x-bdir-fam-list b { display: block; font: 700 var(--fs-body)/1.25 var(--display); }
.x-bdir-fam-list span span { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--slate); }
.x-bdir-fam-list small { display: block; margin-top: 4px; font-size: var(--fs-micro); color: var(--slate); }
.x-bdir-fam-list .is-related { grid-column: 1 / -1; }
@media (max-width: 1100px) { .x-bfeat-i { grid-column: span 6; } .x-bfeat-i:nth-child(odd) { border-left: 0; padding-left: 0; } .x-bfeat-i:nth-child(even) { border-left: 1px solid var(--line); padding-left: 22px; } }
@media (max-width: 760px) {
  .x-bfeat-i, .x-bfeat-i.is-big { grid-column: 1 / -1; padding: 18px 0; border-left: 0 !important; padding-left: 0 !important; }
  .x-bfeat-i.is-big .x-bfeat-fams { grid-template-columns: 1fr; }
  .x-bdir-fam { grid-template-columns: minmax(0, 1fr); }
  .x-bdir-fam-list { grid-template-columns: minmax(0, 1fr); }
  .x-bdir-fam-logo { width: 88px; }
}
@media (max-width: 640px) { .x-bhero .x-routes .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; } }
@media (max-width: 640px) { .x-brand .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; max-width: 100%; } }

/* ---------- batch 6 QA fixes ---------- */
.x-sys .x-door-m { display: none; }
@media (max-width: 600px) { .x-sys .x-door-d:has(+ .x-door-m) { display: none; } .x-sys .x-door-m { display: block; } .x-sys .x-door-m svg { width: 100%; height: auto; } }
/* tap targets on phones */
@media (max-width: 760px) {
  .x-util a, .woocommerce-breadcrumb a, .site-footer .legal a, .site-footer a { display: inline-block; min-height: 24px; line-height: 24px; }
  .x-toc > summary, details.x-toc summary { min-height: 32px; display: flex; align-items: center; }
}
.sgh-mrp, .sgh-mrp .off { white-space: nowrap; }
/* Sidebar category list: show in full instead of a scroll box that cut the last item in half */
.sgh-category-picker nav { max-height: none; overflow: visible; }
/* Product description tables (charging times and similar manufacturer figures moved out of the spec list) */
.single-product .sgh-pdp-description table { width: 100%; max-width: 640px; border-collapse: collapse; margin: 8px 0 20px; font-size: var(--fs-body); }
.single-product .sgh-pdp-description th, .single-product .sgh-pdp-description td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.single-product .sgh-pdp-description thead th { font-weight: 600; border-bottom-color: var(--line-strong); }
.single-product .sgh-pdp-description td:last-child { white-space: nowrap; }
@media (max-width: 480px) { .single-product .sgh-pdp-description td:last-child { white-space: normal; } }

/* ---------- Section language (design audit step 6, promoted from the batch 7 templates) ----------
   .sec-block    a section with the page rhythm (--section: 64 px, 40 on phones)
   .sec-head     eyebrow, heading, one sentence and a .sec-more link, on a fine rule
   .facts        one line of short facts split by thin dividers
   .sec-num      mono "01" numbers in orange
   .steps        numbered rows on dividers (.is-row: columns; .is-dark: on a dark band)
   .band-dark    a charcoal band; at most two per page
   Dividers instead of boxes; cards only for things a person selects. The t7 names share these rules. */
.sec-block { padding-top: var(--section); }
.sec-head .eyebrow { margin: 0 0 10px; font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); }
.band-dark .sec-head .eyebrow { color: var(--orange); }
.sec-head h2 { margin: 0; }
.sgh-t7 .t7-head, .sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.sgh-t7 .t7-head h2, .sec-head h2 { font: 800 var(--fs-h2)/1.12 var(--display); letter-spacing: -0.015em; max-width: 28ch; }
.sgh-t7 .t7-head p:not(.eyebrow), .sec-head p:not(.eyebrow) { margin: 8px 0 0; max-width: 64ch; font-size: var(--fs-body); line-height: 1.55; color: var(--slate); }
.sgh-t7 .t7-head .eyebrow, .sec-head .eyebrow { margin-bottom: 10px; }
.sgh-t7 .t7-more, .sec-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: var(--fs-body); color: var(--orange-press); text-decoration: none; white-space: nowrap; }
.sgh-t7 .t7-more .icon, .sec-more .icon { width: 16px; height: 16px; }
.sgh-t7 .t7-more:hover, .sec-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.sgh-t7 .t7-n, .sec-num { font: 700 var(--fs-small)/1 var(--mono); letter-spacing: .02em; color: var(--orange-press); font-variant-numeric: tabular-nums; }
.sgh-t7 .t7-facts, .facts { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 20px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--slate); }
.sgh-t7 .t7-facts li + li::before, .facts li + li::before { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 12px; background: var(--line-strong); vertical-align: -2px; }
.sgh-t7 .t7-facts b, .facts b { font: 700 var(--fs-body)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sgh-t7 .t7-facts a, .facts a { color: var(--orange-press); font-weight: 600; text-underline-offset: 3px; }
.sgh-t7 .t7-dark, .band-dark { margin-top: var(--t7-gap, var(--section)); padding-block: 64px; background: var(--panel); color: var(--panel-ink); }
.sgh-t7 .t7-dark h2, .band-dark h2 { color: var(--paper); }
.sgh-t7 .t7-dark .eyebrow, .sgh-t7 .t7-dark .t7-n, .band-dark .eyebrow, .band-dark .sec-num { color: var(--orange); }
.sgh-t7 .t7-dark p, .sgh-t7 .t7-dark .t7-small, .band-dark p, .band-dark .small { color: var(--panel-mute); }
.sgh-t7 .t7-dark .t7-head, .band-dark .sec-head { border-bottom-color: var(--panel-line); }
.sgh-t7 .t7-dark .t7-head p:not(.eyebrow), .band-dark .sec-head p:not(.eyebrow) { color: var(--panel-mute); }
.sgh-t7 .t7-steps, .steps { list-style: none; margin: 24px 0 0; padding: 0; }
.sgh-t7 .t7-steps > li, .steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.5; color: var(--slate); }
.sgh-t7 .t7-steps > li:last-child, .steps > li:last-child { border-bottom: 1px solid var(--line); }
.sgh-t7 .t7-steps .t7-n, .steps .sec-num { padding-top: 3px; }
.sgh-t7 .t7-steps b, .steps b { display: block; margin-bottom: 2px; font: 700 var(--fs-body)/1.3 var(--display); color: var(--ink); }
.sgh-t7 .t7-dark .t7-steps > li, .sgh-t7 .t7-steps.is-dark > li, .band-dark .steps > li, .steps.is-dark > li { border-color: var(--panel-line); color: var(--panel-mute); }
.sgh-t7 .t7-dark .t7-steps b, .sgh-t7 .t7-steps.is-dark b, .band-dark .steps b, .steps.is-dark b { color: var(--panel-ink); }
.sgh-t7 .t7-steps.is-row, .steps.is-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sgh-t7 .t7-steps.is-row > li, .steps.is-row > li { display: flex; flex-direction: column; gap: 10px; padding: 4px 24px 8px; border: 0; border-left: 1px solid var(--panel-line); }
.sgh-t7 .t7-steps.is-row > li:first-child, .steps.is-row > li:first-child { padding-left: 0; border-left: 0; }
.sgh-t7 .t7-steps.is-row .ic, .steps.is-row .ic { color: var(--orange); }
.sgh-t7 .t7-steps.is-row .ic svg, .steps.is-row .ic svg { width: 32px; height: 32px; }
@media (max-width: 900px) {
  .sgh-t7 .t7-steps.is-row, .steps.is-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .sgh-t7 .t7-steps.is-row > li:nth-child(odd), .steps.is-row > li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .sgh-t7 .t7-steps.is-row, .steps.is-row { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .sgh-t7 .t7-steps.is-row > li, .steps.is-row > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0; border-left: 0; border-top: 1px solid var(--panel-line); }
  .sgh-t7 .t7-steps.is-row .ic, .steps.is-row .ic { display: none; }
}
.band-dark .sec-more { color: var(--orange); }
.band-dark a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* Support landing: one line on how to talk to us, then topics and self-service links on dividers. */
.sgh-sup-sec { margin-top: 40px; }
.sgh-sup-sec .sec-head { margin-bottom: 0; }
.sgh-sup-sec .sec-head h2 { font-size: var(--fs-h2); }
.sgh-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.sgh-topic-grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sgh-topic-grid a strong { font: 700 var(--fs-body)/1.3 var(--display); }
.sgh-topic-grid a span { grid-column: 1; font-size: var(--fs-small); line-height: 1.5; color: var(--slate); }
.sgh-topic-grid a::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 8px; height: 8px; border-top: 1.5px solid var(--slate); border-right: 1.5px solid var(--slate); transform: rotate(45deg); }
.sgh-topic-grid a:hover strong { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sgh-topic-grid a:hover::after { border-color: var(--orange-press); }
.sgh-topic-grid a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sgh-support-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 14px 0 0; }
.sgh-support-links a { color: var(--orange-press); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .sgh-topic-grid { grid-template-columns: minmax(0, 1fr); }
  .sgh-sup-sec { margin-top: 32px; }
  .sgh-support-links ul { display: grid; gap: 0; padding: 0; }
  .sgh-support-links li { border-bottom: 1px solid var(--line); }
  .sgh-support-links a { display: flex; align-items: center; min-height: 44px; }
}

/* At a glance (step 7): label and value rows on dividers; the icon tiles are retired. */
.sgh-glance .sgh-side-h { margin: 0 0 4px; }
.sgh-glance dl, .sgh-glance.is-inline dl { display: block; margin: 0; border-top: 1px solid var(--line-strong); }
.sgh-glance dl > div, .sgh-glance dl > div.is-wide, .sgh-glance.is-inline dl > div { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.sgh-glance .icon { display: none; }
.sgh-glance dt { font-size: var(--fs-small); line-height: 1.4; color: var(--slate); }
.sgh-glance dd, .sgh-glance dl > div.is-wide dd { display: block; margin: 0; font-size: var(--fs-small); line-height: 1.4; font-weight: 600; color: var(--ink); -webkit-line-clamp: unset; overflow: visible; }

/* ---------- Notice (design audit step 7): .notice with --info, --ok, --warn, --error. WooCommerce
   notices and the older .sgh-notice map onto it: compact, one line where it fits, the action at the end. */
.notice, .sgh-notice, .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 16px; padding: 10px 14px; list-style: none;
  border: 1px solid var(--line); border-left: 3px solid var(--charcoal); border-radius: var(--radius-2); background: var(--paper); color: var(--ink);
  font-size: var(--fs-small); line-height: 1.45; outline: none; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; display: none; }
.notice--ok, .sgh-notice.ok, .woocommerce-message, .woocommerce .woocommerce-message { border-color: var(--ok-line); border-left-color: var(--ok); background: var(--ok-bg); }
.notice--warn, .sgh-notice.warn { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-bg); }
.notice--error, .sgh-notice.err, .woocommerce-error, .woocommerce .woocommerce-error { border-color: var(--error-line); border-left-color: var(--error); background: var(--error-bg); }
.notice--info, .sgh-notice.info, .woocommerce-info, .woocommerce .woocommerce-info { border-color: var(--line); border-left-color: var(--charcoal); background: var(--paper); }
.sgh-notice.ok, .sgh-notice.info, .sgh-notice.err { color: var(--ink); }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button, .notice .btn { order: 2; margin-left: auto; min-height: var(--btn-sm); padding: 0 14px; font-size: var(--fs-small); float: none; }
.woocommerce-error li { margin: 0; }
.woocommerce-notices-wrapper:empty { display: none; }
@media (max-width: 760px) {
  .single-product .woocommerce-notices-wrapper .woocommerce-message { margin-bottom: 12px; padding: 8px 12px; }
  .single-product .woocommerce-notices-wrapper .woocommerce-message .button { margin-left: 0; }
}

/* ---------- Type (design audit step 8) ----------
   Scale: --fs-display, --fs-h1 (page titles), --fs-h2 (section heads), --fs-h3, --fs-h4, --fs-body,
   --fs-small, --fs-micro (12 px, the minimum). Weights 400, 600, 700, 800. One uppercase style:
   12 px, 700, .1em tracking (.eyebrow and every label that is set in capitals). */
.eyebrow { margin: 0 0 10px; font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-press); }
.sgh-article h1 { font-family: var(--display); font-weight: 800; line-height: 1.15; }

/* ---------- Compare page on the shared comparison table (design audit step 9) ---------- */
.sgh-compare .x-cmp-wrap { margin: 0 0 12px; }
.sgh-compare .x-cmp { min-width: 640px; }
.sgh-compare .x-cmp thead th { vertical-align: top; min-width: 200px; font: inherit; text-transform: none; letter-spacing: 0; }
.sgh-compare .x-cmp thead th:first-child { min-width: 0; }
.sgh-compare .x-cmp thead th a { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.sgh-compare .x-cmp thead th img { width: 96px; height: 96px; margin: 0; object-fit: contain; mix-blend-mode: multiply; }
.sgh-compare .x-cmp thead th a span { font: 600 var(--fs-small)/1.35 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.sgh-compare .x-cmp thead th a:hover span { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }
.sgh-compare .x-cmp thead small { display: block; margin-top: 4px; font: 600 var(--fs-micro)/1.3 var(--mono); color: var(--slate); }
.sgh-compare .x-cmp thead strong { display: block; margin: 8px 0 10px; font: 700 var(--fs-body)/1.2 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.x-cmp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sgh-compare .x-cmp td .na { color: var(--slate); }
.sgh-compare .x-cmp tr.diff td { background: var(--ground); }
.sgh-compare .x-cmp.diff-only tr.same { display: none; }
.sgh-compare .x-cmp tr.sec th { padding-top: 20px; background: var(--paper); }
.sgh-compare-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }

/* ===== Folded in (design audit step 10): assistant panels (was sgh-b7-ai.css) ===== */
/* SGH Assistant, batch 7 additions (behind the "assistance" flag; loaded only when it is on).
   Base panel styles live in sgh-v2.css (.x-assist*). This file adds: sources, unknowns,
   verification status, document metadata and actions, the "talk to a person" line and the quote
   confirmation step. Tokens come from sgh-tokens.css. */

.x-assist .x-assist-summary { font-weight: 600; }
.x-assist .x-assist-summary_note { font-size: var(--fs-micro); color: var(--slate); }

/* Relationship status: text label, colour is secondary. */

/* Documents: title, type, recorded version and systems, conditions, and one clear action. */
.x-assist-docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: start; }
.x-assist-docs .t { grid-column: 1; font-weight: 600; }
.x-assist-docs .ty, .x-assist-docs .mt, .x-assist-docs .nt { grid-column: 1; font-size: var(--fs-micro); color: var(--slate); }
.x-assist-docs .nt { color: var(--charcoal); }
.x-assist-docs .x-assist-dl { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

/* What the data does not confirm. */
.x-assist-unknown { margin: 12px 0 8px; padding: 10px 12px; border-left: 3px solid var(--warn); background: var(--ground); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.x-assist-unknown h3 { margin: 0 0 4px; }
.x-assist-unknown ul { margin: 0; padding-left: 18px; font-size: var(--fs-small); }
.x-assist-unknown p { margin: 6px 0 0; font-size: var(--fs-small); font-weight: 600; }

/* Sources. */
.x-assist-sources { margin: 10px 0 0; font-size: var(--fs-small); }
.x-assist-sources summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.x-assist-sources summary span { font: 600 var(--fs-micro)/1 var(--mono); color: var(--slate); background: var(--ground); border-radius: 999px; padding: 3px 7px; }
.x-assist-sources ol { margin: 4px 0 0; padding-left: 20px; }
.x-assist-sources li { padding: 3px 0; overflow-wrap: anywhere; }
.x-assist-sources .k { color: var(--slate); font-size: var(--fs-micro); }
.x-assist-sources a { color: var(--orange-press); }

/* Talk to a person. */
.x-assist-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 2px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.x-assist-person .lbl { color: var(--slate); }
.x-assist-person.is-escalated .lbl { color: var(--ink); font-weight: 600; width: 100%; }
.x-assist-person a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ink); font-weight: 600; text-decoration: none; }
.x-assist-person a:hover { text-decoration: underline; }
.x-assist-person .icon { width: 18px; height: 18px; }

/* Actions: the actions row no longer carries its own escalation line (the person line does). */

/* Quote confirmation: the exact lines, then confirm or cancel. */
.x-assist-confirm { margin: 8px 0 4px; padding: 12px 14px; border: 1.5px solid var(--orange-press); border-radius: var(--radius-sm); background: var(--paper); }
.x-assist-confirm:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.x-assist-confirm p { margin: 0 0 6px; font-weight: 600; }
.x-assist-confirm p.ok { color: var(--ok); }
.x-assist-confirm p.err { color: var(--warn); }
.x-assist-confirm ul { margin: 0 0 10px; padding-left: 18px; font-size: var(--fs-small); }
.x-assist-confirm .row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Comparison table scrolls inside its own region, never the page. */
.x-assist-table:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.x-assist .x-assist-opts button:focus-visible, .x-assist-person a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 600px) {
  .x-assist-docs li { grid-template-columns: minmax(0, 1fr); }
  .x-assist-docs .x-assist-dl { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  .x-assist-actions .x-assist-act { flex: 1 1 100%; justify-content: center; }
  .x-assist-ask .row { flex-wrap: wrap; }
  .x-assist-ask .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .x-assist * { transition: none !important; } }

/* ===== Folded in: sign-in and account flows (was sgh-b7-flows.css) ===== */
/* Batch 7 flows: sign-in page and account area. Loaded only with the quote_flows flag on
   (inc/flows.php), on account, quote and Quick Order pages. Scoped under body.sgh-flows7. */

/* ---------- sign-in: the fields in view on a phone ---------- */
.sgh-flows7.woocommerce-account .sgh-article-body > .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
.sgh-flows7 .x-login-form > .eyebrow { display: none; }
/* The page heading says Sign in; the card heading stays for screen readers only. */
.sgh-flows7 .x-login-form > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sgh-flows7 .x-login-reason { margin: 0 0 16px; padding: 10px 12px; border-left: 3px solid var(--orange-press, var(--orange-press)); background: var(--orange-tint, var(--orange-tint)); color: var(--ink, var(--ink)); font-size: var(--fs-small); line-height: 1.45; border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0; }
@media (max-width: 600px) {
	.sgh-flows7.woocommerce-account:not(.logged-in) .sgh-article h1 { font-size: var(--fs-h1); margin: 4px 0 12px; }
	.sgh-flows7 .x-login { margin-top: 0; gap: 20px; }
	.sgh-flows7 .x-login-form { padding: 18px 16px; }
	.sgh-flows7 .x-login-form form.login .form-row { margin-bottom: 12px; }
	.sgh-flows7 .x-login-biz { padding: 20px 16px; }
}

/* ---------- account: installations slot and order documents ---------- */
.sgh-flows7 .sgh-acc-install:empty { display: none; }
.sgh-flows7 .sgh-acc-install { margin: 24px 0 0; }
.sgh-flows7 .woocommerce-orders-table__cell-sgh-docs ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); line-height: 1.5; }
.sgh-flows7 .woocommerce-orders-table__cell-sgh-docs li { margin: 0; }
.sgh-flows7 .woocommerce-orders-table__cell-sgh-docs .none { color: var(--slate, var(--slate)); }
.sgh-flows7 .sgh-acc-note { font-size: var(--fs-small); color: var(--slate, var(--slate)); margin: 0 0 14px; }

/* Orders table: the article rule makes tables display:block, so on narrow screens WooCommerce's
   stacked rows shrank to their content (275 px of 713 at 768). Rows fill the width again. */
@media (max-width: 768px) {
	.sgh-flows7 .woocommerce-orders-table tbody, .sgh-flows7 .woocommerce-orders-table tbody tr { display: block; width: 100%; }
}
@media (min-width: 769px) {
	.sgh-flows7 .sgh-article-body table.woocommerce-orders-table { display: table; }
}

@media (prefers-reduced-motion: reduce) {
	.sgh-flows7 .x-login-reason { transition: none; }
}

/* ===== Folded in: discovery, search and cards (was sgh-b7-discovery.css) ===== */
/* =====================================================================================
 * Discovery, batch 7 (inc/discovery.php). Loads after sgh-v2.css.
 * Part 1 applies to everyone (defect fixes: phone header, compare tray, category order).
 * Part 2 is scoped to body.sgh-d7, the flag `discovery_b7` (default off).
 * ===================================================================================== */

/* ---------- 1a. Phone header: the utility bar folds into the masthead ---------- */
.head-links .hl-call { display: none; }
@media (max-width: 760px) {
  .x-util { display: none; }
  .head-links .hl-call { display: flex; }
  .masthead { gap: 8px 10px; padding-block: 6px 10px; }
  .masthead .search input { padding-block: 8px; min-height: 40px; font-size: 15px; }
  .masthead .search button { min-height: 40px; }
  .head-links { gap: 0; }
  .head-links a { min-width: 40px; min-height: 44px; }
}
@media (max-width: 400px) {
  .masthead .logo img { height: 30px; }
  .head-links .icon { width: 21px; height: 21px; }
}
@media (max-width: 340px) {
  .head-links a { min-width: 36px; }
}

/* ---------- 1b. Compare tray: thumbnails and real names ---------- */
.sgh-compare-tray .it { display: inline-flex; align-items: center; gap: 8px; max-width: 300px; padding: 4px 2px 4px 4px; }
.sgh-compare-tray .it img { flex: none; width: 32px; height: 32px; object-fit: contain; background: var(--paper); border-radius: 4px; }
.sgh-compare-tray .it .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgh-compare-tray .it small { color: var(--slate); font-size: var(--fs-micro); }
.sgh-compare-tray .it .md { display: none; font-weight: 700; }
.sgh-compare-tray .it button { flex: none; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; }
.sgh-compare-tray .it button:hover, .sgh-compare-tray .it button:focus-visible { background: var(--line); color: var(--ink); }
@media (max-width: 760px) {
  .sgh-compare-tray .wrap { flex-wrap: nowrap; gap: 8px; padding-block: 8px; }
  .sgh-compare-tray .items { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sgh-compare-tray .it { max-width: 170px; flex: none; }
  .sgh-compare-tray .it.has-md .nm > .full, .sgh-compare-tray .it.has-md .nm > small { display: none; }
  .sgh-compare-tray .it.has-md .md { display: inline; }
  .sgh-compare-tray .clear { flex: none; }
}

/* ---------- 1c. Category pages: products earlier on phones ---------- */
@media (max-width: 760px) {
  .sgh-cl-hero .sgh-cl-media, .sgh-cl-brands, .sgh-cl-rec { display: none; }
  .sgh-cl-hero { margin-bottom: 16px; }
  .sgh-cl-hero .lead { margin-bottom: 8px; }
  .sgh-cl-hero .lead.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sgh-lead-more { display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 8px; padding: 0; border: 0; background: none; font: 600 var(--fs-small)/1.2 var(--sans); color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .sgh-cl-stats { margin-top: 4px; }
  .sgh-cl-types { margin-bottom: 16px; }
}
@media (min-width: 761px) { .sgh-lead-more { display: none; } }
@media (max-width: 1023px) { .sgh-cl-hero .sgh-cl-media, .sgh-cl-rec { display: none; } .sgh-cl-hero { grid-template-columns: minmax(0, 1fr); } }
.sgh-lead-more:focus-visible { outline: 2px solid var(--orange-press); outline-offset: 2px; }
/* "How to choose" now follows the products. */
.listing-main .sgh-choose { margin-top: 32px; }

/* ---------- 2. Flag discovery_b7 ---------- */

/* Search: corrected query note, products first. */
.sgh-d7 .d7-corrected { margin: 0 0 12px; font-size: var(--fs-body); color: var(--charcoal); }
.sgh-d7 .d7-corrected a { color: var(--orange-press); font-weight: 600; text-underline-offset: 3px; }
.sgh-d7 .d7-guides-after { margin-top: 32px; }

/* Empty search: a main column of suggestions and a help column, no boxes around everything. */
.sgh-d7 .d7-zero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px 48px; margin: 8px 0 40px; padding: 0 0 32px; border-bottom: 1px solid var(--line); }
.sgh-d7 .d7-zero h2 { margin: 2px 0 20px; font: 700 var(--fs-h2)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.sgh-d7 .d7-zero h2 span { color: var(--orange-press); }
.sgh-d7 .d7-zero h3 { margin: 0 0 10px; font: 700 var(--fs-micro)/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.sgh-d7 .d7-zero .sgh-search-summary { margin: 0; font-size: var(--fs-small); color: var(--slate); }
.sgh-d7 .d7-zero-block { margin: 0 0 24px; }
.sgh-d7 .d7-zero-models, .sgh-d7 .d7-zero-cats, .sgh-d7 .d7-zero-tips, .sgh-d7 .d7-zero-help ul { list-style: none; margin: 0; padding: 0; }
.sgh-d7 .d7-zero-models li + li { border-top: 1px solid var(--line); }
.sgh-d7 .d7-zero-models a { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--ink); text-decoration: none; }
.sgh-d7 .d7-zero-models img { flex: none; width: 48px; height: 48px; object-fit: contain; background: var(--paper); }
.sgh-d7 .d7-zero-models b { display: block; font: 700 var(--fs-small)/1.3 var(--display); }
.sgh-d7 .d7-zero-models a:hover b, .sgh-d7 .d7-zero-models a:focus-visible b { color: var(--orange-press); text-decoration: underline; }
.sgh-d7 .d7-zero-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.sgh-d7 .d7-zero-cats a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: var(--fs-small); text-decoration: none; background: var(--paper); }
.sgh-d7 .d7-zero-cats a span { color: var(--slate); font-weight: 400; font-variant-numeric: tabular-nums; }
.sgh-d7 .d7-zero-cats a:hover, .sgh-d7 .d7-zero-cats a:focus-visible { border-color: var(--ink); }
.sgh-d7 .d7-zero-tips li { position: relative; padding: 0 0 6px 16px; font-size: var(--fs-body); line-height: 1.5; color: var(--charcoal); }
.sgh-d7 .d7-zero-tips li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 2px; background: var(--orange-press); }
.sgh-d7 .d7-zero-help { align-self: start; padding: 20px 22px; background: var(--panel, var(--panel)); color: var(--panel-ink, var(--paper)); border-radius: 10px; }
.sgh-d7 .d7-zero-help h3 { color: var(--panel-mute, var(--line-strong)); }
.sgh-d7 .d7-zero-help li + li { border-top: 1px solid rgba(255,255,255,.14); }
.sgh-d7 .d7-zero-help li a { display: block; padding: 12px 0; color: inherit; text-decoration: none; }
.sgh-d7 .d7-zero-help b { display: flex; align-items: center; gap: 6px; font: 700 var(--fs-body)/1.3 var(--display); }
.sgh-d7 .d7-zero-help b .icon { width: 16px; height: 16px; color: var(--orange, var(--orange)); }
.sgh-d7 .d7-zero-help span { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.45; color: var(--panel-mute, var(--line-strong)); }
.sgh-d7 .d7-zero-help li a:hover b, .sgh-d7 .d7-zero-help li a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.sgh-d7 .d7-zero-help a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.sgh-d7 .d7-zero-call { margin: 10px 0 0; font-size: var(--fs-small); color: var(--panel-mute, var(--line-strong)); }
.sgh-d7 .d7-zero-call a { color: var(--paper); font-weight: 600; }
@media (max-width: 900px) {
  .sgh-d7 .d7-zero { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sgh-d7 .d7-zero h2 { font-size: var(--fs-h2); }
}

/* Cards: a quiet help link under the action row for items without an online price. */

/* Homepage on phones: one search (the header's), routes and departments sooner. */
@media (max-width: 760px) {
  .sgh-d7 .h6-hero .h6-search, .sgh-d7 .h6-hero .h6-try, .sgh-d7 .h6-hero .h6-how { display: none; }
  .sgh-d7 .h6-hero .h6-acts { margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .sgh-compare-tray .items { scroll-behavior: auto; }
}

/* ===== Folded in: pre-launch notice bar (was inline in inc/launch-notice.php) ===== */
.sgh-sitenote { background: var(--ground); border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--fs-small); line-height: 1.4; }
.sgh-sitenote-in { max-width: var(--maxw); margin: 0 auto; padding: 4px max(20px, env(safe-area-inset-right, 0px)) 4px max(20px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 10px; min-height: 36px; }
.sgh-sitenote p { margin: 0; flex: 1; min-width: 0; border-left: 3px solid var(--orange-press); padding-left: 10px; }
.sgh-sitenote a { color: var(--orange-deep); font-weight: 600; text-underline-offset: 2px; }
.sgh-sitenote a:focus-visible { outline: 2px solid var(--orange-press); outline-offset: 2px; border-radius: 2px; }
.sgh-sitenote-short { display: none; }
@media (max-width: 760px) {
  .sgh-sitenote-in { padding: 1px 12px 1px 16px; min-height: 34px; }
  .sgh-sitenote p { padding-left: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sgh-sitenote-long { display: none; }
  .sgh-sitenote-short { display: inline; }
}

/* ===== Folded in: closed cart in pre-launch (was inline in inc/store-mode.php) ===== */
.sgh-closed { border: 1px solid var(--line); border-left: 3px solid var(--orange-press); background: var(--paper); border-radius: var(--radius-2); padding: 16px 20px; margin: 0 0 24px; }
.sgh-closed p { margin: 0 0 8px; max-width: 70ch; }
.sgh-closed .t { font-weight: 700; font-size: var(--fs-h3); }
.sgh-closed p.a { max-width: none; }
.sgh-closed .a { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; max-width: none; }
/* Pre-launch only: the cart keeps no checkout or express payment controls (store-mode.php adds body.sgh-prelaunch). */
body.sgh-prelaunch .wc-block-cart__submit, body.sgh-prelaunch .wc-block-cart__submit-container, body.sgh-prelaunch .wc-block-cart__payment-options, body.sgh-prelaunch .wc-block-components-express-payment { display: none !important; }

/* ===== Folded in: header, mega menu, drawer and page parts that lived in sgh-front.css ===== */
/* SGH front (batch 6, 2026-11-10): homepage, navigation panes and drawer, guide thumbnails,
   About line-up and Contact layout. Loaded after sgh-v2.css on every page (inc/home.php).
   Palette and type from the v2 tokens; no gradients, no shadows beyond the existing menu panel,
   fine dividers instead of boxes where a box is not doing a job. */

/* ---------- navigation: lazy panes, drawer ---------- */
.mega-subs > li.is-x { display: none; }
.mega-wait { margin: 6px 0 0; font-size: var(--fs-small); color: var(--slate); }
.mega-panel.is-failed .mega-wait { color: var(--ink); }
.dr-quick { list-style: none; margin: 10px 16px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dr-quick li + li { border-left: 1px solid var(--line); }
.dr-quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px; padding: 8px 4px; font: 600 var(--fs-small)/1.2 var(--sans); color: var(--ink); text-decoration: none; text-align: center; }
.dr-quick a:hover { background: var(--ground); }
.dr-quick .icon { width: 22px; height: 22px; color: var(--charcoal); }
.sgh-drawer .dr-acts { grid-template-columns: minmax(0, 1fr); border-top: 0; margin-top: 0; padding: 12px 16px 4px; }
.dr-nav .dr-h + .dr-links { margin-top: 0; padding-top: 0; }
.dr-contact-more { display: inline-block; margin-top: 10px; font-weight: 600; font-size: var(--fs-small); color: var(--orange-press); }
#h6-dep-access .a1 { height: 84px; max-width: 58%; }
#h6-dep-locks .a0 { height: 96px; }
#h6-dep-locks .a1 { height: 104px; right: 10%; }
#h6-dep-power .a1 { height: 72px; }
#h6-dep-network .a0 { height: 92px; left: 0; }
#h6-dep-network .a1 { height: 34px; bottom: 98px; right: 0; max-width: 72%; }

/* ---------- guide thumbnails (Resources hub, homepage) ---------- */
.x-gthumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.x-gthumb.is-crop svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.x-gthumb.is-art { display: flex; align-items: stretch; justify-content: center; gap: 10%; padding: 7% 8% 5%; background: var(--ground); box-sizing: border-box; }
.x-gthumb-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; }
.x-gthumb.is-art.n-3 { gap: 4%; padding-inline: 5%; }
.x-gthumb-item img { width: auto; height: auto; max-width: 100%; max-height: 74%; object-fit: contain; }
.x-gthumb-item small { font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.x-gcard.has-thumb { grid-template-columns: 184px minmax(0, 1fr) auto; }
.x-gcard.has-thumb .x-gcard-vis { display: flex; flex-direction: column; gap: 0; height: auto; padding: 0; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.x-gcard.has-thumb .x-gcard-vis small { display: block; padding: 5px 8px 6px; border-top: 1px solid var(--line); text-align: left; font-size: var(--fs-micro); }

/* ---------- About: equipment line-up ---------- */
.x-lineup { margin: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.x-lineup .wrap { padding-top: 26px; padding-bottom: 16px; }
.x-lineup-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(7, minmax(0, 1fr)); }
.x-lineup-row li { display: flex; flex-direction: column; min-width: 0; }
.x-lineup-pic { display: flex; align-items: flex-end; justify-content: center; height: 190px; padding: 0 8px 8px; border-bottom: 1px solid var(--line-strong); }
.x-lineup-pic img { width: auto; max-width: 100%; height: auto; object-fit: contain; }
.x-lineup .h-xl img { max-height: 176px; }
.x-lineup .h-l img { max-height: 150px; }
.x-lineup .h-m img { max-height: 112px; }
.x-lineup .h-s img { max-height: 74px; }
.x-lineup-cap { padding: 9px 6px 0; text-align: center; font-size: var(--fs-micro); line-height: 1.35; color: var(--slate); }
.x-lineup-cap b { display: block; font: 700 var(--fs-small)/1.3 var(--display); color: var(--ink); }
.x-lineup figcaption { margin-top: 12px; font-size: var(--fs-micro); color: var(--slate); }

/* ---------- Contact: direct, service paths, company ---------- */
.x-info-contact .x-cx-direct, .x-info-contact .x-cx-paths { margin-bottom: 34px; }
.x-info-contact .x-cx-direct .x-channels { margin-bottom: 0; }
.x-prose .x-cx-list { list-style: none; max-width: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.x-prose .x-cx-list li { margin: 0; }
.x-prose .x-cx-list a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 52px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.x-cx-list a > .icon { color: var(--orange-press); }
.x-cx-t { font: 700 var(--fs-body)/1.3 var(--display); }
.x-cx-go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); font-weight: 600; color: var(--orange-press); white-space: nowrap; }
.x-cx-go .icon { width: 16px; height: 16px; }
.x-prose .x-cx-list a:hover .x-cx-t { color: var(--orange-press); }
.x-cx-co dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; max-width: 72ch; margin: 12px 0 0; }
.x-cx-co dl div { padding: 10px 0; border-top: 1px solid var(--line); }
.x-cx-co dt { font-size: var(--fs-micro); color: var(--slate); }
.x-cx-co dd { margin: 2px 0 0; font-weight: 600; }@media (max-width: 980px) {
	.x-lineup-row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }
	.x-lineup-row li:first-child { grid-column: span 2; }
	.x-lineup-pic { height: 150px; }
	.x-lineup .h-xl img { max-height: 140px; } .x-lineup .h-l img { max-height: 124px; }
}@media (max-width: 720px) {
	.x-gcard.has-thumb { grid-template-columns: 112px minmax(0, 1fr); }
	.x-gcard.has-thumb .x-gcard-vis small { display: none; }
	.x-lineup-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.x-lineup-pic { height: 118px; padding-inline: 4px; }
	.x-lineup .h-xl img { max-height: 108px; } .x-lineup .h-l img { max-height: 100px; } .x-lineup .h-m img { max-height: 76px; } .x-lineup .h-s img { max-height: 54px; }
	.x-lineup-cap { font-size: var(--fs-micro); } .x-lineup-cap b { font-size: var(--fs-micro); }
	.x-prose .x-cx-list a { grid-template-columns: 22px minmax(0, 1fr); }
	.x-cx-go { grid-column: 2; font-size: var(--fs-small); }
	.x-cx-co dl { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- footer on phones: each group full width, links wrapped in lines (same links, shorter) ---------- */
@media (max-width: 600px) {
	.foot-cols.foot-cols-5 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.foot-cols.foot-cols-5 > div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
	.foot-cols.foot-cols-5 h3 { margin-bottom: 4px; }
	.foot-cols.foot-cols-5 ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
	.foot-cols.foot-cols-5 li { margin: 0; }
	.foot-cols.foot-cols-5 a { display: inline-block; min-height: 32px; padding: 6px 0; }
}

/* =====================================================================================
 * Design system coverage (b12-polish, 2026-11-10): forms, tables, status badges, overlays,
 * tabs, empty and error states, cart and checkout, account. Tokens only. Base rules use
 * :where() (zero specificity) so a component's own rule always wins over them.
 * ===================================================================================== */

/* ---------- Forms: field, select, textarea, checkbox and radio, validation, quantity, file ----------
   One field everywhere in the page body: 44 px, 1.5 px line-strong border, radius 8, blue focus ring.
   Search inputs and search forms are excluded (owned by the search component). */
:where(.sgh-main) :where(input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="number"], [type="url"], [type="date"], [type="datetime-local"], [type="month"], :not([type])), select, textarea):where(:not(form[role="search"] *)) {
  box-sizing: border-box; min-width: 0; max-width: 100%; min-height: var(--field-h); margin: 0; padding: 9px 12px;
  border: var(--field-border) solid var(--line-strong); border-radius: var(--radius-2); background-color: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.4 var(--sans); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
:where(.sgh-main) :where(textarea) { min-height: 96px; line-height: 1.5; resize: vertical; }
:where(.sgh-main) :where(select):where(:not([multiple]):not([size])) {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
:where(.sgh-main) :where(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="search"])):hover { border-color: var(--charcoal); }
:where(.sgh-main) :where(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="search"])):focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
:where(.sgh-main) :where(input, textarea)::placeholder { color: var(--slate); opacity: 1; }
:where(.sgh-main) :where(input, select, textarea):where(:disabled, [readonly]) { background-color: var(--ground); color: var(--slate); cursor: not-allowed; }
:where(.sgh-main) :where(input[readonly]) { cursor: text; }
:where(.sgh-main) :where(input[type="checkbox"], input[type="radio"]) { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--orange-press); cursor: pointer; }
:where(.sgh-main) :where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* validation: the field turns red and the message under it says what to change */
:where(.sgh-main) :where([aria-invalid="true"], .is-invalid, .woocommerce-invalid input, .woocommerce-invalid select, .woocommerce-invalid textarea, input:user-invalid, select:user-invalid, textarea:user-invalid) { border-color: var(--error); }
.field-error, .sgh-field-error { display: block; margin: 6px 0 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--error); }
.field-help, .sgh-field-help, .woocommerce form .form-row .description, .woocommerce form .form-row span em { display: block; margin: 6px 0 0; font-size: var(--fs-small); font-style: normal; line-height: 1.45; color: var(--slate); }
/* file upload: the button reads as a small secondary button */
:where(.sgh-main) :where(input[type="file"]) { max-width: 100%; font: 400 var(--fs-small)/1.4 var(--sans); color: var(--slate); }
:where(.sgh-main) :where(input[type="file"])::file-selector-button {
  min-height: var(--btn-sm); margin: 0 12px 0 0; padding: 0 14px; border: 1.5px solid var(--charcoal); border-radius: var(--radius-2);
  background: var(--paper); color: var(--ink); font: 600 var(--fs-small)/1 var(--sans); cursor: pointer; }
:where(.sgh-main) :where(input[type="file"])::file-selector-button:hover { background: var(--ground); border-color: var(--ink); }
:where(.sgh-main) :where(input[type="file"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* fieldsets: a rule and a heading, never the browser's box */
:where(.sgh-main) :where(fieldset) { min-width: 0; margin: 24px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line-strong); }
:where(.sgh-main) :where(legend) { padding: 0 0 8px; font: 700 var(--fs-h4)/1.3 var(--display); color: var(--ink); }

/* WooCommerce forms (sign-in, account details, addresses, lost password): same label, field and required marker */
.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label, .woocommerce-form-login label, .woocommerce-EditAccountForm label { display: block; margin: 0 0 6px; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--ink); }
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox, .woocommerce form label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; font-weight: 400; font-size: var(--fs-body); }
.woocommerce form .form-row .required { color: var(--error); text-decoration: none; border: 0; }
.woocommerce form .form-row :is(.input-text, select), .woocommerce form .form-row textarea { min-height: var(--field-h); padding: 9px 12px; font-size: var(--fs-body); line-height: 1.4; }
.woocommerce form .form-row textarea { min-height: 96px; }
.woocommerce form .form-row.woocommerce-invalid :is(.input-text, select) { border-color: var(--error); }
.woocommerce form .form-row.woocommerce-validated :is(.input-text, select) { border-color: var(--line-strong); }
.woocommerce form .form-row :is(.input-text, select):focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.woocommerce form .show-password-input { top: 50%; transform: translateY(-50%); right: 10px; }
.woocommerce-EditAccountForm, .woocommerce-address-fields, .woocommerce-ResetPassword { max-width: 760px; }
/* the one submit of a WooCommerce account or sign-in form is the primary action */
.woocommerce form .woocommerce-Button.button:not(.alt), .woocommerce form .woocommerce-form-login__submit.button:not(.alt) { background: var(--orange-press); border-color: var(--orange-press); color: var(--paper); }
.woocommerce form .woocommerce-Button.button:not(.alt):hover, .woocommerce form .woocommerce-form-login__submit.button:not(.alt):hover { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--paper); }

/* quantity: a field with steppers (classic) and the WooCommerce Blocks selector */
.quantity .qty, .sgh-qty input { min-height: var(--field-h); width: 76px; padding: 0 6px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.wc-block-components-quantity-selector { display: inline-flex; width: auto; min-width: 116px; height: var(--btn-sm); border: var(--field-border) solid var(--line-strong); border-radius: var(--radius-2); background: var(--paper); }
.wc-block-components-quantity-selector::after { display: none; }
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { min-width: 36px; height: auto; border: 0; font: 600 var(--fs-small)/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { min-width: 36px; color: var(--ink); opacity: 1; font-size: var(--fs-body); }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { color: var(--line-strong); }
.wc-block-components-quantity-selector:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.wc-block-components-quantity-selector input:focus, .wc-block-components-quantity-selector button:focus { outline: none; box-shadow: none; }

/* WooCommerce Blocks fields (checkout and cart): same border, radius and focus as every other field */
.wc-block-components-text-input input[type], .wc-block-components-textarea, .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input, .wc-blocks-components-select .wc-blocks-components-select__select {
  border: var(--field-border) solid var(--line-strong) !important; border-radius: var(--radius-2) !important; background-color: var(--paper) !important; color: var(--ink) !important; font-family: var(--sans) !important; }
.wc-block-components-text-input input[type]:focus, .wc-block-components-textarea:focus, .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus, .wc-blocks-components-select .wc-blocks-components-select__select:focus {
  border-color: var(--focus) !important; box-shadow: 0 0 0 1px var(--focus) !important; outline: none; }
.wc-block-components-text-input label, .wc-blocks-components-select .wc-blocks-components-select__label { color: var(--slate); }
.wc-block-components-text-input.has-error input[type], .wc-block-components-combobox.has-error input { border-color: var(--error) !important; }
.wc-block-components-validation-error { color: var(--error); font-size: var(--fs-small); font-weight: 600; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border: var(--field-border) solid var(--line-strong); border-radius: var(--radius-1); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--orange-press); border-color: var(--orange-press); }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--paper); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* older form wrappers: the shared field rules replace their own; the form is no longer a boxed card */
.sgh-quote-form { padding: 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: none; padding-top: 20px; }
.sgh-quote-form input:is([type="checkbox"], [type="radio"]) { width: 18px; }

/* ---------- Tables: specifications, compare, orders, quotes, licences, support and partner data ----------
   Header in the one uppercase style on a strong rule, rows on fine dividers, no outer box, no fills.
   Wide tables scroll inside their own region (.sgh-table-wrap and the older wraps); the page never widens. */
:where(.sgh-main) :is(.sgh-table, .sgh-quote-table, .x-q-table, .sgh-tech-table, .sgh-qb-t, .sgh-acc-table) { width: 100%; margin: 0 0 16px; border: 0; border-radius: 0; border-collapse: collapse; background: transparent; font-size: var(--fs-small); font-variant-numeric: tabular-nums; overflow: visible; }
:where(.sgh-main) :is(.sgh-table, .sgh-quote-table, .x-q-table, .sgh-tech-table, .sgh-qb-t, .sgh-acc-table) thead th { padding: 10px 12px; border-bottom: 1.5px solid var(--line-strong); background: none; color: var(--slate); font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-align: left; white-space: nowrap; vertical-align: bottom; }
:where(.sgh-main) :is(.sgh-table, .sgh-quote-table, .x-q-table, .sgh-tech-table, .sgh-qb-t, .sgh-acc-table) :is(tbody, tfoot) :is(td, th) { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
:where(.sgh-main) :is(.sgh-table, .sgh-quote-table, .x-q-table, .sgh-tech-table, .sgh-qb-t, .sgh-acc-table) tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
:where(.sgh-main) :is(.sgh-table, .sgh-quote-table, .x-q-table, .sgh-acc-table) :is(th, td):is(.num, .is-num) { text-align: right; white-space: nowrap; }
:where(.sgh-main) .sgh-table :is(td, th) a:not(.btn) { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
:where(.sgh-main) .sgh-table :is(td, th) a:not(.btn):hover { color: var(--orange-press); }
:where(.sgh-main) .sgh-table .mono { font: 600 var(--fs-small)/1.4 var(--mono); }
.sgh-table-wrap, .x-q-table-wrap, .x-cmp-wrap, .x-scmp-wrap, .sgh-matrix-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.x-q-table-wrap, .x-scmp-wrap { border: 0; border-radius: 0; background: none; }
.sgh-table-wrap > table { margin-bottom: 0; }
.sgh-table-wrap:focus-visible, .x-cmp-wrap:focus-visible, .sgh-matrix-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sgh-table-wrap .sgh-table.is-wide { min-width: 680px; }
/* WooCommerce account tables: orders, order details, downloads */
.woocommerce table.shop_table { margin: 0 0 24px; border: 0; border-radius: 0; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.woocommerce table.shop_table thead th { padding: 10px 12px; border-bottom: 1.5px solid var(--line-strong); color: var(--slate); font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.woocommerce table.shop_table :is(tbody, tfoot) :is(td, th) { padding: 12px; border-top: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.woocommerce table.shop_table tfoot th { font-weight: 600; color: var(--charcoal); }
.woocommerce table.shop_table tfoot tr:last-child :is(td, th) { font-weight: 700; color: var(--ink); border-bottom: 1.5px solid var(--line-strong); }
.woocommerce table.shop_table .woocommerce-orders-table__cell-order-number a { color: var(--ink); font-weight: 700; }
.woocommerce table.shop_table .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }
.woocommerce table.shop_table .woocommerce-orders-table__cell-order-actions .button { min-height: var(--btn-sm); padding: 0 14px; font-size: var(--fs-small); margin: 0 0 0 6px; }
@media (max-width: 760px) {
  /* tables without a wrap scroll inside themselves on phones */
  :where(.sgh-main) :is(.sgh-quote-table, .sgh-tech-table, .sgh-acc-table, .sgh-table:not(.sgh-table-wrap .sgh-table)) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 768px) {
  /* WooCommerce stacks responsive tables: one record per block, label left and value right */
  .woocommerce table.shop_table_responsive tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .woocommerce table.shop_table_responsive tr :is(td, th) { padding: 5px 0; border: 0; background: none !important; }
  .woocommerce table.shop_table_responsive tr :is(td, th)::before { font-weight: 600; color: var(--slate); }
  /* the status cell's ::before is the row label on phones: the label alone carries the status */
  .woocommerce table.shop_table_responsive td.woocommerce-orders-table__cell-order-status::before { display: inline; width: auto; height: auto; margin: 0; border-radius: 0; background: none; }
}

/* ---------- Tabs: one row of views over the same record; the account navigation uses the same active marker ---------- */
.sgh-tabs { display: flex; gap: 4px 20px; margin: 0 0 20px; padding: 0; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: none; list-style: none; }
.sgh-tabs::-webkit-scrollbar { display: none; }
.sgh-tabs a, .sgh-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; margin: 0 0 -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--charcoal); font: 600 var(--fs-small)/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.sgh-tabs a:hover, .sgh-tabs button:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.sgh-tabs :is(a, button):is([aria-current], [aria-selected="true"], .is-active) { color: var(--ink); border-bottom-color: var(--orange-press); }
.sgh-tabs .n { color: var(--slate); font-weight: 400; font-variant-numeric: tabular-nums; }
.sgh-tabs :is(a, button):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---------- Empty and error states (master 121, 122): a title, one line, one action ---------- */
.sgh-state, .sgh-empty { margin: 0 0 24px; padding: 20px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); color: var(--slate); font-size: var(--fs-body); line-height: 1.5; }
.sgh-state p { margin: 0; }
.sgh-state .sgh-state-t { margin: 0 0 4px; font: 700 var(--fs-h4)/1.3 var(--display); color: var(--ink); }
.sgh-state .sgh-state-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sgh-state.is-error { border-top-color: var(--error); }
.sgh-state.is-error .sgh-state-t { color: var(--error); }
p.sgh-empty { font-size: var(--fs-body); }

/* ---------- Overlays: dialog (modal and confirmation) and drawer share the scrim, radius and shadow ---------- */
dialog.sgh-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-2); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2); overflow: auto; }
dialog.sgh-modal::backdrop { background: var(--scrim); }
.sgh-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.sgh-modal-head h2 { margin: 0; font: 800 var(--fs-h3)/1.25 var(--display); }
.sgh-modal-x { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -10px -8px 0; border: 0; border-radius: var(--radius-2); background: none; color: var(--charcoal); cursor: pointer; }
.sgh-modal-x:hover { background: var(--ground); color: var(--ink); }
.sgh-modal-x .icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.sgh-modal-body { padding: 16px 20px; font-size: var(--fs-body); line-height: 1.5; }
.sgh-modal-body > :last-child { margin-bottom: 0; }
.sgh-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }
dialog.sgh-modal.is-confirm { width: min(440px, calc(100vw - 32px)); }
dialog.sgh-modal.is-confirm .sgh-modal-body { padding-top: 20px; font-weight: 600; color: var(--ink); }
.btn-danger { background: var(--error); border-color: var(--error); color: var(--paper); }
.btn-danger:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 600px) {
  dialog.sgh-modal { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-2) var(--radius-2) 0 0; }
  .sgh-modal-foot .btn { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.sgh-modal[open] { animation: sgh-modal-in .18s ease-out; }
  @keyframes sgh-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- Status badge family (master 119): a dot and a label, the label carries the meaning ----------
   Tones: ok (available, accepted, completed, resolved, compatible), warn (low stock, on order, on hold,
   waiting for you), error (failed, not compatible, not covered), action (a quotation is ready for you),
   neutral (in progress, quote only), muted (closed, expired, cancelled, discontinued), unknown (hollow:
   announced, planned, compatibility not yet verified). The older badges map onto it here. */
.sgh-badge, .sgh-status, .x-q-badge, .x-in-badge, .x-feat .x-badge, :is(.x-status-t, .x-status-key, .x-planned) .x-st, .x-assist-st, .compat .status, .woocommerce-order-overview__status strong {
  --mark: var(--mark-neutral);
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--ink); font: 600 var(--fs-small)/1.35 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: baseline; }
.sgh-badge::before, .sgh-status::before, .x-q-badge::before, .x-in-badge::before, .x-feat .x-badge::before, :is(.x-status-t, .x-status-key, .x-planned) .x-st::before, .x-assist-st::before, .compat .status::before,
.woocommerce-orders-table__cell-order-status::before, .woocommerce-order-overview__status strong::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mark, var(--mark-neutral)); }
/* order status cells stay table cells: the dot sits inline before the text */
.woocommerce table.shop_table td.woocommerce-orders-table__cell-order-status { font-weight: 600; white-space: nowrap; }
.woocommerce table.shop_table td.woocommerce-orders-table__cell-order-status::before { display: inline-block; margin-right: 7px; vertical-align: 1px; }
/* tone modifiers */
.sgh-badge.is-ok, .x-q-badge.is-ok, .x-in-badge.is-ok, .x-feat .x-badge.is-ok, :is(.x-status-t, .x-status-key, .x-planned) .x-st-available, .x-assist-st.is-verified, .compat .status.listed,
.sgh-status:is(.st-sgh-accepted, .st-sgh-ordered, .st-sgh-resolved, .st-active, .st-renewed, .is-ok),
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { --mark: var(--mark-ok); }
.sgh-badge.is-warn, .x-q-badge.is-warn, .x-in-badge.is-warn, :is(.x-status-t, .x-status-key, .x-planned) .x-st-limited,
.sgh-status:is(.st-sgh-waiting, .st-upcoming, .is-warn),
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { --mark: var(--mark-warn); }
.sgh-badge.is-error, .sgh-status.is-error,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { --mark: var(--mark-error); }
.sgh-badge.is-action, .sgh-status:is(.st-sgh-issued, .st-sgh-revised, .st-offered, .is-action) { --mark: var(--mark-action); }
.sgh-badge.is-muted, .x-q-badge.is-muted, .x-feat .x-badge.is-partial,
.sgh-status:is(.st-sgh-draft, .st-sgh-closed, .st-sgh-declined, .st-sgh-expired, .st-expired, .st-cancelled, .is-muted),
.woocommerce-orders-table__row:is(.woocommerce-orders-table__row--status-cancelled, .woocommerce-orders-table__row--status-refunded, .woocommerce-orders-table__row--status-checkout-draft) .woocommerce-orders-table__cell-order-status { --mark: var(--mark-muted); color: var(--slate); }
.sgh-badge.is-unknown, .x-feat .x-badge.is-depends, :is(.x-status-t, .x-status-key, .x-planned) .x-st-planned, :is(.x-status-t, .x-status-key, .x-planned) .x-st-integration, .x-assist-st.is-unverified, .compat .status.unknown, .sgh-status.is-unknown { color: var(--charcoal); }
.sgh-badge.is-unknown::before, .x-feat .x-badge.is-depends::before, :is(.x-status-t, .x-status-key, .x-planned) .x-st-planned::before, :is(.x-status-t, .x-status-key, .x-planned) .x-st-integration::before, .x-assist-st.is-unverified::before, .compat .status.unknown::before, .sgh-status.is-unknown::before { background: none; box-shadow: inset 0 0 0 1.5px var(--slate); }
.sgh-status.st-sgh-closed, .sgh-status.st-sgh-ordered { color: var(--ink); }
/* long labels wrap (quick order match notes) */
.x-qo-item .x-q-badge, .x-qo-entered .x-q-badge, .sgh-badge.is-wrap { align-items: flex-start; white-space: normal; }
.x-qo-item .x-q-badge::before, .x-qo-entered .x-q-badge::before, .sgh-badge.is-wrap::before { margin-top: 5px; }
/* the badge on a dark band */
.band-dark .sgh-badge, .x-cfg-bar .sgh-badge { color: var(--panel-ink); }
/* card stock lines already use a dot: same size */
.sgh-card-stock::before { width: 8px; height: 8px; }
.x-feat .x-badge { align-self: flex-start; }
/* support request form: on a rule, not inside a card */
.sgh-support .sgh-ws-card { padding: 20px 0 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: none; }
.woocommerce-MyAccount-content > p:empty { display: none; }

/* ---------- Cart and checkout (master 103): familiar, simple, trustworthy ----------
   Lines on dividers: image, product (ink, not a link colour), unit price and quantity, line total.
   One summary panel: subtotal, delivery, total with tax, the primary action. Same panel at checkout,
   where the steps are numbered and the form sits on dividers. Pure styling of WooCommerce Blocks. */
.woocommerce-page .wp-block-woocommerce-cart, .woocommerce-page .wp-block-woocommerce-checkout { --sgh-sum-top: 24px; color: var(--ink); font-size: var(--fs-body); }
.woocommerce-page .wc-block-components-sidebar-layout { gap: 0 48px; }
.woocommerce-page .wc-block-components-sidebar-layout .wc-block-components-main { padding-right: 0; }
/* line items */
.woocommerce-page .wc-block-cart table.wc-block-cart-items { width: 100%; border-collapse: collapse; border-bottom: 0; }
.woocommerce-page .wc-block-cart .wc-block-cart-items__header { border-bottom: 1.5px solid var(--line-strong); }
.woocommerce-page .wc-block-cart .wc-block-cart-items__header th { padding: 0 0 10px; color: var(--slate); font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.woocommerce-page .wc-block-cart .wc-block-cart-items__row { border-bottom: 1px solid var(--line); }
.woocommerce-page .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row > td { padding-top: 20px; padding-bottom: 20px; border: 0; }
.woocommerce-page .wc-block-cart .wc-block-cart-item__image img { width: 80px; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-1); background: var(--paper); }
.woocommerce-page .wc-block-cart .wc-block-cart-item__image a { display: block; }
.woocommerce-page .wc-block-components-product-name, .woocommerce-page a.wc-block-components-product-name { color: var(--ink); font: 600 var(--fs-body)/1.4 var(--sans); text-decoration: none; }
.woocommerce-page a.wc-block-components-product-name:hover { color: var(--orange-press); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-page .wc-block-cart .wc-block-cart-item__prices { margin: 4px 0 2px; color: var(--slate); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.woocommerce-page .wc-block-cart .wc-block-components-product-metadata__description { display: none; }
.woocommerce-page .wc-block-components-product-metadata { color: var(--slate); font-size: var(--fs-small); }
.woocommerce-page .wc-block-cart .wc-block-cart-item__quantity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.woocommerce-page .wc-block-cart .wc-block-cart-item__remove-link { min-height: 32px; color: var(--slate) !important; font-size: var(--fs-small) !important; text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-page .wc-block-cart .wc-block-cart-item__remove-link:hover { color: var(--error) !important; }
.woocommerce-page .wc-block-cart .wc-block-cart-item__total { font-weight: 700; font-variant-numeric: tabular-nums; }
.woocommerce-page .wc-block-components-product-price__regular { color: var(--slate); font-weight: 400; }
.woocommerce-page .wc-block-components-sale-badge { padding: 0; border: 0; background: none; color: var(--ok); font: 600 var(--fs-micro)/1.3 var(--sans); text-transform: none; letter-spacing: 0; }
/* summary panel (cart sidebar and checkout sidebar) */
.woocommerce-page .wc-block-cart__sidebar, .woocommerce-page .wc-block-checkout__sidebar { align-self: flex-start; }
.woocommerce-page .wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block, .woocommerce-page .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  padding: 20px 24px 24px; border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--paper); }
@media (min-width: 1025px) { .wc-block-cart__sidebar, .wc-block-checkout__sidebar.is-sticky, .wc-block-checkout__sidebar { position: sticky; top: var(--sgh-sum-top); } }
.woocommerce-page .wc-block-cart .wc-block-cart__totals-title, .woocommerce-page .wc-block-components-checkout-order-summary__title-text, .woocommerce-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
  margin: 0 0 6px; padding: 0; color: var(--ink); font: 700 var(--fs-h4)/1.3 var(--display); letter-spacing: 0; text-transform: none; }
.woocommerce-page .wc-block-components-totals-wrapper { padding: 12px 0; border-top: 1px solid var(--line); }
.woocommerce-page .wc-block-components-totals-wrapper:first-of-type { border-top: 0; }
.woocommerce-page .wc-block-components-totals-item { padding: 5px 0; font-size: var(--fs-small); color: var(--charcoal); }
.woocommerce-page .wc-block-components-totals-item__value { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.woocommerce-page .wc-block-components-totals-item__description { color: var(--slate); font-size: var(--fs-micro); }
.woocommerce-page .wc-block-components-totals-footer-item { padding-top: 14px !important; border-top: 1.5px solid var(--line-strong); }
.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--ink); font: 700 var(--fs-body)/1.3 var(--display); }
.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--ink); font: 800 var(--fs-h3)/1.2 var(--display); }
.woocommerce-page .wc-block-components-totals-footer-item-tax { color: var(--slate); font-size: var(--fs-micro); }
.woocommerce-page .wc-block-components-panel__button { min-height: 40px; color: var(--charcoal); font-size: var(--fs-small); font-weight: 600; }
.woocommerce-page .wc-block-cart__submit { margin: 16px 0 0; }
.woocommerce-page .wc-block-cart__submit-button, .woocommerce-page .wc-block-components-checkout-place-order-button { width: 100%; min-height: var(--btn-lg); font-size: var(--fs-body); }
/* closed cart and the notes after the cart: facts on a rule, not a box */
.woocommerce-page .sgh-cart-notes { gap: 6px; margin: 24px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--slate); }
/* checkout: numbered steps on dividers */
.woocommerce-page .wc-block-components-checkout-step { margin: 0; padding: 24px 0; border-top: 1px solid var(--line); counter-increment: checkout-step; }
.woocommerce-page .wc-block-components-checkout-step:first-child { border-top: 0; padding-top: 4px; }
.woocommerce-page .wc-block-components-checkout-step__heading { margin: 0 0 14px; }
.woocommerce-page .wc-block-components-checkout-step__title { display: flex; align-items: center; gap: 12px; color: var(--ink); font: 700 var(--fs-h3)/1.3 var(--display); }
.woocommerce-page .wc-block-components-checkout-step__title::before { content: counter(checkout-step); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; font: 700 var(--fs-small)/1 var(--sans); }
.woocommerce-page .wc-block-components-checkout-step__description { color: var(--slate); font-size: var(--fs-small); }
.woocommerce-page .wc-block-checkout__guest-checkout-notice, .woocommerce-page .wc-block-checkout__login-prompt { color: var(--slate); font-size: var(--fs-small); }
.woocommerce-page .wc-block-components-radio-control--highlight-checked { border-radius: var(--radius-2); }
.woocommerce-page .wc-block-components-radio-control--highlight-checked::after { border-color: var(--line-strong); border-width: 1px; }
.woocommerce-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted, .woocommerce-page .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: var(--radius-2); }
.woocommerce-page .wc-block-components-radio-control__input:checked { border-color: var(--orange-press); }
.woocommerce-page .wc-block-components-radio-control__input:checked::before { background: var(--orange-press); }
.woocommerce-page .wc-block-components-radio-control__label, .woocommerce-page .wc-block-components-radio-control__secondary-label { color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.woocommerce-page .wc-block-components-radio-control__description { color: var(--slate); font-size: var(--fs-small); }
.woocommerce-page .wc-block-checkout__terms { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--slate); font-size: var(--fs-small); }
.woocommerce-page .wc-block-checkout__actions { padding-top: 16px; }
.woocommerce-page .wc-block-checkout__actions_row { gap: 12px; }
.woocommerce-page .wc-block-components-checkout-return-to-cart-button { color: var(--charcoal); font-size: var(--fs-small); }
.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item__image img { border: 1px solid var(--line); border-radius: var(--radius-1); background: var(--paper); }
.woocommerce-page .wc-block-components-order-summary-item__quantity { border: 0; background: var(--ink); color: var(--paper); font-size: var(--fs-micro); box-shadow: none; }
.woocommerce-page .wc-block-components-order-summary .wc-block-components-product-metadata__description { display: none; }
.woocommerce-page .wc-block-components-order-summary-item__description .wc-block-components-product-name { font-size: var(--fs-small); }
@media (max-width: 760px) {
  .woocommerce-page .wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block, .woocommerce-page .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { padding: 16px; }
  .woocommerce-page .wc-block-cart .wc-block-cart-item__image img { width: 64px; }
}

/* ---------- Account (master 104, flag polish_b12): grouped navigation, overview without repeats ---------- */
.sgh-acc-nav.is-grouped { padding-bottom: 8px; }
.sgh-acc-nav.is-grouped ul + .sgh-acc-nav-h, .sgh-acc-nav.is-grouped .sgh-acc-nav-h { margin: 18px 0 4px; padding: 0 12px; color: var(--slate); font: 700 var(--fs-micro)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.sgh-acc-nav.is-grouped .sgh-acc-nav-out { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.sgh-acc-nav.is-grouped .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
body.sgh-b12 .sgh-acc-cards { margin-bottom: 24px; }
body.sgh-b12 .sgh-acc-card p .sgh-badge { white-space: normal; }
@media (max-width: 860px) {
  /* phones: one scrolling row of links; group names drop, the order stays */
  .sgh-acc-nav.is-grouped { display: flex; padding: 0; overflow-x: auto; scrollbar-width: none; }
  .sgh-acc-nav.is-grouped::-webkit-scrollbar { display: none; }
  .sgh-acc-nav.is-grouped .sgh-acc-nav-h { display: none; }
  .sgh-acc-nav.is-grouped ul { flex: none; }
  .sgh-acc-nav.is-grouped .sgh-acc-nav-out { margin: 0; padding: 0; border: 0; }
}

/* ---------- Batch 14: solution scenes on the homepage (.h6-scn) and the Solutions hub (.x-solc) ----------
   Conceptual CGI from assets/visuals/solutions-v3; titles and flows stay HTML outside the image. */
.h6-scn { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.h6-scn-pic { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--ground-2); }
.h6-scn-pic picture { display: contents; }
.h6-scn-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.h6-scn-pic svg { display: block; width: 100%; height: 100%; padding: 8px; background: var(--paper); }
.h6-scn a:hover .h6-scn-pic img { transform: scale(1.025); }
.h6-scn a { color: var(--ink); text-decoration: none; }
.h6-scn a:hover b { color: var(--orange-press); }
.h6-scn a:focus-visible { outline: 2px solid var(--focus, var(--orange-press)); outline-offset: 3px; border-radius: var(--radius); }
.h6-scn b { display: block; margin: 5px 0 6px; font: 700 var(--fs-body)/1.25 var(--display); }
.h6-scn .x-flow { gap: 4px; font-size: var(--fs-micro); color: var(--slate); }
.h6-scn .x-flow span { padding: 0; background: none; border-radius: 0; }
.h6-scn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 24px; }
.h6-scn-a { display: flex; flex-direction: column; gap: 12px; height: 100%; }
/* the whole site, wide */
.h6-scn-site { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; margin-bottom: 36px; }
.h6-scn-site .h6-scn-pic { aspect-ratio: 16 / 8; }
.h6-scn-site b { font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.15; margin: 8px 0 10px; }
.h6-scn-site-t { display: block; color: var(--charcoal); max-width: 46ch; }
.h6-scn-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; color: var(--orange-press); }
.h6-scn-go .icon { width: 16px; height: 16px; }
/* tiers: three lead solutions, then compact rows */
.h6-scn.is-tiers .h6-scn-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.h6-scn.is-tiers .is-mid { grid-column: span 2; }
.h6-scn.is-tiers .is-mid .h6-scn-pic { aspect-ratio: 3 / 2; }
.h6-scn.is-tiers .is-row { grid-column: span 2; }
.h6-scn.is-tiers .is-row .h6-scn-a { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.h6-scn.is-tiers .is-row .h6-scn-pic { aspect-ratio: 4 / 3; }
/* mosaic: one large tile beside a grid of small ones */
.h6-scn.is-mosaic .h6-scn-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h6-scn.is-mosaic .is-big { grid-column: span 2; grid-row: span 2; }
.h6-scn.is-mosaic .is-big .h6-scn-pic { flex: 1; min-height: 280px; }
.h6-scn.is-mosaic .is-big b { font-size: var(--fs-h3); }
.h6-scn.is-mosaic .is-sm .h6-scn-pic { aspect-ratio: 16 / 10; }
@media (max-width: 1100px) {
  .h6-scn.is-tiers .h6-scn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h6-scn.is-tiers .is-mid, .h6-scn.is-tiers .is-row { grid-column: auto; }
  .h6-scn.is-tiers .is-mid:first-child { grid-column: 1 / -1; }
  .h6-scn.is-tiers .is-mid:first-child .h6-scn-pic { aspect-ratio: 21 / 9; }
  .h6-scn.is-mosaic .h6-scn-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .h6-scn-site { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
  .h6-scn-site .h6-scn-pic { aspect-ratio: 16 / 9; }
  .h6-scn.is-tiers .h6-scn-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .h6-scn.is-tiers .is-mid:first-child .h6-scn-pic { aspect-ratio: 16 / 9; }
  .h6-scn.is-tiers .is-mid:not(:first-child) .h6-scn-a, .h6-scn.is-tiers .is-row .h6-scn-a { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .h6-scn.is-tiers .is-mid:not(:first-child) .h6-scn-pic { aspect-ratio: 4 / 3; }
  .h6-scn.is-mosaic .h6-scn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .h6-scn.is-mosaic .is-big { grid-column: 1 / -1; grid-row: auto; }
  .h6-scn.is-mosaic .is-big .h6-scn-pic { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 400px) {
  .h6-scn.is-tiers .is-mid:not(:first-child) .h6-scn-a, .h6-scn.is-tiers .is-row .h6-scn-a { grid-template-columns: 96px minmax(0, 1fr); }
  .h6-scn.is-tiers .h6-scn-a .x-flow { display: none; }
  .h6-scn.is-tiers .is-mid:first-child .x-flow { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .h6-scn-pic img { transition: none; } .h6-scn a:hover .h6-scn-pic img { transform: none; } }
/* Solutions hub cards with scenes: three columns, two wide cards, dense so a site filter leaves no holes */
.x-solcards:has(.has-scene) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 20px; }
.x-solc.has-scene .x-solc-vis { position: relative; padding: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ground-2); }
.x-solc.has-scene .x-solc-vis picture { display: contents; }
.x-solc.has-scene .x-solc-vis img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.x-solc.has-scene > a:hover .x-solc-vis img { transform: scale(1.025); }
.x-solc.is-wide { grid-column: span 2; }
.x-solc.is-wide > a { flex-direction: row; }
.x-solc.is-wide .x-solc-vis { flex: 0 0 56%; aspect-ratio: auto; min-height: 300px; border-bottom: 0; border-right: 1px solid var(--line); }
.x-solc.is-wide .x-solc-body { padding: 22px 24px; }
.x-solc.is-wide .x-solc-h { font-size: clamp(19px, 1.7vw, 22px); }
@media (max-width: 1199px) {
  .x-solcards:has(.has-scene) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-solc.has-scene > a { flex-direction: column; }
  .x-solc.has-scene .x-solc-vis { flex: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .x-solc.is-wide > a { flex-direction: row; }
  .x-solc.is-wide .x-solc-vis { flex: 0 0 50%; min-height: 260px; border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .x-solcards:has(.has-scene) { grid-template-columns: minmax(0, 1fr); }
  .x-solc.is-wide { grid-column: auto; }
  .x-solc.is-wide > a { flex-direction: column; }
  .x-solc.is-wide .x-solc-vis { flex: none; min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
  .x-solc.is-wide .x-solc-body { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .x-solc.has-scene .x-solc-vis img { transition: none; } .x-solc.has-scene > a:hover .x-solc-vis img { transform: none; } }
/* the "Illustration" tag (also in sgh-solution.css) for teaser images that show placeholder screens */
.x-solc .x-illus-tag { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: var(--radius-1); background: rgba(255, 255, 255, .86); color: var(--charcoal); font: 600 var(--fs-micro)/1.3 var(--sans); }


/* Signed-out account page with self-service registration on: one page, Sign in beside Create account (WooCommerce forms). */
.woocommerce-account .sgh-article-body > .woocommerce > #customer_login,
.woocommerce-account .sgh-article-body > .woocommerce > .x-login-reason { grid-column: 1 / -1; }
#customer_login.col2-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; width: auto; }
#customer_login.col2-set::before, #customer_login.col2-set::after { content: none; display: none; }
#customer_login > .u-column1, #customer_login > .u-column2 { float: none; width: auto; max-width: none; margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
#customer_login > .u-column2 { background: var(--panel-soft, var(--paper)); }
#customer_login h2 { margin: 0 0 14px; font-size: var(--fs-h3); }
#customer_login form.login, #customer_login form.register { border: 0; padding: 0; margin: 0; }
#customer_login .form-row { padding: 0; margin: 0 0 14px; float: none; width: auto; }
#customer_login input.input-text { width: 100%; min-height: 44px; }
#customer_login .woocommerce-form-login__submit, #customer_login .woocommerce-form-register__submit { min-height: 44px; padding: 0 22px; border: 0; background: var(--orange-press); color: var(--paper); border-radius: var(--radius-sm); font-weight: 600; }
#customer_login .woocommerce-privacy-policy-text p { font-size: var(--fs-small); color: var(--slate); }
.x-reg-points { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; font-size: var(--fs-small); color: var(--slate); }
.x-reg-points li { position: relative; margin: 0; padding-left: 18px; }
.x-reg-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-press); }
.x-reg-biz { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--slate); }
@media (max-width: 820px) { #customer_login.col2-set { grid-template-columns: minmax(0, 1fr); gap: 20px; } #customer_login > .u-column1, #customer_login > .u-column2 { padding: 18px 16px; } }

/* Licence levels table on software product pages (product-ui.php sgh_pdp_tier_matrix). */
.sgh-tiers-wrap { overflow-x: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sgh-tiers-t { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-small); }
.sgh-tiers-t :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sgh-tiers-t thead th { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--slate); background: var(--ground); }
.sgh-tiers-t tbody th { font-weight: 700; white-space: nowrap; }
.sgh-tiers-t tbody th small { display: block; font-weight: 400; color: var(--slate); white-space: normal; max-width: 22ch; }
.sgh-tiers-t tr:last-child > * { border-bottom: 0; }
.sgh-tiers-n { font-size: var(--fs-small); color: var(--slate); margin: 4px 0 0; }