/* ============================================================
   Fantastic Dokan — woo-compat.css
   Restyles WooCommerce's own native template markup
   (output we don't control the HTML structure of) so it matches
   the .fd- design system defined in main-shop.css.

   Scope: only elements where WooCommerce renders its OWN classes
   directly (wc_display_product_attributes, comments_template,
   wc_print_notices, etc). Anything inside an .fd-* wrapper we
   built ourselves is already styled in main-shop.css — don't
   duplicate those rules here.
   ============================================================ */

/* ============================================================
   1. PRODUCT ATTRIBUTES TABLE
   Rendered by wc_display_product_attributes() — single product
   "Additional Information" tab. Mirrors .fd-product-attributes
   sizing from main-shop.css section 19.
   ============================================================ */

.woocommerce-product-attributes {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
}
.woocommerce-product-attributes-item__label,
.woocommerce-product-attributes-item__value {
    padding: var(--fd-space-3) var(--fd-space-4);
    border-bottom: 1px solid var(--fd-gray-100);
    text-align: left;
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
}
.woocommerce-product-attributes-item__label {
    font-weight: 600;
    color: var(--fd-black);
    width: 40%;
}
.woocommerce-product-attributes-item__value {
    color: var(--fd-gray-700);
}
.woocommerce-product-attributes-item__value p { margin: 0; }
.woocommerce-product-attributes-item__value a { color: var(--fd-orange); }
.woocommerce-product-attributes-item__value a:hover { text-decoration: underline; }

/* ============================================================
   2. NOTICES — success / error / info banners
   Output by wc_print_notices() (add-to-cart confirmations,
   validation errors, login errors, etc).
   ============================================================ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: var(--fd-space-1);
    /* padding: var(--fd-space-3) var(--fd-space-5); */
    border-radius: var(--fd-radius-md);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    line-height: 1.5;
    margin-bottom: var(--fd-space-5);
    list-style: none;
}
.woocommerce-message {
    background: rgba(26,140,78,0.08);
    color: var(--fd-success);
    border: 1px solid rgba(26,140,78,0.2);
}
.woocommerce-error {
    background: rgba(217,48,37,0.08);
    color: var(--fd-danger);
    border: 1px solid rgba(217,48,37,0.2);
}
.woocommerce-info,
.woocommerce-noreviews {
    background: var(--fd-surface-2);
    color: var(--fd-gray-700);
    border: 1px solid var(--fd-gray-100);
}
.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
    margin-left: auto;
    flex-shrink: 0;
}

/* ============================================================
   3. REVIEWS — comments_template() output
   WooCommerce's review list + form. Markup comes from
   woocommerce/single-product-reviews.php (loaded by core if
   the theme has none — we add one in a later step). Until then,
   these rules cover WC's default class names so reviews don't
   look broken inside .fd-product-tabs__panel[data-panel="reviews"].
   ============================================================ */

#fd-product-tabs .woocommerce-Reviews-title {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-lg);
    font-weight: 700;
    color: var(--fd-black);
    margin-bottom: var(--fd-space-4);
}
#fd-product-tabs .commentlist {
    list-style: none;
    margin: 0 0 var(--fd-space-6);
    padding: 0;
}
#fd-product-tabs .commentlist .comment {
    display: flex;
    gap: var(--fd-space-3);
    padding: var(--fd-space-4) 0;
    border-bottom: 1px solid var(--fd-gray-100);
}
#fd-product-tabs .commentlist .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}
#fd-product-tabs .comment-text { flex: 1; min-width: 0; }
#fd-product-tabs .woocommerce-review__author {
    font-weight: 700;
    color: var(--fd-black);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
}
#fd-product-tabs .woocommerce-review__dash { color: var(--fd-gray-500); margin: 0 4px; }
#fd-product-tabs .woocommerce-review__published-date {
    color: var(--fd-gray-500);
    font-size: var(--fd-text-xs);
    font-family: var(--fd-font-ui);
}
#fd-product-tabs .star-rating {
    --starColor: #FFA726;
    --starEmptyColor: var(--fd-gray-300);
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 14px;
    width: 5.4em;
    margin: 4px 0;
    font-family: serif;
}
#fd-product-tabs .star-rating::before {
    content: '\2605\2605\2605\2605\2605';
    color: var(--starEmptyColor);
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}
#fd-product-tabs .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
#fd-product-tabs .star-rating span::before {
    content: '\2605\2605\2605\2605\2605';
    top: 0;
    position: absolute;
    left: 0;
    color: var(--starColor);
}
#fd-product-tabs .description { margin-top: 6px; font-size: var(--fd-text-sm); color: var(--fd-gray-700); }

