body.configurator-page { margin: 0; background: #f4f5f3; color: #0b1824; font: 14px Roboto, sans-serif; }
.configurator-page #main-content { padding: 0; background: #f4f5f3; }
.configurator-page [data-shop-slot="breadcrumb"] { display: none; }
.configurator-page [data-shop-footer] { display: none; }
.configurator-page > section { min-height: calc(100svh - 98px); padding: 12px 28px 22px !important; }
.configurator-page > section { height: calc(100svh - 98px); }
.configurator-page > section > div { width: 100%; max-width: none; height: 100%; margin: auto; padding: 0 !important; }
.configurator-layout { display: grid !important; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); gap: 24px !important; height: 100%; align-items: stretch !important; }
body.configurator-page .configurator-layout { grid-template-columns: 403px minmax(0, 1fr) !important; }
.configurator-page > section { padding-inline: 24px !important; }
.configurator-layout { grid-template-columns: 403px minmax(0, 1fr) !important; }
.configurator-page .shop-nav__utility { display: none; }
.configurator-sidebar, .configurator-stage { min-width: 0; }
.configurator-sidebar { order: 0 !important; grid-column: 1; }
.configurator-stage { position: relative; position: sticky; top: 12px; order: 0 !important; grid-column: 2; height: calc(100svh - 96px); align-self: start; }
.configurator-panel { display: flex; flex-direction: column; max-height: calc(100svh - 132px); overflow: hidden; border: 1px solid #dde2e1; border-radius: 16px; background: #fff; box-shadow: 0 5px 24px #0b18240c; }
@media (min-width: 1101px) {
  .configurator-sidebar { height: calc(100svh - 105px); }
  body.configurator-page .configurator-panel { height: 100%; max-height: none; }
  .configurator-panel-scroll { flex: 1; }
  .stage-actions { right: 0; gap: 20px; }
  .stage-actions button[data-share-build] { min-height: 40px; padding: 8px 16px; border: 1px solid #dde2e1; border-radius: 9px; background: #fff; }
  .configurator-intro > .review-progress { margin-top: 15px !important; }
  .preset-section { margin: 25px 0 8px; }
  .configurator-section-label { margin-bottom: 14px; }
  .config-preset { padding-bottom: 10px; }
  .build-summary { transform: translateY(-5px); }
}
[data-drawer-handle] { display: none; }
.configurator-panel-scroll { min-height: 0; padding: 24px 24px 12px; overflow-y: auto; scrollbar-width: thin; }
.configurator-intro { margin: 0 0 28px !important; }
.configurator-intro h1 { margin: 0; color: #0b1824; font: 500 26px/1.2 Poppins, sans-serif; letter-spacing: -.04em; }
.configurator-intro p { margin: 5px 0 0; color: #65737c; font-size: 11px; }
.configurator-page:not(.drawer-mode) .configurator-intro p { display: none; }
.configurator-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.desktop-collapse { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 1px solid #dde2e1; border-radius: 6px; color: #526168; background: #fff; cursor: pointer; }
.desktop-collapse svg { width: 14px; height: 14px; }
.review-count { color: #1d7f82; font: 600 9px 'Geist Mono', monospace; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
.drawer-review-count, .drawer-review-progress { display: none; }
.review-progress { height: 4px; margin-top: 25px; overflow: hidden; border-radius: 4px; background: #e6eae8; }
.review-progress span { display: block; width: 40%; height: 100%; background: #3db2b4; }
.legacy-control { display: none !important; }
.configurator-panel-scroll > .space-y-4 { display: block; }
.preset-section { margin: 27px 0 21px; }
.configurator-section-label { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; color: #65737c; }
.configurator-section-label > span { color: #1d7f82; font: 10px 'Geist Mono', monospace; }
.configurator-section-label strong { color: #0b1824; font: 600 11px Poppins, sans-serif; }
.configurator-section-label small { margin-left: auto; color: #8a9699; font: 9px 'Geist Mono', monospace; }
.preset-scroller-wrap { position: relative; }
.preset-scroller { display: flex; gap: 8px; overflow-x: auto; padding: 1px 1px 6px; scrollbar-width: none; }
.preset-scroller::-webkit-scrollbar { display: none; }
.preset-fade { position: absolute; top: 0; right: 0; bottom: 4px; width: 28px; pointer-events: none; background: linear-gradient(90deg, transparent, #fff); }
.config-preset { display: grid; flex: 0 0 100px; gap: 6px; padding: 0 6px 9px; overflow: hidden; border: 1px solid #dde2e1; border-radius: 9px; background: #fff; text-align: left; cursor: pointer; }
.config-preset:hover, .config-preset.is-selected { border-color: #3db2b4; box-shadow: 0 0 0 1px #3db2b4; }
.config-preset img { display: block; width: calc(100% + 12px); max-width: none; aspect-ratio: 1.56; height: auto; margin: 0 -6px; object-fit: contain; border-radius: 8px 8px 0 0; background: #ecefee; }
.config-preset strong { overflow: hidden; color: #0b1824; font: 500 11px Poppins, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.config-preset small { color: #65737c; font: 9px 'Geist Mono', monospace; }
#tower-attach { display: grid; gap: 0; }
#tower-attach > div { margin: 0 !important; }
.option-group { padding: 10px 0; border-top: 1px solid #e7ebea; }
.option-group > p { display: flex; align-items: center; gap: 7px; margin: 0 0 7px !important; color: #0b1824 !important; font: 600 11px Poppins, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }
.option-group > p small { margin-left: auto; color: #879294; font: 12px Roboto, sans-serif; }
.option-group > button { color: #0b1824 !important; font: 500 15px Poppins, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }
.option-group > button > span:first-child { display: flex; align-items: center; gap: 8px; }
.option-group > button > span:first-child::before { color: #1d7f82; font: 10px 'Geist Mono', monospace; }
[data-testid="section-displays"] > button > span:first-child::before { content: '02'; }
[data-testid="section-keyboard"] > button > span:first-child::before { content: '03'; }
[data-testid="section-arms"] > button > span:first-child::before { content: '04'; }
[data-testid="section-utilities"] > button > span:first-child::before { content: '05'; }
.option-group > button small { margin-left: auto; color: #879294; font: 12px Roboto, sans-serif; white-space: nowrap; }
.option-group > p::before { color: #1d7f82; font: 9px 'Geist Mono', monospace; }
[data-testid="section-keyboard"] > p::before { content: '03'; }
[data-testid="section-arms"] > p::before { content: '04'; }
[data-testid="section-utilities"] > p::before { content: '05'; }
.option-group .grid { gap: 6px !important; }
.option-group:has(> [data-group-toggle]) .grid { grid-template-columns: 1fr !important; }
.option-btn { min-height: 35px; padding: 8px 9px !important; border: 1px solid #dce2e0 !important; border-radius: 7px !important; color: #24343d !important; background: #fff !important; font: 11px Roboto, sans-serif !important; }
.option-group:has(> [data-group-toggle]) .option-btn { min-height: 40px; }
.option-group:has(> [data-group-toggle]) .option-btn span.flex { flex-direction: row-reverse; justify-content: flex-end; }
.option-group:has(> [data-group-toggle]) .option-btn[aria-pressed="true"] svg { width: 16px; height: 16px; padding: 2px; border-radius: 4px; color: #fff !important; background: #0b1824; }
.option-group:has(> [data-group-toggle]) .option-btn .option-badge { margin-left: auto; color: #879294; font: 8px 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.option-group[data-testid="section-keyboard"], .option-group[data-testid="section-arms"], .option-group[data-testid="section-utilities"] { padding-block: 8px; }
.display-note { display: none; }
.option-btn[aria-pressed="true"] { border-color: #71c5c3 !important; background: #e3f3f3 !important; color: #0b1824 !important; box-shadow: none !important; }
.option-btn svg { color: #1d7f82 !important; }
.option-btn span.flex { align-items: center; }
.option-btn span.flex > span { min-width: 0; }
.option-btn .text-gray-500 { color: #768387 !important; font-size: 9px !important; }
.option-group > div:not(.grid) { color: #65737c; font-size: 10px; }
.configurator-panel-footer { flex: none; padding: 19px 24px 19px; border-top: 1px solid #e7ebea; background: #fff; }
.build-summary { position: relative; }
.summary-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.summary-heading strong { font: 600 12px Poppins, sans-serif; }
.summary-heading .shop-chip { min-height: 19px; padding: 3px 7px; font-size: 8px; }
.summary-detail { display: flex; justify-content: space-between; margin-top: 3px; color: #65737c; font-size: 9px; }
.summary-price { margin: 4px 0 9px; font: 600 38px/1.1 'Geist Mono', monospace; letter-spacing: -.06em; }
.summary-copy { display: none; }
.buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buy-actions .shop-btn { min-height: 52px; padding-inline: 12px; font-size: 14px; }
.checkout-note { margin: 10px 0 0; color: #788487; font-size: 11px; line-height: 1.4; }
.configurator-panel-footer [data-scroll-options] { display: none !important; }
.stage-actions { position: absolute; top: 8px; right: 12px; z-index: 4; display: flex; gap: 12px; }
.stage-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; color: #526168; background: transparent; font: 500 13px Roboto, sans-serif; cursor: pointer; }
.stage-actions button:hover { color: #1d7f82; }
.stage-actions svg { width: 14px; height: 14px; }
#viewer-shell { position: relative; width: 100%; height: 100% !important; min-height: 380px; aspect-ratio: auto !important; border: 0; border-radius: 0; background: transparent; }
#viewer { position: absolute; inset: 0 !important; width: 100%; height: 100% !important; touch-action: none; }
#viewer-status { color: #718084 !important; }
[data-hint] { top: 14px !important; left: 16px !important; z-index: 4; color: #869294 !important; font-size: 11px !important; }
[data-scale-note] { display: none !important; }
[data-scale-toggle] { display: inline-flex; align-items: center; gap: 7px; }
.viewer-toolbar { position: absolute; top: auto !important; right: 0 !important; bottom: 14px !important; z-index: 3; }
.shop-view-switch { padding: 3px; border: 1px solid #e0e5e3; background: #fff; box-shadow: 0 2px 10px #0b182410; }
.shop-view-switch button { min-width: 58px; min-height: 46px; padding: 0 9px; color: #65737c; font-size: 12px; }
.shop-view-switch [data-scale-toggle] { min-width: 128px; }
.shop-view-switch button[aria-pressed="true"] { color: #0b1824; }
.shop-view-switch button svg { width: 13px; height: 13px; }
.share-popover { position: fixed; z-index: 12000; top: 112px; right: max(32px, calc((100vw - 1224px) / 2)); width: 340px; padding: 18px; border: 1px solid #dde2e1; border-radius: 12px; background: #fff; box-shadow: 0 14px 45px #0b182426; }
.share-popover::before { position: absolute; top: -7px; right: 98px; width: 12px; height: 12px; transform: rotate(45deg); border-top: 1px solid #dde2e1; border-left: 1px solid #dde2e1; background: #fff; content: ''; }
.share-popover[hidden] { display: none; }
.share-popover > strong { display: block; font: 600 15px Poppins, sans-serif; }
.share-popover > p { margin: 3px 0 14px; color: #65737c; font-size: 10px; }
.share-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #f2f4f3; cursor: pointer; }
.share-close svg { width: 14px; height: 14px; }
.share-summary { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid #e4e8e6; border-radius: 8px; }
.share-summary img { width: 42px; height: 42px; object-fit: contain; border-radius: 5px; background: #ecefee; }
.share-summary div { display: grid; gap: 3px; }
.share-summary b { font: 500 10px Poppins, sans-serif; }
.share-summary span { font: 11px 'Geist Mono', monospace; }
.share-summary small { overflow: hidden; color: #65737c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.share-link-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 10px 0; }
.share-link-row input { min-width: 0; min-height: 34px; padding-inline: 8px; font-size: 9px; }
.share-link-row .shop-btn { min-height: 34px; padding-inline: 12px; font-size: 10px; }
.share-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.share-tiles a { display: grid; justify-items: start; gap: 4px; padding: 8px 6px; border: 1px solid #e1e6e4; border-radius: 7px; color: #0b1824; text-decoration: none; }
.share-tiles a:hover { border-color: #3db2b4; background: #f7fbfa; }
.share-tiles svg { width: 15px; height: 15px; color: #1d7f82; }
.share-tiles b { font: 500 9px Poppins, sans-serif; }
.share-tiles small, .share-note { color: #738084; font-size: 8px; }
.share-note { display: block; margin-top: 10px; }
.mobile-price-bar { display: none; }
.collapsed-tools { display: none; }
.build-panel-collapsed .configurator-layout { grid-template-columns: minmax(0, 1fr); }
.build-panel-collapsed .configurator-sidebar { display: none; }
body.build-panel-collapsed .configurator-stage { grid-column: 1 !important; }
.build-panel-collapsed .collapsed-tools { display: block; }
.build-panel-collapsed .collapsed-tools > button { position: fixed; z-index: 5; top: 112px; left: 34px; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #dde2e1; border-radius: 9px; background: #fff; box-shadow: 0 2px 9px #0b182410; font: 500 10px Poppins, sans-serif; cursor: pointer; }
.collapsed-tools > button svg { width: 14px; height: 14px; }
.collapsed-price { position: fixed; z-index: 5; bottom: 20px; left: 34px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; min-width: 330px; padding: 10px 12px; border: 1px solid #dde2e1; border-radius: 10px; background: white; box-shadow: 0 4px 16px #0b182412; }
.collapsed-price strong { grid-row: span 2; font: 600 20px 'Geist Mono', monospace; }
.collapsed-price span { color: #65737c; font-size: 9px; }
.collapsed-price .shop-btn { grid-column: 3; grid-row: 1 / span 2; min-height: 34px; padding-inline: 12px; font-size: 10px; }
.build-sheet-page { min-height: 100vh; padding: 0 0 64px; background: #fff; }
.build-sheet { display: flex; flex-direction: column; width: 816px; min-height: 1056px; margin: auto; padding: 44px 48px 52px; background: white; }
.sheet-brand { display: flex; align-items: center; justify-content: space-between; padding-bottom: 19px; border-bottom: 1px solid #dde2e1; color: #65737c; font: 9px 'Geist Mono', monospace; }
.sheet-brand img { width: 126px; height: auto; }
.sheet-brand > span { display: grid; gap: 3px; text-align: right; }
.sheet-brand small { color: #788588; font: 9px 'Geist Mono', monospace; letter-spacing: .08em; }
.sheet-brand b { font: 9px 'Geist Mono', monospace; }
.sheet-title-row { display: flex; justify-content: space-between; align-items: end; margin: 28px 0 22px; }
.sheet-title-row h1 { margin: 0 0 7px; font: 500 30px/1.12 Poppins, sans-serif; letter-spacing: -.03em; }
.sheet-title-row p { margin: 0; color: #65737c; font-size: 11px; }
.sheet-price-block { display: grid; justify-items: end; gap: 4px; }
.sheet-price { font: 600 30px 'Geist Mono', monospace; }
.sheet-price-block span { color: #65737c; font-size: 9px; }
.sheet-views { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.sheet-views figure { display: grid; grid-template-rows: auto auto; gap: 7px; margin: 0; }
.sheet-image-box { overflow: hidden; aspect-ratio: 232 / 317; border-radius: 8px; background: #f0f3f2; }
.sheet-views img { display: block; width: 100%; height: 100%; transform: scale(1.5); object-fit: contain; }
.sheet-views figcaption { color: #788588; font: 8px 'Geist Mono', monospace; letter-spacing: .06em; }
.sheet-views--single { grid-template-columns: minmax(0,1fr); }
.sheet-views--single figure { grid-template-rows: 317px auto; }
.sheet-views--single .sheet-image-box { height: 317px; aspect-ratio: auto; }
.sheet-views-note { margin: 8px 0 0; color: rgb(11 24 36 / .55); font: 400 11px/14px Roboto, sans-serif; }
.sheet-views--single img { object-fit: contain; transform: none; }
.sheet-views--rendered img { transform: none; }
/* The frame that renders the build's pictures. Chrome stalls the rendering of a frame it treats as unseen
   (opacity 0, off screen), so it is on screen and opaque, behind the sheet, under a layer of the page colour. */
.sheet-render-frame { position: fixed; left: 0; top: 0; width: 464px; height: 634px; border: 0; pointer-events: none; z-index: -1; }
.build-sheet-page:has(> .sheet-render-frame)::after { content: ''; position: fixed; inset: 0; z-index: -1; background: inherit; pointer-events: none; }
@media print { .sheet-render-frame { display: none; } }
.sheet-preview { display: grid; place-items: center; height: 280px; overflow: hidden; border-radius: 8px; background: #f0f3f2; }
.sheet-preview img { width: 100%; height: 100%; object-fit: contain; }
.sheet-columns { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 24px; margin-top: 22px; }
.sheet-section h2 { margin: 0 0 8px; font: 500 9px 'Geist Mono', monospace; letter-spacing: .08em; }
.sheet-section-heading { display: flex; justify-content: space-between; align-items: center; }
.sheet-section-heading span { color: #788588; font-size: 9px; }
.sheet-parts-heading, .sheet-parts li { display: grid; grid-template-columns: 20px minmax(0,1fr) 52px 28px; gap: 8px; }
.sheet-parts-heading { padding: 8px 12px; border: 1px solid #dce2e0; border-radius: 7px 7px 0 0; color: #788588; background: #f0f3f2; font: 8px 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.sheet-parts { padding: 0; margin: 0; list-style: none; border: 1px solid #dce2e0; border-top: 0; border-radius: 0 0 7px 7px; }
.sheet-parts li { min-height: 42px; align-items: center; padding: 6px 9px; border-bottom: 1px solid #e7ebea; color: #24343d; font-size: 10px; }
.sheet-parts li > div { display: grid; gap: 2px; }
.sheet-parts li strong { color: #0b1824; font: 500 11px Poppins, sans-serif; }
.sheet-parts li small { color: #788588; font-size: 9px; }
.sheet-parts li:last-child { border-bottom: 0; }
.sheet-parts li span:first-child { font: 9px 'Geist Mono', monospace; }
.sheet-parts li > span:nth-last-child(-n+2) { text-align: right; color: #4f5d62; font: 9px 'Geist Mono', monospace; }
.sheet-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: #788588; font-size: 8px; }
.sheet-note svg { width: 12px; height: 12px; flex: none; }
.sheet-specs { display: grid; gap: 0; }
.sheet-specs div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #e7ebea; font-size: 9px; line-height: 1.2; }
.sheet-specs dt { color: #65737c; }.sheet-specs dd { margin: 0; text-align: left; font-weight: 500; }
.sheet-qr { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px; border: 1px solid #dde2e1; border-radius: 8px; }
.sheet-qr img { width: 72px; height: 72px; object-fit: contain; }
.sheet-qr > a { flex: none; }
.sheet-qr b { font: 600 10px Poppins, sans-serif; }.sheet-qr p { margin: 4px 0; color: #65737c; font-size: 8px; line-height: 1.35; }
.sheet-qr small { color: #65737c; font: 7px 'Geist Mono', monospace; }
.sheet-footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid #dde2e1; color: #65737c; font-size: 8px; }
.sheet-footer > span { display: inline-flex; align-items: center; gap: 6px; }
.sheet-footer svg { width: 12px; height: 12px; color: #1d7f82; }
.sheet-legal { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; color: #829093; font-size: 7px; }

@media (min-width: 701px) and (max-width: 1100px) {
  .configurator-page > section { min-height: auto; padding: 8px 22px 30px !important; }
  .configurator-page > section > div { width: 100%; max-width: none; }
  .configurator-layout { display: flex !important; flex-direction: column; gap: 14px !important; }
  .configurator-stage { position: relative; top: auto; order: 0 !important; width: 100%; height: 50svh; min-height: 669px; }
  .configurator-sidebar { order: 1 !important; width: 100%; }
  body.configurator-page .configurator-panel { height: calc(50svh - 74px); max-height: none; overflow: hidden; }
  [data-drawer-handle] { position: relative; display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: 28px 4px; align-items: center; column-gap: 16px; min-height: 72px; padding: 8px; border: 0; border-bottom: 1px solid #e7ebea; background: #fff; color: #0b1824; font: 500 22px Poppins, sans-serif; text-align: left; }
  [data-drawer-toggle-label] { position: absolute; top: 43px; right: 31px; color: #0b1824; font: 500 11px Poppins, sans-serif; }
  .drawer-review-count { position: absolute; top: 40px; right: 129px; display: block; }
  .drawer-review-progress { position: absolute; top: 36px; left: calc(50% - 9px); display: block; width: 264px; height: 4px; margin: 0; transform: translateY(10px); }
  [data-drawer-title] { transform: translateY(25px); }
  .desktop-collapse, .collapsed-tools { display: none !important; }
  [data-drawer-handle]::before { content: attr(aria-expanded); display: none; }
  [data-drawer-title] { grid-column: 1; grid-row: 1; font-size: 22px; }
  [data-drawer-price], [data-drawer-label] { display: none; }
  .configurator-panel-scroll { position: relative; display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(270px, 1fr) minmax(0, 1.3fr); gap: 16px; padding: 0 3px 12px 9px; }
  .configurator-panel-scroll { position: relative; }
  .display-note { position: absolute; top: 0; right: 4px; display: block; color: #65737c; font: 13px Roboto, sans-serif; }
  .configurator-intro { display: none; }
  .configurator-panel-scroll > .space-y-4 { display: contents; }
  .preset-section { grid-column: 1 / -1; margin: 12px 0 16px; }
  .configurator-section-label { margin-bottom: 12px; }
  .config-preset { flex-basis: 150px; padding-bottom: 8px; }
  .config-preset img { aspect-ratio: 2.24; }
  #core-parts-wrap { grid-column: 1 / -1; margin-top: -18px !important; }
  #tower-attach { position: relative; display: block; min-height: 220px; grid-column: 1 / -1; }
  #tower-attach > * { margin: 0 !important; }
  #tower-attach > div, #tower-attach .option-group:has(> [data-group-toggle]) { display: contents; }
  .option-group { min-width: 0; }
  .option-group[data-testid="section-displays"] .grid::before { grid-column: 1; color: #0b1824; font: 500 15px Poppins, sans-serif; content: 'Displays'; }
  .option-group[data-testid="section-displays"] > button { position: absolute; top: 0; left: 0; }
  .option-group[data-testid="section-displays"] > button, .option-group[data-testid="section-keyboard"] > button, .option-group[data-testid="section-arms"] > button, .option-group[data-testid="section-utilities"] > button { display: flex; width: 320px; min-height: 48px; align-items: center; padding: 0 12px; border-bottom: 1px solid #e7ebea; font: 500 14px Poppins, sans-serif !important; }
  .option-group[data-testid="section-keyboard"] > button { position: absolute; top: 60px; left: 0; }
  .option-group[data-testid="section-arms"] > button { position: absolute; top: 112px; left: 0; }
  .option-group[data-testid="section-utilities"] > button { position: absolute; top: 170px; left: 0; }
  .configurator-panel[data-state="closed"] .configurator-panel-scroll { display: none; }
  .configurator-panel-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 16px; }
  .build-summary { grid-row: 1 / span 2; }
  .summary-price { font-size: 29px; }
  .buy-actions { min-width: 330px; }
  .checkout-note { margin: 2px 0 0; }
  .summary-detail { max-width: 300px; }
  .stage-actions { top: 8px; }
  .stage-actions { right: 0; gap: 16px; }
  .stage-actions button[data-share-build] { min-width: 38px; min-height: 38px; padding: 8px; border: 1px solid #dde2e1; border-radius: 50%; background: #fff; }
  .stage-actions button[data-share-build] > span:last-child { display: none; }
  .viewer-toolbar { top: 5px !important; right: auto !important; bottom: auto !important; left: 2px; }
  [data-scale-toggle] { display: inline-flex !important; }
  [data-hint] { top: auto !important; bottom: 44px !important; left: 0 !important; }
  .share-popover { top: 106px; right: 24px; }
}
@media (max-width: 700px) {
  body.configurator-page { height: 100svh; overflow: hidden; }
  body.configurator-page #main-content { height: calc(100svh - 65px); overflow: hidden; }
  body.configurator-page [data-shop-footer] { display: none; }
  .configurator-page > section { height: 100%; min-height: 0; padding: 0 !important; }
  .configurator-page > section > div { width: 100%; max-width: none; height: 100%; }
  .configurator-layout { display: block !important; height: 100%; }
  /* The 3D view fills what the drawer and the 64 px price bar leave (nav 60 px); fully open, the drawer covers it at the half height. */
  .configurator-stage { position: relative; top: auto; width: 100%; height: calc(100svh - 124px - min(47svh, 396px)); }
  .configurator-page:has(.configurator-panel[data-state="closed"]) .configurator-stage { height: calc(100svh - 180px); }
  /* No page pinch-zoom here: fixed controls stay put. The 3D canvas keeps pinch for its own zoom. */
  body.configurator-page { touch-action: pan-x pan-y; }
  #viewer-shell { height: 100% !important; min-height: 0; border: 0; border-radius: 0; }
  /* The view buttons stand in a column at the left, so the tower takes the stage's full height. */
  #viewer { inset: 0 !important; height: 100% !important; }
  .stage-actions { top: 10px; right: 14px; }
  .stage-actions button { padding: 8px; border: 1px solid #e0e5e3; border-radius: 8px; background: #fff; }
  .stage-actions button > span:last-child { display: none; }
  .viewer-toolbar { top: 10px !important; right: auto !important; bottom: auto !important; left: 12px; }
  .shop-view-switch button { min-width: 40px; min-height: 36px; padding: 0 8px; }
  .shop-view-switch [data-scale-toggle] { min-width: 45px !important; }
  .shop-view-switch button[data-view="front"] > span:last-child, .shop-view-switch button[data-view="rear"] > span:last-child, .shop-view-switch [data-scale-toggle] > span:last-child { display: none; }
  [data-hint] { display: none; }
  .configurator-sidebar { position: fixed; inset: auto 0 64px; z-index: 60; width: 100%; pointer-events: none; }
  .configurator-panel { width: 100%; height: var(--mobile-drawer-height, 77px); max-height: calc(100svh - 126px); border: 1px solid #dde2e1; border-bottom: 0; border-radius: 16px 16px 0 0; pointer-events: auto; transition: height .22s ease; box-shadow: 0 -8px 30px #0b182414; }
  .configurator-page [data-drawer-handle] { position: relative; display: grid; flex: none; grid-template-columns: 1fr auto; grid-template-rows: 10px; align-items: center; width: 100%; min-height: 40px; padding: 8px 16px 0; border: 0; border-bottom: 1px solid #e7ebea; background: #fff; color: #0b1824; text-align: left; touch-action: none; }
  .configurator-page [data-drawer-handle]::before { content: ''; grid-column: 1 / -1; justify-self: center; width: 30px; height: 3px; border-radius: 9px; background: #aab5b4; }
  .configurator-page [data-drawer-title] { display: none; }
  [data-drawer-toggle-label] { display: none; }
  [data-drawer-price], [data-drawer-label] { display: none; }
  .configurator-panel-scroll { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 2px 16px 12px; }
  .configurator-panel[data-state="half"] .configurator-panel-scroll, .configurator-panel[data-state="open"] .configurator-panel-scroll { display: block; }
  .configurator-panel[data-state="half"] { --mobile-drawer-height: min(47svh, 396px); }
  .configurator-panel[data-state="open"] { --mobile-drawer-height: calc(100svh - 138px); }
  .configurator-panel[data-state="closed"] { --mobile-drawer-height: 56px; }
  /* While a finger drags the drawer it follows without easing, with its options showing. The 3D view
     resizes once, when the drawer settles, rather than on every frame. */
  .configurator-panel.is-dragging { transition: none; }
  .configurator-panel.is-dragging .configurator-panel-scroll { display: block; }
  .configurator-page .configurator-intro { touch-action: none; }
  .configurator-intro { display: block; padding-top: 0; margin-bottom: 12px !important; }
  .configurator-intro h1 { font-size: 20px; line-height: 1.2; }
  .configurator-intro h1, .configurator-intro > .review-count { transform: translateY(-6px); }
  .review-progress { margin-top: 8px; }
  .configurator-intro p { display: none !important; }
  .desktop-collapse, .collapsed-tools { display: none !important; }
  .configurator-panel-scroll > .space-y-4 { display: block; }
  .configurator-panel-scroll > .space-y-4 > * + * { margin-top: 8px; }
  .preset-section { margin: 0; }
  .configurator-panel-footer { display: none; }
  .mobile-price-bar { position: fixed; z-index: 65; right: 0; bottom: 0; left: 0; display: block; height: 64px; padding: 0 16px; border-top: 1px solid #dce2e0; background: #fff; }
  .mobile-price-bar .mobile-price { position: absolute; top: 8px; left: 16px; }
  .mobile-price-bar .shop-btn { position: absolute; top: 10px; right: 16px; }
  .mobile-price-bar .mobile-quote { position: absolute; top: 36px; left: 16px; padding: 0; border: 0; color: #0b1824; background: transparent; font-size: 11px; }
  .mobile-price-bar .mobile-quote span { color: #0b1824; text-decoration: underline; }
  .config-preset { flex-basis: 100px; }
  .config-preset img { height: auto; }
  .option-group { padding: 0 0 9px; }
  .option-group .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option-group:has(> [data-group-toggle]) .grid { grid-template-columns: 1fr; }
  [data-scale-toggle] { display: inline-flex !important; min-width: 36px !important; }
  .option-btn { min-height: 40px; }
  .share-popover { top: 55px; right: 8px; left: 8px; width: auto; padding: 15px; }
  .share-popover::before { right: 38px; }
  .share-tiles a { min-height: 70px; }
  .share-note { font-size: 9px; }
  .build-sheet-page { padding: 0; }
  .build-sheet { width: 100%; min-height: 100vh; padding: 25px 22px; box-shadow: none; }
  .sheet-views { grid-template-columns: 1fr; }
  .sheet-views figure { grid-template-rows: 190px auto; }
  .sheet-image-box { height: 190px; aspect-ratio: auto; }
  .sheet-views img { height: 100%; }
  .sheet-columns { grid-template-columns: 1fr; }
}
@media (min-width: 1808px) {
  .configurator-page .shop-nav .shop-wrap { width: min(1760px, calc(100vw - 48px)); }
  body.configurator-page { background: radial-gradient(ellipse at 58% 46%, #fff 0, #edf0ef 58%); }
  .configurator-page #main-content { width: min(1760px, calc(100vw - 48px)); margin-inline: auto; background: transparent; }
  .configurator-page > section { position: relative; width: 100%; padding: 15px 0 22px !important; }
  .configurator-page > section > div { width: min(1760px, calc(100vw - 48px)); max-width: 1760px; }
  .configurator-sidebar { height: calc(100svh - 112px); }
  .configurator-page #main-content > canvas { z-index: 3; }
  .configurator-page #main-content > section { z-index: auto; }
  .configurator-sidebar { z-index: 4; }
  .configurator-stage { z-index: auto; }
  .stage-actions, .viewer-toolbar { z-index: 5; }
  .stage-actions { right: 0; gap: 20px; }
  .stage-actions button[data-share-build] { min-height: 40px; padding: 8px 16px; border: 1px solid #dde2e1; border-radius: 9px; background: #fff; }
  .viewer-toolbar { right: 0 !important; }
  [data-hint] { left: 0 !important; }
  .share-popover { right: max(24px, calc((100vw - 1760px) / 2)); }
}


/* E1 desktop 49:5519 (build panel, summary, stage chrome). Values from the Figma frame. */
body.configurator-page { background: radial-gradient(37.6% 42.4% at 41.4% 45.8%, #fff, rgb(255 255 255 / 0)) fixed, #EDF0EF; }
.configurator-page #main-content { background: transparent; }
@media (min-width: 1101px) {
  .configurator-page > section { height: calc(100svh - 72px); padding: 12px 24px 20px !important; box-sizing: border-box; }
  body.configurator-page .configurator-layout { grid-template-columns: 404px minmax(0, 1fr) !important; gap: 24px !important; }
  .configurator-sidebar { height: calc(100svh - 104px); }
  /* Full height on a laptop; on a taller screen it stops at 880px and floats at the top. */
  body.configurator-page .configurator-panel { box-sizing: border-box; height: min(100%, 880px); border: 1px solid rgb(11 24 36 / .08); border-radius: 20px; background: white; box-shadow: 0 12px 32px rgb(11 24 36 / .06); backdrop-filter: none; }
  .configurator-page .configurator-panel-scroll { padding: 0; }
  .configurator-page .configurator-intro { margin: 0 !important; padding: 20px 24px 14px; }
  .configurator-page .configurator-heading { gap: 0; height: 39px; }
  .configurator-page .configurator-intro h1 { flex: 1; font: 400 26px/39px Poppins, sans-serif; letter-spacing: -.015em; }
  .configurator-page .configurator-heading > div { flex: 1; }
  .configurator-page .configurator-heading .review-count { margin-right: 10px; color: var(--shop-teal-text); font: 500 10px/13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; }
  .configurator-page .desktop-collapse { box-sizing: border-box; width: 32px; height: 32px; margin: 0; border: 1px solid rgb(11 24 36 / .12); border-radius: 8px; color: var(--shop-ink); }
  .configurator-page .desktop-collapse svg { width: 16px; height: 16px; }
  .configurator-page .configurator-intro > .review-progress { --seg: 64px; width: 344px; height: 4px; margin-top: 12px !important; border-radius: 0; background: rgb(11 24 36 / .1); -webkit-mask: repeating-linear-gradient(90deg, #000 0 var(--seg), transparent var(--seg) calc(var(--seg) + 6px)); mask: repeating-linear-gradient(90deg, #000 0 var(--seg), transparent var(--seg) calc(var(--seg) + 6px)); }
  .configurator-page .review-progress span { background: var(--shop-teal); }
  .configurator-page .preset-section { margin: 0; padding: 12px 0 12px 24px; border-top: 1px solid rgb(11 24 36 / .07); }
  .configurator-page .configurator-section-label { gap: 10px; height: 23px; margin: 0 0 8px; padding-right: 24px; }
  .configurator-page .configurator-section-label > span { width: 14px; color: rgb(11 24 36 / .4); font: 500 11px/14px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page .configurator-section-label strong { flex: 1; font: 400 15px/23px Poppins, sans-serif; }
  .configurator-page .configurator-section-label small { color: rgb(11 24 36 / .5); font: 400 13px/15px Roboto, sans-serif; letter-spacing: 0; }
  .configurator-page .preset-scroller { gap: 8px; padding: 0 48px 0 0; }
  .configurator-page .preset-fade { right: 0; bottom: 0; width: 56px; }
  .configurator-page .config-preset { box-sizing: border-box; display: grid; grid-template-rows: 64px auto auto; flex: 0 0 100px; height: 116px; gap: 0; padding: 0 0 10px; border: 1px solid rgb(11 24 36 / .1); border-radius: 12px; box-shadow: none; }
  .configurator-page .config-preset.is-selected { border-color: var(--shop-teal); box-shadow: none; }
  .configurator-page .config-preset img { width: 98px; height: 64px; margin: 0; aspect-ratio: auto; border-radius: 0; background: var(--shop-surface-3); }
  .configurator-page .config-preset strong { padding: 6px 10px 0; font: 400 12.5px/19px Poppins, sans-serif; }
  .configurator-page .config-preset.is-selected strong { font-weight: 500; }
  .configurator-page .config-preset small { padding: 0 10px; color: rgb(11 24 36 / .5); font: 400 10px/13px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page .configurator-panel-scroll > .space-y-4 > * + * { margin-top: 0 !important; }
  .configurator-page .option-group { padding: 10px 24px !important; border-top: 1px solid rgb(11 24 36 / .07); }
  .configurator-page .option-group:has(> [data-group-toggle] + .grid:not(.hidden)) { background: #F7F9F8; }
  .configurator-page .option-group > p, .configurator-page .option-group > button { display: flex; align-items: center; gap: 10px; width: 100%; height: 23px; margin: 0 !important; padding: 0; border: 0; background: none; color: var(--shop-ink) !important; font: 400 15px/23px Poppins, sans-serif !important; }
  .configurator-page .option-group > p::before, .configurator-page .option-group > button > span:first-child::before { width: 14px; color: rgb(11 24 36 / .4); font: 500 11px/14px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page .option-group > button > span:first-child { flex: 1; gap: 10px; }
  .configurator-page .option-group > button > span:first-child > span { flex: 1; }
  .configurator-page .option-group > p small, .configurator-page .option-group > button small { margin-left: auto; color: rgb(11 24 36 / .5); font: 400 13px/15px Roboto, sans-serif; }
  .configurator-page .option-group > button > svg, .configurator-page .option-group > p > svg { width: 16px; height: 16px; opacity: .5; }
  .configurator-page .option-group .grid { gap: 8px !important; margin-top: 8px; }
  .configurator-page .option-btn { box-sizing: border-box; min-height: 40px; padding: 9px 14px !important; border: 1px solid rgb(11 24 36 / .1) !important; border-radius: 12px !important; color: var(--shop-ink) !important; font: 400 14px/21px Poppins, sans-serif !important; }
  .configurator-page .option-btn[aria-pressed="true"] { border-color: rgb(61 178 180 / .7) !important; background: var(--shop-selected) !important; font-weight: 500 !important; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn .option-badge { color: rgb(11 24 36 / .5); font: 400 9px/12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn span.flex { gap: 12px; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn svg { box-sizing: border-box; width: 16px; height: 16px; padding: 2px; border: 1px solid rgb(11 24 36 / .28); border-radius: 5px; color: transparent !important; background: white; visibility: visible !important; opacity: 1 !important; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn[aria-pressed="true"] svg { border: 0; color: white !important; background: var(--shop-ink); }
  .configurator-page .configurator-panel-footer { display: grid; gap: 12px; padding: 16px 24px 18px; border-top: 1px solid rgb(11 24 36 / .08); box-shadow: 0 -8px 16px rgb(10 23 36 / .06); }
  .configurator-page .build-summary { display: grid; grid-template-columns: auto 1fr; gap: 12px 10px; transform: none; }
  .configurator-page .summary-heading { grid-column: 1 / -1; }
  .configurator-page .summary-heading strong { font: 500 15px/23px Poppins, sans-serif; }
  .configurator-page .summary-heading .shop-chip { min-height: 24px; padding: 5px 9px; font-size: 9.5px; }
  .configurator-page .summary-price { grid-row: 2; grid-column: 1; margin: 0; font: 500 38px/44px Poppins, sans-serif; letter-spacing: 0; }
  .configurator-page .summary-detail { display: grid; grid-row: 2; grid-column: 2; align-content: center; gap: 2px; margin: 0; }
  .configurator-page .summary-detail span:first-child { color: rgb(11 24 36 / .9); font: 500 13px/15px Roboto, sans-serif; }
  .configurator-page .summary-detail span:last-child { color: rgb(11 24 36 / .55); font: 400 12px/14px Roboto, sans-serif; }
  .configurator-page .buy-actions { grid-template-columns: 172px 1fr; gap: 8px; }
  .configurator-page .buy-actions .shop-btn { min-height: 0; padding: 14px 22px; font-size: 15px; line-height: 23px; }
  .configurator-page .buy-actions .shop-btn--outline { padding-block: 14px; }
  .configurator-page .checkout-note { display: flex; align-items: center; gap: 6px; margin: 0; color: rgb(11 24 36 / .6); font: 400 12px/14px Roboto, sans-serif; }
  .configurator-page .checkout-note::before { width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D7F82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; content: ''; }
  .configurator-page .stage-actions { top: 2px; right: 0; gap: 8px; }
  .configurator-page .stage-actions button { flex-direction: row-reverse; gap: 8px; height: 38px; padding: 9px 14px; border-radius: 10px; color: var(--shop-ink); font: 600 13px/20px Poppins, sans-serif; }
  .configurator-page .stage-actions button[data-share-build] { height: 40px; min-height: 40px; padding: 9px 14px; border: 1px solid rgb(11 24 36 / .2); border-radius: 10px; }
  .configurator-page [data-hint] { top: 15px !important; left: 25px !important; color: rgb(11 24 36 / .5) !important; font: 400 12px/14px Roboto, sans-serif !important; }
  .configurator-page .viewer-toolbar { right: 0 !important; bottom: 4px !important; }
  .configurator-page .viewer-toolbar.shop-view-switch { box-sizing: border-box; gap: 8px; height: 56px; padding: 6px; border: 1px solid rgb(11 24 36 / .08); border-radius: 14px; background: white; box-shadow: 0 8px 24px rgb(11 24 36 / .08); }
  .configurator-page .view-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--shop-surface-2); }
  .configurator-page .view-seg button { min-width: 0; min-height: 0; height: 36px; padding: 8px 14px; border-radius: 8px; color: rgb(11 24 36 / .6); font: 400 13px/20px Poppins, sans-serif; }
  .configurator-page .view-seg button[aria-pressed="true"] { color: var(--shop-ink); background: white; font-weight: 500; box-shadow: 0 1px 3px rgb(11 24 36 / .1); }
  .configurator-page .view-seg button > span[data-icon] { display: none; }
  .configurator-page .view-rule { width: 1px; height: 24px; background: rgb(11 24 36 / .1); }
  .configurator-page .viewer-toolbar [data-scale-toggle] { flex-direction: row-reverse; gap: 8px; min-width: 0; min-height: 0; height: 38px; padding: 9px 14px; border-radius: 10px; color: var(--shop-ink); background: none; box-shadow: none; font: 600 13px/20px Poppins, sans-serif; }
  .configurator-page .viewer-toolbar [data-scale-toggle] svg { width: 14px; height: 14px; }
}

/* E1 iPad 49:8234: 686 px viewer over a 612 px full-width build panel. */
@media (min-width: 701px) and (max-width: 1100px) {
  .configurator-page > section { height: auto; padding: 0 !important; }
  .configurator-layout { gap: 0 !important; }
  .configurator-stage { position: relative !important; top: auto !important; height: max(360px, calc(100svh - 680px)); min-height: 0; }
  .configurator-page .stage-actions { top: 29px; right: 24px; gap: 8px; }
  .configurator-page .stage-actions button { flex-direction: row-reverse; gap: 8px; height: 38px; padding: 9px 14px; color: var(--shop-ink); font: 600 13px/20px Poppins, sans-serif; }
  .configurator-page .stage-actions button[data-share-build] { box-sizing: border-box; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 10px; border: 1px solid rgb(11 24 36 / .16); border-radius: 999px; }
  .configurator-page .viewer-toolbar { top: 20px !important; left: 24px; }
  .configurator-page .viewer-toolbar.shop-view-switch { box-sizing: border-box; gap: 8px; height: 56px; padding: 6px; border: 1px solid rgb(11 24 36 / .08); border-radius: 14px; background: white; box-shadow: 0 8px 24px rgb(11 24 36 / .08); }
  .configurator-page .view-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--shop-surface-2); }
  .configurator-page .view-seg button { min-width: 0; min-height: 0; height: 36px; padding: 8px 14px; border-radius: 8px; color: rgb(11 24 36 / .6); font: 400 13px/20px Poppins, sans-serif; }
  .configurator-page .view-seg button[aria-pressed="true"] { color: var(--shop-ink); background: white; font-weight: 500; box-shadow: 0 1px 3px rgb(11 24 36 / .1); }
  .configurator-page .view-seg button > span[data-icon] { display: none; }
  .configurator-page .view-rule { width: 1px; height: 24px; background: rgb(11 24 36 / .1); }
  .configurator-page .viewer-toolbar [data-scale-toggle] { flex-direction: row-reverse; gap: 8px; min-width: 0 !important; min-height: 0; height: 38px; padding: 9px 14px; border-radius: 10px; color: var(--shop-ink); background: none; box-shadow: none; font: 600 13px/20px Poppins, sans-serif; }
  .configurator-page [data-hint] { bottom: 24px !important; left: 24px !important; color: rgb(11 24 36 / .5) !important; font: 400 12px/14px Roboto, sans-serif !important; }
  body.configurator-page .configurator-panel { box-sizing: border-box; height: 612px; border: 0; border-radius: 24px 24px 0 0; background: white; box-shadow: 0 -8px 24px rgb(10 23 36 / .06); backdrop-filter: none; }
  .configurator-page [data-drawer-handle] { display: flex; align-items: center; gap: 24px; min-height: 0; height: 36px; margin: 34px 32px 0; padding: 0; border: 0; }
  .configurator-page [data-drawer-handle]::after { position: absolute; top: -24px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgb(11 24 36 / .18); content: ''; }
  .configurator-page [data-drawer-title] { flex: 1; transform: none; font: 400 24px/36px Poppins, sans-serif; }
  .configurator-page .drawer-review-progress { position: static; order: 1; width: 264px; height: 4px; transform: none; border-radius: 0; background: rgb(11 24 36 / .1); -webkit-mask: repeating-linear-gradient(90deg, #000 0 48px, transparent 48px 54px); mask: repeating-linear-gradient(90deg, #000 0 48px, transparent 48px 54px); }
  .configurator-page .drawer-review-progress span { background: var(--shop-teal); }
  .configurator-page .drawer-review-count { position: static; order: 2; color: var(--shop-teal-text); font: 500 10px/13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; }
  .configurator-page [data-drawer-toggle-label] { position: static; order: 3; display: inline-flex; align-items: center; gap: 6px; font: 500 13px/15px Roboto, sans-serif; }
  .configurator-page [data-drawer-toggle-label]::after { width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1824' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; content: ''; }
  .configurator-page .configurator-panel-scroll { padding: 0 32px; gap: 20px 24px; grid-template-columns: 320px minmax(0, 1fr); }
  .configurator-page .preset-section { margin: 20px 0 0; }
  .configurator-page .configurator-section-label { gap: 10px; height: 23px; margin-bottom: 10px; }
  .configurator-page .configurator-section-label > span { width: 14px; color: rgb(11 24 36 / .45); font: 500 11px/14px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page .configurator-section-label strong { font: 400 15px/23px Poppins, sans-serif; }
  .configurator-page .configurator-section-label small { display: none; }
  .configurator-page .preset-scroller { gap: 8px; padding: 0; }
  .configurator-page .preset-fade { display: none; }
  .configurator-page .config-preset { box-sizing: border-box; display: grid; grid-template-rows: 64px auto auto; flex: 1 0 0; min-width: 0; height: 116px; gap: 0; padding: 0 0 10px; border: 1px solid rgb(11 24 36 / .1); border-radius: 12px; box-shadow: none; }
  .configurator-page .config-preset.is-selected { border-color: var(--shop-teal); box-shadow: none; }
  .configurator-page .config-preset img { width: 100%; height: 64px; margin: 0; aspect-ratio: auto; border-radius: 0; background: var(--shop-surface-3); }
  .configurator-page .config-preset strong { padding: 6px 10px 0; font: 400 12.5px/19px Poppins, sans-serif; }
  .configurator-page .config-preset.is-selected strong { font-weight: 500; }
  .configurator-page .config-preset small { padding: 0 10px; color: rgb(11 24 36 / .5); font: 400 10px/13px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page #core-parts-wrap { margin-top: 0 !important; }
  .configurator-page .option-group > button > span:first-child { flex: 1; gap: 10px; }
  .configurator-page .option-group > button > span:first-child > span { flex: 1; }
  .configurator-page .option-group > button small { color: rgb(11 24 36 / .55); font: 400 13px/15px Roboto, sans-serif; }
  .configurator-page .option-group > p::before, .configurator-page .option-group > button > span:first-child::before { width: 14px; color: rgb(11 24 36 / .45); font: 500 11px/14px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page .option-group > button > svg { width: 16px; height: 16px; opacity: .45; transform: rotate(-90deg); }
  .configurator-page .option-group[data-testid="section-displays"] > button { top: 0; }
  .configurator-page .option-group[data-testid="section-keyboard"] > button { top: 56px; }
  .configurator-page .option-group[data-testid="section-arms"] > button { top: 112px; }
  .configurator-page .option-group[data-testid="section-utilities"] > button { top: 168px; }
  .configurator-page .option-group[data-testid="section-displays"] .grid::before { height: 27px; font: 500 15px/23px Poppins, sans-serif; }
  .configurator-page .display-note { top: 5px; right: 0; color: rgb(11 24 36 / .55); font: 400 12px/14px Roboto, sans-serif; }
  .configurator-page .option-btn { box-sizing: border-box; min-height: 44px; padding: 11px 14px !important; border: 1px solid rgb(11 24 36 / .1) !important; border-radius: 12px !important; color: var(--shop-ink) !important; font: 400 14px/21px Poppins, sans-serif !important; }
  .configurator-page .option-btn[aria-pressed="true"] { border-color: rgb(61 178 180 / .7) !important; background: var(--shop-selected) !important; font-weight: 500 !important; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn span.flex { flex-direction: row-reverse; justify-content: flex-end; gap: 12px; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn .option-badge { margin-left: auto; color: rgb(11 24 36 / .5); font: 400 9px/12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn svg { box-sizing: border-box; width: 16px; height: 16px; padding: 2px; border: 1px solid rgb(11 24 36 / .28); border-radius: 5px; color: transparent !important; background: white; visibility: visible !important; opacity: 1 !important; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn[aria-pressed="true"] svg { border: 0; color: white !important; background: var(--shop-ink); }
  .configurator-page .configurator-panel-footer { display: flex; align-items: center; gap: 24px; padding: 18px 32px 26px; border-top: 1px solid rgb(11 24 36 / .08); }
  .configurator-page .build-summary { display: grid; grid-template-columns: auto 1fr; flex: 1; gap: 2px 12px; }
  .configurator-page .summary-heading { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; }
  .configurator-page .summary-heading strong { color: rgb(11 24 36 / .8); font: 500 14px/21px Poppins, sans-serif; }
  .configurator-page .summary-heading .shop-chip { min-height: 24px; padding: 5px 9px; font-size: 9.5px; }
  .configurator-page .summary-price { grid-row: 2; grid-column: 1; margin: 0; font: 500 38px/44px Poppins, sans-serif; letter-spacing: 0; }
  .configurator-page .summary-detail { display: grid; grid-row: 2; grid-column: 2; align-content: center; gap: 1px; max-width: none; margin: 0; }
  .configurator-page .summary-detail span:first-child { color: rgb(11 24 36 / .9); font: 500 13px/15px Roboto, sans-serif; }
  .configurator-page .summary-detail span:last-child { color: rgb(11 24 36 / .55); font: 400 12px/14px Roboto, sans-serif; }
  .configurator-page .buy-actions { display: flex; flex-direction: row-reverse; min-width: 0; gap: 8px; }
  .configurator-page .buy-actions .shop-btn { min-height: 0; padding: 14px 22px; font-size: 15px; line-height: 23px; }
  .configurator-page .configurator-panel-footer { flex-wrap: wrap; }
  .configurator-page .checkout-note { width: 100%; margin: -16px 0 0; text-align: right; color: rgb(11 24 36 / .6); font: 400 12px/14px Roboto, sans-serif; }
}

/* E1 phone 49:8446: half-open drawer over the viewer, fixed price bar. */
@media (max-width: 700px) {
  .configurator-page .viewer-toolbar { top: 12px !important; left: 12px; }
  .configurator-page .viewer-toolbar.shop-view-switch { box-sizing: border-box; flex-direction: column; gap: 8px; width: 52px; height: auto; padding: 6px; border: 1px solid rgb(11 24 36 / .08); border-radius: 14px; background: white; box-shadow: 0 8px 24px rgb(11 24 36 / .08); }
  .configurator-page .view-seg { display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: 10px; background: var(--shop-surface-2); }
  .configurator-page .view-seg button { display: grid; place-items: center; width: 34px; min-width: 0; height: 32px; min-height: 0; padding: 0; border-radius: 8px; }
  .configurator-page .view-seg button > span:last-child { display: none; }
  .configurator-page .view-seg button svg { width: 20px; height: 20px; opacity: .55; }
  .configurator-page .view-seg button[aria-pressed="true"] { background: white; box-shadow: 0 1px 3px rgb(11 24 36 / .1); }
  .configurator-page .view-seg button[aria-pressed="true"] svg { opacity: 1; }
  .configurator-page .view-rule { width: 24px; height: 1px; background: rgb(11 24 36 / .1); }
  .configurator-page .viewer-toolbar [data-scale-toggle] { display: grid !important; place-items: center; width: 36px; min-width: 36px !important; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: white; }
  .configurator-page .viewer-toolbar [data-scale-toggle] > span:last-child { display: none; }
  .configurator-page .stage-actions { top: 19px; right: 12px; gap: 8px; }
  .configurator-page .stage-actions button { display: grid; place-items: center; box-sizing: border-box; width: 38px; height: 38px; padding: 10px; border: 1px solid rgb(11 24 36 / .16); border-radius: 999px; background: white; }
  .configurator-page .stage-actions svg { width: 16px; height: 16px; }
  body.configurator-page .configurator-panel { border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -6px 20px rgb(10 23 36 / .08); backdrop-filter: none; }
  .configurator-page [data-drawer-handle] { min-height: 40px; padding-top: 10px; border-bottom: 0; }
  .configurator-page [data-drawer-handle]::before { width: 36px; height: 4px; border-radius: 2px; background: rgb(11 24 36 / .18); }
  .configurator-page .configurator-panel-scroll { padding: 0; }
  .configurator-page .configurator-intro { margin: 0 !important; padding: 0 16px 12px; }
  .configurator-page .configurator-heading { align-items: center; gap: 8px; height: 30px; }
  .configurator-page .configurator-intro h1 { flex: 1; transform: none; font: 400 20px/30px Poppins, sans-serif; letter-spacing: 0; }
  .configurator-page .configurator-heading > div { flex: 1; }
  .configurator-page .configurator-intro > .review-count, .configurator-page .configurator-heading .review-count { transform: none; color: var(--shop-teal-text); font: 500 10px/13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; }
  .configurator-page .configurator-intro > .review-progress { --seg: calc((100vw - 56px) / 5); height: 4px; margin-top: 10px !important; border-radius: 0; background: rgb(11 24 36 / .1); -webkit-mask: repeating-linear-gradient(90deg, #000 0 var(--seg), transparent var(--seg) calc(var(--seg) + 6px)); mask: repeating-linear-gradient(90deg, #000 0 var(--seg), transparent var(--seg) calc(var(--seg) + 6px)); }
  .configurator-page .review-progress span { background: var(--shop-teal); }
  .configurator-page .preset-section { margin: 0; padding: 4px 0 14px 16px; }
  .configurator-page .configurator-section-label { gap: 10px; height: 23px; margin: 0 0 8px; padding-right: 16px; }
  .configurator-page .configurator-section-label > span { width: 14px; color: rgb(11 24 36 / .45); font: 500 11px/14px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page .configurator-section-label strong { flex: 1; font: 400 15px/23px Poppins, sans-serif; }
  .configurator-page .configurator-section-label small { color: rgb(11 24 36 / .55); font: 400 13px/15px Roboto, sans-serif; letter-spacing: 0; }
  .configurator-page .preset-scroller { gap: 8px; padding: 0 48px 0 0; }
  .configurator-page .preset-fade { right: 0; bottom: 0; width: 56px; }
  .configurator-page .config-preset { box-sizing: border-box; display: grid; grid-template-rows: 64px auto auto; flex: 0 0 100px; height: 116px; gap: 0; padding: 0 0 10px; border: 1px solid rgb(11 24 36 / .1); border-radius: 12px; box-shadow: none; }
  .configurator-page .config-preset.is-selected { border-color: var(--shop-teal); }
  .configurator-page .config-preset img { width: 98px; height: 64px; margin: 0; aspect-ratio: auto; border-radius: 0; background: var(--shop-surface-3); }
  .configurator-page .config-preset strong { padding: 6px 10px 0; font: 400 12.5px/19px Poppins, sans-serif; }
  .configurator-page .config-preset.is-selected strong { font-weight: 500; }
  .configurator-page .config-preset small { padding: 0 10px; color: rgb(11 24 36 / .5); font: 400 10px/13px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page .configurator-panel-scroll > .space-y-4 > * + * { margin-top: 0 !important; }
  .configurator-page .option-group { padding: 10px 16px !important; border-top: 1px solid rgb(11 24 36 / .07); }
  .configurator-page .option-group:has(> [data-group-toggle] + .grid:not(.hidden)) { background: #F7F9F8; }
  .configurator-page .option-group > p, .configurator-page .option-group > button { display: flex; align-items: center; gap: 10px; width: 100%; height: 23px; margin: 0 !important; padding: 0; border: 0; background: none; color: var(--shop-ink) !important; font: 400 15px/23px Poppins, sans-serif !important; }
  .configurator-page .option-group > p::before, .configurator-page .option-group > button > span:first-child::before { width: 14px; color: rgb(11 24 36 / .4); font: 500 11px/14px 'Geist Mono', ui-monospace, monospace; }
  .configurator-page .option-group > button > span:first-child { display: flex; flex: 1; align-items: center; gap: 10px; }
  .configurator-page .option-group > button > span:first-child > span { flex: 1; }
  .configurator-page .option-group > p small, .configurator-page .option-group > button small { margin-left: auto; color: rgb(11 24 36 / .5); font: 400 13px/15px Roboto, sans-serif; }
  .configurator-page .option-group > button > svg { width: 16px; height: 16px; opacity: .5; }
  .configurator-page .option-group .grid { gap: 8px !important; margin-top: 8px; }
  .configurator-page .option-btn { box-sizing: border-box; min-height: 40px; padding: 9px 14px !important; border: 1px solid rgb(11 24 36 / .1) !important; border-radius: 12px !important; color: var(--shop-ink) !important; font: 400 14px/21px Poppins, sans-serif !important; }
  .configurator-page .option-btn[aria-pressed="true"] { border-color: rgb(61 178 180 / .7) !important; background: var(--shop-selected) !important; font-weight: 500 !important; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn span.flex { flex-direction: row-reverse; justify-content: flex-end; gap: 12px; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn .option-badge { margin-left: auto; color: rgb(11 24 36 / .5); font: 400 9px/12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn svg { box-sizing: border-box; width: 16px; height: 16px; padding: 2px; border: 1px solid rgb(11 24 36 / .28); border-radius: 5px; color: transparent !important; background: white; visibility: visible !important; opacity: 1 !important; }
  .configurator-page .option-group:has(> [data-group-toggle]) .option-btn[aria-pressed="true"] svg { border: 0; color: white !important; background: var(--shop-ink); }
  /* 64 px, and the drawer sits on top of it rather than behind it. The preset note is in the drawer. */
  .configurator-page .mobile-price-bar { box-sizing: border-box; height: 64px; border-top: 1px solid rgb(11 24 36 / .08); box-shadow: 0 -6px 16px rgb(10 23 36 / .08); }
  .configurator-page .mobile-price-bar .mobile-price { top: 8px; font: 500 22px/28px Poppins, sans-serif; }
  .configurator-page .mobile-price-note { display: none; }
  .configurator-page .mobile-price-bar .shop-btn { top: 10px; min-width: 0; min-height: 0; padding: 10px 18px; font-size: 15px; line-height: 23px; }
  .configurator-page .mobile-price-bar .mobile-quote { top: 36px; min-height: 22px; color: rgb(11 24 36 / .6); font: 400 12px/14px Roboto, sans-serif; }
  .configurator-page .mobile-price-bar .mobile-quote span { color: var(--shop-ink); font-weight: 500; text-decoration: underline; }
}

/* Build sheet 68:17374 (US Letter, 816 × 1056). */
.build-sheet { box-sizing: border-box; gap: 0; padding: 44px 48px 36px; }
.sheet-brand { height: 29px; padding-bottom: 20px; border-bottom: 1px solid rgb(11 24 36 / .1); box-sizing: content-box; }
.sheet-brand img { width: 124px; }
.sheet-brand small { color: rgb(11 24 36 / .55); font: 500 10px/13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; }
.sheet-brand b { color: rgb(11 24 36 / .8); font: 400 11px/14px 'Geist Mono', ui-monospace, monospace; }
.sheet-title-row { margin: 20px 0 20px; }
.sheet-title-row h1 { margin: 0 0 4px; font: 400 30px/45px Poppins, sans-serif; letter-spacing: 0; }
.sheet-title-row p { color: rgb(11 24 36 / .65); font: 400 13px/15px Roboto, sans-serif; }
.sheet-price-block { gap: 2px; }
.sheet-price { font: 600 28px/42px Poppins, sans-serif; letter-spacing: 0; }
.sheet-price-block span { color: rgb(11 24 36 / .6); font: 400 11.5px/13px Roboto, sans-serif; }
.sheet-views figure { gap: 6px; }
.sheet-image-box { border-radius: 10px; background: var(--shop-surface-3); }
.sheet-views figcaption { color: rgb(11 24 36 / .5); font: 500 9px/12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; }
.sheet-columns { grid-template-columns: 464px 232px; gap: 24px; margin: 20px 0 28px; }
.sheet-section h2 { margin: 0 0 8px; color: rgb(11 24 36 / .55); font: 500 10px/13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; }
.sheet-section-heading { margin-bottom: 8px; }
.sheet-section-heading h2 { margin: 0; }
.sheet-section-heading span { color: rgb(11 24 36 / .5); font: 400 11px/13px Roboto, sans-serif; }
.sheet-parts-heading, .sheet-parts li { grid-template-columns: 18px minmax(0, 1fr) 62px 32px; gap: 10px; }
.sheet-parts-heading { padding: 7px 12px; border: 1px solid rgb(11 24 36 / .12); border-bottom: 0; border-radius: 10px 10px 0 0; color: rgb(11 24 36 / .55); background: var(--shop-surface-3); font: 500 8.5px/11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; }
.sheet-parts-heading span:nth-last-child(-n+2) { text-align: right; }
.sheet-parts { border-color: rgb(11 24 36 / .12); border-radius: 0 0 10px 10px; }
.sheet-parts li { align-items: start; min-height: 0; padding: 9px 12px; border-bottom: 0; border-top: 1px solid rgb(11 24 36 / .08); }
.sheet-parts li:first-child { border-top: 0; }
.sheet-parts li span:first-child { color: rgb(11 24 36 / .5); font: 500 10px/13px 'Geist Mono', ui-monospace, monospace; }
.sheet-parts li > div { gap: 1px; }
.sheet-parts li strong { font: 500 11.5px/17px Poppins, sans-serif; }
.sheet-parts li small { color: rgb(11 24 36 / .6); font: 400 10px/12px Roboto, sans-serif; }
.sheet-parts li > span:nth-last-child(-n+2) { color: rgb(11 24 36 / .85); font: 400 11px/13px Roboto, sans-serif; }
.sheet-note { gap: 6px; margin: 8px 0 0; padding-top: 2px; color: rgb(11 24 36 / .6); font: 400 10.5px/12px Roboto, sans-serif; }
.sheet-note svg { opacity: .5; }
.sheet-specs div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgb(11 24 36 / .08); font: 400 10.5px/12px Roboto, sans-serif; }
.sheet-specs dt { color: rgb(11 24 36 / .55); }
.sheet-specs dd { color: rgb(11 24 36 / .9); font-weight: 500; }
.sheet-qr { gap: 12px; margin-top: 8px; padding: 12px; border: 1px solid rgb(11 24 36 / .12); border-radius: 10px; }
.sheet-qr img { width: 68px; height: 68px; }
.sheet-qr div { display: grid; gap: 3px; }
.sheet-qr b { font: 500 12px/18px Poppins, sans-serif; }
.sheet-qr p { margin: 0; color: rgb(11 24 36 / .6); font: 400 10px/12px Roboto, sans-serif; }
.sheet-qr small { color: rgb(11 24 36 / .75); font: 400 8.5px/11px 'Geist Mono', ui-monospace, monospace; }
.sheet-footer { padding-top: 20px; border-top: 1px solid rgb(11 24 36 / .1); color: rgb(11 24 36 / .7); font: 400 10.5px/12px Roboto, sans-serif; }
.sheet-footer svg { width: 13px; height: 13px; color: var(--shop-green); }
.sheet-legal { margin-top: 20px; color: rgb(11 24 36 / .5); font: 400 9px/11px Roboto, sans-serif; }
.sheet-legal span:last-child { font-family: 'Geist Mono', ui-monospace, monospace; }

/* E1 share popover 68:17058 and collapsed panel 68:16834. */
.configurator-page .share-popover { box-sizing: border-box; display: grid; gap: 16px; top: 136px; right: 24px; width: 400px; padding: 18px 20px 20px; border: 1px solid rgb(11 24 36 / .08); border-radius: 18px; background: white; box-shadow: 0 16px 40px rgb(10 23 36 / .14); }
.configurator-page .share-popover[hidden] { display: none; }
.configurator-page .share-popover::before { top: -6px; right: 64px; width: 12px; height: 12px; border-color: rgb(11 24 36 / .08); }
.configurator-page .share-head { display: flex; align-items: center; gap: 8px; }
.configurator-page .share-head > div { display: grid; flex: 1; gap: 2px; }
.configurator-page .share-head strong { font: 500 16px/24px Poppins, sans-serif; }
.configurator-page .share-head p { margin: 0; color: rgb(11 24 36 / .6); font: 400 12.5px/15px Roboto, sans-serif; }
.configurator-page .share-close { position: static; box-sizing: border-box; width: 32px; height: 32px; border: 1px solid rgb(11 24 36 / .16); background: white; }
.configurator-page .share-close svg { width: 13px; height: 13px; }
.configurator-page .share-summary { gap: 12px; padding: 10px 14px 10px 10px; border: 0; border-radius: 12px; background: var(--shop-canvas); }
.configurator-page .share-summary img { width: 52px; height: 52px; border-radius: 8px; background: white; }
.configurator-page .share-summary div { flex: 1; gap: 2px; min-width: 0; }
.configurator-page .share-summary b { font: 500 14px/21px Poppins, sans-serif; }
.configurator-page .share-summary small { overflow: visible; color: rgb(11 24 36 / .6); font: 400 12px/14px Roboto, sans-serif; white-space: normal; }
.configurator-page .share-summary > span { font: 600 15px/23px Poppins, sans-serif; }
.configurator-page .share-link-row { display: flex; gap: 8px; margin: 0; }
.configurator-page .share-link-field { box-sizing: border-box; display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 11px 12px; border: 1px solid rgb(11 24 36 / .14); border-radius: 10px; }
.configurator-page .share-link-field svg { width: 16px; height: 16px; flex: none; opacity: .6; }
.configurator-page .share-link-field input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; color: rgb(11 24 36 / .85); background: none; font: 400 12.5px/16px 'Geist Mono', ui-monospace, monospace; }
.configurator-page .share-link-row .shop-btn { min-height: 0; padding: 9px 14px; font-size: 13px; }
.configurator-page .share-kicker { color: rgb(11 24 36 / .5); font: 500 10px/13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.configurator-page .share-tiles { gap: 8px; }
.configurator-page .share-tiles a { gap: 8px; padding: 12px; border: 1px solid rgb(11 24 36 / .1); border-radius: 12px; }
.configurator-page .share-tiles a > span[data-icon] { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--shop-selected); }
.configurator-page .share-tiles svg { width: 17px; height: 17px; }
.configurator-page .share-tiles b { font: 500 13px/20px Poppins, sans-serif; }
.configurator-page .share-tiles small { color: rgb(11 24 36 / .6); font: 400 11.5px/13px Roboto, sans-serif; }
.configurator-page .share-note { display: flex; align-items: center; gap: 6px; margin: 0; color: rgb(11 24 36 / .55); font: 400 12px/14px Roboto, sans-serif; }
.configurator-page .share-note svg { width: 13px; height: 13px; opacity: .55; }
.build-panel-collapsed .collapsed-tools > button { box-sizing: border-box; top: 88px; left: 24px; gap: 12px; width: 206px; height: 57px; padding: 10px 12px 10px 14px; border: 1px solid rgb(11 24 36 / .08); border-radius: 14px; color: var(--shop-ink); box-shadow: 0 12px 32px rgb(11 24 36 / .06); text-align: left; }
.collapsed-tools > button > span[data-icon] svg { width: 18px; height: 18px; }
.collapsed-tools > button > span[data-icon]:last-child { margin-left: auto; }
.collapsed-tools > button > span[data-icon]:last-child svg { width: 16px; height: 16px; }
.collapsed-tools__text { display: grid; gap: 1px; }
.collapsed-tools__text b { font: 500 14px/21px Poppins, sans-serif; }
.collapsed-tools__text .review-count { color: var(--shop-teal-text); font: 500 10px/13px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; }
.build-panel-collapsed .collapsed-price { box-sizing: border-box; bottom: 24px; left: 24px; display: flex; align-items: center; gap: 16px; width: 510px; min-width: 0; height: 72px; padding: 10px 10px 10px 18px; border: 1px solid rgb(11 24 36 / .08); border-radius: 16px; box-shadow: 0 12px 32px rgb(11 24 36 / .06); }
.collapsed-price > div { display: grid; flex: 1; }
.collapsed-price > div > span { color: rgb(11 24 36 / .6); font: 400 12px/14px Roboto, sans-serif; }
.collapsed-price strong { font: 600 24px/36px Poppins, sans-serif; }
.collapsed-price .shop-btn { min-height: 0; padding: 9px 14px; font-size: 13px; }
body.configurator-page.build-panel-collapsed .configurator-layout { grid-template-columns: minmax(0, 1fr) !important; }
.configurator-page.build-panel-collapsed [data-hint] { left: 240px !important; }
.configurator-page .share-tiles small { white-space: nowrap; }
@media (max-width: 700px) {
  .build-sheet { padding: 25px 22px; }
  .sheet-columns { grid-template-columns: minmax(0, 1fr); }
  .sheet-parts-heading, .sheet-parts li { grid-template-columns: 18px minmax(0, 1fr) 52px 28px; }
}

/* Section headers: the title never wraps; the selection summary takes what is left and truncates. */
.option-group > button > span:first-child { flex: 1; min-width: 0; }
.option-group > button > span:first-child > span:first-child { flex: none; white-space: nowrap; }
.option-group > button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A plain grid track sizes to content; pin it to the panel width. */
#tower-attach { grid-template-columns: minmax(0, 1fr); }
/* One option per row, like Displays: two columns are too narrow for "Mini Tool Arm Right".
   Labels still truncate rather than widen the panel if a longer one is added. */
.option-group .grid { grid-template-columns: minmax(0, 1fr) !important; }
.option-group .option-btn { min-width: 0; }
.option-group .option-btn span.flex > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The helper line under an open section shares the "> p" selector with the Displays heading; keep it plain text. */
.option-group > p.mt-2 { display: block; margin: 8px 0 4px !important; color: #65737c !important; font: 400 11px/1.4 Roboto, sans-serif !important; overflow-wrap: break-word; }
.option-group > p.mt-2::before { content: none; }

@media (min-width: 701px) and (max-width: 1100px) {
  .configurator-page #tower-attach { min-height: 250px; }
  .configurator-page .option-group[data-testid="section-utilities"]:has(> [data-group-toggle]) > p.mt-2 { position: absolute; top: 216px; left: 0; }
}

@media (max-width: 700px) {
  .configurator-page .share-popover { right: 8px; left: 8px; width: auto; }
}

.sheet-views figure[hidden] { display: none; }
/* Pressed view buttons: dark icon on white; the scale person on the teal tint. */
.configurator-page .viewer-toolbar [aria-pressed="true"] { color: var(--shop-ink); }
.configurator-page .viewer-toolbar [data-scale-toggle][aria-pressed="true"] { background: var(--shop-selected); color: var(--shop-ink); }
/* The QR code replaces the popover's contents, with a Back button, so it fits on any screen. */
/* The popover opens 136 px down; it scrolls rather than run off the bottom of a short window. */
.configurator-page .share-popover { max-height: calc(100svh - 152px); overflow-y: auto; overscroll-behavior: contain; }
.share-popover.is-qr > :not(.share-head):not(.share-qr) { display: none !important; }
.share-qr { display: grid; justify-items: center; gap: 12px; margin: 0; }
.share-qr[hidden] { display: none; }
.share-qr-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid rgb(11 24 36 / .12); border-radius: 999px; background: white; color: var(--shop-ink); font: 500 13px/1 Poppins, sans-serif; }
.share-qr-back svg { width: 16px; height: 16px; }
.share-qr-back:focus:not(:focus-visible) { outline: none; }
.share-qr img { width: min(260px, 66vw); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.share-qr figcaption { color: #65737c; font: 400 13px/1.4 Roboto, sans-serif; text-align: center; }

@media print {
  /* Letter pages: a long parts list runs onto the next page instead of under the footer. The page margins
     hold the sheet's padding and the page number, so every page keeps the same edges. */
  @page {
    size: letter portrait;
    margin: .38in .45in .45in;
    @bottom-right { content: "Page " counter(page) " of " counter(pages); color: rgb(11 24 36 / .5); font: 400 9px/11px 'Geist Mono', ui-monospace, monospace; }
  }
  html, body.build-sheet-page { min-height: 0; padding: 0; background: white; }
  body.build-sheet-page::after { content: none !important; }
  /* Nearly one page tall (a hair under, so rounding can't spill a blank page), so a single-page sheet keeps
     its footer at the bottom. */
  .build-sheet { box-sizing: border-box; width: auto; min-height: calc(11in - .83in - 4px); margin: 0; padding: 0; box-shadow: none; }
  .sheet-brand { flex: none; padding-bottom: 12px; }
  .sheet-title-row { flex: none; margin: 14px 0; }
  .sheet-title-row h1 { font-size: 25px; line-height: 1.15; }
  .sheet-views { flex: none; gap: 10px; break-inside: avoid; }
  /* A fixed height: an aspect-ratio box grew with taller renders and pushed the footer off the page. */
  .sheet-image-box { height: 250px; aspect-ratio: auto; }
  .sheet-views img { transform: none; }
  .sheet-views--single figure { grid-template-rows: 270px auto; }
  .sheet-views--single .sheet-image-box { height: 270px; aspect-ratio: auto; }
  .sheet-columns { flex: none; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-top: 14px; }
  .sheet-parts li { padding-block: 6px; }
  /* Each page's piece of the list gets its own closed border. */
  .sheet-parts { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .sheet-parts li, .sheet-specs div, .sheet-qr, .sheet-note, .sheet-parts-heading { break-inside: avoid; }
  .sheet-section-heading, .sheet-parts-heading { break-after: avoid; }
  /* An inch square scans easily from paper and leaves the page room for its footer. */
  .sheet-qr { padding: 8px; }
  .sheet-qr img { width: 1in; height: 1in; }
  .sheet-footer { flex: none; margin-top: auto; padding-top: 12px; break-inside: avoid; break-after: avoid; }
  .sheet-legal { flex: none; margin-top: 12px; break-inside: avoid; }
  /* The page margin prints the real page number. */
  .sheet-legal span:last-child { display: none; }
}

/* iPad: the section list is a left rail and the open section's options fill the right column,
   one section at a time. */
@media (min-width: 701px) and (max-width: 1100px) {
  .option-group:has(> [data-group-toggle]):has(> [data-group-toggle]) > .grid:not(.hidden) { position: absolute; top: 6px; right: 0; display: grid; width: calc(100% - 344px); margin: 0 !important; gap: 8px !important; }
  .option-group:has(> [data-group-toggle]):has(> [data-group-toggle]) > .grid::before { color: #0b1824; font: 500 15px Poppins, sans-serif; }
  .option-group[data-testid="section-keyboard"]:has(> [data-group-toggle]) > .grid::before { content: 'Keyboard & laptop'; }
  .option-group[data-testid="section-arms"]:has(> [data-group-toggle]) > .grid::before { content: 'Arms & rails'; }
  .option-group[data-testid="section-utilities"]:has(> [data-group-toggle]) > .grid::before { content: 'Utilities'; }
  .option-group > button[data-group-toggle]:has(+ .grid:not(.hidden)) { border: 1px solid #75c7c5; border-radius: 9px; background: #e3f3f3; }
}

/* Build footer, desktop and iPad: name + one status line and the price on top, the actions below.
   A custom build (.is-custom) shows only Request a quote. */
@media (min-width: 701px) {
  .configurator-page .build-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: none; }
  .configurator-page .summary-heading { display: grid; gap: 2px; min-width: 0; }
  .configurator-page .summary-heading strong { color: #0b1824; font: 500 15px/21px Poppins, sans-serif; }
  .configurator-page .summary-meta { color: rgb(11 24 36 / .55); font: 400 12px/16px Roboto, sans-serif; }
  .configurator-page .summary-price { grid-row: auto; grid-column: auto; flex: none; margin: 0; font: 500 26px/32px Poppins, sans-serif; letter-spacing: -.01em; }
  .configurator-page .is-custom .summary-price, .configurator-page .is-custom [data-add-to-cart] { display: none; }
  .configurator-page .is-custom [data-request-quote] { border-color: #0b1824; color: #fff; background: #0b1824; }
  .configurator-page .buy-actions .shop-btn { min-height: 0; padding: 11px 18px; font-size: 14px; line-height: 20px; }
}
@media (min-width: 1101px) {
  .configurator-page .configurator-panel-footer { display: grid; gap: 12px; padding: 14px 24px 16px; }
  .configurator-page .buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .configurator-page .is-custom .buy-actions { grid-template-columns: 1fr; }
}