/* Refine the existing PHONE MX surfaces; all catalog and order controls remain. */
:root { --bg:#f7f8fa; --text:#182335; --muted:#586173; --line:#e4e7ed; }
body { background:radial-gradient(ellipse at 90% 0%,#e9effa 0,transparent 32%),#f7f8fa; }
.ambient { opacity:.22; }
.product-card,.catalog-controls { backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff; border:1px solid #e7eaf0; box-shadow:0 7px 28px -19px #18233530; }
.product-card { border-radius:24px; }
.product-media,.photo-window { background:#fff; }
.product-card .photo-window,.brand-grid[data-visible-count="1"] .photo-window,.brand-grid[data-visible-count="1"] .supplied-product .photo-window { height:290px; min-height:0; padding:26px 24px 12px; }
.product-card .photo-window img { object-fit:contain; transform:none; filter:none; }
.product-card .product-info { background:#fff; padding:20px 22px 22px; border-color:#f0f1f4; }
.product-category { margin-bottom:6px; color:#656e7d; font-size:.75rem; letter-spacing:.075em; }
.product-card .product-title { font-size:1.25rem; min-height:2.6em; margin-bottom:8px; }
.product-storage { margin-bottom:9px; }
.product-note.condition { margin-bottom:12px; background:#f1f6f2; border-color:#e0eae2; }
.product-card .product-price { font-size:1.9rem; margin-bottom:16px; letter-spacing:-.035em; }
.product-color-field { margin-bottom:14px; }
/* Native radio choices share the catalog's color, detail and order surfaces. */
.sim-field { border:0; padding:0; margin:0 0 16px; min-width:0; }
.sim-field legend { padding:0; margin-bottom:8px; color:var(--text); font-size:.875rem; font-weight:600; }
.sim-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sim-options:has(>.sim-option:only-of-type) { grid-template-columns:minmax(0,1fr); }
.sim-option { position:relative; display:block; min-width:0; margin:0; cursor:pointer; }
.sim-option input { position:absolute; width:1px; height:1px; padding:0; opacity:0; }
.sim-option span { display:flex; align-items:center; justify-content:center; min-height:46px; padding:10px 6px; border:1px solid #dce1e8; border-radius:12px; background:#fff; color:#364152; font-size:.875rem; font-weight:600; line-height:1.35; text-align:center; }
.sim-option input:checked+span { border-color:var(--red); background:#fff2f5; color:#a71338; box-shadow:inset 0 0 0 1px var(--red); }
.sim-option input:focus-visible+span { outline:2px solid var(--red); outline-offset:3px; }
.sim-option input[aria-invalid=true]+span { border-color:#c82348; }
.sim-note { margin:8px 0 0; font-size:.875rem; line-height:1.45; color:var(--muted); }
.sim-field .field-error { margin:8px 0 0; }
.sim-field [hidden] { display:none!important; }
.cart-item .sim-field { margin:12px 0; }
.product-dialog #detail-sim-field { min-width:0; }
.product-color-field select,.order-field input,.order-field textarea,.order-field select,.cart-color-field select { background:#fff; border-color:#dce1e8; box-shadow:none; }
.detail-button { background:#f5f6f9; border-color:#e4e7ed; box-shadow:none; }
.add-button { background:var(--text); box-shadow:none; }
.favorite-button { background:#ffffffed; border-color:#e8ebf0; box-shadow:0 2px 9px #17233508; }
.photo-window { position:relative; }
.brand-grid[data-visible-count="1"] .product-media { display:flex; align-items:center; }
.brand-grid[data-visible-count="1"] .photo-window { width:100%; }
.catalog-refine { display:block; min-width:0; }
.catalog-refine>summary { display:none; }
.refine-fields { display:flex; gap:18px; }
.controls-top>.search-field { flex:1; }
.control-select label { font-size:.875rem; }
.control-select select { min-height:44px; }
.header { backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.product-card [hidden],.product-dialog [hidden] { display:none!important; }
:is(button,a,select,input,textarea):focus-visible { outline:2px solid var(--red); outline-offset:3px; }
:is(button,a) { -webkit-tap-highlight-color:transparent; }

/* One product sheet, with a persistent action area and a separate scroll body. */
.product-dialog[open] { display:flex; flex-direction:column; background:#fff; border:1px solid #fff; backdrop-filter:none; -webkit-backdrop-filter:none; overflow:hidden; max-height:calc(100dvh - 32px); }
.product-dialog .dialog-header { flex:0 0 auto; position:static; background:#fff; padding:12px 22px; border-color:#edf0f4; backdrop-filter:none; -webkit-backdrop-filter:none; }
.product-dialog .dialog-header .icon-button { width:44px; height:44px; background:#f2f4f7; border:0; box-shadow:none; }
.product-dialog .detail-layout { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; align-items:start; }
.product-dialog .detail-media { position:static; padding:22px; background:#fff; min-width:0; }
.product-dialog .detail-info { padding:28px 26px; min-width:0; }
.product-dialog .detail-info h2 { font-size:1.9rem; line-height:1.18; margin:0 0 12px; }
.detail-summary .detail-storage { font-size:.9375rem; margin:0 0 9px; }
.detail-summary .detail-price { margin:0 0 12px; }
.detail-summary .condition { margin-bottom:16px; }
.product-dialog .detail-color-field { margin:14px 0 18px; }
.product-dialog .detail-color-field label { font-size:.875rem; font-weight:600; }
.product-dialog .detail-color-field select { font-size:1rem; min-height:48px; border-color:#d7dde6; background:#fff; box-shadow:none; }
.product-dialog .detail-extras>.muted { font-size:.875rem; line-height:1.5; }
.product-dialog .detail-shipping { margin:14px 0 8px; }
.product-dialog .detail-tools { margin:18px 0; }
.product-dialog .detail-disclaimer { margin:14px 0 8px; font-size:.8125rem; }
.product-dialog .visual-modes { box-shadow:none; background:#f2f4f7; border:1px solid #edf0f4; border-radius:14px; margin:auto; width:fit-content; }
.visual-modes button { min-height:44px; border-radius:10px; font-size:.9375rem; }
.visual-modes button[aria-pressed=true] { box-shadow:0 2px 7px #1823350e; }
.product-dialog .visual-stage { height:430px; margin-top:12px; background:#fff; border-radius:18px; }
.product-dialog .visual-stage { flex-shrink:0; }
.product-dialog .visual-stage[data-surface=light] { background:#fff; }
.product-dialog .visual-stage[data-mode=spin][data-surface=light] { background:#fafafa; }
.visual-stage #detail-image { object-fit:contain; padding:6px 14px; transition:opacity .16s; }
.visual-stage #detail-image.is-loading { opacity:0; }
.visual-stage .photo-pan { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.visual-stage .photo-pan #detail-image { width:100%; height:100%; max-height:none; mix-blend-mode:normal; }
.product-dialog .photo-thumbs img { mix-blend-mode:normal; }
.product-dialog .photo-thumbs button[data-surface=dark] { background:#050505; }
.product-dialog .visual-stage[data-mode=photos][data-photo-surface=dark] { background:#050505; }
.product-dialog .visual-stage[data-mode=photos][data-photo-surface] { background:var(--photo-background,#fff); }
.product-dialog .visual-stage #spin-image { object-fit:contain; padding:6px; }
.product-dialog .visual-stage model-viewer { outline:0; --poster-color:#fff; }
.visual-stage #model-host.is-loading { opacity:0; pointer-events:none; }
.visual-stage #visual-status { background:#fffffff2; color:#4f5969; border-radius:12px; padding:8px 12px; font-size:.875rem; bottom:12px; top:auto; transform:translateX(-50%); }
.visual-stage #visual-status:empty { display:none; }
.visual-stage #visual-status { left:50%; right:auto; max-width:calc(100% - 32px); width:max-content; }
.product-dialog .visual-controls { display:grid; grid-template-columns:repeat(4,auto) 92px; gap:2px; margin:8px auto 0; padding:4px; box-shadow:none; border:1px solid #e8ebf0; background:#f5f6f9; width:100%; border-radius:14px; }
.product-dialog .visual-controls button { padding:8px 7px; font-size:.875rem; min-height:44px; border-radius:10px; }
.product-dialog .visual-controls button:disabled { opacity:.35; cursor:default; }
.zoom-controls { border-left:1px solid #dde2e9; justify-content:center; }
.zoom-controls button { font-size:1.25rem!important; width:44px; }
.product-dialog .photo-thumbs { border:0; margin-top:8px; gap:8px; padding:4px; }
.product-dialog .photo-thumbs button { width:54px; flex-basis:54px; height:58px; border:1px solid #e6e9ee; border-radius:11px; }
.product-dialog .photo-thumbs img { object-fit:contain; }
.product-dialog .visual-caption { font-size:.8125rem; margin:9px 0 0; line-height:1.45; text-align:center; }
.visual-color-note { margin:8px 0 0; color:#677180; font-size:.8125rem; text-align:center; line-height:1.4; }
.product-dialog .detail-zoom { margin:8px auto 0; box-shadow:none; background:#f5f6f9; border:1px solid #e6e9ee; min-height:44px; }
.detail-purchase { display:flex; align-items:center; gap:12px; padding:14px 22px; border-top:1px solid #e7eaf0; background:#fff; flex:0 0 auto; }
.detail-purchase-price { font-size:1.25rem; font-weight:700; margin-right:auto; white-space:nowrap; }
.detail-purchase-price small { font-size:.75rem; color:var(--muted); font-weight:500; }
.detail-purchase .button { width:auto; min-height:48px; margin:0; border-radius:14px; font-size:.9375rem; padding:12px 20px; }
.detail-purchase .primary { background:var(--red); border-color:var(--red); box-shadow:none; }
.detail-purchase .secondary { background:#f4f8f5; border:1px solid #dce9df; color:#215e3b; }
.product-dialog.is-photo-expanded .detail-info,.product-dialog.is-photo-expanded .detail-purchase { display:none; }
.product-dialog.is-photo-expanded .detail-layout { display:block; overflow:hidden; }
.product-dialog.is-photo-expanded .visual-stage { flex:1 1 0; height:auto; min-height:0; }
.product-dialog.is-photo-expanded .visual-stage { overflow:auto; touch-action:none; cursor:grab; }
.product-dialog.is-photo-expanded .visual-stage:active { cursor:grabbing; }
.product-dialog.is-photo-expanded .visual-stage #detail-image { max-width:none; max-height:none; object-fit:contain; flex:none; padding:0; user-select:none; -webkit-user-drag:none; }
.product-dialog.is-photo-expanded { width:min(1120px,calc(100% - 24px)); height:min(900px,calc(100dvh - 32px)); }
.product-dialog.is-photo-expanded .detail-media { padding:16px; height:100%; display:flex; flex-direction:column; }
.product-dialog.is-photo-expanded .detail-media > :not(.visual-stage) { flex-shrink:0; }

@media (hover:hover) {
  .product-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px -20px #18233540; }
}
@media (max-width:800px) {
  .product-dialog[open] { width:100%; height:100dvh; max-height:100dvh; max-width:100%; margin:0; border:0; border-radius:0; }
  .product-dialog .dialog-header { padding:calc(8px + env(safe-area-inset-top)) 16px 8px; }
  .product-dialog .dialog-header #detail-viewer-name { font-size:1rem; font-weight:650; }
  .product-dialog .detail-layout { display:flex; flex-direction:column; gap:0; }
  .product-dialog .detail-layout > *, .product-dialog .detail-info > * { flex-shrink:0; }
  .product-dialog .detail-info { display:contents; }
  .detail-summary { order:0; width:100%; padding:12px 18px 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
  .product-dialog .detail-summary { position:sticky; top:0; z-index:2; background:#fff; padding-block:10px; border-bottom:1px solid #edf0f4; }
  .product-dialog .detail-summary h2,.detail-summary>.eyebrow,.detail-summary>.condition { display:none; }
  .detail-summary .detail-price { font-size:1.65rem; line-height:1.25; order:0; margin:0; }
  .detail-summary .detail-storage { font-size:.875rem; order:1; margin:0; }
  .product-dialog .detail-color-field { order:1; display:grid; grid-template-columns:45px minmax(0,1fr); width:100%; align-items:center; gap:8px; margin:0; padding:10px 18px; }
  .detail-color-field .field-error { grid-column:2; margin:0; }
  .product-dialog #detail-sim-field { order:1; width:100%; padding:0 18px 10px; }
  .product-dialog #detail-sim-field .sim-field { margin:0; }
  .product-dialog .detail-media { order:2; width:100%; padding:4px 14px 12px; }
  .product-dialog .visual-stage { height:clamp(245px,38dvh,385px); margin-top:8px; }
  .product-dialog .visual-modes { margin:0 auto; }
  .product-dialog .visual-controls { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; max-width:420px; gap:2px; }
  .product-dialog .visual-controls [data-view=reset] { grid-column:1 / 3; }
  .product-dialog .visual-controls .zoom-controls { grid-column:3; }
  .product-dialog .visual-controls button { min-width:44px; font-size:.875rem; }
  .product-dialog .photo-thumbs { margin-top:6px; }
  .product-dialog .photo-thumbs button { height:48px; width:48px; flex-basis:48px; }
  .detail-extras { order:3; width:100%; padding:0 18px 18px; }
  .product-dialog .detail-extras .detail-shipping { margin-top:8px; }
  .detail-purchase { padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:9px; box-shadow:0 -4px 20px #18233506; }
  .detail-purchase-price { display:none; }
  .detail-purchase .button { flex:1; min-width:0; padding:12px 8px; min-height:50px; font-size:.9375rem; gap:6px; }
  .detail-purchase .button svg { width:19px; flex-shrink:0; }
  .product-dialog.is-photo-expanded .detail-summary,.product-dialog.is-photo-expanded .detail-color-field,.product-dialog.is-photo-expanded .detail-extras { display:none; }
  .product-dialog.is-photo-expanded #detail-sim-field { display:none; }
  .product-dialog.is-photo-expanded .visual-stage { height:auto; min-height:0; }
}
@media (max-width:700px) {
  html { scroll-padding-top:80px; }
  .nav { min-height:58px; padding:7px 12px; }
  .header { border-radius:19px; }
  .hero { padding-top:20px; gap:16px; }
  .hero h1 { font-size:2.2rem; }
  .hero-desc { line-height:1.5; }
  .hero-bottom { margin-top:18px; }
  .catalog { padding-top:26px; }
  .catalog-controls { border-radius:20px; padding:12px 12px 0; }
  .controls-top { gap:8px; }
  .controls-top>.search-field { flex:1 1 100%; }
  .catalog-refine { flex:1 1 100%; }
  .catalog-refine>summary { display:flex; justify-content:space-between; align-items:center; min-height:44px; cursor:pointer; color:#364152; font-size:.875rem; list-style:none; }
  .catalog-refine>summary::-webkit-details-marker { display:none; }
  .catalog-refine>summary::after { content:'＋'; font-size:1.2rem; }
  .catalog-refine[open]>summary::after { content:'−'; }
  .catalog-refine:not([open])>.refine-fields { display:none; }
  .refine-fields { gap:12px; padding:6px 0 10px; }
  .control-select { display:block; flex:1; min-width:0; }
  .control-select select { font-size:1rem; }
  .controls-bottom { padding-top:7px; }
  .category-filter { min-height:44px; border-radius:12px; }
  .catalog-meta { padding-block:14px; }
  .brand-heading { margin-bottom:14px; }
  .mobile-dock { bottom:calc(8px + env(safe-area-inset-bottom)); padding:4px; border-radius:21px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); background:#fffffff2; }
  .mobile-dock>a,.mobile-dock>button { min-height:54px; padding:6px 1px; font-size:.75rem; }
  body { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .benefits { gap:0; padding-block:14px; }
  .benefits strong { font-size:.8125rem; }
}
@media (min-width:701px) {
  .catalog-refine>.refine-fields { display:flex!important; }
}
@media (max-width:560px) {
  .product-card .photo-window,.brand-grid[data-visible-count="1"] .photo-window,.brand-grid[data-visible-count="1"] .supplied-product .photo-window { height:275px; padding:22px 24px 10px; }
  .product-card .product-title,.brand-grid[data-visible-count="1"] .product-title { min-height:0; font-size:1.3rem; margin-bottom:6px; }
  .product-card .product-info,.brand-grid[data-visible-count="1"] .product-info { padding:17px 20px 20px; }
  .product-card .product-price { margin-bottom:14px; }
  .product-storage { font-size:.875rem; margin-bottom:8px; }
  .product-note.condition { margin-bottom:10px; }
  .product-color-field { margin-bottom:12px; }
}
@media (max-width:370px) {
  .refine-fields { flex-direction:column; }
  .detail-purchase .button { font-size:.875rem; }
}
@media (max-width:800px) and (max-height:800px) {
  .product-dialog .visual-stage { height:clamp(210px,32dvh,270px); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
}

/* Color menus share one accessible, touch-friendly presentation on all devices. */
.color-picker { position:relative; min-width:0; width:100%; }
.color-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:11px 14px; border:1px solid #d7dde6; border-radius:13px; background:#fff; color:var(--text); text-align:left; font:inherit; font-size:1rem; line-height:1.4; cursor:pointer; }
.color-trigger[data-placeholder=true] { color:#586173; }
.color-trigger[aria-expanded=true] { border-color:var(--red); box-shadow:0 0 0 3px #be163a12; }
.color-trigger[aria-invalid=true] { border-color:var(--red); }
.color-value { min-width:0; overflow-wrap:anywhere; }
.color-chevron { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); flex-shrink:0; margin:0 3px 4px; }
.color-trigger[aria-expanded=true] .color-chevron { transform:rotate(225deg); margin-block:4px 0; }
.color-options { box-sizing:border-box; position:relative; width:100%; margin:6px 0 0; padding:5px; border:1px solid #dce1e9; border-radius:15px; background:#fff; color:var(--text); box-shadow:0 14px 38px -12px #1c2d4640; max-height:300px; overflow:auto; overscroll-behavior:contain; }
.color-options[popover] { position:fixed; inset:auto; margin:0; z-index:100; }
.color-options[hidden] { display:none!important; }
.color-options [role=option] { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:11px 13px; border-radius:10px; font-size:1rem; line-height:1.45; cursor:pointer; overflow-wrap:anywhere; }
.color-options [role=option].is-active { background:#f2f4f8; }
.color-options [role=option][aria-selected=true] { color:#a71338; background:#fff0f4; font-weight:600; }
.color-options [role=option][aria-selected=true]::after { content:'✓'; flex-shrink:0; }
.color-options::backdrop { background:transparent; }
.product-color-field .field-error { font-size:.875rem; line-height:1.4; }
.product-color-field small { display:block; margin-top:5px; }
.visual-color-note { font-size:.875rem; min-height:1.4em; color:#46536a; }
.visual-color-note[data-reference=true] { color:#566173; }
.product-dialog .detail-layout { scroll-padding-block:12px 20px; overflow-x:hidden; }
.detail-purchase { position:relative; z-index:3; background:linear-gradient(135deg,#fffffffa,#f7f9fcfa); }
.product-dialog[open],.cart-dialog[open] { max-height:calc(var(--visible-height,100dvh) - 32px); }
.cart-dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
.cart-dialog .dialog-header { position:static; flex-shrink:0; }
.cart-dialog .cart-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:16px 28px; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.cart-item-main,.cart-item-top h3 { min-width:0; }
.cart-color-field .color-picker { margin-top:5px; }
.product-dialog .visual-stage model-viewer { touch-action:pan-y; }
.product-dialog .visual-stage #spin-host { touch-action:pan-y; }
@media (max-width:800px) {
  .product-dialog[open],.cart-dialog[open] { top:var(--visible-top,0px); bottom:auto; left:0; right:auto; width:100%; max-width:100%; height:var(--visible-height,100dvh); max-height:var(--visible-height,100dvh); margin:0; border-radius:0; border:0; }
  .cart-dialog .dialog-header { padding-top:calc(10px + env(safe-area-inset-top)); }
  .product-dialog .detail-summary { position:static; }
  .product-dialog .detail-color-field { grid-template-columns:48px minmax(0,1fr); }
  .product-dialog .detail-media { padding-bottom:20px; }
  .detail-purchase { flex-shrink:0; }
  .detail-purchase .button { white-space:normal; line-height:1.3; }
  .product-dialog.is-photo-expanded { height:var(--visible-height,100dvh); }
  .cart-item .color-trigger { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; }
}