/* =========================================================================
   Greenzone storefront — product-slider & trust-badge styling (2026-07-29)

   Covers the home-page product rails (Top Offers / Best Selling / You May Also
   Like / Recently Viewed) and the new certification trust bar.

   Layout reference: store.jiva.com — 4 roomy cards per row, generous white
   space, one clear price line, a calm certification strip. Nothing is copied:
   the palette (--gz-* / --herb-*), Quicksand type, seals and markup are ours.

   SCOPE, and why it matters: every card rule below is scoped to
   `.carousel-wrap .pro-box.topoffers`. `skuComponentHome.jsp` is the SHARED
   product card — it is also included by the search / category listing pages,
   which render it in a grid and NOT inside `.carousel-wrap`. Scoping to the
   carousel keeps this restyle to the sliders and leaves the listing grid, and
   every add-to-cart / wishlist / subscription / serviceability behaviour in
   that include, exactly as they were. No commerce markup is added or removed
   here — this sheet only paints.

   Loaded LAST, after header-refresh.css.
   ========================================================================= */

:root{
  --gzs-card-radius: 16px;
  --gzs-gap: 10px;
}

/* ==========================================================================
   1. Section heading
   ========================================================================== */
.home-page-modern .section-gap,
.gz-certbar-section{ padding: 34px 0 6px; }

.home-page-modern .main_title{ position: relative; margin-bottom: 6px !important; }

