.site-header{--site-header-mobile:0;display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem;padding:.75rem clamp(1rem,4vw,4.5rem);border-bottom:1px solid var(--line);background:var(--canvas,Canvas);color:var(--ink-900,CanvasText)}
.site-header__brand{min-inline-size:0;max-inline-size:100%;flex:1 1 auto}.site-header__brand>a{max-inline-size:100%;min-inline-size:0;display:inline-flex;align-items:center;gap:.65rem;overflow-wrap:anywhere}.site-header__brand img{flex:none;object-fit:contain}.site-header__brand span{min-inline-size:0}
.site-header__trigger{display:none;flex:none;align-items:center;justify-content:center;min-inline-size:44px;min-block-size:44px;padding:.4rem;border:1px solid var(--line-strong,GrayText);border-radius:50%;background:var(--surface,Canvas);color:inherit;cursor:pointer}.site-header__trigger svg{inline-size:1.25rem;block-size:1.25rem}
.site-header__panel{position:static;inset:auto;display:flex;flex:1 1 auto;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.75rem 1.25rem;inline-size:auto;max-inline-size:100%;margin:0;padding:0;border:0;color:inherit;background:transparent;overflow:visible}
.site-header__panel-head{display:none}.site-header__language{min-inline-size:0}.site-header__navigation{min-inline-size:0}.site-header__actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;min-inline-size:0}
@media(max-width:54rem){
 .site-header{--site-header-mobile:1;position:sticky;inset-block-start:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;padding:.5rem 12px;transition:transform .18s ease;will-change:auto}
 .site-header[data-site-header-hidden=true]:not(:focus-within):not(:has(:popover-open)){transform:translateY(-100%)}
 .site-header__brand>a{font-size:1.2rem}.site-header__brand img{inline-size:32px;block-size:32px}.site-header__trigger{display:inline-flex}
 .site-header__panel:not(:popover-open){display:none}
 .site-header__panel:popover-open{--site-menu-inset:.65rem;--site-menu-icon:1.25rem;--site-menu-icon-gap:.6rem;position:fixed;inset:auto;inset-block-start:8px;inset-inline-start:8px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:.35rem;box-sizing:border-box;inline-size:min(28rem,calc(100vw - 16px));max-block-size:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;padding:.75rem;border:1px solid var(--line-strong,GrayText);border-radius:.8rem;background:var(--surface,Canvas);color:var(--ink-900,CanvasText);box-shadow:0 1rem 3rem #0003;font-size:1rem}
 .site-header__panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.site-header__panel-head>strong{min-inline-size:0;overflow-wrap:anywhere}.site-header__panel-head>button{flex:none}
 .site-header__language .language-select{position:relative;display:block;inline-size:100%;font-size:inherit}
 .site-header__navigation nav,.site-header__actions,.site-header__actions .account-menu-status{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:.35rem;font-size:inherit}
 /* The native controls and portal slots form one navigation list. They are not a wrapping action group. */
 .site-header__panel :is(
  .site-header__language select,
  .site-header__navigation nav>a,
  .site-header__actions>:is(a,button),
  .site-header__actions .catalog-interaction-tools>:is(a,button),
  .site-header__actions :is([data-account-menu-root],[data-catalog-comparison-slot],.account-menu-status)>:is(a,button)
 ){
  position:relative;display:flex;align-items:center;justify-content:flex-start;gap:var(--site-menu-icon-gap);box-sizing:border-box;
  inline-size:100%;min-inline-size:0;max-inline-size:100%;block-size:auto;min-block-size:44px;margin:0;
  padding:.45rem var(--site-menu-inset);padding-inline-start:calc(var(--site-menu-inset) + var(--site-menu-icon) + var(--site-menu-icon-gap));
  border:1px solid var(--line-strong,GrayText);border-radius:.4rem;background:var(--control-state-bg,var(--surface,Canvas));color:inherit;box-shadow:none;
  font:inherit;font-size:1rem;font-weight:500;line-height:1.4;text-align:start;text-decoration:none;white-space:normal;overflow-wrap:anywhere;word-break:normal
 }
 .site-header__panel :is(
  .site-header__language .language-select,
  .site-header__actions>:is(a,button),
  .site-header__actions .catalog-interaction-tools>:is(a,button),
  .site-header__actions :is([data-account-menu-root],[data-catalog-comparison-slot],.account-menu-status)>:is(a,button)
 )>svg{position:absolute;inset-inline-start:var(--site-menu-inset);inset-block-start:50%;inline-size:var(--site-menu-icon);block-size:var(--site-menu-icon);margin:0;transform:translateY(-50%);pointer-events:none}
 /* Keep the native select, with the same content inset and icon layer as the other menu controls. */
 .site-header__panel .site-header__language .language-select>select{appearance:none;padding-inline-end:calc(var(--site-menu-inset) + var(--site-menu-icon) + var(--site-menu-icon-gap))}
 .site-header__language .language-select>svg{z-index:1}
 .site-header__language .language-select::after{content:"";position:absolute;z-index:1;inset-inline-end:calc(var(--site-menu-inset) + .3rem);inset-block-start:50%;inline-size:.4rem;block-size:.4rem;border-inline-end:.1rem solid currentColor;border-block-end:.1rem solid currentColor;transform:translateY(-75%) rotate(45deg);pointer-events:none}
 .site-header__actions :is(a,button)>span{min-inline-size:0;overflow-wrap:anywhere}
 .site-header__actions :is([data-commerce-cart-count],.catalog-inquiry-count){flex:none;margin-inline-start:auto}
}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}
/* Native same-origin navigation and same-document updates use one transition layer. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-fade-out var(--dur-2, 160ms) var(--ease-exit, ease-out) both; }
  ::view-transition-new(root) { animation: vt-fade-in var(--dur-3, 220ms) var(--ease-emphasized, ease-out) both; }
  .product-detail-visual { view-transition-name: product-visual; }
  .product-detail-summary { view-transition-name: product-summary; }
  .product-story { view-transition-name: product-story; }
  ::view-transition-group(product-visual), ::view-transition-group(product-summary), ::view-transition-group(product-story) {
    animation-duration: var(--dur-3, 220ms);
    animation-timing-function: var(--ease-standard, ease-out);
  }
}
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* One layout for empty content, explanatory text and follow-up actions. */
.empty {
  animation: empty-state-enter var(--dur-3, 160ms) var(--ease-standard, ease) both;
  display: grid;
  place-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--ink-400);
}

.empty__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-600);
}

.empty__hint {
  font-size: .875rem;
  max-width: 100%;
  line-height: 1.7;
}
.empty__title > *, .empty__hint > * { margin: 0; }
.empty__icon { display: flex; align-items: center; justify-content: center; }
.empty__icon > svg { width: 3rem; height: 3rem; }.empty__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block-start: .5rem; }


