/* Replay overrides.
   Loaded last (priority 100). Only rules the reference design implies but the
   newer vendor plugin build would otherwise override. */

/* The plugin adds a `.cxb-sb-v2` sidebar layer whose selectors out-specify the
   reference's own rules, shrinking the "Latest Products" thumbnails to 54px.
   The reference renders 120x120 thumbs with 20px item spacing. */
.cxb-b2b-sidebar.cxb-sb-v2 .cxb-b2b-recent-product-image {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  margin: 0 15px 0 0;
}
.cxb-b2b-sidebar.cxb-sb-v2 .cxb-b2b-recent-product-image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.cxb-b2b-sidebar.cxb-sb-v2 .cxb-b2b-recent-product-link {
  padding: 0;
}
.cxb-b2b-sidebar.cxb-sb-v2 .cxb-b2b-recent-product-item {
  padding: 0 0 20px;
  margin: 0 0 20px;
}
.cxb-b2b-sidebar.cxb-sb-v2 .cxb-b2b-recent-product-item + .cxb-b2b-recent-product-item {
  border-top: 0;
}

/* Elementor 4 pins absolutely-positioned containers to the top-left; the
   reference lets right/bottom place this floating card. */
.elementor-11 .elementor-element.elementor-element-6cf33d45 {
  left: auto !important;
  top: auto !important;
}


/* Elementor 4 no longer emits `position: absolute` for widgets that carry the
   `elementor-absolute` class; the reference relies on it. */
.elementor .elementor-absolute {
  position: absolute;
}

/* Icon widgets keep an inline-block wrapper in the reference; a block-level
   wrapper stretches to the container and shifts the icon. */
.elementor-widget-icon .elementor-icon-wrapper {
  display: inline-block;
  width: max-content;
}


/* Related/archive product grids: the reference keeps two columns on tablet and
   one on mobile; the newer build collapses to one column one breakpoint early. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cxb-b2b-products-grid.cxb-b2b-columns-3,
  .cxb-b2b-products-grid.cxb-b2b-columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Card buttons stay on one row in the reference; the newer build stacks the
   button group into a column, which triples the card height at every width. */
.cxb-b2b-product-card .cxb-b2b-button-group {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  gap: 8px;
}


/* Product gallery: the reference puts the thumbnails in a horizontal strip under
   the main image; the newer build makes them a side column and shrinks the main
   image from 670px to 580px. */
.cxb-b2b-gallery-main {
  display: block !important;
}
.cxb-b2b-gallery-thumbnails {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  height: auto !important;
  margin-top: 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.cxb-b2b-gallery-thumb {
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
}



/* The newer build caps the main gallery image at 600px and drops the thumbnail
   strip padding; the reference shows a square 670px image and a 100px strip. */
.cxb-b2b-gallery-main-image,
.cxb-b2b-gallery-main-image img {
  max-height: none !important;
}
.cxb-b2b-gallery-thumbnails {
  padding-bottom: 20px;
}

/* The plugin writes an inline fixed height on the main gallery image; the
   reference lets it stay square at the column width. */
.cxb-b2b-gallery-main-image {
  height: auto !important;
  aspect-ratio: auto !important;
}
.cxb-b2b-gallery-main-image img {
  height: auto !important;
  aspect-ratio: auto !important;
  width: 100%;
}

.cxb-b2b-gallery-thumbnails {
  padding-bottom: 20px !important;
}



/* v2.3.8 overlays a centred product title + full breadcrumb on top of the banner
   (absolutely positioned, covering the banner copy). The reference keeps the
   banner clean and shows navigation in the flow below it. */
.cxb-b2b-single-banner .cxb-b2b-banner-inner-wrapper {
  display: none !important;
}


/* ---- Product detail page, rebuilt as an Elementor template -------------
   Elementor adds a container wrapper plus its own padding/gap defaults, and
   each widget gets an .elementor-element wrapper the reference does not have.
   Restore the reference geometry on exactly those extra wrappers. */
.e-con.cxb-b2b-page-background-wrapper,
.e-con.cxb-b2b-product-single-container {
  display: block;
  padding: 0 !important;
  gap: 0;
  max-width: none;
}
.e-con.cxb-b2b-product-main.woocommerce-style {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  padding: 0 !important;
}
.e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  max-width: none;
}
.e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element > .cxb-b2b-product-images-col,
.e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element > .cxb-b2b-product-summary {
  width: 100%;
}

/* Footer legal links carry no icon in the reference. Elementor falls back to a
   default checkmark; an empty selected_icon would suppress it but makes the
   Font Awesome asset collector emit warnings, so hide the fallback instead. */
.huihe-no-icon .elementor-icon-list-icon {
  display: none;
}

/* The reference lets the summary column stretch to the gallery height (it is a
   direct flex child there). In the Elementor rebuild the widget wrapper sits in
   between, so pass the stretch through. */
.e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element {
  align-self: stretch;
}
.e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element > .cxb-b2b-product-summary,
.e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element > .cxb-b2b-product-images-col {
  height: 100%;
}

/* The reference stacks the two product columns on phones (gap 30). The
   container override above is unconditional, so restore the mobile layout. */
@media (max-width: 768px) {
  .e-con.cxb-b2b-product-main.woocommerce-style {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 30px;
  }
  .e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element {
    flex: 1 1 auto;
    width: 100%;
  }
  .e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element > .cxb-b2b-product-summary,
  .e-con.cxb-b2b-product-main.woocommerce-style > .elementor-element > .cxb-b2b-product-images-col {
    height: auto;
  }
}