/* Selected detail concept 3. Existing catalog navigation and data stay intact. */
html:has(body.detail-open) { scrollbar-gutter:auto; }
body[data-catalog-style="white"] .detail-dialog {
  width:min(680px,calc(100vw - 32px)); max-width:none; height:min(900px,94dvh);
  max-height:94dvh; padding:0; color:var(--ink); background:#fff; border:0; border-radius:16px;
}
body[data-catalog-style="white"] .detail-dialog[data-has-variants="true"] { height:min(900px,94dvh); }
.detail-dialog .detail-header { min-height:52px; padding:0 14px; gap:2px; border:0; background:#fff; }
.detail-dialog .detail-header > span { font-size:20px; font-weight:650; }
.detail-header .dialog-close img { width:23px; height:23px; }
.detail-dialog .detail-service { display:flex; align-items:center; justify-content:center; gap:6px; min-width:76px; min-height:44px; padding:0; border:0; background:none; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; }
.detail-service img { width:22px; height:22px; }
.detail-service:disabled { opacity:.45; cursor:default; }
.detail-dialog .detail-scroll { flex:1; max-height:none; min-height:0; overflow-y:auto; overflow-anchor:none; scrollbar-gutter:auto; }
.detail-dialog .detail-copy { padding:16px 20px 20px; background:#fff; }
.detail-dialog .detail-copy h2 { margin:0 0 5px; font-size:27px; line-height:1.35; font-weight:700; letter-spacing:-.5px; overflow-wrap:anywhere; }
.detail-dialog .detail-code { margin:0; font-size:14px; color:var(--muted); line-height:1.5; }
.detail-overview { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(116px,1fr); gap:16px; align-items:center; margin:18px 0 12px; }
.detail-visual { min-width:0; }
body .detail-dialog .detail-image-wrap,
body .detail-dialog[data-has-variants="true"] .detail-image-wrap { height:240px; aspect-ratio:auto; max-height:none; padding:0; }
.detail-dialog .detail-image-note { padding:0; margin:2px 0 0; font-size:11px; line-height:1.4; min-height:0; }
.detail-dialog .detail-image-note[data-reference="false"] { display:none; }
.detail-dialog .detail-specs { margin:0; min-width:0; }
.detail-dialog .spec-item { display:flex; flex-direction:column; gap:6px; padding:12px 0; border-top:1px solid var(--line); }
.detail-dialog .spec-item:first-child { border-top:0; }
.detail-dialog .spec-label { font-size:14px; line-height:1.4; color:var(--muted); }
.detail-dialog .spec-value { font-size:13px; line-height:1.5; font-weight:600; letter-spacing:-.2px; }
.detail-dialog #detailSpecs .spec-item[data-secondary="true"] { display:none; }
.detail-dialog #detailSpecs .spec-item[data-label="容量"] { padding:10px 12px; margin-bottom:12px; border-radius:7px; background:var(--page); }
.detail-dialog #detailSpecs .spec-item[data-label="容量"] .spec-value { color:var(--theme); font-size:22px; font-weight:700; line-height:1.25; white-space:nowrap; }
.detail-dialog .detail-selection { display:grid; margin:12px 0 0; padding:11px 13px; border-radius:7px; background:var(--page); color:var(--theme); font-size:16px; line-height:1.5; font-weight:600; }
.detail-dialog .detail-selection[hidden] { display:none; }
.detail-dialog .variant-picker { margin:14px 0 0; padding:16px 0 0; border-top:1px solid var(--line); }
.detail-dialog .variant-group { display:block; margin:20px 0 0; }
.detail-dialog .variant-group:first-child { margin-top:0; }
.detail-dialog .variant-label { display:block; margin:0 0 10px; font-size:18px; line-height:1.4; color:var(--ink); font-weight:650; }
.detail-dialog .variant-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; align-items:start; align-content:start; }
.detail-dialog .variant-group[data-variant-group="容量"] .variant-values { min-height:0; }
.detail-dialog .variant-option { min-width:0; min-height:44px; width:100%; padding:10px 3px; font-size:14px; border:1px solid #dce1dd; border-radius:7px; color:var(--ink); background:#fff; box-shadow:none; transition:background-color .15s ease,border-color .15s ease; touch-action:manipulation; }
.detail-dialog .variant-option:active { background:var(--page); }
.detail-dialog .variant-option.selected { background:var(--theme); color:#fff; border-color:var(--theme); }
.detail-dialog .variant-values.has-picture-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.detail-dialog .variant-option.picture-option { position:relative; display:flex; flex-direction:column; align-items:center; padding:8px 4px 10px; gap:7px; min-height:125px; }
.detail-dialog .picture-option img { display:block; width:100%; height:78px; object-fit:contain; background:#fff; border-radius:4px; }
.detail-dialog .picture-option > span { font-size:14px; line-height:1.4; font-weight:500; }
.detail-dialog .picture-option.selected { background:var(--page); color:var(--theme); border-color:var(--theme); box-shadow:inset 0 0 0 1px var(--theme); }
.detail-dialog .picture-option.selected > span { font-weight:650; }
.detail-dialog .picture-check { position:absolute; top:6px; right:6px; display:none; width:20px; height:20px; border-radius:50%; background:var(--theme); }
.detail-dialog .picture-check svg { display:block; width:14px; height:14px; margin:3px; color:#fff; }
.detail-dialog .picture-option.selected .picture-check { display:block; }
.detail-change-note { margin:8px 0 0; min-height:18px; color:var(--muted); font-size:12px; line-height:1.5; }
.detail-change-note:empty { display:none; }
.detail-more { border-top:1px solid var(--line); margin-top:6px; }
.detail-more summary { min-height:44px; padding:12px 0; font-size:14px; color:var(--muted); cursor:pointer; }
.detail-more .spec-item { display:grid; grid-template-columns:70px minmax(0,1fr); gap:12px; }
.detail-actions { flex:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(145px,1.15fr); align-items:center; gap:12px; padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:#fff; }
.detail-actions > div { min-width:0; }
.detail-actions span { display:block; color:var(--muted); font-size:12px; line-height:1.5; }
.detail-actions strong { display:block; font-size:14px; line-height:1.5; font-weight:650; overflow-wrap:anywhere; }
.detail-actions .detail-inquire { width:100%; min-height:48px; padding:10px 12px; border:0; border-radius:8px; font-size:17px; font-weight:650; cursor:pointer; }
.service-product-context { margin:0 20px 12px; padding:14px; border-radius:8px; background:var(--page); }
.service-product-context > span { font-size:12px; color:var(--muted); }
.service-product-context p { margin:6px 0 10px; white-space:pre-line; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.service-product-context button { min-height:44px; padding:7px 12px; background:#fff; border:1px solid var(--line); border-radius:6px; color:var(--theme); font:inherit; font-size:14px; cursor:pointer; }
.service-product-context #serviceCopyStatus:empty { display:none; }
.detail-dialog [hidden],.service-product-context[hidden] { display:none!important; }
@media(max-width:700px) {
  body[data-catalog-style="white"] .detail-dialog,
  body[data-catalog-style="white"] .detail-dialog[data-has-variants="true"] { position:fixed; inset:0; margin:0; width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .detail-dialog .detail-header { padding-top:env(safe-area-inset-top,0px); }
  .detail-dialog .detail-scroll { scrollbar-width:none; }
  .detail-dialog .detail-scroll::-webkit-scrollbar { display:none; }
  .detail-dialog .detail-copy { padding:16px 18px 16px; }
  .detail-dialog .detail-copy h2 { font-size:27px; }
  /* Give the standardized product image the full phone width without cropping it. */
  .detail-overview { display:block; margin:10px 0 12px; }
  body .detail-dialog .detail-image-wrap,body .detail-dialog[data-has-variants="true"] .detail-image-wrap { height:min(42dvh,360px); }
  .detail-dialog .detail-specs { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr) minmax(0,1fr); gap:0; margin:8px 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .detail-dialog #detailSpecs > .spec-item { min-width:0; min-height:70px; padding:9px 10px; gap:4px; border:0; border-right:1px solid var(--line); }
  .detail-dialog #detailSpecs > .spec-item:first-child { padding-left:0; }
  .detail-dialog #detailSpecs > .spec-item[data-label="装箱数"] { border-right:0; padding-right:0; }
  .detail-dialog #detailSpecs .spec-label { font-size:12px; }
  .detail-dialog #detailSpecs .spec-value { font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
  .detail-dialog #detailSpecs .spec-item[data-label="容量"] { margin:0; padding:9px 10px 9px 0; border-radius:0; background:none; }
  .detail-dialog #detailSpecs .spec-item[data-label="容量"] .spec-value { font-size:18px; line-height:1.35; white-space:normal; }
  /* Dense two-level series: keep the full source image, but bring the first
     capacity choices onto the initial phone screen. Plain products are unchanged. */
  .detail-dialog[data-dense-variants="true"] .detail-copy { padding-top:10px; }
  .detail-dialog[data-dense-variants="true"] .detail-copy h2 { font-size:24px; margin-bottom:2px; }
  .detail-dialog[data-dense-variants="true"] .detail-code { font-size:13px; }
  .detail-dialog[data-dense-variants="true"] .detail-overview { margin:4px 0 8px; }
  body .detail-dialog[data-dense-variants="true"] .detail-image-wrap { height:min(29dvh,236px); }
  .detail-dialog[data-dense-variants="true"] #detailSpecs > .spec-item { min-height:62px; padding-block:7px; }
  .detail-dialog[data-dense-variants="true"] .detail-selection { display:none; }
  .detail-dialog[data-dense-variants="true"] .variant-picker { margin-top:8px; padding-top:10px; }
  .detail-dialog[data-dense-variants="true"] .variant-group { margin-top:12px; }
  .detail-dialog[data-dense-variants="true"] .variant-label { margin-bottom:7px; font-size:16px; }
  .detail-dialog[data-dense-variants="true"] .picture-option { min-height:101px; padding:5px 4px 7px; gap:4px; }
  .detail-dialog[data-dense-variants="true"] .picture-option img { height:61px; }
  .detail-dialog[data-dense-variants="true"] .picture-option > span { font-size:13px; }
}
@media(max-width:374px) {
  .detail-dialog .detail-copy { padding-inline:14px; }
  .detail-dialog .detail-copy h2 { font-size:23px; }
  .detail-dialog .detail-specs { grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr); }
  .detail-dialog #detailSpecs > .spec-item { padding-inline:6px; }
  .detail-dialog .picture-option > span { font-size:13px; }
  .detail-actions { padding-inline:14px; grid-template-columns:minmax(0,1fr) minmax(135px,1fr); }
}
@media(prefers-reduced-motion:reduce) { .detail-dialog .variant-option { transition:none; } }

/* The source photograph is enlarged separately from the detail-page fitting. */
.detail-image-open { position:absolute; inset:0; z-index:1; width:100%; height:100%; display:flex; align-items:flex-end; justify-content:flex-end; padding:12px; border:0; background:transparent; cursor:zoom-in; touch-action:manipulation; }
.detail-image-open span { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 13px; border-radius:22px; background:rgba(30,55,43,.88); color:#fff; font-size:13px; font-weight:600; box-shadow:0 2px 12px #0002; }
.detail-image-open svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.detail-image-open:active span { background:#193f2b; }
.detail-image-open:disabled { visibility:hidden; cursor:default; }
.detail-image-open:focus-visible { outline:3px solid var(--theme); outline-offset:-4px; }
.detail-zoom-dialog { width:min(1080px,96vw); height:min(920px,94dvh); max-width:none; max-height:none; padding:0; border:0; border-radius:14px; overflow:hidden; color:#fff; background:#111815; box-shadow:0 24px 72px #0008; }
.detail-zoom-dialog[open] { display:flex; flex-direction:column; }
.detail-zoom-dialog::backdrop { background:rgba(0,0,0,.82); }
.detail-zoom-header { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:8px 16px; }
.detail-zoom-header strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:600; }
.detail-zoom-close,.detail-zoom-controls button { display:grid; place-items:center; flex:none; min-width:44px; min-height:44px; border:1px solid #ffffff40; border-radius:8px; background:#ffffff12; color:#fff; cursor:pointer; }
.detail-zoom-close svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.detail-zoom-stage { position:relative; flex:1; min-height:0; overflow:hidden; background:#19211c; touch-action:none; cursor:grab; }
.detail-zoom-stage:active { cursor:grabbing; }
.detail-zoom-stage img { position:absolute; left:50%; top:50%; max-width:none; max-height:none; object-fit:contain; user-select:none; -webkit-user-drag:none; pointer-events:none; visibility:hidden; transform-origin:center; }
.detail-zoom-stage img[data-ready="true"] { visibility:visible; }
.detail-zoom-stage p { position:absolute; inset:0; display:grid; place-items:center; margin:0; color:#fff; font-size:15px; pointer-events:none; }
.detail-zoom-stage p[hidden] { display:none; }
.detail-zoom-controls { display:flex; justify-content:center; align-items:center; gap:10px; min-height:64px; padding:8px 16px; }
.detail-zoom-controls button { font-size:24px; line-height:1; }
.detail-zoom-controls #detailZoomReset { min-width:76px; font-size:14px; }
.detail-zoom-controls button:disabled { opacity:.4; cursor:default; }
.detail-zoom-close:active,.detail-zoom-controls button:not(:disabled):active { background:#ffffff30; }
.detail-zoom-close:focus-visible,.detail-zoom-controls button:focus-visible { outline:3px solid #a2d9b0; outline-offset:2px; }
@media(max-width:700px) { .detail-zoom-dialog { position:fixed; inset:0; width:100vw; height:100dvh; margin:0; border-radius:0; } .detail-zoom-header { padding-top:calc(8px + env(safe-area-inset-top,0px)); } .detail-zoom-controls { padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); } }

/* Detail refresh: the image and key facts remain on the page; choices move
   into a separate, scrollable sheet without changing the underlying SKUs. */
.detail-dialog .detail-selection {
  display:flex; align-items:center; justify-content:space-between; width:100%; min-height:54px;
  margin:12px 0 0; padding:11px 14px; border:1px solid #d9e4da; border-radius:10px;
  background:#f3f8f3; color:var(--theme); font:inherit; font-size:15px;
  text-align:left; cursor:pointer;
}
.detail-dialog .detail-selection:hover { border-color:var(--theme); }
.detail-dialog .detail-selection:focus-visible { outline:3px solid var(--theme); outline-offset:2px; }
.detail-selection #detailSelectionValue { min-width:0; font-weight:650; overflow-wrap:anywhere; }
.detail-selection-affordance { flex:none; display:flex; align-items:center; gap:5px; margin-left:10px; font-size:13px; white-space:nowrap; }
.detail-selection-affordance span { font-size:25px; line-height:18px; }
.detail-inline-specs { display:flex; align-items:center; gap:12px; min-height:42px; padding:9px 2px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.4; }
.detail-inline-specs span { color:var(--muted); }
.detail-inline-specs strong { font-weight:600; }
.detail-dialog .detail-copy h2 { font-size:25px; }
.detail-dialog .detail-code { font-size:14px; }
.detail-load-status { padding:20px; color:var(--muted); font-size:15px; }
.detail-load-status p { margin:0 0 14px; }
.detail-loading-card { display:grid; gap:12px; max-width:520px; }
.detail-loading-card div { width:100%; aspect-ratio:1.3; border-radius:8px; background:#edf1ec; }
.detail-loading-card span { display:block; width:100%; height:22px; border-radius:5px; background:#edf1ec; }
.detail-loading-card span:last-child { width:65%; }
.detail-dialog[data-loading="error"] .detail-loading-card { display:none; }
.detail-load-status button { min-width:100px; min-height:44px; padding:8px 14px; border:1px solid var(--theme); border-radius:8px; background:#fff; color:var(--theme); font:inherit; cursor:pointer; }
.detail-dialog[data-loading="true"] .detail-copy,.detail-dialog[data-loading="error"] .detail-copy { display:none; }
.detail-dialog[data-loading="true"] .detail-actions,.detail-dialog[data-loading="error"] .detail-actions { visibility:hidden; }
.detail-dialog .detail-specs .spec-value { font-size:15px; }
.detail-dialog .detail-specs .spec-label { font-size:13px; }
.detail-image-open { padding:10px; }
.detail-image-open span { min-height:40px; padding:0 10px; background:rgba(255,255,255,.94); color:#294b39; border:1px solid #dce7dc; box-shadow:0 2px 9px #0001; }
.detail-image-open:active span { background:#eaf2e9; }

.variant-sheet { width:min(560px,calc(100vw - 24px)); max-width:none; max-height:min(85dvh,780px); padding:0; border:0; border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 18px 70px #0004; }
.variant-sheet[open] { display:flex; flex-direction:column; }
.variant-sheet::backdrop { background:rgba(20,36,27,.5); }
.variant-sheet-handle { flex:none; width:40px; height:4px; margin:9px auto 2px; border-radius:3px; background:#cbd7cd; }
.variant-sheet-header { flex:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px 8px; }
.variant-sheet-header span { display:block; color:var(--muted); font-size:12px; }
.variant-sheet-header h2 { margin:2px 0 0; font-size:21px; line-height:1.3; }
.variant-sheet-header button { flex:none; width:44px; height:44px; border:0; border-radius:50%; background:#f0f4f0; color:var(--ink); font:inherit; font-size:27px; line-height:1; cursor:pointer; }
.variant-sheet-current { flex:none; margin:2px 20px 0; padding:10px 12px; border-radius:8px; background:#f3f8f3; color:var(--theme); font-size:14px; font-weight:600; line-height:1.45; }
.variant-sheet-note { flex:none; margin:8px 20px 0; padding:9px 11px; border-radius:7px; background:#fff6e6; color:#7c5620; font-size:13px; line-height:1.45; }
.variant-sheet .variant-picker { flex:1; min-height:0; margin:0; padding:14px 20px; overflow-y:auto; overscroll-behavior:contain; }
.variant-sheet .variant-group { margin:18px 0 0; }
.variant-sheet .variant-group:first-child { margin-top:0; }
.variant-sheet .variant-label { display:block; margin:0 0 9px; font-size:16px; font-weight:650; }
.variant-sheet .variant-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.variant-sheet .variant-values.has-picture-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.variant-sheet .variant-option { min-width:0; width:100%; min-height:48px; padding:9px 4px; border:1px solid #dce1dd; border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-size:14px; touch-action:manipulation; cursor:pointer; }
.variant-sheet .variant-option.selected { border-color:var(--theme); background:var(--theme); color:#fff; font-weight:650; }
.variant-sheet .variant-option:disabled { background:#f7f8f6; color:#8b938d; border-color:#e6eae6; cursor:not-allowed; }
.variant-sheet .variant-option:focus-visible { outline:3px solid var(--theme); outline-offset:2px; }
.variant-sheet .picture-option { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:126px; padding:7px 4px 9px; }
.variant-sheet .picture-option img { display:block; width:100%; height:82px; object-fit:contain; background:#fff; border-radius:4px; }
.variant-sheet .picture-option > span:last-child { font-size:14px; line-height:1.35; }
.variant-sheet .picture-option.selected { background:#edf5ee; color:var(--theme); box-shadow:inset 0 0 0 1px var(--theme); }
.variant-sheet .picture-check { position:absolute; top:6px; right:6px; display:none; width:20px; height:20px; border-radius:50%; background:var(--theme); }
.variant-sheet .picture-check svg { display:block; width:14px; height:14px; margin:3px; color:#fff; }
.variant-sheet .picture-option.selected .picture-check { display:block; }
.variant-sheet .variant-option:disabled img { opacity:.48; }
.variant-sheet-hint { flex:none; margin:0; padding:2px 20px 10px; color:var(--muted); font-size:12px; line-height:1.5; }
.variant-sheet-actions { flex:none; padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:#fff; }
.variant-sheet-actions button { width:100%; min-height:48px; border:0; border-radius:8px; background:var(--theme); color:#fff; font:inherit; font-size:16px; font-weight:650; cursor:pointer; }
.variant-sheet [hidden] { display:none!important; }
.variant-sheet-header button:focus-visible,.variant-sheet-actions button:focus-visible { outline:3px solid var(--theme); outline-offset:2px; }

/* White image canvas avoids the large dark letterboxes around the source. */
.detail-zoom-dialog { color:#20342a; background:#f8faf7; }
.detail-zoom-dialog::backdrop { background:rgba(20,36,27,.76); }
.detail-zoom-stage { background:#fff; }
.detail-zoom-stage p { color:#455d4a; }
.detail-zoom-close,.detail-zoom-controls button { border-color:#d8e4da; background:#fff; color:#20342a; }
.detail-zoom-close:active,.detail-zoom-controls button:not(:disabled):active { background:#eaf2e9; }

@media(max-width:700px) {
  .detail-dialog[data-dense-variants="true"] .detail-copy { padding-top:16px; }
  .detail-dialog[data-dense-variants="true"] .detail-copy h2 { font-size:25px; margin-bottom:5px; }
  .detail-dialog[data-dense-variants="true"] .detail-code { font-size:14px; }
  .detail-dialog[data-dense-variants="true"] .detail-overview { margin:10px 0 12px; }
  body .detail-dialog[data-dense-variants="true"] .detail-image-wrap { height:min(39dvh,330px); }
  .detail-dialog[data-dense-variants="true"] .detail-selection { display:flex; }
  .detail-dialog .detail-specs { grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr) minmax(0,1fr); }
  .detail-dialog #detailSpecs .spec-label { font-size:13px; }
  .detail-dialog #detailSpecs .spec-value { font-size:15px; }
  .detail-dialog #detailSpecs .spec-item[data-label="容量"] .spec-value { font-size:19px; }
  .variant-sheet { position:fixed; inset:auto 0 0; width:100vw; max-height:88dvh; margin:0; border-radius:18px 18px 0 0; }
}
@media(max-width:374px) {
  .variant-sheet .variant-picker { padding-inline:14px; }
  .variant-sheet .variant-values { gap:6px; }
  .variant-sheet .variant-option { font-size:13px; }
  .detail-selection-affordance { font-size:12px; }
}