/* =============================================================================
   PRODUCT DETAIL — responsive shell (no fixed heights, content-driven)
   ============================================================================= */

#productDetail.ls-pdp-page {
  font-family: var(--ls-font, "Outfit", "Inter", system-ui, sans-serif);
  background: var(--ls-bg, #f7f7f8);
}

.pdp-shell {
  max-width: var(--ls-max, 1440px);
  margin: 0 auto;
  padding: var(--ls-s2, 16px);
  padding-bottom: calc(var(--ls-s4, 32px) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.pdp-shell__upper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ls-s2, 16px);
  align-items: start;
}

.pdp-gallery {
  background: var(--ls-surface, #fff);
  border-radius: var(--ls-r-md, 16px);
  border: 1px solid var(--ls-line, #e8e8ec);
  padding: var(--ls-s1, 8px);
  box-sizing: border-box;
}

.pdp-gallery #detailImageBox {
  width: 100%;
  min-height: 0;
  aspect-ratio: unset;
  max-width: none;
  margin: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.pdp-gallery .detail-main-img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

.pdp-shop {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pdp-shop [hidden] {
  display: none !important;
}

.pdp-shop #detailTitle {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 4.5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.35;
  color: var(--ls-ink, #0c0c0e);
  display: block;
  overflow: visible;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.pdp-shop #detailDiscountBadge,
.pdp-shop .detail-discount-badge-wrap {
  margin: 0;
}

.pdp-shop #detailPlatformBadgeWrap,
.pdp-shop .detail-platform-badge-wrap {
  margin: 0;
}

.pdp-shop #detailPrice,
.pdp-shop .pdp-price-block {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}

.pdp-rating-inline {
  display: none;
  align-items: center;
  gap: var(--ls-s1, 8px);
  font-size: 0.8125rem;
  color: var(--ls-muted, #64656b);
}

.pdp-rating-inline.is-visible {
  display: flex;
}

.pdp-rating-inline__stars {
  display: inline-flex;
  gap: 2px;
  color: #f59e0b;
}

.pdp-rating-inline__star:not(.is-on) {
  opacity: 0.28;
}

.pdp-rating-inline__count {
  color: var(--ls-muted, #64656b);
}

.pdp-reviews__star.is-on {
  color: #f59e0b;
}

.pdp-reviews__star:not(.is-on) {
  color: #d4d4d8;
}

.pdp-delivery__text,
.pdp-delivery__list {
  font-size: 0.8125rem;
  color: var(--ls-muted, #64656b);
  line-height: 1.5;
  margin: 0;
}

.pdp-delivery__list {
  padding-left: 1.1rem;
}

#productDetail.ls-pdp-page #detailImageBox {
  aspect-ratio: unset !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

#productDetail.ls-pdp-page .detail-main-visual {
  min-height: 0 !important;
}

#productDetail.ls-pdp-page .detail-gallery-ck {
  display: flex;
  flex-direction: column;
  gap: var(--ls-s1, 8px);
  height: auto !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

@media (max-width: 767px) {
  .pdp-shell {
    display: flex;
    flex-direction: column;
  }

  .pdp-shell__upper {
    display: flex;
    flex-direction: column;
  }

  .pdp-gallery {
    order: 1;
  }

  .pdp-shop {
    order: 2;
  }
}

@media (min-width: 768px) {
  .pdp-shell__upper {
    display: grid;
  }
}


.pdp-rating-inline__score {
  font-weight: 700;
  color: var(--ls-ink, #0c0c0e);
}

.pdp-price-block,
#productDetail #detailPrice.pdp-price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ls-s1, 8px) var(--ls-s2, 16px);
  margin: 0;
  padding: 0;
  border: none;
  color: var(--ls-ink, #0c0c0e) !important;
}

.pdp-price-block .detail-price-main {
  font-size: clamp(1.375rem, 5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ls-ink, #0c0c0e) !important;
}

.pdp-price-block .old-price {
  font-size: 0.9375rem;
  color: var(--ls-muted, #64656b);
  text-decoration: line-through;
}

.pdp-price-block .discount {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ls-green, #0f7a45);
  background: var(--ls-green-soft, #e8f5ee);
  padding: 4px 10px;
  border-radius: var(--ls-r-sm, 8px);
}

.detail-price-caption:empty,
.detail-premium-perks:empty,
.detail-meta-line:empty,
.detail-discount-badge-wrap:empty,
.detail-platform-badge-wrap:empty,
.detail-choose-deal-wrap:empty,
#detailBuyButtons:empty {
  display: none;
}

.detail-premium-perks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ls-s1, 8px);
}

.detail-premium-perk {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--ls-r-sm, 8px);
  background: #f4f4f5;
}

.detail-best-deal-card {
  border-radius: var(--ls-r-md, 16px);
  border: 1px solid var(--ls-line, #e8e8ec);
  padding: var(--ls-s2, 16px);
  background: var(--ls-surface, #fff);
}

.grab-deal-btn,
.pdp-cta-primary {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: var(--ls-r-md, 16px);
  font-size: 0.9375rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ls-ink, #0c0c0e), #27272a);
  color: #fff;
  cursor: pointer;
}

.cart-btn-detail {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--ls-line, #e8e8ec);
  border-radius: var(--ls-r-md, 16px);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}

.pdp-shell__flow {
  display: flex;
  flex-direction: column;
  gap: var(--ls-s2, 16px);
  margin-top: var(--ls-s2, 16px);
}

.pdp-block {
  background: var(--ls-surface, #fff);
  border-radius: var(--ls-r-md, 16px);
  border: 1px solid var(--ls-line, #e8e8ec);
  padding: var(--ls-s2, 16px);
}

.pdp-block.is-empty {
  display: none !important;
}

.pdp-block--highlights .pdp-highlights__title {
  margin: 0 0 var(--ls-s2, 16px);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ls-ink, #0c0c0e);
}

.pdp-highlights__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ls-s2, 16px);
}

.pdp-highlights__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ls-s2, 16px);
}

.pdp-highlights__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f4f4f5;
  color: var(--ls-ink, #0c0c0e);
  font-size: 0.875rem;
}

.pdp-highlights__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pdp-highlights__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ls-ink, #0c0c0e);
}

.pdp-highlights__text {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ls-muted, #64656b);
}

@media (min-width: 768px) {
  .pdp-highlights__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ls-s2, 16px) var(--ls-s3, 24px);
  }
}

.pdp-block--specs .detail-meta-line {
  margin: 0 0 var(--ls-s1, 8px);
  font-size: 0.8125rem;
  color: var(--ls-muted, #64656b);
}

.pdp-block--desc .detail-desc-block {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ls-muted, #64656b);
}

.pdp-delivery__title {
  margin: 0 0 var(--ls-s1, 8px);
  font-size: 0.875rem;
  font-weight: 700;
}

.pdp-reviews__title {
  margin: 0 0 var(--ls-s2, 16px);
  font-size: 0.9375rem;
  font-weight: 700;
}

.pdp-shell__below {
  margin-top: var(--ls-s3, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--ls-s3, 24px);
}

.pdp-section {
  padding-top: var(--ls-s2, 16px);
  border-top: 1px solid var(--ls-line, #e8e8ec);
}

.pdp-section[hidden],
.pdp-section.is-empty {
  display: none !important;
}

.pdp-section__title,
.ls-pdp-more__title {
  margin: 0 0 var(--ls-s2, 16px);
  font-size: 1.0625rem;
  font-weight: 700;
}

.pdp-section__rail {
  display: flex;
  gap: var(--ls-s2, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* PDP related — vertical list (each card is image-left row) */
.pdp-related-stack,
#moreProductsList.pdp-related-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pdp-related-stack > .pc--compact {
  width: 100%;
  max-width: 100%;
  flex: none;
  flex-direction: row;
  align-items: stretch;
  border-radius: 14px;
  border: 1px solid var(--ls-line, #e8e8ec);
  box-shadow: 0 2px 14px rgba(12, 12, 14, 0.06);
  scroll-snap-align: unset;
}

.pdp-related-stack > .pc--compact .pc__media {
  flex: 0 0 96px;
  width: 96px;
  min-width: 96px;
  aspect-ratio: 1 / 1;
  padding: 8px;
  border-radius: 12px 0 0 12px;
  background: #f7f7f8;
}

.pdp-related-stack > .pc--compact .pc__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 12px 12px 4px;
  gap: 8px;
  justify-content: center;
}

.pdp-related-stack > .pc--compact .pc__title {
  font-size: 0.8125rem;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: calc(2 * 1.35em);
  margin: 0 0 4px;
}

.pdp-related-stack > .pc--compact .pc__prices {
  margin-top: 2px;
}

.pdp-related-stack > .pc--compact .pc__btn {
  align-self: flex-start;
  width: auto;
  min-width: 108px;
  min-height: 40px;
  margin-top: 6px;
  padding: 8px 16px;
  font-size: 0.8125rem;
}

@media (min-width: 768px) {
  .pdp-related-stack,
  #moreProductsList.pdp-related-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1200px) {
  .pdp-related-stack,
  #moreProductsList.pdp-related-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .pdp-related-stack > .pc--compact .pc__media {
    flex: 0 0 108px;
    width: 108px;
    min-width: 108px;
  }
}

.detail-gallery-ck {
  display: flex;
  flex-direction: column;
  gap: var(--ls-s1, 8px);
}

.detail-thumb-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--ls-s1, 8px);
  overflow-x: auto;
}

.detail-thumb-strip button,
.detail-thumb-strip img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--ls-r-sm, 8px);
  object-fit: contain;
}

.pdp-sticky-bar.detail-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  background: transparent;
  backdrop-filter: none;
  border: none;
  padding: 0 max(var(--ls-s2, 16px), env(safe-area-inset-left))
    calc(10px + env(safe-area-inset-bottom, 0px))
    max(var(--ls-s2, 16px), env(safe-area-inset-right));
  pointer-events: none;
}

