/** Shopify CDN: Minification failed

Line 269:29 Expected identifier but found whitespace
Line 269:35 Unexpected ";"
Line 344:5 Unexpected "/"
Line 1631:0 Comments in CSS use "/* ... */" instead of "//"

**/
/*
  BREAKPOINT MAP
  Base styles: desktop / all screen sizes
  max-width: 1199px — tablet product grid
  max-width: 989px  — tablet/mobile header and filter drawer
  max-width: 768px  — mobile close button
  max-width: 749px  — mobile products and subcollections
*/

/* --- Header Layout (Title Left, USP Badges Right) --- */
.canva-exact-header {
  display: flex;
  justify-content: space-between;
  align-items: center; 
  padding: 30px 0;
  width: 100%;
  gap: 30px;
  box-sizing: border-box;
}

.header-left-brand {
  display: flex;
  flex-direction: column;
  flex: 1; 
  min-width: 0;
}

.collection-main-title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.collection-description-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.4;
}


/* =========================================================
   CIRCULAR SUBCOLLECTION LAYOUT
   ========================================================= */

/* .subcollection-section {
  width: 100%;
  margin-top: 0;
  padding-top: 18px;
  padding-bottom: 24px;
  border-top: 1px solid #eeeeee;
  box-sizing: border-box;
} */

.subcollection-heading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  margin-top:20px;
}

.subcollection-heading {
  margin: 0;
  color: #222222;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.subcollection-heading-line {
  display: block;
  width: 30px;
  height: 3px;
  margin-top: 8px;
  background-color: #ff5500;
  border-radius: 10px;
}

.subcollection-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, 150px);
      gap:28px;
      justify-content:center;
      align-items:start;
      width:100%;
      overflow:visible;
      padding:10px 0;
  }

  .subcollection-card{
      width:100%;
      min-width:0;
      flex:none;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
  }


  .subcollection-card:hover .subcollection-image{
      transform:scale(1.05);
  }

.subcollection-grid::-webkit-scrollbar {
  display: none;
}

.subcollection-card {
  display: flex;
  flex: 0 0 92px;
  min-width: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;

  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  color: #222222;
  text-align: center;
  text-decoration: none;
}

.subcollection-card:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-2px);
}

.subcollection-image {
  width: 120px;
  height: 120px;
  margin: 0;
  padding: 4px;
  transition:.3s ease;
  overflow: hidden;
  flex-shrink: 0;

  background: #f7f7f7;
  border: 1px solid #e7e7e7;
  border-radius: 50%;
  box-sizing: border-box;
}

.subcollection-image img,
.subcollection-image svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.subcollection-title {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;

  color: #222222;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.subcollection-count {
  display: none;
}

/* Active subcollection */
.subcollection-card.active-sub-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.subcollection-card.active-sub-card .subcollection-image {
  border: 2px solid #ff5500;
}

.subcollection-card.active-sub-card .subcollection-title {
  color: #ff5500;
  font-weight: 700;
}
/* --- USP Badges Horizontal Row --- */
.header-right-usp-row {
  display: flex;
  align-items: center;
  gap: 24px; 
  flex-shrink: 0; 
}

.canva-usp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.canva-usp-item img, 
.canva-usp-item svg {
  width: 32px; 
  height: 32px;
  object-fit: contain;
}

.canva-usp-info {
  display: flex;
  flex-direction: column;
}

.canva-title {
  font-size: 13px;
  font-weight: 700;
  color: #000000;
  margin: 0;
  line-height: 1.2;
}

.canva-subtitle {
  font-size: 11px;
  color: #777777;
  margin-top: 3px;
  white-space: nowrap; 
}

/* --- Subcollections Grid Row (Canva Style) --- */
/* .subcollection-section {
  margin-top: 10px;
  border-top: 1px solid #eeeeee;
  padding-top: 25px;
  padding-bottom: 25px;
  width: 100%;
  box-sizing: border-box;
} */