/* Review form */
#fd-product-tabs #review_form_wrapper { max-width: 560px; }
#fd-product-tabs .comment-reply-title {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-lg);
    font-weight: 700;
    color: var(--fd-black);
    display: block;
    margin-bottom: var(--fd-space-4);
}
#fd-product-tabs .comment-form-rating label,
#fd-product-tabs .comment-form-comment label,
#fd-product-tabs .comment-form-author label,
#fd-product-tabs .comment-form-email label {
    display: block;
    font-size: var(--fd-text-sm);
    font-weight: 600;
    color: var(--fd-black);
    font-family: var(--fd-font-ui);
    margin-bottom: var(--fd-space-2);
}
#fd-product-tabs .comment-form-rating { margin-bottom: var(--fd-space-4); }
#fd-product-tabs p.comment-form-comment textarea,
#fd-product-tabs .comment-form-author input,
#fd-product-tabs .comment-form-email input {
    width: 100%;
    border: 1.5px solid var(--fd-gray-300);
    border-radius: var(--fd-radius-md);
    padding: 10px var(--fd-space-3);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    margin-bottom: var(--fd-space-4);
    transition: border-color var(--fd-transition-fast);
}
#fd-product-tabs p.comment-form-comment textarea:focus,
#fd-product-tabs .comment-form-author input:focus,
#fd-product-tabs .comment-form-email input:focus {
    outline: none;
    border-color: var(--fd-orange);
}
#fd-product-tabs p.comment-form-comment textarea { min-height: 110px; resize: vertical; }
#fd-product-tabs .form-submit input#submit {
    display: inline-flex;
    align-items: center;
    padding: 10px var(--fd-space-6);
    border-radius: var(--fd-radius-pill);
    background: var(--fd-orange);
    color: var(--fd-white);
    font-size: var(--fd-text-sm);
    font-weight: 700;
    font-family: var(--fd-font-ui);
    transition: background var(--fd-transition-fast);
}
#fd-product-tabs .form-submit input#submit:hover { background: var(--fd-orange-dark); }

/* ============================================================
   4. CART TOTALS — native cart_totals widget
   Rendered by woocommerce_cart_totals() via the
   woocommerce_cart_collaterals hook (cart/cart-totals.php).
   We don't rebuild this markup — it computes tax/shipping/coupon
   totals — only restyle WC's own class names.
   ============================================================ */

.fd-cart-sidebar .cart_totals {
    background: var(--fd-white);
    border-radius: var(--fd-radius-lg);
    padding: var(--fd-space-5);
    box-shadow: var(--fd-shadow-sm);
}
.fd-cart-sidebar .cart_totals > h2 {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-lg);
    font-weight: 700;
    color: var(--fd-black);
    margin-bottom: var(--fd-space-4);
    padding-bottom: var(--fd-space-3);
    border-bottom: 2px solid var(--fd-orange);
}
.fd-cart-sidebar .cart_totals table {
    width: 100%;
    border-collapse: collapse;
}
.fd-cart-sidebar .cart_totals table tr {
    border-bottom: 1px solid var(--fd-gray-100);
}
.fd-cart-sidebar .cart_totals table tr:last-child { border-bottom: none; }
.fd-cart-sidebar .cart_totals table th,
.fd-cart-sidebar .cart_totals table td {
    padding: var(--fd-space-3) 0;
    text-align: left;
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    vertical-align: top;
}
.fd-cart-sidebar .cart_totals table th {
    font-weight: 500;
    color: var(--fd-gray-700);
    width: 40%;
}
.fd-cart-sidebar .cart_totals table td { color: var(--fd-gray-900); text-align: right; }
.fd-cart-sidebar .cart_totals .order-total th,
.fd-cart-sidebar .cart_totals .order-total td {
    font-size: var(--fd-text-lg);
    font-weight: 800;
    color: var(--fd-black);
    padding-top: var(--fd-space-4);
}
.fd-cart-sidebar .cart_totals .order-total td { color: var(--fd-orange); }
.fd-cart-sidebar .cart_totals .woocommerce-shipping-destination { color: var(--fd-gray-500); font-size: var(--fd-text-xs); }
.fd-cart-sidebar .cart_totals .shipping-calculator-button {
    color: var(--fd-orange);
    font-size: var(--fd-text-xs);
    font-weight: 600;
    text-decoration: underline;
}
.fd-cart-sidebar .cart_totals .shipping-calculator-form {
    margin-top: var(--fd-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-2);
}
.fd-cart-sidebar .cart_totals .shipping-calculator-form select,
.fd-cart-sidebar .cart_totals .shipping-calculator-form input[type="text"] {
    border: 1.5px solid var(--fd-gray-300);
    border-radius: var(--fd-radius-md);
    padding: 8px var(--fd-space-3);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
}
.fd-cart-sidebar .cart_totals .shipping-calculator-form .button {
    background: var(--fd-black);
    color: var(--fd-white);
    padding: 8px var(--fd-space-4);
    border-radius: var(--fd-radius-md);
    font-size: var(--fd-text-xs);
    font-weight: 700;
    align-self: flex-start;
}

