/* ==========================================================================
   KOFFIE EC — WooCommerce Custom Styling
   
   Architecture: 4-layer system
     Layer 1: Design Tokens (CSS variables)
     Layer 2: Base WooCommerce Normalization
     Layer 3: Component Mapping (theme → WooCommerce)
     Layer 4: Scoped Page Overrides (cart, checkout, my-account)
   
   Design Philosophy: Bold Neo-Brutalist
     - Thick 2px black borders
     - Hard offset shadows (no blur)
     - Pill-shaped buttons (border-radius: 50px)
     - Rounded cards (border-radius: 40px)
     - Playful color palette with high contrast
     - "Pressed" hover effect (translate + shadow reduction)
   ========================================================================== */


/* ==========================================================================
   LAYER 1 — DESIGN TOKENS
   Mirror the theme's Tailwind config as CSS custom properties
   ========================================================================== */

:root {
    /* — Colors — */
    --kf-black: #000000;
    --kf-white: #ffffff;
    --kf-orange: #FF4D00;
    --kf-yellow: #FFD700;
    --kf-magenta: #FF00FF;
    --kf-azure: #F0FFFF;
    --kf-spring-green: #D0F0C0;
    --kf-pink: #fa9ac3;
    --kf-grey-10: #333333;
    --kf-grey-40: #666666;
    --kf-grey-83: #d1d5db;
    --kf-grey-92: #EBEBEB;
    --kf-azure-89: #E0F2FE;

    /* — Semantic Colors — */
    --kf-success: #50E3A4;
    --kf-error: #dc2626;
    --kf-error-bg: #fef2f2;
    --kf-info: #3b82f6;
    --kf-info-bg: #eff6ff;

    /* — Typography — */
    --kf-font-display: 'Bubble Rainbow', 'Inter', sans-serif;
    --kf-font-heading: 'Open Sans', sans-serif;
    --kf-font-body: 'Open Sans', sans-serif;
    --kf-font-button: 'Degular Text Demo', 'Inter', sans-serif;
    --kf-font-ui: 'Inter', sans-serif;

    /* — Spacing — */
    --kf-container-max: 1440px;
    --kf-space-xs: 0.25rem;
    --kf-space-sm: 0.5rem;
    --kf-space-md: 1rem;
    --kf-space-lg: 1.5rem;
    --kf-space-xl: 2rem;
    --kf-space-2xl: 3rem;
    --kf-space-3xl: 4rem;

    /* — Border Radius — */
    --kf-radius-sm: 12px;
    --kf-radius-md: 20px;
    --kf-radius-lg: 30px;
    --kf-radius-xl: 40px;
    --kf-radius-pill: 50px;
    --kf-radius-full: 9999px;

    /* — Shadows (hard offset, no blur = neo-brutalist) — */
    --kf-shadow-sm: 2px 2px 0px 0px rgba(0, 0, 0, 1);
    --kf-shadow-md: 4px 4px 0px 0px rgba(0, 0, 0, 1);
    --kf-shadow-lg: 6px 6px 0px 0px rgba(0, 0, 0, 1);
    --kf-shadow-xl: 8px 8px 0px 0px rgba(0, 0, 0, 1);
    --kf-shadow-2xl: 10px 10px 0px 0px rgba(0, 0, 0, 1);
    --kf-shadow-soft: 4px 4px 0px 0px rgba(0, 0, 0, 0.3);
    --kf-shadow-none: none;

    /* — Border — */
    --kf-border: 2px solid var(--kf-black);
    --kf-border-light: 1px solid var(--kf-grey-83);
    --kf-border-subtle: 1px solid rgba(0, 0, 0, 0.1);

    /* — Transitions — */
    --kf-transition: all 0.3s ease;
    --kf-transition-fast: all 0.15s ease;
}


/* ==========================================================================
   LAYER 2 — BASE WOOCOMMERCE NORMALIZATION
   Reset WooCommerce defaults to inherit from theme safely
   ========================================================================== */

/* --- Global WooCommerce Container --- */
body.woocommerce .woocommerce,
body.woocommerce-page .woocommerce {
    font-family: var(--kf-font-body);
    color: var(--kf-grey-10);
    max-width: var(--kf-container-max);
    margin-left: auto;
    margin-right: auto;
}

