/**
 * ============================================================================
 * NETT CUSTOM CSS — CUSTOM-PAGES
 * ============================================================================
 *
 * Applies to: WooCommerce & other special plugin pages:
 *   - Shop         (.woocommerce-shop)
 *   - Cart         (.woocommerce-cart)
 *   - Checkout     (.woocommerce-checkout)
 *   - My Account   (.woocommerce-account)
 *   - Order Received  (.woocommerce-order-received)
 *   - Wishlist, Compare, etc.
 * Depends on: _master-variables.css or _master-variables-[project-id].css
 *
 * PRIORITY: Font families & color palette are the most critical declarations.
 * ============================================================================
 */

/* ============================================================
 * BASE TYPOGRAPHY — highest priority for font rendering
 * ============================================================ */
.woocommerce-page,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-shop,
.woocommerce-order-received {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    font-weight: var(--nett-body-weight);
    line-height: var(--nett-body-line-height);
    color: var(--nett-body-color);
    background-color: var(--nett-bg-secondary);
}

/* ============================================================
 * PAGE TITLE / HEADER
 * ============================================================ */
.woocommerce-page .page-title,
.woocommerce-page h1.product_section,
.woocommerce-page .woocommerce-breadcrumb + h1 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h2-size);
    font-weight: var(--nett-h2-weight);
    line-height: var(--nett-h2-line-height);
    letter-spacing: var(--nett-h2-tracking);
    color: var(--nett-h2-color);
    margin-bottom: var(--nett-space-6);
}

/* Breadcrumb */
.woocommerce-page .woocommerce-breadcrumb {
    font-family: var(--nett-font-meta);
    font-size: var(--nett-meta-size);
    color: var(--nett-meta-color);
    margin-bottom: var(--nett-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--nett-space-1);
}

.woocommerce-page .woocommerce-breadcrumb a {
    color: var(--nett-text-link);
    text-decoration: none;
    transition: var(--nett-transition-colors);
}

.woocommerce-page .woocommerce-breadcrumb a:hover {
    color: var(--nett-text-link-hover);
    text-decoration: underline;
}

/* ============================================================
 * WOO NOTICES / FLASH MESSAGES
 * ============================================================ */
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-sm);
    font-weight: var(--nett-font-medium);
    border-radius: var(--nett-radius-lg);
    padding: var(--nett-space-4) var(--nett-space-5);
    margin-bottom: var(--nett-space-5);
    display: flex;
    align-items: center;
    gap: var(--nett-space-3);
    border: var(--nett-border-1) solid transparent;
}