/* Proceed to checkout button */
.fd-cart-sidebar .wc-proceed-to-checkout { margin-top: var(--fd-space-5); }
.fd-cart-sidebar .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px var(--fd-space-6);
    background: var(--fd-orange);
    color: var(--fd-white);
    border-radius: var(--fd-radius-pill);
    font-size: var(--fd-text-base);
    font-weight: 700;
    font-family: var(--fd-font-ui);
    box-shadow: var(--fd-shadow-orange);
    transition: all var(--fd-transition-fast);
}
.fd-cart-sidebar .checkout-button:hover { background: var(--fd-orange-dark); transform: translateY(-1px); }

/* Cross-sells (woocommerce_cross_sell_display, shown above totals when cart has items) */
.fd-cart-sidebar .cross-sells { margin-bottom: var(--fd-space-6); }
.fd-cart-sidebar .cross-sells > h2 {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-base);
    font-weight: 700;
    color: var(--fd-black);
    margin-bottom: var(--fd-space-4);
}
.fd-cart-sidebar .cross-sells ul.products {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3);
    list-style: none;
}
.fd-cart-sidebar .cross-sells ul.products li.product {
    background: var(--fd-white);
    border-radius: var(--fd-radius-md);
    padding: var(--fd-space-3);
    box-shadow: var(--fd-shadow-sm);
}
.fd-cart-sidebar .cross-sells ul.products li.product img {
    border-radius: var(--fd-radius-sm);
    margin-bottom: var(--fd-space-2);
}
.fd-cart-sidebar .cross-sells ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--fd-text-sm);
    font-weight: 500;
    color: var(--fd-gray-900);
    font-family: var(--fd-font-ui);
}
.fd-cart-sidebar .cross-sells ul.products li.product .price {
    color: var(--fd-orange);
    font-weight: 700;
    font-size: var(--fd-text-sm);
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .woocommerce-product-attributes-item__label { width: 45%; }
    #fd-product-tabs .commentlist .comment { gap: var(--fd-space-2); }
    #fd-product-tabs .avatar { width: 36px; height: 36px; }
}

/* ============================================================
   6. CART TOTALS BOX
   Rendered by cart/cart-totals.php (woocommerce_cart_collaterals
   hook) — subtotal, coupon line, shipping calculator, tax, total,
   and the Proceed to Checkout button. Left fully native so tax/
   shipping math always stays correct; only restyled here.
   ============================================================ */

.cart_totals {
    width: 100% !important;
    background: var(--fd-white);
    border-radius: var(--fd-radius-lg);
    box-shadow: var(--fd-shadow-sm);
    padding: var(--fd-space-5);
}
.cart_totals .shop_table {
    border: none !important;
}
.cart_totals > h2 {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-lg);
    font-weight: 700;
    color: var(--fd-black);
    margin-bottom: var(--fd-space-4);
}
.cart_totals .shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--fd-space-5);
}
.cart_totals .shop_table tr th,
.cart_totals .shop_table tr td {
    padding: var(--fd-space-3) 0;
    border-bottom: 1px solid var(--fd-gray-100);
    text-align: left;
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    vertical-align: top;
}
.cart_totals .shop_table tr th {
    font-weight: 600;
    color: var(--fd-gray-700);
    width: 40%;
}
.cart_totals .shop_table tr td { text-align: right; color: var(--fd-gray-900); }
.cart_totals .shop_table tr.order-total th,
.cart_totals .shop_table tr.order-total td {
    border-bottom: none;
    padding-top: var(--fd-space-4);
    font-size: var(--fd-text-lg);
    font-weight: 800;
    color: var(--fd-black);
    font-family: var(--fd-font-display);
}
.cart_totals .shop_table tr.order-total td { color: var(--fd-orange); }
.cart_totals .woocommerce-Price-amount { font-weight: inherit; }

