.ckeditor-content p{
text-align: unset !important;     
}  

.ckeditor-product div{
padding: 0px;  
height: fit-content;
margin-left: 10px;    
border-radius: 5px;  
border: 1px solid lightgrey;

}

.ckeditor-product div:hover{
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.3); /* Shadow on hover */ 
}

.ckeditor-product p { 
font-size: 14px;
line-height: 20px;
color: #6c757d;
text-align: justify;
font-weight: 400;
}

.card-detail{
text-align:justify !important;
font-family:"Jost", sans-serif !important;
font-size: 16px !important;
line-height: 8px !important;
letter-spacing: 2.2px !important;
padding-left:25px;
}

.outer-top{
border:1px solid lightgrey;
border-radius:3px;
}

.del-add h5{
border-bottom:1px solid grey;
padding-bottom:2px;
}

.del-add p{
text-align:justify !important;
font-size:16px;
font-weight:400;
line-height:1.2;
}
.del-add {
padding-top:5px;
padding-bottom:5px;
border-right:1px solid lightgrey;
}
.fa-file-pdf{
font-size:30px;
}
.del-add span {
font-size:12.5px;
}
.del-add h6 {
margin-top:10px;
}

.card-detail .status {
color: #0d6efd;  font-weight: 350  !important;
}
.prodcard{
border:1px solid lightgrey;
border-radius:5px;
}

.order-box .card{
border-color: lightgrey !important;      
}

.order-box .card-header{
border: 1px solid lightgrey;  
}

.order-box .card-header .order_no{
border-right: 1px solid lightgrey;      
}

.order-box table td{
border-bottom: 1px solid lightgrey !important;       
}

.order-box #order-body .column{
border-bottom: 1px solid lightgrey;
padding: 10px;      
}

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; 
gap: 0px; 
padding: 0px;
}

.grid-item {
display: flex;
font-size: 20px;
}   

.img-container img{
height: 150px !important;
margin-top: 10px !important;
}

.prodcard p{
line-height: 12px !important;  
}

/* GOOGLE REVIEW START */

.section-title {
text-align: center;
margin-bottom: 60px;
}

.section-borders span {
height: 5px;
background: #00a0e3;
width: 40px;
display: inline-block;
border-radius: 2px;
}

.section-borders span.black-border {
background: #333;
width: 30px;
margin: 0 6px;
}

.client-testimonial-carousel .owl-dots button {
height: 5px;
background: #00a0e3 !important;
width: 20px;
display: inline-block;
margin: 5px;
transition: 0.2s;
border-radius: 2px;
}

.client-testimonial-carousel button.owl-dot.active {
background: #000 !important;
width: 30px;
}

.client-testimonial-carousel .owl-dots {
text-align: center;
margin-top: 25px;
display: none;
}

.mk{
position: relative;
top: -35px;
left: 70px;
color: #edca0c;
} 

.single-testimonial-item {
position: relative;
box-shadow: 0 0 2px #dadfd3;
margin: 2px;
padding: 20px;
padding-left: 85px;
}

.single-testimonial-item:before {
font-family: "Font Awesome 5 Pro";
content: "\f10d";
font-weight: 900;
position: absolute;
left: 20px;
top: 50%;
font-size: 20px;
color: #00a0e3;
line-height: 30px;
margin-top: -15px;
}

.single-testimonial-item:after {
background: #ddd;
content: "";
height: 70%;
left: 60px;
position: absolute;
top: 10%;
width: 1px;
}

.single-testimonial-item h3 {
font-size: 20px;
font-style: normal;
margin-bottom: 0;
}

.single-testimonial-item h3 span {
display: block;
font-size: 12px;
font-weight: normal;
margin-top: 5px;
}


.owl-carousel img.rounded-circle {
display: block;
width: 60px;
position: relative;
height: 60px;
}
/* GOOGLE REVIEW END */

.contact-info{
line-height: 1.6;    
}

@keyframes blink{
0%{opacity: 1;}
50%{opacity: 0;}
100%{opacity: 1;}
}     
#blink-icon{
font-size: 22px;      
animation: blink 1s infinite;      
}
.buy-confidence{
font-size: 18px;      
}

.slick-item-partner{
padding:10px;    
margin-right:10px;
border-radius: 5px;
align-items: center;
border: 1px solid lightgrey;
}

/*.pay{*/
/*margin: 4px;*/
/*border-radius: 4px;*/
/*border: 1px solid #004767;*/
/*overflow: hidden;*/
/*float: left;*/
/*}*/

.pay label {
float: left; 
width: 15.0em; 
cursor:pointer;
}

.pay label span {
text-align: center;
padding: 4px 0;
display: block;
}

.pay label input {
position: absolute;
/*display: none;*/
color: #fff !important;
}

.pay label input + span{color: #fff;}
.pay input:checked + span {
color: #ffffff;
text-shadow: 0 0  6px rgba(0, 0, 0, 0.8);
}
.pay-active input:checked +span{
margin: 4px;
border-radius: 4px;
border: 1px solid #004767;
overflow: hidden;
float: left;
height: 40px;
margin-left: -30px;

}
.pay{
margin: 4px;
border-radius: 4px;
border: 1px solid #fff;

}

.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;
margin: 0px;
margin-bottom: 10px;
}
/* ===============================================================================product-category-wrapper- TOP LEFT======================================================================================*/
  /* wrapper */
  .product-category-wrapper {
    margin-bottom: 12px;
  }

  /* row */
  .product-category-header {
    display: flex;
    align-items: center;
    gap: 4px;

    /* your positioning */
    margin-left: 67px;
    margin-top: 10px;
    margin-bottom: 14px;
  }

  /* muted label */
  .product-category-header .category-label {
    font-size: 15px;
    font-weight: 440;
    color: #777;          /* muted */
    line-height: 1;
    margin-right: 4px;
     position: relative;
  top: -1.8px;
  }

  /* category link */
  .product-category-header .category-link {
    display: inline-block;
    position: relative;

    font-size: 16px;
    font-weight: 500;
    color: #0d6efd;
    text-decoration: none;
    line-height: 1;

    padding-bottom: 2px;  /* distance between text & underline */
    cursor: pointer;
  }

  /* underline */
  .product-category-header .category-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;            /* sits after padding */
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s ease;
  }

  /* hover underline */
  .product-category-header .category-link:hover::after {
    width: 100%;
  }
  
  /* =========================
   MOBILE VIEW FIX ONLY
========================= */
@media (max-width: 767px) {

  .product-category-header {
    margin-left: 12px;   /* closer to left edge */
    margin-top: 18px;    /* ~5px lower than desktop */
  }

  .product-category-header .category-label {
    top: 12;              /* reset tiny desktop lift */
  }
}