@keyframes empty-state-enter { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) { .empty { animation: none; } }
/* Actions preserve their authored first line. Only measured continuation items consume free space. */
:where([data-ui-actions], [data-ui-meta]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, .5rem);
  min-inline-size: 0;
  max-inline-size: 100%;
}
:where([data-ui-actions], [data-ui-meta]) > * { min-inline-size: 0; max-inline-size: 100%; }
:where([data-ui-meta]) { justify-content: end; justify-self: end; margin-inline-start: auto; text-align: end; overflow-wrap: anywhere; }
:where([data-ui-actions]) > [data-ui-meta] { margin-inline-start: 0; }
[data-ui-actions][data-ui-wrap-start], [data-ui-actions] [data-ui-wrap-start] { margin-inline-start: auto; }
[data-ui-actions][hidden], [data-ui-meta][hidden] { display: none; }
:where([data-ui-actions], [data-ui-meta]):empty { display: none; }
[data-ui-actions][popover]:not(:popover-open), [data-ui-meta][popover]:not(:popover-open),
dialog[data-ui-actions]:not([open]), dialog[data-ui-meta]:not([open]) { display: none; }
/* Shared control dimensions and interaction states; surfaces consume one sizing contract. */
:root{--ui-control-size:max(44px,2.75rem);--ui-control-font-size:.875rem}
:where(input:not([type=checkbox],[type=radio],[type=range]),textarea):focus-visible{outline:2px solid var(--appearance-accent,Highlight);outline-offset:-2px;box-shadow:none}
@media(any-pointer:coarse){:is(button,.btn,.catalog-button,input,textarea,select,[contenteditable=true]){font-size:max(16px,1em)!important}}
:where(button,[role=button]):is([aria-expanded=true],[aria-pressed=true],[aria-selected=true],[aria-checked=true],[aria-current=page],[data-state=open]):not(:disabled),:where(button,[role=button])[aria-busy=true]{--control-state-bg:color-mix(in srgb,var(--appearance-accent,Highlight) 18%,var(--surface,Canvas));--control-state-ink:var(--appearance-text,CanvasText)}
:root {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme: light dark;
  font-size: calc(100% * var(--ui-font-scale, 1));
  --ui-line-height: 1.5;
  --appearance-text: light-dark(#13211d, #f5faf7);
  --appearance-secondary: light-dark(#4a5c56, #d1ddd7);
  --appearance-muted: light-dark(#5f6f68, #becdc7);
  --appearance-placeholder: light-dark(#a5ada8, #58655e);
  --appearance-accent: var(--brand-600, Highlight);
  --appearance-favorite-fill:light-dark(#f4b936,#f7c65b);
  --appearance-favorite-stroke:light-dark(#946200,#f7c65b);
}
/* WebKit focuses small editable text by zooming toward 16 CSS px. This is a
   shared input-size floor, including contenteditable; user page zoom stays enabled. */
@media (any-pointer: coarse) {
  :is(input,textarea,select,[contenteditable=true]) { font-size:max(16px,1em) !important; }
}
.appearance-trigger, .appearance-dialog, .appearance-dialog *, .appearance-controls, .appearance-controls * { box-sizing: border-box; }
.appearance-trigger--default, .appearance-controls button { font: inherit; line-height: var(--ui-line-height); color: inherit; min-height: var(--ui-control-size); border: 1px solid var(--line-strong, ButtonBorder); border-radius: .5rem; background: var(--control-state-bg,var(--surface, Canvas)); padding: .5em .8em; cursor: pointer; overflow-wrap: normal; word-break: keep-all; }
.appearance-trigger--default { display: inline-flex; align-items: center; justify-content: center; gap: .5em; color: var(--ink-900, var(--appearance-text, CanvasText)); width: var(--ui-control-size); height: var(--ui-control-size); min-width: var(--ui-control-size); padding: 9px; max-width: 100%; }
.appearance-trigger--default > svg { width: 24px; height: 24px; flex: none; }
.appearance-dialog { color: var(--ink-900, var(--appearance-text, CanvasText)); background: var(--surface, Canvas); border: 1px solid var(--line-strong, ButtonBorder); border-radius: 1rem; width: min(42rem, calc(100vw - 24px)); padding: clamp(12px, 3vw, 24px); }

.appearance-dialog > header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1rem; }
.appearance-dialog h2 { font-size: 1.25rem; line-height: var(--ui-line-height); margin: 0; overflow-wrap: anywhere; }
.appearance-controls { display: grid; gap: 1.5rem; text-align: start; font-size: .9375rem; }
.appearance-controls fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.appearance-controls legend { font-size: 1rem; font-weight: 650; padding: 0; margin-bottom: .75rem; }
.appearance-controls p { margin: .75rem 0; line-height: 1.6; color: var(--ink-600, var(--appearance-secondary, CanvasText)); overflow-wrap: anywhere; }
.appearance-theme { container:appearance-theme / inline-size; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.appearance-controls button[aria-checked=true], .appearance-controls button[aria-pressed=true] { border-color: var(--brand-600, Highlight); }
.appearance-size { padding: clamp(12px, 2.5vw, 20px); border: 1px solid var(--line, ButtonBorder); border-radius: .875rem; background: var(--surface-sunken, Canvas); }
.appearance-size__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.appearance-size__value { display: inline-flex; align-items: baseline; gap: .08em; font-size: 1.75rem; line-height: 1.5; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink-900, var(--appearance-text, CanvasText)); }
.appearance-size__value > span { font-size: .5em; font-weight: 500; color: var(--ink-600, var(--appearance-secondary, CanvasText)); }
.appearance-controls .appearance-reset { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .375em .5em; border-color: transparent; background: transparent; font-size: .8125rem; color: var(--ink-600, var(--appearance-secondary, CanvasText)); }
.appearance-reset svg { flex: none; width: 1em; height: 1em; }
.appearance-controls .appearance-reset:disabled { opacity: 1; cursor: default; color: var(--ink-400, var(--appearance-muted, CanvasText)); }
.appearance-reset:not(:disabled):hover { color: var(--ink-900, var(--appearance-text, CanvasText)); background: var(--surface, Canvas); border-color: var(--line-strong, ButtonBorder); }
.appearance-slider { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; margin-top: .5rem; }
.appearance-controls input[type=range] { --appearance-track-height: 6px; --appearance-thumb-size: clamp(22px, 1.375rem, 32px); appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: max(44px, 2.75rem); margin: 0; padding: 0; background: transparent; cursor: ew-resize; accent-color: var(--appearance-accent); }
.appearance-controls input[type=range]::-webkit-slider-runnable-track { height: var(--appearance-track-height); border-radius: 999px; background: linear-gradient(var(--appearance-range-direction,to right), var(--appearance-accent) 0 var(--appearance-range-progress), var(--line-strong, ButtonBorder) var(--appearance-range-progress) 100%); }
.appearance-controls input[type=range]:dir(rtl){--appearance-range-direction:to left}
.appearance-controls input[type=range]::-moz-range-track { height: var(--appearance-track-height); border-radius: 999px; background: var(--line-strong, ButtonBorder); }
.appearance-controls input[type=range]::-moz-range-progress { height: var(--appearance-track-height); border-radius: 999px; background: var(--appearance-accent); }
.appearance-controls input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--appearance-thumb-size); height: var(--appearance-thumb-size); margin-top: calc((var(--appearance-track-height) - var(--appearance-thumb-size)) / 2); border: 3px solid var(--surface, Canvas); border-radius: 50%; background: var(--appearance-accent); box-shadow: 0 0 0 1px var(--appearance-accent), 0 2px 5px rgb(0 0 0 / 20%); }
.appearance-controls input[type=range]::-moz-range-thumb { width: var(--appearance-thumb-size); height: var(--appearance-thumb-size); border: 3px solid var(--surface, Canvas); border-radius: 50%; background: var(--appearance-accent); box-shadow: 0 0 0 1px var(--appearance-accent), 0 2px 5px rgb(0 0 0 / 20%); box-sizing: border-box; }
.appearance-controls input[type=range]:focus-visible, .appearance-controls button:focus-visible { outline: 2px solid var(--appearance-accent); outline-offset: 4px; border-radius: .5rem; }
.appearance-controls .appearance-preview { margin: 1rem 0 0; padding: 1rem 1.125rem; border-inline-start: 3px solid var(--appearance-accent); background: var(--brand-050, Canvas); color: var(--ink-900, var(--appearance-text, CanvasText)); border-radius: 0 .5rem .5rem 0; }
.appearance-preview figcaption { margin-bottom: .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-600, var(--appearance-secondary, CanvasText)); }
.appearance-controls .appearance-preview p { margin: 0; color: inherit; font-size: 1rem; line-height: 1.6; }
@media print { :root { font-size: 100%; } .appearance-trigger, .appearance-dialog { display: none !important; } }
.appearance-ruler__ticks { position: relative; height: 2.25rem; margin-inline: calc(clamp(22px, 1.375rem, 32px) / 2); }
.appearance-ruler__ticks > span { position: absolute; inset-inline-start: var(--tick-position); inset-block-start: 0; display: grid; justify-items: center; gap: 4px; transform: translateX(-50%); }
.appearance-ruler__ticks > span:dir(rtl){transform:translateX(50%)}
.appearance-ruler__ticks i { display: block; width: 1px; height: 8px; background: var(--ink-600, var(--appearance-secondary, CanvasText)); }
.appearance-ruler__ticks small { font-size: 10px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.appearance-controls .appearance-ruler__hint { font-size: .75rem; margin-block: .5rem; }
.appearance-ruler__samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); gap: 8px; }
.appearance-controls .appearance-ruler__sample { display: grid; justify-items: start; align-content: center; min-height: 80px; min-width: 0; padding: 10px; gap: 4px; text-align: start; border-radius: .625rem; }
.appearance-ruler__sample > small { font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.appearance-ruler__sample > span { line-height: 1.5; white-space: nowrap; }

.appearance-theme button { display:flex; min-width:0; max-width:100%; align-items:center; justify-content:center; gap:4px; padding:6px 2px; }
.appearance-theme button svg { width:18px; height:18px; flex-shrink:0; }
.appearance-theme__label { min-width:0; max-width:100%; overflow-wrap:normal; word-break:keep-all; }
.appearance-theme__short { display:none; }
@container appearance-theme (width < 20em) {
  .appearance-theme button { flex-direction:column; gap:2px; }
  .appearance-theme button:lang(en) { font-size:min(1em,9cqi); }
}
@container appearance-theme (width < calc(12em + 30px)) {
  .appearance-theme button:lang(zh) .appearance-theme__full { display:none; }
  .appearance-theme button:lang(zh) .appearance-theme__short { display:inline; }
}

.appearance-trigger--default.appearance-trigger--label{width:auto;max-width:100%;height:auto;gap:8px;padding:8px 12px}

.appearance-controls[data-drag-anchored=true]{font-size:var(--drag-font-size)}

/* A bounded real two-axis scrollport, naturally shrinking around short tables. */
[data-table-viewport] {
  overflow: auto;
  max-block-size: var(--table-viewport-max-block-size, min(70dvh, 48rem));
  position: relative;
  isolation: isolate;
}
[data-table-viewport] table { border-collapse: separate; border-spacing: 0; }
:where([data-table-sticky-block], [data-table-sticky-inline]) {
  position: sticky;
  z-index: 2;
  background-color: var(--table-sticky-background, var(--surface, Canvas));
  --table-shadow-block: 0 0 transparent;
  --table-shadow-inline: 0 0 transparent;
  box-shadow: var(--table-shadow-block), var(--table-shadow-inline);
}
[data-table-sticky-block] { inset-block-start: var(--table-sticky-block-start); z-index: 3; }
[data-table-sticky-inline] { inset-inline-start: var(--table-sticky-inline-start); }
[data-table-sticky-block][data-table-sticky-inline] { z-index: 4; }
[data-table-shadow-block] {
  --table-shadow-block: 0 5px 7px -5px var(--table-sticky-shadow-color, color-mix(in srgb, CanvasText 40%, transparent));
}
[data-table-shadow-inline] {
  --table-shadow-inline: 5px 0 7px -5px var(--table-sticky-shadow-color, color-mix(in srgb, CanvasText 40%, transparent));
}
:dir(rtl)[data-table-shadow-inline] {
  --table-shadow-inline: -5px 0 7px -5px var(--table-sticky-shadow-color, color-mix(in srgb, CanvasText 40%, transparent));
}
@media print {
  [data-table-viewport] { overflow: visible; max-block-size: none; }
  :where([data-table-sticky-block], [data-table-sticky-inline]) {
    position: static;
    inset: auto;
    box-shadow: none;
  }
}
.catalog-compare-choice { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-size: .75rem; line-height: 1.5; cursor: pointer; color: var(--ink-600); }
.catalog-compare-choice input { width: 1.1em; height: 1.1em; min-width: 1.1em; margin: 0; accent-color: var(--brand-600); }
.catalog-compare-choice:has(input:checked) { color: var(--ink-900); }
.catalog-collection-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; }
.catalog-collection-tools p { margin: 0; font-size: .8rem; color: var(--ink-600); }
.catalog-compare-submit { display: none; }
html:has([data-compare-choice]:checked) .catalog-compare-submit, html[data-comparison-count]:not([data-comparison-count="0"]) .catalog-compare-submit { display: inline-flex; }
.catalog-detail-choice { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.catalog-comparison-tool { flex: none; }
.catalog-comparison-tool svg { width: 1.2rem; height: 1.2rem; flex: none; }
#catalog-comparison-status:empty { display: none; }
.catalog-breadcrumb--comparison { --breadcrumb-padding-block: .5rem; }
.catalog-comparison { margin: .5rem clamp(1rem, 4vw, 4.5rem) 3rem; min-width: 0; }
.catalog-comparison-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 1rem; margin-block-end: .5rem; }
.catalog-comparison-heading h1 { max-width: 50rem; margin: 0; font-size: clamp(1.5rem, calc(2.5vw * var(--ui-font-scale, 1)), 2.5rem); line-height: 1.2; font-weight: 500; letter-spacing: -.04em; overflow-wrap: anywhere; }
.catalog-comparison-clear { display: inline-flex; align-items: center; min-height: 44px; padding-block: .25rem; font-size: .8rem; color: var(--ink-600); text-decoration: underline; text-underline-offset: .15em; }
.catalog-comparison__hint { color: var(--ink-600); font-size: .75rem; line-height: 1.5; margin-block: .5rem; }
.catalog-comparison .catalog-notice a { text-decoration: underline; text-underline-offset: .15em; }
.catalog-comparison-scroller { container: product-comparison / inline-size; max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; border: 1px solid var(--line); border-radius: .75rem; scrollbar-gutter: stable; }
.catalog-comparison-scroller:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 4px; }
.catalog-comparison-table { --comparison-label-width: min(9rem, 26cqw); --comparison-product-width: min(18rem, 70cqw); width: calc(var(--comparison-label-width) + var(--comparison-count) * var(--comparison-product-width)); table-layout: fixed; text-align: start; font-size: .85rem; line-height: 1.7; }
.catalog-comparison-label-column { width: var(--comparison-label-width); }
.catalog-comparison-product-column { width: var(--comparison-product-width); }
.catalog-comparison-table th, .catalog-comparison-table td { padding: .8rem .75rem; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; white-space: pre-line; }
.catalog-comparison-table th { text-align: start; font-weight: 500; }
.catalog-comparison-table tr > :last-child { border-inline-end: 0; }
.catalog-comparison-table tfoot tr:last-child > * { border-bottom: 0; }
.catalog-comparison-table th { background: var(--surface); }
.catalog-comparison-table th[scope='row'], .catalog-comparison-corner { background: var(--surface-sunken); font-size: .75rem; color: var(--ink-600); }
.catalog-comparison-name { display: block; margin-block: .5rem; font-size: 1.05rem; line-height: 1.45; color: var(--ink-900); }
.catalog-comparison-image { display: block; margin-block-end: 1rem; }
.catalog-comparison-image .product-image { border-radius: .5rem; }
.catalog-comparison-remove { display: inline-flex; align-items: center; min-height: 44px; font-size: .75rem; text-decoration: underline; text-underline-offset: .15em; color: var(--ink-600); }
.catalog-comparison-missing { color: var(--ink-600); }
.catalog-comparison-detail { display: block; min-height: 44px; padding-block: .5rem; font-size: .75rem; text-decoration: underline; }
.catalog-comparison-table tfoot .catalog-button { width: 100%; }
@container product-comparison (width < 32rem) {
  .catalog-comparison-table th, .catalog-comparison-table td { padding-inline: 12px; }
  .catalog-comparison-table th[scope='row'], .catalog-comparison-corner { padding-inline: 8px; }
}
/* A space-led editorial storefront. Geometry and type belong to the home, not to SKU tools. */
.sf-home-page {
  --canvas: light-dark(#fdfcf9, #151515);
  --surface: light-dark(#fff, #1b1b1b);
  --surface-sunken: light-dark(#f0eeea, #272727);
  --ink-900: light-dark(#202020, #f6f3ed);
  --ink-600: light-dark(#64615c, #bebbb5);
  --ink-400: light-dark(#77736d, #aaa69f);
  --line: light-dark(#dedbd5, #41403c);
  --line-strong: light-dark(#a7a199, #838079);
  --brand-600: var(--sf-accent);
  --brand-050: var(--surface-sunken);
  --copper: var(--sf-accent);
  --appearance-accent: var(--sf-accent);
  --sf-gutter: clamp(1.125rem, 4.5vw, 4.5rem);
  background: var(--canvas);
  color: var(--ink-900);
}
body:has(.sf-home-page) { background: light-dark(#fdfcf9, #151515); }
.sf-home, .sf-footer { min-width: 0; font-size: 1.125rem; line-height: 1.65; }
.sf-section { max-width: 100rem; margin: clamp(4rem, 8vw, 8rem) auto; padding-inline: var(--sf-gutter); }
.sf-home :is(figure, fieldset), .sf-footer figure { margin: 0; }
.sf-home :is(h1, h2, h3, p), .sf-footer :is(h2, p) { overflow-wrap: anywhere; }
.sf-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-kicker { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; color: var(--ink-600); font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: .035em; }
.sf-section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 3rem; margin-block-end: 2.5rem; }
.sf-section-heading > div { min-width: 0; flex: 1 1 32rem; }
.sf-section-heading h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.8rem); font-weight: 430; line-height: 1.18; letter-spacing: -.045em; white-space: pre-line; text-wrap: balance; }
.sf-intro { margin: 1.25rem 0 0; color: var(--ink-600); font-size: 1.125rem; line-height: 1.75; }
.sf-link, .sf-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 48px; max-width: 100%; font-size: 1.125rem; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.sf-link { border-bottom: 1px solid var(--line-strong); padding-block: .4rem; }
.sf-link:hover { border-color: var(--sf-accent); }
.sf-button { padding: .8rem 1.25rem; border: 1px solid var(--ink-900); color: var(--canvas); background: var(--ink-900); }
.sf-button:hover { background: var(--sf-accent); border-color: var(--sf-accent); color: #fff; }
.sf-home svg, .sf-footer svg { display: block; width: 1.2em; height: 1.2em; flex: none; }
.sf-home :is(a, button, summary, input):focus-visible, .sf-footer :is(a, button, summary):focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 5px; }
.sf-brand-dot { width: .5rem; height: .5rem; background: var(--sf-accent); border-radius: 50%; flex: none; }

/* Opening: a typographic shop front and a native, keyboard-operable scene selector. */
.sf-opening { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); margin-block-start: 2.5rem; }
.sf-opening-copy { padding-block: 1rem; min-width: 0; }
.sf-opening-copy > .sf-kicker { margin-block-end: 2rem; }
.sf-opening h1 { margin: 0; font-size: clamp(2.8rem, 5.1vw, 5.5rem); line-height: 1.1; font-weight: 430; letter-spacing: -.055em; white-space: pre-line; text-wrap: balance; }
.sf-opening-intro { margin: 1.6rem 0 1.75rem; font-size: 1.125rem; line-height: 1.8; color: var(--ink-600); }
.sf-opening-categories { margin-block-start: clamp(2rem, 4vw, 4rem); }
.sf-opening-categories > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; border-top: 1px solid var(--line); padding-block: .7rem; font-size: 1.125rem; }
.sf-opening-categories > a:last-child { border-bottom: 1px solid var(--line); }
.sf-opening-categories > a:hover { color: var(--sf-accent); }
.sf-scene-picker { min-width: 0; padding: 0; border: 0; }
.sf-scene-choices { display: flex; flex-wrap: wrap; align-items: stretch; gap: .25rem 1.25rem; margin-block-end: .75rem; }
.sf-scene-choice { display: inline-flex; position: relative; cursor: pointer; font-size: 1rem; line-height: 1.5; }
.sf-scene-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-scene-choice > span { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; padding-block: .4rem; color: var(--ink-600); }
.sf-scene-choice:has(input:checked) > span { color: var(--ink-900); border-color: var(--sf-accent); }
.sf-scene-choice:has(input:focus-visible) > span { outline: 2px solid var(--sf-accent); outline-offset: 4px; }
.sf-scene-panel { display: none; }
.sf-scene-picker:has(.sf-scene-choice:nth-child(1) input:checked) .sf-scene-panel:nth-child(1),
.sf-scene-picker:has(.sf-scene-choice:nth-child(2) input:checked) .sf-scene-panel:nth-child(2),
.sf-scene-picker:has(.sf-scene-choice:nth-child(3) input:checked) .sf-scene-panel:nth-child(3) { display: block; }
.sf-scene-panel > img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sf-scene-panel > figcaption { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.15rem; font-size: 1rem; line-height: 1.6; }
.sf-scene-panel figcaption > span { flex: 1 1 17rem; }
.sf-scene-reference { display: block; margin-top: .4rem; color: var(--ink-600); }
.sf-scene-panel figcaption > a { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; border-bottom: 1px solid var(--line-strong); }

/* An uneven spread: two settings share a baseline without becoming identical cards. */
.sf-collections > .sf-section-heading { max-width: none; }
.sf-collection-spread { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.sf-collection { min-width: 0; display: block; }
.sf-collection:nth-child(2) { margin-block-start: 7rem; }
.sf-collection > figure { overflow: clip; }
.sf-collection:nth-child(1) > figure { aspect-ratio: 1.35; }
.sf-collection:nth-child(2) > figure { aspect-ratio: .93; }
.sf-collection .sf-image { transition: transform 500ms ease; }
.sf-collection:hover .sf-image { transform: scale(1.025); }
.sf-collection-caption { display: flex; align-items: start; justify-content: space-between; gap: 1.25rem; padding-block-start: 1.5rem; }
.sf-collection-caption > div { min-width: 0; }
.sf-collection-caption .sf-kicker { margin-block-end: .65rem; }
.sf-collection h3 { margin: 0; font-size: clamp(1.5rem, 2.25vw, 2.25rem); font-weight: 450; line-height: 1.3; letter-spacing: -.025em; }
.sf-collection-caption > svg { margin-top: .2rem; width: 1.6rem; height: 1.6rem; }
.sf-collection-caption p:last-child { margin: .85rem 0 0; color: var(--ink-600); font-size: 1.125rem; }

/* A dark material folio breaks the page rhythm; claims remain product-specific. */
.sf-material { margin-block: clamp(4rem, 8vw, 8rem); background: #252525; color: #f5f1e9; }
.sf-material-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); max-width: 100rem; margin-inline: auto; }
.sf-material-image { position: relative; min-height: 32rem; }
.sf-material-image > img { position: absolute; inset: 0; }
.sf-material-image > span { position: absolute; left: var(--sf-gutter); bottom: 1.5rem; color: #fff; background: #252525d9; padding: .4rem .7rem; font-size: 1rem; }
.sf-material-editorial { padding: clamp(2rem, 4vw, 4rem); }
.sf-material .sf-section-heading { margin-block-end: 2rem; }
.sf-material .sf-kicker, .sf-material .sf-intro { color: #cbc6bc; }
.sf-material-notes { margin: 0; }
.sf-material-notes > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-top: 1px solid #ffffff30; }
.sf-material-notes dt { font-size: 1.125rem; }
.sf-material-notes dd { margin: 0; font-size: 1rem; line-height: 1.75; color: #cbc6bc; }
.sf-material-index { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem 2rem; padding: 1.5rem var(--sf-gutter); max-width: 100rem; margin-inline: auto; border-top: 1px solid #ffffff30; font-size: 1rem; }
.sf-material-index > span { color: #cbc6bc; }
.sf-material-index ul { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; padding: 0; margin: 0; list-style: none; flex: 1; }
.sf-material-index a { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; }

/* One restrained shelf: the image and the name share a real product link. */
.sf-edit > .sf-section-heading { margin-block-end: 2rem; }
.sf-edit .sf-section-heading .sf-link { flex: none; }
.sf-product-shelf { --sf-shelf-columns: min(var(--sf-product-count), 3); display: grid; grid-auto-flow: column; grid-auto-columns: min(28rem, calc((100% - (var(--sf-shelf-columns) - 1) * 1.5rem) / var(--sf-shelf-columns))); gap: 1.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-block-end: 1.25rem; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.sf-edit-product { display: block; min-width: 0; scroll-snap-align: start; }
.sf-edit-visual { position: relative; aspect-ratio: 1; padding: 1rem; background: var(--surface-sunken); overflow: clip; }
.sf-edit-visual .product-image { aspect-ratio: 1; width: 100%; height: 100%; background: transparent; border: 0; }
.sf-edit-visual .product-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms ease; }
.sf-edit-product:hover .product-image img { transform: scale(1.045); }
.sf-edit-visual .product-image__empty { font-size: 1rem; letter-spacing: .025em; }
.sf-edit-open { position: absolute; display: flex; align-items: center; justify-content: center; right: 1rem; bottom: 1rem; width: 44px; height: 44px; background: var(--surface); border-radius: 50%; }
.sf-edit-caption { display: grid; gap: .5rem; padding-block: 1.1rem .5rem; }
.sf-edit-caption h3 { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.5; letter-spacing: -.025em; }
.sf-price { display: block; font-size: 1.125rem; font-weight: 450; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.sf-product-inquiry { color: var(--ink-600); font-size: 1rem; }
.sf-edit-tools { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; margin-block-start: 1.5rem; padding-block-start: 1.25rem; border-top: 1px solid var(--line); }
.sf-edit-tools > p { flex: 1 1 25rem; margin: .6rem 0 0; color: var(--ink-600); font-size: 1rem; }
.sf-search { flex: 0 1 34rem; min-width: 0; }
.sf-search > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; cursor: pointer; list-style: none; font-size: 1rem; }
.sf-search > summary::-webkit-details-marker { display: none; }
.sf-search .catalog-search { margin-block: 1rem; }
.sf-search .catalog-button, .sf-search .site-search-actions > a { font-size: 1rem; }
.sf-home .catalog-empty { padding: 2rem 0; min-height: 0; }
.sf-home .catalog-empty p { font-size: 1.125rem; }

/* The low orbit is a second, playful way to enter actual product details. */
.sf-connections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; border-top: 1px solid var(--line); padding-block-start: clamp(3rem, 6vw, 6rem); }
.sf-connections-copy .sf-section-heading { margin-block-end: 1.75rem; }
.sf-connections .sf-intro { line-height: 1.9; }
.sf-orbit-composition { min-width: 0; }
.sf-orbit { position: relative; width: min(100%, 30rem); aspect-ratio: 1; margin-inline: auto; isolation: isolate; }
.sf-orbit-track { position: absolute; inset: 15%; border: 1px solid var(--line-strong); border-radius: 50%; }
.sf-orbit-track::after { content: ''; position: absolute; inset: -16%; border: 1px solid var(--line); border-radius: 50%; }
.sf-orbit-core { position: absolute; inset: 38%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-sunken); }
.sf-orbit-core img { width: 42%; height: auto; }
/* One box follows a native path; no rotating ancestor can enlarge scrollable overflow. */
.sf-orbit-item { position: absolute; left: 0; top: 0; width: 24.5%; aspect-ratio: 1; offset-path: circle(35% at 50% 50%); offset-anchor: 50% 50%; offset-rotate: 0deg; offset-distance: var(--sf-orbit-phase); animation: sf-orbit-path var(--sf-orbit-duration) linear infinite; display: block; border-radius: 50%; padding: .4rem; background: var(--surface); border: 1px solid var(--line); }
.sf-orbit-item .product-image { aspect-ratio: 1; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); overflow: clip; }
.sf-orbit-item .product-image img { object-fit: contain; }
.sf-orbit-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--ink-600); font-size: 1rem; }
.sf-orbit-controls label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.sf-orbit-controls input { width: 1rem; height: 1rem; accent-color: var(--sf-accent); }
.sf-orbit:is(:hover, :focus-within) .sf-orbit-item, .sf-orbit-composition:has([data-home-orbit-pause]:checked) .sf-orbit-item { animation-play-state: paused; }
@keyframes sf-orbit-path { from { offset-distance: var(--sf-orbit-phase); } to { offset-distance: calc(var(--sf-orbit-phase) + 100%); } }
.sf-connections-wordmark { font-size: clamp(2rem, 7vw, 6rem); line-height: 1.2; font-weight: 600; letter-spacing: -.06em; color: var(--line-strong); text-align: center; }

/* Service lives at the end of the shop, with honest, practical procurement answers. */
.sf-footer { background: var(--surface-sunken); margin-block-start: clamp(4rem, 8vw, 8rem); padding: clamp(3rem, 6vw, 6rem) var(--sf-gutter) 1.5rem; }
.sf-service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); max-width: 91rem; margin-inline: auto; }
.sf-service-invitation, .sf-service-questions { min-width: 0; }
.sf-service .sf-section-heading { margin-block-end: 1.75rem; }
.sf-service-questions > .sf-kicker { margin-block-end: 1.5rem; }
.sf-service-questions details { border-top: 1px solid var(--line-strong); }
.sf-service-questions details:last-child { border-bottom: 1px solid var(--line-strong); }
.sf-service-questions summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 60px; padding-block: 1rem; cursor: pointer; list-style: none; font-size: 1.125rem; line-height: 1.6; }
.sf-service-questions summary::-webkit-details-marker { display: none; }
.sf-service-questions details > p { margin: 0 0 1.25rem; color: var(--ink-600); font-size: 1.125rem; line-height: 1.8; }
.sf-disclosure-icon > path { transform-box: view-box; transform-origin: center; transition: transform 180ms; }
details[open] > summary > .sf-disclosure-icon > path { transform: rotate(45deg); }
.sf-footer-bottom { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 3rem; max-width: 91rem; margin: clamp(3rem, 5vw, 5rem) auto 1.5rem; border-top: 1px solid var(--line-strong); padding-block-start: 2rem; }
.sf-footer-brand { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.75rem; line-height: 1.25; font-weight: 550; letter-spacing: -.04em; }
.sf-footer-bottom p { margin: .8rem 0 0; color: var(--ink-600); font-size: 1rem; }
.sf-footer-bottom nav, .sf-footer-bottom .public-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; font-size: 1rem; }
.sf-footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }
.sf-image-note { max-width: 91rem; margin: 1.5rem auto 0; color: var(--ink-600); font-size: 1rem; line-height: 1.7; }
.sf-results .catalog-grid { padding-inline: 0; }
.sf-results .catalog-button, .sf-results .catalog-pagination, .sf-results .product-card :is(.product-sku, .product-card__spec, .product-card__moq, .product-card__moq strong, .product-card__actions > a, .catalog-compare-choice), .sf-results .product-image__empty { font-size: 1rem; }