/* .subcollection-grid {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
} */

/* Hide scrollbar for Chrome, Safari and Opera */
/* .subcollection-grid::-webkit-scrollbar {
  display: none; 
} */

/* .subcollection-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 8px 16px 8px 10px;
  min-width: 200px;
  text-decoration: none;
  color: #000000;
  flex-shrink: 0;
  transition: all 0.3s ease;
} */

/* .subcollection-card:hover {
  border-color: #ff4500; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
} */

/* .subcollection-image {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f9f9f9;
  margin-right: 12px;
}

.subcollection-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* .subcollection-info {
  display: flex;
  flex-direction: column;
}

.subcollection-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.subcollection-count {
  font-size: 11px;
  color: #777777;
  margin-top: 2px;
} */


/* ==========================================================================
   MOBILE VIEW CUSTOM CORRECTIONS (EXTRA SPACING & COMPACT SUBCOLLECTIONS)
   ========================================================================== */
@media screen and (max-width: 749px) {
  /* 1. Main Header aur sections se unwanted mobile outer spacing hatane ke liye */
  .canva-exact-header {
    padding: 10px 0 !important; /* Top/Bottom heavy spaces directly cut down */
    gap: 12px !important;
  }
  
  /* .subcollection-section {
    margin-top: 0px !important;
    padding-top: 15px !important;
    padding-bottom: 0px !important; /* Extra bottom vertical space balanced */
  } */

  /* 2. Subcollection Grid ko edge-to-edge compact karne ke liye */
  /* .subcollection-grid {
    gap: 8px !important; 
  } */

  /* 3. Subcollection Cards ko responsive aur chota karne ke liye */
  /* .subcollection-card {
    min-width: 155px ;
    padding: 6px 10px 6px 8px !important;
    border-radius: 6px !important;
  } */

  /* 4. Subcollection Icons / Images ko chota karne ke liye */
  /* .subcollection-image {
    width: 32px !important;  
    height: 32px !important;
    margin-right: 8px !important; 
    border-radius: 4px !important;
  } */

  /* 5. Subcollection Typography Sizes compress karne ke liye */
  /* .subcollection-title {
    font-size: 11px !important; 
    line-height: 1.1 !important;
  }

  .subcollection-count {
    font-size: 9px !important; 
    margin-top: 1px !important;
  } */
}

/* Active collection highlight */
.subcollection-card.active-sub-card {
  border-color: #ff4500;
  background: #fff4ed;
  box-shadow: 0 2px 10px rgba(255,69,0,0.15);
}

.subcollection-card.active-sub-card .subcollection-title {
  color: #ff4500;
  font-weight: 700;
}

/* --- Products Grid Base Layout --- */
.collection-product-grid-wrapper {
  padding: 10px 0;
}

.products-grid-layout {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Desktop: 4 columns */
  gap: 12px;
}


/* --- Responsiveness Breakpoints --- */
@media screen and (max-width: 1199px) {
  .products-grid-layout {
    grid-template-columns: repeat(3, 1fr); /* Tablets: 3 columns */
  }
}

@media screen and (max-width: 749px) {
  .products-grid-layout {
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columns */
    gap: 6px;
  }
  .product-card-meta {
    padding: 10px;
  }
  .product-title-text {
    font-size: 13px;
    height: 36px;
  }
  .regular-price {
    font-size: 14px;
  }
}



/**Filters Css**/

.collection-products-content-side {
  flex-grow: 1;
}


/* ==========================================================================
   DESKTOP FILTERS LAYOUT BASE
   ========================================================================== */
.collection-layout-wrapper {
  display: flex;
  gap: 30px;
  width: 100%;
  align-items: flex-start;
}

.collection-filters-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  background: #ffffff;
}

.collection-products-content-side {
  flex-grow: 1;
}

.collection-meta-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}

.mobile-filter-toggle-btn {
  display: none; /* Desktop par toggle button hidden rahega */
}

