.lx-pdp {
  position: relative;
}

.lx-pdp-page .lx-main {
  overflow-x: clip;
}

.lx-pdp__hero {
  display: grid;
  gap: var(--lx-s-7);
}

.lx-pdp__gallery {
  min-width: 0;
}

.lx-pdp__image-track {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  gap: var(--lx-s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.lx-pdp__image-track:focus-visible {
  border-radius: var(--lx-radius-panel);
  outline: 3px solid var(--lx-deep);
  outline-offset: 3px;
}

.lx-pdp__image-track::-webkit-scrollbar {
  display: none;
}

.lx-pdp__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 0;
  border-radius: var(--lx-radius-panel);
  background: var(--lx-fog);
  overflow: hidden;
  scroll-snap-align: start;
}

.lx-pdp__image img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Chromium-only cross-document page transition; other engines keep normal navigation. */
@supports (-webkit-app-region: inherit) {
  .lx-pdp__image:first-child img {
    view-transition-name: lx-product;
  }
}

.lx-pdp__thumbs {
  display: flex;
  gap: var(--lx-s-2);
  margin-block-start: var(--lx-s-3);
  padding-block: var(--lx-s-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.lx-pdp__thumbs::-webkit-scrollbar {
  display: none;
}

.lx-pdp__thumb {
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--lx-s-1);
  border: 1px solid transparent;
  border-radius: var(--lx-radius-card);
  background: var(--lx-fog);
  color: var(--lx-deep);
  transition: border-color var(--lx-dur) var(--lx-ease), background-color var(--lx-dur) var(--lx-ease);
}

.lx-pdp__thumb:hover {
  background: var(--lx-mist);
}

.lx-pdp__thumb[aria-current="true"] {
  border-color: var(--lx-deep);
  background: var(--lx-paper);
}

.lx-pdp__thumb img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.lx-pdp__buybox {
  display: grid;
  align-content: start;
  gap: var(--lx-s-4);
}

.lx-pdp__spec-line {
  margin: 0;
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-pdp__spec-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
  color: var(--lx-link);
  font-weight: var(--lx-w-label);
}

.lx-pdp__buybox h1 {
  margin: 0;
  color: var(--lx-ink);
  font-feature-settings: "palt";
  font-weight: var(--lx-w-display);
  line-height: 1.38;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

.lx-pdp__lead {
  margin: 0;
  color: var(--lx-body);
  font-size: var(--lx-text-body-lg);
  line-height: var(--lx-lh-body);
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

.lx-pdp__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
}

.lx-pdp__review-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
  color: var(--lx-link);
  font-size: var(--lx-text-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.lx-pdp__price {
  padding-block: var(--lx-s-2);
}

.lx-pdp__price .lx-price--lg {
  font-weight: var(--lx-w-display);
}

.lx-pdp__price-note {
  margin: calc(var(--lx-s-2) * -1) 0 var(--lx-s-2);
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-price__rank {
  display: block;
  margin-block-end: var(--lx-s-1);
  color: var(--lx-link);
  font-size: var(--lx-text-small);
  font-weight: 500;
  line-height: var(--lx-lh-small);
  letter-spacing: 0.04em;
}

.lx-pdp #ec-point {
  display: inline-flex;
  align-items: baseline;
  gap: var(--lx-s-1);
  width: fit-content;
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-radius-pill);
  background: var(--lx-fog);
  color: var(--lx-body);
  font-size: var(--lx-text-small);
  font-weight: 500;
  line-height: var(--lx-lh-small);
}

.lx-pdp #ec-point[hidden],
.lx-pdp .point-default[hidden] {
  display: none;
}

.lx-pdp #ec-point .point-default {
  color: var(--lx-deep);
  font-variant-numeric: tabular-nums;
}

.lx-pdp__form,
.lx-pdp__favorite {
  display: grid;
  gap: var(--lx-s-4);
}

.lx-pdp__variants {
  display: grid;
  gap: var(--lx-s-3);
  padding: 0;
  border: 0;
  margin: 0;
}

.lx-pdp__variants legend {
  margin-block-end: var(--lx-s-2);
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  font-weight: 700;
}

.lx-pdp__variant {
  grid-template-columns: var(--lx-touch) minmax(0, 1fr);
}

.lx-pdp__variant.is-disabled {
  background: var(--lx-fog);
  color: var(--lx-muted);
  cursor: not-allowed;
}

.lx-pdp__variant-price {
  grid-column: 2;
  display: grid;
  gap: var(--lx-s-1);
  justify-items: start;
}

.lx-pdp__variant-price del {
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
}

.lx-pdp__variant-price small {
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

/* Hidden from both layout and the a11y tree (aria-hidden on focusable selects
   fails aria-hidden-focus); selects still submit with #form1. */
.lx-pdp__native-fields {
  display: none;
}

.lx-pdp__quantity {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-3);
  align-items: center;
  justify-content: space-between;
}

.lx-pdp__quantity label {
  color: var(--lx-ink);
  font-weight: 700;
}

.lx-pdp__quantity .lx-stepper input {
  min-height: var(--lx-touch);
  padding: 0;
  appearance: textfield;
}

.lx-pdp__quantity .lx-stepper input::-webkit-outer-spin-button,
.lx-pdp__quantity .lx-stepper input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.lx-pdp__cart-error[hidden],
.lx-pdp__toast[hidden],
.lx-pdp__buybar[hidden] {
  display: none;
}

.lx-pdp__stock-notice {
  text-align: left;
}

.lx-pdp__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block-start: var(--lx-hairline);
}

.lx-pdp__facts > div {
  display: grid;
  gap: var(--lx-s-1);
  padding: var(--lx-s-3) var(--lx-s-3) var(--lx-s-3) 0;
  border-block-end: var(--lx-hairline);
}

.lx-pdp__facts > div:nth-child(odd) {
  padding-inline-end: var(--lx-s-4);
  border-inline-end: var(--lx-hairline);
}

.lx-pdp__facts > div:nth-child(even) {
  padding-inline-start: var(--lx-s-4);
}

.lx-pdp__facts dt {
  color: var(--lx-link);
  font-family: var(--lx-font);
  font-size: var(--lx-text-small);
  font-weight: var(--lx-w-label);
  line-height: var(--lx-lh-small);
  letter-spacing: 0.08em;
}

.lx-pdp__facts dd,
.lx-pdp__facts a {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lx-pdp__facts a {
  color: var(--lx-body);
  text-decoration: none;
}

.lx-pdp__facts a:hover strong {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.lx-pdp__facts strong {
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  font-weight: var(--lx-w-label);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.lx-pdp__facts span {
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-pdp__import-notice {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.lx-pdp__import-notice > span {
  display: grid;
  place-items: center;
  width: var(--lx-s-6);
  height: var(--lx-s-6);
  border: 1.5px solid var(--lx-deep);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  font-weight: 700;
}

.lx-pdp__toast {
  position: fixed;
  right: var(--lx-gutter);
  bottom: calc(var(--lx-gutter) + var(--lx-touch) + var(--lx-safe-bottom));
  z-index: 80;
}

.lx-pdp__toast a {
  color: var(--lx-paper);
}

.lx-pdp__body {
  margin-block-start: var(--lx-section-gap);
}

.lx-pdp__content {
  display: grid;
  gap: var(--lx-s-6);
  max-width: 760px;
  margin-inline: auto;
}

.lx-pdp__content h2 {
  margin: 0;
  font-weight: var(--lx-w-display);
}

.lx-pdp__content :is(p, li, dd, .lx-pdp__description, .lx-acc__body) {
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

.lx-pdp__info-table {
  width: 100%;
  border-block: var(--lx-hairline);
  font-size: var(--lx-text-body);
}

.lx-pdp__info-table .ct,
.lx-pdp__info-row {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  border-block-end: var(--lx-hairline);
}

.lx-pdp__info-table .ttitle,
.lx-pdp__info-table .tvalue {
  padding: var(--lx-s-3) 0;
  text-align: start;
  vertical-align: top;
}

.lx-pdp__info-table .ttitle {
  padding-inline-end: var(--lx-s-4);
  color: var(--lx-muted);
  font-weight: 500;
}

.lx-pdp__info-table .tvalue {
  color: var(--lx-ink);
  font-variant-numeric: tabular-nums;
}

.lx-pdp__keywords {
  display: grid;
  gap: var(--lx-s-2);
}

.lx-pdp__keywords-label {
  margin: 0;
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  font-weight: var(--lx-w-label);
  line-height: var(--lx-lh-small);
}

.lx-pdp__keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
}

.lx-pdp__keyword {
  background: var(--lx-fog);
  color: var(--lx-muted);
}

.lx-pdp__description {
  color: var(--lx-body);
  font-size: var(--lx-text-body-lg);
  line-height: var(--lx-lh-body);
}

.lx-pdp__description :where(p, ul, ol) + :where(p, ul, ol) {
  margin-block-start: var(--lx-s-4);
}

.lx-pdp__reviews {
  min-height: var(--lx-s-11);
}

.lx-pdp .ec-modal {
  display: none;
}

.lx-pdp .ec-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: calc(var(--lx-gutter) + var(--lx-safe-top)) var(--lx-gutter) calc(var(--lx-gutter) + var(--lx-safe-bottom));
  background: var(--lx-overlay);
  overscroll-behavior: contain;
}

.lx-pdp .ec-modal-wrap {
  width: min(420px, 100%);
  max-height: calc(100dvh - (var(--lx-gutter) * 2) - var(--lx-safe-top) - var(--lx-safe-bottom));
  overflow: auto;
  padding: var(--lx-card-pad);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
  box-shadow: var(--lx-shadow-float);
}

.lx-pdp .ec-modal-close {
  display: flex;
  justify-content: flex-end;
}

.lx-pdp .ec-modal-close .ec-icon {
  display: inline-grid;
  place-items: center;
  min-width: var(--lx-touch);
  min-height: var(--lx-touch);
  cursor: pointer;
}

.lx-pdp .ec-modal-box .ec-role {
  display: grid;
  gap: var(--lx-s-3);
  margin-block-start: var(--lx-s-4);
}

.lx-pdp .ec-inlineBtn--cancel,
.lx-pdp .ec-inlineBtn--action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lx-touch);
  border-radius: var(--lx-radius-pill);
  font-weight: 700;
}

.lx-pdp .ec-inlineBtn--cancel {
  color: var(--lx-link);
  text-decoration: underline;
}

.lx-pdp .ec-inlineBtn--action {
  background: var(--lx-amber);
  color: var(--lx-deep);
  text-decoration: none;
}

.lx-pdp-reviews {
  margin-block-start: var(--lx-section-gap);
}

.lx-pdp-reviews__inner {
  display: grid;
  gap: var(--lx-s-6);
  max-width: 760px;
  margin-inline: auto;
}

.lx-pdp-reviews__head {
  display: grid;
  gap: var(--lx-s-2);
}

.lx-pdp-reviews__head p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
  align-items: center;
  color: var(--lx-body);
}

.lx-pdp-reviews__summary {
  display: grid;
  gap: var(--lx-s-5);
  padding: var(--lx-s-5);
  background: var(--lx-fog);
}

.lx-pdp-reviews__score {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
  align-items: baseline;
  color: var(--lx-body);
}

.lx-pdp-reviews__score span:first-child {
  color: var(--lx-deep);
  letter-spacing: 0.08em;
}

.lx-pdp-reviews__score strong {
  color: var(--lx-ink);
  font-family: var(--lx-font);
  font-size: clamp(32px, 5vw, 40px);
  font-weight: var(--lx-w-display);
  line-height: 1;
}

.lx-pdp-reviews__histogram {
  display: grid;
  gap: var(--lx-s-2);
}

.lx-pdp-reviews__row {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr) 4em;
  gap: var(--lx-s-3);
  align-items: center;
  color: var(--lx-body);
  font-size: var(--lx-text-small);
  font-weight: 500;
}

.lx-pdp-reviews__row-label {
  color: var(--lx-deep);
  letter-spacing: 0.04em;
}

.lx-pdp-reviews__bar {
  display: block;
  height: 8px;
  overflow: hidden;
  background: var(--lx-line);
  border-radius: 9999px;
}

.lx-pdp-reviews__bar > span {
  display: block;
  width: var(--lx-review-bar, 0%);
  height: 100%;
  background: var(--lx-deep);
  border-radius: inherit;
}

.lx-pdp-reviews__row-count {
  color: var(--lx-muted);
  text-align: end;
}

.lx-pdp-reviews__list {
  display: grid;
  gap: var(--lx-s-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.lx-pdp-reviews__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-3);
  align-items: center;
  margin-block-end: var(--lx-s-3);
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  font-weight: 500;
}

.lx-pdp-reviews__meta span:first-child,
.lx-pdp-reviews__head p span {
  color: var(--lx-deep);
  letter-spacing: 0.08em;
}

.lx-pdp-reviews__post {
  display: grid;
  gap: var(--lx-s-3);
  padding-block-start: var(--lx-s-5);
  border-block-start: var(--lx-hairline);
}

.lx-pdp-related {
  display: grid;
  gap: var(--lx-s-5);
  margin-block-start: var(--lx-section-gap);
}

.lx-pdp-related__head {
  margin-block-end: 0;
}

.lx-pdp-related__grid--compact {
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--lx-gutter) * -1);
  padding-inline: var(--lx-gutter);
  padding-block-end: 8px;
  overflow-x: auto;
  scroll-padding-inline: var(--lx-gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.lx-pdp-related__grid--compact::-webkit-scrollbar {
  display: none;
}

.lx-pdp-related__grid--compact > li {
  flex: 0 0 44%;
  scroll-snap-align: start;
}

/* RelatedProduct4 still injects its legacy block via plugin namespace. The
   renewed PDP renders the same real data above with tax-included prices. */
.ec-shelfRole#RelatedProduct-product_area {
  display: none;
}

