/* =============================================================================
   DD COMPONENTS PRODUCTION — unified atoms, states, QA (load last)
   Test widths: 390 · 768 · 1024 · 1440 · 1920
   ============================================================================= */

/* —— Atoms: identical typography & shadows —— */
.dd-offer-badge,
.pc__disc-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--dd-font);
  font-size: var(--dd-text-xs);
  font-weight: var(--dd-weight-bold);
  color: var(--dd-green);
  background: var(--dd-green-soft);
  padding: 2px var(--dd-space-2);
  border-radius: var(--dd-radius-sm);
  line-height: 1.2;
}

.dd-offer-badge--corner,
.pc__disc-badge--flash-corner {
  position: absolute;
  top: var(--dd-space-2);
  left: var(--dd-space-2);
  z-index: 2;
  color: #fff;
  background: var(--dd-ink);
  border-radius: var(--dd-radius-sm);
}

.dd-cashback-badge,
.pc__cashback {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--dd-font);
  font-size: var(--dd-text-xs);
  font-weight: var(--dd-weight-semibold);
  color: var(--dd-green);
}

.dd-rating,
.pc__rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--dd-font);
  font-size: var(--dd-text-xs);
  font-weight: var(--dd-weight-medium);
  color: var(--dd-muted);
}

.dd-rating i,
.pc__rating i {
  color: var(--dd-star);
  font-size: 0.625rem;
}

.dd-price__now,
.pc__price {
  font-family: var(--dd-font);
  font-size: var(--dd-text-lg);
  font-weight: var(--dd-weight-bold);
  letter-spacing: var(--dd-tracking-tight);
  color: var(--dd-ink);
}

.dd-price__was,
.pc__mrp {
  font-family: var(--dd-font);
  font-size: var(--dd-text-sm);
  color: var(--dd-muted);
  text-decoration: line-through;
}

/* —— Category pill —— */
.dd-category-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--dd-font);
  font-size: var(--dd-text-xs);
  font-weight: var(--dd-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dd-muted);
  background: var(--dd-bg);
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-radius-pill);
  padding: 4px 10px;
  cursor: pointer;
  min-height: 28px;
  box-sizing: border-box;
}

.dd-category-pill--inline {
  pointer-events: none;
  margin-bottom: var(--dd-space-2);
  align-self: flex-start;
}

.dd-category-pill--active {
  color: var(--dd-ink);
  background: var(--dd-surface);
  border-color: var(--dd-ink);
}

/* —— Cards: unified shadow & motion —— */
.pc,
.ls-hero-full__glass,
.ls-banner-large,
.pdp-gallery,
.pdp-shop,
.pdp-block {
  box-shadow: var(--dd-shadow-sm);
  transition: box-shadow var(--dd-duration) var(--dd-ease);
}

.pc:hover {
  box-shadow: var(--dd-shadow-md);
}

.pc {
  font-family: var(--dd-font);
  border-radius: var(--dd-radius-lg);
  border: 1px solid var(--dd-line);
}

.pc__title {
  font-size: var(--dd-text-sm);
  font-weight: var(--dd-weight-semibold);
  line-height: var(--dd-leading-tight);
  color: var(--dd-ink);
}

.pc__btn {
  font-family: var(--dd-font);
  font-size: var(--dd-text-sm);
  font-weight: var(--dd-weight-semibold);
  border-radius: var(--dd-radius-md);
  min-height: var(--dd-touch);
  background: var(--dd-ink);
  color: #fff;
  border: none;
  box-shadow: none;
  transition: opacity var(--dd-duration) var(--dd-ease);
}

.pc__btn:hover:not(:disabled) {
  opacity: 0.88;
}

.pc__img,
.ls-frame__img,
.detail-main-img {
  object-fit: contain !important;
  object-position: center;
}

