/* NOTE: Kept your CSS as-is. Only 3 small edits from earlier version:
   1) .variant-pill → position:relative + top padding to reserve badge slot
   2) .variant-off  → absolute positioned so it doesn't push content
   3) Mobile .variant-pill (inside @media) → same reserved top space
   Update now: .variant-off centered horizontally (left:50% + translateX)
*/

    .product-detail-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      font-family: 'Poppins', sans-serif;
      background: #fff;
      border-radius: 8px;
    }
    .product-detail-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 10px;
    }
    .product-detail-header h1 {
      font-size: 1.8rem;
      margin-bottom: 4px;
      font-weight: 700;
      color: #333;
      display: none; /* hidden original H1 */
    }
    /* Modified Breadcrumb: Now includes Category Name with smaller font size */
    .product-breadcrumb {
      display: flex;
      gap: 5px;
      font-size: 0.7rem;
      color: #666;
    }
    .product-breadcrumb a {
      text-decoration: none;
      color: #666;
    }
    /* ADDED: Let breadcrumb wrap on smaller screens */
    @media (max-width: 768px) {
      .product-breadcrumb {
        flex-wrap: wrap;
      }
    }
    .product-images-carousel {
      display: none !important;
    }

    /* ------- Responsive Product Gallery (no overflow, no hide) ------- */
.product-gallery { margin-bottom: 16px; }

/* Square, flexible stage for the main image */
/* Square, flexible stage for the main image (with WebView fallback) */
.main-img-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 280px;                 /* fallback height for old WebViews */
  border: 1px solid #e9ecef;
  border-radius: 10px;
  background:#fff;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Image always fully visible inside the stage */
.main-img-wrap img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .main-img-wrap{
    height: auto;                    /* height via pseudo-element */
  }
  .main-img-wrap::before{
    content: "";
    display: block;
    padding-top: 100%;               /* perfect square */
  }
  .main-img-wrap img{
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: contain;
  }
}

/* Thumbnails: arrows + finger swipe on mobile */
.thumbstrip-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* Allow horizontal scrolling with finger; keep scrollbar hidden */
.thumbnail-row{
  display: flex;
  gap: 10px;
  padding: 4px 2px;
  overflow-x: auto;                 /* ← enable swipe/scroll on mobile */
  overflow-y: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;/* smooth, momentum scrolling on iOS */
  scroll-behavior: smooth;          /* smooth when arrows are clicked */
  -ms-overflow-style: none;         /* hide scrollbar on IE/Edge */
  scrollbar-width: none;            /* hide scrollbar on Firefox */
  touch-action: pan-x;              /* allow horizontal panning */
}
.thumbnail-row::-webkit-scrollbar{ display: none; } /* hide on Chrome/Safari */

