:root {

















    --primary-green: #3ea635;

















    --dark-green: #2d7a28;

















    --light-gray: #f8f9fa;

















    --text-dark: #1a1a2e;

















    --text-muted: #6c757d;

















    --border-color: #e9ecef;

















    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);

















    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);

















    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

















    --radius-sm: 8px;

















    --radius-md: 12px;

















    --radius-lg: 16px;

















}

















.cart-container {

















    max-width: 1300px;

















    margin: 40px auto;

















    padding: 0 24px;

















}

















.cart-header {

















    text-align: center;

















    margin-bottom: 40px;

















}

















.cart-title {

















    font-size: 32px;

















    font-weight: 700;

















    color: var(--text-dark);

















    margin-bottom: 8px;

















    letter-spacing: -0.5px;

















}

















.cart-subtitle {

















    font-size: 15px;

















    color: var(--text-muted);

















    font-weight: 500;

















}

















.cart-grid {

















    display: grid;

















    grid-template-columns: 1fr 380px;

















    gap: 32px;

















    align-items: start;

















}

















.cart-items {

















    background: white;

















    border-radius: var(--radius-lg);

















    padding: 8px;

















    box-shadow: var(--shadow-md);

















}

















.cart-item {

















    display: grid;

















    grid-template-columns: 100px 1fr auto;

















    gap: 20px;

















    padding: 20px;

















    margin: 8px;

















    background: var(--light-gray);

















    border-radius: var(--radius-md);

















    transition: all 0.3s ease;

















    position: relative;

















}

















.cart-item:hover {

















    background: #f0f4f0;

















    transform: translateY(-2px);

















    box-shadow: var(--shadow-sm);

















}

















.cart-item-image {

















    width: 100px;

















    height: 100px;

















    border-radius: var(--radius-md);

















    overflow: hidden;

















    background: white;

















    box-shadow: var(--shadow-sm);

















}

















.cart-item-image a {

















    display: block;

















    width: 100%;

















    height: 100%;

















}

















.cart-item-image img {

















    width: 100%;

















    height: 100%;

















    object-fit: contain;

















    transition: transform 0.3s ease;

















}

















.cart-item:hover .cart-item-image img {

















    transform: scale(1.05);

















}

















.cart-item-details {

















    display: flex;

















    flex-direction: column;

















    justify-content: center;

















    gap: 8px;

















}

















.cart-item-name {

















    font-size: 16px;

















    font-weight: 600;

















    color: var(--text-dark);

















    margin: 0;

















    line-height: 1.4;

















    text-decoration: none !important;

















    border-bottom: none !important;

















    display: -webkit-box;

















    -webkit-line-clamp: 2;

















    -webkit-box-orient: vertical;

















    overflow: hidden;

















}

















.cart-item-name a,

















.cart-item-details a {

















    text-decoration: none !important;

















    border-bottom: none !important;

















    color: inherit;

















}

















.cart-item-name a:hover {

















    color: var(--primary-green);

















}

















.cart-item-price {

















    font-size: 20px;

















    font-weight: 700;

















    color: var(--primary-green);

















}

















.item-subtotal {

















    font-size: 13px;

















    color: var(--text-muted);

















    font-weight: 500;

















}

















.cart-item-actions {

















    display: flex;

















    flex-direction: column;

















    align-items: flex-end;

















    justify-content: center;

















    gap: 12px;

















}

















.quantity-control {

















    display: flex;

















    align-items: center;

















    background: white;

















    border-radius: var(--radius-sm);

















    overflow: hidden;

















    box-shadow: 0 1px 4px rgba(0,0,0,0.08);

















}

















.qty-btn {

















    width: 36px;

















    height: 36px;

















    border: none;

















    background: white;

















    cursor: pointer;

















    font-size: 18px;

















    font-weight: 600;

















    color: var(--text-dark);

















    transition: all 0.2s ease;

















    display: flex;

















    align-items: center;

















    justify-content: center;

















}

















.qty-btn:hover {

















    background: var(--primary-green);

















    color: white;

















}

















.qty-btn:active {

















    transform: scale(0.95);

















}

















.qty-input {

















    width: 48px;

















    height: 36px;

















    border: none;

















    border-left: 1px solid var(--border-color);

















    border-right: 1px solid var(--border-color);

















    text-align: center;

















    font-size: 15px;

















    font-weight: 600;

















    color: var(--text-dark);

















    background: white;

















}

















.qty-input:not([readonly]) {

















    width: 60px;

















}

















.qty-unit {

















    padding: 0 8px;

















    font-size: 12px;

















    font-weight: 600;

















    color: var(--text-muted);

















    background: #f8f9fa;

















    height: 36px;

















    display: flex;

















    align-items: center;

















    border-left: 1px solid var(--border-color);

















}

















.remove-btn {

















    display: flex;

















    align-items: center;

















    gap: 6px;

















    padding: 8px 14px;

















    border: none;

















    background: white;

















    color: #dc3545;

















    border-radius: var(--radius-sm);

















    cursor: pointer;

















    font-size: 13px;

















    font-weight: 600;

















    transition: all 0.2s ease;

















    box-shadow: 0 1px 4px rgba(0,0,0,0.06);

















}

















