/* === Sticky Floating Cart Icon === */ .sticky-cart { position: fixed; bottom: 20px; right: 20px; background-color: #fff; border-radius: 50%; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 1000; cursor: pointer; transition: all 0.3s ease; } .sticky-cart a { position: relative; display: inline-block; font-size: 18px; font-weight: bold; text-decoration: none; color: #333; } .cart-badge { position: absolute; top: -8px; right: -8px; background-color: red; color: white; font-size: 12px; padding: 3px 6px; border-radius: 50%; } .cart-drawer { position: fixed; right: -100%; top: 0; width: 100%; max-width: 380px; height: 100%; background: #fff; z-index: 1050; box-shadow: -4px 0 8px rgba(0,0,0,0.2); transition: right 0.4s ease; display: flex; flex-direction: column; } .cart-drawer.open { right: 0; } .cart-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #ddd; } .cart-items { padding: 16px; overflow-y: auto; flex: 1; } .cart-item { display: flex; gap: 12px; margin-bottom: 16px; } .cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; } .item-details .title { font-weight: bold; margin-bottom: 4px; } .item-details .quantity { width: 50px; padding: 4px; margin-top: 6px; } .cart-footer { padding: 16px; border-top: 1px solid #ddd; } .checkout-button { background: #000; color: white; width: 100%; padding: 10px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; } .cart-upsell { padding: 16px; border-top: 1px solid #ddd; } .cart-upsell h3 { font-size: 16px; margin-bottom: 10px; } .cart-upsell-items { display: flex; flex-direction: column; gap: 12px; } .cart-upsell-item { display: flex; gap: 10px; align-items: center; } .cart-upsell-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; } .cart-upsell-info .title { font-weight: bold; } .cart-upsell-info .price { color: #555; font-size: 14px; } .cart-upsell-info button { margin-top: 5px; padding: 6px 10px; background-color: #333; color: white; border: none; border-radius: 4px; cursor: pointer; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } } .shake { animation: shake 0.6s ease-in-out; } .site-header { position: sticky; top: 0; width: 100%; background-color: #fff; z-index: 999; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } @media screen and (max-width: 768px) { .cart-upsell-items { flex-direction: column; } .cart-item { flex-direction: row; gap: 10px; } .sticky-cart { bottom: 16px; right: 16px; } .checkout-button { font-size: 16px; } .cart-item img { width: 50px; height: 50px; } .item-details .title { font-size: 14px; } }
Skip to content