/* —— Carousel —— */
.dd-carousel,
.ls-pc-rail,
.pc-rail {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .pc,
  .dd-carousel,
  .ls-pc-rail,
  .ls-hero-full {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* —— Skeleton —— */
.dd-skeleton__media,
.dd-skeleton__line,
.pc__skel-block,
.pc__skel-line {
  background: linear-gradient(
    90deg,
    #f0f0f2 25%,
    #e8e8ec 50%,
    #f0f0f2 75%
  );
  background-size: 200% 100%;
  animation: ddShimmer 1.2s ease-in-out infinite;
  border-radius: var(--dd-radius-sm);
}

.dd-skeleton__line {
  height: 12px;
  margin-bottom: 8px;
}

.dd-skeleton__line--title {
  height: 14px;
  width: 85%;
}

.dd-skeleton__line--short {
  width: 55%;
}

.dd-skeleton__media,
.dd-skeleton__hero-visual {
  aspect-ratio: 1;
  width: 100%;
  border-radius: var(--dd-radius-lg);
}

@keyframes ddShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* —— Empty / Error states —— */
.dd-empty-state,
.dd-error-state {
  font-family: var(--dd-font);
  text-align: center;
  padding: var(--dd-space-6) var(--dd-space-4);
  max-width: 420px;
  margin: var(--dd-space-5) auto;
}

.dd-empty-state__title,
.dd-error-state__title {
  font-size: var(--dd-text-lg);
  font-weight: var(--dd-weight-semibold);
  color: var(--dd-ink);
  margin: var(--dd-space-3) 0 var(--dd-space-2);
}

.dd-empty-state__message,
.dd-error-state__message {
  font-size: var(--dd-text-sm);
  color: var(--dd-muted);
  line-height: var(--dd-leading-normal);
  margin: 0 0 var(--dd-space-4);
}

.dd-empty-state__action,
.dd-error-state__retry {
  font-family: var(--dd-font);
  font-size: var(--dd-text-sm);
  font-weight: var(--dd-weight-semibold);
  min-height: var(--dd-touch);
  padding: 0 var(--dd-space-5);
  border-radius: var(--dd-radius-md);
  background: var(--dd-ink);
  color: #fff;
  border: none;
  cursor: pointer;
}

.dd-error-state__icon {
  color: var(--dd-accent);
  font-size: 1.5rem;
}

/* —— Section header rhythm —— */
.ls-block-head__title {
  font-family: var(--dd-font) !important;
  font-size: var(--dd-text-lg) !important;
  font-weight: var(--dd-weight-semibold) !important;
  letter-spacing: var(--dd-tracking-tight) !important;
}

.ls-block-head__sub {
  font-family: var(--dd-font) !important;
  font-size: var(--dd-text-sm) !important;
}

/* —— Sticky bottom bar —— */
.dd-sticky-bottom-bar,
.pdp-sticky-bar {
  font-family: var(--dd-font);
  box-shadow: 0 -4px 24px rgba(12, 12, 14, 0.08);
}

/* =============================================================================
   GRID COLLAPSE FIX — section shells must NOT be CSS grids (only .ls-pc-grid)
   ============================================================================= */

.ls-sec,
.ls-sec--flash,
.ls-sec--new,
.ls-sec--cashback,
.ls-sec--magazine,
.ls-sec--lookbook,
.ls-sec--premium-dark,
.ls-sec--recommended,
.ls-sec--editorial,
.ls-sec--masonry,
.ls-sec--brand,
.ls-sec--slider,
.ls-sec--bestsellers,
.ls-sec--creator,
.ls-sec--category,
.ls-sec--duo,
.ls-sec--collection-full,
.ls-sec--staff,
.ls-sec--banner,
.ls-sec--video {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: unset !important;
}

.ls-pc-grid,
.ls-pc-rail,
.pc-rail,
.dd-carousel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.ls-pc-grid {
  grid-auto-rows: auto !important;
}

.ls-pc-grid > .pc,
.ls-pc-rail > .pc,
.pc-rail > .pc,
.dd-category-grid > .pc {
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

.ls-pc-grid > .pc,
.dd-category-grid > .pc {
  width: 100% !important;
  flex: none !important;
}

/* Compact in product grids → vertical (never crushed) */
.ls-pc-grid > .pc--compact,
.dd-category-grid > .pc--compact {
  flex-direction: column !important;
  align-items: stretch !important;
}

.ls-pc-grid > .pc--compact .pc__media,
.dd-category-grid > .pc--compact .pc__media {
  width: 100% !important;
  flex: 0 0 auto !important;
}

/* Mobile/tablet rails: horizontal scroll, fixed card widths */
@media (max-width: 1023px) {
  .ls-pc-rail,
  .pc-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }

  .ls-pc-rail > .pc,
  .pc-rail > .pc {
    flex: 0 0 var(--pc-rail-w, 168px) !important;
    width: var(--pc-rail-w, 168px) !important;
  }

  .ls-pc-rail > .pc--compact,
  .pc-rail > .pc--compact {
    flex: 0 0 var(--pc-rail-compact-w, 280px) !important;
    width: var(--pc-rail-compact-w, 280px) !important;
    flex-direction: row !important;
  }

  .ls-pc-rail > .pc--compact .pc__media,
  .pc-rail > .pc--compact .pc__media {
    width: 88px !important;
    flex: 0 0 88px !important;
  }
}

/* Laptop+: rails wrap — flex rows fill partial last row */
@media (min-width: 1024px) {
  .ls-sec--slider .ls-pc-rail,
  .ls-sec--bestsellers .ls-pc-rail,
  .ls-sec--creator .ls-pc-rail,
  .ls-pc-rail.ls-pc-rail--grid,
  .pc-rail:not(#moreProductsList):not(.pdp-section__rail) {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: var(--dd-grid-gap, var(--ls-s2, 16px)) !important;
    width: 100% !important;
  }

  .ls-sec--slider .ls-pc-rail > .pc,
  .ls-sec--bestsellers .ls-pc-rail > .pc,
  .ls-sec--creator .ls-pc-rail > .pc,
  .ls-pc-rail > .pc,
  .pc-rail > .pc {
    flex: 1 1 calc((100% - 5 * var(--dd-grid-gap, 16px)) / 6) !important;
    min-width: min(168px, 100%) !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  .ls-pc-rail > .pc--compact,
  .pc-rail > .pc--compact {
    flex-direction: column !important;
  }

  .ls-pc-rail > .pc--compact .pc__media,
  .pc-rail > .pc--compact .pc__media {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* Button must not cover price */
.pc__body {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--dd-space-2, 8px) !important;
}

.pc__prices,
.pc__meta {
  position: relative !important;
  z-index: 1 !important;
}

.pc__btn {
  position: relative !important;
  z-index: 2 !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
}

/* Full-width store on PC + mobile (edge gutters only) */
.ls-store,
#homeSmartContainer.ls-store,
#dealz-container.ls-store {
  width: 100% !important;
  max-width: 100% !important;
}

.ls-block__inner,
.ls-block--flush {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ls-block__content {
  width: 100% !important;
  min-width: 0 !important;
}

/* —— Production: no horizontal scroll, stable cards —— */
.ls-store,
.pdp-shell,
#search.page.active,
.main-content {
  overflow-x: clip;
  max-width: 100%;
}

.pc,
.ls-pc-grid > .pc,
.dd-category-grid > .pc {
  min-width: 0;
  max-width: 100%;
  height: auto !important;
}

/* —— Ultra-wide 1920+ —— */
@media (min-width: 1920px) {
  :root {
    --dd-content-max: 1280px;
  }

  .ls-block__inner,
  .ls-block--flush,
  .pdp-shell,
  .ck-home-trust,
  #search .search-page-shell,
  .site-footer-main {
    max-width: var(--dd-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ls-pc-grid--dense {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body {
    background: var(--dd-bg);
  }
}

/* =============================================================================
   PACKED ROWS — flex wrap: partial last rows stretch (no empty grid columns)
   ============================================================================= */

.ls-pc-grid:not(.ls-pc-grid--magazine):not(.ls-pc-grid--duo) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--dd-grid-gap, var(--ls-s2, 16px)) !important;
  align-items: stretch !important;
  width: 100% !important;
}

.ls-pc-grid:not(.ls-pc-grid--magazine):not(.ls-pc-grid--duo) > .pc {
  flex: 1 1 calc((100% - 5 * var(--dd-grid-gap, 16px)) / 6) !important;
  min-width: min(160px, 100%) !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  align-self: stretch !important;
}

.ls-pc-grid--flash > .pc,
.ls-pc-grid--cashback > .pc,
.ls-pc-grid--lookbook > .pc {
  flex: 1 1 calc((100% - 3 * var(--dd-grid-gap, 16px)) / 4) !important;
  min-width: min(180px, 100%) !important;
}

.ls-pc-grid--editorial > .pc,
.ls-pc-grid--brand > .pc,
.ls-pc-grid--staff > .pc,
.ls-pc-grid--featured-row > .pc {
  flex: 1 1 calc((100% - 3 * var(--dd-grid-gap, 16px)) / 4) !important;
  min-width: min(220px, 100%) !important;
}

.ls-pc-grid--recommended > .pc {
  flex: 1 1 calc((100% - 3 * var(--dd-grid-gap, 16px)) / 4) !important;
  min-width: min(200px, 100%) !important;
}

.ls-pc-grid--magazine,
.ls-pc-grid--duo {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: var(--dd-grid-gap, var(--ls-s2, 16px)) !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .ls-pc-grid--magazine,
  .ls-pc-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.ls-pc-grid--magazine > .pc,
.ls-pc-grid--duo > .pc {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.ls-pc-grid .pc__media {
  contain: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 128px !important;
  aspect-ratio: 1 / 1 !important;
}

.ls-pc-grid .pc--featured .pc__media {
  aspect-ratio: 4 / 3 !important;
  min-height: 140px !important;
}

.ls-pc-grid .pc__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Never show empty placeholder slots in production grids */
.pc--placeholder {
  display: none !important;
}

/* Flash sale: no black overlay strip on product image (discount stays in price row) */
.ls-sec--flash .pc__disc-badge--flash-corner,
.pc--flash .pc__disc-badge--flash-corner {
  display: none !important;
}

/* Hero CTA must stay readable on dark button */
.ls-hero-full__actions .ls-btn--primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* =============================================================================
   PDP MOBILE — compact gallery, tappable thumbs, no sticky-bar overlap
   ============================================================================= */

@media (max-width: 1023px) {
  #productDetail.ls-pdp-page .pdp-gallery {
    padding-bottom: 4px !important;
  }

  #productDetail.ls-pdp-page #detailImageBox {
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #productDetail.ls-pdp-page .detail-gallery-ck {
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 10px !important;
  }

  #productDetail.ls-pdp-page .detail-main-visual {
    order: 1 !important;
    flex: none !important;
    width: 100% !important;
    min-height: 0 !important;
    z-index: 1 !important;
  }

  #productDetail.ls-pdp-page .detail-zoom-img-wrap {
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
  }

  #productDetail.ls-pdp-page .detail-main-visual .detail-main-img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(56vw, 360px) !important;
    object-fit: contain !important;
    display: block !important;
  }

  #productDetail.ls-pdp-page .detail-thumb-strip {
    order: 2 !important;
    flex-direction: row !important;
    flex: none !important;
    width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 2px 0 6px !important;
    margin-bottom: 0 !important;
    z-index: 910 !important;
    position: relative !important;
    pointer-events: auto !important;
  }

  #productDetail.ls-pdp-page .detail-thumb-btn {
    flex: 0 0 56px !important;
    width: 56px !important;
    scroll-snap-align: start;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #productDetail.ls-pdp-page .detail-thumb-btn img {
    width: 56px !important;
    height: 56px !important;
    pointer-events: none;
  }

  #productDetail .detail-zoom-lens,
  #productDetail .detail-zoom-pane {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #productDetail.ls-pdp-page .pdp-shell {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 1023px) {
  #detailStickyBar.pdp-sticky-bar.detail-sticky-cta,
  #detailStickyBar.detail-sticky-cta {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #detailStickyBar .detail-sticky-cta__inner {
    width: 100% !important;
    max-width: min(520px, 100%) !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.38) !important;
    flex-wrap: nowrap !important;
  }

  #detailStickyBar .detail-sticky-cta__label,
  #detailStickyBar .detail-sticky-cta__amt {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
}

