/** Shopify CDN: Minification failed

Line 751:6 Expected identifier but found "1260px"
Line 822:15 Unexpected "]"
Line 874:17 Unexpected "]"
Line 927:17 Unexpected "]"

**/
@font-face {
    font-family: biofolio;
    src: url(/cdn/shop/files/CamptonBook.ttf?v=1763362696);
  }
  
  *{
      font-family: biofolio !important; 
      font-weight: 300;
  }

  b, strong {
    font-weight: 700;
   } 
  
  .header {
      position: fixed;
      background: #FFFFFFCC;
  }
  
  /* .h-mobile{
      top: 100px
  } */
  
  img.h-8.header-icon {
      height: 20px;
      width: 20px;
  }
  
  .bag-icon {
      height: 20px !important;
      width: 20px;
  }
  
  .m-header-icon {
    height: 20px !important;
    width: 20px;
  }
  
  .cart-bag {
      background: white;
      padding: 5px 10px;
      gap: 7px;
      border-radius: 20px;
      
      border: 1px solid black;
  }
  
  .cart-trigger {
      /* background: white;
      border: 1px solid;
      border-radius: 20px;
      padding: 2px 6px; */
  }
  
  /* Mobile (up to 768px) */
  @media (max-width: 768px) {
    /* your mobile styles here */
    .h-mobile{
      display: block;
      z-index: 100;
    }
    .h-desktop{
      display: none;
      z-index: 100;
    }
   }
  
  /* Desktop (769px and above) */
  @media (min-width: 769px) {
    /* your desktop styles here */
    .h-mobile{
      display: none;
      z-index: 100;
    }
    .h-desktop{
      display: block;
      z-index: 100;
    }
  }
  

    .desktop-mega-menu {
      display: none;
      box-shadow: 0 8px 32px rgba(0,0,0,0.08);
      border-radius: 18px;
      margin-top: 14px;
      z-index: 300;
    }
    .mega-menu-link {
      font-size: 15px;
      color: #1a1a1a;
      background: #f7f6f5;
      border-radius: 10px;
      margin-bottom: 2px;
      padding: 12px 17px;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.18s, color 0.18s;
      min-width: 200px;
      align-items: center;
      display: flex;
    }
    .mega-menu-link:hover {
      background: #eee9df;
      color: #bfa26b;
    }
    .mega-menu-col img {
      max-width: 160px; border-radius: 12px;
    }
    .mega-menu-featured-btn {
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
    }

    .desktop-mega-trigger { position: relative;}
    .desktop-mega-menu {
      display: none;
    }
    .desktop-mega-menu.flex-row {
      display: flex !important;
      top: 24px;
      left: -253px;
    }
    .desktop-mega-menu.hidden {
      display: none !important;
    }
    .mega-menu-link {
      font-size: 16px;
      color: #222;
      background: #f7f6f5;
      border-radius: 12px;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.17s, color 0.17s;
      display: flex;
      align-items: center;
    }
    .mega-menu-link:hover {
      background: #ede6d8;
      color: #bfa26b;
    }

    .custom-review-stars {display: flex;}
    .star-filled { color: #febd10; }
    .star-half { color: #febd10; opacity:0.5; }
    .star-empty { color:#ddd; }

    .mm-card-row { 
      gap: 24px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
    }
    .mm-card { 
      border-radius: 16px;
      width: 260px;
      padding: 0px;
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 380px;
      margin-bottom: 0;
    }
    .mm-card-badge {
      font-size: 11px;
      font-weight: 700;
      background: #222;
      border-radius: 8px;
      padding: 3px 10px;
      color: #fff;
      top: 14px;
      left: 14px;
      position: absolute;
      z-index: 2;
    }
    .mm-card-imgbox {
      width: 258px !important;
      height: 238px;
      background: #f6f6f8;
      border-radius: 12px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .mm-card-img {
      height: unset;
      width: 258px;
      border-radius: 10px;
      object-fit: cover;
      box-shadow: 0 3px 14px rgba(0,0,0,.06);
    }
    .mm-card-title {
      font-size: 15px;
      font-weight: 600;
      color: #17181a;
      margin-bottom: 6px;
      line-height: 1.1;
    }
    .mm-card-rating {
      display: flex;
      gap: 2px;
      margin-bottom: 8px !important;
    }
    .mm-card-star {
      font-size: 14px;
      margin-right: 1px;
    }
    .mm-card-star.star-filled { color: #febd10; }
    .mm-card-star.star-half { color: #febd10; opacity:0.55; }
    .mm-card-star.star-empty { color:#ddd; }
    .mm-card-prices {
      margin-top: 9px;
      margin-bottom: 0;
    }
    .mm-card-oldprice {
      color: #a6a6a6;
      text-decoration: line-through;
      font-size: 12px;
      margin-right: 8px;
    }
    .mm-card-price {
      font-size: 15px;
      font-weight: 700;
      color: #222;
    }
    .mm-card-btn {
      margin-top: auto;
      background: #111;
      color: #fff;
      padding: 7px 0;
      border-radius: 26px;
      font-weight: 600;
      width: 100%;
      font-size: 16px;
      transition: background 0.18s;
      display: block;
      text-align: center;
      border: none;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }
    .mm-card-btn:hover {
      background: #333;
    }


  
  footer p,a{
      font-family: helvetica;   
  }
  
  footer h3{
      color: white;
  }
  
  #cartSidebar {
          z-index: 1090;
        }
  
  
  
        
  
  /* home top slider section       */
  
  /* .slider-col {
      max-width: 62rem !important;
      gap: 9px;
      display: flex;
      flex-direction: column;
  }
  
  .slider-col h1 {
    font-size: 4.8rem;
    line-height: 5rem;
  }
  
  .slider-col p {
    font-size: 2.2rem;
    line-height: 2.8rem;
    font-weight: 400;
    color: black;
  }
  
  .slider-col a {
      font-size: 2.2rem;
      line-height: 2.8rem;
      width: 25%;
      text-align: center;
  } */
  
  .hero-slider-container {
    width: 100%;
    min-height: 320px;
  }
  
  .hero-slider-swiper,
  .hero-slider-wrapper,
  .hero-slide {
    min-height: 320px;
    height: 460px;
    display: flex;
    align-items: center;
    width: 100%;
  } 
  
  
  
  .hero-slide {
    justify-content: center;
    padding: 32px 16px;
    background-size: cover;
    background-position: center;
    padding-top:50px;
  }
  
  .hero-slider-content {
    max-width: 480px;
    background: rgba(255,255,255,0.8);
    padding: 32px 20px;
    border-radius: 18px;
    backdrop-filter: blur(1px);
    margin-left: 0px !important;
  }
  
  .hero-slider-heading {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
    line-height: 1.15;
  }
  
  .hero-slider-desc {
    color: #000;
    margin-bottom: 22px;
    font-size: 16px;
  }
  
  .hero-slider-btn {
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 600;
    background: #111;
    color: #fff;
    transition: background 0.2s;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  .hero-slider-btn:hover {
    background: #333;
  }
  /* mobile styles */
    @media (max-width: 768px) {
    /* your mobile styles here */
    .hero-slider-container .swiper-button-next, .hero-slider-container .swiper-button-prev {
    color: #222;
    top: 48%;
    /* font-size: 18px; */
    width: 14px;
}
   }
  
  /* Tablet styles */
  @media (min-width: 640px) {
    .hero-slider-swiper,
    .hero-slider-wrapper,
    .hero-slide {
      height: 500px;
      min-height: 420px;
    }
    .hero-slider-content {
      max-width: 660px;
      padding: 42px 32px;
    }
    .hero-slider-heading {
      font-size: 2.3rem;
    }
    .hero-slider-desc {
      font-size: 1.18rem;
    }
  }
  
  /* Desktop styles */
  @media (min-width: 1024px) {
    .hero-slider-swiper,
    .hero-slider-wrapper,
    .hero-slide {
      height: 600px;
      min-height: 500px;
    }
    .hero-slider-content {
      margin-left: 60px;
      background: rgba(255,255,255,0.84);
      padding: 64px 48px;
      max-width: 700px;
    }
    .hero-slider-heading {
      font-size: 32px;
    }
    .hero-slider-desc {
      font-size: 20px;
    }
  }
  
  /* Swiper arrows position refinement */
  .hero-slider-container .swiper-button-next,
  .hero-slider-container .swiper-button-prev {
    color: #222;
    top: 48%;
  }
  
  
  /* conscious picks section  */
  
  /* Base styles - applies to mobile by default */
  .con-pic-top {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .con-pic-top h2 {
    font-size: 28px;
    line-height: 30px;
    margin-bottom: 1rem;
  }
  
  .con-pic-top p {
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: black;
    margin-bottom: 2rem;
    max-width: 100%;
    text-align:center;
  }
  
  .con-pic-content {
    display: flex;
    margin-bottom:20px;
  }

  .gallery-card.flex.flex-col.bg-white.rounded-lg.w-full.relative {
    height: 610px;
  }

  .product-gallery-swiper.swiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
    height: 680px;
  }
  
  .con-pic-content span {
    font-size: 16px;
    padding: 4px 7px;
  }
  
  .con-pic-content h3 {
    font-size: 18px;
    font-weight: 600;
    min-height: 50px;
  }
  
  .con-pic-content h3 a {
    font-weight: 600;
  }
  .con-pic-content p {
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #A8A8A8;
    text-align: start
  }
  
  .con-pic-content img {
    width: 100%;
    height: 388px;
    border-radius: unset;
    object-fit: cover;
  }
  
  /* Medium devices (tablets) */
  @media (min-width: 640px) {
    .con-pic-top h2 {
      font-size: 2.8rem;
      line-height: 3.8rem;
    }
    .con-pic-top p {
      font-size: 1.5rem;
      line-height: 2rem;
    }
    .con-pic-content {
      flex-direction: row;
      justify-content: space-between;
    }
    .con-pic-content > div {
      width: 48%;
    }
    .con-pic-content .best-seller {
        font-size: 14px;
        padding: 8px 8px;
        border-radius: 18px;
    }
    .con-pic-content span {
      font-size: 16rem;
      padding: 6px 1px;
    }
    .con-pic-content h3 {
      font-size: 1.4rem;
    }
    .con-pic-content p {
      font-size: 1.1rem;
      line-height: 1.5rem;
    }
  }
  
  /* Large devices (desktops) */
  @media (min-width: 1024px) {
    .con-pic-top {
      max-width: 1260px;
    }
    .con-pic-top h2 {
      font-size: 4rem;
      line-height: 5.25rem;
    }
    .con-pic-top p {
      font-size: 20px;
      line-height: 2.8rem;
      font-weight: 400;
      color: black;
    }
    .con-pic-content > div {
      width: 23%;
    }
    .con-pic-content .best-seller {
        font-size: 14px;
        padding: 8px 8px;
        border-radius: 18px;
    }
    .con-pic-content span {
        font-size: 19px;
        padding: 6px 1px;
        border-radius: 18px;
    }
    .con-pic-content h3 a{
      font-size: 1.8rem;
      font-weight: 600;
    }
    .con-pic-content p {
        font-size: 15px;
        font-weight: 400;
        color: rgb(121, 121, 121);
        margin-bottom: 10px;
        line-height: 20px;
    }
  }
  
  
  /* shop by category  */
  
  .shop-by-cat-top {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .shop-by-cat-top h2 {
    font-size: 28px;
    line-height: 30px;
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: center;
    color: #000;
  }
  
  .shop-by-cat-top p {
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    color: #000;
    margin-bottom: 2.5rem;
    text-align: center;
  }
  
  .shop-by-cat-cont {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  
  .shop-by-cat-cont > div {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.05);
    height: 220px;
  }
  
  .shop-by-cat-cont img {
    width: 100%;
    height: 550px;
    object-fit: cover;
  }
  
  .shop-by-cat-cont .absolute {
    padding: 1rem;
    background: linear-gradient(10deg, rgb(0 0 0) 0%, rgb(123 123 123 / 30%) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    border-radius: 0.5rem;
    padding-bottom:30px;
  }
  
  .shop-by-cat-cont h3 {
    font-size: 22px;
    line-height: 26px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
  }
  
  .shop-by-cat-cont p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #D1D5DB;
    margin-bottom: 1rem;
  }
  
  .shop-by-cat-cont a {
    font-size: 16px;
    padding: 0.5rem 1rem;
    background-color: unset;
    color: white;
    font-weight: 600;
    text-align: center;
    width: auto;
    transition: background-color 0.2s;
    line-height: 24px;
    border-bottom: 1px solid white;
  }
  
  
  /* Tablets and up */
  @media (min-width: 640px) {
    .shop-by-cat-cont {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
    }
    .shop-by-cat-cont > div {
      flex: 1 1 45%;
      height: 280px;
    }
  }
  
  /* Large screens */
  @media (min-width: 1024px) {
    .shop-by-cat-top {
      max-width: fit-content;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    .shop-by-cat-cont > div {
      flex: 1 1 23%;
      height: 520px;
    }
    .shop-by-cat-top h2 {
      font-size: 4rem;
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }
    .shop-by-cat-top p {
      font-size: 20px;
      line-height: 1.2;
      margin-bottom: 3rem;
    }
    .shop-by-cat-cont h3 {
      font-size: 20px;
      line-height: 22px;
    }
    .shop-by-cat-cont p {
        font-size: 15px;
        line-height: 18px;
        color: white;
        margin: 11px 0px -4px 0px;
        width: 211px;
    }
    .shop-by-cat-cont a {
      font-size: 16px;
      padding: 0.75rem 1.25rem;
      margin-bottom: 25px;
    }
  }
  
  /* haircare range  */
  
  .hair-top-cta h2 {
    font-size: 3.875rem;
    line-height: 5.25rem;
  }
  
  .hair-top-cta p{
      font-size: 1.8rem;
    line-height: 2.8rem;
    font-weight: 400;
    color: black;
  }
  
  .hair-top-cta a {
      font-size: 1.8rem;
      line-height: 2.8rem;
      width: 25%;
      text-align: center;
  }
  
  .hair-cont a{
    font-size: 1.8rem;
    line-height: 2.8rem;
    width: auto;
    text-align: center;
  }
  
  
  
  /* Container padding for mobile */
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Center wrapper max width */
  .w-[1260px] {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* === Top CTA === */
  .hair-top-cta h2 {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .hair-top-cta p {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    color: #000;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .hair-top-cta a {
    font-size: 18px;
    line-height: 1;
    width: auto;
    text-align: center;
    padding: 12px 30px;
    border-radius: 9999px;
  }
  
  /* Button container (flex column mobile) */
  .hair-top-cta > div {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
  
  /* === Bottom Content === */
  .hair-cont h3 {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
  }
  
  .hair-cont p {
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
    color: #000;
    margin-bottom: 20px;
        text-align: justify;
  }
  
  /* Bottom button styling */
  .hair-cont a {
    font-size: 18px;
    line-height: 1.2;
    padding: 12px 30px;
    border-radius: 9999px;
    width: auto;
    text-align: center;
  }
  
  /* Bottom image container */
  .md\:w-\[60\%] {
    width: 100%;
    max-width: 100%;
    border-radius: 0.5rem;
  }
  
  /* Image responsive */
  .hair-cont + div img {
    width: 100%;
    border-radius: 0.5rem;
  }
  
  /* === Responsive Breakpoints ==== */
  
  /* Tablets: adjust paddings and layout */
  @media (max-width: 640px) {
    section {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
 
  
    .hair-top-cta h2 {
      font-size: 3rem;
      line-height: 3.5rem;
    }
    .hair-top-cta p {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
    .hair-top-cta > div {
        flex-direction: column;
        gap: 1.5rem;
    }
    .hair-top-cta a {
      white-space: nowrap; 
      padding-left: 2rem;
      padding-right: 2rem;
    }
  
    /* Bottom layout - stack on mobile, row on tablet */
    .flex-col.md\:flex-row {
      flex-direction: column;
      gap: 2rem;
    }
  
    .hair-cont {
      width: 40%;
      padding-right: 0px !important;
      padding-left: 0px !important;
    }
  
    .md\:w-\[60\%] {
      width: 60%;
    }
  }
  
  /* Desktop large screens */
  @media (max-width: 1024px) {
    section {
      padding-left: 5rem;
      padding-right: 5rem;
    }
    .hair-range-wrapper{
      padding-right: 11px !important;
      padding-left: 11px !important;
    }
    .hair-top-cta{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .hair-top-cta h2 {
      font-size: 28px;
      line-height: 1.3;
    }
    .hair-top-cta p {
      font-size: 20px;
      line-height: 2.8rem;
      color: black;
      /* width: 70%; */
    }
    .hair-top-cta a {
      font-size: 1.8rem;
      line-height: 2.8rem;
    }
  
    .hair-cont h3 {
      font-size: 26px;
    }
    .hair-cont p {
      font-size: 18px;
      line-height: 24px;
      color: black;
    }
    .hair-cont a {
      font-size: 18px;
      line-height: 24px; 
    }
    .hair-cont {
        width: 40%;
        padding-right: 80px;
        padding-left: 30px;
    }
    .md\:w-\[60\%] {
      width: 60%;
    }
  
    .hair-cont + div img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }
  }
  
  /* htospot section  */
  
  .leading-snug
   {
      line-height: 1.375;
      font-size: 20px;
  }
   @media (max-width: 1024px) {
    .hotspot-wrapper{
        width: 100% !important;
    }
  }
   @media (max-width: 768px) {
    .hotspot-wrapper{
        width: 100% !important;
    }
  }
  
  /* Dermatoloists Section  */
  
  /* Container max width and padding */
  .dermo-top {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .dermo-top h2 {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .dermo-top p {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 400;
    color: #000;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .dermo-cont {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .dermo-cont > div {
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  
  .dermo-cont img {
    border-radius: 0.5rem;
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin-bottom: 0.75rem;
  }
  
  .dermo-cont h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5rem;
    color: #111827;
    text-align: center;
    margin: 10px 0px;
  }
  
  .dermo-cont p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color:rgb(0, 0, 0);
    text-align: center;
  }
  
  /* Tablet up */
  @media (min-width: 640px) {
    .dermo-top h2 {
      font-size: 3rem;
      line-height: 3.5rem;
    }
    .dermo-top p {
      font-size: 1.25rem;
      line-height: 1.4;
    }
    .dermo-cont {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.75rem;
    }
    .dermo-cont > div {
      width: 48%;
      height: auto;
    }
    .dermo-cont img {
      height: 280px;
    }
  
    /* Cart Sidebar */
    #cartSidebar {
      width: 347px;
    }
  }
  
  /* Desktop up */
  @media (min-width: 1024px) {
    .dermo-top {
      max-width: 100% !important;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    .dermo-top h2 {
      font-size: 4rem;
      line-height: 1.2;
    }
    .dermo-top p {
      font-size: 20px;
      line-height: 1.4;
    }
    .dermo-cont{
      width: 1260px;
    }
    .dermo-cont > div {
      width: 23%;
    }
    .dermo-cont img {
      height: 300px;
    }
    .dermo-cont h3 {
      font-size: 24px;
      margin: 10px 0px;
    }
    .dermo-cont p {
      font-size: 16px;
      color: black;
      line-height: 24px;
    }
    /* Cart Sidebar */
    #cartSidebar {
      width: 347px;
    }
  }

  /* review and rating glbal style  */
.custom-review-stars {
  display: flex;
  align-items: center;
  gap: 0px;
  font-size: 20px;
}
.custom-review-stars  .reviews-text{
  font-size:15px;
}
.star {
  margin-right: 2px;
}
.star-filled { color: #ffb800; }
.star-empty { color: #e0e0e0; }
.star-half { color: #ffb800; opacity: 0.5; }

  /* Cart Sidebar */
  
  #cartSidebar {
    width: 90vw;
    max-width: 347px;
  }
  
  #cartSidebar h2 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
  
  #cartItems {
    display: block;
  }
  
  #cartFooter p {
      font-size: 15px;
      line-height: 18px;
      margin-bottom: 0.5rem;
  }
  
  #cartFooter strong, #cartFooter span {
      font-size: 19px;
      line-height: 2.1rem;
      color: #111827;
  }
  
  /* product card and archive  */

  .prod-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }


  
  select:focus {
    outline: none;
    box-shadow: none;
  }
  
  #shopify-section-template--24905807692092__banner{
    display: none;
  }
  
  .breadcrumb{
    margin-top: 20px;
    }
  .breadcrumb ol li {
    font-size: 16px;
    font-weight: 500;
    color: black;
  }
  
    section.collection-products {
    padding: 20px 0px;
  }

  .product-card-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }


    .product-card-box {
      background: white;
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    @media (min-width: 640px) {
      /* .product-card-box {
        width: 48%;
      } */
      
    }
    @media (max-width: 768px) {
         .breadcrumb{
          padding-left: 2rem !important;
          margin-top: 57px; 
          width: 100% !important;
      }
      .prod-filter {
          width: 100% !important;
          padding: 20px !important;
      }
      section.collection-products {
         padding: 20px 20px !important;
         width: 100% !important;
      }
      .product-card-image-box a {
         width: 100%;
      }
      .product-card-image-box a img{
         width: 100% !important;
         height: 350px !important;
      }
      .shop-by-cat-cont img {
        height: 400px;
      }
      .gtm-b-750{
          height:450px !important;
      }
    }
    @media (max-width: 640px) {
      .breadcrumb{
          padding-left: 2rem !important;
          margin-top: 57px; 
          width: 100%;
      }
      .prod-filter {
          padding-left: 0rem;
      }
      section.collection-banner {
       min-height: 165px !important;
       justify-content: start !important;
       padding-left: 20px;
      }
      .product-card-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
      }
        .product-card-box {
        background: white;
        overflow: hidden;
        position: relative;
        
      }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
      .breadcrumb{
        width: 100% !important; 
        padding-left: 5rem !important; 
      }
            .prod-filter {
          width: 100% !important;
          padding: 20px !important;
      }
      /* .product-card-box {
        width: 23%;
      } */
      section.collection-products {
         padding: 20px 20px !important;
         width: 100% !important;
      }
    }
    .product-card-badge {
      font-size: 14px;
      padding: 4px 6px;
    }
    .product-card-img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    .product-card-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .product-card-title a{
      font-weight: 700;
    }
    h3.product-card-title.leading-snug {
      min-height: 49px;
    } 
    .product-card-vendor {
      font-size: 16px;
      line-height: 1.2;
      font-weight: 400;
      color: #A8A8A8;
      text-align: start;
      margin-bottom: 12px;
    }
    .product-card-meta span {
      font-size: 16px;
      padding: unset;
      margin-bottom: 0;
    }
    .product-card-cta {
      font-size: 20px;
      line-height: 25px;
      width: 100%;
      text-align: center;
    }


    /* dermatologist page  */

/* dermatologist hero section  */  

.dermatologist-hero-section {
  min-height: 260px;
}
@media (min-width: 640px) {
  .dermatologist-hero-section { min-height: 300px; }
}
@media (min-width: 1024px) {
  .dermatologist-hero-section { min-height: 550px; }
}
.max-w-1260px {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}


/* gtm  */

.text-lg-gtm{
  font-size:20px;
}

.swiper-pagination.dermo-dots.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: -5px;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0px;
}