/* Wholesale Website — Page-specific styles
   Core theme tokens and component styles are in themes/theme.css.
   This file contains only overrides and page-specific helpers. */

/* ==================== Product Grid Layout ==================== */
.product-grid { margin-top: var(--spacing-5); }

/* ==================== Add to Cart Section ==================== */
.add-to-cart-section { margin: var(--spacing-5) 0; }
.add-to-cart-section .form-inline > * { margin-inline-end: var(--spacing-2); }

/* ==================== Input Quantity ==================== */
.input-qty { text-align: center; }

/* ==================== Product Image Gallery ==================== */
#btnZoom { display: inline-block; }
.product-detail-img { transition: opacity 0.15s; }

/* ==================== Cart Table ==================== */
.cart-table { margin-bottom: var(--spacing-5); }
.cart-table .product-col { width: 45%; }
.cart-table .product-col .product-title { font-weight: 600; color: var(--color-text); }
.cart-table .product-col .product-title a { color: var(--color-text); }
.cart-table .product-col .product-title a:hover { color: var(--color-primary); }
.cart-table .product-col .product-variant { font-size: 0.8125rem; color: var(--color-text-muted); }
.cart-table .price-col, .cart-table .total-col { font-weight: 600; color: var(--color-text); }
.cart-table .product-thumbnail { width: 80px; }
.cart-table .product-thumbnail img { border-radius: var(--radius); }
.cart-table .remove-col .btn-remove { font-size: 1.125rem; }

/* ==================== Cart Summary ==================== */
.cart-summary {
    background-color: var(--color-surface-subtle);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
}
.cart-summary h3 { font-size: 1.125rem; margin-bottom: var(--spacing-4); }
.cart-summary .summary-row {
    display: flex; justify-content: space-between;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.cart-summary .summary-row:last-of-type { border-bottom: none; }
.cart-summary .summary-total {
    font-size: 1.25rem; font-weight: 700; color: var(--color-text);
    padding-top: var(--spacing-3); border-top: 2px solid var(--color-border);
}

/* ==================== Checkout ==================== */
.checkout-form .form-group { margin-bottom: var(--spacing-4); }
.checkout-review { margin-top: var(--spacing-5); }

/* ==================== Order History ==================== */
.order-list .order-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    transition: box-shadow var(--transition-fast);
}
.order-list .order-item:hover { box-shadow: var(--shadow); }
.order-list .order-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}
.order-list .order-number { font-weight: 600; color: var(--color-text); }
.order-list .order-date { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ==================== Account Sidebar ==================== */
.account-nav .nav-link {
    color: var(--color-text-muted);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}
.account-nav .nav-link:hover { color: var(--color-primary); background-color: var(--color-primary-faded); }
.account-nav .nav-link.active { color: var(--color-primary); background-color: var(--color-primary-faded); font-weight: 600; }

/* ==================== FAQ Accordion ==================== */
.faq-accordion .accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--spacing-2); }
.faq-accordion .accordion-button { font-weight: 600; color: var(--color-text); }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--color-primary); background-color: var(--color-primary-faded); }

/* ==================== Contact Page ==================== */
.contact-info-box { display: flex; gap: var(--spacing-3); margin-bottom: var(--spacing-4); }
.contact-info-box .icon { font-size: 1.5rem; color: var(--color-primary); flex-shrink: 0; }
.contact-info-box .info h4 { font-size: 0.9375rem; margin-bottom: var(--spacing-1); }
.contact-info-box .info p { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }

/* ==================== About Page ==================== */
.about-section { padding: var(--spacing-6) 0; }
.about-feature { text-align: center; margin-bottom: var(--spacing-5); }
.about-feature .feature-icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: var(--spacing-3); }
.about-feature h4 { font-size: 1.125rem; margin-bottom: var(--spacing-2); }
.about-feature p { color: var(--color-text-muted); font-size: 0.875rem; }

/* ==================== Referral ==================== */
.referral-card {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #fff; border-radius: var(--radius-lg); padding: var(--spacing-6);
}
.referral-card .referral-code {
    font-size: 1.5rem; font-weight: 700; letter-spacing: 0.1em;
    background: rgba(255,255,255,0.15); padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius); display: inline-block; margin-top: var(--spacing-3);
}

/* ==================== Address Cards ==================== */
.address-card {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--spacing-4); margin-bottom: var(--spacing-4);
    transition: box-shadow var(--transition-fast);
}
.address-card:hover { box-shadow: var(--shadow); }
.address-card .address-type-badge { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.address-card .address-actions { margin-top: var(--spacing-3); display: flex; gap: var(--spacing-2); }