.woocommerce-page .woocommerce-message {
    background-color: var(--nett-success-50);
    color: var(--nett-success-700, #047857);
    border-color: var(--nett-success-200, #a7f3d0);
}

.woocommerce-page .woocommerce-info {
    background-color: var(--nett-primary-50);
    color: var(--nett-primary-700);
    border-color: var(--nett-primary-200);
}

.woocommerce-page .woocommerce-error {
    background-color: var(--nett-error-50);
    color: var(--nett-error-700);
    border-color: var(--nett-error-200);
    list-style: none;
    padding-left: var(--nett-space-5);
}

/* ============================================================
 * FORMS — UNIVERSAL (checkout, login, register, account)
 * ============================================================ */
.woocommerce-page form label,
.woocommerce-page .form-row label {
    font-family: var(--nett-font-label);
    font-size: var(--nett-label-size);
    font-weight: var(--nett-label-weight);
    color: var(--nett-label-color);
    letter-spacing: var(--nett-label-tracking);
    display: block;
    margin-bottom: var(--nett-space-1);
}

.woocommerce-page form .required,
.woocommerce-page .form-row .required {
    color: var(--nett-error);
    font-size: var(--nett-text-base);
}

.woocommerce-page form input[type="text"],
.woocommerce-page form input[type="email"],
.woocommerce-page form input[type="tel"],
.woocommerce-page form input[type="password"],
.woocommerce-page form input[type="number"],
.woocommerce-page form select,
.woocommerce-page form textarea,
.woocommerce-page .form-row input,
.woocommerce-page .form-row select,
.woocommerce-page .form-row textarea {
    width: 100%;
    background-color: var(--nett-input-bg);
    border: var(--nett-border-1) solid var(--nett-input-border);
    border-radius: var(--nett-input-radius);
    padding: var(--nett-input-padding);
    font-family: var(--nett-font-body);
    font-size: var(--nett-input-font-size);
    color: var(--nett-text-primary);
    transition: border-color var(--nett-duration) var(--nett-ease),
                box-shadow var(--nett-duration) var(--nett-ease);
    outline: none;
}

.woocommerce-page form input[type="text"]:focus,
.woocommerce-page form input[type="email"]:focus,
.woocommerce-page form input[type="password"]:focus,
.woocommerce-page form select:focus,
.woocommerce-page form textarea:focus {
    border-color: var(--nett-input-border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Primary Button */
.woocommerce-page .button,
.woocommerce-page button.button,
.woocommerce-page input[type="submit"],
.woocommerce-page a.button {
    font-family: var(--nett-font-btn) !important;
    font-size: var(--nett-btn-font-size) !important;
    font-weight: var(--nett-btn-font-weight) !important;
    background-color: var(--nett-btn-primary-bg) !important;
    color: var(--nett-btn-primary-text) !important;
    border: none !important;
    border-radius: var(--nett-btn-radius) !important;
    padding: var(--nett-btn-padding-y) var(--nett-btn-padding-x) !important;
    cursor: pointer;
    transition: background-color var(--nett-duration) var(--nett-ease) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--nett-space-2);
    line-height: var(--nett-leading-normal);
}

.woocommerce-page .button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input[type="submit"]:hover,
.woocommerce-page a.button:hover {
    background-color: var(--nett-btn-primary-hover-bg) !important;
    color: var(--nett-white) !important;
}

/* Outline / secondary button */
.woocommerce-page .button.alt,
.woocommerce-page a.button.alt {
    background-color: var(--nett-btn-secondary-bg) !important;
    color: var(--nett-btn-secondary-text) !important;
    border: var(--nett-border-2) solid var(--nett-btn-secondary-border) !important;
}

.woocommerce-page .button.alt:hover,
.woocommerce-page a.button.alt:hover {
    background-color: var(--nett-primary) !important;
    color: var(--nett-white) !important;
}

/* ============================================================
 * CART PAGE
 * ============================================================ */
.woocommerce-cart h2,
.woocommerce-cart .cart-section-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h3-size);
    font-weight: var(--nett-h3-weight);
    color: var(--nett-h3-color);
    margin-bottom: var(--nett-space-6);
    padding-bottom: var(--nett-space-3);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
}

/* Cart Table */
.woocommerce-cart .shop_table,
.woocommerce-cart table.cart {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--nett-font-body);
    background-color: var(--nett-white);
    border-radius: var(--nett-card-radius);
    overflow: hidden;
    box-shadow: var(--nett-card-shadow);
    border: var(--nett-border-1) solid var(--nett-card-border);
}

.woocommerce-cart .shop_table thead tr,
.woocommerce-cart table.cart thead tr {
    background-color: var(--nett-bg-tertiary);
}

.woocommerce-cart .shop_table th,
.woocommerce-cart table.cart th {
    font-family: var(--nett-font-label);
    font-size: var(--nett-label-size);
    font-weight: var(--nett-label-weight);
    color: var(--nett-label-color);
    letter-spacing: var(--nett-label-tracking);
    text-transform: uppercase;
    padding: var(--nett-space-4) var(--nett-space-5);
    text-align: left;
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
}

.woocommerce-cart .shop_table td,
.woocommerce-cart table.cart td {
    padding: var(--nett-space-4) var(--nett-space-5);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color-light);
    vertical-align: middle;
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    color: var(--nett-body-color);
}

/* Product Name in Cart */
.woocommerce-cart .cart_item .product-name a {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-base);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
    text-decoration: none;
    transition: var(--nett-transition-colors);
}

.woocommerce-cart .cart_item .product-name a:hover {
    color: var(--nett-primary);
}

/* Product Price */
.woocommerce-cart .cart_item .product-price .amount,
.woocommerce-cart .cart_item .product-subtotal .amount {
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-lg);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-primary);
}

