/*
 * Zebrs Theme
 * Author: Shopaccino
 * Link: https://www.shopaccino.com/
*/
/* ===============================================
    ============================================== */
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
    body 
    {
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #1c1c1c;
    }
    body {}
    
    @media only screen and (min-width: 1140px) {
      .container-fluid {
        padding-right: 1.3rem;
        padding-left: 1.3rem;
      }
    }
    h1, .h1 {
      font-size: 1.55rem;
      font-weight: 800;
    }
    h2, .h2 {
      font-size: 1.15rem;
      font-weight: 800;
    }
    h3, h4, .h3, .h4 {
      font-size: 1.04rem;
      font-weight: 800;
    }
    h5, .h5 {font-size: 1rem;}
    @media only screen and (max-width: 767px) {
        h1, .h1 {font-size: 1.32rem;}
        h2, .h2 {font-size: 1.22rem;}
    }

/*  ===============================================
    Global
    =============================================== */
    :root{
        --brand:#d00200;          /* Zebrs red */
        --brand-dark:#9c0100;
        --brand-soft:#fdeaea;
        --emi:#0a8f4c;            /* EMI green */
        --emi-soft:#e6f7ee;
        --ink:#171a21;
        --ink-2:#4c5261;
        --ink-3:#757a88;
        --line:#dbdce1;
        --bg:#f5f6fa;
        --card:#ffffff;
        --amber:#ff8a00;
        --danger:#e5484d;
        --radius:12px;
        --shadow:0 2px 12px rgba(23,26,33,.06);
        font-size:16px;
      }
    body {background: var(--bg);color: var(--ink);}
    .breadcrumb-bg {background-color: #fff;border-bottom: 1px solid var(--line)}
    .breadcrumb {
        font-size: .75rem;
        color: #8a90a0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
    .breadcrumb a { padding-top: 4px; padding-bottom: 4px;}
    .text-primary {color: var(--brand) !important;}
    .form-control:focus {border-color:var(--brand);}
    .nav-toggle::before {height: 2px;}
    
    .item-details-hold .container-fluid,
    #header-option2 .container
    {max-width: 1200px; margin-left: auto; margin-right: auto;}
    
    .new-tag, .out-of-stock, .off-price, .soldcss {
        font-size: .66rem;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 5px;
        background: var(--emi-soft) !important;
        color: var(--emi) !important;
    }
    .pagination-hold .pagination .page-item {
        background-color: #f9f9f9;
        border-radius: 6px;
        border: transparent 1px #dddddd;
        margin: 2px;
    }
    .pagination-hold .pagination .page-item:hover {border: solid 1px var(--emi); background-color: var(--emi-soft);}
    .pagination-hold .pagination .page-item.active {border:solid 1px var(--emi) !important; color:var(--emi);font-weight: 600;}
    .pagination-hold ul {margin-bottom: 6px !important;margin-top: 6px !important;}
    .totalresult-paging {margin-top:0 !important;color: #aaa;margin-bottom:0 !important;}

    .text-muted {}
    .btn-group-lg > .btn, .btn-lg { font-size: 1rem;}
    
/*  ===============================================
    Header
    =============================================== */
    header { background-color: #fff;}
    #header-option2 .searchbar button {background: none !important; color:#000000 !important;}
    #header-option2 .toppanel-hold svg {width: 22px; height: 22px;}
    .toppanel-hold .shoppingcart .cart-icon span {min-width: 15px;padding: 2px}
    #header-option2 .mobile-header .searchbar .search-input { padding-left:1em;}
    #header-option2 .mobile-header .searchbar .search-input, .mobile-header .searchbar button {background-color:#f3f4f7; min-height:40px; border-radius:25px !important;}
    .mobile-logo{margin:0 auto;display:flex;align-items:center;gap:14px;}
    .mobile-header {padding: 8px 0;}
    @media only screen and (max-width: 767px) {
        #header-option2 #searchbar {border:none;box-shadow: 0px 2px 2px rgba(0,0,0,0.03);}
        #header-option2 .search-input{background:none;min-height: 36px;}
        #header-option2 .srch-mobile-dropdown { background-color: #fff; border-radius: 25px;}
        #header-option2 .form-search {position:relative; top:0;}
        .search-container {max-height: none;}
        #header-option2 .searchbar { padding: 0;}
    }
    
    
    
    
    .zbrs-search{flex:1;display:flex;align-items:center;gap:8px; min-width:0}
    .zbrs-search .search-input {}
    #user_profile svg { border:none; padding: 0;}
    .toppanel-hold svg {stroke-width: 2;}
    #header-option2 .searchbar, #header-option8 .searchbar {max-width:100%;}
    .select-hold select, #btn_change_store_address {
        border-radius: 6px !important;
        border: 1.5px solid var(--line);
        border-radius: 10px;
        font-size: .8rem;
        font-weight: 600;
        color: var(--ink-2);
        font-family: inherit;
        background: #fff;
    }
    
    /* Modern browsers (Chrome, Safari, Edge, Firefox) */
    .searchbar input::placeholder {
      color: #aaaaaa;
      font-size:14px;
    }
    .nav-menu > li > a {font-weight: 500;color: var(--ink-2); font-size: .80rem;}
    .nav-submenu {
        /*
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        min-width: 230px;
        box-shadow: 0 12px 28px rgba(0,0,0,.14);
        border-radius: 0 0 12px 12px;
        padding: 8px 0;
        max-height: 62vh;
        overflow: auto;
        z-index: 60;
        */
      }
      
      @media (min-width: 800px) and (max-width: 1200px) {
            .mobile-logo {justify-content: space-between;}   
            .m-nav-icon, .toppanel-hold { min-width: 33%;}
      }
      @media only screen and (max-width: 768px) {
        .mobile-logo {justify-content: space-between; gap:20px;}
        .mobile-logo .toppanel-hold {width: inherit;}
        .search-input { background: none !important;}
        .search-container .searchbar { padding: 0;}
        .search-container.opened #searchbar {
            border-radius: 10px;
            border: solid 1px #333 !important;
            background-color: #fff;
        }
        .search-container.opened {padding: 1em 1em;}
        #cd-cart {width: 80%;}
        
      }
      

/*  ===============================================
    Index Pages
    =============================================== */
    .home-slider, .bt-slider { margin: 1.2rem;}
    .bt-slider .carousel-item a { display: block !important;}
    .bt-slider .carousel-item a img,
    .home-slider .carousel-cell a img{border-radius:15px;}
    .home-slider .flickity-prev-next-button.next {right: 10px;}
    .home-slider .flickity-prev-next-button.previous {left: 10px;}
    @media only screen and (max-width: 768px) {
        .home-slider, .bt-slider { margin: 0.8rem;}
        .home-slider .flickity-button { display: none;}
        .home-slider .carousel-cell a img{border-radius:10px;}
    }
    @media only screen and (min-width: 1024px) {
        .bt-slider .carousel-control-next, .carousel-control-prev {
          width: 50px;
        }
        .bt-slider .carousel-indicators { display: none;}
    }
    .bt-slider .carousel-control-next-icon,
    .bt-slider .carousel-control-prev-icon 
    {
        width: 38px;
        height: 38px;
        border-radius: 99px;
        background-color: rgba(0,0,0,.2);
        background-size: 50% 50%;
    }
    
    /* ---- ----*/
    .panel{ 
        /*
        background:var(--card);
        border:1px solid var(--line);
        border-radius:var(--radius);
        box-shadow:var(--shadow);
        padding:14px;
        display:flex;
        flex-direction:column;
        min-width:0
        */
    }
    
    .panel-hd{display:flex;align-items:flex-center;justify-content:space-between;gap:8px;margin-bottom:12px;}
    .panel-hd h3{font-size:1rem;font-weight:800;line-height:1.2}
    .panel-hd h3 small{display:block;font-size:.66rem;font-weight:500;color:var(--ink-3);margin-top:2px}
    .panel-hd .va,
    .hp-btn-viewall {font-size:.72rem;font-weight:700;color:var(--brand);white-space:nowrap; padding: 3px 0;}

    .feature-category-title-hold p,
    .t-c-w-caption p,
    .t-c-w-caption .fp-text {
        display:block; font-size: .76rem;font-weight:500;color:var(--ink-3);font-weight: 500;margin-top: 1px;
        display: block; font-size: .66rem;font-weight: 500;color: var(--ink-3);
    }
    
    .text-cl-img-hold { background-color: #ffffff;}
    
    /*==========================
    Home Featured Products
    ==============================*/
    .home-featured-product .teaser-item-div {margin: 0 0.4rem;}
    .rel-recenthold .teaser-item-div {margin: 0 0.2rem;}
    .home-featured-product .teaser-item-div figure img,
    .rel-recenthold .teaser-item-div figure img
    { padding: 5px;}
    .home-featured-product .teaser-item-div .product-list-title,
    .home-featured-product .teaser-item-div form,
    .home-featured-product .teaser-item-div .buy,
    .rel-recenthold .teaser-item-div .product-list-title,
    .rel-recenthold .teaser-item-div form,
    .rel-recenthold .teaser-item-div .buy
    {padding-left: 1em; padding-right: 1em; padding-bottom: 0.8em;padding-top: 6px; margin-bottom: 0 !important;}

    .semi {display: flex; align-items: baseline;gap: 4px;}
    .semi b {font-size: .94rem;font-weight: 800;line-height: 1;}
    .semi span {font-size: .7rem;font-weight: 600;color: var(--ink-2);}
    .stenure {font-size: .6rem;color: var(--ink-3);margin-top: 2px;line-height: 1.2;}
    .stenure {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 1;
    }

    
    .div_featured_products .teaser-name,
    .rel-recenthold .teaser-name {
        font-size: .74rem;
        font-weight: 600;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    .teaser .colorcode-dots .colors {border-radius: 15px;}
    
    /* -----------------------------------------
        Home Product List equal height CSS
    ------------------------------------------- */
    .home-featured-product .div_featured_products,
    .dailydeals-hold {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .home-featured-product .div_featured_products .teaser,
    .dailydeals-hold .teaser {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .home-featured-product .div_featured_products .teaser-item-div,
    .dailydeals-hold .teaser-item-div {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    /* -----------------------------------------
        Flickity Scoller equal height CSS
    ------------------------------------------- */
    .homeproductscroll.div_featured_products {display: block !important;}
    .homeproductscroll.div_featured_products .carousel-cell{
        display: flex !important;
        flex-direction: column;
        min-height: 100%;
        box-sizing: border-box; /* essential — keeps wc-6 width intact */
        padding: 0 6px 8px; 
    }
    .homeproductscroll.div_featured_products { margin: 0 -6px; }
    .homeproductscroll.div_featured_products .flickity-slider{ height: 100%; }
    .homeproductscroll.div_featured_products .carousel-cell > .teaser,
    .homeproductscroll.div_featured_products .teaser > .teaser-item-div,
    .homeproductscroll.div_featured_products .teaser-item-div > a{
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;/* stops flex items refusing to shrink */
    }
    .homeproductscroll.div_featured_products .teaser-item-div {margin:0;}
    .homeproductscroll.div_featured_products .product-list-title{ flex: 1 1 auto;}
    .homeproductscroll.div_featured_products .buy{ margin-top: auto; }
    
    @media (max-width: 768px) {
        .homeproductscroll.div_featured_products .carousel-cell {padding: 0 3px 3px;}
    }
   /* ----------------- */   
   .homecategoryscroll .home-category { margin: 0 6px;}
   
  
/*  ===============================================
    Category Page
    =============================================== */
    .right-column {margin-left: 0;}
    @media only screen and (max-width: 1024px) {
        #navfilter::before {background: #ffffff;}
        .fl-toggle.expanded .fl-toggle-bar {width: 30px;  height: 30px;  background-color: red;top: 1em;border-radius: 3px;background-color: white;}
        .fl-toggle.expanded .fl-toggle-bar, .fl-toggle.expanded .fl-toggle-bar::after, .fl-toggle.expanded .fl-toggle-bar::before {left: 5px;width: 20px;}
        .fl-toggle.expanded { height: auto;}
        #navfilter {width: 100%}
        
    }
    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .filters-div > :first-child { min-width: 51%;}
    }
    

    /* ===== Toolbar ===== */
    .toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 14px;margin-bottom:14px;flex-wrap:wrap}
    .toolbar .cnt{font-size:.82rem;color:var(--ink-2)}
    .toolbar .cnt b{color:var(--ink)}
    .toolbar .right{display:flex;align-items:center;gap:8px}
    .filter-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.8rem;font-weight:600;color:var(--ink-2)}
    @media(min-width:900px){.filter-btn{display:none}}
    .sortsel{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.8rem;font-weight:600;color:var(--ink-2);font-family:inherit;background:#fff}
    
    :root {
         --zc-ink:    #171a21;
         --zc-ink-2:  #4c5261;
         --zc-ink-3:  #8a90a0;
         --zc-line:   #e7e9f0;
         --zc-amber:  #ff7a1a;
         --zc-radius: 12px;
     }

     .storecategory {
         /* scrolling happens on .category-grid, not here — see notes */
         overflow: visible;
     }
     .category-grid {
         display: flex;
         flex-wrap: wrap;
         gap: 4px;
         max-width: 100%;
         margin: 0 auto;
         white-space: nowrap;
     }
     .subcategory {
         flex: 0 0 auto;          /* pills size to their text */
         text-align: center;
     }
     .subcategory figure { display: none; }
     .category-grid .subcategory a .categorycaption {
         display: block;
         padding: 8px 14px;
         font-size: .82rem;
         font-weight: 600;
         color: var(--zc-ink-2);
         background: var(--bg, #f4f5f8);
         border-radius: 99px;
     }
     .category-grid .subcategory a .categorycaption:hover {
         color: var(--brand, var(--zc-ink)) !important;
         background: var(--brand-soft, #eef1f7);
     }
     /* ============= 2. LAYOUT : sidebar + products  ============ */
     .layout {
         display: grid;
         gap: 15px;
     }
     @media (min-width: 1024px) {
         .layout            { grid-template-columns: 250px 1fr; align-items: start; }
         .layout.no-filters { grid-template-columns: 1fr; }
         .filters           { position: sticky; top: 120px; }
     }
     .filter-panel {
         background: var(--card, #fff);
         border-radius: var(--radius, var(--zc-radius));
         box-shadow: var(--shadow, 0 2px 8px rgba(23,26,33,.06));
         overflow: hidden;
     }
     .filters-hd {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 14px 16px;
         border-bottom: 1px solid var(--line, var(--zc-line));
     }
     .filters-hd h3     { font-size: .92rem; font-weight: 600; }
     .filters-hd button { font-size: .74rem; font-weight: 700; color: var(--brand, var(--zc-ink)); }

     /* =================3. PRODUCT GRID =============== */
     .zc-grid {
         display: grid !important;
         grid-template-columns: 1fr;
         gap: 15px;
     }

     @media (min-width:  620px) { .zc-grid { grid-template-columns: repeat(2, 1fr); } }
     @media (min-width: 1600px) { .zc-grid { grid-template-columns: repeat(3, 1fr); } }

     /* neutralise the old inline-block width classes inside the grid */
     .zc-grid > [class*="product-inline-"] {
         display:   block !important;
         width:     100%  !important;
         max-width: 100%  !important;
         margin:    0     !important;
     }


     /* ================== 4. PRODUCT CARD =============== */
     .zc-card,
     .home-featured-product .teaser-item-div,
     .rel-recenthold .teaser-item-div
     {
         height: 100%;
         margin-bottom: 0 !important;
         background: #fff;
         border: 1px solid var(--zc-line);
         border-radius: var(--zc-radius);
         overflow: hidden;
         transition: box-shadow .15s, border-color .15s;
     }

     .zc-card:hover,
     .home-featured-product .teaser-item-div:hover,
     .rel-recenthold .teaser-item-div:hover
     {
         border-color: #d4d7e0;
         box-shadow: 0 8px 22px rgba(23,26,33,.1);
     }

     .zc-card .zc-inner {
         display: flex;
         align-items: stretch;
         height: 100%;
         margin:  0 !important;
         padding: 0 !important;
     }

     /* ---- media column ---- */
     .zc-card .zc-media {
         position: relative;
         flex: 0 0 40%;
         max-width: 170px;
         padding: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .zc-card .zc-media > a { display: block; width: 100%; }
     .zc-card .zc-media figure {
         margin:  0 !important;
         padding: 0 !important;
         display: flex;
         align-items: center;
         justify-content: center;
         min-height: 150px;
     }
     .zc-card .zc-media figure img,
     .zc-card .zc-media figure img.img-ratio {
         /*width: auto !important;*/
         max-width: 100%;
         max-height: 150px;
         margin: 0 auto;
         object-fit: contain;
     }
     /* "0 Down Payment" ribbon */
     .zc-ribbon {
         position: absolute;
         left: 0;
         bottom: 10px;
         z-index: 3;
         padding: 1px 5px;
         background: var(--amber);
         color: #fff;
         font-size: .62rem;
         font-weight: 600;
         line-height: 1.6;
         white-space: nowrap;
         border-radius: 0 6px 6px 0;
     }
     /* ---- info column ---- */
     .zc-card .zc-body {
         flex: 1 1 auto;
         min-width: 0;
         display: flex;
         flex-direction: column;
         padding: 12px 14px 12px 4px;
     }
     .zc-card .product-list-title {
         text-align: left  !important;
         margin-bottom: 0  !important;
     }
     
     .teaser-name { margin: 0; }
     .teaser-name a {
         display: block;
         font-size: .88rem;
         font-weight: 700;
         line-height: 1.3;
         color: var(--zc-ink);
     }
     .brand-txt-listview,
     .ct-pdcvariant-hold {
         margin-top: 3px;
         font-size: .72rem;
         color: var(--zc-ink-3);
     }
     .zc-card .zc-sep {
         border: none;
         border-top: 1px solid var(--zc-line);
         margin: 8px 0;
         opacity: 1;
     }
     .zc-emi {
         margin-top: 3px;
         font-size: .85rem;
         color: var(--zc-ink-2);
         white-space: nowrap;
     }
     .zc-emi b {
         font-size: .95rem;
         font-weight: 800;
         color: var(--emi, #0bab5c);
     }

     /* ---- buy button ---- */
     .buy {margin-top: auto; padding-top: 4px; }
     .buy button, .buy a {
         width: 100%;
         padding: 8px 14px;
         border: none;
         border-radius: 8px;
         color: #fff;
         font-size: .76rem;
         font-weight: 700;
         background: linear-gradient(90deg, var(--emi, #0bab5c), #0bab5c);
         text-align: center;
     }
     /* ---- variant select row ---- */
     .zc-body form {
         display: flex;
         gap: 4px;
         align-items: center;
     }
     .zc-body form select {
         min-width: 100px;
         padding-right: 10px;
         font-size: .86rem;
         background-size: 10px 10px;
     }

     /* ============== 5. MOBILE ================ */
     @media (max-width: 767px) {
         /* chips become a snap scroller: 4 visible + a peek of the next */
         .category-grid {
             flex-wrap: nowrap;
             justify-content: flex-start;
             gap: 0.4rem;
             padding-bottom: 0.25rem;
             overflow-x: auto;
             scroll-snap-type: x mandatory;
             scroll-padding-left: 0.8rem;
             -webkit-overflow-scrolling: touch;
             scrollbar-width: none;               /* Firefox */
         }
         .category-grid::-webkit-scrollbar { display: none; }
         .subcategory {
             flex: 0 0 calc((100% - (0.4rem * 4)) / 4.3);
             scroll-snap-align: start;
         }

         .zc-grid { gap: 8px; }
     }

     @media (max-width: 479px) {
         .zc-card .zc-media {
             flex-basis: 38%;
             max-width: 115px;
             padding: 8px;
             border-right: 1px solid #eee;
         }
         .zc-card .zc-media figure     { min-height: 118px; }
         .zc-card .zc-media figure img { max-height: 118px; }

         .zc-card .zc-body {
             padding: 10px 12px 10px 10px;
             font-size: .80rem;
             line-height: 1.3;
         }
         .zc-card .teaser-name a { font-size: .80rem; }
         .zc-card .zc-emi        { font-size: .75rem; }
         .zc-card .zc-emi b      { font-size: .83rem; }
         .zc-ribbon { font-size: .56rem; padding: 2px 7px; }
         .zc-card .zc-sep        { margin: 4px 0; }

         .buy button { padding: 6px 14px; }
     }
     .teaser figure .btnquick-panel {
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
      }
      .teaser .wishlist-button {
        margin: unset;
          margin-right: unset;
          margin-left: unset;
        margin-left: 5px;
        margin-right: 5px;
      }
     .btnquick-panel > div {
        justify-content: flex-end !important;
        padding-right: 5px;
      }
      .teaser .wishlist-button, .teaser .btnquick {
        width: auto !important;
        margin-bottom: 10px;
      }
     .btnquick-panel { background: none !important;}
     .btnquick-panel .btn {
        padding: 0;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50% !important;
        line-height: 1;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    }
    .btnquick-panel .btn i { font-size:1em !important;}
    .btnquick-panel .btn:hover {background-color: rgba(255, 255, 255, 1);}
    .teaser .btnquick-panel  {
        transform: translateX(0px);
        opacity: 0;
        margin-bottom: 2px;
        transition: all 0.4s;
    }
    .teaser:hover .btnquick-panel {
        transform: translateX(0px);
        opacity: 1;
        transition: all 0.6s;
    }
    
    @media only screen and (max-width: 1023px) {
        .filters-div .select-hold select {
            background: #fff !important;
        }
    }
    
/*  ===============================================
    Product
    =============================================== */


    .product-breadcrumb .breadcrumb {
        display: flex;
        flex-wrap: nowrap;        /* stops the second line */
        align-items: center;
        min-width: 0;
    }
    .product-breadcrumb .breadcrumb .breadcrumb-item {
        white-space: nowrap;
        min-width: 0;
        flex: 0 0 auto;           /* Home / Washing Machines stay full */
    }
    .product-breadcrumb .breadcrumb .breadcrumb-item:last-child {
        display: flex;
        align-items: center;
        flex: 0 1 auto;           /* only this one shrinks */
        overflow: hidden;
    }
    /* keep the "/" separator from being squashed */
    .product-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        flex: 0 0 auto;
    }
    .product-breadcrumb .breadcrumb .breadcrumb-item:last-child > a {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .product-breadcrumb .breadcrumb .breadcrumb-item:last-child > span[itemprop="name"] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


    .item-details-hold {background-color:#f5f6fa; padding-bottom: 2rem;}
    
    .mobile-slide {
        background: var(--card);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 16px;
        position: relative;
        overflow: hidden;
        padding: 1em;
        margin: 1em;
    }
    .mobile-slide .carousel-item img {border-radius: 12px;}
    
    .pdp-card, .swtch_info-desc,.z-card {background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px;}
    @media(max-width:900px){
        .pdp-card, .swtch_info-desc,.z-card {padding:12px;}
    }
   
    .brandline{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--ink-3);margin-bottom:4px}
    .brandline b{color:var(--brand);font-weight:700;letter-spacing:.3px}
    .product_detail .reviewscroll span {font-size: 13px;min-width: 15px;}
    .sharebtn-hold .social-container a {display: inline-block !important;}

    .dsktp-zoomer {z-index:1;}
    body.gc-noscroll .dsktp-zoomer {z-index:99;}
    .gc-thumbs-area.gc-hz li {border-radius: 10px; border-width: 2px;}
    .glass-case ul li.gc-active, .glass-case ul li.gc-active:hover {border-color:var(--brand) !important;}
    .prd-cartwishlist-btn{top:12px;right:12px;z-index:2;}
    .prd-cartwishlist-btn .btn-wishlist,
    .cartwishlist-hold #span-add-to-wishlist
    {background:#fff; cursor: pointer;border:1px solid var(--line);border-radius:99px !important;width:38px;height:38px;display:grid;place-items:center;color:var(--ink-2);font-size:1.1rem;line-height: 1;}
    
    @media only screen and (max-width: 767px) {
        .prd-cartwishlist-btn {top:1rem;right:1rem;}
        .prd-cartwishlist-btn .btn-wishlist {box-shadow: var(--bs-box-shadow-sm) !important;}
    }
    .review-rate-block { background-color: #ffffff !important;}
    .product-des-hold .sticky-top {top: 120px;}
    .gc-icon, .gc-icon::before, .gc-icon-next::before {
        border: solid 1px #000;
        border-radius: 4px;
        background-color: #fff;
        font-size: 16px !important;
        padding: 3px !important;
    }
    .glass-case ul li .gc-display-container img {border-radius: 8px;}
    .teaser-item-div .teaser-name {-webkit-line-clamp: 1;}
    
    @media only screen and (max-width: 640px) {
        .product-list-title .price-hold .actual-price { font-size: 11px;}
    }
/* ==========================================================================
   Flickity page dots — global restyle (pill-style active dot)

   Every dot selector is prefixed with .flickity-enabled purely to raise
   specificity above Flickity's own stylesheet, so LOAD ORDER NO LONGER
   MATTERS and no !important is required:

       Flickity  .flickity-page-dots            (0,1,0)
       this      .flickity-enabled .flickity-page-dots        (0,2,0)  wins
       Flickity  .flickity-page-dots .dot       (0,2,0)
       this      .flickity-enabled .flickity-page-dots .dot   (0,3,0)  wins

   Enable per carousel with:  pageDots: true
   --------------------------------------------------------------------------
   Default = white dots overlaid on the carousel (for banners over imagery).
   On white/light backgrounds add .dots-ink or .dots-below to the carousel.
   ========================================================================== */

    .flickity-enabled {
      /* tweak these per carousel instead of rewriting the rules below */
      --fdot-size: 7px;          /* inactive dot diameter         */
      --fdot-active-w: 22px;     /* active dot width (the pill)   */
      --fdot-gap: 5px;           /* space between dots            */
      --fdot-inset: 12px;        /* distance from carousel bottom */
      --fdot-color: rgba(255, 255, 255, .5);
      --fdot-color-active: #fff;
    }

    /* ---------- the dot strip ---------- */
    .flickity-enabled .flickity-page-dots {
      position: absolute;
      bottom: var(--fdot-inset);
      left: 50%;
      transform: translateX(-50%);
      width: auto;                 /* beats Flickity's width:100%   */
      display: flex;
      align-items: center;
      gap: var(--fdot-gap);
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: left;            /* beats Flickity's text-align:center */
      line-height: 1;
      z-index: 3;
      bottom: 5px;
    }

    /* ---------- individual dots ---------- */
    .flickity-enabled .flickity-page-dots .dot {
      display: block;              /* beats inline-block            */
      width: var(--fdot-size);
      height: var(--fdot-size);
      margin: 0;                   /* beats Flickity's margin:0 8px */
      padding: 0;
      border: 0;
      border-radius: 99px;
      background: var(--fdot-color);
      opacity: 1;                  /* beats Flickity's opacity:.25  */
      cursor: pointer;
      transition: width .25s ease, background .25s ease;
    }

    /* ---------- active dot stretches into a pill ---------- */
    .flickity-enabled .flickity-page-dots .dot.is-selected {
      width: var(--fdot-active-w);
      background: var(--fdot-color-active);
      opacity: 1;
    }

    /* ---------- interaction states ---------- */
    .flickity-enabled .flickity-page-dots .dot:hover {
      background: var(--fdot-color-active);
    }
    .flickity-enabled .flickity-page-dots .dot:focus-visible {
      outline: 2px solid var(--fdot-color-active);
      outline-offset: 2px;
    }

    
     /* ==========================================================================
    FLICKITY — GLOBAL FIXES
    Include once, site-wide, AFTER flickity.min.css.

    Contents:
    1. CLS / FOUC guard  — automatic, applies to every carousel
    2. Fade module       — opt-in, add class "flickity-fade"
    3. Height guard      — opt-in, add class "flickity-fixed-height"

    --------------------------------------------------------------------------
    THE ONE THING YOU MAY NEED TO EDIT
    --------------------------------------------------------------------------
    CSS cannot know which elements your JS will later turn into carousels, so
    section 1 needs a list of carousel container selectors. Everything is
    listed in ONE place (section 1). To cover a new carousel, either:

    (a) add its container selector to that list, or
    (b) add class="js-flickity" to the container in your template
     (already included in the list, so nothing else to change)

    Option (b) is recommended for anything new — then this file never needs
    touching again.
    ========================================================================== */


    /* ==========================================================================
    1. CLS / FOUC GUARD                                          [ AUTOMATIC ]
    --------------------------------------------------------------------------
    THE PROBLEM
    Flickity only adds the .flickity-enabled class once its JavaScript has run.
    Before that, the cells are still normal flow elements, so they stack
    vertically (or wrap onto several rows). The container is briefly several
    times taller than it should be, then snaps down to a single row when
    Flickity initialises. That snap is the layout shift.

    THE FIX
    While the container is :not(.flickity-enabled), force its children onto a
    single non-wrapping row and clip the overflow. The pre-init height then
    equals the post-init height, so nothing moves.

    Note this targets direct children with `> *` rather than a cell class name,
    because cell classes differ per carousel (.carousel-cell, .ppage,
    .product-inline-4 ...). This way one rule covers all of them.

    It is pure CSS in a stylesheet, so it applies on first paint — it does not
    depend on any script timing.
    ========================================================================== */

    /* REMOVED - this guard was a duplicate of "PRE-INIT GUARD (CLS)" further
       down, which is the better version (it also handles flex containers and
       beats .carousel-cell{display:block}). The single guard now lives there.

       It also carried two selectors that were actively harmful:
         .div_featured_products  - "Recently Viewed" and one "Trending" block
             use this class as a PLAIN STATIC GRID with no Flickity, so they are
             permanently :not(.flickity-enabled). overflow:hidden + nowrap then
             applied forever rather than just pre-init, clipping every product
             past the first row with no way to reach them.
         .carousel               - also a Bootstrap class, so it reached
             non-Flickity markup too.
       Both are deliberately absent from the surviving guard. */

    /* Full-width slides (hero banners): slide 1 fills the row, the rest are
    pushed beyond it and clipped — so only the first is visible, at exactly
    the height Flickity will settle on. Narrower cells (product rails) simply
    fill one row and the remainder clip. Both cases end up shift-free. */


    /* ==========================================================================
    2. FADE MODULE                                                 [ OPT-IN ]
    --------------------------------------------------------------------------
    Add class="flickity-fade" to the carousel container.

    Cross-fades instead of sliding, and works on ANY Flickity version — it does
    not rely on the native `fade` option, which only exists in 2.3.0+ and is
    silently ignored by older builds.

    How: Flickity already positions cells absolutely; the sliding motion comes
    from a translateX on .flickity-slider plus a per-cell inline `left`
    (0%, 100%, 200%...). Cancel both, then swap opacity on .is-selected.
    !important is required because Flickity sets those two as inline styles.

    Do NOT put this on product rails / multi-cell carousels — it stacks every
    cell on top of each other. It is for one-slide-at-a-time sliders only.
    ========================================================================== */

    .flickity-fade.flickity-enabled .flickity-slider {
    transform: none !important;
    }

    .flickity-fade.flickity-enabled .flickity-slider > * {
    left: 0 !important;
    top: 0;
    width: 100%;
    opacity: 0;
    z-index: 0;
    pointer-events: none;              /* hidden slides must not catch clicks */
    transition: opacity .6s ease-in-out;
    }

    .flickity-fade.flickity-enabled .flickity-slider > .is-selected {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
    }

    /* keep arrows and dots above the stacked slides */
    .flickity-fade.flickity-enabled .flickity-button,
    .flickity-fade.flickity-enabled .flickity-page-dots {
    z-index: 2;
    }

    /* Fade speed — override per carousel if needed, e.g.
    .home-slider .flickity-fade.flickity-enabled .flickity-slider > *{transition-duration:1s} */


    /* ==========================================================================
    3. HEIGHT GUARD                                                [ OPT-IN ]
    --------------------------------------------------------------------------
    Add class="flickity-fixed-height" to the carousel container, and set an
    aspect-ratio (or a height) on its WRAPPER.

    Use this when slides contain lazy-loaded images. At init those images have
    no intrinsic height yet, so Flickity measures a near-zero cell and sets a
    collapsed viewport height — the carousel looks empty or flickers until the
    images land. This pins the viewport to the reserved box instead of the
    measured one.
    ========================================================================== */
    .flickity-fixed-height,
    .flickity-fixed-height .flickity-viewport {
    height: 100% !important;
    }

    .flickity-fixed-height .flickity-slider > * {
    height: 100%;
    }


    /* ==========================================================================
    ACCESSIBILITY
    ========================================================================== */

    @media (prefers-reduced-motion: reduce) {
    .flickity-fade.flickity-enabled .flickity-slider > * {
    transition: none;
    }
    }

/*  ===============================================
    SHARED CAROUSEL HEADER NAV  (arrows beside the heading)
    Used by featured products, featured categories, logos and any future
    element. Previously this lived inline in featured_products.ctp.

    Markup contract, per section:
      <div class="panel-hd">
        ...heading...
        <div class="carousel-nav" data-carousel="THE_CAROUSEL_ID">
          <button class="cnav-btn" data-dir="prev">svg</button>
          <button class="cnav-btn" data-dir="next">svg</button>
        </div>
      </div>
    If the carousel id is not known at render time (it lives in another
    element file), use data-carousel-scope="#section_id" instead and the
    shared JS finds the carousel inside that scope.
    Add class "has-carousel-nav" to the section root to hide Flickity's
    own prev/next buttons.
    =============================================== */
    .carousel-nav {
        display: flex;
        gap: 6px;
        height: 30px;
        flex: 0 0 auto;
        align-items: center;
    }
    /* .daily-deals-home-panel .pnav button is the Limited Time Deals markup,
       which predates .cnav-btn. Same button, two class names - listed here so
       there is ONE definition of the arrow. If that template is ever updated to
       the .carousel-nav/.cnav-btn contract, drop the .pnav selectors below. */
    .cnav-btn,
    .daily-deals-home-panel .pnav button {
        width: 28px;
        height: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--card, #fff);
        border: 1.5px solid var(--line, #dbdce1);
        border-radius: 25px;
        color: var(--ink-2, #4c5261);
        line-height: 0;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
    }
    .cnav-btn:hover:not(:disabled),
    .daily-deals-home-panel .pnav button:hover:not(:disabled) { border-color: var(--brand, #d00200); color: var(--brand, #d00200);}
    .cnav-btn:focus-visible,
    .daily-deals-home-panel .pnav button:focus-visible        { outline: 2px solid var(--brand, #d00200); outline-offset: 2px;}
    .cnav-btn[disabled],
    .daily-deals-home-panel .pnav button:disabled             { opacity: .35; cursor: default; }
    .cnav-btn svg,
    .daily-deals-home-panel .pnav button svg                  { width: 6px; height: 6px; fill: currentColor; }

    /* a section with its own header arrows should not also show Flickity's */
    .has-carousel-nav .flickity-prev-next-button { display: none !important;}

/*  ===============================================
    PRE-INIT GUARD (CLS)
    Flickity only adds .flickity-enabled once its JS has run. Until then the
    cells are normal flow elements and wrap onto several rows, so the block
    is briefly much taller and then snaps down. Forcing one clipped row keeps
    the pre-init height equal to the post-init height.
    Targets direct children (> *) so it works whatever the cell class is
    (.carousel-cell, .home-category, .product-inline-N ...).
    =============================================== */
    .homeproductscroll:not(.flickity-enabled),
    .homecategoryscroll:not(.flickity-enabled),
    .js-flickity:not(.flickity-enabled),
    [data-flickity]:not(.flickity-enabled) {
        overflow: hidden;
        white-space: nowrap;   /* inline-block cells (products, logos) */
        flex-wrap: nowrap;     /* flex cells (categories: .row.d-flex would wrap) */
    }
    .homeproductscroll:not(.flickity-enabled) > *,
    .homecategoryscroll:not(.flickity-enabled) > *,
    .js-flickity:not(.flickity-enabled) > *,
    [data-flickity]:not(.flickity-enabled) > * {
        display: inline-block !important;   /* beats theme.css .carousel-cell{display:block} */
        vertical-align: top;
        white-space: normal;
        min-height: 0;
    }

    /* moved out of featured_products.ctp (was an inline <style> block) */
    .home-featured-product .homeproductscroll.div_featured_products .teaser-item-div figure { flex: 0 0 auto; }
    .home-featured-product .ct-pdcvariant-hold { min-height: 20px; }
    .home-featured-product .colorcode-dots     { min-height: 28px; }

    @media (prefers-reduced-motion: reduce) {
        .cnav-btn,
        .daily-deals-home-panel .pnav button { transition: none; }
    }
    
    
    
    /* ===== Limited Time Deals ====== */
    /* The arrow button styling that used to be repeated here now lives with
       .cnav-btn above - one definition for both markups. Only the layout of the
       deals-specific wrappers remains. */
    .daily-deals-home-panel .hd-r{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
    .daily-deals-home-panel .pnav{display:flex;gap:6px;flex-shrink:0}

    /* 701px MUST match BREAKPOINT in the responsive script at the bottom of
       limited_time_deal.ctp. That script wraps products into .ppage at/above this
       width and unwraps them below, then re-initialises Flickity - so these rules
       and the DOM structure always agree, whatever the User-Agent says.
       This is why a rotated phone (Galaxy S22 landscape = 780px wide) now gets the
       same 2 x 2 layout as the desktop instead of 4 cards on one row. */
    @media(min-width:701px){
        .daily-deals-home-panel .div_featured_products{white-space:normal}
        .daily-deals-home-panel .ppage{width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:min-content min-content;align-content:start;gap:12px}
        .daily-deals-home-panel .ppage>.product-inline-4{display:block;width:100%;max-width:100%;margin:0;vertical-align:top;align-self:start}
    }
    /* Pre-init guard, ALL widths. .ppage is now always rendered, so before Flickity
       boots every page sits in normal flow and the panel is N x too tall, then snaps
       down. Showing only page 1 keeps the pre-init height equal to the final height.
       (This used to live inside the min-width:701px block, leaving the shift on mobile.) */
    .daily-deals-home-panel .div_featured_products:not(.flickity-enabled) .ppage~.ppage{display:none}
    .daily-deals-home-panel .div_featured_products .flickity-viewport{width:100%;transition:height .2s}
    @media(max-width:700px){
        /* the script has unwrapped .ppage by now: 3 across + ~10% of the 4th.
           !important beats style.css .product-inline-4{width:50% !important} under 480px. */
        .daily-deals-home-panel .div_featured_products .product-inline-4{width:32.26% !important;max-width:none !important}
        .daily-deals-home-panel .pnav button{width:26px;height:26px}
    }
    /*-------*/
    .daily-deals-home-panel .btnquick-panel { display: none;}
    .daily-deals-home-panel figure {position: relative; aspect-ratio: 1 / 1 !important;padding-bottom: 0 !important;}
    .daily-deals-home-panel figure {max-width: 80%; margin-left: auto; margin-right: auto;}
    .daily-deals-home-panel .buy,
    .daily-deals-home-panel .ct-pdcvariant-hold,
    .daily-deals-home-panel .hm-product-rating-box,
    .daily-deals-home-panel .stenure,
    .daily-deals-home-panel .label-freeshipping 
    { display: none !important;}
    .daily-deals-home-panel .teaser .teaser-item-div {
        margin: 0;
        border: 1px solid #e7e9f0;
        border-radius: 8px;
        transition: box-shadow .15s, border-color .15s;
    }
    .daily-deals-home-panel .teaser-name {color:var(--ink-2,#4b5563)!important;}
    .daily-deals-home-panel .product-list-title {font-size: .875em;min-height: 64px; padding-left: 8px; padding-right: 8px;}
    .daily-deals-home-panel .product-list-title { border-top:1px solid #e7e9f0; padding-top: 6px;}
    @media(max-width:768px){
        .daily-deals-home-panel .teaser .teaser-item-div { margin-left: 0.3rem; margin-right: 0.3rem;}
    }

/*  ===============================================
    CAROUSEL REVEAL-ON-READY
    Hides a carousel until Flickity has laid it out, then fades it in, so the
    raw stacked/wrapped cells are never visible while the page loads.

    Uses opacity, NOT display:none - the element keeps its size, so nothing
    below it moves. Together with the pre-init guards further up (which cap the
    pre-init height to one page) the section occupies its final height from
    first paint and simply fades in: no extra layout shift.

    FAILSAFE: if Flickity never initialises (script blocked, a JS error earlier
    on the page, an ad-blocker) these products would otherwise stay invisible
    forever - a cosmetic tweak turning into lost content. The keyframe below
    forces opacity:1 after 2s regardless, so the worst case is a late reveal.
    The .flickity-enabled rule cancels it the moment the carousel is ready.

    Only carousels that are actually initialised are listed. Do NOT add a bare
    .div_featured_products here: "Recently Viewed" and some "Trending" blocks
    use that class as a plain static grid with no Flickity, so they would stay
    hidden until the failsafe fired.

    To cover a new carousel: add its container to all three selector lists
    below, or simply give it class="js-flickity" (already covered).
    =============================================== */
    .homeproductscroll:not(.flickity-enabled),
    .homecategoryscroll:not(.flickity-enabled),
    .js-flickity:not(.flickity-enabled),
    .daily-deals-home-panel .div_featured_products:not(.flickity-enabled),
    .home-slider .carousel:not(.flickity-enabled) {
        opacity: 0;
        animation: flickityRevealFailsafe 0s linear 2s forwards;
    }

    @keyframes flickityRevealFailsafe { to { opacity: 1; } }

    .homeproductscroll.flickity-enabled,
    .homecategoryscroll.flickity-enabled,
    .js-flickity.flickity-enabled,
    .daily-deals-home-panel .div_featured_products.flickity-enabled,
    .home-slider .carousel.flickity-enabled
    {
        opacity: 1;
        animation: none;                 /* cancel the failsafe once ready */
        transition: opacity .25s ease;
    }

    /* No fade for users who ask for reduced motion - just show it. */
    @media (prefers-reduced-motion: reduce) {
        .homeproductscroll:not(.flickity-enabled),
        .homecategoryscroll:not(.flickity-enabled),
        .js-flickity:not(.flickity-enabled),
        .daily-deals-home-panel .div_featured_products:not(.flickity-enabled),
        .home-slider .carousel:not(.flickity-enabled)
        {
            opacity: 1;
            animation: none;
        }
        .homeproductscroll.flickity-enabled,
        .homecategoryscroll.flickity-enabled,
        .js-flickity.flickity-enabled,
        .daily-deals-home-panel .div_featured_products.flickity-enabled,
        .home-slider .carousel.flickity-enabled
            {
            transition: none;
        }
    }