/* --- Strip default WC borders and backgrounds --- */
body.woocommerce table.shop_table,
body.woocommerce-page table.shop_table {
    border: none;
    border-collapse: separate;
    border-spacing: 0;
}

body.woocommerce table.shop_table th,
body.woocommerce table.shop_table td {
    border: none;
    padding: var(--kf-space-md) var(--kf-space-lg);
}

/* --- Remove default WC link colors --- */
body.woocommerce a,
body.woocommerce-page a {
    color: var(--kf-black);
    text-decoration: none;
    transition: var(--kf-transition);
}

body.woocommerce a:hover {
    color: var(--kf-orange);
}


/* ==========================================================================
   LAYER 3 — COMPONENT MAPPING
   Map WooCommerce components → Theme design patterns
   ========================================================================== */

/* -------------------------------------------------------------------
   3A. BUTTONS
   Primary: Black pill, white text, hard shadow
   Secondary: Yellow pill, black text
   Danger: Red pill, white text
   ------------------------------------------------------------------- */

/* Primary Buttons */
body.woocommerce .button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce a.button,
body.woocommerce #respond input#submit,
body.woocommerce-page .button {
    background-color: var(--kf-black);
    color: var(--kf-white);
    font-family: var(--kf-font-button);
    font-weight: 500;
    font-size: 1rem;
    padding: var(--kf-space-md) var(--kf-space-2xl);
    border: var(--kf-border);
    border-radius: var(--kf-radius-pill);
    box-shadow: var(--kf-shadow-md);
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kf-space-sm);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
}

body.woocommerce .button:hover,
body.woocommerce button.button:hover,
body.woocommerce input.button:hover,
body.woocommerce a.button:hover,
body.woocommerce #respond input#submit:hover,
body.woocommerce-page .button:hover {
    background-color: var(--kf-black);
    color: var(--kf-white);
}

body.woocommerce .button:active,
body.woocommerce button.button:active {
    transform: translate(4px, 4px);
    box-shadow: var(--kf-shadow-none);
}

body.woocommerce .button:disabled,
body.woocommerce button.button:disabled,
body.woocommerce .button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--kf-shadow-md);
}

/* Secondary Buttons (Alt) */
body.woocommerce .button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce a.button.alt,
body.woocommerce #respond input#submit.alt {
    background-color: var(--kf-black);
    color: var(--kf-white);
    box-shadow: var(--kf-shadow-lg);
    font-size: 1.125rem;
    padding: var(--kf-space-lg) var(--kf-space-2xl);
}

body.woocommerce .button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce a.button.alt:hover {
    background-color: var(--kf-black);
    color: var(--kf-white);
    transform: translate(2px, 2px);
    box-shadow: var(--kf-shadow-md);
}

/* Yellow action buttons (Update Cart, Apply Coupon) */
body.woocommerce button[name="update_cart"],
body.woocommerce button[name="apply_coupon"] {
    background-color: var(--kf-yellow);
    color: var(--kf-black);
}

body.woocommerce button[name="update_cart"]:hover,
body.woocommerce button[name="apply_coupon"]:hover {
    background-color: var(--kf-black);
    color: var(--kf-white);
}


/* -------------------------------------------------------------------
   3B. FORM FIELDS
   Inputs: White, 2px black border, rounded-20px, focus = shadow lift
   ------------------------------------------------------------------- */