.remove-btn:hover {

















    background: #dc3545;

















    color: white;

















    transform: translateY(-1px);

















    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);

















}

















.remove-btn svg {

















    width: 14px;

















    height: 14px;

















}

















/* Cart Summary */

















.cart-summary {

















    background: white;

















    border-radius: var(--radius-lg);

















    padding: 28px;

















    box-shadow: var(--shadow-md);

















    position: sticky;

















    top: 160px;

















    border: 1px solid var(--border-color);

















}

















.summary-title {

















    font-size: 20px;

















    font-weight: 700;

















    color: var(--text-dark);

















    margin-bottom: 24px;

















    padding-bottom: 16px;

















    border-bottom: 2px solid var(--border-color);

















    display: flex;

















    align-items: center;

















    gap: 10px;

















}

















.summary-title::before {

















    content: '';

















    width: 4px;

















    height: 20px;

















    background: var(--primary-green);

















    border-radius: 2px;

















}

















.summary-row {

















    display: flex;

















    justify-content: space-between;

















    align-items: center;

















    padding: 12px 0;

















    font-size: 15px;

















}

















.summary-label {

















    color: var(--text-muted);

















    font-weight: 500;

















}

















.summary-value {

















    font-weight: 600;

















    color: var(--text-dark);

















}

















.summary-total {

















    padding: 20px 0 16px;

















    margin-top: 12px;

















    border-top: 2px dashed var(--border-color);

















}

















.summary-total .summary-label {

















    font-size: 16px;

















    font-weight: 600;

















    color: var(--text-dark);

















}

















.summary-total .summary-value {

















    font-size: 26px;

















    font-weight: 800;

















    color: var(--primary-green);

















}

















.checkout-btn {

















    width: 100%;

















    padding: 16px 24px;

















    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);

















    color: white;

















    border: none;

















    border-radius: var(--radius-md);

















    font-size: 16px;

















    font-weight: 700;

















    cursor: pointer;

















    transition: all 0.3s ease;

















    margin-top: 20px;

















    display: flex;

















    align-items: center;

















    justify-content: center;

















    gap: 10px;

















    text-decoration: none;

















    box-shadow: 0 4px 15px rgba(62, 166, 53, 0.3);

















}

















.checkout-btn:hover {

















    transform: translateY(-2px);

















    box-shadow: 0 8px 25px rgba(62, 166, 53, 0.4);

















}

















.checkout-btn:active {

















    transform: translateY(0);

















}

















/* Guest Checkout Button */

















.guest-checkout-btn {

















    width: 100%;

















    padding: 14px 24px;

















    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

















    color: white;

















    border: none;

















    border-radius: var(--radius-md);

















    font-size: 15px;

















    font-weight: 600;

















    cursor: pointer;

















    transition: all 0.3s ease;

















    margin-top: 10px;

















    display: flex;

















    align-items: center;

















    justify-content: center;

















    gap: 10px;

















    text-decoration: none;

















    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

















}

















.guest-checkout-btn:hover {

















    transform: translateY(-2px);

















    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);

















}

















.guest-checkout-btn:active {

















    transform: translateY(0);

















}

















.continue-shopping {

















    width: 100%;

















    padding: 14px 20px;

















    background: white;

















    color: var(--text-dark);

















    border: 2px solid var(--border-color);

















    border-radius: var(--radius-md);

















    font-size: 15px;

















    font-weight: 600;

















    cursor: pointer;

















    transition: all 0.3s ease;

















    margin-top: 12px;

















    text-decoration: none;

















    display: flex;

















    align-items: center;

















    justify-content: center;

















    gap: 8px;

















}

















.continue-shopping:hover {

















    border-color: var(--primary-green);

















    color: var(--primary-green);

















    background: #f8fff8;

















}

















.clear-cart-btn {

















    color: #dc3545 !important;

















    border-color: #dc3545 !important;

















}

















.clear-cart-btn:hover {

















    background: #dc3545 !important;

















    color: white !important;

















}

















/* Coupon Section */

















.coupon-section {

















    margin: 20px 0;

















    padding: 16px 0;

















    border-top: 1px dashed var(--border-color);

















    border-bottom: 1px dashed var(--border-color);

















}

















.coupon-input-wrapper {

















    display: flex;

















    gap: 8px;

















}

















.coupon-input {

















    flex: 1;

















    padding: 12px 14px;

















    border: 2px solid var(--border-color);

















    border-radius: var(--radius-sm);

















    font-size: 14px;

















    text-transform: uppercase;

















    font-weight: 500;

















    transition: border-color 0.2s;

















}

















.coupon-input:focus {

















    border-color: var(--primary-green);

















    outline: none;

















}

















.coupon-btn {

















    padding: 12px 20px;

















    background: var(--text-dark);

















    color: white;

















    border: none;

















    border-radius: var(--radius-sm);

















    font-size: 14px;

















    font-weight: 600;

















    cursor: pointer;

















    transition: all 0.2s;

















}

















.coupon-btn:hover {

















    background: var(--primary-green);

















}

