.pdp-sticky-bar.detail-sticky-cta--visible {
  pointer-events: auto;
}

.pdp-sticky-bar .detail-sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: var(--ls-s2, 16px);
  max-width: min(520px, 100%);
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.38);
}

.pdp-sticky-bar .detail-sticky-cta__primary {
  flex: 1 1 auto;
  min-height: 48px;
  max-width: 240px;
  margin-left: auto;
  background: var(--ls-ink, #0c0c0e);
  color: #fff;
  border: none;
  border-radius: var(--ls-r-md, 16px);
  font-weight: 700;
}

body.product-detail-sticky-on {
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (min-width: 768px) {
  .pdp-shell {
    padding: var(--ls-s3, 24px);
  }

  .pdp-shell__upper {
    grid-template-columns: 1fr 1fr;
    gap: var(--ls-s3, 24px);
  }

  .pdp-shop {
    position: sticky;
    top: calc(var(--ls-header, 96px) + var(--ls-s1, 8px));
    max-height: calc(100vh - var(--ls-header, 96px) - var(--ls-s3, 24px));
    overflow-y: auto;
    padding: var(--ls-s2, 16px);
    background: var(--ls-surface, #fff);
    border-radius: var(--ls-r-md, 16px);
    border: 1px solid var(--ls-line, #e8e8ec);
    box-shadow: var(--ls-shadow-lg, 0 8px 32px rgba(12, 12, 14, 0.08));
  }

  .pdp-shell__flow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ls-s2, 16px);
  }

  .pdp-block--desc {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .detail-gallery-ck {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ls-s2, 16px);
  }

  .detail-thumb-strip {
    flex-direction: column;
    width: 72px;
    flex: 0 0 72px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(480px, 65vh);
    position: relative;
    z-index: 3;
  }

  .detail-main-visual {
    flex: 1;
    min-width: 0;
    z-index: 1;
  }
}

@media (min-width: 1024px) {
  .pdp-shell__upper {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--ls-s4, 32px);
  }

  .pdp-sticky-bar.detail-sticky-cta--visible {
    display: none !important;
  }

  body.product-detail-sticky-on {
    padding-bottom: 0 !important;
  }
}

@media (min-width: 1440px) {
  .pdp-shell {
    padding: var(--ls-s4, 32px);
  }
}