body.woocommerce form .form-row input.input-text,
body.woocommerce form .form-row textarea,
body.woocommerce form .form-row select,
body.woocommerce-page form .form-row input.input-text,
body.woocommerce-page form .form-row textarea,
body.woocommerce-page form .form-row select,
body.woocommerce .woocommerce-input-wrapper input,
body.woocommerce .woocommerce-input-wrapper select,
body.woocommerce .woocommerce-input-wrapper textarea,
body.woocommerce input[type="text"],
body.woocommerce input[type="email"],
body.woocommerce input[type="tel"],
body.woocommerce input[type="password"],
body.woocommerce input[type="number"],
body.woocommerce input[type="url"],
body.woocommerce input[type="search"],
body.woocommerce select,
body.woocommerce textarea {
    width: 100%;
    padding: var(--kf-space-md) var(--kf-space-lg);
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    background-color: var(--kf-white);
    font-family: var(--kf-font-body);
    font-size: 1rem;
    color: var(--kf-grey-10);
    transition: var(--kf-transition);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

body.woocommerce form .form-row input.input-text:focus,
body.woocommerce form .form-row textarea:focus,
body.woocommerce form .form-row select:focus,
body.woocommerce input:focus,
body.woocommerce select:focus,
body.woocommerce textarea:focus {
    outline: none;
    box-shadow: var(--kf-shadow-soft);
    transform: translateY(-2px);
    border-color: var(--kf-black);
}

/* Labels */
body.woocommerce form .form-row label,
body.woocommerce-page form .form-row label {
    display: block;
    margin-bottom: var(--kf-space-sm);
    font-family: var(--kf-font-heading);
    font-weight: 600;
    color: var(--kf-black);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Required asterisk */
body.woocommerce form .form-row .required {
    color: var(--kf-orange);
    font-weight: 700;
}

/* Select2 Dropdowns (WooCommerce uses Select2 for country/state) */
body.woocommerce .select2-container .select2-selection--single {
    height: auto;
    padding: var(--kf-space-md) var(--kf-space-lg);
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    background-color: var(--kf-white);
}

body.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: var(--kf-font-body);
    font-size: 1rem;
    color: var(--kf-grey-10);
    line-height: 1.4;
    padding: 0;
}

body.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: var(--kf-space-md);
}

body.woocommerce .select2-container--open .select2-selection--single {
    box-shadow: var(--kf-shadow-soft);
    transform: translateY(-2px);
}

.select2-dropdown {
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    overflow: hidden;
    box-shadow: var(--kf-shadow-md);
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--kf-yellow);
    color: var(--kf-black);
}


/* -------------------------------------------------------------------
   3C. NOTICES (Error, Success, Info)
   Themed as rounded cards with left accent border
   ------------------------------------------------------------------- */

body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error,
body.woocommerce .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce .woocommerce-notices-wrapper .woocommerce-error {
    padding: var(--kf-space-lg) var(--kf-space-xl);
    margin-bottom: var(--kf-space-xl);
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    font-family: var(--kf-font-body);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--kf-space-md);
    box-shadow: var(--kf-shadow-md);
}

body.woocommerce .woocommerce-message {
    background-color: var(--kf-spring-green);
    border-left: 6px solid var(--kf-success);
}

body.woocommerce .woocommerce-info {
    background-color: var(--kf-azure);
    border-left: 6px solid var(--kf-info);
}

body.woocommerce .woocommerce-error {
    background-color: var(--kf-error-bg);
    border-left: 6px solid var(--kf-error);
    color: var(--kf-error);
}

body.woocommerce .woocommerce-error li {
    list-style: none;
}

body.woocommerce .woocommerce-message::before,
body.woocommerce .woocommerce-info::before,
body.woocommerce .woocommerce-error::before {
    display: none;
    /* Remove default WC icons, use our own if needed */
}

body.woocommerce .woocommerce-message a.button,
body.woocommerce .woocommerce-info a.button {
    font-size: 0.875rem;
    padding: var(--kf-space-sm) var(--kf-space-lg);
    margin-left: auto;
    box-shadow: var(--kf-shadow-sm);
}


/* -------------------------------------------------------------------
   3D. TABLES
   Used in order review, order history, cart totals
   ------------------------------------------------------------------- */

body.woocommerce table.shop_table {
    width: 100%;
    background: transparent;
}

body.woocommerce table.shop_table thead th {
    background: var(--kf-black);
    color: var(--kf-white);
    padding: var(--kf-space-md) var(--kf-space-lg);
    font-family: var(--kf-font-heading);
    font-weight: 600;
    text-align: left;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.woocommerce table.shop_table thead th:first-child {
    border-radius: var(--kf-radius-md) 0 0 var(--kf-radius-md);
}

body.woocommerce table.shop_table thead th:last-child {
    border-radius: 0 var(--kf-radius-md) var(--kf-radius-md) 0;
}

body.woocommerce table.shop_table tbody td {
    padding: var(--kf-space-lg) var(--kf-space-md);
    font-family: var(--kf-font-body);
    vertical-align: middle;
    border-bottom: var(--kf-border-subtle);
}

body.woocommerce table.shop_table tbody tr:last-child td {
    border-bottom: none;
}

body.woocommerce table.shop_table tfoot th,
body.woocommerce table.shop_table tfoot td {
    padding: var(--kf-space-md) var(--kf-space-lg);
    font-family: var(--kf-font-body);
    border-top: var(--kf-border-subtle);
}


/* ==========================================================================
   LAYER 4 — SCOPED PAGE OVERRIDES
   Page-specific styles scoped to body classes
   ========================================================================== */


/* -------------------------------------------------------------------
   4A. CART PAGE
   ------------------------------------------------------------------- */

/* Cart page wrapper padding (the page.php wraps with its own container) */
body.woocommerce-cart .entry-content {
    max-width: 100%;
    padding: 0;
}

/* Cart item images */
body.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--kf-radius-md);
}

