/* =============================
       Fonts
    ============================== */
    @font-face { font-family: 'IvyOra Display Light'; src: url('https://static.showit.co/file/6K-DMaFoRzaGZznZHzYl9w/51489/ivyora_display_light.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
    @font-face { font-family: 'HK Grotesk Regular'; src: url('https://static.showit.co/file/35m_BraZTDq4VLWFn684bA/51489/hkgrotesk-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
    @font-face { font-family: 'HK Grotesk Medium Legacy'; src: url('https://static.showit.co/file/QmQA99BcSpCMzssQufFE0Q/51489/hkgrotesk-mediumlegacy.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
    @font-face { font-family: 'IvyOra Text Regular'; src: url('https://static.showit.co/file/KyZnl-7hRyu363T8fhUPEg/51489/ivyora_text_regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }

    /* =============================
       Layout & Base
    ============================== */
    .tss-container * { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
    .tss-container {
        max-width: 1350px !important; margin: 0 auto !important; padding: 20px !important;
        display: grid !important; grid-template-columns: 59% auto !important; gap: 40px !important;
        font-family: 'HK Grotesk Regular', 'Arial', sans-serif !important; color: #333 !important;
    }

    /* =============================
       Desktop Gallery Grid (non-mobile section)
    ============================== */
    .tss-gallery-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: sticky;
        top: 100px;
        align-self: start;
        height: fit-content;
      }

      .tss-main-image-container {
        width: 100%;
        background: #f0f0f0;
        overflow: hidden;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s ease;
        position: relative;
      }

      .tss-main-gallery-image {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
      }

      .tss-main-image-container:hover .tss-main-gallery-image {
        transform: scale(1.02);
      }

      .tss-thumbnail-container {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .tss-thumbnail-gallery {
        display: flex;
        overflow-x: hidden;
        scroll-behavior: smooth;
        gap: 12px;
        flex: 1;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .tss-thumbnail-gallery::-webkit-scrollbar {
        display: none;
      }

      .tss-thumbnail {
        flex: 0 0 120px;
        width: 120px;
        height: 120px;
        background: #f0f0f0;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 2px solid transparent;
      }

      .tss-thumb-nav {
        flex: 0 0 32px;
        width: 42px;
        height: 42px;
        background-color: #fff;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        color: #333;
        transition: all 0.2s ease;
        z-index: 2;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      #thumbPrev{
        left: 20px;
      }
      #thumbNext{
        right: 20px;
      }
      .tss-thumb-nav:hover {
        opacity: 0.8;
        /*transform: scale(1.1);*/
      }

      .tss-thumb-nav:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        /*transform: none;*/
      }

      .tss-thumb-nav:disabled:hover {
        background: rgba(0, 0, 0, 0.1);
        /*transform: none;*/
      }

      .tss-thumbnail.active {
        border-color: #957b66;
        transform: scale(0.95);
      }

      .tss-thumbnail:hover {
        transform: scale(0.98);
        border-color: #957b66;
      }

      .tss-thumbnail.active:hover {
        transform: scale(0.95);
      }

      .tss-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

    /* =============================
       Sticky Right Section (Product)
    ============================== */
    .right-section { background: white !important; border-radius: 10px !important; padding: 0 30px 30px !important; height: fit-content !important; position: sticky !important; top: 20px !important; align-self: start !important; }
    .product-header-wrapper { margin-bottom: 40px !important; }
    .tss-product-category { color: #999 !important; font-size: 0.8rem !important; margin-bottom: 15px !important; }
    .tss-product-title { font-family: 'IvyOra Display Light', 'Times New Roman', serif !important; font-size: 2.5rem !important; font-weight: 300 !important; margin-bottom: 20px !important; text-align: unset !important; }
    .tss-price { font-size: 1rem !important; margin-bottom: 8px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
    .tss-price-original { text-decoration: line-through !important; color: #999 !important; }
    .tss-price-sale { color: #957b66 !important; font-weight: 500 !important; }
    .tss-rating { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 20px !important; }
    .tss-stars { color: rgba(149,123,102,1) !important; font-size: 1rem !important; }
    .tss-trusted-by { font-size: 0.8rem !important; color: #666 !important; text-decoration: none !important; }
    .tss-trusted-by:hover { text-decoration: underline !important; }

    /* =============================
       Add to Cart + Demo Buttons
    ============================== */
    .tss-add-to-cart-button {
        background: #000 !important; color: #fff !important; padding: 15px 30px !important; border: none !important; border-radius: 25px !important;
        width: 100% !important; font-size: 1rem !important; cursor: pointer !important; margin-bottom: 10px !important;
        display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
        transition: background-color 0.3s ease !important;
    }
    .tss-add-to-cart-button.added { background: #957b66 !important; color: #ffffff !important; }
    .tss-add-to-cart-button .cart-icon { position: relative !important; transition: transform 0.3s ease !important; }
    .tss-add-to-cart-button.added .cart-icon { transform: scale(1.1) !important; }
    .tss-add-to-cart-button .cart-icon-default { transition: opacity 0.15s ease !important; }
    .tss-add-to-cart-button .cart-icon-added { opacity: 0 !important; position: absolute !important; top: 0 !important; left: 0 !important; transition: opacity 0.15s ease 0.15s !important; }
    .tss-add-to-cart-button.added .cart-icon-default { opacity: 0 !important; }
    .tss-add-to-cart-button.added .cart-icon-added { opacity: 1 !important; }
    .tss-payment-plan-notice { color: #666 !important; font-size: 0.8rem !important; margin-bottom: 20px !important; }
    .tss-view-demo-button {
        background: #f7f7f7 !important; color: #000 !important; padding: 15px 30px !important; border: none !important; border-radius: 25px !important;
        width: 100% !important; font-size: 0.9rem !important; text-align: center !important; cursor: pointer !important; transition: all 0.2s ease !important;
        display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    }
    .tss-view-demo-button:hover { background: #d7d7d7 !important; }

    /* =============================
       Tabs + Content
    ============================== */
    .tss-product-description { font-size: 0.9rem !important; line-height: 1.6 !important; color: #000 !important; margin-bottom: 30px !important; }
    .tss-product-tabs-container { display: flex !important; border-bottom: 1px solid #eee !important; margin-bottom: 20px !important; }
    .tss-product-tab { flex: 1 !important; text-align: center !important; padding: 10px !important; color: #999 !important; font-size: 0.9rem !important; border-bottom: 2px solid transparent !important; cursor: pointer !important; transition: all 0.3s ease !important; }
    .tss-product-tab.active { font-family: 'HK Grotesk Medium Legacy', 'HK Grotesk Regular', 'Arial', sans-serif !important; color: #000 !important; border-bottom-color: #957b66 !important; cursor: pointer !important; }
    .tss-tabs-content-wrapper { position: relative !important; overflow: hidden !important; transition: height 0.4s ease !important; }
    .tss-tab-content { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; opacity: 0 !important; transform: translateY(20px) !important; transition: opacity 0.3s ease, transform 0.3s ease !important; pointer-events: none !important; }
    .tss-tab-content-active { position: relative !important; opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; }

    /* =============================
       Lists / Features
    ============================== */
    .tss-whats-inside-list { display: flex; flex-direction: column; gap: 15px; }
    .tss-whats-inside-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.6; }
    .tss-whats-inside-item .checkmark { color: #957b66; font-weight: bold; flex-shrink: 0; margin-top: 2px; }
    .features { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 50px; }
    .feature { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
    .checkmark { color: #957b66; font-weight: bold; }

    /* =============================
       Video
    ============================== */
    .tss-video-container { position: relative !important; width: 100% !important; height: 0 !important; padding-bottom: 56.25% !important; border-radius: 8px !important; overflow: hidden !important; }
    .tss-video-container iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }

    /* =============================
       Collections
    ============================== */
    .tss-collections-wrapper { background: #f7f7f7 !important; padding: 30px !important; margin: 30px -30px -30px -30px !important; border-radius: 15px !important; }
    .tss-collection-section { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
    .tss-collection-title { font-size: 1.1rem !important; font-weight: bold !important; margin-bottom: 15px !important; text-align: unset !important; font-family: 'HK Grotesk Regular', 'Arial', sans-serif !important; }
    .tss-collection-subtitle { font-size: 0.8rem !important; color: #2b2b2b !important; margin-bottom: 20px !important; }
    .tss-related-product { display: flex !important; align-items: center !important; gap: 18px !important; padding: 15px !important; background: #fff !important; border-radius: 8px !important; margin-bottom: 10px !important; }
    .tss-collection-product-image { width: 90px !important; height: 90px !important; background-size: cover !important; background-position: center !important; border-radius: 5px !important; flex-shrink: 0 !important;position:relative; }
    .tss-collection-product-image a{position: absolute;height: 100%;width: 100%;left:0;top: 0;}
    .tss-collection-product-info { flex: 1 !important; }
    .tss-collection-product-title { font-family: 'IvyOra Text Regular', 'Times New Roman', serif !important; font-size: 18px !important; margin-bottom: 5px !important; line-height: 1.5; }
    .tss-collection-product-title a{text-decoration: none !important;}
    .tss-collection-product-title a:hover{text-decoration: underline !important;}
    .tss-collection-product-category { margin-bottom: 5px !important; background-color: #f0f0f0 !important; color: #333 !important; padding: 4px 8px !important; border-radius: 4px !important; font-size: 0.7rem !important; letter-spacing: 0.5px !important; display: inline-block !important; }
    .tss-collection-product-price { font-size: .8rem !important; }
    .tss-collection-price-container { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
    .tss-collection-original-price { text-decoration: line-through !important; color: #999 !important; font-size: 0.75rem !important; order: -1 !important; }
    .tss-collection-sale-badge { background: #957b66 !important; color: #fff !important; font-size: 0.65rem !important; padding: 3px 8px !important; border-radius: 4px !important; font-weight: 500 !important; letter-spacing: 0.3px !important; }
    .tss-collection-add-button {
        width: 30px !important; height: 30px !important; background: #000 !important; color: #fff !important; border: none !important; border-radius: 50% !important;
        cursor: pointer !important; font-size: 1.2rem !important; margin-left: auto !important; transition: transform 0.3s ease !important;
        display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important;
    }
    .tss-collection-add-button.added { background: #957b66 !important; color: #ffffff !important; transform: rotate(360deg) !important; }
    .tss-collection-add-button .plus-icon { transition: opacity 0.15s ease !important; }
    .tss-collection-add-button .check-icon { opacity: 0 !important; position: absolute !important; transition: opacity 0.15s ease 0.15s !important; }
    .tss-collection-add-button.added .plus-icon { opacity: 0 !important; }
    .tss-collection-add-button.added .check-icon { opacity: 1 !important; }
    button.added { cursor: default !important; pointer-events: none !important; }
    .added_to_cart.wc-forward { display: none !important; }


/* TSS Modal Styles */
      .tss-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0px);
        opacity: 0;
        transition: opacity 0.3s ease, background-color 0.3s ease,
          backdrop-filter 0.3s ease;
      }

      .tss-modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
      }

      .tss-modal-content {
        position: relative;
        width: 90vw;
        height: 90vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 50px;
        transform: scale(0.9);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
      }

      .tss-modal.active .tss-modal-content {
        transform: scale(1);
        opacity: 1;
      }

      .tss-modal-image-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 0;
      }

      .tss-modal-image {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
      }

      .tss-modal-close {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #333;
        font-size: 40px;
        cursor: pointer;
        z-index: 1001;
        background: rgba(0, 0, 0, 0.1);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
      }

      .tss-modal-close:hover {
        background: rgba(0, 0, 0, 0.2);
        transform: scale(1.1);
      }

      .tss-modal-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.1);
        color: #333;
        border: none;
        font-size: 24px;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 50%;
        transition: all 0.2s ease;
        z-index: 1001;
      }

      .tss-modal-nav:hover {
        background: rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(1.1);
      }

      .tss-modal-prev {
        left: 30px;
      }

      .tss-modal-next {
        right: 30px;
      }

      .tss-modal-counter {
        color: #333;
        background: rgba(0, 0, 0, 0.1);
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 14px;
        flex-shrink: 0;
      }

      /* Hide scrollbar when modal is open */
      body.modal-open {
        overflow: hidden;
      }

      /* Ensure the image containers can slide cleanly */
#mainGalleryImage,
.tss-modal-image {
  display: block;
  width: 100%;
  height: auto;
}

.tss-slide-parent {
  position: relative !important;
  overflow: hidden !important;
}
.tss-slide-abs {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* change if you need 'cover' */
  will-change: transform;
}
.tss-whats-inside-item strong,
.tss-whats-inside-item b {
font-family: 'HKGrotesk Bold';
}

    /* =============================
       Responsive
    ============================== */
    @media (max-width: 768px) {
        .tss-container { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; padding: 0 !important; max-width: 100% !important; }
        .tss-gallery-section { gap: 20px !important; }
        .right-section { position: relative !important; top: 0 !important; padding: 20px 0 !important; margin: 0 !important; }
        .product-header-wrapper { padding: 20px !important; margin: -20px -20px 20px -20px !important; }
        .tss-product-title { font-size: 2rem !important; }
        .tss-add-to-cart-button, .tss-view-demo-button { padding: 12px 25px !important; }
        .tss-collections-wrapper { padding: 20px !important; margin: 20px -20px -20px -20px !important; }
        .tss-related-product { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; text-align: left !important; }
        .tss-collection-product-image { width: 100% !important; height: 200px !important; margin-bottom: 10px !important; }
        .tss-collection-add-button { align-self: flex-end !important; margin-top: 10px !important; }
        .features { /* grid-template-columns: 1fr; */ gap: 12px; }
        .feature { font-size: 12px; gap: 8px; }
        .tss-thumbnail { flex: 0 0 70px; width: 70px; height: 70px; }
        .tss-product-tab { font-size: 12px !important;}
    }