* {margin: 0;padding: 0;box-sizing: border-box} html {overflow-x: hidden;width: 100%;max-width: 100vw} :root {--primary-color: #06b6d4;--primary-dark: #0c4a6e;--primary-light: #67e8f9;--secondary-color: #3b82f6;--accent-color: #f59e0b;--danger-color: #ef4444;--text-dark: #111827;--text-gray: #6b7280;--text-light: #9ca3af;--bg-light: #f9fafb;--bg-white: #ffffff;--bg-gradient: linear-gradient(135deg, #0c4a6e 0%, #0891b2 50%, #22d3ee 100%);--border-color: #e5e7eb;--border-radius-sm: 0.5rem;--border-radius-md: 0.75rem;--border-radius-lg: 1rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);--transition-fast: 0.15s ease-in-out;--transition-normal: 0.3s ease-in-out;--transition-slow: 0.5s ease-in-out;--delivery-banner-height: 56px;--navbar-height: 90px} body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;line-height: 1.6;color: var(--text-dark);background: var(--bg-light);background-image: url('../images/products/snus image.png');background-size: cover;background-position: center;background-attachment: fixed;background-repeat: no-repeat;position: relative;padding-top: calc(var(--delivery-banner-height) + var(--navbar-height));overflow-x: hidden;width: 100%;max-width: 100vw} body::before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(249, 250, 251, 0.85);z-index: -1} .container {max-width: 1280px;margin: 0 auto;padding: 0 1.5rem;overflow-x: hidden} .delivery-banner {background: #0a0a0a;color: #fff;padding: 0.4rem 0;border-bottom: 1px solid rgba(255,255,255,0.06);height: var(--delivery-banner-height);min-height: var(--delivery-banner-height);max-height: var(--delivery-banner-height);box-sizing: border-box;display: flex;align-items: center;justify-content: center;text-align: center;position: fixed;top: 0;left: 0;right: 0;width: 100%;margin: 0;border: none;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);z-index: 10001} .delivery-banner .container {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 0.2rem;max-width: 42rem;width: 100%;margin: 0 auto;padding: 0 1.25rem} .delivery-banner-content,.delivery-banner-promo {display: flex;align-items: center;justify-content: center;gap: 0.4rem;flex-wrap: nowrap;width: 100%;text-align: center} .delivery-banner-content {font-weight: 600;font-size: 0.9rem;letter-spacing: 0.03em} .delivery-banner-promo {font-size: 0.8rem;font-weight: 500;opacity: 0.92} .delivery-banner::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);animation: shimmer 3s infinite} @keyframes shimmer {0% {left: -100%} 100% {left: 100%} } .delivery-banner-content {display: flex;align-items: center;justify-content: center;gap: 0.75rem;font-weight: 600;font-size: 0.95rem;letter-spacing: 0.025em;position: relative;z-index: 1} .delivery-icon {font-size: 1.25rem;animation: bounce 2s infinite} @keyframes bounce {0%, 100% {transform: translateY(0)} 50% {transform: translateY(-3px)} } .delivery-text {text-transform: uppercase;font-size: 0.875rem} @media (max-width: 768px) {:root {--delivery-banner-height: 52px;--navbar-height: 72px} .delivery-banner {padding: 0.3rem 0} .delivery-banner .container {padding: 0 0.75rem} .delivery-banner-promo {margin-top: 0.1rem} .delivery-banner-content {font-size: 0.875rem;gap: 0.5rem} .delivery-icon {font-size: 1.1rem} .delivery-text {font-size: 0.75rem} body {padding-top: var(--delivery-banner-height)} .navbar {top: var(--delivery-banner-height)} } .navbar {background: var(--bg-white);box-shadow: var(--shadow-sm);position: fixed;top: var(--delivery-banner-height);left: 0;right: 0;width: 100%;margin: 0;padding: 0;z-index: 10000;border-bottom: 1px solid var(--border-color);box-sizing: border-box} .nav-content {display: flex;justify-content: space-between;align-items: center;padding: 1.25rem 0;position: relative} .logo {display: flex;align-items: center} .logo-image {height: 50px;width: auto;object-fit: contain;max-width: 200px} .nav-links {display: none} .nav-cart-center {display: flex;align-items: center;justify-content: flex-end;margin-left: auto} .nav-link {color: var(--text-dark);text-decoration: none;font-weight: 500;transition: color 0.3s;display: flex;align-items: center;gap: 0.5rem} .nav-link:hover {color: var(--primary-color)} .nav-cart-link {position: relative;background: var(--bg-gradient);color: white !important;padding: 0.5rem 1rem;border-radius: 999px;font-weight: 600} .nav-cart-link:hover {background: var(--primary-dark);transform: translateY(-2px);box-shadow: var(--shadow-md)} .nav-cart-count {background: rgba(255, 255, 255, 0.3);padding: 0.125rem 0.5rem;border-radius: 999px;font-size: 0.875rem;font-weight: 700;min-width: 1.5rem;text-align: center} .hero {background: var(--bg-gradient);color: white;padding: 6rem 0;text-align: center;position: relative;overflow: hidden} .hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');opacity: 0.3} .hero-content {position: relative;z-index: 1} .hero-title {font-size: 3.5rem;font-weight: 900;margin-bottom: 1.5rem;line-height: 1.1;letter-spacing: -1px;text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)} .hero-subtitle {font-size: 1.375rem;margin-bottom: 3rem;opacity: 0.95;font-weight: 400;max-width: 700px;margin-left: auto;margin-right: auto} .hero-features {display: flex;justify-content: center;gap: 3rem;margin-bottom: 3rem;flex-wrap: wrap} .feature {display: flex;align-items: center;gap: 0.75rem;font-weight: 600;font-size: 1.125rem;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);padding: 0.875rem 1.75rem;border-radius: 999px;border: 1px solid rgba(255, 255, 255, 0.2);transition: all var(--transition-normal)} .feature:hover {background: rgba(255, 255, 255, 0.2);transform: translateY(-2px)} .feature-icon {font-size: 1.75rem} .cta-button {display: inline-block;background: white;color: var(--primary-color);padding: 1.125rem 3rem;border-radius: 999px;font-weight: 700;text-decoration: none;transition: all var(--transition-normal);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);font-size: 1.125rem;text-transform: uppercase;letter-spacing: 0.5px} .cta-button:hover {transform: translateY(-4px);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);background: rgba(255, 255, 255, 0.95)} .products-section, .about-section, .contact-section {padding: 5rem 0} .section-title {font-size: 2.5rem;font-weight: 700;text-align: center;margin-bottom: 1rem;color: var(--text-dark)} .section-subtitle {text-align: center;color: var(--text-gray);font-size: 1.125rem;margin-bottom: 3rem} .products-wrapper {display: flex;flex-direction: column;gap: 4rem} .brand-floor {background: var(--bg-white);border-radius: 1rem;padding: 2rem;box-shadow: var(--shadow-md);position: relative;overflow: visible;will-change: auto} .brand-floor[data-brand="VELO"] {background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)} .brand-floor[data-brand="CUBA"] {background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%)} .brand-floor[data-brand="H&P"] {background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%)} .brand-floor[data-brand="NOIS"] {background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 100%)} .brand-floor[data-brand="PABLO"] {background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)} .brand-header {margin-bottom: 2rem} .brand-name {font-size: 1.875rem;font-weight: 700;color: var(--text-dark);margin-bottom: 0.5rem;text-align: center} .brand-description {text-align: center} .brand-products-count {text-align: center} .brand-description {color: var(--text-gray);font-size: 1rem} .products-carousel-container {position: relative;display: flex;align-items: center;gap: 1rem;width: 100%;will-change: auto} .products-carousel {overflow: hidden;cursor: grab;flex: 1;position: relative} .products-carousel:active {cursor: grabbing} .products-carousel-track {display: flex;transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);gap: 1.5rem;padding: 0.25rem 0;will-change: transform} .product-card {flex: 0 0 280px;width: 280px;min-width: 280px;max-width: 280px;background: var(--bg-white);border: 1px solid var(--border-color);border-radius: var(--border-radius-lg);overflow: hidden;transition: all var(--transition-normal);position: relative;cursor: pointer;flex-shrink: 0} .product-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--bg-gradient);transform: scaleX(0);transition: transform var(--transition-normal);z-index: 1} .product-card:hover {transform: translateY(-8px);box-shadow: var(--shadow-2xl);border-color: var(--primary-light)} .product-card:hover::before {transform: scaleX(1)} .product-image-container {position: relative;width: 100%;height: 200px;flex-shrink: 0;background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);overflow: hidden} .product-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain;object-position: center;transition: transform var(--transition-normal)} .product-card:hover .product-image {transform: scale(1.05)} .product-image-container::after {content: attr(data-brand);position: absolute;top: 0.75rem;right: 0.75rem;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);padding: 0.25rem 0.75rem;border-radius: 999px;font-size: 0.7rem;font-weight: 700;color: var(--primary-dark);text-transform: uppercase;letter-spacing: 0.5px;box-shadow: var(--shadow-md)} .product-info {padding: 1.5rem} .product-name {font-size: 1.125rem;font-weight: 700;margin-bottom: 0.5rem;color: var(--text-dark);line-height: 1.3;min-height: 2.6rem;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-align: center} .product-description {font-size: 0.875rem;color: var(--text-gray);margin-bottom: 1rem;line-height: 1.5;min-height: 2.5rem;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden} .product-details {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 1.25rem;justify-content: center;align-items: center} .product-nicotine, .product-flavor {font-size: 0.7rem;padding: 0.4rem 0.875rem;background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);border-radius: 999px;color: #92400e;font-weight: 700;text-transform: uppercase;letter-spacing: 0.3px;box-shadow: 0 2px 4px rgba(0,0,0,0.08);text-align: center} .product-nicotine {background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);color: #991b1b} .product-flavor {background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);color: #5b21b6} .product-footer {border-top: 2px solid var(--bg-light);padding-top: 1.25rem;background: linear-gradient(to bottom, transparent, rgba(6, 182, 212, 0.02))} .product-price {font-size: 1.75rem;font-weight: 800;background: var(--bg-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;display: block;margin-bottom: 1rem;letter-spacing: -0.5px} .btn-product {width: 100%;padding: 0.875rem 1.5rem;background: var(--bg-gradient);color: white;border: none;border-radius: var(--border-radius-md);font-size: 0.9375rem;font-weight: 700;cursor: pointer;transition: all var(--transition-normal);text-transform: uppercase;letter-spacing: 0.5px;box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);position: relative;overflow: hidden} .btn-product::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition: left 0.5s} .btn-product:hover::before {left: 100%} .btn-product:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4)} .btn-product:active {transform: translateY(0)} .qty-control {display: flex;flex-direction: column;align-items: center;gap: 0.5rem;justify-content: center;margin-bottom: 1rem} .qty-label {font-size: 0.875rem;font-weight: 600;color: var(--text-dark);width: 100%;text-align: center;margin-bottom: 0.25rem} .qty-buttons {display: flex;align-items: center;gap: 0.5rem} .qty-btn {width: 2.25rem;height: 2.25rem;border-radius: 50%;background: var(--bg-light);border: 2px solid var(--border-color);color: var(--primary-color);font-size: 1.125rem;font-weight: 700;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all var(--transition-fast)} .qty-btn:hover:not(:disabled) {background: var(--primary-color);border-color: var(--primary-color);color: white;transform: scale(1.1)} .qty-btn:disabled {opacity: 0.4;cursor: not-allowed} .qty-buttons input {width: 3rem;height: 2.25rem;text-align: center;border: 2px solid var(--border-color);border-radius: var(--border-radius-sm);font-size: 1rem;font-weight: 700;color: var(--text-dark);background: white} .delivery-info {font-size: 0.875rem;color: white;font-weight: 700;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #06b6d4, #06b6d4);padding: 0.6rem 1rem;border-radius: 25px;box-shadow: 0 4px 12px rgba(12, 74, 110, 0.4);text-transform: uppercase;letter-spacing: 0.5px;animation: pulse 2s ease-in-out infinite} @keyframes pulse {0%, 100% {opacity: 1;transform: scale(1)} 50% {opacity: 0.9;transform: scale(1.02)} } @keyframes fadeInUp {from {opacity: 0;transform: translateY(30px)} to {opacity: 1;transform: translateY(0)} } @keyframes fadeIn {from {opacity: 0} to {opacity: 1} } .product-card {animation: fadeInUp 0.6s ease-out backwards} .product-card:nth-child(1) {animation-delay: 0.1s} .product-card:nth-child(2) {animation-delay: 0.2s} .product-card:nth-child(3) {animation-delay: 0.3s} .product-card:nth-child(4) {animation-delay: 0.4s} .product-card:nth-child(5) {animation-delay: 0.5s} .carousel-btn {width: 3rem;height: 3rem;border-radius: 50%;background: var(--bg-white);border: 2px solid var(--border-color);display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s;flex-shrink: 0;z-index: 10;position: relative;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)} .carousel-btn:hover:not(:disabled) {background: var(--primary-color);border-color: var(--primary-color);color: white;transform: scale(1.1)} .carousel-btn:disabled {opacity: 0.3;cursor: not-allowed} .carousel-dots {display: flex;justify-content: center;gap: 0.5rem;margin-top: 1.5rem} .carousel-dot {width: 0.75rem;height: 0.75rem;border-radius: 50%;background: var(--border-color);border: none;cursor: pointer;transition: all 0.3s} .carousel-dot.active, .carousel-dot:hover {background: var(--primary-color);transform: scale(1.3)} @media (max-width: 1280px) {.product-card {flex: 0 0 260px;width: 260px;min-width: 260px;max-width: 260px} } @media (max-width: 1024px) {.product-card {flex: 0 0 240px;width: 240px;min-width: 240px;max-width: 240px} .products-carousel {padding: 0 0.5rem} } @media (max-width: 768px) {.hero {padding: 4rem 0} .hero-title {font-size: 2.5rem} .hero-subtitle {font-size: 1.125rem} .hero-features {gap: 1.5rem;flex-direction: column;align-items: center} .feature {width: 100%;max-width: 300px;justify-content: center} .nav-content {padding: 1rem 0;min-height: 60px} .logo {flex: 0 0 auto} .logo-image {height: 40px} .nav-cart-link {padding: 0.5rem 1rem;font-size: 0.875rem} .product-card {flex: 0 0 220px;width: 220px;min-width: 220px;max-width: 220px;margin: 0 0.5rem} .product-name {font-size: 1rem;min-height: 2.4rem} .product-description {font-size: 0.8125rem;min-height: 2.25rem} .product-price {font-size: 1.5rem} .btn-product {font-size: 0.875rem;padding: 0.75rem 1.25rem} .carousel-btn {width: 2.5rem;height: 2.5rem;opacity: 1;display: flex !important;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12)} .products-carousel {padding: 0 0.5rem} .products-carousel-track {gap: 1rem} .section-title {font-size: 2rem} .about-card {padding: 2rem} .about-icon {font-size: 3rem} } @media (max-width: 480px) {:root {--navbar-height: 64px} .hero {padding: 3rem 0} .hero-title {font-size: 2rem} .hero-subtitle {font-size: 1rem} .cta-button {padding: 1rem 2rem;font-size: 1rem} .product-card {flex: 0 0 200px;width: 200px;min-width: 200px;max-width: 200px;margin: 0 0.25rem} .product-info {padding: 1.25rem} .carousel-btn {width: 2rem;height: 2rem;font-size: 1.5rem;opacity: 1;display: flex !important;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15)} .brand-floor {padding: 1rem;position: relative;overflow: visible} .products-carousel-container {gap: 0.5rem} .products-carousel {padding: 0 0.25rem} .section-title {font-size: 1.75rem} .about-card {padding: 1.5rem} .about-card h3 {font-size: 1.375rem} .qty-control {flex-direction: column;gap: 0.5rem} } .about-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 2rem;margin-top: 3rem} .about-card {background: var(--bg-white);padding: 2.5rem;border-radius: var(--border-radius-lg);box-shadow: var(--shadow-md);text-align: center;transition: all var(--transition-normal);border: 1px solid var(--border-color);position: relative;overflow: hidden} .about-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--bg-gradient);transform: scaleX(0);transition: transform var(--transition-normal)} .about-card:hover {transform: translateY(-8px);box-shadow: var(--shadow-xl);border-color: var(--primary-light)} .about-card:hover::before {transform: scaleX(1)} .about-icon {font-size: 3.5rem;margin-bottom: 1.5rem;display: inline-block;transition: transform var(--transition-normal)} .about-card:hover .about-icon {transform: scale(1.1) rotate(5deg)} .about-card h3 {font-size: 1.625rem;margin-bottom: 1rem;color: var(--text-dark);font-weight: 700} .about-card p {color: var(--text-gray);line-height: 1.7;font-size: 1rem} .contact-section {background: var(--bg-white)} .contact-info {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-top: 3rem} .contact-item {display: flex;align-items: center;gap: 1rem;padding: 1.5rem;background: var(--bg-light);border-radius: 0.75rem} .contact-icon {font-size: 2rem} .contact-item h3 {font-size: 1.125rem;margin-bottom: 0.25rem} .contact-item a {color: var(--primary-color);text-decoration: none;font-weight: 500} .footer {background: var(--text-dark);color: white;padding: 3rem 0 1.5rem} .footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 2rem;margin-bottom: 2rem} .footer-section h3, .footer-section h4 {margin-bottom: 1rem} .footer-section ul {list-style: none} .footer-section a {color: rgba(255, 255, 255, 0.8);text-decoration: none;transition: color 0.3s} .footer-section a:hover {color: white} .footer-bottom {text-align: center;padding-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.1);color: rgba(255, 255, 255, 0.6)} .loading, .error-message, .no-products {text-align: center;padding: 4rem 2rem} .spinner {width: 50px;height: 50px;border: 4px solid var(--border-color);border-top-color: var(--primary-color);border-radius: 50%;animation: spin 1s linear infinite;margin: 0 auto 1rem} @keyframes spin {to {transform: rotate(360deg)} } .retry-button {background: var(--primary-color);color: white;border: none;padding: 0.75rem 1.5rem;border-radius: 0.5rem;font-weight: 600;cursor: pointer;margin-top: 1rem} .retry-button:hover {background: var(--primary-dark)} .cart-page {padding: 3rem 0;min-height: calc(100vh - 200px)} .page-title {font-size: 2rem;font-weight: 700;margin-bottom: 2rem;color: var(--text-dark)} .cart-layout {display: grid;grid-template-columns: 1fr 400px;gap: 2rem} .cart-items-section {flex: 1} .cart-item {display: grid;grid-template-columns: 100px 1fr auto auto auto;gap: 1.5rem;align-items: center;background: white;padding: 1.5rem;border-radius: 0.75rem;margin-bottom: 1rem;box-shadow: var(--shadow-sm);transition: box-shadow 0.2s} .cart-item:hover {box-shadow: var(--shadow-md)} .cart-item-image img {width: 100px;height: 100px;object-fit: contain;border-radius: 0.5rem;background: var(--bg-light);padding: 0.5rem} .cart-item-info {flex: 1} .cart-item-name {font-size: 1.125rem;font-weight: 600;margin-bottom: 0.25rem;color: var(--text-dark)} .cart-item-price {color: var(--text-gray);font-size: 0.875rem} .free-item-badge {display: inline-block;background: #06b6d4;color: white;padding: 0.25rem 0.75rem;border-radius: 0.5rem;font-size: 0.75rem;font-weight: 600;margin-top: 0.5rem} .cart-item-quantity {display: flex;align-items: center;gap: 0.5rem} .qty-btn {width: 32px;height: 32px;border: 1px solid var(--border-color);background: white;border-radius: 0.375rem;cursor: pointer;font-weight: 600;transition: all 0.2s} .qty-btn:hover {background: var(--bg-light);border-color: var(--primary-color)} .qty-input {width: 60px;height: 32px;text-align: center;border: 1px solid var(--border-color);border-radius: 0.375rem;font-weight: 600} .cart-item-total {font-size: 1.125rem;font-weight: 700;color: var(--primary-color);min-width: 100px;text-align: right} .free-price {color: #06b6d4;text-decoration: line-through;opacity: 0.6} .cart-item-remove {background: none;border: none;font-size: 1.5rem;cursor: pointer;color: var(--text-gray);transition: color 0.2s} .cart-item-remove:hover {color: var(--danger-color)} .cart-summary-sidebar {position: sticky;top: calc(var(--delivery-banner-height) + var(--navbar-height));height: fit-content} .cart-summary-card {background: white;padding: 2rem;border-radius: 0.75rem;box-shadow: var(--shadow-md);margin-bottom: 1.5rem} .cart-summary-card h3 {font-size: 1.25rem;margin-bottom: 1.5rem;color: var(--text-dark)} .summary-line {display: flex;justify-content: space-between;margin-bottom: 1rem;color: var(--text-gray)} .summary-line.highlight {color: #06b6d4;font-weight: 600} .summary-line.total {font-size: 1.5rem;font-weight: 700;color: var(--text-dark);padding-top: 1rem} .summary-divider {border-top: 2px solid var(--border-color);margin: 1.5rem 0} .free-badge {color: #06b6d4;font-weight: 700} .btn-block {width: 100%;margin-bottom: 0.75rem} .free-products-section {background: white;padding: 2rem;border-radius: 0.75rem;box-shadow: var(--shadow-md)} .free-products-section h3 {font-size: 1.25rem;margin-bottom: 0.5rem;color: var(--text-dark)} .free-products-info {color: var(--text-gray);margin-bottom: 1.5rem;font-size: 0.875rem} .free-products-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem} .free-product-card {border: 2px solid var(--border-color);border-radius: var(--border-radius-lg);padding: 1.25rem;text-align: center;transition: all var(--transition-normal);cursor: pointer;background: white;position: relative;overflow: hidden} .free-product-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--bg-gradient);transform: scaleX(0);transition: transform var(--transition-normal)} .free-product-card:hover:not(.disabled) {transform: translateY(-4px);box-shadow: var(--shadow-lg);border-color: var(--primary-light)} .free-product-card:hover:not(.disabled)::before {transform: scaleX(1)} .free-product-card.selected {border-color: var(--primary-color);background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2)} .free-product-card.selected::before {transform: scaleX(1)} .free-product-card.disabled {opacity: 0.5;cursor: not-allowed} .free-product-card img {width: 100px;height: 100px;object-fit: contain;margin-bottom: 0.75rem;transition: transform var(--transition-normal)} .free-product-card:hover:not(.disabled) img {transform: scale(1.05)} .free-product-card h4 {font-size: 0.9375rem;font-weight: 700;margin-bottom: 0.5rem;color: var(--text-dark);line-height: 1.3;min-height: 2.6rem;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden} .free-product-price {font-size: 0.875rem;font-weight: 600;color: var(--text-gray);margin-bottom: 1rem;display: flex;flex-direction: column;align-items: center;gap: 0.25rem} .free-product-price .original-price {font-size: 0.75rem;text-decoration: line-through;color: var(--text-light)} .free-product-price .free-price-badge {font-size: 1rem;font-weight: 700;color: var(--primary-color);background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);padding: 0.25rem 0.75rem;border-radius: 999px} .btn {padding: 0.75rem 1.5rem;border-radius: var(--border-radius-md);font-weight: 600;font-size: 0.9375rem;border: none;cursor: pointer;transition: all var(--transition-normal);text-transform: uppercase;letter-spacing: 0.5px;display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem} .btn:disabled {opacity: 0.5;cursor: not-allowed} .btn-primary {background: var(--bg-gradient);color: white;box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3)} .btn-primary:hover:not(:disabled) {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4)} .btn-success {background: linear-gradient(135deg, #06b6d4 0%, #06b6d4 100%);color: white;box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3)} .btn-success:hover:not(:disabled) {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4)} .btn-danger {background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);color: white;box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3)} .btn-danger:hover:not(:disabled) {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4)} .btn-secondary {background: var(--bg-light);color: var(--text-dark);border: 2px solid var(--border-color)} .btn-secondary:hover:not(:disabled) {background: var(--border-color);border-color: var(--text-gray)} .btn-sm {padding: 0.5rem 1rem;font-size: 0.875rem} .btn-lg {padding: 1rem 2rem;font-size: 1.0625rem} .empty-cart {text-align: center;padding: 4rem 2rem;background: white;border-radius: 0.75rem} .empty-cart-icon {font-size: 4rem;margin-bottom: 1rem} .empty-cart h2 {margin-bottom: 0.5rem;color: var(--text-dark)} .empty-cart p {color: var(--text-gray);margin-bottom: 2rem} .checkout-page {padding: 3rem 0;min-height: calc(100vh - 200px)} .checkout-layout {max-width: 800px;margin: 0 auto} .checkout-card {background: white;padding: 2rem;border-radius: 0.75rem;box-shadow: var(--shadow-md);margin-bottom: 2rem} .checkout-card h2 {font-size: 1.5rem;margin-bottom: 1.5rem;color: var(--text-dark)} .form-group {margin-bottom: 1.5rem} .form-group label {display: block;margin-bottom: 0.5rem;font-weight: 600;color: var(--text-dark)} .form-input, .form-select, .form-textarea {width: 100%;padding: 0.75rem;border: 1px solid var(--border-color);border-radius: 0.5rem;font-size: 1rem;font-family: inherit;transition: border-color 0.2s} .form-input:focus, .form-select:focus, .form-textarea:focus {outline: none;border-color: var(--primary-color)} .form-textarea {resize: vertical} .phone-input-wrapper {display: flex;align-items: center;gap: 0.5rem} .phone-prefix {padding: 0.75rem;background: var(--bg-light);border: 1px solid var(--border-color);border-radius: 0.5rem;font-weight: 600;color: var(--text-dark)} .phone-input {flex: 1} .helper-text {display: block;margin-top: 0.25rem;font-size: 0.875rem;color: var(--text-gray)} .form-actions {display: flex;gap: 1rem;justify-content: space-between;margin-top: 2rem} .cart-notification {position: fixed;top: calc(var(--delivery-banner-height) + var(--navbar-height) + 0.5rem);right: 2rem;background: white;padding: 0;border-radius: var(--border-radius-lg);box-shadow: var(--shadow-2xl);border-left: 4px solid var(--primary-color);z-index: 10000;min-width: 380px;max-width: 420px;transform: translateX(500px);opacity: 0;transition: all var(--transition-normal)} .cart-notification.show {transform: translateX(0);opacity: 1} .cart-notification-content {display: flex;align-items: center;gap: 1rem;padding: 1.5rem;position: relative} .cart-notification-icon {font-size: 2rem;flex-shrink: 0} .cart-notification-text {flex: 1;display: flex;flex-direction: column;gap: 0.25rem} .cart-notification-text strong {font-size: 1rem;color: var(--text-dark);display: block} .cart-notification-text span {font-size: 0.875rem;color: var(--text-gray)} .cart-notification-close {position: absolute;top: 0.75rem;right: 0.75rem;width: 1.75rem;height: 1.75rem;border-radius: 50%;background: var(--bg-light);border: none;color: var(--text-gray);font-size: 1.125rem;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all var(--transition-fast)} .cart-notification-close:hover {background: var(--danger-color);color: white;transform: scale(1.1)} .cart-notification-actions {display: flex;gap: 0.75rem;padding: 1rem 1.5rem 1.5rem;border-top: 1px solid var(--border-color)} .cart-notification-actions button {flex: 1;padding: 0.75rem 1.25rem;border-radius: var(--border-radius-md);font-weight: 600;font-size: 0.875rem;cursor: pointer;transition: all var(--transition-fast);border: none} .btn-continue-shopping {background: var(--bg-light);color: var(--text-dark)} .btn-continue-shopping:hover {background: var(--border-color)} .btn-view-cart {background: var(--bg-gradient);color: white} .btn-view-cart:hover {transform: translateY(-2px);box-shadow: var(--shadow-md)} .add-to-cart-notification {position: fixed;top: calc(var(--delivery-banner-height) + var(--navbar-height) + 0.5rem);right: 2rem;background: white;padding: 1.5rem;border-radius: 0.75rem;box-shadow: var(--shadow-xl);border-left: 4px solid #06b6d4;z-index: 9999;min-width: 320px;transform: translateX(400px);transition: transform 0.3s ease-in-out} .add-to-cart-notification.show {transform: translateX(0)} .notification-header {display: flex;align-items: center;gap: 0.75rem;margin-bottom: 1rem} .notification-icon {font-size: 2rem} .notification-header h4 {font-size: 1rem;margin: 0;color: var(--text-dark)} .notification-body {margin-bottom: 1rem} .notification-body p {color: var(--text-gray);font-size: 0.875rem;margin-bottom: 0.5rem} .notification-actions {display: flex;gap: 0.5rem} .free-product-notification {position: fixed;top: calc(var(--delivery-banner-height) + var(--navbar-height) + 0.5rem);right: 2rem;background: white;padding: 1rem 1.5rem;border-radius: 0.75rem;box-shadow: var(--shadow-xl);z-index: 9999;min-width: 300px;transform: translateX(400px);opacity: 0;transition: all 0.3s ease-in-out;font-weight: 600} .free-product-notification.show {transform: translateX(0);opacity: 1} .free-product-notification.success {border-left: 4px solid #06b6d4;color: #065f46} .free-product-notification.warning {border-left: 4px solid #f59e0b;color: #92400e} @media (max-width: 1024px) {.cart-layout {grid-template-columns: 1fr} .cart-summary-sidebar {position: static} } @media (max-width: 768px) {.cart-item {grid-template-columns: 80px 1fr;gap: 1rem} .cart-item-quantity, .cart-item-total {grid-column: 2} .cart-item-remove {grid-column: 2;text-align: right} .free-products-grid {grid-template-columns: 1fr} .form-actions {flex-direction: column} .cart-notification, .add-to-cart-notification, .free-product-notification {right: 1rem;left: 1rem;min-width: auto;max-width: none} .cart-notification-actions {flex-direction: column;gap: 0.5rem} } .floating-cart-button {position: fixed;bottom: 2rem;right: 2rem;background: var(--bg-gradient);color: white;padding: 1rem 1.5rem;border-radius: 999px;box-shadow: var(--shadow-2xl);z-index: 999;cursor: pointer;display: flex;align-items: center;gap: 0.75rem;font-weight: 700;font-size: 1rem;transition: all var(--transition-normal);opacity: 0;transform: translateY(100px);pointer-events: none} .floating-cart-button.show {opacity: 1;transform: translateY(0);pointer-events: all} .floating-cart-button:hover {transform: translateY(-4px);box-shadow: 0 20px 40px rgba(6, 182, 212, 0.4)} .floating-cart-button.pulse {animation: cartPulse 2s ease-in-out infinite} @keyframes cartPulse {0%, 100% {box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3);transform: scale(1)} 50% {box-shadow: 0 15px 40px rgba(6, 182, 212, 0.5);transform: scale(1.05)} } .floating-cart-icon {font-size: 1.5rem} .floating-cart-text {display: flex;flex-direction: column;gap: 0.125rem} .floating-cart-title {font-size: 0.875rem;opacity: 0.9} .floating-cart-count {font-size: 0.75rem;opacity: 0.8} @media (max-width: 768px) {.floating-cart-button {bottom: 1.5rem;right: 1.5rem;padding: 0.875rem 1.25rem;font-size: 0.875rem} .floating-cart-icon {font-size: 1.25rem} .nav-content {padding: 0.875rem 0;min-height: 60px} .logo-image {height: 35px} .nav-cart-link {padding: 0.5rem 1rem;font-size: 0.875rem;white-space: nowrap} }.order-message-section{margin-top:0}.order-message-section h2{font-size:1.5rem;margin-bottom:0.5rem;color:var(--text-dark)}.order-message-intro{color:var(--text-gray);margin-bottom:1.25rem;font-size:0.9375rem}.order-message-box{background:var(--bg-light);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:1.25rem;margin-bottom:1.5rem;max-height:320px;overflow-y:auto}.order-message-box pre{margin:0;white-space:pre-wrap;word-wrap:break-word;font-size:0.875rem;line-height:1.5;color:var(--text-dark);font-family:inherit}.order-message-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.btn-whatsapp{background:#25d366;color:white!important;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.5rem;border-radius:var(--border-radius-md);font-weight:600;font-size:0.9375rem;border:none;cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 12px rgba(37,211,102,0.3)}.btn-whatsapp:hover{background:#20bd5a;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,0.4)}.order-message-footer{font-size:0.875rem;color:var(--text-gray);margin:0}.gif-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9995;pointer-events:none;overflow:hidden}.gif-overlay img{width:100%;height:100%;object-fit:cover;display:block;opacity:0.35}