/** Shopify CDN: Minification failed

Line 19:76 Unexpected "*"
Line 26:7 Unexpected "{"
Line 26:9 Expected identifier but found "'abhi-product-carousel.css'"
Line 27:3 Unexpected "="

**/
/* ==========================================================================
   Abhi Product Listing — shared styles
   Used by: Abhi Products (Trending Sarees / Celebrity Choices / Best Seller),
   and any future product-listing section (Tabbed Products, You May Also Like,
   Recently Viewed) that adds the class "abhi-product-listing" to its
   <section> wrapper and reuses the same header/carousel markup.

   To reuse in another section:
   1. Add class="abhi-product-listing" to that section's <section> tag.
   2. Copy the --abhi-gap / --abhi-gap-mobile inline custom properties.
   3. Copy the .abhi-section__header wrapper with abhi-head-d-*/abhi-head-m-*
      classes if you want the alignment options too.
   4. Copy the .abhi-carousel / .abhi-product-grid--carousel markup and its
      --abhi-cols-desktop / --abhi-cols-laptop / --abhi-cols-tablet /
      --abhi-cols-mobile / --abhi-mobile-visible inline custom properties
      if you want the carousel option too.
   5. Load this file with:
      {{ 'abhi-product-carousel.css' | asset_url | stylesheet_tag }}
   ========================================================================== */

/* ---------- Heading / subheading alignment ---------- */

.abhi-product-listing .abhi-section__header .abhi-section__heading,
.abhi-product-listing .abhi-section__header .abhi-section__subheading {
  max-width: 100%;
}

@media (min-width: 750px) {
  .abhi-product-listing .abhi-head-d-left   { text-align: left !important;   align-items: flex-start !important; }
  .abhi-product-listing .abhi-head-d-center { text-align: center !important; align-items: center !important; }
  .abhi-product-listing .abhi-head-d-right  { text-align: right !important;  align-items: flex-end !important; }

  .abhi-product-listing .abhi-head-d-left   > * { margin-left: 0 !important;    margin-right: auto !important; }
  .abhi-product-listing .abhi-head-d-center > * { margin-left: auto !important; margin-right: auto !important; }
  .abhi-product-listing .abhi-head-d-right  > * { margin-left: auto !important; margin-right: 0 !important; }
}

@media (max-width: 749px) {
  .abhi-product-listing .abhi-head-m-left   { text-align: left !important;   align-items: flex-start !important; }
  .abhi-product-listing .abhi-head-m-center { text-align: center !important; align-items: center !important; }
  .abhi-product-listing .abhi-head-m-right  { text-align: right !important;  align-items: flex-end !important; }

  .abhi-product-listing .abhi-head-m-left   > * { margin-left: 0 !important;    margin-right: auto !important; }
  .abhi-product-listing .abhi-head-m-center > * { margin-left: auto !important; margin-right: auto !important; }
  .abhi-product-listing .abhi-head-m-right  > * { margin-left: auto !important; margin-right: 0 !important; }
}

/* ---------- Gap for the plain (non-carousel) grid ----------
   abhiramam-antara.css hardcodes ".abhi-product-grid { gap: 26px }"
   (and 20px 10px on mobile), ignoring --abhi-gap entirely. These
   !important overrides make the Product gap (desktop) / (mobile)
   settings actually take effect on non-carousel grids too. */

.abhi-product-listing .abhi-product-grid:not(.abhi-product-grid--carousel) {
  gap: var(--abhi-gap-mobile, 12px) !important;
}

@media (min-width: 750px) {
  .abhi-product-listing .abhi-product-grid:not(.abhi-product-grid--carousel) {
    gap: var(--abhi-gap, 18px) !important;
  }
}

/* ---------- Carousel ---------- */

.abhi-product-listing .abhi-carousel {
  position: relative;
}

.abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: var(--abhi-gap-mobile, 12px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel::-webkit-scrollbar {
  display: none;
}

.abhi-product-listing .abhi-carousel .abhi-product-grid--carousel img {
  -webkit-user-drag: none;
  user-select: none;
}

.abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel.is-dragging a,
.abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel.is-dragging button {
  pointer-events: none;
}

/* Mobile (default): peek of the next card, mobile gap */
.abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel > .abhi-product-card {
  flex: 0 0 calc((100% - var(--abhi-gap-mobile, 12px)) / var(--abhi-mobile-visible, 1.5));
  width: auto;
  min-width: 0;
  scroll-snap-align: start;
}

/* Tablet: e.g. desktop=5 -> 3 full cards + a peek of the 4th, desktop gap */
@media (min-width: 750px) and (max-width: 1023.98px) {
  .abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel {
    gap: var(--abhi-gap, 18px);
  }
  .abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel > .abhi-product-card {
    flex-basis: calc((100% - var(--abhi-gap, 18px)) / (var(--abhi-cols-tablet, 3) + 0.15));
  }
}

/* Laptop: e.g. desktop=5 -> exactly 4 full cards, desktop gap */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel {
    gap: var(--abhi-gap, 18px);
  }
  .abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel > .abhi-product-card {
    flex-basis: calc((100% - (var(--abhi-cols-laptop, 4) - 1) * var(--abhi-gap, 18px)) / var(--abhi-cols-laptop, 4));
  }
}

/* Desktop: the exact "Desktop columns" setting, desktop gap */
@media (min-width: 1200px) {
  .abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel {
    gap: var(--abhi-gap, 18px);
  }
  .abhi-product-listing .abhi-carousel > .abhi-product-grid--carousel > .abhi-product-card {
    flex-basis: calc((100% - (var(--abhi-cols-desktop, 4) - 1) * var(--abhi-gap, 18px)) / var(--abhi-cols-desktop, 4));
  }
}

/* Arrows: desktop only, visible on hover */
.abhi-product-listing .abhi-carousel__arrow {
  display: none;
}

@media (min-width: 990px) and (hover: hover) {
  .abhi-product-listing .abhi-carousel__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #222;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease;
  }
  .abhi-product-listing .abhi-carousel__arrow svg { width: 22px; height: 22px; }
  .abhi-product-listing .abhi-carousel__arrow--prev { left: 12px; }
  .abhi-product-listing .abhi-carousel__arrow--next { right: 12px; }

  .abhi-product-listing .abhi-carousel:hover .abhi-carousel__arrow { opacity: 1; }
  .abhi-product-listing .abhi-carousel__arrow:hover { background: #222; color: #fff; }

  .abhi-product-listing .abhi-carousel__arrow.is-hidden {
    opacity: 0 !important;
    pointer-events: none;
    visibility: hidden;
  }
}

/* ---------- Mobile tab carousel (Tabbed Products, and any section reusing
   the same .abhi-tabbed-products__tabs / __tab markup) ---------- */

@media (max-width: 749px) {
  .abhi-product-listing .abhi-tabbed-products__tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 10px;
    padding-bottom: 2px;
  }
  .abhi-product-listing .abhi-tabbed-products__tabs::-webkit-scrollbar {
    display: none;
  }
  .abhi-product-listing .abhi-tabbed-products__tabs .abhi-tabbed-products__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}