@media (min-width: 1024px) and (pointer: fine) {
  #productDetail .detail-zoom-lens {
    display: block;
  }
}

/* =============================================================================
   SPOTLIGHT BANNER — full-width editorial card (overrides calm/legacy caps)
   ============================================================================= */

.ls-block--banner-large .ls-block__content {
  width: 100% !important;
}

.ls-banner-large.ls-spotlight {
  width: 100% !important;
  max-width: 100% !important;
  background: #fff !important;
  border: 1px solid var(--dd-line, #e8e8ec) !important;
  border-radius: var(--dd-radius-lg, 16px) !important;
  box-shadow: 0 8px 32px rgba(12, 12, 14, 0.08) !important;
  overflow: hidden !important;
  transition: box-shadow var(--dd-duration, 0.22s) ease, transform var(--dd-duration, 0.22s) ease;
}

.ls-banner-large.ls-spotlight:hover {
  box-shadow: 0 12px 40px rgba(12, 12, 14, 0.11) !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "media"
    "copy" !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__media {
  grid-area: media !important;
  width: 100% !important;
  min-height: 200px !important;
  max-height: min(52vw, 340px) !important;
  aspect-ratio: 16 / 9 !important;
  background: linear-gradient(160deg, #f4f5f7 0%, #e9ebef 100%) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 3vw, 28px) !important;
  box-sizing: border-box !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__media .ls-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__media .ls-frame__img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__copy {
  grid-area: copy !important;
  padding: clamp(16px, 2.5vw, 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__title,
.ls-banner-large.ls-spotlight .ls-banner-large__copy h3 {
  margin: 0 !important;
  font-family: var(--dd-font) !important;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  color: var(--dd-ink, #0c0c0e) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 12px !important;
  width: 100% !important;
}

.ls-banner-large.ls-spotlight .ls-price {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px 10px !important;
}

.ls-banner-large.ls-spotlight .ls-price__now {
  font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
  font-weight: 800 !important;
  color: var(--dd-ink, #0c0c0e) !important;
}

.ls-banner-large.ls-spotlight .ls-price--light .ls-price__now {
  color: var(--dd-ink, #0c0c0e) !important;
}

.ls-banner-large.ls-spotlight .ls-price--light .ls-price__was {
  font-size: 0.875rem !important;
  color: var(--dd-muted, #64656b) !important;
}

.ls-banner-large.ls-spotlight .ls-price__off {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--dd-green, #0f7a45) !important;
  background: var(--dd-green-soft, #e8f5ee) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__perks {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.ls-banner-large.ls-spotlight .ls-cashback {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--dd-green, #0f7a45) !important;
  background: var(--dd-green-soft, #e8f5ee) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: none !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__cta {
  margin-top: 4px !important;
  width: auto !important;
  min-width: 148px !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  background: var(--dd-ink, #0c0c0e) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(12, 12, 14, 0.18) !important;
}

.ls-banner-large.ls-spotlight .ls-banner-large__cta:hover:not(:disabled) {
  opacity: 0.92 !important;
}

@media (min-width: 768px) {
  .ls-banner-large.ls-spotlight .ls-banner-large__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    grid-template-areas: "copy media" !important;
    align-items: stretch !important;
    min-height: 260px !important;
  }

  .ls-banner-large.ls-spotlight .ls-banner-large__media {
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 100% !important;
    height: auto !important;
    align-self: stretch !important;
    padding: clamp(20px, 3vw, 36px) !important;
  }
}

@media (min-width: 1024px) {
  .ls-banner-large.ls-spotlight .ls-banner-large__grid {
    min-height: 300px !important;
  }

  .ls-banner-large.ls-spotlight .ls-banner-large__copy {
    padding: clamp(24px, 3vw, 32px) !important;
    gap: 12px !important;
  }
}

/* =============================================================================
   PDP — Load more related products (wrapper broke direct-child CSS)
   ============================================================================= */

#moreProductsList .detail-more-load-wrap {
  width: 100%;
  margin-top: var(--dd-space-4, 20px);
  padding-top: var(--dd-space-2, 8px);
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

#moreProductsList .load-more-btn--detail,
#moreProductsList .pdp-load-more {
  width: 100%;
  max-width: min(420px, 100%);
  margin: 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--dd-font);
  -webkit-tap-highlight-color: transparent;
}

#moreProductsList .load-more-btn--detail .load-more-btn__inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 22px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  border: 1px solid var(--dd-line, #e8e8ec) !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(12, 12, 14, 0.06) !important;
  color: var(--dd-ink, #0c0c0e) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease !important;
}

#moreProductsList .load-more-btn--detail:hover .load-more-btn__inner {
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(12, 12, 14, 0.1) !important;
}

#moreProductsList .load-more-btn--detail:active .load-more-btn__inner {
  transform: translateY(1px) !important;
}

#moreProductsList .load-more-btn--detail:focus-visible .load-more-btn__inner {
  outline: 2px solid rgba(15, 122, 69, 0.35) !important;
  outline-offset: 2px !important;
}

#moreProductsList .load-more-btn--detail .load-more-btn__leading {
  display: none !important;
}

#moreProductsList .load-more-btn--detail .load-more-btn__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  text-align: center !important;
}

#moreProductsList .load-more-btn--detail .load-more-btn__title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--dd-ink, #0c0c0e) !important;
  line-height: 1.2 !important;
}

#moreProductsList .load-more-btn--detail .load-more-btn__meta {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--dd-muted, #64656b) !important;
  line-height: 1.3 !important;
}

#moreProductsList .load-more-btn--detail .load-more-btn__caret {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #f4f4f5 !important;
  color: var(--dd-ink, #0c0c0e) !important;
  font-size: 0.6875rem !important;
}

/* =============================================================================
   EMPTY SHELL FIX — card text/price/button must never be clipped to zero height
   ============================================================================= */

.pc__body,
.pc__prices,
.pc__meta {
  overflow: visible !important;
}

/* line-clamp requires overflow:hidden — visible was collapsing title into price */
.pc__title {
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  min-height: calc(2 * 1.35em) !important;
  margin: 0 0 6px !important;
  line-height: 1.35 !important;
}

.pc--featured .pc__title {
  min-height: calc(3 * 1.35em) !important;
}

.pc__body {
  gap: 10px !important;
}

.pc__body > .pc__prices,
.pc__body > .dd-price.pc__prices {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* Legacy card-mini / product-title grids (home, deals, search, category) — NOT PDP h1 */
.product-title:not(#detailTitle),
.card-mini .product-title,
.multi-title {
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.35 !important;
  min-height: calc(2 * 1.35em) !important;
  margin: 0 0 8px !important;
}

.card-mini .info,
.card-mini .card-body {
  gap: 8px !important;
}

.card-mini .price-row,
.multi-price-row {
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}

/* =============================================================================
   PDP SHOP PANEL — full title flow, clear gaps (never card line-clamp rules)
   ============================================================================= */

#productDetail.ls-pdp-page #detailTitle.product-title,
#productDetail #detailTitle.product-title {
  display: block !important;
  overflow: visible !important;
  -webkit-box-orient: unset !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#productDetail.ls-pdp-page .pdp-shop,
#productDetail .pdp-shop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

#productDetail.ls-pdp-page .pdp-shop > *,
#productDetail .pdp-shop > * {
  flex: 0 0 auto !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

#productDetail.ls-pdp-page #detailDiscountBadge,
#productDetail.ls-pdp-page .detail-discount-badge-wrap,
#productDetail .detail-discount-badge-wrap {
  margin: 0 !important;
}

#productDetail.ls-pdp-page #detailPlatformBadgeWrap,
#productDetail.ls-pdp-page .detail-platform-badge-wrap,
#productDetail .detail-platform-badge-wrap {
  margin: 4px 0 0 !important;
}

#productDetail.ls-pdp-page #detailPrice,
#productDetail.ls-pdp-page #detailPrice.product-description,
#productDetail.ls-pdp-page .pdp-price-block,
#productDetail .detail-price-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 10px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: none !important;
}

#productDetail.ls-pdp-page #detailPriceCaption,
#productDetail.ls-pdp-page .detail-price-caption {
  margin: 0 !important;
}

#productDetail.ls-pdp-page #detailPremiumPerks,
#productDetail.ls-pdp-page .detail-premium-perks {
  margin: 0 !important;
}