/* Shipping calculator */
.cart_totals .shipping-calculator-button {
    color: var(--fd-orange);
    font-size: var(--fd-text-xs);
    font-weight: 600;
    text-decoration: underline;
    font-family: var(--fd-font-ui);
}
.cart_totals .shipping-calculator-form { margin-top: var(--fd-space-3); }
.cart_totals .shipping-calculator-form p { margin-bottom: var(--fd-space-3); }
.cart_totals .shipping-calculator-form select,
.cart_totals .shipping-calculator-form input[type="text"] {
    width: 100%;
    border: 1.5px solid var(--fd-gray-300);
    border-radius: var(--fd-radius-md);
    padding: 8px var(--fd-space-3);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    margin-bottom: var(--fd-space-2);
}
.cart_totals .shipping-calculator-form .button {
    width: 100%;
    padding: 10px var(--fd-space-4);
    border-radius: var(--fd-radius-pill);
    background: var(--fd-black);
    color: var(--fd-white);
    font-size: var(--fd-text-sm);
    font-weight: 700;
    font-family: var(--fd-font-ui);
}
.fd-cart-side form .form-row .select2-selection, .fd-cart-side form .form-row .select2-selection__arrow {
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;}
.form-row .select2-container .select2-selection__rendered { padding: 0 !important; line-height: normal !important;}

/* Proceed to Checkout button — hooked via woocommerce_proceed_to_checkout */
.wc-proceed-to-checkout { margin-top: var(--fd-space-2); }
.wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px var(--fd-space-6) !important;
    border-radius: var(--fd-radius-pill) !important;
    background: var(--fd-orange);
    color: var(--fd-white) !important;
    font-size: var(--fd-text-base) !important;
    font-family: var(--fd-font-ui);
    transition: background var(--fd-transition-fast);
    box-shadow: var(--fd-shadow-orange);
}
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--fd-orange-dark); }

/* Cross-sells, shown above totals via woocommerce_cross_sell_display */
.cart-collaterals .cross-sells {
    background: var(--fd-white);
    border-radius: var(--fd-radius-lg);
    box-shadow: var(--fd-shadow-sm);
    padding: var(--fd-space-5);
}
.cart-collaterals .cross-sells > h2 {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-lg);
    font-weight: 700;
    color: var(--fd-black);
    margin-bottom: var(--fd-space-4);
}
.cart-collaterals .cross-sells ul.products {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
}
.cart-collaterals .cross-sells ul.products li.product a img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--fd-radius-md);
    margin-bottom: var(--fd-space-2);
}
.cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--fd-text-sm);
    color: var(--fd-gray-900);
    font-family: var(--fd-font-body);
    display: block;
    margin-bottom: 4px;
}
.cart-collaterals .cross-sells ul.products li.product .price {
    color: var(--fd-orange);
    font-weight: 700;
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-display);
}

/* ============================================================
   7. CHECKOUT — Billing / Shipping Fields
   Rendered by woocommerce_checkout_billing /
   woocommerce_checkout_shipping hooks via form-billing.php /
   form-shipping.php. form-row-first/-last/-wide are WC's own
   layout classes — defined here as a 2-column grid.
   ============================================================ */

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
    /* background: var(--fd-white); */
    /* border-radius: var(--fd-radius-lg); */
    /* box-shadow: var(--fd-shadow-sm); */
    /* padding: var(--fd-space-5); */
}
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3,
.woocommerce-shipping-fields h3#ship-to-different-address {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-lg);
    font-weight: 700;
    color: var(--fd-black);
    margin-bottom: var(--fd-space-4);
}
.woocommerce-shipping-fields h3#ship-to-different-address {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.woocommerce-shipping-fields h3#ship-to-different-address label.checkbox {
    display: flex;
    align-items: center;
    gap: var(--fd-space-2);
    cursor: pointer;
}

.woocommerce-billing-fields__field-wrapper,
.shipping_address {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* gap: 0 var(--fd-space-4); */
}

