.elementor-8 .elementor-element.elementor-element-2a380244{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-8 .elementor-element.elementor-element-2cbf4ff2{width:100%;max-width:100%;text-align:center;}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-2cbf4ff2{width:100%;max-width:100%;padding:0px 0px 0px 0px;text-align:start;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Shopping Cart - Safyan Perfumes</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-touch-callout: none;
        }

        html, body {
            width: 100%;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        /* HEADER */
        .header {
            background-color: #fff;
            border-bottom: 1px solid #e0e0e0;
            padding: 12px 15px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            text-decoration: none;
        }

        .header-icons {
            display: flex;
            gap: 15px;
        }

        .header-icon {
            font-size: 20px;
            cursor: pointer;
            color: #333;
        }

        /* MAIN CONTAINER */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px;
        }

        /* PAGE TITLE */
        .page-title {
            font-size: 24px;
            font-weight: 600;
            margin: 20px 0;
            color: #222;
        }

        /* EMPTY CART MESSAGE */
        .empty-cart {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .empty-cart-icon {
            font-size: 80px;
            margin-bottom: 20px;
        }

        .empty-cart-text {
            font-size: 18px;
            color: #666;
            margin-bottom: 10px;
        }

        .empty-cart-subtext {
            font-size: 14px;
            color: #999;
            margin-bottom: 30px;
        }

        .continue-shopping-btn {
            display: inline-block;
            background-color: #FF9900;
            color: white;
            padding: 12px 30px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }

        .continue-shopping-btn:hover {
            background-color: #F08804;
        }

        /* CART TABLE RESPONSIVE */
        .cart-wrapper {
            background: white;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .cart-table {
            width: 100%;
            border-collapse: collapse;
        }

        .cart-table thead {
            background-color: #f9f9f9;
            border-bottom: 2px solid #e0e0e0;
        }

        .cart-table th {
            padding: 15px;
            text-align: left;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }

        .cart-table td {
            padding: 15px;
            border-bottom: 1px solid #e0e0e0;
            font-size: 14px;
        }

        .cart-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* PRODUCT COLUMN */
        .product-cell {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .product-image {
            width: 60px;
            height: 60px;
            background-color: #f5f5f5;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 30px;
        }

        .product-info {
            flex: 1;
        }

        .product-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
            word-break: break-word;
        }

        .product-sku {
            font-size: 12px;
            color: #999;
        }

        /* QUANTITY CONTROL */
        .quantity-control {
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: fit-content;
        }

        .qty-btn {
            background: #f9f9f9;
            border: none;
            width: 32px;
            height: 32px;
            cursor: pointer;
            font-size: 16px;
            color: #333;
            transition: background-color 0.2s;
        }

        .qty-btn:hover {
            background-color: #e0e0e0;
        }

        .qty-input {
            width: 40px;
            height: 32px;
            border: none;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
        }

        /* PRICE COLUMN */
        .price {
            font-weight: 600;
            color: #B12704;
            font-size: 16px;
        }

        .original-price {
            color: #999;
            text-decoration: line-through;
            font-size: 13px;
            margin-right: 8px;
        }

        /* REMOVE BUTTON */
        .remove-btn {
            background: #f5f5f5;
            border: 1px solid #ddd;
            color: #d32f2f;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
            transition: background-color 0.2s;
        }

        .remove-btn:hover {
            background-color: #ffe0e0;
        }

        /* CART SUMMARY */
        .cart-summary {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 14px;
        }

        .summary-row.subtotal,
        .summary-row.shipping {
            color: #666;
        }

        .summary-row.total {
            border-top: 2px solid #e0e0e0;
            padding-top: 12px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .summary-value {
            font-weight: 600;
            color: #333;
        }

        .summary-value.total-amount {
            color: #B12704;
            font-size: 20px;
        }

        /* DELIVERY INFO */
        .delivery-info {
            background-color: #E8F5E9;
            border-left: 4px solid #4CAF50;
            padding: 12px 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-size: 13px;
            color: #2e7d32;
        }

        .delivery-info strong {
            display: block;
            margin-bottom: 4px;
        }

        /* CHECKOUT BUTTON */
        .checkout-btn {
            width: 100%;
            background-color: #FF9900;
            color: white;
            padding: 14px 20px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin-bottom: 10px;
            transition: background-color 0.2s;
            -webkit-appearance: none;
            appearance: none;
        }

        .checkout-btn:hover {
            background-color: #F08804;
        }

        .checkout-btn:active {
            transform: scale(0.98);
        }

        /* CONTINUE SHOPPING BUTTON */
        .continue-btn {
            width: 100%;
            background-color: #f9f9f9;
            color: #333;
            padding: 14px 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            transition: background-color 0.2s;
            -webkit-appearance: none;
            appearance: none;
            display: block;
        }

        .continue-btn:hover {
            background-color: #e0e0e0;
        }

        /* COUPON SECTION */
        .coupon-section {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .coupon-title {
            font-weight: 600;
            margin-bottom: 12px;
            font-size: 14px;
        }

        .coupon-input-group {
            display: flex;
            gap: 8px;
        }

        .coupon-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            -webkit-appearance: none;
            appearance: none;
        }

        .coupon-btn {
            padding: 10px 15px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
            white-space: nowrap;
        }

        .coupon-btn:hover {
            background-color: #555;
        }

        /* PRODUCTS SECTION */
        .recommended-products {
            margin-top: 40px;
        }

        .section-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #333;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s;
        }

        .product-card:active {
            transform: scale(0.98);
        }

        .product-card-image {
            width: 100%;
            height: 120px;
            background-color: #f5f5f5;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
            margin-bottom: 10px;
        }

        .product-card-name {
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 8px;
            word-break: break-word;
        }

        .product-card-price {
            color: #B12704;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .product-card-btn {
            width: 100%;
            background-color: #FF9900;
            color: white;
            padding: 8px;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
        }

        .product-card-btn:active {
            background-color: #F08804;
        }

        /* FOOTER */
        .footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 12px;
            margin-top: 40px;
        }

        /* MOBILE RESPONSIVE */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .page-title {
                font-size: 20px;
                margin: 15px 0;
            }

            /* HIDE COLUMN HEADERS ON MOBILE */
            .cart-table thead {
                display: none;
            }

            /* MOBILE CARD LAYOUT */
            .cart-table,
            .cart-table tbody,
            .cart-table tr,
            .cart-table td {
                display: block;
                width: 100%;
            }

            .cart-table tr {
                margin-bottom: 15px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 15px;
                background: white;
            }

            .cart-table td {
                padding: 8px 0;
                border: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 0;
            }

            .cart-table td:before {
                content: attr(data-label);
                font-weight: 600;
                color: #666;
                min-width: 80px;
            }

            .cart-table td.product-col {
                padding: 0;
                display: block;
            }

            .cart-table td.product-col:before {
                display: none;
            }

            .product-cell {
                margin-bottom: 10px;
            }

            .cart-table td.price-col:before {
                content: "Price:";
            }

            .cart-table td.quantity-col:before {
                content: "Qty:";
            }

            .cart-table td.total-col:before {
                content: "Total:";
            }

            .cart-table td.action-col:before {
                display: none;
            }

            .cart-table td.action-col {
                padding: 10px 0 0 0;
                margin-top: 10px;
                border-top: 1px solid #e0e0e0;
            }

            .quantity-control {
                width: 100%;
            }

            /* GRID FOR PRODUCT SUMMARY MOBILE */
            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 10px;
            }

            .product-image {
                width: 50px;
                height: 50px;
            }

            /* SUMMARY MOBILE */
            .cart-summary {
                padding: 15px;
            }

            .summary-row {
                margin-bottom: 10px;
                font-size: 13px;
            }

            .summary-row.total {
                font-size: 16px;
            }

            .summary-value.total-amount {
                font-size: 18px;
            }

            /* BUTTONS MOBILE */
            .checkout-btn,
            .continue-btn {
                padding: 12px;
                font-size: 15px;
                min-height: 44px;
            }

            /* HEADER MOBILE */
            .header {
                padding: 10px;
            }

            .logo {
                font-size: 16px;
            }

            .header-icon {
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 8px;
            }

            .page-title {
                font-size: 18px;
            }

            .cart-table tr {
                margin-bottom: 12px;
                padding: 12px;
            }

            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: 8px;
            }

            .product-card {
                padding: 10px;
            }

            .product-card-image {
                height: 100px;
                font-size: 40px;
            }

            .product-card-name {
                font-size: 12px;
            }

            .price {
                font-size: 14px;
            }

            .delivery-info {
                font-size: 12px;
            }
        }

        /* UTILITY CLASSES */
        .hidden {
            display: none !important;
        }

        .text-center {
            text-align: center;
        }

        .text-muted {
            color: #999;
        }

        .mt-20 {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- HEADER -->
    <div class="header">
        <div class="header-content">
            <a href="#" class="logo">🧴 Safyan Perfumes</a>
            <div class="header-icons">
                <div class="header-icon" onclick="alert('Search')">🔍</div>
                <div class="header-icon" onclick="alert('Account')">👤</div>
            </div>
        </div>
    </div>

    <!-- MAIN CONTAINER -->
    <div class="container">
        <div class="page-title">Shopping Cart</div>

        <!-- EMPTY CART MESSAGE -->
        <div class="empty-cart" id="emptyCartMessage">
            <div class="empty-cart-icon">🛒</div>
            <div class="empty-cart-text">Your cart is currently empty!</div>
            <div class="empty-cart-subtext">Continue shopping to add items to your cart</div>
            <a href="https://safyanperfumes.com/perfumes/" class="continue-shopping-btn">Continue Shopping</a>
        </div>

        <!-- CART TABLE (Hidden when empty) -->
        <div class="cart-wrapper hidden" id="cartWrapper">
            <table class="cart-table">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th style="text-align: center;">Price</th>
                        <th style="text-align: center;">Quantity</th>
                        <th style="text-align: right;">Total</th>
                        <th style="text-align: center;">Action</th>
                    </tr>
                </thead>
                <tbody id="cartItems">
                    <!-- SAMPLE ITEM (for testing) -->
                    <tr>
                        <td class="product-col" data-label="Product">
                            <div class="product-cell">
                                <div class="product-image">🧴</div>
                                <div class="product-info">
                                    <div class="product-name">Safyan Oud Vanilla</div>
                                    <div class="product-sku">SKU: SP-OUD-001</div>
                                </div>
                            </div>
                        </td>
                        <td class="price-col" data-label="Price">
                            <span class="original-price">60 AED</span>
                            <span class="price">35 AED</span>
                        </td>
                        <td class="quantity-col" data-label="Qty">
                            <div class="quantity-control">
                                <button class="qty-btn" onclick="updateQty(this, -1)">−</button>
                                <input type="number" class="qty-input" value="1" readonly>
                                <button class="qty-btn" onclick="updateQty(this, 1)">+</button>
                            </div>
                        </td>
                        <td class="total-col" data-label="Total" style="text-align: right;">
                            <span class="price">35 AED</span>
                        </td>
                        <td class="action-col">
                            <button class="remove-btn" onclick="removeItem(this)">Remove</button>
                        </td>
                    </tr>

                    <tr>
                        <td class="product-col" data-label="Product">
                            <div class="product-cell">
                                <div class="product-image">🌺</div>
                                <div class="product-info">
                                    <div class="product-name">Blu Perfume Inspired by Chanel</div>
                                    <div class="product-sku">SKU: SP-BLU-002</div>
                                </div>
                            </div>
                        </td>
                        <td class="price-col" data-label="Price">
                            <span class="original-price">45 AED</span>
                            <span class="price">30 AED</span>
                        </td>
                        <td class="quantity-col" data-label="Qty">
                            <div class="quantity-control">
                                <button class="qty-btn" onclick="updateQty(this, -1)">−</button>
                                <input type="number" class="qty-input" value="2" readonly>
                                <button class="qty-btn" onclick="updateQty(this, 1)">+</button>
                            </div>
                        </td>
                        <td class="total-col" data-label="Total" style="text-align: right;">
                            <span class="price">60 AED</span>
                        </td>
                        <td class="action-col">
                            <button class="remove-btn" onclick="removeItem(this)">Remove</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- COUPON SECTION -->
        <div class="coupon-section hidden" id="couponSection">
            <div class="coupon-title">Have a promo code?</div>
            <div class="coupon-input-group">
                <input type="text" class="coupon-input" placeholder="Enter coupon code">
                <button class="coupon-btn">Apply</button>
            </div>
        </div>

        <!-- CART SUMMARY -->
        <div class="cart-summary hidden" id="cartSummary">
            <div class="delivery-info">
                <strong>✓ Free Delivery</strong>
                Free delivery on orders above 150 AED. Order value: 95 AED (55 AED more needed)
            </div>

            <div class="summary-row subtotal">
                <span>Subtotal:</span>
                <span class="summary-value">95 AED</span>
            </div>

            <div class="summary-row shipping">
                <span>Shipping:</span>
                <span class="summary-value">Pending</span>
            </div>

            <div class="summary-row tax">
                <span>Tax:</span>
                <span class="summary-value">0 AED</span>
            </div>

            <div class="summary-row total">
                <span>Order Total:</span>
                <span class="summary-value total-amount">95 AED</span>
            </div>

            <button class="checkout-btn" onclick="goToCheckout()">Proceed to Checkout</button>
            <a href="https://safyanperfumes.com/perfumes/" class="continue-btn">Continue Shopping</a>
        </div>

        <!-- RECOMMENDED PRODUCTS -->
        <div class="recommended-products">
            <div class="section-title">New in Store</div>
            <div class="products-grid">
                <div class="product-card">
                    <div class="product-card-image">🧴</div>
                    <div class="product-card-name">Safyan Oud Vanilla</div>
                    <div class="product-card-price">35 AED</div>
                    <button class="product-card-btn" onclick="addToCart('Safyan Oud Vanilla', 35)">Add to Cart</button>
                </div>

                <div class="product-card">
                    <div class="product-card-image">🌺</div>
                    <div class="product-card-name">Blu Inspired by Chanel</div>
                    <div class="product-card-price">30 AED</div>
                    <button class="product-card-btn" onclick="addToCart('Blu Inspired by Chanel', 30)">Add to Cart</button>
                </div>

                <div class="product-card">
                    <div class="product-card-image">🌸</div>
                    <div class="product-card-name">Hawas Perfume</div>
                    <div class="product-card-price">25 AED</div>
                    <button class="product-card-btn" onclick="addToCart('Hawas Perfume', 25)">Add to Cart</button>
                </div>

                <div class="product-card">
                    <div class="product-card-image">💎</div>
                    <div class="product-card-name">Premium Collection</div>
                    <div class="product-card-price">45 AED</div>
                    <button class="product-card-btn" onclick="addToCart('Premium Collection', 45)">Add to Cart</button>
                </div>
            </div>
        </div>
    </div>

    <!-- FOOTER -->
    <div class="footer">
        <p>© 2024 Safyan Perfumes. All rights reserved. | <a href="#" style="color: #FF9900; text-decoration: none;">Privacy Policy</a> | <a href="#" style="color: #FF9900; text-decoration: none;">Terms & Conditions</a></p>
    </div>

    <script>
        // Toggle cart display
        function toggleCart() {
            const emptyMsg = document.getElementById('emptyCartMessage');
            const cartWrapper = document.getElementById('cartWrapper');
            const couponSection = document.getElementById('couponSection');
            const cartSummary = document.getElementById('cartSummary');
            
            const hasItems = document.getElementById('cartItems').children.length > 0;
            
            if (hasItems) {
                emptyMsg.classList.add('hidden');
                cartWrapper.classList.remove('hidden');
                couponSection.classList.remove('hidden');
                cartSummary.classList.remove('hidden');
            } else {
                emptyMsg.classList.remove('hidden');
                cartWrapper.classList.add('hidden');
                couponSection.classList.add('hidden');
                cartSummary.classList.add('hidden');
            }
        }

        // Update quantity
        function updateQty(button, change) {
            const input = button.parentElement.querySelector('.qty-input');
            let qty = parseInt(input.value) || 1;
            qty = Math.max(1, qty + change);
            input.value = qty;
            updateTotals();
        }

        // Remove item
        function removeItem(button) {
            if (confirm('Remove this item from cart?')) {
                button.closest('tr').remove();
                updateTotals();
                toggleCart();
            }
        }

        // Update totals
        function updateTotals() {
            let subtotal = 0;
            document.querySelectorAll('#cartItems tr').forEach(row => {
                const priceText = row.querySelector('.price-col .price').textContent;
                const price = parseInt(priceText);
                const qty = parseInt(row.querySelector('.qty-input').value) || 1;
                const total = price * qty;
                
                row.querySelector('.total-col .price').textContent = total + ' AED';
                subtotal += total;
            });

            document.querySelector('.summary-row.subtotal .summary-value').textContent = subtotal + ' AED';
            document.querySelector('.summary-row.total .summary-value').textContent = subtotal + ' AED';
        }

        // Add to cart
        function addToCart(productName, price) {
            alert('✓ ' + productName + ' added to cart!');
            // In real implementation, add to actual cart
        }

        // Checkout
        function goToCheckout() {
            window.location.href = 'https://safyanperfumes.com/checkout/';
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', toggleCart);
    </script>
</body>
</html>/* End custom CSS */