/* Both the series catalogue and the SKU form share the page frame. */
body:has(.purchase-workspace) {
  --shop-blue: #165dff;
  --shop-blue-dark: #1049c9;
  --shop-ink: #202b3d;
  --shop-muted: #68758b;
  --shop-border: #e2e5ed;
  --shop-canvas: #f4f5f8;
  --shop-rail-width: 250px;
  --shop-header-height: 64px;
  --shop-path-height: 48px;
  --shop-gutter: 14px;
}
body:has(.purchase-workspace) .nz-footer { display: none; }
.purchase-workspace {
  color: var(--shop-ink);
  background: var(--shop-canvas);
  font-size: 13px;
  line-height: 1.55;
  min-height: calc(100dvh - var(--shop-header-height));
}
.purchase-workspace :where(h1,h2,h3,p,dl,dd) { margin: 0; }
.shop-path {
  display: flex;
  align-items: center;
  gap: 17px;
  height: var(--shop-path-height);
  padding: 0 18px;
  position: sticky;
  top: var(--shop-header-height);
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--shop-border);
  color: var(--shop-muted);
  font-size: 12px;
}
.shop-path a { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: inherit; }
.shop-path strong { color: var(--shop-ink); font-size: 14px; }
.shop-path a:hover { color: var(--shop-blue-dark); }
.shop-path > a .nz-i-arrow-right, .shop-details[aria-expanded='true'] .nz-i-chevron-down { transform: rotate(180deg); }
.shop-path strong a { display: inline; }
.shop-path span { margin-left: 8px; }
.shop-layout {
  display: grid;
  grid-template-columns: var(--shop-rail-width) minmax(0, 1fr);
  min-height: calc(100dvh - var(--shop-header-height) - var(--shop-path-height));
  align-items: start;
}
.shop-rail {
  position: sticky;
  top: calc(var(--shop-header-height) + var(--shop-path-height));
  height: calc(100dvh - var(--shop-header-height) - var(--shop-path-height));
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--shop-border);
  background: #fff;
}
.shop-main { min-width: 0; padding: 20px var(--shop-gutter); }
.shop-main:has(> .shop-panel) {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--shop-header-height) - var(--shop-path-height));
  padding-bottom: 18px;
}
.shop-notice {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px 13px;
  border: 1px solid #bfd3ff;
  border-left-width: 3px;
  border-radius: 4px;
  color: #23508e;
  background: #eef5ff;
  font-size: 12px;
}
.shop-notice strong { flex: none; color: #17418a; }
.shop-notice i { color: var(--shop-blue); }
.shop-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  background: #fff;
}
.shop-title {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--shop-border);
}
.shop-title h1 { font-weight: 700; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.shop-title a { flex: none; color: var(--shop-muted); font-size: 12px; text-decoration: none; }
.shop-title a:hover { color: var(--shop-blue-dark); }
.shop-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  scroll-padding-block: 14px;
}
.shop-row {
  display: grid;
  grid-template-columns: 114px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding-block: 14px;
}
.shop-label { padding-top: 8px; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.shop-control { min-width: 0; }
.shop-models, .shop-cycle-list, .shop-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-models { padding: 14px; background: #f0f1f6; }
.shop-chip, .shop-fixed {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 7px 12px;
  background: #f0f1f6;
  color: #343e50;
  font: inherit;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.shop-chip { cursor: pointer; }
.shop-models .shop-chip { background: #fff; color: #465267; }
.shop-models .shop-chip:disabled:not(.is-on) { color: #8993a3; background: transparent; cursor: not-allowed; }
.shop-chip:not(:disabled):hover { border-color: #8aaafd; color: var(--shop-blue-dark); }
.shop-options .shop-chip, .shop-cycle-list .shop-chip, .shop-fixed { min-width: 70px; }
.shop-chip.is-on, .shop-fixed, .shop-chip.is-on:not(:disabled):hover { background: var(--shop-blue); color: #fff; }
.shop-spec-line { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; padding: 12px 0; font-size: 13px; color: var(--shop-muted); }
.shop-spec-line span { overflow-wrap: anywhere; }
.shop-control :is(.shop-input,input[type='number'],select:not([data-image-versions])) {
  max-width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #cdd6e3;
  border-radius: 0;
  color: var(--shop-ink);
  background: #fff;
  font: inherit;
}
.shop-control .shop-input[type='text'] { width: min(310px,100%); }
.shop-control input[type='number'] { width: 100px; }
.shop-number { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-number input:invalid { border-color: #bf3f34; }
.shop-note,.shop-number small,.shop-hint { display: block; color: var(--shop-muted); font-size: 12px; }
.shop-hint,.shop-note { margin-top: 5px; }
.shop-checkout-bar {
  position: relative;
  z-index: 9;
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 17px 20px 15px;
  color: var(--shop-ink);
  border-top: 1px solid var(--shop-border);
  background: #fff;
  box-shadow: 0 -4px 12px #202f420a;
}
.shop-cost,.shop-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-cost { align-items: baseline; flex: 1 1 auto; }
.shop-cost label { font-size: 13px; font-weight: 600; }
.shop-cost strong { color: #d83b27; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.shop-cost small { font-size: 12px; color: var(--shop-muted); }
.shop-bar-actions { margin-left: auto; }
.shop-checkout-bar :is(.shop-order,.shop-add,.shop-details) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 21px;
  gap: 5px;
  border: 0;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}
.shop-checkout-bar .shop-order { background: var(--shop-blue); color: white; }
.shop-checkout-bar .shop-order:hover:not(:disabled) { background: var(--shop-blue-dark); }
.shop-checkout-bar .shop-add { background: #edf2ff; color: var(--shop-blue-dark); }
.shop-checkout-bar .shop-details { padding-inline: 8px; background: transparent; font-size: 12px; color: var(--shop-muted); }
.shop-checkout-bar .shop-details:is(:hover,[aria-expanded='true']) { color: var(--shop-blue-dark); }
.shop-checkout-bar button:disabled { cursor: not-allowed; opacity: .6; }
.shop-agreement { display: flex; align-items: baseline; gap: 7px; flex: 1 0 100%; font-size: 12px; }
.shop-agreement input { accent-color: var(--shop-blue); margin: 0; transform: translateY(2px); }
.shop-agreement a,.shop-feedback :is(a,button) { color: var(--shop-blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.shop-feedback { flex: 1 0 100%; color: #983729; font-size: 12px; }
.shop-feedback button { border: 0; background: transparent; font: inherit; }
.shop-breakdown {
  position: absolute;
  right: 18px;
  bottom: calc(100% + 4px);
  width: min(380px,calc(100% - 28px));
  max-height: 49dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 15px 18px;
  border: 1px solid var(--shop-border);
  background: white;
  box-shadow: 0 6px 24px #1b2c4926;
}
.shop-breakdown[hidden] { display: none; }
.shop-breakdown h2 { font-size: 15px; }
.shop-breakdown dl > div { display: grid; grid-template-columns: minmax(65px,.6fr) minmax(0,1.4fr); gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--shop-border); }
.shop-breakdown dt { color: var(--shop-muted); }
.shop-breakdown dd { text-align: right; overflow-wrap: anywhere; }
.shop-detail-total dd { font-weight: 700; color: #c83d29; }
.shop-policy { flex: none; margin-top: 12px; border: 1px solid #efcf94; border-left-width: 3px; border-radius: 4px; background: #fff8ee; color: #794c16; }
.shop-policy summary { display: flex; align-items: baseline; gap: 9px; padding: 10px 13px; cursor: pointer; list-style: none; font-size: 12px; }
.shop-policy summary::-webkit-details-marker { display: none; }
.shop-policy summary strong { flex: none; }
.shop-policy summary > i:last-child { margin-left: auto; }
.shop-policy[open] summary > i:last-child { transform: rotate(180deg); }
.shop-policy p { padding: 0 14px 10px 35px; font-size: 12px; }
.shop-policy a { color: inherit; text-decoration: underline; }
[data-theme='dark'] .shop-policy { color: #f2ce96; background: #322a20; border-color: #59462c; }
[data-theme='dark'] .shop-checkout-bar .shop-add { color: var(--shell-link); background: var(--shell-soft); }
[data-theme='dark'] .shop-notice strong { color: #c2d6fd; }
[data-theme='dark'] .shop-fixed { background: #315fd7; color: #fff; }

@media (max-width: 1350px) {
  body:has(.purchase-workspace) { --shop-rail-width: 210px; }
  .shop-row { grid-template-columns: 94px minmax(0,1fr); }
}
@media (max-width: 1000px) {
  body:has(.purchase-workspace) { --shop-rail-width: 178px; --shop-gutter: 10px; }
  .shop-row { grid-template-columns: 75px minmax(0,1fr); gap: 10px; }
  .shop-body { padding: 12px 15px; }
}
@media (max-width: 800px) {
  body:has(.purchase-workspace) { --shop-path-height: 40px; --shop-rail-width: 0px; }
  .shop-layout { display: block; }
  .shop-path { gap: 12px; padding-inline: 12px; }
  .shop-path span { display: none; }
  .shop-rail { position: static; width: auto; height: auto; overflow: visible; border: 0; }
  .shop-main { padding: 10px; }
  .shop-main:has(> .shop-panel) { display: block; height: auto; padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
  .shop-panel { display: block; }
  .shop-body { overflow: visible; }
  .shop-checkout-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 12px max(8px,env(safe-area-inset-bottom)); gap: 4px 8px; }
  .shop-policy { margin-top: 8px; }
  .shop-breakdown { right: 12px; }
}
@media (max-width: 540px) {
  .shop-main:has(> .shop-panel) { padding-bottom: calc(162px + env(safe-area-inset-bottom)); }
  .shop-row { grid-template-columns: minmax(0,1fr); gap: 5px; padding-block: 10px; }
  .shop-label { padding: 0; font-weight: 600; }
  .shop-models { padding: 7px; }
  .shop-title { min-height: 47px; padding: 9px 12px; }
  .shop-title h1 { font-size: 16px; }
  .shop-body { padding: 4px 12px 16px; }
  .shop-cost { gap: 5px; }
  .shop-cost strong { font-size: 23px; }
  .shop-bar-actions { gap: 5px; }
  .shop-checkout-bar :is(.shop-order,.shop-add,.shop-details) { min-height: 36px; padding: 5px 9px; font-size: 12px; }
  .shop-checkout-bar .shop-details { padding: 5px 2px; }
  .shop-notice { gap: 5px; padding: 8px 9px; }
  .shop-policy summary { display: grid; grid-template-columns: 14px minmax(0,1fr) 14px; gap: 2px 7px; }
  .shop-policy summary strong { grid-column: 2; }
  .shop-policy summary span { grid-row: 2; grid-column: 2; }
  .shop-policy summary > i:last-child { grid-row: 1; grid-column: 3; }
  .shop-spec-line { gap: 2px 9px; padding: 8px 0; font-size: 12px; }
}
@media (max-height: 540px) and (min-width: 801px) {
  .shop-main:has(> .shop-panel) { height: auto; }
  .shop-body { overflow: visible; }
  .shop-checkout-bar { position: sticky; bottom: 0; }
}