header,
.header,
.header__area {
  position: relative;
  z-index: 9999;
}
.icon-with-text {
  display: flex !important;
  width: 100%;
}

.icon-with-text__item {
  flex: 0 0 33.3333% !important;
  max-width: 33.3333% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.icon-with-text__item:empty {
  display: none !important;
}

.inline-richtext{
    line-height:1.4;
}

.list-unstyled{
    list-style:none;
    padding:0;
    margin:0;
}


/* -----------------------------
ACCORDION CONTAINER
----------------------------- */

.product__accordion{
    border-top:1px solid #e5e5e5;
}

.product__accordion details{
    border-bottom:1px solid #e5e5e5;
}


/* -----------------------------
ACCORDION SUMMARY
----------------------------- */

.product__accordion summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    font-weight:600;
}

.product__accordion summary::-webkit-details-marker{
    display:none;
}

.summary__title{
    display:flex;
    align-items:center;
    gap:12px;
}

.summary__title svg{
    width:18px;
    height:18px;
    fill:#111;
}

.accordion__title{
    font-size:16px;
    margin:0;
}


/* -----------------------------
ACCORDION CARET
----------------------------- */

.icon-caret{
    width:14px;
    transition:transform .25s ease;
}

details[open] .icon-caret{
    transform:rotate(180deg);
}


/* -----------------------------
ACCORDION CONTENT
----------------------------- */

.accordion__content{
    padding:0 0 18px 30px;
    font-size:14px;
    line-height:1.6;
    color:#444;
}

.accordion__content p{
    margin:0 0 10px;
}

.accordion__content ol{
    padding-left:20px;
}

.accordion__content li{
    margin-bottom:6px;
}

/* ICON BENEFITS - ICON TOP TEXT BELOW */

/* BENEFITS ROW */

.icon-with-text{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin:18px 0;
padding:0;
list-style:none;
}

.icon-with-text__item{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:6px;
font-size:12px;
}

.icon-with-text__item svg{
width:20px;
height:20px;
}

/* main text */
.benefit-text strong{
display:block;
font-weight:600;
font-size:12px;
}

/* smaller subtitle */
.benefit-text small{
display:block;
font-size:10px;
color:#666;
margin-top:2px;
}

/* -----------------------------
MOBILE
----------------------------- */

@media (max-width:768px){

.icon-with-text{
    flex-direction:column;
    gap:12px;
}

.product__accordion summary{
    padding:14px 0;
}

.accordion__content{
    padding-left:26px;
}

}

/* GALLERY */

.gallery{
flex:1;
max-width:100%;
}

.slider{
position:relative;
overflow:hidden;
}

.slides{
display:flex;
transition:0.4s;
}

.slide{
min-width:100%;
}

/* MOCKUP */

.mockup{
position:relative;
}

.mockup img{
width:100%;
display:block;
}

/* DESIGN OVERLAY *

.design{
position:absolute;
left:50%;
transform:translateX(-50%);
width:<?php echo $design_width;?>%;
top:<?php echo $design_top;?>%;
pointer-events:none;
}*/

/*.design{
position:absolute;
left:50%;
transform:translateX(-50%);
width:40%;
top:26%;
pointer-events:none;
mix-blend-mode:multiply;
opacity:0.95;
}*/
.design {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  max-width: 100%;
  pointer-events: none;
  opacity: 0.95;
}
#designModel {
  max-width: 170px; /* limits oversized rendering */
}
/* SLIDER CONTROLS */

.slider-controls{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:10px;
font-weight:bold;
}

.arrow{
cursor:pointer;
font-size:20px;
}

/* COLOR SELECTOR */

.colors{
display:flex;
gap:10px;
margin:10px 0 20px;
}

.color-btn{
width:36px;
height:36px;
border-radius:50%;
border:2px solid #ddd;
cursor:pointer;
}

.color-btn.active{
border:3px solid black;
}

.sticky-cart{
position:fixed;
bottom:0;
left:0;
width:100%;
background:white;
padding:12px;
box-shadow:0 -3px 10px rgba(0,0,0,0.1);
}

.sticky-cart button{

width:100%;
padding:16px;
background:black;
color:white;
border:none;
font-size:16px;
}
.size-btn {
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    /*flex: 1; */
    text-align: center;
    margin: 1px;
	width: 40px;
}

.size-btn.active {
    background-color: #007bff !important;
    color: white !important;
}
/*.quantity__value {
  background: red;
  z-index: 9999;
  position: relative;
}*/
.offCanvas__minicart {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  background: #fff;

  transform: translateX(100%); /* hidden off screen */
  transition: transform 0.35s ease;

  z-index: 9999;
}

/* OPEN STATE */
.offCanvas__minicart.active {
  transform: translateX(0); /* slide in */
}
/* OVERLAY */
#cartOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.5);

  opacity: 0;
  visibility: hidden;

  transition: opacity 0.3s ease;
  z-index: 9998;
}

#cartOverlay.active {
  opacity: 1;
  visibility: visible;
}
#shippingIcon svg {
  display: block;
  transform: rotate(0deg); /* already facing right */
}
.offCanvas__minicart {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* HEADER stays natural */
.minicart__header {
  flex-shrink: 0;
}

/* SCROLLABLE AREA */
.minicart__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
  scroll-behavior: smooth;
}
.offCanvas__minicart {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* HEADER stays natural */
.minicart__header {
  flex-shrink: 0;
}

/* STATIC FOOTER */
.minicart__footer {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  padding: 15px;
  border-top: 1px solid #eee;
  background: #fff;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
  z-index: 10;
}
/* Free Shipping Progress *
.progress-bar {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 10px;
  margin-top: 5px;
}

#progressFill {
  height: 100%;
  width: 0%;
  background: black;
  border-radius: 10px;
  transition: width 0.3s ease;
}

/* Free Shipping Progress */
.progress-bar {
  position: relative;
  width:100%; height:6px; background:#eee;
  border-radius:10px; margin:8px 0;
}
#progressFill {
  width:0%; height:100%; background:green; border-radius:10px;
  transition: width 0.4s ease;
}
#shippingIcon {
  position: absolute;
  top: 50%;                 /* center vertically */
  left: 0%;
  transform: translate(-50%, -50%); /* center both axes */
  font-size: 16px;
  pointer-events: none;
  transition: left 0.4s ease;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* SHIPPING *
.progress-bar{position:relative; height:6px; background:#eee; border-radius:10px;}
#progressFill{height:100%; width:0; background:black; transition:.4s;}
#shippingIcon{position:absolute; top:-14px; left:0; transform:translateX(-50%); transition:.4s;}

/* UPSELL */
.upsell-slider{display:flex; gap:10px; overflow-x:auto;}
.upsell-item{min-width:130px; border:1px solid #ddd; padding:5px;}
.upsell-item img{width:100px; height:100px;}
/*.upsell-item select{width:100%; margin:3px 0;}
.upsell-item button{width:100%; background:black; color:white; border:none;}*/

.upsell-item select {
  width: 100%;
  margin: 3px 0;
  padding: 4px;
  font-size: 12px;
}

.upsell-item button {
  width: 100%;
  margin-top: 5px;
  background: black;
  color: #fff;
  border: none;
  padding: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.minicart__thumb {
  position: relative;
  width: 80px;
}

.minicart__thumb img {
  width: 100%;
  display: block;
}

/* DESIGN OVERLAY */
.cart-design {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.95;
}