/*
 * Retail Experience Framework v14.3.0
 * Product Experience 2.0
 */

body.single-product.ref-product-experience-v2 .product-main{
  background:linear-gradient(180deg,#fff 0%,var(--ref-ci-page,#fafbfc) 100%);
}

body.single-product .ref-px2-highlights{
  margin:22px 0 18px;
  padding:24px;
  border:1px solid var(--ref-ci-border,#dcdfe4);
  border-radius:22px;
  background:#fff;
  box-shadow:0 16px 38px rgba(25,30,42,.06);
}

body.single-product .ref-px2-eyebrow{
  display:block;
  margin-bottom:5px;
  color:var(--ref-ci-muted,#7a8390);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.single-product .ref-px2-highlights h3{
  margin:0 0 16px;
  color:var(--ref-ci-text,#17233c);
  font-size:23px;
  letter-spacing:-.025em;
}

body.single-product .ref-px2-highlight-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

body.single-product .ref-px2-highlight{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  padding:12px 13px;
  border-radius:14px;
  background:color-mix(in srgb,var(--ref-primary,#ad002b) 5%,#fff);
  color:var(--ref-ci-text,#17233c);
  font-size:13px;
  line-height:1.45;
}

body.single-product .ref-px2-highlight i{
  display:inline-flex;
  flex:0 0 24px;
  width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--ref-primary,#ad002b),var(--ref-secondary,#d13a63));
  color:#fff;
  font-style:normal;
  font-weight:800;
}

body.single-product .ref-px2-reassurance{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:16px 0 0;
}

body.single-product .ref-px2-reassurance>div{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--ref-primary,#ad002b) 12%,#e6e8eb);
  border-radius:999px;
  background:#fff;
  color:var(--ref-ci-text,#17233c);
  font-size:12px;
}

body.single-product .ref-px2-reassurance>div>span{
  display:inline-flex;
  flex:0 0 22px;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--ref-primary,#ad002b) 10%,#fff);
  color:var(--ref-primary,#ad002b);
  font-weight:850;
}

body.single-product .ref-px2-tab-copy{
  max-width:900px;
  color:var(--ref-ci-text,#17233c);
}

body.single-product .ref-px2-tab-copy h3{
  margin-top:0;
}

body.single-product .product-footer .woocommerce-tabs .panel{
  border:1px solid var(--ref-ci-border,#dcdfe4);
  border-radius:0 0 20px 20px;
  background:#fff;
}

body.single-product .related.products .product-small,
body.single-product .upsells.products .product-small{
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 28px rgba(25,30,42,.06);
}

@media(max-width:700px){
  body.single-product .ref-px2-highlight-grid,
  body.single-product .ref-px2-reassurance{
    grid-template-columns:1fr;
  }

  body.single-product .ref-px2-highlights{
    padding:20px;
    border-radius:18px;
  }
}


/* ==========================================================
   v14.3.1 — Product layout refinement
   ========================================================== */

/*
 * The highlights block sits inside Flatsome's product-summary column, whose
 * width varies significantly by product template. Make the component itself
 * the responsive boundary rather than assuming a desktop page width.
 */
body.single-product .ref-px2-highlights{
  container-type:inline-size!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

body.single-product .ref-px2-highlight-grid{
  grid-template-columns:1fr!important;
  align-items:stretch!important;
}

body.single-product .ref-px2-highlight{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  box-sizing:border-box!important;
  align-items:flex-start!important;
  overflow:visible!important;
}

body.single-product .ref-px2-highlight>span{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  white-space:normal!important;
}

/* Only use two columns when the highlights component genuinely has room. */
@container (min-width:520px){
  body.single-product .ref-px2-highlight-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/*
 * Flatsome outputs every WooCommerce panel inside one .tab-panels wrapper.
 * Inactive panels must be removed from layout completely. Applying height:auto
 * to every panel causes hidden Description, Specifications and Reviews panels
 * to retain vertical space ahead of the selected panel.
 */
body.single-product .woocommerce-tabs,
body.single-product .woocommerce-tabs .tab-panels,
body.single-product .product-footer .woocommerce-tabs,
body.single-product .product-footer .woocommerce-tabs .tab-panels{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
}

body.single-product .woocommerce-tabs .tab-panels{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

/* Collapse every inactive panel so it contributes zero layout height. */
body.single-product .woocommerce-tabs .tab-panels > .panel:not(.active):not(.is-active){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  position:absolute!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  pointer-events:none!important;
}

/* Only the currently selected panel receives normal document flow. */
body.single-product .woocommerce-tabs .tab-panels > .panel.active,
body.single-product .woocommerce-tabs .tab-panels > .panel.is-active,
body.single-product .woocommerce-tabs .tab-panels > .panel[style*="display: block"]{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 0 34px!important;
  transform:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
}

/*
 * WooCommerce may briefly retain an inline display:none value while moving
 * the active class during a click. The active state must win.
 */
body.single-product .woocommerce-tabs .tab-panels > .panel.active[style*="display: none"],
body.single-product .woocommerce-tabs .tab-panels > .panel.is-active[style*="display: none"]{
  display:block!important;
}

/* Remove empty spacer elements sometimes inserted around Flatsome tab panels. */
body.single-product .woocommerce-tabs .tab-panels>br:first-child,
body.single-product .woocommerce-tabs .tab-panels>p:empty:first-child,
body.single-product .woocommerce-tabs .panel>p:empty:first-child{
  display:none!important;
  margin:0!important;
  padding:0!important;
}

body.single-product .ref-px2-tab-copy{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

body.single-product .ref-px2-tab-copy>h3:first-child{
  margin-top:0!important;
  padding-top:0!important;
}

@media(max-width:700px){
  body.single-product .ref-px2-highlight-grid{
    grid-template-columns:1fr!important;
  }

  body.single-product .woocommerce-tabs .panel{
    margin-bottom:25px!important;
  }
}


/* v14.3.2 final tab-state compatibility */
body.single-product .woocommerce-tabs .tab-panels > .woocommerce-Tabs-panel[hidden]{
  display:none!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}