#productDetail.ls-pdp-page .pdp-rating-inline.is-visible {
  margin: 0 !important;
}

.ls-sec--slider .ls-pc-rail > .pc,
.ls-sec--bestsellers .ls-pc-rail > .pc,
.ls-sec--creator .ls-pc-rail > .pc,
#moreProductsList.pc-rail > .pc,
.pdp-section__rail > .pc {
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

/* =============================================================================
   PDP GALLERY — thumbnail column must never sit behind the main image
   ============================================================================= */

#productDetail.ls-pdp-page #detailImageBox,
#productDetail.ls-pdp-page .pdp-gallery #detailImageBox {
  overflow: visible !important;
  height: auto !important;
}

@media (min-width: 1024px) {
  #productDetail.ls-pdp-page .detail-gallery-ck {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #productDetail.ls-pdp-page .detail-thumb-strip {
    order: 1 !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    max-width: 72px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: min(480px, 65vh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    align-self: flex-start !important;
  }

  #productDetail.ls-pdp-page .detail-thumb-btn {
    flex-shrink: 0 !important;
  }

  #productDetail.ls-pdp-page .detail-main-visual {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 84px) !important;
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
  }

  #productDetail.ls-pdp-page .detail-zoom-img-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #productDetail.ls-pdp-page .detail-main-visual .detail-main-img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(72vh, 640px) !important;
  }
}