/* ===================================================================================== FULL PRICE CARD  =================================================================================================*/

          .ag-wrap { display:flex; gap:12px; align-items:flex-start; }

          /* Desktop: left thumb rail */
          .ag-rail { width:52px; display:flex; flex-direction:column; align-items:center; gap:8px; }
          .ag-thumb {
            width:44px; height:44px; border:1px solid #d5d5d5; border-radius:6px; background:#fff;
            display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; position:relative;
            transition:border-color .15s, box-shadow .15s;
          }
          .ag-thumb img{ width:100%; height:100%; object-fit:cover; }
          .ag-thumb:hover{ border-color:#6aa6ff; box-shadow:0 0 0 2px rgba(0,102,255,.15) inset; }
          .ag-thumb.active{ border-color:#007185; box-shadow:0 0 0 2px rgba(0,113,133,.15) inset; }
          .ag-more { position:absolute; right:6px; bottom:6px; background:#fff; border:1px solid #cfcfcf; border-radius:6px; font-size:12px; padding:0 6px; line-height:20px; height:20px; display:flex; align-items:center; }

          /* Desktop: main stage */
          .ag-stage {
            position:relative; flex:1; display:flex; align-items:center; justify-content:center; background:#fff;
            border:1px solid #eee; border-radius:8px; padding:8px; min-height:420px; overflow:hidden;
          }
          .ag-stage img { max-width:100%; max-height:640px; object-fit:contain; }

          .ag-fullview { margin-top:12px; text-align:center; }
          .ag-fullview a { color:#007185; text-decoration:none; font-size:14px; }
          .ag-fullview a:hover { text-decoration:underline; }

          /* ====== DESKTOP HOVER ZOOM ====== */
          @media (min-width: 576px){
            .ag-stage { overflow:hidden; }
            #agMain { transition: transform .3s ease; cursor: zoom-in; }
            #agMain.ag-zoomed { cursor: zoom-out; transform: scale(1.6); }
          }

          /* Mobile */
          @media (max-width:575.98px){
            .ag-wrap { flex-direction:column; }
            .ag-rail { display:none; }
            .ag-stage { min-height:340px; border:none; padding:0; }

            .ag-track { position:relative; width:100%; height:320px; overflow:hidden; border-radius:12px; background:#fff; touch-action: pan-y; }
            .ag-strip { width:100%; height:100%; display:flex; transition:transform .3s ease; will-change: transform; }
            .ag-slide { min-width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
            .ag-slide img { width:100%; height:100%; object-fit:contain; }

            .ag-dots { display:flex; justify-content:center; gap:6px; margin-top:12px; }
            .ag-dot { width:6px; height:6px; border-radius:50%; background:#cfcfcf; transition:transform .2s, background .2s; }
            .ag-dot.active { background:#111; transform:scale(1.2); }

            .ag-share {
              position:absolute; right:10px; bottom:10px; width:34px; height:34px; border:1px solid #ddd; border-radius:50%;
              background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.12);
            }
            .ag-badge {
              position:absolute; left:10px; top:10px; background:#d35400; color:#fff; font-weight:700;
              font-size:12px; border-radius:999px; padding:8px 8px; line-height:1; display:flex; align-items:center; justify-content:center;
            }
            .ag-fullview { display:none; }
          }

          /* Shared helpers (align with earlier file) */
          .prdName{padding-top:10px;font-weight:600;font-size:18px;}
          .short-disc h1,.short-disc ul,.short-disc li,.short-disc h2,.short-disc h3,.short-disc h4,.short-disc h5,.short-disc h6,.short-disc p,.short-disc span{font-size:13px !important;}
          .price-card{border:1px solid #e6e6e6;border-radius:10px;padding:14px 16px;background:#fff;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.04);max-width:360px;}
          .price-card .incl-line{font-size:16px;font-weight:600;color:#1a9f2f;}
          .price-card .incl-line .incl-text{font-size:14px;color:#1a9f2f;margin-left:6px;}
          .price-card .main-line{margin-top:8px;display:flex;align-items:baseline;gap:10px;}
          .price-card .big-price{font-size:34px;font-weight:800;line-height:1;}
          .price-card .plus-gst{font-size:18px;color:#444;font-weight:600;}
          .price-card .mrp-line{margin-top:6px;display:flex;align-items:center;gap:10px;font-size:16px;}
          .price-card .mrp-line del{color:#9b9b9b;}
          .price-card .off{color:#1a9f2f;font-weight:800;}
          .price-card .gst-note{margin-top:6px;font-size:12px;color:#777;}

          /* Ratings */
          .rating-wrap{display:flex;align-items:center;gap:8px;}
          .rating-stars i{font-size:16px;line-height:1;color:#f5a623;}
          .rating-value{font-weight:600;font-size:14px;color:#222;}
          .rating-count a{text-decoration:none;color:#555;}
      
      
      
/* =================================================================================== VARIENTS STYLING BELOW  =========================================================================================*/

/* ===== OUTER CONTAINER ===== */
.m-variant-wrap{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  background:#fafafa;
}

/* ===== GRID ===== */
.m-variant-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* COLLAPSED → 4 per row */
.m-variant-item{
  width:calc(25% - 8px);
}

/* EXPANDED → 5 per row */
.m-variant-grid.expanded .m-variant-item{
  width:calc(20% - 8px);
}

/* HIDDEN HANDLING */
.m-hidden{
  display:none !important;
}
.m-variant-grid.expanded .m-hidden{
  display:block !important;
}

/* ===== CARD ===== */
.m-variant-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:6px 4px;
  text-align:center;
  font-size:11px;
  color:#111;
  text-decoration:none;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ===== IMAGE ===== */
.m-variant-img{
  width:48px;
  height:48px;
  margin:0 auto 4px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.m-variant-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* ===== TITLE ===== */
.m-variant-title{
  height:26px;
  line-height:1.2;
  overflow:hidden;
}

/* ===== PRICE ===== */
.m-variant-price{
  font-weight:600;
  margin-top:2px;
}

/* ===== VIEW MORE / LESS BUTTON ===== */
.m-variant-btn{
  border:1px dashed #007185;
  color:#007185;
  font-weight:600;
  background:#fff;
  width:100%;
  height:100%;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* =====================================================================================NO. OF STOCK LEFT =================================================================================================*/

.stock-text-only{
  margin-top: 4px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #92400e;
  letter-spacing: .2px;
  line-height: 1.2;
}

/* ===== LOW STOCK – TEXT ONLY ===== */

.stock-text-only{
  margin-top: 6px;
  margin-bottom: 12px;   /* ✅ SAME rhythm before price */
  font-size: 15px;
  font-weight: 600;
  color: #92400e;
  letter-spacing: .2px;
  line-height: 1.2;
}

/* mobile */
@media(max-width:576px){
  .stock-text-only{
    font-size: 13px;
  }
}
/* ========================================================================= LIVE VIEWERS + OFFER CHIPS + SPEC TABLES ,ETC   ===============================================================================*/

              .review-btn{background:transparent;display:block;font-size:16px;line-height:29px;border:1px solid #d5d9d9;padding:8px 12px 6px 13px;text-align:center;border-radius:8px;box-shadow:0 2px 5px rgba(213,217,217,.5);margin-bottom:22px;text-transform:capitalize;color:#000;}
              .exchnage-sec p {font-size: 12px;line-height: 18px;margin-top: 6px;color: #007185;}
              /* Spec table header coloring (kept) */
              .table th { background-color:#f1f8ff; font-weight:700; color:#007bff; }
              .table td { vertical-align: middle; }
              /* Offer chips */
              .coupon-wrapper{display:flex;flex-direction:column;gap:8px;}
              .coupon-item{display:flex;align-items:center;gap:10px;}
              .offer-btn{background:#fff;color:#000;border-radius:30px;font-size:14px;font-weight:600;white-space:nowrap;border:1px solid #ddd;transition:.3s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;line-height:1;min-height:34px;}
              .offer-btn i{margin-right:6px;font-size:14px;line-height:1;display:flex;align-items:center;}
              .offer-btn.active{background:#00a0e3!important;color:#fff!important;border-color:#00bfff;}
              .switch{position:relative;display:inline-block;width:38px;height:20px;}
              .switch input{display:none;}
              .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:.3s;border-radius:20px;}
              .slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%;}
              input:checked + .slider{background:#00a0e3;}
              input:checked + .slider:before{transform:translateX(18px);}

              /* LIVE VIEWERS (added) */
              .live-viewers-box{
                display:inline-flex; align-items:center; gap:8px;
                background:#fff; border:1px solid #d5d9d9; border-radius:10px;
                padding:8px 12px; box-shadow:0 2px 6px rgba(0,0,0,.05);
                font-size:14px; line-height:1.2; margin-bottom:12px;
              }
              .live-viewers-box .eye{
                width:22px; height:22px; border-radius:50%;
                display:inline-flex; align-items:center; justify-content:center;
                border:1px solid #d5d9d9; background:#f9fafa;
              }
              .live-viewers-box .count{ font-weight:700; }
           
   /* ================================================================================= BRAND ON PRODUCT PAGE   ===================================================================================*/


.product-brand a,
.product-brand-mobile a {
  position: relative;
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
  line-height: 1;          /* most important */
}

/* underline */
.product-brand a::after,
.product-brand-mobile a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;            
  width: 0;
  height: 1px;             /* thin & tight */
  background-color: currentColor;
  transition: width 0.2s ease;
}

/* hover */
.product-brand a:hover::after,
.product-brand-mobile a:hover::after {
  width: 100%;
}



/* common link base */
.product-brand a,
.product-brand-mobile a,
.product-category-header a {
  position: relative;
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
  line-height: 1;            
  cursor: pointer;
}

/* underline (hidden by default) */
.product-brand a::after,
.product-brand-mobile a::after,
.product-category-header a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;              
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.22s ease;
}


/* ========================================================================================== about-us.blade.php   ================================================================================================*/

/* Add shine effect */
.certificate-container {
    position: relative;
    overflow: hidden; /* keep shine inside */
}
.certificate-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 215, 0, 0.2) 0%,
        rgba(255, 223, 100, 0.6) 50%,
        rgba(255, 215, 0, 0.2) 100%
    );
    transform: skewX(-25deg);
}
.certificate-container:hover::before {
    animation: shine 0.9s ease forwards;
}

@keyframes shine {
    0% { left: -75%; }
    100% { left: 125%; }
}

/* ====== Certificate Card Styling ====== */
.certificate-container {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 25px;
    font-family: 'Poppins', sans-serif;
    margin: 15px auto;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.certificate-container:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.certificate-header {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #eee;
}
.certificate-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 1px;
}
.certificate-name {
    font-size: 26px;
    font-weight: bold;
    color: #2c3e50;
    font-family: 'Georgia', serif;
    margin: 15px 0 10px;
}
.certificate-description i {
    color: #3498db;
}
.certificate-date {
    font-size: 13px;
    color: #7f8c8d;
    margin-top: 10px;
    font-weight: 500;
}

/* ====== About Us Content Styling ====== */
.ked {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 35px;
    text-align: justify;
}
.ked h2, .ked h3 {
    font-weight: 700;
    font-size: 22px;
    color: #2c3e50;
    margin-top: 25px;
    margin-bottom: 15px;
    border-left: 4px solid #3498db;
    padding-left: 12px;
}
.ked p {
    margin-bottom: 12px;
}
.ked ul {
    margin: 10px 0 20px 20px;
    padding: 0;
    list-style: none;
}
.ked ul li {
    margin-bottom: 10px;
    font-size: 15px;
    color: #555;
    position: relative;
    padding-left: 22px;
}
.ked ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #3498db;
    font-weight: bold;
}

/* ====== Animated Header ====== */
.page-main-heading {
    font-size: 34px;
    font-weight: 800;
    background: linear-gradient(90deg, #007bff, #00c6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
    animation: fadeSlideDown 1s ease-out;
    margin-bottom: 25px;
}
.page-main-heading::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 80px;
    height: 3px;
    background: #007bff;
    border-radius: 2px;
}

/* Animations */
@keyframes fadeSlideDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ====== Center Button ====== */
.buy-confidence {
    display: inline-block;
    margin: 25px auto 0;
    text-align: center;
}
.text-center-btn {
    text-align: center;
}





/* ========================================================================================== Product detail   ================================================================================================*/

  /* =============== RECENT PURCHASE TOAST =============== */
.recent-purchase-toast {
  position: fixed;
  left: 20px;
  bottom: 96px; /* ⬅️ pushes it ABOVE sticky bottom bar */
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
}


 .recent-purchase-card {
  width: 340px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  pointer-events: auto;
  opacity: 0;

  /* ⬅️ START OFF SCREEN LEFT */
  transform: translateX(-40px);

  transition:
  transform 0.45s cubic-bezier(.22,.61,.36,1),
  opacity 0.25s ease;

  cursor: pointer;
}


  .recent-purchase-card.show {
  opacity: 1;
  transform: translateX(0); /* ⬅️ glide in from left */
}


  .recent-purchase-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .recent-purchase-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .recent-purchase-body {
    flex: 1;
    text-align: left;
  }

  .recent-purchase-name {
    font-weight: 800;
    font-size: 15px;
    color: #111;
    margin-bottom: 6px;
    line-height: 1.1;
  }

  .recent-purchase-product {
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
    max-height: 66px;
    overflow: hidden;
  }

  .recent-purchase-time {
    font-size: 11px;
    color: #888;
  }

  .recent-purchase-close {
    margin-left: 8px;
    background: transparent;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
  }
  
@media(max-width: 768px){
    .recent-purchase-toast{
        display: none !important;
    }
}


  @media(max-width:480px){
    .recent-purchase-card { width: 92%; padding: 10px; }
    .recent-purchase-thumb { width: 48px; height: 48px; }
    .recent-purchase-name { font-size: 14px; }
    .recent-purchase-product { font-size: 12px; }
  }
  
 
/* =========================================================
   🔧 GLOBAL CONTROLS (CHANGE ONLY THESE)
========================================================= */
:root {

  --sab-btn-gap: 20px; /*  control gap here */

  /* 🔹 Overall scale */
  --sab-scale: 1;

  /* 🔹 Main container height */
  --sab-height: 0px;

  /* 🔹 Left-right padding of bar */
  --sab-padding-x: 24px;

  /* 🔹 Space between image & text */
  --sab-left-gap: 26px;

  /* 🔹 Move LEFT section horizontally */
  --sab-left-shift: 100px;   

  /* 🔹 Move BUTTON section horizontally */
  --sab-actions-shift: -120px; 

  /* 🔹 Button sizing */
  --sab-btn-height: 46px;
  --sab-btn-padding-x: 26px;
  --sab-btn-radius: 3px;

  /* 🔹 Font sizes */
  --sab-title-size: 17px;
  --sab-price-size: 15px;
  --sab-btn-font: 14px;
}

/* =========================================================
   📌 STICKY BAR BASE
========================================================= */
.sticky-action-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sab-height);
  background: #ffffff;
  z-index: 10001;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);

  transform: translateY(120%);
  transition: transform .35s ease;
}

.sticky-action-bar.show{
  transform: translateY(0);
}

/* small styling when OOS (optional polish) */
.sticky-action-bar.oos{
  box-shadow: none;
}

/* =========================================================
   📦 INNER LAYOUT
========================================================= */
.sab-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sab-padding-x);
  transform: scale(var(--sab-scale));
  transform-origin: center;
}

/* =========================================================
   🖼 LEFT SECTION (IMG + INFO)
========================================================= */
.sab-left{
  display: flex;
  align-items: center;
  gap: var(--sab-left-gap);
  transform: translateX(var(--sab-left-shift));
}

.sab-left img{
  width: 67px;
  height: 67px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}

.sab-info{
  display: flex;
  flex-direction: column;
}

.sab-name{
  font-size: var(--sab-title-size);
  font-weight: 600;
  color: #111;
  line-height: 1.2;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sab-price{
  font-size: var(--sab-price-size);
  font-weight: 700;
  color: #16a34a;
}

/* =========================================================
   🟦 ACTION BUTTONS
========================================================= */
.sab-actions{
  display: flex;
  gap: var(--sab-btn-gap); /* ⬅️ THIS creates space */
  transform: translateX(var(--sab-actions-shift));
}

/* =========================================================
   🟦 ACTION BUTTONS – FINAL COLOR LOGIC
========================================================= */

.sab-btn{
  height: var(--sab-btn-height);
  padding: 0 var(--sab-btn-padding-x);
  border-radius: var(--sab-btn-radius);
  font-size: var(--sab-btn-font);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border .15s ease;
}

/* ADD TO CART – white (also used for wishlist visually) */
.sab-cart{
  background: #ffffff;
  color: #000000;
  border: 1px solid #d1d5db;
}

/* BUY NOW – black (also used for primary actions) */
.sab-buy{
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}

/* HOVER – blue for BOTH */
.sab-cart:hover,
.sab-buy:hover{
  background: #00bfff;
  color: #ffffff;
  border-color: #00bfff;
}

/* small disabled look */
.sab-btn[disabled]{
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================
   📱 MOBILE SAFE AREA
========================================================= */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky-action-bar{
    bottom: env(safe-area-inset-bottom);
  }
}

/* =========================================================
   🖥 DESKTOP
========================================================= */
@media (min-width: 992px){
  body{
    padding-bottom: var(--sab-height);
  }
}

/* =========================================================
   📱 HIDE STICKY BAR ON MOBILE
========================================================= */
@media (max-width: 767px) {
  .sticky-action-bar {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important; /* remove extra space */
  }
}


.variant-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.variant-item{
  width:calc(20% - 12px);
}

@media(max-width:767px){
  .variant-item{
    width:calc(50% - 12px);
  }
}

.variant-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px 8px;
  text-align:center;
  color:#111;
  text-decoration:none;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.variant-img{
  width:70px;
  height:70px;
  margin:0 auto 6px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.variant-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.variant-title{
  font-size:12px;
  line-height:1.2;
  min-height:32px;
}
.variant-price{
  font-size:13px;
  font-weight:600;
  margin-top:4px;
}

.variant-hidden{
  display:none;
}

/* View More / Less */
.variant-more-btn{
  width:100%;
  min-height:140px;
  border:1px dashed #007185;
  background:#fff;
  color:#007185;
  font-weight:600;
  cursor:pointer;
  border-radius:10px;
}
      .rvp-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding-bottom: 6px;
      }
      .rvp-card {
        flex: 0 0 220px;
        background: #fff;
        /* border removed as requested */
        border: none;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
        position: relative;
      }
      .rvp-thumb {
        position: relative;
        width: 100%;
        padding-top: 70%;
        background: #fff;
        overflow: hidden;
      }
      .rvp-thumb img {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;
      }
      .rvp-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,.12);
      }
      .rvp-remove:hover { background:#f8fafc; }
      .rvp-body { padding: 10px 12px; text-align: center; }
      .rvp-title { font-size: 14px; font-weight: 600; color: #222; height: 38px; overflow: hidden; }
      .rvp-price { margin-top: 6px; }
      .rvp-price .now { color: #198754; font-weight: 700; }
      .rvp-price del { color: #888; margin-left: 8px; }

      /* Owl support (if present) */
      .rvp-owl .owl-stage-outer { padding: 4px 2px; }
      
/* ========================================================================================== all_categories (o)   ================================================================================================*/


/* --- Static Shiny Title --- */
.static-shiny-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem; font-weight: 800; color: #000; letter-spacing: .5px;
  opacity: 0; transform: translateY(15px); animation: fadeUp .5s ease-out forwards;
}
@keyframes fadeUp { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform: translateY(0);} }

/* --- Result Count --- */
.result-count { font-size: .82rem; color:#6c757d; letter-spacing:.2px; }

/* --- Loading Text Animation --- */
.loading-text { font-size:1rem; font-weight:500; }
.loading-text .dots::after { content:''; display:inline-block; animation:dots .6s steps(5,end) infinite; }
@keyframes dots { 0%,20%{content:'';} 40%{content:'.';} 60%{content:'..';} 80%,100%{content:'...';} }

/* --- Circle Grid Cards (Categories) --- */
.cat-wrapper{ display:flex; flex-direction:column; align-items:center; }

/* ✅ Gradient fallback; final colors are applied by JS per card */
.cat-card{
  background: linear-gradient(135deg, #fdfbfb, #ebedee);
  border-radius:50%; width:220px; height:220px; display:flex;
  justify-content:center; align-items:center; margin:0 auto; box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:all .3s ease; overflow:hidden; position:relative; border:1px solid #f0f0f0;
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.12); }
.cat-logo img{ width:75%; height:75%; object-fit:contain; transition: transform .25s ease; }
.cat-card:hover .cat-logo img{ transform: scale(1.05); }
.cat-name{
  text-align:center; font-weight:600; font-size:15px; color:#2b2b2b; text-transform:capitalize;
  transition:all .25s ease; margin-top:12px;
}
.cat-wrapper a:hover .cat-name{ color:#007bff; transform: translateY(-2px); }

/* --- Responsive --- */
@media (max-width:1199px){ .cat-card{ width:180px; height:180px; } }
@media (max-width:991px){ .cat-card{ width:150px; height:150px; } .cat-name{ font-size:14px; } }
@media (max-width:768px){ .cat-card{ width:120px; height:120px; } .cat-name{ font-size:13px; } }
@media (max-width:576px){ .cat-card{ width:100px; height:100px; } .cat-name{ font-size:12px; } }

/* ========================================================================================== all_brands (o)   ================================================================================================*/
/* --- Static Shiny Title --- */
.static-shiny-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem; font-weight: 800; color: #000; letter-spacing: 0.5px;
  opacity: 0; transform: translateY(15px); animation: fadeUp 0.5s ease-out forwards;
}
@keyframes fadeUp { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform: translateY(0);} }

/* --- Result Count --- */
.result-count { font-size: .82rem; color:#6c757d; letter-spacing:.2px; }

/* --- Loading Text Animation --- */
.loading-text { font-size:1rem; font-weight:500; }
.loading-text .dots::after { content:''; display:inline-block; animation:dots .6s steps(5,end) infinite; }
@keyframes dots { 0%,20%{content:'';} 40%{content:'.';} 60%{content:'..';} 80%,100%{content:'...';} }

/* --- Brand Grid Circular Cards --- */
.brand-wrapper{ display:flex; flex-direction:column; align-items:center; }
.brand-card{
  background:#fff; border-radius:50%; width:220px; height:220px; display:flex;
  justify-content:center; align-items:center; margin:0 auto; box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:all .3s ease; overflow:hidden; position:relative; border:1px solid #f0f0f0;
}
.brand-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.12); }
.brand-logo img{ width:75%; height:75%; object-fit:contain; transition: transform .25s ease; }
.brand-card:hover .brand-logo img{ transform: scale(1.05); }
.brand-name{
  text-align:center; font-weight:600; font-size:15px; color:#2b2b2b; text-transform:capitalize;
  transition:all .25s ease; margin-top:12px;
}
.brand-wrapper a:hover .brand-name{ color:#007bff; transform: translateY(-2px); }

/* --- Responsive --- */
@media (max-width:1199px){ .brand-card{ width:180px; height:180px; } }
@media (max-width:991px){ .brand-card{ width:150px; height:150px; } .brand-name{ font-size:14px; } }
@media (max-width:768px){ .brand-card{ width:120px; height:120px; } .brand-name{ font-size:13px; } }
@media (max-width:576px){ .brand-card{ width:100px; height:100px; } .brand-name{ font-size:12px; } }


/* ========================================================================================== buy with confidence =================================================================================================*/
 #pdf-viewer {
  text-align: center;
  margin-top: 5px;
 }
 #canvas {
  border: 1px solid black;
  margin-top: 5px;
  cursor: none;
  max-width: 100%;  /* Ensure canvas scales with the width of the screen */
  height: auto;     /* Maintain aspect ratio */
  margin-top: 20px;
 }
 .canvas-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px;     
 }
 
 /* MINI CART ON THE RIGHT */
 button {
  font-size: 16px;
  align-items: center;
  cursor: pointer;
 }
 
 @media (max-width: 767px) {
  button {
   font-size: 14px;
   padding: 8px 16px;
  }
 }
 @media (max-width: 767px) {
  .canvas-container {
   padding: 10px;
  }
  button {
   font-size: 14px;
   padding: 8px;
  }
  canvas {
   width: 100%;  /* Full width for smaller screens */
   height: auto;
  }
 }
 
/* ========================================================================================== my-cart blade (imp) ================================================================================================*/
:root{
    --primary:#04648d;
    --gold:#f59e0b;
}

/* ===============================
   Checkout Steps (SAME AS CHECKOUT)
   =============================== */
.checkout-steps-wrapper{
    display:flex;
    justify-content:center;
    gap:14px;
    padding:12px 16px;
    background:#fff;
    border-bottom:1px solid #e6e6e6;
    position:sticky;
}

.checkout-step{
    min-width:180px;
    padding:11px 18px;
    font-size:13px;
    font-weight:600;
    text-align:center;
    border:1px solid #111;
    background:#fff;
    color:#111;
    border-radius:0;
    cursor:pointer;
    text-decoration:none;
    transition:all .18s ease;
}

.checkout-step.active{
    background:#111;
    color:#fff;
}

.checkout-step.disabled{
    opacity:.4;
    pointer-events:none;
}

.checkout-step:hover{
    background:#f7f7f7;
}

/* =========================================
   MOBILE
   ========================================= */
@media (max-width: 576px) {

  .checkout-steps-wrapper {
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
  }

  .checkout-step {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;

    border-radius: 0;              /* flat */
    border: 1px solid #111;
    background: #fff;
    color: #111;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ACTIVE (My Cart) */
  .checkout-step.active {
    background: #111;
    color: #fff;
    box-shadow: none;
  }

  /* DISABLED (Payment) */
  .checkout-step.disabled {
    background: #f8f8f8;
    color: #999;
    border-color: #ccc;
    opacity: 1;
  }

  /* Billing & Shipping label shorten (same as checkout) */
  .checkout-step:nth-child(2) {
    font-size: 0;
  }

  .checkout-step:nth-child(2)::after {
    content: "Address";
    font-size: 13px;
    font-weight: 600;
  }
}


/* ===============================
   General Layout
   =============================== */
.breadcrumb-area-3{padding:50px 0;background-size:cover}
.cart-area{background:#f8f9fb;padding:40px 0}
.cart-layout{display:flex;gap:24px}

/* ===============================
   Coupon Card
   =============================== */
.coupon-card{
    background:#fff;
    border-radius:14px;
    padding:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    margin-bottom:24px;
}

/* GOLDEN APPLY BUTTON */
.coupon-card .btn.btn-primary{
    background:linear-gradient(135deg,#f7c948,#f59e0b);
    border:none;
    color:#111;
    font-weight:700;
    box-shadow:0 6px 14px rgba(245,158,11,.25);
}
.coupon-card .btn.btn-primary:hover{
    background:linear-gradient(135deg,#facc15,#f59e0b);
    transform:translateY(-1px);
}

/* ===============================
   Cart Product Card
   =============================== */
.cart-product{
    background:#fff;
    border-radius:16px;
    padding:20px;
    display:flex;
    gap:18px;
    position:relative;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    margin-bottom:20px;
}

.cart-img{width:110px;display:flex;align-items:center;justify-content:center}
.cart-img img{max-width:100px;max-height:100px}

.cart-detail{flex:1}

/* Mobile: product title */
@media (max-width: 576px) {
  .cart-prd-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;          /* ⬅ allow more info */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 13px;               
    line-height: 1.35;
    font-weight: 500;               

    max-height: calc(1.35em * 3);
    padding-right: 36px;            /* trash icon space */

    color: #111;
  }
}
  .cart-prd-name {
    margin-bottom: 8px;
  }

  .cart-price {
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
  }

  .qty-control {
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .item-total {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
  }
}


  .cart-remove {
    top: 12px;
    right: 12px;
  }
}

.cart-price{font-size:13px;color:#777}

/* Quantity */
.qty-control{
    display:inline-flex;
    align-items:center;
    border:1px solid #e1e5ea;
    border-radius:999px;
    overflow:hidden;
    margin-top:12px;
}
.qty-btn{
    width:36px;
    height:36px;
    border:none;
    background:#f4f6f8;
    font-weight:700;
    cursor:pointer;
}
.qty-btn:hover{background:#e9edf1}
.qty-input{
    width:46px;
    height:36px;
    border:none;
    text-align:center;
    font-weight:600;
    background:#fff;
}

.item-total{
    font-size:18px;
    font-weight:700;
    color:#00a0e3;
    margin-top:10px;
    display:block;
}

/* Remove */
.cart-remove{
    position:absolute;
    top:14px;
    right:14px;
}

/* ===============================
   Order Summary
   =============================== */
.order-summary{
    background:#fff;
    border-radius:16px;
    padding:24px;
    position:sticky;
    top:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.order-summary h4{
    font-size:20px;
    font-weight:700;
    color:#00a0e3;
    margin-bottom:16px;
}

.order-summary ul{list-style:none;padding:0}
.order-summary li{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #eee;
}
.order-summary li.total{
    font-size:20px;
    font-weight:700;
    border-bottom:none;
}


/* Proceed to Checkout — base */
.proceed{
    margin-top:20px;
    display:block;
    text-align:center;
    padding:14px;
    border-radius:6px;
    background:#111;
    color:#fff;
    font-weight:700;
    letter-spacing:.4px;
    border:1px solid #111;
    transition:all .2s ease;
}

/* Hover state */
.proceed:hover{
    background:#fff;
    color:#111;
    border-color:#111;
    transform: translateY(-1px);
}

.cart-prd-name{
    display:block;
    color:#111;
    text-decoration:none;
}
.cart-prd-name:hover{
    text-decoration:underline;
}


/* ===============================
   Responsive
   =============================== */
@media(max-width:991px){
    .cart-layout{flex-direction:column}
    .order-summary{position:relative}
}

/* ==========================================================================================VIEW CATEGORIES (imp) ================================================================================================*/
.category-card-link{
    text-decoration:none;
    color:inherit;
}

/* NORMAL CATEGORY CARD */
.category-card{
    background:#f3f6f9;
    border:1px solid #e1e6eb;
    height:100%;
    display:flex;
    flex-direction:column;
    transition:.25s ease;
}

.category-card:hover{
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transform:translateY(-3px);
}

/* IMAGE */
.category-img{
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
}

.category-img img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

/* LABEL */
.category-label{
    background:#fff;
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:#333;
    padding:8px 5px;
    border-top:1px solid #e6e6e6;
}

/* ================= VIEW ALL CTA CARD ================= */

/* DESKTOP LOOK */
.view-all-card{
    background:#ffffff;
    border:2px dashed #cfd6dd;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}

.view-all-inner{
    display:flex;
    align-items:center;
    gap:16px;
}

.view-all-text{
    font-size:18px;
    font-weight:800;
    line-height:1.2;
    color:#111;
}

.view-all-arrow{
    font-size:26px;
    font-weight:700;
    transition:.25s ease;
}

/* HOVER = CLICKABLE FEEL */
.view-all-card:hover{
    border-color:#0d6efd;
    background:#f5f8ff;
    box-shadow:0 10px 28px rgba(13,110,253,.15);
}

.view-all-card:hover .view-all-text,
.view-all-card:hover .view-all-arrow{
    color:#0d6efd;
}

.view-all-card:hover .view-all-arrow{
    transform:translateX(6px);
}

/* ================= MOBILE FIX ================= */
@media(max-width:576px){

    /* Make rectangle, not tall box */
    .view-all-card{
        padding:16px 10px;
    }

    .view-all-inner{
        justify-content:space-between;
        width:100%;
    }

    .view-all-text{
        font-size:14px;
        font-weight:700;
    }

    .view-all-arrow{
        font-size:20px;
    }

    .category-img{
        height:140px;
    }

    .category-label{
        font-size:13px;
    }
}

/* ================= MOBILE VIEW ALL CTA FIX ================= */
@media (max-width: 576px){

    /* Make View All a slim horizontal CTA */
    .view-all-card{
        border:1.5px dashed #cfd6dd;
        padding:12px 14px;
        min-height:auto;
    }

    .view-all-inner{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .view-all-text{
        font-size:14px;
        font-weight:700;
        line-height:1.2;
    }

    .view-all-arrow{
        font-size:20px;
    }

    /* Reduce visual weight */
    .view-all-card:hover{
        box-shadow:0 6px 16px rgba(13,110,253,.12);
    }
}
/* ========================================================================================== CHEKOUT STEPS (imp) ================================================================================================*/

/* ========================================================================================== QNA ================================================================================================*/
 body { background-color: #fff !important; }
    .qna-title { font-size: 26px; font-weight: 600; line-height: 35px; margin-bottom: 15px; }
    .qna-form-title { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
    .qna-form-des { font-size: 14px; color: #666; margin-bottom: 20px; }
    .qna-control { width: 100%; background: #f8f9fa; padding: 1rem; border-radius: .5rem; resize: none; margin-bottom: .5rem; border: 1px solid #ddd; }
    .submit-qna { background: #00a0e3; border: none; padding: 10px 20px; border-radius: 6px; color: #fff; font-weight: 600; transition: 0.3s; }
    .submit-qna:hover { background: #0086bf; }
    .sin-qna { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
    .qna-author h5 { font-size: 16px; font-weight: 600; margin: 0; }
    .question { font-size: 15px; font-weight: 500; margin-top: 8px; color: #222; }
    .answer { margin-top: 6px; font-size: 14px; line-height: 22px; color: #444; padding-left: 10px; border-left: 2px solid #00a0e3; }
    .qna-wrapper { max-height: 500px; overflow-y: auto; padding-right: 10px; }
    .qna-wrapper::-webkit-scrollbar { width: 6px; }
    .qna-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
    
    /* ========================================================================================== WRITE REVIEW ================================================================================================*/
    body{
    background:#f1f3f6;
}

/* ================= PRODUCT HEADER ================= */
.review-product-card{
    background:#fff;
    border-radius:14px;
    padding:20px;
    display:flex;
    gap:20px;
    align-items:center;
    box-shadow:0 4px 18px rgba(0,0,0,.06);
    margin-bottom:30px;
}
.review-product-card img{
    width:120px;
    height:120px;
    object-fit:contain;
    border-radius:10px;
    background:#fafafa;
}
.review-product-title{
    font-size:22px;
    font-weight:600;
}
.review-product-link{
    color:#2874f0;
    font-size:14px;
}

/* ================= LEFT FORM ================= */
.review-box{
    background:#fff;
    border-radius:14px;
    padding:24px;
    box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.review-box h3{
    font-size:20px;
    font-weight:600;
}

/* ============ PERFECT 0.5 STAR FIX (FA 5/6) ============ */

.rating {
    border: none;
    display: inline-block;
}

.rating fieldset {
    border: none;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.rating input {
    display: none;
}

.rating label {
    cursor: pointer;
    font-size: 30px;
    color: #ddd;
    position: relative;
    padding: 0 2px;
}

/* FULL STAR */
.rating label.full::before {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* HALF STAR */
.rating label.half::before {
    content: "\f089";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
}

/* HOVER + CHECKED */
.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
    color: #ffb400;
}

/* FIX hover conflicts */
.rating input:checked + label:hover,
.rating input:checked ~ label:hover,
.rating input:checked ~ label:hover ~ label,
.rating label:hover ~ input:checked ~ label {
    color: #ffb400;
}


/* Fix hover + checked conflicts */
.rating input:checked + label:hover,
.rating input:checked ~ label:hover,
.rating input:checked ~ label:hover ~ label,
.rating label:hover ~ input:checked ~ label{
    color:#ffb400;
}

/* ================= FORM ================= */
.review-control{
    width:100%;
    margin-top:14px;
    border:1px solid #ddd;
    border-radius:10px;
    padding:14px;
    font-size:14px;
    resize:none;
}
.submit-rating{
    margin-top:15px;
    background:#ff9f00;
    color:#fff;
    border:none;
    padding:12px 26px;
    border-radius:8px;
    font-weight:600;
    transition:.2s;
}
.submit-rating:hover{
    background:#fb8c00;
}

/* ================= RIGHT REVIEWS ================= */
.reviews-wrapper{
    background:#fff;
    border-radius:14px;
    padding:20px;
    box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.single-review{
    padding:16px 0;
    border-bottom:1px solid #eee;
}
.review-user{
    font-weight:600;
}
.review-rating{
    color:#ffb400;
    font-size:14px;
}
.review-text{
    font-size:14px;
    color:#444;
    margin-top:6px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .review-product-card{
        flex-direction:column;
        text-align:center;
    }
}
/* ================= MOBILE VIEW FIX ================= */
@media (max-width: 576px) {

    /* Product card spacing */
    .review-product-card{
        padding:16px;
        gap:14px;
    }

    .review-product-card img{
        width:90px;
        height:90px;
    }

    /* 🔥 FIX TITLE SIZE */
    .review-product-title{
        font-size:16px;     /* reduced from 22px */
        line-height:22px;
        font-weight:600;
    }

    .review-product-link{
        font-size:13px;
        margin-top:4px;
        display:inline-block;
    }

    /* Review box padding */
    .review-box{
        padding:18px;
    }

    .review-box h3{
        font-size:18px;
    }

    /* Stars slightly smaller */
    .rating label{
        font-size:26px;
    }

    /* Textarea */
    .review-control{
        font-size:14px;
        padding:12px;
    }

    /* Submit button full width */
    .submit-rating{
        width:100%;
        padding:12px;
        font-size:15px;
    }

    /* Right reviews */
    .reviews-wrapper{
        padding:18px;
    }

    .review-user{
        font-size:14px;
    }

    .review-text{
        font-size:13px;
    }
}
/* ========================================================================================== PRODUCT-BLADE ================================================================================================*/

/* =====================================================
   PRODUCT GRID
   ===================================================== */

 /* Remove column borders */
#ajax-product > div {
    border: none;
    padding: 0;
}

/* Modern card-style product */
#ajax-product .single-product {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 12px;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transform-origin: bottom center;
    overflow: hidden;
    margin-left: 4px;
    margin-right: 4px;
}

#ajax-product .single-product:hover,
#ajax-product .single-product:active {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    border-color: #ccc;
}

#ajax-product .single-product img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

#ajax-product .single-product:hover img,
#ajax-product .single-product:active img {
    transform: scale(1.08) translateY(-5px);
}

/* =====================================================
   FILTER COLUMN (Compact / Flat Container)
   ===================================================== */

.filter-column {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Compact filter wrapper: keep flat, no shadows/background */
.product__filter-item {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(36,52,68,0.06);
    padding-bottom: 8px;
}

/* Accordion items minimal */
.accordion-item {
    border: none !important;
    background: transparent !important;
    margin: 0;
    padding: 0;
}

/* Slim headers */
.product__filter-title .accordion-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 8px;
    font-weight: 700;
    font-size: 13px;
    color: #243444;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product__filter-title .accordion-button:hover {
    color: #007bff;
}

/* Subtle caret */
.product__filter-title .accordion-button::after {
    color: rgba(36,52,68,0.6);
    font-size: 12px;
}

/* Accordion body compact */
.accordion-collapse {
    padding: 6px 2px 10px 2px;
    margin: 0;
}
.accordion-body {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 6px;
}

/* Options wrapper spacing */
.widget-category-list {
    padding: 0 4px;
}

/* =====================================================
   FILTER OPTIONS (Transparent Buttons — shadow ONLY on buttons)
   ===================================================== */

/* Hide native checkboxes off-screen */
.single-widget-category input[type="checkbox"] {
    display: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Remove pseudo elements from theme */
.single-widget-category label::before,
.single-widget-category label::after {
    display: none !important;
    content: none !important;
}

/* Button look (transparent background + subtle shadow on the button itself) */
.single-widget-category label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    margin: 6px 0;
    border: 1px solid #e6e8eb;      /* softened border */
    border-radius: 8px;
    background: #fbfdfe;            /* soft panel background for labels */
    color: #243444;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* gentler shadow */
}

/* Hover state: stronger border + lift + tinted background */
.single-widget-category label:hover {
    background: rgba(10,102,194,0.04); /* slight blue tint */
    border-color: rgba(10,102,194,0.25);
    color: #0a66c2;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(10,102,194,0.06);
}

/* Focus accessibility (keyboard) */
.single-widget-category input[type="checkbox"]:focus + label,
.single-widget-category label:focus {
    outline: 2px solid rgba(10,102,194,0.12);
    outline-offset: 2px;
}

/* Checked state: golden border + subtle filled bg */
.single-widget-category input[type="checkbox"]:checked + label {
    background: rgba(212,160,23,0.08); /* pale warm fill */
    border: 1px solid #d4a017;
    color: #d4a017;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(212,160,23,0.08);
}

/* Ensure label text doesn't wrap awkwardly */
.single-widget-category label span,
.single-widget-category label b {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   MOBILE & TABLET OPTIMIZATION
   ===================================================== */
@media (max-width: 992px) {
    .product__filter-title .accordion-button {
        font-size: 14px;
        padding: 10px;
        font-weight: 600;
        justify-content: space-between;
    }
    .product__filter-item {
        margin-bottom: 6px;
    }
    .single-widget-category label {
        font-size: 15px;
        padding: 10px;
    }
}

@media (max-width: 768px) {
    /* Mobile: 2-column grid for options */
    .single-widget-category {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .single-widget-category label {
        margin: 0;
    }

    /* Make buttons visually equal height for a tidy grid */
    .single-widget-category label {
        min-height: 44px;
        align-items: center;
    }
}

/* =====================================================
   REMOVE FILTER BUTTON (Remove filters / mobile button)
   ===================================================== */
.rm-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin: 8px 0;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    background: #dc3545;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(220,53,69,0.18);
}
.rm-filter i {
    font-size: 14px;
    line-height: 1;
}
.rm-filter:hover {
    background: #c82333;
    box-shadow: 0 6px 12px rgba(200,35,51,0.18);
    transform: translateY(-2px);
}
.rm-filter:active {
    background: #a71d2a;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220,53,69,0.12);
}
@media (max-width: 768px) {
  .rm-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 140px;
    margin: 6px auto;
    font-size: 15px;
  }
}

/* =====================================================
   DROPDOWN STYLES (desktop + mobile)
   ===================================================== */

.desktop-dropdown {
  margin-right: auto;          /* stay to the left inside the flex row */
  margin-left: 12px;          /* small left gap from edge */
  order: 0;                   /* ensure it's on left in the flex order on large screens */
  align-self: center;
  position: relative;
}

.custom-dropdown .dropdown-btn {
  background: #ffffff;          /* white background for control */
  border: 1px solid #e6e8eb;
  padding: 6px 10px;               /* reduce vertical padding */
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  min-width: 150px;
  display: inline-flex;
  align-items: center;             /* vertical align center */
  justify-content: space-between;
  gap: 6px;
  line-height: 1.2;                /* compact height */
  box-shadow: 0 2px 8px rgba(20,30,40,0.04);
}

/* Label */
.custom-dropdown .dropdown-label {
  font-weight: 500;
  font-size: 14px;
  color: #243444;
  white-space: nowrap;
}

/* Arrow PNG Fix */
.custom-dropdown .dropdown-arrow {
  width: 20px;                     /* smaller image */
  height: 15px;                    /* fixed height */
  object-fit: contain;             /* no stretch */
  display: inline-block;
  margin-left: 4px;
  margin-right: 2px;
  vertical-align: middle;          /* align perfectly */
  opacity: 0.9;
}

/* Slight hover change for better UX */
.custom-dropdown .dropdown-btn:hover {
  border-color: #c7defa;
  background-color: #fbfdff;
}

/* Dropdown list background */
.custom-dropdown .dropdown-list {
  position: absolute;
  list-style: none;
  margin: 6px 0 0 0;
  padding: 8px 0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  z-index: 9999;
  min-width: 200px;
  left: 0;
  border: 1px solid rgba(0,0,0,0.04);
}

.custom-dropdown .dropdown-list li {
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 400;           /* regular weight for items */
  font-size: 14px;
  color: #333;
}
.custom-dropdown .dropdown-list li:hover {
  background: rgba(10,102,194,0.04);
  color: #0a66c2;
}

/* Desktop position tuning */
@media (min-width: 992px) {
  .shop-top-area > .d-flex {
    position: relative;
  }
  .desktop-dropdown .dropdown-list {
    left: 12px;         /* align under the desktop button */
    top: 42px;          /* tweak to place below the button */
  }
}

/* mobile menu list drops below mobile button */
@media (max-width: 991px) {
  .mobile-dropdown {
    position: relative;
  }
  .mobile-dropdown .dropdown-list {
    left: 12px;
    top: 42px;
  }
}

/* ============================
   MOBILE-SPECIFIC FILTER-MODAL STYLES
   (scoped to small screens only)
   ============================ */
@media (max-width: 767px) {
  /* Make modal dialog narrower and vertically limited */
  #offCanvasModalFilter .modal-dialog {
    max-width: 360px;        /* panel width on mobile (adjust if required) */
    margin: 1.2rem auto;     /* center with small top/bottom gap */
  }

  /* Make the modal content shorter and enable internal scrolling */
  #offCanvasModalFilter .modal-content {
    height: 80vh;            /* limit modal height to 80% of viewport */
    overflow: hidden;        /* hide native overflow - internal area will scroll */
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #f7fafb;     /* soft panel background color */
  }

  /* The top area (close) distinct background */
  #offCanvasModalFilter .offcanvas__top {
    padding: 8px 12px;
    background: #eef6ff;     /* subtle bluish header bar */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  /* The actual filter content area scrolls internally */
  #offCanvasModalFilter .offcanvas__content {
    height: calc(80vh - 56px); /* subtract header height so content fits */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;            /* compact padding */
    background: transparent;  /* keep content layered over panel */
  }

  /* Make close button smaller and darker */
  #offCanvasModalFilter .offcanvas__close-btn {
    font-size: 18px;
    color: #223;
  }

  /* Accordion / filter items: slightly more compact on mobile and colored header */
  #offCanvasModalFilter .product__filter-title .accordion-button {
    padding: 8px 6px;
    font-size: 13px;
    background: #ffffff;        /* white header inside the panel */
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.04);
    color: #243444;
  }
  #offCanvasModalFilter .product__filter-title .accordion-button:hover,
  #offCanvasModalFilter .product__filter-title .accordion-button:not(.collapsed) {
    background: rgba(10,102,194,0.04);
    color: #0a66c2;
  }

  #offCanvasModalFilter .single-widget-category label {
    padding: 8px 10px;
    font-size: 14px;
    background: #ffffff;       /* white pills inside the content */
  }

  /* Ensure the scrollbar inside is not huge */
  #offCanvasModalFilter .offcanvas__content::-webkit-scrollbar {
    width: 6px;
  }
  #offCanvasModalFilter .offcanvas__content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
  }

  /* Sticky bottom bar for actions (apply/clear) - optional but useful */
  #offCanvasModalFilter .filter-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(247,250,251,0), rgba(247,250,251,1));
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
  }

  #offCanvasModalFilter .btn-apply {
    background: #0a66c2;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
  }
  #offCanvasModalFilter .btn-clear {
    background: transparent;
    color: #0a66c2;
    border: 1px solid rgba(10,102,194,0.12);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
  }

  /* Make modal content text slightly darker for legibility */
  #offCanvasModalFilter {
    color: #25343c;
  }
}

/* For larger screens leave modal as default (no changes) */

/* ========================================================================================== REFUND POLICY ================================================================================================*/

/* ===== Banner / Breadcrumb ===== */
.slider-area {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.single-page.page-height {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border-bottom-left-radius: 50% 10%;
    border-bottom-right-radius: 50% 10%;
}
.single-page::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: -1;
}
.page-title h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 1px;
    text-shadow: 1px 2px 6px rgba(0,0,0,0.4);
}
.breadcrumb {
    margin-top: 10px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
}
.breadcrumb-item a {
    color: #f1f1f1;
    text-decoration: none;
    transition: 0.3s;
}
.breadcrumb-item a:hover {
    color: #ffbf00;
}
.breadcrumb-item.active {
    color: #ffbf00 !important;
    font-weight: 600;
}

/* ===== Page Content Section ===== */
.gallery-pg {
    background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
    padding-top: 80px;
    padding-bottom: 80px;
}
.ckeditor-content {
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.8;
    color: #333;
    transition: all 0.4s ease;
}
.ckeditor-content:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,0.16);
    transform: translateY(-4px);
}
/* Headings with underlines */
.ckeditor-content h1, .ckeditor-content h2, .ckeditor-content h3, .ckeditor-content h4, .ckeditor-content h5 {
    color: #007bff;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 25px;
    margin-bottom: 15px;
    position: relative;
}
.ckeditor-content h1::after,
.ckeditor-content h2::after,
.ckeditor-content h3::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00c6ff);
    border-radius: 2px;
    margin-top: 5px;
    transition: width 0.4s ease;
}
.ckeditor-content h1:hover::after,
.ckeditor-content h2:hover::after,
.ckeditor-content h3:hover::after {
    width: 100px;
}
/* Paragraph hover highlight */
.ckeditor-content p {
    margin-bottom: 18px;
    font-size: 16px;
    position: relative;
    transition: background 0.3s ease, padding-left 0.3s ease;
}
.ckeditor-content p:hover {
    background: rgba(0, 198, 255, 0.05);
    padding-left: 10px;
    border-radius: 4px;
}
/* Links with animated underline */
.ckeditor-content a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: color 0.3s ease;
}
.ckeditor-content a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background: #ff9800;
    transition: width 0.3s ease;
}
.ckeditor-content a:hover {
    color: #ff9800;
}
.ckeditor-content a:hover::after {
    width: 100%;
}
/* Lists */
.ckeditor-content ul, .ckeditor-content ol {
    padding-left: 25px;
    margin-bottom: 18px;
}

/* ========================================================================================== SHIPPING ================================================================================================*/
/* ====== Banner / Breadcrumb ====== */
.slider-area {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.single-page.page-height {
    min-height: 300px;
    position: relative;
    z-index: 1;
}
.single-page::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
}
.page-title h1 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.breadcrumb {
    margin-top: 15px;
    font-size: 15px;
    font-weight: 500;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
}
.breadcrumb-item a {
    color: #f1f1f1;
    text-decoration: none;
    transition: 0.3s;
}
.breadcrumb-item a:hover {
    color: #ffb400;
}
.breadcrumb-item.active {
    color: #ffb400 !important;
    font-weight: 600;
}

/* ====== Page Content ====== */
.gallery-pg {
    background: #f9fafc;
}
.gallery-pg .content-box {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}
.gallery-pg .content-box:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.gallery-pg .content-box h2, 
.gallery-pg .content-box h3, 
.gallery-pg .content-box h4 {
    color: #007bff;
    font-weight: 700;
}
.gallery-pg .content-box p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 15px;
}
/* ========================================================================================== SUPPORT BRANDS ================================================================================================*/
.cc_bx img {
    border: 1px solid #000;
    border-bottom: 0px;
    padding: 15px;
}
.cc_bx {
    margin-bottom: 10px;
}
.cc_text {
    background-color: #e3120b;
    padding: 10px 10px;
    outline: 1px dashed #fff;
    outline-offset: -5px;
}
.cc_bx img{
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

/* ========================================================================================== buy in bluk?   ================================================================================================*/
.bulk-buy-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 26px;

    background-color: #fbf9f4; /* very off-white cream */
    color: #1f1f1f;

    border: none;
    border-radius: 999px; /* pill */

    font-size: 14px;
    font-weight: 600; /* 🔥 bold text */

    text-decoration: none;

    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.08);

    transition: 
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.bulk-buy-inline:hover {
    background-color: #f6f2ea; /* slightly deeper cream */

    transform: translateY(-1.1px) scale(1.02); /* 💥 popup effect */

    box-shadow: 
        0 10px 22px rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.12);
}

/* ========================================================================================== delete checkout btn ================================================================================================*/
.checkout-page .cart-remove{
    position: static !important;
    top: auto !important;
    right: auto !important;
}

/* ensure proper alignment */
.checkout-page .summary-item{
    position: relative;
}

.checkout-page .summary-item .text-end{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.checkout-page .cart-remove {
    transition: all 0.2s ease;
}

.checkout-page .cart-remove:hover {
    color: #dc3545 !important; /* red */
}