/* --- Navigation Category Selection Specific Adjustments --- */

/* --- Core Reset to Remove Checkbox Dots/Bullets --- */


.filter-checkbox-list li {
  list-style-type: none !important; /* Double-insurance for browser variations */
  margin: 0 !important;
  padding: 0 !important;
}

.navigation-redirect-label {
  transition: color 0.2s ease;
}

.navigation-redirect-label:hover {
  color: #ff4500;
}

.navigation-redirect-label input[type="checkbox"]:checked + .custom-checkbox-text {
  color: black;
  font-weight: 700;
}

.custom-navigation-categories {
  background-color: #ffffff;
}

/* ==========================================================================
   MOBILE FILTER & SMOOTH DRAWER RULES (989px and below)
   ========================================================================== */
@media screen and (max-width: 989px) {
  .collection-layout-wrapper {
    flex-direction: column;
    gap: 15px;
  }

  .mobile-filter-toggle-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    cursor: pointer;
    color: #111111;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  }

  /* Converting desktop panel into a fixed off-screen smooth sidebar drawer */
  .collection-filters-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -340px !important; /* Completely slides outside view till button trigger */
    width: 300px !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 9999 !important; /* Higher depth index layers */
    padding: 25px 20px !important;
    box-shadow: 5px 0 25px rgba(0,0,0,0.15) !important;
    overflow-y: auto !important; /* Enables scroll for multiple categories */
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Trigger class injected smoothly via JS handle */
  .collection-filters-sidebar.drawer-open {
    left: 0 !important;
  }

  /* Dark translucent backdrop overlay layer rules */
  .filter-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 9998 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .filter-drawer-overlay.active {
    display: block !important;
    opacity: 1 !important;
  }
}




.filter-checkbox-input {
  margin: 0 !important;            /* Default browser shifting borders zero */
  accent-color: #ff4500;           /* Pure brand orange color on checked status */
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.filter-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 25px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f1f1;
}

.filter-main-heading {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin: 0;
}



.clear-all-link {
  font-size: 12px;
  font-weight: 600;
  color: #ff4500; /* Canva Orange Accent */
  text-decoration: none;
  transition: opacity 0.2s;
}

.clear-all-link:hover {
  opacity: 0.8;
}

/* Individual Filter Blocks (Category, Price, Material, Capacity) */
.filter-group-block {
  margin-bottom: 28px;
  border: none !important; /* Canva me borders nahi hain inner boxes me */
  background: transparent !important;
  padding: 0 !important;
}

.filter-group-title {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
  text-transform: capitalize;
  margin: 0 0 14px 0;
  letter-spacing: 0.3px;
}

/* Checkbox Lists Style Reset (No Dots, Clean Gaps) */
.filter-checkbox-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Vertically balanced spacing as per mockup */
}

.filter-checkbox-list li {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Canva Clean Checkbox Label Layout */
.filter-checkbox-label {
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  width: 100%;
  user-select: none;
}

/* Styled Checkbox Inputs */
.filter-checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  margin: 0 10px 0 0 !important;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #ffffff;
  flex-shrink: 0;
}

/* Checked state transitions to Canva Orange */
.filter-checkbox-input:checked {
  background-color: #ff4500 !important;
  border-color: #ff4500 !important;
}

.filter-checkbox-input:checked::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Typography alignment for list texts */
.custom-checkbox-text {
  font-size: 13px;
  font-weight: 500;
  color: #444444;
  line-height: 1.2;
}

/* Count indicator formatting: e.g., (48) */
.filter-item-count {
  font-size: 12px;
  color: #888888;
  margin-left: 4px;
}

/* Category Checkbox Active/Selected Text Style */
.filter-checkbox-input:checked {
  color: #ff4500;
  font-weight: 600;
}
/* Category Checkbox Active/Selected Text Style */
.filter-checkbox-input:checked {
  color: #ff4500;
  font-weight: 600;
}