/* =============================================================================
   PDP MOBILE PHONE — gallery must not collapse (height:100% bug) / thumbs tappable
   ============================================================================= */

@media (max-width: 767px) {
  #productDetail.ls-pdp-page.page.active {
    scroll-padding-top: var(--top-header-stack-h, 118px);
  }

  #productDetail.ls-pdp-page .pdp-shell__upper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  #productDetail.ls-pdp-page .pdp-gallery {
    order: 1 !important;
    width: 100% !important;
    overflow: visible !important;
    flex: none !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #productDetail.ls-pdp-page #detailImageBox,
  #productDetail.ls-pdp-page .pdp-gallery #detailImageBox {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    border: none !important;
  }

  #productDetail.ls-pdp-page .detail-gallery-ck {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 10px !important;
  }

  #productDetail.ls-pdp-page .detail-main-visual,
  #productDetail.ls-pdp-page .detail-zoom-host {
    order: 1 !important;
    flex: none !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    aspect-ratio: 1 / 1 !important;
    max-height: min(76vw, 400px) !important;
    background: #f7f7f8 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #productDetail.ls-pdp-page .detail-zoom-img-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #productDetail.ls-pdp-page .detail-main-visual .detail-main-img,
  #productDetail.ls-pdp-page .detail-main-img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }

  #productDetail.ls-pdp-page .detail-thumb-strip {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: none !important;
    width: 100% !important;
    min-height: 64px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    gap: 8px !important;
    padding: 4px 0 10px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    touch-action: pan-x manipulation !important;
  }

  #productDetail.ls-pdp-page .detail-thumb-btn {
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    scroll-snap-align: start !important;
    position: relative !important;
    z-index: 21 !important;
  }

  #productDetail.ls-pdp-page .detail-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  #productDetail.ls-pdp-page .pdp-shop {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #productDetail.ls-pdp-page .pdp-sticky-bar.detail-sticky-cta {
    z-index: 900 !important;
  }
}

