/* ============================================================
   Lovely Description — full-width tabbed product info.
   Colour settings feed CSS vars that fall back to DS tokens.
   ============================================================ */
.lh-ldesc {
  --ldesc-bg: var(--surface-card);
  --ldesc-tab: var(--text-muted);
  --ldesc-tab-active: var(--color-primary);
  --ldesc-text: var(--text-body);
  --ldesc-heading: var(--text-heading);
  --ldesc-border: var(--border-subtle);
  background: var(--ldesc-bg);
  padding-block: var(--ldesc-pt, 0) var(--ldesc-pb, 32px);
}
.lh-ldesc__wrap {
  max-width: var(--ldesc-max, 1340px);
  margin-inline: auto;
  padding-inline: var(--page-gutter, 20px);
}

/* ---- Tab nav (scrollable + arrows) ---- */
.lh-ldesc__tabs-wrap { position: relative; }
.lh-ldesc__nav {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--ldesc-border);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.lh-ldesc__nav::-webkit-scrollbar { display: none; }
.lh-ldesc__tab {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  margin-bottom: -2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--ldesc-tab);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.lh-ldesc__tab:hover { color: var(--ldesc-heading); }
.lh-ldesc__tab.is-active { color: var(--ldesc-tab-active); border-bottom-color: var(--ldesc-tab-active); }

.lh-ldesc__arrow {
  position: absolute;
  top: 0;
  height: calc(100% - 2px);
  width: 36px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: var(--ldesc-text);
  z-index: 2;
}
.lh-ldesc__arrow[hidden] { display: none; }
.lh-ldesc__arrow--left { left: 0; background: linear-gradient(to right, var(--ldesc-bg) 60%, transparent); }
.lh-ldesc__arrow--right { right: 0; background: linear-gradient(to left, var(--ldesc-bg) 60%, transparent); }

/* ---- Panels ---- */
.lh-ldesc__panel { padding-block: var(--space-6); animation: lh-ldesc-fade var(--duration-base) var(--ease-standard); }
.lh-ldesc__panel[hidden] { display: none; }
@keyframes lh-ldesc-fade { from { opacity: 0; } to { opacity: 1; } }

/* Section titles + subtitles are centred across the tabs (Description, Wig
   Care, Shipping). Font sizes/weights/spacing use DS tokens only. */
.lh-ldesc__h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--font-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--ldesc-heading);
  text-align: center;
}
.lh-ldesc__rte, .lh-ldesc__lead { color: var(--ldesc-text); line-height: var(--leading-body); }
.lh-ldesc__lead {
  margin-bottom: var(--space-4);
  font-size: var(--font-body-md);
  text-align: center;
}
/* Per spec: tab titles/subtitles are centred on mobile only; left on desktop. */
@media (min-width: 750px) {
  .lh-ldesc__h3,
  .lh-ldesc__lead { text-align: left; }
}

/* Media + text rows */
.lh-ldesc__row { display: grid; gap: var(--space-6); align-items: center; }
.lh-ldesc__row-img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
@media (min-width: 750px) {
  .lh-ldesc__row { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .lh-ldesc__row--img-left .lh-ldesc__row-content { order: 2; }
  .lh-ldesc__row--img-left .lh-ldesc__row-media { order: 1; }
  .lh-ldesc__row--no-media { grid-template-columns: 1fr; }
}
/* Mobile image-first */
.lh-ldesc__row--mobile-img-first .lh-ldesc__row-media { order: -1; }
@media (min-width: 750px) {
  .lh-ldesc__row--mobile-img-first.lh-ldesc__row--img-left .lh-ldesc__row-media { order: 1; }
  .lh-ldesc__row--mobile-img-first.lh-ldesc__row--img-right .lh-ldesc__row-media { order: 2; }
}

/* Lists */
.lh-ldesc__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lh-ldesc__item { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ldesc-text); }
.lh-ldesc__ico { display: inline-flex; flex-shrink: 0; color: var(--color-instock); margin-top: 2px; }
.lh-ldesc__num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: var(--font-caption);
  font-weight: var(--weight-bold);
}

/* Spec table */
.lh-ldesc__table { width: 100%; border-collapse: collapse; border: 1px solid var(--ldesc-border); border-radius: var(--radius-md); overflow: hidden; font-size: var(--font-body-sm); }
.lh-ldesc__table tr { border-bottom: 1px solid var(--ldesc-border); }
.lh-ldesc__table tr:last-child { border-bottom: 0; }
.lh-ldesc__table th, .lh-ldesc__table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }
.lh-ldesc__table th { width: 200px; font-weight: var(--weight-semibold); color: var(--ldesc-heading); background: var(--surface-sunken); }
.lh-ldesc__table td { color: var(--ldesc-text); }

/* Shipping cards — full DS card: tinted icon chip, display title, DS body text. */
.lh-ldesc__cards { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 750px) { .lh-ldesc__cards { grid-template-columns: repeat(3, 1fr); } }
.lh-ldesc__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-sunken);
  border: 1px solid var(--ldesc-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.lh-ldesc__card-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--color-primary-tint);
  color: var(--color-primary);
}
.lh-ldesc__card h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-body-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--ldesc-heading);
}
.lh-ldesc__card p { margin: 0; font-size: var(--font-body-md); color: var(--ldesc-text); line-height: var(--leading-body); }

@media (max-width: 749px) {
  .lh-ldesc__table th { width: 120px; }
}