/* Native navigation and view timelines enhance the fully readable HTML. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) { .sf-scene-panel > img { animation: sf-scene-arrive 350ms ease-out; } }
@keyframes sf-scene-arrive { from { opacity: .7; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sf-collection > figure > img { animation: sf-photo-arrive linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .sf-material-image > img { animation: sf-material-light linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes sf-photo-arrive { from { transform: scale(1.04) translateY(1%); } to { transform: scale(1) translateY(0); } }
@keyframes sf-material-light { from { filter: brightness(.8); } to { filter: brightness(1); } }
@media (max-width: 64rem) {
  .sf-opening { gap: 2rem; }
  .sf-opening-copy > .sf-kicker { margin-block-end: 1.5rem; }
  .sf-opening h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
  .sf-material-notes > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .sf-material-editorial { padding: 2rem; }
}
@media (max-width: 52rem) {
  .sf-section { margin-block: 4rem; }
  .sf-opening { grid-template-columns: minmax(0, 1fr); margin-block-start: 1.5rem; gap: 1.5rem; }
  .sf-opening-copy { padding: 0; }
  .sf-opening h1 { font-size: clamp(2.5rem, 7.5vw, 4.5rem); }
  .sf-opening-intro { margin-block: 1.25rem; }
  .sf-opening-categories { margin-block-start: 1.75rem; }
  .sf-opening-categories > a { padding-block: .65rem; }
  .sf-scene-panel > img { aspect-ratio: 16 / 10; }
  .sf-scene-panel figcaption { padding-block-end: 0; }
  .sf-collection-spread { gap: 1.5rem; }
  .sf-collection:nth-child(2) { margin-block-start: 4rem; }
  .sf-material-inner { grid-template-columns: minmax(0, 1fr); }
  .sf-material-image { aspect-ratio: 16 / 10; min-height: 0; }
  .sf-material-editorial { padding: 2rem var(--sf-gutter); }
  .sf-material-notes > div { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .sf-product-shelf { --sf-shelf-columns: min(var(--sf-product-count), 2); }
  .sf-connections { gap: 2rem; }
  .sf-service { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 38rem) {
  .sf-section-heading { margin-block-end: 1.75rem; }
  .sf-section-heading h2 { font-size: 2.15rem; }
  .sf-opening h1 { font-size: 2.65rem; }
  .sf-opening-copy > .sf-kicker { margin-block-end: 1.25rem; }
  .sf-opening-categories { margin-block-start: 1.5rem; }
  .sf-opening-categories > a { min-height: 48px; }
  .sf-scene-panel figcaption > span { flex-basis: 100%; }
  .sf-scene-panel figcaption > a { min-height: 44px; }
  .sf-collection-spread { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .sf-collection:nth-child(2) { margin: 0 0 0 2rem; }
  .sf-collection:nth-child(1) > figure { aspect-ratio: 1.25; }
  .sf-collection:nth-child(2) > figure { aspect-ratio: 1.1; }
  .sf-collection h3 { font-size: 1.65rem; }
  .sf-collection-caption { padding-block-start: 1.1rem; }
  .sf-material-notes > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .sf-material-index { align-items: start; flex-direction: column; gap: .75rem; }
  .sf-product-shelf { grid-auto-columns: 82vw; gap: 1rem; }
  .sf-edit-caption h3 { font-size: 1.2rem; }
  .sf-edit-tools { display: block; margin-top: 1rem; }
  .sf-edit-tools > p { margin: 0 0 .8rem; }
  .sf-connections { grid-template-columns: minmax(0, 1fr); }
  .sf-orbit { max-width: 24rem; }
  .sf-orbit-controls { justify-content: space-between; gap: .25rem 1rem; }
  .sf-footer-bottom { align-items: start; }
  .sf-footer-bottom nav { gap: .25rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-orbit .sf-orbit-item, .sf-home .sf-image { animation: none; }
  .sf-orbit-controls label { display: none; }
  .sf-home :is(.sf-image, .product-image img), .sf-disclosure-icon > path { transition: none; }
}
.product-detail-view { align-items: start; gap: clamp(1.5rem, 5vw, 5rem); margin-block-start: .5rem; }
.product-detail-visual { min-width: 0; position: sticky; top: 1rem; }
.product-detail-visual > .product-image { border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; box-shadow: 0 1rem 3rem light-dark(#493c2012, #0004); }
.product-detail-visual .product-image img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .product-detail-visual .product-image:hover img { transform: scale(1.035); } }
.product-detail-summary h1 { text-wrap: balance; }
.product-variant-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1.5rem; }
.product-variant-links [aria-current] { background: var(--ink-900); color: var(--surface); }
.product-attributes { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem; }
.product-attributes > div { padding: .65rem .9rem; border: 1px solid var(--line); border-radius: .65rem; }
.product-attributes dt { font-size: .75rem; color: var(--ink-600); }
.product-attributes dd { margin: .2rem 0 0; font-size: .85rem; }
.product-detail-purchase { display: grid; gap: 1rem; padding-block: 1.4rem; border-block: 1px solid var(--line); margin-block: 1.5rem; }
.product-detail-purchase .commerce-purchase-controls { justify-content: space-between; }
.product-detail-purchase .catalog-button { width: 100%; }
.product-basic-specs { margin-block: 1.5rem; border-top: 1px solid var(--line); }
.product-basic-specs > summary, .product-source-photo > summary { min-height: 44px; padding-block: 1rem; cursor: pointer; color: var(--ink-600); }
.product-source-photo .product-image { border-radius: .75rem; }
.product-story { max-width: 88rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 4.5rem) 4rem; }
.product-story .studio-blueprint > section { min-width: 0; margin-block: clamp(2rem, 5vw, 5rem); }
.product-story h2 { margin: 0 0 1.25rem; font-size: clamp(1.4rem, 2.8vw, 2.7rem); line-height: 1.2; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.product-story h3 { margin: .8rem 0; font-size: 1.15rem; font-weight: 550; line-height: 1.4; }
.product-story .studio-markdown { color: var(--ink-600); line-height: 1.85; overflow-wrap: anywhere; }
.product-story .studio-markdown :is(img, video) { max-width: 100%; height: auto; }
.product-story .studio-markdown a { text-decoration: underline; text-underline-offset: .2em; }
.product-story-prose { max-width: 100%; padding: clamp(1rem, 3vw, 2rem); border-inline-start: 2px solid var(--copper); }
.product-story-image { margin: 0; min-width: 0; }
.product-story-image img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 1rem; background: var(--surface-sunken); }
.product-story-image figcaption { padding: .8rem .15rem; color: var(--ink-600); font-size: .8rem; line-height: 1.6; }
.product-story-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.product-story-split--start > .product-story-copy { order: 1; }
.product-story-copy { min-width: 0; }
.product-story-features > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.product-story-features article { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 1rem; transition: translate .25s, box-shadow .25s; }
.product-feature-number { font-size: .75rem; letter-spacing: .1em; color: var(--copper); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .product-story-features article:hover { translate: 0 -4px; box-shadow: 0 .8rem 2rem light-dark(#493c2010,#0003); } }
.product-story-table { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.product-story-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
.product-story-table :is(th, td) { padding: 1rem 1.2rem; text-align: start; border-bottom: 1px solid var(--line); line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.product-story-table th { font-weight: 500; background: var(--surface-sunken); }
.product-story-table td { min-width: 12rem; color: var(--ink-600); background: var(--surface); }
.product-story-table tr:last-child > * { border-bottom: 0; }
.product-story-faq details { padding-block: .2rem; border-bottom: 1px solid var(--line); }
.product-story-faq summary { min-height: 44px; padding: 1.2rem 0; cursor: pointer; font-weight: 500; line-height: 1.5; }
.product-story-faq details > .studio-markdown { padding-block-end: 1.2rem; }
.product-story-gallery > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.product-story-callout { padding: clamp(1.5rem, 5vw, 4rem); border-radius: 1rem; color: var(--ink-900); background: var(--brand-050); border: 1px solid var(--line); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .product-story .studio-blueprint > section { animation: product-detail-reveal both; animation-timeline: view(); animation-range: entry 0% entry 25%; } } }
@keyframes product-detail-reveal { from { opacity: .3; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@media (max-width: 54rem) { .product-detail-visual { position: static; } .product-story-split { grid-template-columns: minmax(0, 1fr); } .product-story-split--start > .product-story-copy { order: 0; } }
@media (prefers-reduced-motion: reduce), print { .product-story .studio-blueprint > section { animation: none; opacity: 1; transform: none; } }
.catalog-site { padding-block-end: var(--catalog-dock-inset, 0px); }
.purchase-dock { position: fixed; z-index: 20; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; gap: .6rem; inline-size: min(100%, 88rem); margin-inline: auto; padding: .6rem max(.75rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); background: var(--surface); color: var(--ink-900); border-block-start: 1px solid var(--line); box-shadow: 0 -.35rem 1.4rem #0002; }
.purchase-dock__content { min-inline-size: 0; flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; }
.purchase-dock__content[hidden] { display: none; }
.purchase-dock__summary { min-inline-size: 0; display: grid; gap: .2rem; overflow-wrap: anywhere; }
.purchase-dock__summary small { font-size: .75rem; color: var(--ink-600); }
.purchase-dock__actions { gap: .5rem; }
.purchase-dock .catalog-button { min-block-size: var(--ui-control-size); padding: .6rem 1rem; }
.purchase-dock__toggle { flex: none; display: grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: inherit; }
.purchase-dock__toggle svg { inline-size: 1.2rem; block-size: 1.2rem; }
.purchase-dock[data-collapsed=true] { inset-inline-start: auto; inline-size: auto; border: 1px solid var(--line); border-start-start-radius: 1rem; padding: .5rem; }
.purchase-fields { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.purchase-fields label { display: grid; gap: .35rem; font-size: .8rem; min-inline-size: 0; }
.purchase-fields :is(input,select) { min-block-size: var(--ui-control-size); max-inline-size: 100%; min-inline-size: 0; inline-size: 7rem; padding: .5rem .65rem; border: 1px solid var(--line-strong); border-radius: .7rem; background: var(--surface); color: inherit; font: inherit; }
.product-detail-purchase [data-ui-actions] > .catalog-button { inline-size: auto; flex: 1 1 9rem; }
@media (max-width: 30rem) { .purchase-dock__actions { inline-size: 100%; } .purchase-dock__actions > .catalog-button { flex: 1 1 8rem; } }
@media print { .purchase-dock { display: none; } .catalog-site { padding-block-end: 0; } }
.product-configuration-experience { min-width: 0; }
.product-configuration-visual { margin: 0; min-width: 0; padding: clamp(.75rem, 2vw, 1.5rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-sunken); }
.product-configuration-visual svg { display: block; width: 100%; height: auto; color: var(--ink-900); }
.product-configuration-visual figcaption { color: var(--ink-600); font-size: .8rem; line-height: 1.65; text-align: center; margin-block-start: .75rem; }
.product-configuration-options { margin-block: 1rem; min-width: 0; }
.product-configuration-options h2 { font-size: 1rem; margin-block: 0 .75rem; }
.product-configuration-resources{position:absolute;inline-size:0;block-size:0;overflow:hidden;pointer-events:none}
.product-configuration-axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1rem;margin-block-end:.75rem}
.configuration-axis{min-inline-size:0;margin:0;padding:0;border:0}.configuration-axis legend{padding:0;margin-block-end:.4rem;font-weight:650;font-size:.9rem}
.configuration-option-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(6rem,8rem);gap:.6rem;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;padding:.3rem}
.configuration-option{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.35rem;min-inline-size:0;min-block-size:44px;margin:0;padding:.55rem;border:1px solid var(--line-strong);border-radius:.7rem;background:var(--surface);color:var(--ink-900);cursor:pointer;scroll-snap-align:start;overflow-wrap:anywhere}
.configuration-option input{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.configuration-option:has(input:checked){border-color:var(--brand-600);background:var(--brand-050);box-shadow:inset 0 0 0 1px var(--brand-600)}.configuration-option:has(input:focus-visible){outline:2px solid var(--brand-600);outline-offset:2px}.configuration-option:has(input:disabled){cursor:default}
.configuration-option svg{display:block;inline-size:100%;block-size:auto;color:var(--ink-900)}.configuration-option__label{font-size:.85rem;line-height:1.45;font-weight:650}.configuration-option small{font-size:.7rem;line-height:1.4;color:var(--ink-600)}.configuration-option[data-compatible=false]{border-style:dashed}
.product-configuration-previous{color:var(--ink-600)}
.product-configuration-status { font-size: .85rem; line-height: 1.65; min-width: 0; overflow-wrap: anywhere; }
.product-configuration-status p { margin-block: .5rem; }
[data-configuration-state="invalid"] .product-configuration-status, [data-configuration-state="ambiguous"] .product-configuration-status { color: var(--ink-900); border-inline-start: 3px solid var(--copper); padding-inline-start: .75rem; }
.product-configuration-experience .catalog-detail__body { min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .product-configuration-visual .configuration-scene-layers > g { transition: transform var(--dur-3, 220ms) ease, opacity var(--dur-2, 160ms) ease; } }
.configuration-editor { display: grid; gap: 1rem; min-width: 0; margin-block: 1rem; }
.configuration-editor h3, .configuration-editor h4 { margin: 0; }
.configuration-editor-heading, .configuration-editor-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.configuration-editor-axes { display: grid; gap: .8rem; }
.configuration-editor fieldset { min-width: 0; border: 1px solid var(--line); border-radius: .5rem; padding: .8rem; }
.configuration-editor-fields { display: flex; align-items: end; flex-wrap: wrap; gap: .7rem; margin-block-end: .7rem; }
.configuration-editor-fields > label { flex: 1 1 10rem; min-width: 0; }
.configuration-editor-materials { display: flex; flex-wrap: wrap; gap: .8rem; }
.configuration-editor-materials fieldset { display: flex; flex-wrap: wrap; gap: .7rem; }
.configuration-editor-materials label { display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; }
.configuration-editor-materials input { min-height: 44px; width: 3rem; padding: .15rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); }
.configuration-editor summary { min-height: 44px; cursor: pointer; }
.product-configuration-prices { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-block: .5rem; }
.catalog-inquiry-request { margin: 1rem clamp(1rem, 4vw, 4.5rem) 3rem; max-width: 64rem; min-width: 0; }
.inquiry-request-heading { margin-block-end: 1.5rem; }
.inquiry-request-heading h1 { margin: 0; font-size: clamp(2rem, calc(3.5vw * var(--ui-font-scale, 1)), 3.5rem); line-height: 1.2; letter-spacing: -.04em; font-weight: 450; overflow-wrap: anywhere; }
.inquiry-request-heading > p, .inquiry-request-hint { color: var(--ink-600); line-height: 1.7; }
.inquiry-request-heading > p { margin-block: .75rem 0; }
[data-inquiry-form] { display: grid; gap: 1.5rem; min-width: 0; }
[data-inquiry-feedback]:empty { display: none; }
[data-inquiry-form] fieldset { margin: 0; min-inline-size: 0; padding: clamp(.75rem, 2vw, 1.5rem); border: 1px solid var(--line); border-radius: .75rem; }
[data-inquiry-form] legend { max-width: 100%; padding-inline: .4rem; font-size: 1rem; font-weight: 550; overflow-wrap: anywhere; }
[data-inquiry-form] label { display: grid; gap: .45rem; min-width: 0; font-size: .9rem; line-height: 1.6; }
[data-inquiry-form] label > span:first-child { overflow-wrap: anywhere; }
[data-inquiry-form] input:not([type=hidden]), [data-inquiry-form] textarea { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: .4rem; background: var(--surface); color: var(--ink-900); font-size: 1rem; line-height: 1.5; }
[data-inquiry-form] textarea { resize: vertical; min-height: 8rem; }
[data-inquiry-form] [aria-invalid=true] { border-color: var(--copper); outline-color: var(--copper); }
.inquiry-request-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.25rem; }
.inquiry-request-hint { margin-block: .25rem 1rem; font-size: .8rem; }
label .inquiry-request-hint { margin: 0; }
.inquiry-request-required { display: inline-block; margin-inline-start: .6rem; color: var(--ink-600); font-size: .75rem; }
.inquiry-request-products ol { list-style: none; padding: 0; margin: 0; }
.inquiry-request-products li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6rem, 12rem); align-items: start; gap: 1rem 1.5rem; padding-block: 1rem; }
.inquiry-request-products li + li { border-block-start: 1px solid var(--line); }
.inquiry-request-product { min-width: 0; display: grid; gap: .35rem; }
.inquiry-request-product strong { font-size: 1rem; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.inquiry-request-product > span, .inquiry-request-unit { color: var(--ink-600); font-size: .8rem; overflow-wrap: anywhere; }
.inquiry-request-quantity-control { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.inquiry-request-quantity-control input { flex: 1 1 6rem; }
.inquiry-request-unit { flex: 0 1 auto; }
.inquiry-request-field-error { color: var(--copper); font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.inquiry-request-errors { padding: .85rem 1rem; border: 1px solid var(--copper); border-radius: .5rem; font-size: .85rem; line-height: 1.7; overflow-wrap: anywhere; }
.inquiry-request-errors p { margin: 0; }
.inquiry-request-errors ul { margin-block-end: 0; padding-inline-start: 1.25rem; }
.inquiry-request-errors a { text-decoration: underline; text-underline-offset: .15em; }
.inquiry-request-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: start; }
.inquiry-request-actions > * { max-width: 100%; overflow-wrap: anywhere; }
.inquiry-request-receipt { padding: 1.25rem; margin-block-end: 1rem; border: 1px solid var(--brand-600); border-radius: .75rem; background: var(--brand-050); line-height: 1.7; overflow-wrap: anywhere; }
.inquiry-request-receipt h2 { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.4; font-weight: 550; }
.inquiry-request-receipt dl { margin: 0; }
.inquiry-request-receipt dl > div { display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin-block: .5rem; }
.inquiry-request-receipt dt { color: var(--ink-600); }
.inquiry-request-receipt dd { margin: 0; }
.inquiry-request-receipt p { margin-block-end: 0; }
.inquiry-request-edited { font-weight: 550; }
@media (max-width: 54rem) { .inquiry-request-products li { grid-template-columns: minmax(0, 1fr); } }
.product-image__open { display: grid; place-items: center; position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.product-image__view { position: absolute; inset-block-end: .75rem; inset-inline-end: .75rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: .6rem; background: var(--surface); color: var(--ink-900); }
.product-image__view svg { width: 1.3rem; height: 1.3rem; }
.product-image__open:focus-visible { outline-offset: -4px; }
.product-image__empty { max-width: 100%; padding: 1rem; text-align: center; overflow-wrap: anywhere; }
[data-product-image-message] { font-size: .875rem; letter-spacing: normal; }
[data-image-unavailable] .product-image__empty { gap: .5rem; }
[data-image-unavailable] .product-image__empty svg { width: 2rem; height: 2rem; }
.catalog-media-dialog { width: min(76rem, calc(100vw - 24px)); height: min(52rem, calc(100dvh - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: clamp(12px, .75rem, 16px); border: 1px solid var(--line-strong); border-radius: 1rem; background: var(--surface); color: var(--ink-900); overflow: auto; }
.catalog-media-dialog[open] { display: flex; flex-direction: column; gap: clamp(8px, .75rem, 12px); }
.catalog-media-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(8px, 1rem, 16px); flex: none; position: sticky; inset-block-start: 0; background: var(--surface); z-index: 1; }
.catalog-media-dialog h2 { min-width: 0; margin: 0; font-size: 1.15rem; font-weight: 500; overflow-wrap: anywhere; }
.catalog-media-dialog h2 > span { display: block; margin-top: .35rem; font-size: .875rem; color: var(--ink-600); }
.catalog-media-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: center; width: fit-content; max-width: 100%; gap: clamp(8px, .5rem, 12px); flex: none; }
.catalog-media-tools .catalog-button { min-width: 0; max-width: 100%; padding-inline: .4rem; white-space: normal; overflow-wrap: anywhere; }
.catalog-media-open { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; }
.catalog-media-open svg { width: 22px; height: 22px; }
.catalog-media-retry { grid-column: 1 / -1; justify-self: start; }
.catalog-media-tools [aria-pressed="true"] { background: var(--brand-050); border-color: var(--brand-600); }
.catalog-media-status { margin: 0; flex: none; overflow-wrap: anywhere; }
.catalog-media-viewport { flex: 1; min-width: 0; min-height: min(12rem, 35dvh); overflow: auto; overscroll-behavior: contain; background: var(--surface-sunken); border-radius: .5rem; }
.catalog-media-viewport:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -3px; }
.catalog-media-surface { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.catalog-media-surface img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Natural-size overflow begins at the reachable top-left instead of centering offscreen pixels. */
.catalog-media-viewport[data-natural="true"] .catalog-media-surface { display: block; width: max-content; height: max-content; min-width: 100%; min-height: 100%; }
.catalog-media-viewport[data-natural="true"] img { max-width: none; max-height: none; }
.commerce-view{width:min(72rem,100%);margin-inline:auto}.commerce-nav, .commerce-nav>div, .commerce-heading, .commerce-section-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.commerce-actions, .commerce-pagination{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.commerce-nav{padding-block:1rem 2rem}.commerce-nav>div{gap:1.25rem}.commerce-nav a{color:inherit;text-decoration:none}.commerce-nav a[aria-current]{text-decoration:underline;text-underline-offset:.4em}.commerce-heading{margin-block:1rem 2rem}.commerce-view h1{font-size:clamp(2rem,5vw,3.8rem);line-height:1.08;letter-spacing:-.04em;overflow-wrap:anywhere}.commerce-view h2{font-size:1.25rem;line-height:1.3}.commerce-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--ink-600);margin-bottom:.75rem}.commerce-panel{border:1px solid var(--line);border-radius:1.25rem;padding:clamp(1rem,3vw,2rem);margin-block:1rem;background:var(--surface)}.commerce-panel :first-child{margin-block-start:0}.commerce-panel :last-child{margin-block-end:0}.commerce-cart-items,.commerce-lines,.commerce-order-list{list-style:none;margin:0;padding:0}.commerce-cart-line{display:flex;align-items:center;gap:1rem;padding-block:1.25rem;border-block-start:1px solid var(--line)}.commerce-cart-line>.product-image{width:5.5rem;flex:0 0 5.5rem;aspect-ratio:1;background:var(--surface-sunken);border-radius:.75rem;overflow:hidden}.commerce-cart-line>.product-image img{width:100%;height:100%;object-fit:contain}.commerce-cart-line .product-image__empty{display:grid;place-items:center;overflow:hidden;height:100%;font-size:.65rem}.commerce-cart-line .product-image__empty svg{width:2.5rem}.commerce-cart-line__info{flex:1;min-width:0;display:grid;gap:.4rem;overflow-wrap:anywhere}.commerce-cart-line__controls{display:flex;gap:.75rem;align-items:end;flex-wrap:wrap}.commerce-view label{display:grid;gap:.5rem;font-weight:600;font-size:.9rem}.commerce-view input,.commerce-view select{min-height:2.75rem;width:100%;min-width:0;border:1px solid var(--line);border-radius:.7rem;background:var(--surface);color:var(--ink-900);padding:.65rem .8rem;font:inherit}.commerce-cart-line__controls input{width:5.5rem}.commerce-view .btn{min-height:2.75rem;border-radius:999px;white-space:normal;justify-content:center;gap:.55rem;line-height:1.3;padding:.7rem 1.15rem}.commerce-view .btn svg{width:1.1rem;height:1.1rem;flex:none}.commerce-view .btn--primary{background:var(--ink-900);color:var(--surface);border-color:var(--ink-900)}.commerce-actions{border-block-start:1px solid var(--line);padding-top:1.25rem}.commerce-actions p{color:var(--ink-600);max-width:35rem;font-size:.9rem}.commerce-checkout-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem;align-items:start}.commerce-address-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.commerce-field-wide{grid-column:1/-1}.commerce-checkout-grid form{display:grid;gap:1.25rem}.commerce-view small,.commerce-fineprint{font-size:.8rem;color:var(--ink-600);line-height:1.5}.commerce-summary{display:grid;gap:1.25rem}.commerce-lines li{display:flex;justify-content:space-between;gap:1rem;padding-block:1rem;border-block-end:1px solid var(--line);overflow-wrap:anywhere}.commerce-lines li>div{display:grid;gap:.4rem}.commerce-lines bdi{flex:none}.commerce-totals{display:grid;gap:.75rem;margin:0}.commerce-totals>div{display:flex;justify-content:space-between;column-gap:1rem;row-gap:.3rem;flex-wrap:wrap}.commerce-totals dt{overflow-wrap:normal;word-break:normal}.commerce-totals dd{margin:0;min-width:0;max-width:100%}.commerce-total{font-size:1.25rem;font-weight:700;border-block-start:1px solid var(--line);padding-block-start:1rem}.commerce-issues{padding-inline-start:1.25rem;font-size:.85rem;color:var(--ink-600)}.commerce-empty{text-align:center;padding:clamp(2rem,8vw,6rem) 1rem}.commerce-empty>svg{width:3rem;height:3rem;margin-bottom:1rem}.commerce-order-list .commerce-panel{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;flex-wrap:wrap}.commerce-order-list .commerce-panel>div{display:grid;gap:.5rem;min-width:0;overflow-wrap:anywhere}.commerce-order-address{display:grid;gap:.75rem}.commerce-order-actions{gap:.75rem}.commerce-order-address{font-style:normal}.commerce-pagination{margin-block:1.5rem}.commerce-view .notice{border-radius:.75rem;line-height:1.5;overflow-wrap:anywhere}.commerce-view .notice p{margin-bottom:0}.commerce-purchase{display:grid;gap:.75rem;margin-top:1rem}.commerce-purchase-controls{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.commerce-purchase select{min-height:2.5rem;width:auto;max-width:100%;border:1px solid var(--line);border-radius:.65rem;color:inherit;background:var(--surface);font:inherit;padding:.5rem}.commerce-purchase .btn{border-radius:999px;min-height:2.75rem}.commerce-purchase strong{font-size:1.15rem}.commerce-cart-badge{display:inline-flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none;min-height:2.75rem}.commerce-cart-badge svg{width:1.2rem;height:1.2rem}.commerce-cart-badge span{font-variant-numeric:tabular-nums}
@media(max-width:48rem){.commerce-checkout-grid{grid-template-columns:minmax(0,1fr);gap:0}.commerce-cart-line{flex-wrap:wrap;gap:.75rem}.commerce-cart-line__controls{width:100%;justify-content:space-between}.commerce-view h1{font-size:clamp(1.8rem,10vw,3rem)}.commerce-nav{padding-block-end:1rem}.commerce-panel{border-radius:1rem}.commerce-lines bdi{flex:0 1 auto;white-space:nowrap}}@media(max-width:30rem){.commerce-address-fields{grid-template-columns:minmax(0,1fr)}.commerce-nav>div{gap:.8rem}.commerce-lines li{flex-wrap:wrap}}

.commerce-amount{display:inline-flex;flex-wrap:wrap;gap:.25em;align-items:baseline;max-width:100%;min-width:0;overflow-x:auto;overflow-wrap:normal;word-break:normal}.commerce-amount__number{white-space:nowrap;overflow-wrap:normal;word-break:normal}/* A field keeps its input space; action alignment comes from the shared semantic group. */
.site-search { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; padding: .6rem; border: 1px solid var(--line-strong, GrayText); border-radius: 1.5rem; background: var(--surface, Canvas); }
.site-search-field { display: flex; align-items: center; flex: 1 1 12rem; min-inline-size: 0; border-radius: inherit; gap: .5rem; }
.site-search-field > svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: var(--appearance-secondary, GrayText); }
.site-search-field > input { box-sizing: border-box; flex: 1; inline-size: 100%; min-inline-size: 0; min-block-size: var(--ui-control-size, 44px); padding: .5rem; margin: 0; border: 0; border-radius: inherit; outline: none; box-shadow: none; background: transparent; color: inherit; font: inherit; }
.site-search-field > input:focus-visible { outline: none; box-shadow: none; }
.site-search:focus-within { border-color: var(--appearance-accent, Highlight); box-shadow: 0 0 0 1px var(--appearance-accent, Highlight); }
.site-search-actions { gap: .65rem; max-inline-size: 100%; }
.site-search-actions > :is(button, a) { max-width: 100%; }

