/** Shopify CDN: Minification failed

Line 353:114 Expected ")" to end URL token
Line 496:2 Unexpected "{"
Line 496:3 Expected identifier but found "%"
Line 496:47 Unexpected "{"
Line 496:48 Expected identifier but found "%"

**/
  /* ===================================================
   INDEPENDENCE DAY THEME (ONLY CSS)
   =================================================== */

/* 1. TOP ANNOUNCEMENT BAR (Saffron / Tiranga Gradient) */
#shopify-section-top-bar,
.dt-sc-header-top-bar {
  background: linear-gradient(90deg, #FF9933 0%, #FFFFFF 50%, #138808 100%) !important;
  border-bottom: 2px solid #000080 !important; /* Ashoka Chakra Navy Blue accent */
  color: #000000 !important;
}

/* Marquee Text Styling (Bold & Clear) */
.tracknew span {
  color: #000000 !important;
  font-weight: 700 !important;
  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8) !important;
  margin: 0 15px !important;
}

/* 2. MAIN HEADER (Tiranga Top/Bottom Borders) */
#shopify-section-headers,
header#header {
  background-color: #ffffff !important;
  position: relative !important;
  /* Top me Saffron aur Bottom me Green border */
  border-top: 4px solid #FF9933 !important; 
  border-bottom: 4px solid #138808 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* 3. NAVIGATION MENU LINKS */
header#header .list-menu__item,
header#header a {
  color: #0b3d1f !important; /* Deep Green Text */
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

/* Active / Hover Links (Saffron Highlight with Blue underline) */
header#header .list-menu__item:hover,
header#header a:hover {
  color: #FF9933 !important;
  border-bottom: 2px solid #000080 !important;
}

/* 4. SEARCH BAR (Independence Day Style) */
header#header input[type="search"],
header#header .search__input {
  border: 2px solid #FF9933 !important;
  border-radius: 25px !important;
  background-color: #fcfdfc !important;
}

header#header input[type="search"]:focus {
  border-color: #138808 !important;
  outline: none !important;
  box-shadow: 0 0 8px rgba(19, 136, 8, 0.3) !important;
}

/* Search Icon Button */
header#header .search__button,
header#header button[type="submit"] {
  background-color: #138808 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}

/* 5. CART & USER ICONS */
header#header .header__icon,
header#header svg {
  fill: #138808 !important;
  color: #138808 !important;
}

/* Cart Badge Count (Saffron Bubble) */
header#header .cart-count-bubble {
  background-color: #FF9933 !important;
  color: #ffffff !important;
  font-weight: bold !important;
}
/* ===================================================
   INDEPENDENCE DAY PRODUCT CARDS STYLING
   =================================================== */

/* 1. Product Cards Base Container */
.card-wrapper, 
.card--standard {
  background: #ffffff !important;
  /* border-radius: 18px !important; */
  /* border: 1px solid rgba(255, 153, 51, 0.2) !important; */
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04) !important; */
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  /* overflow: hidden !important; */
  position: relative !important;
} 
.card-wrapper {
  /* background: #ffffff !important; */
  border-radius: 18px !important;
  border-bottom: 1px solid rgba(255, 153, 51, 0.2) !important;
  border-left: 1px solid rgba(255, 153, 51, 0.2) !important;
  border-right: 1px solid rgba(255, 153, 51, 0.2) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04) !important;
  /* transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important; */
  /* overflow: hidden !important; */
  /* position: relative !important; */
  overflow: hidden;
}

/* Card Top Festive Accent Bar (Hover karne par active hoga) */
.card-wrapper::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #FF9933 0%, #FFFFFF 50%, #138808 100%) !important;
  opacity: 0.8 !important;
  z-index: 5 !important;
}

/* Hover Effect: Card Smooth Lift + Tricolor Subtle Glow */
.card-wrapper:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 14px 30px rgba(19, 136, 8, 0.15), 0 0 15px rgba(255, 153, 51, 0.12) !important;
  border-color: #FF9933 !important;
}

