/* ==========================================================================
           BUSA MONOCHROME LUXURY DESIGN SYSTEM (PURE BLACK #000 & PURE WHITE #FFF ONLY)
           ========================================================================== */

        /* --- GLOBAL ROOT MONOCHROME VARIABLES --- */
        html[data-bs-theme="light"] {
          --bs-primary: #000000 !important;
          --bs-primary-rgb: 0, 0, 0 !important;
          --bs-link-color: #000000 !important;
          --bs-link-hover-color: #000000 !important;
          --bs-border-color: #000000 !important;
          --bs-body-bg: #ffffff !important;
          --bs-body-color: #000000 !important;
        }

        html[data-bs-theme="dark"] {
          --bs-primary: #ffffff !important;
          --bs-primary-rgb: 255, 255, 255 !important;
          --bs-link-color: #ffffff !important;
          --bs-link-hover-color: #ffffff !important;
          --bs-border-color: #ffffff !important;
          --bs-body-bg: #000000 !important;
          --bs-body-color: #ffffff !important;
        }

        /* --- ACCENTS, BADGES, AND BUTTONS --- */
        
        /* Cart counter & other primary badges */
        html[data-bs-theme="light"] .cart-counter,
        html[data-bs-theme="light"] .badge.bg-primary,
        html[data-bs-theme="light"] .bg-primary {
          background-color: #000000 !important;
          color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .cart-counter,
        html[data-bs-theme="dark"] .badge.bg-primary,
        html[data-bs-theme="dark"] .bg-primary {
          background-color: #ffffff !important;
          color: #000000 !important;
        }

        /* Primary buttons */
        html[data-bs-theme="light"] .btn-primary {
          background-color: #000000 !important;
          border-color: #000000 !important;
          color: #ffffff !important;
        }
        html[data-bs-theme="light"] .btn-primary:hover {
          background-color: #ffffff !important;
          border-color: #000000 !important;
          color: #000000 !important;
        }

        html[data-bs-theme="dark"] .btn-primary {
          background-color: #ffffff !important;
          border-color: #ffffff !important;
          color: #000000 !important;
        }
        html[data-bs-theme="dark"] .btn-primary:hover {
          background-color: #000000 !important;
          border-color: #ffffff !important;
          color: #ffffff !important;
        }

        /* Accent text links and primary colors */
        html[data-bs-theme="light"] .text-primary,
        html[data-bs-theme="light"] .text-secondary {
          color: #000000 !important;
        }
        html[data-bs-theme="dark"] .text-primary,
        html[data-bs-theme="dark"] .text-secondary {
          color: #ffffff !important;
        }

        /* --- MONOCHROME DARK MODE OVERRIDES (PURE #000 & #FFF ONLY) --- */
        html[data-bs-theme="dark"] body,
        html[data-bs-theme="dark"] .main-wrapper,
        html[data-bs-theme="dark"] section,
        html[data-bs-theme="dark"] main,
        html[data-bs-theme="dark"] .home-hero-section,
        html[data-bs-theme="dark"] .gshop-hero-section,
        html[data-bs-theme="dark"] .choose-us-section,
        html[data-bs-theme="dark"] .on-sale-banner,
        html[data-bs-theme="dark"] .bg-white,
        html[data-bs-theme="dark"] .bg-light,
        html[data-bs-theme="dark"] .bg-white-soft,
        html[data-bs-theme="dark"] header,
        html[data-bs-theme="dark"] footer,
        html[data-bs-theme="dark"] .card,
        html[data-bs-theme="dark"] .offcanvas,
        html[data-bs-theme="dark"] .modal-content,
        html[data-bs-theme="dark"] .user-sidebar-menu,
        html[data-bs-theme="dark"] .gshop-header,
        html[data-bs-theme="dark"] .gshop-footer,
        html[data-bs-theme="dark"] .gshop-search-panel,
        html[data-bs-theme="dark"] .offcanvas-header,
        html[data-bs-theme="dark"] .modal-header,
        html[data-bs-theme="dark"] .dropdown-menu,
        html[data-bs-theme="dark"] .select2-dropdown,
        html[data-bs-theme="dark"] .product-card,
        html[data-bs-theme="dark"] .vertical-product-card,
        html[data-bs-theme="dark"] .search-suggestion-wrapper,
        html[data-bs-theme="dark"] .category-slider,
        html[data-bs-theme="dark"] .gshop-category-slider,
        html[data-bs-theme="dark"] .bg-sidebar,
        html[data-bs-theme="dark"] .modal-body,
        html[data-bs-theme="dark"] input,
        html[data-bs-theme="dark"] select,
        html[data-bs-theme="dark"] textarea,
        html[data-bs-theme="dark"] .theme-input,
        html[data-bs-theme="dark"] .form-control,
        html[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #ffffff !important;
        }

        html[data-bs-theme="dark"] a,
        html[data-bs-theme="dark"] p,
        html[data-bs-theme="dark"] span,
        html[data-bs-theme="dark"] h1,
        html[data-bs-theme="dark"] h2,
        html[data-bs-theme="dark"] h3,
        html[data-bs-theme="dark"] h4,
        html[data-bs-theme="dark"] h5,
        html[data-bs-theme="dark"] h6,
        html[data-bs-theme="dark"] label,
        html[data-bs-theme="dark"] td,
        html[data-bs-theme="dark"] th,
        html[data-bs-theme="dark"] li,
        html[data-bs-theme="dark"] i {
          color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .bg-none,
        html[data-bs-theme="dark"] input.bg-none,
        html[data-bs-theme="dark"] .form-control.bg-none {
          background-color: transparent !important;
          background: transparent !important;
        }

        html[data-bs-theme="dark"] .subscribe_form .form-control {
          border: 0 !important;
          box-shadow: none !important;
          color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
          color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .text-dark,
        html[data-bs-theme="dark"] .fw-semibold.text-dark,
        html[data-bs-theme="dark"] .text-muted {
          color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .border-bottom,
        html[data-bs-theme="dark"] .border-top,
        html[data-bs-theme="dark"] .border,
        html[data-bs-theme="dark"] hr {
          border-color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .btn-dark {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .btn-dark:hover {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .btn-light {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .gshop-navbar {
          box-shadow: none !important;
          -webkit-box-shadow: none !important;
        }

        /* --- TRANSPARENT HEADER & STICKY ANIMATIONS --- */
        .header-sticky,
        .header-sticky .gshop-header,
        .header-sticky .bg-white,
        .header-sticky .bg-light,
        .header-sticky .navbar {
          transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                      border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* Transparent when at the top */
        .header-sticky:not(.sticky-on),
        .header-sticky:not(.sticky-on) .gshop-header,
        .header-sticky:not(.sticky-on) .bg-white,
        .header-sticky:not(.sticky-on) .bg-light,
        .header-sticky:not(.sticky-on) .navbar {
          background-color: transparent !important;
          border-bottom: none !important;
          box-shadow: none !important;
        }

        /* Light Mode sticky header background */
        html[data-bs-theme="light"] .header-sticky.sticky-on,
        html[data-bs-theme="light"] .header-sticky.sticky-on .gshop-header,
        html[data-bs-theme="light"] .header-sticky.sticky-on .bg-white,
        html[data-bs-theme="light"] .header-sticky.sticky-on .bg-light,
        html[data-bs-theme="light"] .header-sticky.sticky-on .navbar {
          background-color: #ffffff !important;
          box-shadow: none !important;
        }

        /* Dark Mode sticky header background */
        html[data-bs-theme="dark"] .header-sticky.sticky-on,
        html[data-bs-theme="dark"] .header-sticky.sticky-on .gshop-header,
        html[data-bs-theme="dark"] .header-sticky.sticky-on .bg-white,
        html[data-bs-theme="dark"] .header-sticky.sticky-on .bg-light,
        html[data-bs-theme="dark"] .header-sticky.sticky-on .navbar {
          background-color: #000000 !important;
          box-shadow: none !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Logo Visibility Controls (Swapped Uploads Fix) */
        
        /* 1. Transparent Header at Top of Homepage -> ALWAYS White Logo (.logo-light) */
        .home-page .header-sticky:not(.sticky-on) .logo-light {
          opacity: 1 !important;
          display: inline-block !important;
          z-index: 2 !important;
        }
        .home-page .header-sticky:not(.sticky-on) .logo-dark {
          opacity: 0 !important;
          display: none !important;
          z-index: 1 !important;
        }

        /* 2. Sticky Header OR Other Pages -> Match Theme Mode */
        /* Light Mode -> Black Logo (.logo-dark) */
        html[data-bs-theme="light"] .header-sticky.sticky-on .logo-light,
        html[data-bs-theme="light"] .other-page .logo-light {
          opacity: 0 !important;
          display: none !important;
          z-index: 1 !important;
        }
        html[data-bs-theme="light"] .header-sticky.sticky-on .logo-dark,
        html[data-bs-theme="light"] .other-page .logo-dark {
          opacity: 1 !important;
          display: inline-block !important;
          z-index: 2 !important;
        }

        /* Dark Mode -> White Logo (.logo-light) */
        html[data-bs-theme="dark"] .header-sticky.sticky-on .logo-light,
        html[data-bs-theme="dark"] .other-page .logo-light {
          opacity: 1 !important;
          display: inline-block !important;
          z-index: 2 !important;
        }
        html[data-bs-theme="dark"] .header-sticky.sticky-on .logo-dark,
        html[data-bs-theme="dark"] .other-page .logo-dark {
          opacity: 0 !important;
          display: none !important;
          z-index: 1 !important;
        }

        /* Scroll to Top Button monochrome styles */
        html[data-bs-theme="light"] .scroll-top-btn {
          background-color: #000000 !important;
          color: #ffffff !important;
          border: 1px solid #000000 !important;
        }
        html[data-bs-theme="light"] .scroll-top-btn i,
        html[data-bs-theme="light"] .scroll-top-btn span {
          color: #ffffff !important;
        }
        html[data-bs-theme="light"] .scroll-top-btn:hover {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #000000 !important;
        }
        html[data-bs-theme="light"] .scroll-top-btn:hover i,
        html[data-bs-theme="light"] .scroll-top-btn:hover span {
          color: #000000 !important;
        }

        html[data-bs-theme="dark"] .scroll-top-btn {
          background-color: #ffffff !important;
          color: #000000 !important;
          border: 1px solid #ffffff !important;
        }
        html[data-bs-theme="dark"] .scroll-top-btn i,
        html[data-bs-theme="dark"] .scroll-top-btn span {
          color: #000000 !important;
        }
        html[data-bs-theme="dark"] .scroll-top-btn:hover {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .scroll-top-btn:hover i,
        html[data-bs-theme="dark"] .scroll-top-btn:hover span {
          color: #ffffff !important;
        }

        /* Wishlist button (.cm-hart) monochrome styling */
        html[data-bs-theme="light"] .cm-hart {
          background-color: transparent !important;
          color: #000000 !important;
          border: 1px solid #000000 !important;
          border-radius: 4px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        html[data-bs-theme="light"] .cm-hart i {
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .cm-hart:hover {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #000000 !important;
        }
        html[data-bs-theme="light"] .cm-hart:hover i {
          color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .cm-hart {
          background-color: transparent !important;
          color: #ffffff !important;
          border: 1px solid #ffffff !important;
          border-radius: 4px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        html[data-bs-theme="dark"] .cm-hart i {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .cm-hart:hover {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .cm-hart:hover i {
          color: #000000 !important;
        }

        /* Product Details Page - Product Image Background White in both modes */
        .product-details-area .quickview-double-slider,
        .product-details-area .quickview-product-slider,
        .product-details-area .quickview-product-slider .swiper-slide,
        .product-details-area .product-thumbnail-slider,
        .product-details-area .product-thumbnail-slider .swiper-slide {
          background-color: #ffffff !important;
        }

        /* Quantity Selector (.product-qty) monochrome styling */
        html[data-bs-theme="light"] .product-qty button {
          background-color: #ffffff !important;
          color: #000000 !important;
          border: 1px solid #000000 !important;
        }
        html[data-bs-theme="light"] .product-qty button:hover {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #000000 !important;
        }
        html[data-bs-theme="light"] .product-qty input {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-top: 1px solid #000000 !important;
          border-bottom: 1px solid #000000 !important;
          border-left: 0 !important;
          border-right: 0 !important;
        }

        html[data-bs-theme="dark"] .product-qty button {
          background-color: #000000 !important;
          color: #ffffff !important;
          border: 1px solid #ffffff !important;
        }
        html[data-bs-theme="dark"] .product-qty button:hover {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .product-qty input {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-top: 1px solid #ffffff !important;
          border-bottom: 1px solid #ffffff !important;
          border-left: 0 !important;
          border-right: 0 !important;
        }

        /* Add to Cart / Buy Now buttons monochrome styling */
        html[data-bs-theme="light"] .cm-add-to-cart-btn,
        html[data-bs-theme="light"] .cm-add-to-cart-btn span {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #000000 !important;
        }
        html[data-bs-theme="light"] .cm-add-to-cart-btn:hover,
        html[data-bs-theme="light"] .cm-add-to-cart-btn:hover span {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #000000 !important;
        }

        html[data-bs-theme="dark"] .cm-add-to-cart-btn,
        html[data-bs-theme="dark"] .cm-add-to-cart-btn span {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .cm-add-to-cart-btn:hover,
        html[data-bs-theme="dark"] .cm-add-to-cart-btn:hover span {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #ffffff !important;
        }

        /* Premium BUSA Login Modal Design */
        .busa-login-modal {
          border-radius: 16px !important;
          padding: 0 !important;
          transition: all 0.3s ease-in-out;
        }
        .busa-login-modal .modal-body {
          background-color: transparent !important;
        }
        
        /* Light Mode Styles */
        html[data-bs-theme="light"] .busa-login-modal {
          background-color: #ffffff !important;
          border: 1px solid rgba(0, 0, 0, 0.1) !important;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
        }
        html[data-bs-theme="light"] .busa-login-modal .modal-title {
          color: #000000 !important;
          font-family: 'Montserrat', 'Inter', sans-serif;
          font-weight: 700 !important;
          letter-spacing: 0.5px;
        }
        html[data-bs-theme="light"] .busa-login-modal p.text-muted,
        html[data-bs-theme="light"] .busa-login-modal .form-text,
        html[data-bs-theme="light"] .busa-login-modal .text-muted {
          color: rgba(0, 0, 0, 0.6) !important;
        }
        html[data-bs-theme="light"] .busa-login-modal .form-label {
          color: #000000 !important;
          font-weight: 600 !important;
        }
        html[data-bs-theme="light"] .busa-login-modal .premium-input-group {
          background-color: #f9f9f9 !important;
          border: 1px solid rgba(0, 0, 0, 0.15) !important;
          border-radius: 8px !important;
          overflow: hidden;
          transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        html[data-bs-theme="light"] .busa-login-modal .premium-input-group:focus-within {
          border-color: #000000 !important;
          box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
        }
        html[data-bs-theme="light"] .busa-login-modal .premium-select,
        html[data-bs-theme="light"] .busa-login-modal .premium-input {
          background-color: transparent !important;
          color: #000000 !important;
          border: none !important;
          box-shadow: none !important;
          outline: none !important;
          padding: 12px 16px !important;
          font-size: 16px !important;
        }
        html[data-bs-theme="light"] .busa-login-modal .premium-select {
          border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
          max-width: 100px !important;
          font-weight: 600 !important;
        }

        /* Dark Mode Styles */
        html[data-bs-theme="dark"] .busa-login-modal {
          background-color: #0c0c0e !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
        }
        html[data-bs-theme="dark"] .busa-login-modal .modal-title {
          color: #ffffff !important;
          font-family: 'Montserrat', 'Inter', sans-serif;
          font-weight: 700 !important;
          letter-spacing: 0.5px;
        }
        html[data-bs-theme="dark"] .busa-login-modal p.text-muted,
        html[data-bs-theme="dark"] .busa-login-modal .form-text,
        html[data-bs-theme="dark"] .busa-login-modal .text-muted {
          color: rgba(255, 255, 255, 0.55) !important;
        }
        html[data-bs-theme="dark"] .busa-login-modal .form-label {
          color: #ffffff !important;
          font-weight: 600 !important;
        }
        html[data-bs-theme="dark"] .busa-login-modal .premium-input-group {
          background-color: #141416 !important;
          border: 1px solid rgba(255, 255, 255, 0.12) !important;
          border-radius: 8px !important;
          overflow: hidden;
          transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        html[data-bs-theme="dark"] .busa-login-modal .premium-input-group:focus-within {
          border-color: #ffffff !important;
          box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
        }
        html[data-bs-theme="dark"] .busa-login-modal .premium-select,
        html[data-bs-theme="dark"] .busa-login-modal .premium-input {
          background-color: transparent !important;
          color: #ffffff !important;
          border: none !important;
          box-shadow: none !important;
          outline: none !important;
          padding: 12px 16px !important;
          font-size: 16px !important;
        }
        html[data-bs-theme="dark"] .busa-login-modal .premium-select {
          border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
          max-width: 100px !important;
          font-weight: 600 !important;
        }
        html[data-bs-theme="dark"] .busa-login-modal .premium-select option {
          background-color: #141416 !important;
          color: #ffffff !important;
        }
        
        /* General BUSA Branding inside modal */
        .busa-modal-logo {
          font-family: 'Cinzel', 'Playfair Display', 'Times New Roman', serif;
          font-size: 28px;
          font-weight: 800;
          letter-spacing: 8px;
          text-align: center;
          margin-bottom: 24px;
          text-transform: uppercase;
        }
        html[data-bs-theme="light"] .busa-modal-logo {
          color: #000000;
        }
        html[data-bs-theme="dark"] .busa-modal-logo {
          color: #ffffff;
        }
        
        .busa-login-modal .btn {
          border-radius: 8px !important;
          padding: 12px !important;
          font-size: 14px !important;
          letter-spacing: 1px;
          text-transform: uppercase;
          transition: all 0.3s ease-in-out !important;
          position: relative;
        }

        .busa-btn-spinner {
          display: inline-block;
          width: 1rem;
          height: 1rem;
          vertical-align: -0.125em;
          border: 2px solid currentColor;
          border-right-color: transparent;
          border-radius: 50%;
          animation: busa-spin 0.75s linear infinite;
        }
        @keyframes busa-spin {
          to { transform: rotate(360deg); }
        }
        .busa-btn-loading {
          opacity: 0.82 !important;
          cursor: not-allowed !important;
          pointer-events: none !important;
        }
        .busa-auth-status-msg {
          font-size: 13px;
          color: #6c757d;
          animation: busa-fade-in 0.25s ease-out;
        }
        html[data-bs-theme="dark"] .busa-auth-status-msg {
          color: #adb5bd;
        }
        @keyframes busa-fade-in {
          from { opacity: 0; transform: translateY(-3px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        /* OTP Inputs Grid Styling */
        .busa-login-modal .otp-group .otp-input {
          height: 48px !important;
          border-radius: 8px !important;
          font-size: 18px !important;
          font-weight: 700 !important;
          transition: all 0.2s ease-in-out !important;
        }
        html[data-bs-theme="light"] .busa-login-modal .otp-group .otp-input {
          background-color: #f9f9f9 !important;
          border: 1px solid rgba(0, 0, 0, 0.15) !important;
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .busa-login-modal .otp-group .otp-input:focus {
          border-color: #000000 !important;
          box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
        }
        html[data-bs-theme="dark"] .busa-login-modal .otp-group .otp-input {
          background-color: #141416 !important;
          border: 1px solid rgba(255, 255, 255, 0.12) !important;
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .busa-login-modal .otp-group .otp-input:focus {
          border-color: #ffffff !important;
          box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
        }

        /* Dynamic Price Text Color for Monochrome Theme */
        html[data-bs-theme="light"] .price-text-danger {
          color: #000000 !important;
        }
        html[data-bs-theme="dark"] .price-text-danger {
          color: #ffffff !important;
        }

        /* Cart Drawer & Mobile Menu Drawer monochrome styling */
        html[data-bs-theme="light"] .cart-list_menu,
        html[data-bs-theme="light"] .offcanvas_menu {
          background-color: #ffffff !important;
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .cart-list_menu h3,
        html[data-bs-theme="light"] .cart-list_menu h4,
        html[data-bs-theme="light"] .cart-list_menu h5,
        html[data-bs-theme="light"] .cart-list_menu h6,
        html[data-bs-theme="light"] .cart-list_menu p,
        html[data-bs-theme="light"] .cart-list_menu span,
        html[data-bs-theme="light"] .cart-list_menu a,
        html[data-bs-theme="light"] .cart-list_menu li,
        html[data-bs-theme="light"] .cart-list_menu div,
        html[data-bs-theme="light"] .offcanvas_menu a,
        html[data-bs-theme="light"] .offcanvas_menu li,
        html[data-bs-theme="light"] .offcanvas-close,
        html[data-bs-theme="light"] .offcanvas-close i,
        html[data-bs-theme="light"] .remove_cart_btn,
        html[data-bs-theme="light"] .remove_cart_btn i {
          color: #000000 !important;
          background-color: transparent !important;
        }
        html[data-bs-theme="light"] .cart-navbar-wrapper li {
          border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        }

        html[data-bs-theme="dark"] .cart-list_menu,
        html[data-bs-theme="dark"] .offcanvas_menu {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        html[data-bs-theme="dark"] .cart-list_menu h3,
        html[data-bs-theme="dark"] .cart-list_menu h4,
        html[data-bs-theme="dark"] .cart-list_menu h5,
        html[data-bs-theme="dark"] .cart-list_menu h6,
        html[data-bs-theme="dark"] .cart-list_menu p,
        html[data-bs-theme="dark"] .cart-list_menu span,
        html[data-bs-theme="dark"] .cart-list_menu a,
        html[data-bs-theme="dark"] .cart-list_menu li,
        html[data-bs-theme="dark"] .cart-list_menu div,
        html[data-bs-theme="dark"] .offcanvas_menu a,
        html[data-bs-theme="dark"] .offcanvas_menu li,
        html[data-bs-theme="dark"] .offcanvas-close,
        html[data-bs-theme="dark"] .offcanvas-close i,
        html[data-bs-theme="dark"] .remove_cart_btn,
        html[data-bs-theme="dark"] .remove_cart_btn i {
          color: #ffffff !important;
          background-color: transparent !important;
        }
        html[data-bs-theme="dark"] .cart-navbar-wrapper li {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Cart Page (/carts) - Coupon Form & Summary card styling */
        .voucher-box,
        .cart-summery {
          border-radius: 0 !important;
          padding: 30px !important;
        }
        
        /* Light Mode */
        html[data-bs-theme="light"] .voucher-box,
        html[data-bs-theme="light"] .cart-summery {
          background-color: #ffffff !important;
          border: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        html[data-bs-theme="light"] .voucher-box h4,
        html[data-bs-theme="light"] .voucher-box .font-bold,
        html[data-bs-theme="light"] .cart-summery h5,
        html[data-bs-theme="light"] .cart-summery p {
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .coupon-form {
          gap: 12px !important;
        }
        html[data-bs-theme="light"] .coupon-form .coupon-input {
          background-color: #ffffff !important;
          color: #000000 !important;
          border: 1px solid #000000 !important;
          border-radius: 0 !important;
          margin-bottom: 0 !important;
        }
        html[data-bs-theme="light"] .coupon-form .coupon-input::placeholder {
          color: rgba(0, 0, 0, 0.4) !important;
        }
        html[data-bs-theme="light"] .coupon-form .apply-coupon-btn:not(.d-none),
        html[data-bs-theme="light"] .coupon-form .clear-coupon-btn:not(.d-none) {
          background-color: #000000 !important;
          color: #ffffff !important;
          border: 1px solid #000000 !important;
          border-radius: 0 !important;
          height: 48px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        html[data-bs-theme="light"] .coupon-form .apply-coupon-btn:not(.d-none):hover,
        html[data-bs-theme="light"] .coupon-form .clear-coupon-btn:not(.d-none):hover {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #000000 !important;
        }

        /* Dark Mode */
        html[data-bs-theme="dark"] .voucher-box,
        html[data-bs-theme="dark"] .cart-summery {
          background-color: #000000 !important;
          border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        html[data-bs-theme="dark"] .voucher-box h4,
        html[data-bs-theme="dark"] .voucher-box .font-bold,
        html[data-bs-theme="dark"] .cart-summery h5,
        html[data-bs-theme="dark"] .cart-summery p {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .coupon-form {
          gap: 12px !important;
        }
        html[data-bs-theme="dark"] .coupon-form .coupon-input {
          background-color: #000000 !important;
          color: #ffffff !important;
          border: 1px solid #ffffff !important;
          border-radius: 0 !important;
          margin-bottom: 0 !important;
        }
        html[data-bs-theme="dark"] .coupon-form .coupon-input::placeholder {
          color: rgba(255, 255, 255, 0.4) !important;
        }
        html[data-bs-theme="dark"] .coupon-form .apply-coupon-btn:not(.d-none),
        html[data-bs-theme="dark"] .coupon-form .clear-coupon-btn:not(.d-none) {
          background-color: #ffffff !important;
          color: #000000 !important;
          border: 1px solid #ffffff !important;
          border-radius: 0 !important;
          height: 48px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        html[data-bs-theme="dark"] .coupon-form .apply-coupon-btn:not(.d-none):hover,
        html[data-bs-theme="dark"] .coupon-form .clear-coupon-btn:not(.d-none):hover {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #ffffff !important;
        }

        /* Cart Drawer Buttons Specific overrides to resolve selector conflict */
        html[data-bs-theme="light"] .cart-list_menu a.cm-add-to-cart-btn {
          background-color: #000000 !important;
          color: #ffffff !important;
          border: 1px solid #000000 !important;
          width: 100% !important;
        }
        html[data-bs-theme="light"] .cart-list_menu a.cm-add-to-cart-btn:hover {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #000000 !important;
        }

        html[data-bs-theme="dark"] .cart-list_menu a.cm-add-to-cart-btn {
          background-color: #ffffff !important;
          color: #000000 !important;
          border: 1px solid #ffffff !important;
          width: 100% !important;
        }
        html[data-bs-theme="dark"] .cart-list_menu a.cm-add-to-cart-btn:hover {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #ffffff !important;
        }

        /* Checkout Page (/checkout) - Sidebar & Order Summary styling */
        
        /* Light Mode */
        html[data-bs-theme="light"] .cm-bg-3 {
          background-color: #f5f5f5 !important;
          color: #000000 !important;
          border-left: 1px solid #dbd7d7 !important;
        }
        html[data-bs-theme="light"] .cm-bg-3 h3,
        html[data-bs-theme="light"] .cm-bg-3 h4,
        html[data-bs-theme="light"] .cm-bg-3 h5,
        html[data-bs-theme="light"] .cm-bg-3 h6,
        html[data-bs-theme="light"] .cm-bg-3 div,
        html[data-bs-theme="light"] .cm-bg-3 span:not(.product-qty-badge),
        html[data-bs-theme="light"] .cm-bg-3 td,
        html[data-bs-theme="light"] .cm-bg-3 a {
          color: #000000 !important;
        }

        html[data-bs-theme="light"] .cm-bg-3 span.product-qty-badge,
        .product-qty-badge {
          background-color: #000000 !important;
          color: #ffffff !important;
          -webkit-text-fill-color: #ffffff !important;
          border: 2px solid #ffffff !important;
        }
        html[data-bs-theme="light"] .cm-bg-3 .text-muted {
          color: rgba(0, 0, 0, 0.6) !important;
        }
        html[data-bs-theme="light"] .cm-bg-3 .btn-primary {
          background-color: #000000 !important;
          color: #ffffff !important;
          border: 1px solid #000000 !important;
          border-radius: 0 !important;
        }
        html[data-bs-theme="light"] .cm-bg-3 .btn-primary:hover {
          background-color: #ffffff !important;
          color: #000000 !important;
          border-color: #000000 !important;
        }

        /* Dark Mode */
        html[data-bs-theme="dark"] .cm-bg-3 {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        html[data-bs-theme="dark"] .cm-bg-3 h3,
        html[data-bs-theme="dark"] .cm-bg-3 h4,
        html[data-bs-theme="dark"] .cm-bg-3 h5,
        html[data-bs-theme="dark"] .cm-bg-3 h6,
        html[data-bs-theme="dark"] .cm-bg-3 div,
        html[data-bs-theme="dark"] .cm-bg-3 span,
        html[data-bs-theme="dark"] .cm-bg-3 td,
        html[data-bs-theme="dark"] .cm-bg-3 a {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .cm-bg-3 .text-muted {
          color: rgba(255, 255, 255, 0.6) !important;
        }
        html[data-bs-theme="dark"] .cm-bg-3 .btn-primary {
          background-color: #ffffff !important;
          color: #000000 !important;
          border: 1px solid #ffffff !important;
          border-radius: 0 !important;
        }
        html[data-bs-theme="dark"] .cm-bg-3 .btn-primary:hover {
          background-color: #000000 !important;
          color: #ffffff !important;
          border-color: #ffffff !important;
        }

        /* Checkout Page (/checkout) - Billing address options, address card & placeholders styling */
        
        /* Light Mode */
        html[data-bs-theme="light"] .checkout-billing-choice,
        html[data-bs-theme="light"] .checkout-billing-dropdown,
        html[data-bs-theme="light"] .checkout-section-card,
        html[data-bs-theme="light"] .checkout-steps .tt-address-content .tt-address-info,
        html[data-bs-theme="light"] .checkout-steps .tt-address-content .tt-custom-radio:checked + .tt-address-info {
          background-color: #ffffff !important;
          border-color: #ddd !important;
          color: #222222 !important;
        }
        html[data-bs-theme="light"] .checkout-choice-option {
          color: #222222 !important;
        }
        html[data-bs-theme="light"] input::placeholder,
        html[data-bs-theme="light"] textarea::placeholder {
          color: rgba(0, 0, 0, 0.4) !important;
        }

        /* Dark Mode */
        html[data-bs-theme="dark"] .checkout-billing-choice,
        html[data-bs-theme="dark"] .checkout-billing-dropdown,
        html[data-bs-theme="dark"] .checkout-section-card,
        html[data-bs-theme="dark"] .checkout-steps .tt-address-content .tt-address-info,
        html[data-bs-theme="dark"] .checkout-steps .tt-address-content .tt-custom-radio:checked + .tt-address-info {
          background-color: #000000 !important;
          border-color: rgba(255, 255, 255, 0.1) !important;
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .checkout-choice-option {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] input::placeholder,
        html[data-bs-theme="dark"] textarea::placeholder {
          color: rgba(255, 255, 255, 0.4) !important;
        }

        /* Checkout Form Address Wrapper */
        html[data-bs-theme="light"] .checkout-inline-address-form {
          background-color: #ffffff !important;
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .checkout-inline-address-form h5,
        html[data-bs-theme="light"] .checkout-inline-address-form label {
          color: #000000 !important;
        }

        html[data-bs-theme="dark"] .checkout-inline-address-form {
          background-color: transparent !important;
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .checkout-inline-address-form h5,
        html[data-bs-theme="dark"] .checkout-inline-address-form label {
          color: #ffffff !important;
        }

        /* Unified Global & Checkout Borders & Inputs styling */
        
        /* Light Mode */
        html[data-bs-theme="light"] .checkout-inline-address-form {
          border: none !important;
          background-color: transparent !important;
        }
        html[data-bs-theme="light"] .checkout-section-card,
        html[data-bs-theme="light"] .checkout-billing-choice,
        html[data-bs-theme="light"] .checkout-billing-dropdown,
        html[data-bs-theme="light"] .checkout-steps .checkout-radio {
          border: none !important;
          background-color: transparent !important;
          padding: 0 !important;
        }
        html[data-bs-theme="light"] .label-input-field input,
        html[data-bs-theme="light"] .label-input-field select:not(.select2-hidden-accessible),
        html[data-bs-theme="light"] .label-input-field textarea,
        html[data-bs-theme="light"] .label-input-field .theme-input,
        html[data-bs-theme="light"] .label-input-field .form-control,
        html[data-bs-theme="light"] input,
        html[data-bs-theme="light"] select:not(.select2-hidden-accessible),
        html[data-bs-theme="light"] textarea,
        html[data-bs-theme="light"] .theme-input,
        html[data-bs-theme="light"] .form-control,
        html[data-bs-theme="light"] .select2-container--default .select2-selection--single,
        html[data-bs-theme="light"] .select2-selection {
          border: none !important;
          border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
          border-bottom-color: rgba(0, 0, 0, 0.2) !important;
          border-top: none !important;
          border-left: none !important;
          border-right: none !important;
          border-radius: 0 !important;
          background-color: transparent !important;
          color: #000000 !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
        html[data-bs-theme="light"] .label-input-field label {
          position: static !important;
          display: block !important;
          background: transparent !important;
          padding: 0 !important;
          margin-bottom: 6px !important;
          font-size: 11px !important;
          font-weight: 700 !important;
          color: rgba(0, 0, 0, 0.6) !important;
          letter-spacing: 0.08em !important;
          text-transform: uppercase !important;
        }

        /* Dark Mode (High visibility bottom-only borders / underline) */
        html[data-bs-theme="dark"] .checkout-inline-address-form {
          border: none !important;
          background-color: transparent !important;
        }
        html[data-bs-theme="dark"] .checkout-section-card,
        html[data-bs-theme="dark"] .checkout-billing-choice,
        html[data-bs-theme="dark"] .checkout-billing-dropdown,
        html[data-bs-theme="dark"] .checkout-steps .checkout-radio {
          border: none !important;
          background-color: transparent !important;
          padding: 0 !important;
        }
        html[data-bs-theme="dark"] .label-input-field input,
        html[data-bs-theme="dark"] .label-input-field select:not(.select2-hidden-accessible),
        html[data-bs-theme="dark"] .label-input-field textarea,
        html[data-bs-theme="dark"] .label-input-field .theme-input,
        html[data-bs-theme="dark"] .label-input-field .form-control,
        html[data-bs-theme="dark"] input,
        html[data-bs-theme="dark"] select:not(.select2-hidden-accessible),
        html[data-bs-theme="dark"] textarea,
        html[data-bs-theme="dark"] .theme-input,
        html[data-bs-theme="dark"] .form-control,
        html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
        html[data-bs-theme="dark"] .select2-selection {
          border: none !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
          border-bottom-color: rgba(255, 255, 255, 0.3) !important;
          border-top: none !important;
          border-left: none !important;
          border-right: none !important;
          border-radius: 0 !important;
          background-color: transparent !important;
          color: #ffffff !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
        html[data-bs-theme="dark"] .label-input-field label {
          position: static !important;
          display: block !important;
          background: transparent !important;
          padding: 0 !important;
          margin-bottom: 6px !important;
          font-size: 11px !important;
          font-weight: 700 !important;
          color: rgba(255, 255, 255, 0.6) !important;
          letter-spacing: 0.08em !important;
          text-transform: uppercase !important;
        }

        /* Reset select2 container padding and outer border globally */
        html[data-bs-theme="light"] .select2-container,
        html[data-bs-theme="dark"] .select2-container {
          border: none !important;
          padding: 0 !important;
          background-color: transparent !important;
          border-radius: 0 !important;
        }
        
        /* Vertically center select2 text selection and arrows */
        html[data-bs-theme="light"] .select2-container .select2-selection--single,
        html[data-bs-theme="dark"] .select2-container .select2-selection--single {
          height: 48px !important;
          display: flex !important;
          align-items: center !important;
        }
        html[data-bs-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered,
        html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
          padding-left: 0 !important;
          color: inherit !important;
          line-height: normal !important;
        }
        html[data-bs-theme="light"] .select2-container--default .select2-selection--single .select2-selection__arrow,
        html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow {
          top: 50% !important;
          transform: translateY(-50%) !important;
          right: 0 !important;
        }

        /* ==========================================================================
           Preloader Overlay - Top Stacking Priority
           ========================================================================== */
        #preloader {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          background-color: #000000 !important;
          z-index: 9999999 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }

        /* Hide mobile bottom toolbar completely while preloader is active */
        #preloader ~ .mobile-toolbar,
        body:has(#preloader) .mobile-toolbar {
          opacity: 0 !important;
          visibility: hidden !important;
          pointer-events: none !important;
        }

        /* ==========================================================================
           Mobile Bottom Toolbar - Sticky Navigation (Fixed to Viewport Bottom)
           ========================================================================== */
        .mobile-toolbar {
          display: none;
          position: fixed !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100% !important;
          height: 56px !important;
          height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
          padding-bottom: env(safe-area-inset-bottom, 0px) !important;
          background-color: #ffffff !important;
          border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06) !important;
          z-index: 1040 !important;
          margin: 0 !important;
          transition: opacity 0.3s ease, visibility 0.3s ease !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
          transform: translateZ(0);
          -webkit-transform: translateZ(0);
        }

        @media (max-width: 991.98px) {
          .mobile-toolbar {
            display: block !important;
          }
          body {
            padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
          }
          .checkout-section {
            padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
          }
          .scroll-top-btn {
            bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
          }
        }

        .mobile-toolbar .d-table,
        .mobile-toolbar .table-layout-fixed {
          display: table !important;
          table-layout: fixed !important;
          width: 100% !important;
          height: 56px !important;
          margin: 0 !important;
        }

        .mobile-toolbar-item {
          display: table-cell !important;
          width: 25% !important;
          height: 56px !important;
          padding: 6px 2px !important;
          text-align: center !important;
          vertical-align: middle !important;
          text-decoration: none !important;
          cursor: pointer !important;
          color: #111111 !important;
          background: transparent !important;
          border: none !important;
          user-select: none;
          -webkit-user-select: none;
        }

        .mobile-toolbar-item:hover,
        .mobile-toolbar-item:focus,
        .mobile-toolbar-item:active {
          color: #000000 !important;
          text-decoration: none !important;
        }

        .mobile-toolbar-icon {
          display: block !important;
          font-size: 18px !important;
          line-height: 1 !important;
          margin-bottom: 3px !important;
          text-align: center !important;
        }

        .mobile-toolbar-icon i {
          font-size: 18px !important;
          line-height: 1 !important;
          color: #111111 !important;
        }

        .mobile-toolbar-icon svg {
          display: inline-block !important;
          vertical-align: middle !important;
          width: 20px !important;
          height: 20px !important;
        }

        .mobile-toolbar-label {
          display: block !important;
          font-size: 10.5px !important;
          font-weight: 500 !important;
          line-height: 1.2 !important;
          letter-spacing: 0.02em !important;
          color: #222222 !important;
          text-align: center !important;
        }

        .mobile-cart-icon {
          position: relative !important;
          display: inline-block !important;
        }

        .mobile-cart-icon .cart-counter {
          position: absolute !important;
          top: -6px !important;
          right: -10px !important;
          font-size: 10px !important;
          font-weight: 700 !important;
          padding: 2px 5px !important;
          border-radius: 10px !important;
          line-height: 1 !important;
          background-color: #000000 !important;
          color: #ffffff !important;
        }

        /* Search dropup above mobile toolbar */
        .mobile-toolbar .gshop-header-search .dropdown-menu {
          bottom: 100% !important;
          top: auto !important;
          left: 10px !important;
          right: 10px !important;
          margin-bottom: 8px !important;
          width: calc(100vw - 20px) !important;
          max-width: 480px !important;
          background: #ffffff !important;
          border-radius: 12px !important;
          box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15) !important;
          border: 1px solid rgba(0, 0, 0, 0.08) !important;
        }

        /* Offcanvas Left Menu */
        .offcanvas-left-menu {
          position: fixed !important;
          top: 0 !important;
          left: -425px !important;
          width: 320px !important;
          max-width: 85vw !important;
          height: 100vh !important;
          background: #ffffff !important;
          z-index: 1060 !important;
          overflow-y: auto !important;
          padding: 30px 20px !important;
          box-shadow: 2px 0 20px rgba(0, 0, 0, 0.12) !important;
          transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .offcanvas-left-menu.active {
          left: 0 !important;
        }

        .offcanvas-left-menu .offcanvas-close {
          position: absolute !important;
          right: 15px !important;
          top: 15px !important;
          width: 32px !important;
          height: 32px !important;
          border: none !important;
          background: #f3f3f3 !important;
          color: #111111 !important;
          border-radius: 50% !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          cursor: pointer !important;
        }

        /* Mobile Bottom Toolbar - Light Mode */
        html[data-bs-theme="light"] .mobile-toolbar {
          background-color: #ffffff !important;
          border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        }
        html[data-bs-theme="light"] .mobile-toolbar-item {
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .mobile-toolbar-item .mobile-toolbar-icon i {
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .mobile-toolbar-item svg [stroke] {
          stroke: #000000 !important;
        }
        html[data-bs-theme="light"] .mobile-toolbar-item svg [fill]:not([fill="none"]) {
          fill: #000000 !important;
        }
        html[data-bs-theme="light"] .mobile-toolbar-label {
          color: #000000 !important;
        }

        /* Mobile Bottom Toolbar - Dark Mode */
        html[data-bs-theme="dark"] .mobile-toolbar {
          background-color: #121212 !important;
          border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
        }
        html[data-bs-theme="dark"] .mobile-toolbar-item {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .mobile-toolbar-item .mobile-toolbar-icon i {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .mobile-toolbar-item svg [stroke] {
          stroke: #ffffff !important;
        }
        html[data-bs-theme="dark"] .mobile-toolbar-item svg [fill]:not([fill="none"]) {
          fill: #ffffff !important;
        }
        html[data-bs-theme="dark"] .mobile-toolbar-label {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .mobile-cart-icon .cart-counter {
          background-color: #ffffff !important;
          color: #000000 !important;
        }
        html[data-bs-theme="dark"] .mobile-toolbar .gshop-header-search .dropdown-menu {
          background: #1e1e1e !important;
          border-color: rgba(255, 255, 255, 0.12) !important;
          box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4) !important;
        }
        html[data-bs-theme="dark"] .offcanvas-left-menu {
          background: #181818 !important;
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .offcanvas-left-menu .offcanvas-close {
          background: #2a2a2a !important;
          color: #ffffff !important;
        }

        /* ==========================================================================
           Customer Account Mobile Drawer (#customerSidebar)
           ========================================================================== */
        #customerSidebar.offcanvas,
        .customer-offcanvas-menu.offcanvas {
          position: fixed !important;
          top: 0 !important;
          bottom: 0 !important;
          left: 0 !important;
          width: 320px !important;
          max-width: 85vw !important;
          height: 100vh !important;
          height: 100dvh !important;
          z-index: 1060 !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch;
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .offcanvas-backdrop {
          z-index: 1050 !important;
        }

        #customerSidebar .offcanvas-header {
          padding: 16px 20px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
        }

        #customerSidebar .offcanvas-title {
          font-size: 13px !important;
          font-weight: 700 !important;
          letter-spacing: 0.08em !important;
          text-transform: uppercase !important;
        }

        #customerSidebar .btn-close {
          width: 30px !important;
          height: 30px !important;
          padding: 0 !important;
          margin: 0 !important;
          border-radius: 50% !important;
          opacity: 0.8 !important;
          cursor: pointer !important;
        }

        #customerSidebar .account-nav > h6 {
          display: none !important;
        }

        #customerSidebar .account-nav {
          padding: 0 !important;
          margin: 0 !important;
          border: none !important;
          border-radius: 0 !important;
          background: transparent !important;
          box-shadow: none !important;
        }

        #customerSidebar .account-nav-menu {
          list-style: none !important;
          padding: 0 !important;
          margin: 0 !important;
          border: none !important;
        }

        #customerSidebar .account-nav-menu li {
          margin: 0 !important;
          padding: 0 !important;
        }

        #customerSidebar .account-nav-menu a {
          display: flex !important;
          align-items: center !important;
          padding: 13px 20px !important;
          font-size: 13.5px !important;
          font-weight: 500 !important;
          letter-spacing: 0.01em !important;
          text-decoration: none !important;
          border: none !important;
          border-radius: 0 !important;
          transition: background-color 0.15s ease, color 0.15s ease !important;
        }

        #customerSidebar .account-nav-menu a span.me-2 {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 22px !important;
          min-width: 22px !important;
          margin-right: 12px !important;
        }

        #customerSidebar .account-nav-menu a span.me-2 svg {
          width: 17px !important;
          height: 17px !important;
        }

        /* Light Theme */
        html[data-bs-theme="light"] #customerSidebar {
          background-color: #ffffff !important;
          color: #000000 !important;
          box-shadow: 2px 0 25px rgba(0, 0, 0, 0.15) !important;
          border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
        }

        html[data-bs-theme="light"] #customerSidebar .offcanvas-header {
          background-color: #ffffff !important;
          border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        }

        html[data-bs-theme="light"] #customerSidebar .offcanvas-title {
          color: #000000 !important;
        }

        html[data-bs-theme="light"] #customerSidebar .account-nav-menu li {
          border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        }

        html[data-bs-theme="light"] #customerSidebar .account-nav-menu a {
          color: #111111 !important;
        }

        html[data-bs-theme="light"] #customerSidebar .account-nav-menu a:hover,
        html[data-bs-theme="light"] #customerSidebar .account-nav-menu a.active {
          background-color: #f7f7f7 !important;
          color: #000000 !important;
          font-weight: 600 !important;
        }

        html[data-bs-theme="light"] #customerSidebar .account-nav-menu a svg [stroke] {
          stroke: #111111 !important;
        }

        html[data-bs-theme="light"] #customerSidebar .account-nav-menu a svg [fill]:not([fill="none"]) {
          fill: #111111 !important;
        }

        /* Dark Theme */
        html[data-bs-theme="dark"] #customerSidebar {
          background-color: #121212 !important;
          color: #ffffff !important;
          box-shadow: 2px 0 25px rgba(0, 0, 0, 0.5) !important;
          border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        html[data-bs-theme="dark"] #customerSidebar .offcanvas-header {
          background-color: #161616 !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        html[data-bs-theme="dark"] #customerSidebar .offcanvas-title {
          color: #ffffff !important;
        }

        html[data-bs-theme="dark"] #customerSidebar .btn-close {
          filter: invert(1) !important;
        }

        html[data-bs-theme="dark"] #customerSidebar .account-nav-menu li {
          border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        }

        html[data-bs-theme="dark"] #customerSidebar .account-nav-menu a {
          color: rgba(255, 255, 255, 0.85) !important;
        }

        html[data-bs-theme="dark"] #customerSidebar .account-nav-menu a:hover,
        html[data-bs-theme="dark"] #customerSidebar .account-nav-menu a.active {
          background-color: rgba(255, 255, 255, 0.08) !important;
          color: #ffffff !important;
          font-weight: 600 !important;
        }

        html[data-bs-theme="dark"] #customerSidebar .account-nav-menu a svg [stroke] {
          stroke: #ffffff !important;
        }

        html[data-bs-theme="dark"] #customerSidebar .account-nav-menu a svg [fill]:not([fill="none"]) {
          fill: #ffffff !important;
        }

        /* --- Customer Dashboard / My Account Overrides --- */
        .my-account .achievement-box .icon {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 0 !important;
        }
        
        /* Light Mode */
        html[data-bs-theme="light"] .my-account .bg-white,
        html[data-bs-theme="light"] .my-account .account-info,
        html[data-bs-theme="light"] .my-account .account-nav {
          background-color: #ffffff !important;
          border: 1px solid rgba(0, 0, 0, 0.1) !important;
          border-radius: 0 !important;
          box-shadow: none !important;
        }
        html[data-bs-theme="light"] .my-account .profile-pic {
          background-color: #f3f4f6 !important;
          border: 1px solid rgba(0, 0, 0, 0.1) !important;
          border-radius: 0 !important;
        }
        html[data-bs-theme="light"] .my-account .profile-pic img {
          border-radius: 0 !important;
        }
        html[data-bs-theme="light"] .my-account .achievement-box .icon {
          background-color: #ffffff !important;
          border: 1px solid rgba(0, 0, 0, 0.15) !important;
          border-radius: 0 !important;
        }
        html[data-bs-theme="light"] .my-account .achievement-box .icon svg [stroke] {
          stroke: #000000 !important;
        }
        html[data-bs-theme="light"] .my-account .achievement-box .icon svg [fill]:not([fill="none"]) {
          fill: #000000 !important;
        }
        html[data-bs-theme="light"] .my-account .account-nav-menu a {
          color: #000000 !important;
          border-radius: 0 !important;
        }
        html[data-bs-theme="light"] .my-account .account-nav-menu a.active {
          background-color: #f3f4f6 !important;
          font-weight: 700 !important;
        }
        html[data-bs-theme="light"] .my-account .account-nav-menu a svg [fill]:not([fill="none"]) {
          fill: #000000 !important;
        }
        html[data-bs-theme="light"] .my-account .account-nav-menu a svg [stroke] {
          stroke: #000000 !important;
        }

        /* Dark Mode */
        html[data-bs-theme="dark"] .my-account .bg-white,
        html[data-bs-theme="dark"] .my-account .account-info,
        html[data-bs-theme="dark"] .my-account .account-nav {
          background-color: #000000 !important;
          border: 1px solid rgba(255, 255, 255, 0.15) !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .my-account h4,
        html[data-bs-theme="dark"] .my-account h5,
        html[data-bs-theme="dark"] .my-account h6,
        html[data-bs-theme="dark"] .my-account label,
        html[data-bs-theme="dark"] .my-account span,
        html[data-bs-theme="dark"] .my-account p {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .my-account .profile-pic {
          background-color: #000000 !important;
          border: 1px solid rgba(255, 255, 255, 0.15) !important;
          border-radius: 0 !important;
        }
        html[data-bs-theme="dark"] .my-account .profile-pic img {
          border-radius: 0 !important;
        }
        /* Invert default avatar placeholder image to convert its white background to pure black */
        html[data-bs-theme="dark"] .my-account .profile-pic img[src*="avatar.png"] {
          filter: invert(1) !important;
        }
        html[data-bs-theme="dark"] .my-account .achievement-box .icon {
          background-color: #000000 !important;
          border: 1px solid rgba(255, 255, 255, 0.15) !important;
          border-radius: 0 !important;
        }
        html[data-bs-theme="dark"] .my-account .achievement-box .icon svg [stroke] {
          stroke: #ffffff !important;
        }
        html[data-bs-theme="dark"] .my-account .achievement-box .icon svg [fill]:not([fill="none"]) {
          fill: #ffffff !important;
        }
        html[data-bs-theme="dark"] .my-account .achievement-box h4 {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .my-account .achievement-box span {
          color: rgba(255, 255, 255, 0.6) !important;
        }
        html[data-bs-theme="dark"] .my-account .account-nav-menu a {
          color: rgba(255, 255, 255, 0.7) !important;
          border-radius: 0 !important;
        }
        html[data-bs-theme="dark"] .my-account .account-nav-menu a.active {
          background-color: rgba(255, 255, 255, 0.1) !important;
          color: #ffffff !important;
          font-weight: 700 !important;
        }
        html[data-bs-theme="dark"] .my-account .account-nav-menu a svg [fill]:not([fill="none"]) {
          fill: #ffffff !important;
        }
        html[data-bs-theme="dark"] .my-account .account-nav-menu a svg [stroke] {
          stroke: #ffffff !important;
        }
        
        /* Tables inside My Account */
        html[data-bs-theme="dark"] .my-account table {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .my-account table th {
          color: #ffffff !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        }
        html[data-bs-theme="dark"] .my-account table td {
          color: rgba(255, 255, 255, 0.8) !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        html[data-bs-theme="dark"] .my-account table td .view-invoice i {
          color: #ffffff !important;
        }
        
        /* Forms inside My Account */
        html[data-bs-theme="dark"] .my-account .file-upload {
          background-color: #16161a !important;
          border: 1px dashed rgba(255, 255, 255, 0.2) !important;
        }
        html[data-bs-theme="dark"] .my-account .file-upload p {
          color: #ffffff !important;
        }

        /* Responsive Customer Dashboard for Mobile & Tablet */
        @media (max-width: 991px) {
          .my-account .profile-header-wrap {
            display: flex !important;
            align-items: center !important;
            gap: 16px !important;
            width: 100% !important;
          }
          .my-account .profile-header-wrap .profile-pic {
            width: 70px !important;
            height: 70px !important;
            min-width: 70px !important;
            margin: 0 !important;
          }
          .my-account .profile-header-wrap .profile-pic img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
          }
          .my-account .profile-details-wrap {
            flex-grow: 1 !important;
          }
          .my-account .profile-details-wrap h4 {
            margin: 0 0 4px 0 !important;
            font-size: 18px !important;
            line-height: 1.2 !important;
          }
          .my-account .profile-details-wrap .info-meta {
            display: flex !important;
            flex-direction: column !important;
            gap: 4px !important;
          }
          .my-account .profile-details-wrap .info-meta span {
            font-size: 12px !important;
          }
          
          /* 2x2 Grid for Stats boxes on Mobile/Tablet */
          .my-account .profile-achievements {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 12px !important;
            width: 100% !important;
            margin-top: 16px !important;
          }
          .my-account .achievement-box {
            margin: 0 !important;
            padding: 10px !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            background-color: #000000 !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            border-radius: 0 !important;
          }
          html[data-bs-theme="light"] .my-account .achievement-box {
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            background-color: #ffffff !important;
          }
          .my-account .achievement-box .icon {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            margin: 0 !important;
          }
          .my-account .achievement-box .icon svg {
            width: 18px !important;
            height: 18px !important;
          }
          .my-account .achievement-box h4 {
            font-size: 16px !important;
            margin-bottom: 0 !important;
          }
          .my-account .achievement-box span {
            font-size: 11px !important;
            display: block !important;
            line-height: 1.2 !important;
          }
        }

        /* Prevent table column wraps on mobile for scrollable table layout */
        .my-account table th,
        .my-account table td {
          white-space: nowrap !important;
        }

        /* Mobile Side Menu & Sidebar Cart Overrides */
        
        /* Light Mode */
        html[data-bs-theme="light"] .offcanvas_menu,
        html[data-bs-theme="light"] .cart-list_menu {
          background-color: #ffffff !important;
          border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
          border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .offcanvas_menu a,
        html[data-bs-theme="light"] .cart-list_menu a,
        html[data-bs-theme="light"] .cart-list_menu h3,
        html[data-bs-theme="light"] .cart-list_menu h4,
        html[data-bs-theme="light"] .cart-list_menu h6,
        html[data-bs-theme="light"] .cart-list_menu span {
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .offcanvas_menu .offcanvas-close,
        html[data-bs-theme="light"] .cart-list_menu .offcanvas-close {
          color: #000000 !important;
        }
        html[data-bs-theme="light"] .offcanvas_menu a.active {
          color: #000000 !important;
          font-weight: 700 !important;
        }

        /* Dark Mode */
        html[data-bs-theme="dark"] .offcanvas_menu,
        html[data-bs-theme="dark"] .cart-list_menu {
          background-color: #000000 !important;
          border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
          border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .offcanvas_menu a,
        html[data-bs-theme="dark"] .cart-list_menu a,
        html[data-bs-theme="dark"] .cart-list_menu h3,
        html[data-bs-theme="dark"] .cart-list_menu h4,
        html[data-bs-theme="dark"] .cart-list_menu h6,
        html[data-bs-theme="dark"] .cart-list_menu span {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .offcanvas_menu .offcanvas-close,
        html[data-bs-theme="dark"] .cart-list_menu .offcanvas-close {
          color: #ffffff !important;
        }
        html[data-bs-theme="dark"] .offcanvas_menu a.active {
          color: #ffffff !important;
          font-weight: 700 !important;
        }
        html[data-bs-theme="dark"] .offcanvas_menu ul li {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        html[data-bs-theme="dark"] .offcanvas_menu ul li a {
          border: none !important;
        }

        /* --------------------------------------------------------------------------
           MOBILE ANTI-ZOOM & HORIZONTAL OVERFLOW PREVENTION (Android & iPhone)
           -------------------------------------------------------------------------- */
        html, body {
          touch-action: pan-x pan-y;
          -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
          overflow-x: clip;
          max-width: 100%;
        }

        @media (max-width: 768px) {
          /* Prevent iOS Safari from auto-zooming on input focus */
          input,
          select,
          textarea,
          .form-control,
          .premium-input,
          .premium-select,
          .theme-input {
            font-size: 16px !important;
          }

          /* Prevent modal from expanding viewport or shifting right on mobile */
          body.modal-open {
            padding-right: 0 !important;
            overflow-x: hidden !important;
          }

          .modal-open .fixed-top,
          .modal-open .fixed-bottom,
          .modal-open .sticky-top,
          .modal-open .mobile-toolbar {
            padding-right: 0 !important;
          }
        }

        .plousios-discount-tag {
          border: none !important;
          outline: none !important;
        }