.coupon-btn:disabled {

















    background: #ccc;

















    cursor: not-allowed;

















}

















.coupon-applied {

















    display: flex;

















    align-items: center;

















    justify-content: space-between;

















    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);

















    padding: 12px 14px;

















    border-radius: var(--radius-sm);

















    border: 1px solid #c8e6c9;

















}

















.coupon-info {

















    display: flex;

















    align-items: center;

















    gap: 10px;

















}

















.coupon-badge {

















    background: var(--primary-green);

















    color: white;

















    padding: 5px 12px;

















    border-radius: 20px;

















    font-size: 12px;

















    font-weight: 700;

















    letter-spacing: 0.5px;

















}

















.coupon-discount {

















    color: var(--dark-green);

















    font-weight: 600;

















    font-size: 14px;

















}

















.coupon-remove-btn {

















    background: none;

















    border: none;

















    color: #999;

















    font-size: 22px;

















    cursor: pointer;

















    padding: 0 5px;

















    line-height: 1;

















    transition: color 0.2s;

















}

















.coupon-remove-btn:hover {

















    color: #dc3545;

















}

















.discount-row .discount-value {

















    color: var(--primary-green);

















    font-weight: 700;

















}

















/* Empty Cart */

















.empty-cart {

















    text-align: center;

















    padding: 80px 30px;

















    background: white;

















    border-radius: var(--radius-lg);

















    box-shadow: var(--shadow-md);

















}

















.empty-cart-icon {

















    width: 100px;

















    height: 100px;

















    margin: 0 auto 24px;

















    color: #ddd;

















}

















.empty-cart h2 {

















    font-size: 28px;

















    font-weight: 700;

















    color: var(--text-dark);

















    margin-bottom: 12px;

















}

















.empty-cart p {

















    font-size: 16px;

















    color: var(--text-muted);

















    margin-bottom: 28px;

















}

















.shop-now-btn {

















    display: inline-flex;

















    align-items: center;

















    gap: 10px;

















    padding: 14px 36px;

















    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);

















    color: white;

















    text-decoration: none;

















    border-radius: var(--radius-md);

















    font-size: 16px;

















    font-weight: 600;

















    transition: all 0.3s ease;

















    box-shadow: 0 4px 15px rgba(62, 166, 53, 0.3);

















}

















.shop-now-btn:hover {

















    transform: translateY(-2px);

















    box-shadow: 0 8px 25px rgba(62, 166, 53, 0.4);

















}

















/* Loading */

















.cart-loading {

















    text-align: center;

















    padding: 60px 20px;

















}

















.spinner-large {

















    width: 48px;

















    height: 48px;

















    border: 3px solid var(--border-color);

















    border-top-color: var(--primary-green);

















    border-radius: 50%;

















    animation: spin 0.8s linear infinite;

















    margin: 0 auto 16px;

















}

















@keyframes spin {

















    to { transform: rotate(360deg); }

















}

















/* Cart Item Warning Badge */

















.cart-item-warning {

















    display: flex;

















    align-items: flex-start;

















    gap: 6px;

















    background: rgba(220, 53, 69, 0.95);

















    color: white;

















    padding: 6px 10px;

















    border-radius: 8px;

















    font-size: 13px;

















    font-weight: 600;

















    margin: 8px 0;

















    line-height: 1.3;

















}

















.cart-item-warning svg {

















    flex-shrink: 0;

















    margin-top: 2px;

















}

















.cart-item-warning span {

















    word-wrap: break-word;

















}

















/* Responsive */

















@media (max-width: 1024px) {

















    .cart-grid {

















        grid-template-columns: 1fr;

















    }

















    .cart-summary {

















        position: static;

















    }

















}

















@media (max-width: 768px) {

















    .cart-container {

















        padding: 0 16px;

















        margin: 24px auto;

















    }

















    .cart-title {

















        font-size: 26px;

















    }

















    .cart-items {

















        padding: 4px;

















    }

















    .cart-item {

















        grid-template-columns: 80px 1fr;

















        gap: 14px;

















        padding: 16px;

















        margin: 6px;

















    }

















    .cart-item-image {

















        width: 80px;

















        height: 80px;

















    }

















    .cart-item-name {

















        font-size: 14px;

















    }

















    .cart-item-price {

















        font-size: 17px;

















    }

















    .cart-item-actions {

















        grid-column: 1 / -1;

















        flex-direction: row;

















        justify-content: space-between;

















        align-items: center;

















        margin-top: 8px;

















        padding-top: 12px;

















        border-top: 1px dashed var(--border-color);

















    }

















    .cart-summary {

















        padding: 20px;

















    }

















    .summary-total .summary-value {

















        font-size: 22px;

















    }

















    .checkout-btn {

















        padding: 14px 20px;

















        font-size: 15px;

















    }

















}

















@media (max-width: 480px) {

















    .cart-item {

















        padding: 14px;

















    }

















    .qty-btn {

















        width: 32px;

















        height: 32px;

















    }

















    .qty-input {

















        width: 40px;

















        height: 32px;

















        font-size: 14px;

















    }

















    .remove-btn {

















        padding: 6px 10px;

















        font-size: 12px;

















    }

















}