/**
 * Hair Hub Product Detail — SWELL Compatibility Layer v1.0
 *
 * Loaded only when SWELL (or a SWELL child theme) is active and the current
 * request is a singular hh_product page. Keep SWELL-specific overrides here;
 * Hair Hub component design remains authoritative in product-detail.css.
 */

/* --------------------------------------------------------------------------
 * 1. SWELL article chrome: Hair Hub owns the product title and product content.
 * -------------------------------------------------------------------------- */
.hh-product-detail-swell .p-articleHead,
.hh-product-detail-swell .p-articleHead .c-postTitle,
.hh-product-detail-swell .p-articleHead .p-articleMetas,
.hh-product-detail-swell .c-postTitle,
.hh-product-detail-swell .p-articleMetas {
  display: none !important;
}

.hh-product-detail-swell .post_content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
 * 2. Content width: product detail is a Hair Hub full-width experience.
 * -------------------------------------------------------------------------- */
.hh-product-detail-swell .l-content {
  max-width: 1240px !important;
  width: min(1240px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  column-gap: 0 !important;
}

.hh-product-detail-swell .l-mainContent,
.hh-product-detail-swell .l-mainContent__inner,
.hh-product-detail-swell .l-mainContent__inner > .post_content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Product pages do not use SWELL's standard sidebar. */
.hh-product-detail-swell .l-sidebar {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * 3. Keep SWELL heading decoration away from Hair Hub components.
 * -------------------------------------------------------------------------- */
.hh-product-detail-swell .hh-product-detail h1,
.hh-product-detail-swell .hh-product-detail h2,
.hh-product-detail-swell .hh-product-detail h3,
.hh-product-detail-swell .hh-product-reviews h1,
.hh-product-detail-swell .hh-product-reviews h2,
.hh-product-detail-swell .hh-product-reviews h3 {
  position: static !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
}

.hh-product-detail-swell .hh-product-detail h1::before,
.hh-product-detail-swell .hh-product-detail h1::after,
.hh-product-detail-swell .hh-product-detail h2::before,
.hh-product-detail-swell .hh-product-detail h2::after,
.hh-product-detail-swell .hh-product-detail h3::before,
.hh-product-detail-swell .hh-product-detail h3::after,
.hh-product-detail-swell .hh-product-reviews h1::before,
.hh-product-detail-swell .hh-product-reviews h1::after,
.hh-product-detail-swell .hh-product-reviews h2::before,
.hh-product-detail-swell .hh-product-reviews h2::after,
.hh-product-detail-swell .hh-product-reviews h3::before,
.hh-product-detail-swell .hh-product-reviews h3::after {
  content: none !important;
  display: none !important;
}

/* Restore the Hair Hub section-heading spacing after the broad SWELL reset. */
.hh-product-detail-swell .hh-pd-panel h2,
.hh-product-detail-swell .hh-pd-purchase__head h2 {
  display: flex !important;
  align-items: center !important;
}

.hh-product-detail-swell .hh-pd-panel h2 {
  gap: 8px !important;
  margin: 0 0 18px !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.hh-product-detail-swell .hh-pd-purchase__head h2 {
  margin: 0 0 3px !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
}

/* --------------------------------------------------------------------------
 * 4. Defensive layout restores for specs/reviews/purchase cards.
 * -------------------------------------------------------------------------- */
.hh-product-detail-swell .hh-pd-specs,
.hh-product-detail-swell .hh-pd-specs > div,
.hh-product-detail-swell .hh-pd-purchase__links,
.hh-product-detail-swell .hh-pd-purchase__link,
.hh-product-detail-swell .hh-product-reviews,
.hh-product-detail-swell .hh-review-card {
  min-width: 0 !important;
}

.hh-product-detail-swell .hh-pd-specs dt,
.hh-product-detail-swell .hh-pd-specs dd {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

.hh-product-detail-swell .hh-pd-specs dd {
  width: auto !important;
}

/* --------------------------------------------------------------------------
 * 5. SWELL standard post furniture is not used on product-detail pages.
 * -------------------------------------------------------------------------- */
.hh-product-detail-swell .p-articleFoot,
.hh-product-detail-swell .p-articleFoot > .c-shareBtns,
.hh-product-detail-swell .c-shareBtns,
.hh-product-detail-swell .p-authorBox,
.hh-product-detail-swell .p-relatedPosts,
.hh-product-detail-swell .p-pnLinks,
.hh-product-detail-swell .p-articleMetas.-bottom {
  display: none !important;
}

/* Floating share buttons, when enabled in SWELL settings. */
.hh-product-detail-swell .p-fixBtnWrap .c-shareBtns,
.hh-product-detail-swell .c-shareBtns.-fix {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * 6. Responsive width/spacing.
 * -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hh-product-detail-swell .l-content {
    width: min(100% - 28px, 1180px) !important;
  }
}

@media (max-width: 560px) {
  .hh-product-detail-swell .l-content {
    width: calc(100% - 20px) !important;
  }

  .hh-product-detail-swell .post_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hh-product-detail-swell .hh-pd-panel h2 {
    margin-bottom: 14px !important;
    font-size: 17px !important;
  }

  .hh-product-detail-swell .hh-pd-purchase__head h2 {
    font-size: 19px !important;
  }
}

/* --------------------------------------------------------------------------
 * 7. Rev.2: SWELL review heading cleanup and post-furniture fallbacks.
 * -------------------------------------------------------------------------- */
.hh-product-detail-swell .hh-product-review-card__block h4,
.hh-product-detail-swell .hh-product-review-card__block h4::before,
.hh-product-detail-swell .hh-product-review-card__block h4::after {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hh-product-detail-swell .hh-product-review-card__block h4::before,
.hh-product-detail-swell .hh-product-review-card__block h4::after {
  content: none !important;
  display: none !important;
}

/* SWELL versions/settings can use either legacy or newer post-footer classes. */
.hh-product-detail-swell .l-articleBottom,
.hh-product-detail-swell .l-articleBottom__section,
.hh-product-detail-swell .p-authorBox,
.hh-product-detail-swell .p-profileBox,
.hh-product-detail-swell .p-relatedPosts,
.hh-product-detail-swell .p-relatedPost,
.hh-product-detail-swell .c-widget + .p-relatedPosts {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * 8. Rev.3: keep the Hair Hub Review eyebrow/title spacing authoritative.
 *    SWELL's post-content h2 margin can otherwise create a large mobile gap.
 * -------------------------------------------------------------------------- */
.hh-product-detail-swell .hh-product-reviews__title {
  margin: 0 !important;
}