/* "SEE ALL" as a quiet pill instead of naked text floating on the baseline */
.home-page-modern .main_title .view-all{ z-index: 2; }
.home-page-modern .main_title .view-all a.see-btn{
  display: inline-flex !important; align-items: center; gap: 6px;
  line-height: 1 !important; height: auto !important;
  padding: 9px 16px !important;
  border: 1px solid var(--line, #e2ebe0) !important;
  border-radius: 999px !important;
  background: #fff;
  color: var(--herb, #167a45) !important;
  letter-spacing: .4px !important;
  transition: all .18s ease;
}
.home-page-modern .main_title .view-all a.see-btn:hover{
  text-decoration: none !important;
  border-color: var(--herb, #167a45) !important;
  background: var(--chip, #eef4ea);
  transform: translateY(-1px);
}

/* ==========================================================================
   2. Product card (sliders only)
   ========================================================================== */
.carousel-wrap .owl-item{ padding: 6px 0 14px; }

.carousel-wrap .pro-box.topoffers{
  display: flex; flex-direction: column;
  height: 100%;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--line, #e2ebe0) !important;
  border-radius: var(--gzs-card-radius) !important;
  box-shadow: 0 1px 3px rgba(20,40,30,.05) !important;
  overflow: hidden;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.carousel-wrap .pro-box.topoffers:hover{
  transform: translateY(-5px);
  border-color: #cfe0d2 !important;
  box-shadow: 0 14px 30px rgba(20,60,40,.13) !important;
}

/* --- image stage: a square, softly tinted plate so mixed product shots
       (white-bg bottles, coloured lifestyle crops) sit on a common ground --- */
.carousel-wrap .pro-box.topoffers > .position-relative{
  position: relative;
  padding: 0 !important;
  margin: 0;
  background: #fff;                  /* white, so the many product shots that already
                                        sit on white merge into the card instead of
                                        showing as a tile inside a tinted frame */
  border-bottom: 1px solid #f0f4ef;
  overflow: hidden;
}
.carousel-wrap .pro-box.topoffers > .position-relative > a{
  display: block;
  padding: 16px;
  aspect-ratio: 1 / 1;
}
.carousel-wrap .pro-box.topoffers > .position-relative > a img{
  width: 100% !important; height: 100% !important;
  object-fit: contain;
  border-radius: 10px;               /* many product shots ship their own coloured
                                        square backdrop — rounding turns those into
                                        deliberate tiles instead of pasted squares.
                                        (mix-blend-mode:multiply was tried here and
                                        muddied exactly those coloured backdrops.) */
  transition: transform .35s ease;
}
.carousel-wrap .pro-box.topoffers:hover > .position-relative > a img{ transform: scale(1.06); }

/* --- JS-built card variant ---------------------------------------------
   "You May Also Like" (common.js drawYouMayAlsoLikeComponent) and "Recently
   Viewed" (recentView.jsp) build their cards in JavaScript with a DIFFERENT
   shape: the image link is a DIRECT child of .pro-box instead of being wrapped
   in .position-relative. The `>` combinator matters — .slider-text contains a
   second a.skucomponent-productTitle (the product name) that must not become
   an image plate. --- */
.carousel-wrap .pro-box.topoffers > a.skucomponent-productTitle,
.recent-container .carousel-wrap .pro-box > a{
  display: block; position: relative;
  padding: 16px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 1px solid #f0f4ef;
  overflow: hidden;
  min-height: 0;
}
.carousel-wrap .pro-box.topoffers > a.skucomponent-productTitle img,
.recent-container .carousel-wrap .pro-box > a img{
  width: 100% !important; height: 100% !important;
  object-fit: contain;
  border-radius: 10px;
  transition: transform .35s ease;
}
.carousel-wrap .pro-box.topoffers:hover > a.skucomponent-productTitle img,
.recent-container .carousel-wrap .pro-box:hover > a img{ transform: scale(1.06); }

/* Recently Viewed cards carry no .topoffers class, so give that rail the same
   shell (scoped to .recent-container so shopByCategory's .pro-box is untouched) */
.recent-container .carousel-wrap .pro-box{
  display: flex; flex-direction: column; height: 100%;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--line, #e2ebe0) !important;
  border-radius: var(--gzs-card-radius) !important;
  box-shadow: 0 1px 3px rgba(20,40,30,.05) !important;
  overflow: hidden; position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.recent-container .carousel-wrap .pro-box:hover{
  transform: translateY(-5px);
  border-color: #cfe0d2 !important;
  box-shadow: 0 14px 30px rgba(20,60,40,.13) !important;
}

/* older browsers with no aspect-ratio support still get a sane box */
@supports not (aspect-ratio: 1 / 1){
  .carousel-wrap .pro-box.topoffers > .position-relative > a{ height: 230px; }
}

/* --- "Learn More!" video affordance -> a small glass pill on the plate --- */
.carousel-wrap .pro-box.topoffers .sku-video{
  position: absolute !important; left: 10px; bottom: 10px; z-index: 2;
  width: auto !important; height: auto !important;
  background: transparent !important; border: 0 !important; padding: 0 !important;
  display: block !important;                       /* demo.css makes this a full-width flex bar */
}
.carousel-wrap .pro-box.topoffers .sku-video a{
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.92);
  border: 1px solid #dce8dd;
  border-radius: 999px;
  padding: 4px 11px 4px 8px;
  font-size: 11.5px; font-weight: 700;
  color: var(--herb-d, #0f5e34) !important;
  box-shadow: 0 2px 8px rgba(20,40,30,.12);
  transition: all .18s ease;
}
.carousel-wrap .pro-box.topoffers .sku-video a:hover{ background:#fff; border-color: var(--herb, #167a45); }
.carousel-wrap .pro-box.topoffers .sku-video a i{ font-size: 15px !important; left: 0 !important; }
.carousel-wrap .pro-box.topoffers .sku-video a span{ vertical-align: baseline !important; }

/* --- wishlist -> round button, top-right of the plate --- */
.carousel-wrap .pro-box.topoffers .addCart{
  top: 10px !important; right: 10px !important;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #e6ede6;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(20,40,30,.12);
  z-index: 3;
  transition: all .18s ease;
}
.carousel-wrap .pro-box.topoffers .addCart:hover{ border-color: var(--herb, #167a45); transform: scale(1.07); }
.carousel-wrap .pro-box.topoffers .addCart img{
  width: 19px !important; height: 19px; display: block;
  filter: contrast(1.35) saturate(1.1);            /* heart-unfill.png is a very light outline */
}

/* --- body --- */
.carousel-wrap .pro-box.topoffers .slider-text{
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 14px 14px 14px !important;
  text-align: left;
}
/* no CTA rendered (guest / no serviceable pincode) -> don't leave a dead gap */
.carousel-wrap .pro-box.topoffers .slider-text .pp:last-child{ margin-bottom: 0 !important; }
.carousel-wrap .pro-box.topoffers .slider-text a.skucomponent-productTitle{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 40px;
  font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.38 !important;
  color: var(--ink, #182a20) !important;
  margin: 0 0 8px !important;
  transition: color .18s ease;
}
.carousel-wrap .pro-box.topoffers:hover .slider-text a.skucomponent-productTitle{ color: var(--herb, #167a45) !important; }

/* price row: current price leads, MRP and the saving sit beside it */
.carousel-wrap .pro-box.topoffers .slider-text .pp{
  position: relative;                /* the offer chip anchors here, not on the card */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0 0 12px !important;
  font-size: 19px !important; font-weight: 700 !important;
  color: var(--herb-d, #0f5e34) !important;
  line-height: 1.25;
}
.carousel-wrap .pro-box.topoffers .slider-text .pp .crossprice{
  order: 2;
  font-size: 13px !important; font-weight: 500 !important;
  color: var(--muted, #5f7367) !important;
  text-decoration: line-through;
}
.carousel-wrap .pro-box.topoffers .slider-text .pp .items-offerTags{
  order: 3;
  position: static !important;       /* was an absolute ribbon; inline reads cleaner here */
  top: auto !important; left: auto !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: var(--gz-orange-soft, #fff3ea) !important;
  color: var(--turmeric-d, #c06f14) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* --- CTA: whatever the include decided to render, make it one full-width
       control pinned to the bottom so every card in the row lines up.
       Only presentation — the onclick handlers are untouched. --- */
.carousel-wrap .pro-box.topoffers .card-btn-section{ margin-top: auto; }
.carousel-wrap .pro-box.topoffers .slider-text > .btn,
.carousel-wrap .pro-box.topoffers .card-btn-section .btn{
  display: block; width: 100%;
  height: 40px !important; line-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .3px; text-transform: uppercase;
  box-shadow: none !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.carousel-wrap .pro-box.topoffers .slider-text > .btn.themebtn-button:not(.out-stock),
.carousel-wrap .pro-box.topoffers .card-btn-section .btn.themebtn-button{
  background: var(--herb, #167a45) !important; color: #fff !important; border: 0 !important;
}
.carousel-wrap .pro-box.topoffers .card-btn-section .btn.themebtn-button:hover{
  background: var(--herb-d, #0f5e34) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(22,122,69,.28) !important;
}
/* the +/qty and subscription variants share the row rather than stacking */
.carousel-wrap .pro-box.topoffers .card-btn-section{ display: flex; gap: 8px; align-items: center; }
.carousel-wrap .pro-box.topoffers .card-btn-section .qtybtn{ flex: 0 0 auto; }
.carousel-wrap .pro-box.topoffers .card-btn-section .subsciption-plus-button,
.carousel-wrap .pro-box.topoffers .card-btn-section .subsciption____button{ width: 46px !important; flex: 0 0 46px; }
/* sold-out / not-serviceable states stay visually muted, never green */
.carousel-wrap .pro-box.topoffers .btn.out-stock{
  background: #fff !important; color: #9aa8a0 !important; border: 1px solid #e2ebe0 !important;
}

/* ==========================================================================
   3. Carousel chrome — round nav buttons with the arrow INSIDE them
   ==========================================================================
   The glyph is drawn on the BUTTON itself, and the legacy <i class="slider-icon-*">
   is hidden outright.

   Why: demo1.css gives .slider-icon-left/right a background PNG, position:absolute,
   text-indent:-9999px AND `transform: translateY(-50%)`. Overriding the first four
   is not enough — a `transform` makes the element a containing block for
   absolutely-positioned descendants, so a chevron drawn as the <i>'s ::after both
   inherited the -50% shift and resolved its own top/left against the <i> instead
   of the button. Result: the arrow floated ~20px ABOVE an empty circle. Owning the
   glyph on .owl-prev/.owl-next removes every one of those legacy hooks at once.

   States: resting = white circle, green arrow. Pressed / hovered / keyboard-focused
   = green circle, white arrow. :active covers touch, where :hover never fires.
   ========================================================================== */
.carousel-wrap{ position: relative; }
.carousel-wrap .owl-nav{ margin: 0 !important; }
.carousel-wrap .owl-nav .owl-prev,
.carousel-wrap .owl-nav .owl-next{
  /* Centre the arrows on the IMAGE PLATE, not the card.
     `top:%` resolves against the container's HEIGHT, and card height changes with
     the content (the rating row alone moved a percentage-based centre off the
     plate), while the plate is a 1:1 square whose height follows the card WIDTH.
     There is no pure-CSS way to key one off the other here, so the rail measures
     its own plate and publishes --gz-rail-arrow (see gzAlignRailArrows() in
     common.js). The literal is the pre-script fallback for a 4-up desktop rail. */
  position: absolute; top: var(--gz-rail-arrow, 155px);
  transform: translateY(-50%);
  width: 42px; height: 42px;
  margin: 0 !important; padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--line, #e2ebe0) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(20,40,30,.14) !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  z-index: 5;
}
.carousel-wrap .owl-nav .owl-prev{ left: -18px; }
.carousel-wrap .owl-nav .owl-next{ right: -18px; }

/* the arrow itself — a chevron built from two borders, centred in the circle */
.carousel-wrap .owl-nav .owl-prev::before,
.carousel-wrap .owl-nav .owl-next::before{
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-top: 2px solid var(--herb-d, #0f5e34);
  border-right: 2px solid var(--herb-d, #0f5e34);
  transition: border-color .18s ease;
}
.carousel-wrap .owl-nav .owl-prev::before{ transform: translate(-30%, -50%) rotate(-135deg); }
.carousel-wrap .owl-nav .owl-next::before{ transform: translate(-70%, -50%) rotate(45deg); }

/* the legacy sprite <i> carries the transform described above — drop it entirely.
   The button stays the click target, so nothing functional depends on it. */
.carousel-wrap .owl-nav .slider-icon-left,
.carousel-wrap .owl-nav .slider-icon-right{ display: none !important; }

/* pressed / hovered / focused: green circle, white arrow */
.carousel-wrap .owl-nav .owl-prev:hover,
.carousel-wrap .owl-nav .owl-next:hover,
.carousel-wrap .owl-nav .owl-prev:focus,
.carousel-wrap .owl-nav .owl-next:focus,
.carousel-wrap .owl-nav .owl-prev:active,
.carousel-wrap .owl-nav .owl-next:active{
  background: var(--herb, #167a45) !important;
  border-color: var(--herb, #167a45) !important;
  box-shadow: 0 8px 20px rgba(22,122,69,.3) !important;
  outline: none;
}
.carousel-wrap .owl-nav .owl-prev:hover::before,
.carousel-wrap .owl-nav .owl-next:hover::before,
.carousel-wrap .owl-nav .owl-prev:focus::before,
.carousel-wrap .owl-nav .owl-next:focus::before,
.carousel-wrap .owl-nav .owl-prev:active::before,
.carousel-wrap .owl-nav .owl-next:active::before{
  border-top-color: #fff;
  border-right-color: #fff;
}

.carousel-wrap .owl-nav .disabled{ opacity: .35 !important; pointer-events: none; }

/* keep the buttons inside the viewport on narrow screens */
@media only screen and (max-width: 1280px){
  .carousel-wrap .owl-nav .owl-prev{ left: 2px; }
  .carousel-wrap .owl-nav .owl-next{ right: 2px; }
}

/* ==========================================================================
   4. Certification / trust bar  (markup: jsp/home/trustBadges.jsp)
   ========================================================================== */
.gz-certbar-section{ background: linear-gradient(180deg, #fbfdfa 0%, #f4f9f3 100%); border-top: 1px solid #edf3ec; border-bottom: 1px solid #edf3ec; margin-top: 30px; }
.gz-certbar-head{ text-align: center; margin-bottom: 20px; }
.gz-certbar-head .k{
  font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--leaf, #2ea45f); margin-bottom: 6px;
}
.gz-certbar-head h3{
  font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 24px;
  color: var(--ink, #182a20); margin: 0;
}

.gz-certbar .item{ padding: 6px 4px 2px; }
.gz-certbar-badge{ text-align: center; }

/* the seal: a double ring with a soft mint core — our own mark, no imagery */
.gz-certbar-seal{
  width: 92px; height: 92px; margin: 0 auto 12px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f0f7ef 72%, #e6f1e4 100%);
  border: 2px solid var(--herb, #167a45);
  box-shadow: 0 4px 14px rgba(20,60,40,.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.gz-certbar-seal::before{                       /* inner dotted ring */
  content: ""; position: absolute; inset: 6px;
  border: 1.5px dashed rgba(22,122,69,.42);
  border-radius: 50%;
}
.gz-certbar-seal::after{                        /* turmeric accent notch, top */
  content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 8px; border-radius: 0 0 10px 10px;
  background: var(--turmeric, #df8724);
}
.gz-certbar-badge:hover .gz-certbar-seal{ transform: translateY(-4px); box-shadow: 0 12px 24px rgba(20,60,40,.18); }

.gz-certbar-seal i{ font-size: 27px; color: var(--herb, #167a45); line-height: 1; }
.gz-certbar-seal .txt{
  font-family: var(--sans, sans-serif);
  font-weight: 800; font-size: 19px; letter-spacing: .5px;
  color: var(--herb, #167a45); line-height: 1;
}
.gz-certbar-seal .txt small{ display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 1.1px; color: var(--turmeric-d, #c06f14); margin-top: 3px; }

.gz-certbar-label{
  font-size: 13.5px; font-weight: 700; line-height: 1.35;
  color: var(--ink, #182a20);
  max-width: 165px; margin: 0 auto;
}
.gz-certbar-sub{ display: block; font-size: 11.5px; font-weight: 500; color: var(--muted, #5f7367); margin-top: 3px; }

/* dots */
.gz-certbar .owl-dots{ margin-top: 16px !important; text-align: center; }
.gz-certbar .owl-dots .owl-dot span{
  width: 8px !important; height: 8px !important; margin: 0 4px !important;
  background: #cfe0d2 !important; border-radius: 999px !important;
  transition: all .2s ease;
}
.gz-certbar .owl-dots .owl-dot.active span{ width: 22px !important; background: var(--herb, #167a45) !important; }
.gz-certbar .owl-dots .owl-dot:only-child{ display: none; }
.gz-certbar .owl-nav{ display: none !important; }

/* ==========================================================================
   5. Responsive
   ========================================================================== */
@media only screen and (max-width: 992px){
  .carousel-wrap .pro-box.topoffers .slider-text{ padding: 12px 11px 13px !important; }
  .carousel-wrap .pro-box.topoffers .slider-text .pp{ font-size: 17px !important; }
  .gz-certbar-seal{ width: 82px; height: 82px; }
  .gz-certbar-seal i{ font-size: 24px; }
  .gz-certbar-seal .txt{ font-size: 17px; }
}
@media only screen and (max-width: 600px){
  .home-page-modern .section-gap, .gz-certbar-section{ padding: 22px 0 4px; }
  .carousel-wrap .owl-item{ padding: 4px 0 10px; }
  .carousel-wrap .pro-box.topoffers{ border-radius: 13px !important; }
  .carousel-wrap .pro-box.topoffers > .position-relative > a{ padding: 10px; }
  .carousel-wrap .pro-box.topoffers .slider-text a.skucomponent-productTitle{ font-size: 13px !important; min-height: 36px; }
  .carousel-wrap .pro-box.topoffers .slider-text .pp{ font-size: 16px !important; gap: 6px; margin-bottom: 10px !important; }
  .carousel-wrap .pro-box.topoffers .slider-text .pp .crossprice{ font-size: 12px !important; }
  .carousel-wrap .pro-box.topoffers .addCart{ width: 30px; height: 30px; top: 7px !important; right: 7px !important; }
  .carousel-wrap .pro-box.topoffers .addCart img{ width: 15px !important; height: 15px; }
  .carousel-wrap .owl-nav .owl-prev, .carousel-wrap .owl-nav .owl-next{ width: 34px; height: 34px; }
  .gz-certbar-head h3{ font-size: 20px; }
  .gz-certbar-seal{ width: 74px; height: 74px; margin-bottom: 9px; }
  .gz-certbar-seal i{ font-size: 21px; }
  .gz-certbar-seal .txt{ font-size: 15px; }
  .gz-certbar-label{ font-size: 12px; max-width: 130px; }
  .gz-certbar-sub{ display: none; }
}