/* L4 · model detail layout */
.layout-model-detail {
  --detail-divider: var(--border) solid color-mix(in oklab, var(--line) 45%, var(--surface));
  --detail-rail-inset: var(--space-lg);
  --detail-gallery-gap: calc(var(--space-2xl) + var(--space-sm));
  --detail-section-gap: var(--space-2xl);
  --detail-thumb-size: var(--space-4xl);
  --detail-photo-surface: color-mix(in oklab, var(--surface) 65%, var(--page-background));
  --detail-accent: var(--bento-blue-accent);
  --detail-accent-ink: var(--bento-blue-ink);
  --detail-accent-surface: var(--bento-blue-tint);
  background: var(--page-background);
}

.layout-customer-model-detail {
  min-width: 0;
  max-width: none;
  background: var(--page-background);
}

.layout-model-detail__wrap {
  max-width: var(--customer-content-max);
  margin-inline: auto;
  padding-inline: var(--customer-gutter);
}

.layout-model-detail__reading {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  align-items: start;
  gap: var(--space-2xl);
  margin-top: var(--detail-section-gap);
  padding-block-end: var(--space-3xl);
}

.layout-model-detail__main { display: grid; gap: var(--detail-section-gap); min-width: 0; }
.layout-model-detail :is(#reviews, #related, #specifications, #description, #technical-data) { scroll-margin-top: var(--space-xl); }
.layout-model-detail .ui-breadcrumb { padding-block: var(--space-lg); }

/* L3 · opening gallery and purchase configuration */
.section-model-purchase {
  display: grid;
  grid-template-columns: calc(var(--detail-thumb-size) + var(--space-md)) minmax(0, 1fr) var(--detail-gallery-gap) minmax(0, 1fr);
  align-items: start;
}

.section-model-gallery__thumbs { display: grid; gap: var(--space-sm); width: var(--detail-thumb-size); }
.section-model-gallery__thumb {
  width: var(--detail-thumb-size);
  height: var(--detail-thumb-size);
  padding: var(--space-xs);
  background: var(--surface);
  border: var(--detail-divider);
}

.section-model-gallery__thumb[aria-pressed=true] { border-color: var(--detail-accent); }
.section-model-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.section-model-gallery__photo {
  grid-column: 2;
  display: grid;
  overflow: hidden;
  margin: 0;
  border: var(--detail-divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.section-model-gallery__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 41.75rem;
  object-fit: contain;
}
.section-model-purchase__info {
  grid-column: 4;
  min-width: 0;
  display: grid;
  gap: var(--space-sm);
}
.section-model-purchase__code { font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: .08em; color: var(--muted); }
.section-model-purchase__info h1 { margin-block: var(--space-xs); font-size: clamp(1.5rem, 2.3vw, var(--text-2xl)); line-height: 1.15; }
.section-model-purchase__info header > .ui-muted { font-size: var(--text-sm); }
.section-model-purchase__price { padding-block: var(--space-xs); }
.section-model-purchase__shipping, .section-model-payment {
  padding-block: var(--space-sm);
  border-top: var(--detail-divider);
}
.section-model-purchase__price .ui-price { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.section-model-purchase__price .ui-price > span { order: -1; }
.section-model-purchase__price .ui-price > strong { color: var(--detail-accent-ink); font-size: var(--text-xl); line-height: 1.15; }
.section-model-purchase__shipping { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.section-model-purchase__shipping > span { margin-inline-start: auto; }
.section-model-payment { margin-top: var(--space-sm); }
.section-model-payment h2 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.section-model-payment summary {
  display: grid;
  grid-template-columns: 2rem minmax(5rem, max-content) minmax(0, 1fr) var(--space-md);
  align-items: center;
  gap: var(--space-sm);
  padding-block: calc(var(--space-xs) / 2);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
}
.section-model-payment summary::-webkit-details-marker { display: none; }
.section-model-payment summary > span { color: var(--muted); }
.section-model-payment summary > .icon:last-child { width: var(--space-md); }
.section-model-payment details[open] summary > .icon:last-child { rotate: 90deg; }
.section-model-payment details > p {
  padding: var(--space-xs) 0 var(--space-sm) var(--space-xl);
  color: var(--muted);
  font-size: var(--text-sm);
}
.section-model-payment summary > .icon:first-child,
.section-model-purchase__shipping > .icon {
  width: 2rem;
  height: var(--space-xl);
  background: url("/assets/customer/product-detail/purchase-guide-icons.webp") no-repeat 0 center / 400% auto;
}
.section-model-payment summary > .icon:first-child use,
.section-model-purchase__shipping > .icon use { visibility: hidden; }
.section-model-payment details:nth-of-type(2) summary > .icon:first-child { background-position-x: 33.333%; }
.section-model-payment details:nth-of-type(3) summary > .icon:first-child { background-position-x: 66.667%; }
.section-model-purchase__shipping > .icon { background-position-x: 100%; }

.section-model-config { display: grid; gap: var(--space-sm); }
.section-model-config:not(.section-model-config--compact) > :is(.section-model-config__options, .section-model-config__quantity) {
  padding: var(--space-sm) var(--space-md);
  border: var(--detail-divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.section-model-config__options + .section-model-config__quantity { margin-top: var(--space-sm); }

.section-model-config__quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  border-top: var(--detail-divider);
  padding-top: var(--space-sm);
  font-size: var(--text-sm);
}
.section-model-quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: var(--detail-divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  white-space: nowrap;
}
.section-model-quantity strong {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: var(--control-sm);
  min-height: var(--space-2xl);
  padding-inline: var(--space-xs);
  border-inline: var(--detail-divider);
  font-variant-numeric: tabular-nums;
}
.section-model-quantity > .ui-button {
  width: var(--space-2xl);
  height: var(--space-2xl);
  min-height: var(--space-2xl);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--detail-accent-ink);
}
.section-model-quantity > .ui-button:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.section-model-quantity > .ui-button:last-child { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.section-model-quantity > .ui-button .icon { width: var(--space-lg); height: var(--space-lg); }
.section-model-quantity > .ui-button:hover:not(:disabled) { background: var(--detail-accent-surface); }
.section-model-quantity > .ui-button:disabled { opacity: var(--disabled-opacity); }
.section-model-config__options { display: grid; gap: var(--space-xs); border-top: var(--detail-divider); padding-top: var(--space-sm); }
.section-model-config__options h3 { margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.section-model-option {
  grid-template-columns: calc(var(--space-4xl) + var(--space-md)) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
}

.section-model-option.ui-option-row--selected {
  background: transparent;
  color: var(--detail-accent-ink);
}
.section-model-option > img {
  width: 100%;
  height: calc(var(--space-3xl) - var(--space-xs));
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.section-model-option > div:not(.ui-quantity) { display: grid; }
.section-model-option small { color: var(--muted); font-variant-numeric: tabular-nums; }
.section-model-option > .ui-quantity { grid-column: 3; }
.section-model-config__total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-xs); }
.section-model-config__total > div { display: grid; text-align: right; }
.section-model-config__total > div > strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: var(--detail-accent-ink); letter-spacing: -.03em; }
.section-model-config__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.section-model-config__actions button[aria-haspopup=dialog] {
  color: var(--surface);
  background: var(--detail-accent);
  border-color: var(--detail-accent);
}
.section-model-config__actions button[aria-haspopup=dialog]:hover {
  background: var(--detail-accent-ink);
  border-color: var(--detail-accent-ink);
}
/* L3 · reviews, related items, specifications, and description */
.section-model-showcase { margin-top: var(--detail-section-gap); }
.section-model-showcase > .layout-model-detail__wrap {
  display: grid;
  gap: var(--detail-section-gap);
}
.section-model-heading { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.section-model-heading h2 { font-size: var(--text-xl); }
.section-model-heading p { font-size: var(--text-sm); }
.section-model-reviews .ui-empty {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: fit-content;
  max-width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: var(--detail-divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  text-align: left;
  font-size: var(--text-sm);
}
.section-model-reviews .ui-empty > .icon { width: var(--space-lg); height: var(--space-lg); color: var(--detail-accent); }
.section-model-related__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg); }
.section-model-related__grid > div { min-width: 0; }
.section-model-related .ui-product-card__image img[src*="/freezer-journal/"] { object-fit: cover; object-position: left center; }

.section-model-specs__table {
  overflow: hidden;
  padding: 0;
  border: var(--detail-divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.section-model-specs .ui-table :is(thead th:first-child, tbody th) { width: 35%; }
.section-model-specs .ui-table :is(th, td) { padding: var(--space-sm) var(--space-md); border-bottom: var(--detail-divider); text-align: left; }
.section-model-specs .ui-table thead th {
  background: color-mix(in oklab, var(--detail-accent-surface) 65%, var(--surface));
  color: var(--detail-accent-ink);
}
.section-model-specs .ui-table tbody tr:last-child > * { border-bottom: 0; }
.section-model-specs .ui-table tbody th { background: transparent; color: var(--muted); }

.section-model-story__disclosure > summary { cursor: pointer; list-style: none; }
.section-model-story__disclosure > summary::-webkit-details-marker { display: none; }
.section-model-story__disclosure:not([open]) .section-model-story__collapse,
.section-model-story__disclosure[open] .section-model-story__expand { display: none; }
.section-model-story__disclosure[open] > summary .icon { rotate: 180deg; }
.section-model-story__hero {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.section-model-story__hero > div { display: grid; gap: var(--space-sm); }
.section-model-story__hero h3 { max-width: 12ch; font-size: clamp(1.75rem, 3.15vw, 2.75rem); line-height: 1.12; word-break: keep-all; }
.section-model-story :is(.section-model-story__hero, .section-model-story__scene-copy) .section-model-purchase__code { color: var(--detail-accent); }
.section-model-story__hero p:last-child { max-width: 34ch; font-size: var(--text-sm); word-break: keep-all; }
.section-model-story__hero > img { width: 100%; height: 20rem; padding: 0 var(--space-xl) var(--space-lg); object-fit: contain; mix-blend-mode: multiply; }
.section-model-story :is(.section-model-story__highlights, .section-model-story__scenes, .section-model-story__parts, .section-model-story__notes) {
  margin-top: var(--space-2xl);
}
.section-model-story__highlights { padding-top: var(--space-2xl); border-top: var(--detail-divider); }
.section-model-story__highlights h3,
.section-model-story__parts h3 { font-size: var(--text-xl); }
.section-model-story__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.section-model-story__points li {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  min-height: 8rem;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--detail-photo-surface);
}
.section-model-story__points li:first-child { grid-row: span 2; }
.section-model-story__points img {
  width: 100%;
  height: 7rem;
  align-self: center;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.section-model-story__points li:first-child img { height: 15rem; }
.section-model-story__scene {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: var(--space-xl);
  min-height: 16rem;
  padding-block: var(--space-xl);
  border-block-start: var(--detail-divider);
}
.section-model-story__scene:nth-child(even) .section-model-story__scene-copy { grid-column: 2; grid-row: 1; }
.section-model-story__scene-copy { display: grid; gap: var(--space-sm); }
.section-model-story__scene-copy h3 { font-size: var(--text-xl); line-height: var(--leading-heading); word-break: keep-all; }
.section-model-story__scene-copy p:last-child { max-width: 35ch; color: var(--muted); word-break: keep-all; }
.section-model-story__scene-media { min-width: 0; text-align: center; }
.section-model-story__scene-media img { width: 100%; height: 13rem; object-fit: contain; mix-blend-mode: multiply; }
.section-model-story__scene-media video { display: block; width: 100%; max-height: 26rem; border-radius: var(--radius-sm); }
.section-model-story__parts { padding-top: var(--space-2xl); border-top: var(--detail-divider); }
.section-model-story__parts ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.section-model-story__parts li { display: grid; justify-items: center; gap: var(--space-xs); text-align: center; }
.section-model-story__parts img { width: 100%; height: 6rem; object-fit: contain; }
.section-model-story__notes { padding-inline-start: var(--space-xl); color: var(--muted); }
.section-model-support-guides, .section-model-support-guides__policies { display: grid; gap: var(--space-lg); }
.section-model-support {
  display: grid; align-content: start; gap: var(--space-lg); padding: var(--space-xl);
  border: var(--border-line); border-radius: var(--radius-md); background: var(--surface);
}
.section-model-support h2 { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lg); }
.section-model-support h2 .icon { color: var(--color-info); }
#after-sales h2 .icon { color: var(--color-success); }
.section-model-support h3, .section-model-support h4 { margin: 0; font-size: var(--text-md); }
.section-model-support__item { display: grid; gap: var(--space-xs); }
.section-model-support p { color: var(--muted); overflow-wrap: anywhere; }
.section-model-support .ui-button { justify-self: start; }
.section-model-support__regions, .section-model-support__region-list {
  padding: var(--space-md); border: var(--border-line); border-radius: var(--radius-md);
}
.section-model-support__regions { display: grid; gap: var(--space-sm); }
.section-model-support__region-list summary { cursor: pointer; font-weight: var(--weight-strong); }
.section-model-support__region-list[open] .section-model-support__item { margin-block-start: var(--space-md); }
.section-model-support-guides__note {
  padding: var(--space-md); border: var(--border-line); border-radius: var(--radius-md);
  color: var(--muted); font-size: var(--text-sm);
}

/* L3 · persistent purchase panel on desktop */
.section-model-rail {
  position: sticky;
  top: var(--detail-rail-inset);
  max-height: calc(100dvh - 2 * var(--detail-rail-inset));
  overflow: auto;
  min-width: 0;
  padding: var(--space-lg);
  border: var(--detail-divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.section-model-rail h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.section-model-rail__model { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-sm); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.section-model-rail__model small { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-body); }
.section-model-config--compact .section-model-config__total > div > strong { font-size: var(--text-lg); }
.section-model-config--compact .section-model-option { grid-template-columns: var(--space-3xl) minmax(0, 1fr) auto; }
.section-model-quote { display: grid; justify-items: start; gap: var(--space-md); }
.section-model-quote ul:empty { display: none; }
#model-quote-title + form { justify-self: start; }

@media (max-width: 70rem) {
  .layout-model-detail { --detail-gallery-gap: var(--space-xl); --detail-thumb-size: var(--space-3xl); }
  .layout-model-detail__reading { grid-template-columns: minmax(0, 7fr) minmax(18rem, 3fr); gap: var(--space-xl); }
}

@media (max-width: 48rem) {
  .layout-model-detail__wrap { padding-inline: var(--space-lg); }
  .section-model-purchase { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .section-model-gallery__thumbs { width: auto; grid-auto-flow: column; justify-content: start; }
  .section-model-gallery__photo, .section-model-purchase__info { grid-column: auto; }
  .section-model-gallery__photo img { max-height: min(26rem, 100vw); }
  .section-model-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-model-detail__reading { grid-template-columns: minmax(0, 1fr); }
  .section-model-rail { position: static; max-height: none; }
  .section-model-story__scene { grid-template-columns: minmax(0, 1fr); }
  .section-model-story__scene:nth-child(even) .section-model-story__scene-copy { grid-column: auto; grid-row: auto; }
  .section-model-story__points { gap: var(--space-sm); font-size: var(--text-sm); }
  .section-model-story__points img { height: 5rem; }
  .section-model-story__points li:first-child img { height: 10rem; }
  .section-model-story__hero { grid-template-columns: minmax(0, 1fr); }
  .section-model-story__hero > img { height: 13rem; }
}