.thumbnail-row img{
  width: 72px; height: 72px;
  object-fit: contain;
  background:#fff;
  border: 2px solid #e9ecef;        /* thicker for active ring */
  border-radius: 8px;
  flex: 0 0 auto;                   /* keep fixed-size cards */
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.thumbnail-row img:hover{ transform: scale(1.04); }
.thumbnail-row img.active{
  border-color:#148537;             /* brand green */
  box-shadow: 0 0 0 2px rgba(20,133,55,.12) inset;
}

/* Arrow buttons unchanged (still work along with swipe) */
.thumb-arrow{
  width: 28px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px;
  background:#16a34a; color:#fff; cursor:pointer;
  box-shadow: 0 6px 14px rgba(22,163,74,.22);
}
.thumb-arrow:hover{ background:#15803d; }
.thumb-arrow.left  { margin-right: 2px; }
.thumb-arrow.right { margin-left:  2px; }
@media(max-width:768px){
  .thumb-arrow{ width: 26px; height: 50px; }
}



/* Columns must be shrinkable inside flex so content overflow na kare */
.product-images, .product-info{ min-width: 0; }

/* Desktop: two equal columns cleanly (no overflow) */
@media (min-width: 769px){
  .product-main{
    display: flex;
    align-items: flex-start;
    column-gap: 20px;
  }
  .product-images,
  .product-info{
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}

/* Mobile: full width image, large but contained */
@media (max-width: 768px){
  .product-main{ flex-direction: column; }
  .product-images, .product-info{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .main-img-wrap{
    aspect-ratio: 1 / 1;
    max-height: 70vh;               /* screen ke hisab se visible height */
  }
  .thumbnail-row img{ width: 64px; height: 64px; }
}


    .product-main {
      display: flex;
      align-items: flex-start !important;
      gap: 20px !important;
    }
    .product-images {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .product-info {
      flex: 1;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      gap: 7px;
      position: relative;
    }

    .rating-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 2px 0;
    }
    .rating-row-original {
      display: none;
    }
    .star-rating i {
      color: #fbc02d;
      margin-right: 2px;
    }
    .review-count {
      font-size: 0.9rem;
      color: #666;
    }

   .price-row{
  font-size:1.6rem;
  font-weight:700;
  color:#2c2c2c;
  margin:0 0 2px;        /* top 0, bottom 2px */
}
    .price-row s {
      color: #888;
      margin-left: 8px;
      font-size: 1rem;
      font-weight: 400;
    }
    .discount-label {
      display: inline-block;
      background: #ff8a00;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 3px 6px;
      border-radius: 4px;
      margin-left: 8px;
    }
    .save-amount{
  color:#388e3c;
  font-size:0.9rem;
  display:block;
  margin:0 0 2px;        /* same gap */
}
    .tax-line{
  font-size:0.85rem;
  color:#666;
  margin:0 0 2px;        /* same gap */
}

    .product-info h3 {
      margin: 2px 0 1px;
    }

    .variant-pills {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

   .variant-pill{
  /* Reserve a fixed top slot for the discount badge */
  position: relative;                  /* so the badge can be absolutely placed */
  padding:22px 12px 8px 12px;          /* top 22px keeps price text aligned always */
  border:1px solid #d0d7e6;            /* soft blue-grey border */
  border-radius:20px;
  background:#f5f8ff;                  /* light, professional tint */
  cursor:pointer;
  font-size:0.9rem;
  transition:background .2s, border-color .2s, box-shadow .2s;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:80px;
}

    .variant-pill.active {
      background: #208b3a;
      border-color: #208b3a;
      color: #fff;
    }
    .variant-pill.active .variant-price {
      color: #fff;
    }
    .variant-pill.active .variant-price s {
      color: #ddd;
    }
    .variant-pill.active:hover {
      background: #1a7431;
      border-color: #1a7431;
      color: #fff;
    }
.variant-pill:hover{
  background:#eef3ff;            /* subtle highlight on hover */
}

/* CENTERED: make the %OFF badge sit in the horizontal center */
    .variant-off {
      position: absolute;          /* take it out of normal flow */
      top: 6px;                    /* stays inside the reserved slot */
      left: 50%;                   /* center horizontally */
      transform: translateX(-50%); /* perfect centering regardless of width */
      z-index: 1;
      font-size: 0.75rem;
      color: #fff;
      background: #ff8a00;
      padding: 2px 6px;
      border-radius: 4px;
      margin: 0;                   /* avoid pushing layout */
      line-height: 1.1;
      white-space: nowrap;         /* prevent wrapping if text is long */
    }

    .variant-price {
      font-weight: 600;
      color: #333;
    }

    /* Hide the old "qty-selector" by default so user only sees "Add to Cart" + "Buy Now" */
    .qty-selector {
      display: none !important;
    }

    .buttons-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn-primary, .btn-buy-now {
      font-size: 1.1rem !important;
      padding: 14px 26px !important;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 600;
      transition: 0.2s;
      white-space: nowrap;
    }
    .btn-primary {
      background: #008000;
      color: #fff;
    }
    .btn-primary:hover {
      background: #006400;
    }
    .btn-buy-now {
      background: #ffd700;
      color: #333;
    }
    .btn-buy-now:hover {
      background: #f6c800;
    }

    .go-cart {
      font-size: 1.1rem !important;
      background: #008000;
      color: #fff;
      border: 2px solid #008000;
      display: flex;
      align-items: center;
      gap: 6px; /* for icon spacing if needed */
    }
    .go-cart:hover {
      background: #006400;
      color: #fff;
    }

    .product-description {
      margin-top: 20px;
      line-height: 1.6;
      text-align: left;
    }
.product-description ul,
.product-description ol{
  list-style-position: outside;   /* bullet/number sits outside the text box   */
  padding-left: 1.4rem;           /* gap between white box & bullet            */
  margin-left : 0;                /* remove default browser margin             */
  margin-bottom: 1.2em;           /* keep the existing vertical rhythm         */
  line-height  : 1.6;
}

.product-description li{
  /* tiny extra room so text doesn’t hug the bullet/number */
  padding-left: .25rem;
}

/* OPTIONAL: if you still want a little more space on very small screens */
@media(max-width:480px){
  .product-description ul,
  .product-description ol{
    padding-left: 1.6rem;         /* a hair wider on narrow mobiles            */
  }
}
    .product-description p {
      margin-bottom: 1.2em;
      line-height: 1.6;
      text-align: left;
    }
    /* Added CSS for table borders in product description */
    .product-description table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1em;
      margin-bottom: 1em;
    }
    .product-description table, .product-description th, .product-description td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    .product-description th {
      background-color: #f2f2f2;
      text-align: left;
    }

    .products-section {
      display: none !important;
    }

    /* EXISTING product-card-grid styling. We'll augment it below for carousel. */
    .product-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
      margin-top: 10px;
    }
    .product-card {
      border: 1px solid #eee;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background: #fff;
      text-align: center;
      transition: 0.3s;
    }
    .product-card:hover {
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .product-card img {
      width: 100%;
      height: auto;
      display: block;
    }
    .product-card-body {
      padding: 10px;
    }
    .product-card .product-title {
      font-size: 1rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: block;
    }
    .product-card .price-row {
      font-size: 1rem;
      font-weight: 700;
      color: #222;
    }
    .product-card .price-row s {
      color: #888;
      margin-left: 6px;
      font-size: 0.9rem;
      font-weight: 400;
    }
    .product-card .discount-row {
      font-size: 0.85rem;
      color: #388e3c;
      margin-top: 4px;
    }
    .product-card .size-label {
      font-size: 0.85rem;
      color: #666;
      margin-top: 6px;
    }

    .reviews-section {
      margin-top: 30px;
    }
    .reviews-section h2 {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }
    .review-item {
      border-bottom: 1px solid #eee;
      padding: 10px 0;
    }
    .review-item:last-child {
      border-bottom: none;
    }
    .review-item .reviewer-name {
      font-weight: 600;
      margin-right: 10px;
    }
    .review-item .review-date {
      font-size: 0.85rem;
      color: #999;
    }
    .review-item .review-text {
      margin-top: 4px;
      line-height: 1.4;
    }
    .write-review-btn {
      margin-top: 10px;
      display: inline-block;
      padding: 8px 14px;
      background: #008000;
      color: #fff;
      border-radius: 4px;
      text-decoration: none;
    }
    .write-review-btn:hover {
      background: #006400;
    }

    @media (max-width: 768px) {
      .product-images {
        order: 1 !important;
      }
      .product-info {
        order: 2 !important;
      }
      .product-main {
        flex-direction: column;
      }
      .product-images, .product-info {
        max-width: 100% !important;
        flex: 0 0 100% !important;
      }
      .product-info h1 {
        font-size: 1.3rem !important;
      }
      .buttons-row {
        display: none !important;
      }
      .variant-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        padding-bottom: 10px;
      }

      /* Mobile pills also keep a fixed top slot for badge */
      .variant-pill{
        position: relative;          /* keep badge absolute */
        padding-top: 22px;           /* same reserved height as desktop */
        min-width:120px;             /* keep them wide */
        border-radius:10px;          /* soft corners   */
        background:#f5f8ff;          /* pastel blue    */
        box-shadow:0 2px 4px rgba(0,0,0,.1);
        margin-bottom:6px;
      }

      /* Force ACTIVE pill back to brand green */
      .variant-pill.active{
        background:#208b3a!important;    /* brand green */
        border-color:#208b3a!important;
        color:#fff!important;            /* white text  */
      }

      /* Prices inside active pill must stay white */
      .variant-pill.active .variant-price,
      .variant-pill.active .variant-price s{
        color:#fff!important;
      }
}
      .variant-off {
        background: #ff8a00;
        color: #fff;
      }
    }

    .product-images {
      flex: 0 0 45% !important;
      max-width: 45% !important;
      align-self: flex-start !important;
    }
    .product-info {
      flex: 0 0 55% !important;
      max-width: 55% !important;
      align-self: flex-start !important;
    }


    .qty-btn {
      font-size: 1.2rem !important;
      padding: 8px 14px !important;
    }

    @media (min-width: 992px) {
      .product-main {
        flex-wrap: nowrap !important;
      }
    }

    @media (max-width: 768px) {
      .product-images {
        flex: 0 0 100% !important;
        max-width: 100% !important;
      }
      .product-info {
        flex: 0 0 100% !important;
        max-width: 100% !important;
      }
    }

    .mobile-bottom-bar {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #fff;
      box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
      padding: 10px;
      justify-content: space-around;
      align-items: center;
      z-index: 9999;
    }
    .mobile-bottom-bar button {
      flex: 1;
      margin: 0 5px;
      font-size: 1.05rem;
      padding: 12px 10px;
      border: none;
      border-radius: 4px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.2s;
      white-space: nowrap;
    }
    .mobile-cart-btn {
      background: #008000;
      color: #fff;
    }
    .mobile-cart-btn:hover {
      background: #006400;
    }
    .mobile-buy-btn {
      background: #ffd700;
      color: #333;
    }
    .mobile-buy-btn:hover {
      background: #f6c800;
    }

    .brand-name {
      font-size: 1rem;
      color: #666;
      margin: 4px 0;
    }

    .image-modal {
      display: none;
      position: fixed;
      z-index: 99999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.8);
      align-items: center;
      justify-content: center;
    }
    .image-modal-content {
      position: relative;
      max-width: 80%;
      max-height: 80%;
    }
    .image-modal-content img {
      width: 100%;
      height: auto;
      cursor: zoom-in;
      transition: transform 0.3s ease;
      transform-origin: center center;
    }
    .image-modal-close {
      position: absolute;
      top: 10px;
      right: 15px;
      color: #fff;
      font-size: 2rem;
      font-weight: bold;
      cursor: pointer;
      background: rgba(0,0,0,0.3);
      border-radius: 4px;
      padding: 2px 8px;
      z-index: 100000;
    }
    .mobile-bottom-bar .qty-btn {
      font-size: 0.9rem !important;
      padding: 4px 8px !important;
    }
    .mobile-bottom-bar .qty-label {
      width: 32px !important;
      font-size: 0.9rem !important;
    }

    .mobile-cart-row {
      display: none;
      width: 100%;
      justify-content: space-around;
      align-items: center;
      gap: 8px;
    }
    .mobile-cart-row button {
      font-size: 0.9rem;
      padding: 8px 6px;
      border: none;
      border-radius: 4px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }
    .mobile-cart-row .delete-icon {
      background: #f44336;
      color: #fff;
    }
    .mobile-cart-row .delete-icon:hover {
      background: #c62828;
    }
    .mobile-cart-row .plus-icon {
      background: #f2f2f2;
      color: #333;
    }
    .mobile-cart-row .plus-icon:hover {
      background: #ddd;
    }
    .mobile-cart-row .go-cart-btn {
      font-size: 1.05rem;
      background: #009688;
      color: #fff;
      border: none;
    }
    .mobile-cart-row .go-cart-btn:hover {
      background: #00796b;
    }
    .mobile-cart-row .qty-label-mobile {
      min-width: 20px;
      text-align: center;
      font-weight: 600;
      font-size: 0.9rem;
    }

    /* ===========================================================
   MOBILE  ⟶  Fixed cart-bar (Add / Qty / Go-to-Cart) – V2.0
   Replace your old ".mobile-cart-row" media-query with this
=========================================================== */
@media (max-width:768px){

  /* --- sticky bar container at bottom --- */
  #mobileBarCartRow{
    position:fixed;            /* stay at the bottom */
    left:0; right:0; bottom:0;
    background:#ffffff;
    border-top:1px solid #e0e0e0;
    box-shadow:0 -2px 8px rgba(0,0,0,.06);
    padding:8px 12px;
    display:flex;
    align-items:center;
    gap:10px;                  /* even spacing */
    z-index:9999;              /* above page content */
  }

  /* --- round icon buttons (minus / plus / trash) --- */
  .circle-btn{
    width:40px; height:40px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; font-weight:700;
    border:1px solid #dcdcdc;
    background:#f9f9f9; color:#333;
    transition:background .2s;
  }
  .circle-btn:hover{background:#efefef;}

  /* red-tone style for delete icon */
  .circle-btn.danger{
    background:#ffebee; border-color:#ef9a9a; color:#d32f2f;
  }
  .circle-btn.danger:hover{background:#fbe9e7;}

  /* --- live quantity number --- */
  .qty-label-mobile{
    min-width:32px;
    text-align:center;
    font-size:1.15rem; font-weight:600;
    color:#333;
  }

  /* --- primary “Go to Cart” button --- */
  #mobileBarCartRow .go-cart-btn{
    flex:1;                    /* take remaining width */
    display:flex; align-items:center; justify-content:center;
    gap:6px;                   /* icon-text gap */
    height:44px;
    padding:0 14px;
    border:none;
    border-radius:8px;
    background:#148537;        /* brand green */
    color:#fff;
    font-size:1.05rem; font-weight:600;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
    transition:background .25s, transform .2s;
  }
  #mobileBarCartRow .go-cart-btn i{font-size:1rem;}
  #mobileBarCartRow .go-cart-btn:hover{
    background:#0f6e2c;        /* darker on hover */
    transform:translateY(-2px);
  }
  #mobileBarCartRow .go-cart-btn:active{
    transform:translateY(0);   /* tap feedback */
  }
}


    /* ------------------------------------------------
       Carousel container remains the same, no arrows.
       ------------------------------------------------ */
    .carousel-wrapper {
      position: relative;
      margin-bottom: 20px;
       overflow:visible; 
    }
    .product-card-grid.carousel {
      display: flex !important;
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }
    .product-card-grid.carousel .product-card {
      flex: 0 0 auto;
      width: 200px;
    }
    .product-card-grid.carousel::-webkit-scrollbar {
      display: none;
    }
    .carousel-bottom-line {
      margin-top: 10px;
      border-bottom: 1px solid #ccc;
    }
    
    /* --- arrow buttons --------------------------------------------- */