/* Quantity Input */
.woocommerce-cart .quantity .qty {
    width: 80px;
    text-align: center;
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-base);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
    border: var(--nett-border-1) solid var(--nett-input-border);
    border-radius: var(--nett-input-radius);
    padding: var(--nett-space-2) var(--nett-space-3);
}

/* Cart Totals */
.woocommerce-cart .cart-collaterals .cart_totals {
    background-color: var(--nett-white);
    border: var(--nett-border-1) solid var(--nett-card-border);
    border-radius: var(--nett-card-radius);
    padding: var(--nett-card-padding);
    box-shadow: var(--nett-card-shadow);
}

.woocommerce-cart .cart_totals h2 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h4-size);
    font-weight: var(--nett-h4-weight);
    color: var(--nett-h4-color);
    margin-bottom: var(--nett-space-5);
    border: none;
    padding: 0;
}

.woocommerce-cart .cart_totals table.shop_table th {
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-sm);
    font-weight: var(--nett-font-medium);
    color: var(--nett-text-secondary);
    padding: var(--nett-space-3) var(--nett-space-4);
    text-transform: none;
}

.woocommerce-cart .cart_totals table.shop_table td {
    font-family: var(--nett-font-body);
    padding: var(--nett-space-3) var(--nett-space-4);
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-lg);
    font-weight: var(--nett-font-bold);
    color: var(--nett-text-primary);
    border-top: var(--nett-border-2) solid var(--nett-border-color);
    padding-top: var(--nett-space-4);
}

.woocommerce-cart .cart_totals .order-total .amount {
    color: var(--nett-primary);
    font-size: var(--nett-text-xl);
}

/* ============================================================
 * CHECKOUT PAGE
 * ============================================================ */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h4-size);
    font-weight: var(--nett-h4-weight);
    color: var(--nett-h4-color);
    margin-bottom: var(--nett-space-5);
    padding-bottom: var(--nett-space-3);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
}

/* Order Review Table */
.woocommerce-checkout #order_review .shop_table {
    font-family: var(--nett-font-body);
    border-collapse: collapse;
    width: 100%;
    background-color: var(--nett-white);
    border-radius: var(--nett-card-radius);
    overflow: hidden;
    box-shadow: var(--nett-card-shadow);
    border: var(--nett-border-1) solid var(--nett-card-border);
}

.woocommerce-checkout #order_review .shop_table thead tr {
    background-color: var(--nett-primary);
    color: var(--nett-white);
}

.woocommerce-checkout #order_review .shop_table thead th {
    font-family: var(--nett-font-label);
    font-size: var(--nett-label-size);
    font-weight: var(--nett-label-weight);
    letter-spacing: var(--nett-label-tracking);
    text-transform: uppercase;
    padding: var(--nett-space-4) var(--nett-space-5);
    color: var(--nett-white);
    border: none;
}

.woocommerce-checkout #order_review .shop_table td {
    padding: var(--nett-space-4) var(--nett-space-5);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color-light);
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    color: var(--nett-body-color);
}

.woocommerce-checkout #order_review .shop_table .order-total td,
.woocommerce-checkout #order_review .shop_table .order-total th {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-lg);
    font-weight: var(--nett-font-bold);
    color: var(--nett-text-primary);
}

.woocommerce-checkout #order_review .shop_table .order-total .amount {
    color: var(--nett-primary);
}

/* Payment Methods */
.woocommerce-checkout #payment {
    background-color: var(--nett-bg-tertiary);
    border: var(--nett-border-1) solid var(--nett-border-color);
    border-radius: var(--nett-card-radius);
    padding: var(--nett-space-5);
    margin-top: var(--nett-space-6);
}

.woocommerce-checkout #payment .payment_methods li {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    color: var(--nett-text-primary);
    padding: var(--nett-space-3) 0;
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--nett-space-3);
}

.woocommerce-checkout #payment .payment_methods li:last-child {
    border-bottom: none;
}

.woocommerce-checkout #payment .payment_box {
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-sm);
    color: var(--nett-text-secondary);
    background-color: var(--nett-primary-50);
    border: var(--nett-border-1) solid var(--nett-primary-200);
    border-radius: var(--nett-radius-lg);
    padding: var(--nett-space-4);
    margin-top: var(--nett-space-2);
}