@media (max-width: 767px) {
  .lx-pdp__buybox h1 {
    font-size: var(--lx-text-h1);
  }

  .lx-pdp__image {
    height: min(330px, calc(100vw - (var(--lx-gutter) * 2)));
    aspect-ratio: auto;
  }

  .lx-pdp__image img {
    width: 82%;
    height: 82%;
  }

  .lx-pdp__facts {
    grid-template-columns: 1fr 1fr;
  }

  .lx-pdp__buybar {
    padding-bottom: calc(var(--lx-s-3) + var(--lx-safe-bottom));
  }

  body:has(.lx-pdp__buybar:not([hidden])) .ec-blockTopBtn {
    bottom: calc(var(--lx-s-4) + var(--lx-control-h) + var(--lx-s-6) + var(--lx-safe-bottom));
    z-index: 70;
  }

  /* Lifted onto the buy bar, whose padding already holds the safe-area inset: count it once. */
  body:has(.lx-pdp__buybar:not([hidden])) .lx-cookie {
    min-height: 56px;
    padding-bottom: 5px;
    transform: translateY(calc((var(--lx-control-h) + var(--lx-s-6) + var(--lx-safe-bottom)) * -1));
  }
}

@media (min-width: 768px) {
  .lx-pdp__hero {
    grid-template-columns: minmax(0, 6fr) minmax(360px, 5fr);
    align-items: start;
    gap: var(--lx-s-9);
  }

  .lx-pdp__buybox h1 {
    font-size: 36px;
  }

  .lx-pdp__gallery {
    position: relative;
  }

  .lx-pdp__thumbs {
    gap: var(--lx-s-3);
  }

  .lx-pdp__thumb {
    flex-basis: 76px;
  }

  .lx-pdp__variant {
    grid-template-columns: var(--lx-touch) minmax(0, 1fr) auto;
  }

  .lx-pdp__variant-price {
    grid-column: auto;
    justify-items: end;
    text-align: end;
  }

  .lx-pdp-related__grid--compact {
    display: grid;
    grid-template-columns: repeat(var(--lx-related-count, 1), minmax(200px, 240px));
    justify-content: start;
    gap: 48px 24px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .lx-pdp-related__grid--compact > li {
    min-width: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lx-pdp-related__grid--compact {
    grid-template-columns: repeat(var(--lx-related-count, 1), minmax(0, 1fr));
  }

  .lx-pdp-related .lx-card__price {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    align-items: baseline;
    line-height: 1.35;
  }

  .lx-pdp-related .lx-card__pack,
  .lx-pdp-related .lx-card__range,
  .lx-pdp-related .lx-card__tax {
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .lx-pdp__gallery {
    position: sticky;
    top: calc(var(--lx-header-h) + var(--lx-s-6));
  }
}

@media (min-width: 1024px) {
  .lx-pdp__buybox,
  .lx-pdp__form {
    gap: var(--lx-s-3);
  }

  .lx-pdp__variants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lx-s-2);
  }

  .lx-pdp__variants legend {
    grid-column: 1 / -1;
  }

  .lx-pdp__variants:not(.is-expanded) .lx-pdp__variant:nth-of-type(n+5) {
    display: none;
  }

  .lx-pdp__variant-expand {
    grid-column: 1 / -1;
    min-height: var(--lx-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-pill);
    color: var(--lx-link);
    background: var(--lx-paper);
    font-size: var(--lx-text-small);
    font-weight: var(--lx-w-label);
    cursor: pointer;
  }

  .lx-pdp__variants.is-expanded .lx-pdp__variant-expand {
    display: none;
  }

  .lx-pdp__variant {
    grid-template-columns: var(--lx-s-6) minmax(0, 1fr) auto;
    gap: var(--lx-s-2);
    align-items: center;
    min-height: 64px;
    padding: var(--lx-s-2) var(--lx-s-3);
  }

  .lx-pdp__variant input {
    margin-block-start: 0;
  }

  .lx-pdp__variant strong {
    font-size: 14px;
    line-height: 1.45;
  }

  .lx-pdp__variant > span:first-of-type small,
  .lx-pdp__variant-price del {
    display: none;
  }

  .lx-pdp__variant-price {
    grid-column: 3;
    gap: 0;
    justify-items: end;
    text-align: end;
  }

  .lx-pdp__variant-price .lx-price {
    font-size: 16px;
  }

  .lx-pdp__variant-price small {
    font-size: 14px;
  }
}

@media (max-width: 1023px) {
  .lx-pdp__variant-expand {
    display: none;
  }
}