/* EnergyShop Storefront - GTShop Visual Parity Styles */

/* === Import Siemens Energy Theme === */
@import url("./themes/siemens-energy.css");

/* === Navigation (header bar + overlay) === */
@import url("./navigation.css");

/* === Login overlay panel === */
@import url("./login.css");
@import url("./support.css");
@import url("./terms.css");

/* === Cart page === */
@import url("./cart.css");

/* === Profile page === */
@import url("./profile.css");
@import url("./address_book.css");

/* === Orders dashboard === */
@import url("./orders.css");
@import url("./line_item.css");
@import url("./delivery_history.css");
@import url("./overview_header.css");

/* === Order detail page === */
@import url("./order_detail.css");

/* === VoltGrid Dashboard === */
@import url("./dashboard.css");

/* === Userback masking (display: contents passthrough) === */
@import url("./userback.css");

/* === Sentry user-feedback launcher + drawer extras === */
@import url("./feedback.css");

/* === VoltGrid Dashboard widgets (plant selector, notif toast, etc.) === */
@import url("./voltgrid.css");

/* Shared purchase controls: PDP, cart, checkout and account summaries. */
@import url("./purchase_bar.css");

/* This app has no app-wide client-side router (per-page @client hydration
 * islands only — see root CLAUDE.md), so every navigation is a real
 * cross-document load. This opts those navigations into the browser's
 * native View Transitions API so they crossfade instead of hard-flashing.
 * Paired with the `view-transition` meta tag in main.server.dart (some
 * engines honor one signal, some the other — both are cheap to keep).
 * Unsupported browsers (Firefox, Safari as of writing) silently no-op —
 * navigation just proceeds normally, no error, no missing functionality.
 * Respects prefers-reduced-motion, matching the existing sweep pattern in
 * arrester-configurator.css / my-assets.css.
 * MUST come after every @import above — per CSS spec, @import rules must
 * precede all other rules (except @charset) or they're invalidated. This
 * block originally sat at the top of the file, before the imports, and
 * silently broke every @import in this file in production (theme, nav,
 * login, cart, profile, orders, dashboard, userback, feedback, voltgrid —
 * everything) until caught via a live mobile screenshot showing totally
 * unstyled pages. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* === Measured-width fluid unit (--vwx) ===
   1/100 of documentElement.clientWidth, set at runtime by the bootstrap in
   main.server.dart (head script) / main.client.dart (fallback installer):
     --vwx = clientWidth / 100 px, on load + resize (rAF-throttled).
   Every fluid size uses calc(N * var(--vwx)) instead of Nvw, because raw vw
   is zoom-blind: it ignores CSS zoom (document.documentElement.style.zoom),
   double-punishes browser zoom + OS scaling compounds, and includes the
   scrollbar. clientWidth is correct under all of them.
   This line is the ONLY raw vw token allowed in the stylesheets (SSR /
   pre-hydration fallback — identical behavior until JS measures). Enforced
   by scripts/ui-audit/lint-css.mjs; converted by
   scripts/ui-audit/vwx-codemod.mjs. */
:root {
  --vwx: 1vw;
}

/* === CSS Variables (Design Tokens) === */
:root {
  /* Header */
  --header-height: 4rem;
  /* Footer — approximate rendered height used by .page-loading */
  --footer-height: 20.375rem;

  /* Colors - GTShop Brand (purple theme) */
  --color-primary: #1a1a1a; /* Dark primary - modern B&W design */
  --color-primary-dark: #333333; /* Darker purple for hover states */
  --color-primary-light: #a855f7; /* Lighter purple variant *f/
  --color-secondary: #1b1534; /* Dark purple/navy - main brand color */
  --color-secondary-light: #2d2657;
  --color-accent: #1a1a1a; /* Dark accent for buttons (modern B&W design) */
  --color-accent-hover: #333333;
  --color-checkout-active: #ae56ff; /* GTShop checkout active state */
  --color-focus-ring: #0a66c2; /* GTShop focus ring color */

  /* SE Brand Energy Purple — accent tokens that hold regardless of whether
   * body.theme-siemens-energy is applied (the PDP CMS sections key off these;
   * the theme file may re-map them per tenant). */
  --se-brand-purple: #641e8c;
  --se-brand-purple-light: #7d3aa5;
  --se-brand-purple-dark: #4a1668;

  /* Neutrals - GTShop palette */
  --color-white: #ffffff;
  --color-gray-50: #f5f5f5; /* GTShop background neutral */
  --color-gray-100: #f1f1f1; /* GTShop secondary background */
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #0f172a; /* GTShop dark text */

  /* Status Colors - GTShop pattern */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-error-bg: #f8d7da; /* GTShop alert background */
  --color-error-text: #721c24; /* GTShop alert text */
  --color-info: #3b82f6;

  /* Typography - System fonts like Siemens Energy site */
  --font-family:
    "Siemens Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: clamp(1.75rem, 1.45rem + calc(0.72 * var(--vwx)), 2rem);
  --font-size-4xl: clamp(
    2rem,
    1.67rem + calc(0.8 * var(--vwx)),
    2.25rem
  ); /* GTShop H1 size */
  --font-size-5xl: 3rem;
  --font-size-responsive-heading: clamp(
    18px,
    calc(2 * var(--vwx)),
    22px
  ); /* GTShop responsive headings */

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-section: 2.8125rem; /* GTShop section spacing */

  /* Border Radius - GTShop patterns */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-card: 0.875rem; /* GTShop card radius */
  --radius-button: 0.625rem; /* GTShop button radius */
  --radius-full: 624.94rem;

  /* Shadows - GTShop patterns */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-card: 0 2px 0.5rem rgba(0, 0, 0, 0.05); /* GTShop card shadow */
  --shadow-md: 0 0.25rem 0.375rem -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 0.625rem 0.9375rem -0.19rem rgb(0 0 0 / 0.1);
  --shadow-xl: 0 1.25rem 1.5625rem -0.3125rem rgb(0 0 0 / 0.1);

  /* Container */
  --container-max: 120rem;
}

/* === Reset & Base === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
 * FLUID root-scale knob (2026-07-08, evolves the 2026-07-07 static knob).
 * Units are uniform rem after scripts/px-to-rem-codemod.mjs, so the root
 * font-size is THE single knob that scales the whole UI — type, padding,
 * gaps, grids — together.
 *
 * WHY FLUID: page zoom multiplies CSS px AND shrinks the CSS viewport, so
 * px and rem zoom identically — a static % knob can't stop 250% zoom from
 * producing monster controls that waste the whole viewport. The vw TERM in
 * the root font-size compacts the UI as the EFFECTIVE viewport narrows
 * (zoom or small screen), giving sublinear zoom: content still grows under
 * zoom, just less than proportionally, so more of the page stays in view.
 *
 * clamp(10.56px, 6.4px + 0.62vw, 15.04px) computes:
 *   ≥1394px effective viewport → 15.04px cap = the old 93.75% desktop,
 *                                              pixel-identical (1440/1920 ✓)
 *   1280px → 14.34px (−1.5% vs previous curve — within the ±2% desktop
 *                     budget of the 07-31 retune)
 *   1024px → 12.75px    853px → 11.69px (1280 @ 150% — the PO standard)
 *    768px → 11.16px    663px → 10.56px floor (PO's test width, 07-31)
 *   ≤671px → 10.56px floor (0.66rem — density over size, PO decision;
 *                           OS zoom provides the magnification)
 *
 * Tuning history: 93.75% static (2026-07-07, first de-bulk, −6.25% global);
 * 87.5% was the mooted next stop — the fluid floor now covers that range
 * only where the viewport is actually tight. 2026-07-31: floor 0.72→0.66rem,
 * slope 0.4→0.62vw (PO: "almost all this text is too big" at ~663 effective;
 * he owns the density-over-size trade-off). Desktop ≥1280 within 2% of the
 * previous curve; 1440/1920 pixel-identical (cap unchanged).
 *
 * Sub-4px hairline borders stay px (codemod rule) so they don't blur;
 * @media breakpoints stay device-px, so layout switchpoints don't move.
 * clamp()/vw values inside sheets (e.g. cart.css) are deliberate px and
 * don't compound with this rule.
 *
 * CASCADE: this must stay UNLAYERED and AFTER the base html{font-size:1rem}
 * reset above (same specificity → later wins; unlayered also beats any
 * @layer legacy html rule). Keep it the ONLY html{font-size} knob.
 * ========================================================================== */
html {
  font-size: clamp(
    0.66rem,
    calc(0.4rem + 0.62 * var(--vwx)),
    0.94rem
  ); /* tune here — the only scale knob */
}

/* Touch devices: the floor above was tuned for a desktop at 663px zoom
   ("density over size"). On a 390px phone it resolves to ~10.6px root, which
   put every control on the DIAG configuration tab under 44px and the sticky
   CTA at 16px tall (E2E audit 2026-08-26, gate 14). A phone is not a zoomed
   desktop: raise the floor where the pointer is a finger. Not a width query,
   so the fluid doctrine (no breakpoints) still holds. */
@media (hover: none) and (pointer: coarse) {
  html {
    font-size: clamp(0.88rem, calc(0.4rem + 0.62 * var(--vwx)), 0.94rem);
  }
}

body {
  font-family: var(--font-family);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  max-width: 120rem;
  margin: 0 auto;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  line-height: 1.3;
}

/* === Utilities === */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* === Buttons (GTShop style - bordered with color inversion) === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-button);
  border: 2px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}

/* Remove arrow prefix - GTShop doesn't use it */
.btn::before {
  content: none;
}

/* GTShop focus ring */
.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  text-decoration: none;
}

/* GTShop bordered button style (white border, transparent bg, inverts on hover) */
.btn-bordered {
  background-color: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
}

.btn-bordered:hover {
  background-color: var(--color-white);
  color: var(--color-gray-900);
  text-decoration: none;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

.btn-outline:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* Secondary button - GTShop style */
.btn-secondary {
  background-color: var(--color-white);
  border: 2px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

.btn-secondary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.btn-sm {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-base);
}

/* Hero CTA button - GTShop teal style */
.btn-hero-teal {
  background-color: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
  border-radius: var(--radius-button);
}

.btn-hero-teal:hover {
  background-color: var(--color-white);
  color: var(--color-gray-900);
  text-decoration: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88) 6.641%,
    rgba(255, 255, 255, 0.7) 575.24%
  );
  backdrop-filter: blur(4.375rem);
  -webkit-backdrop-filter: blur(4.375rem);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s ease;
  will-change: transform;
}

/* Userback 8076055 — scroll-shadow cue so it's clear content scrolls
   underneath the sticky header. Toggled by web/header.js alongside the
   existing header-hidden logic; box-shadow doesn't create a stacking
   context, so this doesn't affect the overlay z-index stacking rules
   documented in dart/apps/web_jaspr/CLAUDE.md. */
.site-header.header-scrolled {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.site-header.header-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* Solid white header on checkout (shipping + all following steps) */
.site-header.checkout-open {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Userback (Helmerverken) — .account-dropdown (z-index: 1000) lives inside
   .site-header, which is its own stacking context (position: fixed +
   z-index + will-change: transform — see dart/apps/web_jaspr/CLAUDE.md's
   "CSS stacking" notes). That traps the dropdown below anything outside
   .site-header with a higher effective stack level, including the cart/
   checkout/login .nav-panel (z-index: 200), which renders as a document-
   root sibling of <header> via Header's Component.fragment. header.dart
   toggles this class only while the account dropdown is open (and its
   click handler now closes any open URL panel first, so in practice the
   two shouldn't be open at the same time) — this is defense-in-depth so
   the dropdown always wins if they ever do overlap, without permanently
   raising .site-header above every overlay. */
.site-header.account-menu-open {
  z-index: 250;
}

.header-top-bar {
  display: none; /* Hide top bar for cleaner look */
}

.header-main {
  position: relative;
  /* High enough to beat normal page content; lower than .nav-panel so
     an open overlay drawer (login/cart/checkout) paints above the nav. */
  z-index: 100;
  padding: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88) 6.64%,
    rgba(255, 255, 255, 0.7) 575.24%
  );
  backdrop-filter: blur(4.375rem);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.site-header.header-hidden {
  /* Userback 7527021 — when the header is hidden on scroll, its fixed
     72px container at top:0 still intercepts clicks because the outer
     .site-header has default pointer-events: auto. Users see an empty
     area at the top of the viewport but clicks there do nothing (or
     trigger the hidden nav bar's ghost interactions). Disable
     pointer events on the entire container when hidden so clicks
     pass through to whatever content is below. */
  pointer-events: none;
}

.site-header.header-hidden .header-main {
  transform: translateY(-100%);
  pointer-events: none; /* redundant safety — parent already off */
}

/* ws-density: sticky-footer shell — on pages shorter than the viewport
   the footer pins to the viewport bottom (no sub-footer void), on tall
   pages it flows after the content as before. The fixed header and the
   hydration marker spans are out-of-flow / zero-height flex items. */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-shell > .main-content {
  padding-top: var(--header-height);
  /* ws-density: the blanket calc(100vh - header) reserve pinned the
     footer below the fold FOREVER on short pages (orders/quotes with few
     rows, gate states) — a permanent viewport-tall void. The reserve only
     needs to hold while an @client page is hydrating (its root renders as
     an empty div then); once content is in, short pages should let the
     footer rise to sit right under the content, with the sticky-footer
     flex above keeping it no higher than the viewport bottom. The :has()
     rule below scopes the reserve to exactly the hydration window, so
     the original footer up-then-down flash stays fixed. */
  min-height: 40vh;
  flex: 1 0 auto;
}

.app-shell > .main-content:has(> div:empty) {
  /* Hydration window: ProtectedState/@client pages render a bare empty
     div until auth + data resolve — keep the full reserve then so the
     footer doesn't fly up and drop back (the original 'jump'). */
  min-height: calc(100vh - var(--header-height, 4rem));
}

.app-shell > .main-content > .hero-section:first-child,
.app-shell > .main-content > * > .hero-section:first-child {
  margin-top: calc(-1 * var(--header-height));
}

/* Always reserve space for the vertical scrollbar so toggling overflow
   on/off (when an overlay opens) doesn't shift page content horizontally
   and resize the header. scrollbar-gutter: stable is supported in all
   modern browsers and is the pure-CSS way to fix scrollbar layout-shift. */
html {
  scrollbar-gutter: stable;
  /* Measured classic-scrollbar width (0 on overlay-scrollbar platforms,
     ~17px on Windows). Kept for any future consumer, but full-bleed
     elements now simply use calc(100 * var(--vwx)) — --vwx is derived
     from clientWidth, which already excludes the scrollbar, so the old
     `100vw - var(--scrollbar-w)` correction is obsolete. */
  --scrollbar-w: calc(100 * var(--vwx) - 100%);
}

/* Scroll lock when an overlay panel (login / cart / checkout / nav) is
   open. Lock body scroll only — the panel itself (.nav-panel) is
   position: fixed with its own overflow:auto, so its content scrolls
   independently. Locking .app-shell would constrain the panel's
   container height and break the panel's own scroll. */
body:has(.site-header.nav-open) {
  overflow: hidden;
}

/* Environment indicator (SHOP-822) — a fixed OVERLAY strip, never in flow.
   A 4px full-width colour bar along the top edge plus a small centred label
   tab hanging under it. position:fixed + pointer-events:none means zero
   layout shift versus production and nothing interactive is ever covered:
   the header is 4rem tall with vertically centred content, so the bar only
   overlaps its top padding, and the tab sits in the empty centre band
   between the logo (left) and .header-actions (right).
   Rendered server-side as the FIRST child of <body> on every response by
   EnvironmentBanner (lib/components/environment_banner.dart) from the single
   APP_ENVIRONMENT value (lib/services/app_environment.dart):
     <div class="env-banner env-banner--dev" role="status" data-app-env="dev">
       <span class="env-banner__label">DEV</span>
     </div>
   Production renders nothing at all. The modifier colours below ARE the
   documented per-environment palette (docs/env-indicator/PLAN.md §3.1);
   every one passes WCAG AA (≥ 4.5:1) with white text, and the label is
   always text — colour is never the only cue. No close control by design.
   Embed mode (html.embedded, further down) and print hide it. */
.env-banner {
  --env-banner-color: #b91c1c; /* red-700 — unknown / ENV NOT SET (fail loud) */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* px-doctrine: allow — a 4px hairline strip. In rem it would grow with the
     root font-size and stop reading as a rule; this is a fixed graphic
     element, not type. */
  height: 4px;
  /* Above .header-main (100), .nav-panel (200), .impersonation-banner
     (10000) and the route-auth-pending veil (100000): the strip must stay
     visible whatever is open. Harmless to stack this high — it is
     pointer-events:none and 4px tall. */
  z-index: 100001;
  background: var(--env-banner-color);
  pointer-events: none;
}

.env-banner__label {
  position: absolute;
  /* px-doctrine: allow — must sit exactly on the 4px strip above; the two are
     one graphic and have to use the same unit or they separate. */
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.0625rem 0.625rem 0.125rem;
  border-radius: 0 0 0.375rem 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
  background: var(--env-banner-color);
  box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.25);
}

.env-banner--dev {
  --env-banner-color: #c2410c;
} /* orange-700 — 5.18:1 */
.env-banner--dev-legacy {
  --env-banner-color: #6d28d9;
} /* purple-700 — 7.10:1 */
.env-banner--preview {
  --env-banner-color: #1d4ed8;
} /* blue-700   — 6.70:1 */
.env-banner--local {
  --env-banner-color: #0f766e;
} /* teal-700   — 5.47:1 */
.env-banner--unknown {
  --env-banner-color: #b91c1c;
} /* red-700    — 6.47:1 */

@media print {
  .env-banner {
    display: none;
  }
}

/* Static placeholder rendered behind a panel route (cart / checkout /
   login) when the user landed via a direct URL and we have no real
   previous page to show as a blurred background. Gives the panel-route
   wash something to sit on top of so it doesn't look like an empty
   white page with a drawer floating in space. */
.panel-bg-fallback {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.1) 100%),
    url("/assets/images/hero-wave.svg") right center / auto 100% no-repeat,
    #f5f5f5;
  pointer-events: none;
}

.header-main-inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--header-height);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo:hover {
  text-decoration: none;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Siemens Energy wordmark logo */
.logo-image {
  height: 2.375rem;
  width: auto;
}

/* Vertical divider between logo and text */
.logo-divider {
  display: block;
  width: 1px;
  height: 2rem;
  background: #c9c9c9;
}

.logo-text {
  font-family: var(--font-family);
  font-size: clamp(0.88rem, calc(1.4 * var(--vwx)), 1.25rem);
  font-weight: 300;
  color: #242424;
  display: block;
  white-space: nowrap;
}

.company-selector {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
}

.header-search {
  flex: 1;
  max-width: 25rem;
  display: none; /* Hidden — replaced by icon-only search in header-actions */
}

/* Icon-only search that expands on click */
.header-search-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search-icon .search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.header-search-icon .search-toggle:hover {
  opacity: 0.6;
}

/* Expanded search input panel */
.header-search-expanded {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(25rem, calc(calc(100 * var(--vwx)) - 2rem));
  z-index: 101;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
  padding: 0.5rem;
}

.header-search-expanded .search-autocomplete {
  max-width: 100%;
}

.search-input {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
}

.search-input::placeholder {
  color: var(--color-gray-500);
}

/* === Search Autocomplete === */
.search-autocomplete {
  position: relative;
  flex: 1;
  max-width: 25rem;
}

.search-autocomplete .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-autocomplete .search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--color-gray-400);
  pointer-events: none;
  z-index: 1;
}

.search-autocomplete .search-input {
  width: 100%;
  padding: 0.625rem 2.5rem 0.625rem 2.5rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-button);
  background: var(--color-white);
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.search-autocomplete .search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(138, 0, 229, 0.1);
}

.search-autocomplete.dropdown-open .search-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--color-primary);
}

.search-autocomplete .search-loading {
  position: absolute;
  right: 0.75rem;
}

.search-autocomplete .spinner {
  animation: spin 1s linear infinite;
  color: var(--color-primary);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Search Dropdown */
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-top: none;
  border-radius: 0 0 var(--radius-button) var(--radius-button);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-height: 25rem;
  overflow-y: auto;
}

.search-suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-gray-100);
  transition: background-color 0.15s;
}

.suggestion-item:hover,
.suggestion-item.selected {
  background-color: var(--color-gray-50);
}

.suggestion-item.selected {
  background-color: rgba(138, 0, 229, 0.05);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-image {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.suggestion-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suggestion-placeholder {
  color: var(--color-gray-400);
}

.suggestion-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suggestion-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-arrow {
  flex-shrink: 0;
  color: var(--color-gray-400);
  opacity: 0;
  transition: opacity 0.15s;
}

.suggestion-item:hover .suggestion-arrow,
.suggestion-item.selected .suggestion-arrow {
  opacity: 1;
  color: var(--color-primary);
}

/* Search Footer */
.search-footer {
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.see-all-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-button);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  justify-content: center;
}

.see-all-btn:hover {
  background: var(--color-primary-dark);
}

.see-all-btn svg {
  flex-shrink: 0;
}

.search-btn {
  padding: var(--spacing-2) var(--spacing-3);
  background: transparent;
  border: none;
  color: var(--color-gray-600);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(1.1 * var(--vwx)), 1rem);
  margin-left: auto;
  /* H7 — the icon row is never the flex item that gives way; the nav
     (see .primary-nav) shrinks/scrolls instead. */
  flex-shrink: 0;
}

/* A conditional slot that renders an empty <div> (seen between Search and
   Support) is still a flex child, so it costs a full `gap` on each side —
   21px of nothing on a 390px phone. Empty children take no room. */
.header-actions > div:empty {
  display: none;
}

.header-action {
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.header-action:hover {
  opacity: 0.6;
  text-decoration: none;
}

/* Uniform icon sizing across all header action icons */
.header-action .action-icon,
.action-icon {
  height: 1.25rem;
  width: auto;
  display: block;
}

/* PO-BATCH-2 item 7 — icon scale unification under zoom/--vwx: several
   header/nav svgs are sized only by their px width/height ATTRIBUTES, so
   under root scaling and CSS zoom they stayed frozen while rem-sized
   neighbors (.action-icon) scaled — mixed icon sizes in one row. CSS owns
   the box (rem); the attrs remain the intrinsic aspect-ratio fallback. */
.header-action svg,
.mini-cart-trigger svg {
  height: 1.25rem;
  width: auto;
  display: block;
}
.nav-panel-mob-action svg,
.nav-panel-mob-back svg,
.nav-panel-close-btn-inner svg {
  height: 1.25rem;
  width: auto;
}
/* Keep the deliberate profile-icon optical correction winning. */
.header-action svg.profile-icon {
  height: 1.1125rem;
}

/* Profile icon — force exact 17.8px to eliminate bottom whitespace in SVG */
.profile-icon {
  height: 1.1125rem !important;
}

/* Global selector in header (like marketing site) */
.global-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
}

/* === Mini Cart === */
.mini-cart {
  position: relative;
}

.mini-cart-trigger {
  position: relative;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.mini-cart-trigger:hover {
  opacity: 0.6;
}

.cart-count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 600;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  box-sizing: border-box;
  white-space: nowrap;
}

.cart-count.hidden {
  display: none;
}

.mini-cart-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 22.5rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 100;
  margin-top: var(--spacing-2);
  display: none;
}

.mini-cart-dropdown.visible {
  display: block;
}

.mini-cart-overlay {
  display: none;
}

.mini-cart-overlay.visible {
  display: block;
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 99;
}

.hidden {
  display: none !important;
}

.mini-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.mini-cart-header h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-gray-500);
}

.mini-cart-items {
  padding: var(--spacing-4);
  max-height: 18.75rem;
  overflow-y: auto;
}

.mini-cart-subtotal {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
  font-weight: 600;
}

.mini-cart-actions {
  display: flex;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-4) var(--spacing-4);
}

.mini-cart-actions .btn {
  flex: 1;
}

.mini-cart-loading {
  padding: var(--spacing-6);
  text-align: center;
  color: var(--color-gray-500);
}

.mini-cart-item {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.mini-cart-item:last-child {
  border-bottom: none;
}

.mini-cart-item .item-thumbnail {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-cart-item .item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-cart-item .item-thumbnail.placeholder {
  color: var(--color-gray-400);
}

.mini-cart-item .item-details {
  flex: 1;
  min-width: 0;
}

.mini-cart-item .item-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-900);
  line-height: 1.3;
  margin-bottom: 2px;
}

.mini-cart-item .item-meta {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.mini-cart-item .item-end-customer {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0a3d62;
  background: #eaf3fb;
  border: 1px solid #b8d6ec;
  padding: 2px 0.375rem;
  border-radius: 0.5rem;
}

.mini-cart-item .item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.mini-cart-item .item-total {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-900);
}

.mini-cart-item .remove-btn {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.mini-cart-item .remove-btn:hover {
  color: var(--color-error);
}

.empty-cart {
  text-align: center;
  color: var(--color-gray-500);
  padding: var(--spacing-4) 0;
}

.more-items {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  padding-top: var(--spacing-2);
}

.btn-sm {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
}

/* === Hero Banner (Full-width image style like Siemens Energy) === */
.hero-banner {
  position: relative;
  min-height: clamp(25rem, calc(33 * var(--vwx)), 31.25rem);
  display: flex;
  align-items: center;
  background: var(--color-secondary);
  color: var(--color-white);
  overflow: hidden;
}

.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(27, 21, 52, 0.9) 0%,
    rgba(27, 21, 52, 0.6) 50%,
    transparent 100%
  );
  z-index: 1;
}

.hero-visual {
  position: absolute;
  inset: 0;
  background: url("/assets/images/hero-bg.jpg") center/cover;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 37.5rem;
  padding: var(--spacing-8) var(--spacing-6);
}

.hero-banner h1 {
  font-size: var(--font-size-4xl);
  font-weight: 300;
  margin-bottom: var(--spacing-4);
  line-height: 1.2;
}

.hero-banner p {
  font-size: var(--font-size-lg);
  opacity: 0.9;
  margin-bottom: var(--spacing-6);
  line-height: 1.6;
}

/* === Catalog Section === */
.catalog-section {
  padding: var(--spacing-16) 0;
  background: var(--color-white);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 300;
  margin-bottom: var(--spacing-8);
  color: var(--color-gray-900);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--spacing-4);
}

/* GTShop style - 4 column category grid */
.category-grid-4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--spacing-4);
  margin: 0 -0.5rem; /* GTShop negative margin pattern */
}

.category-grid-4 > * {
  padding: 0 0.5rem; /* GTShop gutter pattern */
}

/* === Category Card (GTShop Banner Card Style) === */
.category-card {
  display: block;
  position: relative;
  min-height: 18.75rem; /* GTShop min-height */
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-card); /* GTShop 14px radius */
  box-shadow: var(--shadow-card); /* GTShop card shadow */
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.category-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Full-bleed image with gradient overlay - GTShop style */
.category-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--color-gray-100);
}

/* GTShop gradient overlay on category cards */
.category-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* Content positioned at bottom over image - GTShop style */
.category-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-5);
  background: transparent; /* Text over gradient */
  z-index: 1;
}

.category-content h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--spacing-1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.category-content p {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Discover more link style - GTShop */
.discover-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-top: var(--spacing-2);
  transition: color 0.2s ease;
}

.discover-link:hover {
  color: var(--color-primary-light);
  text-decoration: none;
}

/* Discover link in non-card context (catalog page) */
.product-actions .discover-link {
  color: var(--color-primary);
}

.product-actions .discover-link:hover {
  color: var(--color-primary-dark);
}

.discover-link::after {
  content: ">";
  font-weight: 700;
}

/* === Tab Navigation (like Grid connectivity tabs) === */
.tab-nav {
  display: flex;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--spacing-6);
}

.tab-nav-item {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s ease;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab-nav-item:hover {
  color: var(--color-gray-900);
}

.tab-nav-item.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* === Catalog Page === */
.catalog-page {
  display: flex;
  flex-direction: column;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-bottom: var(--spacing-12);
}

/* 24px gap between Header group and Category Navigation (Figma Frame 1000010171) */
.catalog-page > .category-nav-wrapper {
  margin-top: 1.5rem;
}

/* ─── Project Configurator CTA Banner ─────────────────────────── */
.configurator-cta {
  margin: 0 2.5rem 1.5rem;
  padding: 2rem 2.5rem;
  background: #1a1a1a;
  color: #fff;
  border-radius: 0.25rem;
}
.configurator-cta-content h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #fff;
}
.configurator-cta-content p {
  font-size: 0.9375rem;
  color: #ccc;
  margin: 0 0 1.25rem;
  max-width: 37.5rem;
}
.configurator-cta-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: #fff;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.configurator-cta-btn:hover {
  background: #f0f0f0;
  text-decoration: none;
  color: #1a1a1a;
}

.catalog-content {
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem) 0;
}

.catalog-content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.recently-ordered-list {
  list-style: none;
}

.recently-ordered-list li {
  margin-bottom: var(--spacing-2);
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--color-gray-700);
}

.checkbox-label input {
  margin-top: 0.19rem;
  accent-color: var(--color-primary);
}

.view-all-link {
  display: inline-block;
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-3);
}

.compare-empty {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* === PDL Header — Figma "Header" (breadcrumbs + product header) === */
.pdl-header {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0.25rem;
  position: relative;
}

/* PO-BATCH-2 item 9: a breadcrumb that carries only HOME is noise — hide
   the row unless there's a real trail (every emitter's row contains only
   the <nav>, so a single-crumb nav means a Home-only row). */
.pdl-breadcrumb-row:has(.breadcrumb > :only-child) {
  display: none;
}

.pdl-breadcrumb-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: stretch;
  gap: 0.5625rem;
  /* PO-BATCH-2 item 21: same fluid page gutter as .product-header /
     .products-list-header (was a fixed 2.5rem — 2-3px off at mid widths). */
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
}

/* Scroll chevrons for the category chip strip — rendered by CategoryNavigation
   and pinned to the top-right corner of .pdl-header so they sit on the same
   visual line as the breadcrumb row. */
.category-nav-chevrons {
  position: absolute;
  top: 0;
  right: clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.5rem;
}

.category-nav-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #262626;
}

.category-nav-chevron:hover svg path {
  stroke: #641e8c;
}

/* Single inline row — "HOME / PRODUCTS / …". The old 1rem gap carried the
   visual rhythm because the separator rule below only matched `a + span`
   pairs and the crumbs are all <a> elements, so no separator ever rendered.
   Now every adjacent pair gets one, and the gap tightens accordingly. */
.pdl-breadcrumb-row .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  background: none;
  line-height: 1.2;
}

.pdl-breadcrumb-row .breadcrumb > * + *::before {
  content: "/";
  color: #bababa;
  margin-right: 0.5rem;
}

.pdl-breadcrumb-row .breadcrumb a,
.pdl-breadcrumb-row .breadcrumb span {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #bababa;
  text-decoration: none;
}

/* Teams thread (2026-08-24) — Marcus: "not sure the users will figure it
   out" that a non-current crumb is clickable. The trail's own data already
   carries the full parent chain (backend buildBreadcrumbs walks to root),
   so the gap was affordance, not plumbing: every non-current crumb was
   plain #bababa text with no hover feedback, indistinguishable from the
   separators. A hover state is the smallest fix that doesn't touch the
   already-correct current-crumb/rest contrast. */
.pdl-breadcrumb-row .breadcrumb a:hover {
  color: #242424;
  text-decoration: underline;
}

.pdl-breadcrumb-row .breadcrumb > :last-child {
  color: #242424;
}

/* === Category Navigation — Figma "Category Navigation" === */
.category-nav-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: stretch;
  gap: 0.5625rem;
}

.category-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  gap: 0.75rem;
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
}

.category-nav-description {
  width: 37.6875rem;
  flex-shrink: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.22;
  color: #6b6b6b;
}

.category-nav-tiles-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
  max-width: 59.1875rem;
  flex: 1 1 0;
  min-width: 0;
}

.category-nav-scroll {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.category-nav-scroll::-webkit-scrollbar {
  display: none;
}

.category-tile {
  /* L8 parity (Figma 18900-32011): label + count share ONE ROW — the
     count is an inline badge after the label, not a stacked second line.
     Shared by the PLP strip and the /services header tiles. */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.category-tile--selected {
  background-color: #242424;
  border-color: #6b6b6b;
  color: #f2f2f2;
}

.category-tile--default {
  background-color: #ffffff;
  border-color: #cfcfcf;
  color: #262626;
}

.category-tile--default:hover {
  border-color: #c9c9c9;
}

.category-tile--selected .tile-label,
.category-tile--selected .tile-count {
  color: #f2f2f2;
}

.catalog-page .tile-label,
.catalog-page .tile-count {
  font-size: 0.875rem;
  line-height: 1.35;
}

.category-tile--default .tile-label,
.category-tile--default .tile-count {
  color: #262626;
}

.tile-label {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: #262626;
}

.tile-count {
  /* Inline count badge (Figma 18900-32011). Colors per selected/default
     variant below. */
  font-weight: 700;
}
.category-nav-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.category-nav-fade.visible {
  opacity: 1;
}

.category-nav-fade--left {
  left: 0;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.category-nav-fade--right {
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

/* === Products List Header — Figma "Header" (results + sort + filters) === */
.products-list-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  gap: 1.5rem;
  padding: 2.5rem clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem) 0;
}

.products-list-header svg {
  height: 1.25rem;
  width: auto;
  display: block;
}

.plp-filter__form svg {
  width: 1.25rem;
}

.plp-filter__form svg path {
  fill: #3d3d3d;
}

.plp-filter__form:focus-within svg path {
  fill: #bababa;
}

.products-list-header__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

/* Sort / result-filter / view-toggle — pushed to the far right via
   margin-left: auto, grouped with their own tighter 0.5rem gap.
   On mobile: sort gets its own row; plp-filter + view-toggle share the row below. */
.products-list-header__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
/* A fixed width: the base `min(21rem, 100%)` resolves 100% against this
   shrink-to-fit cluster, so the dropdown filled it and pushed the view
   toggle onto a second row on sparse PLPs. */
.products-list-header__right .sort-dropdown {
  width: 21rem;
  max-width: 100%;
}
/* No direction toggle on this page → the divider before it is an orphan. */
.sort-dropdown-header > .view-toggle__divider:last-child {
  display: none;
}

.catalog-content-header .sort-dropdown-controls svg {
  height: 1rem;
}

.results-count {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.57;
  color: #6b6b6b;
}

.sort-dropdown {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
  width: min(21rem, 100%);
  flex-shrink: 0;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  cursor: pointer;
}

.sort-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  height: 1.25rem;
}

.sort-dropdown-label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.57;
  color: #262626;
  white-space: nowrap;
}

.sort-dropdown-value {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #3d3d3d;
}

/* Right cluster: chevron | divider | direction-toggle (Figma order) */
.sort-dropdown-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  flex-shrink: 0;
}

.sort-dropdown-chevron {
  display: flex;
  align-items: center;
  /* Closed = pointing right (the SVG's native orientation, so no rotation
     needed); .open rotates it 90deg to point down (see .sort-dropdown.open
     below). */
  transform: rotate(0deg);
  transition: transform 0.2s;
  margin-left: 0.5rem;
}

.sort-direction-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
}

.sort-direction-toggle:hover {
  background: #f2f2f2;
}

.sort-direction-toggle svg {
  transition: transform 0.2s;
}

.sort-direction-toggle--desc svg {
  transform: rotate(180deg);
}

.sort-dropdown.open .sort-dropdown-chevron {
  transform: rotate(90deg);
}

.sort-dropdown-panel {
  position: absolute;
  top: 3.25rem;
  left: 0;
  width: 21rem;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  box-shadow: 0px 0px 2.5rem 0px rgba(0, 0, 0, 0.06);
  z-index: 10;
  padding: 0.5625rem 1rem 0.6875rem;
  display: none;
}

.sort-dropdown.open .sort-dropdown-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sort-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.57;
  color: #3d3d3d;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
}

.sort-option:hover {
  color: #242424;
}

.sort-option-radio {
  width: 1rem;
  height: 1rem;
  border: 1px solid #bababa;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sort-option.selected .sort-option-radio {
  border-color: #bababa;
}

.sort-option.selected .sort-option-radio::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: #393939;
  border-radius: 50%;
}

.filters-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.57;
  color: #242424;
}

.filters-btn.active {
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0) inset,
    0 0.3125rem 0.75rem 0 rgba(0, 0, 0, 0.08),
    0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06);
}

.filters-btn:hover {
  border-color: #8f8f8f;
}

/* Product Header — Figma "Product Header" */
.product-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
}

/* .product-header-back removed (SV2, 2026-07-31): the "<" chevron beside
   page H1s was dropped on /services, /catalog and /spare-parts — the
   breadcrumb + header nav cover it. No emitters remain. */

.product-header-title {
  /* 07-31 typescale: floor 1.75→1.5rem, slope 3.5→3.1vw (PO: h1 too loud at
     663 effective). Cap unchanged — ≥~1280 the 2.75rem cap wins, desktop
     pixel-identical bar the root-knob retune. The short-viewport override
     (@media max-height: 35rem, fold pass) still wins at short heights.
     08-07: base bumped 44px→46px, cap + slope scaled by 46/44 (floor kept). */
  font-size: clamp(1.5rem, calc(3.24 * var(--vwx)), 2.875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.00625rem;
  text-transform: uppercase;
  color: #242424;
  margin: 0;
}

/* ── PLP result filter (was the on-page "search" bar, Figma 18786-121302) ──
   Max Lutterbeck, GT Shop Improvements: a full-width field under the PRODUCTS
   title read as a SECOND search box next to the header's global catalog
   search. It isn't one — it keeps the current category/facets and only adds
   ?q=, i.e. it narrows what is already on screen. So it moved into
   .products-list-header next to "Sorted by", and it is labelled "Filter".

   Collapsed it is a square icon button sized like .view-toggle__btn;
   expanded it is a "Filter" + field control that borrows .sort-dropdown's
   shell (same 2.75rem height, 0.75rem radius, hairline border, soft shadow)
   so the pair reads as one cluster rather than a transplant. Both states are
   flex items of the row, so they wrap with everything else and never force a
   horizontal scroll. ── */
.plp-filter {
  display: flex;
  align-items: center;
  min-width: 0;
  /* Prefers ~18rem when open, gives width back before the row wraps. The
     collapsed button is intrinsically sized, so this only bites when open. */
  flex: 0 1 auto;
}
.plp-filter--open {
  flex: 0 1 18rem;
}
.plp-filter__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  box-shadow: 0px 0px 2.5rem 0px rgba(0, 0, 0, 0.06);
  color: #242424;
  cursor: pointer;
}
.plp-filter__toggle:hover {
  border-color: #6b6b6b;
}
/* Collapsed WITH a query applied: the grid is narrowed, so the trigger has
   to say so. Reuses the row's existing "on" treatment (.view-toggle__btn
   .active) rather than inventing a second selected colour. */
.plp-filter__toggle--active {
  background: #f3e9fa;
  border-color: #e3d3ef;
  color: #641e8c;
}
.plp-filter__form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  transition: border-color 0.15s;
}
.plp-filter__form:focus-within {
  border-color: #6b6b6b;
}
/* Type matches .sort-dropdown-label / -value exactly — that is what makes
   the two controls read as a pair. */
.plp-filter__label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.57;
  color: #242424;
  white-space: nowrap;
  cursor: text;
}
.plp-filter__divider {
  width: 1px;
  height: 1.25rem;
  background: #e0e0e0;
  flex-shrink: 0;
}
.plp-filter__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.57;
  color: #242424;
  padding: 0;
}
.plp-filter__input::placeholder {
  line-height: 1.57;
  font-size: 0.875rem;
  color: #bababa;
}
.plp-filter__clear {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: #e8e8e8;
  border-radius: 99px;
  cursor: pointer;
  color: #3d3d3d;
  padding: 0;
  transition: background 0.15s;
}
.plp-filter__clear svg {
  height: 0.875rem;
}
.plp-filter__clear:hover {
  background: #d1d1d1;
}
.plp-filter__form:hover .plp-filter__clear,
.plp-filter__form:focus-within .plp-filter__clear {
  display: flex;
}

/* ── Rail placement (PO, 2026-08-05: "maybe have the text field under filters
   sidebar? On the left side it already say filters") ──────────────────────
   The field's home is now the FILTERS rail, directly under the heading and
   above the first facet group; .products-list-header keeps the collapsible
   control above only as the fallback for when the rail is not on screen.

   In the rail the control is a full-width block, permanently open — a column
   has the width, so the collapse that bought room in the results row buys
   nothing here. No visible "Filter" label either: the heading immediately
   above is the label (the accessible name lives on the input). The magnifier
   becomes an inert leading adornment rather than the affordance.

   Sized off the facet chips beside it, not off .sort-dropdown: the field's
   neighbours are now rail controls, so it borrows the rail's quieter
   hairline and radius instead of the results row's shadowed shell. */
.plp-filter--rail {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
.plp-filter--rail .plp-filter__form:focus-within {
  border-color: #242424;
}
.plp-filter__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #6b6b6b;
}
/* Applied query → the field carries the visible value, so it needs no extra
   "active" tint the way the collapsed trigger does; the clear × appearing IS
   the applied state. Only the border firms up so a narrowed grid is never
   attributable to an invisible control. */
.plp-filter--rail .plp-filter__form:has(.plp-filter__clear) {
  border-color: #6b6b6b;
}

.product-list {
  display: grid;
  /* Container-adaptive packing, B2B-density anchor (ui-release L2 "monster
     card"): a 12rem min track yields ≥2 cols in a rail'd 1024 viewport at
     a 20px root font, 3 at 1440/20px, 5-6 full-width 1920/16px — all by
     min-width math, no viewport media queries, so it's correct wherever the
     grid is embedded (catalog, my-catalog, dashboard). min() guards tiny
     screens from overflow.
     2026-08-01 (PO, Ole's 853px screen): 12rem is NOT a real floor — the
     fluid root clamp falls to ~11.7px at 853, so 12rem resolved to 140px
     and the grid packed FOUR 149px columns beside the 171px rail. The
     card's price/lead-time pair wrapped to two lines because the CARD was
     too narrow, not the text too big. Anchor the floor to the measured
     viewport (--vwx) as well, so it stops shrinking exactly where space is
     tightest — but CAPPED at 15rem so it PLATEAUS. Without that cap the
     floor kept growing with the screen (21 * --vwx = 538px at 2560px), so a
     wide external monitor rendered TWO cards per row instead of eight
     (Userback 8156967, 2026-08-05: "instead 2 product per row it should be
     4 or more as it was yesterday"). A minimum must never scale up with
     available space.
     Measured 2026-08-05 in Chromium against the real PLP chain
     (.catalog-page--dyn > .catalog-layout > .filter-panel +
     .catalog-content, i.e. WITH the filters rail, which is what the
     reporters had open) — the numbers that matter are the ones the page
     actually renders, not the ones a full-viewport grid would:
       853  -> 3 cols @201px   (rail 171px, grid 615px)
       1280 -> 4 cols @227px   (rail 256px, grid 929px)
       1920 -> 6 cols @232px   (grid 1429px)
       2560 -> 6 cols @232px   ) --container-max is 120rem and the root font
       3440 -> 6 cols @232px   ) tops out at 15.04px, so the page plateaus
                                 at 1805px — the grid stops widening here by
                                 design, it does not keep adding columns.
     Same harness on the UNCAPPED rule: 1920 -> 3, 2560 -> 2 @710.6px,
     3440 -> 1 @1428.8px. Gated by
     backend/src/lib/storefront-css/__tests__/plp-grid-floor.test.ts, which
     measures both expressions in one run so a green result means the
     harness can still see the defect. */
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(max(12rem, min(calc(21 * var(--vwx)), 15rem)), 100%), 1fr)
  );
  gap: 0.75rem;
  /* SHOP-502 (Userback 8076059): fab-yield.js yields (fades + disables
     pointer-events on) the fixed bottom-right feedback launcher whenever
     its footprint overlaps a product-card link — which, on a dense grid,
     is every scroll position until the last row clears the viewport
     corner. The <=768px breakpoint below already gave the grid a tail for
     this same reason; desktop/tablet-landscape had none, so the launcher
     stayed hidden for the whole scroll range there. Base tail here closes
     that gap for all widths; the media-query rule below stays as the
     phone/tablet override. */
  padding-bottom: 5rem;
}

/* SHOP-174/SHOP-298 (was a 3-tier breakpoint staircase): one container-
   adaptive auto-fill rule covers every surface — the 15rem min track lands
   3 cols in a sidebar'd 1280 laptop, 4 on tablet landscape, 5-6 full-width
   desktop, purely by available-width math. No width media queries. */

.product-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  /* PO-BATCH-2 item 8: positioning context for the hover-reveal CTA
     overlay anchored to the card's bottom-right corner. */
  position: relative;
  border-radius: 1rem;
  border: 1px solid #e3e3e3;
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
  transition:
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card-link:hover {
  border-color: #d4d4d4;
  transform: translateY(-0.25rem);
  box-shadow:
    0 0.875rem 1.75rem rgba(0, 0, 0, 0.1),
    0 0.375rem 0.75rem rgba(0, 0, 0, 0.09);
}

.product-image-link,
.product-text-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-text-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Shrinkable under the card's 26rem cap — without this the flex item's
     content floor pushes the footer out of the clipped card instead. */
  min-height: 0;
}

.product-image-link:hover,
.product-text-link:hover {
  text-decoration: none;
}

.product-card-link a {
  text-decoration: none;
}

.product-card-link a:hover {
  text-decoration: none;
}

/* Image wrapper — aspect-capped AND height-capped (ui-release L2): on a
   wide track the 4/3 ratio alone let the image well balloon to ~360px,
   driving the 86%-of-viewport monster card. The rem cap keeps the well
   ≤9.5rem tall at any card width; object-fit: contain letterboxes the
   photo inside the grey well, so nothing crops. */
.product-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: min(18.5rem, 100%);
  overflow: hidden;
  position: relative;
  background: #ffffff;
  border-radius: 1rem 1rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Half-image click zones for prev/next navigation */
.image-nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.33%;
  cursor: pointer;
  z-index: 1;
}

.image-nav-prev {
  left: 0;
}

.image-nav-next {
  right: 0;
}

/* On touch devices these zones cover the left/right two-thirds of the card
 * image with a click handler that only pages the gallery (stopPropagation +
 * preventDefault — see product_card.dart) and never navigates. A shopper's
 * first tap on most of the image just cycles the photo; only a second tap
 * elsewhere (the untouched middle third, or the text below) reaches the
 * real PDP link — the "have to tap twice" bug. Desktop already has a
 * dedicated hover-revealed prev/next control (.gallery-nav-arrow below the
 * image) for the same action, so removing these on touch loses no
 * functionality, just the redundant on-image hit zones.
 */
@media (hover: none) {
  .image-nav-zone {
    display: none;
  }
}

.product-image-wrapper .product-img {
  object-fit: contain;
  max-width: unset;
  height: 100%;
}
/* PLP/list card images blend into the card's grey wrapper via darken —
 * knocks out the white/light backgrounds product shots ship with so every
 * card reads as one consistent framed silhouette. Scoped to .product-card-link
 * so the PDP hero (.pdp-hero .product-img) is untouched. The <img> stays the
 * live element, so the gallery hover-image + prev/next paging + dots all keep
 * working — only the blend changes, not the markup. */
.product-card-link .product-image-wrapper .product-img {
  mix-blend-mode: darken;
}
/* Deeper, smoother image zoom on card hover (bj-gear feel). Bound to
 * the card hover, not just the image wrapper, so the whole card
 * animates together.
 * Known minor limitation: .product-img also carries an inline
 * view-transition-name (product_card.dart) so it can morph into the PDP
 * hero on click. The browser snapshots the element's rendered state right
 * before navigation, so a click fired mid-hover (mouse still on the card)
 * captures the 1.06x-scaled frame, producing a small visible settle when
 * the transition resolves to the PDP's unscaled hero. Not fixable in pure
 * CSS — would need a `pagereveal`/pointerdown JS hook to zero the hover
 * transform before capture. Left as-is: the transition is still a strict
 * visual improvement over today's hard flash-to-white, and the mismatch
 * is subtle (same image, same position, just briefly non-1:1 scale). */

.product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b6b6b;
}

/* SHOP-950 — a second, older `.gallery-thumbnail` block used to sit here
   (3.5rem tiles, #f5f5f5, plus a `.gallery-thumbnail-img` partner) left over
   from a previous gallery. Reinstating the class name for the new overlaid
   strip made it live again 900 lines above the real rules: mine won on every
   property it declared, but its `:hover { border-color: #d0d0d0 }` still
   leaked, because the new hover only sets opacity. Deleted rather than
   overridden — `.gallery-thumbnail-img` has no Dart reference at all.
   `.gallery-indicator-bar` below is still used and stays. */

/* Gallery indicator bar */
.gallery-indicator-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  padding: 0.25rem 1rem;
  min-height: calc(0.5rem + 0.17rem); /* padding + dash border-top thickness */
}

/* PO-BATCH-2 item 6: no carousel dot strip on PLP cards (grid AND list —
   the list rule below predates this). Image paging stays reachable via the
   in-image half-zones + hover arrows' click targets on the PDP; the PDP
   gallery (.product-gallery-container) keeps its own indicator bar. */
.product-card-link .gallery-indicator-bar {
  display: none;
}

/* Navigation arrows — hidden until card is hovered.
   height matches the dot thickness so the flex row stays at 34.75px;
   the SVG overflows visually (overflow: visible is default). */
.gallery-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 0.17rem;
  flex-shrink: 0;
  cursor: pointer;
  color: #c2c2c2;
  opacity: 0;
  overflow: visible;
  transition:
    opacity 0.2s ease,
    color 0.15s ease;
  user-select: none;
}

.gallery-nav-prev {
  margin-left: auto;
}

.product-card-link:hover .gallery-nav-arrow {
  opacity: 1;
}

.gallery-nav-arrow:hover {
  color: #242424;
}

/* Indicator dots scroll wrapper — expands to fill bar, scrollable, scrollbar hidden */
.gallery-indicators-scroll {
  display: flex;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  position: relative;
}

.gallery-indicators-scroll::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* Fade mask on edges when there are more dots than the window shows */
.gallery-indicators-scroll.has-overflow {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 0.875rem,
    black calc(100% - 0.875rem),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 0.875rem,
    black calc(100% - 0.875rem),
    transparent
  );
}

.gallery-indicators {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gallery-dot {
  display: block;
  width: 0.86rem;
  height: 0;
  border-top: 2.75px solid #c2c2c2;
  cursor: pointer;
  transition:
    width 0.2s ease,
    border-top-color 0.15s ease;
  flex-shrink: 0;
}

.gallery-dot.active {
  border-top-color: #242424;
}

/* Edge dots are shorter and lighter to hint at more items beyond */
.gallery-dot.edge {
  width: 0.5rem;
  border-top-color: #e0e0e0;
}

/* Text wrapper */
.product-text-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Compact B2B rhythm (ui-release L2 de-bulk) — sections stay distinct
     without dead space; price alignment across a row holds via the text
     link's flex:1 pushing the footer bar to the card's bottom edge. */
  gap: 1rem;
  padding: 0 1rem 0.5rem;
}

/* Category + Title + Specs group */
.product-type-title {
  display: flex;
  flex-direction: column;
}

.product-category-label {
  /* 07-31 typescale: 0.6875→0.69rem — readability floor (nothing below
     0.69rem effective for body/meta text; ≈11px visual at 150% zoom). */
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.57;
  color: #737373;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-category-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* CRITIQUE my-catalog round 1 (external review): with wrap, the In-stock
     badge dropped onto its own line whenever the eyebrow ran long, pushing
     that card's title one line lower than its row neighbours (baseline
     jumping across the grid). One line is the promise: the eyebrow
     truncates (it already carries ellipsis), badges stay inline. */
  flex-wrap: nowrap;
  min-width: 0;
  min-height: 1.125rem;
}
.product-category-row > .product-category-label {
  flex: 0 1 auto;
  min-width: 0;
}
.product-category-row > .product-stock-badge,
/* On product list cards the badge is absolute-positioned over the image.
   On the PDP eyebrow row it is inline — context drives the positioning. */
.product-end-customer-badge {
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.125rem;
  color: #7f33ab;
  background: #eaddff;
  white-space: nowrap;
}

.product-card-link .product-end-customer-badge,
.product-list--list .product-price-block .product-end-customer-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* A product can carry BOTH pills (customer alias + end customer). In the
   absolute-positioned card/list contexts they would otherwise print on top
   of each other at top-right: the alias renders first in the DOM, so push
   the FOLLOWING end-customer pill one line down. Inline contexts (the PDP
   eyebrow row) lay them out side by side and need nothing. */
.product-card-link .product-customer-alias-badge ~ .product-end-customer-badge,
.product-list--list
  .product-price-block
  .product-customer-alias-badge
  ~ .product-end-customer-badge {
  top: 2.375rem; /* 1rem offset + 1.125rem pill line + 0.25rem gap */
}

.product-offer-number,
.product-offer-number__label {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: #737373;
}

.product-offer-number__label {
  font-family: inherit;
  font-weight: 700;
  margin-right: 0.125rem;
}

/* Coarse SAP availability badge. Shares the pill geometry of the
   end-customer badge; green = in stock, amber = made to order. */
.product-stock-badge {
  /* 07-31 typescale: 0.6875→0.69rem — readability floor. */
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.19rem 0.5rem;
  border-radius: 0.625rem;
  text-transform: none;
  letter-spacing: 0.01rem;
  white-space: nowrap;
}

.product-stock-badge--in {
  color: #1c6b3c;
  background: #e7f5ec;
  border: 1px solid #b6e0c4;
}

.product-stock-badge--mto {
  color: #8a5a00;
  background: #fdf3e2;
  border: 1px solid #f0d8a8;
}

.product-title-subtitle {
  display: flex;
  flex-direction: column;
}

.product-card-link .product-title {
  /* 07-31 typescale: was fixed 1.0625rem — at 663 effective the card title
     ran 1.21× body vs the Figma small-PLP frame's ~1.06×. Cap reached by
     ~1280 (desktop unchanged); small end eases toward 0.9375rem (~1.13×
     body). */
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.375rem;
  color: #262626;
  margin: 0;
  /* Let long product identifiers wrap to two lines instead of a single
     ellipsis-truncated line (Userback 7560655, "why is Product truncated?").
     The arrester SKUs are like "3EL1 009-1SC21-4DA5_SECode_27149299_1900":
     after the first space the rest is one long token, and underscores are
     NOT break opportunities — so overflow-wrap:anywhere is required to let
     the "_SECode_…" suffix break across lines rather than clip mid-token. */
  display: -webkit-box;
  /* 3 lines, not 2 — the full SKU IS the product name for frame customers
     (Brazil/ZA/Helmer view-as, Tony 07-31: "product name is so short and
     cut"). The shorter image well pays for the extra line.
     Restored: this had been set to 1 while the comment above still said 3,
     which put every multi-word title back on one ellipsised line — "3AV1
     Blue Dead Tank Circuit…" loses the half that says what it is. A clamp
     is a MAXIMUM, so short titles are unaffected and only the long ones
     spend the extra lines. */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.product-subtitles {
  overflow: hidden;
}

.product-spec-value {
  font-size: 0.75rem; /* small + scannable (was 20px — far too large, dominated the card) */
  font-weight: 700;
  line-height: 1.5;
  color: #3d3d3d;
  background: #f2f2f2;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  margin-right: 0.25rem;
}

/* "Item NNNN  Offer NNNNNNNN" meta line — bold labels, roman values,
   directly under the title per the frame. */
.product-item-offer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #737373;
}
.product-item-offer__pair {
  white-space: nowrap;
}
.product-item-offer__label {
  font-weight: 700;
  margin-right: 0.125rem;
}

.product-tag-pill {
  display: inline-block;
  padding: 2px 0.5rem;
  background: #f0f0f0;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #555;
  line-height: 1.4;
}

.product-subtitle-mlfb {
  font-size: 0.6875rem;
  font-weight: 400;
  color: #999;
  font-family: monospace;
  letter-spacing: 0.02em;
}

.product-end-customer-pill {
  display: inline-block;
  padding: 2px 0.5rem;
  background: #e0f2fe;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0369a1;
  line-height: 1.4;
}

/* Info text (description) */
.product-info-text {
  padding-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: #737373;
  margin: 0;
  display: -webkit-box;
  /* The title buys its extra lines from here, not from the card's height:
     the description drops to one line so a long title costs the card one
     line net rather than two. The description is the right place to take it
     from — it is a supporting sentence, and its first line already carries
     the gist ("Technical details 3AV1 Blue DT Type 72.5 kV / 40 kA…"),
     whereas a truncated TITLE loses the words that identify the product.
     Deliberately not a shared fixed-height budget between the two: the
     Item/Offer meta line (.product-item-offer) sits between them and is
     commercially load-bearing for frame customers, so it must never be the
     thing a long title squeezes out. */
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer: lead time + price + actions — always pinned to bottom */
.product-card-footer {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: auto;
}
/* Footer BAR (product_card.dart) — price/lead-time + CTA share ONE row at
   the card's bottom edge (L3/N4: no reserved dead row under the footer).
   Direct child of the card article — NOT inside the text <a> — because the
   basket button is interactive and anchors can't nest interactives. Legacy
   embeds (transformer type card) keep the plain column footer above.
   flex-wrap is the safety valve at min-track card widths: the CTA drops
   under the price instead of clipping the currency. */
.product-card-footer--bar {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  /* PO-BATCH-2 item 8: the CTA left this row for the hover overlay — the
     row is now just the lead/price link, no reserved action whitespace. */
  padding: 0 1rem 0.625rem;
}
.product-footer-link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
}

/* === PLP action button === */
/* PO-BATCH-2 item 8 (overrides the earlier always-visible-footer doctrine
   for PLP cards): the CTA is a fade-in overlay anchored to the card's
   bottom-right corner — out of document flow, so the footer row carries
   only the lead/price link with no reserved whitespace. Revealed on card
   hover AND :focus-within (keyboard reaches the same action), and ALWAYS
   visible on coarse pointers (hover is an interaction query, not a width
   query — no hover state exists on touch). All three CTA modes (configure
   pill / request pill / basket square) ride the same wrapper. */
.product-card-action {
  display: flex;
  padding: 0;
  position: absolute;
  right: 1rem;
  bottom: 0.625rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(0.25rem);
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.product-list--list .product-card-action {
  bottom: unset;
}

.product-card-link:hover .product-card-action,
.product-card-link:focus-within .product-card-action {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* `--in-cart` used to sit in the selector above, pinning the basket to
   opacity:1 forever on any product already in the cart. In tiles view that
   reads as a badge; in LIST view it puts a permanent dark button on every
   such row — the reporter's cart held 4 items and 4 rows carried one, which
   is what "shopping symbol should show up only on hover. Similar to the
   feature in tiles view" describes (Userback 8233849). Reproduced on dev:
   1 of 19 rows visible, and the one was exactly .product-card-action--in-cart.

   The in-cart COUNT BADGE still needs to be seen — that is the part carrying
   information — so it keeps its own visibility below rather than forcing the
   whole control open. */
.product-card-action--in-cart {
  pointer-events: auto;
}
@media (hover: none) {
  .product-card-action {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
.product-card-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  white-space: nowrap;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  user-select: none;
  border: none;
}
.product-card-action-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
/* Add to cart / Added to cart — Figma "CTA Types" spec: a COMPACT
   SQUARE icon-only button (cart glyph only), not a wide text pill.
   flex: 0 (not 1) so it doesn't stretch to fill the action row, and a
   fixed square footprint sized to match the pill's height. Kept as a
   moderate rounded-square (not a full pill/circle) per the reference. */
.product-card-action-btn--icon-only {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  padding: 0;
  border-radius: 0.625rem;
}
/* Basket action row: don't stretch the button full-width like
   Configure/Request Quote do — align it to the right. */
.product-card-action--basket,
.product-card-action--basket-error {
  justify-content: flex-end;
}
/* Configure + Basket — dark */
.product-card-action--configure .product-card-action-btn,
.product-card-action--basket .product-card-action-btn {
  background: #242424;
  color: #fff;
}
.product-card-action--configure .product-card-action-btn:hover,
.product-card-action--basket .product-card-action-btn:hover {
  background: #3a3a3a;
}
/* Request Quote — light */
.product-card-action--request .product-card-action-btn {
  background: #fff;
  border: 1px solid #e2e2e2;
  color: #4a4a4a;
}
.product-card-action--request .product-card-action-btn:hover {
  background: #fafafa;
  border-color: #cfcfcf;
}
/* Error state — red tint, auto-clears after 2.5s */
.product-card-action--basket-error .product-card-action-btn {
  background: #c0392b;
  color: #fff;
  border: none;
}
.product-card-action--basket-error .product-card-action-btn:hover {
  background: #a93226;
}
/* "Added to Cart" count badge — small white circle overlapping the
   icon-only button's top-right corner (Figma "CTA Types" spec), not an
   inline pill inside the button. */
.product-card-action-count {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #fff;
  color: #242424;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #242424;
}

/* ── In-flight add-to-cart (SHOP-686) ────────────────────────────────────
   This state used to be spelled `.loading`, which is a BARE class also
   defined twice for unrelated things further down this file (a page-level
   loading block, and the settings-panel's "Loading" text). Both matched the
   button: with the global `box-sizing: border-box`, `padding: .75rem 2rem`
   forced the 2.25rem square out to ~4rem and `color: #9ca3af` washed the
   glyph grey — so every add-to-cart visibly jumped and faded for the
   duration of the POST, which is the "needs better animation" report. Named
   `is-adding` now so no global can reach it, and the geometry is pinned
   here rather than merely inherited. */
.product-card-action-btn.is-adding {
  width: 2.25rem;
  padding: 0;
  color: #fff;
  cursor: wait;
  pointer-events: none;
}
/* Hide the cart glyph (and any count badge) without collapsing the box, so
   the spinner has the square to itself and nothing reflows. */
.product-card-action-btn.is-adding > svg,
.product-card-action-btn.is-adding .product-card-action-count {
  opacity: 0;
}
.product-card-action-btn.is-adding::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: product-card-adding-spin 0.6s linear infinite;
}
@keyframes product-card-adding-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Landed: pop the count badge once. The toast is the primary confirmation,
   but it lives top-right and the pointer is on the card — this makes the
   click read as having registered without moving the eye. */
.product-card-action.is-just-added .product-card-action-count {
  animation: product-card-count-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes product-card-count-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.45);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the state legible, drop the motion: a static ring reads as busy
     well enough, and the badge just appears at its final size. */
  .product-card-action-btn.is-adding::after {
    animation: none;
  }
  .product-card-action.is-just-added .product-card-action-count {
    animation: none;
  }
}

.product-lead-price {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 1rem;
}

.product-lead-time-block,
.product-price-block {
  display: flex;
  flex-direction: column;
}

.lead-price-label {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: #3d3d3d;
}

.lead-price-value {
  display: flex;
  font-size: 1.125rem;
  align-items: center;
  gap: 0.375rem;
}

.lead-price-bold {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.375rem;
  color: #262626;
}

.lead-price-on-request {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.22;
  color: #242424;
}

.lead-price-unit {
  font-weight: 400;
  color: #3d3d3d;
}

.lead-price-divider {
  width: 1px;
  height: 1.75rem;
  background: #f0f0f0;
  flex-shrink: 0;
}

/* Product actions in card */
.product-actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0 1.5rem 1.25rem;
}

/* === Pagination === */
/* === Load More — Figma pagination === */
.load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 0;
}

.load-more-progress {
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b6b6b;
}

.load-more-bar {
  width: 12.5rem;
  height: 0.25rem;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.load-more-bar-fill {
  height: 100%;
  background: #242424;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: #242424;
  border: 1px solid #6b6b6b;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.load-more-btn:hover {
  background: #3a3a3a;
}

.load-more-btn.loading {
  opacity: 0.6;
  cursor: wait;
}

/* === Product Detail Page === */
.product-page {
  background: var(--color-white);
  max-width: var(--container-max);
  margin: 0 auto;
}

.product-detail {
  /* Fluid two-column row: gallery 2:1 info via flex grow ratios; the info
     column wraps under the gallery when the row runs out of room. Page
     scroll is king — no height lock, no overflow:hidden. */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-top: 0.5rem;
  flex: 1;
}

/* UX7 — on an arrester PDP the configurator IS the task, so give the right
   column more room (3fr/2fr ≈ 60/40 vs the default 2fr/1fr ≈ 67/33). Stops the
   System-Voltage pills wrapping to 3 cramped rows. Gallery still leads. */
.product-detail--arrester .product-gallery-container {
  flex-grow: 3;
}
.product-detail--arrester .product-info-container {
  flex-grow: 2;
  flex-basis: 24rem;
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* D5 (ui-release) — the gallery is keyboard-focusable (tabindex=0, ←/→
   browse). Show focus only for keyboard users; a mouse click on the image
   opens the lightbox and must not paint a ring. */
.product-gallery:focus {
  outline: none;
}
.product-gallery:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: clamp(1rem, calc(1.5 * var(--vwx)), 1.5rem);
}

/* Rounded image wrapper — holds the image plus the overlaid nav/thumbnails */
.gallery-image-wrapper {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: clamp(1rem, calc(1.5 * var(--vwx)), 1.5rem);
  position: relative;
  /* Cap the hero image so the product name + info below it stay above the
     fold without scrolling (Userback 7869091). The cap is viewport-relative
     — a fixed 700px still fills a short laptop viewport. min(700px, 60vh)
     leaves ~40vh for the title on any screen. The min-height floor is the
     load-bearing line: a 400px floor would re-fill a ~550px viewport and
     defeat the cap, so it drops to 280px on short viewports. */
  height: min(43.75rem, 55vh);
  /* SHOP-950 — was 112.5%. That 12.5% overhang existed ONLY to let the 27%
     peek slot hang outside the gallery column, and it is what made the peek
     image paint OVER the INFORMATION copy in the info column (Werner's
     screenshot). With the peek gone the wrapper must stay inside its column;
     the phone override at the `PHONE-4` comment below is now a no-op that
     matches this, and the horizontal page scroll it fought is gone too. */
  width: 100%;
}

/* Responsive hero floor: on tall viewports there's plenty of room below the
   fold, so give the image a more substantial 480px floor (Tony's ask — the
   280px floor felt too short on desktop). Gated on min viewport height so it
   NEVER re-fills a short laptop screen and re-triggers the below-fold-title
   regression (Userback 7869091) — short screens keep the 280px floor above. */
@media (min-height: 880px) {
  .gallery-image-wrapper {
    min-height: 30rem;
  }
}

/* Main slot — the whole wrapper (SHOP-950 removed the 73/27 peek split) */
.gallery-main-slot {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  background: #ffffff;
}

/* Main product image — absolutely fills slot, object-fit centers + scales */
.gallery-main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  animation: gallery-img-in 0.35s ease;
}

/* ── SHOP-950: overlaid nav + thumbnails ──────────────────────────────────
   Replaces .gallery-peek-slot / .gallery-peek-img / .gallery-prev-zone (the
   two invisible edge click-zones) and the whole .gallery-bottom-nav bar.

   Class names are deliberately .gallery-nav-btn / .gallery-thumbnail: the
   Noedra dark theme already carries rules for exactly those selectors
   (noedra.css "gallery" block), left behind by an earlier gallery that had
   them. Matching the names lights the dark theme up for free instead of
   leaving that CSS dead. */

/* Prev/next, vertically centred on the image edges. Hidden until the image is
   hovered so they never sit on top of the artwork while you read it.

   Styled to match .pdp-selected-variant-chevron (search it): a BARE thin
   chevron, #969696 → #242424 on hover, no circle/border/shadow. An opaque
   button chrome here competed with the product for attention. */
.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: #969696;
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  transition:
    opacity 0.18s ease,
    color 0.18s ease;
}

.gallery-nav-btn--prev {
  left: 0.25rem;
}

.gallery-nav-btn--next {
  right: 0.25rem;
}

/* Reveal on hover of the image, and whenever a button itself takes keyboard
   focus (so tabbing to it doesn't operate an invisible control). */
.gallery-image-wrapper:hover .gallery-nav-btn,
.gallery-nav-btn:focus-visible {
  opacity: 1;
}

.gallery-nav-btn:hover {
  color: #242424;
}

.gallery-nav-btn:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

/* Keep a disabled arrow invisible even while the image is hovered — an inert
   greyed chevron at the end of the strip reads as a broken control. */
.gallery-image-wrapper:hover .gallery-nav-btn:disabled {
  opacity: 0;
}

/* Touch and any other hover-less pointer never fires :hover, so the arrows
   would be permanently unreachable. Pin them visible there. */
@media (hover: none) {
  .gallery-nav-btn {
    opacity: 1;
  }
}

/* Thumbnail strip, BELOW the image frame (a sibling of .gallery-image-wrapper,
   so .product-gallery's own column gap spaces it). It was overlaid on the
   artwork first; tall portrait product shots letterbox under `object-fit:
   contain`, which left the strip floating in the frame's empty margin, and on
   a wide image it sat on top of the product instead. */
.gallery-thumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Long galleries scroll horizontally rather than wrapping to a second row
     and pushing the product title further down the page. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  /* Room for the tiles' shadow, which would otherwise be clipped by the
     scroll container. */
  padding: 0.25rem 0;
}

.gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.gallery-thumbnail {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  /* --radius-lg, the house value for a small card: the .pdp-selected-variant-card
     chip sitting right beside this gallery uses the same, and so did the old
     thumbnails. */
  border-radius: var(--radius-lg);
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.1);
  transition:
    border-color 0.15s ease,
    opacity 0.15s ease;
  opacity: 0.85;
}

.gallery-thumbnail:hover {
  opacity: 1;
}

.gallery-thumbnail--active {
  border-color: #262626;
  border-width: 2px;
  opacity: 1;
}

.gallery-thumbnail__img {
  width: 100%;
  height: 100%;
  /* Square crop — these are wayfinding chips, so a consistent silhouette beats
     showing each frame whole. The main image above is `contain` and remains the
     honest full view. */
  object-fit: cover;
  display: block;
}

@keyframes gallery-img-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Click-to-enlarge (Userback 8001035). The overlay is position:fixed from
   inside .product-gallery. z-index 1200 > the 1100 used by the highest
   header overlay.

   ⚠ The "nothing on the ancestor chain creates a stacking context" claim
   this comment used to make went stale: the --config layout makes
   .product-gallery-container `position: sticky`, and STICKY ALWAYS CREATES
   A STACKING CONTEXT (unlike relative), even with z-index auto. That caged
   the z-1200 lightbox under the info column, the header and the price bar
   (SIMELSA drawing report, 2026-08-03: spec text rendered through the
   enlarged image). The :has() rule below is the escape hatch: while a
   lightbox is open the container un-sticks, which is invisible to the user
   because the opaque backdrop covers the page anyway. */
.gallery-main-img--zoomable {
  cursor: zoom-in;
}

/* Escape the sticky stacking trap while the lightbox is open (see note
   above). Scoped to :has(.gallery-lightbox) so the sticky column behaviour
   is untouched whenever the overlay is closed.

   ⚠ SPECIFICITY, not source order, is what makes this win. The escape hatch
   originally read `.product-gallery-container:has(.gallery-lightbox)` — (0,2,0),
   the SAME weight as the two rules that stick the column:

     .product-detail--config .product-gallery-container
     @container pdpdetail (min-width: 48rem) {
       .product-detail--design .product-gallery-container }

   Both are declared LATER in this file, so on a tie they won and the column
   stayed `sticky` — the escape hatch silently did nothing on the default
   (`design`) PDP layout, which is every PDP. That is the SIMELSA arrester
   regression Werner hit on the 1-2 preview: spec table, DOWNLOADS rows, the
   buy bar and the black site footer all painted THROUGH the enlarged drawing,
   and the backdrop dimmed nothing. The measured lightbox rect was the full
   viewport the whole time — it was never a containing-block problem, purely
   the sticky ancestor's stacking context capping z-index 1200 at the
   container's own level. (`container-type: inline-size` on
   `.product-detail--design` does NOT create a stacking context in Blink;
   probed live with the overlay open — un-sticking the column alone restores
   correct painting.)

   Leading with `.product-detail:has(…)` puts this at (0,3,0), so it outranks
   every `.product-detail--x .product-gallery-container` rule regardless of
   where in the file that rule lands. Do not weaken it back to a single class.
   The second selector keeps galleries used outside `.product-detail` covered. */
.product-detail:has(.gallery-lightbox) .product-gallery-container,
.product-gallery-container:has(.gallery-lightbox) {
  position: static;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(20, 22, 24, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.gallery-lightbox-img {
  max-width: calc(92 * var(--vwx));
  max-height: 92vh;
  object-fit: contain;
  background: #ffffff;
  cursor: default;
  box-shadow: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.45);
}

.gallery-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #ffffff;
  padding: 0.5rem;
  cursor: pointer;
  line-height: 0;
}

.gallery-lightbox-close:hover {
  opacity: 0.75;
}

/* SHOP-950 removed, all peek-era rules:
     .gallery-image-wrapper--full  — the main slot is always full width now, so
       the modifier had nothing left to do (the Dart no longer emits it).
     .product-detail--arrester .gallery-peek-img / -slot (UX8) — that pair only
       existed to stop `object-fit: cover` slicing a dimension DRAWING mid-title
       in the peek. No peek, no slice.
     .gallery-bottom-nav* — the dash indicators and the 24px chevron pair, now
       the overlaid thumbnail strip and the centred arrows above. Its
       `width: calc(100% + …)` was another peek-era overhang. */

.product-info-container h1 {
  font-size: var(--font-size-2xl);
  font-weight: 400;
  margin-bottom: var(--spacing-4);
  line-height: 1.4;
}

.product-info-container .product-price {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-6);
}

.btn-compare {
  margin-bottom: var(--spacing-6);
}

.product-specs-table {
  margin-bottom: var(--spacing-6);
}

.spec-row {
  display: flex;
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.spec-label {
  width: 40%;
  font-weight: 500;
  color: var(--color-gray-600);
}

.spec-value {
  flex: 1;
  color: var(--color-gray-900);
}

.product-add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.product-add-to-cart label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.quantity-selector {
  display: flex;
  border: 1px solid var(--color-gray-300);
}

.qty-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: var(--color-gray-100);
  font-size: var(--font-size-lg);
  transition: background 0.2s ease;
}

.qty-btn:hover {
  background: var(--color-gray-200);
}

.qty-input {
  width: 3.75rem;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-gray-300);
  border-right: 1px solid var(--color-gray-300);
  font-size: var(--font-size-base);
}

/* === Cart Page === */
.cart-page {
  padding: var(--spacing-8) 0;
}

.cart-page.updating {
  opacity: 0.7;
  pointer-events: none;
}

/* Step Indicator */
.cart-step-indicator {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.cart-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #999;
}

.cart-step.active {
  color: #242424;
}

.cart-step-number {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

.cart-step.active .cart-step-number {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: white;
}

.cart-step-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.cart-step-line {
  flex: 1;
  height: 1px;
  background: #d0d0d0;
  max-width: 5rem;
}

.cart-step-close {
  margin-left: auto;
  color: #666;
  display: flex;
}

.cart-step-close:hover {
  color: #242424;
}

.cart-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-8);
}
.cart-layout > :first-child {
  flex: 999 1 24rem;
  min-width: 0;
}
.cart-layout .cart-summary {
  flex: 1 1 21.25rem;
}

/* Cart Item Cards */
.cart-item-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.cart-item-thumb {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 0.375rem;
  background: #f5f5f5;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: #242424;
}

.cart-item-sku {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
  display: block;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.cart-item-qty .qty-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid #d0d0d0;
  background: #f8f8f8;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-qty .qty-btn:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.cart-item-qty .qty-btn:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
}

.cart-item-qty .qty-btn:hover {
  background: #e8e8e8;
}

.cart-item-qty .qty-value {
  width: 2.5rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  font-size: 0.875rem;
  font-weight: 500;
}

.cart-item-price {
  text-align: right;
  flex-shrink: 0;
  min-width: 6.25rem;
}

.cart-item-unit {
  font-size: 1rem;
  font-weight: 600;
  color: #242424;
  display: block;
}

.cart-item-subtotal {
  font-size: 0.75rem;
  color: #888;
  display: block;
}

.cart-item-delete {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
}

.cart-item-delete:hover {
  color: #e53e3e;
}

/* Expandable toggles */
.cart-item-toggles {
  display: flex;
  gap: 0;
  border-top: 1px solid #e0e0e0;
}

.cart-toggle-btn {
  flex: 1;
  padding: 0.625rem 1.25rem;
  background: none;
  border: none;
  border-right: 1px solid #e0e0e0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #666;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-toggle-btn:last-child {
  border-right: none;
}

.cart-toggle-btn:hover {
  background: #f8f8f8;
}

.cart-toggle-btn.expanded {
  color: #1a1a1a;
}

.cart-toggle-arrow {
  font-size: 1rem;
}

.cart-item-details,
.cart-item-config {
  background: #f8f8f8;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #e0e0e0;
}

.cart-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  color: #555;
}

/* Cart bottom actions */
.cart-bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.cart-save-link {
  font-size: 0.875rem;
  color: #1a1a1a;
  text-decoration: underline;
}

/* Contract info */
.contract-info {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #f8f8f8;
  border-radius: 0.5rem;
}

.contract-row {
  margin-bottom: 1rem;
}

.contract-row:last-child {
  margin-bottom: 0;
}

.contract-row strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #555;
  font-size: 0.8125rem;
}

/* === Cart Summary === */
.cart-summary {
  background-color: #f8f8f8;
  padding: 1.5rem;
  height: fit-content;
  position: sticky;
  top: 6.25rem;
  border-radius: 0.5rem;
}

.cart-summary-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #242424;
}

.summary-totals {
  padding: 0 0 1rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: #555;
}

.summary-row.total {
  font-weight: 700;
  font-size: 1.125rem;
  color: #242424;
  padding-top: 0.75rem;
  border-top: 1px solid #d0d0d0;
  margin-top: 0.5rem;
}

.btn-next {
  width: 100%;
  margin-top: 1rem;
  padding: 0.875rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #1a1a1a;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-align: center;
  display: block;
  text-decoration: none;
}

.btn-next:hover {
  background: #008080;
}

.btn-checkout {
  width: 100%;
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  font-size: var(--font-size-base);
}

/* Request a Quote button (GTShop style) */
.btn-quote {
  width: 100%;
  margin-top: var(--spacing-3);
  padding: var(--spacing-4);
  font-size: var(--font-size-base);
  background: var(--color-white);
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  text-align: center;
  text-decoration: none;
}

.btn-quote:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* === Breadcrumb === */
.breadcrumb {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-sm);
  background: var(--color-gray-50);
}

.breadcrumb-list {
  display: flex;
  list-style: none;
}

.breadcrumb-item a {
  color: var(--color-gray-600);
}

.breadcrumb-item a:hover {
  color: var(--color-primary);
}

.breadcrumb-item .current {
  color: var(--color-gray-900);
}

.breadcrumb-separator {
  margin: 0 var(--spacing-2);
  color: var(--color-gray-400);
}

/* === Primary Navigation in Header === */
.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(1.67 * var(--vwx)), 1.5rem);
  margin-left: clamp(0rem, calc(10 * var(--vwx)) - 5rem, 4.375rem);
  /* H7 — the nav's nowrap buttons set a min-content floor; a lens with
     many nav groups used to push .header-actions (cart/bell/profile) past
     the viewport edge. Let the nav shrink and scroll internally instead:
     the action icons must ALWAYS stay on screen, whatever the lens. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* On a phone the nav row overflows by design (H7 above) — but with no
   scrollbar the last label was simply cut behind the search icon ("MY INS")
   and read as a rendering bug (campaign audit, 390px header overdraw).
   Fade the trailing edge so the cut reads as "more to the right", and keep
   the last label out of the fade zone. Pointer query, not a width query. */
@media (hover: none) and (pointer: coarse) {
  .primary-nav {
    padding-right: 2rem;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 calc(100% - 2rem),
      transparent
    );
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
  /* Give the nav the room the touch font floor took: measured on a 390px
     phone the five action icons held 192px and the logo 150px, leaving
     the nav 42px ("PROD"). Tighter icon gaps and a smaller logo return
     ~70px to the nav — same header model, same icons, no hides. */
  .header-main-inner {
    padding: 0 0.75rem;
  }
  .header-actions {
    gap: 0.375rem;
  }
  .header-action {
    padding: 0;
  }
  .logo img,
  .logo svg {
    max-width: 6.5rem;
    height: auto;
  }

  /* ── Round 5 phone pass (verified under CDP coarse emulation) ────────── */

  /* PHONE-1: the pill's slim-bottom-bar rules live in the coarse block
     AFTER its base rule (cascade: this earlier block would lose to the
     base `position: sticky`). Here only the reserved space. */
  .svc-config-section {
    padding-bottom: 6.5rem;
  }
  .product-page {
    padding-bottom: 5rem;
  }

  /* PHONE-3: minimum touch sizes for the config controls. */
  .asset-picker-tab,
  .config-card--preset,
  .asset-picker-input-wrap,
  .pdp-offer-btn {
    /* px-doctrine: allow — 44px is the WCAG/HIG touch-target floor, a
       physical-finger constant that must not shrink with root font-size */
    min-height: 44px;
  }

  /* PHONE-6: any focusable field below 16px triggers iOS Safari's focus
     zoom. Fixed 16px beats the fluid rem here on purpose. */
  input,
  select,
  textarea {
    /* px-doctrine: allow — below 16px iOS Safari zooms on focus; this is a
       Safari threshold, not a typographic choice (see PHONE-6 above) */
    font-size: 16px;
  }

  /* PHONE-7: give the header icons back a ≥40px tap box (the nav-room fix
     had zeroed their padding). */
  .header-action {
    padding: 0.6rem 0.3rem;
  }

  /* PHONE-4: the desktop gallery pinned itself under the form. It also used to
     un-do a 112.5% wrapper that forced 36px of page-wide horizontal scroll —
     SHOP-950 made the wrapper 100% everywhere, so only the un-sticking is
     still load-bearing here. */
  .product-gallery-container {
    position: static;
  }
}

.nav-link {
  color: #242424;
  padding: 0.5rem 1rem;
  font-family: var(--font-family);
  font-size: clamp(0.81rem, calc(1.25 * var(--vwx)), 1.13rem);
  line-height: 1.22;
  font-weight: 700;
  text-transform: uppercase;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.nav-link:hover {
  color: #242424;
  text-decoration: none;
}

/* Active nav link when modal is open */
.nav-link.active {
  color: #242424;
}

/* === Full-Width Navigation Modal === */

/* Backdrop — spans full viewport */
.nav-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 98;
}

/* Modal panel — full width, below header */
.nav-modal {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 99;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.08);
  border-top: 1px solid #f0f0f0;
}

/* Inner content — respects max-width */
.nav-modal-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2.5rem;
  position: relative;
}

/* 3-column grid */
.nav-modal-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  min-height: 18.75rem;
}

.nav-modal-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Column dividers */
.nav-modal-col-l2,
.nav-modal-col-l3 {
  border-left: 1px solid #f0f0f0;
  padding-left: 2rem;
}

/* L1 items (left column) */
.nav-modal-l1-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #6b6b6b;
  background: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.nav-modal-l1-item:hover {
  background: #f5f5f5;
  color: #242424;
}

.nav-modal-l1-item.active,
.nav-modal-l1-item.current {
  background: #f0f0f0;
  color: #242424;
  font-weight: 700;
}

/* L2 items (middle column) */
.nav-modal-l2-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #6b6b6b;
  text-decoration: none;
  border-radius: 0.5rem;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.nav-modal-l2-item:hover {
  background: #f5f5f5;
  color: #242424;
  text-decoration: none;
}

.nav-modal-l2-item.active,
.nav-modal-l2-item.current {
  background: #f0f0f0;
  color: #242424;
  font-weight: 600;
}

.nav-modal-l2-item svg {
  opacity: 0.4;
  transition: opacity 0.15s;
}

.nav-modal-l2-item:hover svg,
.nav-modal-l2-item.active svg,
.nav-modal-l2-item.current svg {
  opacity: 1;
}

/* L3 items (right column) */
.nav-modal-l3-item {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #6b6b6b;
  text-decoration: none;
  border-radius: 0.5rem;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.nav-modal-l3-item:hover {
  background: #f5f5f5;
  color: #242424;
  text-decoration: none;
}
.nav-modal-l3-highlight {
  font-weight: 700;
  color: #1a1a1a;
  border-left: 3px solid #1a1a1a;
  margin-bottom: 0.25rem;
}
.nav-modal-l3-highlight:hover {
  color: #1a1a1a;
}

/* Close button (top right of modal) */
.nav-modal-close {
  position: absolute;
  top: 1rem;
  right: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b6b6b;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.nav-modal-close:hover {
  color: #242424;
  background: #f0f0f0;
}

/* Search wrapper in header */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-wrapper .search-icon {
  position: absolute;
  left: var(--spacing-3);
  color: var(--color-gray-500);
}

.search-wrapper .search-input {
  padding-left: var(--spacing-10);
  width: 100%;
}

/* Account selector (GTShop white theme) */
/* Wrapper anchors the .account-dropdown (sibling of the trigger button). */
.account-selector-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.account-dropdown .account-option {
  text-decoration: none;
}

.account-selector {
  display: flex;
  align-items: center;
  padding: 2px;
  background: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
  position: relative;
}

.account-selector:hover {
  opacity: 0.6;
}

.account-selector--loading {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  animation: profile-loading-pulse 1.2s ease-in-out infinite;
}

.account-selector--loading .account-name {
  display: block;
  font-size: 0.7rem;
  color: #888;
  white-space: nowrap;
}

@keyframes profile-loading-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.25;
  }
}

.account-selector .account-name {
  display: none;
}

.account-selector .dropdown-arrow {
  display: none;
}

.account-selector.open .dropdown-arrow {
  display: none;
}

/* Figma "Shop Menu" (19855:137648): 17.5rem card, 1rem padding, hairline
   border, semantic-radius-lg, elevation/3 (key + ambient; the highlight
   inner-shadow layer is #fff at 0% and renders nothing, so it's omitted).
   Rows are a 1.25rem icon + 0.5rem gap + 0.875rem/1.375rem label.
   The 1rem card padding + the rows' own -0.5rem bleed put the label text
   flush with the padding box while the hover highlight extends 0.5rem past
   it on both sides — 0.5rem clear of the card edge.
   NOTE: internal/AM users get a WIDER card (min/max-width) from the
   `:has(.acct-menu)` rule in accounts.css, which also owns the max-height
   scroll cap for short viewports. Don't duplicate either here. */
.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 17.5rem;
  padding: 1rem;
  box-sizing: border-box;
  background: var(--color-white);
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0) inset,
    0 0.875rem 1.75rem 0 rgba(0, 0, 0, 0.1),
    0 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.09);
  z-index: 1000;
  overflow: hidden;
  animation: acct-menu-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Deliberately VERTICAL-ONLY (no scale, no translateX): header.dart measures
   this element's rect to place the company picker beside it, and
   getBoundingClientRect() reports the TRANSFORMED box. A horizontal
   component here would be read mid-animation on the view-as chip path and
   the picker would land a few px over the card. */
@keyframes acct-menu-in {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-dropdown__divider {
  flex: none;
  height: 1px;
  margin: 0.5rem 0;
  background: #f2f2f2;
}

/* External buyers: CompanySwitcherSection renders an empty <div>. Collapse
   it (an empty flex child still costs a gap) and the divider that pairs
   with it, leaving links | divider | Logout. */
.account-dropdown > div:empty:not(.account-dropdown__divider) {
  display: none;
}

.account-dropdown__divider:has(+ div:empty) {
  display: none;
}

.account-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  margin-inline: -0.5rem;
  /* No width: the flex column stretches these, so the negative margin makes
     the hover highlight exactly 1rem wider than the text column. A width:100%
     here would shift the row left instead of widening it. */
  text-align: left;
  color: #3d3d3d;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.account-option__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.account-option:hover {
  background-color: #f7f7f7;
}

.account-option:active {
  background-color: #ebebeb;
}

.account-option:focus-visible {
  outline: 2px solid #737373;
  outline-offset: -2px;
}

.account-option.active {
  background-color: #262626;
  color: var(--color-white);
}

.account-option--logout {
  color: #cc3542;
}

.account-option--logout:hover {
  background-color: #fef2f2;
}

/* Secondary header navigation (removed — replaced by nav modal) */

.logo-container {
  display: flex;
  align-items: center;
}

.logo-container .logo-image {
  height: 1.5rem;
  width: auto;
}

/* === Home Page === */
.home-page {
  display: flex;
  flex-direction: column;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

/* === Hero Section === */
.hero-section {
  position: relative;
  height: auto;
  min-height: clamp(30rem, calc(56 * var(--vwx)), 67.5rem);
  margin-top: calc(-1 * var(--header-height));
  display: flex;
  flex-direction: column;
  /* Dark neutral fallback only visible during the brief window between
     first paint and the CMS hero image arriving. preloadState() in
     home_page.dart inlines the image URL into the SSR HTML and a
     <link rel=preload> in main.server.dart kicks off the download
     before the body is parsed, so this is normally invisible. */
  background: #1a1a1a;
  overflow: hidden;
  /* Full-bleed minus the real scrollbar width — bare 100vw h-overflows on
     Windows classic scrollbars (+9-17px site-wide h-scroll, Ole replica). */
  width: calc(100 * var(--vwx));
  margin-left: calc(50% - (100 * var(--vwx)) / 2);
  margin-right: calc(50% - (100 * var(--vwx)) / 2);
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-background {
  position: absolute;
  inset: 0;
  /* Wave SVG previously referenced /assets/images/hero-wave.svg which
     doesn't exist in the bundled assets — that 404 was visible in the
     browser console. Removed the background-image so this layer is a
     transparent no-op until/unless the asset is actually added back. */
  pointer-events: none;
}

/* Gradient: transparent at top, dark at bottom — matches Figma overlay (601/1080 ≈ 44% start) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 44%,
    rgba(0, 0, 0, 0.47) 100%
  );
  z-index: 1;
}

/* Main content row: text left, buttons right, anchored to bottom */
.hero-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.25rem, calc(2 * var(--vwx)), var(--spacing-8));
  padding: clamp(1.5rem, calc(2.6 * var(--vwx)), 2.5rem)
    clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
  max-width: 120rem;
  width: 100%;
  margin: 0 auto;
}

.hero-text-content {
  flex: 1 1 30rem;
  max-width: 60ch;
}

.hero-title {
  font-size: var(--font-size-2xl);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.2;
  margin: 0 0 var(--spacing-3);
}

.hero-subtitle {
  font-size: clamp(1.13rem, calc(3.6 * var(--vwx)), 3.25rem);
  font-weight: 400;
  color: #fff;
  line-height: clamp(1.5rem, calc(4.3 * var(--vwx)), 3.88rem);
  letter-spacing: -0.01rem;
  margin: 0;
}

/* Buttons: right-aligned, bottom of hero */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  align-self: flex-end;
}

.btn {
  padding: 0.625rem 1.25rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Primary button — dark */
.btn-hero-primary {
  background: #1a1a1a;
  color: #ffffff;
  border: 1px solid #666666;
}

/* Secondary button — white/light */
.btn-hero-secondary {
  background: #ffffff;
  color: #666666;
  border: 1px solid #ebebeb;
}

.hero-marquee-strip {
  position: relative;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
}
.cms-block--slider {
  overflow: hidden;
  width: 100%;
}

.cms-card-row-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / Edge */
}

.cms-card-row-scroll::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* ── Slider header: heading + controls row ── */
.cms-slider-header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cms-slider-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.cms-slider-nav {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.cms-slider-prev,
.cms-slider-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background: transparent;
  border: none;
  color: #242424;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s;
}

.cms-slider-prev:hover,
.cms-slider-next:hover {
  opacity: 0.6;
}

.cms-slider-prev.disabled,
.cms-slider-next.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.cms-slider-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}

.cms-slider-dot.active {
  background: #007bff;
  transform: scale(1.25);
}

.cms-slider-dot:hover:not(.active) {
  background: #999;
}

.hero-marquee-track {
  display: inline-flex;
  gap: clamp(2.5rem, calc(10 * var(--vwx)), 8.25rem);
  gap: clamp(2.5rem, calc(10 * var(--vwx)), 8.25rem);
  animation: hero-marquee 30s linear infinite;
}

.hero-marquee-item {
  font-size: clamp(2.5rem, calc(11 * var(--vwx)), 11.44rem);
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}

@keyframes hero-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* === CMS Content Blocks === */
.cms-blocks {
  display: flex;
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.cms-block-heading {
  font-size: clamp(2rem, calc(6 * var(--vwx)), 4rem);
  line-height: clamp(2.5rem, calc(6.5 * var(--vwx)), 4.88rem);
  line-height: clamp(2.5rem, calc(6.5 * var(--vwx)), 4.88rem);
  color: #121212;
  color: var(--Color-neutral-100, #121212);
  letter-spacing: -0.01rem;
}

.cms-block-body {
  color: #666;
  font-size: clamp(1.63rem, calc(6 * var(--vwx)), 3.19rem);
  line-height: clamp(2.25rem, calc(6.5 * var(--vwx)), 4.5rem);
  line-height: clamp(2.25rem, calc(6.5 * var(--vwx)), 4.5rem);
  letter-spacing: -0.01rem;
}

/* Text Section */
.cms-block--text-section {
  background: var(--color-white);
  padding: clamp(2.5rem, calc(7.8 * var(--vwx)), 7.5rem) 0
    clamp(2.5rem, calc(10.9 * var(--vwx)), 10.5rem);
  width: 100%;
}

/* Reset .container constraints so it fills the section fully */
.cms-block--text-section .container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Text Section — Alignment variants */
/* left + right: two equal columns, content placed in col 1 or col 2 */
.cms-block--text-section.cms-align-left .container,
.cms-block--text-section.cms-align-right .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* left: content in first column */
.cms-block--text-section.cms-align-left .cms-block-heading,
.cms-block--text-section.cms-align-left .cms-block-body {
  grid-column: 1;
  text-align: left;
}

/* right: content in second column */
.cms-block--text-section.cms-align-right .cms-block-heading,
.cms-block--text-section.cms-align-right .cms-block-body {
  grid-column: 2;
  text-align: left;
}

/* center: full width, centered */
.cms-block--text-section.cms-align-center .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cms-block--text-section.cms-align-center .cms-block-heading,
.cms-block--text-section.cms-align-center .cms-block-body {
  text-align: left;
  max-width: 68ch;
}

/* Image + Text */
.cms-block--image-text {
  background: var(--color-gray-50);
}

.cms-image-text-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--spacing-12);
  align-items: center;
}

.cms-image-right .cms-image-text-inner {
  direction: rtl;
}

.cms-image-right .cms-image-text-content {
  direction: ltr;
}

.cms-image-text-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* CTA Banner */
.cms-block--cta-banner {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1b69 100%);
  color: var(--color-white);
}

.cms-block--cta-banner .cms-block-heading {
  color: var(--color-white);
}

.cms-block--cta-banner .cms-block-body {
  color: rgba(255, 255, 255, 0.8);
}

.cms-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

.cms-cta-text {
  flex: 1;
}

/* Testimonials */
.cms-block--testimonials {
  background: var(--color-gray-50);
}

.cms-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--spacing-6);
  margin-top: var(--spacing-8);
}

.cms-testimonial {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cms-testimonial-quote {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-gray-700);
  font-style: italic;
  margin-bottom: var(--spacing-4);
}

.cms-testimonial-author {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.cms-testimonial-name {
  font-weight: 600;
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
}

.cms-testimonial-company {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Product Showcase / Contact Form stubs */
.cms-block--product-showcase,
.cms-block--contact-form {
  background: var(--color-white);
}

/* ── Media Teaser ────────────────────────────────────────────────────────── */
.cms-block--media-teaser {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 25rem;
  overflow: hidden;
  margin: 1.5rem 0;
  width: 100%;
}

.cms-media-teaser-bg {
  position: absolute;
  inset: 0;
  /* Fallback paint so there's no black/blank flash while a video's first
     frame is still decoding (no poster attribute is available — the CMS
     media-teaser block has no separate still-image field for video
     uploads). Harmless for the image variant: the background-image below
     covers it immediately once loaded. */
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

video.cms-media-teaser-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cms-media-teaser-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(1.25rem, calc(4.2 * var(--vwx)), 5rem)
    clamp(1rem, calc(2.1 * var(--vwx)), 2.5rem);
  gap: clamp(1rem, calc(2 * var(--vwx)), 2.5rem);
}

.cms-media-teaser-text {
  display: flex;
  flex-direction: column;
  gap: clamp(0.38rem, calc(0.6 * var(--vwx)), 0.75rem);
}

.cms-media-teaser-title {
  font-size: clamp(2rem, calc(5.2 * var(--vwx)), 6.25rem);
  font-weight: 700;
  line-height: 0.78em;
  text-transform: uppercase;
  text-transform: uppercase;
  letter-spacing: -0.071em;
  color: #ffffff;
  margin: 0;
}

.cms-media-teaser-description {
  font-size: clamp(0.88rem, calc(1.15 * var(--vwx)), 1.38rem);
  font-weight: 400;
  line-height: 1.4;
  color: #ffffff;
  margin: 0;
}

.cms-media-teaser-pause {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease;
  border-radius: 0.75rem;
  border: 1px solid #ebebeb;
  background: rgba(255, 255, 255, 0.29);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  color: #1a1a1a;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
}

.cms-block--media-teaser.has-video:hover .cms-media-teaser-pause {
  opacity: 1;
}

.cms-block--media-teaser.has-video:has(.btn:hover) .cms-media-teaser-pause {
  opacity: 0;
}

@media (hover: none) {
  .cms-media-teaser-pause {
    display: none;
  }
}

/* Responsive */
/* CMS blocks are fully fluid: clamp() padding on the section variants,
   auto-fit image/text grid, flex-wrap CTA row — no width breakpoints. */

/* Legacy hero button - keep for backwards compatibility */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  background-color: transparent;
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 500;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-button);
  transition: all 0.2s ease;
}

.btn-hero:hover {
  background-color: var(--color-white);
  color: var(--color-gray-900);
  text-decoration: none;
}

.btn-arrow {
  font-weight: 700;
}

/* === Quick Access Tabs Section === */
.quick-access-section {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}

.quick-access-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  /* 1px gaps over a gray canvas draw the seams in BOTH axes for any
     column count — replaces the border-right/border-bottom juggling. */
  gap: 1px;
  background: var(--color-gray-200);
}

.quick-access-tab {
  display: block;
  padding: var(--spacing-5) var(--spacing-4);
  background: var(--color-white);
  transition: background-color 0.2s ease;
  position: relative;
}

.quick-access-tab:hover {
  background-color: var(--color-gray-50);
  text-decoration: none;
}

.quick-access-tab.active {
  background-color: var(--color-gray-50);
}

.quick-access-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.19rem;
  background-color: var(--color-primary);
}

.tab-title {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-1);
}

.tab-description {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.4;
}

.tab-arrow {
  position: absolute;
  right: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.quick-access-tab:hover .tab-arrow {
  opacity: 1;
}

/* === Categories Section === */
.categories-section {
  padding: var(--spacing-16) 0;
  background: var(--color-white);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-10);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  margin-top: var(--spacing-2);
}

/* Category Card Enhanced */
.category-card article {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 18.75rem;
}

.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 50%,
    rgba(27, 21, 52, 0.6) 100%
  );
  transition: opacity 0.3s ease;
}

.category-card:hover .category-overlay {
  opacity: 0.8;
}

.category-card .discover-link {
  opacity: 0;
  transform: translateY(0.625rem);
  transition: all 0.3s ease;
}

.category-card:hover .discover-link {
  opacity: 1;
  transform: translateY(0);
}

.category-card .discover-link .arrow {
  color: var(--color-accent);
  font-weight: 700;
}

/* === Services Section === */
.services-section {
  padding: var(--spacing-12) 0;
  background: var(--color-gray-50);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--spacing-4);
}

.service-card {
  display: block;
  padding: var(--spacing-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.service-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.service-title {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.service-description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin-bottom: var(--spacing-4);
}

.service-card .discover-link {
  font-size: var(--font-size-sm);
}

.service-card .discover-link .arrow {
  color: var(--color-accent);
  font-weight: 700;
}

/* === Benefits Section === */
.benefits-section {
  padding: var(--spacing-12) 0;
  background: var(--color-secondary);
  color: var(--color-white);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--spacing-6);
}

.benefit-item {
  text-align: center;
}

.benefit-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--spacing-4);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-light);
}

.benefit-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  margin-bottom: var(--spacing-2);
}

.benefit-description {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* === Data Center Section (GTShop style) === */
.data-center-section {
  position: relative;
  min-height: 25rem;
  display: flex;
  align-items: center;
  background: #1a1a2e;
  overflow: hidden;
}

.data-center-background {
  position: absolute;
  inset: 0;
  background: url("https://gtshop.mosaic-dev.siemens-energy.cloud/media/wysiwyg/datacenter-jpg_Original_file.jpg")
    center/cover;
  opacity: 0.4;
}

.data-center-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--spacing-12) 0;
}

.data-center-title {
  font-size: var(--font-size-2xl);
  font-weight: 400;
  color: var(--color-white);
  max-width: 37.5rem;
  margin: 0 auto var(--spacing-6);
  text-align: center;
  line-height: 1.3;
}

.data-center-description {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
  line-height: 1.7;
}

/* === Product Card Enhanced === */
.product-image-link {
  display: block;
}

.product-content {
  padding: var(--spacing-4);
}

.product-category {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-3);
}

.product-title-link:hover {
  text-decoration: none;
}

.product-title-link:hover .product-title {
  color: var(--color-primary);
}

.product-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.625rem, 1fr));
  gap: var(--spacing-1) var(--spacing-3);
  margin-top: var(--spacing-2);
  padding: var(--spacing-2);
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.product-specs-grid .spec-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.product-specs-grid .spec-label {
  font-size: 0.625rem;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.product-specs-grid .spec-value {
  font-size: var(--font-size-xs);
  color: var(--color-gray-900);
  font-weight: 500;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
  gap: var(--spacing-3);
}

.product-pricing {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.product-pricing .product-lead-time {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin: 0;
}

.product-footer .product-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-direction: row;
  text-align: left;
}

.product-footer .product-actions .btn {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
}

.product-footer .discover-link {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-top: 0;
}

.product-footer .discover-link .arrow {
  color: var(--color-accent);
  font-weight: 700;
}

.btn-add-cart {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  transition: background-color 0.2s ease;
}

.btn-add-cart:hover {
  background-color: var(--color-accent-hover);
}

.btn-add-cart.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-add-cart.added {
  background: var(--color-success, #16a34a);
}

.btn-add-cart .spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* GTShop-style Configure button */
.btn-configure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.btn-configure:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-white);
}

.btn-configure svg {
  margin-right: 0.25rem;
}

/* Select Options button for limited variant products */
.btn-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-white);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-options:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* GTShop-style Add to Cart button */
.btn-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-add-to-cart:hover {
  background-color: var(--color-accent-hover);
}

.btn-add-to-cart.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-add-to-cart.added {
  background: var(--color-success, #16a34a);
}

/* === Pricing Modes === */

/* Quote pricing mode */
.pricing-quote {
  padding: var(--spacing-2);
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary-light);
}

.pricing-quote .quote-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--font-size-xs);
}

.pricing-quote .quote-badge svg {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
}

.pricing-quote .quote-message {
  font-size: 0.625rem;
  color: var(--color-gray-600);
  margin-top: 2px;
}

/* Request Quote button */
.btn-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-secondary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.btn-quote:hover {
  background-color: var(--color-secondary-light);
  color: var(--color-white);
  text-decoration: none;
}

.btn-quote svg {
  flex-shrink: 0;
}

/* Budgetary pricing mode */
.pricing-budgetary {
  padding: var(--spacing-3);
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-warning);
}

.pricing-budgetary .budgetary-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-budgetary .budgetary-range {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin: var(--spacing-1) 0;
}

.pricing-budgetary .budgetary-note {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin: 0;
}

/* Get Estimate button */
.btn-estimate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-warning);
  color: var(--color-gray-900);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.btn-estimate:hover {
  background-color: #d97706;
  color: var(--color-gray-900);
  text-decoration: none;
}

.btn-estimate svg {
  flex-shrink: 0;
}

/* Discount pricing mode (dual pricing) */
.pricing-discount {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.pricing-discount .your-price {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.pricing-discount .your-price .price-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.pricing-discount .your-price .price-amount {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
}

.pricing-discount .contract-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  background: var(--color-success);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 0.5rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-discount .contract-badge svg {
  flex-shrink: 0;
}

.pricing-discount .list-price {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.pricing-discount .list-price .strikethrough {
  text-decoration: line-through;
}

.pricing-discount .discount-badge {
  background: #dcfce7;
  color: var(--color-success);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 0.375rem;
  border-radius: var(--radius-sm);
}

/* Standard product price */
.product-price {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
}

/* Lead time banner - prominent display (GTShop style) */
.product-lead-time-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0.375rem 0.75rem;
  background: linear-gradient(
    135deg,
    rgba(138, 0, 229, 0.08) 0%,
    rgba(138, 0, 229, 0.04) 100%
  );
  border: 1px solid rgba(138, 0, 229, 0.15);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-3);
}

.product-lead-time-banner svg {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-primary);
}

.cart-message {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.cart-message.success {
  background-color: var(--color-success-bg, #dcfce7);
  color: var(--color-success, #16a34a);
  border: 1px solid var(--color-success, #16a34a);
}

.cart-message.error {
  background-color: var(--color-error-bg, #fee2e2);
  color: var(--color-error, #dc2626);
  border: 1px solid var(--color-error, #dc2626);
}

/* === Footer === */
.site-footer {
  background-color: #000;
  color: var(--color-white);
  /* Extend the dark bg beyond the 1920px body max-width at very wide
     viewports. Scrollbar-corrected: bare 100vw overflows on Windows. */
  width: calc(100 * var(--vwx));
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: calc(-1 * (100 * var(--vwx)) / 2);
  margin-right: calc(-50 * var(--vwx));
}

/* Main content wrapper.
   ui-footer F9: vertical padding proportional to the viewport — the old
   clamp(1.5rem…5rem) bottom pad alone was ~10% of a 480px-tall screen. */
.footer-main {
  padding: clamp(1.5rem, calc(2.5 * var(--vwx)), 2rem) 0
    clamp(1.25rem, calc(2.5 * var(--vwx)), 2.5rem);
}

/* Shared inner container (main + bottom bar).
   Fluid: logo and nav sit side by side and wrap when the row runs out of
   room — no width breakpoints. */
.footer-inner {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, calc(3 * var(--vwx)), 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  /* ui-footer F9: column gap proportional (was clamp 2rem…4rem). */
  gap: clamp(1.25rem, calc(2.5 * var(--vwx)), 2.5rem);
}

.footer-logo {
  flex: 0 1 16rem;
  max-width: 16rem;
}

.footer-nav {
  flex: 1 1 34rem;
  min-width: 0;
}

/* Logo */
.footer-logo-link {
  display: inline-block;
  line-height: 0;
}

.footer-logo-svg {
  width: 100%;
  /* ui-footer F9: relative scale — the old clamp(9.81rem, 30vwx, 25.44rem)
     painted a 234px-wide wordmark at 853×480 (larger than the header's
     whole logo cluster). ~58% of that now; tracks the header scale. */
  max-width: clamp(7rem, calc(16 * var(--vwx)), 15rem);
  height: auto;
  display: block;
}

/* Nav columns grid — auto-fills from 4 columns down to 1 as space shrinks.
   ui-footer F9: gap proportional (was clamp 1.25rem…2.5rem). */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: clamp(1rem, calc(2 * var(--vwx)), 2rem);
}

/* Nav group — the mobile checkbox accordion is retired: links are always
   visible at every width (core affordances are never hidden). */
.footer-nav-toggle {
  display: none;
}

.footer-nav-heading {
  display: block;
  pointer-events: none;
  cursor: default;
  margin-bottom: 0.625rem;
}

.footer-nav-chevron {
  display: none;
}

/* Heading label.
   ui-footer F9: on the type scale (sm) — uppercase + the brighter tone
   keep the hierarchy over the links without the oversized base step. */
.footer-nav-heading-text {
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
  letter-spacing: 0.03em;
  color: #f7f7f7;
}

/* Links inside each group */
.footer-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.footer-nav-links a {
  font-size: var(--font-size-sm);
  color: #d1d1d1;
  text-decoration: none;
  line-height: 1.25rem;
  display: block;
}

.footer-nav-links a:hover {
  color: var(--color-white);
}

/* Bottom bar: copyright left, legal links right; both wrap freely so the
   row can NEVER exceed the viewport (the old min-768 nowrap pair pushed
   the document +11px wide at 1024px/20px root — Userback 7998171 class). */
.footer-bottom .footer-inner {
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
}

/* Copyright wraps as ordinary text at every width — never nowrap.
   ui-footer F9/R6: on the type scale (sm) + measure capped at 70ch so the
   legal line never stretches into an unreadable full-width ribbon. */
.footer-copyright {
  font-size: var(--font-size-sm);
  line-height: 1.375rem;
  max-width: 70ch;
  color: rgba(255, 255, 255, 0.7);
}

/* Legal links */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-legal a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  white-space: nowrap;
}

.footer-legal a:hover {
  color: var(--color-white);
}

/* === Loading State === */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16);
  color: var(--color-gray-500);
}

/* === Customer Context Banner (B2B Feature) === */
.customer-context-banner {
  background: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 100%);
  padding: var(--spacing-3) 0;
}

.customer-context-banner .container {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.context-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.context-badge.frame {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.context-badge.spot {
  background: #3b82f6;
  color: var(--color-white);
}

.context-badge.asset {
  background: #10b981;
  color: var(--color-white);
}

.context-info {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-sm);
}

.context-info .highlight {
  color: var(--color-white);
  font-weight: 600;
}

/* === Product Detail Page === */

.product-page {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  /* MIN-height instead of fixed height so CMS content sections below
   * the hero/info row can grow the page. The original design wanted a
   * viewport-locked single screen, but products with rich CMS content
   * (description, features, FAQ, configurator mirror) need to scroll
   * the document — clamping height + overflow:hidden was clipping the
   * whole price/cart section as soon as anything was added below.
   * Now: the product-detail row still fills the viewport (its own
   * height calc), but CMS sections appear below as normal scroll content.
   */
  min-height: calc(100vh - var(--header-height));
  /* iPad (Userback 8336717 — "table overlaps bottom footer", reported from
   * an iPad, not reproducible on desktop Chrome at the same 1180x764).
   *
   * On iOS Safari `100vh` is the LARGE viewport: it measures the window as
   * if the browser toolbars were hidden, and it does NOT shrink for the
   * toolbar that is actually on screen. So .product-page reserved more
   * height than the iPad could show, pushing the info column's last rows
   * and the buy box down into the footer. Desktop Chrome has no such
   * discrepancy, which is why the same viewport size looked fine there.
   *
   * `dvh` is the dynamic viewport height — the space genuinely visible —
   * and it overrides the line above wherever it is supported. The `vh`
   * declaration stays as the fallback for browsers that do not know dvh. */
  min-height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
}

/* The viewport-locked two-pane hero row is retired (doctrine 2026-07-30):
 * both PDP columns are normal flow content and the DOCUMENT scrolls. */

/* GTShop PDP Gallery + Left Info */
/* D1 (ui-release) — flex-basis trimmed 30rem→24rem (and info 20rem→16rem)
   so the two-column row survives 1024px viewports at a 20px root font
   (24+16rem = 800px + gap/padding ≈ 900px < 1024px). With the old bases the
   row wrapped to a single column exactly at the audit's smallest cell and
   pushed the buy box below the fold. Grow ratio unchanged (2:1). */
.product-gallery-container {
  flex: 2 1 24rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
}

.product-gallery-container::-webkit-scrollbar {
  display: none;
}

/* PDP indicator bar uses less horizontal padding than card bar */
.product-gallery-container .gallery-indicator-bar {
  padding: 0.25rem 0;
}

.product-main-image {
  background: #ffffff;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25rem;
  max-height: 43.75rem;
  overflow: hidden;
}

.product-main-image .main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-main-image .image-placeholder {
  color: var(--color-gray-300);
}

/* PDP gallery dots reuse shared .gallery-dot / .gallery-indicators-scroll styles */

/* Product info below gallery */
.pdp-left-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 1.25rem;
}

/* PDP eyebrow — category label + the Product Class / Product Type / End
   Customer trio, INLINE on one line instead of three stacked rows under
   Commercial Information (PDP information-architecture review). Wraps to
   further lines on narrow viewports so long values stay readable. */
.pdp-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
}

.pdp-category-label {
  font-size: 1rem;
  font-weight: 700;
  margin-right: 1rem;
  line-height: 1.5rem;
  color: #737373;
  /* Inline-block so it shares the eyebrow line with the chips below. */
  display: inline-block;
}

/* One "Label Value" chip. inline-block keeps the pair atomic: a long value
   wraps the WHOLE chip to the next line rather than splitting it from its
   label. min-width:0 lets very long values wrap inside the chip instead of
   overflowing the column. */
.pdp-eyebrow-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.pdp-eyebrow-chip-label {
  color: #8d8d8d;
  font-weight: 400;
  white-space: nowrap;
}

.pdp-eyebrow-chip-value {
  color: #242424;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* PDP eyebrow badge — value-only pill (no label). End Customer uses purple,
   Product Class and In Stock use green. Inline so they sit in the flex row. */
.pdp-eyebrow-badge--class,
.pdp-instock-badge {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.125rem;
  white-space: nowrap;
  background: #c1f0c6;
  color: #20852a;
}

/* Narrow widths: the eyebrow row flex-wraps naturally — no breakpoint. */

.pdp-title-specs {
  display: flex;
  flex-direction: column;
}

.pdp-product-title {
  font-size: clamp(0.81rem, calc(1.25 * var(--vwx)), 1.125rem);
  font-weight: 700;
  line-height: 1.5rem;
  color: #242424;
  margin: 0;
}

.product-detail--design .pdp-product-title {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.pdp-subtitle-mlfb {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #999;
  font-family: monospace;
  letter-spacing: 0.02em;
}

/* Offer / Position / SAP meta row under the PDP title — horizontal, bold
   labels + regular values, grey, overflows behind a right fade on narrow. */
.pdp-product-meta-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #737373;
  mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 4rem),
    transparent
  );
}

.pdp-product-meta-label {
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.pdp-product-meta-value {
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Device-designation SE code (freeflow layout legacy, kept for non-design PDPs) */
.pdp-se-code {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.125rem;
}

.pdp-se-code-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #737373;
}

.pdp-se-code-value {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: monospace;
  letter-spacing: 0.02em;
  color: #242424;
}

/* Self-serve admin shortcuts (Medusa Admin / Payload CMS) — internal-admin
   only, both links self-gate via AdminEditLink/CmsEditLink. Inline row, not
   the floating .cms-edit-link button style, since this sits inline under
   the SE code rather than fixed to the viewport corner. */
.pdp-admin-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pdp-admin-links .admin-edit-link,
.pdp-admin-links .cms-edit-link {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: transparent;
  color: #737373;
  border: 1px solid #d4d4d4;
  border-radius: var(--radius-button);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
  transition: all 0.15s ease;
}

.pdp-admin-links .admin-edit-link:hover,
.pdp-admin-links .cms-edit-link:hover {
  background: #f5f5f5;
  color: #242424;
  border-color: #a3a3a3;
  transform: none;
  box-shadow: none;
}

.pdp-admin-links .admin-edit-icon,
.pdp-admin-links .cms-edit-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* .pdp-specs-row + the .pdp-magento-spec-* table (Userback 8040023 /
   SHOP-295, grid-ified by PO item 12) were retired by PO-BATCH-2 item 22:
   the under-image block now reuses the PLP attribute-chip classes
   (.product-subtitles / .product-spec-value) — see .pdp-underimage-chips. */

.pdp-underimage-chips {
  margin-top: 0.75rem;
}

.pdp-spec-value {
  /* Was 24px gray — made spec/commercial values (e.g. 'Nordex Frame
     2026') render oversized + washed out. Match the row-cell scale. */
  font-size: clamp(0.88rem, calc(1.5 * var(--vwx)), 1rem);
  font-weight: 400;
  line-height: 1.5rem;
  color: #242424;
}

.pdp-tag-pill {
  display: inline-block;
  padding: 0.19rem 0.625rem;
  background: #f0f0f0;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
}

/* G2 — Arrester PLP chip strip.
   Hosts the voltage-class / housing / standard / application chips that
   PlpCardSpecs injects on arrester-family cards. The strip sits inside
   the card body (NOT absolutely over the image) — flex-wrap keeps it
   inside the card's content column, and the row gap stops chip overlap
   when multiple chips co-exist. Scoped to .plp-card-arrester-specs so
   we don't disturb the generic supplier/from-incoterm meta row. */
.plp-card-arrester-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  align-items: center;
  margin: 0.375rem 0 2px;
  position: relative;
  z-index: 1;
}
/* Base meta-row (EFA spare parts + any non-arrester card). Without this the
   label and value spans render bare-inline with no gap — "SupplierSiemens…".
   Label sits above the value in a compact stacked pair. */
.product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.product-card-meta-item {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.product-card-meta-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-gray-400, #9ca3af);
  text-transform: uppercase;
}
.product-card-meta-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-800, #1f2937);
}

.plp-card-arrester-specs .product-card-meta-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}
.plp-card-arrester-specs .product-card-meta-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #8b8b8b;
  text-transform: uppercase;
}
.plp-card-arrester-specs .pdp-tag-pill.product-card-meta-value {
  white-space: nowrap;
}

.pdp-description {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: #6b6b6b;
  margin: 0;
  /* UB 8115759: RSA CB descriptions are now stored with real line breaks
     (one "Label — value" pair per line). pre-line renders them; single-line
     descriptions are unaffected. */
  white-space: pre-line;
}

/* === PDP Right Column: Tabs + Scroll + Bottom Bar === */
.product-info-container {
  /* 20rem→16rem: see the .product-gallery-container basis note (D1). */
  flex: 1 1 30rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(1.25rem);
  padding: 1.5rem clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem) 1.5rem 1.5rem;
}

/* Tab bar */
.pdp-tab-bar {
  display: flex;
  flex-shrink: 0;
  background: #ffffff;
  position: relative;
  z-index: 1;
}

.pdp-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, calc(0.4 * var(--vwx)), 0.5rem);
  padding: 0 clamp(0.5rem, calc(1 * var(--vwx)), 1rem);
  font-size: clamp(0.69rem, calc(1.6 * var(--vwx)), 1.5rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  color: #c9c9c9;
  background: transparent;
  border: none;
  border-bottom: 2px solid #c9c9c9;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  user-select: none;
}
.pdp-tab:focus {
  outline: none;
}
.pdp-tab:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: -2px;
}

.pdp-tab.active {
  color: #242424;
  border-color: #242424;
}

.pdp-tab:hover:not(.active) {
  color: #6b6b6b;
  border-color: #6b6b6b;
}

.pdp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(1.13rem, calc(1.4 * var(--vwx)), 1.38rem);
  height: clamp(1.13rem, calc(1.4 * var(--vwx)), 1.38rem);
  padding: 0 clamp(0.25rem, calc(0.4 * var(--vwx)), 0.38rem);
  border-radius: 50%;
  background: #242424;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.125rem;
}

/* Scrollable tab content */
.pdp-tab-content {
  flex: none;
  overflow: visible;
  /* SHOP-194: do NOT set `overscroll-behavior: contain` here. This column
     (the Specifications / INFORMATION rail) is an in-flow part of the
     viewport-locked .product-detail row, not a fixed drawer. With scroll
     chaining suppressed, hovering this column trapped the wheel: once the
     specs list hit its scroll boundary the page underneath (CMS description
     etc.) would not scroll. Let scroll chain to the document. */
  scrollbar-width: none;
  padding: clamp(1.5rem, calc(3 * var(--vwx)), 2.5rem) 0 6.25rem;
}

.pdp-tab-content::-webkit-scrollbar {
  display: none;
}

/* D1 (ui-release) — the PDP no longer renders a bottom bar after the tab
   content (the buy cluster moved to the TOP of the info column as
   .purchase-bar), so the 6.25rem bottom-padding reservation for the pulled-up
   bar is dead space there. Budget-tool / transformer pages still emit the
   bar and keep the base reservation. */
.pdp-tab-content--flow {
  padding-bottom: clamp(1.5rem, calc(3 * var(--vwx)), 2.5rem);
}

/* Information tab */
.pdp-info-tab {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pdp-info-subtitle {
  font-size: clamp(1rem, calc(1.3 * var(--vwx)), 1.13rem);
  font-weight: 700;
  line-height: 1.4;
  color: #242424;
  margin: 0 0 clamp(0.75rem, calc(1.5 * var(--vwx)), 1.25rem);
}

.pdp-info-description {
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  margin: 0 0 clamp(1.5rem, calc(3 * var(--vwx)), 2.5rem);
}

/* W2-3/W2-4 — arrester datasheet rendered as a scannable 2-col spec table
   instead of one run-on paragraph; provenance fields parsed out upstream. */
.pdp-arrester-spec-table {
  display: flex;
  flex-direction: column;
  margin: 0 0 clamp(1.5rem, calc(3 * var(--vwx)), 2.5rem);
  border-top: 1px solid #e6e6e6;
}
/* UB 8115327 — three columns like the PDF datasheet: text | value | unit.
   Grid so the value column right-aligns against a FIXED unit rail and every
   row's unit starts at the same x — flex space-between made each row's unit
   land wherever its value ended, which is unreadable as a column. The unit
   track is min-content with a floor, so "V DC" and "kJ/kV" fit while empty
   units (prose rows) collapse to the floor without jagging the layout. */
.pdp-arrester-spec-row {
  display: grid;
  grid-template-columns: 1fr auto minmax(2.5rem, min-content);
  align-items: baseline;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #e6e6e6;
}
.pdp-arrester-spec-unit {
  font-size: clamp(0.81rem, calc(1 * var(--vwx)), 0.88rem);
  color: #6b6b6b;
  white-space: nowrap;
}
/* M9 G4 — Technische-Daten section subheads (Ralf V0110 grouping), styled
   like the ENGINEERING DATA eyebrow so the table reads in sections. */
.pdp-arrester-spec-section-head {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
  padding: 1.125rem 0 0.375rem;
  border-bottom: 1px solid #e6e6e6;
}
.pdp-arrester-spec-label {
  font-size: clamp(0.81rem, calc(1 * var(--vwx)), 0.88rem);
  color: #6b6b6b;
  flex: 0 1 auto;
}
.pdp-arrester-spec-value {
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 600;
  color: #161616;
  text-align: right;
  white-space: nowrap;
}

.pdp-features-heading {
  font-size: clamp(1rem, calc(1.2 * var(--vwx)), 1.13rem);
  font-weight: 600;
  line-height: 1.4;
  color: #242424;
  margin: 0 0 clamp(0.5rem, calc(1 * var(--vwx)), 1rem);
}

.pdp-features-list {
  list-style: disc;
  padding-left: clamp(1rem, calc(1.5 * var(--vwx)), 1.5rem);
  margin: 0 0 clamp(1.5rem, calc(3 * var(--vwx)), 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.38rem, calc(0.8 * var(--vwx)), 0.75rem);
}

.pdp-features-list li {
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  line-height: 1.5;
  color: #242424;
}

/* Configuration tab */
.pdp-config-tab {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Round 5 (CFG-TYPO-2/SER-5): the sticky pill floats over the last ~90px of
   the config form — reserve that band so the serial input / Describe-it
   textarea always scroll clear of it. */
.svc-config-section {
  padding-bottom: 8rem;
}

/* Configuration tab when the linked package resolved to NOTHING for this
   caller (feature-flag-gated family, company not allowlisted): an honest
   card instead of the eternal spinner. Same quiet-panel vocabulary as the
   empty states elsewhere on the PDP. */
.svc-config-gated {
  max-width: 34rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--se-color-border, #e0e0e5);
  border-radius: 0.5rem;
  background: var(--se-color-surface-subtle, #fafafa);
}
.svc-config-gated-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.svc-config-gated-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #4a4a55;
  margin: 0 0 1.25rem;
}
.svc-config-gated-cta {
  display: inline-block;
}

/* Round 5 (CFG-TYPO-1): proximity was inverted — the "Preferred month"
   helper sat 30px from its own heading and 0px from the chips it explains.
   Scoped to the service tab so the builder configurator keeps its rhythm. */
.svc-config-section .config-option > .config-field-title {
  margin-bottom: 0.375rem;
}
.svc-config-section .config-field-helper {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 0.875rem; /* CFG-TYPO-3: was 11.3px — below the readability floor */
}

/* Round 5 (SER-3): keyboard-highlighted suggestion in the serial picker. */
.asset-picker-suggestion--active {
  background: #f2f2f2;
}

/* Round 5 (P07-F5): the modal's indicative-total line under the subtitle. */
.quote-modal-total {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
}

/* Round 5 (PHONE-2): stacked footer — terms + errors always visible. */
.quote-modal-footer--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: stretch;
}
.quote-modal-footer--stacked .quote-modal-terms-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.875rem;
}
.quote-modal-footer--stacked .quote-modal-terms-row input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.quote-modal-footer-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.quote-modal-footer button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Round 5 (NP-3): nameplate processed + Remove row. */
.asset-picker-ocr-confirm {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.875rem;
  color: #166534;
  margin: 0.5rem 0 0.25rem;
}

/* Round 5 (PDP-VIS-03): the CMS band is client-fetched — a cold visit showed
   the footer right under the buy box for ~2s, then a 657px layout shift when
   the band landed. Reserve the band's space with a quiet skeleton while the
   fetch is in flight (service PDPs only — the page removes it on resolve). */
.product-content-blocks--skeleton {
  /* 36rem read as a broken page on the dev-deploy review — enough to hold
     the shape, not a viewport of gray. */
  min-height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
}

.pdp-config-empty {
  font-size: 1rem;
  color: #6b6b6b;
  margin: 0;
}
.pdp-accordion {
  border-top: 1px solid #f0f0f0;
  /* D7 free-flow: sections default OPEN and carry #pdp-section-<id> anchors;
     keep an anchored jump from hiding the section title under the fixed
     header. */
  scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
}

.pdp-info-tab > .pdp-accordion:first-child {
  border-top: none;
}

.pdp-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0;
  cursor: pointer;
  user-select: none;
}

.pdp-accordion-header:hover .pdp-accordion-title {
  color: #000000;
}

.pdp-accordion-title {
  font-size: clamp(1rem, calc(1.6 * var(--vwx)), 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: #3d3d3d;
  text-transform: none;
}

.pdp-accordion-chevron {
  display: flex;
  align-items: center;
  color: #242424;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  transform: rotate(0deg);
}

.pdp-accordion-chevron svg {
  width: 2.625rem;
  height: 2.625rem;
}

.pdp-accordion-chevron.is-open {
  transform: rotate(90deg);
}

.pdp-accordion-body {
  padding: 2rem 0;
}

.pdp-accordion-placeholder p {
  font-size: 1rem;
  color: #6b6b6b;
  margin: 0;
}

/* Spec table inside accordion */
/* Tony review 2026-07-28: Specifications must read like About — same
   accordion, same flat white ground, same left edge. The grey #f6f6f6
   rounded card made the two sections look like different components in
   the same column. Only the container changes; the three-column
   text|value|unit rows below are untouched (UB 8115327). */
/* Tony review 2026-07-28: match the arrester/About datasheet table —
   framed with a top rule, a rule under every row, and weight-600 values.
   The earlier "flat white, no borders" pass over-corrected: it removed the
   grey card but also the structure that made the table read as a table. */
.pdp-spec-table {
  background: transparent;
  border-radius: 0;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* PO item 15: no border-top — the floating hairline read as clutter
     (fewer-lines compaction pattern); the table melts into the ground in
     BOTH design and freeflow modes. */
  margin-top: 0.25rem;
}

/* UB 8115327 — text | value | unit, three columns with a fixed unit rail so
   every row's unit starts at the same x (see .pdp-arrester-spec-row). */
.pdp-spec-row {
  display: grid;
  /* Label gets the lion's share (Tony 2026-07-28: "Is Short Circuit
     Current" was wrapping to three lines in a ~90px column while the value
     column took everything). minmax(0,·) lets both text columns shrink
     instead of forcing overflow; the unit rail stays fixed so every unit
     starts at the same x. */
  /* auto value column: it sizes to its content (an SE code, a date, a
     number) and the LABEL absorbs the remainder — the reverse starves
     long identifiers and breaks them mid-token. Both columns can still
     shrink (minmax 0) so nothing overflows the narrow PDP panel. */
  /* Label floor: minmax(0,1fr) hands the label only the REMAINDER after the
     value's max-content — in a narrow rail that remainder is 0px and the
     label text paints over the value (seen live: "GrouNot insulated…").
     min(30%, 8rem) guarantees the label a readable floor at any rail width
     while long values wrap instead of stealing the whole track.
     D2 (ui-release): the floor came down 40%→30% after the w1024/20px audit
     cell shattered "27149317_1601" across three lines. Both columns are
     squeezed there, so one has to give — and a LABEL is prose that wraps
     gracefully ("Um Highest Voltage Of Equipment" over two lines still
     reads), while a VALUE is an atomic identifier that becomes unreadable
     the moment it breaks mid-token. So the label yields the remainder to the
     value. 30% is still ~5rem at the narrowest audited rail — far from the
     0px collapse the floor exists to prevent (A8). */
  grid-template-columns: 1fr 1fr minmax(0, min-content);
  align-items: baseline;
  gap: 1rem;
  /* Tony review 2026-07-28: match About's compact rhythm — About is
     0.9375rem/1.6 prose, so 0.875rem row padding + a divider on every row
     made Specifications read heavy and loose beside it. Tighter padding,
     hairline dividers. */
  padding: 0.625rem 0;
  border-bottom: 1px solid #e6e6e6;
}
/* (Two duplicate `.pdp-spec-unit` rules used to sit here — the second silently
   overrode the first's clamp() with a fixed 0.875rem. Both are gone: the unit
   column is `.pdp-spec-unit-cell`, defined once below. D2.) */

.pdp-spec-row:first-child {
  padding-top: 0;
}

.pdp-spec-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.pdp-spec-label {
  font-size: clamp(0.81rem, calc(1 * var(--vwx)), 0.88rem);
  font-weight: 400;
  line-height: 1.45;
  color: #6b6b6b;
  margin-right: 2rem;
}

.pdp-spec-value-cell {
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 600;
  line-height: 1.45;
  color: #242424;
  text-align: right;
  /* Tony review 2026-07-28: `overflow-wrap: anywhere` shattered identifiers
     mid-token ("RZA-CB-FRAME_678041" became three lines). break-word only
     breaks a word that genuinely cannot fit, so codes stay whole and long
     prose values still wrap instead of overflowing. */
  overflow-wrap: break-word;
  /* UB 8144339 asked for `white-space: nowrap; overflow: hidden;
     text-overflow: ellipsis` here plus a hover tooltip. The tooltip shipped
     (the renderer puts the full value in `title` — product_page.dart), the
     ellipsis deliberately did NOT. Measured on 11 arrester PDPs at 853x480:
     zero value cells overflow their track today, but 7 of 11 have a
     Specifications value that WRAPS to two fully-readable lines
     ("Not insulated, 3 hole, ø 200 - 254 mm (7.87"-10")"), and the
     frame-contract payment terms run to three. `nowrap` would convert every
     one of those into a truncated line — hiding technical data that fits
     today, behind a hover that touch devices do not have.
     The rest of 8144339 is already satisfied by .pdp-spec-row's grid: the
     label takes the remainder, the value is right-aligned flush against a
     unit rail fixed at 2.5rem, so units share one x. Do NOT re-cut that as
     flex with a `white-space: nowrap` label — the label's
     minmax(min(30%, 8rem), 1fr) floor is what stops a long label painting
     over the value ("GrouNot insulated…"), and nowrap defeats it. */
}

/* Third spec column: the unit (Userback 8115327 — label | value | unit,
   matching the technical data sheet). Present on EVERY row of a table that
   resolved any unit (empty for unit-less rows like SE Code) so all values
   share one right edge; .pdp-spec-row's third grid track keeps the units
   aligned to one x.
   D2: this is now the ONLY unit-cell rule and the only class the renderer
   emits. It previously coexisted with two `.pdp-spec-unit` rules (a different
   class name, duplicated), so the class in the markup and the class carrying
   the sizing had drifted apart — the `flex: 0 0 3.5rem` here was dead the
   moment .pdp-spec-row became a grid, and the live styling came from the
   duplicate instead. */
.pdp-spec-unit-cell {
  font-size: clamp(0.81rem, calc(1.4 * var(--vwx)), 0.94rem);
  font-weight: 400;
  line-height: 1.375rem;
  color: #6b6b6b;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
}

/* Provenance footnote inside a spec table (e.g. Supply & Logistics →
   "SAP material P3R… · synced 16 Jun 2026"). Quiet, full-width, below the
   last row. */
.pdp-spec-footnote {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #6b6b6b;
  padding: 0.5rem 0 0;
  margin-top: 0.25rem;
  border-top: 1px solid #ededed;
}

/* Availability line atop the Availability & Logistics table ("In stock —
   146 pieces" / "Made to order"): a small dot + text, in the PLP stock
   badge's palette (.product-stock-badge--in / --mto) so the two surfaces
   agree on colour and wording. Sits inside .pdp-spec-table above the rows. */
.pdp-sap-availability {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0 0.625rem;
  border-bottom: 1px solid #e6e6e6;
  font-size: clamp(0.85rem, calc(1.4 * var(--vwx)), 0.94rem);
  font-weight: 600;
  line-height: 1.375rem;
  color: #1c6b3c;
}
.pdp-sap-availability--mto {
  color: #8a5a00;
}
.pdp-sap-availability-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #2f9e5f;
}
.pdp-sap-availability--mto .pdp-sap-availability-dot {
  background: #d99a2b;
}
/* The availability line is now the table's first child, so the first spec
   row keeps its top padding (the :first-child zero above no longer hits it). */
.product-detail--design .pdp-sap-availability {
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e3e3e3;
}

/* Downloadable document value (e.g. Frame Contract PDF): icon + truncated
   name on one line so a long filename never overflows or overlaps the label.
   Full name is available via the title tooltip. */
.pdp-spec-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  color: var(--se-interactive, #009999);
  text-decoration: none;
  font-weight: 500;
}
.pdp-spec-doc-link:hover {
  text-decoration: underline;
}
.pdp-spec-doc-link svg {
  flex: 0 0 auto;
}
.pdp-spec-doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* === D10 — PDP design-frame presentation (?pdplayout=design, DEFAULT) ===
   Frame 18964-196672: the RIGHT rail is (slightly) WIDER than the image
   column; the left column is compact identity (eyebrow + title + SE code);
   the right rail carries tabs → short description → SELECTED VARIANT →
   accordions (SPECIFICATIONS open, framed label:value card) → always-open
   Downloads → buy row. ?pdplayout=freeflow keeps the previous flow; every
   rule here is scoped under .product-detail--design so freeflow is
   byte-identical to before. */

/* Column ratio — frame measures left 580 / right 596 at 1280 (right wider).
   Same wrap behaviour as the base rules: columns stack when the row runs
   out of room (effective-width, no width media query). */
.product-detail--design .product-gallery-container {
  flex: 1 1 18rem;
}

/* PO item 13 — sticky left column: gallery + identity stay put while the
   right info/config rail scrolls. In-flow sticky CONTENT column (doctrine:
   the fixed-chrome budget covers overlays, not sticky columns). Gated on
   the row actually being two columns: below 48rem of row width the columns
   stack, and a sticky first block would ride down COVERING the rail
   (learned on the PLP filter rail) — so the sticky only engages in the
   2-col layout via a container query on the row.

   ⚠ "Probed live: zero fixed descendants inside .product-detail" — that was
   only true with the image lightbox CLOSED. `.gallery-lightbox` is a
   position:fixed descendant, and the sticky below caged it (see the escape
   hatch — search `:has(.gallery-lightbox)`). The containment itself is
   fine — Blink does not make a container-type element a stacking context, and
   it no longer establishes a containing block for fixed descendants — but the
   sticky does, so the escape hatch has to outrank THIS rule. It does, at
   (0,3,0). Keep it that way if you touch either. */
.product-detail--design {
  container-type: inline-size;
  container-name: pdpdetail;
}
@container pdpdetail (min-width: 48rem) {
  .product-detail--design .product-gallery-container {
    position: sticky;
    top: 5rem;
    align-self: flex-start;
  }
}
/* Short-viewport degrade (sanctioned height tier): at ≤35rem viewport
   height the fold is too shallow to pin half the page — unstick, page
   flows normally (cart-summary precedent). */
@media (max-height: 35rem) {
  .product-detail--design .product-gallery-container {
    position: static;
  }
}

/* Compact identity under the image — tighter than the freeflow left rail
   (no description/spec block between title and the fold). R6: identity
   text measures cap at ~65ch. */
.product-detail--design .pdp-title-specs {
  max-width: 65ch;
}
.product-detail--design .pdp-info-subtitle,
.product-detail--design .pdp-info-description {
  max-width: 65ch;
}

/* Accordion headers — the frame's section titles are UPPERCASE and carry
   more weight ("SPECIFICATIONS"), with the open/close chevron muted. */
.product-detail--design .pdp-accordion-title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1rem, calc(1.8 * var(--vwx)), 1.44rem);
  letter-spacing: 0.01em;
}
.product-detail--design .pdp-accordion-chevron {
  color: #969696;
}

/* Always-open section (Downloads): header is a heading, not a control. */
.pdp-accordion--static .pdp-accordion-header {
  cursor: default;
}
.pdp-accordion--static .pdp-accordion-header:hover .pdp-accordion-title {
  color: #242424;
}

/* Specifications — Figma 19755-34741: flat table, per-row hairlines,
   8px vertical rhythm, 16px label+value, label #3d3d3d (not grey). */
.product-detail--design .pdp-spec-table {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.product-detail--design .pdp-spec-row {
  border-bottom: 1px solid #e3e3e3;
  padding: 0.5rem 0.5rem;
  gap: 0.5rem;
}
.product-detail--design .pdp-spec-row:last-child {
  border-bottom: none;
}
.product-detail--design .pdp-spec-row:has(.pdp-spec-value-cell) {
  padding: 0.5rem 0;
}
.product-detail--design .pdp-spec-label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #3d3d3d;
}
.product-detail--design .pdp-spec-value-cell {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: #3d3d3d;
}
.product-detail--design .pdp-spec-unit-cell {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #737373;
  min-width: 2rem;
  width: 2rem;
}

/* SELECTED VARIANT — heading + a small bordered chip naming the resolved
   variant, chevron at the row's far right (jump to CONFIGURATION). */
.pdp-selected-variant {
  margin: 0 0 clamp(1rem, calc(2 * var(--vwx)), 1.75rem);
}
.pdp-selected-variant-heading {
  font-size: clamp(0.94rem, calc(1.4 * var(--vwx)), 1.13rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #242424;
  margin-bottom: 0.75rem;
}
.pdp-selected-variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.pdp-selected-variant-row.clickable {
  cursor: pointer;
}
.pdp-selected-variant-card {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 600;
  color: #242424;
  overflow-wrap: anywhere;
}
.pdp-selected-variant-chevron {
  display: flex;
  align-items: center;
  color: #969696;
  flex-shrink: 0;
}
.pdp-selected-variant-row.clickable:hover .pdp-selected-variant-chevron {
  color: #242424;
}

/* G9b — live pricing call failed for a listing-indexed-priced product:
   muted explicit error + retry link in the buy row (never silent
   quote-mode, never the unconfirmed index price). */
.pdp-price-error {
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 600;
  color: #8a8a8a;
}
.pdp-price-retry {
  background: none;
  border: none;
  padding: 0;
  font-size: clamp(0.81rem, calc(1 * var(--vwx)), 0.94rem);
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.pdp-price-retry:hover {
  color: #333333;
}

/* "+n" configuration count beside the price label — SEBadge neutral/filled.
   Replaces the meta strip's "Base Version + n" line, which no longer renders
   in this layout. */
.purchase-bar .pdp-config-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border: 1px solid #fff;
  border-radius: 62.4375rem;
  background: #262626;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 700;
}

/* Lead time chip on the left info column — hidden in design mode (moved into buy box) */
.product-detail--design .pdp-leadtime-chip {
  display: none;
}

/* ── Price conditions flag + popover (Figma 19878:229697) ─────────────────
   The red `!` after the price. Everything the caption under the number used
   to say now lives behind it. */
.purchase-bar--product .pdp-price-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border: 1px solid #fff;
  border-radius: 62.4375rem;
  background: #e3e3e3;
  color: #737373;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.purchase-bar--product .pdp-price-flag:hover {
  background: #b1353b;
  color: #fff;
}

/* Native popover: in the TOP LAYER, so it is not trapped by the buy box's
   backdrop-filter (which is a containing block for positioned descendants).
   `inset: auto` clears the UA's `inset: 0` centring before we place it. */
.pdp-price-popover {
  margin: 0;
  padding: 0.1875rem 0.625rem;
  border: 1px solid #ebebeb;
  border-radius: 0.375rem;
  background: #fff;
  color: #666;
  font-size: 0.875rem;
  line-height: 1.375rem;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0) inset,
    0 0.875rem 1.625rem 0 rgba(0, 0, 0, 0.1),
    0 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.09);
  max-width: min(21rem, calc(90 * var(--vwx)));
  max-height: min(60vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The popover is a DOM descendant of .purchase-bar__stats, which sets
     `white-space: nowrap` to keep the bar on one line. Inheriting that here
     stopped the terms wrapping and pushed them out of the panel. */
  white-space: normal;
  text-align: left;
}

/* Fallback placement for engines without CSS anchor positioning: pinned just
   above the sticky buy box, which lives at the bottom-right of the column. */
.pdp-price-popover:popover-open {
  position: fixed;
  inset: auto;
  right: clamp(1rem, calc(3 * var(--vwx)), 3rem);
  bottom: -2.75rem;
}

/* Where supported, anchor it to the flag itself and let the browser flip it
   into whichever side has room. */
@supports (anchor-name: --a) {
  /* Anchored to the BAR, not to the flag: anchoring to the flag put the panel
     over the bar's own labels, since the flag sits on the bar's lower line.
     Off the bar's top edge it clears the whole cluster, and the browser flips
     it below if the bar is ever near the top of the viewport. */
  .purchase-bar--product {
    anchor-name: --purchase-bar;
  }
  .pdp-price-popover:popover-open {
    position-anchor: --purchase-bar;
    position-area: block-start span-inline-start;
    position-try-fallbacks: block-end span-inline-start;
  }
}

.pdp-price-popover__title {
  font-size: 0.875rem;
  line-height: 1.375rem;
  font-weight: 700;
  color: #262626;
  margin-bottom: 0.5rem;
}

.pdp-price-popover__validity {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #3d3d3d;
}

/* The caption reuses .pdp-price-validity, whose buy-box rules right-align and
   shrink it — undo that here, it is body copy in this context. */
.pdp-price-popover .pdp-price-validity {
  display: block;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #666;
  text-align: left;
}

.pdp-price-popover__terms {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f2f2f2;
}

.pdp-price-popover__row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.pdp-price-popover__label {
  flex: none;
  width: 7.5rem;
  color: #737373;
}

.pdp-price-popover__value {
  flex: 1 1 auto;
  min-width: 0;
  color: #262626;
  overflow-wrap: anywhere;
}

/* Sticky bottom bar — overlaps tab content via negative margin for glass
   effect. Still emitted by budget-tool / transformer pages; the PDP itself
   uses .purchase-bar above (D1). */
.pdp-bottom-bar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  padding: clamp(1rem, calc(2 * var(--vwx)), 1.5rem)
    clamp(1rem, calc(2 * var(--vwx)), 1.5rem);
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-top: -6.25rem;
}

/* (.pdp-bottom-bar--config removed — it existed to stop the PDP bar's
   pull-up painting over the CONFIGURATION option list; the PDP no longer
   emits a bottom bar at all (D1 buy box), and no other page uses the
   modifier.) */

/* The scroll rail reserves 6.25rem of bottom padding for the pulled-up bar.
   On the configuration tab the bar sits BELOW the content (no pull-up), so
   that reservation becomes dead space that pushes the taller option list out
   of the fixed-height column — leaving the first group hidden behind the bar.
   Drop the reservation and let the flex column size the two children. */
.pdp-tab-content--config {
  padding-bottom: clamp(1rem, calc(2 * var(--vwx)), 1.5rem);
}

/* The CONFIGURATION tab is a long form (9 option groups ≈ 3200px), but
   .product-detail is a viewport-locked row (`overflow: hidden`, `min-height: 0`)
   sized for the short INFORMATION rail — it left the rail ~200px tall and clipped
   the first option group. Release the lock on this tab only and let the option
   list flow in the document, exactly as `.tool-sales-page-configure` already does
   for the tool-sales configurator. INFORMATION keeps the locked two-pane layout. */
/* Specificity note (same trap documented at the `.product-detail` media-query
   override below): the viewport lock is set by `.product-page > .product-detail`
   (0,2,0), so a bare `.product-detail--config` (0,1,0) LOSES and the row stays
   `height: 100vh; overflow: hidden`, clipping the expanded option list. Match the
   child-combinator form so this actually wins. */
.product-page > .product-detail--config,
.product-detail--config {
  overflow: visible;
  height: auto;
  min-height: 0;
  align-items: start;
}

.product-detail--config .product-gallery-container,
.product-detail--config .product-info-container,
.product-detail--config .pdp-tab-content {
  overflow: visible;
  height: auto;
  max-height: none;
}

.product-detail--config .pdp-tab-content {
  flex: none;
}

/* The gallery is much shorter than the option list on this tab — keep it in view
   while the buyer works down the form (mirrors the configurator-first intent of
   `.product-detail--arrester`). */
/* Sticky gallery at every width — in single-column flow the cell is
   content-sized so sticky is inert; no breakpoint needed.
   ⚠ Sticky creates a stacking context that cages the image lightbox — the
   `:has(.gallery-lightbox)` escape hatch (search that selector) must keep outranking
   this rule. */
.product-detail--config .product-gallery-container {
  position: sticky;
  top: 1rem;
}

/* Config code can be long (C1BK3AV1FG-1/WITH/C5/40) — keep it on one line and
   ellipsize (full value stays available via the title attribute) rather than
   wrapping and pushing the meta strip into the option list above. */
.pdp-config-code {
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Meta strip: company badge + delivery label on first row, version label below */
.pdp-bottom-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
}

.pdp-bottom-meta-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
}

/* Action row: buttons on left, price on right. Long prices (BRL
   1.503.857,01 R$) must never clip at the container edge — let the row
   wrap so the price drops to its own line instead of overflowing. */
.pdp-bottom-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

/* Groups cart+offer buttons with optional assisted-selling controls */
.pdp-bottom-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* The out-of-stock line takes its own row above the buttons. Without this the
   row stays `nowrap` and the bar runs past the viewport's right edge — the
   same trap the `.pdp-btn-group:has(.pdp-offer-btn)` rule was written for and
   loses the cascade to. Scoped with :has so nothing else in the bar moves. */
.pdp-bottom-left:has(.pdp-out-of-stock-line) {
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 100%;
  /* `.pdp-bottom-left` is flex-shrink: 0, so with wrap on it kept the button
     row's natural 605px inside a 554px slot and the text ran past the buy
     box. Let this one case shrink. */
  flex-shrink: 1;
  min-width: 0;
}

.pdp-btn-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* When an offer button is present, put it on its own row above the stepper+cart */
.pdp-btn-group:has(.pdp-offer-btn) {
  flex-wrap: wrap;
}
.pdp-btn-group:has(.pdp-offer-btn) > div:not(.pdp-qty-stepper) {
  flex-basis: 100%;
}

/* "Request an offer" — outlined secondary button */
.pdp-offer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 0.75rem;
  height: 3.25rem;
  padding: 0.8125rem 1.25rem 0.9375rem;
  color: #6b6b6b;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.pdp-offer-btn:hover {
  background: #f6f6f6;
}

.pdp-offer-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.pdp-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.25rem;
  padding: 0.8125rem 1.25rem 0.9375rem;
  background: #242424;
  border: 1px solid #6b6b6b;
  border-radius: 0.75rem;
  box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.06);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.pdp-cart-btn:hover {
  background: #3a3a3a;
}

.pdp-cart-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* No variant resolves for the chosen option combination (sparse matrix — e.g.
   Polo Completo has no 3AP1 FG at 550 kV). The button is inert; make it LOOK
   inert instead of a live CTA that silently does nothing. */
.pdp-cart-btn.disabled,
.pdp-cart-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Shown in place of the price when the selected combination does not exist —
   never fall back to the first variant's price under a different selection. */
.pdp-price-unavailable {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #6b7280;
}

/* Caption under the gallery when the product photo is a stand-in for a
   related part, not the exact part being sold. */
.pdp-image-disclaimer {
  font-size: 0.8125rem;
  font-style: italic;
  color: #6b7280;
  margin-top: 0.5rem;
}

.pdp-cart-btn svg {
  flex-shrink: 0;
}

.pdp-cart-count {
  font-size: 1rem;
  font-weight: 700;
  color: #c9c9c9;
  line-height: 1.5rem;
}

.pdp-cart-message {
  font-size: 0.875rem;
  font-weight: 600;
}

.pdp-cart-message.success {
  color: #10b981;
}

.pdp-cart-message.error {
  color: #ef4444;
}

.pdp-price-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Assisted-selling action group on the PDP: keep the "Add to Offer" button
   and the "Assisting: <customer>" caption tight together so the panel reads
   as one block instead of floating loosely in the right rail. */
.offer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}
.offer-context-info {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--se-text-muted, #6b7280);
}
.offer-context-info svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.pdp-price-label-row {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.pdp-price-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: #c9c9c9;
  line-height: 1.375rem;
  text-transform: uppercase;
}

.pdp-price-config-count {
  font-size: 0.875rem;
  font-weight: 400;
  color: #c9c9c9;
  line-height: 1.375rem;
}

.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.pdp-price-value {
  font-size: clamp(1.125rem, calc(1.5 * var(--vwx)), 1.5rem);
  font-weight: 700;
  color: #6b6b6b;
  line-height: clamp(1.5rem, calc(2 * var(--vwx)), 1.875rem);
}

.pdp-price-unit {
  font-size: clamp(1.125rem, calc(1.5 * var(--vwx)), 1.5rem);
  font-weight: 400;
  color: #9e9e9e;
  line-height: clamp(1.5rem, calc(2 * var(--vwx)), 1.875rem);
}

.product-category-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  width: fit-content;
}

.product-page .product-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.3;
}

.product-material {
  display: flex;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.product-material .label {
  color: var(--color-gray-500);
}

.product-material .value {
  color: var(--color-gray-900);
  font-weight: 500;
}

.product-price-section {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-current .price-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  margin-bottom: var(--spacing-1);
}

.price-current .price-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
}

.price-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  background: #7c3aed;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.product-lead-time-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.product-specs-section {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-specs-section h3 {
  background: var(--color-gray-50);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.specs-table {
  padding: var(--spacing-2) 0;
}

.specs-table .spec-row {
  display: flex;
  padding: var(--spacing-2) var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-100);
}

.specs-table .spec-row:last-child {
  border-bottom: none;
}

.specs-table .spec-label {
  flex: 1;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.specs-table .spec-value {
  flex: 1;
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.product-actions-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.quantity-selector label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
}

.qty-controls {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
}

.qty-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
}

.qty-btn:hover {
  background: var(--color-gray-100);
}

.qty-input {
  width: 3.75rem;
  height: 2.5rem;
  border: none;
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: var(--spacing-3);
}

.action-buttons .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-gray-900);
  border: 2px solid var(--color-gray-300);
}

.btn-secondary:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.secondary-actions {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.btn-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 0;
}

.btn-link:hover {
  text-decoration: underline;
}

.product-description-section {
  background: var(--color-gray-50);
  padding: var(--spacing-12) 0;
  margin-top: var(--spacing-12);
}

.product-description-section h2 {
  margin-bottom: var(--spacing-4);
}

.description-content {
  line-height: 1.7;
  color: var(--color-gray-700);
}

.description-content table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.description-content table td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.description-content table tr:last-child td {
  border-bottom: none;
}

.related-products-section {
  padding: var(--spacing-12) 0;
}

.related-products-section h2 {
  margin-bottom: var(--spacing-2);
}

/* === Offer Page === */
.offer-page {
  max-width: 50rem;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-4);
}

/* === Responsive === */
/* (PDP height-lock release moved to the base rules — no breakpoint.) */

/* === Filter Sidebar Styles === */
.filters-sidebar {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.filter-section {
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.filter-section:first-child {
  padding-top: 0;
}

.filter-section:last-child {
  border-bottom: none;
}

.filter-section h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-800);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-3);
}

/* Search Input */
.search-input-wrapper {
  display: flex;
  gap: var(--spacing-2);
}

.filter-search-input {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.filter-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
}

.search-btn {
  padding: var(--spacing-2);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.search-btn:hover {
  background: var(--color-primary-dark);
}

/* Category List */
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  margin-bottom: var(--spacing-1);
}

.category-item.active > .category-header .category-btn {
  color: var(--color-primary);
  font-weight: 600;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.category-btn {
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: color 0.2s;
}

.category-btn:hover {
  color: var(--color-primary);
}

.expand-btn {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.expand-btn:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

.subcategory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: var(--spacing-4);
  margin-top: var(--spacing-1);
}

.subcategory-item {
  margin-bottom: var(--spacing-1);
}

.subcategory-item.active .category-btn {
  color: var(--color-primary);
  font-weight: 500;
}

.subcategory-item .category-btn {
  font-size: var(--font-size-xs);
}

/* Category count badges */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.125rem;
  padding: 0 0.375rem;
  margin-left: var(--spacing-2);
  background: var(--color-gray-200);
  color: var(--color-gray-600);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.category-item.active .count-badge,
.subcategory-item.active .count-badge {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Empty categories */
.category-item.empty,
.subcategory-item.empty {
  opacity: 0.5;
}

.category-btn.disabled {
  cursor: not-allowed;
  color: var(--color-gray-400);
}

.category-btn.disabled:hover {
  color: var(--color-gray-400);
}

/* Filter Options (Radio/Checkbox) */
.filter-options {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-options li {
  margin-bottom: var(--spacing-2);
}

.radio-label,
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.radio-label input,
.checkbox-label input {
  accent-color: var(--color-primary);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.radio-label:hover,
.checkbox-label:hover {
  color: var(--color-gray-900);
}

/* Clear Filters Button */
.btn-clear-filters {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear-filters:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
  color: var(--color-gray-800);
}

/* Compare Section */
.compare-empty {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-style: italic;
}

/* Active Filters Bar */
.active-filters-bar {
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--spacing-3) 0;
}

.active-filters-bar .container {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.active-filters-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-600);
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.remove-filter {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: var(--font-size-base);
  line-height: 1;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.remove-filter:hover {
  opacity: 1;
}

/* === Product Configuration Styles === */
.product-badges {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
  flex-wrap: wrap;
  align-items: center;
}

/* Configurable and variants badges */
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.19rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.product-badge.configurable-badge {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4338ca;
  border: 1px solid #a5b4fc;
}

.product-badge.configurable-badge svg {
  animation: spin-slow 8s linear infinite;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.product-badge.variants-badge {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
}

/* Availability indicator */
.config-pattern-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
}

.config-pattern-badge.pattern-static {
  background: #e9d5ff;
  color: #7c3aed;
}

.config-pattern-badge.pattern-budgetary {
  background: #dbeafe;
  color: #2563eb;
}

.config-pattern-badge.pattern-simple {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

.product-sku {
  margin-bottom: var(--spacing-4);
  font-family: monospace;
}

.sku-label {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.sku-value {
  color: var(--color-gray-800);
  font-weight: 500;
}

/* Product Configuration Section */
.product-config-section {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.config-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-4);
}

.config-title svg {
  color: var(--color-primary);
}

.config-options-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Dropdown axes sit SIDE BY SIDE — Tony: "2 dimensions showing the same
   style of variant dropdown as figma, but two next to each other is the
   right output". Two dimensions read as one configuration when they share a
   row; stacked, they read as two unrelated questions. Applied only to the
   dropdown form, so the card/pill layouts are untouched. Wraps on narrow
   viewports rather than squeezing two selects into a phone width. */
.config-options-grid:has(.config-select) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
}
.config-options-grid:has(.config-select) > .config-option {
  flex: 1 1 16rem;
  min-width: 0;
}
/* The divider between axes is a stacked-layout device; in a row it becomes a
   stray line between two columns. */
.config-options-grid:has(.config-select) > .config-section-divider {
  display: none;
}

.config-option {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.config-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.config-select {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  /* 1px neutral border + inherit body font — was a 2px border + monospace, which made the one
     form control the customer touches read as a code field rather than a normal form input. */
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: inherit;
  background: white;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.config-select:focus {
  outline: none;
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.config-select:hover {
  border-color: var(--color-gray-400);
}

/* Per-axis variant button row (multi-dimensional configurators like Pedro's
 * Brazil prototype). One row per option axis; each value is a clickable button.
 * The selected button gets the primary accent. Wraps on narrow viewports. */
.config-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

/* Dropdown form of a configuration axis — used past four values, where a
   pill row stops being scannable (see utils/axis_control_kind.dart). Same
   house form controls as the rest of checkout: no new visual language for
   what is still just "pick one value on this dimension". */
/* The INFORMATION tab's inline variant selector — the same two dropdowns as
   CONFIGURATION, so a buyer can pick without changing tabs. Sits above the
   info content with a rule beneath it, so it reads as part of choosing the
   product rather than as another content section. */
.pdp-inline-config {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #ececec;
}

.config-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
/* Styled to MATCH .pdp-selected-variant-card exactly (Tony): same padding,
   border, radius, shadow, weight and colour. The dropdown IS the selected
   variant now — showing a separate "Selected variant" card beside it would
   state the same fact twice, so that card is suppressed whenever these
   render. Values below are copied deliberately rather than shared, because
   a <select> cannot inherit the card's inline-flex layout; if one moves the
   other must too. appearance:none removes OS-native chrome (macOS button
   look) so our border/radius/shadow actually apply. */
.config-select {
  width: 100%;
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  font-family: inherit;
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 600;
  color: #242424;
  background: #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 0.875rem center;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.config-select:hover {
  border-color: #bbb;
}
.config-select:focus-visible {
  outline: 2px solid #641e8c;
  outline-offset: 1px;
}
/* Variant picker on the PDP CONFIGURATION tab (flat-dropdown fallback path).
   Re-uses plpSortDropdown but scoped to fill the option column and hide the
   "Sort by" label — only the selected value + chevron are visible. */
.config-variant-dropdown .sort-dropdown {
  width: 100%;
  height: auto;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  gap: 0;
}
.config-variant-dropdown .sort-dropdown-header {
  padding: 0.625rem 1rem;
  height: auto;
}
.config-variant-dropdown .sort-dropdown-label {
  display: none;
}
.config-variant-dropdown .sort-dropdown-value {
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 600;
  color: #242424;
  flex: 1;
}
.config-variant-dropdown .view-toggle__divider {
  display: none;
}
.config-variant-dropdown .sort-dropdown-panel {
  top: calc(100% + 0.25rem);
  min-width: 100%;
  left: 0;
  right: auto;
}
/* The legend for the "*" marker. A pill carries "not available with the
   current selection" in a dashed border and a title attribute; a <select>
   option can carry neither, so the fact is stated once beneath the control
   rather than dropped. */
.config-select-note {
  font-size: 0.8125rem;
  color: #6b6b6b;
}

.config-button {
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--color-gray-300);
  border-radius: 0.375rem;
  background: white;
  color: var(--color-gray-900);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  min-width: 2.75rem;
}

.config-button:hover {
  border-color: var(--color-primary);
}

.config-button.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

/* Sparse variant matrix: this value can't combine with what's already
   selected on other axes. Grayed out + not clickable, so the buyer never
   discovers a dead end by trial-and-error. */
.config-button.unavailable {
  border-color: var(--color-gray-200);
  background: var(--color-gray-50);
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.config-button.unavailable:hover {
  border-color: var(--color-gray-200);
}

.config-row-notice {
  font-size: clamp(0.75rem, calc(0.95 * var(--vwx)), 0.875rem);
  color: var(--color-gray-600, #525252);
  margin-top: 0.5rem;
}

/* Same rule as .config-card.unavailable.selectable above. */
.config-button.unavailable.selectable {
  cursor: pointer;
  border-style: dashed;
  background: transparent;
}

.config-button.unavailable.selectable:hover {
  border-color: var(--color-gray-500, #737373);
  color: var(--color-gray-700, #404040);
}

.config-section-divider {
  height: 1px;
  background: var(--color-gray-200);
  margin: 0.75rem 0 0.25rem;
  width: 100%;
}

/* Service Inspection — DJ + SEC numeric inputs styled to match
 * .config-select. Sits inside a config-option; the row layout puts the
 * two fields side-by-side on desktop and stacks them on mobile. */
.pdp-si-qty-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.pdp-si-qty-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.pdp-si-qty-field label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pdp-si-qty-field input[type="number"] {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: monospace;
  background: white;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.pdp-si-qty-field input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
}

.pdp-si-qty-field input[type="number"]:hover {
  border-color: var(--color-gray-400);
}

/* ─── Service Inspection input restyle ───────────────────────────────────
 * The default .config-select look (heavy 2px border + monospace) is loud
 * for SI's mostly-Portuguese form copy and clashes with the rest of the
 * Siemens-Sans PDP. Inside .pdp-config-tab--si we override the selects and
 * the DJ/SEC qty inputs to use the budget-tool aesthetic (underline-only,
 * Siemens Sans) so the SI configurator visually belongs to the same
 * family as the budget tool / Magento Brazilian forms. The standard
 * .config-select used by builder products and other PDPs is untouched.
 */
.pdp-config-tab--si .config-field-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #4a4a4a;
  margin-bottom: 0.375rem;
  line-height: 1.3;
}

.pdp-config-tab--si .config-select {
  width: 100%;
  height: 2.5rem;
  padding: 0 1.5rem 0.25rem 0;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  font-size: 0.9375rem;
  font-family: var(--font-family);
  color: #1a1a1a;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.pdp-config-tab--si .config-select:focus {
  border-bottom-color: #009999;
  border-bottom-width: 2px;
  padding-bottom: 0.19rem;
  box-shadow: none;
}

.pdp-config-tab--si .config-select:hover {
  border-bottom-color: #888;
}

.pdp-config-tab--si .config-select:disabled {
  color: #999;
  cursor: not-allowed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.pdp-config-tab--si .pdp-si-qty-field label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #4a4a4a;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pdp-config-tab--si .pdp-si-qty-field input[type="number"] {
  width: 100%;
  height: 2.5rem;
  padding: 0 0 0.25rem;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  font-size: 0.9375rem;
  font-family: var(--font-family);
  color: #1a1a1a;
  background: transparent;
  outline: none;
  transition: border-color 0.2s;
}

.pdp-config-tab--si .pdp-si-qty-field input[type="number"]:focus {
  border-bottom-color: #009999;
  border-bottom-width: 2px;
  padding-bottom: 0.19rem;
  box-shadow: none;
}

.pdp-config-tab--si .pdp-si-qty-field input[type="number"]:hover {
  border-bottom-color: #888;
}

.pdp-config-tab--si
  .pdp-si-qty-field
  input[type="number"]::-webkit-inner-spin-button,
.pdp-config-tab--si
  .pdp-si-qty-field
  input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-config-tab--si .pdp-si-qty-field input[type="number"] {
  -moz-appearance: textfield;
}

.pdp-config-tab--si .config-field-helper {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.375rem;
}

/* Helper text below SI selects/inputs (e.g. "Total: 11 · Faixa: 11-20"). */
.config-field-helper {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-top: var(--spacing-2);
  margin-bottom: 0;
  line-height: 1.4;
}

/* Overflow warning ("Mais de 20 ativos? Solicite cotação"). */
.config-field-helper-warn {
  color: #b45309; /* amber-700 */
  font-weight: 600;
}

/* RFQ CTA shown when total qty > 20 (Magento parity: "Sob Consulta"). */
.pdp-si-quote-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-4);
  background: white;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}

.pdp-si-quote-cta:hover {
  background: var(--color-primary);
  color: white;
}

/* Configuration Summary */
.config-summary {
  background: #dcfce7;
  border: 2px solid #22c55e;
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
}

.config-summary-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #166534;
  margin-bottom: var(--spacing-2);
}

.config-summary-header svg {
  color: #22c55e;
}

.config-summary-sku {
  font-family: monospace;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-1);
}

.config-summary-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Builder field title */
.config-field-title {
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #242424;
  margin-bottom: 1.5rem;
  line-height: 1.375rem;
}

/* Divider between config sections */
.config-section-divider {
  width: 100%;
  height: 1px;
  background: #f0f0f0;
  margin: clamp(1.5rem, calc(3 * var(--vwx)), 3.75rem) 0;
}

.config-required {
  color: #dc2626;
}

/* Price delta badge */
.config-price-delta {
  font-size: clamp(0.75rem, calc(1 * var(--vwx)), 0.88rem);
  font-weight: 700;
  white-space: nowrap;
  color: #6b6b6b;
  align-self: flex-end;
}

/* Checkbox group */
.config-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.config-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0.75rem clamp(0.81rem, calc(1.1 * var(--vwx)), 1rem);
  transition: background 0.15s;
}

/* Add-on services */
.config-addons-header {
  margin: 1.25rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.config-addons-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
}

.config-addons-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.config-addon-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 0.625rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.config-addon-card:hover {
  border-color: #1a1a1a;
}

.config-addon-card.selected {
  border-color: #1a1a1a;
  background: rgba(0, 153, 153, 0.04);
}

.config-addon-check {
  flex-shrink: 0;
}

.config-addon-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.config-addon-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #242424;
}

.config-addon-sku {
  font-size: 0.75rem;
  color: #888;
  font-family: monospace;
}

.config-addon-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Full-width row-based option selector (Figma design) */
.config-row-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Colours here are the Figma frame's, measured off the 2x export rather than
   judged by eye (Tony's call, 2026-08-26):
     border  rgb(207,207,207) = #cfcfcf   — #f0f0f0 dissolved into the page
     price   rgb(38,38,38)    = #242424   — #6b6b6b read as a footnote
     filled  rgb(36,36,36)    = #242424 with a white label, not #2e2e2e/#c9c9c9
   The export is 2x, so every px in it is half what it looks like — see the
   card-height note on .config-card--row. */
.config-card {
  width: 100%;
  padding: clamp(0.75rem, calc(1.2 * var(--vwx)), 1rem);
  border: 1px solid #cfcfcf;
  border-radius: 1rem;
  color: #242424;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, calc(1 * var(--vwx)), 0.75rem);
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  background: #fff;
}

.config-card.selected {
  border-color: #242424;
  background: #242424;
  color: #ffffff;
}

/* Presets — one-click starting points over the option groups. Same card
   chrome as an option, but laid out as wrapping chips (they're shortcuts,
   not a mutually-exclusive axis) and sized to their label. */
.config-row-options--presets {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.config-card--preset {
  width: auto;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  border-color: #d4d4d4;
}

.config-card--preset:hover {
  border-color: #2e2e2e;
}

/* Row variant — label leading, value trailing, on ONE line.
   The base card stacks (column) because a variant-axis option carries a
   multi-line title above its price. An add-on or a service level is a single
   labelled value, so it reads as a list row instead. Only the main axis
   changes: same border, radius, fill and selected colours, so these stay ONE
   component rather than a second card style.

   Height: the Figma card is 92px on a 2x export = 46px. The base card's
   vertical padding (16px, from clamp(0.75rem, 1.2*--vwx, 1rem) at 1440) plus
   a 15.84px title at line-height 1.5 (23.76px) gives 55.8px, so the padding —
   not a min-height — is what has to come down: 11 + 23.76 + 11 = 45.8px.
   Only the ROW variant takes this. The stacked variant carries a title ABOVE
   a price, and 46px would squash two lines; 46 is a single-line number.
   (An earlier pass hard-set min-height: 4rem from eyeballing this same export
   without halving it — that invented 64px is what read as bulky.) */
.config-card--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.63rem, calc(1 * var(--vwx)), 1rem);
  padding-top: 0.6875rem;
  padding-bottom: 0.6875rem;
}

/* The stacked card pushes its price to the bottom-right corner; on one line
   it just sits on the row's centre line. */
.config-card--row .config-card-price {
  align-self: auto;
}

/* The label takes the slack so the price stays hard against the right edge
   regardless of label length. */
.config-card--row .config-card-title {
  flex: 1;
}

/* Sparse variant matrix: this value can't combine with what's already
   selected on other axes. Grayed out + not clickable (no click handler is
   attached), so the buyer never discovers a dead end by trial-and-error. */
.config-card.unavailable {
  cursor: not-allowed;
  color: #b8b8b8;
  background: #fafafa;
  border-color: #f0f0f0;
}

/* Userback 8250597 — an unreachable option is now PICKABLE: choosing it moves
   the other axes to a combination that exists. Dashed border, the convention
   the reporter named ("Amazon shows it with dashed border"): still clearly
   not-currently-valid, but visibly actionable rather than dead. Reverting to
   `cursor: not-allowed` here would contradict a click that works. */
.config-card.unavailable.selectable {
  cursor: pointer;
  border-style: dashed;
  border-color: var(--color-gray-300, #d4d4d4);
  background: transparent;
}

.config-card.unavailable.selectable:hover {
  border-color: var(--color-gray-500, #737373);
  color: var(--color-gray-700, #404040);
}

.config-card-title {
  font-size: clamp(0.81rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 400;
  line-height: 1.5;
}

.config-card-price {
  font-size: clamp(0.75rem, calc(1 * var(--vwx)), 0.88rem);
  font-weight: 700;
  white-space: nowrap;
  color: #242424;
  align-self: flex-end;
}

.config-card-price--unavailable {
  color: #b8b8b8;
  font-weight: 500;
}

.config-card-price-unit {
  color: #9e9e9e;
}

.config-card.selected .config-card-title {
  font-weight: 400;
}

.config-card.selected .config-card-price {
  color: #ffffff;
  font-size: clamp(0.75rem, calc(0.9 * var(--vwx)), 0.88rem);
}

/* Addon section (Figma: checkbox rows with title/price) */
.config-addons-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.config-addon-row {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, calc(2 * var(--vwx)), 2.5rem) 0 0;
}

.config-addon-row + .config-addon-row {
  border-top: 1px solid #e8e8e8;
  margin-top: clamp(1rem, calc(2 * var(--vwx)), 2.5rem);
}

.config-addon-row-title {
  font-size: clamp(0.88rem, calc(1.1 * var(--vwx)), 1rem);
  font-weight: 400;
  color: #242424;
  margin-bottom: clamp(0.5rem, calc(1 * var(--vwx)), 0.75rem);
}

.config-addon-row-body {
  display: flex;
  flex-direction: column;
}

.config-addon-check-row {
  display: flex;
  align-items: center;
  gap: clamp(0.63rem, calc(1 * var(--vwx)), 1rem);
  padding: clamp(0.5rem, calc(1 * var(--vwx)), 0.75rem) 0;
  cursor: pointer;
  transition: opacity 0.15s;
}

.config-addon-check-row:hover {
  opacity: 0.8;
}

.config-addon-row-label {
  flex: 1;
  font-size: clamp(0.81rem, calc(1 * var(--vwx)), 0.94rem);
  font-weight: 400;
  color: #242424;
  line-height: 1.5;
}

.config-addon-row-price {
  font-size: clamp(0.81rem, calc(1 * var(--vwx)), 0.94rem);
  font-weight: 400;
  color: #242424;
  white-space: nowrap;
}

/* A TITLED add-on list (Brazil DIAG TRF: six optional tests under one
   "ENSAIOS OPCIONAIS" heading). The untitled layout gives every add-on its own
   padded block with a title above the tick row; six of those ran to most of a screen of
   mostly white. Under one heading the rows are a list: tight, ruled, and with
   a checkbox that reads as one (the shared #f0f0f0 border vanishes on white). */
.config-addons-section--list > .config-field-title {
  display: block;
  margin-bottom: clamp(0.5rem, calc(1 * var(--vwx)), 0.75rem);
}

.config-addons-section--list .config-addon-row {
  padding: 0;
}

/* The buy box floats over the bottom-right of the tab; without this the last
   row's price sits under it however far the buyer scrolls. */
.pdp-config-tab--addons {
  padding-bottom: clamp(5rem, calc(7 * var(--vwx)), 7rem);
}

.config-addons-section--list .config-addon-row + .config-addon-row {
  margin-top: 0;
}

.config-addons-section--list .config-addon-check-row {
  padding: clamp(0.63rem, calc(1 * var(--vwx)), 0.88rem) 0;
}

.config-addons-section--list .config-checkbox-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-color: #9a9a9a;
}

.config-addons-section--list .config-addon-check-row.selected .config-checkbox-icon {
  border-color: #242424;
}

/* Checkbox items with icon (mobile parity) */
.config-checkbox-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.9375rem;
  height: 0.9375rem;
  border: 1px solid #f0f0f0;
  border-radius: 0.25rem;
  padding: 0.19rem;
  box-sizing: border-box;
}

.config-checkbox-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #242424;
  border-radius: 1.5px;
  flex-shrink: 0;
}

.config-checkbox-item.selected {
  color: #242424;
}

.config-checkbox-title {
  flex: 1;
  font-size: 0.875rem;
}

.config-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #22c55e;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Price Amount Styling */
.price-amount {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
}

/* Product Availability */
.product-availability {
  display: flex;
  gap: var(--spacing-6);
  padding: var(--spacing-3) 0;
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.availability-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.availability-item.in-stock {
  color: #16a34a;
}

.availability-item.in-stock svg {
  color: #22c55e;
}

.availability-item svg {
  flex-shrink: 0;
}

/* Budgetary Configurator Styles */
.budgetary-result {
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  border: 2px solid #22c55e;
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  text-align: center;
  margin-bottom: var(--spacing-6);
}

.budgetary-result .price-range {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.budgetary-result .price-note {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.budgetary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
  margin: var(--spacing-4) 0;
  padding: var(--spacing-4) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.budgetary-stat {
  text-align: center;
}

.budgetary-stat .stat-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-1);
}

.budgetary-stat .stat-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
}

/* Warning Alert for Budgetary */
.budgetary-warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-sm);
  color: #92400e;
}

/* === Price Comparison Section === */
.price-comparison-section {
  padding: var(--spacing-12) 0;
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

.price-comparison-section h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.price-comparison-section .section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-8);
}

.price-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
  gap: var(--spacing-6);
}

.price-card {
  background: white;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.price-card-frame {
  border-color: #8b5cf6;
}

.price-card-spot {
  border-color: #3b82f6;
}

.price-card-asset {
  border-color: #22c55e;
}

.price-card-badge {
  margin-bottom: var(--spacing-3);
}

.badge-frame,
.badge-spot,
.badge-asset {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
}

.badge-frame {
  background: #ede9fe;
  color: #7c3aed;
}

.badge-spot {
  background: #dbeafe;
  color: #2563eb;
}

.badge-asset {
  background: #dcfce7;
  color: #16a34a;
}

.price-card-customer {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.price-card-amount {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-1);
}

.price-card-discount {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: #16a34a;
  margin-bottom: var(--spacing-3);
}

.price-card-discount.muted {
  color: var(--color-gray-500);
}

.price-card-discount.loyalty {
  color: #2563eb;
}

.price-card-note {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--color-gray-200);
}

/* Related Products Section */
.related-products-section {
  padding: var(--spacing-12) 0;
  background: white;
}

.related-products-section h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.related-products-section .section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-8);
}

/* === Login Page Styles === */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.login-header {
  background: var(--color-gray-900);
  padding: var(--spacing-4) 0;
}

.login-header .logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  color: white;
  font-weight: 700;
  font-size: var(--font-size-lg);
}

.login-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-6);
  max-width: 75rem;
  margin: 0 auto;
}

.login-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-8);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 30rem;
}

.login-title {
  text-align: center;
  margin-bottom: var(--spacing-6);
}

.login-title h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.login-title p {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.login-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.login-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: white;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.login-option:hover {
  border-color: var(--color-primary);
  background: #f0fafa;
}

.login-option .option-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
}

.login-option .option-title {
  font-weight: 600;
  color: var(--color-gray-900);
}

.login-option .option-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.login-divider {
  display: flex;
  align-items: center;
  margin: var(--spacing-6) 0;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-gray-200);
}

.login-divider span {
  padding: 0 var(--spacing-4);
}

.demo-accounts {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.demo-accounts h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-3);
}

.demo-account-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.demo-account {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
}

.demo-account:hover {
  border-color: var(--color-primary);
}

.demo-account .demo-badge {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.demo-account.frame .demo-badge {
  background: #ede9fe;
  color: #7c3aed;
}
.demo-account.spot .demo-badge {
  background: #dbeafe;
  color: #2563eb;
}
.demo-account.asset .demo-badge {
  background: #dcfce7;
  color: #16a34a;
}

.demo-account .demo-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.demo-account .demo-info {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-left: auto;
}

.login-features {
  max-width: 25rem;
  padding-top: var(--spacing-8);
}

.login-features h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-6);
}

.login-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.login-features li svg {
  color: var(--color-primary);
}

/* === Quotes Page === */
.quotes-page .page-header {
  background: var(--color-gray-900);
  padding: var(--spacing-8) 0;
  color: white;
}

.quotes-page .page-header .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quotes-page .page-header h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.quotes-page .page-header .subtitle {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}

.quotes-tabs {
  background: white;
  border-bottom: 1px solid var(--color-gray-200);
}

.quotes-tabs .tab-btn {
  padding: var(--spacing-4) var(--spacing-6);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  cursor: pointer;
}

.quotes-tabs .tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.quotes-content {
  padding: var(--spacing-8) 0;
}

.quotes-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.quote-card {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.quote-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
}

.quote-id .value {
  font-family: monospace;
  font-weight: 600;
}

.quote-status {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.quote-status.status-pending {
  background: #fef3c7;
  color: #92400e;
}
.quote-status.status-quoted {
  background: #dbeafe;
  color: #1d4ed8;
}
.quote-status.status-accepted {
  background: #dcfce7;
  color: #166534;
}

.quote-actions {
  display: flex;
  gap: var(--spacing-2);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
}

/* === Orders Page === */
.orders-page .page-header {
  background: var(--color-gray-900);
  padding: var(--spacing-8) 0;
  color: white;
}

.orders-page .page-header .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.orders-page .page-header h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.orders-page .page-header .subtitle {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}

.orders-tabs {
  background: white;
  border-bottom: 1px solid var(--color-gray-200);
}

.orders-tabs .tab-btn {
  padding: var(--spacing-4) var(--spacing-6);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  cursor: pointer;
}

.orders-tabs .tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.orders-content {
  padding: var(--spacing-8) 0;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.order-card {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
}

.order-id .label {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.order-id .value {
  font-family: monospace;
  font-weight: 600;
}

.order-status {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.order-status.status-pending {
  background: #fef3c7;
  color: #92400e;
}
.order-status.status-completed {
  background: #dcfce7;
  color: #166534;
}
.order-status.status-canceled {
  background: #fee2e2;
  color: #991b1b;
}
.order-status.status-requires_action {
  background: #dbeafe;
  color: #1d4ed8;
}

.order-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.order-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-items .items-count {
  color: var(--color-gray-600);
}

.order-items .order-total {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.order-thumbnails {
  display: flex;
  gap: var(--spacing-2);
}

.order-thumbnails .thumbnail-item {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}

.order-thumbnails .thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-thumbnails .thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
}

.order-thumbnails .thumbnail-more {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-600);
}

.order-shipping {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.order-dates {
  display: flex;
  gap: var(--spacing-4);
}

.order-dates .date-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.order-dates .date-item.fulfilled {
  color: var(--color-success);
}

.order-actions {
  display: flex;
  gap: var(--spacing-2);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: calc(
    100vh - var(--header-height, 4rem) - var(--footer-height, 20.38rem)
  );
  padding: var(--spacing-12) var(--spacing-4);
}

.empty-state svg {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-4);
}

.empty-state h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-2);
}

.empty-state p {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
  /* R6: readable measure — the parent centers, the paragraph caps. */
  max-width: 60ch;
}

.loading-state {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--color-gray-600);
}

/* === Services Page === */
.services-hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  padding: var(--spacing-12) 0;
  color: white;
}

.services-hero h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

.my-equipment-section {
  padding: var(--spacing-10) 0;
  background: var(--color-gray-50);
}

.my-equipment-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-6);
}

.my-equipment-section h2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-xl);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
  gap: var(--spacing-4);
}

.equipment-card {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.equipment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.warranty-badge {
  background: #dcfce7;
  color: #166534;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.packages-section {
  padding: var(--spacing-10) 0;
}

.packages-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.filter-pills {
  display: flex;
  gap: var(--spacing-2);
}

.filter-pills .pill {
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.filter-pills .pill.active {
  background: #1a1a1a;
  color: white;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  gap: var(--spacing-6);
}

.package-card {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.package-header {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.package-type {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.package-type.type-maintenance {
  background: #dbeafe;
  color: #1d4ed8;
}
.package-type.type-repair {
  background: #fef3c7;
  color: #92400e;
}
.package-type.type-training {
  background: #f3e8ff;
  color: #7c3aed;
}

.package-body {
  padding: var(--spacing-4);
}

.package-body h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-2);
}

.package-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

.package-price .price-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  display: block;
}

.package-price .price-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.services-cta {
  background: var(--color-gray-900);
  padding: var(--spacing-12) 0;
  color: white;
  text-align: center;
}

.services-cta h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-4);
}

/* === Checkout Page === */
.checkout-page {
  padding: var(--spacing-8) 0;
  min-height: 80vh;
}

.checkout-page h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-6);
  color: var(--color-secondary);
}

/* Progress Indicator */
.checkout-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  justify-content: space-between;
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.progress-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-400);
}

.progress-step.active {
  color: var(--color-primary);
}

.progress-step.completed {
  color: var(--color-success);
}

.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.progress-step.active .step-number {
  background: var(--color-primary);
  color: white;
}

.progress-step.completed .step-number {
  background: var(--color-success);
  color: white;
}

.step-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Checkout Steps */
.checkout-step {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-md);
  max-width: 43.75rem;
}

.checkout-step h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-6);
  color: var(--color-secondary);
}

.checkout-step h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-3);
  color: var(--color-gray-700);
}

/* Checkout Form */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.checkout-section__content {
  color: #6b6b6b;
  line-height: 1.25;
  letter-spacing: 0.01rem;
  font-size: clamp(0.75rem, calc(2.78 * var(--vwx)), 2.5rem);
}

.checkout-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--spacing-4);
}

.checkout-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.checkout-form label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
}

.checkout-form input,
.checkout-form select {
  padding: var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  transition: border-color 0.2s ease;
}

.checkout-form input:focus,
.checkout-form select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
}

/* Shipping Options */
.shipping-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.shipping-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.shipping-option:hover {
  border-color: var(--color-gray-300);
}

.shipping-option.selected {
  border-color: var(--color-primary);
  background: rgba(0, 153, 153, 0.05);
}

.shipping-option input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
}

.option-details {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.option-name {
  font-weight: 500;
}

.option-price {
  color: var(--color-gray-600);
}

/* Order Summary in Review Step */
.order-summary {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.order-item:last-child {
  border-bottom: none;
}

.item-name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.item-qty {
  color: var(--color-gray-500);
  margin: 0 var(--spacing-4);
}

.item-price {
  font-weight: 600;
}

/* Order Address */
.order-address,
.order-shipping {
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.order-address p,
.order-shipping p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: var(--spacing-1) 0;
}

/* Order Total */
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-secondary);
  color: white;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-6);
}

.total-amount {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

/* Form Actions */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: flex-end;
  margin-top: var(--spacing-4);
}

/* Success State */
.checkout-success {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
}

.success-icon {
  color: var(--color-success);
  margin-bottom: var(--spacing-4);
}

.checkout-success h2 {
  color: var(--color-success);
  margin-bottom: var(--spacing-4);
}

.checkout-success .order-id {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-2);
}

.checkout-success .form-actions {
  justify-content: center;
  margin-top: var(--spacing-8);
}

/* Error and Loading States */
.checkout-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-4);
}

.checkout-loading {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--color-gray-500);
}

/* Responsive */

/* ================================================
   CONFIGURATOR PAGE - IndustrialSpec Style
   ================================================ */

.configurator-page {
  min-height: 100vh;
  background: var(--color-gray-50);
}

.configurator-page.loading,
.configurator-page.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  text-align: center;
}

.configurator-page .error-message {
  max-width: 25rem;
  padding: var(--spacing-8);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
}

.configurator-page .error-message svg {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-4);
}

.configurator-page .error-message h2 {
  margin-bottom: var(--spacing-2);
  color: var(--color-gray-800);
}

.configurator-page .error-message p {
  margin-bottom: var(--spacing-4);
  color: var(--color-gray-600);
}

/* Configurator Header
 * Tightened 2026-06-10 (user feedback: page feels bulky).
 * spacing-6 (24px) → spacing-4 (16px) top/bottom kills 16px of empty
 * gutter under the breadcrumb that wasn't doing anything. */
.configurator-header {
  background: white;
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--spacing-4) 0;
}

.configurator-header h1 {
  /* 28px to match .pdp-product-title + .at-detail-header__title — was 24px (--font-size-2xl),
     which made the configurator hero read as a sub-page rather than a peer product page. */
  font-size: 1.75rem;
  font-weight: 700;
  color: #242424;
  margin-bottom: var(--spacing-1);
}

.configurator-subtitle {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.configurator-subtitle .pattern-badge {
  background: var(--color-primary);
  color: white;
  padding: 2px 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.configurator-description {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Configurator Content - Two Column Layout.
 * Tightened: spacing-6 (24px) → spacing-5 (20px) column gap, and
 * spacing-6 → spacing-4 (16px) vertical so the two columns sit closer
 * to the KPI strip above and the footer-leading whitespace shrinks. */
.configurator-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-5);
  padding: var(--spacing-4) 0;
}
.configurator-content > :first-child {
  /* Sticky (owner request 2026-08-31): the package details must stay on
     screen while the taller rail (form + breakdown) scrolls. Internal
     scroll takes over when the BOM outgrows the viewport. Sticky WITHOUT
     z-index — see the stacking-trap notes; the part-detail modal is a
     sibling fixed overlay and must keep painting above. */
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-4));
  align-self: flex-start;
  max-height: calc(100vh - var(--header-height) - 2 * var(--spacing-4));
  overflow-y: auto;
  flex: 999 1 26rem;
  min-width: 0;
}
.configurator-content > :last-child {
  flex: 1 1 23.75rem;
  min-width: 0;
}

/* Configuration Form.
 * Tightened from gap:16px (--spacing-4) → 12px (--spacing-3); same vertical
 * rhythm but less air between cards that already have their own padding. */
.configurator-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.config-section {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  /* Card padding tightened from spacing-6 (24px) → spacing-5 (20px).
   * Section header + first content row still have ~12px breathing room. */
  padding: var(--spacing-5);
}

/* UB#7612481 — About this service.
   Shares the .config-section visual treatment but uses a left accent bar
   (no numbered circle) so it's clearly a context block, not a step.
   Padding + margin-bottom tightened to match the new .config-section
   rhythm (user feedback: page felt bulky 2026-06-10). */
.about-section {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  /* Compacted 2026-07-03: one-line description card doesn't need 16/20 padding. */
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: 0; /* gap on .configurator-form handles spacing now */
}

.about-section .section-header {
  /* Was 24px of vacant space between heading and description (12 padding +
   * 12 margin). Compressed to 8px since there's no divider/border to bridge. */
  margin-bottom: var(--spacing-2);
  padding-bottom: 0;
}

.about-section .about-description {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-700);
}

.about-section .about-description--empty {
  color: var(--color-gray-500);
  font-style: italic;
}

.section-header {
  /* Tightened 2026-06-10: was 28px (16 margin + 12 padding) of empty band
   * between section number and first question. 16px reads as a clear
   * divider without padding the page out. */
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 2px solid var(--color-gray-100);
}

.section-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--color-primary);
  color: white;
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-radius: 50%;
}

.section-header h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-800);
  margin: 0;
}

.section-questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem 1.5rem;
}

/* Question Field */
.question-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.question-field label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500);
  margin-bottom: 2px;
}

.question-field .form-select {
  width: 100%;
  height: 3rem;
  padding: 0 2.5rem 0 1rem;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 3rem;
  background: white;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.question-field .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
}

/* Radio Options */
.question-radio .radio-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 3rem;
  padding: 0 1rem;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.radio-option:hover {
  border-color: var(--color-gray-400);
}

.radio-option.selected {
  border-color: var(--color-primary);
  background: rgba(0, 153, 153, 0.05);
}

.radio-option input[type="radio"] {
  accent-color: var(--color-primary);
}

.radio-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

/* Estimate Sidebar */
.configurator-sidebar {
  position: sticky;
  top: var(--spacing-4);
  height: fit-content;
}

.estimate-card {
  background: white;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.estimate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.estimate-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
}

.estimate-price {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

.estimate-leadtime {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-4);
}

.estimate-leadtime svg {
  color: var(--color-gray-400);
}

/* Cost Drivers */
.cost-drivers {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.cost-drivers-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.cost-drivers ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cost-drivers li {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  padding: 0.25rem 0;
}

.cost-drivers li::before {
  content: "\2022";
  color: var(--color-primary);
  margin-right: var(--spacing-2);
}

.estimate-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-4);
  line-height: 1.4;
}

/* Estimate Actions */
.estimate-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.estimate-actions .btn-full {
  width: 100%;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-4);
}

.estimate-actions .btn-full svg {
  margin-right: var(--spacing-2);
}

.secondary-actions {
  display: flex;
  gap: var(--spacing-2);
}

.secondary-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: var(--font-size-sm);
}

.btn-outline {
  background: white;
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-outline:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

/* Configuration Summary */
.config-summary {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-top: var(--spacing-4);
}

.config-summary h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-3);
}

.config-summary dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2);
}

.config-summary dt {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.config-summary dd {
  font-size: var(--font-size-sm);
  color: var(--color-gray-800);
  font-weight: 500;
  text-align: right;
  margin: 0;
}

/* Responsive Sidebar */

/* === Package Configurator Page Styles === */

/* Package Configurator Page Layout */
/* Collapsible component buckets — one summary row per bucket, expandable (keeps the composition
   scannable instead of a long per-line list). */
.components-buckets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2, 0.5rem);
}
.component-bucket {
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.component-bucket-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-3, 0.75rem);
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.component-bucket-summary:hover {
  background: var(--color-gray-50, #f9fafb);
}
.component-bucket-label {
  font-weight: 600;
  flex: 1;
}
.component-bucket-count {
  color: var(--color-gray-500, #6b7280);
  font-size: 0.85em;
  min-width: 1.5em;
  text-align: right;
}
.component-bucket-sum {
  font-weight: 600;
  min-width: 6em;
  text-align: right;
}
/* "+ On request" after a bucket's priced sum: the sum leaves those lines out
   (services/bucket_header_price.dart). */
.component-bucket-sum-note {
  color: var(--color-gray-500, #6b7280);
  font-size: 0.8em;
  white-space: nowrap;
}
.component-bucket-chevron {
  color: var(--color-gray-400, #9ca3af);
  width: 1em;
}
.component-bucket-lines {
  border-top: 1px solid var(--color-gray-100, #f3f4f6);
  padding: 0.25rem 0.5rem 0.5rem;
}

.package-configurator-page {
  min-height: 100vh;
  background: var(--color-gray-50);
  /* Cap the whole page at a comfortable centered reading width. The global --container-max is 1920px
     (edge-to-edge on normal screens); overriding the variable here cascades to EVERY .container band
     on the page — breadcrumb, header, KPI strip, and content — so they all align on one centered
     column. */
  --container-max: 80rem;
}

.package-configurator-page.loading,
.package-configurator-page.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  text-align: center;
}

.package-configurator-page .error-message {
  max-width: 25rem;
  padding: var(--spacing-8);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
}

.package-configurator-page .error-message svg {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-4);
}

.package-configurator-page .error-message h2 {
  margin-bottom: var(--spacing-2);
  color: var(--color-gray-800);
}

.package-configurator-page .error-message p {
  margin-bottom: var(--spacing-4);
  color: var(--color-gray-600);
}

/* Service Level Badge */
.service-level-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-primary);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-2);
}

/* Header Content */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-6);
}

.header-info {
  flex: 1;
}

.header-info .asset-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-2);
}

.header-info .package-description {
  color: var(--color-gray-700);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: var(--spacing-3);
  padding-left: var(--spacing-3);
  border-left: 3px solid var(--color-purple-100, #ede9fe);
  max-width: 45rem;
}

.header-price {
  text-align: right;
}

.base-price-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

.base-price-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-800);
  line-height: 1.1;
}

.base-price-note {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--font-size-xs);
  line-height: 1.3;
  color: #64748b;
}

.base-price-hint {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  line-height: 1.3;
  color: #94a3b8;
}

.config-question {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.config-question .form-select {
  width: 100%;
  height: 2.5rem;
  padding: 0 2.5rem 0 1rem;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 3rem;
  background: white;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%236b7280' stroke-width='2' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.config-question .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
}

/* UB#7966813 — the operator-authored note under a config question.
   Sits between the label and its control, so it must not inherit the label's
   min-height (which reserves two lines and would open a gap under every
   question that has no note). Muted and one step down from the label: it
   explains the choice, it is not part of the choice. */
.question-help {
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-gray-600);
  margin: 0 0 0.375rem;
  max-width: 46ch;
}

.question-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  /* Reserve two label lines and bottom-align the text inside, so a question
     whose label wraps ("Should maintenance be performed only on single
     bays…?") no longer pushes its control lower than its single-line
     neighbors — all selects in a grid row sit on the same line. */
  min-height: 2.75em;
  display: flex;
  align-items: flex-end;
}

.boolean-options {
  display: flex;
  gap: var(--spacing-2);
}

.bool-option {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-4);
  border: 2px solid var(--color-gray-300);
  background: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s;
}

.bool-option:hover {
  border-color: var(--color-gray-400);
}

.bool-option.active {
  border-color: var(--color-primary);
  background: rgba(138, 0, 229, 0.1);
  color: var(--color-primary);
}

.question-price-hint {
  font-size: var(--font-size-xs);
  color: var(--color-success);
  font-weight: 500;
}

/* Userback #7565651: SOPHIE add-on placeholder prices render as
   "Price on request" until real catalog data is wired up. Style them
   neutrally (grey, italic) so customers don't read a fake number. */
.question-price-hint.price-on-request,
.addon-price.price-on-request,
.price-row.price-on-request .price-value {
  color: var(--color-gray-500);
  font-style: italic;
  font-weight: 500;
}

.question-hint {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-style: italic;
}

/* Component List */
.components-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.component-row {
  display: grid;
  /* Price/qty/lead columns size to CONTENT (max-content) instead of fixed
     widths — a six-digit monospace price in a 6.25rem track overflowed and
     painted over the line-total next to it (kit summary, 2026-07-24).
     minmax(0,1fr) on the info column lets long German names shrink/wrap
     instead of pushing the numeric columns off-grid. */
  grid-template-columns:
    2.5rem minmax(0, 1fr)
    max-content max-content max-content max-content;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  transition: background 0.2s;
}

.component-row:hover {
  background: var(--color-gray-100);
}

.component-row.excluded {
  opacity: 0.5;
}

/* Multi-level BOM expansion under a Package Components row -------------- */
.component-row-kit {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background 0.2s;
}
.component-row-kit:hover {
  background: var(--color-gray-100);
}
.component-row-kit.excluded {
  opacity: 0.5;
}
.component-row-kit > .component-row-summary {
  cursor: pointer;
  list-style: none;
  background: transparent;
  position: relative;
  padding-left: calc(var(--spacing-3) + 1.125rem);
}
.component-row-kit > .component-row-summary::-webkit-details-marker {
  display: none;
}
.component-row-kit > .component-row-summary::before {
  content: "▸";
  position: absolute;
  left: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-500);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}
.component-row-kit[open] > .component-row-summary::before {
  transform: translateY(-50%) rotate(90deg);
}
.component-bom-badge {
  display: inline-block;
  margin-left: var(--spacing-2);
  padding: 1px 0.5rem;
  background: var(--color-primary-light, #e6f0ff);
  color: var(--color-primary);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: middle;
}
/* SHOP-330: opt-in component tag — neutral (not primary) so it reads as
   state, not action; row starts unchecked and the customer opts in. */
.component-optional-badge {
  display: inline-block;
  margin-left: var(--spacing-2);
  padding: 1px 0.5rem;
  background: var(--color-gray-100, #f5f5f7);
  color: var(--color-gray-700, #374151);
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: middle;
}
.component-bom-children {
  background: var(--color-gray-100, #f5f5f7);
  border-top: 1px solid var(--color-gray-200);
  padding: var(--spacing-3) var(--spacing-4);
  margin: 0;
}
.component-bom-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--spacing-2);
}
.component-bom-toolbar-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.component-bom-toolbar-spacer {
  flex: 1;
}
.component-bom-toolbar-meta {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  font-family: monospace;
}
.component-bom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  background: var(--color-white, #fff);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}
.component-bom-table thead th {
  background: var(--color-gray-50);
  color: var(--color-gray-600);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.625rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-gray-200);
}
.component-bom-table thead th.num,
.component-bom-table tbody td.num {
  text-align: right;
}
.component-bom-table tbody td {
  padding: 0.4375rem 0.625rem;
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
  vertical-align: top;
}
.component-bom-table tbody tr:nth-child(even) {
  background: var(--color-gray-50);
}
.component-bom-table tbody tr:last-child td {
  border-bottom: none;
}
.component-bom-table tbody td.idx {
  color: var(--color-gray-400);
  font-family: monospace;
  width: 2rem;
  text-align: right;
}
.component-bom-table tbody td.mono {
  font-family: monospace;
  font-size: 0.6875rem;
  color: var(--color-gray-500);
  white-space: nowrap;
}
.component-bom-table tbody td.lvl {
  width: 3.125rem;
}
.depth-pill {
  display: inline-block;
  padding: 1px 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  font-family: monospace;
  background: var(--color-gray-200);
  color: var(--color-gray-600);
}
.depth-pill.depth-0 {
  background: #d1fae5;
  color: #047857;
}
.depth-pill.depth-1 {
  background: #e0e7ff;
  color: #4338ca;
}
.depth-pill.depth-2 {
  background: #fef3c7;
  color: #92400e;
}
.depth-pill.depth-3 {
  background: #fce7f3;
  color: #9d174d;
}
.depth-pill.depth-4,
.depth-pill.depth-5 {
  background: #fee2e2;
  color: #991b1b;
}
.depth-arrow {
  color: var(--color-gray-400);
  font-family: monospace;
  font-size: 0.6875rem;
  margin-right: 2px;
}
.component-bom-table tbody tr.depth-1 td {
  background: rgba(99, 102, 241, 0.04);
}
.component-bom-table tbody tr.depth-2 td {
  background: rgba(245, 158, 11, 0.04);
}
.component-bom-table tbody tr.depth-3 td {
  background: rgba(236, 72, 153, 0.04);
}
.component-bom-table tbody tr.depth-4 td,
.component-bom-table tbody tr.depth-5 td {
  background: rgba(239, 68, 68, 0.06);
}
.component-bom-note {
  padding-top: var(--spacing-2);
  font-size: 0.6875rem;
  color: var(--color-gray-400);
  font-style: italic;
}

/* --- BOM part thumbnail + SAP master-data sub-line -------------------------
   Image coverage is partial (many SML parts have no photo in S3), so the
   empty state is a fixed-size neutral tile rather than a collapsed box —
   that keeps the name column left-aligned whether or not a part has an
   image, instead of a ragged edge down the table. */
.bom-thumb {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white, #fff);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.375rem;
}
.bom-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
a.bom-thumb:hover {
  border-color: var(--color-gray-400);
}
.bom-thumb--empty {
  background: var(--color-gray-50);
  border-style: dashed;
}

/* Name + its SAP sub-line stack vertically; the row's flex container keeps
   the thumbnail beside them. */
.bom-part-label {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.bom-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--color-gray-500);
}
/* German SAP description — a sub-label under the English name, never a
   replacement for it. */
.bom-meta-de {
  font-style: italic;
  color: var(--color-gray-500);
}
.bom-meta-chip {
  padding: 0 0.25rem;
  border-radius: 0.1875rem;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-family: monospace;
  white-space: nowrap;
}

/* --- Full-size part image overlay -----------------------------------------
   Fixed to the viewport at the document root, so it is NOT subject to the
   BOM table's own overflow/scroll container. Deliberately high z-index: this
   sits above the configurator's sticky summary rail. */
.bom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4, 1rem);
}
.bom-lightbox[hidden] {
  display: none;
}
.bom-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
}
.bom-lightbox-figure {
  position: relative;
  margin: 0;
  max-width: min(calc(90 * var(--vwx)), 60rem);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--color-white, #fff);
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.bom-lightbox-figure img {
  max-width: 100%;
  /* leave room for the caption inside the 88vh cap */
  max-height: calc(88vh - 4.5rem);
  object-fit: contain;
  border-radius: 0.25rem;
}
.bom-lightbox-figure figcaption {
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  text-align: center;
}
.bom-lightbox-close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white, #fff);
  color: var(--color-gray-700);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.bom-lightbox-close:hover {
  background: var(--color-gray-50);
}

.component-checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
}

.component-info {
  display: flex;
  flex-direction: column;
  gap: 0.19rem;
  min-width: 0; /* allow the grid to shrink this column; text wraps below */
}

.component-name {
  font-weight: 500;
  color: var(--color-gray-800);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.component-sku {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-family: monospace;
}

.scalable-badge {
  display: inline-block;
  padding: 2px 0.375rem;
  background: var(--color-primary-light);
  color: white;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  margin-left: var(--spacing-2);
}

/* Bucket-header variant (owner 2026-09-01): the multiplier shows on the
   collapsed summary row, before the sum — no layout shift when absent. */
.scalable-badge--bucket {
  margin-left: 0.25rem;
  flex: 0 0 auto;
}

.component-quantity {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.qty-btn {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-gray-300);
  background: white;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.qty-btn:hover:not(:disabled) {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

.qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qty-value {
  min-width: 2.5rem;
  text-align: center;
  font-weight: 600;
}

.qty-unit {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.component-unit-price,
.component-total {
  text-align: right;
  font-weight: 500;
  font-family: monospace;
  white-space: nowrap; /* a price must never wrap or overlap its neighbor */
}

.component-unit-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.component-total {
  font-weight: 700;
  color: var(--color-gray-800);
}

.component-delivery {
  text-align: center;
  font-size: var(--font-size-sm);
}

.components-count {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Pricing Card */
.pricing-card {
  background: white;
  /* Quiet 1px card to match .product-card-link / cart summary — the 2px brand-primary
     frame made the sidebar shout louder than any other card. Prominence comes from the
     price's size/weight, not a heavy outline. */
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pricing-header {
  margin-bottom: var(--spacing-4);
}

.pricing-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

.config-summary-badge {
  margin-top: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.price-breakdown {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}

.price-row .price-label {
  color: var(--color-gray-600);
}

.price-row .price-value {
  font-weight: 600;
  font-family: monospace;
}

.price-row.total {
  padding-top: var(--spacing-3);
  border-top: 2px solid var(--color-gray-200);
  font-size: var(--font-size-lg);
}

.price-row.total .price-label {
  font-weight: 700;
  color: var(--color-gray-800);
}

.price-row.total .price-value {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--font-size-xl);
}

.price-divider {
  height: 1px;
  background: var(--color-gray-200);
  margin: var(--spacing-2) 0;
}

.pricing-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

/* Download Excel / PDF as a single row of small icon+text links under the
   Request Quote primary button. Demoted from filled secondary buttons so
   Request Quote reads as the only primary CTA. */
.pricing-download-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding-top: var(--spacing-1);
  /* PO item 18: whole links wrap; labels themselves stay one-line. */
  flex-wrap: wrap;
}

.pricing-download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  /* PO item 18: one line per label ("Download all attachments", "Terms &
     Conditions") — the links row wraps as whole links instead. */
  white-space: nowrap;
}

.pricing-download-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.pricing-download-sep {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  user-select: none;
}

.pricing-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-align: center;
  line-height: 1.4;
}

.cart-error-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: #fdecec;
  color: #8b1a1a;
  border: 1px solid #f3b6b6;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.cart-error-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Breakdown Card */
.breakdown-card {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-top: var(--spacing-4);
}

.breakdown-card h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-3);
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.breakdown-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.breakdown-item:last-child {
  border-bottom: none;
}

.breakdown-name {
  color: var(--color-gray-700);
}

.scaled-indicator {
  color: var(--color-primary);
  font-weight: 500;
}

.breakdown-qty {
  color: var(--color-gray-500);
  text-align: right;
}

.breakdown-price {
  font-weight: 600;
  font-family: monospace;
  text-align: right;
  min-width: 5rem;
}

.breakdown-bom-badge-rollup {
  font-size: 0.625rem;
  color: var(--color-gray-400);
  font-weight: 400;
  margin-left: 0.25rem;
}

/* Multi-level BOM under EVQ kits ----------------------------------------- */
.breakdown-kit {
  border-bottom: 1px solid var(--color-gray-200);
}
.breakdown-kit:last-child {
  border-bottom: none;
}
.breakdown-kit-summary {
  cursor: pointer;
  border-bottom: none;
  list-style: none;
  position: relative;
  padding-left: 1.125rem;
}
.breakdown-kit-summary::-webkit-details-marker {
  display: none;
}
.breakdown-kit-summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: var(--spacing-2);
  color: var(--color-gray-500);
  transition: transform 0.15s ease;
  font-size: 0.6875rem;
}
.breakdown-kit[open] > .breakdown-kit-summary::before {
  transform: rotate(90deg);
}
.breakdown-bom-badge {
  display: inline-block;
  margin-left: var(--spacing-2);
  padding: 1px 0.375rem;
  background: var(--color-primary-light, #e6f0ff);
  color: var(--color-primary);
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
}
.breakdown-bom-children {
  padding-left: 1.125rem;
  background: var(--color-gray-100, #f7f7f8);
  border-left: 2px solid var(--color-gray-300, #d4d4d8);
  margin: var(--spacing-1) 0 var(--spacing-2) 0.75rem;
}
.breakdown-bom-child {
  font-size: 0.75rem;
  padding: var(--spacing-1) var(--spacing-2);
  border-bottom: 1px dotted var(--color-gray-200);
  color: var(--color-gray-600);
}
.breakdown-bom-child:last-child {
  border-bottom: none;
}
.breakdown-bom-child-price {
  font-weight: 500;
  color: var(--color-gray-600);
}
.breakdown-evq {
  font-family: monospace;
  font-size: 0.625rem;
  color: var(--color-gray-400);
  margin-left: 0.25rem;
}
.breakdown-bom-note {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 0.625rem;
  color: var(--color-gray-400);
  font-style: italic;
}

/* Add-ons Section */
.addons-section .addon-row {
  display: flex;
  justify-content: space-between;
  /* UB 8121573: rows can now be two lines (name + attribution caption).
     Anchor to the top so the tick icon and the price stay level with the
     NAME rather than floating to the centre of a taller row. */
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: rgba(16, 185, 129, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-2);
}

.addon-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  color: var(--color-success);
  min-width: 0;
}

/* Keep the icon on the name's baseline now that the block can wrap. */
.addon-info > svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.addon-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* UB 8121573 — "No explanation or information/breakup on additional items".
   Provenance is secondary information: same italic grey treatment as the
   other configurator captions (.component-bom-note, .question-hint), NOT the
   success green of the line it sits under, so it reads as an annotation
   rather than a second charge. */
.addon-source {
  font-size: 0.6875rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-gray-500);
}

.addon-price {
  font-weight: 600;
  font-family: monospace;
  color: var(--color-success);
}

/* Button Full Width */
.btn-full {
  width: 100%;
  justify-content: center;
}

.btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Responsive adjustments for component grid */

/* === CMS Edit Link === */
/* Floating button for editors to quickly access CMS */

.cms-edit-link {
  position: fixed;
  /* 84px clears the feedback launcher pill, which occupies the
     bottom-right 20px slot at z-index 9990 — at bottom: 20px the Edit
     button was completely covered by it and unclickable. */
  bottom: 5.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-button);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cms-edit-link:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.25rem -0.3125rem rgb(0 0 0 / 0.15);
}

.cms-edit-link:active {
  transform: translateY(0);
}

.cms-edit-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Hide edit link in production or when not logged in to CMS */
/* This can be controlled via JS or server-side rendering */
.cms-edit-link[hidden] {
  display: none;
}

/* Mobile responsive */

/* =============================================
   LIVE PREVIEW MODE STYLES
   ============================================= */

/* Preview mode adjustments */
.app-shell.preview-mode .customer-context-banner {
  display: none !important;
}

/* Browser chrome wrapper */
.preview-browser-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem;
  background: #f0f0f0;
  min-height: 100vh;
}

.browser-chrome {
  background: var(--color-white);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: 100%;
  max-width: 75rem;
}

.browser-toolbar {
  background: #e8e8e8;
  border-bottom: 1px solid #d0d0d0;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.browser-buttons {
  display: flex;
  gap: 0.375rem;
}

.browser-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

.browser-dot.red {
  background: #ff5f57;
}

.browser-dot.yellow {
  background: #febc2e;
}

.browser-dot.green {
  background: #28c840;
}

.browser-address-bar {
  flex: 1;
  background: var(--color-white);
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: #666;
  text-align: center;
}

.browser-content {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

/* Responsive adjustments */

/* === CMS Live Preview Editable Fields === */
/* Styles for in-place editing of CMS content fields */
/* These use CSS instead of JS event listeners for better performance */

[data-cms-field][data-editable-setup] {
  outline: none;
  cursor: text;
}

/* Hover state - dashed outline indicator */
[data-cms-field][data-editable-setup]:hover:not(:focus) {
  outline: 1px dashed #9ca3af;
  outline-offset: 2px;
}

/* Focus state - solid ring for active editing */
[data-cms-field][data-editable-setup]:focus {
  outline: none;
  box-shadow: 0 0 0 2px #4f46e5;
  border-radius: 2px;
}

/* Empty-field affordance — only for editable fields in admin preview.
 * An empty contenteditable element collapses to zero size and becomes
 * impossible to click into. Give it a minimum hit-target plus a visible
 * dashed placeholder so admins can find and focus the field to add content.
 * Gated to [data-editable-setup] so customers never see editing hints, and
 * rich-text fields (which are never given that attribute) are excluded.
 * Caveat: :empty only matches when there is NO content at all — whitespace
 * or a stray <br> defeats it, which is acceptable here (a populated-looking
 * field needs no placeholder). */
[data-cms-field][data-editable-setup]:empty {
  display: inline-block;
  min-width: 8ch;
  min-height: 1.2em;
  outline: 1px dashed #c7cdd6;
  outline-offset: 2px;
  border-radius: 2px;
  cursor: text;
}

[data-cms-field][data-editable-setup]:empty::before {
  content: "Click to add content";
  color: #9ca3af;
  font-style: italic;
  pointer-events: none;
}

/* Once focused, drop the placeholder so it doesn't sit behind the caret. */
[data-cms-field][data-editable-setup]:empty:focus::before {
  content: "";
}

/* ==========================================
   LOGIN PAGE REDESIGN - Clean Magento-style
   ========================================== */

.login-page-redesign {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.login-page-redesign .login-header {
  background: #1b1b3a;
  padding: 0.75rem 1.5rem;
  color: white;
}

.login-page-redesign .header-content {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.login-page-redesign .logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
  color: white;
}

.login-page-redesign .logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.login-page-redesign .logo-subtext {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.25rem;
  color: #00b8b0;
}

.login-page-redesign .header-title {
  font-size: 1.125rem;
  font-weight: 500;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.login-page-redesign .login-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}

.login-page-redesign .login-container {
  width: 100%;
  max-width: 37.5rem;
}

.login-page-redesign .login-card {
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  padding: clamp(1.5rem, calc(3 * var(--vwx)), 2.5rem);
  margin-bottom: 1.5rem;
}

.login-page-redesign .login-title {
  font-size: clamp(1.5rem, calc(2 * var(--vwx)), 1.75rem);
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
}

.login-page-redesign .login-subtitle {
  color: #666;
  margin: 0 0 1.5rem 0;
  font-size: 0.875rem;
}

.login-page-redesign .error-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #dc2626;
}

.login-page-redesign .login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-page-redesign .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.login-page-redesign .form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
}

.login-page-redesign .required {
  color: #dc2626;
}

.login-page-redesign .form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  box-sizing: border-box;
}

.login-page-redesign .form-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.login-page-redesign .checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.login-page-redesign .checkbox-group input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.login-page-redesign .checkbox-group label {
  font-size: 0.875rem;
  color: #333;
  cursor: pointer;
}

.login-page-redesign .btn-primary.btn-signin {
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: #8b5cf6;
  border: none;
  border-radius: 1.875rem;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

.login-page-redesign .btn-primary.btn-signin:hover {
  background: #7c3aed;
}

.login-page-redesign .btn-primary.btn-signin:disabled {
  background: #c4b5fd;
  cursor: not-allowed;
}

.login-page-redesign .btn-primary.btn-signin .spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

.login-page-redesign .forgot-password {
  text-align: center;
}

.login-page-redesign .forgot-password a {
  color: #8b5cf6;
  text-decoration: none;
  font-size: 0.875rem;
}

.login-page-redesign .forgot-password a:hover {
  text-decoration: underline;
}

.login-page-redesign .required-note {
  text-align: center;
  font-size: 0.8125rem;
  color: #666;
  margin: 0;
}

.login-page-redesign .divider {
  display: flex;
  align-items: center;
  margin: 1.75rem 0;
  color: #999;
  font-size: 0.8125rem;
}

.login-page-redesign .divider::before,
.login-page-redesign .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd;
}

.login-page-redesign .divider span {
  padding: 0 1rem;
}

.login-page-redesign .sso-section {
  margin-top: 0;
}

.login-page-redesign .sso-toggle {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #666;
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.login-page-redesign .sso-toggle:hover {
  background: #f0f0f0;
}

.login-page-redesign .toggle-icon {
  transition: transform 0.2s;
}

.login-page-redesign .toggle-icon.open {
  transform: rotate(180deg);
}

.login-page-redesign .sso-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.login-page-redesign .btn-sso {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #333;
  background: white;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.login-page-redesign .btn-sso:hover {
  border-color: #8b5cf6;
  background: #faf5ff;
}

.login-page-redesign .help-section {
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.1);
  padding: 2rem 2.5rem;
}

.login-page-redesign .help-section h3 {
  font-size: 1.25rem;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 0.75rem 0;
}

.login-page-redesign .help-section p {
  color: #666;
  font-size: 0.875rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.6;
}

.login-page-redesign .btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #8b5cf6;
  background: white;
  border: 2px solid #8b5cf6;
  border-radius: 1.875rem;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}

.login-page-redesign .btn-secondary:hover {
  background: #8b5cf6;
  color: white;
}

.login-page-redesign .login-footer {
  background: #1b1b3a;
  color: white;
  padding: 1.5rem;
  text-align: center;
}

.login-page-redesign .footer-links {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.login-page-redesign .footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.8125rem;
}

.login-page-redesign .footer-links a:hover {
  color: white;
}

.login-page-redesign .footer-links span {
  color: rgba(255, 255, 255, 0.4);
}

.login-page-redesign .copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  margin: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile responsive */

/* ===========================================
   SALES REP PORTAL STYLES
   =========================================== */

.rep-offers-page {
  display: flex !important;
  min-height: 100vh !important;
  background: #f8f9fa !important;
}

/* Sidebar */
.rep-sidebar {
  width: 16.25rem !important;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
  color: white !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  height: 100vh !important;
  z-index: 100 !important;
}

.sidebar-logo {
  padding: 1.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidebar-logo .logo-text {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #8b5cf6 !important;
}

.sidebar-logo .logo-subtitle {
  display: block !important;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 0.25rem !important;
}

.sidebar-nav {
  flex: 1 !important;
  padding: 1rem 0 !important;
}

.sidebar-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1.5rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.sidebar-item.active {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #8b5cf6 !important;
  border-right: 3px solid #8b5cf6 !important;
}

.sidebar-user {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.user-avatar {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  background: #8b5cf6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

.user-name {
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

.user-role {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Main Content */
.rep-main-content {
  flex: 1 !important;
  margin-left: 16.25rem !important;
  padding: 2rem !important;
}

.rep-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.rep-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.rep-header .subtitle {
  color: #6b7280;
  margin: 0.25rem 0 0;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 0.25rem solid #e5e7eb;
}

.stat-card.stat-primary {
  border-left-color: #8b5cf6;
}
.stat-card.stat-warning {
  border-left-color: #f59e0b;
}
.stat-card.stat-info {
  border-left-color: #3b82f6;
}
.stat-card.stat-success {
  border-left-color: #10b981;
}
.stat-card.stat-purple {
  border-left-color: #8b5cf6;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
}

.stat-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-top: 0.25rem;
}

.stat-subtitle {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 2px;
}

/* Offers Section */
.offers-section {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.tab-filters {
  display: flex;
  gap: 0.5rem;
}

.tab-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 0.2s;
}

.tab-btn:hover {
  background: #f3f4f6;
}

.tab-btn.active {
  background: #8b5cf6;
  color: white;
}

.tab-count {
  opacity: 0.7;
  font-size: 0.75rem;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f3f4f6;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.875rem;
  width: 12.5rem;
}

/* Table */
.offers-table-wrapper {
  overflow-x: auto;
}

.offers-table {
  width: 100%;
  border-collapse: collapse;
}

.offers-table th {
  text-align: left;
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.offers-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.offer-row:hover {
  background: #f9fafb;
}

.offer-link {
  color: #8b5cf6;
  font-weight: 500;
  text-decoration: none;
}

.offer-link:hover {
  text-decoration: underline;
}

.customer-cell {
  line-height: 1.4;
}

.customer-name {
  font-weight: 500;
  color: #1a1a2e;
}

.customer-email {
  font-size: 0.75rem;
  color: #9ca3af;
}

.value-cell {
  font-weight: 600;
  color: #1a1a2e;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-draft {
  background: #e5e7eb;
  color: #4b5563;
}
.status-pending_approval {
  background: #fef3c7;
  color: #92400e;
}
.status-sent {
  background: #dbeafe;
  color: #1e40af;
}
.status-accepted {
  background: #d1fae5;
  color: #065f46;
}
.status-rejected {
  background: #fee2e2;
  color: #991b1b;
}
.status-expired {
  background: #f3f4f6;
  color: #6b7280;
}

.actions-cell {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.status-note {
  font-size: 0.75rem;
  color: #9ca3af;
  font-style: italic;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 1rem;
  width: 100%;
  max-width: 31.25rem;
  max-height: 90vh;
  overflow: auto;
}

.push-modal {
  max-width: 35rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #9ca3af;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.offer-summary-card {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.summary-row .label {
  color: #6b7280;
}

.summary-row .value {
  font-weight: 500;
}

.summary-row .value.highlight {
  color: #8b5cf6;
  font-size: 1.125rem;
}

.settings-panel h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem;
}

.setting-group {
  margin-bottom: 1rem;
}

.setting-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

.setting-group select,
.setting-group textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.setting-group textarea {
  resize: vertical;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3.75rem 1.25rem;
  color: #9ca3af;
}

.empty-state h3 {
  margin: 1rem 0 0.5rem;
  color: #374151;
}

/* Loading */
.loading {
  text-align: center;
  padding: 0.75rem 2rem;
  color: #9ca3af;
}

/* Buttons */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.btn-ghost {
  background: transparent;
  color: #6b7280;
}

.btn-ghost:hover {
  background: #f3f4f6;
}

/* Additional Rep Portal Styles */
.dashboard-grid,
.customers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.quick-stat-card,
.customer-card,
.report-card {
  background: white;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.customer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.customer-header h3 {
  margin: 0;
  font-size: 1rem;
}
.customer-email {
  color: #6b7280;
  font-size: 0.875rem;
}
.customer-revenue {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}
.customer-status {
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
}
.status-active {
  background: #d1fae5;
  color: #065f46;
}
.status-new {
  background: #dbeafe;
  color: #1e40af;
}
.status-prospect {
  background: #fef3c7;
  color: #92400e;
}

.reports-list {
  margin-top: 1.5rem;
}
.report-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.report-info h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}
.report-info p {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
}
.report-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.report-frequency {
  color: #9ca3af;
  font-size: 0.8125rem;
}

.recent-section {
  margin-top: 2rem;
}
.recent-section h2 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
.activity-list {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
}
.activity-item {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.activity-item:last-child {
  border-bottom: none;
}
.activity-time {
  color: #9ca3af;
  font-size: 0.8125rem;
}

.breadcrumb {
  margin-bottom: 1.25rem;
}
.breadcrumb a {
  color: #8b5cf6;
  text-decoration: none;
}

.offer-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.offer-detail-header h1 {
  margin: 0;
  display: inline;
  margin-right: 0.75rem;
}
.header-actions {
  display: flex;
  gap: 2rem;
}

.detail-section {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.detail-section h2 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.info-row {
  display: flex;
  flex-direction: column;
}
.info-label {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.info-value {
  font-size: 0.9375rem;
  font-weight: 500;
}

.line-items-table {
  width: 100%;
  border-collapse: collapse;
}
.line-items-table th,
.line-items-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
.line-items-table th {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
}
.line-items-table tfoot td {
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
}

/* Detail Drawer */
.detail-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 26.25rem;
  height: 100vh;
  background: white;
  box-shadow: -0.25rem 0 1.25rem rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.drawer-header h2 {
  margin: 0;
  font-size: 1.125rem;
  color: #8b5cf6;
}

.drawer-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  color: #9ca3af;
  line-height: 1;
}

.drawer-body {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.drawer-body .status-badge {
  margin-bottom: 1.25rem;
}

.drawer-body .detail-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f3f4f6;
}

.drawer-body .detail-section:last-child {
  border-bottom: none;
}

.drawer-body h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 0.5rem;
}

.drawer-body .offer-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #8b5cf6;
}

.drawer-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 0.75rem;
}

.drawer-footer .btn {
  flex: 1;
}

/* ===== REP OFFER DETAIL PAGE ===== */
.offer-detail-page {
  padding: 2rem;
  max-width: 87.5rem;
  margin: 0 auto;
}

.offer-detail-page .page-header {
  margin-bottom: 2rem;
}

.offer-detail-page .breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.offer-detail-page .breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}

.offer-detail-page .breadcrumb a:hover {
  text-decoration: underline;
}

.offer-detail-page .breadcrumb .separator {
  color: var(--border);
}

.offer-detail-page .header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.offer-detail-page .header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.offer-detail-page .header-left h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.offer-detail-page .header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.offer-detail-page .detail-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}
.offer-detail-page .detail-grid > :first-child {
  flex: 999 1 26rem;
  min-width: 0;
}
.offer-detail-page .detail-grid > :last-child {
  flex: 1 1 23.75rem;
  min-width: 0;
}

.offer-detail-page .detail-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.offer-detail-page .detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.offer-detail-page .detail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.offer-detail-page .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}

.offer-detail-page .card-header h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin: 0;
}

.offer-detail-page .card-body {
  padding: 1.25rem;
}

/* Customer Card */
.offer-detail-page .customer-info .info-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.offer-detail-page .customer-info .info-row:last-child {
  border-bottom: none;
}

.offer-detail-page .customer-info .label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.offer-detail-page .customer-info .value {
  font-size: 0.9375rem;
  color: var(--foreground);
}

.offer-detail-page .customer-info .value.company {
  font-weight: 600;
}

.offer-detail-page .customer-info .value.link {
  color: var(--primary);
  text-decoration: none;
}

.offer-detail-page .customer-info .value.link:hover {
  text-decoration: underline;
}

/* Summary Card */
.offer-detail-page .summary-card .card-body {
  padding: 1rem 1.25rem;
}

.offer-detail-page .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.offer-detail-page .summary-row .label {
  color: var(--muted-foreground);
}

.offer-detail-page .summary-row .value {
  font-weight: 500;
}

.offer-detail-page .summary-row.discount .value {
  color: #10b981;
}

.offer-detail-page .summary-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 0;
}

.offer-detail-page .summary-row.total {
  padding-top: 0.75rem;
}

.offer-detail-page .summary-row.total .label {
  font-weight: 600;
  color: var(--foreground);
}

.offer-detail-page .summary-row.total .value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

.offer-detail-page .summary-meta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.offer-detail-page .summary-meta .meta-row {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
}

.offer-detail-page .summary-meta .label {
  color: var(--muted-foreground);
}

/* Line Items Card */
.offer-detail-page .line-items-card .card-header .item-count {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.offer-detail-page .line-items-table {
  width: 100%;
  border-collapse: collapse;
}

.offer-detail-page .line-items-table th {
  text-align: left;
  padding: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}

.offer-detail-page .line-items-table td {
  padding: 1rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.offer-detail-page .line-items-table tr:last-child td {
  border-bottom: none;
}

.offer-detail-page .line-items-table .product-cell .product-name {
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.offer-detail-page .line-items-table .product-cell .product-sku {
  font-size: 0.75rem;
  color: var(--primary);
  font-family: monospace;
  margin-bottom: 0.25rem;
}

.offer-detail-page .line-items-table .product-cell .product-desc {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.offer-detail-page .line-items-table .qty,
.offer-detail-page .line-items-table .price,
.offer-detail-page .line-items-table .discount,
.offer-detail-page .line-items-table .total {
  text-align: right;
  white-space: nowrap;
}

.offer-detail-page .line-items-table .discount-badge {
  display: inline-block;
  background: #dcfce7;
  color: #16a34a;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.offer-detail-page .line-items-table .total {
  font-weight: 600;
}

/* Notes Card */
.offer-detail-page .notes-card .notes-text {
  color: var(--foreground);
  line-height: 1.6;
  margin: 0;
}

/* Activity Card */
.offer-detail-page .activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.offer-detail-page .activity-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  position: relative;
}

.offer-detail-page .activity-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 1.75rem;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.offer-detail-page .activity-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.offer-detail-page .activity-content {
  flex: 1;
}

.offer-detail-page .activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.offer-detail-page .activity-action {
  font-weight: 600;
  color: var(--foreground);
}

.offer-detail-page .activity-time {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.offer-detail-page .activity-user {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.offer-detail-page .activity-details {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  font-style: italic;
  margin-top: 0.25rem;
}

/* Push Modal Styles */
.push-modal {
  width: 37.5rem;
  max-width: calc(90 * var(--vwx));
}

.push-modal .step-indicator {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.push-modal .step {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  padding: 0.5rem 1rem;
  border-radius: 1.25rem;
  background: var(--muted);
}

.push-modal .step.active {
  background: var(--primary);
  color: white;
}

.push-modal .step.completed {
  background: #dcfce7;
  color: #16a34a;
}

.push-modal .form-section {
  margin-bottom: 1.5rem;
}

.push-modal .form-section h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.push-modal .radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.push-modal .radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.push-modal .radio-option:hover {
  border-color: var(--primary);
}

.push-modal .radio-option.selected {
  border-color: var(--primary);
  background: rgba(0, 82, 147, 0.05);
}

.push-modal .radio-option input {
  margin-top: 0.25rem;
}

.push-modal .radio-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.push-modal .radio-label {
  font-weight: 600;
}

.push-modal .radio-desc {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.push-modal .info-text {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  background: #fef3c7;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border-left: 0.25rem solid #f59e0b;
}

.push-modal .checkbox-group {
  margin-top: 0.75rem;
}

.push-modal .checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.push-modal .preview-section h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.push-modal .email-preview {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.push-modal .email-field {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.push-modal .email-field .field-label {
  font-weight: 600;
  color: var(--muted-foreground);
  width: 3.75rem;
}

.push-modal .email-body-preview {
  padding: 1rem;
  background: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.push-modal .email-body-preview p {
  margin: 0 0 0.75rem;
}

.push-modal .attachment-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  margin-top: 0.5rem;
}

.push-modal .modal-body.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 12.5rem;
  text-align: center;
}

.push-modal .sending-animation,
.push-modal .success-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.push-modal .spinner {
  width: 3rem;
  height: 3rem;
  border: 0.25rem solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.push-modal .success-icon {
  width: 4rem;
  height: 4rem;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
}

.push-modal .modal-footer.centered {
  justify-content: center;
  border-top: none;
  padding-top: 0;
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 25rem;
  gap: 1rem;
}

/* Full-viewport loading — fills the area between the fixed header and
   the footer so the spinner is centred in the visible content area.
   Subtracts both header and footer heights so the footer stays visible. */
.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: calc(
    100vh - var(--header-height, 4rem) - var(--footer-height, 20.38rem)
  );
  color: #6b6b6b;
  font-size: 0.875rem;
}

.loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Shown by ProtectedState.buildUnauthenticated — the reload-loop guard's
   fallback for the rare case a redirect to /login was refused this tab.
   Reuses .page-loading's centered layout; only the link needs its own
   style since the default anchor look doesn't match the rest of the app. */
.protected-state-login-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.protected-state-login-link:hover {
  text-decoration: underline;
}

/* ===== SOPHIE Demo UI Enhancement Styles ===== */

/* Offer Hierarchy Section */
.offer-hierarchy-card .bay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
  gap: 0.75rem;
}

.offer-hierarchy-card .bay-card {
  background: #f8f7fc;
  border: 1px solid #e5e4eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  text-align: center;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.offer-hierarchy-card .bay-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 0.5rem rgba(138, 0, 229, 0.1);
}

.offer-hierarchy-card .bay-number {
  font-size: 0.625rem;
  font-weight: 700;
  color: #6b6b76;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.offer-hierarchy-card .asset-type {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 0.25rem;
}

.offer-hierarchy-card .asset-code {
  font-size: 0.75rem;
  color: #1a1a1a;
  font-family: monospace;
}

.offer-hierarchy-card .bay-count-badge {
  background: #f3e8ff;
  color: #1a1a1a;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Activity Breakdown / Scope of Work Section */
.activity-breakdown-card .service-level-badge {
  background: #dcfce7;
  color: #16a34a;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
}

.activity-table th {
  text-align: left;
  padding: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b6b76;
  background: #f8f7fc;
  border-bottom: 1px solid #e5e4eb;
}

.activity-table th.numeric {
  text-align: right;
}

.activity-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #f0f0f5;
  font-size: 0.875rem;
}

.activity-table td.numeric {
  text-align: right;
  font-family: monospace;
}

.activity-table td.evq {
  font-family: monospace;
  color: #1a1a1a;
  font-size: 0.75rem;
}

.activity-table td.total {
  font-weight: 600;
}

.activity-table tr:last-child td {
  border-bottom: none;
}

.activity-table tr:hover {
  background: #faf9fc;
}

/* BOM Preview Section */
.bom-preview-card .bom-group {
  border-bottom: 1px solid #e5e4eb;
  padding: 0.75rem 0;
}

.bom-preview-card .bom-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bom-preview-card .bom-group:first-child {
  padding-top: 0;
}

.bom-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  cursor: pointer;
}

.bom-group-header .bom-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bom-group-header .bom-icon.spare-parts {
  background: #fef3c7;
}

.bom-group-header .bom-icon.spare-parts::after {
  content: "🔧";
  font-size: 0.75rem;
}

.bom-group-header .bom-icon.tools {
  background: #dbeafe;
}

.bom-group-header .bom-icon.tools::after {
  content: "🛠";
  font-size: 0.75rem;
}

.bom-group-header .bom-icon.consumables {
  background: #f3e8ff;
}

.bom-group-header .bom-icon.consumables::after {
  content: "📦";
  font-size: 0.75rem;
}

.bom-group-header .group-title {
  font-weight: 600;
  flex: 1;
  color: #1a1a2e;
}

.bom-group-header .item-count {
  font-size: 0.75rem;
  color: #6b6b76;
  background: #f0f0f5;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

.bom-group-items {
  padding-left: 2rem;
  margin-top: 0.5rem;
}

.bom-item {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  align-items: center;
}

.bom-item .evq {
  font-family: monospace;
  color: #1a1a1a;
  font-size: 0.75rem;
}

.bom-item .name {
  color: #4b5563;
}

.bom-item .qty {
  color: #6b6b76;
  font-size: 0.8125rem;
}

.bom-more {
  font-size: 0.75rem;
  color: #1a1a1a;
  padding: 0.5rem 0;
  cursor: pointer;
}

.bom-more:hover {
  text-decoration: underline;
}

/* Internal Approvals Section */
.approvals-card .approval-workflow {
  display: flex;
  flex-direction: column;
}

.approvals-card .approval-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  position: relative;
}

.approvals-card .approval-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 2.5rem;
  bottom: 0;
  width: 2px;
  background: #e5e4eb;
}

.approvals-card .approval-step.completed::after {
  background: #10b981;
}

.approvals-card .step-indicator {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  font-weight: 600;
}

.approvals-card .approval-step.completed .step-indicator {
  background: #10b981;
  color: white;
}

.approvals-card .approval-step.pending .step-indicator {
  background: #f0f0f5;
  color: #6b6b76;
}

.approvals-card .approval-step.current .step-indicator {
  background: #1a1a1a;
  color: white;
}

.approvals-card .step-content {
  flex: 1;
}

.approvals-card .step-title {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 0.875rem;
}

.approvals-card .step-assignee {
  font-size: 0.8125rem;
  color: #6b6b76;
  margin-top: 0.125rem;
}

.approvals-card .step-pending {
  font-size: 0.75rem;
  color: #1a1a1a;
  margin-top: 0.125rem;
  font-style: italic;
}

/* ===== Stitch Design - Substation Layout (Bay Cards) ===== */

.substation-layout .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.substation-layout .header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.substation-layout .layout-icon {
  font-size: 1.25rem;
  color: #1a1a1a;
}

.bay-cards-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bay-group-card {
  background: #ffffff;
  border: 1px solid #e5e4eb;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.2s ease;
}

.bay-group-card:hover {
  border-color: #1a1a1a;
  box-shadow: 0 0.25rem 0.75rem rgba(138, 0, 229, 0.08);
}

.bay-group-card.configured {
  border-left: 3px solid #10b981;
}

.bay-group-card.needs-setup {
  border-left: 3px solid #f59e0b;
}

.bay-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #faf9fc;
  border-bottom: 1px solid #f0f0f5;
}

.bay-card-header .bay-icon {
  font-size: 1.25rem;
}

.bay-card-header .bay-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.bay-card-header .bay-label {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 0.9375rem;
}

.config-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.config-badge.success {
  background: #dcfce7;
  color: #16a34a;
}

.config-badge.warning {
  background: #fef3c7;
  color: #d97706;
}

.bay-card-body {
  padding: 1rem;
}

.bay-card-body .asset-info {
  margin-bottom: 0.75rem;
}

.bay-card-body .asset-name {
  display: block;
  font-weight: 600;
  color: #1a1a2e;
  font-size: 0.9375rem;
}

.bay-card-body .asset-details {
  display: block;
  font-size: 0.8125rem;
  color: #6b6b76;
  margin-top: 0.25rem;
}

.bay-card-body .config-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bay-card-body .voltage-badge,
.bay-card-body .phase-info,
.bay-card-body .width-info {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #4b5563;
}

.bay-card-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid #f0f0f5;
  display: flex;
  justify-content: flex-end;
}

.add-bay-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px dashed #e5e4eb;
  border-radius: 0.75rem;
  color: #6b6b76;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-bay-card:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
  background: #faf5ff;
}

.add-bay-card .add-icon {
  font-size: 1.25rem;
  font-weight: 300;
}

.layout-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0f0f5;
  font-size: 0.8125rem;
  color: #6b6b76;
}

/* Error state */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.error-state .error-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #fef2f2;
  color: #dc2626;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.error-state h2 {
  color: #1a1a2e;
  margin-bottom: 0.5rem;
}

.error-state p {
  color: #6b6b76;
  margin-bottom: 1.5rem;
}

/* ===== Consolidated BOM Preview (Stitch Design) ===== */

.consolidated-bom-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.consolidated-bom-card .header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.consolidated-bom-card .bom-main-icon {
  font-size: 1.125rem;
}

.consolidated-bom-card .total-items-badge {
  background: #f3e8ff;
  color: #1a1a1a;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.consolidated-section {
  padding: 1rem 0;
  border-bottom: 1px solid #f0f0f5;
}

.consolidated-section:last-of-type {
  border-bottom: none;
}

.consolidated-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.consolidated-section .section-icon {
  font-size: 0.875rem;
}

.consolidated-section .section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b6b76;
}

.consolidated-section .section-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.consolidated-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #faf9fc;
  border-radius: 0.5rem;
  transition: background 0.2s ease;
}

.consolidated-item:hover {
  background: #f3f0f8;
}

.consolidated-item .item-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.consolidated-item .item-details {
  flex: 1;
  min-width: 0;
}

.consolidated-item .item-name {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 0.875rem;
}

.consolidated-item .item-description {
  font-size: 0.75rem;
  color: #6b6b76;
  margin-top: 0.125rem;
}

.consolidated-item .item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.consolidated-item .item-price {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 0.875rem;
}

.consolidated-item .item-qty {
  font-size: 0.75rem;
  color: #6b6b76;
}

.more-items-note {
  font-size: 0.75rem;
  color: #1a1a1a;
  padding: 0.5rem 0.75rem;
  text-align: center;
  cursor: pointer;
}

.more-items-note:hover {
  text-decoration: underline;
}

.view-full-bom {
  text-align: center;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid #f0f0f5;
}

.view-full-bom .btn-link {
  background: none;
  border: none;
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 1rem;
}

.view-full-bom .btn-link:hover {
  text-decoration: underline;
}

/* === Offer Preview Page === */
/* Printable/PDF-ready offer view */

.offer-preview-page {
  min-height: 100vh;
  background: var(--color-gray-100);
}

.offer-preview-page.loading,
.offer-preview-page.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  text-align: center;
}

/* Print toolbar - hidden when printing */
.print-toolbar {
  background: white;
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--spacing-3) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.print-toolbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar-actions {
  display: flex;
  gap: var(--spacing-3);
}

/* Offer document */
.offer-document {
  max-width: 53.125rem;
  margin: var(--spacing-6) auto;
  background: white;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Offer header */
.offer-header {
  background: linear-gradient(135deg, #1a1a1a 0%, #006666 100%);
  color: white;
  padding: var(--spacing-8);
}

.header-brand {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-6);
}

.se-logo svg {
  display: block;
}

.header-title h1 {
  font-size: var(--font-size-3xl);
  font-weight: 300;
  margin: 0;
}

.offer-number {
  display: block;
  font-size: var(--font-size-lg);
  opacity: 0.9;
  margin-top: var(--spacing-1);
}

.header-meta {
  display: flex;
  gap: var(--spacing-8);
  padding-top: var(--spacing-4);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.header-meta .meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.header-meta .meta-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.header-meta .meta-value {
  font-size: var(--font-size-base);
  font-weight: 600;
}

.header-meta .meta-value.highlight {
  color: #ffcc00;
}

/* Offer sections */
.offer-section {
  padding: var(--spacing-6) var(--spacing-8);
  border-bottom: 1px solid var(--color-gray-200);
}

.offer-section:last-of-type {
  border-bottom: none;
}

.offer-section h2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-2);
  border-bottom: 2px solid #1a1a1a;
}

/* Customer section */
.customer-section .customer-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}

.customer-section .detail-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.customer-section .detail-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

.customer-section .detail-value {
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
}

/* Offer items table */
.items-section .items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.items-section .items-table th {
  background: var(--color-gray-100);
  padding: var(--spacing-3);
  text-align: left;
  font-weight: 600;
  color: var(--color-gray-700);
  border-bottom: 2px solid var(--color-gray-300);
}

.items-section .items-table td {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-gray-200);
  vertical-align: top;
}

.items-section .col-pos {
  width: 3.125rem;
  text-align: center;
}

.items-section .col-evq {
  width: 8.75rem;
}

.items-section .col-qty,
.items-section .col-unit,
.items-section .col-total {
  text-align: right;
  white-space: nowrap;
}

.items-section .col-qty {
  width: 3.75rem;
}

.items-section .col-unit,
.items-section .col-total {
  width: 6.25rem;
  font-family: monospace;
}

.items-section .evq-number {
  font-family: monospace;
  font-size: var(--font-size-xs);
  background: var(--color-gray-100);
  padding: 2px 0.375rem;
  border-radius: var(--radius-sm);
}

.items-section .item-title {
  display: block;
  font-weight: 500;
}

.items-section .item-notes {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: 0.25rem;
}

/* Pricing section */
.pricing-section .pricing-summary {
  max-width: 25rem;
  margin-left: auto;
}

.pricing-section .price-line {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.pricing-section .price-line:last-child {
  border-bottom: none;
}

.pricing-section .price-line.discount {
  color: var(--color-success);
}

.pricing-section .price-line.total {
  padding-top: var(--spacing-3);
  margin-top: var(--spacing-2);
  border-top: 2px solid var(--color-gray-800);
  border-bottom: none;
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.pricing-section .pricing-pending {
  color: var(--color-gray-500);
  font-style: italic;
}

/* Terms section */
.terms-section .terms-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.terms-section .term-item h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-1);
}

.terms-section .term-item p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
}

/* Signature section */
.signature-section .signature-content p {
  margin-bottom: var(--spacing-4);
  color: var(--color-gray-600);
}

.signature-section .signature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-8);
  margin-top: var(--spacing-6);
}

.signature-section .signature-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.signature-section .signature-line {
  height: 1px;
  background: var(--color-gray-400);
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-10);
}

.signature-section .signature-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.signature-section .signature-date {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: var(--spacing-2);
}

/* Offer footer */
.offer-footer {
  background: var(--color-gray-50);
  padding: var(--spacing-4) var(--spacing-8);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.offer-footer .footer-content {
  text-align: left;
}

.offer-footer .footer-content p {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: 0;
}

.offer-footer .footer-content p:first-child {
  font-weight: 600;
  color: var(--color-gray-700);
}

.offer-footer .footer-ref {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  .offer-preview-page {
    background: white;
    padding: 0;
  }

  .offer-document {
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    max-width: 100%;
  }

  .offer-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .offer-section {
    break-inside: avoid;
  }

  .signature-section {
    break-before: avoid;
  }
}

/* Quote Detail Page Styles */
.quote-detail-page {
  min-height: 100vh;
  background: var(--color-gray-50);
}

.quote-detail-page .page-header {
  background: white;
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--spacing-6) 0;
}

.quote-detail-page .header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.quote-detail-page .header-main h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin: 0;
}

.quote-detail-page .header-actions {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.quote-detail-page .quote-content {
  padding: var(--spacing-6) 0;
}

.quote-detail-page .quote-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-6);
}
.quote-detail-page .quote-layout > :first-child {
  flex: 999 1 26rem;
  min-width: 0;
}
.quote-detail-page .quote-layout > :last-child {
  flex: 1 1 21.875rem;
  min-width: 0;
}

.quote-detail-page .quote-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.quote-info-card,
.quote-items-card {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.quote-info-card h3,
.quote-items-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-4);
  color: var(--color-gray-800);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.info-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

.info-value {
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
}

.quote-detail-page .quote-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.quote-detail-page .actions-card {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.quote-detail-page .actions-card h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--spacing-3);
  color: var(--color-gray-800);
}

.quote-detail-page .action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Quote status badges */
.quote-status {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.quote-status.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.quote-status.status-quoted {
  background: #dbeafe;
  color: #1d4ed8;
}

.quote-status.status-accepted {
  background: #dcfce7;
  color: #166534;
}

.quote-status.status-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.quote-status.status-expired {
  background: var(--color-gray-200);
  color: var(--color-gray-600);
}

/* Button variants */
.btn-danger {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn-danger:hover {
  background: var(--color-error);
  color: white;
}

.btn-export {
  gap: var(--spacing-2);
}

/* === Services Page - SOPHIE Parity Styles === */

/* Service Tabs Section */
.service-tabs-section {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}

.service-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: var(--spacing-4) 0;
}

.service-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.service-tab:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-800);
}

.service-tab.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.service-tab svg {
  flex-shrink: 0;
}

/* Hotline Section */
.hotline-section {
  padding: var(--spacing-16) 0;
  background: linear-gradient(
    180deg,
    var(--color-gray-50) 0%,
    var(--color-white) 100%
  );
}

.hotline-intro {
  text-align: center;
  max-width: 37.5rem;
  margin: 0 auto var(--spacing-12);
}

.hotline-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 6.25rem;
  height: 6.25rem;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  border-radius: 50%;
  margin-bottom: var(--spacing-6);
  color: white;
}

.hotline-intro h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

.hotline-desc {
  color: var(--color-gray-600);
  font-size: var(--font-size-lg);
  line-height: 1.7;
}

/* Hotline Pricing Cards */
.hotline-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--spacing-8);
  max-width: 50rem;
  margin: 0 auto;
}

.hotline-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hotline-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-lg);
}

.hotline-card.featured {
  border: 2px solid var(--color-primary);
  position: relative;
}

.hotline-card-header {
  padding: var(--spacing-6);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.hotline-card.featured .hotline-card-header {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  border-bottom: none;
}

.hotline-card.featured .hotline-card-header h3,
.hotline-card.featured .hotline-card-header p {
  color: var(--color-white);
}

.hotline-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-3);
}

.hotline-card-header h3 {
  font-size: var(--font-size-xl);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.hotline-card-header p {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.hotline-card-body {
  padding: var(--spacing-6);
}

.hotline-price {
  margin-bottom: var(--spacing-6);
  text-align: center;
}

.hotline-price .price-amount {
  display: block;
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-gray-900);
}

.hotline-price .price-period {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.hotline-features {
  list-style: none;
}

.hotline-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-gray-100);
}

.hotline-features li:last-child {
  border-bottom: none;
}

.hotline-features li svg {
  color: var(--color-success);
  flex-shrink: 0;
}

.hotline-card-footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--color-gray-100);
}

.hotline-config-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  max-width: 37.5rem;
  margin: var(--spacing-8) auto 0;
  padding: var(--spacing-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.hotline-config-note svg {
  flex-shrink: 0;
  color: var(--color-info);
}

.hotline-config-note a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Additional Order Items Section */
.additional-section {
  padding: var(--spacing-16) 0;
  background: var(--color-white);
}

.additional-intro {
  text-align: center;
  max-width: 37.5rem;
  margin: 0 auto var(--spacing-12);
}

.additional-intro h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

.additional-intro p {
  color: var(--color-gray-600);
  font-size: var(--font-size-lg);
}

/* Category Cards Grid */
.additional-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-12);
}

.category-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.category-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.category-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
  color: var(--color-primary);
}

.category-card:hover .category-icon {
  background: var(--color-primary);
  color: white;
}

.category-card h3 {
  font-size: var(--font-size-lg);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.category-card p {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  flex-grow: 1;
}

.category-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.category-link svg {
  transition: transform 0.2s ease;
}

.category-card:hover .category-link svg {
  transform: translateX(0.25rem);
}

.additional-browse-all {
  text-align: center;
}

.additional-browse-all .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
}

/* Responsive adjustments for service tabs */

/* ================================================
   ASSISTED SELLING MODE STYLES
   ================================================ */

/* === Assisted Selling Banner === */
.assisted-selling-banner {
  background: #1a1a1a;
  border-top: 1px solid #333;
  padding: 0.375rem 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  font-size: 0.8125rem;
}

.assisted-selling-banner .banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.assisted-selling-banner .banner-left {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assisted-selling-banner .mode-icon {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.assisted-selling-banner .mode-label {
  font-weight: 700;
  color: #fff;
}

.assisted-selling-banner .separator {
  margin: 0 0.375rem;
  color: rgba(255, 255, 255, 0.3);
}

.assisted-selling-banner .info-label {
  color: rgba(255, 255, 255, 0.7);
}

.assisted-selling-banner .info-value {
  color: rgba(255, 255, 255, 0.9);
}

.assisted-selling-banner .customer-name {
  color: #fff;
  font-weight: 600;
}

.assisted-selling-banner .banner-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assisted-selling-banner .banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.assisted-selling-banner .switch-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

.assisted-selling-banner .switch-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.assisted-selling-banner .draft-btn {
  background: #7c3aed;
  color: white;
  border: 1px solid #7c3aed;
}

.assisted-selling-banner .draft-btn:hover {
  background: #6d28d9;
  border-color: #6d28d9;
  text-decoration: none;
}

.assisted-selling-banner .draft-count {
  font-weight: 700;
}

.assisted-selling-banner .exit-btn {
  background: transparent;
  border: 1px solid rgba(255, 100, 100, 0.6);
  color: #ff6b6b;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

.assisted-selling-banner .exit-btn:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: #ff6b6b;
  color: #ff6b6b;
  text-decoration: none;
}

/* === Draft Mode Badge (Catalog Page) === */
.draft-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: #ecfdf5;
  border: 1px solid #10b981;
  border-radius: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #047857;
  margin-left: 1rem;
}

.draft-mode-badge .badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #10b981;
  border-radius: 50%;
  animation: assistedPulse 2s ease-in-out infinite;
}

@keyframes assistedPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* === Customer Pricing Badge (Product Cards) === */
.customer-pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.19rem 0.5rem;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
}

/* === Add to Offer Button === */
.add-to-offer-btn {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: white !important;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.add-to-offer-btn:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
}

.add-to-offer-btn.added {
  background: #10b981 !important;
  border-color: #10b981 !important;
}

.add-to-offer-btn.loading {
  opacity: 0.7;
  cursor: wait;
}

/* === RFQ Badge (Product Cards in Assisted Mode) === */
.product-card-link .rfq-badge {
  color: #7c3aed;
  font-style: italic;
  font-size: var(--font-size-sm);
  margin-top: 0.5rem;
}

.product-card-link .rfq-badge .rfq-note {
  display: block;
  font-size: 0.6875rem;
  color: #f59e0b;
  font-style: normal;
  margin-top: 2px;
}

/* === Pricing Insights Panel (Product Page) === */
.pricing-insights-panel {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
}

.pricing-insights-panel .panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e9ecef;
}

.pricing-insights-panel .insight-row {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
  gap: 0.75rem;
}

.pricing-insights-panel .insight-row:last-child {
  border-bottom: none;
}

.pricing-insights-panel .insight-row.last-paid {
  background: #f0fdf4;
  margin: -0.75rem -1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
}

.pricing-insights-panel .insight-icon {
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.pricing-insights-panel .insight-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pricing-insights-panel .insight-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.pricing-insights-panel .insight-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
}

.pricing-insights-panel .insight-delta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem;
}

.pricing-insights-panel .insight-delta.negative {
  background: #ecfdf5;
  color: #047857;
}

.pricing-insights-panel .insight-row.benchmark {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.pricing-insights-panel .benchmark-label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-insights-panel .benchmark-bar-container {
  width: 100%;
}

.pricing-insights-panel .benchmark-bar {
  height: 0.5rem;
  background: linear-gradient(90deg, #e5e7eb 0%, #10b981 50%, #f59e0b 100%);
  border-radius: 0.25rem;
  position: relative;
  margin-bottom: 0.25rem;
}

.pricing-insights-panel .benchmark-marker {
  position: absolute;
  top: -0.25rem;
  width: 0.25rem;
  height: 1rem;
  background: var(--color-gray-900);
  border-radius: 2px;
  transform: translateX(-50%);
}

.pricing-insights-panel .benchmark-range {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--color-gray-500);
}

/* === Customer Selection Page === */
.assisted-customer-select-page {
  background: var(--color-gray-50);
  min-height: 100vh;
}

.assisted-customer-select-page .page-container {
  max-width: 56.25rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.assisted-customer-select-page .page-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.assisted-customer-select-page .header-icon {
  width: 4rem;
  height: 4rem;
  background: #f3e8ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #7c3aed;
}

.assisted-customer-select-page h1 {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 0.5rem;
}

.assisted-customer-select-page .page-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  max-width: 31.25rem;
  margin: 0 auto;
}

/* Search and filters */
.assisted-customer-select-page .search-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.assisted-customer-select-page .search-box {
  flex: 1;
  position: relative;
}

.assisted-customer-select-page .search-box .search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-400);
}

.assisted-customer-select-page .search-box .search-input {
  width: 100%;
  padding: 0.75rem 0.75rem 0.75rem 2.75rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.5rem;
  font-size: var(--font-size-base);
}

.assisted-customer-select-page .search-box .search-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.assisted-customer-select-page .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.assisted-customer-select-page .filter-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.assisted-customer-select-page .region-select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.5rem;
  font-size: var(--font-size-base);
  min-width: 10rem;
}

/* Customer list */
.assisted-customer-select-page .customer-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.assisted-customer-select-page .customer-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}

.assisted-customer-select-page .customer-card:hover {
  border-color: #7c3aed;
  box-shadow: 0 0.25rem 0.75rem rgba(124, 58, 237, 0.1);
}

.assisted-customer-select-page .customer-avatar {
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.assisted-customer-select-page .customer-info {
  flex: 1;
}

.assisted-customer-select-page .customer-name-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}

.assisted-customer-select-page .customer-info .customer-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
}

.assisted-customer-select-page .contract-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.5rem;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 0.75rem;
}

.assisted-customer-select-page .customer-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.375rem;
}

.assisted-customer-select-page .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-gray-600);
}

.assisted-customer-select-page .meta-item.spot-pricing {
  color: #f59e0b;
}

.assisted-customer-select-page .pricing-preview {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.assisted-customer-select-page .start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* Empty state */
.assisted-customer-select-page .empty-state {
  text-align: center;
  padding: 3.75rem 1.25rem;
  color: var(--color-gray-500);
}

.assisted-customer-select-page .empty-state svg {
  color: var(--color-gray-300);
  margin-bottom: 1rem;
}

/* Info box */
.assisted-customer-select-page .info-box {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.75rem;
}

.assisted-customer-select-page .info-box svg {
  color: #3b82f6;
  flex-shrink: 0;
  margin-top: 2px;
}

.assisted-customer-select-page .info-content h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #1e40af;
  margin-bottom: 0.25rem;
}

.assisted-customer-select-page .info-content p {
  font-size: var(--font-size-sm);
  color: #1e40af;
  line-height: 1.5;
}

/* === Offer Draft Page === */
.offer-draft-page {
  background: var(--color-gray-50);
  min-height: 100vh;
}

.offer-draft-page .draft-page-container {
  max-width: 75rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.offer-draft-page .draft-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.offer-draft-page .header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.offer-draft-page .header-title h1 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin: 0;
}

.offer-draft-page .header-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.offer-draft-page .draft-badge {
  padding: 0.25rem 0.75rem;
  background: #f3e8ff;
  color: #7c3aed;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.75rem;
}

.offer-draft-page .customer-info {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.offer-draft-page .customer-link {
  color: #7c3aed;
  font-weight: 600;
}

.offer-draft-page .item-count {
  padding: 0.25rem 0.75rem;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 0.8125rem;
  border-radius: 0.75rem;
}

/* Empty state */
.offer-draft-page .draft-empty {
  text-align: center;
  padding: 5rem 2.5rem;
  background: white;
  border-radius: 0.75rem;
  border: 1px solid #e9ecef;
}

.offer-draft-page .draft-empty svg {
  color: var(--color-gray-300);
  margin-bottom: 1.25rem;
}

.offer-draft-page .draft-empty h3 {
  font-size: var(--font-size-xl);
  color: var(--color-gray-700);
  margin-bottom: 0.5rem;
}

.offer-draft-page .draft-empty p {
  color: var(--color-gray-500);
  margin-bottom: 1.5rem;
}

/* Draft content grid */
.offer-draft-page .draft-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}
.offer-draft-page .draft-content > :first-child {
  flex: 999 1 26rem;
  min-width: 0;
}
.offer-draft-page .draft-content > :last-child {
  flex: 1 1 22.5rem;
  min-width: 0;
}

/* Draft items list */
.offer-draft-page .draft-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.offer-draft-page .draft-item-card {
  display: grid;
  grid-template-columns: 5rem 1fr auto auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  transition: border-color 0.2s;
}

.offer-draft-page .draft-item-card:hover {
  border-color: #ced4da;
}

.offer-draft-page .item-image {
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-gray-100);
}

.offer-draft-page .item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-draft-page .placeholder-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
}

.offer-draft-page .item-info {
  min-width: 0;
}

.offer-draft-page .pricing-badge {
  display: inline-block;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}

.offer-draft-page .pricing-badge.priced {
  background: #ecfdf5;
  color: #047857;
}

.offer-draft-page .pricing-badge.rfq {
  background: #fff7ed;
  color: #c2410c;
}

.offer-draft-page .pricing-badge.manual,
.offer-draft-page .pricing-badge.manual-set {
  background: #eff6ff;
  color: #1d4ed8;
}

.offer-draft-page .item-name {
  display: block;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 0.25rem;
  text-decoration: none;
}

.offer-draft-page .item-name:hover {
  color: #7c3aed;
}

.offer-draft-page .item-sku {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.offer-draft-page .item-price,
.offer-draft-page .item-total {
  text-align: right;
}

.offer-draft-page .price-value,
.offer-draft-page .total-value {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
}

.offer-draft-page .pending-price {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-gray-400);
  font-style: italic;
}

.offer-draft-page .price-label,
.offer-draft-page .total-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-gray-500);
  margin-top: 2px;
}

.offer-draft-page .item-quantity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.offer-draft-page .qty-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  background: white;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.2s;
}

.offer-draft-page .qty-btn:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}

.offer-draft-page .qty-value {
  min-width: 2rem;
  text-align: center;
  font-weight: 600;
}

.offer-draft-page .item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.offer-draft-page .edit-price-btn {
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
}

.offer-draft-page .inline-price-edit {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.offer-draft-page .inline-price-edit .price-input {
  width: 6.25rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--color-primary);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: monospace;
  outline: none;
}

.offer-draft-page .inline-price-edit .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.offer-draft-page .btn-remove {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  color: var(--color-gray-400);
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.offer-draft-page .btn-remove:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Draft items footer */
.offer-draft-page .draft-items-footer {
  padding: 1rem 0;
}

.offer-draft-page .continue-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.offer-draft-page .continue-link:hover {
  color: #7c3aed;
}

/* Settings sidebar */
.offer-draft-page .draft-sidebar {
  position: sticky;
  top: 6.25rem;
}

.offer-draft-page .settings-panel {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.offer-draft-page .settings-panel .panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--font-size-base);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.offer-draft-page .setting-group {
  margin-bottom: 1rem;
}

.offer-draft-page .setting-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.375rem;
}

.offer-draft-page .form-select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.5rem;
  font-size: var(--font-size-sm);
  background: white;
}

.offer-draft-page .setting-group.checkbox {
  margin-top: 1.25rem;
}

.offer-draft-page .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}

.offer-draft-page .checkbox-label input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 2px;
  accent-color: #7c3aed;
}

.offer-draft-page .checkbox-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.offer-draft-page .checkbox-text .help-text {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

/* Totals section */
.offer-draft-page .totals-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e9ecef;
}

.offer-draft-page .total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.offer-draft-page .total-row.grand-total {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e9ecef;
}

.offer-draft-page .total-row.grand-total .total-value {
  color: #10b981;
}

/* Warning and error boxes */
.offer-draft-page .warning-box {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.8125rem;
  color: #92400e;
}

.offer-draft-page .error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.8125rem;
  color: #b91c1c;
}

/* Send button */
.offer-draft-page .btn-send {
  width: 100%;
  padding: 0.875rem;
  font-size: 0.9375rem;
  margin-top: 1rem;
}

.offer-draft-page .btn-send.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.offer-draft-page .btn-send.loading {
  opacity: 0.7;
}

.offer-draft-page .draft-note {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  line-height: 1.5;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

/* Send confirmation overlay */
.offer-draft-page .send-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 2.5rem;
}

.offer-draft-page .send-confirmation .confirmation-icon {
  margin-bottom: 1.5rem;
}

.offer-draft-page .send-confirmation h2 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 0.5rem;
}

.offer-draft-page .send-confirmation p {
  color: var(--color-gray-600);
  margin-bottom: 0.5rem;
}

.offer-draft-page .send-confirmation .redirect-message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.offer-draft-page .send-confirmation .offer-number {
  font-family: monospace;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-gray-100);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  margin: 1rem 0;
}

/* === Checkout Stepper (shared: cart, shipping, order details) === */
.checkout-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-8) 0 var(--spacing-6);
}

.checkout-stepper__steps {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
}

.checkout-stepper__step {
  font-size: clamp(1.5rem, calc(4 * var(--vwx)), 3.5rem);
  font-weight: 300;
  color: var(--color-gray-300);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color 0.2s;
  line-height: 1;
}

.checkout-stepper__step--active {
  color: var(--color-gray-900);
  font-weight: 700;
}

.checkout-stepper__step--past {
  color: var(--color-gray-400);
}

.checkout-stepper__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-900);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  margin-left: 0.375rem;
  vertical-align: super;
  white-space: nowrap;
  overflow: hidden;
}

.checkout-stepper__badge.checkout-stepper__badge--overflow {
  font-size: 0.55rem;
  letter-spacing: -0.04em;
}

.checkout-stepper__close {
  background: none;
  border: none;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--color-gray-900);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: opacity 0.2s;
}

.checkout-stepper__close:hover {
  opacity: 0.6;
}

/* === Checkout Accordion Section === */
.checkout-accordion {
  border-top: 1px solid var(--color-gray-200);
}

.checkout-accordion__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.75rem, calc(2.78 * var(--vwx)), 2.5rem) 0;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--color-gray-200);
}

.checkout-accordion__row:hover {
  background: var(--color-gray-50);
  margin: 0 calc(-1 * var(--spacing-4));
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.checkout-accordion__label {
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-gray-900);
  min-width: 15rem;
}

.checkout-accordion__value {
  flex: 1;
  color: var(--color-gray-600);
  font-size: var(--font-size-base);
  padding-left: var(--spacing-8);
}

.checkout-accordion__chevron {
  color: var(--color-gray-400);
  font-size: 1.25rem;
  margin-left: var(--spacing-4);
  transition: transform 0.2s;
}

.checkout-accordion__chevron--open {
  transform: rotate(90deg);
}

.checkout-accordion__content {
  padding: 0 0 var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.checkout-accordion__content--hidden {
  display: none;
}

/* Checkout form fields inside accordions */
.checkout-form-field {
  padding: var(--spacing-4) 0;
}

.checkout-form-field input,
.checkout-form-field textarea,
.checkout-form-field select {
  width: 100%;
  padding: var(--spacing-4);
  border: none;
  border-bottom: 1px solid var(--color-gray-300);
  font-size: 1.25rem;
  color: var(--color-gray-900);
  background: transparent;
  outline: none;
  font-family: var(--font-family);
}

.checkout-form-field input::placeholder,
.checkout-form-field textarea::placeholder {
  color: var(--color-gray-400);
}

.checkout-form-field input:focus,
.checkout-form-field textarea:focus {
  border-bottom-color: var(--color-gray-900);
}

/* Checkout action buttons (bottom right) */
.checkout-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-4);
  padding: var(--spacing-8) 0;
}

.checkout-actions .btn-place-order,
.checkout-actions .btn-next {
  background: var(--color-gray-900);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-3) var(--spacing-8);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
}

.checkout-actions .btn-place-order:hover,
.checkout-actions .btn-next:hover {
  background: var(--color-gray-800);
}

.checkout-actions .btn-request-quote,
.checkout-actions .btn-save-cart,
.checkout-actions .btn-continue-shopping {
  background: transparent;
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-900);
  padding: var(--spacing-3) var(--spacing-8);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
}

.checkout-actions .btn-request-quote:hover,
.checkout-actions .btn-save-cart:hover,
.checkout-actions .btn-continue-shopping:hover {
  background: var(--color-gray-100);
}

/* Checkout T&C */
.checkout-tc {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) 0;
}

.checkout-tc input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-gray-900);
}

.checkout-tc a {
  color: var(--color-gray-600);
  text-decoration: underline;
  cursor: pointer;
}

/* === Cart Item Cards (Figma style) === */
.cart-item-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-6);
  padding: var(--spacing-6) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.cart-item-card__image {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-item-card__info {
  flex: 1;
  min-width: 0;
}

.cart-item-card__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 2px;
}

.cart-item-card__specs {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.cart-item-card__details-toggle {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.cart-item-card__details-toggle:hover {
  color: var(--color-primary);
}

.cart-item-card__details-content {
  padding: var(--spacing-4) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.cart-item-card__details-content--hidden {
  display: none;
}

.cart-item-card__detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.cart-item-card__detail-label {
  color: var(--color-gray-700);
}

.cart-item-card__detail-value {
  color: var(--color-gray-900);
  font-weight: 500;
}

.cart-item-card__quantity {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.cart-item-card__quantity button {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-gray-600);
}

.cart-item-card__quantity button:hover {
  background: var(--color-gray-50);
}

.cart-item-card__quantity span {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--color-gray-300);
  border-bottom: 1px solid var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.cart-item-card__price {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-gray-900);
  min-width: 7.5rem;
  text-align: right;
  flex-shrink: 0;
}

.cart-item-card__delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-400);
  font-size: 1rem;
  padding: var(--spacing-2);
  flex-shrink: 0;
}

.cart-item-card__delete:hover {
  color: var(--color-error);
}

.cart-item-card__expand-arrow {
  color: var(--color-gray-400);
  font-size: 1.25rem;
  flex-shrink: 0;
  cursor: pointer;
}

/* Cart Summary Sidebar (Figma) */
.cart-summary-sidebar {
  background: var(--color-gray-50);
  padding: var(--spacing-8);
  position: sticky;
  top: var(--spacing-8);
  align-self: flex-start;
}

.cart-summary-sidebar h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-6);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-3) 0;
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
}

.cart-summary-row--total {
  font-weight: 700;
  color: var(--color-gray-900);
  font-size: var(--font-size-lg);
  border-top: 1px solid var(--color-gray-300);
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-4);
}

.cart-summary-row--clickable {
  cursor: pointer;
}

.cart-summary-row--clickable:hover {
  color: var(--color-gray-900);
}

/* Discount code input in summary */
.cart-discount-input {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-3) 0;
}

.cart-discount-input input {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  font-size: var(--font-size-sm);
}

/* Confirmation page */
.confirmation-page {
  padding: var(--spacing-8) 0;
}

.confirmation-page h1 {
  font-size: clamp(1.5rem, calc(4 * var(--vwx)), 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--spacing-4);
}

.confirmation-page__subtitle {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-8);
}

.confirmation-layout {
  display: grid;
  grid-template-columns: 1fr 23.75rem;
  gap: var(--spacing-8);
}

.confirmation-order-number {
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--spacing-6);
}

/* === Order Detail Page === */
.order-detail-page {
  padding: var(--spacing-8) 0;
}

.order-detail-header {
  margin-bottom: var(--spacing-8);
}

.order-detail-back {
  color: var(--color-gray-500);
  text-decoration: none;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-4);
  display: inline-block;
}

.order-detail-back:hover {
  color: var(--color-gray-900);
}

.order-detail-page h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin: var(--spacing-2) 0;
}

.order-detail-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.order-status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.order-status-badge--pending {
  background: #fef3c7;
  color: #92400e;
}
.order-status-badge--completed {
  background: #d1fae5;
  color: #065f46;
}
.order-status-badge--canceled {
  background: #fee2e2;
  color: #991b1b;
}
.order-status-badge--requires_action {
  background: #dbeafe;
  color: #1e40af;
}

.order-detail-date {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Order Timeline */
.order-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) 0;
  gap: 0;
}

.order-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.order-timeline__dot {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-gray-300);
  background: var(--color-white);
}

.order-timeline__step--completed .order-timeline__dot {
  background: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.order-timeline__step--active .order-timeline__dot {
  border-color: var(--color-gray-900);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.order-timeline__step--canceled .order-timeline__dot {
  border-color: var(--color-error);
  background: var(--color-error);
}

.order-timeline__label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.order-timeline__step--completed .order-timeline__label,
.order-timeline__step--active .order-timeline__label {
  color: var(--color-gray-900);
  font-weight: 600;
}

.order-timeline__line {
  width: 5rem;
  height: 2px;
  background: var(--color-gray-300);
  margin-bottom: 1.25rem;
}

.order-timeline__line--filled {
  background: var(--color-gray-900);
}

.order-number-badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--spacing-6);
}

.order-detail-items h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--spacing-4);
}

/* Each card ≈ 23vw so ~4.3 fit on screen, giving a visible peek of the next card.
   Applied to direct children of the scroll row so it works whether the card is
   wrapped in a .cms-card-link <a> or rendered as a bare .cms-card <div>. */
.cms-card-row-scroll > * {
  flex: 0 0 calc(calc(23 * var(--vwx)) - 0.75rem);
  min-width: 17.5rem;
}

.cms-card-link {
  display: block;
  text-decoration: none;
}

a.cms-card-link {
  cursor: pointer;
}

a.cms-card-link:hover,
a.cms-card-link:hover * {
  cursor: none;
}

.cms-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  scroll-snap-align: start;
  cursor: default;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

a.cms-card-link .cms-card,
a.cms-card-link .cms-card-content {
  cursor: pointer;
}

.cms-card-link:hover .cms-card,
.cms-card:hover {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
}

/* Dark gradient overlay — stronger at bottom for text legibility */
.cms-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.75) 100%
  );
  z-index: 1;
}

/* Text content — pinned to bottom */
.cms-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem 1.25rem;
  border-radius: 0.25rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.47) 100%
  );
}

.cms-card-content h3,
.cms-card-content p,
.cms-card-content span {
  text-decoration: none;
  text-transform: none;
}

.cms-card-content:hover h3,
.cms-card-content:hover p,
.cms-card-content:hover span {
  text-decoration: none;
}

.cms-card-eyebrow {
  display: block;
  font-size: clamp(0.69rem, calc(1.2 * var(--vwx)), 1.06rem);
  line-height: clamp(1rem, calc(1.8 * var(--vwx)), 1.63rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.cms-card-title {
  font-size: clamp(1.38rem, calc(3.2 * var(--vwx)), 2.88rem);
  font-weight: 700;
  line-height: clamp(1.75rem, calc(3.9 * var(--vwx)), 3.5rem);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 2px;
  letter-spacing: -0.001rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(clamp(1.75rem, calc(3.9 * var(--vwx)), 3.5rem) * 2);
}

.cms-card-description {
  font-size: clamp(0.88rem, calc(1.5 * var(--vwx)), 1.38rem);
  font-weight: 400;
  line-height: clamp(1.25rem, calc(2.1 * var(--vwx)), 1.94rem);
  color: #f7f7f7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Cursor-following hover label (Explore It) ───────────────────────── */
.cms-card-explore-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  border-radius: 0.75rem;
  border: 1px solid #ebebeb;
  background: rgba(255, 255, 255, 0.29);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  color: #1a1a1a;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
}

.cms-card-link:hover .cms-card-explore-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Hide cursor-following label on touch devices */
@media (hover: none) {
  .cms-card-explore-btn {
    display: none;
  }
}

/* ====================================================================
   CONSOLIDATED FUNCTIONAL CSS
   Merged from feature/consolidation-final branch
   These styles were missing from feature/storefront-combined
   ==================================================================== */

/* ============================================================
   MISSING FUNCTIONAL CSS
   Extracted from feature/consolidation-final branch
   These styles were not present in feature/storefront-combined
   ============================================================ */

/* --- Asset Management (24 rules) --- */

.asset-site-accordion {
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  overflow: hidden;
}

.asset-site-accordion.expanded {
  border-color: #ccc;
}

.asset-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  background: #fafafa;
  transition: background 0.15s;
}

.asset-site-header:hover {
  background: #f0f0f0;
}

.asset-site-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.asset-site-info svg {
  flex-shrink: 0;
  color: #1a1a1a;
}

.asset-site-name {
  font-size: 1rem;
  font-weight: 600;
  color: #242424;
  display: block;
}

.asset-site-address {
  font-size: 0.8125rem;
  color: #888;
  display: block;
}

.asset-site-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.asset-site-count {
  font-size: 0.8125rem;
  color: #888;
  padding: 0.25rem 0.625rem;
  background: #e8e8e8;
  border-radius: 0.75rem;
}

.asset-table-container {
  border-top: 1px solid #e0e0e0;
}

.asset-table-header {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 6.25rem;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  background: #f5f5f5;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
}

.asset-table-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 6.25rem;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid #f0f0f0;
  font-size: 0.875rem;
  color: #333;
  align-items: center;
}

.asset-table-row:hover {
  background: #fafafa;
}

.asset-col-serial {
  font-family: monospace;
  font-size: 0.8125rem;
}

.asset-status-badge {
  display: inline-block;
  padding: 0.19rem 0.625rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.asset-status-badge.status-ok {
  background: #dcfce7;
  color: #166534;
}

.asset-status-badge.status-due {
  background: #fef3c7;
  color: #92400e;
}

.asset-status-badge.status-overdue {
  background: #fecaca;
  color: #991b1b;
}

.asset-status-badge.status-unknown {
  background: #e8e8e8;
  color: #666;
}

.asset-condition-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 2px 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
}

.asset-condition-badge.condition-excellent,
.asset-condition-badge.condition-good {
  background: #dcfce7;
  color: #166534;
}

.asset-condition-badge.condition-fair {
  background: #fef3c7;
  color: #92400e;
}

.asset-condition-badge.condition-poor,
.asset-condition-badge.condition-critical {
  background: #fecaca;
  color: #991b1b;
}

/* --- Catalog Sidebar (6 rules) --- */

.catalog-sidebar {
  position: sticky;
  top: 5rem;
  height: fit-content;
  max-height: calc(100vh - 6.25rem);
  overflow-y: auto;
}

.catalog-sidebar::-webkit-scrollbar {
  width: 0.375rem;
}

.catalog-sidebar::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: 3px;
}

.catalog-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 3px;
}

.catalog-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

.catalog-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-gray-100);
}

/* --- Filter Panel & Overlay (36 rules) --- */

.filter-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

/* ── Filter Panel ────────────────────────────────────────────────────────── */

.filter-panel {
  /* Left-docked realtime filter rail (was a right-side overlay drawer).
     Narrower, lighter, slides in from the left. */
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  /* Fluid floor 12rem (was 17.5rem): at 853px/20px-root the rail ate 41%
     of the viewport and forced the catalog to 1 column. vw term leads so
     the rail yields to content on narrow screens. */
  width: clamp(12rem, calc(26 * var(--vwx)), 22.5rem);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0.5rem 0 2.5rem rgba(0, 0, 0, 0.08);
  z-index: 1000;
  padding-top: 4rem;
  animation: filterSlideIn 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes filterSlideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.filter-panel-body::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 5rem;
  margin-top: -5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.filter-panel-body.has-scroll-below::after {
  opacity: 1;
}

/* ── Body (scrollable content) ────────────────────────────────────────────*/

.filter-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* Figma: gap-[40px] between facet sections. */
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.filter-panel-body::-webkit-scrollbar {
  width: 0;
}

/* ── Header row ───────────────────────────────────────────────────────────*/

.filter-panel-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  /* PO-BATCH-2 item 1: gutters 2.5rem → 1rem, header→facets gap capped 1rem. */
  padding: 0 1rem 1rem;
  flex-shrink: 0;
  /* Userback 8076061: the header sits outside .filter-panel-body's
     overflow-y:auto region (see below), so it never scrolls away — but
     it had no visual separation from the scrolled facet list behind it,
     making it ambiguous whether it was "stuck" or just static. Give it
     its own background + a hairline so it reads as pinned above the
     scrolling list. */
  position: relative;
  z-index: 1;
  background: #ffffff;
}

.filter-panel-title {
  font-family: var(--font-family);
  font-size: clamp(1.56rem, calc(2.02 * var(--vwx)), 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01rem;
  color: #242424;
  margin: 0;
}

.filter-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, calc(3.9 * var(--vwx)), 3.5rem);
  height: clamp(2rem, calc(3.9 * var(--vwx)), 3.5rem);
  flex-shrink: 0;
  background: none;
  border: none;
  color: #242424;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background 0.15s;
}

.filter-panel-close svg {
  width: clamp(1rem, calc(1.8 * var(--vwx)), 1.63rem);
  height: clamp(1rem, calc(1.8 * var(--vwx)), 1.63rem);
}

.filter-panel-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ── Facets ───────────────────────────────────────────────────────────────*/

.filter-facet {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* PO-BATCH-2 item 1: facet vertical padding capped at 1rem, and NO
     border-bottoms between facet sections (fewer lines). */
  padding-bottom: 1rem;
  border-bottom: none;
}

.filter-facet:last-child {
  padding-bottom: 0;
}

.filter-facet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.filter-facet-title {
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: #6b6b6b;
}

.filter-facet-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: #1a1a1a;
  width: 1rem;
  height: 1rem;
  background: #6b6b6b;
  color: #fff;
  border-radius: 1.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.01rem;
  line-height: 0.875rem;
  flex-shrink: 0;
}

.filter-facet-range-value {
  font-size: 1rem;
  font-weight: 400;
  color: #242424;
  margin-left: auto;
}

/* ── Range slider ─────────────────────────────────────────────────────────*/

.filter-range-slider {
  position: relative;
  height: 2rem;
  margin: 1rem 0 0.5rem;
}

.filter-range-slider .range-input {
  position: absolute;
  width: 100%;
  height: 0.25rem;
  top: 0.875rem;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0;
}

.filter-range-slider .range-min {
  z-index: 2;
}
.filter-range-slider .range-max {
  z-index: 1;
}

.filter-range-slider .range-input::-webkit-slider-runnable-track {
  height: 0.25rem;
  /* Lightened #c9c9c9 -> #e0e0e0 to match the histogram island's monochrome
     (inactive bars #dcdcdc). The old medium grey read "too bold / too dark"
     next to the Figma-faithful island when both surfaces are on the same rail
     (Tony). */
  background: #e0e0e0;
  border-radius: 2px;
}

.filter-range-slider .range-min::-webkit-slider-runnable-track {
  background: transparent;
}

.filter-range-slider .range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2px;
  height: 2rem;
  background: #242424;
  border: none;
  border-radius: 31.25rem;
  cursor: pointer;
  pointer-events: auto;
  margin-top: -0.875rem;
  box-shadow: 0 0 0.5625rem rgba(0, 0, 0, 0.15);
}

.filter-range-slider .range-input::-moz-range-track {
  height: 0.25rem;
  background: #e0e0e0; /* match webkit track — lightened, see above */
  border-radius: 2px;
  border: none;
}

.filter-range-slider .range-input::-moz-range-thumb {
  width: 2px;
  height: 2rem;
  background: #242424;
  border: none;
  border-radius: 31.25rem;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0.5625rem rgba(0, 0, 0, 0.15);
}

.filter-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.filter-range-label {
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  color: #242424;
}

/* ── Filter pills ─────────────────────────────────────────────────────────*/

.filter-facet-pills {
  display: flex;
  flex-wrap: wrap;
  /* Figma: gap-[4px]. */
  gap: 0.25rem;
}

.filter-pill {
  /* THE filter-pill standard (PLP filter rail). /services fleet/level/voltage
     pills and the asset-type spares toolbar all use these classes directly. */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  /* Figma SEFilterChip: rounded-[8px]. */
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.125rem;
  color: #374151;
  transition:
    border-color 0.15s,
    background 0.15s;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.filter-pill:hover {
  border-color: #c9c9c9;
}

.filter-pill[disabled],
.filter-pill.disabled,
.filter-pill[aria-disabled="true"] {
  /* Zero-count pills stay visible (the count explains why) but read and
     behave as inert — no hover invite, no pointer. The stable-facet skeleton
     renders these as <button class="filter-pill disabled" aria-disabled> (not
     the boolean `disabled` attribute), so match the class + aria form too —
     otherwise a narrowed-to-zero option looks like a live clickable pill. */
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.filter-pill.selected {
  background: #242424;
  border-color: #242424;
  color: #ffffff;
}

.filter-pill-label {
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(0.75rem, 0.6rem + calc(0.3 * var(--vwx)), 0.8125rem);
  line-height: 1.375rem;
  text-overflow: ellipsis;
}

.filter-pill-count {
  color: #c9c9c9;
  font-weight: 400;
}

.filter-pill.selected .filter-pill-count {
  color: rgba(255, 255, 255, 0.5);
}

/* SHOP-626: the "Show more (+N)" / "Show fewer" toggle that folds a long
   facet's singleton tail. A pill so it flows with the list, but visually a
   control — dashed border, muted text, no fill — so it can't be misread as
   an option value. */
.filter-pill.filter-pill-more {
  background: transparent;
  border-style: dashed;
  color: #6b7280;
  font-weight: 400;
}

.filter-pill.filter-pill-more:hover {
  border-color: #9ca3af;
  color: #374151;
}

/* ── Footer ───────────────────────────────────────────────────────────────*/

.filter-panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  /* PO-BATCH-2 item 1: compacted footer padding. */
  padding: 1rem 1.25rem 1rem 1rem;
  flex-shrink: 0;
}

/* When filters are active the footer becomes a sticky bottom bar so the
   Clear-all stays reachable at the bottom-right of the column no matter how
   far the facet list is scrolled (Tony's ask). A soft top fade + hairline
   separate it from the scrolling facets above. Desktop-only positioning is
   applied in the ≥1024px block; on mobile the footer already sits at the
   drawer's foot. */
.filter-panel-footer--active {
  justify-content: flex-end;
}

.filter-panel-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
}

.filter-panel-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  background: #242424;
  border: none;
  border-radius: 99px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  gap: 0.25rem;
}

.filter-panel-count-badge__clear {
  display: none;
  align-items: center;
  justify-content: center;
}

.filter-panel-count-badge__clear svg {
  height: 0.5rem;
}

.filter-panel-count-badge:hover .filter-panel-count-badge__count {
  display: none;
}

.filter-panel-count-badge:hover .filter-panel-count-badge__clear {
  display: flex;
}

.filter-apply-btn {
  padding: 0.625rem 1.5rem;
  background: #1a1a1a;
  border: none;
  border-radius: 1.5rem;
  padding: 0.625rem 1.25rem 0.75rem;
  background: #242424;
  border: 1px solid #6b6b6b;
  border-radius: 0.75rem;
  color: #ffffff;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  cursor: pointer;
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.06);
  transition: background 0.15s;
  white-space: nowrap;
}

.filter-apply-btn:hover {
  background: #3a3a3a;
}

/* ── Filter sidebar — desktop (≥1024px) ──────────────────────────────────── */

/* The mobile filter-overlay branch is retired: the panel is the sticky
   sidebar at every width (rules below). */

/* ── Catalog two-column layout ── */
/* PO-BATCH-2 item 21 — ONE left gutter: the layout row itself carries the
   same fluid page gutter as the breadcrumb/h1/results stack above it, and
   the rail's internal LEFT paddings are zeroed (below), so the FILTERS
   title, facet titles and chips start on exactly the header stack's edge.
   The content column drops its own horizontal padding (the 2rem flex gap
   separates it from the rail; when the rail is hidden the layout gutter
   is the content's left inset — item 5 behavior preserved). */
.catalog-layout {
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-2) clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem) 0;
}
.catalog-layout .catalog-content {
  flex: 1;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* The empty/error state text-aligns center within .catalog-content, but
   that column is narrower than the full row (the sidebar eats the left
   280-340px + 32px gap) — so "centered" text still lands right of the
   row's true center. Shift left by half the reserved sidebar+gap width
   so it lands on the actual visual center of .catalog-layout. */
.catalog-layout .empty-state {
  margin-left: calc(
    -1 * (clamp(11rem, calc(22 * var(--vwx)), 19rem) + 2rem) / 2
  );
}

/* ── Filter panel becomes a sticky sidebar ── */
.filter-panel {
  position: sticky;
  top: 5rem;
  left: auto;
  bottom: auto;
  /* 12rem floor: 17.5rem ate 41% of an 853px viewport at 20px root
     and forced the catalog to 1 column (Ole's 1280@150% case).
     PO item-1 addendum: cap tightened so the rail stays ≤ ~24% of the
     viewport at every matrix width. */
  width: clamp(11rem, calc(22 * var(--vwx)), 19rem);
  max-height: calc(100vh - 6rem);
  flex-shrink: 0;
  padding-top: 0;
  animation: none;
  box-shadow: none;
  /* No vertical divider against the product grid — the 2rem
     .catalog-layout gap already separates the rail from the grid. */
  border-radius: 0;
  z-index: auto;
  display: flex;
  opacity: 1;
  overflow: hidden;
  /* display is in the transition list via allow-discrete + @starting-style
     below: browsers keep display:flex for the full duration of a close
     (so width/opacity can animate) and only swap to none at the very end;
     the reverse (none -> flex) swaps immediately so the other properties
     have something to animate from. Requires Chrome 117+/Safari 17.4+/
     Firefox 129+ — pre-transition behavior (instant show/hide) is the
     fallback on older browsers, not a broken state. */
  transition:
    width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.18s ease,
    display 0.24s allow-discrete;
}

@starting-style {
  .catalog-page--dyn .filter-panel {
    width: 0;
    opacity: 0;
  }
}

/* Sidebar padding — PO-BATCH-2 item 21: LEFT padding zeroed on all three
   sections; the shared page gutter now lives on .catalog-layout, so the
   rail's text edge == the breadcrumb/h1 edge (item 1's 1rem inset made the
   rail sit left of the header stack). */
.filter-panel .filter-panel-body {
  padding: 0 1.25rem 0 0;
}

.filter-panel-header {
  padding: 0 1.25rem 1rem 0;
}

/* Desktop: with no active filters there is nothing to clear (Done is
   mobile-only, hidden below) — collapse the footer so it leaves no empty
   band at the column foot. */
.filter-panel-footer {
  padding: 0 1.25rem 0 0;
}

/* Active filters → the footer is the single canonical Clear-all, pinned to
   the bottom of the sticky sidebar and right-aligned. sticky (not fixed) so
   it rides inside the column; a top fade + hairline lift it off the facets
   scrolling underneath. display:flex is REQUIRED here — the inactive base
   footer is display:none on desktop (below), and without re-asserting
   display the sticky bar would inherit none and the Clear-all would vanish. */
.filter-panel-footer--active {
  display: flex;
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0,
    #ffffff 1.25rem
  );
  border-top: 1px solid #f0f0f0;
}

/* Compact title — sidebar label, not a modal headline */
.filter-panel-title {
  font-size: clamp(1.46rem, 1.09rem + calc(0.78 * var(--vwx)), 1.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b6b6b;
}

/* Hide mobile-only elements */
.filter-panel-close {
  display: none;
}
.filter-apply-btn {
  display: none;
}
.filters-btn {
  display: none;
}
.filter-overlay-backdrop {
  display: none !important;
}

/* Header clear button (used by services_page filter panel). */
.filter-panel-clear-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1rem;
  background: #ffffff;
  border: 1px solid #d1d1d1;
  border-radius: 0.75rem;
  color: #262626;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}

.filter-panel-clear-header:hover {
  border-color: #a0a0a0;
}

/* Title row: title + badge side by side (used by services_page filter panel). */
.filter-panel-title-row {
  display: flex;
  align-items: center;
  height: 2.5rem;
  gap: 0.5rem;
}

/* Footer clear-all is redundant when header button is shown. */
.filter-clear-btn {
  display: none;
}
.filter-panel-footer--active {
  display: none !important;
}

/* Desktop: the INACTIVE footer (Done is mobile-only, no Clear-all to show)
   has nothing to render — hide it so it leaves no empty band. Scoped with
   :not(--active) so it does NOT beat the sticky Clear-all bar above on
   source order (both are single-class selectors → order would otherwise win).
   The active footer stays display:flex. */
.filter-panel-footer:not(.filter-panel-footer--active) {
  display: none;
}

/* ── Dynamic-facets layout (flag-gated) — Figma 17184:55554 ──────────────
   Every rule keys on .catalog-page--dyn / .product-header--strip, classes
   the storefront only emits when the backend facet-ranking flag is on —
   flag off, none of this CSS can match (byte-identical legacy page).
   REM units per the px→rem program; MIGRATION DEBT: this block belongs in
   the tailwind layer once the PLP migrates off main.css. */

/* 1) Title + tile strip share one band: title left, tiles right — ON THE
   SAME ROW AT ALL WIDTHS (Tony, 2026-07-08). The original 20rem basis +
   flex-wrap was a wrap valve that dropped the strip UNDER the title at
   narrow widths, growing the band 70 → 112px at 390. Never wrap: the
   title keeps its intrinsic width (flex-shrink: 0), the strip takes
   whatever remains (flex-basis 0 + min-width 0) and overflows through
   the EXISTING horizontal scroll + edge fades (.category-nav-scroll /
   .category-nav-fade — hydration flips the right fade on when the strip
   actually overflows). At 390 that means ~1.5 visible tiles + a right
   fade signalling more; that's intended. */
.product-header--strip {
  gap: 1.5rem;
  flex-wrap: nowrap;
}

.product-header--strip .product-header-title {
  flex-shrink: 0;
}

.product-header--strip .category-nav-wrapper {
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
}

/* The header row already provides the page gutter */
.product-header--strip .category-nav {
  padding: 0;
}

/* 2) Hideable filter sidebar (desktop). Rail visible: header X hides it
   (grid expands to full width via the existing .catalog-content flex:1).
   Rail hidden: the toolbar Filters button (normally desktop-hidden)
   reappears to bring it back. Mobile drawer behavior is untouched. */
.catalog-page--dyn .filter-panel-close {
  /* Designer list (Figma 18784-113375): the X-button to close the filter
     panel was removed in the design — the black active Filters button is
     the toggle. Was display:flex 2rem. */
  display: none;
}
.catalog-page--dyn .filter-panel-close svg {
  width: 0.875rem;
  height: 0.875rem;
}
/* Closed state: width/opacity collapse (not display:none) so the
   .catalog-layout flex row can transition the grid into the freed space
   instead of snapping instantly — see .filter-panel's own transition.
   pointer-events:none is load-bearing: the panel (and everything in its
   footer, e.g. the mobile Done button) stays mounted at width:0 rather
   than being removed from the DOM, so without this it would still be
   hit-testable and could swallow clicks meant for whatever sits in the
   freed space next to it. */
.catalog-page--dyn.catalog-page--rail-hidden .filter-panel {
  width: 0;
  opacity: 0;
  pointer-events: none;
  margin-right: 0;
}
/* Always visible whenever there's something to filter — matches
   /services, which is always .filters-btn { display: flex } (see the
   services-page override below). No longer gated on rail-hidden: the
   button is the permanent open/close toggle, not a "bring the rail back"
   reveal control. */
.catalog-page--dyn .filters-btn {
  display: flex;
}

/* PO-BATCH-2 item 5 is now satisfied structurally (item 21): the page
   gutter lives on .catalog-layout, .catalog-content carries no horizontal
   padding of its own — rail visible or hidden, one shared gutter. */

/* 3) Density pass — proportions measured against Figma 17184:55554
   (rail 268 + 40 gap → content starts x=348; facet rhythm chips → 1.5rem
   → divider → 1.5rem → next title = 48 total; list rows 96 tall). Same
   flag scope as above; REM only. */

/* Rail footprint — PO item-1 addendum: ≤ ~22% of the viewport, stepping
   down with the root scale (was 22vwx/20rem cap). */
.catalog-page--dyn .filter-panel {
  width: clamp(11rem, calc(20 * var(--vwx)), 18rem);
  margin-right: 0.25rem;
}

/* Facet block rhythm — PO-BATCH-2 item 1: max 1rem facet padding-bottom,
   1rem body gap. */
.catalog-page--dyn .filter-facet:not(:last-child) {
  padding-bottom: 1.25rem;
  border-bottom: 0.5px solid #e3e3e3;
}
.catalog-page--dyn .filter-panel-body {
  gap: 1.25rem;
}
/* Title → chips: frame is 8, ours was 16 */
.catalog-page--dyn .filter-facet-header {
  margin-bottom: 0.25rem;
}
/* Facet section titles: frame 17063:56064's rail spec is 16px Bold /
   24 line-height, secondary gray (its "Text/Bold/Large" style). An earlier
   density pass had taken these to 14px against 17184:55554; the rail
   parity frame supersedes it. */
.catalog-page--dyn .filter-facet-title {
  /* PO item-1 addendum: group labels down a step so the rail steps down
     with the root scale (was 0.8125→1rem). */
  font-size: clamp(0.75rem, 0.55rem + calc(0.4 * var(--vwx)), 0.875rem);
  line-height: 1.5;
  font-weight: 700;
  color: #6b6b6b;
}

/* ── 5b) Filter-rail parity vs Figma 17063:56064 "Filter Section"
   (Tony, 2026-07-08). Measured against the frame's rail (268px column at
   1920): FILTERS header 24px Bold #242424 + count badge + 32px X; facet
   rhythm block → 24 → hairline → 24 → block (already set above); option
   chips = SEFilterChip (h 32, padding-x 8, radius 8, border #d1d1d1,
   label 14px Bold #242424, selected = solid #242424/white); range facet
   shows ONE value presentation — header title only, control, then a
   "min <b>620</b> kV … max <b>800</b> kV" readout row; slider handles are
   round dots, not end ticks; Clear all is a button at the rail's bottom
   right, not a header link. Restyle only — DOM and behavior untouched,
   all rules dyn-gated. */

/* Rail header: sidebar-label treatment (13px letter-spaced gray from the
   generic ≥1024 override) → the frame's 24px Bold dark headline. */
.catalog-page--dyn .filter-panel-title {
  font-size: clamp(1.46rem, 1.09rem + calc(0.78 * var(--vwx)), 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
  color: #242424;
}

/* Option pills → SEFilterChip geometry/type. Count "(n)" stays (real
   information the frame's static chips don't carry) but reads as the
   chip's quiet badge. */
.catalog-page--dyn .filter-pill {
  /* PO item-1 addendum: chips more compact, on the type scale. */
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  border-color: #f2f2f2;
  font-size: clamp(0.75rem, 0.6rem + calc(0.3 * var(--vwx)), 0.8125rem);
  font-weight: 700;
  line-height: 1.25rem;
  color: #242424;
}
.catalog-page--dyn .filter-pill.selected {
  border-color: #242424;
  color: #ffffff;
}
.catalog-page--dyn .filter-pill-count {
  font-weight: 400;
  color: #9a9a9a;
}
.catalog-page--dyn .filter-pill.selected .filter-pill-count {
  color: rgba(255, 255, 255, 0.6);
}

/* Range facet: the header carried a second copy of the bounds
   ("1400 – 11460 mm" beside the title — wrapping to two lines on narrow
   rails) on top of the per-end labels below the slider. The frame has ONE
   presentation: title, control, then a min/max readout row. Hide the
   header copy; the readout row below carries the values. */
.catalog-page--dyn .filter-facet-range-value {
  display: none;
}

/* Readout row per the frame: value 18px Bold #242424 with a quiet
   14px "min " / "max " prefix (frame renders label + value + unit as
   separate nodes; ours is one span per end, so the prefix rides in as
   generated content — cosmetic only). */
.catalog-page--dyn .filter-range-labels {
  margin-top: 0.75rem; /* frame's 40px assumes the 64px histogram above */
  align-items: baseline;
}
.catalog-page--dyn .filter-range-label {
  /* PO item-1 addendum: slider min/max readout smaller (was 0.875→1.125rem)
     so the numbers sit under the facet titles, not over them. */
  font-size: clamp(0.75rem, 0.55rem + calc(0.4 * var(--vwx)), 0.9375rem);
  font-weight: 700;
  color: #242424;
}
.catalog-page--dyn .filter-range-label:first-child::before {
  content: "min ";
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b6b6b;
}
.catalog-page--dyn .filter-range-label:last-child::before {
  content: "max ";
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b6b6b;
}

/* React range-slider island mount (histogram slider, node 17063:56126 —
   see docs/agent/REACT_IN_JASPR.md). Rendered INSTEAD of the plain slider
   when the dyn-facets flag ships a histogram AND islands.js loaded; this
   rule only reserves layout so nothing jumps when React replaces the
   fallback text with the Slider.Root markup. The island's own styles ship
   in /react/islands.css. */
.react-island-mount {
  width: 100%;
  min-height: 2rem;
}

/* Pre-mount fallback (plain "min – max kV" text). NOT
   .filter-facet-range-value — that class is display:none under --dyn (the
   header-dup kill above), which would blank the fallback too. */
.react-island-fallback {
  font-size: 0.875rem;
  color: #6b6b6b;
  white-space: nowrap;
}

/* Slider handles: 2px end-tick bars read as broken CSS (critique #10) —
   the frame's handles are solid round dots. NOTE: the frame's range facet
   is a 64px histogram (bars, node 17063:56126); that feature rides the
   React-island RangeSlider path (worktree snoopy-watching-tarjan) and
   would mount INSIDE .filter-range-slider above the track — this pass
   only makes the plain slider clean. */
.catalog-page--dyn .filter-range-slider .range-input::-webkit-slider-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: #242424;
  margin-top: -0.3125rem; /* center the 14px dot on the 4px track */
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.25);
}
.catalog-page--dyn .filter-range-slider .range-input::-moz-range-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: #242424;
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.25);
}

/* Clear all: frame places it as a button at the rail's bottom right
   (node 17063:61093), not a header text link. The header link is hidden on
   desktop (see the ≥1024px block above); footer positioning — including the
   sticky bottom-bar when filters are active — is owned by the general
   .filter-panel-footer / .filter-panel-footer--active rules so the dyn and
   non-dyn layouts stay in sync (no dyn-only padding re-introducing the empty
   band the general rule collapses). */
/* Header → first facet gap — PO-BATCH-2 item 1: capped at 1rem (was the
   frame's 40px). */
.catalog-page--dyn .filter-panel-header {
  padding-bottom: 2.5rem;
}

/* Card-grid density anchor (ui-release L2, 2026-07-30): the 18rem floor
   collapsed the rail'd grid to 2×~482px monster tracks at 1440/20px-root
   and ONE column at 1024/20px ("our enemy" — product owner). Align the dyn
   grid with the base .product-list 13.5rem track: ≥2 cols at 1024/20px,
   3 at 1440/20px, 5-6 at 1920/16px — Grainger/RS-style B2B density. */
.catalog-page--dyn .product-list {
  /* Full-width grid (Tony 2026-07-10: "take full width") — the grid fills
     the container; this floor is the only density knob. Same --vwx anchor
     as the base .product-list rule: a pure rem floor shrinks with the
     fluid root clamp and collapsed cards to 149px at 853 (PO, 2026-08-01). */
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(max(12rem, min(calc(21 * var(--vwx)), 15rem)), 100%), 1fr)
  );
}
/* 14rem-column floor support: at ~212px cards the lead-time | price row
   clipped the currency suffix (1.5rem gaps). Tighten and let it wrap as
   a safety valve instead of raising the grid floor. */
.catalog-page--dyn .product-lead-price {
  gap: 0.75rem;
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

/* 4) Toolbar-control size review vs Figma 17184:55554 (Tony). The frame's
   "Sorted by" control is a FIXED 336px (= our legacy 21rem) with dead
   whitespace after a short value; direction here is a compact control —
   intrinsic width, hugging "Sorted by <value>" + chevron. */
.catalog-page--dyn .sort-dropdown {
  width: max-content;
  min-width: 12rem; /* comfort floor for short values ("Newest") */
  gap: 0.75rem;
}
/* Open menu: anchor right (the control sits near the toolbar's right edge —
   a left-anchored max-content panel could overflow the viewport); width to
   the widest option, never narrower than the trigger. */
.catalog-page--dyn .sort-dropdown-panel {
  left: auto;
  right: 0;
  width: max-content;
  min-width: 100%;
}
/* Figma: 16px gap between options; option row height 22px (1.375rem). */
.catalog-page--dyn .sort-dropdown.open .sort-dropdown-panel {
  gap: 1rem;
}
.catalog-page--dyn .sort-option {
  min-height: 1.375rem;
  padding: 0;
}
/* Row-height consistency: the frame has sort + toggle at equal heights
   (48/48); ours were 2.75rem vs 2.5rem. Align the toggle to the sort
   control (the Filters button is already 2.75rem). */

/* 5) Grid-frame parity fixes (Figma 17063:56064, grid-view PLP audit).
   Cheap size/spacing items only — feature gaps (histogram, CATALOG
   toggle, hover CTA, strip arrows, ...) tracked in the report. */
/* Frame packs cards with 8px gaps (ours 1rem) */
.catalog-page--dyn .product-list {
  gap: 0.5rem;
}
/* (dyn title override removed — base .product-title is now 1.0625rem,
   already under the frame's 18px; a dyn 1.125rem would ENLARGE it.) */
/* Frame footer order is Price | divider | Lead time (ours had lead time
   first). Flex-order flip, DOM untouched. */
.catalog-page--dyn .product-lead-price .product-price-block {
  order: 1;
}
.catalog-page--dyn .product-lead-price .lead-price-divider {
  order: 2;
}
.catalog-page--dyn .product-lead-price .product-lead-time-block {
  order: 3;
}

/* List rows: the full Figma row spec (18835-32413) now lives in the base
   `.product-list--list` region (search "List view — Figma row spec").
   The dyn-scoped size/one-line overrides that used to sit here were
   folded into that region — dyn-prefixed duplicates would win on
   specificity and silently fight it (LEARNINGS: duplicate-rule drift). */

/* ── PLP fetch-resilience UI (error-path only — renders exclusively when a
   PLP request failed, so it adds zero DOM to normal flag-off renders).
   Stale-while-revalidate notice + retry buttons; REM per px→rem program. */
.plp-refresh-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background: #fafafa;
  font-size: 0.875rem;
  color: #6b6b6b;
}

.plp-retry-btn {
  padding: 0.25rem 0.875rem;
  border: 1px solid #c9c9c9;
  border-radius: 0.5rem;
  background: #ffffff;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #242424;
  white-space: nowrap;
}

.plp-retry-btn:hover {
  background: #f5f5f5;
}

/* In the full error panel the button sits under the message */
.empty-state .plp-retry-btn {
  display: block;
  margin: 0.75rem auto 0;
}

/* --- Login Page (GTShop) (49 rules) --- */

.login-gtshop-header {
  background: #1b1b3a;
  padding: 0.75rem 1.5rem;
  color: white;
}

.login-gtshop-header-inner {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-gtshop-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.login-gtshop-logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: white;
}

.login-gtshop-logo-sub {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.25rem;
  color: #00b8b0;
}

.login-gtshop-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.login-gtshop-header-link {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.login-gtshop-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.login-gtshop-container {
  width: 100%;
  max-width: 62.5rem;
}

.login-gtshop-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #dc2626;
  font-size: 0.875rem;
}

.login-gtshop-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.login-gtshop-col {
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
}

.login-gtshop-heading {
  font-size: 1.5rem;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 0.75rem 0;
}

.login-gtshop-desc {
  color: #666;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}

.login-gtshop-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-gtshop-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.login-gtshop-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
}

.login-gtshop-required {
  color: #dc2626;
}

.login-gtshop-input {
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: #1a1a1a;
  background: white;
  transition: border-color 0.15s;
}

.login-gtshop-input:focus {
  outline: none;
  border-color: #1a1a1a;
  box-shadow: 0 0 0 2px rgba(0, 153, 153, 0.15);
}

.login-gtshop-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.login-gtshop-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #1a1a1a;
}

.login-gtshop-checkbox label {
  font-size: 0.8125rem;
  color: #666;
  cursor: pointer;
}

.login-gtshop-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
}

.login-gtshop-btn-signin {
  background: #1a1a1a;
  color: white;
  border: none;
  border-radius: 0.25rem;
  padding: 0.75rem 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.login-gtshop-btn-signin:hover {
  background: #007f7f;
}

.login-gtshop-btn-signin:disabled,
.login-gtshop-btn-signin.loading {
  background: #99cccc;
  cursor: not-allowed;
}

.login-gtshop-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: login-spin 0.6s linear infinite;
}

.login-gtshop-forgot {
  font-size: 0.8125rem;
  color: #1a1a1a;
  text-decoration: none;
}

.login-gtshop-forgot:hover {
  text-decoration: underline;
}

.login-gtshop-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: #999;
  font-size: 0.8125rem;
}

.login-gtshop-divider::before,
.login-gtshop-divider::after {
  content: "";
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.login-gtshop-sso-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0;
  background: none;
  border: none;
  font-size: 0.875rem;
  color: #1a1a1a;
  cursor: pointer;
  font-weight: 500;
}

.login-gtshop-sso-toggle:hover {
  color: #007f7f;
}

.login-gtshop-toggle-icon {
  transition: transform 0.2s;
}

.login-gtshop-toggle-icon.open {
  transform: rotate(180deg);
}

.login-gtshop-sso-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.login-gtshop-btn-sso {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: #333;
  cursor: pointer;
  transition: all 0.15s;
}

.login-gtshop-btn-sso:hover {
  border-color: #1a1a1a;
  background: #f0fafa;
}

.login-gtshop-section {
  margin-bottom: 2rem;
}

.login-gtshop-section:last-child {
  margin-bottom: 0;
}

.login-gtshop-btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: white;
  border: 1px solid #1b1b3a;
  border-radius: 0.25rem;
  color: #1b1b3a;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.login-gtshop-btn-secondary:hover {
  background: #1b1b3a;
  color: white;
}

.login-gtshop-footer {
  background: #f5f5f5;
  border-top: 1px solid #e5e7eb;
  padding: 1.25rem 1.5rem;
}

.login-gtshop-footer-inner {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-gtshop-footer-links {
  display: flex;
  gap: 1.5rem;
}

.login-gtshop-footer-links a {
  font-size: 0.8125rem;
  color: #666;
  text-decoration: none;
}

.login-gtshop-footer-links a:hover {
  color: #1a1a1a;
}

.login-gtshop-copyright {
  font-size: 0.75rem;
  color: #999;
  margin: 0;
}

/* --- Login Page (Legacy) (2 rules) --- */

.login-page-gtshop {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

@keyframes login-spin {
  to {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Media Queries (2 rules) --- */

.preview-banner {
  display: none;
}

.filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: #242424;
  border: 1px solid #242424;
  color: #ffffff;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.product-bookmark {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 2;
  color: #999;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.product-image-wrapper:hover .product-bookmark {
  opacity: 1;
}

.product-bookmark:hover {
  color: #1a1a1a;
}

.product-hover-configure {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
  white-space: nowrap;
}

.product-image-wrapper:hover .product-hover-configure {
  opacity: 1;
}

.product-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  background: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: #333;
  opacity: 0;
  transition: opacity 0.2s;
  user-select: none;
}

.product-image-wrapper:hover .product-arrow {
  opacity: 1;
}

.product-arrow:hover {
  background: white;
  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.15);
}

.product-arrow-left {
  left: 0.5rem;
}

.product-arrow-right {
  right: 0.5rem;
}

.filters-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(27.5rem, calc(92 * var(--vwx)));
  height: 100vh;
  padding: 1.5rem 1.375rem;
  border-left: 1px solid #e6e8eb;
  background: #fff;
  z-index: 1300;
  overflow-y: auto;
  box-shadow:
    -0.75rem 0 1.875rem rgba(0, 0, 0, 0.08),
    calc(-100 * var(--vwx)) 0 0 rgba(18, 20, 24, 0.32);
  box-shadow:
    -0.75rem 0 1.875rem rgba(0, 0, 0, 0.08),
    calc(-100 * var(--vwx)) 0 0 rgba(18, 20, 24, 0.32);
}

.filters-panel.open,
.filters-panel:target {
  display: block;
}

.filters-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.filters-panel-header h3 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.filters-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #222;
  text-decoration: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #dde1e5;
  border-radius: 50%;
  background: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.filters-panel-section {
  border-top: 1px solid #f0f2f4;
  padding-top: 0.875rem;
  margin-top: 0.875rem;
}

.filters-panel-section h4 {
  margin: 0 0 0.625rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #2f3133;
}

.filters-range-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.filters-range-row input {
  height: 2.375rem;
  padding: 0 0.625rem;
  border: 1px solid #d9dde2;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  width: 7.5rem;
}

.filters-apply-range {
  height: 2.375rem;
  border: none;
  border-radius: 0.5rem;
  background: #1f2328;
  color: #fff;
  padding: 0 0.875rem;
  cursor: pointer;
}

.filters-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filters-chip {
  border: 1px solid #d9dde2;
  border-radius: 999px;
  background: #fff;
  color: #3b3f44;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.filters-chip.selected {
  border-color: #1f2328;
  background: #1f2328;
  color: #fff;
}

.filters-panel-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.filters-clear {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9dde2;
  border-radius: 0.5rem;
  background: #fff;
  color: #4a4e52;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
}

.estimation-banner {
  background: #fff3cd;
  background: #fff3cd;
  color: #856404;
  text-align: center;
  padding: 0.625rem 1rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #ffc107;
}

.live-badge {
  display: inline-block;
  background: #d4edda;
  color: #155724;
  padding: 2px 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.options-grid {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.option-card:hover {
  border-color: #cbd5e1;
  background: #f9fafb;
}

.option-card.selected {
  border-color: var(--color-primary, #1a1a1a);
  background: rgba(0, 153, 153, 0.04);
}

.option-card-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.option-checkbox {
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid #d1d5db;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.option-checkbox.checked {
  background: var(--color-primary, #1a1a1a);
  border-color: var(--color-primary, #1a1a1a);
  color: #fff;
}

.option-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary, #1a1a2e);
}

.impact-badge {
  color: var(--color-primary, #1a1a1a);
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}

.estimate-contact {
  text-align: center;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 0.75rem;
}

.contact-link {
  color: var(--color-primary, #1a1a1a);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline;
}

.form-select.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f3f4f6;
  color: #9ca3af;
}

.option-card:hover {
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.06);
}

.option-card.selected {
  box-shadow: 0 2px 0.5rem rgba(0, 153, 153, 0.1);
}

.slider-field {
  grid-column: 1 / -1;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.slider-header label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500, #6b7280);
}

.slider-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-primary, #1a1a1a);
  line-height: 1;
}

.slider-value .slider-unit {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gray-500, #6b7280);
  margin-left: 0.25rem;
}

.slider-track {
  position: relative;
  padding: 0.5rem 0;
}

.slider-track input[type="range"] {
  width: 100%;
  height: 0.375rem;
  -webkit-appearance: none;
  appearance: none;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.slider-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-primary, #1a1a1a);
  border: 3px solid white;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.2);
  cursor: grab;
  transition: transform 0.1s ease;
}

.slider-track input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.slider-track input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.slider-track input[type="range"]::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-primary, #1a1a1a);
  border: 3px solid white;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.2);
  cursor: grab;
}

.slider-track input[type="range"]::-moz-range-track {
  height: 0.375rem;
  background: #e5e7eb;
  border-radius: 3px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}

.slider-labels span {
  font-size: 0.6875rem;
  color: var(--color-gray-400, #9ca3af);
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  margin-top: 2px;
}

.slider-tick {
  width: 1px;
  height: 0.375rem;
  background: var(--color-gray-300, #d1d5db);
}

.slider-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn-saved {
  border-color: var(--color-primary, #1a1a1a) !important;
  color: var(--color-primary, #1a1a1a) !important;
  background: rgba(0, 153, 153, 0.06);
}

.btn-outline[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.submit-message {
  padding: 0.625rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0.5rem 0;
  text-align: center;
}

.submit-message.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.submit-message.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.quantity-section {
  margin: 1rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.quantity-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500, #6b7280);
  display: block;
  margin-bottom: 0.5rem;
}

.quantity-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.stepper-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-gray-300, #d1d5db);
  background: white;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600, #4b5563);
  transition: all 0.15s ease;
}

.stepper-btn:hover:not([disabled]) {
  border-color: var(--color-primary, #1a1a1a);
  color: var(--color-primary, #1a1a1a);
}

.stepper-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.stepper-value {
  font-size: 1.25rem;
  font-weight: 600;
  min-width: 2.5rem;
  text-align: center;
  color: var(--color-gray-900, #111827);
}
.stepper-input {
  font-size: 1.125rem;
  font-weight: 600;
  width: 3.5rem;
  text-align: center;
  color: var(--color-gray-900, #111827);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.25rem 2px;
  -moz-appearance: textfield;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper-input:focus {
  outline: none;
  border-color: var(--color-primary, #1a1a1a);
}

.quantity-total {
  text-align: center;
  margin-top: 0.5rem;
}

.quantity-calc {
  font-size: 0.75rem;
  color: var(--color-gray-500, #6b7280);
  display: block;
}

.quantity-total-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary, #1a1a1a);
}

.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1rem 0;
  user-select: none;
}

.collapsible-header .section-header-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.collapsible-header .section-header-inline h3 {
  margin: 0;
}

.collapsible-header .chevron {
  transition: transform 0.2s ease;
  color: var(--color-gray-400, #9ca3af);
}

.collapsible-header.expanded .chevron {
  transform: rotate(180deg);
}

.collapsible-body {
  display: none;
  padding: 1rem 0 0.5rem;
}

.collapsible-body.expanded {
  display: block;
}

.underline-field {
  padding: 0;
}

.underline-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-gray-300, #d1d5db);
  padding: 0.875rem 0;
  font-size: 0.9375rem;
  font-family: inherit;
  background: transparent;
  outline: none;
  color: var(--color-gray-900, #111827);
  transition: border-color 0.2s ease;
}

.underline-input:focus {
  border-bottom-color: var(--color-primary, #1a1a1a);
  border-bottom-width: 2px;
}

.underline-input::placeholder {
  color: var(--color-gray-400, #9ca3af);
  font-weight: 400;
}

.underline-textarea {
  resize: vertical;
  min-height: 3.75rem;
}

.my-assets-page {
  max-width: 75rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.my-assets-header {
  margin-bottom: 2rem;
}

.my-assets-header-content {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.my-assets-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #242424;
  margin: 0;
}

.my-assets-count {
  font-size: 0.875rem;
  color: #888;
}

.my-assets-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.my-assets-loading,
.my-assets-error,
.my-assets-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 1.5rem;
  text-align: center;
  gap: 1rem;
  color: #888;
}

.my-assets-error p,
.my-assets-empty p {
  font-size: 0.9375rem;
  color: #999;
  margin: 0;
}

.my-assets-empty h3 {
  font-size: 1.25rem;
  color: #666;
  margin: 0;
}

.my-assets-retry-btn {
  padding: 0.5rem 1.5rem;
  border: 2px solid #1a1a1a;
  border-radius: 0.375rem;
  background: transparent;
  color: #1a1a1a;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.my-assets-retry-btn:hover {
  background: rgba(0, 153, 153, 0.06);
}

.delete-btn {
  background: none;
  border: none;
  color: var(--color-gray-500);
  padding: var(--spacing-1);
}

.delete-btn:hover {
  color: var(--color-error);
}

.summary-section {
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.summary-toggle {
  width: 100%;
  padding: var(--spacing-2) 0;
  background: none;
  border: none;
  text-align: left;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-gray-700);
}

.discount-section {
  padding: var(--spacing-3) 0;
}

.cms-block--text-section.cms-align-right .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cms-block--contact-form {
  background: var(--color-white);
}

.cms-card:hover {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
}

/* --- PDP & Product Detail (97 rules) --- */

.pdp-gallery-indicators {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.pdp-gallery-dot {
  width: 1.5rem;
  height: 0;
  border-radius: 0;
  background: none;
  border: none;
  border-top: 3px solid #c9c9c9;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease;
}

.pdp-gallery-dot:hover {
  border-color: #6b6b6b;
}

.pdp-gallery-dot.active {
  border-color: #242424;
}

.pdp-features-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: #242424;
  margin: 1.5rem 0 0.75rem;
}

.pdp-features-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1.5rem;
}

.pdp-features-list li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 0.375rem;
}

.pdp-downloads-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0 1rem;
}

.pdp-download-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  color: #242424;
  text-decoration: none;
  font-size: 0.875rem;
  transition:
    background 0.15s,
    border-color 0.15s;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.pdp-download-item:hover {
  background: #f5f5f5;
  border-color: #1a1a1a;
}

.pdp-download-item svg {
  flex-shrink: 0;
  color: #1a1a1a;
}

.pdp-about-content p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #333;
  margin: 0 0 0.75rem;
  /* UB 8115759 — see .pdp-description: stored line breaks must render. */
  white-space: pre-line;
}

.pdp-price-value.pdp-price-quote {
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 600;
}

.pdp-company-badge {
  display: inline-block;
  padding: 2px 0.625rem;
  background: rgba(0, 153, 153, 0.1);
  border: 1px solid rgba(0, 153, 153, 0.3);
  border-radius: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13.75rem;
  flex-shrink: 1;
}

/* Frame-contract validity line under the price. Needs enough contrast to be
   legible against the light bottom-bar — previously inherited, which rendered
   near-white on white (userback 7560761 / 7560741). */
.pdp-price-validity {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  /* Darker than the old #4a4a4a for legibility against the price block
     (Userback 7560741/7560761 — "Frame price valid until 31 Dec 2028"
     was illegible). */
  color: #2a2a2a;
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin-top: 2px;
  align-self: flex-end;
  text-align: right;
  /* Was white-space:nowrap, which forced the whole "Frame price valid
     until …" string onto one line in the narrow right-aligned price
     column, so it overflowed/clipped and read as "not legible in full".
     Let it wrap instead, capped to the price column width. */
  max-width: 13.75rem;
}

.pdp-version-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b6b6b;
  line-height: 1.3;
}

.pdp-budget-page {
  min-height: 100vh;
  background: var(--color-white, #fff);
}

.pdp-budget-page.loading,
.pdp-budget-page.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
}

.pdp-budget-page .error-message {
  text-align: center;
  max-width: 25rem;
}

.pdp-budget-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0;
}

.pdp-budget-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-gray-200, #e5e7eb);
}

.pdp-hero {
  aspect-ratio: 4 / 3;
  background: var(--color-gray-50, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.5rem;
}

.pdp-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-hero-svg {
  width: 100%;
  height: 100%;
  max-width: 25rem;
}

.pdp-product-info {
  padding: 1.5rem 2rem;
}

.pdp-category {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500, #6b7280);
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

.pdp-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900, #0f172a);
  margin: 0 0 0.5rem;
}

.pdp-subtitle {
  font-size: 0.875rem;
  color: var(--color-gray-500, #6b7280);
  margin: 0;
}

.pdp-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  background: var(--color-gray-200, #e5e7eb);
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.pdp-spec-pill {
  background: white;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* V34 — when the spec grid has 3N+1 pills (e.g. 3EH4 with Connector/Ur/
   Housing/Qty = 4 cells on a 3-column grid) the last pill lands alone on
   a new row, leaving 2 empty grid cells that show the gray backdrop as
   dead space. Span the orphan across the full row so it reads as an
   intentional full-width QTY cell, not a stranded cell next to gray
   nothingness. */
.pdp-specs-grid .pdp-spec-pill:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

/* Pill variant — small uppercase label/value inside .pdp-spec-pill */
.pdp-spec-pill .pdp-spec-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-400, #9ca3af);
  font-weight: 600;
}

.pdp-spec-pill .pdp-spec-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-900, #0f172a);
}

/* ── Spare-parts family size picker (EFA) ────────────────────────────────
   Pills to switch between sibling sizes/materials of the same part. Reuses the
   spec-pill visual language; the active pill (current product) is filled. */
.pdp-variant-picker {
  margin: 0.88rem 0 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pdp-variant-picker__label {
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-gray-500, #6b7280);
}
.pdp-variant-picker__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pdp-variant-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.44rem 0.81rem;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 999px;
  background: white;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--color-gray-700, #374151);
  text-decoration: none;
  transition:
    border-color 0.12s,
    background 0.12s,
    color 0.12s;
  cursor: pointer;
}
.pdp-variant-pill:hover {
  border-color: var(--color-primary, #009999);
  color: var(--color-primary, #009999);
}
.pdp-variant-pill--active {
  background: var(--color-primary, #009999);
  border-color: var(--color-primary, #009999);
  color: white;
  cursor: default;
}

/* Maintenance levels (M1/M2/M3 → configurator), ported from
   feat/plp-figma-parity (svc_level_pills.dart) 2026-08-13. Reuses the PDP
   variant pill rail above rather than the old three-full-width-row layout
   (.svc-mlevel-link/-badge/-name/-price, still defined below for whatever
   still references them). */
.svc-level-pills {
  margin: 0.375rem 0 0;
}

/* Hidden in the LIST row — a row is a table-like scan surface and the rail
   plus its label would push past its height budget. Nothing is lost: the
   row's footer still states the level count and entry price, and its CTA
   opens the asset-type page where every level is listed. */
.product-list--list .svc-level-pills {
  display: none;
}

.svc-mlevel-more {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b6b6b;
  text-decoration: none;
}
.svc-mlevel-more:hover {
  color: #1a1a1a;
  text-decoration: underline;
}

/* The rail's label sits under the attribute chips, so it takes the card's
   own eyebrow rhythm rather than the PDP column's. */
.svc-level-pills .pdp-variant-picker__label {
  margin-bottom: 0.25rem;
}

/* A card pill is a LINK to the configurator, not a selector option. */
.svc-level-pills .pdp-variant-pill {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  gap: 0.375rem;
  /* A service level's label is a full sentence ("DIAG TRF Level 1 —
     Transformer Diagnostic Inspection"), not a one-word option. The pill is
     inline-flex with no width constraint, so it sized to its text and pushed
     straight through the card's right edge — measured on /services: 359px of
     pill inside a 319px container, spilling 40px, with the label clipped
     mid-word (Userback 8254337 "overflowing cards" / 8254309 "check layout").
     max-width pins it to the container; min-width:0 is what actually lets a
     flex item shrink below its content, and without it max-width alone does
     nothing here. */
  max-width: 100%;
  min-width: 0;
}
/* The label is the part that must give — the price delta beside it stays
   whole, since a truncated number is worse than no number. */
.svc-level-pills .pdp-variant-pill__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-level-pills .pdp-variant-pill__delta {
  flex: 0 0 auto;
}
.svc-level-pills .pdp-variant-pill__delta {
  font-weight: 400;
  color: #6b6b6b;
}
.svc-level-pills .pdp-variant-pill:hover .pdp-variant-pill__delta {
  color: inherit;
}

/* NEUTRAL hover (PO 2026-08-09, carried over verbatim from the source
   branch): reusing the PDP rail brought its teal/purple --color-primary
   hover with it, which competes with other accents already on the card
   grid. The PDP keeps its own hover; this scoped copy does not. */
.svc-level-pills .pdp-variant-pill:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
}

/* Under-title variant rail (consolidated material families, e.g. Eskom CB
   frames) — left-aligned with the title/SE-code column, pills wrap naturally
   so the block stays structured on narrow layouts. The gallery-slot styles
   below remain for the (currently unused) underSliderRail placement. */
.pdp-variant-picker--under-title {
  /* Tied to the SE-code line above it (the rail changes that code), with a
     wider gap below so the pills group with the label, not the prose. */
  margin: 0.88rem 0 0.25rem;
}
.pdp-variant-picker--under-title .pdp-variant-picker__label {
  display: block;
  margin-bottom: 0.44rem;
  letter-spacing: 0.04em;
}
/* Hover echoes the peek: the artwork changes, so the pill should visibly
   arm too. Transition excluded under reduced-motion. */
.pdp-variant-picker--under-title .pdp-variant-pill {
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}
.pdp-variant-picker--under-title
  .pdp-variant-pill:hover:not(.pdp-variant-pill--active) {
  border-color: currentColor;
}
.pdp-variant-picker--under-title .pdp-variant-pill:focus-visible {
  outline: 2px solid var(--color-focus, #0aa);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pdp-variant-picker--under-title .pdp-variant-pill {
    transition: none;
  }
}
.pdp-variant-picker--under-title .pdp-variant-picker__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}
.pdp-variant-picker--under-title .pdp-variant-pill {
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
}
/* Price delta rides inside the pill, one step down in weight and colour so
   the version name stays the primary read and the surcharge is the
   qualifier — never the other way round. */
.pdp-variant-picker--under-title .pdp-variant-pill__delta {
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}
.pdp-variant-picker--under-title
  .pdp-variant-pill--active
  .pdp-variant-pill__delta {
  opacity: 0.85;
}
/* Plain-language note on what the axis controls. Sits under the pills at
   body-copy scale, measure capped so it reads as a sentence, not a label. */
.pdp-variant-picker__note {
  margin: 0.5rem 0 0;
  max-width: 62ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #5a5a64);
}

/* Under-slider variant rail (consolidated material families, e.g. Eskom CB
   frames) — all variants as ONE line where the gallery dots used to be.
   Centered under the artwork; pills scroll horizontally if they overflow so
   the rail never wraps to a second line. */
.gallery-variant-rail {
  display: flex;
  justify-content: center;
  padding: 0.63rem 0.25rem 2px;
}
.gallery-variant-rail .pdp-variant-picker--rail {
  margin: 0;
}
.gallery-variant-rail .pdp-variant-picker__pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.38rem;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.gallery-variant-rail .pdp-variant-pill {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Family price range on the PLP card — the range is longer than a single
   price, so let it wrap and slightly reduce its size vs a flat price. */
.product-price-block--family .lead-price-range .lead-price-bold {
  font-size: 0.94rem;
  line-height: 1.2;
  white-space: normal;
}

/* Budget / tool pages use a plain border-top bar, not the glass overlay */
.pdp-budget-page .pdp-bottom-bar,
.tool-sales-page .pdp-bottom-bar {
  margin-top: auto;
  padding: 1rem 2rem;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  justify-content: space-between;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #ffffff;
}

.pdp-cta-btn {
  height: 3rem;
  padding: 0 1.5rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pdp-cta-cart {
  background: var(--color-primary, #1a1a1a);
  color: white;
}

.pdp-cta-cart:hover:not([disabled]) {
  background: var(--color-primary-dark, #333333);
}

.pdp-cta-configure {
  background: var(--color-primary, #1a1a1a);
  color: white;
}

.pdp-cta-configure:hover {
  background: #008080;
  color: white;
}

.pdp-cta-options {
  background: var(--color-gray-900, #1b1534);
  color: white;
}

.pdp-cta-options:hover:not([disabled]) {
  background: var(--color-gray-700, #374151);
}

.pdp-cta-quote {
  background: #242424;
  color: white;
}

.pdp-cta-quote:hover:not([disabled]) {
  background: #1a1a1a;
}

/* Bottom bar legacy rules — superseded by primary block above (line ~4075) */
.pdp-cta-btn[disabled],
.pdp-cta-btn.loading {
  opacity: 0.5;
  cursor: not-allowed;
}

.pdp-price-block {
  text-align: right;
}

.pdp-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-gray-900, #0f172a);
}

.pdp-price.calculating {
  font-size: 1rem;
  color: var(--color-gray-400, #9ca3af);
}

.pdp-price-qty {
  display: block;
  font-size: 0.75rem;
  color: var(--color-gray-500, #6b7280);
  margin-top: 2px;
}

.pdp-budget-right {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 85vh;
}

.pdp-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-gray-200, #e5e7eb);
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

.pdp-tab:hover {
  color: var(--color-gray-600, #4b5563);
}

.pdp-tab.active {
  color: var(--color-gray-900, #0f172a);
  border-bottom-color: var(--color-gray-900, #0f172a);
}

.pdp-tab-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.375rem;
  border-radius: 50%;
  background: #8a00e5;
  vertical-align: 2px;
  box-shadow: 0 0 0 2px rgba(138, 0, 229, 0.15);
}

.pdp-info-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-gray-100, #f1f1f1);
}

.pdp-info-section:last-child {
  border-bottom: none;
}

.pdp-info-section h3 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500, #6b7280);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.pdp-info-section p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-gray-700, #374151);
  margin: 0 0 0.5rem;
}

.pdp-info-leadtime {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-800, #1f2937);
}

.pdp-info-leadtime svg {
  color: var(--color-gray-400, #9ca3af);
}

.pdp-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdp-features-list li {
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--color-gray-700, #374151);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pdp-features-list li::before {
  content: "\2713";
  content: "\2713";
  color: var(--color-primary, #1a1a1a);
  font-weight: 700;
  font-size: 0.75rem;
}

.pdp-doc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pdp-doc-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-gray-700, #374151);
  cursor: pointer;
  transition: background 0.15s;
}

.pdp-doc-item:hover {
  background: var(--color-gray-50, #f5f5f5);
}

.pdp-doc-item svg {
  color: var(--color-gray-400, #9ca3af);
  flex-shrink: 0;
}

.pdp-info-actions {
  margin-top: 1rem;
}

.pdp-config-section {
  margin-bottom: 1rem;
}

.pdp-section-title {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500, #6b7280);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.pdp-collapsible {
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.pdp-collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  cursor: pointer;
  user-select: none;
}

.pdp-collapsible-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-700, #374151);
}

.pdp-chevron {
  transition: transform 0.2s ease;
  color: var(--color-gray-400, #9ca3af);
}

.pdp-collapsible-header.expanded .pdp-chevron {
  transform: rotate(180deg);
}

.pdp-collapsible-body {
  display: none;
  padding-bottom: 1rem;
}

.pdp-collapsible-body.expanded {
  display: block;
}

.pdp-collapsible.step-locked .pdp-collapsible-title {
  opacity: 0.45;
}
/* V36 — when a step is locked, its body content (Step 4 Accessories shows
   its full list while Step 3 Housing is still pending) must not invite
   interaction. Mute + disable pointer events on the body, but explicitly
   preserve the `.arrester-step-placeholder` info strip so the "waiting
   for upstream" message stays at full contrast. */
.pdp-collapsible.step-locked .pdp-collapsible-body {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.4);
  user-select: none;
}
.pdp-collapsible.step-locked .pdp-collapsible-body .arrester-step-placeholder {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  user-select: text;
}
.pdp-collapsible.step-completed {
  border-left: 3px solid #16a34a;
  padding-left: 0.75rem;
}
.pdp-collapsible.step-info {
  border-left: 3px solid #d1d5db;
  padding-left: 0.75rem;
}
/* iter11d — collapse the wizard-active step accent to brand teal so the
   arrester PDP reads as a sibling of the generic SE PDP rather than a
   purple-themed bespoke surface. */
.pdp-collapsible.step-active {
  border-left: 3px solid var(--se-accent, #0098a6);
  padding-left: 0.75rem;
}
.pdp-collapsible.step-active .pdp-collapsible-title {
  color: var(--se-accent, #0098a6);
}
/* V33 — info-only steps (e.g. 3EH4 Step 1 "Plug-in Type" where the
   decision is actually made in Step 3) shouldn't take a full step's
   vertical space. Tighten the header, mute the title, inline the body
   as caption, and suppress the chevron (nothing to expand). */
.pdp-collapsible.step-info > .pdp-collapsible-header {
  padding: 0.625rem 0;
  cursor: default;
}
.pdp-collapsible.step-info .pdp-collapsible-title {
  color: var(--color-gray-500, #6b7280);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.pdp-collapsible.step-info .pdp-chevron {
  display: none;
}
.pdp-collapsible.step-info .pdp-collapsible-body {
  display: block;
  padding: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-gray-500, #6b7280);
  font-family: inherit;
}
.pdp-collapsible.step-info .pdp-collapsible-body .arrester-pill-grid {
  display: block;
  padding: 0;
  margin: 0;
  background: none;
}
.pdp-collapsible.step-info .pdp-collapsible-body .arrester-calc-formula {
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--color-gray-500, #6b7280);
  background: none;
  padding: 0;
  border: none;
}

.pdp-config-field {
  margin-bottom: 1rem;
}

.pdp-field-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-500, #6b7280);
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.pdp-select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: inherit;
  background: white;
  color: var(--color-gray-900, #0f172a);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.pdp-select:focus {
  outline: none;
  border-color: var(--color-primary, #1a1a1a);
}

.pdp-select.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pdp-radio-group {
  display: flex;
  gap: 0.5rem;
}

.pdp-radio-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--color-gray-700, #374151);
}

.pdp-radio-option:hover {
  border-color: var(--color-gray-400, #9ca3af);
}

.pdp-radio-option.selected {
  border-color: var(--color-primary, #1a1a1a);
  background: rgba(138, 0, 229, 0.04);
  color: var(--color-gray-900, #0f172a);
}

.pdp-radio-option input[type="radio"] {
  accent-color: var(--color-primary, #1a1a1a);
}

.pdp-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.375rem;
}

.pdp-slider-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary, #1a1a1a);
}

.pdp-option-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-gray-100, #f1f1f1);
  cursor: pointer;
  transition: background 0.1s;
}

.pdp-option-row:hover {
  background: var(--color-gray-50, #f5f5f5);
  margin: 0 -0.5rem;
  padding: 0.625rem 0.5rem;
  border-radius: 0.25rem;
}

.pdp-option-row:last-child {
  border-bottom: none;
}

.pdp-option-check {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-gray-300, #d1d5db);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.pdp-option-check.checked {
  background: var(--color-primary, #1a1a1a);
  border-color: var(--color-primary, #1a1a1a);
  color: white;
}

.pdp-option-label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-gray-700, #374151);
}

.pdp-option-impact {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-400, #9ca3af);
  white-space: nowrap;
}

.pdp-option-row.selected .pdp-option-impact {
  color: var(--color-primary, #1a1a1a);
}

.pdp-quantity-section {
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  padding-top: 1rem;
}

.pdp-config-footer {
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  padding-top: 1.25rem;
  margin-top: 1rem;
}

.pdp-config-price {
  text-align: right;
  margin-bottom: 1rem;
}

.pdp-config-actions .btn-full {
  width: 100%;
  margin-bottom: 0.5rem;
}

.pdp-config-actions .secondary-actions {
  display: flex;
  gap: 0.5rem;
}

.pdp-config-actions .secondary-actions .btn {
  flex: 1;
}

/* --- Configuration Matrix (transformer type PDP) --- */

.matrix-scroll {
  overflow-x: auto;
  margin: 0.75rem 0 0;
}

.pdp-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.pdp-matrix-table th,
.pdp-matrix-table td {
  padding: 0.625rem 0.75rem;
  text-align: center;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  white-space: nowrap;
}

.pdp-matrix-table th {
  background: var(--color-gray-50, #f9fafb);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-gray-500, #6b7280);
}

.matrix-hv-label {
  text-align: left !important;
  font-weight: 600;
  color: var(--color-gray-700, #374151);
  background: var(--color-gray-50, #f9fafb);
}

.matrix-cell {
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}

.matrix-cell:hover:not(.matrix-empty) {
  background: rgba(138, 0, 229, 0.06);
}

.matrix-cell.matrix-selected {
  background: rgba(138, 0, 229, 0.1);
  box-shadow: inset 0 0 0 2px var(--color-primary, #1a1a1a);
}

.matrix-empty {
  color: var(--color-gray-300, #d1d5db);
  cursor: default;
}

.matrix-cell-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.matrix-price {
  font-weight: 600;
  color: var(--color-gray-900, #0f172a);
}

.matrix-lead {
  font-size: 0.6875rem;
  color: var(--color-gray-400, #9ca3af);
}

/* --- Quote & Checkout (8 rules) --- */

.quote-details-section {
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  padding-top: 0;
}

.quote-details-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cart-top-actions {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table td {
  padding: var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

.cart-table th {
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  color: var(--color-gray-600);
}

.cart-item-image {
  width: 5rem;
  height: auto;
}

.cart-item-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
}

/* --- Training Center (2 rules) --- */

.pdp-cta-training {
  background: var(--color-primary, #1a1a1a);
  color: white;
}

.pdp-cta-training:hover {
  background: #008080;
}

/* ═══════════════════════════════════════════════════════════════════
   BUDGET WIZARD — 3-Layer Form (General -> Projects -> Transformers)
   ═══════════════════════════════════════════════════════════════════ */

/* Form input (bordered variant for wizard) */
.form-input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-family: inherit;
  background: white;
  color: var(--color-gray-900);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
}

.form-input::placeholder {
  color: var(--color-gray-400);
}

input[type="date"].form-input {
  cursor: pointer;
}

/* Wizard card wrappers */
.wizard-card {
  border-left: 0.25rem solid var(--color-primary);
}

.wizard-card .collapsible-header {
  cursor: pointer;
  user-select: none;
}

.wizard-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* Icon button */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-gray-400);
}

.btn-icon:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.btn-icon-danger:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* Badge styles */
.wizard-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 0.625rem;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 1.25rem;
  margin-left: var(--spacing-2);
}

/* Type badge colors */
.wizard-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  color: white;
  min-width: 3.25rem;
  text-align: center;
}

.wizard-type-badge-sm {
  padding: 2px 0.5rem;
  font-size: 0.625rem;
  min-width: 2.5rem;
}

.wizard-type-net,
.wizard-type-aut {
  background: #2563eb;
}

.wizard-type-gsu {
  background: #7c3aed;
}

.wizard-type-fixshr {
  background: #059669;
}

/* Transformer card */
.wizard-transformer-card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.wizard-tx-header {
  padding: var(--spacing-2) 0;
  border-bottom: none;
}

.wizard-tx-header.expanded {
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--spacing-3);
}

.wizard-tx-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-left: var(--spacing-2);
}

/* Transformers area */
.wizard-transformers-area {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 2px solid var(--color-gray-100);
}

/* Add transformer control */
.wizard-add-transformer {
  margin-top: var(--spacing-3);
}

.wizard-add-transformer > label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.wizard-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.wizard-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  padding: var(--spacing-2) var(--spacing-3);
}

.wizard-type-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Add project card (dashed) */
.wizard-add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  color: var(--color-gray-500);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
}

.wizard-add-card:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(0, 153, 153, 0.03);
}

/* Subsections */
.wizard-subsection {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
}

.wizard-subsection > label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-3);
}

/* Type-specific field sections */
.wizard-type-fields {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px dashed var(--color-gray-200);
}

.wizard-type-fields-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--spacing-3);
}

/* Checkbox grid */
.wizard-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--spacing-2);
}

.wizard-checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: var(--font-size-sm);
}

.wizard-checkbox-option:hover {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
}

.wizard-checkbox-option input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 1rem;
  height: 1rem;
}

.wizard-checkbox-text {
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
}

.wizard-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.wizard-checkbox-row input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* Indent for conditional sub-fields */
.wizard-indent {
  margin-top: var(--spacing-2);
  margin-left: var(--spacing-4);
}

/* Required asterisk */
.wizard-required {
  color: #dc2626;
  font-weight: 700;
}

/* Radio inline variant */
.radio-options-inline {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Submit section */
.wizard-submit-section {
  border-top: 2px solid var(--color-primary);
}

.wizard-validation-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
}

.wizard-validation-error {
  color: #dc2626;
  font-size: var(--font-size-sm);
  padding: 0.25rem 0;
}

.wizard-validation-error::before {
  content: "\2022";
  margin-right: var(--spacing-2);
}

.wizard-ready-message {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  color: #16a34a;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Sidebar summary styles */
.wizard-summary-stats {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--spacing-4);
}

.wizard-stat {
  flex: 1;
  text-align: center;
}

.wizard-stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

.wizard-stat-desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.wizard-summary-section {
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.wizard-summary-heading {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-1);
}

.wizard-summary-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-800);
  margin: 0;
}

.wizard-summary-detail {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: 2px 0 0;
}

.wizard-summary-empty {
  font-style: italic;
}

.wizard-summary-tx {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

/* === Auth Guard === */
.auth-guard-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.auth-guard-icon {
  font-size: 3rem;
}
.auth-guard-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}
.auth-guard-message {
  color: #6b7280;
  margin: 0;
  max-width: 25rem;
}
.auth-guard-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #1a1a1a;
  color: white;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 500;
  margin-top: 0.5rem;
}
.auth-guard-btn:hover {
  background: #00807f;
}

/* ═══════════════════════════════════════════════════════════════════
   MPT Budget Tool — 3-Layer Project Wizard (Stitch / Precision Eng.)
   Prefix: .mpt-
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Wizard container ─────────────────────────────────────────── */
.mpt-wizard {
  font-family:
    "Siemens Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  background: #f7f7f8;
  color: #111;
  min-height: 100vh;
  list-style: none;
}
.mpt-wizard *,
.mpt-wizard *::before,
.mpt-wizard *::after {
  list-style-type: none;
}

.mpt-loading,
.mpt-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
  text-align: center;
}

/* ─── Top bar ──────────────────────────────────────────────────── */
.mpt-topbar {
  height: 3rem;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 2.5rem;
}
.mpt-topbar-brand {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* ─── Breadcrumb ───────────────────────────────────────────────── */
.mpt-breadcrumb {
  padding: 1rem 2.5rem;
  font-size: 0.8125rem;
  color: #666;
  border-bottom: 1px solid #e5e5e5;
}
.mpt-breadcrumb a {
  color: #666;
  text-decoration: none;
}
.mpt-breadcrumb a:hover {
  color: #1a1a1a;
}
.mpt-breadcrumb span {
  margin: 0 0.25rem;
}
.mpt-breadcrumb-current {
  color: #111;
  font-weight: 500;
}

/* ─── Hero ─────────────────────────────────────────────────────── */
.mpt-hero {
  position: relative;
  width: 100%;
  min-height: clamp(12.5rem, calc(20 * var(--vwx)), 22.5rem);
  background: url("/images/hero-transformers.jpg") center center / cover
    no-repeat;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}
.mpt-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
}
.mpt-hero-content {
  position: relative;
  z-index: 1;
  padding: 3rem 2.5rem;
  max-width: 43.75rem;
}
.mpt-hero-title {
  font-size: clamp(1.75rem, calc(3 * var(--vwx)), 2.625rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  color: #fff;
  text-transform: uppercase;
}
.mpt-hero-subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ─── Layout ───────────────────────────────────────────────────── */
.mpt-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  padding: clamp(1.5rem, calc(2.6 * var(--vwx)), 2rem)
    clamp(1.25rem, calc(2.6 * var(--vwx)), 2.5rem) 5rem;
  max-width: 87.5rem;
}
.mpt-layout > :first-child {
  flex: 999 1 26rem;
  min-width: 0;
}
.mpt-layout > :last-child {
  flex: 1 1 21.25rem;
  min-width: 0;
}
.mpt-form {
  padding-right: 1rem;
  min-width: 0;
}

/* ─── Sections (card style) ────────────────────────────────────── */
.mpt-section {
  margin-bottom: 2rem;
  background: #fff;
  border: 1px solid #e8e8eb;
  border-radius: 0.5rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.02);
  padding: clamp(1.25rem, calc(2.5 * var(--vwx)), 2rem);
  transition: box-shadow 0.2s ease;
}
.mpt-section:hover {
  box-shadow:
    0 2px 0.5rem rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
}
.mpt-section-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e5e5;
}
.mpt-section-number {
  font-size: 3rem;
  font-weight: 200;
  line-height: 1;
  color: #c9c9c9;
  min-width: 3.5rem;
}
.mpt-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0.5rem 0 0.25rem;
  color: #000;
}
.mpt-section-desc {
  font-size: 0.8125rem;
  color: #777;
  margin: 0;
}
.mpt-section-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ─── Fields ───────────────────────────────────────────────────── */
.mpt-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.mpt-field-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4a4a;
}
.mpt-required {
  color: #009999;
  font-weight: 700;
  margin-left: 2px;
}
.mpt-field-hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
  display: block;
}
.mpt-input {
  height: 2.5rem;
  padding: 0 0 0.25rem;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  font-size: 0.9375rem;
  font-family: var(--font-family);
  color: #1a1a1a;
  background: transparent;
  outline: none;
  transition: border-color 0.2s;
}
.mpt-input:focus {
  border-bottom-color: #009999;
  border-bottom-width: 2px;
  padding-bottom: 0.19rem;
}
.mpt-input::placeholder {
  color: #aaa;
}
/* #62 — Hide number input spinner arrows */
.mpt-input[type="number"]::-webkit-inner-spin-button,
.mpt-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mpt-input[type="number"] {
  -moz-appearance: textfield;
}
.mpt-textarea {
  height: auto;
  padding: 0.625rem 0.75rem;
  resize: vertical;
}
.mpt-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-color: transparent;
  padding-right: 1.5rem;
}

/* Row layouts */
.mpt-row-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.25rem;
}
.mpt-row-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1.25rem;
}

/* ─── Pills ────────────────────────────────────────────────────── */
.mpt-pills {
  display: flex;
  gap: 0;
}
.mpt-pills-wrap {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mpt-pill {
  padding: 0.5rem 1.25rem;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 0;
  font-family: var(--font-family);
  transition: all 0.15s;
}
.mpt-pill:not(:first-child) {
  margin-left: -1px;
}
.mpt-pills-wrap .mpt-pill {
  margin-left: 0;
}
.mpt-pill:hover {
  background: #f5f5f5;
}
.mpt-pill-active {
  background: #009999;
  border-color: #009999;
  color: #fff;
}
.mpt-pill-active:hover {
  background: #00b3b3;
  border-color: #00b3b3;
}

/* ─── Checkboxes ───────────────────────────────────────────────── */
.mpt-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.mpt-checkboxes-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
.mpt-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #333;
  user-select: none;
}
.mpt-checkbox-box {
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid #999;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  background: #fff;
}
.mpt-checkbox-checked .mpt-checkbox-box {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.mpt-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: -2px;
}
.mpt-checkbox-info {
  display: inline-flex;
  align-items: center;
  color: #999;
  cursor: help;
}
.mpt-tooltip-wrap:hover .mpt-checkbox-info {
  color: #1a1a1a;
}
.mpt-tooltip-text {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 20rem;
  padding: 0.75rem 1rem;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  z-index: 100;
  pointer-events: none;
}
.mpt-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 0.375rem solid transparent;
  border-top-color: #1a1a1a;
}
.mpt-tooltip-wrap:hover .mpt-tooltip-text {
  display: block;
}

/* ─── Application Type Multi-Select ────────────────────────────── */
.mpt-app-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.375rem;
}

.mpt-app-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.8125rem;
  line-height: 1.3;
  user-select: none;
}
.mpt-app-item:hover {
  border-color: #1a1a1a;
  background: #fafafa;
}
.mpt-app-item-checked {
  border-color: #1a1a1a;
  background: #f5f5f5;
}
.mpt-app-item-check {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  border: 2px solid #d1d5db;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.mpt-app-item-checked .mpt-app-item-check {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.mpt-app-item-label {
  flex: 1;
}
.mpt-app-item-info {
  color: #9ca3af;
  cursor: help;
  position: relative;
  display: flex;
  align-items: center;
}
.mpt-app-item-info:hover {
  color: #1a1a1a;
}

/* ─── Cards ────────────────────────────────────────────────────── */
.mpt-card {
  border: 1px solid #e2e2e6;
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* ─── Project Cards ────────────────────────────────────────────── */
.mpt-project-card {
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.mpt-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  user-select: none;
}
.mpt-project-header:hover {
  background: #fafafa;
}
.mpt-project-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mpt-project-index {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: #1a1a1a;
  padding: 2px 0.5rem;
  border-radius: 3px;
}
.mpt-project-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111;
}
.mpt-project-country-tag {
  font-size: 0.6875rem;
  color: #666;
  border: 1px solid #ddd;
  padding: 2px 0.5rem;
  border-radius: 3px;
}
.mpt-project-count {
  font-size: 0.6875rem;
  color: #999;
  margin-left: 0.5rem;
}
.mpt-project-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mpt-project-body {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: mpt-expand 0.25s ease-out;
}
@keyframes mpt-expand {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Chevron ──────────────────────────────────────────────────── */
.mpt-chevron {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mpt-chevron-open {
  transform: rotate(180deg);
}

/* ─── Icon buttons ─────────────────────────────────────────────── */
.mpt-btn-icon {
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  color: #999;
  padding: 0;
  transition: all 0.15s ease;
}
.mpt-btn-icon:hover {
  color: #333;
  background: #f0f0f0;
}
.mpt-btn-delete:hover {
  color: #c00;
  background: #fff0f0;
}

/* ─── Add project button ───────────────────────────────────────── */
.mpt-btn-add-project {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  border: 2px dashed #ccc;
  background: #fff;
  color: #666;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 0.375rem;
  font-family: inherit;
  transition: all 0.2s ease;
}
.mpt-btn-add-project:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
  background: #fafafa;
  box-shadow: 0 2px 0.375rem rgba(0, 0, 0, 0.06);
}

/* ─── Divider ──────────────────────────────────────────────────── */
.mpt-divider {
  height: 1px;
  background: #e5e5e5;
  margin: 0.5rem 0;
}

/* ─── Type picker ──────────────────────────────────────────────── */
.mpt-type-picker-heading h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #333;
  margin: 0 0 0.25rem;
}
.mpt-type-picker-desc {
  font-size: 0.75rem;
  color: #888;
  margin: 0;
}
.mpt-type-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.75rem;
}
.mpt-type-card {
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  padding: 1.25rem 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mpt-type-card:hover {
  border-color: #1a1a1a;
  background: #fafafa;
  box-shadow:
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.08),
    0 2px 0.25rem rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}
.mpt-type-card-img {
  width: 100%;
  height: 5rem;
  object-fit: contain;
  border-radius: 2px;
}
.mpt-type-card-icon {
  color: #1a1a1a;
}
.mpt-type-card-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111;
}
.mpt-type-card-sub {
  font-size: 0.625rem;
  color: #888;
  line-height: 1.3;
}

/* ─── Transformer Cards ────────────────────────────────────────── */
.mpt-transformer-card {
  border-left: 3px solid #1a1a1a;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: #fcfcfd;
  border-radius: 0 0.375rem 0.375rem 0;
  animation: mpt-expand 0.25s ease-out;
}
.mpt-transformer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mpt-transformer-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mpt-transformer-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  background: #fff;
  flex-shrink: 0;
}
.mpt-transformer-type {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111;
}
.mpt-transformer-desc-tag {
  display: block;
  font-size: 0.75rem;
  color: #777;
}
.mpt-transformer-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mpt-qty-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #888;
}

/* ─── Quantity stepper ─────────────────────────────────────────── */
.mpt-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  overflow: hidden;
}
.mpt-stepper-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  background: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-family: inherit;
  border-radius: 0;
  padding: 0;
}
.mpt-stepper-btn:hover {
  background: #f5f5f5;
}
.mpt-stepper-btn[disabled] {
  color: #ccc;
  cursor: not-allowed;
}
.mpt-stepper-val {
  width: 2.25rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  line-height: 2rem;
}

/* ─── Technical supplement ─────────────────────────────────────── */
.mpt-supplement {
  border-top: 1px solid #eee;
  padding-top: 0.75rem;
}
.mpt-supplement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #666;
  padding: 0.25rem 0;
  user-select: none;
}
.mpt-supplement-header:hover {
  color: #1a1a1a;
}
.mpt-supplement-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  animation: mpt-expand 0.25s ease-out;
}

/* ─── Submit section ───────────────────────────────────────────── */
.mpt-submit-section {
  margin-top: 0;
}
.mpt-disclaimer {
  font-size: 0.6875rem;
  line-height: 1.6;
  color: #999;
  margin: 1rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mpt-submit-msg {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.75rem;
  border-radius: 0.375rem;
  animation: mpt-expand 0.2s ease-out;
}
.mpt-msg-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}
.mpt-msg-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

/* ─── Confirmation view ───────────────────────────────────────── */
.mpt-confirmation {
  position: relative;
  max-width: 42.5rem;
  margin: clamp(2.5rem, calc(5 * var(--vwx)), 4rem) auto
    clamp(3.75rem, calc(6 * var(--vwx)), 5rem);
  padding: clamp(3rem, calc(5 * var(--vwx)), 4rem)
    clamp(1.5rem, calc(4 * var(--vwx)), 3rem);
  text-align: center;
  background: #fff;
  border: 1px solid #e8e8eb;
  border-radius: 0.5rem;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.06);
  animation: mpt-expand 0.3s ease-out;
}
.mpt-confirmation-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #e5e5e5;
  border-radius: 0.375rem;
  font-size: 1.5rem;
  color: #999;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1;
}
.mpt-confirmation-close:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
}
.mpt-confirmation-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.mpt-confirmation-icon {
  margin-bottom: 0.5rem;
}
.mpt-confirmation-title {
  font-size: 2.625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0;
}
.mpt-confirmation-ref {
  margin: 0.25rem 0;
}
.mpt-confirmation-ref-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #1a1a1a;
}
.mpt-confirmation-text {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #666;
  line-height: 1.7;
  max-width: 32.5rem;
  margin: 0;
}
.mpt-confirmation-contact {
  font-size: 0.875rem;
  font-weight: 400;
  color: #666;
  margin: 0;
}
.mpt-confirmation-email {
  color: #1a1a1a;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mpt-confirmation-email:hover {
  color: #000;
}
.mpt-confirmation .mpt-btn-primary {
  margin-top: 1rem;
  padding: 1rem 2.5rem;
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.mpt-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.mpt-btn-primary:hover {
  background: #333;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.15);
}
.mpt-btn-primary:active {
  transform: scale(0.98);
}
.mpt-btn-primary[disabled] {
  background: #ccc;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
/* Loading shimmer for submit button */
.mpt-btn-primary[disabled]:not(:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: mpt-shimmer 1.5s infinite;
}
@keyframes mpt-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.mpt-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  color: #333;
  border: 1px solid #333;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
.mpt-btn-secondary:hover {
  background: #f5f5f5;
  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.08);
}
.mpt-btn-full {
  width: 100%;
}

/* ─── Sidebar ──────────────────────────────────────────────────── */
.mpt-sidebar {
  position: relative;
}
.mpt-sidebar-inner {
  position: sticky;
  top: 4.5rem;
  border: 1px solid #e2e2e6;
  border-radius: 0.5rem;
  padding: 1.5rem;
  background: #fff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.02);
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
}
.mpt-sidebar-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #555;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #1a1a1a;
  text-transform: uppercase;
}
.mpt-sidebar-empty {
  font-size: 0.8125rem;
  color: #999;
  margin: 0 0 1.25rem;
}
.mpt-sidebar-project {
  margin-bottom: 1rem;
}
.mpt-sidebar-project-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.mpt-sidebar-project-idx {
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background: #1a1a1a;
  padding: 1px 0.375rem;
  border-radius: 3px;
}
.mpt-sidebar-project-header span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111;
}
.mpt-sidebar-transformers {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1.5rem;
}
.mpt-sidebar-transformers li {
  font-size: 0.75rem;
  color: #555;
  padding: 0.19rem 0;
  border-left: 2px solid #e5e5e5;
  padding-left: 0.625rem;
}
.mpt-sidebar-power {
  color: #1a1a1a;
  font-weight: 500;
}
.mpt-sidebar-no-transformers {
  font-size: 0.6875rem;
  color: #bbb;
  margin: 0.25rem 0 0 1.5rem;
}
.mpt-sidebar-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-top: 1px solid #eee;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333;
}
.mpt-sidebar-total-count {
  font-size: 1.25rem;
  font-weight: 300;
  color: #1a1a1a;
}
.mpt-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

/* ─── Responsive ───────────────────────────────────────────────── */

/* ─── Assisted Selling Banner ─────────────────────────────────── */
.mpt-assisted-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f5f5f5;
  border: 1px solid #1a1a1a;
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
.mpt-assisted-badge {
  background: #1a1a1a;
  color: white;
  padding: 2px 0.5rem;
  border-radius: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* #56 — Special Case transformer banner */
.mpt-special-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #fef9e7;
  border: 1px solid #f0d060;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b5900;
}
.mpt-special-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #b8860b;
}

/* ─── Step progress indicator ─────────────────────────────────── */
.mpt-form {
  counter-reset: mpt-step;
}
.mpt-form > .mpt-section {
  counter-increment: mpt-step;
  position: relative;
}
/* Vertical connector line between section cards */
.mpt-form > .mpt-section:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3.4375rem;
  bottom: -2rem;
  width: 2px;
  height: 2rem;
  background: linear-gradient(to bottom, #d4d4d8, #e5e5e5);
}
/* Step dot on each section header number */
.mpt-section-number {
  position: relative;
}
.mpt-section-number::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #1a1a1a;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
/* When section is hovered or focused, highlight the step dot */
.mpt-section:hover .mpt-section-number::before,
.mpt-section:focus-within .mpt-section-number::before {
  opacity: 1;
}
/* Active section number styling */
.mpt-section:focus-within .mpt-section-number {
  color: #1a1a1a;
}

/* === Transformer Section (Catalog Page) === */
.transformer-section {
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.transformer-section .product-list-container {
  max-width: 87.5rem;
  margin: 0 auto;
}

/* === Project Configurator Widget === */
.project-configurator-card {
  border: 2px dashed #ccc;
  padding: 2rem;
  text-align: center;
  margin: 1.5rem 0;
  border-radius: 0.25rem;
}
.project-configurator-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}
.project-configurator-card p {
  color: #666;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}
.configurator-card-btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 0.75rem 2rem;
  font-size: 0.8125rem;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.configurator-card-btn:hover {
  background: #333;
  color: #fff;
}

/* Fix PDP hero image containment */
.pdp-hero .product-image-wrapper {
  max-height: 25rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  aspect-ratio: auto !important;
}
.pdp-hero .product-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 25rem;
  object-fit: contain;
}
/* Override old pdp-hero aspect ratio for transformer pages */
.pdp-budget-left .pdp-hero {
  aspect-ratio: auto !important;
  max-height: 26.25rem;
  padding: 1rem;
}
.pdp-budget-left .pdp-hero img {
  max-height: 23.75rem;
  width: auto;
  max-width: 100%;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ═══════════════════════════════════════════════════════════════════
   QUOTE PAGE — Matches Figma Quote Detail (12885:85923)
   ═══════════════════════════════════════════════════════════════════ */
.quote-page {
  color: #242424;
  min-height: 100vh;
}
.quote-header {
  padding: 1rem 2.5rem;
  border-bottom: 1px solid #ebebeb;
}

/* ─── Quote Hero (big title + status + pills) ─────────────── */
.quote-hero {
  padding: 1rem 2.5rem 2rem;
}
.quote-breadcrumb {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6b6b;
  margin-bottom: 0.75rem;
}
.quote-bc-sep {
  color: #c9c9c9;
}
.quote-bc-current {
  color: #242424;
  font-weight: 600;
}
.quote-hero-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.quote-hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #242424;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.quote-status-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.quote-status-dots {
  display: flex;
  gap: 0.25rem;
}
.quote-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}
.quote-dot-yellow {
  background: #f59e0b;
}
.quote-dot-green {
  background: #22c55e;
}
.quote-dot-grey {
  background: #d1d5db;
}
.quote-dot-red {
  background: #ef4444;
}
.quote-status-text {
  font-size: 0.8125rem;
  color: #6b6b6b;
}
.quote-info-pill {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.25rem;
  border: 1px solid #ebebeb;
}
.quote-pill-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #242424;
}
.quote-pill-label {
  font-size: 0.6875rem;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.quote-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
}
.quote-layout > :first-child {
  flex: 999 1 26rem;
  min-width: 0;
}
.quote-layout > :last-child {
  flex: 1 1 23.75rem;
  min-width: 0;
}

/* Left: items list */
.quote-items {
  display: flex;
  flex-direction: column;
}
.quote-project-heading {
  font-size: 0.875rem;
  font-weight: 700;
  color: #242424;
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ebebeb;
}
.quote-project-heading:first-child {
  margin-top: 0;
}
.quote-project-meta {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin-bottom: 0.75rem;
}
.quote-item-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #ebebeb;
}
.quote-item-img {
  width: 8rem;
  height: 8rem;
  object-fit: contain;
  background: #f5f5f5;
  border-radius: 0.5rem;
  flex-shrink: 0;
}
.quote-item-details {
  flex: 1;
}
.quote-item-type {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6b6b;
  margin-bottom: 2px;
}
.quote-item-title {
  font-size: 1rem;
  font-weight: 700;
  color: #242424;
}
.quote-item-specs {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin-top: 0.25rem;
}
.quote-item-qty {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #c9c9c9;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #242424;
  flex-shrink: 0;
}
.quote-item-price {
  font-size: 1rem;
  font-weight: 600;
  color: #242424;
  text-align: right;
  min-width: 7.5rem;
}

/* Right: summary panel */
.quote-summary {
  border: 1px solid #ebebeb;
  padding: 2rem;
}
.quote-summary h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #242424;
  margin: 0 0 1.25rem;
}
.quote-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: #6b6b6b;
}
.quote-summary-row.total {
  font-weight: 700;
  font-size: 1rem;
  color: #242424;
  border-top: 1px solid #ebebeb;
  margin-top: 0.5rem;
  padding-top: 1rem;
}
.quote-summary-divider {
  border: none;
  border-top: 1px solid #ebebeb;
  margin: 1rem 0;
}
.quote-summary-info {
  font-size: 0.8125rem;
  color: #6b6b6b;
  padding: 0.5rem 0;
}

/* Actions */
.quote-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.quote-btn-primary {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: #1a1a1a;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  font-family: var(--font-family);
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.quote-btn-primary:hover {
  background: #333;
}
.quote-btn-secondary {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: #fff;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.875rem;
  font-family: var(--font-family);
  border: 1px solid #1a1a1a;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.quote-btn-secondary:hover {
  background: #f5f5f5;
}

/* Footer */
.quote-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ebebeb;
  font-size: 0.75rem;
  color: #c9c9c9;
  line-height: 1.5;
}

/* Loading / error states */
.quote-loading,
.quote-error {
  text-align: center;
  padding: 5rem 2.5rem;
}
.quote-loading {
  color: #6b6b6b;
  font-size: 1rem;
}
.quote-error {
  color: #c00;
  font-size: 1rem;
}
.quote-accepted-banner {
  background: #f0faf0;
  border: 1px solid #4caf50;
  padding: 1rem 1.5rem;
  margin: 0 2.5rem 1.5rem;
  font-size: 0.875rem;
  color: #2e7d32;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.quote-error-banner {
  background: #fef2f2;
  border: 1px solid #ef4444;
  padding: 1rem 1.5rem;
  margin: 0 2.5rem 1.5rem;
  font-size: 0.875rem;
  color: #991b1b;
}

.quote-wrapper {
  max-width: 75rem;
  margin: 0 auto;
}

.quote-spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid #eee;
  border-top-color: #009999;
  border-radius: 50%;
  animation: sq-spin 0.8s linear infinite;
  margin: 0 auto 1rem;
}

.quote-loading-text {
  color: #6b6b6b;
  font-size: 0.875rem;
}

.quote-error-container {
  text-align: center;
  padding: 5rem 2.5rem;
}

.quote-error-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: #242424;
  margin: 0 0 0.5rem;
}

.quote-error-message {
  color: #6b6b6b;
  font-size: 0.875rem;
  margin: 0 0 1.5rem;
}
.quote-content {
  padding: 0;
}
.quote-summary-subtitle {
  font-size: 0.875rem;
  color: #6b6b6b;
  display: block;
  margin-bottom: 1rem;
}
.quote-summary-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.quote-accepted-label {
  font-size: 0.8125rem;
  color: #22c55e;
  font-weight: 600;
}

/* ─── Left column stack ───────── */
.quote-left-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

/* ─── Expanded sections (WARRANTY, DELIVERY, etc.) ───────── */
.quote-accordions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.5rem;
}
.quote-section {
  border-top: 1px solid #ebebeb;
  padding-top: 1rem;
}
.quote-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #242424;
  margin-bottom: 0.375rem;
}
.quote-section-body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4a4a4a;
  margin: 0;
}

/* ─── Per-item full configuration grid ───────── */
.quote-item-card {
  border-bottom: 1px solid #ebebeb;
  padding: 0.5rem 0;
}
.quote-item-card .quote-item-row {
  border-bottom: none;
}
.quote-item-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem 1.5rem;
  padding: 0.25rem 0 1rem 9rem; /* aligns past the 128px image + 16px gap */
}
.quote-config-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  border-bottom: 1px dotted #ececec;
  padding-bottom: 0.25rem;
}
.quote-config-label {
  color: #6b6b6b;
  white-space: nowrap;
}
.quote-config-value {
  color: #242424;
  font-weight: 500;
  text-align: right;
}

/* ─── Timeline column actions ───────── */
.quote-timeline-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}
.quote-timeline-actions .quote-btn-primary,
.quote-timeline-actions .quote-btn-secondary {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ────────────────────────────────────────────────────── */
/* Service Quote Page (.sq-*) — Magic Link Customer View */
/* ────────────────────────────────────────────────────── */
.sq-page {
  min-height: 100vh;
  background: #f8f8f8;
  color: #242424;
}
.sq-wrapper {
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.sq-header {
  border-bottom: 2px solid #1a1a1a;
  padding: 1.25rem 0;
  margin-bottom: 2rem;
}
.sq-header-inner {
  display: flex;
  align-items: center;
}
.sq-logo {
  height: 1.5rem;
}
.sq-loading {
  text-align: center;
  padding: 7.5rem 0;
}
.sq-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #eee;
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: sq-spin 0.8s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes sq-spin {
  to {
    transform: rotate(360deg);
  }
}
.sq-loading-text {
  color: #6b6b6b;
  font-size: 0.875rem;
}
.sq-error {
  text-align: center;
  padding: 5rem 0;
}
.sq-error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.sq-error-title {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.sq-error-message {
  color: #6b6b6b;
  font-size: 0.875rem;
}
.sq-breadcrumb {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin-bottom: 1.5rem;
}
.sq-breadcrumb-link {
  color: #1a1a1a;
  text-decoration: none;
}
.sq-breadcrumb-sep {
  margin: 0 0.25rem;
}
.sq-hero {
  text-align: center;
  margin-bottom: 2rem;
}
.sq-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}
.sq-status-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.sq-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #ddd;
}
.sq-dot-active {
  background: #1a1a1a;
}
.sq-info-pills {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}
.sq-pill {
  text-align: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid #ebebeb;
  border-radius: 0.5rem;
  background: #fff;
}
.sq-pill-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
}
.sq-pill-label {
  display: block;
  font-size: 0.6875rem;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}
.sq-accepted-banner {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  text-align: center;
  color: #166534;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.sq-accepted-icon {
  margin-right: 0.5rem;
  color: #22c55e;
}
.sq-error-banner {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: #991b1b;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.sq-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 3rem;
}
.sq-layout > :first-child {
  flex: 999 1 26rem;
  min-width: 0;
}
.sq-layout > :last-child {
  flex: 1 1 22.5rem;
  min-width: 0;
}

.sq-items {
  min-width: 0;
}
.sq-item-group {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.sq-item-group-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sq-item-badge {
  background: #1a1a1a;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}
.sq-item-config {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin-bottom: 1rem;
}
.sq-table-wrapper {
  overflow-x: auto;
}
.sq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.sq-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b6b6b;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid #ebebeb;
}
.sq-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #f3f3f3;
}
.sq-table tr:hover {
  background: #fafafa;
}
.sq-type-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 0.375rem;
  border-radius: 3px;
  margin-right: 0.375rem;
}
.sq-type-material {
  background: #dbeafe;
  color: #1e40af;
}
.sq-type-manpower {
  background: #fef3c7;
  color: #92400e;
}
.sq-type-tool {
  background: #e0e7ff;
  color: #3730a3;
}
.sq-type-consumable {
  background: #fce7f3;
  color: #9d174d;
}
.sq-type-travel {
  background: #d1fae5;
  color: #065f46;
}
.sq-docs-section {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.sq-docs-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1a1a1a;
}
.sq-docs-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.sq-doc-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #f3f3f3;
  border-radius: 0.375rem;
  text-decoration: none;
  color: #242424;
  font-size: 0.8125rem;
  transition: background 0.15s;
}
.sq-doc-item:hover {
  background: #f0fafa;
  border-color: #1a1a1a;
}
.sq-doc-icon {
  font-size: 1rem;
}
.sq-doc-name {
  flex: 1;
}
.sq-doc-ext {
  font-size: 0.625rem;
  font-weight: 700;
  color: #6b6b6b;
  text-transform: uppercase;
  padding: 1px 0.375rem;
  background: #f3f3f3;
  border-radius: 3px;
}
.sq-summary {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  position: sticky;
  top: 1.5rem;
  align-self: start;
}
.sq-summary-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 0.75rem;
}
.sq-summary-customer {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin-bottom: 0.5rem;
}
.sq-summary-ref {
  font-size: 0.8125rem;
  color: #242424;
}
.sq-summary-divider {
  height: 1px;
  background: #ebebeb;
  margin: 0.75rem 0;
}
.sq-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  padding: 0.25rem 0;
}
.sq-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 0.5rem 0;
}
.sq-summary-total-value {
  color: #1a1a1a;
}
.sq-btn-accept {
  width: 100%;
  padding: 0.875rem;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
  transition: opacity 0.15s;
}
.sq-btn-accept:hover {
  opacity: 0.9;
}
.sq-btn-accept:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sq-accepted-label {
  text-align: center;
  color: #22c55e;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 1rem;
}
.sq-terms {
  margin-bottom: 3rem;
}
.sq-term {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
}
.sq-term-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b6b6b;
  margin-bottom: 0.25rem;
}
.sq-term-content {
  font-size: 0.8125rem;
  color: #242424;
  line-height: 1.5;
}
.sq-footer {
  text-align: center;
  padding: 1.5rem 0;
  border-top: 1px solid #ebebeb;
  font-size: 0.75rem;
  color: #6b6b6b;
}
.sq-footer-disclaimer {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 0.25rem;
}

/* Quote message on configurator */
.quote-message {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  text-align: center;
}
.quote-message.success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}
.quote-message.error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}
.auth-guard-btn:hover {
  background: #00807f;
}

/* ================================================================
   Selin UX pack (April 15 — Userback 7527079, 7527069, 7527013)
   Single-select radio-style app type buttons, flat Tech Supplement,
   and richer Project Summary sidebar cards.
   ================================================================ */

/* Radio indicator — outer ring + centered dot when the option is
   selected. Reuses .mpt-app-item layout but replaces the square
   checkbox mark with a round one. */
.mpt-app-item-radio .mpt-app-item-radio-mark {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  border: 2px solid var(--g400, #999999);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.mpt-app-item-radio.mpt-app-item-checked .mpt-app-item-radio-mark {
  border-color: var(--accent, #009999);
}
.mpt-app-item-radio-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent, #009999);
  border-radius: 50%;
}

/* Flat Technical Supplement: the static header drops the click
   affordance (no hover, no chevron). */
.mpt-supplement-flat .mpt-supplement-header-static {
  cursor: default;
  padding: 0.75rem 0;
  font-weight: 600;
  color: var(--fg, #1a1a1a);
  border-bottom: 1px solid var(--g200, #e5e5e5);
  margin-bottom: 0.75rem;
}
.mpt-supplement-flat .mpt-supplement-header-static:hover {
  background: transparent;
}

/* Project Summary sidebar: app type + type breakdown lines sit
   between the project name and the transformer list. */
.mpt-sidebar-project-app {
  margin: 0.25rem 0 0 0;
  font-size: 0.75rem;
  color: var(--g600, #666666);
  font-style: italic;
}
.mpt-sidebar-project-types {
  margin: 0.25rem 0 0 0;
  font-size: 0.8rem;
  color: var(--fg, #1a1a1a);
  font-weight: 500;
}

/* Userback 7526999 — disclaimer box shown under the Standard field
   when the user picks "Other". Soft warning tone (amber/orange)
   with an inline triangle icon; reads as an advisory, not an error. */
.mpt-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  margin-top: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  line-height: 1.45;
}
.mpt-disclaimer svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.mpt-disclaimer-warn {
  background: #fff8e6;
  border: 1px solid #f4c66e;
  color: #7a5300;
}
.mpt-disclaimer-warn svg {
  color: #b97200;
}

/* ── Auth callback page (SSO redirect landing) ────────────────── */
.auth-callback-page {
  min-height: calc(100vh - var(--header-height, 4.5rem));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  padding: 2.5rem 1.5rem;
}
.auth-callback-content {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}
.auth-callback-content h2 {
  font-family: "Siemens Sans", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
  color: #242424;
}
.auth-callback-content p {
  color: #5d596e;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.auth-callback-content .spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(138, 0, 229, 0.2);
  border-top-color: #8a00e5;
  border-radius: 50%;
  animation: auth-callback-spin 0.8s linear infinite;
  margin-top: 0.5rem;
}
@keyframes auth-callback-spin {
  to {
    transform: rotate(360deg);
  }
}

/* === Impersonation Banner === */
.impersonation-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  flex-wrap: wrap;
  z-index: 10000;
  background: #1a1a2e;
  color: #fff;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.impersonation-banner b {
  font-weight: 600;
}

.impersonation-banner__label {
  flex: 0 0 auto;
}

/* The dropdown is the only element allowed to shrink/grow with the bar. */
.impersonation-banner .admin-company-picker__select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 15rem;
  text-overflow: ellipsis;
}

.impersonation-mode-hint {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.impersonation-banner .impersonation-exit {
  flex: 0 0 auto;
}

/* Unified banner: idle state (admin browsing, no customer picked yet)
   gets a softer slate background; active state (admin actively
   previewing a customer) keeps the existing dark amber/orange. The
   visual difference reads as "neutral status" vs "scoped to a customer
   right now". One banner, one dropdown, two tones. */
.impersonation-banner.banner-idle {
  background: #2c3e50;
}
.impersonation-banner.banner-active {
  /* Inherits the existing dark-bg default — keep current colour so
     this commit doesn't change the active-mode look. */
}

.impersonation-banner__actor {
  flex: 0 1 auto;
  opacity: 0.85;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile: keep the bar to one tight row. Drop the verbose "preview only,
   writes are disabled" hint (writes-disabled is still enforced server-side;
   the wording just doesn't fit a phone) and tighten spacing so the
   dropdown + Exit stay on screen instead of wrapping into a 4-line block. */

.impersonation-exit {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.25rem 0.875rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background 0.15s;
}

.impersonation-exit:hover {
  background: rgba(255, 255, 255, 0.25);
}

.impersonation-switch {
  margin-left: 0.5rem;
  background: transparent;
  color: #fff;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.75rem;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.impersonation-switch:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Quick-nav links inside the view-as banner */
.impersonation-navlink {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.impersonation-navlink:hover {
  color: #fff;
  text-decoration: underline;
}

/* Admin "View as Customer" picker — appears for any authenticated SE
   admin when not in a PropelAuth impersonation session. Persists choice
   in localStorage; one dropdown change re-scopes catalog/orders/PLP. */
.admin-company-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #2c4a73;
  color: #fff;
  padding: 0.375rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.admin-company-picker__select {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.19rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  min-width: 15rem;
  cursor: pointer;
}

.admin-company-picker__select option {
  color: #1a1a2e;
  background: #fff;
}

body:has(.admin-company-picker) .site-header {
  top: 1.9375rem;
}

body:has(.admin-company-picker) {
  padding-top: 1.9375rem;
}

/* If both picker and impersonation banner exist (shouldn't, but defensive),
   stack them. Picker is hidden during impersonation by the Dart guard. */
body:has(.admin-company-picker):has(.impersonation-banner) .site-header {
  top: 4rem;
}

/* ====================================================================== */
/* SML Service Catalog + Tool Sales styles (restored after unified-merge) */
/* ====================================================================== */
/* "Explore it" frosted glass pill */
.explore-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  background: rgba(255, 255, 255, 0.29);
  border: 1px solid var(--color-gray-200, #ebebeb);
  border-radius: 0.75rem;
  padding: 0.8125rem 1.25rem 0.9375rem;
  font-weight: 700;
  font-size: var(--font-size-base, 1rem);
  line-height: 1.5rem;
  letter-spacing: 0;
  color: var(--color-gray-900, #1a1a1a);
  white-space: nowrap;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.category-card:hover .explore-pill {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  cursor: none; /* hide default cursor — replaced by bubble */
}

/* Bubble cursor (JS-driven, follows pointer) */
.bubble-cursor {
  position: fixed;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
  z-index: 9999;
}

.bubble-cursor.visible {
  opacity: 1;
}

/* Identifier + master-data chip strip under a component name. Slightly more
   air (2026-07-24 layout pass): the EVQ, weight and HS chips were touching
   the name block and each other on kit summaries. */
.cfg-comp-meta {
  display: flex;
  gap: 0.375rem 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.cfg-comp-meta .cfg-comp-material {
  font-family: monospace;
  font-size: 0.75rem;
  color: #64748b;
}

.cfg-comp-material {
  display: inline-block;
  font-size: 0.6875rem;
  color: #374151;
  background: #f3f4f6;
  padding: 1px 0.375rem;
  border-radius: 3px;
  font-family: "SiemensSans-Roman", monospace;
}

.cfg-comp-orderable {
  display: inline-block;
  font-size: 0.625rem;
  color: #166534;
  background: #dcfce7;
  padding: 1px 0.375rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cfg-comp-fixed {
  display: inline-block;
  font-size: 0.625rem;
  color: #57534e;
  background: #f5f5f4;
  padding: 1px 0.375rem;
  border-radius: 3px;
  font-weight: 500;
  cursor: help;
}

/* ==============================
   SOPHIE Region Selector
   ============================== */
/* margin-left:auto — right-aligns the badge now that the header tiles
   (which used to carry the auto margin) live in the filter area (SV1). */
.svc-region-selector {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.svc-region-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #374151;
  transition: all 0.15s;
  white-space: nowrap;
}

.svc-region-badge:hover {
  border-color: #1a1a1a;
  background: #faf5ff;
}

.svc-region-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 100;
  min-width: 20rem;
  max-width: 25rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.svc-region-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #6b7280;
  text-transform: uppercase;
}

.svc-region-clear-btn {
  font-size: 0.6875rem;
  color: #1a1a1a;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.svc-region-clear-btn:hover {
  text-decoration: underline;
}

.svc-region-search {
  width: 100%;
  padding: 0.625rem 1rem;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
  outline: none;
  background: #fafafa;
}

.svc-region-search:focus {
  background: white;
  border-bottom-color: #1a1a1a;
}

.svc-region-list {
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.svc-region-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  transition: background 0.1s;
}

.svc-region-option:hover {
  background: #f9fafb;
}

.svc-region-option.selected {
  background: #faf5ff;
  border-left: 3px solid #1a1a1a;
}

.svc-region-code {
  display: inline-block;
  min-width: 3rem;
  padding: 2px 0.375rem;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: monospace;
  text-align: center;
}

.svc-region-name {
  flex: 1;
  color: #1f2937;
}

.svc-region-currency {
  font-size: 0.6875rem;
  color: #6b7280;
  background: #fef3c7;
  padding: 1px 0.375rem;
  border-radius: 3px;
}

.svc-region-indicator {
  padding: 0.375rem 1rem;
  background: #faf5ff;
  border-bottom: 1px solid #e9d5ff;
  font-size: 0.8125rem;
  color: #333333;
  text-align: center;
}

/* Compact equipment strip */
.svc-equipment-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.svc-equipment-strip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* "View all my equipment" + "Scan a nameplate" anchors — un-styled by
 * default <a> rules so they fell back to user-agent blue. Adopt the core
 * link vocabulary: near-black text, underline on hover, no decoration
 * otherwise. Matches PDP "Back to Services" + checkout links. */
.svc-equipment-view-all,
.svc-scan-nameplate-btn {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
}
.svc-equipment-view-all:hover,
.svc-scan-nameplate-btn:hover {
  text-decoration: underline;
  color: #333333;
}

.svc-equipment-strip-cards {
  display: flex;
  gap: 0.75rem;
  /* Customers with 8+ asset_groups (e.g. multi-site utilities) overflowed
   * the strip horizontally with no scroll. Wrap by default so all chips
   * stay visible; horizontal scroll on narrow viewports only.
   * (Critique pass 2026-06-10 item 7 continued.) */
  flex-wrap: wrap;
}

.svc-equipment-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s;
  white-space: nowrap;
}

.svc-equipment-chip:hover {
  border-color: #1a1a1a;
}

.svc-equipment-chip-type {
  font-size: 0.625rem;
  font-weight: 600;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.svc-equipment-chip-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1f2937;
}

.svc-equipment-chip-loc {
  font-size: 0.6875rem;
  color: #9ca3af;
}

.svc-equipment-chip-remove {
  margin-left: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #9ca3af;
  cursor: pointer;
  transition:
    background-color 0.12s,
    color 0.12s;
}
.svc-equipment-chip-remove:hover {
  background-color: #fee2e2;
  color: #dc2626;
}
.svc-equipment-chip-remove:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 1px;
}

.svc-equipment-chip-restore {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 1px dashed #d1d5db;
  border-radius: 0.5rem;
  color: #6b7280;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.12s;
}
.svc-equipment-chip-restore:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
  background: #faf5ff;
}

/* ── SV2: GIS/AIS CATEGORY tiles back up top beside the SERVICES title —
   the PLP tile pattern (label + count), but as a WRAPPING flex group that
   is ONE flex item inside .product-header. Never .category-nav-scroll:
   the invisible inner scroller is exactly what clipped them pre-SV1. */
.svc-header-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  min-width: 0;
  padding-left: 1rem;
}
/* When the tiles carry the auto margin, the region badge must not ALSO
   carry one (two auto margins split the free space and strand the tiles
   mid-header) — it sits right after the tiles instead. */
.svc-header-tiles ~ .svc-region-selector {
  margin-left: 0.75rem;
}

/* ── S6: /services adopts the PLP filter rail verbatim ─────────────────
   The SV1/SV2 unified .svc-filter-area chip rows are retired — the page
   now emits the PLP's own classes (.filter-panel / .filter-facet /
   .filter-facet-pills / .filter-pill / .filters-btn) inside the same
   .catalog-layout two-column shell, so every rail rule above styles both
   pages identically. Deleted with the emitter per the class/CSS drift
   doctrine (.svc-filter-area / .svc-filter-group / .svc-filter-chips /
   .svc-fleet-toggle have no emitters left).

   One services-specific rule: the Filters button stays visible while the
   rail is open so it can act as the toggle (black = active, designer list
   Figma 18784-113375). The PLP's base rules hide .filters-btn once the
   rail is shown (its ranker layout treats the rail as persistent); the
   services rail is user-toggleable, and without this the open rail would
   have no close affordance (the X is display:none under
   .catalog-page--dyn). Higher specificity than the base
   `.filters-btn { display: none }`, so cascade order is irrelevant. */
.services-page .filters-btn {
  display: flex;
}

/* View mode toggle fix */
.svc-view-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  overflow: hidden;
  align-self: flex-start;
  margin-top: 0.25rem;
}

.svc-view-btn {
  display: flex !important;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.625rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: #6b7280;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}

.svc-view-btn.active {
  background: #242424;
  color: #fff;
}

.svc-view-btn:hover:not(.active) {
  background: #f3f4f6;
  color: #242424;
}

/* .svc-filter-bar rules removed (SV2): the family pills were promoted into
   a .svc-filter-group chip group inside .svc-filter-area — no emitter of
   .svc-filter-bar remains (class/CSS drift doctrine: delete with the
   emitter, don't let dead duplicates linger to win a future cascade). */

/* Search bar */
/* UB 7952463 — single body search bar; the serial/nameplate AssetPicker opens via this toggle. */
.svc-assetpicker-toggle {
  margin-top: 0.5rem;
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 0.7813rem;
  font-weight: 600;
  color: #0f766e;
  cursor: pointer;
  text-decoration: none;
}
.svc-assetpicker-toggle:hover {
  text-decoration: underline;
}
/* PO-BATCH-2 item 21: horizontal padding = the shared page gutter (was a
   fixed 1.5rem that put the boxed input ~5px left of the h1 stack). */
.svc-search-bar {
  padding: 0.75rem clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
  background: white;
  border-bottom: 1px solid #f3f4f6;
}

.svc-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 40rem;
  padding: 0.625rem 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.svc-search-input-wrap:focus-within {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12);
  background: white;
}

.svc-search-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.9375rem;
  outline: none;
  color: #1f2937;
}

.svc-search-input::placeholder {
  /* #9ca3af on white = 2.85:1 — fails WCAG AA. #6b7280 = 4.79:1, passes. */
  color: #6b7280;
}

.svc-search-clear {
  display: flex;
  align-items: center;
  padding: 2px;
  background: #e5e7eb;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.svc-search-clear:hover {
  background: #d1d5db;
}

/* Nameplate scan — camera icon INSIDE the one unified search input (no separate finder). */
.svc-search-nameplate {
  display: flex;
  align-items: center;
  padding: 2px;
  color: #6b7280;
  border-radius: 0.375rem;
  transition:
    color 0.15s,
    background 0.15s;
}
.svc-search-nameplate:hover {
  color: #641e8c;
  background: #f3e8ff;
}

/* Serial-mode hint — appears the moment the typed pattern matches a serial (vs a keyword), so the user
   knows the input switched from "filter packages" to "find my equipment by serial". */
.svc-search-mode-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: #641e8c;
  background: #f3e8ff;
  border-radius: 999px;
}

/* Layer-1 category cards — our own custom equipment-group filter (GIS/AIS/Transformer…) with counts.
   Card style mirrors the PLP category tiles: label + count, hover lift, purple active state. */
.svc-category-cards {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem 0.25rem;
  overflow-x: auto;
}
.svc-category-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 8.75rem;
  padding: 0.875rem 1.125rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.svc-category-card:hover {
  border-color: #c4b5fd;
  box-shadow: 0 2px 0.5rem rgba(100, 30, 140, 0.08);
}
.svc-category-card.active {
  border-color: #641e8c;
  background: #faf5ff;
  box-shadow: 0 2px 0.625rem rgba(100, 30, 140, 0.12);
}
.svc-category-card-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2937;
}
.svc-category-card.active .svc-category-card-label {
  color: #641e8c;
}
.svc-category-card-count {
  font-size: 1.375rem;
  font-weight: 700;
  color: #6b7280;
  text-align: right;
}
.svc-category-card.active .svc-category-card-count {
  color: #641e8c;
}

/* Headless AssetPicker — kept MOUNTED so its serial-search event listener stays alive, but its UI is
   fully hidden (it's now a resolver, not a second search bar). */
.svc-assetpicker-headless {
  display: none;
}

/* Fleet summary — one collapsed line replacing the MY EQUIPMENT chip strip. */
.svc-fleet-summary {
  padding: 0.5rem 1.5rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.svc-fleet-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 0.8125rem;
  cursor: pointer;
  border-radius: 0.375rem;
  transition:
    background 0.15s,
    color 0.15s;
}
.svc-fleet-summary-toggle:hover {
  background: #f3f4f6;
  color: #374151;
}
.svc-fleet-summary-text {
  font-weight: 500;
}
.svc-fleet-summary-chevron {
  display: inline-flex;
  transition: transform 0.15s;
}
.svc-fleet-summary-chevron.open {
  transform: rotate(180deg);
}

/* Maintenance level pills */
.svc-level-filter {
  display: flex;
  gap: 0.25rem;
  margin-right: 0.75rem;
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Quote success banner */
.svc-quote-success {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}

.svc-quote-success-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #16a34a;
}

.svc-quote-success-id {
  display: block;
  font-size: 0.75rem;
  color: #4b5563;
  font-family: monospace;
}

/* ================================================================
   CUSTOM: SML SERVICES + TOOL SALES + CONFIGURATOR
   ================================================================ */

/* Services PLP */
.svc-equipment-section {
  padding: 2rem 2.5rem;
  background: #f9fafb;
}

.svc-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.svc-equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
}

.svc-equipment-card .product-text-wrapper {
  padding: 1.25rem 1.5rem;
  gap: 0.5rem;
}

.svc-view-btn {
  height: 2.25rem !important;
  font-size: 0.75rem !important;
  padding: 0 1rem !important;
}

/* (.svc-filter-bar / .svc-filter-bar--wrap deleted — SV2, see the note at
   the first .svc-filter-bar site. UB 7878551's "show ALL families" survives
   as the Family chip group in .svc-filter-area.) */

.svc-image-placeholder,
.cfg-service-image {
  background: #f5f5f5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.svc-placeholder-icon {
  text-align: center;
  color: #c2c2c2;
}

.svc-browse-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: #242424;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Configurator PDP */
.cfg-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25rem;
}

.cfg-error {
  text-align: center;
  padding: 5rem 2.5rem;
}

.cfg-left-col {
  overflow-y: auto;
}

.cfg-components-section {
  padding: 1.5rem 2.5rem;
}

.cfg-section-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.cfg-comp-unit-price {
  font-size: 0.8125rem;
  color: #6b6b6b;
  width: 5rem;
  text-align: right;
}

.cfg-quote-result {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #dcfce7;
  border: 1px solid #22c55e;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #166534;
}

.cfg-scaling-hint {
  font-size: 0.75rem;
  color: #6b6b6b;
  font-style: italic;
}

/* Tool Sales */
.tool-sales-page {
  min-height: 100vh;
  background: #fff;
}
/* room for the fixed action bar — the REQUEST SUMMARY must never sit under it */
.tool-sales-page-configure {
  padding-bottom: 8.5rem;
}
/* last card row must be scrollable clear of the floating Feedback FAB */
.tool-sales-browse {
  padding-bottom: 6rem;
}
/* SAP multi-level BOM indentation on the tool cards */
.tool-bom-level-2 {
  padding-left: 0.875rem;
}
.tool-bom-level-3 {
  padding-left: 1.75rem;
}
.tool-bom-level-4 {
  padding-left: 2.625rem;
}
/* B4: flat white rows + hairline separators on this page (vs the configurator grey) */
.tool-sales-page .component-row {
  background: #fff;
  border-radius: 0;
  border-bottom: 1px solid #f2f2f2;
}

.tool-sales-page.loading,
.tool-sales-page.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.tool-sales-stepper {
  display: flex;
  gap: 0;
  padding: 1.25rem 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
  align-items: center;
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: #aaa;
  font-size: 0.875rem;
  position: relative;
  padding-right: 2rem;
}

.step-indicator:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1px;
  background: #d0d0d0;
}

.step-indicator .step-number {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  background: #fff;
  color: #aaa;
  flex-shrink: 0;
  transition: all 0.2s;
}

.step-indicator .step-label {
  font-weight: 500;
  color: #aaa;
  white-space: nowrap;
  transition: color 0.2s;
}

.step-indicator.active .step-number {
  background: #242424;
  border-color: #242424;
  color: #fff;
}

.step-indicator.active .step-label {
  color: #242424;
  font-weight: 700;
}

.step-indicator.done .step-number {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.step-indicator.done .step-label {
  color: #555;
}

.tool-sales-browse {
  padding: 0 2.5rem 5rem;
}

.tool-sales-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.tool-sales-header-title {
  flex: 1 1 auto;
  min-width: 15rem;
}

.tool-sales-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #242424;
  margin: 0;
}

/* Inline region pills on the catalog title row (SML-style header). */
.tool-sales-adder-inline {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tool-sales-adder-inline .tool-sales-adder-options-row {
  gap: 0.375rem;
}

.tool-sales-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.tool-sales-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #242424;
  margin: 0;
}

.tool-sales-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tool-sales-filters .pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 1.5rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #1a1a1a;
  transition: all 0.15s;
  font-family: inherit;
}

.tool-sales-filters .pill:hover {
  border-color: #999;
  background: #f5f5f5;
}

.tool-sales-filters .pill.active {
  background: #242424;
  border-color: #242424;
  color: #fff;
}

.tool-sales-search {
  margin-bottom: 1rem;
}

.tool-sales-search .underline-input,
.underline-input {
  width: 100%;
  padding: 0.625rem 0;
  border: none;
  border-bottom: 1px solid #d0d0d0;
  font-size: 0.875rem;
  outline: none;
  background: transparent;
}

.tool-sales-count {
  font-size: 0.875rem;
  color: #6b6b6b;
  margin-bottom: 1rem;
}

/* ─── Business-unit step 0 + locked unit chip (2026-07) ────────────── */
.tool-sales-unit-step {
  display: flex;
  justify-content: center;
  padding: 3rem 0 4rem;
}
.tool-sales-unit-card {
  /* Flat, whitespace-led (de-noise pass 2026-07) — no box around step 0. */
  max-width: 35rem;
  width: 100%;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.tool-sales-unit-card h1 {
  font-size: 1.5rem;
  margin: 0;
}
.tool-sales-unit-actions {
  display: flex;
  justify-content: flex-end;
}
.review-submit-error {
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #dc3545;
  border-radius: 8px;
  background: #fdf2f3;
  color: #b02a37;
  font-size: 0.88rem;
}

/* ─── Adder banner on Configure step ───────────────────────────────── */
.tool-sales-adder-banner-options,
.tool-sales-adder-options-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tool-sales-region-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: #92400e;
  margin-top: 0.5rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-sales-ps-hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.review-submit-recap {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  font-size: 0.875rem;
  color: #374151;
}

.review-submit-recap strong {
  font-weight: 700;
  color: #111;
}

.review-submit-recap .recap-total {
  margin-left: auto;
  font-size: 1.125rem;
  font-weight: 700;
  color: #242424;
}

.tool-sales-selection-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 0.75rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.08);
}

.selection-total {
  font-size: 1.125rem;
  font-weight: 700;
  color: #242424;
  margin-left: auto;
}

.tool-sales-configure {
  padding: 0 2.5rem 3.75rem;
}

.config-field {
  margin-bottom: 1rem;
}

.config-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #242424;
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.config-hint {
  font-size: 0.75rem;
  color: #6b6b6b;
  margin-top: 0.25rem;
  font-style: italic;
}

.order-totals {
  margin-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}

.tool-sales-review {
  padding: 0 2.5rem 6rem;
}

.review-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.review-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.review-total {
  text-align: right;
}

.review-total-label {
  font-size: 0.8125rem;
  color: #6b6b6b;
  display: block;
}

.review-total-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #242424;
}

.boq-total td {
  border-top: 2px solid #242424;
  font-weight: 700;
  font-size: 0.875rem;
  padding-top: 0.75rem;
}

.review-actions {
  text-align: center;
  padding: 1.5rem 0;
}

.tool-sales-success {
  padding: 3.75rem 2.5rem;
  text-align: center;
}

.success-card {
  max-width: 31.25rem;
  margin: 0 auto;
}

.success-card h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #242424;
  margin-bottom: 0.5rem;
}

.success-ref {
  font-size: 1.125rem;
  font-weight: 600;
  color: #242424;
  font-family: monospace;
}

.success-total {
  font-size: 1rem;
  color: #6b6b6b;
  margin-bottom: 1.5rem;
}

.success-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.mpt-hero-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #009999;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}

/* Package Documents list (configurator page) */
.pkg-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pkg-doc-row {
  margin: 0;
}
.pkg-doc-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-gray-200, #ebebeb);
  border-radius: 0.5rem;
  background: var(--color-white, #fff);
  color: var(--color-gray-900, #1a1a1a);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  /* rendered as a <button> (XHR download, UB#7994153) — reset UA styles */
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pkg-doc-link:hover {
  border-color: var(--color-teal-500, #009999);
  background: var(--color-gray-50, #fafafa);
}
.pkg-doc-link svg {
  flex-shrink: 0;
  color: var(--color-teal-500, #009999);
}
.pkg-doc-title {
  flex: 1;
  font-weight: 500;
}
.pkg-doc-type {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-gray-500, #737373);
  background: var(--color-gray-100, #f5f5f5);
  padding: 2px 0.5rem;
  border-radius: 0.25rem;
}

/* ────────────────────────────────────────────────────── */
/* Right-column stack: summary + timeline                  */
/* ────────────────────────────────────────────────────── */
.quote-right-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1.5rem;
  align-self: start;
}
.quote-right-column .quote-summary {
  position: static;
}

/* Timeline panel (magic-link + profile detail) */
.quote-timeline {
  border: 1px solid #ebebeb;
  padding: 2rem;
  background: #fff;
}
.quote-timeline h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #242424;
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
}
.quote-timeline-list {
  display: flex;
  flex-direction: column;
}
.quote-timeline-step {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.875rem;
  min-height: 3.25rem;
}
.quote-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.25rem;
}
.quote-timeline-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #e5e5e5;
  border: 2px solid #e5e5e5;
  flex-shrink: 0;
}
.quote-timeline-bar {
  flex: 1;
  width: 2px;
  background: #ebebeb;
  margin-top: 0.25rem;
}
.quote-timeline-step.done .quote-timeline-dot {
  background: #641e8c;
  border-color: #641e8c;
}
.quote-timeline-step.done .quote-timeline-bar {
  background: #641e8c;
}
.quote-timeline-step.current .quote-timeline-dot {
  background: #fff;
  border-color: #641e8c;
  box-shadow: 0 0 0 0.25rem rgba(100, 30, 140, 0.12);
}
.quote-timeline-step.current .quote-timeline-bar {
  background: linear-gradient(to bottom, #641e8c 0%, #ebebeb 100%);
}
.quote-timeline-body {
  padding-bottom: 1.125rem;
}
.quote-timeline-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #242424;
  letter-spacing: 0.02em;
}
.quote-timeline-step.pending .quote-timeline-label {
  color: #9b9b9b;
  font-weight: 500;
}
.quote-timeline-date {
  font-size: 0.75rem;
  color: #6b6b6b;
  margin-top: 2px;
}
.quote-timeline-step.current .quote-timeline-date {
  color: #641e8c;
  font-weight: 600;
}
.quote-timeline-actor {
  font-size: 0.6875rem;
  color: #9b9b9b;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Profile-variant: subtle back link at top of detail page */
.quote-page-profile .quote-header {
  background: transparent;
  padding: 1rem 2.5rem 0;
  margin-bottom: 0;
  border-bottom: none;
}
.quote-page-profile .quote-back-link {
  font-size: 0.8125rem;
  color: #641e8c;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.quote-page-profile .quote-back-link:hover {
  text-decoration: underline;
}
.quote-summary-hint {
  font-size: 0.75rem;
  color: #6b6b6b;
  margin: 0;
  line-height: 1.5;
}

/* ── Quote detail: align sections to order-detail-rail rhythm ── */
/* Each section in the right rail gets a top border + padding to
   match the order accordion separators. */
.quote-page-profile .cart-panel-summary.order-detail-rail > .order-section {
  padding-top: clamp(1rem, calc(1.5 * var(--vwx)), 1.5rem);
  border-top: 1px solid #e8e8e8;
}
/* Hint text ("A Siemens Energy representative…") — equal breathing room
   above and below, independent of the flex gap. */
.quote-page-profile .order-summary-content .order-accordion-text {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
/* Internal section: label spacing + row gap matching order-summary-refs */
.quote-page-profile .quote-internal .order-section-label {
  margin-bottom: 1rem;
}
.quote-page-profile .quote-internal .order-summary-ref-row + .order-summary-ref-row {
  margin-top: 1.5rem;
}
/* Timeline in profile context: no standalone border/padding */
.quote-page-profile .quote-timeline {
  border: none;
  padding: 0;
  background: transparent;
}
/* Bottom padding so the sticky "Open the offer" bar clears the footer,
   same breathing room as the order-detail "Reorder" bar. */
.quote-page-profile {
  padding-bottom: 5rem;
}
/* Accepted banner matches order-confirmed-banner */
.quote-accepted-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #166534;
}

/* ────────────────────────────────────────────────────── */
/* Profile → My Quotes list                                */
/* ────────────────────────────────────────────────────── */
.my-quotes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.my-quotes-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid #ebebeb;
  overflow-x: auto;
  padding-bottom: 2px;
}
.my-quotes-tab {
  background: transparent;
  border: none;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b6b6b;
  cursor: pointer;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  font-family: inherit;
}
.my-quotes-tab:hover {
  color: #242424;
}
.my-quotes-tab.active {
  color: #641e8c;
  border-bottom-color: #641e8c;
}

.my-quotes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.my-quote-card {
  border: 1px solid #ebebeb;
  background: #fff;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.my-quote-card:hover {
  border-color: #641e8c;
  box-shadow: 0 2px 0.5rem rgba(100, 30, 140, 0.08);
}
.my-quote-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.my-quote-card-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.my-quote-card-ref {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #242424;
  letter-spacing: 0.02em;
}
.my-quote-card-customer {
  font-size: 0.8125rem;
  color: #6b6b6b;
}
.my-quote-card-status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.my-quote-status-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #242424;
  letter-spacing: 0.02em;
}
.my-quote-card-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}
.my-quote-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #641e8c;
  background: #f4eaff;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  letter-spacing: 0.02em;
}
.my-quote-card-date {
  font-size: 0.75rem;
  color: #6b6b6b;
  margin-left: auto;
}
.my-quote-card-footer {
  border-top: 1px solid #f5f5f5;
  padding-top: 0.625rem;
  font-size: 0.75rem;
}
.my-quote-card-link {
  color: #641e8c;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.my-quotes-empty {
  text-align: center;
  padding: 3.75rem 1.5rem;
  border: 1px dashed #ebebeb;
}
.my-quotes-empty h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.375rem;
  color: #242424;
}
.my-quotes-empty p {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin: 0 0 1rem;
}
.my-quotes-empty .quote-btn-primary {
  display: inline-block;
  text-decoration: none;
}

/* === Embed mode: chromeless storefront for native app webviews ===
   Activated via ?embed=1 (set on <html class="embedded"> by an inline script
   in main.server.dart head[]). Hides storefront chrome so the page can be
   embedded inside a Flutter webview / iframe / kiosk shell that provides
   its own navigation. */
html.embedded .site-header,
html.embedded .site-footer,
html.embedded .env-banner,
html.embedded .assisted-selling-banner {
  display: none !important;
}

/* Login overlay/sidebar must never render in embed mode. The header gate
   already drops the LoginOverlay component, but we also kill any
   .nav-panel that shows the login UI as belt-and-suspenders: without
   the surrounding desktop chrome the panel is `position: fixed` and
   covers the entire webview viewport, which is exactly what mobile
   testers reported. Native chrome handles login flows. */
html.embedded .nav-panel--login,
html.embedded .login-overlay,
html.embedded .login-overlay-backdrop {
  display: none !important;
}

html.embedded .app-shell > .main-content {
  padding-top: 0;
}

html.embedded .app-shell > .main-content > .hero-section:first-child,
html.embedded .app-shell > .main-content > * > .hero-section:first-child {
  margin-top: 0;
}

/* Embed-mode personalized feed (latest quotes/orders/assets). */
.home-page--embed {
  padding: 1.5rem 1.25rem 2.5rem;
  max-width: 45rem;
  margin: 0 auto;
}

.embed-feed--loading {
  display: flex;
  justify-content: center;
  padding: 3.75rem 0;
}

.embed-feed-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #ebebeb;
  border-top-color: #641e8c;
  border-radius: 50%;
  animation: embed-spin 0.8s linear infinite;
}

@keyframes embed-spin {
  to {
    transform: rotate(360deg);
  }
}

.embed-feed-greeting {
  font-size: 1.375rem;
  font-weight: 600;
  color: #242424;
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

.embed-feed-section {
  margin-bottom: 2rem;
}

.embed-feed-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.embed-feed-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #242424;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.embed-feed-section-link {
  font-size: 0.8125rem;
  color: #641e8c;
  text-decoration: none;
  font-weight: 500;
}

.embed-feed-empty {
  font-size: 0.875rem;
  color: #999;
  margin: 0;
  padding: 1rem;
  border: 1px dashed #ebebeb;
  border-radius: 0.25rem;
  text-align: center;
}

.embed-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.embed-feed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.embed-feed-row:hover {
  background: #fff;
  border-color: #641e8c;
}

.embed-feed-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.embed-feed-row-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #242424;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.embed-feed-row-meta {
  font-size: 0.75rem;
  color: #6b6b6b;
}

.embed-feed-row-date {
  font-size: 0.75rem;
  color: #999;
  flex-shrink: 0;
}

/* Shared toast notification — used via the Toast component
   (lib/components/common/toast.dart). That component is always mounted —
   never conditionally added/removed from its parent's children list — and
   toggles visibility purely through `.is-visible`. Jaspr diffs children
   positionally; add/remove at a fixed spot in a page's child list shifts
   every later sibling's index, which on the PDP was observed to remount
   (and visibly flash) the product gallery each time the toast opened or
   closed. Keep it hidden-by-default/class-toggled, not include/exclude, in
   every call site. Fixed-position so it doesn't shift page layout. */
.app-toast {
  display: none;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.18);
  font-size: 0.9375rem;
  font-weight: 500;
  z-index: 9999;
  /* The message now carries a PRODUCT TITLE ("<Title> — added to cart", from
     the PLP cards), not just the fixed "Added to cart" the PDP sends. Cap the
     width and let the name wrap: industrial part names run long and an
     uncapped fixed-position flex row would stretch most of the viewport. */
  max-width: min(28rem, calc(100vw - 3rem));
}
/* Wrap the name instead of ellipsing it — a truncated part number is worse
   than two lines. min-width:0 lets the span actually shrink inside the flex
   row; the "View cart" link keeps its own nowrap. */
.app-toast > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.app-toast.is-visible {
  display: flex;
  animation: app-toast-in 0.18s ease-out;
}
/* Success is the brand dark, not green (PO 2026-09-12): the same #242424 the
   PDP CTA and the PLP basket button already use, so a confirmation reads as
   part of the shop's own chrome. Failure stays red — it is the one state that
   should break out of the palette. */
.app-toast--success {
  background: #242424;
}
.app-toast--error {
  background: #c62828;
}
.app-toast svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}
@keyframes app-toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Tool Sales Configure Step — overrides on top of .product-detail PDP layout === */
/* The PDP layout fills viewport with overflow:hidden + nested scrolls.
   Override at the .product-page level so the page scrolls naturally,
   and the configure form is fully visible. */
.tool-sales-page-configure {
  height: auto !important;
  min-height: calc(100vh - var(--header-height));
  overflow: visible !important;
  display: block !important;
  padding-bottom: 6.25rem;
}
.tool-sales-page-configure .product-detail {
  overflow: visible !important;
  min-height: 0 !important;
  flex: none !important;
  align-items: start !important;
  height: auto !important;
}
.tool-sales-page-configure .product-gallery-container,
.tool-sales-page-configure .product-info-container {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.tool-sales-page-configure .pdp-tab-content {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  flex: none !important;
}
/* Sticky bottom bar inside .product-info-container shouldn't be sticky here
   — page-level bar handles it */
.tool-sales-page-configure .pdp-bottom-bar {
  display: none !important;
}
.tool-sales-configure-left .pdp-left-info,
.tool-sales-configure-left .pdp-product-title {
  padding: 0 !important;
}
.tool-sales-configure-tab {
  border-bottom: 2px solid #1b1534;
  margin-bottom: 1rem;
}
.tool-sales-configure-tab-active {
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1b1534;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tool-sales-configure-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tool-sales-configure-form .config-options-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tool-sales-configure-form .config-option {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.tool-sales-configure-form .config-field-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1b1534;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tool-sales-configure-form .config-select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease;
}
.tool-sales-configure-form .config-select:focus {
  border-color: #1b1534;
}
.tool-sales-configure-form .config-select::placeholder {
  color: #c2c2c2;
}

/* Sticky page-level action bar. Pinned to bottom of viewport above the
 * Userback / feedback widgets (which use very high z-indexes). The
 * page itself adds bottom padding so content doesn't hide under it. */
.tool-sales-configure-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  /* right clearance so the floating Feedback FAB never covers the CTA */
  padding: 1rem 13rem 1rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.06);
  /* Above Userback (~2147483600) and feedback launcher (z 90). */
  z-index: 2147483647;
}
/* Push the page content up so nothing renders under the fixed action bar. */
.tool-sales-page-configure {
  padding-bottom: 6.25rem;
}
.tool-sales-configure-actions-total {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}
.tool-sales-configure-actions-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tool-sales-configure-actions-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: #1b1534;
}
.tool-sales-configure-actions .btn {
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.tool-sales-configure-actions .btn-secondary {
  background: #fff;
  color: #1b1534;
  border-color: #d0d0d0;
}
.tool-sales-configure-actions .btn-secondary:hover {
  background: #f5f5f5;
}
.tool-sales-configure-actions .btn-primary {
  background: #1b1534;
  color: #fff;
}
.tool-sales-configure-actions .btn-primary:hover:not([disabled]) {
  background: #2c2354;
}
.tool-sales-configure-actions .btn-primary[disabled] {
  background: #c0c0c0;
  cursor: not-allowed;
}

/* Tier pricing matrix inside Commercial Information drawer
   (Magento-parity: per-incoterm × per-qty-tier table from product.metadata.tier_prices) */
.pdp-spec-section {
  display: block;
}
.pdp-tier-prices-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem 0;
  color: #2c2c2c;
}
.pdp-tier-prices-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  /* Fixed layout: split width evenly between the 4 cols so the price
     cells get enough room for "14.720,00 €" without wrapping into
     two lines (which produced the visible overlap). */
  table-layout: fixed;
}
.pdp-tier-prices-table th,
.pdp-tier-prices-table td {
  padding: 0.375rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 1.3;
}
.pdp-tier-prices-table th {
  font-weight: 600;
  background: #efefef;
  color: #4a4a4a;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.pdp-tier-prices-table .pdp-tier-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Column widths: Incoterm = narrow · Delivery to = wide · numbers = compact */
.pdp-tier-prices-table th:nth-child(1),
.pdp-tier-prices-table td:nth-child(1) {
  width: 14%;
}
.pdp-tier-prices-table th:nth-child(2),
.pdp-tier-prices-table td:nth-child(2) {
  width: 38%;
}
.pdp-tier-prices-table th:nth-child(3),
.pdp-tier-prices-table td:nth-child(3) {
  width: 24%;
}
.pdp-tier-prices-table th:nth-child(4),
.pdp-tier-prices-table td:nth-child(4) {
  width: 24%;
}
.pdp-tier-prices-table tbody tr:last-child td {
  border-bottom: none;
}

/* PDP left-column description under the title + lead-time chip */
.pdp-title-description {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0.75rem 0 0 0;
  max-width: 60ch;
  /* PO-BATCH-2 item 22: the under-image description is the 2-line SHORT
     teaser above the attribute chips (PLP language) — long-form prose
     lives in the right rail / About. Rich variant keeps its own flow. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The rich (Lexical) variant is a formatted body, not a teaser — no clamp. */
.pdp-title-description--rich {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Rich variant: the single description home now renders Payload's formatted
   Lexical body (headings / lists / bold) under the image, replacing the plain
   summary. Style its child HTML so it reads as a proper description block
   rather than a wall of text, while keeping the same measure + tone. */
.pdp-title-description--rich {
  max-width: 70ch;
}
.pdp-title-description--rich h2,
.pdp-title-description--rich h3,
.pdp-title-description--rich h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 1rem 0 0.375rem 0;
}
.pdp-title-description--rich p {
  margin: 0 0 0.625rem 0;
}
.pdp-title-description--rich ul,
.pdp-title-description--rich ol {
  margin: 0.5rem 0 0.75rem 0;
  padding-left: 1.25rem;
}
.pdp-title-description--rich li {
  margin: 0.19rem 0;
}
.pdp-title-description--rich strong {
  font-weight: 600;
  color: #1a1a1a;
}
/* MMD-style short-description brief (metadata.short_description) in the
   summary slot; full description stays in the ABOUT/specs accordion.
   Styled after the Figma PDP SPECIFICATIONS card (GT Shop Desktop node
   16636:338680): #f6f6f6 rounded panel, rows of two equal LEFT-aligned
   columns — label #6b6b6b / value black, Text/Roman/Large 16px lh 24px
   (no bold), hairline dividers between rows with 24px rhythm. */
.pdp-short-desc {
  display: flex;
  flex-direction: column;
  background: #f6f6f6;
  border-radius: 1.4375rem;
  padding: 1rem 1.5rem;
  margin: 1rem 0 0 0;
  width: 100%;
}
.pdp-short-desc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.pdp-short-desc-row + .pdp-short-desc-row {
  border-top: 1px solid #e3e3e3;
}
.pdp-short-desc-label {
  flex: 1 0 0;
  min-width: 0;
  color: #6b6b6b;
}
.pdp-short-desc-value {
  flex: 1 0 0;
  min-width: 0;
  color: #000;
  font-weight: 400;
  text-align: left;
  overflow-wrap: anywhere;
}
/* Free-text note rows (no label parsed) — value spans the full row. */
.pdp-short-desc-row--note .pdp-short-desc-value {
  flex: 1 1 100%;
}

.pdp-leadtime-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  background: #f0f7f2;
  color: #2e7d4f;
  font-size: 0.875rem;
  font-weight: 600;
}

/* SHOP-539 — Brazil spare-part voltage class / equipment model confirmation
   (Polo Completo template). Warm/amber tone reads as "action needed", not an
   error state — distinct from the neutral lead-time chip above it. */
/* Tony design review 2026-07-28: was a cream/amber alert box with custom
   brown checkboxes — off the house palette and read as a warning, not a
   form. Now a plain neutral card holding standard config-question selects
   (the .brazil-spec-confirm-row/-box/-text rules below serve no markup
   anymore but are kept one release for cached-JS safety). */
.brazil-spec-confirm-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #ffffff;
}

.brazil-spec-confirm-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #374151;
}

.brazil-spec-field .config-select {
  width: 100%;
}

/* The cream/amber tick-card rules that used to live here
   (.brazil-spec-confirm-row / -box / -text / -label / -value, borders
   #e5cd97 / #b8944a) were removed in Tony's 2026-07-28 design review: the
   gate is now standard .config-select form fields inside the neutral panel
   above, and no Dart referenced those classes any more. */

/* ── PDP incoterm + tier-price configurator ──────────────────────── */
.pdp-incoterm-config {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.pdp-config-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 0.5rem;
}
.pdp-incoterm-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.pdp-incoterm-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.625rem;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.pdp-incoterm-opt:hover {
  border-color: #c8c8c8;
  background: #fafafa;
}
.pdp-incoterm-opt.selected {
  border-color: #641e8c;
  background: #faf7fc;
  box-shadow: 0 0 0 1px #641e8c inset;
}
.pdp-incoterm-opt__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp-incoterm-opt__term {
  font-size: 0.875rem;
  font-weight: 700;
  color: #242424;
}
.pdp-incoterm-opt__loc {
  font-size: 0.8125rem;
  color: #6b6b6b;
}
.pdp-incoterm-opt__price {
  font-size: 1rem;
  font-weight: 700;
  color: #242424;
  white-space: nowrap;
}
.pdp-incoterm-opt__unit {
  font-size: 0.75rem;
  font-weight: 400;
  color: #9e9e9e;
}
.pdp-incoterm-qtyrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.pdp-incoterm-qtyrow .pdp-config-section-label {
  margin-bottom: 0;
}
.pdp-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d4d4d4;
  border-radius: 0.5rem;
  overflow: hidden;
}
.pdp-qty-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 1.125rem;
  color: #242424;
  line-height: 1;
}
.pdp-qty-btn:hover {
  background: #f0f0f0;
}
.pdp-qty-value {
  min-width: 2.75rem;
  width: 2.75rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  color: #242424;
  -moz-appearance: textfield;
}
.pdp-qty-value::-webkit-inner-spin-button,
.pdp-qty-value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Bottom-bar variant — taller to match the 52px cart button */
.pdp-qty-stepper--bar {
  height: 3.25rem;
  border-radius: 0.75rem;
}
.pdp-qty-stepper--bar .pdp-qty-btn {
  width: 2.75rem;
  height: 3.25rem;
  font-size: 1.25rem;
}
.pdp-qty-stepper--bar .pdp-qty-value {
  min-width: 3rem;
  width: 3rem;
  font-size: 1rem;
}
.pdp-qty-discount-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #2e7d4f;
  background: #f0f7f2;
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
}
.pdp-qty-discount-hint {
  font-size: 0.75rem;
  color: #9e9e9e;
}
.pdp-incoterm-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid #ececec;
}
.pdp-incoterm-total__label {
  font-size: 0.8125rem;
  color: #6b6b6b;
}
.pdp-incoterm-total__value {
  font-size: 0.9375rem;
  color: #242424;
  font-variant-numeric: tabular-nums;
}
.pdp-incoterm-total__value strong {
  font-size: 1.125rem;
  color: #641e8c;
}

/* ── Catalog grid/list view toggle ───────────────────────────────── */
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.75rem;
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.view-toggle__divider {
  width: 1px;
  height: 1rem;
  background: #f2f2f2;
  flex-shrink: 0;
}
.view-toggle__btn:hover svg path {
  fill: #262626;
}
.view-toggle__btn.active svg path {
  fill: #262626;
}
.view-toggle__btn svg path {
  fill: #9e9e9e;
  transition: fill 0.15s;
}

/* ── List view — Figma row spec (18835-32413 product row, 18786-121302
   PLP @1280). Each row is its OWN hairline-bordered card ≈6rem tall,
   radius 0.75rem, separated by a small gap (not joined by row dividers).
   Columns: [thumb 4rem] | [eyebrow + title + config chips] |
   [description teaser ≤3 lines] | [Lead time] | [Base price] | [CTA].
   Single source of truth: applies to BOTH the dyn and legacy catalog —
   the old .catalog-page--dyn list overrides were folded in here.
   Fluid: the row flex-wraps on narrow containers (footer drops under the
   text); the description column hides via @container, not width media
   queries. px only for hairlines. ── */
.product-list--list {
  display: flex !important;
  flex-direction: column;
  gap: 0.5rem !important;
}
.product-list--list .product-card-link {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 6rem;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  border: 1px solid #e3e3e3;
  border-radius: 1.5rem;
  background: #fff;
  /* Container for the description-column visibility query below. */
  container-type: inline-size;
}
.product-list--list .product-card-link:hover {
  transform: none;
  box-shadow: none;
  border-color: #b6b6b6;
  background: #fff;
}
/* Image: fixed small square on the left (frame thumb ≈64px). */
.product-list:not(.product-list--list) .product-image-wrapper {
  border: 1rem solid white;
}
.product-list--list .product-image-link,
.product-list--list .product-image-wrapper {
  width: 5.625rem !important;
  height: 5.625rem !important;
  min-width: 5.625rem;
  flex-shrink: 0;
  border-radius: 0;
}
.product-list--list .product-img {
  object-fit: contain;
}
.product-list--list .gallery-indicator-bar {
  display: none;
}
/* Text area: title block + description side by side. */
.product-list--list .product-text-link {
  flex: 1 1 18rem;
  min-width: 0;
}
.product-list--list .product-text-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  padding: 0;
}
.product-list--list .product-type-title {
  flex: 1 1 20%;
  min-width: 0;
}
/* Middle column (Figma 18900-32011 row anatomy): attribute chips on top,
   ≤3-line description teaser under them — one column between the title
   block and the lead-time/price footer. */
.product-list--list .product-chips-desc {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 2 1 50%;
  min-width: 0;
}
/* Attribute chip row — pills carry over from the grid card; single
   wrap-row rhythm, capped at one chip line in the slim list row.
   Gemini parity: the frame's Attribute pills carry more internal
   padding than the grid card's compact chips. */
.product-list--list .product-subtitles {
  gap: 0.25rem;
  min-height: 0;
  max-height: 1.375rem;
  align-items: center;
  position: relative;
}

.product-offer-number.product-sap-number::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 7.5rem;
  height: 100%;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
  pointer-events: none;
}
.product-offer-number.product-sap-number {
  position: relative;
  overflow: hidden;
}
/* Frame (18900-32011): Lead time / Price VALUES are the row's loudest
   text — noticeably larger than body; meta line a notch more present. */
.product-list--list .product-item-offer {
  font-size: 0.8125rem;
}
.product-list--list .product-spec {
  flex-direction: row;
  align-items: baseline;
  gap: 0.3125rem;
}
.product-list--list .product-spec-label {
  font-size: 0.5625rem;
}
/* Description teaser: ≤3 lines with ellipsis (frame). */
.product-list--list .product-info-text {
  min-width: 0;
  margin: 0;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Hide the chips+description column when the row gets too narrow to give
   it a readable (~14rem) share — container query on the row card itself,
   so it's correct wherever the list is embedded (rail open/closed, any
   viewport). @container is the sanctioned no-media-query tool. */
@container (max-width: 48rem) {
  .product-list--list .product-chips-desc {
    display: none;
  }
}
/* Footer (lead time + price + CTA) pinned to the right; wraps under the
   text block on narrow containers (flex-wrap on the row). */
.product-list--list .product-card-footer {
  margin-left: auto;
  margin-top: 0;
  flex-shrink: 0;
  align-items: center;
  text-align: right;
  border-top: none;
  padding-top: 0;
  min-width: 0;
}
.product-list--list .product-card-footer--bar {
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  padding: 0;
}
/* Frame list order is Lead time | divider | Base price (the dyn GRID
   parity pass flipped .product-lead-price to price-first; restore the
   frame's list order here at higher specificity). Labels sit right-
   aligned over bold values in both columns. */
.catalog-page--dyn
  .product-list--list
  .product-lead-price
  .product-lead-time-block {
  order: 1;
}
.catalog-page--dyn .product-list--list .product-lead-price .lead-price-divider {
  order: 2;
}
.catalog-page--dyn
  .product-list--list
  .product-lead-price
  .product-price-block {
  order: 3;
}
.product-list--list .product-lead-time-block,
.product-list--list .product-price-block {
  align-items: flex-end;
  text-align: right;
}
.product-list--list .product-price-block .product-end-customer-badge {
  position: static;
  align-self: flex-end;
  margin-bottom: 0.25rem;
}
/* CTA back IN FLOW as the row's last column (Figma list row 18900:33943 has
   the "CTA Wrapper" as a sibling column of Lead Time + Price, not an overlay).

   In the GRID card the CTA is deliberately `position: absolute` bottom-right,
   floating over the description fade where nothing else is painted. Rotate the
   card into a row and that same corner is exactly where the price sits, so the
   black basket button covered the tail of every amount — the PO's "666,0",
   "1.048,0", "790,0": the cents AND the € were behind the button, at every
   width, in list view only. Reserving the button's width in the footer bar is
   the fix that cannot be re-broken by a longer price or a narrower rail;
   nudging the price's padding would only move the collision.

   Always visible here rather than hover-revealed: a list row is a table-like
   scan surface, and a column that is invisible until you hover reads as a hole
   in it. (The grid keeps its hover reveal — nothing there depends on the
   button's width.) */
/* The price is the one thing in the row that must read in full, so it does
   not shrink to make room for anything: the footer keeps its intrinsic width
   and the row's flex-wrap drops the whole footer to its own line when the
   viewport can't seat it. */
.product-list--list .product-footer-link {
  flex: 0 0 auto;
}
.product-list--list .product-card-link:hover .product-card-action,
.product-list--list .product-card-link:focus-within .product-card-action {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* The list-view twin of the rule ~23k lines above. It carried
   `--in-cart` too, and being more specific it is the one that actually
   governed the reported view — editing only the earlier rule would have
   changed nothing here. Both are corrected together. */
.product-list--list .product-card-action--in-cart {
  pointer-events: auto;
}
.product-list--list .lead-price-value {
  white-space: nowrap;
}

/* PDP incoterm apply-error notice */
.pdp-incoterm-error {
  margin-top: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: #fdf3f3;
  border: 1px solid #f3d6d6;
  color: #b3261e;
  font-size: 0.8125rem;
  line-height: 1.4;
}
/* === 404 Not Found Page === */
.not-found-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 12.5rem); /* leaves room for header/footer */
  padding: 4rem 1.5rem;
}
.not-found-container {
  max-width: 35rem;
  width: 100%;
  text-align: center;
}
.not-found-status {
  font-size: clamp(4rem, calc(12 * var(--vwx)), 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary, #00ffb9);
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}
.not-found-title {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: var(--color-text-primary, #1a1a1a);
}
.not-found-path {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary, #666);
  margin: 0 0 1rem 0;
  word-break: break-all;
}
.not-found-path code {
  font-family: monospace;
  background: var(--color-bg-subtle, #f4f4f4);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.95em;
}
/* The 404 is server-only and never hydrates, so it renders both languages
   and the REGION (<html data-region>, stamped per request by main.server.dart)
   picks one. Keyed on the region, not on <html lang>: lang is a separate claim
   about the document, and a future region may speak Portuguese without being
   Brazil. English is the default. Pinned by test/not_found_region_copy_test.dart. */
.not-found-lang--pt {
  display: none;
}

html[data-region="br"] .not-found-lang--en {
  display: none;
}

html[data-region="br"] .not-found-lang--pt {
  display: block;
}

.not-found-help {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary, #555);
  margin: 0 0 2rem 0;
  line-height: 1.5;
}
.not-found-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.not-found-actions .btn {
  min-width: 8.75rem;
}

/* ============================================================ */
/*  Quote Request Modal — mirrors admin offer-creation form     */
/* ============================================================ */

.quote-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: quote-modal-fade-in 0.15s ease-out;
}

@keyframes quote-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.quote-modal {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 45rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: quote-modal-scale-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes quote-modal-scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.quote-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.quote-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #0f172a;
}

.quote-modal-subtitle {
  margin: 0.25rem 0 0;
  color: #64748b;
  font-size: 0.875rem;
}

.quote-modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.quote-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.quote-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.quote-modal-section {
  margin-bottom: 1.5rem;
}

.quote-modal-section:last-child {
  margin-bottom: 0;
}

.quote-modal-section h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.quote-section-help {
  margin: -0.25rem 0 0.75rem;
  color: #64748b;
  font-size: 0.8125rem;
}

/* A unit the installed base knows: a short card instead of the End customer
   fields (SHOP-1422). The unit line reuses the asset page's YOUR ASSET strip. */
/* Two classes: the strip's own rule comes later and indents it for the page. */
.at-selected-asset.service-unit-card__unit {
  margin: 0 0 0.6rem;
}
.service-unit-card__facts {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}
.service-unit-card__facts > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
}
.service-unit-card__facts dt {
  color: #64748b;
}
.service-unit-card__facts dd {
  margin: 0;
  color: #242424;
  font-weight: 600;
}
.service-unit-card__change {
  padding: 0;
  border: 0;
  background: none;
  color: #8a00e5;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Advisory hint under the optional "Salesforce opportunity" field. Amber, not
   red: the value is always submitted, so this must read as a nudge and never
   as a validation error the customer has to clear before continuing. */
.quote-section-warning {
  color: #b45309;
  margin-top: 0.375rem;
}

.quote-form-row {
  margin-bottom: 0.875rem;
}

.quote-form-row label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
}

.quote-required {
  color: #dc2626;
  margin-left: 0.125rem;
}

.quote-form-row input,
.quote-form-row textarea,
.quote-modal-section textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: inherit;
  background: #fff;
  color: #0f172a;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-sizing: border-box;
}

.quote-form-row input:focus,
.quote-form-row textarea:focus,
.quote-modal-section textarea:focus {
  outline: none;
  border-color: #009999;
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.1);
}

.quote-form-row-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.quote-form-row-2col > div label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
}

.quote-form-row-2col input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.quote-spareparts-list {
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  max-height: 13.75rem;
  overflow-y: auto;
}

.quote-sparepart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  gap: 1rem;
}

.quote-sparepart-row:last-child {
  border-bottom: none;
}

.quote-sparepart-row:hover {
  background: #f8fafc;
}

.quote-sparepart-info {
  flex: 1;
  min-width: 0;
}

.quote-sparepart-name {
  font-size: 0.875rem;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-sparepart-meta {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.125rem;
}

.quote-sparepart-qty {
  width: 3.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.25rem;
  text-align: right;
  font-size: 0.875rem;
}

.quote-sparepart-summary {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #009999;
  font-weight: 500;
}

.quote-modal-error {
  margin-top: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.25rem;
  color: #b91c1c;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quote-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

.quote-modal-footer .btn {
  min-width: 6.25rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* ============================================================ */
/*  Modal positioning override — break out of any parent that   */
/*  created a stacking context (transform / position-relative). */
/* ============================================================ */

.quote-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  /* inset:0 (left/right/top/bottom above) sizes the fixed backdrop; bare
     100vw/100vh overflow when classic scrollbars are visible. */
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(0.25rem) !important;
}

.quote-modal-backdrop > .quote-modal {
  position: relative !important;
  margin: 0 !important;
  max-width: 40rem !important;
  width: 100% !important;
  max-height: calc(100vh - 4rem) !important;
}

/* Lock body scroll while modal is open — pure CSS via :has() */
body:has(.quote-modal-backdrop) {
  overflow: hidden !important;
}

/* ============================================================ */
/*  On-page Strategic Spare Parts & Add-ons section              */
/* ============================================================ */

.spare-parts-section {
  background: #fff;
  padding: 2rem 0;
  border-top: 1px solid #e2e8f0;
}

.spare-parts-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #009999;
}

.spare-parts-section .section-header h3 {
  margin: 0;
  font-size: 1.375rem;
  color: #0f172a;
}

.spare-parts-section .section-subtitle {
  margin: 0.375rem 0 0;
  color: #64748b;
  font-size: 0.9375rem;
  max-width: 60ch;
}

.spareparts-tally {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #67e8f9;
  flex-shrink: 0;
}

.spareparts-tally .tally-count {
  font-size: 0.8125rem;
  color: #0e7490;
  font-weight: 600;
}

.spareparts-tally .tally-amount {
  font-size: 1rem;
  color: #0f172a;
  font-weight: 700;
}

.spareparts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.sparepart-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  gap: 1rem;
  transition: all 0.15s;
}

.sparepart-card:hover {
  border-color: #cbd5e1;
  background: #fff;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.04);
}

.sparepart-card.selected {
  background: #f0fdfa;
  border-color: #009999;
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.08);
}

.sparepart-card-info {
  flex: 1;
  min-width: 0;
}

.sparepart-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sparepart-card-meta {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.sparepart-card-meta .sp-catnum,
.sparepart-card-meta .sp-evq {
  font-size: 0.75rem;
  color: #64748b;
  background: #fff;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #e2e8f0;
  font-family: "SF Mono", Menlo, monospace;
}

.sparepart-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: #0f766e;
}

.sparepart-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sp-qty-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.sp-qty-btn:hover:not([disabled]) {
  background: #009999;
  color: #fff;
  border-color: #009999;
}

.sp-qty-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.sp-qty-value {
  min-width: 1.75rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

/* ============================================================ */
/*  Configurator page — asset hero image                         */
/* ============================================================ */

.configurator-header .header-content {
  display: grid;
  grid-template-columns: 12.5rem 1fr auto;
  gap: 1.5rem;
  align-items: center;
}

.configurator-header .header-hero {
  width: 12.5rem;
  height: 8.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.configurator-header .header-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================ */
/*  Price provenance badge — per-line "where did this come      */
/*  from?" indicator. Mirrors Birgit's workbook audit columns.   */
/* ============================================================ */

.component-unit-price {
  display: flex;
  align-items: center;
  gap: 0.25rem 0.375rem;
  flex-wrap: wrap;
  line-height: 1.2;
}

.price-source-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: help;
  letter-spacing: 0.02em;
  font-family: "SF Mono", Menlo, monospace;
}

.price-source-badge.src-ok {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.price-source-badge.src-fallback {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.price-source-badge.src-stored {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.price-source-badge.src-none {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.price-source-badge.src-recomputed {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #93c5fd;
}

/* SAP descriptions — SAP's English, then SAP's German, under the line name
   for every viewer (lang="en" / lang="de"; utils/sap_text_line.dart).
   Pulled from V_SAP_GENERIC_VIEW at sync time; the German helps Birgit /
   Werner / Bajram recognise materials by their native label. */
.component-name-sap {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: #64748b;
  font-style: italic;
  font-weight: 400;
}

/* SHOP-355 — admin-maintained line note (price_note). Quiet informational
   line under the component meta, e.g. "SAP lists a w/o-closing-resistor
   variant of this kit (SE999211107H3) — mention it in your quote request." */
.component-price-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #92400e;
  background: #fffbeb;
  border-left: 2px solid #f59e0b;
  padding: 0.25rem 0.5rem;
  border-radius: 0 0.25rem 0.25rem 0;
  max-width: 34rem;
}

/* ====================================================================== */
/* Phase 4 — SAP pricing freshness gate + admin expiring chips
   2026-05-13 Bajram/Ana/Claudia call. Customer sees the yellow "Pricing
   under review" header instead of the total when any line's SAP L price
   has expired. Internal viewers see admin-only chips on top of the normal
   total so they can re-price proactively. */

.base-price-review {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: #fef3c7; /* amber-100 */
  color: #92400e; /* amber-800 */
  border: 1px solid #fcd34d; /* amber-300 */
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.95em;
  letter-spacing: -0.005em;
  cursor: help;
}

.base-price-expiring-chip {
  display: inline-block;
  margin-top: 0.5rem;
  margin-right: 0.375rem;
  padding: 0.19rem 0.625rem;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 500;
  font-family: "DM Mono", "SF Mono", Menlo, monospace;
  cursor: help;
}

.base-price-expired-chip {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.19rem 0.625rem;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 500;
  font-family: "DM Mono", "SF Mono", Menlo, monospace;
  cursor: help;
}

/* ─────────────────────────────────────────────────────────────────────────
 * F10 — live-SAP signals (configurator + magic-link proposal)
 * ───────────────────────────────────────────────────────────────────────── */

.sap-live-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 500;
  font-family: "DM Mono", "SF Mono", Menlo, monospace;
  letter-spacing: -0.005em;
  cursor: help;
}

/* Icon-only variant (owner request 2026-08-31): the dot IS the badge,
   full text lives in the title tooltip. Keeps the pill chrome so it still
   reads as a status chip, not a stray dot. */
.sap-live-banner--icon {
  padding: 0.3125rem;
  gap: 0;
  cursor: help;
  position: relative;
}
/* Instant styled tooltip (owner 2026-09-01: the native title read as "no
   tooltip"). data-tip carries the dynamic synced-N-ago text. Shown on hover
   AND keyboard focus; pointer-events none so it never traps the cursor. */
.sap-live-banner--icon::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  width: max-content;
  max-width: 18rem;
  padding: 0.5rem 0.625rem;
  background: #1f2937;
  color: #f9fafb;
  font-size: 0.75rem;
  line-height: 1.35;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.sap-live-banner--icon:hover::after,
.sap-live-banner--icon:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.sap-live-banner--empty {
  display: none;
}

.sap-live-banner-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
  animation: sap-live-pulse 2.4s ease-in-out infinite;
}

@keyframes sap-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
  }
  50% {
    box-shadow: 0 0 0 0.3125rem rgba(16, 185, 129, 0.08);
  }
}

.sap-expired-banner,
.sap-oos-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.625rem;
  border: 1px solid transparent;
}

.sap-expired-banner--active {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.sap-oos-banner--active {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}

/* Positive states stay visible — they're the live "we checked SAP" proof
 * the demo leans on (2026-06-11 ask). Green, quiet, one line. */
.sap-expired-banner--empty,
.sap-oos-banner--empty {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.sap-expired-banner--empty .sap-banner-icon,
.sap-oos-banner--empty .sap-banner-icon {
  color: #16a34a;
}

.sap-banner-icon {
  font-size: 0.875rem;
  line-height: 1;
}

.sap-expired-banner--active .sap-banner-icon {
  color: #b91c1c;
}
.sap-oos-banner--active .sap-banner-icon {
  color: #d97706;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Configurator + magic-link proposal — bring closer to cart/checkout style
 * (lighter chrome, calmer spacing, neutral commerce-pane vocabulary).
 * Layered AFTER the original rules so it wins on equal specificity.
 * ───────────────────────────────────────────────────────────────────────── */

/* --- Page chrome: match cart (pure white page, calm border, generous top) --- */
.package-configurator-page {
  background: #ffffff;
}
.configurator-header {
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  /* Compacted 2026-07-03 (Gemini design consult): 32/24 -> 20/14 header band,
     h1 capped at 32px — the hero ate ~450px before actionable content. */
  padding: 1.25rem 0 0.875rem;
}
.configurator-header h1 {
  font-size: clamp(1.63rem, calc(2.2 * var(--vwx)), 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  color: #242424;
}
.configurator-subtitle {
  font-size: 0.8125rem;
  color: #6b6b6b;
}
.configurator-content {
  grid-template-columns: 1fr 23.75rem;
  gap: 1.75rem;
  padding: 1.75rem 0 3.5rem;
}

/* --- BOM table: commerce-pane look (no zebra, lighter dividers) --- */
.component-bom-table {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  overflow: hidden;
}
.component-bom-table thead th {
  background: #fafafa;
  color: #6b6b6b;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid #f0f0f0;
}
.component-bom-table tbody td {
  padding: 0.875rem;
  border-bottom: 1px solid #f5f5f5;
  color: #242424;
  vertical-align: middle;
  line-height: 1.45;
}
/* Kill zebra striping — cart never uses it; tables feel calmer without it */
.component-bom-table tbody tr:nth-child(even) {
  background: transparent;
}
.component-bom-table tbody tr:last-child td {
  border-bottom: none;
}
.component-bom-table tbody td.idx {
  color: #b8b8b8;
  font-family: monospace;
  font-size: 0.6875rem;
  width: 2.25rem;
  text-align: right;
}
.component-bom-table tbody td.mono {
  font-family: "DM Mono", "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  color: #6b6b6b;
}

/* BOM toolbar: subtler */
.component-bom-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.25rem;
  font-size: 0.8125rem;
}
.component-bom-toolbar-title {
  color: #242424;
  font-weight: 600;
}
.component-bom-toolbar-meta {
  color: #6b6b6b;
  font-variant-numeric: tabular-nums;
}

/* --- Sidebar pricing card: cart-summary vocabulary --- */
.configurator-sidebar {
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

/* ── Checkout T&C accordion: inline document download row ─────────────
   The accordion body lists each applicable Terms & Conditions document
   (one per price list in the cart, Werner model) with its own Download
   button. The overlay is demoted to a small secondary link — buyers who
   know what they're agreeing to can grab the PDF without an extra modal. */
.checkout-tc-doc-list {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.checkout-tc-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background: #fafafa;
}
.checkout-tc-doc-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #242424;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.checkout-tc-doc-download {
  flex-shrink: 0;
  white-space: nowrap;
}
/* SHOP-394 — a T&C print the frame contract names but that was never
   uploaded: the row still lists the document (it governs the sale) but
   carries an honest "no PDF here" tag instead of a dead Download button. */
.checkout-tc-doc-unavailable {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: #6b6b6b;
  font-style: italic;
}
.checkout-tc-section-hint {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin: 0;
}
.checkout-tc-overlay-link {
  background: none;
  border: none;
  padding: 0;
  color: #641e8c;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.checkout-tc-overlay-link:hover {
  color: #4a1568;
}

/* === Tool Sales Configure Step — overrides on top of .product-detail PDP layout === */
/* The PDP layout fills viewport with overflow:hidden + nested scrolls.
   Override at the .product-page level so the page scrolls naturally,
   and the configure form is fully visible. */
.tool-sales-page-configure {
  height: auto !important;
  min-height: calc(100vh - var(--header-height));
  overflow: visible !important;
  display: block !important;
  padding-bottom: 6.25rem;
}
.tool-sales-page-configure .product-detail {
  overflow: visible !important;
  min-height: 0 !important;
  flex: none !important;
  align-items: start !important;
  height: auto !important;
}
.tool-sales-page-configure .product-gallery-container,
.tool-sales-page-configure .product-info-container {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.tool-sales-page-configure .pdp-tab-content {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  flex: none !important;
}
/* Sticky bottom bar inside .product-info-container shouldn't be sticky here
   — page-level bar handles it */
.tool-sales-page-configure .pdp-bottom-bar {
  display: none !important;
}
.tool-sales-configure-left .pdp-left-info,
.tool-sales-configure-left .pdp-product-title {
  padding: 0 !important;
}
.tool-sales-configure-tab {
  border-bottom: 2px solid #1b1534;
  margin-bottom: 1rem;
}
.tool-sales-configure-tab-active {
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1b1534;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tool-sales-configure-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pricing-card,
.configurator-sidebar > section,
.configurator-sidebar > div.summary-card {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 0.75rem;
  padding: 1.375rem;
}
.pricing-card .summary-row,
.configurator-sidebar .summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Aligned to cart-summary-row (cart.css L1046) so configurator + cart
   * feel like the same checkout shell. Padding 18px (not 10px) + border
   * rgba(0,0,0,0.06) (not #f5f5f5) match the cart-aligned rhythm
   * already shipped by 15092b788. */
  padding: 1.125rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.875rem;
  font-family: var(--font-family);
}
/* Label half — same upper-case style as cart's row label so the two
 * summary surfaces read as one design system, not two. */
.pricing-card .summary-row .summary-row-label,
.configurator-sidebar .summary-row .summary-row-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9e9e9e;
  text-transform: uppercase;
}
.pricing-card .summary-row .summary-row-value,
.configurator-sidebar .summary-row .summary-row-value {
  font-size: 1rem;
  font-weight: 700;
  color: #242424;
  font-variant-numeric: tabular-nums;
}
.pricing-card .summary-row:last-of-type,
.configurator-sidebar .summary-row:last-of-type {
  border-bottom: none;
}
.pricing-card .summary-total,
.configurator-sidebar .summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #242424;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* --- Primary action: cart-checkout button rhythm --- */
.pricing-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.125rem;
}
.pricing-actions .btn-primary,
.pricing-actions button[type="submit"]:not(.btn-secondary):not(.btn-link),
.configurator-sidebar .btn-primary {
  background: #242424;
  color: #ffffff;
  border: 0;
  padding: 0.875rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.pricing-actions .btn-primary:hover,
.configurator-sidebar .btn-primary:hover {
  background: #000000;
}

/* --- Config questions section: feels like cart's customer-info card --- */
.configurator-content .config-questions,
.configurator-content [class*="config-question"] {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 0.625rem;
  padding: 1.25rem;
}

/* --- Magic-link proposal: same calmer vocabulary on the customer-facing page --- */
.quote-proposal {
  background: #fafafa;
}
.quote-proposal .component-bom-table {
  border: 1px solid #f0f0f0;
}
.quote-proposal .component-bom-table thead th {
  background: #fafafa;
}

/* --- Optional wizard-step header pattern (matches cart's CART/SHIPPING/ORDER DETAILS look) --- */
.configurator-step-header {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, calc(3 * var(--vwx)), 3.5rem);
  padding: 1.75rem 0 0;
  margin-bottom: -0.5rem;
}
.configurator-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1.25rem, calc(1.6 * var(--vwx)), 1.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #b8b8b8;
  text-transform: uppercase;
  text-decoration: none;
}
.configurator-step--active {
  color: #242424;
}
.configurator-step--past {
  color: #6b6b6b;
}
.configurator-step--past:hover {
  color: #242424;
}

/* --- Configurator KPI strip (Stitch parity #3) --- */
.configurator-kpi-strip {
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}
.configurator-kpi-row {
  /* Tightened 2026-06-10: was 16px top+bottom = 32px of empty band on a
   * single-line strip. 10px is enough breathing room and gets back ~12px. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  gap: 0;
  padding: 0.625rem 0;
}
.configurator-kpi-tile {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.5rem;
  border-right: 1px solid #f0f0f0;
}
.configurator-kpi-tile:last-child {
  border-right: none;
}
.configurator-kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6b6b;
  margin-bottom: 0.25rem;
}
.configurator-kpi-value {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #242424;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.configurator-kpi-sub {
  font-size: 0.75rem;
  color: #6b6b6b;
  margin-top: 2px;
}

/* --- Tame the long magic-link proposal BOM scroll ---
 * The accepted-quote proposal has 294 BOM rows = 16,770px page. Cap the
 * BOM section to ~600px with internal scroll so the customer can see the
 * Documents + math + Accept banner without scrolling 17 thousand pixels.
 * Header (Σ summary toolbar) stays sticky inside the scroll. */
.quote-proposal .component-bom-children {
  max-height: 37.5rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  border: 1px solid #f0f0f0;
  border-radius: 0.625rem;
  scrollbar-gutter: stable;
}
.quote-proposal .component-bom-children .component-bom-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0.75rem 1rem;
}
.quote-proposal .component-bom-children .component-bom-table {
  border: none;
  border-radius: 0;
}
.quote-proposal .component-bom-children::-webkit-scrollbar {
  width: 0.375rem;
}
.quote-proposal .component-bom-children::-webkit-scrollbar-track {
  background: transparent;
}
.quote-proposal .component-bom-children::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.quote-proposal .component-bom-children::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* --- Tame /services ONLY ---
 * /services renders 158 service-package rows in a single flat list (~17,000px).
 * Same cart-style internal-scroll treatment: cap the list, sticky catalog
 * header above it.
 * MUST stay scoped to .services-page — the PLP (/catalog) shares the
 * .catalog-page chrome but paginates via a WINDOW-scroll listener
 * (catalog_page.dart _setupScrollListener). An internal-scroll cap there
 * keeps the document height ≈ viewport, the load-more condition is then
 * permanently true, and the PLP fires /catalog/plp + /products/with-pricing
 * in an endless loop with a forever-spinner. */
.catalog-page.services-page .product-list {
  max-height: min(45rem, calc(100vh - 17.5rem));
  min-height: 26.25rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  border: 1px solid #f0f0f0;
  border-radius: 0.625rem;
  background: #ffffff;
}
.catalog-page.services-page .product-list::-webkit-scrollbar {
  width: 0.375rem;
}
.catalog-page.services-page .product-list::-webkit-scrollbar-track {
  background: transparent;
}
.catalog-page.services-page .product-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.catalog-page.services-page .product-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* --- BOM category summary chips (parity #2 spirit: group by component cat) --- */
.component-bom-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem 0.875rem;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0.5rem;
}
.component-bom-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: #242424;
}
.component-bom-category-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}
.component-bom-category-dot--material {
  background: #3b82f6;
}
.component-bom-category-dot--tool {
  background: #8b5cf6;
}
.component-bom-category-dot--labor {
  background: #f59e0b;
}
.component-bom-category-dot--travel {
  background: #14b8a6;
}
.component-bom-category-dot--other {
  background: #94a3b8;
}
.component-bom-category-label {
  font-weight: 600;
  color: #242424;
}
.component-bom-category-count {
  padding: 1px 0.5rem;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
.component-bom-category-sum {
  margin-left: 0.25rem;
  color: #6b6b6b;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* --- Magic-link proposal — drop duplicate Siemens Energy header inside shell ---
 * When the proposal is rendered inside the app-shell (logged-in viewer
 * navigating via /service-quote/...), the standalone .quote-header
 * duplicates the brand already shown in the main nav. Hide it in that
 * context; keep it visible on the shell-less route for anonymous
 * magic-link visitors who see no nav. */
.app-shell .quote-header {
  display: none;
}

/* --- Feedback launcher widget: clamp to bottom-right so it doesn't
 *     overlap content (Gemini iter-11 critique flagged it overlapping
 *     configurator section headings + cluster table content). Default
 *     was bottom-left where it sits on top of the leftmost content
 *     column. Moved to bottom-right where it stays out of every page's
 *     primary content area. */
/* PO 2026-08-04: OUR launcher was in this list by mistake. This rule exists
   to corral the THIRD-PARTY Userback widget into one corner; including
   .feedback-launcher forced our own button to bottom-RIGHT with !important,
   overriding feedback.css's intended bottom-LEFT and parking it on top of
   every page's primary CTA (SHOP-715 — "T&C details are not clickable").
   Our launcher owns its own position in feedback.css; it is not listed here. */
[id*="userback"][class*="button"],
[id*="userback_button"],
.userback-button-container,
#userback-button,
[id^="userback"] {
  bottom: 1.25rem !important;
  right: 1.25rem !important;
  left: auto !important;
  top: auto !important;
  z-index: 9990 !important;
}

/* Userback 8071317 — the full-width .impersonation-banner (fixed, z-index
 * 10000, "Viewing as ...") sits ABOVE and directly over the launcher's
 * bottom-right corner, so it's invisible whenever an admin/AM is in a
 * view-as/impersonation session. Shift it up by the banner's height
 * (2.5rem padding+content, rounded up) whenever that banner is present. */
body:has(.impersonation-banner) .feedback-launcher,
body:has(.impersonation-banner) [id*="userback"][class*="button"],
body:has(.impersonation-banner) [id*="userback_button"],
body:has(.impersonation-banner) .userback-button-container,
body:has(.impersonation-banner) #userback-button,
body:has(.impersonation-banner) [id^="userback"] {
  bottom: 3.75rem !important;
}

/* SHOP-715 / Userback 8146337 — wide-and-short viewports (1536×864 Windows
 * laptop @150% scaling = 1016×484 CSS px). The launcher is pinned to the
 * bottom-right corner, which on a 484px fold is the CTA corner of every
 * surface: PDP's sticky buy bar "Add to cart", checkout's Place order, the
 * orders table's row actions. Measured on the 1016×484 fold, sweeping every
 * 1px scroll offset of each route:
 *
 *   PDP        1078 / 1078 offsets  (100%)  overlaps "Add to cart" 60×25px
 *   /orders     448 /  448 offsets  (100%)
 *   /catalog   1594 / 2081 offsets  ( 77%)
 *   /my-catalog 1594/ 2081 offsets  ( 77%)
 *   /services  3886 / 5090 offsets  ( 76%)
 *   /portal     680 / 1916 offsets  ( 35%)
 *                                    ----
 *                            9280 / 12872 = 72% of all scroll positions
 *
 * At every one of those offsets fab-yield.js correctly fires, so the pill is
 * already `opacity: .15; pointer-events: none` — it is NOT a usable feedback
 * affordance at this size, it is a black ghost painted over the primary CTA.
 * That ghost is what the reporter photographed. Hiding it therefore costs
 * nothing that currently works and removes the visual foul outright; support
 * stays reachable via the footer's Support / Contact Support links.
 *
 * Relocation was considered and rejected: 26154 above records why bottom-left
 * was abandoned (it lands on content), and fab-yield only yields for
 * actionable elements, so a left-side collision with headings or table text
 * would be silent. On a 484px fold with 51px of header and a 55px sticky buy
 * bar there is no corner that is reliably empty.
 *
 * 620px, not 35rem: `rem` in a media query resolves against the browser's
 * INITIAL font size, so 35rem is 560px on a default browser and misses 576px
 * — the same laptop with one fewer toolbar row. 620 is shared with the C1
 * density pass and sits in the dead band between the audit matrix's 484 and
 * 800 cells, so it changes no certified size. Height media queries are the
 * sanctioned tool here; width media queries are not (doctrine). */
@media (max-height: 620px) {
  .feedback-launcher {
    display: none !important;
  }
}

/* === Asset-type detail page (/asset-types/:code) ============================
 * Single-page view of everything compatible with an asset type. Audit
 * 2026-06-09 added this so customers don't have to bounce between
 * /services, /services/configure/:pkg, and ad-hoc spare-parts URLs.
 * Cart-aligned vocabulary: whites + #f0f0f0 dividers, no zebra. */
.asset-type-detail.page-wrap {
  max-width: 75rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
}
.at-detail-header__breadcrumb {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin-bottom: 1rem;
}
.at-detail-header__breadcrumb a {
  color: #6b6b6b;
  text-decoration: none;
}
.at-detail-header__breadcrumb a:hover {
  text-decoration: underline;
}
.at-detail-header__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 2rem;
}
.at-detail-header__image {
  flex: 0 0 15rem;
}
.at-detail-header__image img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}
.at-detail-header__body {
  flex: 1;
  min-width: 0;
}
.at-detail-header__title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #242424;
}
.at-detail-header__desc {
  color: #6b6b6b;
  margin: 0 0 1rem;
  max-width: 45rem;
}
.at-detail-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.at-chip {
  /* Gemini iter-7: 6px gap on 12px font reads as "glued" — values like
   * "Service interval 12 months" need real breathing room between label
   * and value. Bump gap to 10px and lighten label to make the hierarchy
   * obvious without a separator glyph. */
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.75rem;
  background: #f7f7f7;
  border-radius: 0.5rem;
  font-size: 0.75rem;
}
.at-chip__label {
  color: #6b6b6b;
  font-weight: 500;
}
.at-chip__value {
  color: #1a1a1a;
  font-weight: 600;
}

.at-detail-section {
  margin-bottom: 2.5rem;
}
.at-detail-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}
.at-detail-section__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: #242424;
}
.at-detail-section__head .at-detail-section__title {
  margin: 0;
}

/* Package cards */
.at-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
  gap: 1rem;
}
.at-package-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid #f0f0f0;
  border-radius: 0.375rem;
  background: #ffffff;
  text-decoration: none;
  color: #242424;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.at-package-card:hover {
  border-color: #1a1a1a;
  transform: translateY(-1px);
}
.at-package-card__level {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  background: rgba(26, 26, 26, 0.08);
  padding: 2px 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
}
.at-package-card__name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}
.at-package-card__desc {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.at-package-card__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.at-package-card__price {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
}
.at-package-card__price-note {
  font-size: 0.6875rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6b6b6b;
}
.at-package-card__scope {
  font-size: 0.75rem;
  color: #6b6b6b;
}
.at-package-card__scope::before {
  content: "·";
  margin-right: 0.375rem;
  color: #b0b0b0;
}
.at-package-card__cta {
  /* Outline-button treatment — matches the secondary-action vocabulary
   * (Details / Review) instead of a bare text link that read as plain
   * copy next to the solid Add-to-Cart CTAs elsewhere. */
  display: inline-block;
  font-size: 0.8125rem;
  color: #1a1a1a;
  font-weight: 600;
  border: 1px solid #1a1a1a;
  border-radius: 0.75rem;
  padding: 0.375rem 0.875rem;
  transition:
    background 0.15s,
    color 0.15s;
}
.at-package-card:hover .at-package-card__cta {
  background: #1a1a1a;
  color: #ffffff;
}

/* Staged / inert (asset-lab preview) offer card — dashed amber frame so it
 * reads as a not-yet-live preview, never a live orderable package. */
.at-package-card--staged {
  border-style: dashed;
  border-color: #d9a441;
  background: #fffdf6;
}
.at-package-card--staged:hover {
  border-color: #b9822a;
  transform: none;
}
.at-package-card__staged-badge {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  /* 0.06em == the old 0.6px at this 0.625rem font-size, but it tracks the
     text when the user zooms instead of staying pinned to a device pixel. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a5a00;
  background: rgba(217, 164, 65, 0.18);
  border: 1px solid rgba(217, 164, 65, 0.5);
  padding: 2px 0.5rem;
  border-radius: 3px;
  vertical-align: middle;
}
/* Staged card CTA is a <button>, not a hover-only link — keep it always
 * visible + clickable (the whole card is not a link). */
.at-package-card__cta--btn {
  margin-top: 0.25rem;
  cursor: pointer;
  background: #1a1a1a;
  color: #ffffff;
}
.at-package-card__cta--btn:hover {
  background: #000000;
}

/* Source pills (curated vs family-fallback) */
.at-source-legend {
  display: flex;
  gap: 0.5rem;
}
.at-source-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 2px 0.5rem;
  border-radius: 3px;
}
.at-source-pill--curated {
  background: rgba(26, 26, 26, 0.1);
  color: #007373;
}
.at-source-pill--family {
  background: rgba(123, 90, 0, 0.1);
  color: #7b5a00;
}

/* Filter chips */
.at-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Spare-parts table with internal scroll cap so the page doesn't grow
 * unbounded when a family has 400+ items. Matches the same pattern used
 * on /my-assets and /service-quote (iter 7+8 of this loop). */
.at-spare-table-wrap {
  max-height: 32.5rem;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  border: 1px solid #f0f0f0;
  border-radius: 0.25rem;
}
.at-spare-table-wrap::-webkit-scrollbar {
  height: 0.375rem;
  width: 0.375rem;
}
.at-spare-table-wrap::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}
.at-spare-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}
.at-spare-table {
  width: 100%;
}
.at-spare-table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  z-index: 1;
}
/* At narrower viewports the table needs ~1314px and overflows the wrap
 * (~1150px at 1200vw), pushing the primary "Add to RFQ" action column
 * off-screen. Hide the 7th column (Source — Curated/Family informational
 * badge, lowest signal) so the CTA stays visible without horizontal scroll. */

/* Documents list */
.at-document-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #f0f0f0;
  border-radius: 0.25rem;
  /* Backend caps at 60 docs but 60 × ~50px = 3000px tall — cap to ~10
   * visible rows with internal scroll. Same neutral 6px scrollbar
   * pattern as the other internal-scroll caps shipped 2026-06-10. */
  max-height: 32.5rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.at-document-list::-webkit-scrollbar {
  width: 0.375rem;
}
.at-document-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}
.at-document-list::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}
.at-document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}
.at-document-item:last-child {
  border-bottom: none;
}
.at-document-item a {
  color: #242424;
  text-decoration: none;
}
.at-document-item a:hover {
  color: #1a1a1a;
  text-decoration: underline;
}
/* Download button (replaces the broken <a href>) — looks like a clickable doc row. */
.at-document-item__btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #242424;
}
.at-document-item__btn:hover .at-document-item__title {
  text-decoration: underline;
}
.at-document-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.25rem;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 0.8125rem;
  flex: 0 0 auto;
}
.at-document-item__title {
  font-size: 0.875rem;
}
.at-document-item__pkg {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #6b6b6b;
  background: #f7f7f7;
  padding: 2px 0.5rem;
  border-radius: 3px;
}

/* === Asset-type detail page — Operational/Strategic spare-parts split ====
 * Heuristic classification with provenance badge (iter 2026-06-09). */
.at-opstrat-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.at-opstrat-source-note {
  margin-left: auto;
  font-size: 0.6875rem;
  font-style: italic;
  color: #6b6b6b;
}
.at-opstrat-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 2px 0.5rem;
  border-radius: 3px;
  cursor: help;
}
.at-opstrat-pill--operational {
  background: rgba(26, 26, 26, 0.1);
  color: #007373;
}
.at-opstrat-pill--strategic {
  background: rgba(178, 73, 0, 0.1);
  color: #8a3c00;
}

/* === Asset-type detail — RFQ basket bar + modal (2026-06-09) =============
 * Add-to-RFQ on spare-parts rows feeds a session basket; bar appears at
 * bottom-right when basket non-empty; modal collects email + notes. */
.at-spare-action-td {
  text-align: right;
}
.at-rfq-btn {
  /* Aligned to core --color-accent (#1a1a1a) + --radius-button (12px),
   * matches PLP/PDP/cart/checkout button vocabulary. Hover flips to filled
   * near-black state, same as core .btn-primary. */
  background: #ffffff;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.at-rfq-btn:hover {
  background: #1a1a1a;
  color: #ffffff;
}
.at-rfq-btn--remove {
  border-color: #d9d9d9;
  color: #6b6b6b;
}
.at-rfq-btn--remove:hover {
  background: #f7f7f7;
  color: #242424;
}
.orders-table__row--selected {
  background: rgba(0, 153, 153, 0.05);
}

/* Direct cart-add for priced spares — primary CTA on each row so
 * shopping a spare part has the same one-click friction as a product. */
.at-spare-action-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
  min-width: 6.875rem;
}
.at-add-cart-btn {
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.05s;
}
.at-add-cart-btn:hover {
  background: #2a2a2a;
}
.at-add-cart-btn:active {
  transform: scale(0.98);
}
.at-add-cart-btn--loading {
  opacity: 0.7;
  cursor: progress;
}
.at-add-cart-btn--success {
  background: #15803d;
  border-color: #15803d;
  color: #ffffff;
}

/* Cart-add failure message — was captured in state but never rendered, so add-to-cart
   errors were silent. Shown inline under the button for the item that failed. */
.at-add-cart-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #b91c1c;
}

/* SHOP-170 — click an item for more material information.
   Name cell becomes a quiet button that toggles a detail panel. */
.at-spare-name-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.at-spare-name-btn:hover .at-spare-name-btn__text {
  color: #0067a5;
  text-decoration: underline;
}
.at-spare-name-btn__chevron {
  flex: 0 0 auto;
  font-size: 0.625rem;
  color: #888;
  transition: transform 0.15s ease;
}
.at-spare-name-btn__chevron--open {
  transform: rotate(90deg);
}

/* "View details" action button — sits above Add-to-cart / RFQ in the stack. */
.at-spare-detail-btn {
  background: #ffffff;
  border: 1px solid #c9c9c9;
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.at-spare-detail-btn:hover {
  background: #f2f2f2;
  border-color: #1a1a1a;
}
.at-spare-detail-btn--open {
  background: #eef4f8;
  border-color: #0067a5;
  color: #0067a5;
}

/* The expanded detail panel row — spans the full table width. */
.at-spare-row--expanded > .orders-td {
  border-bottom: none;
}
.at-spare-detail-row > .at-spare-detail-cell {
  padding: 0;
  background: #f7f9fb;
  border-bottom: 1px solid #e5e7eb;
}
.at-spare-detail {
  padding: 0.875rem 1.125rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.at-spare-detail__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #333;
  max-width: 70ch;
}
.at-spare-detail__loading,
.at-spare-detail__empty {
  margin: 0;
  font-size: 0.8125rem;
  color: #777;
  font-style: italic;
}
.at-spare-detail__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.at-spare-detail__spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 7.5rem;
}
.at-spare-detail__spec-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a8a8a;
}
.at-spare-detail__spec-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.at-rfq-bar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #242424;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.25);
  z-index: 9999;
}
.at-rfq-bar__count {
  font-size: 0.8125rem;
  font-weight: 500;
}
.at-rfq-bar__clear {
  background: transparent;
  border: 1px solid #6b6b6b;
  color: #ffffff;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 0.25rem;
}
.at-rfq-bar__clear:hover {
  border-color: #ffffff;
}
.at-rfq-bar__send {
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  color: #ffffff;
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0.25rem;
}
.at-rfq-bar__send:hover {
  background: #007373;
  border-color: #007373;
}

.at-rfq-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.at-rfq-modal {
  background: #ffffff;
  width: 28.75rem;
  max-width: calc(92 * var(--vwx));
  max-height: 86vh;
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.75rem 3rem rgba(0, 0, 0, 0.3);
}
.at-rfq-modal h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: #242424;
}
.at-rfq-modal__intro {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: #6b6b6b;
  line-height: 1.4;
}
/* Parts in the quote request, each with its quantity (customer request 08.10.) */
.at-rfq-modal__items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.at-rfq-modal__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.at-rfq-modal__item-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  color: #242424;
  overflow-wrap: anywhere;
}
.at-rfq-modal__item-code {
  display: block;
  font-size: 0.75rem;
  color: #6b6b6b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pdp-qty-stepper--rfq {
  flex: 0 0 auto;
}
.at-rfq-modal__item-remove {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: #6b6b6b;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}
.at-rfq-modal__item-remove:hover {
  color: #242424;
}
.at-rfq-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.at-rfq-modal__field label {
  font-size: 0.75rem;
  color: #6b6b6b;
  font-weight: 500;
}
.at-rfq-modal__field input,
.at-rfq-modal__field textarea {
  padding: 0.5rem 0.625rem;
  border: 1px solid #d9d9d9;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
}
.at-rfq-modal__field input:focus,
.at-rfq-modal__field textarea:focus {
  outline: none;
  border-color: #1a1a1a;
}
.at-rfq-modal__result {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  background: rgba(26, 26, 26, 0.1);
  color: #007373;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}
.at-rfq-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* === Magic-link proposal — sticky Accept bar (2026-06-09) ============
 * Pending offers have the Accept Quote button at the bottom of a
 * 1000+px page. On laptop viewports it sits just below the fold,
 * creating a guess-where-to-click moment. This bar mirrors the
 * primary actions so they're always in reach. Hides on accept. */
.quote-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 0.75rem rgba(15, 23, 42, 0.06);
  z-index: 9000;
}
.quote-sticky-bar__meta {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #475569;
}
.quote-sticky-bar__total {
  color: #0f172a;
  font-weight: 600;
}
.quote-sticky-bar__actions {
  display: flex;
  gap: 0.625rem;
}
.quote-sticky-bar__secondary {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #0f172a;
  padding: 0.5rem 1rem;
  border-radius: 0.3125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.quote-sticky-bar__secondary:hover {
  border-color: #0f766e;
  color: #0f766e;
}
.quote-sticky-bar__secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.quote-sticky-bar__primary {
  background: #0f766e;
  border: 1px solid #0f766e;
  color: #ffffff;
  padding: 0.5rem 1.25rem;
  border-radius: 0.3125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.quote-sticky-bar__primary:hover {
  background: #115e59;
  border-color: #115e59;
}
.quote-sticky-bar__primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Pad the bottom of .quote-page so the sticky bar doesn't overlap
 * the in-page action row when scrolled to the very bottom. */
.quote-page {
  padding-bottom: 5rem;
}

/* /services PLP — Catalog cross-link on each package card so customers
 * can jump from "M1 package" to the asset-type catalog (spare parts + docs
 * + Add-to-RFQ) without having to AssetPicker their way in again.
 * Stops click bubble so the chip wins over the card's configure handler. */
.product-card-link {
  cursor: pointer;
}
.product-card-link:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}
/* Asset-catalog link on the services card. UB 7878569/SHOP-167: the original plain-text link "can
 * happen to others to overlook" — make it read as an actionable bordered button (larger, outlined,
 * higher contrast) so it's clearly clickable, not a faint chip. */
.product-catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.3125rem 0.75rem;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 0.7813rem;
  font-weight: 600;
  border: 1px solid #0f766e;
  border-radius: 0.375rem;
  text-decoration: none;
  letter-spacing: 0.01rem;
  transition:
    background 0.15s,
    color 0.15s;
}
.product-catalog-chip:hover {
  background: #0f766e;
  color: #fff;
  text-decoration: none;
}

/* /quotes — service-quote rows: a small "Service quote" pill marks
 * SE-2026-* RFQs distinct from Medusa draft-order quotes. The whole
 * cell is a link to /service-quote/<ref>. */
.orders-row-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #0f172a;
  text-decoration: none;
  font-weight: 600;
}
.orders-row-link:hover {
  color: #0f766e;
  text-decoration: underline;
}
.orders-row-kind-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
  padding: 1px 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
}

/* Configurator BOM scroll cap — same internal-scroll pattern as the
 * proposal page's .quote-proposal .component-bom-children rule (24254),
 * scoped to the configurator. Stops the BOM towering when a package has
 * 50+ components (Critique pass 2026-06-10 item 7). Sticky toolbar so
 * the category-chip summary + Σ stays visible while scrolling. */
.package-configurator-page .component-bom-children {
  max-height: 37.5rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  border: 1px solid #f0f0f0;
  border-radius: 0.625rem;
  scrollbar-gutter: stable;
}
.package-configurator-page .component-bom-children .component-bom-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0.75rem 1rem;
}
.package-configurator-page .component-bom-children .component-bom-table {
  border: none;
  border-radius: 0;
}
.package-configurator-page .component-bom-children::-webkit-scrollbar {
  width: 0.375rem;
}
.package-configurator-page .component-bom-children::-webkit-scrollbar-track {
  background: transparent;
}
.package-configurator-page .component-bom-children::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.package-configurator-page
  .component-bom-children::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ─────────────────────────────────────────────────────────────────────
 * CMS Content Sections v2 — Payload-driven Product Description,
 * content_blocks, and PDP-as-quote-form configurator.
 *
 * Brand-locked to the SE design tokens:
 *   --se-text-*          color palette
 *   --se-font-size-h*    typography ramp
 *   --se-spacing-{4,8,9} 16/32/56 vertical rhythm
 *   --se-radius-card     12px corners
 *   --color-primary      #641e8c SE Brand Energy Purple (primary accent)
 *   --color-focus-ring   #009999 teal — focus rings ONLY
 *
 * Sections render OUTSIDE the viewport-locked .product-page hero so
 * the page scrolls naturally below the hero/info row. The hero +
 * INFORMATION sidebar + price card remain unchanged for product
 * shapes where they make sense; the configurator-mirror block IS the
 * quote-request form for service/RFQ products (PDP-as-quote-form).
 * ──────────────────────────────────────────────────────────────────── */

/* === Full-bleed band wrappers === */

/* Alternating band to give visual rhythm between sections. */
.product-content-blocks {
  background: var(--se-layer-01, #f2f2f2);
}

.product-description-section .container,
.product-content-blocks .container {
  max-width: var(--container-max, 82.5rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
}

/* The 2-up enrichment grid. `display: grid` was dropped in the !915-train
   consolidation (12cd8476a), leaving the later `grid-template-columns:
   repeat(2, 1fr)` rule inert — every feature card stacked full-width on
   the dev deploy (stakeholder review 2026-08-28). 32rem floor ⇒ at most
   2 columns in the 82.5rem container, 1 when two don't fit — no
   breakpoint. */
.product-content-blocks .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  gap: var(--se-spacing-8, 2rem);
}

/* === Section headings === */
.product-description-section h2,
.product-content-blocks > .container > h2 {
  font-family: var(--se-font-family);
  font-size: var(--se-font-size-h2, 1.75rem);
  line-height: var(--se-line-height-h2, 2.125rem);
  font-weight: 700;
  margin: 0;
  color: var(--se-text-default, #1a1a1a);
  letter-spacing: -0.01em;
  /* Energy Purple accent stroke under H2 in CMS sections — establishes brand. */
  padding-bottom: var(--se-spacing-4, 1rem);
  border-bottom: 2px solid var(--se-brand-purple, #641e8c);
  display: inline-block;
}

/* === Product Description copy === */
.description-content {
  color: var(--se-text-default, #1a1a1a);
  font-family: var(--se-font-family);
  font-size: var(--se-font-size-text-large, 1rem);
  line-height: var(--se-line-height-text-large, 1.5rem);
  max-width: 55rem;
}

.description-content h2 {
  font-size: var(--se-font-size-h4, 1.375rem);
  line-height: var(--se-line-height-h4, 1.625rem);
  font-weight: 700;
  margin: var(--se-spacing-4, 1rem) 0 var(--se-spacing-4, 1rem) 0;
  color: var(--se-text-default, #1a1a1a);
  border: none;
}

.description-content h2:first-child {
  margin-top: 0;
}

.description-content p {
  margin: 0 0 var(--se-spacing-4, 1rem) 0;
}

.description-content strong {
  font-weight: 600;
  color: var(--se-text-default, #1a1a1a);
}

/* === Generic content-block surface ===
 * Card style: white surface, no border (SE doesn't use heavy borders),
 * subtle shadow on hover, 12px radius (--se-radius-card). */
.content-block {
  background: var(--se-layer-02, #ffffff);
  border-radius: var(--se-radius-card, 0.75rem);
  padding: var(--se-spacing-8, 2rem);
  box-shadow: 0 1px 0 var(--se-layer-02-stroke, #ebebeb);
  transition: box-shadow 0.18s ease;
}

.content-block:hover {
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.05);
}

.content-block h3 {
  font-family: var(--se-font-family);
  font-size: var(--se-font-size-h5, 1.25rem);
  line-height: var(--se-line-height-h5, 1.5rem);
  font-weight: 700;
  margin: 0 0 var(--se-spacing-4, 1rem) 0;
  color: var(--se-text-default, #1a1a1a);
}

.content-block p,
.content-block .feature-description {
  margin: 0 0 var(--se-spacing-4, 1rem) 0;
  color: var(--se-text-default, #1a1a1a);
  font-size: var(--se-font-size-text-default, 0.875rem);
  line-height: var(--se-line-height-text-default, 1.375rem);
}

.content-block p:last-child,
.content-block .feature-description :last-child {
  margin-bottom: 0;
}

/* === Feature-highlight responsive grid ===
 * 1 column on mobile, 2 on desktop. Wide blocks (FAQ, callout, configurator,
 * downloads, spec-table) span the full row. */
.product-content-blocks > .container {
  grid-template-columns: repeat(2, 1fr);
}
.product-content-blocks > .container > h2,
.product-content-blocks > .container > .content-block.faq-block,
.product-content-blocks > .container > .content-block.callout,
.product-content-blocks > .container > .content-block.spec-table-block,
.product-content-blocks > .container > .content-block.downloads-block,
.product-content-blocks > .container > .content-block.configurator-mirror {
  grid-column: 1 / -1;
}

/* === Callouts (info / warning / success) ===
 * Brand-aligned: info uses SE Energy Purple, success green, warning amber.
 * Left border 4px is the visual anchor. */
.content-block.callout {
  border-left: 0.25rem solid var(--se-brand-purple, #641e8c);
  background: var(--se-layer-02, #ffffff);
}

.content-block.callout-info {
  border-left-color: var(--se-brand-purple, #641e8c);
  background: color-mix(in srgb, var(--se-brand-purple, #641e8c) 6%, #ffffff);
}

.content-block.callout-success {
  border-left-color: #00875a;
  background: #e9f6ef;
}

.content-block.callout-warning {
  border-left-color: #c97b00;
  background: #fff5e6;
}

.content-block.callout h4 {
  font-size: var(--se-font-size-h6, 1.125rem);
  line-height: var(--se-line-height-h6, 1.375rem);
  font-weight: 700;
  margin: 0 0 var(--se-spacing-4, 1rem) 0;
  color: var(--se-text-default, #1a1a1a);
}

.content-block.callout .callout-content {
  color: var(--se-text-default, #1a1a1a);
  font-size: var(--se-font-size-text-default, 0.875rem);
  line-height: var(--se-line-height-text-default, 1.375rem);
}

/* === FAQ accordion (style) === */
.content-block.faq-block h3 {
  font-size: var(--se-font-size-h4, 1.375rem);
  line-height: var(--se-line-height-h4, 1.625rem);
  margin-bottom: var(--se-spacing-4, 1rem);
}

.content-block.faq-block .faq-item {
  padding: var(--se-spacing-4, 1rem) 0;
  border-bottom: 1px solid var(--se-layer-02-stroke, #ebebeb);
}

.content-block.faq-block .faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.content-block.faq-block .faq-question {
  font-size: var(--se-font-size-text-large, 1rem);
  line-height: var(--se-line-height-text-large, 1.5rem);
  font-weight: 600;
  color: var(--se-text-default, #1a1a1a);
  margin: 0 0 0.5rem 0;
}

.content-block.faq-block .faq-answer {
  font-size: var(--se-font-size-text-default, 0.875rem);
  line-height: var(--se-line-height-text-default, 1.375rem);
  color: var(--se-text-secondary, #666);
}

/* === Spec table === */
.content-block.spec-table-block .spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--se-font-size-text-default, 0.875rem);
  line-height: var(--se-line-height-text-default, 1.375rem);
}

.content-block.spec-table-block .spec-table tr {
  border-bottom: 1px solid var(--se-layer-02-stroke, #ebebeb);
}

.content-block.spec-table-block .spec-table tr:last-child {
  border-bottom: none;
}

.content-block.spec-table-block .spec-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 500;
  color: var(--se-text-secondary, #666);
  width: 40%;
  vertical-align: top;
}

.content-block.spec-table-block .spec-table td {
  padding: 0.75rem 1rem;
  color: var(--se-text-default, #1a1a1a);
  font-weight: 500;
}

/* === Downloads === */
.content-block.downloads-block .download-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.content-block.downloads-block .download-item a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--se-layer-01, #f2f2f2);
  border-radius: 0.5rem;
  color: var(--se-text-default, #1a1a1a);
  text-decoration: none;
  transition: background 0.15s ease;
  font-size: var(--se-font-size-text-default, 0.875rem);
}

.content-block.downloads-block .download-item a:hover {
  background: #eaeef0;
}

.content-block.downloads-block .download-category {
  color: var(--se-text-secondary, #666);
  font-size: var(--se-font-size-text-small, 0.75rem);
}

/* ──────────────────────────────────────────────────────────────────────
 * Configurator-mirror — the PDP-as-quote-form pattern.
 *
 * For RFQ / service products, this block IS the quote-request UI. It
 * replaces the cart flow with an explicit "Request quote" submission.
 * Visually it must read as a SINGLE confident form, not a list of
 * disconnected pill chips.
 *
 * Layout:
 *   ┌─ Configurator header (title + intro)
 *   ├─ Question rows (one per ConfiguratorQuestion):
 *   │    label + required-marker + help-text
 *   │    field control (radio group / select / text input)
 *   ├─ Total / starting-at price summary (when priced options selected)
 *   └─ Primary CTA: Request quote
 * ─────────────────────────────────────────────────────────────────── */

.content-block.configurator-mirror {
  padding: var(--se-spacing-9, 3.5rem);
  border-top: 0.25rem solid var(--se-brand-purple, #641e8c);
}

.content-block.configurator-mirror h3 {
  font-size: var(--se-font-size-h3, 1.5rem);
  line-height: var(--se-line-height-h3, 1.875rem);
  margin-bottom: 0.5rem;
}

.content-block.configurator-mirror .configurator-intro {
  color: var(--se-text-secondary, #666);
  font-size: var(--se-font-size-text-large, 1rem);
  line-height: var(--se-line-height-text-large, 1.5rem);
  margin: 0 0 var(--se-spacing-8, 2rem) 0;
  max-width: 45rem;
}

.content-block.configurator-mirror .configurator-question {
  padding: var(--se-spacing-4, 1rem) 0;
  border-top: 1px solid var(--se-layer-02-stroke, #ebebeb);
}

.content-block.configurator-mirror .configurator-question:first-of-type {
  border-top: none;
  padding-top: 0;
}

.content-block.configurator-mirror .configurator-question-label {
  font-weight: 600;
  font-size: var(--se-font-size-text-large, 1rem);
  line-height: var(--se-line-height-text-large, 1.5rem);
  color: var(--se-text-default, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.content-block.configurator-mirror .required-marker {
  color: #c4262e;
  font-weight: 700;
}

.content-block.configurator-mirror .help-text {
  font-size: var(--se-font-size-text-small, 0.75rem);
  line-height: var(--se-line-height-text-small, 1.125rem);
  color: var(--se-text-secondary, #666);
  margin: 0.25rem 0 0.75rem 0;
  max-width: 45rem;
}

/* Selectable options — when not yet a real <input>, render as
 * clickable cards with hover/selected affordance so the form reads
 * like a form, not like an FAQ. */
.content-block.configurator-mirror .configurator-options {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.content-block.configurator-mirror .configurator-option {
  background: var(--se-layer-02, #ffffff);
  border: 1px solid var(--se-layer-03-stroke, #c9c9c9);
  border-radius: var(--se-radius-pill, 1.5rem);
  padding: 0.5rem 1rem;
  font-size: var(--se-font-size-text-default, 0.875rem);
  color: var(--se-text-default, #1a1a1a);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.content-block.configurator-mirror .configurator-option:hover {
  border-color: var(--se-brand-purple, #641e8c);
  background: color-mix(in srgb, var(--se-brand-purple, #641e8c) 6%, #ffffff);
}

.content-block.configurator-mirror .configurator-option .price-delta {
  color: var(--se-brand-purple, #641e8c);
  font-weight: 700;
  font-size: var(--se-font-size-text-small, 0.75rem);
}

/* Trailing CTA + reassurance card. */
.content-block.configurator-mirror .configurator-cta-hint {
  margin-top: var(--se-spacing-8, 2rem);
  padding: var(--se-spacing-4, 1rem) var(--se-spacing-8, 2rem);
  background: var(--se-layer-01, #f2f2f2);
  border-radius: var(--se-radius-card, 0.75rem);
  font-size: var(--se-font-size-text-default, 0.875rem);
  line-height: var(--se-line-height-text-default, 1.375rem);
  color: var(--se-text-secondary, #666);
  border-left: 0.25rem solid var(--se-brand-purple, #641e8c);
}

/* === PDP-as-quote-form mode: hide the classic price/cart card for products
 * that have an inline configurator-mirror. The configurator IS the price/cart
 * UI; showing both creates confusion ("which one do I click?").
 *
 * The selector keys off .product-page[data-product-shape="rfq"] which the SSR
 * stamps when product.metadata.is_rfq_only === true, OR when the product
 * has any configurator-mirror block. */
.product-page[data-product-shape="rfq"] .product-info-container .purchase-bar,
.product-page[data-product-shape="rfq"] .product-info-container .pdp-bottom-bar,
.product-page[data-product-shape="rfq"] .product-info-container .pdp-price-row,
.product-page[data-product-shape="rfq"]
  .product-info-container
  .pdp-add-to-cart-button {
  display: none !important;
}

/* RFQ affordance card — rendered INSIDE the INFORMATION sidebar at the
 * top of .pdp-info-tab. Replaces the price card on PDP-as-quote-form
 * shapes. The Dart side (_buildInformationTab) gates this on the same
 * is_rfq_only / configurator-mirror presence check that drives the
 * .product-page[data-product-shape] attribute. */
.pdp-info-rfq-affordance {
  margin: 0 0 var(--se-spacing-4, 1rem) 0;
  padding: var(--se-spacing-4, 1rem);
  background: var(--se-layer-01, #f2f2f2);
  border-left: 0.25rem solid var(--se-brand-purple, #641e8c);
  border-radius: var(--se-radius-card, 0.75rem);
}

.pdp-info-rfq-affordance-title {
  font-family: var(--se-font-family);
  font-size: var(--se-font-size-text-large, 1rem);
  line-height: var(--se-line-height-text-large, 1.5rem);
  font-weight: 700;
  color: var(--se-text-default, #1a1a1a);
  margin: 0 0 0.375rem 0;
}

.pdp-info-rfq-affordance-body {
  font-size: var(--se-font-size-text-small, 0.75rem);
  line-height: var(--se-line-height-text-small, 1.125rem);
  color: var(--se-text-secondary, #666);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Iteration 2 — Form affordances, radio styling, CTA button, icons.
 * ──────────────────────────────────────────────────────────────────── */

/* Configurator options now read as a radio-button list, not pill chips. */
.content-block.configurator-mirror .configurator-options {
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--se-layer-02-stroke, #ebebeb);
}

.content-block.configurator-mirror .configurator-option {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--se-layer-02-stroke, #ebebeb);
  background: transparent;
  padding: 0.875rem 0.25rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.content-block.configurator-mirror .configurator-option:last-child {
  border-bottom: none;
}

.content-block.configurator-mirror .configurator-option:hover {
  background: var(--se-layer-01, #f2f2f2);
}

.content-block.configurator-mirror .configurator-option-radio {
  flex: 0 0 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 2px solid var(--se-layer-03-stroke, #c9c9c9);
  background: #fff;
  display: inline-block;
  position: relative;
  transition: border-color 0.15s ease;
}

.content-block.configurator-mirror
  .configurator-option:hover
  .configurator-option-radio {
  border-color: var(--se-brand-purple, #641e8c);
}

.content-block.configurator-mirror .configurator-option-label {
  flex: 1 1 auto;
  font-size: var(--se-font-size-text-default, 0.875rem);
  line-height: var(--se-line-height-text-default, 1.375rem);
  color: var(--se-text-default, #1a1a1a);
}

.content-block.configurator-mirror .configurator-option .price-delta {
  flex: 0 0 auto;
  color: var(--se-brand-purple, #641e8c);
  font-weight: 700;
  font-size: var(--se-font-size-text-default, 0.875rem);
}

/* === Submit row === */
.content-block.configurator-mirror .configurator-submit-row {
  margin-top: var(--se-spacing-8, 2rem);
  padding-top: var(--se-spacing-4, 1rem);
  border-top: 1px solid var(--se-layer-02-stroke, #ebebeb);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.content-block.configurator-mirror .configurator-submit-button {
  background: var(--se-brand-purple, #641e8c);
  color: #ffffff;
  border: none;
  border-radius: var(--se-radius-button, 0.75rem);
  padding: 0.875rem 1.75rem;
  font-family: var(--se-font-family);
  font-size: var(--se-font-size-text-large, 1rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.05s ease;
  letter-spacing: 0.01em;
}

.content-block.configurator-mirror .configurator-submit-button:hover {
  background: var(--se-brand-purple-light, #7d3aa5);
}

.content-block.configurator-mirror .configurator-submit-button:active {
  transform: translateY(1px);
}

.content-block.configurator-mirror .configurator-submit-meta {
  margin: 0;
  font-size: var(--se-font-size-text-small, 0.75rem);
  line-height: var(--se-line-height-text-small, 1.125rem);
  color: var(--se-text-secondary, #666);
}

/* === Sharper H3 / H4 hierarchy on feature-highlight cards === */
.content-block.feature-highlight {
  position: relative;
}

.content-block.feature-highlight h3 {
  font-size: var(--se-font-size-h5, 1.25rem);
  line-height: var(--se-line-height-h5, 1.5rem);
  font-weight: 700;
  margin-top: 0;
  padding-left: 2.25rem; /* leave room for icon glyph */
  position: relative;
}

/* Generic feature icon — small Energy Purple circle marker that lives at the
 * start of each feature h3. Real icon glyphs come from Payload via
 * `icon: '<name>'`; for now the marker reads as a visual anchor across the grid. */
.content-block.feature-highlight h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--se-radius-card, 0.75rem);
  background: linear-gradient(
    135deg,
    var(--se-brand-purple-light, #7d3aa5) 0%,
    var(--se-brand-purple, #641e8c) 100%
  );
  box-shadow: 0 1px 3px rgba(100, 30, 140, 0.25);
}

.content-block.callout h4 {
  font-size: var(--se-font-size-text-large, 1rem);
  line-height: var(--se-line-height-text-large, 1.5rem);
  font-weight: 700;
}

/* ── "Zero" pillar callouts (3AV1 Blue flyer parity) ──────────────────────
   The Blue-portfolio flyers carry their argument in a rail of Zero pillars —
   "Zero environmental impact", "Zero impact on health & safety", "Zero
   regulation", "Zero compromise on performance". Rendered as plain callouts
   they read as four identical grey boxes and the rail's hierarchy is lost.
   Give any callout whose title starts with "Zero" the flyer's treatment: the
   Energy Purple deep ground it uses for the pillar headings, a purple rail,
   and the tighter measure the printed rail uses. Scoped by :has() so no other
   product's callouts are affected. */
.content-block.callout:has(h4[data-pillar]) {
  background: linear-gradient(
    135deg,
    var(--se-brand-purple-dark, #4a1668) 0%,
    #170c34 100%
  );
  border-left: 4px solid var(--se-brand-purple-light, #7d3aa5);
  border-radius: var(--se-radius-card, 0.75rem);
  padding: var(--se-spacing-6, 1.5rem) var(--se-spacing-7, 1.75rem);
  color: #ffffff;
}

.content-block.callout:has(h4[data-pillar]) h4 {
  color: #ffffff;
  font-size: var(--se-font-size-h5, 1.25rem);
  line-height: var(--se-line-height-h5, 1.5rem);
  letter-spacing: -0.01em;
  margin: 0 0 var(--se-spacing-3, 0.75rem);
}

.content-block.callout:has(h4[data-pillar]) p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 62ch;
  margin: 0;
}

.content-block.callout:has(h4[data-pillar]) ul {
  margin: 0;
  padding-left: 1.125rem;
  color: rgba(255, 255, 255, 0.86);
}

.content-block.callout:has(h4[data-pillar]) li {
  margin: 0 0 var(--se-spacing-2, 0.5rem);
  line-height: 1.35;
}

/* The printed pillars sit in a narrow rail beside the body copy, not as four
   full-width bands. The container is already 2-up at this breakpoint, but an
   earlier rule spans every .callout across both columns; opt the pillars back
   into a single column so they pair up like the flyer's rail. */
.product-content-blocks
  > .container
  > .content-block.callout:has(h4[data-pillar]) {
  grid-column: auto;
}

/* ══ 3AV1 Blue flyer parity ═══════════════════════════════════════════════
   Typography, colour and figure sizing taken from the printed piece
   (3AV1FG Blue LT_flyer_EN.pdf, © 2025 Siemens Energy). Its violet is
   #4F2B80 and its dark ground #170C34; headings are violet on white, and
   the technical table is a two-column rule-per-row layout with the values
   flush right — not a boxed card. Scoped to CMS content blocks so no other
   surface changes.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --flyer-violet: #4f2b80;
  --flyer-violet-deep: #170c34;
  --flyer-blue: #0084e1;
}

/* Section headings — violet, like every heading in the flyer. */
.product-content-blocks > .container > .content-block > h3,
.product-content-blocks > .container > .content-block.cms-tabs-block > h3,
.product-content-blocks > .container > .content-block.spec-table-block > h3 {
  color: var(--flyer-violet);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.content-block.feature-highlight h3 {
  color: var(--flyer-violet);
}

/* The feature marker becomes the flyer's violet, replacing the generic
   purple gradient. */
.content-block.feature-highlight h3::before {
  background: var(--flyer-violet);
  box-shadow: none;
  border-radius: 50%;
  width: 0.625rem;
  height: 0.625rem;
  top: 0.5rem;
}

.content-block.feature-highlight h3 {
  padding-left: 1.25rem;
}

/* ── Technical details: the flyer's own table ───────────────────────────
   Label left, value flush right, a hairline rule under each row, no card
   chrome. */
.content-block.spec-table-block {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* The block spans the full row (grid-column: 1 / -1), but a 100%-width
   key-value table on a wide desktop stretches the label→value gap far past
   a comfortable eye-line. Cap it so label and value stay close together. */
.content-block.spec-table-block .spec-table {
  max-width: 40rem;
}

/* Matches the existing .spec-table ruleset's specificity so these win —
   the earlier rules put the rule on <tr> and pad both cells 1rem. */
.content-block.spec-table-block .spec-table tr {
  border-bottom: none;
}

.content-block.spec-table-block .spec-table th,
.content-block.spec-table-block .spec-table td {
  border-bottom: 1px solid #c9c4d4;
  padding: 0.6875rem 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  vertical-align: top;
  background: transparent;
}

.content-block.spec-table-block .spec-table th {
  color: var(--se-text-default, #1a1a1a);
  font-weight: 400;
  width: 58%;
}

/* Values flush right with lining figures, as printed. */
.content-block.spec-table-block .spec-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: var(--se-spacing-6, 1.5rem);
  font-weight: 400;
}

/* ── Figures (dimension drawing, GWP chart, installation photo) ─────────
   A single-figure gallery is a full-bleed figure in print, not a thumbnail
   in a 4-up grid. */
.content-block.cms-image-gallery .cms-gallery-grid:has(> :only-child) {
  grid-template-columns: 1fr;
}

.content-block.cms-image-gallery
  .cms-gallery-grid:has(> :only-child)
  .cms-gallery-item {
  background: transparent;
}

.content-block.cms-image-gallery .cms-gallery-grid:has(> :only-child) img {
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
}

/* ── SF6 vs clean air tabs — the flyer's two comparison cards ───────────
   SF6 is the muted, negative side; clean air is the violet, positive one. */
.content-block.cms-tabs-block .cms-tab-label {
  font-weight: 700;
  color: var(--se-text-secondary, #666);
}

.content-block.cms-tabs-block
  .cms-tab-input:checked
  + .cms-tab-labels
  .cms-tab-label {
  color: var(--flyer-violet);
}

.content-block.cms-tabs-block .cms-tab-panel ul {
  margin: 0;
  padding-left: 1.125rem;
}

.content-block.cms-tabs-block .cms-tab-panel li {
  margin-bottom: var(--se-spacing-2, 0.5rem);
  line-height: 1.4;
}

/* ── Sub-brand chip — the flyer's violet, not the generic brand purple ── */
.cms-sub-brand-chip {
  background: var(--flyer-violet);
}

/* ── Zero pillars: adopt the flyer's exact violet ───────────────────────── */
.content-block.callout:has(h4[data-pillar]) {
  background: linear-gradient(
    135deg,
    var(--flyer-violet) 0%,
    var(--flyer-violet-deep) 100%
  );
  border-left-color: #7f64a2;
}

/* ──────────────────────────────────────────────────────────────────────────
   Configurator form (iter-4) — interactive PDP-as-quote-form
   Stepper-style multi-phase wizard, real inputs, validation, running total.
   Borrows the MPT Budget stepper aesthetic + SE.com generous whitespace.
   ────────────────────────────────────────────────────────────────────────── */

.content-block.configurator-mirror.configurator-form {
  padding: 0;
  background: #fff;
  border: 1px solid #ecedef;
  border-radius: var(--se-radius-card, 0.75rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.configurator-header {
  padding: 1.75rem 2rem 0;
}

.configurator-header h3 {
  font-size: var(--se-font-size-h3, 1.375rem);
  line-height: var(--se-line-height-h3, 1.75rem);
  font-weight: 700;
  color: var(--se-text-default, #1a1a1a);
  margin: 0 0 0.5rem;
}

.configurator-header .configurator-intro {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--se-text-secondary, #666666);
  margin: 0 0 1.25rem;
  max-width: 60ch;
}

/* Stepper — mirrors lib/components/common/checkout_stepper.dart visual */
.configurator-stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fafafa;
  border-top: 1px solid #ecedef;
  border-bottom: 1px solid #ecedef;
  padding: 0;
  margin: 1.5rem 0 0;
  overflow-x: auto;
}

.configurator-step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: none;
  border-right: 1px solid #ecedef;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--se-text-tertiary, #9e9e9e);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.configurator-step:last-child {
  border-right: none;
}

.configurator-step:hover {
  background: #f1f2f4;
  color: var(--se-text-secondary, #666666);
}

.configurator-step--active {
  background: #fff;
  color: var(--se-brand-purple, #641e8c);
  box-shadow: inset 0 -3px 0 var(--se-brand-purple, #641e8c);
}

.configurator-step--past {
  color: var(--se-text-secondary, #666666);
}

.configurator-step--past .configurator-step-index {
  background: var(--se-brand-purple, #641e8c);
  color: #fff;
}

.configurator-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: #ecedef;
  color: var(--se-text-secondary, #666666);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
}

.configurator-step--active .configurator-step-index {
  background: var(--se-brand-purple, #641e8c);
  color: #fff;
}

/* Phase content */
.configurator-phase-content {
  padding: 1.75rem 2rem;
  background: #fff;
}

.configurator-phase {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.configurator-phase--submit h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--se-text-default, #1a1a1a);
  margin: 0 0 0.375rem;
}

.configurator-phase--submit .help-text {
  margin: 0 0 1.125rem;
}

.configurator-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.125rem;
}

/* Question + label */
.configurator-question {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.configurator-question-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--se-text-default, #1a1a1a);
}

.configurator-question .required-marker {
  color: var(--se-brand-purple, #641e8c);
}

.configurator-question .help-text {
  font-size: 0.8125rem;
  line-height: 1.1875rem;
  color: var(--se-text-tertiary, #9e9e9e);
  margin: 0;
}

/* Inputs */
.configurator-input,
.configurator-select,
.configurator-textarea {
  display: block;
  width: 100%;
  padding: 0.6875rem 0.875rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--se-text-default, #1a1a1a);
  background: #fff;
  border: 1px solid #d6d8dc;
  border-radius: 0.5rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-sizing: border-box;
}

/* Focus rings stay teal by design — --color-focus-ring. */
.configurator-input:focus,
.configurator-select:focus,
.configurator-textarea:focus {
  outline: none;
  border-color: var(--color-focus-ring, #009999);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.12);
}

.configurator-textarea {
  resize: vertical;
  min-height: 5rem;
}

.configurator-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
}

.configurator-question.has-error .configurator-input,
.configurator-question.has-error .configurator-select,
.configurator-question.has-error .configurator-textarea,
.configurator-question.has-error .configurator-options {
  border-color: #d63a3a;
}

.configurator-question.has-error .configurator-options {
  border: 1px solid #d63a3a;
  border-radius: 0.5rem;
  padding: 0.25rem;
}

.field-error {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: #d63a3a;
}

/* Radio-style options (package, radio field types) */
.configurator-options--radio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.configurator-options--radio .configurator-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border: 1px solid #d6d8dc;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.configurator-options--radio .configurator-option:hover {
  border-color: #b6bcc4;
  background: #fafbfc;
}

.configurator-options--radio .configurator-option--selected {
  border-color: var(--se-brand-purple, #641e8c);
  background: rgba(100, 30, 140, 0.04);
  box-shadow: 0 0 0 1px var(--se-brand-purple, #641e8c) inset;
}

.configurator-option-radio {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 2px solid #c7cbd1;
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.15s ease;
}

.configurator-option--selected .configurator-option-radio {
  border-color: var(--se-brand-purple, #641e8c);
}

.configurator-option--selected .configurator-option-radio::after {
  content: "";
  position: absolute;
  inset: 0.19rem;
  border-radius: 50%;
  background: var(--se-brand-purple, #641e8c);
}

/* Checkbox variant — square indicator, same row anatomy as radio.
   Selector carries .content-block.configurator-mirror to outrank the
   round-radio rule of the same scope above. */
.content-block.configurator-mirror
  .configurator-options--checkbox
  .configurator-option-radio,
.configurator-options--checkbox .configurator-option-radio {
  border-radius: 0.25rem;
}
.configurator-options--checkbox
  .configurator-option--selected
  .configurator-option-radio::after {
  border-radius: 1px;
}

.configurator-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.configurator-option-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--se-text-default, #1a1a1a);
}

.configurator-option .price-delta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--se-brand-purple, #641e8c);
}

/* Footer — running total + actions */
.configurator-footer {
  padding: 1.25rem 2rem 1.75rem;
  border-top: 1px solid #ecedef;
  background: #fafafa;
}

.configurator-running-total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  background: #fff;
  border: 1px solid #ecedef;
  border-radius: 0.5rem;
}

.configurator-running-total-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--se-text-secondary, #666666);
}

.configurator-running-total-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--se-brand-purple, #641e8c);
}

.configurator-running-total-meta {
  font-size: 0.75rem;
  color: var(--se-text-tertiary, #9e9e9e);
  margin-left: auto;
}

.configurator-footer-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.configurator-back-button,
.configurator-next-button,
.configurator-submit-button {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.375rem;
  border-radius: var(--se-radius-button, 0.75rem);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.05s ease;
}

.configurator-back-button {
  background: transparent;
  color: var(--se-text-secondary, #666666);
  border: 1px solid #d6d8dc;
}

.configurator-back-button:hover {
  border-color: var(--se-text-tertiary, #9e9e9e);
  color: var(--se-text-default, #1a1a1a);
}

.configurator-next-button {
  background: var(--se-text-default, #1a1a1a);
  color: #fff;
  border: 1px solid var(--se-text-default, #1a1a1a);
  margin-left: auto;
}

.configurator-next-button:hover {
  background: #000;
}

.configurator-submit-button {
  background: var(--se-brand-purple, #641e8c);
  color: #fff;
  border: 1px solid var(--se-brand-purple, #641e8c);
  margin-left: auto;
}

.configurator-submit-button:hover {
  background: var(--se-brand-purple-light, #7d3aa5);
  border-color: var(--se-brand-purple-light, #7d3aa5);
}

.configurator-submit-button:active {
  transform: translateY(1px);
}

.configurator-submit-button.is-loading,
.configurator-submit-button[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.configurator-submit-meta {
  width: 100%;
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  color: var(--se-text-tertiary, #9e9e9e);
}

.configurator-submit-error {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.875rem;
  background: rgba(214, 58, 58, 0.06);
  border: 1px solid rgba(214, 58, 58, 0.25);
  border-radius: 0.5rem;
  color: #b53030;
  font-size: 0.8125rem;
}

/* Success state */
.content-block.configurator-mirror.configurator-success {
  padding: 2.5rem 2rem;
  background: #fff;
  border: 1px solid #ecedef;
  border-radius: var(--se-radius-card, 0.75rem);
  text-align: center;
}

.configurator-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(100, 30, 140, 0.1);
  color: var(--se-brand-purple, #641e8c);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1.125rem;
}

.configurator-success h3 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--se-text-default, #1a1a1a);
  margin: 0 0 0.625rem;
}

.configurator-success p {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--se-text-secondary, #666666);
  margin: 0 0 0.75rem;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

.configurator-success-ref code {
  font-family: "SiemensSlab", monospace;
  background: #fafafa;
  padding: 0.19rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  color: var(--se-text-default, #1a1a1a);
}

/* ── Configurator polish pass (Magento-message alignment, 2026-06-11) ──
   1. Tighten the dead band between the card header and the stepper —
      the intro's bottom margin and the stepper's top margin doubled up.
   2. Unselected radio rows get a visible (but quiet) border so the
      clickable area reads as a control before hover, like the Magento
      source's option rows. */
.configurator-header .configurator-intro {
  margin-bottom: 0.25rem;
}
.configurator-stepper {
  margin-top: 0.75rem;
}
.configurator-options--radio .configurator-option {
  border-color: #e3e5e8;
  background: #fdfdfd;
}
.configurator-options--radio .configurator-option:hover {
  border-color: #b6bcc4;
  background: #fafbfc;
}

/* ── Configurator density pass (Magento two-column rhythm) ─────────────
   The source Magento form puts the label LEFT and the control RIGHT at
   ~45px per row; our stacked layout burned ~150px per question and the
   buyer had to scroll three screens. Desktop gets the two-column grid;
   the stacked layout remains for narrow viewports. */
.configurator-phase {
  gap: 0;
}
.configurator-phase .configurator-question {
  display: grid;
  grid-template-columns: 18.75rem minmax(0, 1fr);
  column-gap: 1.75rem;
  row-gap: 2px;
  align-items: start;
  padding: 0.875rem 0;
  border-bottom: 1px solid #f3f4f6;
}
.configurator-phase .configurator-question:last-child {
  border-bottom: none;
}
.configurator-phase .configurator-question-label {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0.5625rem;
  font-size: 0.875rem;
}
.configurator-phase .configurator-question .help-text {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.75rem;
  line-height: 1.0625rem;
}
.configurator-phase .configurator-question .configurator-input,
.configurator-phase .configurator-question .configurator-select,
.configurator-phase .configurator-question .configurator-textarea,
.configurator-phase .configurator-question .configurator-options {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.configurator-phase .configurator-question .field-error {
  grid-column: 2;
  grid-row: 3;
  margin: 2px 0 0;
}
/* Inputs lose the jumbo padding */
.configurator-phase .configurator-input,
.configurator-phase .configurator-select {
  padding: 0.5625rem 0.75rem;
}
/* Radio rows tighten to Magento rhythm */
.configurator-options--radio {
  gap: 0.375rem;
}
.configurator-options--radio .configurator-option {
  padding: 0.5625rem 0.75rem;
}
/* Phase body breathes less */
.configurator-phase-content {
  padding: 0.5rem 2rem 1.25rem;
}
/* Contact grid joins the rhythm */
.configurator-contact-grid {
  gap: 0 1.5rem;
}

/* Brand-primary CTA: Energy Purple per --color-primary (matches the
   Magento Add-to-Cart and siemens-energy.com CTAs). Earlier teal rule
   superseded here by cascade. */
.content-block.configurator-mirror .configurator-submit-button {
  background: var(--se-brand-purple, #641e8c);
  border-color: var(--se-brand-purple, #641e8c);
}
.content-block.configurator-mirror .configurator-submit-button:hover {
  background: var(--se-brand-purple-light, #7d3aa5);
  border-color: var(--se-brand-purple-light, #7d3aa5);
}

/* The two-column question grid must NOT apply inside the 3-up contact
   grid — there the question IS the cell; stacking label-over-input is
   correct and the 300px label column collapsed the inputs. */
.configurator-contact-grid .configurator-question {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.375rem 0;
  border-bottom: none;
}
.configurator-contact-grid .configurator-question .configurator-input {
  width: 100%;
}

/* ============================================================
 * WS2 CMS blocks — image-gallery, tier-pricing, tabs,
 * sub-brand-header, external-reference.
 * Brand-locked: theme tokens only, raw hex only as var() fallbacks.
 * ============================================================ */

/* Wide blocks span the full row in the 2-col content grid. */
.product-content-blocks > .container > .content-block.cms-image-gallery,
.product-content-blocks > .container > .content-block.cms-tier-pricing,
.product-content-blocks > .container > .content-block.cms-tabs-block,
.product-content-blocks > .container > .content-block.cms-sub-brand-header {
  grid-column: 1 / -1;
}

/* --- Image gallery ------------------------------------------------ */
.cms-gallery-grid {
  display: grid;
  /* auto-fit (not auto-fill): a gallery with fewer images than would fill a
     row should let those images grow to use the space, not reserve empty
     phantom columns and leave a dead gap to the right of a 2-image row. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--se-spacing-4, 1rem);
}

.cms-gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--se-spacing-2, 0.5rem);
  background: var(--se-layer-01, #f5f5f5);
  border-radius: var(--se-radius-card, 0.75rem);
  overflow: hidden;
}

.cms-gallery-item img {
  width: 100%;
  height: 12.5rem;
  object-fit: contain;
  background: var(--se-layer-02, #ffffff);
  display: block;
}

.cms-gallery-item figcaption {
  padding: 0 var(--se-spacing-3, 0.75rem) var(--se-spacing-3, 0.75rem);
  font-size: var(--se-font-size-text-small, 0.75rem);
  line-height: var(--se-line-height-text-small, 1.125rem);
  color: var(--se-text-secondary, #4d4d4d);
}

/* --- Tier pricing -------------------------------------------------- */
.cms-tier-terms {
  color: var(--se-text-secondary, #4d4d4d);
  font-size: var(--se-font-size-text-default, 0.875rem);
}

.cms-tier-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  gap: var(--se-spacing-4, 1rem);
  margin-top: var(--se-spacing-4, 1rem);
}

.cms-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--se-spacing-2, 0.5rem);
  padding: var(--se-spacing-5, 1.25rem);
  border: 1px solid var(--se-layer-02-stroke, #ebebeb);
  border-radius: var(--se-radius-card, 0.75rem);
  background: var(--se-layer-02, #ffffff);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cms-tier-card:hover {
  border-color: var(--se-brand-purple, #641e8c);
  box-shadow: 0 2px 0.75rem rgba(0, 0, 0, 0.06);
}

.cms-tier-qty {
  font-size: var(--se-font-size-text-small, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--se-text-tertiary, #767676);
}

.cms-tier-price {
  font-size: var(--se-font-size-h5, 1.25rem);
  font-weight: 700;
  color: var(--se-text-default, #1a1a1a);
}

.cms-tier-price .cms-tier-unit {
  font-size: var(--se-font-size-text-small, 0.75rem);
  font-weight: 400;
  color: var(--se-text-tertiary, #767676);
}

.cms-tier-savings {
  align-self: flex-start;
  padding: 2px 0.625rem;
  border-radius: 999px;
  font-size: var(--se-font-size-text-small, 0.75rem);
  font-weight: 600;
  color: var(--se-brand-purple, #641e8c);
  background: color-mix(
    in srgb,
    var(--se-brand-purple, #641e8c) 12%,
    transparent
  );
}

/* --- Tabs (CSS-only radio pattern, up to 6 tabs) ------------------- */
.cms-tabs > .cms-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cms-tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--se-spacing-2, 0.5rem);
  border-bottom: 1px solid var(--se-layer-02-stroke, #ebebeb);
  margin-bottom: var(--se-spacing-5, 1.25rem);
}

.cms-tab-label {
  padding: var(--se-spacing-3, 0.75rem) var(--se-spacing-4, 1rem);
  font-size: var(--se-font-size-text-default, 0.875rem);
  font-weight: 600;
  color: var(--se-text-secondary, #4d4d4d);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.cms-tab-label:hover {
  color: var(--se-brand-purple, #641e8c);
}

.cms-tab-panel {
  display: none;
}

.cms-tab-panel .cms-tab-image {
  max-width: 100%;
  border-radius: var(--se-radius-card, 0.75rem);
  margin-bottom: var(--se-spacing-4, 1rem);
  display: block;
}

/* Active label + panel per index (radio inputs are the first children
 * of .cms-tabs, so nth-of-type pairs with nth-child below). */
.cms-tabs
  > .cms-tab-input:nth-of-type(1):checked
  ~ .cms-tab-labels
  > .cms-tab-label:nth-child(1),
.cms-tabs
  > .cms-tab-input:nth-of-type(2):checked
  ~ .cms-tab-labels
  > .cms-tab-label:nth-child(2),
.cms-tabs
  > .cms-tab-input:nth-of-type(3):checked
  ~ .cms-tab-labels
  > .cms-tab-label:nth-child(3),
.cms-tabs
  > .cms-tab-input:nth-of-type(4):checked
  ~ .cms-tab-labels
  > .cms-tab-label:nth-child(4),
.cms-tabs
  > .cms-tab-input:nth-of-type(5):checked
  ~ .cms-tab-labels
  > .cms-tab-label:nth-child(5),
.cms-tabs
  > .cms-tab-input:nth-of-type(6):checked
  ~ .cms-tab-labels
  > .cms-tab-label:nth-child(6) {
  color: var(--se-brand-purple, #641e8c);
  border-bottom-color: var(--se-brand-purple, #641e8c);
}

.cms-tabs
  > .cms-tab-input:nth-of-type(1):checked
  ~ .cms-tab-panels
  > .cms-tab-panel:nth-child(1),
.cms-tabs
  > .cms-tab-input:nth-of-type(2):checked
  ~ .cms-tab-panels
  > .cms-tab-panel:nth-child(2),
.cms-tabs
  > .cms-tab-input:nth-of-type(3):checked
  ~ .cms-tab-panels
  > .cms-tab-panel:nth-child(3),
.cms-tabs
  > .cms-tab-input:nth-of-type(4):checked
  ~ .cms-tab-panels
  > .cms-tab-panel:nth-child(4),
.cms-tabs
  > .cms-tab-input:nth-of-type(5):checked
  ~ .cms-tab-panels
  > .cms-tab-panel:nth-child(5),
.cms-tabs
  > .cms-tab-input:nth-of-type(6):checked
  ~ .cms-tab-panels
  > .cms-tab-panel:nth-child(6) {
  display: block;
}

/* --- Sub-brand header ---------------------------------------------- */
.content-block.cms-sub-brand-header {
  display: flex;
  align-items: center;
  gap: var(--se-spacing-4, 1rem);
  padding: var(--se-spacing-5, 1.25rem) var(--se-spacing-8, 2rem);
  border-left: 0.25rem solid var(--se-brand-purple, #641e8c);
}

.cms-sub-brand-logo {
  height: 2.5rem;
  width: auto;
  display: block;
}

.cms-sub-brand-text {
  display: flex;
  align-items: baseline;
  gap: var(--se-spacing-3, 0.75rem);
  flex-wrap: wrap;
}

.cms-sub-brand-chip {
  display: inline-block;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  font-size: var(--se-font-size-text-default, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--se-layer-02, #ffffff);
  background: var(--se-brand-purple, #641e8c);
  /* A pill can't accommodate 2-line text — the rounded end-caps clip the
     second line, reading as a broken border. Longer brand strings (e.g.
     "DIAG TRF · Level 1") must stay one line; the flex-wrap on
     .cms-sub-brand-text already lets the chip drop to its own row instead. */
  white-space: nowrap;
}

.cms-sub-brand-tagline {
  font-size: var(--se-font-size-text-default, 0.875rem);
  color: var(--se-text-secondary, #4d4d4d);
}

/* --- External reference -------------------------------------------- */
.cms-external-reference-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-spacing-4, 1rem);
  text-decoration: none;
  color: inherit;
}

.cms-external-reference-main {
  display: flex;
  flex-direction: column;
  gap: var(--se-spacing-1, 0.25rem);
  min-width: 0;
}

.cms-external-reference-title {
  font-weight: 700;
  font-size: var(--se-font-size-text-default, 0.875rem);
  color: var(--se-brand-purple, #641e8c);
}

.cms-external-reference-card:hover .cms-external-reference-title {
  text-decoration: underline;
}

.cms-external-reference-desc {
  font-size: var(--se-font-size-text-small, 0.75rem);
  line-height: var(--se-line-height-text-small, 1.125rem);
  color: var(--se-text-secondary, #4d4d4d);
}

.cms-external-reference-kind {
  flex-shrink: 0;
  padding: 2px 0.625rem;
  border-radius: 999px;
  font-size: var(--se-font-size-text-small, 0.75rem);
  font-weight: 600;
  color: var(--se-brand-purple, #641e8c);
  border: 1px solid var(--se-brand-purple, #641e8c);
}

/* ════════════════════════════════════════════════════════════════════
   Noedra PDP — design-critique round 1 (2026-06-11)
   Applied items from the Gemini review that survived senior triage:
   1. Continue (next) button joins the brand-primary purple family —
      black mid-wizard CTA broke the "purple = primary action" directive.
   2. Submit reassurance line was 12px tertiary — barely legible.
   3. Feature-card marker: the 24px gradient circle read as a missing
      icon; a 12px solid dot reads as a deliberate bullet.
   4. Gallery tiles: uniform 3:2 tile so mixed Magento assets (dark key
      visuals, photos, diagrams) sit on one rhythm; neutral backing.
   5. Full-row CMS section headings (gallery / tier pricing / tabs)
      match the configurator's 22px section scale.
   6. Tier-card "/ unit" + savings chip: one step up in size/contrast.
   7. Stepper: active label gets weight so the active state survives
      squinting; past steps keep the purple index chip.
   ════════════════════════════════════════════════════════════════════ */

.configurator-next-button {
  background: var(--se-brand-purple, #641e8c);
  border-color: var(--se-brand-purple, #641e8c);
}

.configurator-next-button:hover {
  background: var(--se-brand-purple-light, #7d3aa5);
  border-color: var(--se-brand-purple-light, #7d3aa5);
}

.configurator-submit-meta,
.content-block.configurator-mirror .configurator-submit-meta {
  font-size: 0.8125rem;
  line-height: 1.1875rem;
  color: var(--se-text-secondary, #666666);
}

.content-block.feature-highlight h3 {
  padding-left: 1.5rem;
}

.content-block.feature-highlight h3::before {
  width: 0.75rem;
  height: 0.75rem;
  top: 0.4375rem;
  border-radius: 50%;
  background: var(--se-brand-purple, #641e8c);
  box-shadow: none;
}

.cms-gallery-item img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
  background: var(--se-layer-01, #f5f5f5);
}

.content-block.cms-image-gallery > h3,
.content-block.cms-tier-pricing > h3,
.content-block.cms-tabs-block > h3 {
  font-size: var(--se-font-size-h3, 1.375rem);
  line-height: var(--se-line-height-h3, 1.75rem);
}

.cms-tier-price .cms-tier-unit {
  font-size: 0.8125rem;
  color: var(--se-text-secondary, #4d4d4d);
}

.cms-tier-savings {
  font-size: 0.8125rem;
}

.configurator-step--active {
  font-weight: 700;
}

/* A lone feature-highlight (DaaS has exactly one, "How it works") left a
   half-empty row in the 2-col content grid. When a feature card has no
   feature siblings, let it span the full row like the callouts around it. */
.product-content-blocks:not(.product-content-blocks--details)
  > .container
  > .content-block.feature-highlight:not(
    :has(~ .content-block.feature-highlight)
  ):not(.content-block.feature-highlight ~ *) {
  grid-column: 1 / -1;
}

/* ── Round 1 root-cause fix: legacy configurator-mirror rules bled into
   the interactive form. The pre-interactive generation (~L25436) styles
   `.content-block.configurator-mirror .configurator-question` with
   border-top + 16px padding + :first-of-type padding-top:0 at (0,4,0)
   specificity, silently outranking the entire density pass and painting
   stray hairlines above columns 2-3 of the submit contact grid (each
   non-first sibling got border-top) while column 1 lost its top padding
   (first-of-type) — the visible misalignment in the SUBMIT phase.
   Scope-neutralize inside the interactive `.configurator-form` only;
   the legacy SSR-only rendering elsewhere keeps its rules. */
.content-block.configurator-mirror.configurator-form .configurator-question,
.content-block.configurator-mirror.configurator-form
  .configurator-question:first-of-type {
  border-top: none;
  padding: var(--se-spacing-4, 1rem) 0;
}

.content-block.configurator-mirror.configurator-form
  .configurator-question-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.content-block.configurator-mirror.configurator-form
  .configurator-phase
  .configurator-question,
.content-block.configurator-mirror.configurator-form
  .configurator-phase
  .configurator-question:first-of-type {
  padding: 0.875rem 0;
}
.content-block.configurator-mirror.configurator-form
  .configurator-contact-grid
  .configurator-question,
.content-block.configurator-mirror.configurator-form
  .configurator-contact-grid
  .configurator-question:first-of-type {
  padding: 0.375rem 0;
  border-bottom: none;
}

/* ════════════════════════════════════════════════════════════════════
   Noedra PDP — design-critique round 2 (2026-06-11)
   1. Inactive stepper steps were #9e9e9e on #fafafa (~2.6:1) — below
      AA for the uppercase 13px labels. Darken one step; states stay
      clearly distinct (active purple / past secondary / inactive).
   2. Required-marker: the interactive-form section already intended
      Energy Purple but the legacy configurator-mirror rule (#c4262e,
      higher specificity) silently won. Restore the intent.
   3. Rail RFQ-affordance body at 12px was the hardest-to-read text in
      the right rail — one step up.
   4. Form rhythm: trim the question-row padding a touch so a 5-field
      phase fits one screen without feeling cramped.
   ════════════════════════════════════════════════════════════════════ */

.configurator-step {
  color: var(--se-text-secondary, #767676);
}

.content-block.configurator-mirror.configurator-form .required-marker {
  color: var(--se-brand-purple, #641e8c);
}

.pdp-info-rfq-affordance-body {
  font-size: 0.8125rem;
  line-height: 1.1875rem;
}

.content-block.configurator-mirror.configurator-form
  .configurator-phase
  .configurator-question,
.content-block.configurator-mirror.configurator-form
  .configurator-phase
  .configurator-question:first-of-type {
  padding: 0.6875rem 0;
}

/* Rail RFQ card is now an anchor → #configure. Keep the card look,
   add link affordance (hover lift + arrow nudge) and make sure the
   fragment jump lands below the fixed header. */
button.pdp-info-rfq-affordance {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: box-shadow 0.15s ease;
}

button.pdp-info-rfq-affordance:hover {
  box-shadow: 0 2px 0.625rem rgba(100, 30, 140, 0.12);
}

.pdp-info-rfq-affordance-arrow {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--se-brand-purple, #641e8c);
  transition: transform 0.15s ease;
}

button.pdp-info-rfq-affordance:hover .pdp-info-rfq-affordance-arrow {
  transform: translateX(0.19rem);
}

#configure {
  scroll-margin-top: 5.625rem;
}

/* /portal's Your Details card — anchor target of the sidebar YOUR DETAILS
   row on both /portal (`#your-details`) and /profile (`/portal#your-details`).
   Without the gutter the fixed header covers the card's own heading, so the
   buyer lands on the NAME row with no label in sight (SHOP-678). */
#your-details {
  scroll-margin-top: 5.625rem;
}

/* Tier cards / external-reference cards carried more padding than their
   short content needs (round-2 critique: sparse cards). */
.cms-tier-card {
  padding: var(--se-spacing-4, 1rem) var(--se-spacing-5, 1.25rem);
}

.product-content-blocks > .container > .content-block.cms-external-reference {
  padding: var(--se-spacing-5, 1.25rem) var(--se-spacing-8, 2rem);
}

/* Round 3: gallery captions one step up (12px tertiary was the least
   readable text on the page per critique; keep caption role, fix AA). */
.cms-gallery-item figcaption {
  font-size: 0.8125rem;
  line-height: 1.1875rem;
  color: var(--se-text-secondary, #4d4d4d);
}

/* ── Gallery containment (marketing-site parity) ───────────────────────
   SE.com galleries use uniform 16:9 frames with cover-cropped images
   flush to the card top; ours floated at native sizes inside the cards
   (mismatched tile heights, white gaps above short images). Fixed frame
   + cover keeps every tile identical; diagrams with extreme ratios still
   read because the frame is generous. */
.cms-gallery-item {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cms-gallery-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
  background: #f0f0f0;
}
.cms-gallery-item figcaption {
  padding: 0.75rem 1rem 0.875rem;
  margin: 0;
}
/* Cart row asset-context chip — shows the asset a service/spare was added
 * for. Small, dim, clickable through to the asset card. Same visual
 * treatment used on /quotes, magic-link proposal, and order detail. */
.cart-panel-item-asset-chip {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #475569;
}
.cart-panel-item-asset-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #475569;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding: 1px 0;
}
.cart-panel-item-asset-link:hover {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}
.cart-panel-item-asset-icon {
  color: #1a1a1a;
  font-weight: 600;
}

/* Lead-time chip on cart line items. Small, tabular, muted so the line
 * isn't crowded but the procurement signal is visible. */
.cart-panel-item-lead-chip {
  margin-top: 0.25rem;
  display: inline-block;
  padding: 2px 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border-radius: 0.75rem;
  letter-spacing: 0.02rem;
}

/* Clickable "Most common asset types" rows on /my-assets dashboard.
 * Reset button defaults so the row reads as a list entry, not a chip. */
.my-assets-kpi-list-row--clickable {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.375rem 0.25rem;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: background 0.12s;
  text-align: left;
}
.my-assets-kpi-list-row--clickable:hover {
  background: #f1f5f9;
}
.my-assets-kpi-list-row--active {
  background: #e0e7ff;
  color: #1a1a1a;
}
.my-assets-kpi-list-row--active .my-assets-kpi-list-name {
  font-weight: 600;
}

/* (.svc-fleet-toggle deleted — S6: the fleet scope pills moved into the
 * PLP-pattern filter rail as a .filter-facet; no emitter remains.) */

/* "In your fleet" chip on asset-type pages — the one accented chip in the
 * header row; everything else stays neutral. */
.at-chip--fleet {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.at-chip--fleet .at-chip__label {
  color: #4338ca;
}
.at-chip--fleet .at-chip__value {
  color: #312e81;
  font-weight: 700;
}

/* ── /services Asset Types table view (SOPHIE 2-step browser) ──────────
 * These classes previously had NO styles — the table rendered with raw
 * browser defaults (columns crammed left, no row separation, headers
 * misaligned). Styled to the orders-table vocabulary. */
.svc-asset-type-table-wrap {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 0.5rem;
  overflow: hidden;
}
.svc-asset-type-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.svc-asset-type-table thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
  background: #fafafa;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
}
.svc-asset-type-table thead th:nth-child(6),
.svc-asset-type-table tbody td:nth-child(6) {
  text-align: right;
}
.svc-asset-type-table thead th:last-child,
.svc-asset-type-table tbody td:last-child {
  width: 3rem;
  text-align: right;
}
.svc-asset-type-row {
  cursor: pointer;
  transition: background 0.12s;
}
.svc-asset-type-row:not(:last-child) td {
  border-bottom: 1px solid #f0f0f0;
}
.svc-asset-type-row:hover {
  background: #f8fafc;
}
.svc-asset-type-row td {
  padding: 0.8125rem 1rem;
  vertical-align: middle;
  color: #1a1a1a;
}
.svc-asset-type-row td:nth-child(2) {
  font-weight: 600;
}
.svc-asset-group-badge {
  color: #6b7280;
  font-size: 0.8125rem;
}
.svc-code-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 2px 0.5rem;
  white-space: nowrap;
}
.svc-table-arrow {
  display: inline-flex;
  color: #c2c2c2;
  transition:
    color 0.12s,
    transform 0.12s;
}
.svc-asset-type-row:hover .svc-table-arrow {
  color: #1a1a1a;
  transform: translateX(2px);
}

/* SAP spec columns + voltage filter on /services */
.svc-spec-cell {
  color: #475569;
  font-size: 0.8125rem;
  white-space: nowrap;
}
/* (.svc-voltage-filter layout rule deleted — CRITIQUE round 1: it sat later
   in the cascade than the unified .svc-filter-group 2-col grid and its
   inline-flex silently won, stacking the VOLTAGE label above its chips.
   The emitter keeps the class as a semantic hook only.) */

/* /services grid grouped by asset type — section headers between card rows */
.svc-grouped-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.svc-type-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.25rem 0 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8e8e8;
}
.svc-grouped-list .svc-type-section-header:first-child {
  margin-top: 0.25rem;
}
.svc-type-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  min-width: 0;
}
.svc-type-section-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-type-section-spec {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
}
.svc-type-section-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.svc-type-section-link:hover {
  border-bottom-color: #1a1a1a;
}

/* ── Spare-parts table: NO horizontal scroll, ever (stakeholder 2026-06-12).
 * table-layout:fixed + percentage columns + wrapping names means the table
 * always fits its wrap; long part names break to multiple lines instead of
 * pushing the Source / action columns off-screen. Overrides the earlier
 * <1300px column-hiding hack (kept harmless below it). */
.at-spare-table {
  table-layout: fixed;
}
.at-spare-table th,
.at-spare-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.at-spare-table th:nth-child(1),
.at-spare-table td:nth-child(1) {
  width: 13%;
}
.at-spare-table th:nth-child(2),
.at-spare-table td:nth-child(2) {
  width: 30%;
}
.at-spare-table th:nth-child(3),
.at-spare-table td:nth-child(3) {
  width: 9%;
}
.at-spare-table th:nth-child(4),
.at-spare-table td:nth-child(4) {
  width: 10%;
}
.at-spare-table th:nth-child(5),
.at-spare-table td:nth-child(5) {
  width: 8%;
}
.at-spare-table th:nth-child(6),
.at-spare-table td:nth-child(6) {
  width: 9%;
}
.at-spare-table th:nth-child(7),
.at-spare-table td:nth-child(7) {
  width: 9%;
}
.at-spare-table th:nth-child(8),
.at-spare-table td:nth-child(8) {
  width: 12%;
}

/* ── /services default view: one card per ASSET TYPE with M-level quick
 * links (2026-06-12 redesign — replaces 3-5 near-identical package cards
 * per machine). */
.svc-asset-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21.25rem, 1fr));
  gap: 1.25rem;
}
.svc-asset-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.svc-asset-card:hover {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
}
.svc-asset-card-media {
  display: block;
  background: #f7f7f7;
  /* 10rem (Tony 2026-07-06) — the hero is a recognition aid, not the
     content; padding keeps the render from touching the card edges. */
  height: 10rem;
  padding: 0.5rem 0;
  box-sizing: border-box;
  text-align: center;
}
.svc-asset-card-media img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.svc-asset-card-media-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.svc-asset-card-body {
  padding: 0.875rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.svc-asset-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.svc-asset-card-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1a1a1a;
}
.svc-asset-card-specs {
  display: flex;
  gap: 0.625rem;
  font-size: 0.75rem;
  color: #64748b;
}
.svc-asset-card-group {
  color: #94a3b8;
}
.svc-asset-card-levels {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 2px;
}
.svc-mlevel-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid #ececec;
  border-radius: 0.25rem;
  text-decoration: none;
  color: #1a1a1a;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.svc-mlevel-link:hover {
  border-color: #1a1a1a;
  background: #fafafa;
}
.svc-mlevel-badge {
  background: #1a1a1a;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 3px;
  padding: 2px 0.4375rem;
  flex: 0 0 auto;
}
.svc-mlevel-name {
  flex: 1;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-mlevel-price {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.svc-mlevel-name {
  flex: 1;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-mlevel-price {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
/* UB 8158351 / SHOP-775 — the price basis, for internal viewers only. The
   prices above are already regional GA (L x 0.70) for a Siemens Energy
   viewer; without this line the card printed a bare number identical in
   presentation to a customer's raw-L number. Deliberately quiet: it labels
   the column, it is not a call to action. */
.svc-mlevel-basis {
  font-size: 0.6875rem;
  color: #64748b;
  letter-spacing: 0.01em;
  padding: 0 0.625rem;
  margin-top: 1px;
  cursor: help;
}
/* 7878583: spare-parts free-text search box on the asset-type page. */
.at-spare-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.75rem 0 0.25rem;
  max-width: 26.25rem;
}
/* neutral focus (was teal #0f766e/#ccfbf1 — a colour found nowhere else; cohesion #7). */
.at-spare-search input[type="search"]:focus {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08);
}

/* SHOP-167: was a faint 12.5px teal text-link customers overlooked. Now a clear
 * outline button-style affordance at the card footer. */
.svc-asset-card-catalog-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8438rem;
  font-weight: 600;
  color: #0f766e;
  text-decoration: none;
  border: 1px solid #0f766e;
  border-radius: 0.375rem;
  background: #f0fdfa;
  transition:
    background 0.15s,
    color 0.15s;
}
.svc-asset-card-catalog-link:hover {
  background: #0f766e;
  color: #fff;
  text-decoration: none;
}

/* ── Configurator hero compaction (stakeholder 2026-06-12: "header too
 * bulky"). Tighter paddings, smaller single-line-friendly title, slimmer
 * stat band. Appended last so it wins the cascade. */
.configurator-header {
  padding: 1rem 0 0.75rem;
}
.configurator-header h1 {
  font-size: clamp(1.25rem, calc(1.8 * var(--vwx)), 1.63rem);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}
.configurator-header .header-hero {
  gap: 0.75rem;
}
.configurator-stats,
.config-stats,
.stats-band {
  padding: 0.625rem 0;
}
.configurator-header .stat-value,
.configurator-stats .stat-value {
  font-size: 1.25rem;
}

/* Stat band + M-level badge polish (2026-06-12): tiles slimmer; the M1/M2/M3
 * chips go from solid black to subtle gray — they're wayfinding, not CTAs. */
.configurator-kpi-tile {
  padding: 0.625rem 1.125rem 0.625rem 0;
}
.configurator-kpi-value {
  font-size: 1.25rem;
}
.maintenance-level-badge,
.package-level-badge,
.service-level-badge,
.svc-mlevel-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
  font-weight: 600;
}

/* ============================================================
   INTERNAL OFFER VIEW — DARK MODE
   Two scopes, both internal-staff only:
   1) .offer-draft-page / .rep-offers-page — rep-exclusive pages
      (no public equivalent), themed directly.
   2) .assisting-mode (set on <html> by Header while an AM is in an
      assisted-selling session) — scopes dark overrides onto the
      SHARED catalog/PDP so the public storefront is NEVER affected.
   Token flip does most of the work; hardcoded white/light surfaces
   are overridden explicitly so nothing is left light-on-dark.
   ============================================================ */

.offer-draft-page,
.rep-offers-page,
html.assisting-mode body {
  /* Flip the neutral gray ramp to a dark palette. Most surfaces read
     these tokens, so this inverts text/bg coherently in one place. */
  --color-gray-50: #1a1f2e;
  --color-gray-100: #232936;
  --color-gray-200: #2d3442;
  --color-gray-300: #3a4150;
  --color-gray-400: #6b7280;
  --color-gray-500: #9aa3b2;
  --color-gray-600: #c2c8d2;
  --color-gray-700: #d7dbe2;
  --color-gray-800: #e8ebf0;
  --color-gray-900: #f4f6fa;
  --border: #2d3442;
  --muted-foreground: #9aa3b2;
}

/* ── Rep offer draft page ─────────────────────────────────── */
.offer-draft-page,
.offer-draft-page .draft-page-container,
.offer-draft-page .container {
  background: #14181f !important;
  color: #e8ebf0;
}
.offer-draft-page .draft-item-card,
.offer-draft-page .settings-panel,
.offer-draft-page .totals-section,
.offer-draft-page .customer-info,
.offer-draft-page .send-confirmation,
.offer-draft-page .offer-url-section {
  background: #1d232e !important;
  border-color: #2d3442 !important;
  color: #e8ebf0;
}
.offer-draft-page .draft-header .header-title,
.offer-draft-page .item-name,
.offer-draft-page .total-value,
.offer-draft-page .price-value,
.offer-draft-page .item-total {
  color: #f4f6fa !important;
}
.offer-draft-page .item-sku,
.offer-draft-page .help-text,
.offer-draft-page .total-label,
.offer-draft-page .draft-note,
.offer-draft-page .offer-url-label {
  color: #9aa3b2 !important;
}
.offer-draft-page .form-select,
.offer-draft-page .price-input,
.offer-draft-page .offer-url-input {
  background: #14181f !important;
  border-color: #3a4150 !important;
  color: #e8ebf0 !important;
}

/* ── Rep portal content area (sidebar already dark) ───────── */
.rep-offers-page .rep-main-content {
  background: #14181f !important;
  color: #e8ebf0;
}
.rep-offers-page .rep-main-content .report-card,
.rep-offers-page .rep-main-content .offer-card,
.rep-offers-page .rep-main-content table {
  background: #1d232e !important;
  border-color: #2d3442 !important;
  color: #e8ebf0;
}

/* ── Catalog / PDP while assisting (SHARED classes, gated) ── */
html.assisting-mode body {
  background: #14181f;
}
html.assisting-mode .catalog-page,
html.assisting-mode .product-page,
html.assisting-mode .pdp-main,
html.assisting-mode main {
  background: #14181f !important;
  color: #e8ebf0;
}
html.assisting-mode .product-card,
html.assisting-mode .pdp-info-panel,
html.assisting-mode .pdp-bottom-action,
html.assisting-mode .filter-panel,
html.assisting-mode .catalog-card {
  background: #1d232e !important;
  border-color: #2d3442 !important;
  color: #e8ebf0;
}
html.assisting-mode .pdp-price-value,
html.assisting-mode .product-title,
html.assisting-mode .pdp-spec-value {
  color: #f4f6fa !important;
}
/* Keep product imagery on a light plate so cut-out parts stay legible. */
html.assisting-mode .product-image,
html.assisting-mode .pdp-gallery,
html.assisting-mode .pdp-image,
html.assisting-mode .product-card img {
  background: #ffffff !important;
  border-radius: 0.5rem;
}

/* Route auth guard — white overlay + spinner while the JS /me check runs.
   Added by the pre-paint script (main.server.dart) for protected routes when
   __MAY_BE_AUTHED__ is false; removed by main.client.dart once auth resolves. */
html.route-auth-pending body > * {
  visibility: hidden;
}
html.route-auth-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 99999;
}
html.route-auth-pending::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 3px solid #eee;
  border-top-color: #1b1b1b;
  border-radius: 50%;
  animation: sq-spin 0.8s linear infinite;
  z-index: 100000;
}

/* Graceful "no auto-match" states — never a dead-end (FIX B, asset-search UX) */
.svc-empty-asset,
.at-graceful-empty {
  max-width: 35rem;
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}
.svc-empty-asset__title,
.at-graceful-empty__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.5rem;
}
.svc-empty-asset__sub,
.at-graceful-empty__sub {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.svc-empty-asset__actions,
.at-graceful-empty__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn.btn-tertiary {
  background: transparent;
  color: #475569;
  border: none;
  text-decoration: underline;
}

/* Asset-picker dropdown — overlay instead of push (FIX D: kill content flash/reflow) */
.asset-picker-results-anchor {
  position: relative;
  /* reserve a tiny strip so the loading line doesn't shift the layout */
  min-height: 2px;
}
.asset-picker-results-anchor .asset-picker-suggestions {
  position: absolute;
  top: 0.25rem;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.625rem;
  box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.12);
  max-height: 20rem;
  overflow-y: auto;
}
.asset-picker-results-anchor .asset-picker-status,
.asset-picker-results-anchor .asset-picker-error {
  position: absolute;
  top: 0.25rem;
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.9rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
}
.asset-picker-status--loading {
  color: #475569;
}
.asset-picker-status--loading::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.5rem;
  border: 2px solid #cbd5e1;
  border-top-color: #0f766e;
  border-radius: 50%;
  vertical-align: -2px;
  animation: ap-spin 0.7s linear infinite;
}
@keyframes ap-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Asset chip: kind "matching to catalogue" pill instead of raw UNMATCHED (FIX C) */
.asset-picker-selected-type--pending {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
  font-style: italic;
}

/* Spare-parts PLP-style grid + list/grid toggle (2026-06-23) — surfaces part
   images; consistent with the catalog PLP card density. */
.at-spare-viewtoggle {
  display: flex;
  gap: 0.375rem;
  margin: 0.75rem 0;
}
.at-spare-grid {
  /* Tighter grid — smaller min card width packs more per row + less bulky feel. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.875rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
/* Consolidated spare controls toolbar — one row: filters left, view-toggle right.
   Replaces the 3 stacked rows (op/strat, category chips, view toggle) that felt bulky. */
.at-spare-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.625rem 0 0.25rem;
  flex-wrap: wrap;
}
/* Tighter chips — smaller, uniform, scannable. */

.at-spare-card {
  /* radius 14 (≈ --radius-card) + 1px #f2f2f2 hairline to match .product-card-link family
     instead of the tighter 8px/#e5e7eb that read as a different product (cohesion #6). */
  border: 1px solid #f2f2f2;
  border-radius: 0.875rem;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}
.at-spare-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}
/* Selection state for pick-flows that reuse the card (tool-sales catalog) */
.at-spare-card--selected {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 1px #1a1a1a inset;
}
.at-spare-card__img {
  /* shorter image band so cards aren't tall/bulky */
  aspect-ratio: 16 / 10;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.at-spare-card__imgtag {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.at-spare-card__noimg {
  color: #9ca3af;
  font-size: 0.6875rem;
}
/* calmer, less cramped cards — more padding + larger name + roomier gap (cohesion #11 de-noise). */
.at-spare-card__body {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}
.at-spare-card__mlfb {
  font-size: 0.6875rem;
  color: #6b6b6b;
  font-family: monospace;
}
.at-spare-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #242424;
  line-height: 1.3;
}
.at-spare-card__desc {
  font-size: 0.6875rem;
  color: #6b7280;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Meta chips row — op/strat, lead time, weight (the "more info per product" ask). */
.at-spare-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 2px 0;
}
.at-spare-card__tag {
  font-size: 0.625rem;
  padding: 1px 0.375rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
}
/* op/strat carries real meaning but the saturated amber/blue pairs were a color system unique to
   this page. Reduce to one neutral chip + a quiet left accent so the distinction reads through the
   LABEL ("Strategic"/"Operational"), not four loud colors (cohesion #7/#12). */
.at-spare-card__tag--strategic {
  background: #f5f5f5;
  color: #242424;
  border-color: #e0e0e0;
}
.at-spare-card__tag--operational {
  background: #f5f5f5;
  color: #242424;
  border-color: #e0e0e0;
}
.at-spare-card__price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #242424;
  margin-top: 2px;
}
.at-spare-card__img--clickable {
  cursor: pointer;
}
.at-spare-card__name--link {
  cursor: pointer;
}
/* neutral hover (was indigo #4f46e5 — off the storefront's #1a1a1a/#242424 palette, cohesion #7). */
.at-spare-card__name--link:hover {
  color: #1a1a1a;
  text-decoration: underline;
}

/* List-view thumbnail column */
.at-spare-th-img,
.at-spare-td-img {
  width: 3.5rem;
  padding: 0.375rem 0.5rem !important;
}
.at-spare-td-img {
  cursor: pointer;
}
.at-spare-thumb {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  border-radius: 0.375rem;
  background: #f9fafb;
  border: 1px solid #f0f0f0;
  display: block;
}
.at-spare-thumb--empty {
  background: repeating-linear-gradient(
    45deg,
    #f3f4f6,
    #f3f4f6 0.25rem,
    #fafafa 0.25rem,
    #fafafa 0.5rem
  );
}

/* ── Part-detail modal ─────────────────────────────────────────────── */
.at-pmodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.at-pmodal {
  position: relative;
  background: #fff;
  border-radius: 0.75rem;
  width: min(52.5rem, 100%);
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.3);
}
.at-pmodal__close {
  position: absolute;
  top: 0.625rem;
  right: 0.75rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: none;
  background: #f3f4f6;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: #374151;
  cursor: pointer;
}
.at-pmodal__close:hover {
  background: #e5e7eb;
}
.at-pmodal__body {
  display: grid;
  grid-template-columns: 20rem 1fr;
  max-height: 88vh;
}
/* Imageless part: no media pane at all — info spans the full modal
   (a half-width "No image" tile made every imageless part look broken). */
.at-pmodal__body--nomedia {
  grid-template-columns: 1fr;
}
.at-pmodal__media {
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.at-pmodal__img {
  max-width: 100%;
  max-height: 22.5rem;
  object-fit: contain;
}
.at-pmodal__noimg {
  color: #9ca3af;
  font-size: 0.8125rem;
}
.at-pmodal__info {
  padding: 1.75rem 1.75rem 1.5rem;
  overflow-y: auto;
}
.at-pmodal__optag {
  display: inline-block;
  margin-bottom: 0.5rem;
}
.at-pmodal__name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.at-pmodal__mlfb {
  font-family: monospace;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.625rem;
}
.at-pmodal__price {
  font-size: 1.375rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.875rem;
}
.at-pmodal__desc {
  font-size: 0.8125rem;
  color: #4b5563;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.at-pmodal__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.125rem;
  margin-bottom: 1.25rem;
}
.at-pmodal__spec {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.at-pmodal__spec-k {
  font-size: 0.6875rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.at-pmodal__spec-v {
  font-size: 0.8125rem;
  color: #111827;
  font-weight: 500;
}

/* Bill of materials inside the part-detail modal (owner request
   2026-08-31): compact read-only rows under the specs/actions. Scrolls
   internally past ~9 rows so a 30-part kit can't grow the modal off
   screen. */
.at-pmodal__bom {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-200);
}
.at-pmodal__bom-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}
.at-pmodal__bom-rows {
  max-height: 16rem;
  overflow-y: auto;
}
.at-pmodal__bom-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
  padding: var(--spacing-1) 0;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 0.8125rem;
}
.at-pmodal__bom-row:last-child {
  border-bottom: none;
}
.at-pmodal__bom-name {
  flex: 1 1 auto;
  min-width: 0;
}
.at-pmodal__bom-code {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-gray-500);
  font-family: var(--font-mono, monospace);
}
.at-pmodal__bom-sub {
  color: var(--color-gray-500);
}
.at-pmodal__bom-qty {
  flex: 0 0 auto;
  color: var(--color-gray-600);
  white-space: nowrap;
}
.at-pmodal__bom-total {
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.at-pmodal__bom-thumb {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  align-self: center;
}
.at-pmodal__bom-thumb--empty {
  display: inline-block;
}

/* Sub-part image gallery in the media pane — shown only when the kit itself
   has no image (owner request 2026-08-31). Grid over the same soft ground
   the No-image tile used; cells self-remove on dead presigned URLs. */
.at-pmodal__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: center;
  width: 100%;
  padding: 1rem;
}
.at-pmodal__gallery-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.at-pmodal__gallery-img {
  /* Explicit box, not max-constraints: an unloaded img has 0 intrinsic
     size, so max-only sizing renders it 0x0 — and Chromium never fetches
     a zero-size lazy image (the no-requests trap, 2026-08-31). */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.at-pmodal__actions {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 1.125rem;
}
.at-pmodal__btn {
  flex: 1;
  padding: 0.625rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.at-pmodal__btn--cart {
  border: 1px solid #1a1a1a;
  background: #fff;
  color: #1a1a1a;
}
.at-pmodal__btn--cart:hover {
  background: #1a1a1a;
  color: #fff;
}
.at-pmodal__btn--rfq {
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #fff;
}
.at-pmodal__btn--rfq:hover {
  background: #111827;
}
.at-pmodal__docs-head {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
/* SHOP-301/302 — provenance note under the docs head: these are asset-type
   documents, not part datasheets. Muted so it reads as a caption. */
.at-pmodal__docs-note {
  font-size: 0.75rem;
  color: #6b6b6b;
  margin: -0.25rem 0 0.5rem;
}
.at-pmodal__docs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.at-pmodal__doc button {
  background: none;
  border: none;
  padding: 0.375rem 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #4f46e5;
  text-align: left;
  width: 100%;
}
.at-pmodal__doc button:hover {
  text-decoration: underline;
}
/* "All N documents →" tail row — muted, reads as navigation not a download */
.at-pmodal__doc--more button {
  color: #6b7280;
  font-weight: 600;
}
.at-pmodal__doc--more button:hover {
  color: #1a1a1a;
}

.at-spare-card__add {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #fff;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
}
/* compact secondary on PRICED cards — quiet text link beneath the primary Add-to-cart, so each
   card has ONE dominant button instead of two equal blocks (cohesion critic #2, de-noise). */
.at-spare-card__add--compact {
  margin-top: 0.25rem;
  padding: 0.25rem 0.375rem;
  border: none;
  background: transparent;
  color: #6b6b6b;
  border-radius: 0;
  font-size: 0.75rem;
  text-decoration: underline;
  text-decoration-color: #d4d4d4;
  text-underline-offset: 2px;
}
.at-spare-card__add--compact:hover {
  color: #1a1a1a;
  text-decoration-color: #1a1a1a;
}
/* success/in-quote state keeps green (matches PDP "Added ✓" success vocabulary) */
.at-spare-card__add--in {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
/* but a compact + in-quote link shows green text, not a green block */
.at-spare-card__add--compact.at-spare-card__add--in {
  background: transparent;
  border: none;
  color: #15803d;
  text-decoration-color: #15803d;
}

/* Add-to-cart on priced spare cards — same near-black BUY treatment as the PDP/cart,
   secondary to RFQ via the outline. Green was off the storefront's buy vocabulary. */
.at-spare-card__cart {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #1a1a1a;
  background: #fff;
  color: #1a1a1a;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
  font-weight: 500;
}
.at-spare-card__cart:hover {
  background: #1a1a1a;
  color: #fff;
}

/* Candidate-variant chips in the services empty state (family-generic asset) */
/* "Asset found but no standard package" state — show the asset's own details so it's not a dead-end. */
.svc-empty-asset__badge {
  display: inline-block;
  margin-bottom: 0.625rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.svc-empty-asset__info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.375rem 1rem;
  margin: 0.875rem 0 1.125rem;
  padding: 0.875rem 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  max-width: 27.5rem;
}
.svc-empty-asset__info-row {
  display: contents;
}
.svc-empty-asset__info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
}
.svc-empty-asset__info-value {
  font-size: 0.8125rem;
  color: #1a1a1a;
  font-weight: 500;
}
.svc-empty-asset__candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.svc-candidate-chip {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #1f2937;
  border-radius: 1.25rem;
  background: #fff;
  color: #1f2937;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.svc-candidate-chip:hover {
  background: #1f2937;
  color: #fff;
}

/* ================================================================
   Unified-search serial suggestions (anchored dropdown) + asset-type
   "YOUR ASSET" strip. The old path rendered results inside the hidden
   headless AssetPicker — i.e. never.
   ================================================================ */
.svc-search-input-wrap {
  position: relative;
}
.svc-serial-suggestions {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.14);
  max-height: 20rem;
  overflow-y: auto;
}
.svc-serial-suggestion {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  color: #1a1a1a;
  transition: background 0.12s;
}
.svc-serial-suggestion:hover,
.svc-serial-suggestion:focus-visible,
.svc-serial-suggestion--active {
  background: #f3f4f6;
}
.svc-serial-suggestions__group {
  padding: 0.5rem 0.875rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-top: 1px solid #e5e7eb;
}
.svc-serial-suggestion__serial {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.svc-serial-suggestion__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #374151;
}
.svc-serial-suggestion__site {
  color: #6b7280;
  font-size: 0.75rem;
  white-space: nowrap;
  max-width: 11.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-serial-suggestion__arrow {
  flex: none;
  color: #9ca3af;
}
.svc-serial-suggestion:hover .svc-serial-suggestion__arrow {
  color: #1a1a1a;
}

/* PLP "Shop for this site / asset" context strip (catalog_page.dart
   _buildAssetContextStrip). Sits between the PDL header and the toolbar;
   inherits the page's neutral tokens, no colour of its own. */
.plp-asset-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2) var(--spacing-3);
  margin: var(--spacing-2) clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem) var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}
.plp-asset-context__badge {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
  white-space: nowrap;
}
.plp-asset-context__title {
  font-weight: 600;
  color: var(--color-primary);
}
.plp-asset-context__hint {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}
.plp-asset-context__spacer {
  flex: 1 1 auto;
}
.plp-asset-context__back,
.plp-asset-context__clear {
  font-size: var(--font-size-xs);
  color: var(--color-gray-700);
  text-decoration: none;
  white-space: nowrap;
}
.plp-asset-context__back {
  font-weight: 600;
}
.plp-asset-context__clear {
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  color: var(--color-gray-500);
}
.plp-asset-context__back:hover,
.plp-asset-context__clear:hover {
  color: var(--color-primary);
  border-color: var(--color-gray-500);
  text-decoration: none;
}

/* Asset-type detail: the unit the buyer searched for */
.at-selected-asset {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 1.5rem 1rem;
  padding: 0.625rem 1rem;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
}
.at-selected-asset__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0369a1;
  white-space: nowrap;
}
.at-selected-asset__name {
  font-weight: 600;
  color: #1a1a1a;
}
.at-selected-asset__meta {
  color: #4b5563;
  white-space: nowrap;
}
.at-selected-asset__clear {
  margin-left: auto;
  padding: 0.25rem 0.625rem;
  background: none;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #475569;
  cursor: pointer;
}
.at-selected-asset__clear:hover {
  border-color: #64748b;
  color: #1a1a1a;
}
.at-selected-asset__spacer {
  flex: 1;
}
.at-selected-asset__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.at-selected-asset__loc svg {
  flex: none;
  color: #0369a1;
}
.at-selected-asset__map {
  flex: none;
  display: block;
  line-height: 0;
}
.at-selected-asset__map-tile {
  position: relative;
  width: 6.75rem;
  height: 3.5rem;
  border-radius: 0.375rem;
  border: 1px solid #7dd3fc;
  background-color: #e0f2fe;
  background-repeat: no-repeat;
  overflow: hidden;
  filter: saturate(0.85);
  transition: filter 0.15s;
}
.at-selected-asset__map:hover .at-selected-asset__map-tile {
  filter: saturate(1.15);
}
.at-selected-asset__map-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  margin: -0.3125rem 0 0 -0.3125rem;
  border-radius: 50%;
  background: #0284c7;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.4);
}

/* ── Configurator compaction round 2 (2026-07-04, Gemini consult on live page) ──
   1. Category summary pills duplicated the accordion headers 1:1 (same count,
      same Σ) — pure noise, hidden.
   2. Per-question mini-cards (border + 20px pad) flattened to plain form
      fields; the section card already frames them.
   3. Section card padding 20 → 16. */
.package-configurator-page .component-bom-categories {
  display: none;
}
.package-configurator-page .config-question {
  border: none;
  padding: 0.25rem 0;
}
.package-configurator-page .config-section {
  padding: 1rem 1.25rem;
}

/* Asset-type spares: incremental rendering step (page was ~56k px with 755
   items rendered at once). */
.at-spare-showmore {
  display: flex;
  justify-content: center;
  padding: 1rem 0 0.25rem;
}

/* Compact variant of the YOUR ASSET strip for the configurator header —
   same visual, sized to sit under the H1 (no page-margin, no Clear). */
.at-selected-asset--compact {
  margin: 0.875rem 0 0;
  padding: 0.5rem 0.875rem;
}

/* Services category tiles reuse the PLP .category-tile component; this
   wrapper just provides the page-level spacing (the PLP scroll styles come
   from .category-nav-scroll). Package-part source pill for the
   "Additional order items" group. */
.svc-category-cards.category-nav-scroll {
  padding: 1rem 1.5rem 0.25rem;
  position: relative;
}
.at-source-pill--package {
  background: #ede9fe;
  color: #5b21b6;
}

/* Serial suggestion asset-type chip. (The services header tiles moved
   into the unified .svc-filter-area — SV1; their .svc-header-tiles rules
   are gone with the emitter.) */
.svc-serial-suggestion__type {
  flex: none;
  padding: 1px 0.5rem;
  background: #f4f4f4;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7188rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

/* Cart bottom actions: Empty cart left, Excel · PDF export links right —
   same lightweight link pair the configurator uses. */
.cart-panel-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Configurator stat chips replace the old full-width KPI band — the SAME
   .at-chip pills the asset-type header uses. */
.configurator-stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0 0.25rem;
}

/* Part thumbs: kill native image-drag + text-selection so a click with a few
   px of hand motion stays a CLICK (drag-start cancels the click event —
   the "image click does nothing" reports, 2026-07-24). */
.bom-thumb img,
.bom-thumb,
.at-pmodal__img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Display de-dup note (ledger #5, 2026-07-25): quiet line replacing parts
   suppressed because the primary kit already itemizes them. */
.component-bom-deduped-note {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: #64748b;
  font-style: italic;
  border-top: 1px dashed #e2e8f0;
}

/* ───── Serial lookup (/serial-lookup) ─────
   Explicit serial → asset search: customer tier (scoped autocomplete) +
   internal cross-customer tier (live Snowflake, snapshot badge on degrade). */
.serial-lookup-page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}
.serial-lookup-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.75rem 0 0.25rem;
}
.serial-lookup-subtitle {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
}
.serial-lookup-form {
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
}
.serial-lookup-input {
  flex: 1;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid #d0d7de;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.serial-lookup-input:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
}
.serial-lookup-btn {
  height: 2.5rem;
  padding: 0 1.25rem;
  border: none;
  border-radius: 0.375rem;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.serial-lookup-btn:hover {
  background: #333333;
}
.serial-lookup-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.serial-lookup-hint,
.serial-lookup-loading {
  color: #64748b;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}
.serial-lookup-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-top: 1.75rem;
}
.serial-lookup-section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}
.serial-lookup-section-head .serial-lookup-section-title {
  margin: 0;
}
.serial-lookup-snapshot-badge {
  padding: 1px 0.5rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 0.625rem;
  font-size: 0.7188rem;
  font-weight: 600;
  white-space: nowrap;
}
.serial-lookup-empty {
  color: #64748b;
  font-size: 0.8125rem;
  padding: 0.5rem 0;
}
.serial-lookup-works-link {
  color: #641e8c;
  font-weight: 600;
}
/* Quiet by design — an internal-tier outage isn't a page error. */
.serial-lookup-unavailable {
  color: #94a3b8;
  font-size: 0.75rem;
  font-style: italic;
  margin: 0.25rem 0;
}
.serial-lookup-results {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-top: 0.5rem;
}
.serial-lookup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  flex-wrap: wrap;
}
.serial-lookup-row + .serial-lookup-row {
  border-top: 1px solid #e2e8f0;
}
.serial-lookup-row-main {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}
.serial-lookup-serial {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
}
.serial-lookup-customer {
  color: #374151;
  font-size: 0.8125rem;
}
.serial-lookup-type {
  color: #64748b;
  font-size: 0.8125rem;
}
.serial-lookup-meta {
  color: #94a3b8;
  font-size: 0.75rem;
}
.serial-lookup-pkg-link {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
  white-space: nowrap;
}
.serial-lookup-pkg-link:hover {
  text-decoration: underline;
}
/* My-assets header: the Find-by-serial + Search-by-serial buttons sit in one
   actions group so the header stays a single row. */
.my-assets-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* serial-lookup: whole-row links (field report 2026-07-28 — row body was dead) */
a.serial-lookup-row--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.serial-lookup-row--link:hover {
  background: #f1f5f9;
}
a.serial-lookup-row--link .serial-lookup-pkg-link {
  white-space: nowrap;
}
.serial-lookup-nolink {
  color: #94a3b8;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ══ PDP rich area as a landing page (stakeholder review, 2026-07-30) ═══════
   Ask: the area under the product top section should read like a classic
   e-commerce landing page carrying a few flyer highlights — not a vertical
   stack of grey cards.

   Cause of the stack: the base `.content-block` rule gives EVERY block a white
   ground, 12px radius, 2rem padding and a shadow, so ten blocks render as ten
   boxes regardless of what they contain. Only .spec-table-block opted out.

   Treatment: blocks become plain flow content on a shared ground, separated by
   rhythm and rules rather than boxes. What stays visually contained is what
   earns it — the Zero pillars (the flyer's own coloured rail) and the figures.
   ──────────────────────────────────────────────────────────────────────── */

.product-content-blocks > .container > .content-block.feature-highlight,
.product-content-blocks > .container > .content-block.cms-image-gallery,
.product-content-blocks > .container > .content-block.cms-tabs-block,
.product-content-blocks > .container > .content-block.cms-sub-brand-header,
.product-content-blocks > .container > .content-block.downloads-block {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Editorial rhythm: a hairline above each narrative section instead of a box
   around it. Skips the first so the section doesn't open with a rule. */
.product-content-blocks
  > .container
  > .content-block.feature-highlight
  + .content-block.feature-highlight {
  border-top: 1px solid var(--se-layer-02-stroke, #ebebeb);
  padding-top: var(--se-spacing-7, 1.75rem);
}

/* Bug: the rule above keys on DOM adjacency, but the grid pairs blocks by
   VISUAL row, and those two don't always agree. A full-width block (spec
   table, tabs, gallery, sub-brand header, …) breaks the DOM sibling chain,
   so the FIRST feature-highlight after it correctly skips the hairline — but
   the SECOND one is still DOM-adjacent to the first, so it gets border-top +
   padding-top that its own row-mate doesn't have. Visually: the second
   column's heading sits ~28px lower than the first, with a stray hairline
   on only one side of the row. Reset it for every full-width block type that
   can precede a feature-highlight pair, restoring row symmetry. */
.product-content-blocks
  > .container
  > .content-block.spec-table-block
  + .content-block.feature-highlight
  + .content-block.feature-highlight,
.product-content-blocks
  > .container
  > .content-block.cms-tabs-block
  + .content-block.feature-highlight
  + .content-block.feature-highlight,
.product-content-blocks
  > .container
  > .content-block.cms-image-gallery
  + .content-block.feature-highlight
  + .content-block.feature-highlight,
.product-content-blocks
  > .container
  > .content-block.cms-sub-brand-header
  + .content-block.feature-highlight
  + .content-block.feature-highlight,
.product-content-blocks
  > .container
  > .content-block.downloads-block
  + .content-block.feature-highlight
  + .content-block.feature-highlight,
.product-content-blocks
  > .container
  > .content-block.faq-block
  + .content-block.feature-highlight
  + .content-block.feature-highlight,
.product-content-blocks
  > .container
  > .content-block.callout
  + .content-block.feature-highlight
  + .content-block.feature-highlight {
  border-top: none;
  padding-top: 0;
}

/* Give the narrative a readable measure — full-bleed prose across a 1320px
   container is the other half of why this read as a data dump. */
.product-content-blocks > .container > .content-block.feature-highlight p,
.product-content-blocks > .container > .content-block.feature-highlight ul {
  max-width: 62ch;
}

/* Figures: let them breathe on the section ground rather than in a card. */
.product-content-blocks > .container > .content-block.cms-image-gallery {
  padding: clamp(2rem, calc(6 * var(--vwx)), 4rem) 0;
}

/* The sub-brand chip is a label, not a panel — let it sit inline at the top of
   the section like the flyer's masthead. */
.product-content-blocks > .container > .content-block.cms-sub-brand-header {
  padding-bottom: var(--se-spacing-2, 0.5rem);
}

/* Downloads is the flyer PDF's home. Keep the item rows contained (they are
   hit targets) but drop the outer box. */
.product-content-blocks > .container > .content-block.downloads-block {
  border-top: 1px solid var(--se-layer-02-stroke, #ebebeb);
  padding-top: var(--se-spacing-7, 1.75rem);
}

/* video-block had no rules at all — it inherited the card and nothing else.
   Match the others so an editor adding a video doesn't get a stray box. */
.product-content-blocks > .container > .content-block.video-block {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ══ Flyer-native callouts, without needing the data-pillar attribute ═══════
   Review: "the white ones with off border feel too flat and unrelated to the
   flyer."

   Right diagnosis. The base callout is a white panel with a 4px purple left
   border — the generic "notice" pattern every admin UI has. The flyer has no
   such object: its Zero pillars are SOLID violet blocks with white text and an
   icon, and its SF6-vs-clean-air comparison is a muted grey card beside a
   violet one.

   The earlier pillar styling keys on `h4[data-pillar]`, which is a Dart change
   that has NOT shipped — so on prod today every callout still renders flat.
   These rules key on the block's own `callout-info` / `callout-success`
   variants instead, which the deployed renderer already emits, so they take
   effect as soon as this CSS lands.
   ──────────────────────────────────────────────────────────────────────── */

/* Solid violet, like the flyer's pillars. The seeded pillars are info/success
   variants, so both get the treatment. */
.product-content-blocks > .container > .content-block.callout-info,
.product-content-blocks > .container > .content-block.callout-success {
  background: var(--flyer-violet, #4f2b80);
  border-left: 0;
  border-radius: var(--se-radius-card, 0.75rem);
  padding: var(--se-spacing-7, 1.75rem) var(--se-spacing-8, 2rem);
  box-shadow: none;
}

.product-content-blocks > .container > .content-block.callout-info h4,
.product-content-blocks > .container > .content-block.callout-success h4 {
  color: #ffffff;
  font-size: var(--se-font-size-h5, 1.25rem);
  line-height: var(--se-line-height-h5, 1.5rem);
  letter-spacing: -0.01em;
  margin: 0 0 var(--se-spacing-3, 0.75rem);
}

.product-content-blocks
  > .container
  > .content-block.callout-info
  .callout-content,
.product-content-blocks
  > .container
  > .content-block.callout-success
  .callout-content {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.product-content-blocks
  > .container
  > .content-block.callout-info
  .callout-content
  ul,
.product-content-blocks
  > .container
  > .content-block.callout-success
  .callout-content
  ul {
  margin: 0;
  padding-left: 1.125rem;
}

.product-content-blocks
  > .container
  > .content-block.callout-info
  .callout-content
  li,
.product-content-blocks
  > .container
  > .content-block.callout-success
  .callout-content
  li {
  margin: 0 0 var(--se-spacing-2, 0.5rem);
  line-height: 1.4;
}

.product-content-blocks
  > .container
  > .content-block.callout-info
  .callout-content
  p,
.product-content-blocks
  > .container
  > .content-block.callout-success
  .callout-content
  p {
  max-width: 62ch;
  margin: 0;
}

/* The pillars pair two-up like the flyer's rail rather than spanning full
   width one after another. */
.product-content-blocks > .container > .content-block.callout-info,
.product-content-blocks > .container > .content-block.callout-success {
  grid-column: auto;
}

/* ── SF6 vs clean air tabs: the flyer's muted-vs-violet pairing ─────────── */
.product-content-blocks
  > .container
  > .content-block.cms-tabs-block
  .cms-tab-labels {
  border-bottom: 1px solid var(--se-layer-02-stroke, #ebebeb);
  gap: 0;
}

.product-content-blocks
  > .container
  > .content-block.cms-tabs-block
  .cms-tab-label {
  padding: var(--se-spacing-3, 0.75rem) var(--se-spacing-6, 1.5rem);
  font-weight: 700;
  color: var(--se-text-secondary, #666);
  border-bottom: 3px solid transparent;
}

/* Selected tab gets the flyer violet underline — the tab strip reads as part
   of the same family as the pillars instead of as browser chrome. */
.product-content-blocks
  > .container
  > .content-block.cms-tabs-block
  .cms-tab-input:checked
  + .cms-tab-labels
  .cms-tab-label:first-child,
.product-content-blocks
  > .container
  > .content-block.cms-tabs-block
  .cms-tab-label:hover {
  color: var(--flyer-violet, #4f2b80);
  border-bottom-color: var(--flyer-violet, #4f2b80);
}

/* The equation callout rendered violet-on-violet: .callout-content got the
   white colour but its child <p> (emitted by the Lexical renderer) inherited
   the darker default from a later `p` rule. Colour the descendants explicitly,
   not just the wrapper. */
.product-content-blocks
  > .container
  > .content-block.callout-info
  .callout-content
  p,
.product-content-blocks
  > .container
  > .content-block.callout-info
  .callout-content
  li,
.product-content-blocks
  > .container
  > .content-block.callout-success
  .callout-content
  p,
.product-content-blocks
  > .container
  > .content-block.callout-success
  .callout-content
  li {
  color: rgba(255, 255, 255, 0.9);
}

/* Per-product serial rows in the Brazil RFQ checkout (Tony review
   2026-07-28: serial is per product and optional). */
.checkout-asset-item-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-top: 0.5rem;
}
.checkout-asset-item-label:first-child {
  margin-top: 0;
}

/* Explicit label above each serial/year control — house form pattern
   (label above input, never placeholder-as-label). Lighter weight than the
   product name above it so the product still reads as the group header. */
.checkout-asset-serial-year .checkout-asset-field-label {
  display: block;
  margin: 0.5rem 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b6b6b;
}

/* Address book — DEFAULT flag column (Tony 2026-07-28: no Type column;
   the default flags carry the meaning). Quiet pill so a table of mostly
   non-defaults doesn't read as noisy, and an em-dash placeholder so the
   column still scans vertically. */
.address-default-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.address-default-none {
  color: #9ca3af;
}

/* ═══ L7 — height-aware fold economy (WS-FOLD, PO 2026-07-31) ═══════════════
   At short viewports (max-height 35rem ≈ 560px at default root: small
   windows, high zoom) the /catalog + /my-catalog + /services header chrome
   compresses so the FIRST CARD ROW starts inside the first viewport
   (853×480 target). Sanctioned mechanic: HEIGHT media query (precedent:
   cart summary un-stick <30rem). The root font-size clamp is untouched
   (shrinking type at high zoom is anti-accessibility) and the block anatomy
   is unchanged — same rows, tighter scale/density (anatomy-follows-design).
   ≥35rem renders byte-identical. Placed at EOF on purpose: overrides the
   base + .catalog-page--dyn rules by cascade order at equal specificity. */

/* The .plp-active-q chip that used to live here is gone. It existed only
   because the height tier below hid the full-width .plp-search bar and an
   applied ?q= still had to be visible somewhere. The filter is now an inline
   control in the results row that costs no row of its own, so it stays put at
   every height and carries its own applied state (.plp-filter__toggle--active
   when collapsed, the value in the field when open). */

@media (max-height: 35rem) and (pointer: coarse) {
  /* 1) Title band: h1 scales down hard (floor 1.25rem) and keeps sharing
     its row with the category tiles (.product-header--strip on the PLP,
     .svc-header-tiles on /services — both use .category-tile, which slims
     to match). Breadcrumb row merges tighter to the h1 block.
     pointer:coarse guards against triggering on desktop at high zoom levels
     (e.g. Mac/HP laptops at 150% where CSS viewport height drops below 560px). */
  .catalog-page .pdl-header {
    gap: 0.25rem;
  }
  .catalog-page .product-header-title {
    font-size: clamp(1.25rem, calc(2 * var(--vwx)), 1.5rem);
  }
  .sort-dropdown-label,
  .sort-dropdown-value {
    font-size: 0.875rem;
  }
  /* Legacy stacked strip (non-dyn) merges up too. */
  .catalog-page > .category-nav-wrapper {
    margin-top: 0.5rem;
  }

  /* 2) The PLP's own filter used to be hidden here — it was a full-width bar
     under the title and cost a whole row of fold. Inline in the results row
     it costs none, so it STAYS (hiding a control the ⌘/Ctrl+F shortcut and
     the collapsed trigger both point at would be a dead end) and just slims
     to the tier's control height below. /services keeps its serial/package
     search (nothing else covers it) but slimmed below. */

  .catalog-content-header .sort-dropdown {
    height: 2.125rem;
    padding: 0.25rem 0.75rem;
  }
  .products-list-header .plp-filter__toggle {
    width: 2.625rem;
    height: 2.625rem;
  }
  .products-list-header .plp-filter__form {
    padding: 0.5rem 0.75rem;
  }
  .products-list-header .plp-filter--open {
    flex: 0 1 14rem;
  }

  /* 4) /services: search bar, fleet strip and the unified filter area
     compress; first package cards reach the fold. */
  .services-page .svc-search-bar {
    /* item 21: keep the shared page gutter horizontally in the fold tier. */
    padding: 0.375rem clamp(1rem, calc(2.6 * var(--vwx)), 2.5rem);
  }
  .services-page .svc-search-input-wrap {
    padding: 0.3125rem 0.75rem;
  }
  .services-page .svc-fleet-summary {
    padding: 0.25rem 1.5rem;
  }
  /* (svc-filter-area fold rules deleted — S6: the services facets live in
     the PLP filter rail now, which has its own fold behavior.) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   OFFER IN REVISION

   An offer-backed price whose offer has stopped binding. Deliberately styled
   as its own state rather than folded into the two that look like it:
     - "On request"  — we never quoted a price; the buyer should ask for one.
     - "Price unavailable" — an entitlement gap; someone else has this price.
   Here we DID quote a price, it has lapsed, and a revised one is coming. The
   type scale is inherited from the existing non-numeric price classes
   (.pdp-price-quote / .lead-price-on-request) so nothing about the layout
   moves; only the colour and the disabled affordances are new.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Muted amber — reads as "pending", not as an error (red) and not as a
   neutral absence (the gray used by "On request"). */
.pdp-price-value.pdp-price-in-revision,
.lead-price-on-request.lead-price-in-revision,
.pdp-price-validity--revision {
  color: #8a5a00;
}

/* A frame contract whose validity date has PASSED but whose prices we still
   honour (the entitlement signed-source rule). The date is struck and muted so
   it cannot be misread as current; the note carries the same amber as the
   offer-expiry copy above, so "this date is behind us" looks the same wherever
   the PDP says it. No binding claim is made or implied — offer_validity_basis
   stays "none" for these products. */
.pdp-contract-validity--expired {
  text-decoration: line-through;
  color: #767676;
}
.pdp-contract-validity-note {
  color: #8a5a00;
  white-space: normal;
}

/* Tooltip wrapper for a NATIVELY-disabled cart button.
   A disabled <button> receives no pointer events, so its own `title` never
   renders — the hover text would be present in the markup and invisible in
   the browser. `.pdp-cart-btn.disabled` already sets `pointer-events: none`
   (see the sparse-matrix rule above), so the hover lands on this wrapper and
   both the native tooltip and the bubble below work. */
.pdp-cart-btn-tip {
  position: relative;
  display: inline-flex;
}

/* The wrapper only works if the hover can actually reach it. A disabled
   <button> is still the hit target, so without this the pointer stops at the
   button and the wrapper never matches :hover — the tooltip would be in the
   markup and invisible.
   `.pdp-cart-btn.disabled` already sets this globally (see the sparse-matrix
   rule above), which is why the buy box worked; the sticky buy bar's
   `.pdp-buy-bar-cta` has a disabled *style* but no pointer-events rule, so it
   would have silently lost its tooltip on the one surface that is the ONLY
   buy path at narrow widths. Scoped to the wrapper so the other disabled
   states (sparse variant matrix, Brazil spec gate) keep their behaviour. */
.pdp-cart-btn-tip > [disabled],
.pdp-cart-btn-tip > [aria-disabled="true"] {
  pointer-events: none;
}

/* PLP card: the action element is a <span>, so `disabled` is inert on it and
   the state is carried by `aria-disabled` + this class (and by the click
   listener simply not being attached). */
.product-card-action-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pdp-cart-btn-tip::after,
.product-card-action--in-revision .product-card-action-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: #242424;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  /* The bubble must never eat the hover that summoned it. */
  pointer-events: none;
  z-index: 5;
}

/* The card's basket control sits hard against the card's right edge, so a
   centre-anchored bubble overflows and gets clipped by the card. Anchor it to
   the button's right edge instead — it then grows leftwards, into the card. */
.product-card-action--in-revision .product-card-action-btn::after {
  left: auto;
  right: 0;
  transform: none;
}

.pdp-cart-btn-tip:hover::after,
.pdp-cart-btn-tip:focus-within::after,
.product-card-action--in-revision .product-card-action-btn:hover::after,
.product-card-action--in-revision
  .product-card-action-btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
/* SOPHIE's per-package guidance — crew make-up, scaffolding, earthing notes
   (UB 8144777). Set apart from the prose description because it reads as a
   short checklist, not a paragraph. */
.about-sml-notes {
  margin-top: 0.75rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--color-border, #d8d8d8);
}
.about-sml-note-line {
  margin: 0 0 0.25rem;
  line-height: 1.5;
}
.about-sml-note-line:last-child {
  margin-bottom: 0;
}

/* ── A FAILED image src, on the services card ───────────────────────────────
   Ported from feat/plp-figma-parity's components/common/img_fallback.dart
   (services-leaf pull, UB task #85) — same rules verbatim, scoped here to the
   services card only (that branch's PLP/spares/asset-type-hero call sites are
   its own, not pulled).

   Every one of these cards already had a placeholder for "no image" and none
   had one for "there IS an image and it 404'd" — so a missing S3 object or an
   expired presigned URL left the browser's broken-image glyph next to the alt
   text. The image is hidden and its PARENT renders the fallback in the space
   the image occupied. */
.img-failed {
  display: none;
}
.has-failed-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f8fa;
}
/* The services card stamps data-img-label with the asset-type CODE — what a
   service buyer recognises the machine by. */
.has-failed-img[data-img-label]::after {
  content: attr(data-img-label);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: #94a3b8;
}
.has-failed-img:not([data-img-label]) {
  min-height: 2.5rem;
}

/* ── Shipment card (order detail · SHIPPING & HANDLING) ─────────────── */
.shipment-card {
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 0.875rem 1rem;
  margin-top: 0.5rem;
  background: #fafafa;
}
.shipment-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.shipment-card__carrier {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.03125rem;
}
.shipment-card__carrier--fedex .fedex-fed {
  color: #4d148c;
}
.shipment-card__carrier--fedex .fedex-ex {
  color: #ff6600;
}
.shipment-card__carrier--fedex .fedex-freight {
  color: #4d148c;
  font-size: 0.8125rem;
  font-weight: 700;
}
.shipment-card__no {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: #444;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 0.1875rem 0.5rem;
}
.shipment-card__track-btn {
  margin-left: auto;
  background: #1a1a1a;
  color: #fff !important;
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.shipment-card__track-btn:hover {
  background: #333;
}
/* Proof of delivery — shown only when the carrier returned a signed POD. */
.shipment-card__pod-btn {
  margin-left: auto;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  padding: 0.3125rem 0.875rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.shipment-card__track-btn + .shipment-card__pod-btn {
  margin-left: 0.5rem;
}
.shipment-card__pod-btn:hover:not([disabled]) {
  background: #f2f2f2;
}
.shipment-card__pod-btn[disabled] {
  cursor: default;
  opacity: 0.6;
}
.shipment-card__timeline {
  display: flex;
  gap: 1.75rem;
  margin-top: 0.75rem;
}
.shipment-card__milestone {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  color: #666;
}
.shipment-card__dot {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: #cfcfcf;
}
.shipment-card__milestone.done .shipment-card__dot {
  background: #0f7a3d;
}
.shipment-card__milestone.done {
  color: #1a1a1a;
}
.shipment-card__milestone.late .shipment-card__dot {
  background: #c0392b;
}
.shipment-card__milestone.late .shipment-card__milestone-caption {
  color: #c0392b;
}
.shipment-card__milestone-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Freight note — LIKP.ZTRACKING when it is NOT a parcel waybill (a trailer
   type like "STEP"/"LOWBOY", or a BOL reference). Deliberately NOT styled like
   the mono tracking chip: it is a description, not a number to look up. */
.shipment-card__freight-note {
  font-size: 0.8125rem;
  color: #666;
  font-style: italic;
}
.shipment-card__milestone-body .shipment-card__milestone-label,
.shipment-card__milestone-body .shipment-card__milestone-date {
  display: inline;
  margin-right: 0.3125rem;
}
.shipment-card__milestone-caption {
  font-size: 0.6875rem;
  color: #999;
  font-style: italic;
}
.shipment-card__status-chip {
  font-size: 0.75rem;
  font-weight: 600;
  color: #444;
  background: #eee;
  border-radius: 999px;
  padding: 0.1875rem 0.625rem;
}
.shipment-card__milestone-label {
  font-weight: 600;
}
.shipment-card__milestone-date {
  font-variant-numeric: tabular-nums;
}

/* == DIAG TRF/EA configuration tab ======================================
   Figma GT-Shop . Desktop, node 19165-132828 (the 8VM1 CONFIGURATION tab).
   Every rule is a SCOPED correction to a shared config primitive whose
   default was tuned for the dense builder/BOM tab, not for this short intake
   form. Scoped to .svc-config-section so no other configurator moves.

   Values taken from a vision-grounded diff of the frame against the built
   page (2026-08-25). NB: omp's DEFAULT model has no vision and fabricates
   this kind of critique from prose alone - the loop must run --model opus.
   See scratchpad/critique-omp.sh + control-test.sh. */

/* Labels are sentence case in the frame and sit at ~20px/400 as a real
   heading over their options; caps are reserved for the accordion headers
   (SPECIFICATIONS / ABOUT / DOWNLOADS). The shared 1.5rem gap under the
   label is correct per the frame - do NOT tighten it. */
.svc-config-section .config-field-title {
  text-transform: none;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 400;
}

/* Frame: ~40px between groups, ONE rule per group boundary. The shared
   divider carries up to 3.75rem per side (~120px), which is why the panel
   read as empty and ungrouped. */
.svc-config-section .config-section-divider {
  margin: 1.25rem 0;
}

/* Options stack 8px apart in the frame; the shared .config-row-options gap is
   1rem, which on a two-item group read as two unrelated rows.
   Measured off the Figma export rather than judged by eye: the white card's
   bottom border sits at y=590 and the filled card's top edge at y=608, i.e.
   16px on a 2x export = 8px. */
.svc-config-section .config-row-options {
  gap: 0.5rem;
}

/* One radius family (8px) across inputs, stepper and segmented toggle - the
   built page mixed ~2px inputs, ~4px stepper and full pills. */
.svc-config-section .quote-form-row input,
.svc-config-section .pdp-qty-stepper {
  border-radius: 1rem;
}

/* Shared checkbox is 0.9375rem - sized for a dense BOM list. On a full-width
   card row it read as a stray dot rather than a control. */
.svc-config-section .config-checkbox-icon {
  /* Was 1.125rem with the shared #f0f0f0 border, which on a white card is
     invisible - Tony read the control as simply absent. Sized and contrasted
     so it reads as a checkbox at a glance. */
  width: 1.375rem;
  height: 1.375rem;
  border-color: #9a9a9a;
  border-radius: 0.25rem;
  padding: 0;
}

.svc-config-section .config-card.selected .config-checkbox-icon {
  border-color: #fff;
}

/* The qty stepper is full-bleed in the sticky buy bar, which stretched a
   three-glyph control across the entire panel here. */
.svc-config-section .pdp-qty-stepper {
  width: fit-content;
}

/* Month chips reuse .config-card--preset, whose default is a 999px pill. The
   frame runs ONE radius family (~8px) across every surface, so the pill is
   squared off here to match the option cards above it rather than introducing
   a second shape into the same panel. */
.svc-config-section .config-card--preset {
  border-radius: 1rem;
}

/* AssetPicker is authored for /services, where it sits on the page's own 24px
   gutter and needs its own "FIND YOUR ASSET" heading. Inside this tab it is
   one field among several, so:
     - drop the 1.5rem inset, which left it visibly indented against every
       other group's left edge;
     - drop its title, which duplicated the "Which transformer?" field label
       directly above it. The subtitle stays and serves as that field's helper
       text, which is why this group carries no helper of its own. */
.svc-config-section .asset-picker {
  padding: 0;
}

.svc-config-section .asset-picker-title {
  display: none;
}

/* .asset-picker-pane caps at 40rem, which is right on /services (a wide page
   where an unbounded search field would look adrift) but wrong here: it left
   the serial input ending short of the option cards' right edge, so the panel
   had two different content widths. */
.svc-config-section .asset-picker-pane {
  max-width: none;
}

/* Deliberately NO height, font-size, font-weight or padding overrides on
   .config-card here.
   An earlier pass set min-height: 4rem and padding: 0 1.25rem from eyeballing
   the Figma export, and that invented 64px is what Tony kept reading as
   "bulky". Measuring the export properly settles it: the card is 92px on a 2x
   export = 46px, and the shared card computes to ~56px at 1440
   (16px padding + 15.84px title x 1.5 line-height + 16px padding).
   56 is the design system's own number, so the panel now takes it and matches
   every other CONFIGURATION tab instead of carrying a third value invented
   for this section alone. The remaining 46-vs-56 gap is a system-wide
   question for .config-card, not something to fork here. */

/* ==========================================================================
   Request access (/request-access)
   The page shipped with NO stylesheet at all: labels flush at x=0, native
   inputs, a grey OS button (E2E audit 2026-08-26, gate 7 — the only public
   forward path for a campaign visitor looked broken). Same vocabulary as
   the quote modal / config controls: 1px #cfcfcf borders, 1rem radius on
   surfaces, #242424 ink, one accent for the primary action.
   ========================================================================== */
.request-access-page {
  padding: clamp(1.5rem, calc(3 * var(--vwx)), 3rem)
    clamp(1rem, calc(2 * var(--vwx)), 2rem)
    clamp(3rem, calc(5 * var(--vwx)), 5rem);
}
.request-access-container {
  max-width: 44rem;
  margin: 0 auto;
}
.request-access-container h1 {
  font-size: clamp(1.6rem, calc(2.4 * var(--vwx)), 2.25rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: #242424;
}
.request-access-intro {
  color: #4a4458;
  max-width: 60ch;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.request-access-context {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.5rem;
  border: 1px solid #cfcfcf;
  border-radius: 1rem;
  background: #f7f6fa;
  color: #242424;
  font-size: 0.95rem;
}
.request-access-context strong {
  font-weight: 600;
}
.request-access-section {
  border: 1px solid #cfcfcf;
  border-radius: 1rem;
  padding: clamp(1rem, calc(1.5 * var(--vwx)), 1.5rem);
  margin: 0 0 1rem;
  background: #fff;
}
.request-access-section h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: #242424;
}
.request-access-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.9rem 1.25rem;
  margin-bottom: 0.9rem;
}
.request-access-row:last-child {
  margin-bottom: 0;
}
.request-access-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.request-access-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a4458;
  letter-spacing: 0.01em;
}
.request-access-field input,
.request-access-field textarea,
.request-access-field select {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1px solid #cfcfcf;
  border-radius: 0.75rem;
  background: #fff;
  color: #242424;
  min-height: 2.75rem;
}
.request-access-field input:focus-visible,
.request-access-field textarea:focus-visible {
  outline: 2px solid #242424;
  outline-offset: 1px;
  border-color: #242424;
}
.request-access-field.has-error input,
.request-access-field.has-error textarea {
  border-color: #b3261e;
}
.request-access-error {
  color: #b3261e;
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}
.request-access-consent {
  margin: 0.25rem 0 1rem;
}
.request-access-consent label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: #242424;
  line-height: 1.45;
  cursor: pointer;
}
.request-access-consent input {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}
.request-access-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.request-access-submit {
  font: inherit;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  min-height: 2.9rem;
  border-radius: 999px;
  border: 1px solid #242424;
  background: #242424;
  color: #fff;
  cursor: pointer;
}
.request-access-submit:hover {
  background: #3a3448;
}
.request-access-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.request-access-success {
  border: 1px solid #cfcfcf;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  background: #f1f8f4;
  color: #1b1534;
}
.request-access-success p {
  margin: 0.35rem 0;
}
.request-access-success .request-access-reference {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Asset picker — "Describe it" pane (third way to identify a transformer
   for companies whose units are not in the installed base yet). */
.asset-picker-manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.asset-picker-manual-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.asset-picker-manual-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a4458;
  letter-spacing: 0.01em;
}
.asset-picker-manual-field .asset-picker-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.6rem 0.8rem;
  border: 1px solid #cfcfcf;
  border-radius: 0.75rem;
  background: #fff;
  color: #242424;
  min-height: 2.6rem;
}
.asset-picker-manual-field textarea.asset-picker-input {
  min-height: 3.6rem;
  resize: vertical;
}
.asset-picker-manual-field .asset-picker-input:focus-visible {
  outline: 2px solid #242424;
  outline-offset: 1px;
  border-color: #242424;
}
.asset-picker-status--nomatch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}
.asset-picker-link-btn {
  font: inherit;
  font-weight: 600;
  color: #242424;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
/* Out-of-stock notice in the PDP buy box (NA business ruling 2026-08-25).
   Informative, not alarming: an out-of-stock spare part is a normal lead-time
   conversation, so this reads as guidance rather than an error state. */
/* Out of stock is a FACT, not an alert. One quiet line under the buy box —
   no border, no fill, no heading. The previous treatment was a bordered
   two-line panel that read as a modal interrupting the purchase, for a state
   that is neither an error nor a decision the buyer has to make. */
.pdp-out-of-stock-line {
  /* Its own row inside the buy bar. `.pdp-btn-group:has(.pdp-offer-btn)` gives
     full width to `> div`, and this is a <p> — so without an explicit basis it
     sat on the SAME row as "Request an offer" and pushed the bar 14px past the
     viewport's right edge (measured: bar right 1294 vs viewport 1280). */
  flex: 1 1 100%;
  min-width: 0;
  /* The buy box leaves ~554px beside the price block, and `.pdp-bottom-action`
     does not shrink below its button row's natural 605px — a pre-existing
     overflow this line made visible. Cap the text at the space that actually
     exists and let it wrap rather than push the bar past the viewport. */
  max-width: 34rem;
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #6b7280;
  text-wrap: pretty;
}
/* Inline confirm for "Request an offer" (customer demo 2026-09-16: the CTA
   filed the RFQ on the first click). Its own row — like the out-of-stock line
   it must not ride the button group's flex row. */
.pdp-offer-confirm {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 34rem;
  margin: 0.5rem 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid #641e8c;
  border-radius: 8px;
  background: #fff;
}
.pdp-offer-confirm__text {
  margin: 0 0 0.625rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #1f2937;
}
.pdp-offer-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pdp-offer-confirm__send,
.pdp-offer-confirm__cancel {
  padding: 0.4375rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.pdp-offer-confirm__send {
  border: 1px solid #641e8c;
  background: #641e8c;
  color: #fff;
}
.pdp-offer-confirm__send:disabled {
  opacity: 0.55;
  cursor: default;
}
.pdp-offer-confirm__cancel {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #1f2937;
}
.pdp-buy-bar-sticky .pdp-offer-confirm {
  max-width: none;
  margin: 0 0 0.5rem;
}
.pdp-out-of-stock-line__link {
  color: #1f2937;
  text-decoration: underline;
  white-space: nowrap;
}

/* 20% shipping & tax estimate note in the order summary (old-shop parity).
   Quiet by design: it is a forward-looking estimate, not a charge. */
.order-summary-estimate-note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6b7280;
}

/* Representative-image badge — the photo is a material-group sibling's, not
   this part's. Deliberately legible rather than subtle: an unnoticed label is
   the same as no label for someone identifying a spare part by sight. */
.product-img-representative {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  pointer-events: none;
}

/* "Already in your cart" status — last item of .product-category-row,
   pushed to the right end of the line.

   Why here and not on the image: every corner of the image is spoken for.
   Top-left is where the dimension drawings caption themselves ("Surge
   arresters 3EB2", "PRODUCT STRUCTURE" on the GEAFOL cards), bottom-left is
   .product-img-representative, bottom-right is the hover CTA row, and a chip
   in the top-right sat awkwardly on busy product photos. The category line
   is the one line on the card with spare room, and it is where the eye is
   already reading text.

   Why not the basket button: SHOP-830 / Userback 8233849 reverted pinning
   `.product-card-action--in-cart` open, because a cart of 4 put 4 permanent
   dark BUTTONS in list view. The complaint was about a control at rest, so
   this carries the same information as a non-interactive label and leaves
   the hover choreography untouched.

   It also cannot be done by revealing the existing count badge: that badge
   is a child of .product-card-action, which hides with opacity: 0, and
   opacity creates a compositing group — a child can never be more opaque
   than its parent. Hence a separate element rather than a CSS override.

   Hidden by default and toggled with .is-visible (never added/removed from
   the row — see the note in the Dart). Sized to the row's 1.125rem
   min-height so a card gaining the status never shifts its title. */
.product-category-row > .product-card-in-cart {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.125rem;
  letter-spacing: 0.01em;
  color: #242424;
  text-transform: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.product-category-row > .product-card-in-cart.is-visible {
  display: inline-flex;
}
.product-card-in-cart svg {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}

/* PDP counterpart to .product-img-representative. */
.pdp-representative-note {
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid #9ca3af;
  background: #f9fafb;
  color: #4b5563;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* === Package configurator — compact layout (owner batch 2026-08-26) ======
   Form lives in the summary rail; the left column is the always-visible BOM.
   Kept at the END of the sheet on purpose: .row-changed must win source-order
   ties against .component-row:hover / .component-bucket-summary:hover.
   Everything is scoped to .package-configurator-page so the arrester
   configurator (shared .configurator-content) and tool-sales
   (.pricing-card/.price-row) keep their current look. */

/* The rail hosts the question grid now — at the old 23.75rem basis a 3-up
   select is ~100px wide, unusable. 30rem keeps three usable columns while
   the BOM column still gets ~49rem at the 80rem page cap. */
.package-configurator-page .configurator-content > :last-child {
  flex: 1 1 30rem;
}

/* Question block inside the pricing card. container-type makes it the
   @container reference for the grid's 3→2→1 collapse. Don't put
   position:fixed children inside: containment creates a stacking context. */
.package-configurator-page .rail-config {
  container-type: inline-size;
  margin-bottom: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}
.package-configurator-page .rail-config > .pricing-label {
  display: block;
  margin-bottom: var(--spacing-3);
}
.rail-config .boolean-options,
.rail-config .bool-option {
  min-width: 0;
}
/* Bare <input type=number> has a ~20ch intrinsic width — it must not push
   the 3-up tracks apart (this class had NO rule anywhere before). */
.package-configurator-page .config-number-input {
  width: 100%;
  min-width: 0;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: inherit;
}

/* Compact "About this service" in the header (item 2) — replaces the left
   column card (UB#7612481); SOPHIE's notes (UB 8144777) inline, full text
   in the native title tooltip on both lines. */
.package-configurator-page .configurator-about {
  margin-top: var(--spacing-2);
  max-width: 46rem;
}
.package-configurator-page .configurator-about-line {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.package-configurator-page .configurator-about-notes {
  margin: var(--spacing-1) 0 0;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--color-gray-500);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Package Documents box (item 6): clear air above it + small uppercase
   per-category group headings. */
.package-configurator-page .configurator-sidebar #package-documents {
  margin-top: var(--spacing-8);
}
.package-configurator-page .pkg-doc-group-heading {
  margin: var(--spacing-4) 0 var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}
.package-configurator-page .pkg-doc-group-heading:first-child {
  margin-top: 0;
}

/* Answer-change flash (item 3): rows whose qty/line total moved, the bucket
   summaries containing them (buckets are collapsed by default), and the
   TOTAL. `from`-only keyframes fade back to each element's OWN background
   (gray-50 rows, transparent bucket buttons, white total row). cfg-pulse-a/b
   alternate per change so a second change to the same element restarts the
   fade. Reduced motion gets a steady tint for the same interval instead of
   an animation. */
@media (prefers-reduced-motion: no-preference) {
  .package-configurator-page .row-changed.cfg-pulse-a {
    animation: cfg-row-flash-a 1.2s ease-out;
  }
  .package-configurator-page .row-changed.cfg-pulse-b {
    animation: cfg-row-flash-b 1.2s ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .package-configurator-page .row-changed {
    background-color: rgba(0, 153, 153, 0.1);
  }
}
@keyframes cfg-row-flash-a {
  from {
    background-color: rgba(0, 153, 153, 0.18);
  }
}
@keyframes cfg-row-flash-b {
  from {
    background-color: rgba(0, 153, 153, 0.18);
  }
}

/* ── PDP: Terms & Conditions documents ────────────────────────────────────
   product.metadata.terms_documents, rendered as its own accordion rather than
   inside Downloads: a datasheet is a reference, terms are part of the sale.
   Row grammar follows .pdp-download-item so the two accordions read as one
   family; it is a <button>, not an <a>, because the open goes through
   DocumentDownloadService (a url may need the API base prefixed, and a file id
   needs a signed URL resolved first). */
.pdp-terms-docs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pdp-terms-doc-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  background: none;
  color: #242424;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.pdp-terms-doc-row:hover {
  background: #f5f5f5;
  border-color: #1a1a1a;
}

.pdp-terms-doc-row svg {
  flex-shrink: 0;
}

.pdp-terms-doc-name {
  flex: 1 1 auto;
  min-width: 0;
}

.pdp-terms-doc-hint {
  flex: 0 0 auto;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #6b6b6b;
}

/* ── INTERNAL box — Salesforce / SAP for staff only ────────────────────
   Dark on purpose: the person looking must see at once that this block is
   not part of the customer's page. Rendered only from `_admin_meta`, which
   the API sends to internal viewers alone. It is a <details>, collapsed by
   default: the <summary> row (tag, hint, status chips, chevron) is all a
   staff member sees until they open it. Kept block-level on purpose — a
   grid/flex <details> breaks the disclosure in older engines; the body
   carries the grid. rem-only, no width queries. */
.internal-box {
  display: block;
  background: #1f2328;
  color: #e6e8eb;
  border-radius: 1rem;
  padding: 0;
  margin-top: 1rem;
  overflow: hidden;
}
.internal-box__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.internal-box__summary::-webkit-details-marker {
  display: none;
}
.internal-box__summary:hover {
  background: #262b31;
}
.internal-box__summary:focus-visible {
  outline: 0.125rem solid #8ec5ff;
  outline-offset: -0.125rem;
}
.internal-box__chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}
.internal-box__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 0.3125rem 0.5625rem;
  border-radius: 999rem;
  background: rgba(255, 255, 255, 0.08);
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  color: #a9b0b8;
  white-space: nowrap;
}
.internal-box__chip--on {
  color: #e6e8eb;
  border-color: rgba(142, 197, 255, 0.45);
}
.internal-box__chip-system {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.internal-box__chip-system::after {
  content: "·";
  margin-left: 0.3em;
  font-weight: 400;
  color: #8a929b;
}
.internal-box__chevron {
  display: inline-flex;
  align-items: center;
  color: #a9b0b8;
  transition: transform 0.15s;
}
.internal-box__chevron svg {
  width: 0.875rem;
  height: 0.875rem;
}
.internal-box[open] > .internal-box__summary {
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}
.internal-box[open] > .internal-box__summary .internal-box__chevron {
  transform: rotate(180deg);
}
.internal-box__body {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.875rem;
}
.internal-box__tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.125rem 0.5rem;
  border-radius: 999rem;
  background: #ffb020;
  color: #1f2328;
}
.internal-box__hint {
  font-size: 0.75rem;
  color: #a9b0b8;
}
.internal-box__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
}
.internal-box__value {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.internal-box__link {
  color: #8ec5ff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.internal-box__link:hover { color: #b9dbff; }
.internal-box__code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  color: #f2f4f6;
}
.internal-box__muted { color: #8a929b; }
/* Live link status (2026-09-15): "Sending to SAP…", "Held — …", "Order linker offline since 17:05" */
.internal-box__status {
  color: #d5d9de;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.internal-box__status--pending::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #8ec5ff;
  vertical-align: 0.05em;
}
.internal-box__status--problem { color: #ffc46b; }
.internal-box__status--problem.internal-box__status--pending::before { background: #ffc46b; }
.internal-box__linker { padding: 0.25rem 0 0.5rem; }
.internal-box__chip--pending { color: #b9dbff; }
.internal-box__chip--problem { color: #ffc46b; }
/* Source line + the SAP · SnapLogic section (2026-09-15) */
.internal-box__fact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  padding-top: 0.25rem;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
}
.internal-box__fact-label { color: #8a929b; min-width: 4.5rem; }
.internal-box__fact-value { color: #e6e8eb; overflow-wrap: anywhere; }
.internal-sap {
  border: 0.0625rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.03);
}
.internal-sap__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
}
.internal-sap__summary::-webkit-details-marker { display: none; }
.internal-sap__summary::before { content: "▸"; color: #8a929b; }
.internal-sap[open] > .internal-sap__summary::before { content: "▾"; }
.internal-sap__title { font-weight: 700; letter-spacing: 0.02em; }
.internal-sap__status { color: #a9b0b8; }
.internal-sap__status--ok { color: #8fd19e; }
.internal-sap__status--error { color: #ff9a9a; }
.internal-sap__body {
  display: grid;
  gap: 0.625rem;
  padding: 0.25rem 0.75rem 0.75rem;
  min-width: 0;
}
.internal-sap__facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.375rem 1rem;
}
.internal-sap__fact { display: grid; gap: 0.125rem; min-width: 0; }
.internal-sap__fact-label { font-size: 0.6875rem; color: #8a929b; text-transform: uppercase; letter-spacing: 0.04em; }
.internal-sap__fact-value { font-size: 0.8125rem; overflow-wrap: anywhere; }
.internal-sap__messages,
.internal-sap__deviations ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
  font-size: 0.8125rem;
}
.internal-sap__message { display: flex; gap: 0.5rem; align-items: baseline; }
.internal-sap__message-type {
  flex: none;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  width: 1.25rem;
  text-align: center;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
}
.internal-sap__message--ok .internal-sap__message-type { background: rgba(143, 209, 158, 0.25); color: #8fd19e; }
.internal-sap__message--warn .internal-sap__message-type { background: rgba(255, 176, 32, 0.25); color: #ffb020; }
.internal-sap__message--error .internal-sap__message-type { background: rgba(255, 154, 154, 0.25); color: #ff9a9a; }
.internal-sap__raw-summary { cursor: pointer; font-size: 0.8125rem; color: #8ec5ff; }
.internal-sap__json { margin-top: 0.5rem; min-width: 0; }
.internal-sap__json-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #a9b0b8;
  margin-bottom: 0.25rem;
}
.internal-sap__copy {
  font: inherit;
  font-size: 0.75rem;
  color: #e6e8eb;
  background: rgba(255, 255, 255, 0.08);
  border: 0.0625rem solid rgba(255, 255, 255, 0.18);
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  cursor: pointer;
}
.internal-sap__pre {
  margin: 0;
  max-height: 20rem;
  overflow: auto;
  padding: 0.625rem;
  border-radius: 0.5rem;
  background: #15181c;
  color: #e6e8eb;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre;
}

/* Logo tiles — the same size as the panel's action buttons
   (.line-item-action: 0.625rem 1.25rem, radius 0.75rem), so Salesforce and
   SAP read as buttons, not labels. The logo IS the link where one exists;
   the SAP tile is never one. Inline SVG, drawn in internal_links_panel.dart,
   never a third-party image request. rem-only, no width queries. */
.brand-tile {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 7.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #1f2328;
  text-decoration: none;
  line-height: 1;
  flex: none;
}
/* On a white card (the customer's shipment card) the tile needs the outline
   button's border to read as a button at all. */
.shipment-card .brand-tile {
  border-color: #e3e3e3;
}
.shipment-card .brand-tile--link:hover {
  border-color: #c2c2c2;
}
.brand-tile--link {
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.brand-tile--link:hover,
.brand-tile--link:focus-visible {
  box-shadow: 0 0 0 0.1875rem rgba(142, 197, 255, 0.55);
  transform: translateY(-1px);
  outline: none;
}
.brand-tile--muted {
  opacity: 0.45;
  filter: grayscale(1);
}
.brand-logo {
  display: inline-flex;
  align-items: center;
}
.brand-logo svg {
  display: block;
  height: 1.75rem;
  width: auto;
}
.brand-tile--fedex .brand-logo svg,
.brand-tile--admin .brand-logo svg {
  height: 1.5rem;
}
/* The Salesforce cloud is wide and low (273x191); at the shared 1.75rem the
   wordmark is illegible next to SAP's tall wedge. Taller logo, tighter
   vertical padding: the tile stays the same 2.75rem as its neighbours. */
.brand-tile--salesforce {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.brand-tile--salesforce .brand-logo svg {
  height: 2.25rem;
}
/* Live refresh of the internal Salesforce / SAP box on the order page */
.internal-box__refresh {
  font-size: 0.6875rem;
  line-height: 1;
  color: #8a929b;
  white-space: nowrap;
}
.internal-box__chip--flash {
  animation: internal-box-chip-flash 1.6s ease-out 1;
}
@keyframes internal-box-chip-flash {
  0% {
    background: rgba(142, 197, 255, 0.45);
    color: #ffffff;
  }
  100% {
    background: rgba(255, 255, 255, 0.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .internal-box__chip--flash {
    animation: none;
    outline: 0.0625rem solid rgba(142, 197, 255, 0.6);
  }
}

/* FY26→FY27 price transition notice on the SML pages (01–02 Oct 2026).
   Same palette as .budgetary-warning / "Pricing under review". */
.sml-price-notice {
  background: #fef3c7;
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--spacing-3) var(--spacing-4);
  margin: var(--spacing-3) 0 var(--spacing-4);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #92400e;
}
.sml-price-notice p { margin: 0; }
.sml-price-notice strong { color: #78350f; }

/* SML's M3 warning on the 8DN8-2 / 8DN8-3 M3 packages (20.10.2026).
   Red like SOPHIE's own, in the alert palette. */
.sml-m3-warning {
  background: #fef2f2;
  border: 0.0625rem solid #dc2626;
  border-left-width: 0.25rem;
  border-radius: var(--radius-md);
  padding: var(--spacing-3) var(--spacing-4);
  margin: var(--spacing-3) 0 var(--spacing-4);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #7f1d1d;
}
.sml-m3-warning p { margin: 0 0 var(--spacing-2); }
.sml-m3-warning p:last-child { margin-bottom: 0; }
.sml-m3-warning strong { color: #7f1d1d; }
.sml-m3-warning__title,
.sml-m3-warning__link { text-align: center; }
.sml-m3-warning__title strong { color: #b91c1c; font-size: var(--font-size-base); }
.sml-m3-warning__word { text-decoration: underline; }
.sml-m3-warning__link a { color: #991b1b; font-weight: 600; text-decoration: underline; }

/* ── Serial pricing card (preview, `sml_serial_kits`) ────────────────────────
   "Your breaker": the same card, header, field and button language as the
   configurator's other sections — label above field, config-select's border
   and font, the primary action button. Two views: one result line
   (Summary) or every build of the fixed number side by side (All builds,
   Matthias' per-type sheet: builds as columns, the set's …990 lines as rows).
   No width media queries: the form wraps, the table uses fixed layout and
   wraps long material numbers instead of scrolling sideways. */
/* Same edges as the two configurator columns below (their container has no
   side padding either). */
.container.serial-card-wrap {
  padding-left: 0;
  padding-right: 0;
}

.serial-card {
  margin-top: var(--spacing-4);
}

.serial-card .section-header {
  flex-wrap: wrap;
}

.serial-card__optional {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
}

.serial-card__intro {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-gray-600);
}

.serial-card__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-3);
}

.serial-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.serial-field--serial {
  flex: 2 1 14rem;
}

.serial-field--year {
  flex: 1 1 9rem;
}

.serial-field__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
}

/* Same box as .config-select: 1px neutral border, inherited body font. */
.serial-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: inherit;
  background: white;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.serial-input:hover {
  border-color: var(--color-gray-400);
}

.serial-input:focus {
  outline: none;
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.serial-card__apply {
  flex: 0 0 auto;
  min-height: 2.75rem;
  white-space: nowrap;
}

/* View toggle: a quiet segmented control at the right of the header. */
.serial-view-toggle {
  margin-left: auto;
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.125rem;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
}

.serial-view-toggle__btn {
  border: none;
  background: transparent;
  color: var(--color-gray-600);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.serial-view-toggle__btn:hover:not([disabled]) {
  color: var(--color-gray-800);
}

.serial-view-toggle__btn.active {
  background: white;
  color: var(--color-gray-800);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.serial-view-toggle__btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* Result line (Summary view). */
.serial-result {
  display: flex;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}

.serial-result__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: white;
  background: var(--color-gray-400);
}

.serial-result--ok .serial-result__icon {
  background: var(--color-success);
}

.serial-result--info .serial-result__icon,
.serial-result--choose .serial-result__icon {
  background: var(--color-info);
}

.serial-result--warn .serial-result__icon {
  background: var(--color-warning);
}

.serial-result__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.serial-result__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-800);
}

.serial-result__text {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-gray-600);
}

.serial-result__delta {
  color: var(--color-gray-800);
  font-weight: 600;
}

.serial-result__note {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.serial-result__choose {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: var(--spacing-2);
  max-width: 32rem;
}

.serial-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
}

.serial-tag--worst {
  font-weight: 500;
  color: var(--color-gray-600);
  background: repeating-linear-gradient(
    135deg,
    var(--color-gray-100),
    var(--color-gray-100) 0.375rem,
    white 0.375rem,
    white 0.75rem
  );
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 0.25rem 0.5rem;
}

/* All builds (Matthias' sheet view). */
.serial-table {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}

.serial-table__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.serial-table__pager {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

.serial-table__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.serial-table__grid th,
.serial-table__grid td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-gray-100);
  overflow-wrap: anywhere;
}

.serial-table__grid thead th {
  background: var(--color-gray-50, #fafafa);
  font-weight: 600;
  color: var(--color-gray-800);
  border-bottom: 1px solid var(--color-gray-200);
}

.serial-table__corner {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500) !important;
}

.serial-table__fits {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: 0.125rem;
}

.serial-table__build.is-yours .serial-table__fits {
  color: var(--color-success);
}

.serial-table__label {
  display: block;
  font-weight: 600;
}

.serial-table__grid .is-yours {
  background: rgba(0, 153, 153, 0.06);
}

.serial-table__line {
  font-weight: 400;
  background: white;
}

.serial-table__line .serial-part__name,
.serial-table__line .serial-part__material {
  display: block;
}

.serial-table__corner {
  width: 24%;
}

.serial-parts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.serial-part {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.serial-part__name {
  color: var(--color-gray-800);
}

.serial-part__material {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.serial-part__price {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray-700);
}

.serial-table__common td {
  color: var(--color-gray-700);
  text-align: center;
}

.serial-table__total th,
.serial-table__total td {
  border-bottom: none;
  border-top: 2px solid var(--color-gray-200);
}

.serial-table__price {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-gray-800);
}

.serial-table__price--muted {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-500);
}

.serial-table__delta {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin: 0.125rem 0 0.375rem;
}

.serial-table__choose {
  margin-top: 0.25rem;
}