/* 1. Default state: Jab tick na ho tab text aur brackets normal rahenge */
.custom-checkbox-text,
.filter-item-count {
  font-weight: 500 !important;
  color: #444444 !important;
}

/* 2. Active state: Jab checkbox CHECKED ho, tab text aur bracket dono ek sath bold aur dark black ho jayenge */
.filter-checkbox-input:checked ~ .custom-checkbox-text,
.filter-checkbox-input:checked ~ .filter-item-count {
  font-weight: 700 !important;
  color: #000000 !important;
}

/* 3. Navigation Categories ke liye bhi active bold sync */
.navigation-redirect-label input[type="checkbox"]:checked + .custom-checkbox-text,
.navigation-redirect-label input[type="checkbox"]:checked ~ .filter-item-count {
  font-weight: 700 !important;
  color: #000000 !important;
}

/* ==========================================================================
   SHOPIFY MOBILE VIEW CRITICAL FIX (TEXT & HEADER COMPACT LAYOUT)
   ========================================================================== */
@media screen and (max-width: 989px) {
  /* 1. Single letter vertical breakdown ko rokne ke liye word-break reset */
  .collection-main-title, 
  h1, .canva-exact-header {
    word-break: keep-all !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 20px !important; /** Font size In A Mobile View **/
    
  }

  .canva-exact-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 12px 0 !important; /* Unwanted spacing clean kari */
    gap: 15px !important;
  }

  /* 2. USP Badges ko ek choti scrollable row me fit karne ke liye */
  .header-right-usp-row {
    display: flex !important;
    flex-direction: row !important; /* Kisi bhi haal me vertically stacked nahi hoga */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100% !important;
    gap: 16px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
  }

  /* 3. Icons aur text ko thoda chota (Compact) karne ke liye */
  .canva-usp-item {
    gap: 8px !important;
    min-width: 140px !important; /* Choti screens par proper grid spacing */
  }

  .canva-usp-item img, 
  .canva-usp-item svg {
    width: 24px !important; /* 32px se chota karke 24px kiya */
    height: 24px !important;
  }

  .canva-title {
    font-size: 11px !important; /* Title text size compact */
  }

  .canva-subtitle {
    font-size: 9px !important; /* Subtitle size compact */
    margin-top: 1px !important;
  }
}

/* ==========================================================================
   REMOVE MOBILE HORIZONTAL SCROLLBAR INDICATORS
   ========================================================================== */
@media screen and (max-width: 989px) {
  /* USP badges scrollbar hidden */
  .header-right-usp-row {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  .header-right-usp-row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Subcollection scrollbar hidden */
  .subcollection-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .subcollection-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}


/* ==========================================================================
   CANVA PRICE RANGE STYLING MATRIX (UPDATED & ALIGNED)
   ========================================================================== */
.filter-price-range-wrapper {
  padding-top: 5px;
  width: 100%;
}

/* Dual Range Slider Track Container */
.range-slider-container {
  position: relative;
  width: 100%;
  height: 6px;
  margin: 15px 0 25px 0;
  background: #eef0f2;
  border-radius: 5px;
}

/* Active Highlight Orange Bar Track */
.range-slider-container .slider-track {
  position: absolute;
  height: 100%;
  background: #ff4500 !important; /* Canva exact theme orange accent */
  border-radius: 5px;
  left: 0%;
  right: 0%;
  z-index: 1;
}

/* Core Inputs Range Layer Resets */
.range-slider-container input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  top: 0;
  left: 0;
  background: none;
  pointer-events: none; /* Allows track layer transparency passes */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  z-index: 2;
}

/* Chrome, Safari, Edge handles (Thumbs) */
.range-slider-container input[type="range"]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ff4500 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  margin-top: -5px; /* Perfect tracking positioning center alignment */
  transition: transform 0.1s ease;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Firefox handles */