/* =============================================================================
   PDP RELATED PRODUCTS — vertical stack (full-width rows, not horizontal rail)
   ============================================================================= */

#productDetail.ls-pdp-page .ls-pdp-more,
#productDetail .ls-pdp-more {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

#moreProductsList.pdp-related-stack,
.pdp-related-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

#moreProductsList.pdp-related-stack > .pc--compact,
.pdp-related-stack > .pc--compact {
  flex: none !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 14px rgba(12, 12, 14, 0.07) !important;
}

#moreProductsList.pdp-related-stack > .pc--compact .pc__media,
.pdp-related-stack > .pc--compact .pc__media {
  flex: 0 0 92px !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 8px !important;
  border-radius: 12px 0 0 12px !important;
}

#moreProductsList.pdp-related-stack > .pc--compact .pc__body,
.pdp-related-stack > .pc--compact .pc__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 12px 12px 12px 6px !important;
  gap: 8px !important;
}

#moreProductsList.pdp-related-stack > .pc--compact .pc__btn,
.pdp-related-stack > .pc--compact .pc__btn {
  align-self: flex-start !important;
  width: auto !important;
  min-width: 104px !important;
  margin-top: 4px !important;
}

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

/* =============================================================================
   MOBILE APP SHELL — tight bottom layout (no stacked padding / footer gap)
   ============================================================================= */