.form-row {
    margin-bottom: var(--fd-space-4);
}
.form-row label {
    display: block;
    font-size: var(--fd-text-sm);
    font-weight: 600;
    color: var(--fd-black);
    font-family: var(--fd-font-ui);
    margin-bottom: var(--fd-space-2);
}
.form-row .required { color: var(--fd-danger); text-decoration: none; }
.form-row .optional { color: var(--fd-gray-500); font-weight: 400; font-size: var(--fd-text-xs); }
.form-row input.input-text,
.form-row select,
.form-row textarea {
    width: 100%;
    height: 46px;
    padding: 0 var(--fd-space-4);
    border: 1.5px solid var(--fd-gray-300);
    border-radius: var(--fd-radius-md);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    color: var(--fd-gray-900);
    background: var(--fd-white);
    transition: border-color var(--fd-transition-fast);
}
.form-row textarea { height: auto; padding-block: var(--fd-space-3); min-height: 90px; resize: vertical; }
.form-row input.input-text:focus,
.form-row select:focus,
.form-row textarea:focus { outline: none; border-color: var(--fd-orange); }

.form-row-first,
.form-row-last {
    /* width: 100% !important; */
    /* grid-column: span 1;  */
}
.form-row-wide { grid-column: 1 / -1; }

/* Select2 country/state dropdowns ship their own JS-rendered markup;
   keep the visible container matching our input height. */
.form-row .select2-container .select2-selection--single {
    height: 46px !important;
    border: 1.5px solid var(--fd-gray-300) !important;
    border-radius: var(--fd-radius-md) !important;
}
.form-row .select2-container .select2-selection__rendered { line-height: 46px !important; padding-left: var(--fd-space-4) !important; }
.form-row .select2-container .select2-selection__arrow { height: 44px !important; }

/* Create-account checkbox under billing fields */
.woocommerce-account-fields .create-account { margin-top: var(--fd-space-2); }
.woocommerce-account-fields label.checkbox {
    display: flex;
    align-items: center;
    gap: var(--fd-space-2);
    font-size: var(--fd-text-sm);
    color: var(--fd-gray-700);
    font-family: var(--fd-font-ui);
    cursor: pointer;
}
.woocommerce-account-fields input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--fd-orange); }
#account_password_field { margin-top: var(--fd-space-3); }

/* Order notes textarea (additional fields section) */
.woocommerce-additional-fields .notes textarea { min-height: 90px; }

/* ============================================================
   8. CHECKOUT — Order Review Table
   Rendered by checkout/review-order.php via woocommerce_order_review.
   ============================================================ */

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--fd-space-5);
}
.woocommerce-checkout-review-order-table thead th {
    text-align: left;
    font-size: var(--fd-text-xs);
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fd-gray-500);
    font-family: var(--fd-font-ui);
    padding: 0 0 var(--fd-space-3) 0 !important;
    border-bottom: 2px solid var(--fd-gray-100);
}
.woocommerce-checkout-review-order-table thead th.product-total { text-align: right; }
.woocommerce-checkout-review-order-table tbody tr.cart_item td {
    padding: var(--fd-space-3) 0;
    border-bottom: 1px solid var(--fd-gray-100);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    color: var(--fd-gray-900);
    vertical-align: top;
}
.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total { text-align: right; white-space: nowrap; font-weight: 600; }
.woocommerce-checkout-review-order-table .product-quantity { color: var(--fd-gray-500); font-weight: 600; }
.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
    padding: var(--fd-space-3) 0 !important;
    border-bottom: 1px solid var(--fd-gray-100);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
}
.woocommerce-checkout-review-order-table tfoot tr td { text-align: right; }
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    border-bottom: none;
    padding-top: var(--fd-space-4) !important;
    font-size: var(--fd-text-lg);
    font-weight: 800;
    font-family: var(--fd-font-display);
    color: var(--fd-black);
}
.woocommerce-checkout-review-order-table tfoot tr.order-total td { color: var(--fd-orange); }

/* Shipping method radio list inside the order review */
#shipping_method { list-style: none; }
#shipping_method li {
    display: inline-flex;
    align-items: center;
    gap: var(--fd-space-2);
    /* padding: var(--fd-space-2) 0; */
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
}
#shipping_method input[type="radio"] { accent-color: var(--fd-orange); width: 16px; height: 16px; }

/* ============================================================
   9. CHECKOUT — Payment Methods
   Rendered inside #payment by woocommerce_checkout_payment().
   Gateway list (.payment_methods) and per-gateway content boxes
   are fully native — varies by which gateways are installed.
   ============================================================ */