.range-slider-container input[type="range"]::-moz-range-thumb {
  height: 16px !important;
  width: 16px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: #ff4500 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Equal Split Widths Input Fields underneath */
.price-input-fields {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.price-field {
  display: flex;
  align-items: center;
  background: #f7f8fa;
  border: 1px solid #eef0f2;
  border-radius: 6px;
  padding: 6px 10px;
  width: 50%; /* Splitting containers equally into 50-50% layout */
  box-sizing: border-box;
}

.price-field span {
  font-size: 11px;
  color: #888888;
  margin-right: 6px;
  white-space: nowrap;
}

.filter-price-input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

/* Stripping numeric native arrows controls */
.filter-price-input::-webkit-outer-spin-button,
.filter-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-price-input[type="number"] {
  -moz-appearance: textfield;
}

/* --- Desktop Filters Layout Base --- */
.collection-layout-wrapper {
  display: flex;
  gap: 30px;
  width: 100%;
  align-items: flex-start;
}

.collection-filters-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  background: #ffffff;
}

.collection-products-content-side {
  flex-grow: 1;
}

.collection-meta-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}

.mobile-filter-toggle-btn {
  display: none;
}

.filter-checkbox-list li {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navigation-redirect-label {
  transition: color 0.2s ease;
}

.navigation-redirect-label:hover {
  color: #ff4500;
}

.custom-navigation-categories {
  background-color: #ffffff;
}

/* ==========================================================================
   MOBILE FILTER & SIDEBAR SMOOTH DRAWER
   ========================================================================== */
@media screen and (max-width: 989px) {
  .collection-layout-wrapper {
    flex-direction: column;
    gap: 15px;
  }

  .mobile-filter-toggle-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    cursor: pointer;
    color: #111111;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  }

  .collection-filters-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -340px !important;
    width: 300px !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    padding: 25px 20px !important;
    box-shadow: 5px 0 25px rgba(0,0,0,0.15) !important;
    overflow-y: auto !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .collection-filters-sidebar.drawer-open {
    left: 0 !important;
  }

  .filter-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 9998 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .filter-drawer-overlay.active {
    display: block !important;
    opacity: 1 !important;
  }
}

.filter-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 25px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f1f1;
}

.filter-main-heading {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin: 0;
}

.clear-all-link {
  font-size: 12px;
  font-weight: 600;
  color: #ff4500;
  text-decoration: none;
  transition: opacity 0.2s;
}

.clear-all-link:hover {
  opacity: 0.8;
}

.filter-group-block {
  margin-bottom: 28px;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.filter-group-title {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
  text-transform: capitalize;
  margin: 0 0 14px 0;
  letter-spacing: 0.3px;
}

.filter-checkbox-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-checkbox-label {
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  width: 100%;
  user-select: none;
}

.filter-checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  margin: 0 10px 0 0 !important;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #ffffff;
  flex-shrink: 0;
}

.filter-checkbox-input:checked {
  background-color: #ff4500 !important;
  border-color: #ff4500 !important;
}

.filter-checkbox-input:checked::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.custom-checkbox-text {
  font-size: 13px;
  font-weight: 500;
  color: #444444;
  line-height: 1.2;
}

.filter-item-count {
  font-size: 12px;
  color: #888888;
  margin-left: 4px;
}

.filter-checkbox-input:checked ~ .custom-checkbox-text,
.filter-checkbox-input:checked ~ .filter-item-count,
.navigation-redirect-label input[type="checkbox"]:checked + .custom-checkbox-text,
.navigation-redirect-label input[type="checkbox"]:checked ~ .filter-item-count {
  font-weight: 700 !important;
  color: #000000 !important;
}

/* ==========================================================================
   CANVA PRICE RANGE SLIDER STYLING MATRIX
   ========================================================================== */
.filter-price-range-wrapper {
  padding-top: 5px;
  width: 100%;
}

.range-slider-container {
  position: relative;
  width: 100%;
  height: 6px;
  margin: 15px 0 25px 0;
  background: #eef0f2;
  border-radius: 5px;
}