/* Cart quantity inputs */
body.woocommerce-cart .quantity-wrapper {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Remove link */
body.woocommerce-cart .product-remove a.remove {
    color: var(--kf-error);
    font-size: 1.5rem;
    font-weight: 700;
    transition: var(--kf-transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--kf-radius-full);
    border: var(--kf-border);
    background: var(--kf-white);
}

body.woocommerce-cart .product-remove a.remove:hover {
    background: var(--kf-error);
    color: var(--kf-white);
    box-shadow: var(--kf-shadow-sm);
}

/* Cart totals card */
body.woocommerce-cart .cart_totals {
    float: none;
    width: 100%;
}

body.woocommerce-cart .cart_totals h2 {
    font-family: var(--kf-font-display);
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--kf-black);
    margin-bottom: var(--kf-space-xl);
}

/* Proceed to checkout */
body.woocommerce-cart .wc-proceed-to-checkout a {
    width: 100%;
    padding: var(--kf-space-lg) var(--kf-space-2xl);
    font-size: 1.5rem;
    box-shadow: var(--kf-shadow-lg);
    color: white !important;
}


/* -------------------------------------------------------------------
   4B. CHECKOUT PAGE (Classic Shortcode)
   ------------------------------------------------------------------- */

body.woocommerce-checkout .entry-content {
    max-width: 100%;
    padding: 0;
}

/* Section headings */
body.woocommerce-checkout h3,
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3 {
    font-family: var(--kf-font-display);
    font-size: 2rem;
    font-weight: bold;
    color: var(--kf-black);
    margin-bottom: var(--kf-space-lg);
}

/* Form row layout */
body.woocommerce-checkout .form-row {
    margin-bottom: var(--kf-space-lg);
}

body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last {
    width: 48%;
}

/* Order review table (inside checkout) */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    margin-bottom: var(--kf-space-xl);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    font-family: var(--kf-font-body);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    font-family: var(--kf-font-display);
    font-size: 1.5rem;
    font-weight: bold;
}

/* Payment methods */
body.woocommerce-checkout .woocommerce-checkout-payment {
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--kf-radius-md);
    padding: var(--kf-space-lg);
    margin-top: var(--kf-space-lg);
}

body.woocommerce-checkout .wc_payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--kf-space-lg) 0;
}

body.woocommerce-checkout .wc_payment_method {
    background: var(--kf-white);
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    padding: var(--kf-space-md) var(--kf-space-lg);
    margin-bottom: 0.75rem;
    transition: var(--kf-transition);
}

body.woocommerce-checkout .wc_payment_method:hover {
    box-shadow: var(--kf-shadow-soft);
}

body.woocommerce-checkout .wc_payment_method input[type="radio"] {
    margin-right: 0.75rem;
    accent-color: var(--kf-orange);
}

body.woocommerce-checkout .wc_payment_method label {
    font-family: var(--kf-font-heading);
    font-weight: 600;
    cursor: pointer;
}

body.woocommerce-checkout .payment_box {
    background-color: var(--kf-azure);
    border-radius: var(--kf-radius-sm);
    padding: var(--kf-space-md) var(--kf-space-lg);
    margin-top: var(--kf-space-sm);
    font-family: var(--kf-font-body);
    font-size: 0.875rem;
    color: var(--kf-grey-40);
}