#payment {
    background: var(--fd-surface-2);
    border-radius: var(--fd-radius-lg);
    margin-top: var(--fd-space-2);
}
ul.wc_payment_methods.payment_methods.methods {
    list-style: none;
    padding: var(--fd-space-2);
}
ul.payment_methods > li.wc_payment_method {
    border-bottom: 1px solid var(--fd-gray-100);
}
ul.payment_methods > li.wc_payment_method:last-child { border-bottom: none; }
ul.payment_methods > li.wc_payment_method > label {
    display: inline-flex;
    align-items: center;
    gap: var(--fd-space-3);
    /* padding: var(--fd-space-4); */
    font-size: var(--fd-text-sm);
    font-weight: 600;
    color: var(--fd-black);
    font-family: var(--fd-font-ui);
    cursor: pointer;
}
ul.payment_methods input.input-radio { width: 18px; height: 18px; accent-color: var(--fd-orange); flex-shrink: 0; }
ul.payment_methods img { height: 22px; width: auto; margin-left: auto; }
.payment_box {
    padding: 0 var(--fd-space-4) var(--fd-space-4);
    font-size: var(--fd-text-sm);
    color: var(--fd-gray-700);
    font-family: var(--fd-font-ui);
    line-height: 1.7;
}
.payment_box p:first-child { margin-top: 0; }
/* Privacy Policy */
.woocommerce-privacy-policy-text p { font-size: var(--fd-text-sm);}
/* Terms & place order */
.woocommerce-terms-and-conditions-wrapper { margin: 0; }
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text { margin-bottom: var(--fd-space-1); }
.woocommerce-form__label-for-checkbox.checkbox {
    display: flex;
    align-items: center;
    gap: var(--fd-space-2);
    font-size: var(--fd-text-sm);
    color: var(--fd-gray-700);
    font-family: var(--fd-font-ui);
    cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--fd-orange); }

.form-row.place-order { padding: var(--fd-space-4); margin-bottom: 0; }
#place_order {
    width: 100%;
    padding: 14px var(--fd-space-6);
    border-radius: var(--fd-radius-pill);
    background: var(--fd-orange);
    color: var(--fd-white);
    font-size: var(--fd-text-base);
    font-weight: 700;
    font-family: var(--fd-font-ui);
    transition: background var(--fd-transition-fast);
    box-shadow: var(--fd-shadow-orange);
}
#place_order:hover { background: var(--fd-orange-dark); }
#place_order:disabled { opacity: 0.6; pointer-events: none; }

/* ============================================================
   10. CHECKOUT RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
    .woocommerce-billing-fields__field-wrapper,
    .shipping_address {
        grid-template-columns: 1fr;
    }
    .form-row-first,
    .form-row-last { grid-column: 1 / -1; }
}

/* ============================================================
   11. THANK YOU PAGE — Order Details Table + Customer Addresses
   Rendered by woocommerce_order_details_table() (hooked to the
   woocommerce_thankyou action) — order/order-details.php and
   order/order-details-customer.php. Line items + addresses vary
   per order, so left fully native and restyled here.
   ============================================================ */

.woocommerce-order-details {
    background: var(--fd-white);
    border-radius: var(--fd-radius-lg);
    box-shadow: var(--fd-shadow-sm);
    padding: var(--fd-space-5);
    margin-bottom: var(--fd-space-5);
}
.woocommerce-order-details > h2 {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-lg);
    font-weight: 700;
    color: var(--fd-black);
    margin-bottom: var(--fd-space-4);
}
table.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--fd-space-2);
}
table.woocommerce-table--order-details thead th {
    text-align: left;
    font-size: var(--fd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fd-gray-500);
    font-family: var(--fd-font-ui);
    padding-bottom: var(--fd-space-3);
    border-bottom: 2px solid var(--fd-gray-100);
}
table.woocommerce-table--order-details tbody td,
table.woocommerce-table--order-details tfoot td,
table.woocommerce-table--order-details tfoot th {
    padding: var(--fd-space-3) 0;
    border-bottom: 1px solid var(--fd-gray-100);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    color: var(--fd-gray-900);
}
table.woocommerce-table--order-details td.product-total,
table.woocommerce-table--order-details tfoot td { text-align: right; }
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none;
    font-weight: 800;
    font-size: var(--fd-text-base);
    font-family: var(--fd-font-display);
    color: var(--fd-orange);
}

.woocommerce-customer-details {
    background: var(--fd-white);
    border-radius: var(--fd-radius-lg);
    box-shadow: var(--fd-shadow-sm);
    padding: var(--fd-space-5);
}
.woocommerce-columns--addresses {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* gap: var(--fd-space-5); */
}
.woocommerce-column__title {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-base);
    font-weight: 700;
    color: var(--fd-black);
    margin-bottom: var(--fd-space-3);
}
.woocommerce-customer-details address {
    font-style: normal;
    font-size: var(--fd-text-sm);
    color: var(--fd-gray-700);
    font-family: var(--fd-font-ui);
    line-height: 1.8;
}
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email { margin-top: var(--fd-space-2); }