/* Place Order Button */
.woocommerce-checkout #place_order {
    width: 100%;
    padding: var(--nett-space-4) var(--nett-space-6) !important;
    font-size: var(--nett-text-base) !important;
    background: var(--nett-gradient-primary) !important;
    box-shadow: var(--nett-shadow-primary);
}

/* ============================================================
 * MY ACCOUNT PAGE
 * ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background-color: var(--nett-white);
    border: var(--nett-border-1) solid var(--nett-border-color);
    border-radius: var(--nett-card-radius);
    overflow: hidden;
    box-shadow: var(--nett-shadow-sm);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: var(--nett-border-1) solid var(--nett-border-color-light);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li span {
    font-family: var(--nett-font-nav);
    font-size: var(--nett-nav-link-size);
    font-weight: var(--nett-font-medium);
    color: var(--nett-nav-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--nett-space-3);
    padding: var(--nett-space-3) var(--nett-space-5);
    transition: var(--nett-transition-colors);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--nett-primary-50);
    color: var(--nett-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--nett-primary);
    color: var(--nett-white);
    font-weight: var(--nett-font-semibold);
}

/* Account Content Area */
.woocommerce-account .woocommerce-MyAccount-content {
    background-color: var(--nett-white);
    border: var(--nett-border-1) solid var(--nett-border-color);
    border-radius: var(--nett-card-radius);
    padding: var(--nett-card-padding);
    box-shadow: var(--nett-shadow-sm);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h4-size);
    font-weight: var(--nett-h4-weight);
    color: var(--nett-h4-color);
    margin-bottom: var(--nett-space-5);
    padding-bottom: var(--nett-space-2);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
}

.woocommerce-account .woocommerce-MyAccount-content table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-sm);
    margin-bottom: var(--nett-space-5);
}

.woocommerce-account .woocommerce-MyAccount-content table th {
    font-family: var(--nett-font-label);
    font-weight: var(--nett-label-weight);
    text-align: left;
    padding: var(--nett-space-3) var(--nett-space-4);
    border-bottom: var(--nett-border-2) solid var(--nett-border-color);
    color: var(--nett-text-secondary);
    text-transform: uppercase;
    font-size: var(--nett-text-xs);
    letter-spacing: var(--nett-tracking-wide);
}

.woocommerce-account .woocommerce-MyAccount-content table td {
    padding: var(--nett-space-3) var(--nett-space-4);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color-light);
    color: var(--nett-body-color);
    vertical-align: middle;
}

/* ============================================================
 * ORDER CONFIRMATION PAGE
 * ============================================================ */
.woocommerce-order-received .woocommerce-thankyou-order-received,
.woocommerce-order-received .entry-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h2-size);
    font-weight: var(--nett-h2-weight);
    color: var(--nett-success);
    margin-bottom: var(--nett-space-4);
    display: flex;
    align-items: center;
    gap: var(--nett-space-3);
}

.woocommerce-order-received .woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--nett-gap-md);
    background-color: var(--nett-success-50);
    border: var(--nett-border-1) solid var(--nett-success-200, #a7f3d0);
    border-radius: var(--nett-card-radius);
    padding: var(--nett-card-padding);
    margin-bottom: var(--nett-space-8);
    list-style: none;
}

.woocommerce-order-received .woocommerce-order-overview li {
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-sm);
    color: var(--nett-text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--nett-space-1);
}

.woocommerce-order-received .woocommerce-order-overview li strong {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-base);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 768px) {
    .woocommerce-cart table.cart thead {
        display: none;
    }

    .woocommerce-cart table.cart td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: var(--nett-space-3) var(--nett-space-4);
    }

    .woocommerce-cart table.cart td::before {
        content: attr(data-title);
        font-family: var(--nett-font-label);
        font-size: var(--nett-label-size);
        font-weight: var(--nett-label-weight);
        color: var(--nett-label-color);
        text-transform: uppercase;
        letter-spacing: var(--nett-tracking-wide);
    }

    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        margin-bottom: var(--nett-space-6);
    }
}