/* Place Order */
body.woocommerce-checkout #place_order {
    width: 100%;
    padding: var(--kf-space-lg) var(--kf-space-2xl);
    background-color: var(--kf-black);
    color: var(--kf-white);
    border: var(--kf-border);
    border-radius: var(--kf-radius-pill);
    font-family: var(--kf-font-button);
    font-size: 1.5rem;
    font-weight: 500;
    box-shadow: var(--kf-shadow-lg);
    transition: var(--kf-transition);
    cursor: pointer;
    margin-top: var(--kf-space-lg);
}

body.woocommerce-checkout #place_order:hover {
    transform: translate(2px, 2px);
    box-shadow: var(--kf-shadow-md);
}

/* Terms and conditions checkbox */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: var(--kf-space-lg) 0;
}

body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--kf-space-sm);
    font-family: var(--kf-font-body);
    font-size: 0.875rem;
    cursor: pointer;
}

body.woocommerce-checkout input[type="checkbox"] {
    accent-color: var(--kf-orange);
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}


/* -------------------------------------------------------------------
   4C. MY ACCOUNT PAGE
   ------------------------------------------------------------------- */

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

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--kf-space-md) var(--kf-space-lg);
    border-radius: var(--kf-radius-md);
    font-family: var(--kf-font-body);
    font-weight: 500;
    color: var(--kf-grey-40);
}

/* Hover effect removed per user request */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--kf-black);
    color: var(--kf-white);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--kf-black);
    color: var(--kf-white);
    box-shadow: var(--kf-shadow-soft);
}

/* Account forms */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row input,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row textarea,
body.woocommerce-account .woocommerce-MyAccount-content select {
    width: 100%;
    padding: var(--kf-space-md) var(--kf-space-lg);
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    background: var(--kf-white);
    font-family: var(--kf-font-body);
    font-size: 1rem;
    transition: var(--kf-transition);
}

body.woocommerce-account .woocommerce-MyAccount-content input:focus,
body.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus {
    outline: none;
    box-shadow: var(--kf-shadow-soft);
    transform: translateY(-2px);
}

/* Orders table */
body.woocommerce-account table.my_account_orders {
    border-collapse: separate;
    border-spacing: 0 var(--kf-space-sm);
}

body.woocommerce-account table.my_account_orders thead th {
    background: var(--kf-black);
    color: var(--kf-white);
    padding: var(--kf-space-md);
    font-family: var(--kf-font-heading);
    font-weight: 600;
    text-align: left;
}

body.woocommerce-account table.my_account_orders thead th:first-child {
    border-radius: var(--kf-radius-md) 0 0 var(--kf-radius-md);
}

body.woocommerce-account table.my_account_orders thead th:last-child {
    border-radius: 0 var(--kf-radius-md) var(--kf-radius-md) 0;
}

body.woocommerce-account table.my_account_orders tbody td {
    padding: 1.25rem var(--kf-space-md);
    font-family: var(--kf-font-body);
    background: var(--kf-white);
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions a {
    background: var(--kf-yellow);
    color: var(--kf-black);
    padding: var(--kf-space-sm) var(--kf-space-lg);
    border-radius: var(--kf-radius-md);
    border: var(--kf-border);
    font-weight: 600;
    display: inline-block;
}

/* Hover effect removed per user request */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions a:hover {
    background: var(--kf-yellow);
    color: var(--kf-black);
}

/* Address Display */
body.woocommerce-account .woocommerce-Address address {
    background: rgba(240, 255, 255, 0.3);
    padding: var(--kf-space-lg);
    border-radius: var(--kf-radius-md);
    border: 1px dashed rgba(0, 0, 0, 0.2);
    min-height: 150px;
}

/* Address form fields */
body.woocommerce-account .woocommerce-address-fields__field-wrapper label {
    display: block;
    margin-bottom: var(--kf-space-sm);
    font-family: var(--kf-font-heading);
    font-weight: 600;
    color: var(--kf-black);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.woocommerce-account .woocommerce-address-fields__field-wrapper input,
body.woocommerce-account .woocommerce-address-fields__field-wrapper select,
body.woocommerce-account .woocommerce-address-fields__field-wrapper textarea {
    width: 100%;
    padding: var(--kf-space-md) var(--kf-space-lg);
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    background: var(--kf-white);
    font-family: var(--kf-font-body);
    font-size: 1rem;
}

body.woocommerce-account .woocommerce-address-fields__field-wrapper input:focus,
body.woocommerce-account .woocommerce-address-fields__field-wrapper select:focus {
    outline: none;
}


/* -------------------------------------------------------------------
   4D. SINGLE PRODUCT — Add to Cart area
   ------------------------------------------------------------------- */

body.single-product .single_add_to_cart_button.button {
    background-color: var(--kf-black) !important;
    border-radius: var(--kf-radius-pill) !important;
    border: var(--kf-border) !important;
    color: var(--kf-white) !important;
    flex: 1;
    height: 64px;
    font-family: var(--kf-font-button);
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: var(--kf-shadow-md);
    padding: 0 var(--kf-space-xl) !important;
}

body.single-product .woocommerce-variation-add-to-cart,
body.single-product form.cart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kf-space-lg);
    width: 100%;
    margin-top: var(--kf-space-xl);
}