@media (max-width: 48rem) and (orientation: portrait) {
  .site-search { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: .4rem; }
  .site-search:focus-within { box-shadow: none; }
  .site-search-field { flex-basis: 100%; inline-size: 100%; border: 1px solid var(--line-strong, GrayText); border-radius: .8rem; background: var(--surface, Canvas); }
  .site-search-field > svg { display: none; }
  .site-search-field:focus-within { border-color: var(--appearance-accent, Highlight); box-shadow: 0 0 0 1px var(--appearance-accent, Highlight); }
}

:root {
  --canvas: light-dark(#faf8f4, #171713);
  --surface: light-dark(#fffefa, #22221d);
  --surface-sunken: light-dark(#f1eee7, #2c2c25);
  --ink-900: light-dark(#282b23, #f1f0e7);
  --ink-600: light-dark(#626659, #b8bbac);
  --ink-400: light-dark(#76796d, #a6aa99);
  --line: light-dark(#dedfd2, #414438);
  --line-strong: light-dark(#b9beab, #737c60);
  --brand-600: light-dark(#626e48, #c3d39d);
  --brand-050: light-dark(#edf0e1, #323b25);
  --copper: light-dark(#a86532, #dba778);
  font-family: 'Inter', 'Segoe UI', 'PingFang SC', system-ui, sans-serif;
  color: var(--ink-900);
  background: var(--canvas);
  scroll-padding-block-start: 1.5rem;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button, input, textarea, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 4px; }
button:disabled { cursor: default; opacity: .55; }
[hidden] { display: none !important; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { display: block; padding: 1rem; background: var(--surface); }
.catalog-preview { background: var(--brand-050); text-align: center; padding: .4rem 1rem; font-size: .75rem; letter-spacing: .06em; color: var(--ink-600); }
.catalog-site { max-width: 100rem; margin-inline: auto; }
.catalog-brand { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -.04em; flex: none; max-width: 100%; min-width: 0; }
.catalog-brand > span { min-width: 0; overflow-wrap: anywhere; }
.catalog-brand img { flex: none; object-fit: contain; }
.catalog-navigation-links { display: flex; flex-wrap: wrap; gap: 1.6rem; font-size: .85rem; }
.catalog-navigation-links a { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
.catalog-navigation-links a[aria-current] { border-color: var(--brand-600); }
.catalog-language { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; min-width: 0; }
.catalog-language > svg { width: 1.1rem; height: 1.1rem; flex: none; }
.catalog-language select { min-height: 44px; max-width: 100%; padding: .35rem .2rem; border: 0; border-radius: .4rem; color: inherit; background: transparent; }
#catalog-interactions { display: contents; }
.catalog-interaction-tools { display: contents; }
.catalog-interaction-tools > button, .catalog-interaction-tools > a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.catalog-interaction-tools > :is(button, a) > svg { width: 1.2rem; height: 1.2rem; flex: none; }
.catalog-inquiry-count { min-width: 1.5rem; padding: .1rem .35rem; background: var(--brand-050); border-radius: 50%; font-size: .75rem; }
.catalog-cart { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.catalog-cart > svg { width: 1.2rem; height: 1.2rem; flex: none; }
.catalog-menu-panel__head button { align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .35rem; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink-900); }
.catalog-menu-panel { width: min(26rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 1rem; border: 1px solid var(--line-strong); border-radius: .75rem; color: var(--ink-900); background: var(--surface); box-shadow: 0 1rem 3rem #0003; }
.catalog-menu-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; font-size: 1rem; }
.catalog-menu-panel__head button { display: inline-flex; font-size: 1.2rem; line-height: 1; }
.catalog-menu-panel .catalog-navigation-links { flex-direction: column; align-items: start; gap: .5rem; }
.catalog-account-trigger { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.catalog-account-panel .catalog-menu-panel__head { position: sticky; top: 0; background: var(--surface); }
.catalog-account-panel h2 { margin: 0; min-width: 0; font: inherit; font-weight: 550; overflow-wrap: anywhere; }
.catalog-account-panel .catalog-menu-panel__head button { flex: none; }
.catalog-account-panel .catalog-menu-panel__head svg { width: 1.2rem; height: 1.2rem; }
.catalog-account-subject { display: grid; gap: .35rem; margin: 0 0 1rem; font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; }
.catalog-account-subject > span { color: var(--ink-600); }
.catalog-account-subject strong { font-weight: 550; }
.catalog-account-logout { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.catalog-account-logout > span { min-width: 0; }
.catalog-account-hint { margin: .75rem 0 0; color: var(--ink-600); font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.catalog-hero { text-align: center; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 6vw, 6rem); background: var(--surface-sunken); }
.catalog-hero__copy { max-width: 56rem; margin-inline: auto; }
.catalog-eyebrow { color: var(--copper); font-size: .65rem; font-weight: 600; letter-spacing: .19em; line-height: 1.8; margin: 0 0 1.25rem; }
.catalog-hero h1 { font-size: clamp(2.5rem, calc(4.1vw * var(--ui-font-scale, 1) + 1rem), 5.4rem); font-weight: 440; line-height: 1.08; letter-spacing: -.065em; white-space: pre-line; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.catalog-hero__intro { font-size: 1rem; color: var(--ink-600); line-height: 1.8; margin: 1.7rem 0 2rem; }
.catalog-button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 44px; padding: .75rem 1.15rem; border: 1px solid var(--line-strong); border-radius: 100px; background: var(--surface); color: var(--ink-900); font-size: .85rem; line-height: 1.5; text-align: center; }
.catalog-button--primary { background: var(--ink-900); color: var(--canvas); border-color: var(--ink-900); }
.catalog-button svg, .product-card__actions svg { width: 1.3em; height: 1.3em; flex: none; }
.catalog-button:hover { border-color: var(--brand-600); box-shadow: 0 2px 8px light-dark(#28320d12, #b6cc8912); }
.catalog-button--small { padding: .45rem .85rem; font-size: .75rem; }
.catalog-collection, .catalog-guide { margin: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4.5rem); }
.catalog-section-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 2rem; margin-block-end: 1.75rem; }
.catalog-section-title h2 { font-size: clamp(1.7rem, calc(2.5vw * var(--ui-font-scale, 1)), 2.5rem); letter-spacing: -.04em; font-weight: 480; margin: 0; }
.catalog-section-title .catalog-eyebrow { margin-bottom: .4rem; }
.catalog-section-title > p { font-size: .8rem; color: var(--ink-600); margin: 0 0 .25rem; }
.catalog-search { margin: 1.5rem auto 0; max-width: 50rem; }


.catalog-inquiry-list input { border-radius: .4rem; }
.catalog-search input::placeholder { color: var(--ink-600); }
.catalog-search .site-search-actions > a { font-size: .8rem; min-height: 44px; display: flex; align-items: center; text-decoration: underline; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 2rem 1.3rem; }
.product-card { min-width: 0; container-type: inline-size; }
.product-card__visual { display: block; overflow: hidden; border-radius: .65rem; background: var(--surface-sunken); }
.product-image { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--surface-sunken); overflow: hidden; }
.product-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: scale .25s ease; }
.product-card__visual:hover img { scale: 1.025; }
.product-image__empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--ink-600); font-size: .7rem; letter-spacing: .12em; }
.product-image__empty svg { width: 4rem; height: 4rem; opacity: .55; }
.product-card__body { padding: 1.25rem .2rem 0; }
.product-sku { font-size: .65rem; color: var(--copper); letter-spacing: .12em; }
.product-card h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 500; margin: .4rem 0; overflow-wrap: anywhere; }
.product-card__spec { color: var(--ink-600); font-size: .85rem; line-height: 1.6; margin: 0 0 1rem; overflow-wrap: anywhere; }
.product-card__moq { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; font-size: .75rem; color: var(--ink-600); margin: .75rem 0; }
.product-card__moq strong { font-size: .85rem; color: var(--ink-900); font-weight: 550; }
.product-card__moq strong span { font-weight: 400; }.product-card__actions{ display: flex; align-items: center;  flex-wrap: wrap; gap: .5rem 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.product-card__actions > a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .75rem; }.catalog-pagination{   align-items: center; gap: .75rem; margin-top: 2.5rem; font-size: .8rem; }
.catalog-guide { border-top: 1px solid var(--line); padding-block-start: 3rem; }
.catalog-guide__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem 3rem; }
.catalog-guide__steps article { padding: 1rem 0; }
.catalog-step-number { font-size: .7rem; color: var(--copper); font-variant-numeric: tabular-nums; }
.catalog-guide__steps h3 { font-size: 1.2rem; font-weight: 500; margin: 1rem 0 .6rem; }
.catalog-guide__steps p { color: var(--ink-600); font-size: .85rem; line-height: 1.8; margin: 0; max-width: 26rem; }
.catalog-footer { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 3rem; padding: 2rem clamp(1rem, 4vw, 4.5rem); border-top: 1px solid var(--line); background: var(--surface-sunken); }
.catalog-footer .catalog-brand { font-size: 1.1rem; }
.catalog-footer p { font-size: .75rem; line-height: 1.8; color: var(--ink-600); margin-bottom: 0; }
.catalog-breadcrumb { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--ink-600); font-size: .8rem; padding: var(--breadcrumb-padding-block, 1.5rem) clamp(1rem, 4vw, 4.5rem); }
.catalog-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
.catalog-breadcrumb span { align-self: center; }
.catalog-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.catalog-breadcrumb-list li { display: flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.catalog-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; margin: 1rem clamp(1rem, 4vw, 4.5rem) 4rem; }
.catalog-detail > .product-image { border-radius: 1rem; }
.catalog-detail__body { min-width: 0; }
.catalog-detail__body h1 { font-size: clamp(2rem, calc(3.5vw * var(--ui-font-scale, 1)), 3.8rem); line-height: 1.15; font-weight: 450; letter-spacing: -.05em; margin: 0; overflow-wrap: anywhere; }
.catalog-detail__intro { color: var(--ink-600); line-height: 1.8; }
.catalog-quote-note { font-size: .8rem; color: var(--ink-600); margin: 1.5rem 0; }
.catalog-detail h2 { font-size: 1rem; font-weight: 550; margin-top: 2rem; }
.catalog-specs { margin: 0; font-size: .85rem; }
.catalog-specs > div { display: grid; grid-template-columns: minmax(5rem, 35%) minmax(0, 1fr); gap: 1rem; padding-block: .8rem; border-top: 1px solid var(--line); }
.catalog-specs dt { color: var(--ink-600); }
.catalog-specs dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.catalog-empty { text-align: center; padding: 4rem 1rem; }
.catalog-empty h1, .catalog-empty h3 { font-size: 1.5rem; font-weight: 500; }
.catalog-empty p, .catalog-noscript { color: var(--ink-600); line-height: 1.8; font-size: .9rem; }
.catalog-noscript { text-align: center; padding: 1rem; }
.catalog-inquiry-dialog { width: min(42rem, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border: 1px solid var(--line-strong); border-radius: 1rem; padding: 1.5rem; background: var(--surface); color: var(--ink-900); margin: auto; }
.catalog-inquiry-dialog[open] { display: flex; flex-direction: column; }
.catalog-inquiry-dialog > header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; justify-content: space-between; margin-bottom: 1rem; }
.catalog-inquiry-dialog h2 { margin: 0; font-size: 1.5rem; font-weight: 500; }
.catalog-inquiry-body { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.catalog-inquiry-hint { font-size: .8rem; color: var(--ink-600); line-height: 1.8; margin-top: 0; }
.catalog-inquiry-list { padding: 0; margin: 1rem 0; list-style: none; }
.catalog-inquiry-list li { padding: 1rem 0; border-top: 1px solid var(--line); display: flex; align-items: start; flex-wrap: wrap; gap: .75rem; }
.catalog-inquiry-item { flex: 1; min-width: min(100%, 12rem); }
.catalog-inquiry-item strong { display: block; font-size: 1rem; overflow-wrap: anywhere; font-weight: 550; }
.catalog-inquiry-item small { display: block; color: var(--ink-600); margin-block: .3rem .75rem; overflow-wrap: anywhere; }
.catalog-inquiry-list label, .catalog-inquiry-notes { display: grid; gap: .4rem; color: var(--ink-600); font-size: .8rem; }
.catalog-inquiry-list input { width: min(100%, 10rem); min-height: 44px; padding: .6rem; border: 1px solid var(--line-strong); background: var(--canvas); color: var(--ink-900); }
.catalog-inquiry-notes textarea { width: 100%; resize: vertical; min-height: 7rem; padding: .75rem; border: 1px solid var(--line-strong); border-radius: .5rem; background: var(--canvas); color: var(--ink-900); font-size: 1rem; line-height: 1.6; }.catalog-inquiry-actions{ display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem .5rem; }
.catalog-notice { font-size: .8rem; color: var(--ink-600); line-height: 1.8; overflow-wrap: anywhere; }
.catalog-toast { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); right: 1rem; max-width: min(28rem, calc(100vw - 2rem)); padding: 1rem 1.25rem; border-radius: .75rem; background: var(--ink-900); color: var(--canvas); z-index: 5; box-shadow: 0 4px 24px #0002; display: flex; align-items: center; gap: 1rem; font-size: .85rem; }
.catalog-toast button { color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 50%; width: 44px; height: 44px; flex: none; }
@container (width < 20rem) {.product-card__actions{ align-items: stretch; } .product-card__actions > * { flex: 1 1 auto; } }
@media (max-width: 54rem) {
  .catalog-language { gap: 4px; }
  .catalog-language > svg { width: min(1.1rem, 24px); height: min(1.1rem, 24px); }
  .catalog-language select { padding-inline: 2px; }
  .catalog-cart { min-width: 44px; padding: 6px; }
  .catalog-cart { gap: 4px; }
  .catalog-cart > svg { width: min(1.2rem, 24px); height: min(1.2rem, 24px); }
  .catalog-inquiry-count { min-width: 1em; padding: .05em .25em; font-size: .65rem; }
  .catalog-detail { grid-template-columns: 1fr; gap: 2rem; }
  .catalog-detail > .product-image { max-width: 40rem; width: 100%; }
}
@media (max-width: 30rem) {
  .catalog-hero h1 { font-size: 2.5rem; }
  .catalog-hero { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }