/** Shopify CDN: Minification failed

Line 436:16 Unexpected "{"
Line 436:25 Expected ":"
Line 436:32 Unexpected "{"
Line 440:16 Unexpected "{"
Line 440:25 Expected ":"
Line 443:0 Expected "}" to go with "{"

**/
/* spacing */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200;300;400;500;600;700&display=swap');
.product-slider-section .swiper {
  padding-bottom: 0px;
  overflow: hidden;
  cursor: grab;
}

.product-slider-section .swiper:active {
  cursor: grabbing;
}

.product-slider-section .swiper-wrapper{
  transition-timing-function: ease-in-out;
  user-select: none;
}

.product-slider-section .swiper-slide {
  height: auto;
}

/* arrows */
.product-slider-section .swiper-button-next,
.product-slider-section .swiper-button-prev {
  color: #000;
}

/* dots */
.product-slider-section .swiper-pagination-bullet {
  background: #000;
}

.item-product .product__title a {
  font-size: 14px !important;
  /* font-weight: 600 !important; */
  
}

.item-swatch label{
  position: relative;
  border-radius: 100%;
  /* border: 2px solid transparent !important; */
  transition: all .2s ease;
}

/* REMOVE OLD DEFAULT RINGS */
.item-swatch label::before,
.item-swatch label::after{
  display: none !important;
  content: none !important;
}

/* ACTIVE COLOR STYLE */
.item-swatch li label.color.active{
  border: 3px solid #fff !important;

  /* OUTER RING SAME AS COLOR */
  box-shadow:
    0 0 0 2px currentColor !important;
}

/* IMAGE SWATCH ACTIVE */
.item-swatch li label.img.active{
  /* border: 3px solid #fff !important; */
  box-shadow:
    0 0 0 3px  #cc7f6b !important;
}

.item-product .product__title{
  margin-top: 7px !important;
}

/* .ai-filter-button-{{ ai_gen_id }}.active,
.ai-custom-filter-{{ ai_gen_id }}.active{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
} */

.item-product .product__info{
  line-height: 24px!important ;
}

.item sp-item slick-slide slick-current slick-active{
  width:332px !important ;
}
.sp-item{
   width:332px !important ;
}
/* ================================================================
   PRODUCT CARD IMAGE CAROUSEL — GLOBAL CSS
   Paste at bottom of: assets/theme.css  OR  assets/base.css
   Works on ALL pages using product-grid-item-style-1 snippet
   ================================================================ */

/* --- Root: aspect-ratio gives the height, everything inside is absolute --- */
.respone_image.pg-carousel-root {
  aspect-ratio: 3 / 4;
  width: 100%;
  position: relative;   /* <-- anchor for all absolute children */
  overflow: hidden;
  display: block;
  background: #f0efed;
}

/* --- Link fills full root --- */
.pg-carousel-link {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  line-height: 0;
}

/* --- Track fills link --- */
.pg-carousel-track {
  width: 100%;
  height: 100%;
  position: relative;
}

/* --- ALL slides: absolute, stacked on top of each other --- */
.pg-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

/* --- Active slide: just turn on opacity, NO position change --- */
.pg-carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- Images fill the slide --- */
.pg-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Arrow Buttons --- */
/* .pg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  z-index: 20;
  background: rgba(255, 255, 255, 0.90);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s ease;
  pointer-events: none;
  padding: 0;
  line-height: 1;
}

.pg-arrow-prev {
  left: 10px;
  transform: translateY(-50%) translateX(-6px);
}

.pg-arrow-next {
  right: 10px;
  transform: translateY(-50%) translateX(6px);
} */

/* Show on hover */
/* .pg-carousel-root:hover .pg-arrow {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.pg-arrow:hover {
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

.pg-arrow svg {
  display: block;
  flex-shrink: 0;
} */


/* --- Badges stay on top --- */
.pg-carousel-root .product--badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 25;
}

/* --- Mobile: always show arrows + dots --- */
@media (max-width: 768px) {
  .pg-carousel-dots {
    opacity: 1;
  }
  .pg-arrow {
    opacity: 1;
    pointer-events: auto;
    width: 26px;
    height: 26px;
  }
  .pg-arrow-prev {
    transform: translateY(-50%);
    left: 6px;
  }
  .pg-arrow-next {
    transform: translateY(-50%);
    right: 6px;
  }
}
/* ================================================================
   CAROUSEL INDICATOR OVERRIDE
   Replace round dots with rug-style line indicators
   Add at VERY END of style.css
   ================================================================ */
/* ================================================================
   FIXED: EXACT FULL-WIDTH EDGE-TO-EDGE INDICATORS
   ================================================================ */

/* 1. Main dots wrapper ko poori tarah corner-to-corner failane ke liye */
.pg-carousel-dots {
  position: absolute !important;
  bottom: 0px !important;          /* Bilkul niche touch */
  left: 0px !important;            /* Left edge se start */
  right: 0px !important;           /* Right edge par khatam */
  transform: none !important;      /* Center transform ko remove kiya */
  
  display: flex !important;
  align-items: flex-end !important;
  gap: 2px !important;             /* Do lines ke beech ka barik gap */
  
  width: 100% !important;          /* 100% Full Width */
  max-width: 100% !important;      /* Har tarah ki width limit khatam */
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 15 !important;
}

/* Base root wrapper par check lagane ke liye agar image overflow ho rahi ho */
.pg-carousel-root {
  overflow: hidden !important;
}

/* 2. Har ek single line dot barabar space le (Equal Widths) */
.pg-dot {
  flex: 1 1 0% !important;         /* Jitne dots honge, sab equal automatic space lenge */
  width: auto !important;
  height: 9px !important;          /* Line ki solid thickness */
  border-radius: 0px !important;   /* No rounds, pure straight box lines */
  
  /* Inactive Line color (Halka Grey jaisa screenshot me hai) */
  background: rgba(255, 255, 255, 0.4) !important; 
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1) !important; /* Agar background white ho toh visual edge dikhe */
  
  transform: none !important;
  transition: background .2s ease !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Hover karne par */
.pg-dot:hover {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* 4. Active Line Jo Chal rahi hai (Solid Dark Blue/Charcoal) */
.pg-dot.active {
  background: #cc7f6b !important;  /* Screenshot wala accurate slate/blue-grey tone */
  transform: none !important;
}

/* 5. Mobile responsive overrides ko bypass karne ke liye */
@media (max-width: 768px) {
  .pg-carousel-dots {
    width: 100% !important;
    max-width: 100% !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
  }
  .pg-dot {
    height: 6px !important;
  }
}

/* ================================================================
   OPTIONAL: If theme/product-card carousel uses these classes too
   ================================================================ */

.product-card__dotnav{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;

  width:100% !important;
  height:2px !important;

  margin-top:0 !important;
  padding:0 !important;
}

.product-card__dot{
  flex:1 1 0 !important;

  min-width:0 !important;
  height:2px !important;

  border:none !important;
  border-radius:0 !important;

  background:#d9d9d9 !important;

  padding:0 !important;
  transition:background .25s ease !important;
}

.product-card__dot:hover{
  background:#bdbdbd !important;
}

.product-card__dot.is-active,
.product-card__dot[aria-selected="true"]{
  background:#7f7f7f !important;
}
/* ================================================================
   CRITICAL FIX: Override theme's default hover opacity on .product__thumbnail
   Theme hides .product__thumbnail on hover to show second image,
   but in our carousel we handle this ourselves via opacity on slides.
   ================================================================ */
.pg-carousel-root .product__thumbnail,
.pg-carousel-root .product__thumbnail-second,
.pg-carousel-root img {
  opacity: 1 !important;
  transition: none !important;
  visibility: visible !important;
}

/* Slide opacity is controlled only by .pg-carousel-slide active/inactive */
.pg-carousel-slide {
  transition: opacity 0.32s ease !important;
}
.pg-carousel-slide.active img {
  opacity: 1 !important;
}
.pg-carousel-slide:not(.active) {
  opacity: 0 !important;
}
.pg-carousel-slide:not(.active) img {
  opacity: 1 !important;
}
.size-dimension-range {
  font-size: 13px;
  color: #666;
  /* margin-top: 4px; */
}
#selected-size-title{
  font-size: 18px;
  font-weight: 400;
  color: #666;
}

@media (max-width: 767px) {
  .info_content .product-single__title,
  .info_content .product-short-description {
    display: none !important;
  }
  #selected-size-title-mobile{
  color: #666 !important;
  font-size: 18px;
  font-weight: 400;
  
}
/* }
.grid-view-items .item-product .thumbnail-container {
    height: 420px !important;
    overflow: hidden;
}

.grid-view-items .item-product .thumbnail-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
.grid--view-items .item-product .thumbnail-container {
    height: 350px !important;
    overflow: hidden;
}

.grid--view-items .item-product .thumbnail-container img {
    width: 100% !important;
    height: 350px !important;
    object-fit: cover !important;
    display: block;
} */
 
/* Mobile screen (768px aur usse chhote) par carousel arrows ko hide karne ke liye */
@media (max-width: 768px) {
  .pg-arrow {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
.productSwiper-{{ section.id }} {
  visibility: hidden;
}

.productSwiper-{{ section.id }}.swiper-initialized {
  visibility: visible;
}