@media (min-width: 1024px) {

    body.single-product .woocommerce-variation-add-to-cart,
    body.single-product form.cart {
        flex-direction: row;
        align-items: flex-end;
    }
}


/* Variable product price display */
.woocommerce-variation-price {
    margin-bottom: var(--kf-space-md);
}

.woocommerce-variation-price span.price {
    font-family: 'Bubble Rainbow', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: var(--kf-black);
}

/* -------------------------------------------------------------------
   4E. BLOCK-BASED CHECKOUT / CART FALLBACK
   In case WC blocks are ever re-enabled
   ------------------------------------------------------------------- */

/* Block checkout container */
.wc-block-checkout,
.wc-block-cart {
    font-family: var(--kf-font-body);
    --wp--custom--button--border--radius: 50px;
}

/* Block buttons */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
    background-color: var(--kf-black);
    color: var(--kf-white);
    font-family: var(--kf-font-button);
    font-weight: 500;
    border: var(--kf-border);
    border-radius: var(--kf-radius-pill);
    box-shadow: var(--kf-shadow-lg);
    padding: var(--kf-space-lg) var(--kf-space-2xl);
    transition: var(--kf-transition);
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
    background-color: var(--kf-black);
    transform: translate(2px, 2px);
    box-shadow: var(--kf-shadow-md);
}

/* Block text inputs */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox input,
.wc-block-components-select select {
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    padding: var(--kf-space-md) var(--kf-space-lg);
    font-family: var(--kf-font-body);
    transition: var(--kf-transition);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus {
    outline: none;
    box-shadow: var(--kf-shadow-soft);
    border-color: var(--kf-black);
}

/* Block order summary */
.wc-block-components-order-summary {
    border: var(--kf-border);
    border-radius: var(--kf-radius-lg);
    padding: var(--kf-space-xl);
    background: var(--kf-azure);
}

/* Block totals */
.wc-block-components-totals-wrapper {
    border-color: rgba(0, 0, 0, 0.1);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--kf-font-display);
    font-size: 1.5rem;
    font-weight: bold;
}

/* Block payment methods */
.wc-block-components-radio-control__option {
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    padding: var(--kf-space-md) var(--kf-space-lg);
    margin-bottom: var(--kf-space-sm);
    transition: var(--kf-transition);
}

.wc-block-components-radio-control__option:hover {
    box-shadow: var(--kf-shadow-soft);
}

/* Block notices */
.wc-block-components-notice-banner {
    border: var(--kf-border);
    border-radius: var(--kf-radius-md);
    box-shadow: var(--kf-shadow-md);
}

.wc-block-components-notice-banner.is-success {
    background-color: var(--kf-spring-green);
    border-left: 6px solid var(--kf-success);
}

.wc-block-components-notice-banner.is-error {
    background-color: var(--kf-error-bg);
    border-left: 6px solid var(--kf-error);
}

.wc-block-components-notice-banner.is-info {
    background-color: var(--kf-azure);
    border-left: 6px solid var(--kf-info);
}

/* Block quantity selector */
.wc-block-components-quantity-selector {
    border: var(--kf-border);
    border-radius: var(--kf-radius-sm);
    overflow: hidden;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    background: var(--kf-white);
    border: none;
    font-weight: bold;
    color: var(--kf-black);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
    background: var(--kf-yellow);
}


/* -------------------------------------------------------------------
   4F. LOADING / OVERLAY STATES
   ------------------------------------------------------------------- */

