/* ======================================= */ /* MOBILE-OPTIMIZED CART PAGE CSS */ /* ======================================= */ /* --- OPTIMIZATION --- */ /* CRITICAL: The @import rule below was blocking rendering. */ /* REMOVE this line from your CSS and ADD the tags to your HTML instead. */ :root { --purple: #975ab7; --brown: #502325; --light-brown: #8B4513; --dark-brown: #3C1810; --gradient-primary: linear-gradient(135deg, #975ab7 0%, #7b4397 50%, #502325 100%); --gradient-secondary: linear-gradient(45deg, rgba(151, 90, 183, 0.8), rgba(80, 35, 37, 0.8)); --glass-bg: rgba(139, 69, 19, 0.25); --glass-brown: rgba(80, 35, 37, 0.3); --glass-border: rgba(139, 69, 19, 0.4); --shadow-3d: 0 10px 30px rgba(0, 0, 0, 0.3); --shadow-hover: 0 20px 60px rgba(139, 69, 19, 0.4); /* Mobile-specific variables */ --mobile-padding: clamp(15px, 4vw, 30px); --mobile-gap: clamp(10px, 3vw, 25px); --mobile-border-radius: clamp(10px, 2.5vw, 20px); } * { box-sizing: border-box; } body.cart-page-body { background: var(--gradient-primary); color: white; font-family: 'Poppins', sans-serif; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Optimized Background Particles for Mobile */ body.cart-page-body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 80%, rgba(139, 69, 19, 0.15) 2px, transparent 2px), radial-gradient(circle at 80% 20%, rgba(139, 69, 19, 0.15) 2px, transparent 2px), radial-gradient(circle at 40% 40%, rgba(139, 69, 19, 0.1) 1px, transparent 1px); background-size: 100px 100px, 150px 150px, 80px 80px; animation: particleFloat 20s linear infinite; pointer-events: none; z-index: 0; } @keyframes particleFloat { 0% { transform: translateY(0px); } 100% { transform: translateY(-100vh); } } .cart-page-container { padding: clamp(60px, 15vh, 100px) var(--mobile-padding) 30px var(--mobile-padding); max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; } .cart-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 8vw, 3.2rem); text-align: center; margin-bottom: clamp(30px, 8vw, 50px); background: linear-gradient(45deg, #ffffff, #f0f0f0, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); animation: titleGlow 3s ease-in-out infinite alternate; position: relative; line-height: 1.2; } .cart-title::after { content: ''; position: absolute; bottom: clamp(-8px, -1.5vw, -10px); left: 50%; transform: translateX(-50%); width: clamp(60px, 15vw, 100px); height: clamp(2px, 0.5vw, 3px); background: linear-gradient(90deg, transparent, #D2B48C, transparent); border-radius: 2px; animation: underlineGlow 2s ease-in-out infinite alternate; } @keyframes titleGlow { 0% { filter: drop-shadow(0 0 10px rgba(139, 69, 19, 0.3)); } 100% { filter: drop-shadow(0 0 20px rgba(139, 69, 19, 0.6)); } } @keyframes underlineGlow { 0% { opacity: 0.5; transform: translateX(-50%) scaleX(0.8); } 100% { opacity: 1; transform: translateX(-50%) scaleX(1.2); } } .cart-layout { display: flex; align-items: flex-start; gap: clamp(20px, 5vw, 40px); perspective: 1000px; min-height: calc(100vh - 100px - 30px); } /* ======================================= */ /* CART ITEMS LIST (MOBILE OPTIMIZED) */ /* ======================================= */ .cart-items-list { flex: 1; display: flex; flex-direction: column; gap: var(--mobile-gap); /* --- OPTIMIZATION --- */ contain: layout style; } .cart-item { display: flex; flex-direction: row; align-items: center; gap: clamp(12px, 3vw, 20px); background: var(--glass-brown); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: var(--mobile-padding); border-radius: var(--mobile-border-radius); border: 1px solid var(--glass-border); box-shadow: var(--shadow-3d); transform: translateZ(0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; min-height: clamp(100px, 20vw, 140px); /* --- OPTIMIZATION --- */ will-change: transform, box-shadow; } .cart-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.2), transparent); transition: left 0.6s ease; } /* --- OPTIMIZATION --- */ @media (hover: hover) { .cart-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: rgba(139, 69, 19, 0.6); background: rgba(80, 35, 37, 0.4); } .cart-item:hover::before { left: 100%; } .cart-item:hover .item-image { transform: scale(1.03); border-color: rgba(139, 69, 19, 0.6); } .cart-item:hover .item-image::after { opacity: 1; } } .item-image { width: clamp(60px, 15vw, 90px); height: clamp(60px, 15vw, 90px); object-fit: cover; border-radius: clamp(8px, 2vw, 15px); flex-shrink: 0; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; border: 2px solid rgba(139, 69, 19, 0.3); } .item-image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(139, 69, 19, 0.2), transparent); opacity: 0; transition: opacity 0.3s ease; } .item-details { flex-grow: 1; min-width: 0; overflow: hidden; } .item-name { font-family: 'Playfair Display', serif; font-size: clamp(1rem, 3.5vw, 1.3rem); margin: 0 0 clamp(4px, 1.5vw, 8px) 0; word-wrap: break-word; background: linear-gradient(45deg, #ffffff, #D2B48C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: textShimmer 3s ease-in-out infinite; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @keyframes textShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .item-price { font-size: clamp(0.9rem, 2.5vw, 1.1rem); opacity: 0.9; font-weight: 500; color: #D2B48C; } /* Mobile-optimized controls */ .cart-item-controls { display: flex; align-items: center; gap: clamp(8px, 2.5vw, 20px); flex-shrink: 0; } .item-quantity { display: flex; align-items: center; background: rgba(60, 24, 16, 0.4); border-radius: 50px; flex-shrink: 0; border: 1px solid rgba(139, 69, 19, 0.4); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; min-width: clamp(90px, 20vw, 130px); } .item-quantity:hover { transform: scale(1.02); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(139, 69, 19, 0.3); border-color: rgba(139, 69, 19, 0.6); } .item-quantity input { width: clamp(30px, 8vw, 45px); text-align: center; background: transparent; border: none; color: #D2B48C; font-weight: bold; font-size: clamp(0.9rem, 2.5vw, 1.1rem); transition: all 0.3s ease; -webkit-appearance: none; -moz-appearance: textfield; } .item-quantity input::-webkit-outer-spin-button, .item-quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .item-quantity input:focus { outline: none; text-shadow: 0 0 10px rgba(210, 180, 140, 0.8); color: white; } .quantity-btn { background: transparent; border: none; color: #D2B48C; font-size: clamp(1rem, 3vw, 1.3rem); cursor: pointer; padding: clamp(8px, 2vw, 15px); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); touch-action: manipulation; position: relative; overflow: hidden; min-width: clamp(30px, 8vw, 44px); min-height: clamp(30px, 8vw, 44px); display: flex; align-items: center; justify-content: center; } .quantity-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(139, 69, 19, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; } .quantity-btn:hover::before { width: 100%; height: 100%; } .quantity-btn:hover { transform: scale(1.1); color: #ffffff; text-shadow: 0 0 10px rgba(139, 69, 19, 0.8); } .quantity-btn:active { transform: scale(0.95); } .item-total { font-weight: bold; font-size: clamp(1rem, 3.5vw, 1.4rem); width: clamp(80px, 20vw, 120px); text-align: right; flex-shrink: 0; background: linear-gradient(45deg, #ffffff, #D2B48C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .remove-btn { background: transparent; border: none; color: rgba(210, 180, 140, 0.7); font-size: clamp(1.1rem, 3.5vw, 1.4rem); cursor: pointer; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); padding: clamp(6px, 1.5vw, 8px); flex-shrink: 0; touch-action: manipulation; border-radius: 50%; position: relative; overflow: hidden; min-width: clamp(32px, 8vw, 40px); min-height: clamp(32px, 8vw, 40px); display: flex; align-items: center; justify-content: center; } .remove-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 0, 0, 0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; } .remove-btn:hover { color: #ff6b6b; transform: scale(1.1) rotate(90deg); text-shadow: 0 0 10px rgba(255, 107, 107, 0.8); } .remove-btn:hover::before { width: 100%; height: 100%; } .remove-btn:active { transform: scale(0.9) rotate(90deg); } /* ======================================= */ /* ORDER SUMMARY (MOBILE OPTIMIZED) */ /* ======================================= */ .order-summary { flex: 0 0 clamp(300px, 40vw, 380px); background: var(--glass-brown); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: var(--mobile-border-radius); padding: var(--mobile-padding); position: sticky; top: clamp(100px, 20vh, 130px); box-shadow: var(--shadow-3d); transform: translateZ(0); transition: all 0.4s ease; overflow: hidden; align-self: flex-start; height: fit-content; /* --- OPTIMIZATION --- */ will-change: transform, box-shadow; } .order-summary::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(139, 69, 19, 0.2), transparent); animation: rotate 10s linear infinite; z-index: -1; } .order-summary::after { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: var(--glass-brown); backdrop-filter: blur(25px); border-radius: calc(var(--mobile-border-radius) - 2px); z-index: -1; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* --- OPTIMIZATION --- */ @media (hover: hover) { .order-summary:hover { transform: translateY(-2px); box-shadow: 0 25px 80px rgba(139, 69, 19, 0.4); border-color: rgba(139, 69, 19, 0.6); } .summary-row:hover { background: rgba(139, 69, 19, 0.2); padding-left: 10px; padding-right: 10px; color: white; } } .order-summary h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 5vw, 2rem); margin: 0 0 clamp(15px, 4vw, 25px) 0; padding-bottom: clamp(10px, 3vw, 20px); border-bottom: 1px solid rgba(139, 69, 19, 0.4); background: linear-gradient(45deg, #ffffff, #D2B48C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .order-summary h2::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #D2B48C, transparent); animation: borderGrow 2s ease-in-out infinite alternate; } @keyframes borderGrow { 0% { width: 0%; } 100% { width: 100%; } } .summary-row, .summary-total { display: flex; justify-content: space-between; margin-bottom: clamp(12px, 3vw, 18px); font-size: clamp(1rem, 3vw, 1.2rem); transition: all 0.3s ease; padding: clamp(6px, 1.5vw, 8px) 0; border-radius: 8px; color: #D2B48C; } .summary-total { font-size: clamp(1.2rem, 4vw, 1.6rem); font-weight: bold; margin-top: clamp(15px, 4vw, 25px); padding-top: clamp(15px, 4vw, 25px); border-top: 2px solid rgba(139, 69, 19, 0.4); background: linear-gradient(45deg, #ffffff, #D2B48C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: totalPulse 2s ease-in-out infinite alternate; } @keyframes totalPulse { 0% { transform: scale(1); } 100% { transform: scale(1.01); } } /* Mobile-optimized buttons */ .btn-checkout, .btn-shop-now, .btn-continue-shopping { width: 100%; padding: clamp(12px, 4vw, 18px); background: linear-gradient(45deg, rgba(139, 69, 19, 0.8), rgba(80, 35, 37, 0.8)); color: white; border: 2px solid rgba(139, 69, 19, 0.4); border-radius: 50px; font-size: clamp(1rem, 3vw, 1.2rem); font-weight: bold; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); touch-action: manipulation; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: clamp(0.5px, 0.2vw, 1px); box-shadow: 0 10px 30px rgba(80, 35, 37, 0.3); text-decoration: none; display: inline-block; text-align: center; min-height: clamp(44px, 10vw, 60px); /* --- OPTIMIZATION --- */ will-change: transform, box-shadow; } .btn-checkout::before, .btn-shop-now::before, .btn-continue-shopping::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.4), transparent); transition: left 0.6s ease; } /* --- OPTIMIZATION --- */ @media (hover: hover) { .btn-checkout:hover, .btn-shop-now:hover, .btn-continue-shopping:hover { background: linear-gradient(45deg, #D2B48C, #8B4513); color: white; transform: translateY(-2px) scale(1.01); box-shadow: 0 20px 60px rgba(139, 69, 19, 0.4); border-color: rgba(139, 69, 19, 0.6); } .btn-checkout:hover::before, .btn-shop-now:hover::before, .btn-continue-shopping:hover::before { left: 100%; } } .btn-checkout:active, .btn-shop-now:active, .btn-continue-shopping:active { transform: translateY(-1px) scale(0.99); } .checkout-btn-container { display: flex; justify-content: flex-end; margin-top: clamp(15px, 4vw, 20px); } .continue-shopping-btn-container { text-align: center; margin-top: clamp(20px, 6vw, 30px); } /* ======================================= */ /* EMPTY CART (MOBILE OPTIMIZED) */ /* ======================================= */ .empty-cart { text-align: center; padding: clamp(50px, 12vw, 100px) var(--mobile-padding); background: var(--glass-brown); backdrop-filter: blur(20px); border-radius: var(--mobile-border-radius); border: 1px solid var(--glass-border); box-shadow: var(--shadow-3d); animation: emptyCartFloat 4s ease-in-out infinite alternate; } @keyframes emptyCartFloat { 0% { transform: translateY(0px); } 100% { transform: translateY(-10px); } } .empty-icon { font-size: clamp(3rem, 12vw, 5rem); opacity: 0.6; margin-bottom: clamp(20px, 6vw, 30px); animation: iconBounce 2s ease-in-out infinite; color: #D2B48C; } @keyframes iconBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } .empty-cart h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); margin-bottom: 15px; background: linear-gradient(45deg, #ffffff, #D2B48C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .empty-cart .btn-shop-now { margin-top: clamp(25px, 8vw, 40px); } /* ======================================= */ /* MOBILE BREAKPOINTS & OPTIMIZATIONS */ /* ======================================= */ /* Large phones and small tablets (landscape) */ @media (max-width: 768px) and (orientation: landscape) { .cart-page-container { padding-top: clamp(40px, 10vh, 80px); } .cart-layout { gap: clamp(15px, 3vw, 30px); } } /* Standard tablets */ @media (max-width: 768px) { .cart-layout { flex-direction: column; align-items: center; gap: var(--mobile-gap); } .cart-items-list { width: 100%; order: 0; } .order-summary { flex: none; width: 100%; max-width: 500px; position: static; order: 1; } .cart-item { flex-wrap: wrap; } .cart-item-controls { flex-basis: 100%; margin-left: 0; justify-content: space-between; margin-top: var(--mobile-gap); } .item-details { flex: 1 1 200px; } /* Reduce 3D effects for better performance */ .cart-item:hover, .order-summary:hover { transform: translateY(-2px); } } /* Large mobile phones */ @media (max-width: 480px) { .cart-item { position: relative; } .remove-btn { position: absolute; top: clamp(8px, 2vw, 12px); right: clamp(8px, 2vw, 12px); margin-left: 0; z-index: 2; } .cart-item-controls { gap: clamp(8px, 2vw, 15px); margin-top: clamp(25px, 6vw, 35px); } .item-total { width: auto; text-align: right; margin: 0; } /* Disable heavy animations on mobile for better performance */ .cart-item::before, .btn-checkout::before, .btn-shop-now::before, .btn-continue-shopping::before { display: none; } body.cart-page-body::before { animation: none; opacity: 0.3; } } /* ======================================= */ /* PERFORMANCE OPTIMIZATIONS */ /* ======================================= */ /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body.cart-page-body::before { animation: none; } } /* Other media queries from the original file have been omitted for brevity, */ /* as they are well-structured and don't present immediate performance issues. */ /* Key optimizations like disabling hover, adding will-change, and fixing font loading are the priority. */