/* moved out of views/jegulo/template.php (batch65) so browsers cache it */
/* Theme Toggle Button */
        .theme-toggle-wrapper {
            /*display: flex;*/
			display: none;
            align-items: center;
        }

        .theme-toggle-btn {
            width: 23px;
            height: 23px;
            border: none;
            border-radius: 50%;
            background: linear-gradient(135deg, #10A97B 0%, #0B6E66 100%);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .theme-toggle-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        .theme-icon {
            font-size: 13px;
            transition: all 0.3s ease;
        }

        .theme-toggle-btn.light-mode {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            color: #333;
        }

        /* Dark Mode Styles */
        html.dark-mode,
        body.dark-mode {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .header-area {
            background-color: #2c2c2c !important;
            border-bottom: 1px solid #444 !important;
        }

        body.dark-mode .page-content-wrapper {
            background-color: #1a1a1a !important;
        }

        body.dark-mode .card, 
        body.dark-mode .top-product-card {
            background-color: #2c2c2c !important;
            border-color: #444 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .form-control {
            background-color: #3a3a3a !important;
            border-color: #555 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .suha-sidenav-wrapper {
            background-color: #2c2c2c !important;
        }

        
        body.dark-mode .product-title {
            color: #e0e0e0 !important;
        }

        body.dark-mode .sale-price {
            color: #4CAF50 !important;
        }

        /* F2 (2026-10-19): the old teal border/hover on every link was removed; buttons keep white text */
        body.dark-mode .btn-primary,
        body.dark-mode .btn-success {
            color: #ffffff !important;
        }

        body.dark-mode .btn-outline-success {
            background-color: transparent !important;
            color: #087F5F !important;
            border-color: #087F5F !important;
        }

        body.dark-mode .btn-outline-success:hover {
            background-color: #087F5F !important;
            color: #ffffff !important;
            border-color: #087F5F !important;
        }

        body.dark-mode .pagination .page-link {
            background-color: #3a3a3a !important;
            border-color: #555555 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .pagination .page-link:hover {
            background-color: #0A8A66 !important;
            border-color: #0A8A66 !important;
            color: #ffffff !important;
        }

        body.dark-mode .pagination .page-item.active .page-link {
            background-color: #0A8A66 !important;
            border-color: #0A8A66 !important;
            color: #ffffff !important;
        }

        body.dark-mode .pagination .page-item.disabled .page-link {
            background-color: #2a2a2a !important;
            border-color: #444444 !important;
            color: #888888 !important;
        }

        body.dark-mode .breadcrumb {
            background-color: transparent !important;
        }

        /* Dark mode filter sidebar */
        body.dark-mode .modern-filter-sidebar {
            background-color: #2c2c2c !important;
            border-color: #555555 !important;
        }

        body.dark-mode .section-header h6 {
            color: #ffffff !important;
            font-size: 14px !important;
            font-weight: 600 !important;
        }

        body.dark-mode .section-header i {
            color: #087F5F !important;
        }

        body.dark-mode .modern-search-input {
            background-color: #3a3a3a !important;
            border-color: #555555 !important;
            color: #e0e0e0 !important;
            font-size: 12px !important;
        }

        body.dark-mode .modern-search-input::placeholder {
            color: #aaaaaa !important;
        }

        body.dark-mode .category-pill,
        body.dark-mode .sort-pill,
        body.dark-mode .rating-pill {
            background-color: #3a3a3a !important;
            border-color: #555555 !important;
            color: #e0e0e0 !important;
            font-weight: 500 !important;
        }


        body.dark-mode .category-pill:hover,
        body.dark-mode .sort-pill:hover,
        body.dark-mode .rating-pill:hover {
            background-color: #0A8A66 !important;
            color: #ffffff !important;
            border-color: #0A8A66 !important;
        }

        body.dark-mode .category-radio:checked + .category-pill,
        body.dark-mode .sort-radio:checked + .sort-pill,
        body.dark-mode .rating-radio:checked + .rating-pill {
            background-color: #087F5F !important;
            color: #ffffff !important;
            border-color: #087F5F !important;
        }

        body.dark-mode .modern-select {
            background-color: #3a3a3a !important;
            border-color: #555555 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .price-label {
            color: #e0e0e0 !important;
            font-size: 14px !important;
            font-weight: 500 !important;
        }

        body.dark-mode .modern-price-input {
            background-color: #3a3a3a !important;
            border-color: #555555 !important;
            color: #e0e0e0 !important;
            font-size: 14px !important;
        }

        body.dark-mode .apply-btn {
            background-color: #087F5F !important;
            color: #ffffff !important;
            border-color: #087F5F !important;
            font-size: 15px !important;
            font-weight: 600 !important;
        }

        body.dark-mode .reset-btn {
            background-color: #6c757d !important;
            color: #ffffff !important;
            border-color: #6c757d !important;
            font-size: 15px !important;
            font-weight: 600 !important;
        }


        body.dark-mode .apply-btn:hover {
            background-color: #0A8A66 !important;
        }

        body.dark-mode .reset-btn:hover {
            background-color: #5a6268 !important;
        }

        /* Make desktop filter sidebar identical to mobile */
        .modern-filter-sidebar .price-input-group {
            display: flex !important;
            flex-direction: column !important;
            gap: 15px !important;
            align-items: stretch !important;
        }

        .modern-filter-sidebar .price-input-wrapper {
            width: 100% !important;
            flex: none !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 5px !important;
        }

        .modern-filter-sidebar .price-separator {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 20px !important;
            margin: 0 !important;
        }

        .modern-filter-sidebar .price-separator i {
            transform: rotate(90deg) !important;
            font-size: 16px !important;
        }

        /* Make filter actions vertical on all screen sizes */
        .filter-actions {
            flex-direction: column !important;
            display: flex !important;
            gap: 10px !important;
            margin-top: 20px !important;
        }

        .filter-actions .apply-btn,
        .filter-actions .reset-btn {
            width: 100% !important;
            border-radius: 25px !important;
        }

        body.dark-mode .breadcrumb-item a {
            color: #64B5F6 !important;
        }


        body.dark-mode .breadcrumb-item.active {
            color: #e0e0e0 !important;
        }

        body.dark-mode .btn-success {
            background-color: #4CAF50 !important;
            border-color: #4CAF50 !important;
        }

        body.dark-mode .btn-secondary {
            background-color: #555 !important;
            border-color: #555 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .badge {
            background-color: #555 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .badge.bg-danger {
            background-color: #f44336 !important;
        }

        body.dark-mode .badge.bg-success {
            background-color: #4CAF50 !important;
        }

        body.dark-mode .badge.bg-warning {
            background-color: #FF9800 !important;
            color: #000 !important;
        }

        body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
        body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
            color: #e0e0e0 !important;
        }

        

        body.dark-mode a {
            color: #5ED9AE;
        }

        body.dark-mode .small {
            color: #bbb !important;
        }

        body.dark-mode .container {
            color: #e0e0e0 !important;
        }

        body.dark-mode .toast,
        body.dark-mode .alert {
            background-color: #2c2c2c !important;
            border-color: #444 !important;
            color: #e0e0e0 !important;
        }

        /* Smooth transitions */
        * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        .theme-toggle-btn, .btn, .badge {
            transition: all 0.3s ease;
        }
		
		.cart-discount-container span {
    display: inline-block !important;
    font-size: 11px;
}

        /* Professional Price Display */
        #price-display {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            clear: both !important;
            margin-top: 12px !important;
            padding: 12px 16px !important;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
            border: 1px solid #dee2e6 !important;
            border-radius: 8px !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
            text-align: left !important;
            position: relative !important;
            float: none !important;
        }
        
        #price-display > div {
            display: flex !important;
            align-items: center !important;
            flex-shrink: 0 !important;
        }
        
        /* Force the cart form to use block layout */
        .cart-form {
            display: block !important;
        }
        
        .cart-form > * {
            display: block !important;
            width: 100% !important;
            clear: both !important;
            margin-bottom: 8px;
        }
        
        /* Exception for the flex row with buttons */
        .cart-form > .d-flex {
            display: flex !important;
            width: auto !important;
        }
        
        /* Professional Typography */
        #price-display * {
            font-size: 12px !important;
        }
        
        #price-display .text-muted {
            font-weight: 500 !important;
            color: #6c757d !important;
            letter-spacing: 0.3px !important;
        }
        
        #total-price {
            font-weight: 700 !important;
            color: #dc3545 !important;
            letter-spacing: -0.3px !important;
            text-shadow: 0 1px 2px rgba(220,53,69,0.1) !important;
        }
        
        #price-type {
            font-weight: 600 !important;
			font-size: 11px;
            color: #6c757d !important;
            letter-spacing: 0.5px !important;
            opacity: 0.8 !important;
        }
        
        #price-type.text-success {
            color: #198754 !important;
            background: rgba(25, 135, 84, 0.1) !important;
            padding: 2px 6px !important;
            border-radius: 4px !important;
            opacity: 1 !important;
        }
        
        /* Discount Price Styling */
        .price-with-discount {
            display: flex;
            align-items: center;
            margin-bottom: 4px !important;
        }
        
        .original-price {
            font-size: 11px !important;
            text-decoration: line-through !important;
            color: #6c757d !important;
            font-weight: 500 !important;
        }
        
        .discount-badge {
            background: linear-gradient(135deg, #dc3545, #c82333) !important;
            color: white !important;
            font-size: 10px !important;
            font-weight: 600 !important;
            padding: 2px 6px !important;
            border-radius: 12px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 2px !important;
            box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3) !important;
        }
        
        .discount-badge i {
            font-size: 8px !important;
        }
        
        #total-price.text-success {
            color: #198754 !important;
            text-shadow: 0 1px 2px rgba(25, 135, 84, 0.1) !important;
        }
        
        /* Wholesale enhanced styling */
        #price-display.wholesale-active {
            background: linear-gradient(135deg, #d1ecf1 0%, #B3E4C8 100%) !important;
            border-color: #bee5eb !important;
            box-shadow: 0 2px 8px rgba(25, 135, 84, 0.15) !important;
        }
        
        #price-display.wholesale-active #total-price {
            color: #198754 !important;
            text-shadow: 0 1px 2px rgba(25, 135, 84, 0.1) !important;
        }
        
        #wholesale-info {
            margin-top: 5px;
            animation: fadeIn 0.3s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Dark Mode Support */
        body.dark-mode .modern-price-display {
            background: rgba(39, 60, 50, 0.95);
        }

        body.dark-mode .price-label {
            color: #9DB3A6;
        }

        body.dark-mode .price-value {
            color: #f7fafc;
        }

        body.dark-mode .quantity-input {
            color: #273C32;
        }

        body.dark-mode .wholesale-savings {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
            border-color: rgba(16, 185, 129, 0.3);
        }

        body.dark-mode .savings-text {
            color: #d1fae5;
        }

        body.dark-mode .savings-text strong {
            color: #6ee7b7;
        }

        /* Animation Enhancements */
        .modern-cart-wrapper {
            animation: fadeInUp 0.6s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Loading States */
        .btn-action.loading {
            cursor: wait;
            opacity: 0.8;
        }

        .btn-action.loading .btn-text {
            opacity: 0.7;
        }

        .btn-action.loading .btn-icon {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Modern Custom Alert System */
        .custom-alert-container {
          pointer-events: none;
          opacity: 0;
          transform: translateX(-50%) translateY(-20px);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .custom-alert-container.show {
          pointer-events: all;
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
        
        .custom-alert {
          background: white;
          border-radius: 12px;
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
          border: none;
          padding: 16px 20px;
          display: flex;
          align-items: flex-start;
          gap: 14px;
          min-width: 380px;
          max-width: 520px;
          width: auto;
          position: relative;
          overflow: hidden;
        }
        
        .custom-alert::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
        }
        
        .custom-alert-error {
          border-left: 4px solid #ef4444;
        }
        
        .custom-alert-error::before {
          background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
        }
        
        .custom-alert-error .custom-alert-icon {
          color: #ef4444;
        }
        
        .custom-alert-icon {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 2px;
        }
        
        .custom-alert-content {
          flex: 1;
          min-width: 0;
          max-width: 400px;
        }
        
        .custom-alert-title {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
          font-weight: 700;
          font-size: 16px;
          color: #1f2937;
          margin-bottom: 6px;
          line-height: 1.25;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          letter-spacing: -0.01em;
        }
        
        .custom-alert-message {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
          font-size: 15px;
          font-weight: 400;
          color: #4b5563;
          line-height: 1.5;
          margin: 0;
          word-wrap: break-word;
          white-space: normal;
          hyphens: none;
          word-break: keep-all;
          overflow-wrap: break-word;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        
        .custom-alert-close {
          flex-shrink: 0;
          width: 32px;
          height: 32px;
          border: none;
          background: none;
          color: #9ca3af;
          cursor: pointer;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
          padding: 0;
          margin: -8px -4px -8px 0;
        }
        
        .custom-alert-close:hover {
          background: #f3f4f6;
          color: #6b7280;
        }
        
        .custom-alert-close:active {
          background: #e5e7eb;
          transform: scale(0.95);
        }
        
        /* Success variant for consistency */
        .custom-alert-success {
          border-left: 4px solid #10b981;
        }
        
        .custom-alert-success::before {
          background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        }
        
        .custom-alert-success .custom-alert-icon {
          color: #10b981;
        }
        
        /* Warning variant */
        .custom-alert-warning {
          border-left: 4px solid #f59e0b;
        }
        
        .custom-alert-warning::before {
          background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
        }
        
        .custom-alert-warning .custom-alert-icon {
          color: #f59e0b;
        }
        
        /* Animation keyframes */
        @keyframes slideInDown {
          from {
            opacity: 0;
            transform: translateX(-50%) translateY(-20px);
          }
          to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
          }
        }
        
        @keyframes slideOutUp {
          from {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
          }
          to {
            opacity: 0;
            transform: translateX(-50%) translateY(-20px);
          }
        }
        
        .custom-alert-container.animate-in {
          animation: slideInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        
        .custom-alert-container.animate-out {
          animation: slideOutUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        
        /* Mobile responsiveness */
        @media (max-width: 480px), (min-width: 481px) {
          .custom-alert {
            margin: 0 16px;
            min-width: auto;
            max-width: calc(100vw - 32px);
            width: calc(100vw - 32px);
            padding: 14px 16px;
            gap: 12px;
          }
          
          .custom-alert-content {
            max-width: none;
            flex: 1;
          }
          
          .custom-alert-title {
            font-size: 15px;
            font-weight: 600;
          }
          
          .custom-alert-message {
            font-size: 14px;
            line-height: 1.4;
          }
        }
        
        /* Tablet responsiveness */
        @media (max-width: 768px), (min-width: 481px) {
          .custom-alert {
            min-width: 320px;
            max-width: calc(100vw - 40px);
          }
          
          .custom-alert-content {
            max-width: calc(100vw - 120px);
          }
        }
        
        /* Dark mode support */
        [data-theme="dark"] .custom-alert {
          background: #32463C;
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
        }
        
        [data-theme="dark"] .custom-alert-title {
          color: #f9fafb;
        }
        
        [data-theme="dark"] .custom-alert-message {
          color: #d1d5db;
        }
        
        [data-theme="dark"] .custom-alert-close {
          color: #9ca3af;
        }
        
        [data-theme="dark"] .custom-alert-close:hover {
          background: #4b5563;
          color: #d1d5db;
        }
        
        [data-theme="dark"] .custom-alert-close:active {
          background: #32463C;
        }

        /* Location-based Products Styling */
        .location-badge {
          position: absolute;
          top: 8px;
          left: 8px;
          z-index: 10;
          background: linear-gradient(135deg, #009A68, #006B47);
          color: white;
          padding: 2px 6px;
          border-radius: 12px;
          font-size: 0.7rem;
          font-weight: 500;
          box-shadow: 0 2px 4px rgba(0,154,104,0.3);
        }

        .location-section .section-heading h6 {
          background: linear-gradient(135deg, #009A68, #006B47);
          color: white !important;
        }

        .seller-location {
          color: #6c757d;
          font-size: 0.75rem;
          display: flex;
          align-items: center;
          gap: 4px;
          margin-top: 4px;
          position: relative;
          z-index: 1;
        }

        .seller-location i {
          font-size: 0.7rem;
          color: #009A68;
        }

        .product-card-with-location {
          position: relative;
        }

        .product-card-with-location .top-product-card {
          border: 1px solid #e9ecef;
          transition: all 0.3s ease;
          overflow: hidden;
          position: relative;
        }

        /* Ensure all product cards contain their content properly */
        .top-product-card {
          position: relative;
          display: flex;
          flex-direction: column;
        }

        .top-product-card .card-body {
          position: relative;
          overflow: visible;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 12px;
        }

        /* Ensure seller location stays within card boundaries */
        .top-product-card .seller-location {
          position: relative;
          z-index: 1;
        }

        /* Fix for desktop to ensure elements stay inside card */
        @media (min-width: 768px) and (max-width: 480px) {
          .top-product-card {
            min-height: 320px;
          }

          .top-product-card .d-flex.justify-content-between.align-items-center {
            margin-top: auto;
            padding-top: 8px;
          }
        }

        .product-card-with-location .top-product-card:hover {
          border-color: #009A68;
          box-shadow: 0 4px 12px rgba(0,154,104,0.15);
        }

        /* Dark mode adjustments */
        [data-theme="dark"] .location-badge {
          background: linear-gradient(135deg, #019063, #00573A);
          box-shadow: 0 2px 4px rgba(1,144,99,0.4);
        }

        [data-theme="dark"] .seller-location {
          color: #adb5bd;
        }

        [data-theme="dark"] .seller-location i {
          color: #019063;
        }

        [data-theme="dark"] .product-card-with-location .top-product-card {
          border-color: #495057;
        }

        [data-theme="dark"] .product-card-with-location .top-product-card:hover {
          border-color: #019063;
          box-shadow: 0 4px 12px rgba(1,144,99,0.25);
        }

        /* Skeleton Animation System */
        @keyframes skeleton-shimmer {
          0% {
            background-position: -200px 0;
          }
          100% {
            background-position: calc(200px + 100%) 0;
          }
        }

        .skeleton {
          display: inline-block;
          height: 100%;
          width: 100%;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: 4px;
          position: relative;
          overflow: hidden;
        }

        .skeleton::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          transform: translateX(-100%);
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
          animation: skeleton-loading 1.5s infinite;
        }

        @keyframes skeleton-loading {
          100% {
            transform: translateX(100%);
          }
        }

        /* Product Image Skeleton */
        .skeleton-image {
          width: 100%;
          height: 150px;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: 8px;
          margin-bottom: 8px;
          position: relative;
          overflow: hidden;
        }

        .skeleton-image::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          transform: translateX(-100%);
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
          animation: skeleton-loading 1.5s infinite;
        }

        /* Category Image Skeleton */
        .skeleton-category {
          width: 100%;
          height: 60px;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: 6px;
          margin-bottom: 4px;
        }

        /* Flash Sale Image Skeleton */
        .skeleton-flash {
          width: 100%;
          height: 120px;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: 6px;
        }

        /* Weekly Product Skeleton */
        .skeleton-weekly {
          width: 80px;
          height: 80px;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: 6px;
          flex-shrink: 0;
        }

        /* Hero Slide Skeleton */
        .skeleton-hero {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: inherit;
          z-index: 2;
        }

        /* Avatar Skeleton */
        .skeleton-avatar {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: 50%;
          z-index: 2;
        }

        /* User Profile Image Container */
        .user-profile .image-container {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;
        }

        .user-profile .image-container img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }

        /* Hide background image while skeleton is loading */
        .image-container.loading.single-product-slide {
          background-image: none !important;
        }

        /* Ensure skeleton covers completely */
        .single-product-slide.image-container.loading .skeleton-hero {
          position: absolute !important;
          top: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: 100% !important;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
          background-size: 200px 100% !important;
          border-radius: 50% !important;
          z-index: 10 !important;
        }

        /* Dark Mode Skeleton */
        [data-theme="dark"] .skeleton,
        [data-theme="dark"] .skeleton-image,
        [data-theme="dark"] .skeleton-category,
        [data-theme="dark"] .skeleton-flash,
        [data-theme="dark"] .skeleton-weekly,
        [data-theme="dark"] .skeleton-hero,
        [data-theme="dark"] .skeleton-avatar {
          background: linear-gradient(90deg, #32463C 25%, #4b5563 50%, #32463C 75%);
          background-size: 200px 100%;
        }

        [data-theme="dark"] .skeleton::after,
        [data-theme="dark"] .skeleton-image::after {
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        }

        /* Image Loading States */
        .image-container {
          position: relative;
          overflow: hidden;
          border-radius: 8px;
        }

        .image-container.loading [class*="skeleton-"] {
          display: block;
        }

        .image-container.loaded [class*="skeleton-"] {
          display: none !important;
        }

        .image-container img {
          transition: opacity 0.3s ease;
          width: 100%;
          height: auto;
        }

        .image-container.loading img {
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .image-container.loaded img {
          opacity: 1;
          position: relative;
        }

        /* Initial state for all images in containers */
        .image-container img {
          opacity: 0;
        }

        .image-container.loaded img,
        .image-container img[style*="opacity: 1"] {
          opacity: 1 !important;
        }

        /* Specific skeleton hiding rules */
        .image-container.loaded .skeleton-image,
        .image-container.loaded .skeleton-category,
        .image-container.loaded .skeleton-flash,
        .image-container.loaded .skeleton-weekly,
        .image-container.loaded .skeleton-hero,
        .image-container.loaded .skeleton-avatar {
          display: none !important;
          visibility: hidden;
        }

        /* Product Card Skeleton States */
        .product-card-skeleton {
          pointer-events: none;
        }

        .product-card-skeleton .skeleton-image {
          height: 150px;
        }

        .product-card-skeleton .skeleton-title {
          height: 16px;
          width: 80%;
          margin: 8px 0;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: 4px;
        }

        .product-card-skeleton .skeleton-price {
          height: 14px;
          width: 60%;
          margin: 4px 0;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200px 100%;
          animation: skeleton-shimmer 1.5s infinite linear;
          border-radius: 4px;
        }

        [data-theme="dark"] .product-card-skeleton .skeleton-title,
        [data-theme="dark"] .product-card-skeleton .skeleton-price {
          background: linear-gradient(90deg, #32463C 25%, #4b5563 50%, #32463C 75%);
          background-size: 200px 100%;
        }

        /* Responsive adjustments */
        @media (max-width: 768px), (min-width: 481px) {
          .skeleton-image {
            height: 120px;
          }

          .skeleton-weekly {
            width: 60px;
            height: 60px;
          }

          .skeleton-hero {
            height: 160px;
          }
        }
		
	#pertanyaan .alert{font-size: 14px;}

	/* Mobile App Style Quantity Selector */
	.mobile-quantity-selector {
		display: inline-flex;
		align-items: center;
		background: #f8f9fa;
		border: 1px solid #e9ecef;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 6px rgba(0,0,0,0.08);
		transition: all 0.3s ease;
		height: 32px;
		min-width: 85px;
		max-width: 90px;
	}

	.mobile-quantity-selector:hover {
		border-color: #009A68;
		box-shadow: 0 2px 6px rgba(0,154,104,0.15);
	}
	
	body.homepage .custom-alert-container {
          left: 50%;
          transform: translateX(-50%);
        }

	.qty-btn {
		background: linear-gradient(135deg, #009A68, #006B47);
		border: none;
		color: white;
		width: 26px;
		height: 30px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		flex-shrink: 0;
	}

	.qty-btn:hover {
		background: linear-gradient(135deg, #006B47, #025034);
		transform: scale(1.02);
	}

	.qty-btn:active {
		transform: scale(0.98);
		background: linear-gradient(135deg, #025034, #003C24);
	}

	.qty-btn.minus {
		border-radius: 6px 0 0 6px;
	}

	.qty-btn.plus {
		border-radius: 0 6px 6px 0;
	}

	.qty-display {
		flex: 1;
		text-align: center;
		background: white;
		border: none;
		font-size: 13px;
		font-weight: 600;
		color: #333;
		outline: none;
		height: 30px;
		-webkit-appearance: none;
		-moz-appearance: textfield;
		min-width: 30px;
		max-width: 35px;
	}

	.qty-display::-webkit-outer-spin-button,
	.qty-display::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.qty-display:focus {
		background: #f0f8ff;
		border-left: 1px solid #009A68;
		border-right: 1px solid #009A68;
	}

	/* Disabled state */
	.mobile-quantity-selector.disabled {
		opacity: 0.6;
		pointer-events: none;
	}

	.qty-btn:disabled,
	.qty-btn.btn-disabled {
		background: #6c757d !important;
		cursor: not-allowed !important;
		opacity: 0.5 !important;
		transform: none !important;
		pointer-events: none;
	}

	.qty-btn:disabled:hover,
	.qty-btn.btn-disabled:hover {
		background: #6c757d !important;
		transform: none !important;
	}

	/* Mobile-first responsive design */
	@media (max-width: 480px), (min-width: 481px) {
		.mobile-quantity-selector {
			height: 28px;
			min-width: 75px;
			max-width: 80px;
			border-radius: 6px;
		}

		.qty-btn {
			width: 22px;
			height: 26px;
			font-size: 12px;
		}

		.qty-display {
			font-size: 12px;
			height: 26px;
			min-width: 28px;
			max-width: 30px;
		}
	}

	/* Larger mobile screens */
	@media (min-width: 481px) and (max-width: 768px) and (max-width: 480px) {
		.mobile-quantity-selector {
			height: 30px;
			min-width: 80px;
			max-width: 85px;
		}

		.qty-btn {
			width: 24px;
			height: 28px;
			font-size: 13px;
		}

		.qty-display {
			font-size: 12px;
			height: 28px;
			min-width: 30px;
			max-width: 32px;
		}
	}

	/* Animation for value changes */
	.qty-display.value-changed {
		animation: qtyPulse 0.3s ease;
	}

	@keyframes qtyPulse {
		0% { background: #e3f2fd; }
		50% { background: #bbdefb; }
		100% { background: white; }
	}

	/* Cart Table Styling */
	.cart-product-info {
		padding: 12px 8px !important;
		background: #f8f9fa;
	}
	
	.cart-product-info {
    padding: 12px 8px !important;
    border-bottom: 1px solid #7a7272 !important;
    background: #fafafa !important;
}

	.cart-product-link {
		color: #333 !important;
		text-decoration: none !important;
		font-weight: 500;
		font-size: 14px;
		line-height: 1.4;
	}

	.cart-product-link:hover {
		color: #009A68 !important;
	}

	/* Price styling with strikethrough */
	.cart-original-price {
		text-decoration: line-through !important;
		color: #dc3545 !important;
		font-weight: normal !important;
		margin-right: 8px !important;
	}

	.cart-final-price {
		color: #28a745 !important;
		font-weight: 600 !important;
	}

	.cart-discount-container {
		display: inline !important;
		white-space: nowrap !important;
	}

	.cart-remove-col {
		width: 40px !important;
		padding: 8px 4px !important;
		text-align: center;
		vertical-align: middle !important;
	}

	.cart-image-col {
		padding: 8px 4px !important;
		vertical-align: middle !important;
	}

	.cart-image-col img {
		width: 100px !important;
		height: 60px !important;
		object-fit: cover;
		border-radius: 6px;
	}

	.cart-quantity-col {
		padding: 8px 4px !important;
		text-align: right;
		vertical-align: middle !important;
	}

	/* Mobile cart optimizations */
	@media (max-width: 480px), (min-width: 481px) {
		.cart-product-info {
			padding: 1px 6px !important;
		}

		.cart-product-link {
			font-size: 13px;
		}

		.cart-remove-col {
			width: 35px !important;
			padding: 6px 2px !important;
		}

		.cart-quantity-col {
			padding: 6px 2px !important;
		}
	}