body.woocommerce .blockUI.blockOverlay {
    background: rgba(255, 255, 255, 0.7) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="%23000" stroke-width="4" stroke-dasharray="94" stroke-dashoffset="0"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/></circle></svg>') center center no-repeat;
    background-size: 40px 40px;
}


/* -------------------------------------------------------------------
   4G. COUPON FORM (Cart page)
   ------------------------------------------------------------------- */

body.woocommerce-cart .coupon {
    display: flex;
    gap: var(--kf-space-sm);
    align-items: stretch;
}

body.woocommerce-cart .coupon input.input-text {
    flex: 1;
    border-radius: var(--kf-radius-pill);
    padding: var(--kf-space-md) var(--kf-space-lg);
}

body.woocommerce-cart .coupon button {
    white-space: nowrap;
}


/* -------------------------------------------------------------------
   4H. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------- */

@media (max-width: 768px) {

    body.woocommerce-checkout .form-row-first,
    body.woocommerce-checkout .form-row-last {
        width: 100%;
        float: none;
    }

    body.woocommerce-cart .cart_totals {
        width: 100%;
    }

    body.single-product .woocommerce-variation-add-to-cart,
    body.single-product form.cart {
        flex-wrap: wrap;
    }

    body.single-product .single_add_to_cart_button.button {
        min-width: 100%;
    }
}


/* -------------------------------------------------------------------
   4I. ACCESSIBILITY — Focus Visible
   Respect keyboard navigation with visible focus rings
   ------------------------------------------------------------------- */

body.woocommerce *:focus-visible {
    outline: 3px solid var(--kf-orange);
    outline-offset: 2px;
}

body.woocommerce input:focus-visible,
body.woocommerce select:focus-visible,
body.woocommerce textarea:focus-visible {
    outline: 3px solid var(--kf-orange);
    outline-offset: 0;
    box-shadow: var(--kf-shadow-soft);
}

body.woocommerce .button:focus-visible,
body.woocommerce button:focus-visible {
    outline: 3px solid var(--kf-orange);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------
   4E. ORDER RECEIVED (THANK YOU) PAGE
   ------------------------------------------------------------------- */

.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-family: var(--kf-font-heading);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--kf-space-xl);
    color: var(--kf-black);
}

.woocommerce-order-received .woocommerce-table--order-details {
    border: var(--kf-border) !important;
    border-radius: var(--kf-radius-md) !important;
    border-collapse: separate !important;
    overflow: hidden;
    margin-top: var(--kf-space-lg);
    width: 100%;
}

.woocommerce-order-received .woocommerce-table--order-details thead th {
    background: var(--kf-black) !important;
    color: var(--kf-white) !important;
    padding: var(--kf-space-md) !important;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

.woocommerce-order-received .woocommerce-table--order-details tbody td,
.woocommerce-order-received .woocommerce-table--order-details tfoot td,
.woocommerce-order-received .woocommerce-table--order-details tfoot th {
    padding: 1.5rem var(--kf-space-lg) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-customer-details h2 {
    font-family: 'Bubble_Rainbow' !important;
    font-size: 3rem !important;
    margin: var(--kf-space-xl) 0 var(--kf-space-md) !important;
    line-height: 1 !important;
}

.woocommerce-order-received .woocommerce-customer-details address {
    border: var(--kf-border) !important;
    border-radius: var(--kf-radius-md) !important;
    padding: var(--kf-space-lg) !important;
    background: #E0F7FF !important;
    font-style: normal !important;
    line-height: 1.8 !important;
}

.woocommerce-order-received .woocommerce-order-overview {
    display: grid !important;
    grid-template-cols: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--kf-space-md);
    list-style: none inside !important;
    padding: 0 !important;
    margin-bottom: var(--kf-space-xl) !important;
}

.woocommerce-order-received .woocommerce-order-overview li {
    background: #F0FFFF !important;
    padding: var(--kf-space-md) !important;
    border: var(--kf-border) !important;
    border-radius: var(--kf-radius-md) !important;
    text-align: center;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--kf-grey-40) !important;
}

.woocommerce-order-received .woocommerce-order-overview li strong {
    display: block !important;
    color: var(--kf-black) !important;
    font-size: 1.125rem !important;
    margin-top: var(--kf-space-xs) !important;
}