
/*
 * Retail Experience Framework v14.4.0
 * Category Experience 2.0
 */

body.ref-category-experience-v2{
  --ref-cx-card:#fff;
  --ref-cx-border:var(--ref-ci-border,#e2e4e8);
  --ref-cx-text:var(--ref-ci-text,#211723);
  --ref-cx-muted:var(--ref-ci-muted,#766d75);
}

body.ref-category-experience-v2 .ref-cx2-hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  width:min(1280px,calc(100vw - 32px));
  margin:26px auto 28px;
  overflow:hidden;
  border:1px solid var(--ref-cx-border);
  border-radius:30px;
  background:
    radial-gradient(circle at 10% 15%,color-mix(in srgb,var(--ref-primary,#ad002b) 10%,transparent),transparent 34%),
    linear-gradient(135deg,#fff,color-mix(in srgb,var(--ref-primary,#ad002b) 4%,#fff));
  box-shadow:0 20px 52px rgba(35,24,31,.07);
}

body.ref-category-experience-v2 .ref-cx2-hero-copy{
  display:flex;
  min-height:310px;
  padding:clamp(28px,5vw,58px);
  flex-direction:column;
  justify-content:center;
}

body.ref-category-experience-v2 .ref-cx2-eyebrow,
body.ref-category-experience-v2 .ref-cx2-section-heading>span{
  color:var(--ref-primary,#ad002b);
  font-size:10px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

body.ref-category-experience-v2 .ref-cx2-hero h1{
  margin:8px 0 14px;
  color:var(--ref-cx-text);
  font-size:clamp(34px,5vw,62px);
  line-height:.98;
  letter-spacing:-.055em;
}

body.ref-category-experience-v2 .ref-cx2-description{
  max-width:720px;
  color:var(--ref-cx-muted);
  font-size:15px;
  line-height:1.7;
}

body.ref-category-experience-v2 .ref-cx2-description p:last-child{
  margin-bottom:0;
}

body.ref-category-experience-v2 .ref-cx2-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}

body.ref-category-experience-v2 .ref-cx2-hero-meta span{
  display:inline-flex;
  padding:9px 13px;
  border:1px solid color-mix(in srgb,var(--ref-primary,#ad002b) 14%,#e8eaed);
  border-radius:999px;
  background:#fff;
  color:var(--ref-cx-text);
  font-size:12px;
  line-height:1.4;
}

body.ref-category-experience-v2 .ref-cx2-hero-media{
  min-height:310px;
  overflow:hidden;
  background:#f3f3f3;
}

body.ref-category-experience-v2 .ref-cx2-hero-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:310px;
  object-fit:cover;
  object-position:center;
}

body.ref-category-experience-v2 .shop-container,
body.ref-category-experience-v2 .category-page-row{
  width:min(1280px,calc(100vw - 32px));
  max-width:1280px;
  margin-right:auto;
  margin-left:auto;
}

body.ref-category-experience-v2 .products.row{
  row-gap:24px;
}

body.ref-category-experience-v2 .product-small .box{
  height:100%;
  overflow:hidden;
  border:1px solid var(--ref-cx-border);
  border-radius:22px;
  background:var(--ref-cx-card);
  box-shadow:0 14px 36px rgba(35,24,31,.055);
  transition:transform .2s ease,box-shadow .2s ease;
}

body.ref-category-experience-v2 .product-small .box:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(35,24,31,.09);
}

body.ref-category-experience-v2 .product-small .box-image{
  background:#f7f7f7!important;
}

body.ref-category-experience-v2.ref-category-fit-contain .product-small .box-image img{
  object-fit:contain!important;
}

body.ref-category-experience-v2.ref-category-fit-cover .product-small .box-image img{
  object-fit:cover!important;
}

body.ref-category-experience-v2 .product-small .box-text{
  display:flex;
  min-height:210px;
  padding:18px!important;
  flex-direction:column;
}

body.ref-category-experience-v2.ref-category-density-compact .product-small .box-text{
  min-height:175px;
  padding:14px!important;
}

body.ref-category-experience-v2.ref-category-density-spacious .product-small .box-text{
  min-height:240px;
  padding:22px!important;
}

body.ref-category-experience-v2 .product-small .name,
body.ref-category-experience-v2 .product-small .product-title{
  display:-webkit-box!important;
  min-height:calc(1.42em * var(--ref-cx-title-lines,3));
  overflow:hidden;
  color:var(--ref-cx-text)!important;
  font-size:14px;
  font-weight:720;
  line-height:1.42;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--ref-cx-title-lines,3);
}

body.ref-category-experience-v2 .product-small .price{
  margin-top:8px;
  color:var(--ref-primary,#ad002b)!important;
  font-size:16px;
  font-weight:800;
}

body.ref-category-experience-v2 .product-small .button{
  display:flex;
  min-height:42px;
  margin-top:auto!important;
  align-items:center;
  justify-content:center;
  border-radius:999px!important;
  text-transform:none!important;
}

body.ref-category-experience-v2 .ref-cx2-stock{
  display:flex;
  align-items:center;
  gap:7px;
  margin:7px 0 10px;
  color:var(--ref-cx-muted);
  font-size:10px;
}

body.ref-category-experience-v2 .ref-cx2-stock i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#36b56c;
  box-shadow:0 0 0 3px rgba(54,181,108,.12);
}

body.ref-category-experience-v2 .ref-cx2-stock.is-out-of-stock i{
  background:#b4b8bf;
  box-shadow:none;
}

body.ref-category-experience-v2 .ref-cx2-badges{
  position:absolute;
  z-index:4;
  top:12px;
  left:12px;
  display:flex;
  gap:6px;
}

body.ref-category-experience-v2 .ref-cx2-badges span{
  padding:6px 9px;
  border-radius:999px;
  background:var(--ref-primary,#ad002b);
  color:#fff;
  font-size:9px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}

body.ref-category-experience-v2 .ref-cx2-related-categories,
body.ref-category-experience-v2 .ref-cx2-guidance{
  width:min(1280px,calc(100vw - 32px));
  margin:38px auto;
  padding:clamp(24px,4vw,42px);
  border:1px solid var(--ref-cx-border);
  border-radius:26px;
  background:#fff;
}

body.ref-category-experience-v2 .ref-cx2-section-heading h2{
  margin:6px 0 20px;
  color:var(--ref-cx-text);
  font-size:clamp(27px,4vw,42px);
  letter-spacing:-.04em;
}

body.ref-category-experience-v2 .ref-cx2-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

body.ref-category-experience-v2 .ref-cx2-related-grid a{
  display:flex;
  min-height:94px;
  padding:18px;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--ref-cx-border);
  border-radius:17px;
  background:#fafafa;
  color:var(--ref-cx-text);
}

body.ref-category-experience-v2 .ref-cx2-related-grid a:hover{
  border-color:color-mix(in srgb,var(--ref-primary,#ad002b) 40%,var(--ref-cx-border));
}

body.ref-category-experience-v2 .ref-cx2-related-grid span{
  font-weight:760;
}

body.ref-category-experience-v2 .ref-cx2-related-grid small{
  margin-top:5px;
  color:var(--ref-cx-muted);
}

body.ref-category-experience-v2 .ref-cx2-guidance-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

body.ref-category-experience-v2 .ref-cx2-guidance-grid article{
  padding:20px;
  border:1px solid var(--ref-cx-border);
  border-radius:17px;
  background:linear-gradient(145deg,#fff,#fafafa);
}

body.ref-category-experience-v2 .ref-cx2-guidance-grid article>span{
  color:var(--ref-primary,#ad002b);
  font-size:10px;
  font-weight:850;
}

body.ref-category-experience-v2 .ref-cx2-guidance-grid p{
  margin:12px 0 0;
  color:var(--ref-cx-text);
  line-height:1.55;
}

/* Sidebar modes */
body.ref-category-experience-v2.ref-category-sidebar-none .shop-sidebar,
body.ref-category-experience-v2.ref-category-sidebar-none #shop-sidebar{
  display:none!important;
}

body.ref-category-experience-v2.ref-category-sidebar-none .shop-container .large-9,
body.ref-category-experience-v2.ref-category-sidebar-none .category-page-row>.large-9{
  flex-basis:100%!important;
  max-width:100%!important;
}

body.ref-category-experience-v2.ref-category-sidebar-right .category-page-row{
  flex-direction:row-reverse;
}

body.ref-category-experience-v2.ref-category-sidebar-drawer .shop-sidebar,
body.ref-category-experience-v2.ref-category-sidebar-drawer #shop-sidebar{
  display:none!important;
}

/* Preserve provider-owned messaging visuals. */
body.ref-category-experience-v2 [class*="clearpay"],
body.ref-category-experience-v2 [class*="afterpay"],
body.ref-category-experience-v2 [class*="stripe"],
body.ref-category-experience-v2 [class*="paypal"]{
  max-width:100%!important;
}

@media(max-width:849px){
  body.ref-category-experience-v2 .ref-cx2-hero{
    grid-template-columns:1fr;
  }

  body.ref-category-experience-v2 .ref-cx2-hero-copy{
    min-height:0;
  }

  body.ref-category-experience-v2 .ref-cx2-hero-media{
    min-height:260px;
  }

  body.ref-category-experience-v2 .ref-cx2-hero-media img{
    min-height:260px;
  }

  body.ref-category-experience-v2 .ref-cx2-related-grid,
  body.ref-category-experience-v2 .ref-cx2-guidance-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:549px){
  body.ref-category-experience-v2 .ref-cx2-hero,
  body.ref-category-experience-v2 .shop-container,
  body.ref-category-experience-v2 .category-page-row,
  body.ref-category-experience-v2 .ref-cx2-related-categories,
  body.ref-category-experience-v2 .ref-cx2-guidance{
    width:calc(100vw - 20px);
  }

  body.ref-category-experience-v2 .ref-cx2-hero{
    border-radius:22px;
  }

  body.ref-category-experience-v2 .ref-cx2-hero-copy{
    padding:25px 21px;
  }

  body.ref-category-experience-v2 .product-small .box-text{
    min-height:190px;
    padding:14px!important;
  }
}


/* v14.6.0 — tighter category hero requested from live archive review */
body.ref-category-experience-v2 .ref-cx2-hero{
  width:min(1120px,calc(100vw - 48px))!important;
  grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr)!important;
  margin-top:22px!important;
  margin-bottom:30px!important;
  border-radius:24px!important;
}
body.ref-category-experience-v2 .ref-cx2-hero-copy{
  min-height:270px!important;
  padding:clamp(26px,4vw,48px)!important;
}
body.ref-category-experience-v2 .ref-cx2-hero-media,
body.ref-category-experience-v2 .ref-cx2-hero-media img{
  min-height:270px!important;
  max-height:320px!important;
}
@media(max-width:849px){
  body.ref-category-experience-v2 .ref-cx2-hero{
    width:calc(100vw - 28px)!important;
    grid-template-columns:1fr!important;
  }
  body.ref-category-experience-v2 .ref-cx2-hero-media,
  body.ref-category-experience-v2 .ref-cx2-hero-media img{
    min-height:220px!important;
    max-height:260px!important;
  }
}


/* ==========================================================
   v14.9.0 — Category containment and single-product isolation
   ========================================================== */

/*
 * Related Collections and Buying Guidance are rendered inside WooCommerce's
 * archive content column. They must size themselves against that column, not
 * against the browser viewport.
 */
body.ref-category-experience-v2 .ref-cx2-related-categories,
body.ref-category-experience-v2 .ref-cx2-guidance{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:38px 0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

body.ref-category-experience-v2 .ref-cx2-related-grid,
body.ref-category-experience-v2 .ref-cx2-guidance-grid{
  width:100%!important;
  min-width:0!important;
}

body.ref-category-experience-v2 .ref-cx2-related-grid>*,
body.ref-category-experience-v2 .ref-cx2-guidance-grid>*{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow-wrap:anywhere!important;
}

/* Protect the archive row and main content from horizontal growth. */
body.ref-category-experience-v2 .category-page-row,
body.ref-category-experience-v2 .shop-container,
body.ref-category-experience-v2 .shop-container .large-9,
body.ref-category-experience-v2 .category-page-row>.large-9,
body.ref-category-experience-v2 .woocommerce{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Category Experience must never render any archive panel on a single product. */
body.single-product .ref-cx2-hero,
body.single-product .ref-cx2-related-categories,
body.single-product .ref-cx2-guidance{
  display:none!important;
}

@media(max-width:849px){
  body.ref-category-experience-v2 .ref-cx2-related-categories,
  body.ref-category-experience-v2 .ref-cx2-guidance{
    margin:28px 0!important;
  }
}
