.form-quantity { display: block;overflow: hidden;width: 138px;position: relative;border: 1px solid #ddd;border-radius: 3px;} .form-quantity input { height: 36px;line-height: 36px;text-align: center;width: 100%;padding: 0 10px;border: none;color: var(--ace-color-main);font-size: 18px;font-weight: 600;} .form-quantity input:focus { outline: 0;} .form-quantity a { display: inline-block;position: absolute;top: 0;bottom: 0;width: 36px;height: 36px;line-height: 36px;cursor: pointer;outline: 0;text-align: center;font-size: 18px;} .form-quantity a:hover { text-decoration: none;} .form-quantity a i { font-style: normal;font-size: 20px;} .form-quantity a.spinner-cut { left: 0;border-right: 1px solid #ddd;} .form-quantity a.spinner-add { right: 0;border-left: 1px solid #ddd;} .form-quantity a.spinner-add.disabled, .form-quantity a.spinner-cut.disabled { background-color: #f6f7f8;cursor: not-allowed;} .cart-title { font-size: 28px;font-weight: 600;color: #333;margin-bottom: 30px;} .cart-items { display: flex;flex-direction: column;gap: 20px;margin-bottom: 20px;} .cart-item { display: flex;background: #fff;border-radius: 5px;padding: 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;border: 1px solid transparent;position: relative;animation: cartItemFadeIn 0.3s ease-out;animation-fill-mode: both;opacity: 1;transform: translateX(0);} .cart-item.removing { opacity: 0;transform: translateX(-100%);} .cart-item:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);transform: translateY(-2px);} .cart-item-disabled { opacity: 0.6;background: #f8f9fa;border-color: #dc3545;position: relative;} .cart-item-disabled::before { content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(220, 53, 69, 0.1);border-radius: 5px;pointer-events: none;} .cart-item .cart-item-close { position: absolute;top: -1px;right: -1px;width: 40px;height: 36px;z-index: 10;background: #f6f7f8;border-radius: 0 0 0 5px;display: flex;align-items: center;justify-content: center;} .cart-item .iconfont.icon-close { font-size: 20px;font-weight: 500;} .cart-item .cart-item-close:hover { background: #f00;color: #fff;} .cart-item-disabled .iconfont.icon-close { opacity: 0.5;cursor: not-allowed;} .cart-item-disabled .iconfont.icon-close:hover { transform: none;box-shadow: none;} .cart-item-image { width: 150px;height: 150px;flex-shrink: 0;margin-right: 20px;} .cart-product-image { width: 100%;height: 100%;object-fit: cover;border-radius: 3px;border: 1px solid #ddd;transition: transform 0.2s ease;} .cart-product-image:hover { transform: scale(1.05);} .cart-item-content { flex: 1;display: flex;flex-direction: column;justify-content: space-between;} .cart-item-info { flex: 1;} .cart-product-name { width: calc(100% - 50px);font-size: 20px;font-weight: 600;color: #333;margin: 0 0 10px 0;} .cart-product-name a { color: inherit;text-decoration: none;} .cart-product-name a:hover { color: #5033bb;} .cart-variant-name { font-size: 16px;color: var(--ace-color-main);margin: 0 0 10px 0;} .cart-item-price { display: flex;align-items: center;gap: 10px;} .cart-price { font-size: 18px;font-weight: 600;color: #333;} .cart-discount { font-size: 14px;color: #dc3545;background: #f8d7da;padding: 2px 8px;border-radius: 4px;} .cart-item-actions { display: flex;flex-direction: row;gap: 20px;align-items: center;flex: 1;} .cart-quantity-form { display: flex;align-items: center;gap: 10px;} .cart-item-stock { font-size: 14px;white-space: nowrap;} .cart-stock-ok { color: #28a745;} .cart-stock-low { color: #ffc107;} .cart-stock-warning { color: #dc3545;} .cart-item-bottom { display: flex;justify-content: space-between;align-items: flex-end;gap: 20px;margin-top: 10px;} .cart-item-total { text-align: right;flex-shrink: 0;min-width: 120px;} .cart-total { font-size: 24px;font-weight: 700;color: #333;display: block;} .cart-actions { display: flex;justify-content: space-between;align-items: center;gap: 20px;margin-top: 30px;} .button-continue, .button-checkout, .button-shopping { width: auto;min-width: 200px;height: 50px;line-height: 50px;font-size: 20px;text-align: center;cursor: pointer;display: flex;align-items: center;justify-content: center;gap: 10px;padding: 0 30px;border: none;border-radius: 3px;color: #FFF;background: var(--ace-color-button);transition: all 0.3s ease;} .button-shopping { float: right;color: var(--ace-color-main);background: #EEE;border: 1px solid #ddd;} .button-shopping:hover { color: var(--ace-color-main);} .button-continue .iconfont, .button-shopping .iconfont { margin-right: 10px;font-size: 18px;font-weight: 600;} .button-continue { float: right;margin-right: -10px;} .button-checkout { float: left;} .button-checkout:hover { background: var(--ace-color-button-hover);} .button-checkout .iconfont { margin-right: 10px;font-size: 18px;font-weight: 600;} .button-checkout .checkout-total { font-size: 18px;font-weight: 700;padding: 4px 4px;white-space: nowrap;} .cart-empty p { font-size: 18px;color: #666;margin-bottom: 30px;} @keyframes cartItemFadeIn { from { opacity: 0;transform: translateY(20px);} to { opacity: 1;transform: translateY(0);} } .cart-item:nth-child(1) { animation-delay: 0.1s;} .cart-item:nth-child(2) { animation-delay: 0.2s;} .cart-item:nth-child(3) { animation-delay: 0.3s;} .cart-item:nth-child(4) { animation-delay: 0.4s;} .cart-item:nth-child(5) { animation-delay: 0.5s;} @media (max-width: 768px) { .cart-item { flex-direction: row;padding: 15px;} .cart-item-image { width: 100px;height: 100px;margin-right: 15px;margin-bottom: 0;text-align: left;} .cart-item-bottom { flex-direction: column;align-items: stretch;gap: 15px;} .cart-item-actions { flex-direction: row;align-items: center;gap: 15px;flex: none;} .cart-quantity-form { justify-content: flex-start;} .cart-item-stock { text-align: left;font-size: 16px;} .cart-item-total { text-align: right;margin-top: 0;min-width: auto;} .cart-product-name { font-size: 18px;text-align: left;} .cart-variant-name { text-align: left;} .cart-item-price { justify-content: flex-start;} .cart-actions { flex-direction: column;gap: 15px;} .button-shopping, .button-checkout { width: 100%;min-width: auto;font-size: 18px;padding: 0 15px;} .button-checkout .checkout-total { font-size: 16px;} } @media (max-width: 576px) { .cart-item { padding: 12px;} .cart-item-image { width: 80px;height: 80px;margin-right: 12px;} .cart-product-image { width: 100%;height: 100%;} .cart-product-name { font-size: 16px;text-align: left;} .cart-variant-name { font-size: 14px;text-align: left;} .cart-price { font-size: 16px;} .cart-total { font-size: 18px;} }