/* 2. Badges (NEW ARRIVAL & BEST SELLER - Saffron/Green Gradients) */
.badge, 
.card__badge span,
.card_information .new-tag {
  background: linear-gradient(135deg, #138808 0%, #0d5e05 100%) !important; /* Green Gradient */
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 8px rgba(19, 136, 8, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* Specific Badge Color Accent for Offers/Saffron */
.badge--bottom-left, 
.badge.badge--onsale {
  background: linear-gradient(135deg, #FF9933 0%, #e67e00 100%) !important; /* Saffron Gradient */
  box-shadow: 0 3px 8px rgba(255, 153, 51, 0.3) !important;
}

/* 3. Product Title Styling */
.card__heading,
.card__heading a {
  color: #0d381e !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

.card-wrapper:hover .card__heading a {
  color: #FF9933 !important; /* Saffron text on hover */
}

/* 4. Pricing & Discount Styling */
.price .price-item--regular {
  color: #0b3d1f !important; /* Deep Green Price */
  font-weight: 800 !important;
  font-size: 17px !important;
}

.price .price-item--sale {
  color: #138808 !important;
  font-weight: 900 !important;
  font-size: 18px !important;
}

/* Strike-through Old Price */
.price s.price-item--regular {
  color: #a3a3a3 !important;
  font-size: 13px !important;
  margin-left: 4px !important;
}

/* 5. Rating Stars (Saffron/Gold Glow) */
.rating-star, 
.spr-badge-starrating .spr-icon {
  color: #FF9933 !important;
  text-shadow: 0 0 2px rgba(255, 153, 51, 0.5) !important;
}

/* Swiper Navigation Buttons - Festive Custom Circle Design */
.swiper-button-prev,
.swiper-button-next {
  width: 44px !important;
  height: 44px !important;
  /* background: #ffffff !important; */
  /* border-radius: 50% !important; */
  /* border: 2px solid #FF9933 !important; Saffron Border */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; */
  /* transition: all 0.3s ease !important; */
  /* z-index: 10 !important; */
}

/* Arrow Icon Color & Size */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #138808 !important; /* Deep Green Arrow */
}

/* Hover State: Saffron & Green Lift */
/* .swiper-button-prev:hover,
.swiper-button-next:hover {
  background: #138808 !important;
  border-color: #138808 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 18px rgba(19, 136, 8, 0.35) !important;
} */

/* .swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
  color: #ffffff !important; 
} */

/* Arrow Positioning Adjustment */
.swiper-button-prev {
  left: -15px !important;
}

.swiper-button-next {
  right: -15px !important;
}

#shopify-section-template--27943652720933__featured_collection_bgCKdH .title-wrapper-with-link {
    padding: 5rem 0 2rem;
}
.SwipeUp-reels-feed {
    min-width: fit-content!important;
}
@media only screen and (max-width: 600px) {
  #shopify-section-template--27943652720933__featured_collection_bgCKdH .title-wrapper-with-link {
    padding: 1rem 0 0rem;
  }
  #shopify-section-template--27943652720933__17640576302cd2793d .page-width {
    padding-bottom: 0;
  }
  .section-template--27943652720933__2b86bdc1-0e4a-4e99-b29a-a7a0db77aa4f-padding {
    padding-top: 0;
    padding-bottom: 24px;
    /* margin-top: -30px; */
}
}
/* ===================================================
   H2 TITLE TIRANGA GRADIENT TEXT STYLING
   =================================================== */

h2.title.h2,
.h2.title {
  /* Tiranga Text Gradient (Saffron -> Navy Blue -> Green) */
  background: linear-gradient(
    90deg, 
    #FF9933 0%,    /* Saffron */
    #FF9933 38%, 
    #000080 48%,   /* Ashoka Chakra Blue Accent */
    #000080 52%,
    #138808 62%,   /* India Green */
    #138808 100%
  ) !important;
  
  /* Text Clip Magic */
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  
  /* Text Visibility & Look Enhancements */
  font-weight: 900 !important;
  display: inline-block !important;
  letter-spacing: 0.5px !important;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.12)) !important;
}
/* ===================================================
   CLEAN & PREMIUM INDEPENDENCE DAY FOOTER (NO CARDS)
   =================================================== */

/* 1. Main Footer Surface - Smooth Gradient & No Box Clutter */
footer#Banner-footer_style3,
.footer-style3 {
  background: linear-gradient(
    180deg, 
    #FFF8F0 0%,    /* Soft Saffron Cream Top */
    #FFFFFF 50%,   /* Pure White Center */
    #F0F8F1 100%   /* Soft Green Mint Bottom */
  ) !important;
  border-top: 4px solid #FF9933 !important; /* Premium Saffron Top Border */
  position: relative !important;
  padding-top: 50px !important;
  padding-bottom: 40px !important;
}