@media (max-width: 600px) {
    .woocommerce-columns--addresses { grid-template-columns: 1fr; }
    table.woocommerce-table--order-details thead { display: none; }
    table.woocommerce-table--order-details tbody tr { display: block; padding: var(--fd-space-2) 0; }
    table.woocommerce-table--order-details tbody td { display: block; border-bottom: none; padding: 2px 0; }
    table.woocommerce-table--order-details td.product-total { text-align: left; font-weight: 700; }
}

/* ============================================================
   12. MY ACCOUNT — Navigation
   Rendered by WC_Shortcode_My_Account::navigation() via the
   woocommerce_account_navigation hook. Tab list is fully native
   (plugins can add endpoints), restyled here only.
   ============================================================ */

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: var(--fd-space-2);
}
.woocommerce-MyAccount-navigation-link:not(:last-child) {
    border-bottom: 1px solid var(--fd-gray-100);
    padding-bottom: var(--fd-space-2);
}
.woocommerce-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    padding: var(--fd-space-3) var(--fd-space-4);
    font-size: var(--fd-text-sm);
    font-weight: 600;
    color: var(--fd-gray-700);
    font-family: var(--fd-font-ui);
    border-radius: var(--fd-radius-md);
    transition: all var(--fd-transition-fast);
}
.woocommerce-MyAccount-navigation-link a:hover {
    background: var(--fd-orange-subtle);
    color: var(--fd-orange);
}
.woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--fd-orange);
    color: var(--fd-white);
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--fd-danger); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(217,48,37,0.08); color: var(--fd-danger); }

/* ============================================================
   13. MY ACCOUNT — Content Panels
   Rendered by WC_Shortcode_My_Account::content() via the
   woocommerce_account_content hook. Covers the dashboard
   greeting, orders table, downloads table, addresses, and the
   edit-account form — whichever endpoint is currently active.
   ============================================================ */

/* Dashboard greeting + intro text */
.woocommerce-MyAccount-content > p { margin-bottom: var(--fd-space-4); font-size: var(--fd-text-sm); color: var(--fd-gray-700); font-family: var(--fd-font-ui); line-height: 1.7; }
.woocommerce-MyAccount-content > p:last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content mark { background: none; color: var(--fd-orange); font-weight: 700; }
.woocommerce-MyAccount-content a { color: var(--fd-orange); }
.woocommerce-MyAccount-content a:hover { 
    /* text-decoration: underline; */
}

/* Orders / Downloads tables */
.woocommerce-orders-table,
.woocommerce-MyAccount-downloads table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-orders-table thead th,
.woocommerce-MyAccount-downloads table thead th {
    text-align: left;
    font-size: var(--fd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fd-gray-500);
    font-family: var(--fd-font-ui);
    padding-bottom: var(--fd-space-3);
    border-bottom: 2px solid var(--fd-gray-100);
}
.woocommerce-orders-table tbody td,
.woocommerce-MyAccount-downloads table tbody td {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: var(--fd-space-3) var(--fd-space-2) var(--fd-space-3) 0;
    border-bottom: 1px solid var(--fd-gray-100);
    font-size: var(--fd-text-sm);
    font-family: var(--fd-font-ui);
    color: var(--fd-gray-900);
}
.woocommerce-orders-table__cell-order-status mark {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--fd-radius-pill);
    background: var(--fd-surface-2);
    font-size: var(--fd-text-xs);
    font-weight: 700;
}
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-downloads-file a {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--fd-space-3);
    border-radius: var(--fd-radius-pill);
    background: var(--fd-orange);
    color: var(--fd-white) !important;
    font-size: var(--fd-text-xs);
    font-weight: 700;
    text-decoration: none !important;
    margin: 2px;
}
.woocommerce-orders-table__cell-order-actions .button:hover { background: var(--fd-orange-dark); }

/* Pagination on orders list */
.woocommerce-pagination { margin-top: var(--fd-space-5); }
.woocommerce-pagination .woocommerce-button {
    display: inline-flex;
    align-items: center;
    padding: 8px var(--fd-space-4);
    border-radius: var(--fd-radius-pill);
    border: 1.5px solid var(--fd-gray-300);
    font-size: var(--fd-text-sm);
    font-weight: 600;
    font-family: var(--fd-font-ui);
    color: var(--fd-gray-700);
}
.woocommerce-pagination .woocommerce-button:hover { border-color: var(--fd-orange); color: var(--fd-orange); }

