.ccs_product_gallery.pg{display:flex;gap:16px}

.ccs_product_gallery .pg__thumbs{flex:0 0 auto; max-height:560px; width:120px}

.ccs_product_gallery .pg__main{flex:1; min-width:0; max-width:100%;}
.ccs_product_gallery .pg__main .swiper-wrapper, .ccs_product_gallery .pg__thumbs .swiper-wrapper{height:500px; max-height:80dvh;}

.ccs_product_gallery .pg__thumbs img,
.ccs_product_gallery .pg__main img {
border-radius:20px;
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.ccs_product_gallery .pg__thumbs .swiper-slide {
width:100%;
aspect-ratio:1/1;
}

.ccs_product_gallery .pg__main .swiper-slide {
width:100%;
aspect-ratio:1/1;
}

@media(max-width:767px){
.ccs_product_gallery.pg{flex-direction:column-reverse;align-items:center}

.ccs_product_gallery .pg__thumbs{width:100%;max-height:none}
.ccs_product_gallery .pg__thumbs .swiper-slide{width:25%;height:auto}
.ccs_product_gallery .pg__thumbs .swiper-wrapper{height:100px;}

.ccs_product_gallery .pg__main .swiper-wrapper{height:300px;}


}




/* =======================================================
  * FRONTEND: Color swatches
  * ======================================================= */

  
.ccs-label{display:block;margin-bottom:6px;font-weight:600}
.ccs-swatches{display:flex;flex-wrap:wrap;gap:8px}
/*.ccs-swatch{border:1px solid #ddd;padding:6px 10px;border-radius:4px;cursor:pointer;background:#fff}*/
.ccs-swatch{        
    width:32px !important;
    height:32px !important;
    border-radius:4px !important;        
    cursor:pointer;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0;
    padding:0 !important;
    transition:border-color .3s ease
}

.ccs-swatch.is-active{border:3px solid #000}
.ccs-color-message{ margin:8px 0 12px; font-size:14px; }
.ccs-color-message.ccs-ok p{ color:#166534 !important; }     /* verde */
.ccs-color-message.ccs-error p{ color:#b91c1c !important; }  /* rojo */



  .quantity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ccs-qty-btn {
  border: none !important;
  padding: 10px !important;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  border-radius: 50% !important;
  aspect-ratio: 1/1 !important;
  width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ccs-qty-btn:hover, .ccs-qty-btn:focus {
  background: #919191 !important;
  padding: 10px !important;
}

.input-text.qty.text {
    width: 80px !important;
    border-radius: 12px !important;
}

form.cart {
    flex-wrap: wrap !important;
}



/* --- CCS Tiered Boxes --- */
#ccs-tiered-boxes .ccs-tiered-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;align-items:stretch
}
#ccs-tiered-boxes .ccs-tier{
  border:2px solid #222222;border-radius:20px;padding:10px;text-align:center;line-height:1.25;transition:all .15s ease;background:#fff
}
#ccs-tiered-boxes .ccs-tier:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}
#ccs-tiered-boxes .ccs-tier-qty{font-weight:700;font-size:14px;margin-bottom:4px}
#ccs-tiered-boxes .ccs-tier-price{font-size:16px; font-weight:600; }
#ccs-tiered-boxes .ccs-tier.active{border-color:#222222;background:#222222; color: white}
#ccs-tiered-boxes .ccs-tier--base{border-style:solid}
#ccs-tiered-boxes .ccs-tiered-title{font-weight:600;margin-bottom:8px}