.range-slider-container .slider-track {
  position: absolute;
  height: 100%;
  background: #ff4500 !important;
  border-radius: 5px;
  left: 0%;
  right: 0%;
  z-index: 1;
}

.range-slider-container input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  top: 0;
  left: 0;
  background: none;
  pointer-events: none; /* Crucial fix: elements click block prevent handle */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  z-index: 2;
}

/* Chrome, Safari and Edge thumb slider handle tracking adjustments */
.range-slider-container input[type="range"]::-webkit-slider-thumb {
  height: 18px !important;
  width: 18px !important;
  border-radius: 50% !important;
  background: #ff4500 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  pointer-events: auto !important; /* CRITICAL: Enables direct precision clicks click capturing */
  appearance: none;
  -webkit-appearance: none;
  margin-top: -6px !important;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.range-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.range-slider-container input[type="range"]::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border: 2px solid #ffffff !important;
  border-radius: 50%;
  background: #ff4500 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  pointer-events: auto;
}

.price-input-fields {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.price-field {
  display: flex;
  align-items: center;
  background: #f7f8fa;
  border: 1px solid #eef0f2;
  border-radius: 6px;
  padding: 6px 10px;
  width: 50%;
  box-sizing: border-box;
}

.price-field span {
  font-size: 11px;
  color: #888888;
  margin-right: 6px;
  white-space: nowrap;
}

.filter-price-input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

.filter-price-input::-webkit-outer-spin-button,
.filter-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-price-input[type="number"] {
  -moz-appearance: textfield;
}

/* ==========================================================================
   MYNTRA/CANVA STYLE TWO-WAY RANGE SLIDER INNER ENGINE STYLING
   ========================================================================== */
.dynamic-price-range-canva-block {
  width: 100%;
  box-sizing: border-box;
}

.filter-price-range-wrapper {
  padding: 10px 5px 0 5px;
}

/* --- THE DUAL RANGE CONTROLLER FIELD --- */
.range-slider-container {
  position: relative;
  width: 100%;
  height: 5px;
  background: #f1f3f6; /* Base background track layer */
  border-radius: 5px;
  margin-bottom: 25px;
}

/* Dynamic Live Orange Color Highlight Line */
.slider-track {
  position: absolute;
  height: 100%;
  background: #ff4500; /* Pure Brand Theme Color */
  border-radius: 5px;
  left: 0%;
  right: 0%;
  z-index: 1;
}

/* Absolute overlay layout configuration for handles */
.range-slider-container input[type="range"] {
  position: absolute;
  width: 100%;
  height: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  pointer-events: none; /* Mouse pointer directly filters only on circular thumbs */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  z-index: 2;
}

/* --- DRAGGABLE CIRCULAR THUMBS MECHANICS --- */
/* Webkit Browsers (Chrome, Safari, Opera, Edge) */
.range-slider-container input[type="range"]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ff4500;
  cursor: pointer;
  pointer-events: auto; /* Active pointer events back explicitly on handle nodes */
  -webkit-appearance: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.1s ease, background-color 0.1s ease;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #ff4500;
}

/* Firefox Engine Mapping Layout */
.range-slider-container input[type="range"]::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ff4500;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  border-none: transparent;
}

.range-slider-container input[type="range"]::-moz-range-thumb:hover {
  background: #ff4500;
}