.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:none; background:rgba(0,0,0,.4); color:#fff;
  font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.nav-btn:hover{background:rgba(0,0,0,.65);}
.nav-btn.prev{left:10px;}
.nav-btn.next{right:10px;}

/* Compact green arrows – same across site; hidden on mobile */
.nav-compact{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:36px; height:36px;
  border:none; border-radius:12px;        /* compact rounded */
  display:flex; align-items:center; justify-content:center;
  background:#16a34a;                     /* solid brand green */
  color:#fff;
  box-shadow:0 10px 20px rgba(22,163,74,.22);
  cursor:pointer; z-index:5;
}
.nav-compact:hover{background:#15803d;}
.nav-prev{left:-10px;}                    /* slight outside overlap */
.nav-next{right:-10px;}
/* give breathing room so arrows don’t clip first/last card */
.product-card-grid.carousel{padding:0 28px;}
/* hide arrows on mobile */
@media (max-width:768px){ .nav-compact{display:none;} }

    /* ----------------------------------------
       ADDED: Desktop quantity container styling
       (Scoped to #desktopQtyContainer so popup design remains unchanged)
       ---------------------------------------- */
    #desktopQtyContainer .qty-container button {
      font-size: 1rem !important;
      padding: 8px 12px !important;
      border-radius: 4px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border: 1px solid #ccc;
      background: #f5f5f5;
      color: #333;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    #desktopQtyContainer .qty-container button:hover {
      background: #e9e9e9;
    }
    #desktopQtyContainer .qty-container .trash-btn {
      background: #f44336;
      border: none;
      color: #fff;
    }
    #desktopQtyContainer .qty-container .trash-btn:hover {
      background: #e53935;
    }
    #desktopQtyContainer .qty-container #desktopPlusBtn {
      background: #f5f5f5;
      border-color: #ccc;
      color: #333;
    }
    #desktopQtyContainer .qty-container #desktopPlusBtn:hover {
      background: #e9e9e9;
    }
    #desktopQtyContainer #desktopQtyLabel {
      font-size: 1rem !important;
      font-weight: 600 !important;
      margin: 0 6px !important;
    }
    #desktopQtyContainer .go-cart {
      padding: 10px 20px !important;
      font-size: 1rem !important;
      border-radius: 4px !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      border: none !important;
      cursor: pointer;
    }
    #desktopQtyContainer .go-cart i {
      font-size: 1rem;
    }
    #desktopQtyContainer .go-cart:hover {
      background: #006400 !important;
    }
    
 /* ============  REVIEWS & RATINGS SECTION  ============ */