@media (max-width: 1023px) {
  .main-content .page.active {
    min-height: 0 !important;
  }

  #account.account-page .account-page-shell,
  #cart.cart-page .cart-page-shell,
  #spin.spin-page .spin-page-wrapper {
    padding-bottom: 12px !important;
  }

  #account.account-page .account-logout-wrap {
    margin-bottom: 4px;
  }
}

/* =============================================================================
   PROFILE PHOTO CROP MODAL
   ============================================================================= */
.profile-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 10000020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.profile-crop-modal[hidden] {
  display: none !important;
}

body.profile-crop-open {
  overflow: hidden;
}

.profile-crop-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
}

.profile-crop-modal__panel {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 18px 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  box-sizing: border-box;
}

.profile-crop-modal__panel h3 {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
}

.profile-crop-modal__hint {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.4;
}

.profile-crop-stage {
  position: relative;
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: #0f172a;
}

.profile-crop-stage:active {
  cursor: grabbing;
}

#profileCropCanvas {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.profile-crop-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  max-width: 86%;
  max-height: 86%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.95);
  pointer-events: none;
}

.profile-crop-zoom-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.profile-crop-zoom {
  width: 100%;
  margin-bottom: 16px;
  accent-color: #6b5cff;
}

.profile-crop-actions {
  display: flex;
  gap: 10px;
}

.profile-crop-actions .secondary-btn,
.profile-crop-actions .primary-btn {
  flex: 1;
  min-height: 44px;
}

/* =============================================================================
   BOTTOM TAB BAR — iOS-style touch targets + safe area
   ============================================================================= */
.bottom-nav {
  height: auto !important;
  min-height: var(--dk-bottom-nav-h, 68px) !important;
  padding-top: 6px !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08) !important;
  gap: 2px;
}

.bottom-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  padding: 4px 6px 2px;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.18s ease, transform 0.12s ease, background 0.18s ease;
}

.bottom-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: transparent;
  transition: background 0.18s ease;
}

.bottom-item:active {
  transform: scale(0.96);
}

.bottom-item i,
.bottom-item .bottom-account-wrap {
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 2px;
}

.bottom-item span:last-child {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.bottom-item.active,
.bottom-item:focus-visible {
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.08);
}

.bottom-item.active::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.bottom-item.active i,
.bottom-item.active .bottom-account-fallback {
  transform: scale(1.06);
}

@media (max-width: 768px) {
  .bottom-nav {
    justify-content: space-between !important;
  }
}