.nph-material { --nph-ink:#eeedf4; --nph-muted:#a2a2b1; --nph-line:#ffffff1c; color:var(--nph-ink); background:#111217; border:1px solid #34343e; border-radius:22px; padding:clamp(20px,4vw,42px); font-family:system-ui,-apple-system,sans-serif; }
.nph-material, .nph-material * { box-sizing:border-box; }
/* Escape a block theme's reading-width limit without overflowing its page gutters. */
.nph-material.alignwide, .is-layout-constrained > .nph-material.alignwide { width:100%; max-width:100rem; margin-inline:auto; container:nph-builder / inline-size; }
.nph-material__header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:32px; }
.nph-material .nph-material__eyebrow { color:#fdaf00; font-size:10px; letter-spacing:.16em; font-weight:650; margin:0 0 14px; }
.nph-material h2 { color:var(--nph-ink); font-size:clamp(24px,3.8vw,40px); font-weight:580; line-height:1.12; letter-spacing:-.04em; margin:0 0 12px; }
.nph-material__header p { margin:0; font-size:14px; color:var(--nph-muted); }
.nph-material__layout { display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,34%,500px); gap:30px; }
.nph-material__preview-slot { min-width:0; }
.nph-material__visual { min-width:0; align-self:start; position:sticky; top:16px; padding:14px; border:1px solid #fdaf0038; border-radius:14px; }
.nph-material__preview-dock { display:none; }
.nph-material__stage { position:relative; aspect-ratio:1.3; overflow:hidden; border:1px solid var(--nph-line); border-radius:14px; isolation:isolate; background:radial-gradient(ellipse at 50% 40%,#5a606b 0%,#444a55 45%,#343943 85%); }
.nph-material__canvas { position:absolute; inset:0; }
.nph-material__canvas canvas { display:block; width:100%; height:100%; opacity:0; }
.nph-material__surface[data-ready="true"] canvas { opacity:1; }
.nph-material .nph-material__stage-label { position:static; margin:0 2px 7px; color:#bcbcc9; font-size:11px; line-height:1.3; font-weight:550; letter-spacing:0; }
.nph-material__fallback { position:absolute; left:9%; top:42%; width:82%; aspect-ratio:520/111; border:2px solid #d2d2d6; border-radius:6px; background:#f6f6f3; box-shadow:0 20px 25px #0006; display:flex; align-items:center; justify-content:center; container-type:inline-size; }
.nph-material__surface:not([data-plate-variant="standard"]) .nph-material__fallback { width:var(--nph-plate-width,82%); aspect-ratio:var(--nph-plate-aspect,520/111); left:50%; top:50%; transform:translate(-50%,-50%); }
.nph-material__surface[data-plate-layout="two-line"] .nph-material__fallback span { text-align:center; font-size:26cqi; line-height:1.12; }
.nph-material__surface[data-plate-variant="hex"] .nph-material__fallback { border-radius:0; clip-path:polygon(var(--nph-hex-inset) 0,calc(100% - var(--nph-hex-inset)) 0,100% 31%,calc(100% - var(--nph-hex-inset)) 100%,var(--nph-hex-inset) 100%,0 31%); }
.nph-material__surface[data-plate-available="false"] .nph-material__canvas, .nph-material__surface[data-plate-available="false"] .nph-material__fallback { visibility:hidden; }
.nph-material__surface[data-side="rear"] .nph-material__fallback { background:#ffd332; border-color:#d5ac21; }
.nph-material__fallback span { font-family:var(--nph-preview-font,"Arial Narrow"),sans-serif; color:#111; font-size:16cqi; font-weight:bold; white-space:pre; max-width:94%; overflow:hidden; }
.nph-material__surface:not([data-render-state="fallback"]) .nph-material__fallback { visibility:hidden; }
.nph-material__loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--nph-muted); font-size:12px; }
.nph-material__loading span { width:18px; height:18px; border:2px solid #ffffff20; border-top-color:#fdaf00; border-radius:50%; animation:nph-preview-spin .9s linear infinite; }
.nph-material__surface:not([data-render-state="loading"]) .nph-material__loading { display:none; }
@keyframes nph-preview-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .nph-material__loading span { animation:none; } }
.nph-material__caption { display:flex; justify-content:space-between; gap:12px; padding:16px 2px; font-size:11px; color:var(--nph-muted); }
.nph-material__caption span:first-child { color:#dddbe7; }
.nph-material__dimensions { color:var(--nph-muted); font-size:11px; margin:0 2px 14px; }
.nph-material__sizes select { display:block; width:100%; min-width:0; min-height:40px; color:var(--nph-ink); background:#08090d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23fdaf00' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px; appearance:none; -webkit-appearance:none; border:1px solid #494651; border-radius:7px; padding:8px 32px 8px 8px; font:inherit; font-size:12px; white-space:nowrap; }
.nph-material__sizes [data-size-field] { margin-top:16px; }
.nph-material__sizes option:disabled { color:#93939b; }
.nph-material .nph-material__size-hint { margin:7px 0 0; font-size:11px; line-height:1.5; color:var(--nph-muted); }
.nph-material .nph-material__size-detail { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin:7px 0 0; font-size:11px; line-height:1.5; color:var(--nph-muted); }
.nph-material__size-detail [data-size-price] { color:#fdaf00; font-weight:600; }
.nph-material__choice:has(input:disabled) { opacity:.4; cursor:default; }
.nph-material__sides label:has(input:disabled) { opacity:.4; }
.nph-material__controls { min-width:0; margin:0; }
.nph-material__label, .nph-material legend { display:block; padding:0; color:#dedde8; font-weight:550; font-size:12px; margin-bottom:10px; }
.nph-material__registration { display:block; width:100%; min-height:48px; padding:9px 14px; background:#08090d; color:white; border:1px solid #494651; border-radius:8px; font:600 22px/1.2 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.nph-material fieldset { border:0; margin:24px 0 0; padding:0; min-width:0; }
.nph-material__finishes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.nph-material__choice { display:grid; grid-template-columns:14px minmax(0,1fr); align-items:center; gap:8px; border:1px solid var(--nph-line); border-radius:9px; margin:0; padding:10px; cursor:pointer; background:#ffffff03; }
.nph-material__choice > span:last-child { grid-column:1/-1; }
.nph-material__choice:has(input:checked) { border-color:#fdaf00; background:#fdaf000e; }
.nph-material__choice input { margin:0; accent-color:#fdaf00; flex-shrink:0; }
.nph-material__choice strong { display:block; font-size:12px; font-weight:550; }
.nph-material__choice small { display:block; margin-top:4px; font-size:10px; line-height:1.4; color:var(--nph-muted); }
.nph-material__badge-none, .nph-material__badge-types label { display:inline-flex; align-items:center; gap:6px; font-size:12px; cursor:pointer; }
.nph-material__badge-types { display:flex; gap:18px; margin:18px 0 12px; }
.nph-material__badges input { accent-color:#fdaf00; }
.nph-material__badge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
.nph-material__badge-grid[hidden] { display:none; }
.nph-material__badge-card { display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px; align-items:center; min-width:0; padding:10px; border:1px solid var(--nph-line); border-radius:9px; cursor:pointer; }
.nph-material__badge-card:has(input:checked) { border-color:#fdaf00; background:#fdaf000e; }
.nph-material__badge-card:has(input:disabled) { opacity:.45; cursor:default; }
.nph-material__badge-card input { margin:0; }
.nph-material__badge-card span { grid-column:1/-1; font-size:11px; line-height:1.4; }
.nph-material__badge-card small { display:block; color:#e9b3a9; }
.nph-material__badges select { width:100%; min-height:40px; border:1px solid #494651; border-radius:7px; background:#08090d; color:var(--nph-ink); padding:8px; font:inherit; font-size:12px; }
.nph-material__fallback-badge { position:absolute; left:.77%; top:3.6%; height:92.8%; width:8.61%; overflow:hidden; }
.nph-material__fallback img { width:100%; height:100%; object-fit:contain; }
.nph-material__fallback img[data-badge-type="gel"] { position:absolute; left:50%; top:50%; width:auto; max-width:none; height:121.9%; transform:translate(-50%,-50%); }
.nph-material__fallback img[hidden] { display:none; }
.nph-material__surface[data-badge-present="true"] .nph-material__fallback { padding-left:12.6%; padding-right:3.4%; }
.nph-material__surface[data-badge-present="true"] .nph-material__fallback span { font-size:14cqi; }
.nph-material__sides label { display:inline-flex; gap:7px; align-items:center; margin-right:20px; font-size:12px; }
.nph-material__sides input, .nph-material__zoom input { accent-color:#fdaf00; }
.nph-material__zoom { display:flex; gap:8px; align-items:center; margin-top:22px; font-size:12px; cursor:pointer; }
.nph-material .nph-material__note { font-size:11px; line-height:1.6; color:var(--nph-muted); margin:20px 0 0; }
.nph-material .nph-material__status { border-top:1px solid var(--nph-line); margin:25px 0 0; padding-top:16px; font-size:11px; line-height:1.5; color:var(--nph-muted); max-width:none; }
.nph-material input:focus-visible, .nph-material select:focus-visible { outline:2px solid #ffd06b; outline-offset:4px; }
@media(max-width:720px) { .nph-material__layout { grid-template-columns:1fr; gap:14px; } .nph-material__visual { top:0; z-index:2; background:#111217; } .nph-material__stage { aspect-ratio:1.8; } .nph-material__header { display:block; margin-bottom:22px; } .nph-material__caption { font-size:10px; } .nph-material__choice input { scroll-margin-top:290px; } }

.nph-material [hidden] { display:none!important; }
.nph-material__surface { min-width:0; }
.nph-material__treatment .nph-material__zoom { margin-top:0; }
.nph-material__surface[data-side="front"][data-treatment="tinted"] .nph-material__fallback { background:#888b89; border-color:#686c69; }
.nph-material__surface[data-side="rear"][data-treatment="tinted"] .nph-material__fallback { background:#776200; border-color:#574800; }
.nph-material__surface .nph-material__fallback { left:50%; top:50%; transform:translate(-50%,-50%); }
/* Extra vertical space for the holder's lower rail in the paired preview. */
.nph-material[data-view-mode="pair"] .nph-material__stage { aspect-ratio:2.3; }
.nph-material__surface .nph-material__fallback-decoration { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.nph-material__borders label { display:inline-flex; align-items:center; gap:7px; margin:0 16px 8px 0; font-size:12px; }
.nph-material__borders input { accent-color:#fdaf00; }
@media(max-width:720px) { .nph-material__visual { position:static; } }

/* One configuration panel at a time; viewing tools stay with the plates. */
.nph-material button { font:550 12px/1.25 system-ui,sans-serif; cursor:pointer; border:1px solid var(--nph-line); border-radius:8px; color:var(--nph-ink); background:#ffffff06; padding:10px 12px; }
.nph-material button:hover { background:#ffffff10; }
.nph-material button:focus-visible, .nph-material summary:focus-visible { outline:2px solid #ffd06b; outline-offset:3px; }
.nph-material__sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0!important; }
.nph-material__preview-tools { margin-bottom:16px; padding:12px; border:1px solid var(--nph-line); border-radius:12px; background:#ffffff03; }
.nph-material__preview-tools-body { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:12px; margin-top:12px; }
.nph-material .nph-material__preview-tools h3 { grid-column:1/-1; margin:0; color:var(--nph-ink); font-size:12px; font-weight:600; line-height:1.25; }
.nph-material__preview-tools-body:has([data-view-controls][hidden]) { grid-template-columns:1fr; }
.nph-material .nph-material__preview-toggle { display:none; }
.nph-material .nph-material__plates-toggle { display:none; }
.nph-material .nph-material__preview-tools fieldset { margin:0; }
.nph-material .nph-material__preview-tools legend { position:static; width:auto; height:auto; margin:0 0 7px; overflow:visible; clip-path:none; font-size:11px; font-weight:400; color:var(--nph-muted); }
.nph-material__sides, .nph-material__inspection { display:flex; flex-wrap:nowrap; align-items:center; gap:5px; }
.nph-material__preview-tools label { display:inline-flex; align-items:center; gap:5px; padding:7px 8px; margin:0; border:1px solid var(--nph-line); border-radius:7px; font-size:11px; cursor:pointer; background:#ffffff03; }
.nph-material__preview-tools input { width:11px; height:11px; margin:0; accent-color:#fdaf00; }
.nph-material__inspection button { padding:8px; font-size:11px; border-radius:7px; }
.nph-material__preview-tools label:has(input:checked), .nph-material__inspection button[aria-pressed="true"] { border-color:#fdaf00; background:#fdaf0016; }
.nph-material__registration-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.nph-material__registration-heading .nph-material__label { margin:0; }
.nph-material .nph-material__feedback { margin:9px 0 0; min-height:28px; color:var(--nph-muted); font-size:11px; line-height:1.5; }
.nph-material .nph-material__feedback[data-error="true"] { color:#f0b7a9; }
.nph-material__registration[aria-invalid="true"] { border-color:#d18e7d; }
.nph-material__steps { display:flex; gap:4px; margin:0 0 20px; padding-bottom:5px; border-bottom:1px solid var(--nph-line); }
.nph-material__steps button { flex:1; min-width:0; padding:10px 5px; border-color:transparent; color:var(--nph-muted); background:transparent; }
.nph-material__steps button[aria-selected="true"] { color:var(--nph-ink); border-color:#fdaf005c; background:#fdaf0014; }
.nph-material__step-panel { min-height:310px; padding-top:18px; }
.nph-material .nph-material__step-panel h3 { margin:0 0 20px; font-size:19px; font-weight:550; line-height:1.25; color:var(--nph-ink); letter-spacing:-.025em; }
.nph-material__step-panel h3:focus { outline:none; }
.nph-material .nph-material__step-panel > fieldset:first-of-type { margin-top:0; }
.nph-material .nph-material__placement { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 0; }
.nph-material__placement label { display:flex; gap:5px; align-items:center; border:1px solid var(--nph-line); border-radius:8px; padding:9px 8px; font-size:11px; cursor:pointer; }
.nph-material__placement input { margin:0; accent-color:#fdaf00; }
.nph-material__placement label:has(input:checked) { border-color:#fdaf00; background:#fdaf0014; }
.nph-material__finishes .nph-material__choice { display:flex; gap:8px; padding:9px; min-height:68px; }
.nph-material__finishes .nph-material__choice input { width:11px; height:11px; }
.nph-material__finishes .nph-material__choice strong { font-size:11px; }
.nph-material__finishes .nph-material__choice small { font-size:9px; }
.nph-material__badge-picker { margin:0; border:0; padding:0; }
.nph-material__badge-picker summary { cursor:pointer; font-size:12px; color:var(--nph-ink); }
.nph-material__badge-picker[open] summary { margin-bottom:14px; }
.nph-material .nph-material__note:empty { display:none; }
.nph-material__flow-footer { margin-top:18px; padding-top:14px; border-top:1px solid var(--nph-line); }
.nph-material__flow-footer > p { margin:0 0 12px; color:var(--nph-muted); font-size:11px; line-height:1.5; }
.nph-material__flow-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.nph-material__flow-actions .nph-material__primary { margin-left:auto; background:#fdaf00; color:#181320; border-color:#fdaf00; }
.nph-material__flow-actions .nph-material__primary:hover { background:#ffc447; }
.nph-material .nph-material__review-registration { margin:0; font-size:25px; letter-spacing:.08em; font-weight:650; }
.nph-material__review-plate { padding:13px; margin-top:12px; border:1px solid var(--nph-line); border-radius:10px; background:#ffffff02; }
.nph-material__review-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.nph-material .nph-material__review-heading h4 { margin:0; color:var(--nph-ink); font-size:13px; font-weight:550; }
.nph-material__review-heading button { padding:6px 8px; font-size:11px; }
.nph-material__review-plate dl { display:grid; grid-template-columns:68px minmax(0,1fr); gap:6px 12px; font-size:11px; margin:10px 0 0; }
.nph-material__review-plate dt { color:var(--nph-muted); }
.nph-material__review-plate dd { margin:0; }
@media(max-width:720px) {
  .nph-material__preview-slot { align-self:start; }
  .nph-material__visual { position:static; padding:8px; }
  .nph-material__preview-dock:not([hidden]) { display:block; position:sticky; top:var(--nph-preview-top,0px); z-index:4; height:var(--nph-preview-bar-height,48px); margin-bottom:12px; visibility:hidden; }
  .nph-material__preview-dock[data-active="true"] { visibility:visible; }
  .nph-material .nph-material__dock-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:13px 15px; border-color:#fdaf005c; border-radius:12px; background:#191b20; box-shadow:0 5px 18px #0005; font-size:13px; }
  .nph-material .nph-material__dock-toggle:hover { background:#24262c; }
  .nph-material__preview-dock[data-active="true"] .nph-material__dock-toggle { animation:nph-preview-reveal .2s ease-out; }
  .nph-material__dock-toggle[aria-expanded="true"] .nph-material__preview-arrow { transform:rotate(225deg); margin-bottom:-3px; }
  .nph-material__preview-drawer { max-height:min(65dvh,580px); overflow:auto; overscroll-behavior:contain; border-radius:0 0 14px 14px; background:#111217; box-shadow:0 10px 24px #0006; }
  .nph-material__preview-drawer .nph-material__visual { border-radius:0 0 14px 14px; }
  .nph-material .nph-material__preview-drawer .nph-material__plates-toggle { display:none; }
  .nph-material__preview-tools { margin-bottom:8px; padding:0; }
  .nph-material__preview-title { display:none; }
  .nph-material .nph-material__preview-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:12px; border:0; border-radius:12px; text-align:left; background:transparent; font-size:12px; }
  .nph-material .nph-material__preview-toggle:hover { background:#ffffff06; }
  .nph-material .nph-material__plates-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:12px; margin-bottom:8px; border-radius:12px; text-align:left; font-size:12px; }
  .nph-material .nph-material__plates-toggle[aria-expanded="false"] { margin-bottom:0; }
  .nph-material__preview-arrow { flex-shrink:0; width:7px; height:7px; margin:0 3px 4px; border-right:2px solid #fdaf00; border-bottom:2px solid #fdaf00; transform:rotate(45deg); }
  .nph-material__preview-toggle[aria-expanded="true"] .nph-material__preview-arrow, .nph-material__plates-toggle[aria-expanded="true"] .nph-material__preview-arrow { transform:rotate(225deg); margin-bottom:-3px; }
  .nph-material__preview-tools-body { grid-template-columns:minmax(0,1fr); margin:0; padding:0 12px 12px; gap:12px; }
  .nph-material__preview-tools:has([aria-expanded="false"]) .nph-material__preview-tools-body { display:none; }
  .nph-material__preview-tools label { padding:6px 4px; gap:4px; font-size:10px; }
  .nph-material__inspection button { padding:7px 5px; font-size:10px; }
  .nph-material__caption { padding:8px 2px; font-size:9px; }
  .nph-material[data-view-mode="pair"] .nph-material__stage { aspect-ratio:2.8; }
  .nph-material .nph-material__stage-label { font-size:10px; margin-bottom:5px; }
  .nph-material__step-panel { min-height:0; }
  .nph-material__sizes select, .nph-material__badges select { font-size:16px; min-height:44px; }
  .nph-material__registration, .nph-material__step-panel input, .nph-material__step-panel select, .nph-material__steps { scroll-margin-top:var(--nph-preview-offset,16px); }
}
@keyframes nph-preview-reveal { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .nph-material__preview-dock[data-active="true"] .nph-material__dock-toggle { animation:none; } }

/* Product samples and options use the same visual system as the preview. */
.nph-material__finishes .nph-material__option-price { color:#fdaf00; font-size:11px; font-weight:600; }
.nph-material__total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 16px; font-size:13px; }
.nph-material__total strong { color:var(--nph-ink); font-size:21px; }
.nph-material .nph-material__price-note { font-size:11px; line-height:1.5; color:var(--nph-muted); margin:0 0 16px; }
.nph-material button:disabled { opacity:.35; cursor:default; }
.nph-material__badge-types { margin:0 0 14px; }
.nph-material__badge-card { position:relative; grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; gap:10px; padding:12px 8px; }
.nph-material__badge-card > input { position:absolute; width:1px; height:1px; opacity:0; }
.nph-material__badge-card:has(input:focus-visible) { outline:2px solid #ffd06b; outline-offset:3px; }
/* Outrank Woo's global image height:auto even when its CSS loads afterwards. */
.nph-material .nph-material__badge-card > img { display:block; width:82px; height:82px; max-width:100%; max-height:82px; min-width:0; object-fit:contain; justify-self:center; }
.nph-material__badge-card > span { grid-column:1; width:100%; }
.nph-material__badge-card small { display:block; color:var(--nph-muted); font-size:10px; margin-top:5px; }
.nph-material__no-badge { height:82px; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--nph-muted); }
.nph-material__badge-card [data-badge-price] { color:#fdaf00; }


/* Compact text options and one border decision for the selected plates. */
.nph-material__finishes .nph-material__choice { position:relative; padding:12px; min-height:80px; }
.nph-material__finishes .nph-material__choice input { position:absolute; width:1px; height:1px; opacity:0; }
.nph-material__choice:has(input:focus-visible) { outline:2px solid #ffd06b; outline-offset:3px; }
.nph-material__finishes .nph-material__choice strong { font-size:12px; }
.nph-material__finishes .nph-material__choice small { font-size:10px; }
.nph-material__border-buttons { display:flex; gap:8px; }
.nph-material__border-buttons button { min-width:66px; min-height:40px; }
.nph-material__border-buttons button[aria-pressed="true"] { border-color:#fdaf00; background:#fdaf000e; }
.nph-material__adjustment { display:flex; align-items:center; gap:10px; margin-top:14px; padding:10px 12px; border:1px solid #fdaf0060; border-radius:9px; background:#fdaf000c; }
.nph-material__adjustment p { margin:0; flex:1; font-size:12px; line-height:1.5; color:var(--nph-ink); }
.nph-material__adjustment button { flex-shrink:0; font-size:18px; padding:6px 10px; }

/* Shared button treatment for placement, badge finish and border choices. */
.nph-material .nph-material__option-button { min-height:40px; min-width:66px; padding:10px 14px; border:1px solid var(--nph-line); border-radius:9px; background:#ffffff03; }
.nph-material .nph-material__option-button[aria-pressed="true"], .nph-material button.nph-material__badge-card[aria-pressed="true"] { border-color:#fdaf00; background:#fdaf000e; }
.nph-material .nph-material__badge-types { gap:8px; flex-wrap:wrap; }
.nph-material button.nph-material__badge-card { display:grid; padding:12px 8px; text-align:center; background:#ffffff03; font-weight:400; }
.nph-material button.nph-material__badge-card:focus-visible { outline:2px solid #ffd06b; outline-offset:3px; }
.nph-material__caption { justify-content:flex-end; }
.nph-material .nph-material__caption span { color:var(--nph-muted); }
.nph-material .nph-material__reset { display:block; margin:14px auto 0; padding:8px 12px; color:var(--nph-muted); font-weight:400; }
.nph-material__checkout { margin-bottom:16px; }
.nph-material .nph-material__checkout-button { width:100%; min-height:46px; border-color:#fdaf00; background:#fdaf000e; font-size:14px; }
.nph-material .nph-material__checkout-button:disabled { opacity:.6; }
.nph-material .nph-material__checkout .nph-material__note { margin:8px 0 0; }

/* Tint and every preview choice share the compact border-button treatment. */
.nph-material .nph-material__preview-tools .nph-material__option-button { min-width:0; padding:8px 10px; font-size:11px; }
.nph-material__treatment legend [data-tint-price] { color:#fdaf00; font-size:.85em; margin-left:6px; }
.nph-material .nph-material__travel-note { grid-column:1/-1; text-align:left; font-size:11px; line-height:1.5; margin:6px 0 0; }
.nph-material__travel-note a { color:var(--nph-ink); text-decoration:underline; }
@media(max-width:720px) {
  .nph-material .nph-material__preview-tools .nph-material__option-button { flex:1; min-height:40px; padding:8px 6px; font-size:11px; white-space:nowrap; }
}

/* Registration choices sit beneath the tabs; plate appearance is separate from size. */
.nph-material__spacing-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.nph-material .nph-material__sizes .nph-material__treatment { margin:22px 0 0; }
.nph-material__sizes .nph-material__size-options > [data-size-field]:first-child { margin-top:0; }
.nph-material__sizes .nph-material__size-options > [data-size-field][hidden] + [data-size-field] { margin-top:0; }

/* One registration block moves above the previews on mobile; it never sticks. */
.nph-material__mobile-registration { display:none; min-width:0; }
.nph-material__registration-block { position:static; }
.nph-material__header h2 { margin-bottom:0; }
@media(max-width:720px) {
  .nph-material__mobile-registration { display:block; }
  .nph-material__mobile-registration .nph-material__registration { scroll-margin-top:16px; }
  .nph-material__spacing-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .nph-material .nph-material__spacing-buttons .nph-material__option-button { min-width:0; padding:10px 6px; font-size:11px; }
  .nph-material .nph-material__placement { flex-wrap:nowrap; gap:6px; }
  .nph-material .nph-material__placement .nph-material__option-button { flex:1 1 auto; min-width:0; padding:10px 6px; font-size:11px; white-space:nowrap; }
  .nph-material__controls > [data-desktop-registration]:empty { display:none; }
  .nph-material__steps { margin-bottom:0; }
}

/* Numbered sections use one quiet frame; options retain their button borders. */
.nph-material .nph-material__section { min-width:0; margin:0; padding:18px; border:1px solid var(--nph-line); border-radius:12px; background:#ffffff02; }
.nph-material .nph-material__section + .nph-material__section { margin-top:16px; }
.nph-material .nph-material__section[hidden] + .nph-material__section { margin-top:0; }
.nph-material .nph-material__section .nph-material__section-heading { display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin:0 0 18px; color:var(--nph-ink); font-size:16px; font-weight:550; line-height:1.4; letter-spacing:0; }
.nph-material .nph-material__section .nph-material__section-heading:focus, .nph-material__step-panel:focus { outline:none; }
.nph-material .nph-material__step-pill { display:inline-flex; align-items:center; padding:5px 9px; border-radius:99px; color:#181320; background:#fdaf00; font-size:10px; font-weight:700; line-height:1.2; white-space:nowrap; }
.nph-material .nph-material__section-price { display:inline-block; margin-left:5px; color:#fdaf00; font-size:11px; font-weight:600; white-space:nowrap; }
.nph-material__section .nph-material__badge-grid { margin-bottom:0; }
.nph-material__section .nph-material__review-plate { padding:15px 0 0; border:0; border-top:1px solid var(--nph-line); border-radius:0; background:transparent; }
.nph-material__sizes .nph-material__section-heading + [data-size-field] { margin-top:0; }
@media(max-width:720px) {
  .nph-material .nph-material__section { padding:14px; }
  .nph-material .nph-material__section .nph-material__section-heading { font-size:15px; }
}

/* Scale the desktop controls with the builder's actual room, not just the screen. */
@container nph-builder (max-width:850px) {
  .nph-material__preview-tools-body { grid-template-columns:minmax(0,1fr); }
}
@container nph-builder (min-width:1000px) {
  .nph-material__label, .nph-material legend { font-size:14px; }
  .nph-material__sizes select { font-size:16px; min-height:46px; }
  .nph-material .nph-material__option-button, .nph-material__steps button, .nph-material__flow-actions button { font-size:14px; min-height:44px; }
  .nph-material .nph-material__section { padding:20px; }
  .nph-material .nph-material__section .nph-material__section-heading { font-size:18px; }
  .nph-material .nph-material__step-pill { font-size:11px; }
  .nph-material__finishes .nph-material__choice { padding:15px; min-height:92px; }
  .nph-material__finishes .nph-material__choice strong { font-size:14px; }
  .nph-material__finishes .nph-material__choice small { font-size:12px; }
  .nph-material__badge-card span { font-size:13px; }
  .nph-material__badge-card small { font-size:12px; }
  .nph-material .nph-material__note, .nph-material .nph-material__feedback, .nph-material .nph-material__size-detail, .nph-material .nph-material__size-hint { font-size:12px; }
  .nph-material .nph-material__preview-tools h3 { font-size:14px; }
  .nph-material .nph-material__preview-tools legend { font-size:12px; }
  .nph-material .nph-material__preview-tools .nph-material__option-button { font-size:13px; min-height:44px; padding:10px 14px; }
  .nph-material .nph-material__stage-label, .nph-material__caption { font-size:12px; }
  .nph-material__stage { aspect-ratio:2; }
  .nph-material[data-view-mode="pair"] .nph-material__stage { aspect-ratio:2.8; }
  .nph-material .nph-material__review-heading h4 { font-size:14px; }
  .nph-material__review-plate dl { grid-template-columns:85px minmax(0,1fr); font-size:13px; }
  .nph-material__total { font-size:15px; }
  .nph-material__total strong { font-size:28px; }
}

/* Optional holder pair: native radio controls, photo-informed frame proportions. */
.nph-material__holder-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.nph-material__holder-options .nph-material__choice > span { width:100%; }
.nph-material__holder-options .is-unavailable { opacity:.5; }
.nph-material__holders .nph-material__section-title small { color:var(--nph-muted); font-size:12px; font-weight:400; }
.nph-material__holder-swatch { display:block; position:relative; height:32px; width:100%; max-width:135px; margin:2px 0 10px; border-radius:4px; background:var(--nph-holder-surface,#26272a); box-shadow:inset 0 0 0 1px #ffffff35; }
.nph-material__holder-swatch::after { content:''; position:absolute; inset:3px 3px 8px; background:#f3f3eb; border-radius:2px; }
.nph-material__holder-swatch[data-holder-finish="none"] { background:transparent; }
.nph-material__holder-swatch[data-holder-finish="none"]::after { inset:4px 0; }
.nph-material [data-holder-finish="chrome"], .nph-material__surface[data-holder="chrome"] { --nph-holder-surface:linear-gradient(145deg,#a5adb7 0%,#f8faff 18%,#b7bec8 27%,#f1f2f4 45%,#8c939e 55%,#d4d8df 70%,#fff 82%,#aab2bd 100%); }
.nph-material [data-holder-finish="carbon"], .nph-material__surface[data-holder="carbon"] { --nph-holder-surface:repeating-conic-gradient(#252629 0% 25%,#77797d 0% 50%) 0 0 / 4px 4px; }
.nph-material__surface[data-holder="black"] { --nph-holder-surface:linear-gradient(#35363a,#202125); }
.nph-material__surface:is([data-holder="black"],[data-holder="chrome"],[data-holder="carbon"]) .nph-material__fallback::after { content:''; position:absolute; inset:-1.3cqi -1.3cqi -4.3cqi; padding:1.3cqi 1.3cqi 4.3cqi; border-radius:1.8cqi; background:var(--nph-holder-surface); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; }