/* Addresses */
.woocommerce-Addresses {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* gap: var(--fd-space-5); */
}
.woocommerce-Address {
    background: var(--fd-surface-2);
    border-radius: var(--fd-radius-lg);
    padding: var(--fd-space-5);
}
.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fd-space-3);
    margin-bottom: var(--fd-space-3);
}
.woocommerce-Address-title h3 {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-base);
    font-weight: 700;
    color: var(--fd-black);
}
.woocommerce-Address-title .edit {
    font-size: var(--fd-text-xs);
    font-weight: 700;
    color: var(--fd-orange);
}
.woocommerce-Address address {
    font-style: normal;
    font-size: var(--fd-text-sm);
    color: var(--fd-gray-700);
    font-family: var(--fd-font-ui);
    line-height: 1.8;
}

/* Edit-account form reuses .form-row / input.input-text styling
   already defined in section 7 (checkout billing fields) above. */
.woocommerce-EditAccountForm .woocommerce-form-row,
.woocommerce-EditAccountForm fieldset {
    margin-bottom: var(--fd-space-4);
}
.woocommerce-EditAccountForm fieldset {
    border: 1px solid var(--fd-gray-100);
    border-radius: var(--fd-radius-md);
    padding: var(--fd-space-4);
}
.woocommerce-EditAccountForm fieldset legend {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-base);
    font-weight: 700;
    color: var(--fd-black);
    padding: 0 var(--fd-space-2);
}
.woocommerce-EditAccountForm button[type="submit"] {
    padding: 13px var(--fd-space-6) !important;
    border-radius: var(--fd-radius-pill) !important;
    background: var(--fd-orange) !important;
    color: var(--fd-white) !important;
    font-weight: 700 !important;
    font-family: var(--fd-font-ui) !important;
}
.woocommerce-EditAccountForm button[type="submit"]:hover { background: var(--fd-orange-dark) !important; }

/* No-content placeholder (e.g. "No order has been made yet") */
.woocommerce-MyAccount-content .woocommerce-Message {
    margin-bottom: 0;
}

/* ============================================================
   14. MY ACCOUNT RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .woocommerce-Addresses { grid-template-columns: 1fr; }
    .woocommerce-orders-table thead { display: none; }
    .woocommerce-orders-table tbody tr { display: block; padding: var(--fd-space-3) 0; border-bottom: 1px solid var(--fd-gray-100); }
    .woocommerce-orders-table tbody td { display: block; border-bottom: none; padding: 4px 0; }
    .woocommerce-orders-table tbody td::before { content: attr(data-title) ": "; font-weight: 700; color: var(--fd-gray-500); }

/* ============================================================
   15. VARIABLE PRODUCT — NATIVE WC STOCK + VARIATION PRICE
   WooCommerce's .out-of-stock / .in-stock and variation price
   update containers use its own class names — no fd- prefix.
   Overridden here so they match the fd-stock-badge pill style.
   ============================================================ */

/* Override WC's default pink out-of-stock */
p.out-of-stock,
.woocommerce-variation-availability p.out-of-stock {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--fd-radius-pill);
    background: rgba(217,48,37,0.1);
    color: var(--fd-danger);
    font-size: var(--fd-text-sm);
    font-weight: 600;
    font-family: var(--fd-font-ui);
    margin: 0;
}
p.in-stock,
.woocommerce-variation-availability p.in-stock {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--fd-radius-pill);
    background: rgba(26,140,78,0.1);
    color: var(--fd-success);
    font-size: var(--fd-text-sm);
    font-weight: 600;
    font-family: var(--fd-font-ui);
    margin: 0;
}
.woocommerce-variation-availability { margin: var(--fd-space-3) 0; }

/* Variation price — updated by WC JS when user picks an option */
.woocommerce-variation-price { margin-bottom: var(--fd-space-3); }
.woocommerce-variation-price .price {
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-2xl);
    font-weight: 800;
    color: var(--fd-orange);
}
.woocommerce-variation-price .price del {
    color: var(--fd-gray-500);
    font-size: var(--fd-text-lg);
    font-weight: 400;
    text-decoration: line-through;
    margin-right: var(--fd-space-2);
}
.woocommerce-variation-price .price ins {
    text-decoration: none;
    color: var(--fd-orange);
}
}