/* Remove All Inner Card Boxes & Inner Borders */
/* footer#Banner-footer_style3 .footer-block, */
/* footer#Banner-footer_style3 .footer-block__details-content, */
footer#Banner-footer_style3 [class*="card"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px !important;
}

/* 2. Headings - Deep Green Text with Saffron Accent */
footer#Banner-footer_style3 .footer-block__heading,
footer#Banner-footer_style3 h2,
footer#Banner-footer_style3 h3 {
  color: #0d381e !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 15px !important;
  border-bottom: 2px solid #FF9933 !important;
  display: inline-block !important;
  padding-bottom: 4px !important;
}

footer#Banner-footer_style3, .footer-style3 {
background: linear-gradient(180deg, #6db433 0%, /* Soft Saffron Cream Top */ #FFFFFF 50%, /* Pure White Center */ #F0F8F1 100% /* Soft Green Mint Bottom */) !important;
    border-top: 4px solid #d68433 !important;
    position: relative !important;
    padding-top: 50px !important;
    padding-bottom: 40px !important;
}
#Banner-footer_style3:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-mask-image: url(//kidbasics.in/cdn/shop/files/Vector_footer.webp?v=1746609267&width=2500), url(Liquid error (sections/footer_style3 line 43): invalid url input);
    -webkit-mask-size: cover;
    -webkit-mask-position: top center, top center;
    -webkit-mask-repeat: no-repeat, no-repeat;
    background-color: #f4b062;
    pointer-events: none;
}
li.address p {
    color: #fff;
}
.footer__content-top.page-width p, a {
    color: #fff;
}
footer#Banner-footer_style3 .footer-block__heading, footer#Banner-footer_style3 h2, footer#Banner-footer_style3 h3 {
      font-size: 22px !important;
    color: #fff !important;}
    .footer-block.grid__item.footer_address.left .contact-phone, .footer-block.grid__item.footer_address.left .office-hours, .footer-block.grid__item.footer_address.left li.office-mail {
    color: #fff;
}
.footer-style3 .footer-block__details-content .list-menu__item--link {
    color: #fff;
}
/* ===================================================
   INDEPENDENCE DAY TESTIMONIAL SECTION STYLING
   =================================================== */

/* 1. Main Card Box (Clean White with Soft Tiranga Glow) */
.testimonial-container-card-info {
  background: #ffffff !important;
  border-radius: 20px !important;
  border-top: 4px solid #FF9933 !important;   /* Top Saffron Border */
  border-bottom: 4px solid #138808 !important;/* Bottom Green Border */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 0 15px rgba(255, 153, 51, 0.08) !important;
  padding: 35px 40px !important;
  position: relative !important;
  clip-path: none !important; /* Disables awkward shape to make it clean */
}

