/* Product description / reviews on the light theme.
   The leftover dark-theme panel used a hard inner box (#e5e5e5 / #2a2a2a)
   plus table rules, which stacked into a crude frame. One quiet card
   around the section; hairlines only for tabs and specs. */

html:root body.catalog-product-view .product-view .product-collateral {
  border: 1px solid #e8e6e1 !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 0 !important;
  margin-top: 40px !important;
  box-shadow: none !important;
  overflow: hidden;
  box-sizing: border-box !important;
}

/* Kill the inner box on the tab body (lux-light still sets border #e5e5e5
   and background #fafafa on dd.tab-container). */
html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs,
html:root body.catalog-product-view .product-view .product-collateral dl.collateral-tabs,
html:root body.catalog-product-view .product-view .product-collateral dl.collateral-tabs dt.tab,
html:root body.catalog-product-view .product-view .product-collateral dl.collateral-tabs dt.tab.current,
html:root body.catalog-product-view .product-view div.product-collateral dl.collateral-tabs dd.tab-container,
html:root body.catalog-product-view .product-view div.product-collateral dl.collateral-tabs dd.tab-container.current,
html:root body.catalog-product-view .product-view .product-collateral .tab-content {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
}

html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs {
  display: flex !important;
  gap: 0 32px;
  margin: 0 !important;
  padding: 0 28px !important;
  border-bottom: 0 !important;
  background: #fff !important;
  position: relative !important;
}

/* Draw the tab-row hairline as a layer above inactive labels, so they
   cannot punch a hole and cannot leave a short leftover under Reviews. */
html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: #eeeae4 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs li,
html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs li > span {
  background: transparent !important;
  background-color: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}
html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs li > span {
  margin-bottom: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
}
html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs li.current,
html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs li:hover {
  z-index: 3 !important;
}
html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs li.current > span,
html:root body.catalog-product-view .product-view .product-collateral .toggle-tabs li:hover > span {
  margin-bottom: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid #111 !important;
  z-index: 3 !important;
}

html:root body.catalog-product-view .product-view div.product-collateral dl.collateral-tabs dd.tab-container,
html:root body.catalog-product-view .product-view div.product-collateral dl.collateral-tabs dd.tab-container.current {
  padding: 28px 32px 32px !important;
  background: #fff !important;
}

/* Specs table: drop the dark #2a2a2a / #121212 leftovers and the extra
   boxed look. Same hairline as the tab divider; no outer table frame. */
html:root body.catalog-product-view .product-view .product-collateral .data-table,
html:root body.catalog-product-view .product-view .product-collateral .data-table tr,
html:root body.catalog-product-view .product-view .product-collateral .data-table tr.even,
html:root body.catalog-product-view .product-view .product-collateral .data-table tr.odd,
html:root body.catalog-product-view .product-view .product-collateral .data-table th,
html:root body.catalog-product-view .product-view .product-collateral .data-table td {
  background: transparent !important;
  background-color: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

html:root body.catalog-product-view .product-view .product-collateral .data-table th,
html:root body.catalog-product-view .product-view .product-collateral .data-table td {
  border-bottom: 1px solid #eeeae4 !important;
  padding: 14px 0 !important;
}

html:root body.catalog-product-view .product-view .product-collateral .data-table tr:last-child th,
html:root body.catalog-product-view .product-view .product-collateral .data-table tr:last-child td {
  border-bottom: 0 !important;
}

@media (max-width: 770px) {
  html:root body.catalog-product-view .product-view .product-collateral {
    border-radius: 6px !important;
    margin-top: 28px !important;
  }

  html:root body.catalog-product-view .product-view .product-collateral dl.collateral-tabs dt.tab,
  html:root body.catalog-product-view .product-view .product-collateral dl.collateral-tabs dt.tab.current {
    padding: 14px 20px !important;
    border-bottom: 1px solid #eeeae4 !important;
  }

  html:root body.catalog-product-view .product-view div.product-collateral dl.collateral-tabs dd.tab-container,
  html:root body.catalog-product-view .product-view div.product-collateral dl.collateral-tabs dd.tab-container.current {
    padding: 18px 20px 22px !important;
  }
}


/* Remove the two hairlines on the product info column:
   the line above the title, and the line above Add to Wishlist. */
html:root body.catalog-product-view .product-view .product-shop,
html:root body.catalog-product-view .product-view .product-shop .product-name,
html:root body.catalog-product-view .product-view .product-shop .product-name .h1,
html:root body.catalog-product-view .product-view .product-shop .product-name span.h1,
html:root body.catalog-product-view .product-view .product-essential,
html:root body.catalog-product-view .product-view .product-essential > form,
html:root body.catalog-product-view .product-view .add-to-cart-wrapper,
html:root body.catalog-product-view .product-view .add-to-box,
html:root body.catalog-product-view .product-view .add-to-cart,
html:root body.catalog-product-view .product-view .add-to-links,
html:root body.catalog-product-view .product-view .sharing-links {
  border-top: 0 !important;
  box-shadow: none !important;
}
html:root body.catalog-product-view .product-view .add-to-cart,
html:root body.catalog-product-view .product-view .add-to-box,
html:root body.catalog-product-view .product-view .add-to-cart-wrapper {
  border-bottom: 0 !important;
}

/* The remaining frame around the image + title column:
   product-img-box still has a 1px rgba(0,0,0,0.08) box, and any
   leftover border on the product-view wrappers. Kill the whole
   frame, not only the top edge. Leave qty, thumbs, and the
   Description card alone. */
html:root body.catalog-product-view .product-view,
html:root body.catalog-product-view .product-view .product-essential,
html:root body.catalog-product-view .product-view .product-essential > form,
html:root body.catalog-product-view .product-view .product-img-box,
html:root body.catalog-product-view .product-view .product-img-box .product-name,
html:root body.catalog-product-view .product-view .product-img-box .product-image,
html:root body.catalog-product-view .product-view .product-img-box .product-image img,
html:root body.catalog-product-view .product-view .product-shop,
html:root body.catalog-product-view .product-view .acf-gallery,
html:root body.catalog-product-view .product-view .acf-fotorama,
html:root body.catalog-product-view .product-view .fotorama,
html:root body.catalog-product-view .product-view .fotorama__wrap,
html:root body.catalog-product-view .product-view .fotorama__stage {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* The line above the title is the breadcrumbs bottom border
   (lux-light: 1px solid rgba(0,0,0,0.08)). Remove it on the PDP. */
html:root body.catalog-product-view .breadcrumbs,
html:root body.catalog-product-view .breadcrumbs ul,
html:root body.catalog-product-view .main-container,
html:root body.catalog-product-view .main,
html:root body.catalog-product-view .col-main {
  border: 0 !important;
  box-shadow: none !important;
}