/* --- COMPACT METRIC INPUT TEXT BOXES --- */
.price-input-fields {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.price-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.price-field span {
  font-size: 11px;
  font-weight: 600;
  color: #777777;
  text-transform: uppercase;
}

.filter-price-input {
  width: 100%;
  height: 36px;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  background: #ffffff !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* Remove up/down spinners arrows from numeric boxes */
.filter-price-input::-webkit-outer-spin-button,
.filter-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filter-price-input:focus {
  border-color: #ff4500 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.1);
}



/* All-Collection Page Css -all-collections.liquid  */
/* 1. Top grid aur bottom sidebar/products ke beech gap */
.all-collections-container {
  margin-bottom: 10px; /* Space niche se badha di */
  padding-bottom: 20px;
  /* border-bottom: 1px solid #eee; */
  margin-top: 20px;
}

/* 2. Sidebar aur Product grid ke beech gap */
.collection-layout-wrapper {
  display: flex;
  gap: 30px; /* Sidebar aur Grid ke beech ka gap */
  align-items: flex-start;
}


.filter-header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.mobile-filter-close-btn{
    display:none;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#f4f4f4;
    cursor:pointer;
    font-size:10px;
    font-weight:600;
    line-height:1;
}

.mobile-filter-close-btn:hover{
    background:#e8e8e8;
}

@media(max-width:768px){

    .mobile-filter-close-btn{
        display:flex;
        align-items:center;
        justify-content:center;
    }

}



/* Mobile */
@media screen and (max-width: 749px) {
  .subcollection-section {
    /* padding-top: 10px; */
    padding-bottom: 10px;
  }

  .subcollection-heading-wrap {
    margin-bottom: 16px;
  }

  .subcollection-heading {
    font-size: 18px;
  }

  .subcollection-heading-line {
    width: 28px;
    height: 3px;
    margin-top: 7px;
  }

  .subcollection-grid {
    justify-content: flex-start;
        gap: 5px;
        padding: 0px;
        display: flex;
        overflow-x: auto;
  }

  .subcollection-card {
    flex: 0 0 70px;
    min-width: 70px;
    gap: 7px;
    padding-top:10px;
  }

  .subcollection-image {
    width: 62px;
    height: 62px;
    padding: 3px;
  }

  .subcollection-title {
    font-size: 10px;
    line-height: 1.2;
  }

}

.view-all-card .subcollection-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-all-card .subcollection-image svg {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px;
  border-radius: 0 !important;
}

.collection-main-title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 8px 0;
  line-height: 1.2;
  text-align: center;
}

.collection-title-line {
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto 16px auto;
  background-color: #ff5500;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .view-all-card .subcollection-image svg {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 30px;
    border-radius: 0 !important;
  }
}


/* ==========================================================================
   DESKTOP DRAWER SLIDE-OUT STYLING (> 989px)
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* Hide standard inline sidebar structure */
  .collection-filters-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -380px !important; /* Kept off-screen by default */
    width: 340px !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    padding: 30px 25px !important;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
  }

  /* Slide in active state */
  .collection-filters-sidebar.drawer-open {
    left: 0 !important;
  }

  /* Show trigger button on desktop topbar */
  .mobile-filter-toggle-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    cursor: pointer;
    color: #111111;
  }

  /* Enable close button on desktop drawer top */
  .mobile-filter-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Overlay screen dimming */
  .filter-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 9998 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .filter-drawer-overlay.active {
    display: block !important;
    opacity: 1 !important;
  }
}

//** Filter & sort icon **/
@media screen and (max-width: 989px) {
  /* Reduce SVG icon size inside the Filter & Sort button on mobile */
  .mobile-filter-toggle-btn svg {
    width: 12px !important;  /* Change to 14px or 12px according to your needs */
    height: 12px !important;
  }
}

/** Loading css**/
/* Container alignment */
#InfiniteScrollLoader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  width: 100%;
}

/* Wrapper alignment */
.loader-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Loading text styling */
.loader-text {
  font-size: 14px;
  font-weight: 600;
  color: #555555;
  letter-spacing: 0.3px;
}

/* Round Circular Network/Internet Style Spinner */
.circular-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #f3f3f3; /* Light grey base circle */
  border-top: 3px solid #ff4500; /* Primary Accent Color */
  border-radius: 50%;
  animation: spinCircle 0.8s linear infinite;
  flex-shrink: 0;
}

/* Continuous smooth rotation keyframe */
@keyframes spinCircle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}