/* Quote Icon Overlay (Subtle Watermark Background) */
.testimonial-container-card-info::before {
  content: '“' !important;
  position: absolute !important;
  top: -10px !important;
  left: 20px !important;
  font-size: 120px !important;
  color: rgba(255, 153, 51, 0.12) !important;
  font-family: Georgia, serif !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* 2. Rating Stars Styling (Golden / Saffron Glow) */
.testimonial-container-card-info .spr-icon,
.testimonial-container-card-info svg,
.testimonial-container-card-info span[style*="color"] {
  color: #FF9933 !important;
  fill: #FF9933 !important;
  filter: drop-shadow(0 2px 4px rgba(255, 153, 51, 0.4)) !important;
}

/* 3. Review Text Styling */
.testimonial-container-card-info p,
.testimonial-content p {
  color: #2c3e50 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
}

/* Author Name & Subtext */
.testimonial-container-card-info h4,
.testimonial-container-card-info strong,
.testimonial-container-card-info .author-name {
  color: #0b3d1f !important; /* Deep India Green */
  font-weight: 800 !important;
  font-size: 18px !important;
}

/* 4. Swiper Dots Pagination (Tiranga Active States) */
.swiper-pagination-bullet {
  background: #a3a3a3 !important;
  opacity: 0.5 !important;
  width: 10px !important;
  height: 10px !important;
  transition: all 0.3s ease !important;
}

/* Active Dot turns Saffron with Green Ring */
.swiper-pagination-bullet-active {
  background: #FF9933 !important;
  opacity: 1 !important;
  width: 24px !important; /* Stretched Pill effect */
  border-radius: 12px !important;
  box-shadow: 0 0 8px rgba(255, 153, 51, 0.6) !important;
}
/* ===================================================
   SLEEK SWIPER PAGINATION DOTS (TESTIMONIAL)
   =================================================== */

/* Container Spacing & Alignment */
.swiper-pagination {
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

small.copyright__content p {
    color: #ffff !important;
}
/* Inactive Dots (Soft Neutral Gray with Saffron/Green Hover) */
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: #d1d5db !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  border: none !important;
  outline: none !important;
  margin: 0 !important; /* Gap handle ho raha hai flex box se */
}

.swiper-pagination-bullet:hover {
  background: #138808 !important; /* Hovering turns dot to India Green */
  transform: scale(1.2) !important;
}

/* Active Dot (Saffron Capsule Pill Style) */
.swiper-pagination-bullet-active {
  width: 28px !important; /* Stretched modern capsule shape */
  height: 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, #FF9933 0%, #e67e00 100%) !important; /* Saffron Gradient */
  box-shadow: 0 3px 8px rgba(255, 153, 51, 0.4) !important;
}
/* ===================================================
   MORE VISIBLE TIRANGA OVERLAY FOR .gradient CLASS
   =================================================== */

.gradient {
  {% comment %} position: relative !important; {% endcomment %}
  /* Rich & Visible Independence Day Tricolor Layer */
  background-image: linear-gradient(
    180deg,
    rgba(255, 153, 51, 0.22) 0%,   /* Visible Saffron Top */
    rgba(255, 255, 255, 0.85) 50%,  /* Clean Soft White Center */
    rgba(19, 136, 8, 0.22) 100%    /* Visible Green Bottom */
  ) !important;
}
.slideshow__text.banner__box {
    display: none;
}

h2.title.h2, .h2.title {
    display: block !important;
    font-size:31px !important;
}
.page-width.section-template--27943652720933__custom_liquid_wgEFnb-padding.isolate p {
    font-size: 20px;
}
.multicolumn.background-primary .multicolumn-card {
    background: rgb(var(--color-background)) linear-gradient(rgba(var(--color-foreground), .04), rgba(var(--color-foreground), .04));
    background-image: linear-gradient(180deg, rgba(255, 153, 51, 0.25) 0%, /* Saffron Top */ rgba(255, 255, 255, 0.9) 50%, /* Soft White Center */ rgba(19, 136, 8, 0.25) 100% /* India Green Bottom */) !important;
    background-color: transparent !important;
}
/* ===================================================
   BANNER SLIDER MODERN FLOATING ARROWS
   =================================================== */

/* 1. Arrow Container Button Styling */
/* .swiper-button-prev,
.swiper-button-next {
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.85) !important; 
  backdrop-filter: blur(8px) !important;           
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 153, 51, 0.4) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
} */

/* 2. Arrow Icon SVG / Text Fix */
.swiper-button-prev img,
.swiper-button-next img,
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
}

/* Swiper Default Font Icon Support (if image is not used) */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #138808 !important; /* India Green Color */
}

/* 3. Hover Effect: Smooth Scale & Saffron Glow */
/* .swiper-button-prev:hover,
.swiper-button-next:hover {
  background: #FF9933 !important; 
  border-color: #FF9933 !important;
  transform: scale(1.12) !important;
  box-shadow: 0 8px 22px rgba(255, 153, 51, 0.4) !important;
} */

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
  color: #ffffff !important; /* Turns Arrow White on Hover */
}

/* .swiper-button-prev:hover img,
.swiper-button-next:hover img {
  filter: brightness(0) invert(1) !important;
} */

/* 4. Position Adjustments inside Banner */
.swiper-button-prev {
  left: 20px !important;
}

.swiper-button-next {
  right: 20px !important;
}
.footer__copyright small.copyright__content > p {
  color: #fff;
  font-size: 19px;
}
footer#Banner-footer_style3, .footer-style3 {
  padding-top: 115px !important;
}
/* .footer-block__details-content.footer-block-address.left {
  padding: 0!important;
} */

.collection .card__media .media, .product-recommendations .card__media .media {
  border-radius:0;
}