.shop-main-body {
     background: #f5f9f9;
     padding-top: 1px;
 }

 /* Navbar */
 /* .navbar {
     background: #fff;
     padding: 1.2rem 0;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     position: sticky;
     top: 0;
     z-index: 100;
 }

 .navbar .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 24px;
 }

 .nav-logo img {
     height: 42px;
 }

 .nav-items ul {
     display: flex;
     list-style: none;
     gap: 2rem;
     margin: 0;
 }

 .nav-items a {
     text-decoration: none;
     color: #1a202c;
     font-weight: 500;
     transition: color 0.2s;
     font-size: 15px;
 }

 .nav-items a:hover {
     color: #e53e3e;
 } */

 /* .nav-button a {
            background: #e53e3e;
            color: #fff;
            padding: 0.7rem 1.6rem;
            border-radius: 6px;
            text-decoration: none;
            transition: all 0.2s;
            font-weight: 500;
            font-size: 14px;
        }

        .nav-button a:hover {
            background: #c53030;
        } */

 /* Cart Icon */
 .toast-container-shop {
    top: 55px;
}
 .cart-icon-wrapper {
     position: relative;
     cursor: pointer;
     margin-left: 24px;
     padding: 8px;
     border-radius: 8px;
     transition: background 0.2s;
 }

 .cart-icon-wrapper:hover {
     background: #f7fafc;
 }

 .cart-icon-wrapper svg {
     width: 28px;
     height: 28px;
     fill: #2d3748;
 }

 .cart-badge {
     position: absolute;
     top: 2px;
     right: 2px;
     background: #e53e3e;
     color: #fff;
     border-radius: 10px;
     min-width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: 600;
     padding: 0 6px;
 }

 /* Banner */
 .main-banner {
     background: #fff;
     border-radius: 12px;
     margin: 24px 0;
     padding: 48px 24px;
     text-align: center;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 16%);
 }

 .main-banner h1 {
     font-size: 2.5rem;
     color: #1a202c;
     margin-bottom: 8px;
     font-weight: 700;
     letter-spacing: -0.02em;
 }

 .main-banner p {
     color: #718096;
     font-size: 1.1rem;
 }

 /* Product Grid */
 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 24px;
     padding: 24px 0 48px;
 }

 .product-card {
     background: #fff;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     transition: all 0.3s;
     border: 1px solid #e2e8f0;
 }

 .product-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
     border-color: #cbd5e0;
 }

 /* Product Slider */
 .slider-container {
     position: relative;
     width: 100%;
     height: 300px;
     overflow: hidden;
     background: #f7fafc;
 }

 .slider-wrapper {
     display: flex;
     transition: transform 0.4s ease;
     height: 100%;
 }

 .slide {
     min-width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .slide img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.95);
     border: none;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     transition: all 0.2s;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     opacity: 0;
 }

 .slider-container:hover .slider-arrow {
     opacity: 1;
 }

 .slider-arrow:hover {
     background: #fff;
     transform: translateY(-50%) scale(1.1);
 }

 .slider-arrow.prev {
     left: 12px;
 }

 .slider-arrow.next {
     right: 12px;
 }

 .slider-arrow svg {
     width: 20px;
     height: 20px;
     fill: #2d3748;
 }

 .slider-dots {
     position: absolute;
     bottom: 12px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 6px;
     z-index: 2;
 }

 .dot {
     width: 6px;
     height: 6px;
     border-radius: 3px;
     background: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     transition: all 0.3s;
 }

 .dot.active {
     background: #e53e3e;
     width: 20px;
 }

 .quick-view-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s;
 }

 .product-card:hover .quick-view-overlay {
     opacity: 1;
 }

 .quick-view-btn {
     background: #fff;
     color: #1a202c;
     border: none;
     padding: 12px 24px;
     border-radius: 6px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 14px;
 }

 .quick-view-btn:hover {
     transform: scale(1.05);
 }

 /* Product Content */
 .product-content {
     padding: 20px;
 }

 .price-badge {
     color: #e53e3e;
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 12px;
     display: block;
 }

 .product-title {
     font-size: 1rem;
     color: #2d3748;
     margin-bottom: 16px;
     min-height: 48px;
     font-weight: 500;
     line-height: 1.5;
 }

 .add-to-cart-btn {
     width: 100%;
     background: #48bb78;
     color: #fff;
     border: none;
     padding: 12px;
     border-radius: 6px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 14px;
 }

 .add-to-cart-btn:hover {
     background: #38a169;
 }

 /* Modal */
 .modal-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     padding: 24px;
 }

 .modal-backdrop.active {
     display: flex;
 }

 .modal-content {
     background: #fff;
     border-radius: 12px;
     max-width: 900px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
     box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
 }

 .modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     background: #fff;
     color: #718096;
     border: none;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     font-size: 20px;
     cursor: pointer;
     z-index: 10;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .modal-close:hover {
     background: #f7fafc;
     color: #2d3748;
 }

 .modal-body {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
     padding: 32px;
 }

 .modal-slider {
     height: 400px;
     border-radius: 8px;
     overflow: hidden;
 }

 .modal-details h2 {
     font-size: 1.75rem;
     margin-bottom: 12px;
     color: #1a202c;
     font-weight: 700;
 }

 .modal-price {
     font-size: 1.75rem;
     color: #e53e3e;
     font-weight: 700;
     margin-bottom: 20px;
 }

 .product-description {
     margin-bottom: 24px;
     line-height: 1.7;
     background: #f7fafc;
     padding: 20px;
     border-radius: 8px;
 }

 .product-description h3 {
     font-size: 1.1rem;
     margin-bottom: 12px;
     color: #2d3748;
     font-weight: 600;
 }

 .product-description ul {
     padding-left: 20px;
 }

 .product-description li {
     margin-bottom: 8px;
     color: #4a5568;
 }

 .modal-add-to-cart {
     background: #48bb78;
     color: #fff;
     border: none;
     padding: 14px 24px;
     border-radius: 6px;
     font-weight: 600;
     cursor: pointer;
     width: 100%;
     transition: all 0.2s;
     font-size: 15px;
 }

 .modal-add-to-cart:hover {
     background: #38a169;
 }

 /* Cart Sidebar - Completely Redesigned */
 .cart-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
 }

 .cart-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .cart-sidebar {
     position: fixed;
     right: -480px;
     top: 0;
     width: 480px;
     max-width: 100vw;
     height: 100vh;
     background: #fff;
     z-index: 1000;
     transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
 }

 .cart-sidebar.active {
     right: 0;
 }

 /* Cart Header */
 .cart-header {
     padding: 24px;
     background: #fff;
     border-bottom: 1px solid #e2e8f0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
 }

 .cart-title {
     font-size: 1.25rem;
     margin: 0;
     font-weight: 700;
     color: #1a202c;
 }

 .close-btn {
     background: transparent;
     border: none;
     color: #718096;
     font-size: 24px;
     cursor: pointer;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 6px;
     transition: all 0.2s;
 }

 .close-btn:hover {
     background: #f7fafc;
     color: #2d3748;
 }

 /* Cart Content Area */
 .cart-content {
     flex: 1;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
 }

 /* Delivery Info Section */
 .delivery-section {
     padding: 20px 24px;
     background: #f7fafc;
     border-bottom: 1px solid #e2e8f0;
     flex-shrink: 0;
 }

 .delivery-section h3 {
     font-size: 0.875rem;
     font-weight: 700;
     color: #2d3748;
     margin-bottom: 12px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .delivery-info-card {
     background: #fff;
     border: 2px solid #e2e8f0;
     border-radius: 8px;
     padding: 16px;
     cursor: pointer;
     transition: all 0.2s;
 }

 .delivery-info-card:hover {
     border-color: #cbd5e0;
 }

 .delivery-info-card.incomplete {
     border-color: #fc8181;
     background: #fff5f5;
 }

 .delivery-info-card.complete {
     border-color: #68d391;
     background: #f0fff4;
 }

 .delivery-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .delivery-status {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.875rem;
     font-weight: 600;
 }

 .status-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
 }

 .status-dot.incomplete {
     background: #e53e3e;
     animation: pulse 2s infinite;
 }

 .status-dot.complete {
     background: #48bb78;
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.5;
     }
 }

 .delivery-preview {
     margin-top: 12px;
     font-size: 0.875rem;
     color: #4a5568;
     line-height: 1.6;
 }

 .delivery-preview.empty {
     color: #a0aec0;
     font-style: italic;
 }

 .edit-icon {
     color: #718096;
     font-size: 1.1rem;
 }

 /* Delivery Form */
 .delivery-form {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
 }

 .delivery-form.expanded {
     max-height: 500px;
     overflow-y: auto;
 }

 .form-inner {
     padding: 16px 0 0;
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     margin-bottom: 12px;
 }

 .form-group {
     margin-bottom: 12px;
 }

 .form-group.full-width {
     grid-column: 1 / -1;
 }

 .form-group label {
     display: block;
     margin-bottom: 6px;
     font-weight: 600;
     color: #2d3748;
     font-size: 0.813rem;
 }

 .form-group label .required {
     color: #e53e3e;
     margin-left: 2px;
 }

 .form-group input,
 .form-group textarea {
     width: 100%;
     padding: 10px 12px;
     border: 1px solid #e2e8f0;
     border-radius: 6px;
     font-size: 0.875rem;
     transition: all 0.2s;
     font-family: inherit;
 }

 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
     border-color: #4299e1;
     box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
 }

 .form-group.error input,
 .form-group.error textarea {
     border-color: #fc8181;
     background: #fff5f5;
 }

 .error-message {
     color: #e53e3e;
     font-size: 0.75rem;
     margin-top: 4px;
     display: none;
 }

 .form-group.error .error-message {
     display: block;
 }

 .form-actions {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
     margin-top: 16px;
 }

 .btn-secondary {
     background: #edf2f7;
     color: #2d3748;
     border: none;
     padding: 10px 16px;
     border-radius: 6px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 0.875rem;
 }

 .btn-secondary:hover {
     background: #e2e8f0;
 }

 .btn-primary {
     background: #4299e1;
     color: #fff;
     border: none;
     padding: 10px 16px;
     border-radius: 6px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 0.875rem;
 }

 .btn-primary:hover {
     background: #3182ce;
 }

 /* Cart Items */
 .cart-items {
     flex: 1;
     overflow-y: auto;
     padding: 20px 24px;
 }

 .cart-items-header {
     font-size: 0.875rem;
     font-weight: 700;
     color: #2d3748;
     margin-bottom: 16px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .cart-item {
     display: flex;
     gap: 12px;
     padding: 16px;
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     margin-bottom: 12px;
     transition: all 0.2s;
 }

 .cart-item:hover {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }

 .cart-item img {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 6px;
     flex-shrink: 0;
 }

 .cart-item-details {
     flex: 1;
     min-width: 0;
 }

 .cart-item-name {
     font-weight: 600;
     margin-bottom: 6px;
     color: #2d3748;
     font-size: 0.875rem;
     line-height: 1.4;
 }

 .cart-item-price {
     color: #e53e3e;
     font-weight: 700;
     font-size: 1rem;
     margin-bottom: 10px;
 }

 .cart-item-actions {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .quantity-controls {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .qty-btn {
     background: #edf2f7;
     color: #2d3748;
     border: none;
     width: 28px;
     height: 28px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
 }

 .qty-btn:hover {
     background: #e2e8f0;
 }

 .quantity {
     min-width: 24px;
     text-align: center;
     font-weight: 700;
     font-size: 0.875rem;
 }

 .remove-btn {
     background: transparent;
     color: #e53e3e;
     border: none;
     padding: 4px 8px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 0.75rem;
     transition: all 0.2s;
     font-weight: 600;
 }

 .remove-btn:hover {
     background: #fff5f5;
 }

 .empty-cart {
     text-align: center;
     padding: 60px 24px;
     color: #a0aec0;
 }

 .empty-cart svg {
     width: 80px;
     height: 80px;
     fill: #e2e8f0;
     margin-bottom: 16px;
 }

 .empty-cart p {
     font-size: 1rem;
     font-weight: 500;
 }

 /* Cart Footer */
 .cart-footer {
     padding: 20px 24px;
     background: #fff;
     border-top: 1px solid #e2e8f0;
     flex-shrink: 0;
 }

 .cart-summary {
     margin-bottom: 16px;
 }

 .summary-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
     font-size: 0.875rem;
     color: #4a5568;
 }

 .summary-row.total {
     font-size: 1.25rem;
     font-weight: 700;
     color: #1a202c;
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid #e2e8f0;
 }

 .total-amount {
     color: #e53e3e;
 }

 .checkout-btn {
     width: 100%;
     background: #48bb78;
     color: #fff;
     border: none;
     padding: 14px;
     border-radius: 6px;
     font-size: 1rem;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.2s;
 }

 .checkout-btn:hover:not(:disabled) {
     background: #38a169;
 }

 .checkout-btn:disabled {
     background: #cbd5e0;
     cursor: not-allowed;
     color: #a0aec0;
 }

 /* WhatsApp */
 /* .wh-fixed {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 100;
 } */

 /* .wh-ap-btn {
     width: 56px;
     height: 56px;
     background: #25d366;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>');
     background-size: 32px;
     background-position: center;
     background-repeat: no-repeat;
     box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
     transition: all 0.2s;
 }

 .wh-ap-btn:hover {
     transform: scale(1.05);
     box-shadow: 0 6px 16px rgba(37, 211, 102, 0.5);
 } */



 @media (max-width: 768px) {
     .nav-items {
         display: none;
     }

     .modal-body {
         grid-template-columns: 1fr;
     }

     .product-grid {
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         gap: 16px;
     }

     .main-banner h1 {
         font-size: 1.875rem;
     }

     .form-grid {
         grid-template-columns: 1fr;
     }
 }