/**
 * WooCommerce Custom Styles — TH true NUT Design System
 * Áp dụng cho: single product, cart, checkout, my account, shop archive
 */

/* =====================================================
   GLOBAL RESET & FONT
   ===================================================== */
.woocommerce,
.woocommerce-page,
.woocommerce-checkout,
.woocommerce-cart {
    font-family: 'Noto Sans', sans-serif;
    color: #161c22;
}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.woocommerce .woocommerce-breadcrumb {
    color: #6e7a6f;
    font-size: 14px;
    margin-bottom: 1.5rem;
}
.woocommerce .woocommerce-breadcrumb a {
    color: #00658d;
    text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* =====================================================
   ADD TO CART — Single Product
   ===================================================== */
.suaoccho-atc-wrapper form.cart {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Quantity selector */
.suaoccho-atc-wrapper .quantity {
    display: flex;
    align-items: center;
    border: 1px solid #bdcabd;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.suaoccho-atc-wrapper .quantity input[type="number"] {
    width: 3rem;
    border: none;
    outline: none;
    text-align: center;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 0.75rem 0;
    background: transparent;
    -moz-appearance: textfield;
}
.suaoccho-atc-wrapper .quantity input[type="number"]::-webkit-inner-spin-button,
.suaoccho-atc-wrapper .quantity input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Quantity buttons */
.suaoccho-atc-wrapper .quantity::before,
.suaoccho-atc-wrapper .quantity::after {
    display: none; /* we use JS below */
}

/* Add to cart button */
.suaoccho-atc-wrapper button.single_add_to_cart_button,
.suaoccho-atc-wrapper .single_add_to_cart_button {
    flex: 1;
    background: #006c38 !important;
    color: #fff !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    padding: 0.875rem 2rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 4px 14px rgba(0, 108, 56, 0.3) !important;
    transition: transform 0.15s, background 0.2s !important;
    min-height: 50px;
}
.suaoccho-atc-wrapper button.single_add_to_cart_button:hover { background: #008848 !important; }
.suaoccho-atc-wrapper button.single_add_to_cart_button:active { transform: scale(0.95) !important; }

/* =====================================================
   SHOP ARCHIVE — Product Grid
   ===================================================== */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce ul.products li.product {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    border: 1px solid rgba(189,202,189,.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.2s;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 8px 30px rgba(0,0,0,.12); }

.woocommerce ul.products li.product .woocommerce-loop-product__link { width: 100%; display: block; }

.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 12rem !important;
    object-fit: contain !important;
    margin-bottom: 1rem !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    background: #eff4fc !important;
    transition: transform 0.3s !important;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    font-weight: 600;
    color: #003D7C;
    margin-bottom: 0.5rem;
    font-family: 'Noto Sans', sans-serif;
}

.woocommerce ul.products li.product .price {
    color: #006c38;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
}
.woocommerce ul.products li.product .price del { color: #bdcabd; font-size: 14px; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    background: transparent !important;
    border: 1px solid #006c38 !important;
    color: #006c38 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s !important;
    margin-top: auto !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background: #006c38 !important;
    color: #fff !important;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    background: #ba1a1a !important;
    color: #fff !important;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.5rem !important;
    min-height: unset !important;
    min-width: unset !important;
    line-height: 1.4 !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    right: auto !important;
}

/* =====================================================
   CART PAGE
   ===================================================== */
.woocommerce-cart .woocommerce {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.woocommerce-cart table.cart {
    border: none !important;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    background: #fff;
}
.woocommerce-cart table.cart th {
    background: #eff4fc !important;
    color: #003D7C !important;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1rem 1.5rem !important;
    border: none !important;
}
.woocommerce-cart table.cart td {
    padding: 1.25rem 1.5rem !important;
    border-color: rgba(189,202,189,.3) !important;
    vertical-align: middle !important;
}
.woocommerce-cart table.cart .product-name a { color: #003D7C; text-decoration: none; font-weight: 600; }
.woocommerce-cart table.cart .product-name a:hover { color: #006c38; }
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal { color: #006c38; font-weight: 700; }

/* Cart quantity input */
.woocommerce-cart table.cart .qty {
    border: 1px solid #bdcabd !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem !important;
    width: 4rem !important;
    text-align: center;
}

/* Update cart / coupon buttons */
.woocommerce-cart .button[name="update_cart"],
.woocommerce-cart .button[name="apply_coupon"] {
    background: transparent !important;
    border: 1px solid #006c38 !important;
    color: #006c38 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.5rem !important;
    transition: background .2s, color .2s !important;
}
.woocommerce-cart .button[name="update_cart"]:hover,
.woocommerce-cart .button[name="apply_coupon"]:hover {
    background: #006c38 !important;
    color: #fff !important;
}

/* Cart totals */
.woocommerce-cart .cart_totals {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid rgba(189,202,189,.3);
}
.woocommerce-cart .cart_totals h2 {
    font-size: 22px;
    font-weight: 700;
    color: #003D7C;
    margin-bottom: 1.25rem;
}
.woocommerce-cart .cart_totals table { border: none !important; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    padding: 0.75rem 0 !important;
    border-color: rgba(189,202,189,.3) !important;
}
.woocommerce-cart .cart_totals .order-total .amount {
    color: #006c38;
    font-size: 20px;
    font-weight: 700;
}

/* Proceed to checkout button */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    background: #006c38 !important;
    color: #fff !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 1rem 2rem !important;
    border-radius: 0.75rem !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-shadow: 0 4px 14px rgba(0,108,56,.25) !important;
    transition: transform .15s !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: #008848 !important; transform: translateY(-1px) !important; }

/* =====================================================
   CHECKOUT PAGE
   ===================================================== */
.woocommerce-checkout .woocommerce {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout h3#ship-to-different-address,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #003D7C !important;
    font-family: 'Noto Sans', sans-serif !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(189,202,189,.3) !important;
}

/* Checkout form layout */
.woocommerce-checkout #customer_details {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid rgba(189,202,189,.3);
    margin-bottom: 1.5rem;
}

/* Form fields */
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce form .input-text,
.woocommerce form select {
    border: 1px solid #bdcabd !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 15px !important;
    color: #161c22 !important;
    background: #fff !important;
    width: 100% !important;
    transition: border-color .2s !important;
    outline: none !important;
}
.woocommerce form .input-text:focus,
.woocommerce form select:focus {
    border-color: #006c38 !important;
    box-shadow: 0 0 0 3px rgba(0,108,56,.1) !important;
}

/* Labels */
.woocommerce-checkout label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #3e4a3f;
    letter-spacing: 0.03em;
    margin-bottom: 0.375rem;
    display: block;
}

/* Order review */
.woocommerce-checkout #order_review_heading { margin-top: 2rem; }
.woocommerce-checkout table.shop_table {
    border: none !important;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid rgba(189,202,189,.3) !important;
}
.woocommerce-checkout table.shop_table th {
    background: #eff4fc !important;
    color: #003D7C !important;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 1rem 1.5rem !important;
    border: none !important;
}
.woocommerce-checkout table.shop_table td {
    padding: 0.875rem 1.5rem !important;
    border-color: rgba(189,202,189,.3) !important;
}
.woocommerce-checkout table.shop_table .order-total .amount {
    color: #006c38;
    font-size: 18px;
    font-weight: 700;
}

/* Payment section */
.woocommerce-checkout #payment {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(189,202,189,.3);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
}
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(189,202,189,.3) !important;
    padding: 1.5rem !important;
    margin: 0 !important;
    list-style: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(189,202,189,.3) !important;
    margin-bottom: 0.75rem !important;
    background: #f7f9ff !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { margin-bottom: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { margin-right: 0.75rem; accent-color: #006c38; }
.woocommerce-checkout #payment ul.payment_methods li label {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #161c22;
    margin: 0;
}

.woocommerce-checkout #payment div.payment_box {
    background: #eff4fc !important;
    padding: 1rem 1.5rem !important;
    font-size: 14px !important;
    color: #3e4a3f !important;
}

/* Place order button */
.woocommerce-checkout #payment #place_order {
    background: #006c38 !important;
    color: #fff !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 1rem 2rem !important;
    border-radius: 0.75rem !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0,108,56,.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: transform .15s, background .2s !important;
    margin: 1.5rem !important;
    width: calc(100% - 3rem) !important;
}
.woocommerce-checkout #payment #place_order:hover { background: #008848 !important; transform: translateY(-1px) !important; }
.woocommerce-checkout #payment #place_order:active { transform: scale(.97) !important; }

/* =====================================================
   MY ACCOUNT
   ===================================================== */
.woocommerce-account .woocommerce {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 240px;
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid rgba(189,202,189,.3);
    height: fit-content;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #3e4a3f;
    text-decoration: none;
    transition: background .2s, color .2s;
    margin-bottom: 0.25rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: #eff4fc; color: #006c38; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: #006c38; color: #fff; }

.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid rgba(189,202,189,.3);
}

/* Account action buttons */
.woocommerce-account .button,
.woocommerce-account .woocommerce-Button {
    background: #006c38 !important;
    color: #fff !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .2s !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.woocommerce-account .button:hover { background: #008848 !important; }

/* =====================================================
   NOTICES / MESSAGES
   ===================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 14px !important;
    margin-bottom: 1.5rem !important;
    border-top: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}
.woocommerce-message {
    background: #f0fdf4 !important;
    color: #006c38 !important;
    border-left: 4px solid #006c38 !important;
}
.woocommerce-info {
    background: #eff4fc !important;
    color: #00658d !important;
    border-left: 4px solid #00658d !important;
}
.woocommerce-error {
    background: #fff1f2 !important;
    color: #ba1a1a !important;
    border-left: 4px solid #ba1a1a !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
    background: #006c38 !important;
    color: #fff !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    text-decoration: none !important;
    margin-left: auto !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    .woocommerce-checkout #customer_details,
    .woocommerce-cart .woocommerce { padding: 1rem !important; }
    .woocommerce-account .woocommerce { flex-direction: column; }
    .woocommerce-account .woocommerce-MyAccount-navigation { flex: 1 1 100%; }
}
@media (max-width: 480px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
}