.product-main {
  min-height: 720px;
  padding: var(--space-5) 0 0;
  background: var(--color-surface);
}

.product-page-container { min-width: 0; }
.product-breadcrumbs { margin-bottom: var(--space-4); }

.product-hero {
  margin-bottom: var(--space-6);
}

.product-hero-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(430px, 1.2fr) minmax(300px, .8fr) 318px;
  align-items: start;
  gap: var(--space-5);
}

.product-gallery-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--space-18) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.product-thumbnail-rail {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.product-thumbnail-list {
  width: 100%;
  max-height: 392px;
  display: grid;
  gap: var(--space-2);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.product-thumbnail-list::-webkit-scrollbar { display: none; }

.product-thumbnail {
  width: var(--space-18);
  height: var(--space-18);
  position: relative;
  padding: var(--space-1);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.product-thumbnail:hover { border-color: var(--color-border-strong); }
.product-thumbnail[aria-current="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.product-thumbnail img { width: 100%; height: 100%; object-fit: contain; }

.product-thumbnail-scroll {
  width: var(--space-18);
  min-height: var(--control-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.product-thumbnail-scroll:hover { border-color: var(--color-border-strong); background: var(--color-surface-muted); }
.product-thumbnail-scroll .ds-icon { transition: transform var(--duration-fast) var(--ease); }
.product-thumbnail-scroll.is-return .ds-icon { transform: rotate(180deg); }

.product-main-media {
  min-width: 0;
  aspect-ratio: 1 / 1;
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  overflow: hidden;
}

/* Фото растягивается на всю плашку и вписывается в нее целиком. В сетке высота
   фото считалась от его собственных пропорций, и высокое фото обрезалось снизу. */
.product-main-media > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  padding: var(--space-8);
  object-fit: contain;
  transition: transform var(--duration-fast) var(--ease);
}

.product-adaptive-gallery,
.demo-state-toolbar-dropdown { display: none; }

.product-gallery-panel.product-gallery-panel-empty { grid-template-columns: minmax(0, 1fr); }
.product-main-media-empty { padding: var(--space-8); border: 0; background: var(--color-surface-muted); }

.product-no-photo {
  max-width: 360px;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  text-align: center;
}

.product-no-photo .ds-icon {
  width: 64px;
  height: 64px;
  color: var(--color-border-strong);
}

.product-no-photo strong {
  color: var(--color-text-secondary);
  font-size: var(--font-size-20);
  line-height: 1.25;
}

.product-image-view-main { transform: scale(1); transform-origin: center; }
.product-image-view-detail { transform: scale(1.16); transform-origin: 64% 44%; }
.product-image-view-chuck { transform: scale(1.32); transform-origin: 77% 30%; }
.product-image-view-batteries { transform: scale(1.3); transform-origin: 34% 82%; }
.product-image-view-grip { transform: scale(1.34); transform-origin: 58% 62%; }
.product-image-view-side { transform: scale(1.2); transform-origin: 42% 50%; }
.product-image-view-battery { transform: scale(1.46); transform-origin: 26% 82%; }

.product-gallery-badges {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  gap: var(--space-1);
}

.product-discount { color: var(--color-text-inverse); background: var(--color-accent); }
.product-hit { color: var(--color-text); background: var(--color-surface); }
.product-variant-badge { color: var(--color-accent); background: var(--color-accent-soft); }
.product-exception-badge { color: var(--color-warning); background: var(--color-warning-soft); }

.product-information { min-width: 0; }

.product-title-row {
  min-height: var(--control-md);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.product-brand {
  min-height: var(--badge-min-height);
  padding: var(--badge-padding-block) var(--badge-padding-inline);
  display: inline-flex;
  align-items: center;
  border-radius: var(--badge-radius);
  color: var(--color-text);
  background: var(--color-surface-muted);
  font-size: var(--badge-font-size);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
}

.product-information h1,
.product-state-page > h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-20);
  line-height: 1.18;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.product-meta {
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.product-meta-action {
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 0;
  border-radius: 0;
  color: var(--color-text-secondary);
  background: transparent;
  font: inherit;
  font-size: var(--type-caption-size);
  cursor: pointer;
}

.product-meta-action:hover { color: var(--color-accent); background: transparent; }
.product-meta-action .ds-icon { width: var(--icon-md); height: var(--icon-md); }
.product-favorite-control[aria-pressed="true"] { color: var(--color-accent); }

.product-variant-selector {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  display: grid;
  gap: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.product-variant-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.product-variant-group legend {
  margin-bottom: var(--space-2);
  padding: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
  line-height: 1.35;
}

.product-variant-tabs {
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.product-variant-tabs.is-collapsed {
  flex-wrap: nowrap;
}

.product-variant-tab {
  height: 32px;
  min-height: 32px;
  padding-inline: 10px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-13);
  line-height: 1;
  font-weight: var(--weight-medium);
  text-align: center;
  white-space: nowrap;
}

.product-variant-tab[hidden] { display: none; }
.product-variant-tab > span { line-height: 1; }

.product-variant-tab:not(.is-disabled):hover {
  border-color: var(--color-text-tertiary);
  background: var(--color-surface-muted);
}

.product-variant-tab:has(input:checked) {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
  font-weight: var(--weight-bold);
}

.product-variant-tab:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.product-variant-tab.is-disabled {
  border-style: dashed;
  color: var(--color-text-tertiary);
  background: var(--color-surface-subtle);
  box-shadow: none;
  cursor: not-allowed;
}

.product-variant-toggle {
  border-color: transparent;
  background: var(--color-surface-muted);
  box-shadow: none;
}

.product-variant-toggle:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background: var(--color-border);
}

.product-key-specs-heading {
  margin-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.product-key-specs-heading h2 { margin: 0; font-size: var(--font-size-16); }
.product-key-specs-heading a { color: var(--color-accent); font-size: var(--type-caption-size); font-weight: var(--weight-semibold); }
.product-key-specs-heading a:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: var(--space-1); }

.product-key-specs {
  margin: 0;
  display: grid;
  gap: 0;
}

.product-key-specs > div {
  min-height: 44px;
  padding: var(--space-2) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-13);
}

.product-key-specs dt { color: var(--color-text-secondary); }
.product-key-specs dd { margin: 0; text-align: right; font-weight: var(--weight-semibold); }
.product-key-specs > div:last-child { border-bottom: 0; }

.product-purchase-panel {
  position: sticky;
  top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.product-buy-card,
.product-fulfilment-card {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.product-buy-card {
  border: 0;
  box-shadow: var(--shadow-floating);
}

.product-fulfilment-card { padding-bottom: var(--space-4); border: var(--border-width) solid var(--color-border); }
.product-fulfilment-card h2 { margin: 0; font-size: var(--type-subtitle-size); }

.product-price-block {
  margin-bottom: var(--space-4);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.product-current-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--color-text);
  white-space: nowrap;
}

.product-current-price strong { color: inherit; font-size: var(--font-size-32); line-height: 1.1; letter-spacing: -.03em; }
.product-current-price span { color: inherit; font-size: var(--font-size-13); font-weight: var(--weight-semibold); }
.product-price-block del { color: var(--color-text-secondary); font-size: var(--font-size-13); }

.product-exception-note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.product-exception-note strong { font-size: var(--font-size-14); }
.product-exception-note p { margin: 0; color: var(--color-text); font-size: var(--font-size-12); line-height: 1.45; }

.product-stock {
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-13);
  font-weight: var(--weight-semibold);
}

.product-stock > span { width: var(--space-2); height: var(--space-2); flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.product-stock-available { color: var(--color-success); }
.product-stock-empty { color: var(--color-danger); }

.product-fulfilment {
  display: grid;
}

.product-fulfilment > div {
  min-height: 68px;
  display: grid;
  grid-template-columns: var(--icon-lg) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.product-fulfilment > div + div { border-top: var(--border-width) solid var(--color-border); }
.product-fulfilment .ds-icon { color: var(--color-accent); }
.product-fulfilment span { min-width: 0; display: grid; gap: 2px; }
.product-fulfilment strong { font-size: var(--font-size-13); }
.product-fulfilment small { color: var(--color-text-secondary); font-size: var(--type-caption-size); line-height: 1.35; }

.product-purchase-action { display: grid; gap: var(--space-2); }
.product-add-button { width: 100%; min-height: var(--control-xl); }
.product-add-button .ds-icon { width: var(--icon-md); height: var(--icon-md); }
.product-sticky-purchase { display: none; }

.product-quantity {
  min-height: var(--control-xl);
  display: grid;
  grid-template-columns: var(--control-xl) minmax(0, 1fr) var(--control-xl);
  align-items: center;
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.product-quantity button { width: var(--control-xl); height: var(--control-xl); border: 0; color: inherit; background: transparent; font-size: var(--font-size-24); cursor: pointer; }
.product-quantity button:hover { background: var(--color-accent-soft-hover); }
.product-quantity button:disabled { opacity: .45; }
.product-quantity output { justify-self: center; color: inherit; font-weight: var(--weight-bold); }
.product-quantity output small { font-size: var(--font-size-12); font-weight: var(--weight-medium); }

.product-details-layout {
  margin-top: var(--space-12);
  padding-bottom: var(--space-18);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  align-items: start;
  gap: var(--space-10);
}

.product-details-copy { min-width: 0; }
/* Отступ под закрепленную шапку (77px на десктопе), иначе якорь прячет заголовок под ней. */
.product-detail-section { min-width: 0; scroll-margin-top: calc(80px + var(--space-6)); }
.product-details-copy .product-detail-section { padding: 0 0 var(--space-10); }
.product-details-copy .product-detail-section + .product-detail-section { padding-top: var(--space-8); border-top: var(--border-width) solid var(--color-border); }
.product-detail-section h2 { margin-bottom: var(--space-4); font-size: var(--font-size-20); }
.product-detail-section > p { max-width: 70ch; margin-bottom: 0; color: var(--color-text-secondary); line-height: 1.65; }

.product-detail-section ul { margin: 0; padding: 0; display: grid; gap: var(--space-3); list-style: none; }
.product-detail-section li { display: grid; grid-template-columns: var(--icon-md) minmax(0, 1fr); align-items: start; gap: var(--space-2); font-weight: var(--weight-regular); }
.product-detail-section li .ds-icon { margin-top: 2px; color: var(--color-success); }

.product-document-list { margin-top: var(--space-4); display: grid; gap: var(--space-1); }
.product-document-item {
  min-height: var(--control-md);
  padding: 0;
  display: grid;
  grid-template-columns: var(--icon-md) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  border: 0;
  color: var(--color-text);
  background: transparent;
  font: inherit;
  font-weight: var(--weight-regular);
  text-align: left;
  cursor: pointer;
}

.product-document-item .ds-icon { color: var(--color-accent); }
.product-document-item:hover { color: var(--color-accent); }

.toast.product-document-toast {
  border: var(--border-width) solid color-mix(in srgb, var(--color-warning) 28%, transparent);
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.product-specifications {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-subtle);
}

.product-specifications dl { margin: 0; display: grid; }
.product-specifications dl > div { min-height: 44px; display: flex; align-items: baseline; gap: var(--space-1); padding: var(--space-2) 0; font-size: var(--font-size-13); }
.product-specifications dt { min-width: 0; display: flex; flex: 1 1 auto; align-items: baseline; color: var(--color-text-secondary); }
.product-specifications dt::after { min-width: var(--space-3); margin-left: var(--space-2); content: ""; flex: 1 1 auto; border-bottom: var(--border-width) dotted var(--color-border-strong); transform: translateY(-3px); }
.product-specifications dd { max-width: 50%; margin: 0; flex: 0 1 auto; font-weight: var(--weight-semibold); text-align: right; }
.product-specifications dd a { color: var(--color-accent); text-decoration: none; }
.product-specifications dd a:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: var(--space-1); }

.product-related-shelves {
  min-width: 0;
  padding-bottom: var(--space-18);
  display: grid;
  gap: var(--space-12);
}

.product-related-section { --related-media-height: 220px; min-width: 0; }
.product-related-section .section-heading { margin-bottom: var(--space-3); }
.product-related-section .section-heading h2 { margin: 0; font-size: var(--font-size-32); line-height: 1.2; letter-spacing: -.02em; }
.product-related-section .shelf-shell { border-radius: var(--radius-xl); }
.product-related-section .product-shelf { overscroll-behavior-inline: contain; }
.product-related-section .product-media { height: var(--related-media-height); }
.product-related-section .product-gallery-image { padding: var(--space-5); }

.product-state-page { min-height: 620px; }
.product-state-page > h1 { max-width: 840px; margin-top: var(--space-2); font-size: var(--font-size-32); }

.product-loading-layout {
  min-width: 0;
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: minmax(430px, 1.2fr) minmax(300px, .8fr) 318px;
  gap: var(--space-5);
}

.product-loading-layout > div { min-width: 0; min-height: 360px; padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.product-loading-media { background: var(--color-surface-muted) !important; }
.product-loading-copy,
.product-loading-buy { display: grid; align-content: start; gap: var(--space-4); }
.product-loading-copy .product-skeleton { height: 30px; }
.product-loading-copy .product-skeleton:nth-child(2) { height: 18px; width: 72%; }
.product-loading-copy .product-skeleton:nth-child(3) { height: 160px; }
.product-loading-copy p { margin: auto 0 0; color: var(--color-text-secondary); font-size: var(--font-size-13); }
.product-loading-buy .product-skeleton:first-child { height: 42px; }
.product-loading-buy .product-skeleton:nth-child(2) { height: 164px; }
.product-loading-buy .product-skeleton:nth-child(3) { height: var(--control-xl); margin-top: auto; }

.product-skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-muted), var(--color-border), var(--color-surface-muted));
  background-size: 220% 100%;
  animation: product-skeleton 1.3s linear infinite;
}

@keyframes product-skeleton { to { background-position: -220% 0; } }

.product-error-state {
  min-height: 360px;
  margin-top: var(--space-8);
}

.product-error-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.product-error-icon .ds-icon {
  width: 32px;
  height: 32px;
}

.product-error-state h2 { margin-bottom: var(--space-2); font-size: var(--font-size-24); }
.product-error-state p { max-width: 58ch; margin: 0; }

.product-manager-dialog {
  width: min(680px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-floating);
}

.product-manager-dialog::backdrop { background: var(--color-overlay); }

.product-manager-form {
  padding: var(--space-8);
  display: grid;
  gap: var(--space-3);
}

.product-manager-dialog-heading {
  margin-bottom: var(--space-2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

.product-manager-dialog-heading h2 { margin: 0 0 var(--space-1); font-size: var(--font-size-24); }
.product-manager-dialog-heading p { max-width: 58ch; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-14); line-height: 1.45; }

.product-manager-product {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.product-manager-product img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.product-manager-product strong {
  min-width: 0;
  font-size: var(--font-size-14);
  font-weight: var(--weight-bold);
  line-height: 1.4;
}

.product-manager-form-row { --ds-form-row-gap: var(--space-3); --ds-form-column-gap: var(--space-3); }
.product-manager-form .ds-field-label small { color: var(--color-text-secondary); font-size: var(--font-size-12); font-weight: var(--weight-regular); }
.product-manager-actions { margin-top: var(--space-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.product-manager-actions .ds-button { min-height: var(--control-xl); }
.product-manager-privacy {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-12);
  line-height: 1.5;
}
.product-manager-privacy a,
.product-manager-privacy a:hover {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.product-manager-status { min-height: 18px; margin: 0; color: var(--color-success); font-size: var(--font-size-13); line-height: 1.4; }

@media (max-width: 1439px) {
  .product-hero-grid,
  .product-loading-layout { grid-template-columns: minmax(0, 1.15fr) minmax(286px, .85fr) 304px; gap: var(--space-4); }
  .product-gallery-panel { grid-template-columns: 68px minmax(0, 1fr); gap: var(--space-2); }
  .product-thumbnail { width: 68px; height: 68px; }
  .product-thumbnail-list { max-height: 372px; }
  .product-thumbnail-scroll { width: 68px; }
  .product-buy-card,
  .product-fulfilment-card { padding: var(--space-4); }
  .product-current-price strong { font-size: var(--type-title-size); }
  .product-details-layout { grid-template-columns: minmax(0, 1fr) minmax(400px, .86fr); gap: var(--space-8); }
  .product-related-section { --related-media-height: 202px; }
}

@media (max-width: 1024px) {
  .demo-state-toolbar-inner {
    min-height: 0;
    padding-block: var(--space-2);
    display: grid;
    gap: var(--space-2);
  }

  .demo-state-toolbar-copy { min-width: 0; }
  .demo-state-toolbar-controls { display: none; }
  .demo-state-toolbar-dropdown { display: block; }

  .demo-state-toolbar-dropdown .ds-dropdown-field,
  .demo-state-toolbar-dropdown .ds-dropdown-trigger {
    width: 100%;
  }

  .demo-state-toolbar-dropdown .ds-dropdown-trigger {
    min-height: var(--control-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-14);
  }

  .product-main { padding-top: var(--space-6); }
  .product-breadcrumbs {
    margin-bottom: var(--space-4);
    scrollbar-width: none;
  }
  .product-breadcrumbs::-webkit-scrollbar { height: 0; }
  .product-breadcrumbs.is-scrolling {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
  }
  .product-breadcrumbs.is-scrolling::-webkit-scrollbar { height: 3px; }
  .product-breadcrumbs.is-scrolling::-webkit-scrollbar-track { background: transparent; }
  .product-breadcrumbs.is-scrolling::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
  }

  .product-hero-grid,
  .product-loading-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: var(--space-6);
  }

  .product-gallery-panel { grid-template-columns: 64px minmax(0, 1fr); }
  .product-thumbnail,
  .product-thumbnail-scroll { width: 64px; }
  .product-thumbnail { height: 64px; }
  .product-thumbnail-list { max-height: 352px; }
  .product-main-media > img { padding: var(--space-6); }

  .product-purchase-panel {
    position: static;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .product-buy-card,
  .product-fulfilment-card { padding: var(--space-5); }

  .product-sticky-purchase {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom));
    left: 0;
    padding: var(--space-2) max(var(--space-6), env(safe-area-inset-right)) var(--space-2) max(var(--space-6), env(safe-area-inset-left));
    display: block;
    border-top: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-transaction);
  }
  .product-sticky-purchase-inner { width: min(1280px, 100%); margin-inline: auto; }
  .product-sticky-purchase .product-add-button,
  .product-sticky-purchase .product-quantity { min-height: var(--control-lg); }
  body[data-catalog-level="product"] .mobile-bottom-nav {
    border-top: 0;
    box-shadow: none;
  }
  body[data-catalog-level="product"] .footer { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }

  .product-details-layout {
    margin-top: var(--space-12);
    padding-bottom: var(--space-12);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .product-specifications { max-width: none; }

  .product-related-shelves {
    padding-bottom: calc(var(--space-12) + 60px + env(safe-area-inset-bottom));
    gap: var(--space-10);
  }
  .product-related-section .section-heading { margin-bottom: var(--space-2); }
  .product-related-section .shelf-controls { display: none; }
  .product-related-section .shelf-shell { overflow: visible; }
  .product-related-section .product-shelf {
    scroll-snap-type: none;
    cursor: grab;
  }
  .product-related-section .product-shelf.is-mouse-dragging { cursor: grabbing; user-select: none; }

  .product-loading-buy { grid-column: 1 / -1; min-height: 220px !important; }
  .product-loading-layout > div { min-height: 300px; }

  .product-manager-dialog {
    width: min(680px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
  }
}

@media (max-width: 767px) {
  .demo-state-toolbar-copy span { display: none; }
  .demo-state-toolbar-copy strong { font-size: var(--font-size-12); }

  .product-main {
    min-height: 0;
    padding-top: 0;
    overflow: hidden;
  }
  .product-breadcrumbs {
    margin-bottom: var(--space-2);
    padding-bottom: 0;
    font-size: var(--font-size-12);
  }
  .product-hero { margin-bottom: 0; }
  .product-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .product-information { display: contents; }
  .product-gallery-panel { order: 1; }
  .product-information-header { order: 2; }
  .product-variant-selector { order: 3; }
  .product-key-specs-block { order: 4; }
  .product-purchase-panel { order: 5; }

  .product-title-row { min-height: 28px; margin-top: calc(-1 * var(--space-4)); margin-bottom: var(--space-1); }
  .product-information h1 {
    margin-bottom: var(--space-2);
    line-height: 1.2;
  }
  .product-meta { margin-bottom: 0; column-gap: var(--space-6); row-gap: var(--space-3); }
  .product-variant-selector { margin-bottom: 0; padding-bottom: var(--space-4); gap: var(--space-3); }

  .product-gallery-panel {
    display: block;
  }
  .product-gallery-panel:not(.product-gallery-panel-empty) > .product-main-media,
  .product-gallery-panel:not(.product-gallery-panel-empty) > .product-thumbnail-rail { display: none; }
  .product-adaptive-gallery { min-width: 0; position: relative; display: grid; gap: var(--space-2); }
  .product-adaptive-gallery-track {
    min-width: 0;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
  }
  .product-adaptive-gallery-track::-webkit-scrollbar { display: none; }
  .product-adaptive-gallery-track.is-mouse-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .product-adaptive-gallery-slide {
    min-width: 0;
    aspect-ratio: 1;
    margin: 0;
    position: relative;
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
  }
  .product-adaptive-gallery-slide > img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    padding: var(--space-5);
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .product-adaptive-gallery-progress {
    min-height: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
  }
  .product-adaptive-gallery-progress button {
    width: 12px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    cursor: pointer;
  }
  .product-adaptive-gallery-progress button[aria-current="true"] { width: 20px; background: var(--color-text); }
  .product-main-media { border-radius: var(--radius-lg); }
  .product-main-media > img { padding: var(--space-5); }
  .product-main-media-empty { min-height: min(86vw, 360px); padding: var(--space-5); }
  .product-no-photo { gap: var(--space-2); }
  .product-no-photo .ds-icon { width: 52px; height: 52px; }
  .product-gallery-badges { top: var(--space-2); left: var(--space-2); }

  .product-purchase-panel {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .product-sticky-purchase {
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    padding-left: max(var(--space-4), env(safe-area-inset-left));
  }
  .product-buy-card,
  .product-fulfilment-card {
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  .product-buy-card { box-shadow: none; }
  .product-price-block { margin-bottom: var(--space-3); }
  .product-add-button,
  .product-quantity { min-height: var(--control-lg); }
  .product-quantity { grid-template-columns: var(--control-lg) minmax(0, 1fr) var(--control-lg); }
  .product-quantity button { width: var(--control-lg); height: var(--control-lg); }
  .product-fulfilment > div { min-height: 64px; }

  .product-key-specs-heading { margin-bottom: var(--space-2); }
  .product-key-specs > div { min-height: 40px; }

  .product-details-layout {
    margin-top: var(--space-8);
    padding-bottom: var(--space-10);
    gap: var(--space-6);
  }
  .product-details-copy .product-detail-section { padding-bottom: var(--space-6); }
  .product-details-copy .product-detail-section + .product-detail-section { padding-top: var(--space-6); }
  .product-details-copy #description { padding-bottom: var(--space-4); }
  .product-details-copy #kit { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .product-details-copy #documents { padding-top: var(--space-4); padding-bottom: var(--space-2); }
  .product-detail-section h2 { margin-bottom: var(--space-3); }
  .product-detail-section > p { font-size: var(--font-size-14); line-height: 1.55; }
  .product-detail-section ul { gap: var(--space-2); font-size: var(--font-size-14); }
  .product-document-list { margin-top: var(--space-2); gap: 0; }
  .product-document-item { min-height: var(--control-md); font-size: var(--font-size-14); }
  .product-specifications { padding: var(--space-4); border-radius: var(--radius-lg); }
  .product-specifications dl > div { min-height: 40px; font-size: var(--font-size-12); }
  .product-specifications dd { max-width: 46%; }

  .product-related-shelves { padding-bottom: var(--space-8); gap: var(--space-8); }
  .product-related-section { --related-media-height: auto; }
  .product-related-section .section-heading { margin-bottom: var(--space-2); }
  .product-related-section .shelf-shell { margin-inline: -16px; padding-inline: 0; }
  .product-related-section .product-shelf {
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    gap: var(--space-2);
  }
  .product-related-section .product-media { aspect-ratio: 1; }
  .product-related-section .product-gallery-image { padding: var(--space-3); }

  .product-state-page { min-height: 520px; }
  .product-loading-layout {
    margin-top: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .product-loading-layout > div { min-height: 180px; padding: var(--space-4); }
  .product-loading-media { aspect-ratio: 1; min-height: 0 !important; }
  .product-loading-buy { grid-column: auto; }
  .product-error-state { min-height: 320px; margin-top: var(--space-4); padding: var(--space-5); }
  .product-manager-dialog {
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
    margin: auto;
    border-radius: var(--radius-lg);
  }
  .product-manager-form { padding: var(--space-4); gap: var(--space-2); }
  .product-manager-dialog-heading { gap: var(--space-3); }
  .product-manager-form-row { --ds-form-row-gap: var(--space-2); --ds-form-column-gap: var(--space-2); }
  .product-manager-product { grid-template-columns: 48px minmax(0, 1fr); }
  .product-manager-product img { width: 48px; height: 48px; }
}

@media (max-width: 359px) {
  .product-main-media > img,
  .product-adaptive-gallery-slide > img { padding: var(--space-4); }
  .product-specifications { padding-inline: var(--space-3); }
  .product-specifications dl > div { font-size: 11px; }
}