.whatsapp-pulse {bottom: 65px;}
    .finishthelook .swiper-wrapper > div, .finishthelook .swiper-wrapper > div p { font-size: 15px;}
    .finishthelook .swiper-wrapper > div {width:15.4%; margin-right:1.5%; margin-bottom:2em;}
    .finishthelook .swiper-wrapper > div:nth-child(6n) {margin-right:0;}
    .finishthelook-caption { padding-top: 6px; text-align: center;}
        
    @media(max-width:1140px){
        .finishthelook .swiper-wrapper > div {width:18.5%; margin-right:1.5%;}
        .finishthelook .swiper-wrapper > div:nth-child(6n) {margin-right: auto;}
    }
    @media(max-width:767px){
        .finishthelook  .swiper-wrapper > div {width:23.5%; margin-right:1.5%;}
        .finishthelook  .swiper-wrapper > div:nth-child(6n) {margin-right: auto;}
    }
    @media(max-width:640px){
        .finishthelook  .swiper-wrapper > div {width:48.5%; margin-bottom:10px;}
        .finishthelook  .swiper-wrapper > div:nth-child(6n) {margin-right: auto;}
        .product-detail-gallery .slick-next:before, .slick-prev:before{
            font-size:22px;
    }
    }
    .product-media { position: relative; }
    .product-media .glasscase-zoom { position: absolute !important; top: 0 !important;}
    .equalttoclass { min-width: 80px;}
    @media(max-width:640px){
        .equalttoclass {min-width: 50px;}
    }
    /* ? critical fix so iframe fills the lightbox */
    .pswp__content iframe {
        width: 100% !important;
        height: 100% !important;
    }
    .media-box {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    .media-box iframe {
        width: 100%;
        height: 100%;
        border: 0;
        pointer-events: none; /* allow click-through to open popup */
    }
    /* ---- Vimeo first-position video (desktop) ---- */
    .vimeo-box { background:#000; overflow:hidden; cursor:pointer; }
    .vimeo-box .vimeo-cover { container-type: size; overflow:hidden; }
    .vimeo-box .vimeo-cover iframe {
        position:absolute; top:50%; left:50%;
        /* 'object-fit: cover' for a 9:16 vertical video */
        width: max(100cqw, 56.25cqh);
        height: max(100cqh, 177.78cqw);
        transform: translate(-50%, -50%);
        border:0;
        pointer-events:none; /* click goes to the <a> -> opens popup */
    }
    /* ---- Inline YouTube (desktop) ---- */
    .yt-box .yt-inline { overflow:hidden; }
    .yt-box .yt-inline img,
    .yt-box .yt-inline iframe {
        position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; border:0; pointer-events:none;
    }
  
    /*------ Porduct images scroller ------*/
        .productImageSwiper .swiper-scrollbar-horizontal {opacity: 1 !important;border-radius: 0;  position: relative !important;}
        .productImageSwiper .swiper-button-next, .productImageSwiper .swiper-button-prev {
            & svg {
                width:20px !important; height:20px !important; color: black;
            }
        }
        .swiper-button-next, .swiper-button-prev {transition: all 0.2s ease-in-out; border-radius: 4px;background:rgba(255, 255, 255, 0.3);width: 35px;}
        .productImageSwiper .swiper-button-next {transform: translateX(120%);}
        .productImageSwiper .swiper-button-prev {transform: translateX(-120%);}
        .category-box:hover .swiper-button-next, .category-box:hover .swiper-button-prev {transform: translateX(0);background:rgba(255, 255, 255, 0.6);}
        .productImageSwiper .swiper-button-next, .productImageSwiper .swiper-button-prev {
            &.swiper-button-disabled {
                pointer-events: auto;
                opacity: 1;
            }
        }
        .swiper-button-next, .swiper-button-prev {
            & svg {
                width:20px !important; height:20px !important; color: black;
            }
        }
        .swiper-button-next, .swiper-button-prev {transition: all 0.2s ease-in-out; border-radius: 4px;background:rgba(255, 255, 255, 0.3);width: 35px;}
        /*
        .swiper-button-next {transform: translateX(120%);}
        .swiper-button-prev {transform: translateX(-120%);}
        */
        .essentialsNeed:hover .swiper-button-next, .essentialsNeed:hover .swiper-button-prev {transform: translateX(0);background:rgba(255, 255, 255, 0.6);}
        .swiper-button-next, .swiper-button-prev {
            &.swiper-button-disabled {
                pointer-events: auto;
                opacity: 1;
            }
        }
        .swiper-scrollbar-horizontal { border-radius: 0;  position: relative !important;}
        .swiper-wrapper {align-items: stretch;}
        .swiper-slide {height: auto; display: flex;}
        .swiper-slide > div {width: 100%;}
   
        .swiper-scrollbar.swiper-scrollbar-horizontal,
       .swiper-horizontal > .swiper-scrollbar {
         /* your overrides 
          bottom: -6px !important;
         */
         height: 2px!important;
       }
        
       /* === SWIPER FIX: Equal Height Slides === */
        #upsellproducts .swiper-wrapper {
          align-items: stretch;
        }

        #upsellproducts .swiper-slide {
          height: auto !important;
          display: flex;
        }

        /* === CARD STRUCTURE === */
        .category-box {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .category-box-product {
          display: flex;
          flex-direction: column;
          height: 100%;
          background: #fff;
          transition: 0.3s ease;
        }

        /* Hover effect (optional) */
        .category-box-product:hover {
          box-shadow: 0 6px 18px rgba(0,0,0,0.08);
          transform: translateY(-3px);
        }

        /* === IMAGE FIX === */
        .category-box-product figure {
          margin: 0;
          overflow: hidden;
        }

        .category-box-product img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        /* === CONTENT AREA === */
        .category-products-caption {
          display: flex;
          flex-direction: column;
          flex-grow: 1;
        }

        /* === TITLE FIX (Equal Height) === */
        .category-products-caption p,
        .finishthelook-caption .fc-product-name {
          min-height: 48px;
          line-height: 1.4;
        }

        /* === PUSH BOTTOM SECTION DOWN === */
        .category-products-caption .quickqty-cart {
          margin-top: auto;
        }


        /* === MOBILE OPTIMIZATION === */
        @media (max-width: 768px) {
          .category-products-caption p,
          .finishthelook-caption .fc-product-name {
                display: -webkit-box;
                -webkit-line-clamp: 3;   /* limit to 2 lines */
                -webkit-box-orient: vertical;
                overflow: hidden;
                min-height: 60px;
          }
        }
        
        /* Sticky CTA */
        .mobile-sticky-cta {
          display: none;
        }

        @media (max-width: 768px) {
          .mobile-sticky-cta {
            display: block;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            padding: 1rem;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 9999;

            transform: translateY(100%);
            opacity: 0;
            transition: all 0.3s ease;
          }

          .mobile-sticky-cta.show {
            transform: translateY(0);
            opacity: 1;
          }
          .mobile-sticky-cta .stickySampleBtn{
              border-radius: 10px;
    font-size: 16px;
    padding: .75rem 1.875rem;
          }
          .mobile-sticky-cta.show .mb-2{
              margin-bottom:0px !important;
          }
        }
        
    /*---- Finish the look & Essentials Swiper CSS ------*/
    .finishthelook,
    .essentialsNeed {overflow: visible !important;}
    .finishthelook-next-pre-btns,
    .essentialsNeed-next-pre-btns {position: absolute;  top: 0px;  right: 0px;}
    .finishthelook-panel .swiper-button-prev,
    .product-upsell .swiper-button-prev {right:45px;left: auto;}
    .finishthelook-panel .swiper-button-next, .finishthelook-panel .swiper-button-prev { & svg { width: inherit !important;height: 15px !important;}}
    .finishthelook-panel .swiper-button-next,.finishthelook-panel .swiper-button-prev,
    .product-upsell .swiper-button-next,.product-upsell .swiper-button-prev {width: 35px;height: 35px;margin: 0;}
    @media (max-width: 767px) {
        .finishthelook-panel .swiper-button-next, .finishthelook-panel .swiper-button-prev {
          display: block !important;
        }
    }
    .product-upsell .swiper-button-next, .product-upsell .swiper-button-prev { & svg { width: inherit !important;height: 15px !important;}}
    .finishthelook .swiper-button-next.swiper-button-disabled,
    .finishthelook .swiper-button-prev.swiper-button-disabled,
    .essentialsNeed .swiper-button-next.swiper-button-disabled,
    .essentialsNeed .swiper-button-prev.swiper-button-disabled {
        pointer-events: auto;
        opacity: 1;
    }
    
    
    /* --- Custom long arrows: Finish the Look + Installation Materials --- */
    .finishthelook-next-pre-btns .swiper-button-next,
    .finishthelook-next-pre-btns .swiper-button-prev,
    .essentialsNeed-next-pre-btns .swiper-button-next,
    .essentialsNeed-next-pre-btns .swiper-button-prev {
        width: 38px;
        height: 38px;
        margin: 0;
        background: none;
        border: none;
        border-radius: 0;
        color: #222;
    }

    /* hide Swiper's injected chevron */
    .finishthelook-next-pre-btns .swiper-navigation-icon,
    .essentialsNeed-next-pre-btns .swiper-navigation-icon {
        display: none;
    }

    .finishthelook-next-pre-btns .swiper-button-next::after,
    .finishthelook-next-pre-btns .swiper-button-prev::after,
    .essentialsNeed-next-pre-btns .swiper-button-next::after,
    .essentialsNeed-next-pre-btns .swiper-button-prev::after {
        content: "";
        display: block;
        width: 24px;
        height: 22px;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .finishthelook-next-pre-btns .swiper-button-next::after,
    .essentialsNeed-next-pre-btns .swiper-button-next::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012h24M19%205l7%207-7%207'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012h24M19%205l7%207-7%207'/%3E%3C/svg%3E");
    }

    .finishthelook-next-pre-btns .swiper-button-prev::after,
    .essentialsNeed-next-pre-btns .swiper-button-prev::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M26%2012H2M9%205l-7%207%207%207'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M26%2012H2M9%205l-7%207%207%207'/%3E%3C/svg%3E");
    }
    /*---- End Finish the look & Essentials Swiper CSS ------*/
     html {
        scroll-behavior: smooth;
      }
    #specification {
        scroll-margin-top: 60px; /* set this to your sticky header height + some gap */
      }
      .product-mobile-image-slide .thumb-slider .swiper-slide.productMobileVideo figure {
    border: solid 1px #ccc;
      border-radius: 2px;
    }
    /* Thumbs: CSS centring breaks scrolling when there are more than 6 thumbs.
       Centring is now done by Swiper (centerInsufficientSlides) instead. */
    .product-mobile-image-slide .productMobileSwiper .swiper-wrapper { justify-content: flex-start; }
    /* Thumbs scrollbar: sit just below the thumbnails (global rule makes it position:relative) */
    .product-mobile-image-slide .productMobileSwiper .thumbs-scrollbar {
        bottom: 0 !important; margin-top: 8px; background: #e5e5e5;
    }
    .product-mobile-image-slide .productMobileSwiper .thumbs-scrollbar .swiper-scrollbar-drag { background: #EF7722; }

    /* ---- Vimeo (mobile slider) ---- */
    .product-mobile-image-slide .vimeo-mobile-wrapper {
        position: relative; display: block; width: 100%; height: 500px;
        background: #000; overflow: hidden;
    }
    .product-mobile-image-slide .vimeo-mobile-wrapper .vimeo-poster,
    .product-mobile-image-slide .vimeo-mobile-cover {
        position: absolute; inset: 0; width: 100%; height: 100%;
    }
    .product-mobile-image-slide .vimeo-mobile-cover { container-type: size; overflow: hidden; }
    .product-mobile-image-slide .vimeo-mobile-cover iframe {
        position: absolute; top: 50%; left: 50%;
        width: max(100cqw, 56.25cqh);
        height: max(100cqh, 177.78cqw);
        transform: translate(-50%, -50%);
        border: 0;
        pointer-events: none; /* keeps swiping working; tap opens popup */
    }
    .product-mobile-image-slide .productMobileVimeo figure { background: #000; }

    /* ??? Collapsed CTA bar ??? */
    .pickup-cta {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 16px;
      cursor: pointer;
      user-select: none;
      background: #fff;
      transition: background 0.15s;
      border: solid 1px #f0eddd;
       background: #f0eddd;
       border-radius: 6px;
    }
    .pickup-cta:hover { background: #faf8f5; }

    .cta-icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: #fff;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cta-icon svg {
      width: 17px; height: 17px;
      stroke: #000000; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
    }

    .cta-text { flex: 1; min-width: 0; }
    .cta-title {
      font-size: 15px;
      font-weight: 500;
      color: #1e1a14;
      line-height: 1.3;
    }
    .cta-sub {
      font-size: 13px;
      color: #3a7d52;
      margin-top: 1px;
      font-weight: 400;
    }

    .cta-badge {
      font-size: 11px;
      font-weight: 500;

      background: #edf3ee;

      border-radius: 20px;
      padding: 3px 9px;
      white-space: nowrap;
      flex-shrink: 0;
        border: solid 1px var(--primary-color);
        color: var(--primary-color);
    }

    .cta-chevron {
      width: 18px; height: 18px;
      stroke: #9a8e80; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }
    .pickup-widget.open .cta-chevron { transform: rotate(180deg); }
    /* ??? Expandable panel ??? */
  .pickup-widget.open .pickup-panel { max-height: 700px; }
    /* intro text */
  .panel-intro {
    font-size: 14px;
    color: #7a6e60;
    line-height: 1.65;
    margin-bottom: 14px;
  }

  /* ??? Store list ??? */
  .stores-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #ddd8d0;
    border: 1px solid #ddd8d0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 13px;
  }

  .store-row {
    display: flex;
    align-items: center;
    background: #faf8f5;
    padding: 10px 12px;
    gap: 10px;
    transition: background 0.12s;
  }
  .store-row:hover { background: #fff; }

  .store-pin {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: #ede9e2;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .store-pin svg {
    width: 13px; height: 13px;
    stroke: #5a5045; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .store-info { flex: 1; min-width: 0; }
  .store-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e1a14;
    line-height: 1.3;
  }
  .store-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
  }
  .store-tag {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 3px;
    background: #ede9e2;
    color: #7a6e60;
  }
  .store-tag.wh { background: #e6eee9; color: #3d6b4f; }
  .store-note {
    font-size: 12px;
    color: #a07840;
    font-style: italic;
  }
  .store-address {
    font-size: 13px;
    color: #000;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.4;
  }

  .dir-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    text-decoration: none;
    border: solid 1px var(--primary-color);
    color: var(--primary-color);
    border-radius: 5px;
    padding: 2px 8px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .dir-link:hover { color: #ffffff; border-color: var(--primary-color); background: var(--primary-color); }
  .dir-link svg {
    width: 10px; height: 10px;
    stroke: currentColor; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* ??? Call footer ??? */
  .call-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #edf3ee;
    border: 1px solid #c5d9c9;
    border-radius: 8px;
    padding: 11px 13px;
  }
  .call-icon {
    width: 32px; height: 32px;
    border-radius: 7px;
    background: #d4e8da;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .call-icon svg {
    width: 15px; height: 15px;
    stroke: #2e6640; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .call-text p {
    font-size: 14px;
    color: #2e5c3a;
    line-height: 1.45;
    margin-bottom: 3px;
  }
  .call-text a {
    font-size: 15px;
    font-weight: 500;
    color: #1e4a2a;
    text-decoration: none;
    letter-spacing: 0.02em;
  }
  .call-text a:hover { text-decoration: underline; }