/* star-picker inside modal */
#starPicker i{color:#ff8a00;}

/* ── main two-column layout (desktop) ── */
.reviews-container{
  margin-top:30px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:20px;
}

/* ---------- summary / recent cards ---------- */
.review-card{
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  padding:20px;
}
.review-card h2{margin:0 0 12px;font-size:1.35rem;}
.avg-rating{font-size:3rem;font-weight:700;line-height:1;}
.avg-rating small{font-size:1.2rem;font-weight:400;}

/* global star-color */
.rating-stars i,
.summary .stars i{color:#ff8a00;font-size:20px;}

/* ---------- histogram row ---------- */
.hist-row{display:flex;align-items:center;gap:10px;margin:6px 0;}
.hist-row span:first-child{width:50px;}
.hist-bar{flex:1;height:8px;background:#eee;border-radius:4px;overflow:hidden;}
.hist-fill,
.hist-row .bar .fill{height:100%;background:#ff8a00;}

/* ---------- recent review item ---------- */
.reviews-container .review-item{
  display:flex;
  gap:15px;
  padding:15px 0;
  border-bottom:1px solid #eee;
}
.reviews-container .review-item:last-child{border-bottom:none;}
.reviewer-avatar{font-size:36px;color:#ccc;}
.review-meta{color:#999;font-size:.85rem;margin-left:6px;}

/* ===== recent-reviews list ===== */
.review-item{
  display:flex;
  gap:15px;
  padding:15px 0;
  border-bottom:1px solid #eee;
}
.review-item:last-child{border-bottom:none;}

.reviewer-avatar{font-size:36px;color:#ccc;}

.review-header{
  display:flex;
  align-items:center;
  gap:6px;
}
.verified{color:green;font-size:.85rem;}

.rating-stars i{color:#ff8a00;}           /* orange stars */
.review-meta{color:#999;font-size:.85rem;margin-left:6px;}

.review-text{margin:6px 0;}


/* ---------- mobile tweaks ---------- */
@media(max-width:768px){
  /* stack cards vertically */
  .reviews-container{display:block;}
  .reviews-container > div{margin-bottom:20px;}

  /* slightly smaller typography */
  .avg-rating{font-size:2.3rem;}
  .review-card h2,
  .reviews-container h2{font-size:1.2rem;}

  /* give a bit more room to left-label */
  .hist-row span:first-child{width:55px;}
}

/* reviews card को header-height जितना “buffer” दे दो  */
#reviews{ scroll-margin-top:120px; }     /* desktop — header ≈ 90 px */

@media(max-width:768px){
  #reviews{ scroll-margin-top:140px; }  /* mobile — header + search-bar */
}



/* ---- Read-more-reviews button ---- */
.more-reviews-row{
  text-align:center;
  margin-top:20px;
}
.read-more-reviews-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#0b572e;
  color:#fff;
  padding:10px 24px;
  border-radius:4px;
  font-weight:600;
  text-decoration:none;
  transition:background .25s;
}
.read-more-reviews-btn:hover{
  background:#094a26;
}
.read-more-reviews-btn i{
  transition:transform .25s;
}
.read-more-reviews-btn:hover i{
  transform:translateX(4px);
}

/* === ACTION BAR === */
.action-bar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}
.action-set{                 /* wraps each logical button-group */
  display:flex;
  gap:12px;
}

/* ----- main buttons ----- */
.btn-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:170px;           /* सभी बड़े बटन बराबर चौड़ाई */
  padding:14px 24px;
  font-size:1rem;
  font-weight:600;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.btn-action i{font-size:1.1rem;}
.btn-action:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(0,0,0,.15);
}
.btn-green{background:#148537;color:#fff;}
.btn-green:hover{background:#0f6e2c;}
.btn-yellow{background:#fed500;color:#333;}
.btn-yellow:hover{background:#eac600;}

/* ----- qty buttons ----- */
.btn-qty{
  width:46px;
  height:46px;
  font-size:1.15rem;
  border:1px solid #d0d0d0;
  border-radius:6px;
  background:#f8f8f8;
  cursor:pointer;
  transition:background .2s;
}
.btn-qty:hover{background:#ececec;}
.qty-label{
  min-width:36px;
  text-align:center;
  line-height:46px;
  font-size:1.1rem;
  font-weight:600;
}

/* ----- mobile hides this whole bar ----- */
@media(max-width:768px){
  .action-bar{display:none;}
}

.selected-size-line{
  font-size:0.85rem;
  color:#444;
  margin:0 0 2px; 
}

/* tiny green % icon just before “Save” text */
.save-amount i,
.discount-row i{
  display:inline-block;
  background:#27ae60;      /* same green as screenshot */
  color:#fff;
  font-size:0.65rem;
  line-height:1;
  padding:2px 4px;         /* small pill shape */
  border-radius:3px;
  margin-right:4px;        /* gap before the word ‘Save’ */
}

.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:none; background:rgba(0,0,0,.4); color:#fff;
  font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.nav-btn:hover{background:rgba(0,0,0,.65);}
.nav-btn.prev{left:10px;}
.nav-btn.next{right:10px;}

/* ⭐ NEW light-box styles */
#lbModal img{transition:transform .3s ease;user-select:none;}
#lbModal button{user-select:none;}
 /* basic nav / zoom buttons */
  #lbModal .navBtn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:48px;height:48px;border:none;border-radius:50%;
    background:rgba(0,0,0,.45);color:#fff;font-size:1.8rem;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  #lbModal .navBtn:hover{background:rgba(0,0,0,.65);}
  #lbPrev{left:20px}  #lbNext{right:20px}
  #lbClose{top:15px;right:20px;transform:none}
  #zoomUI{bottom:25px;right:25px}
  #zoomUI button{margin-left:8px}
  
  /* ==== Info-Share panel === */
.info-share-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:14px;
  flex-wrap:wrap;              /* mobile friendly */
}

/* Trust badges  */
.trust-badges{
  display:flex;
  gap:14px;
  list-style:none;
  padding:0;
  margin:0;
  flex-wrap:wrap;
}
.trust-badges li{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.95rem;
  color:#444;
}
.trust-badges li i{
  color:#148537;               /* brand green */
  font-size:1.05rem;
}

@media (min-width: 769px) {        /* desktop breakpoint */

  /* 1) Two-column layout */
  .product-main {
    display: flex;
    column-gap: 20px;              /* keep the existing gap */
    align-items: flex-start;
  }

  /* 2) Each column = 50 % minus half the gap (10 px)            */
  .product-images,
  .product-info {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  /* 3) Make sure the main gallery image can’t overflow          */
  .product-gallery .main-image {
    width: 100% !important;        /* remove fixed 600 px width  */
    max-width: 100% !important;
  }

  /* 4) Safety for variant pills or any other flex-wrap area     */
  .variant-pills { max-width: 100%; }

  /* 5) If earlier rules set 45 % / 55 % widths, this override
        takes precedence—no need to delete the old rules.        */
}



/* ===============================
   DESKTOP VARIANT SMART ROWS (1 ➜ 2 ➜ scroll)
   =============================== */

/* ===============================
   DESKTOP VARIANT SMART ROWS (1 → 2 → scroll)
   =============================== */

/* Mobile/Tablet: keep single-row swipe */
@media (max-width: 991.98px) {
  .variant-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .variant-track { display: flex !important; gap: 12px; }
  .var-nav, .var-scrollbar { display: none !important; }
}

/* Desktop: try 1 row → if overflow then 2 rows → else show arrows + scroller */
@media (min-width: 992px) {
  .variant-carousel {
    position: relative;
    margin: 8px 0 14px;
    --var-rows: 1; /* default rows; JS will switch to 2 when needed */
  }

  .variant-viewport {
    overflow: hidden;          /* hide native scrollbars on desktop */
    padding: 2px 36px;         /* breathing room for arrows */
  }

  .variant-track {
    display: grid !important;                 /* grid allows easy row switching */
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--var-rows, 1), auto); /* dynamic rows */
    grid-auto-columns: max-content;           /* column width fits pill */
    gap: 12px 12px;                           /* tidy spacing */
    align-content: start;
  }

  /* Compact soft arrows (shown only when overflow via JS) */
  .var-nav{
    position:absolute;
    top:50%; transform:translateY(-50%);
    width:36px; height:36px;
    display:none;                     /* JS toggles to flex */
    align-items:center; justify-content:center;
    border-radius:12px;
    border:1px solid #CDECD8;
    background:#ECF8F0;
    color:#148537;
    box-shadow:0 6px 14px rgba(20,133,55,.12);
    cursor:pointer; z-index:3;
    transition:background .2s, transform .15s, box-shadow .2s;
  }
  .var-nav:hover{
    background:#E4F5EA;
    transform:translateY(-50%) scale(1.03);
    box-shadow:0 10px 22px rgba(20,133,55,.18);
  }
  .var-nav:active{ transform:translateY(-50%) scale(.98); }
  .var-nav.prev{ left: 0; }
  .var-nav.next{ right: 0; }

  /* Slim progress scroller (shown only when overflow via JS) */
  .var-scrollbar{
    display:none;
    padding:6px 46px 0; /* align with arrows spacing */
  }
  .var-scrollbar-track{
    position:relative;
    width:100%;
    height:6px;
    background:#EFF6F0;
    border-radius:999px;
    overflow:hidden;
  }
  .var-scrollbar-thumb{
    position:absolute; top:0; left:0; height:100%;
    width:60px; /* JS adjusts real width */
    background:linear-gradient(90deg,#CDEBD8,#BFE6CE);
    border-radius:999px;
    box-shadow:0 2px 6px rgba(20,133,55,.12);
    transition:width .15s ease;
    will-change:transform, width;
  }
}


  /* Put badges + bulk link on one row (desktop), stack on mobile */
  .ks-trust-row{
    display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:6px;
  }
  .ks-trust-row .trust-badges{margin:0;padding:0;}            /* kill default UL margins */
  .ks-trust-row .ks-bulk-wrap{margin:0;}                      /* no extra gap */

  /* Make the Bulk trigger a thin, rounded, subtle pill (NOT a big button) */
  .info-share-panel .ks-bulk-btn{
    background:#fff;border:1px solid #dbe3ef;color:#0f172a;
    border-radius:999px;padding:8px 12px;box-shadow:none;
  }
  .info-share-panel .ks-bulk-btn:hover{background:#f8fafc;}
  .info-share-panel .ks-bulk-btn i{font-size:14px;}
  .info-share-panel .ks-bulk-btn span{font-weight:500;}

  /* Mobile: keep it below badges with tight spacing */
  @media (max-width: 991px){
    .ks-trust-row{flex-direction:column;align-items:flex-start;gap:6px;}
  }
  
  /* Prevent iOS long-press save/copy menu + disable image drag-save */
  .product-detail-container img,
  #lbModal img {
    -webkit-touch-callout: none;  /* iOS Safari: disables long-press menu */
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;      /* Safari/Chrome */
    user-drag: none;
  }