/* ============================================================
   KALP — WooCommerce page brand SKIN (lean) — RAINBOW VARIANT
   Cart / Checkout / My Account / Order Received / Lost Password
   Scope: body.woocommerce-page (auto-set by WC core on these pages)
   Loaded by inc/enqueue.php on:
     is_cart() || is_checkout() || is_account_page() || is_wc_endpoint_url()

   Chat 08 rewrite — this file is now BRAND THEMING ONLY.
   It deliberately does NOT rebuild WooCommerce's layout: no grids on
   cart rows / checkout, no table->block forcing, no forced column
   widths, no rebuilt qty stepper / trash button. WooCommerce's own
   tested, responsive CSS draws the row + columns; we only skin colours,
   fonts, buttons, inputs, notices, and the coupon/meta typography.
   (The heavy 1.2.0 layout version is backed up at
    backups/pre-standard-layout/wc-pages-1.2.0-BEFORE-standard-layout.css.)
   ============================================================ */

/* ============================================
   BASE — flip the page from white to brand-cream
   ============================================ */
body.woocommerce-page {
    background: var(--cream, #FFF8EE) !important;
    color: var(--deep-brown, #1A0A03);
}

body.woocommerce-page #content,
body.woocommerce-page .site-content,
body.woocommerce-page #primary,
body.woocommerce-page .ast-container,
body.woocommerce-page .entry-content,
body.woocommerce-page .ast-plain-container {
    background: transparent !important;
    color: var(--deep-brown, #1A0A03) !important;
}

/* Light container safety — these WC pages render through page.php's
   `main.kalp-page--<slug>` wrapper (an `alignwide` block with NO
   .ast-container), so without this they butt to the viewport edges.
   This is a readable max-width + side padding ONLY — no grid, no column
   forcing, no alignwide neutralisation. WooCommerce still controls the
   internal cart/checkout layout. 1200px stays well above the checkout
   block's 700px 2-column container-query threshold, so the 2-col
   checkout still fires natively. */
.kalp-page--cart,
.kalp-page--checkout,
.kalp-page--my-account {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* !important beats Astra's .site-main padding (which was zeroing this out,
       so on mobile the content butted both viewport edges). */
    padding-left: clamp(20px, 5vw, 44px) !important;
    padding-right: clamp(20px, 5vw, 44px) !important;
    padding-bottom: 72px !important;
    box-sizing: border-box !important;
}

/* Keep the inner `alignwide` WooCommerce block inside the padded wrapper so the
   edge spacing is real on mobile. Horizontal containment only — this does NOT
   touch WC's internal cart/checkout grid (which stays 700px container-query
   driven; the wrapper is still ~1120px on desktop, well above threshold). */
.kalp-page--cart > .alignwide,
.kalp-page--checkout > .alignwide,
.kalp-page--my-account > .alignwide,
.kalp-page--cart > .wp-block-woocommerce-cart,
.kalp-page--checkout > .wp-block-woocommerce-checkout {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Page heading — Astra renders `entry-title` for the page name */
body.woocommerce-page .entry-title {
    font-family: var(--font-display, 'HP Simplified', sans-serif) !important;
    color: var(--deep-brown, #1A0A03) !important;
    font-size: clamp(2rem, 3vw, 3rem) !important;
    font-weight: 600 !important;
    margin: 40px 0 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid var(--gold-dark, #A68A3A) !important;
    display: inline-block !important;
}

/* Deep-brown text — SCOPED to the WC content wrappers only, NOT
   body.woocommerce-page. The body-wide selector leaked into the header +
   footer, turning the footer's headings/links deep-brown on the dark
   footer bg (invisible). Scope keeps header/footer on their own cream. */
:is(.kalp-page--cart, .kalp-page--checkout, .kalp-page--my-account) :is(p, li, td, th, label, span, small, h1, h2, h3, h4, h5, h6) {
    color: var(--deep-brown, #1A0A03);
}

:is(.kalp-page--cart, .kalp-page--checkout, .kalp-page--my-account) a:not(.button):not(.wc-block-components-button):not(.wp-block-button__link):not(.wc-block-components-product-name) {
    color: var(--gold-dark, #A68A3A);
    font-weight: 500;
}

:is(.kalp-page--cart, .kalp-page--checkout, .kalp-page--my-account) a:not(.button):not(.wc-block-components-button):not(.wp-block-button__link):not(.wc-block-components-product-name):hover {
    color: var(--gold, #C9A84C);
}

/* ============================================
   NOTICES — "Shahi Gulaab has been added" etc.
   ============================================ */
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .wc-block-components-notice-banner,
body.woocommerce-page .wc-block-components-snackbar,
body.woocommerce-page .components-snackbar {
    background: var(--cream, #FFF8EE) !important;   /* SOLID (was 10% gold — header showed through) */
    border: 1px solid var(--gold-dark, #A68A3A) !important;
    border-left: 4px solid var(--gold-dark, #A68A3A) !important;
    color: var(--deep-brown, #1A0A03) !important;
    padding: 1rem 1.25rem !important;
    border-radius: 6px !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 6px 22px rgba(26, 10, 3, 0.15) !important;
}

body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-error::before,
body.woocommerce-page .wc-block-components-notice-banner svg,
body.woocommerce-page .wc-block-components-snackbar svg,
body.woocommerce-page .components-snackbar svg {
    color: var(--gold-dark, #A68A3A) !important;
    fill: var(--gold-dark, #A68A3A) !important;
}

/* Notice status icon — WC paints a coloured background circle on the icon:
   RED (#cc1818) for errors, BLUE for info ("coupon applied"), green for success.
   Recolour ALL of them to brand gold with a cream glyph so no off-brand
   blue/red/green shows — covers the banner (direct-child svg = status icon, so
   the dismiss × inside its button is untouched) AND the bottom-left snackbar. */
body.woocommerce-page .wc-block-components-notice-banner > svg,
body.woocommerce-page .wc-block-components-notice-banner__icon,
body.woocommerce-page .wc-block-components-snackbar__icon,
body.woocommerce-page .components-snackbar__icon {
    background-color: var(--gold-dark, #A68A3A) !important;
    fill: var(--cream, #FFF8EE) !important;
    color: var(--cream, #FFF8EE) !important;
    border-radius: 50% !important;
}

/* The notice-banner DISMISS (×) button is a .wc-block-components-button, so
   the general gold-button rule would turn it into a solid gold box with an
   invisible glyph. Reset it to a small transparent × in deep-brown. */
body.woocommerce-page .wc-block-components-notice-banner .wc-block-components-button,
body.woocommerce-page .wc-block-components-notice-banner__dismiss {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: var(--deep-brown, #1A0A03) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.woocommerce-page .wc-block-components-notice-banner .wc-block-components-button svg,
body.woocommerce-page .wc-block-components-notice-banner__dismiss svg {
    width: 15px !important;
    height: 15px !important;
    fill: currentColor !important;
    color: currentColor !important;
}

body.woocommerce-page .woocommerce-error {
    background: var(--cream, #FFF8EE) !important;
    border: 1px solid var(--gold-dark, #A68A3A) !important;
    border-left: 4px solid var(--gold-dark, #A68A3A) !important;
    color: var(--deep-brown, #1A0A03) !important;
    border-radius: 6px !important;
    padding: 1rem 1.25rem !important;
    list-style: none !important;
    box-shadow: 0 6px 22px rgba(26, 10, 3, 0.15) !important;
}

/* ============================================
   BUTTONS — brand gold, kill the bright blue everywhere.
   The :not() list keeps the qty +/-, cart remove, coupon-chip × and
   chrome buttons from being swept into the gold-CTA look.
   ============================================ */
body.woocommerce-page .button,
body.woocommerce-page button:not(.kalp-whatsapp-btn):not(.back-to-top):not(.kalp-header__hamburger):not(.kalp-header__brand-divider):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):not(.wc-block-components-chip__remove):not(.wc-block-components-notice-banner__dismiss),
body.woocommerce-page .wc-block-components-button:not(.wc-block-components-notice-banner__dismiss),
body.woocommerce-page .wp-block-button__link,
body.woocommerce-page .wc-block-cart__submit-button,
body.woocommerce-page .wc-block-components-checkout-place-order-button {
    background: var(--gold, #C9A84C) !important;
    color: var(--deep-brown, #1A0A03) !important;
    border: none !important;
    font-family: var(--font-button, 'Cinzel', serif) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s !important;
    text-shadow: none !important;
    box-shadow: 0 4px 16px rgba(201, 168, 76, 0.2) !important;
}

body.woocommerce-page .button:hover,
body.woocommerce-page button:not(.kalp-whatsapp-btn):not(.back-to-top):not(.kalp-header__hamburger):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):not(.wc-block-components-chip__remove):not(.wc-block-components-notice-banner__dismiss):hover,
body.woocommerce-page .wc-block-components-button:not(.wc-block-components-notice-banner__dismiss):hover,
body.woocommerce-page .wp-block-button__link:hover,
body.woocommerce-page .wc-block-cart__submit-button:hover,
body.woocommerce-page .wc-block-components-checkout-place-order-button:hover {
    background: var(--gold-dark, #A68A3A) !important;
    color: var(--cream, #FFF8EE) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(201, 168, 76, 0.3) !important;
}

/* ============================================
   QUANTITY STEPPER + REMOVE — gold/brown accent only.
   No forced heights/widths/border rebuild — WooCommerce sizes them.
   ============================================ */
body.woocommerce-page .wc-block-components-quantity-selector__button {
    color: var(--gold-dark, #A68A3A) !important;
    font-family: var(--font-body, 'Ubuntu', sans-serif) !important;
}
body.woocommerce-page .wc-block-components-quantity-selector__button:hover {
    color: var(--deep-brown, #1A0A03) !important;
}
body.woocommerce-page .wc-block-components-quantity-selector__input,
body.woocommerce-page .quantity input.qty {
    color: var(--deep-brown, #1A0A03) !important;
    font-family: var(--font-body, 'Ubuntu', sans-serif) !important;
}

/* Remove-item control — muted brown, pink on hover. No size rebuild. */
body.woocommerce-page .wc-block-cart-item__remove-link {
    color: rgba(26, 10, 3, 0.55) !important;
}
body.woocommerce-page .wc-block-cart-item__remove-link:hover {
    color: var(--color-danger, #D4517E) !important;
}

/* ============================================
   CART ROW / SUMMARY — light TYPOGRAPHY only (no layout).
   ============================================ */

/* Cart-items table header (PRODUCT / TOTAL) */
body.woocommerce-page .wc-block-cart-items__header {
    font-family: var(--font-button, 'Cinzel', serif) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--gold-dark, #A68A3A) !important;
    font-weight: 700 !important;
}

/* Product name — brand display font, gold on hover (modest size, no rebuild) */
body.woocommerce-page .wc-block-cart-item__product .wc-block-components-product-name,
body.woocommerce-page .wc-block-components-product-name {
    color: var(--deep-brown, #1A0A03) !important;
    font-family: var(--font-display, 'HP Simplified', sans-serif) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
body.woocommerce-page .wc-block-cart-item__product .wc-block-components-product-name:hover,
body.woocommerce-page .wc-block-components-product-name:hover {
    color: var(--gold-dark, #A68A3A) !important;
}

/* Short description / metadata under the name */
body.woocommerce-page .wc-block-cart-item__product-metadata,
body.woocommerce-page .wc-block-cart-item__short-description {
    color: var(--deep-brown, #1A0A03) !important;
    opacity: 0.78 !important;
    font-family: var(--font-body, 'Ubuntu', sans-serif) !important;
}

/* Per-flavour meta (Mood / Net Weight — injected by kalp_cart_item_flavour_meta()).
   Block cart renders it as <ul class="wc-block-components-product-details">.
   Panel styling + gold Cinzel labels; layout left to WooCommerce. */
body.woocommerce-page .wc-block-components-product-details {
    list-style: none !important;
    margin: 10px 0 12px !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-left: 2px solid var(--gold-dark, #A68A3A) !important;
    border-radius: 0 4px 4px 0 !important;
}
body.woocommerce-page .wc-block-components-product-details li,
body.woocommerce-page .wc-block-components-product-details__item {
    color: var(--deep-brown, #1A0A03) !important;
    font-family: var(--font-body, 'Ubuntu', sans-serif) !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}
body.woocommerce-page .wc-block-components-product-details__name {
    font-family: var(--font-button, 'Cinzel', serif) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--gold-dark, #A68A3A) !important;
}
body.woocommerce-page .wc-block-components-product-details__value {
    color: var(--deep-brown, #1A0A03) !important;
    font-weight: 500 !important;
}

/* Classic-cart equivalent (dl.variation) — same light label/value skin */
body.woocommerce-page dl.variation dt {
    font-family: var(--font-button, 'Cinzel', serif) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--gold-dark, #A68A3A) !important;
    font-weight: 600 !important;
}
body.woocommerce-page dl.variation dd {
    color: var(--deep-brown, #1A0A03) !important;
    margin: 0 !important;
}

/* Line-total + prices — gold accent (colour only, WC positions them) */
body.woocommerce-page .wc-block-cart-item__total .wc-block-formatted-money-amount {
    color: var(--gold-dark, #A68A3A) !important;
    font-weight: 600 !important;
}

/* Prices use the BODY font (Ubuntu), NOT HP Simplified. HP Simplified has no
   ₹ (U+20B9) glyph, so the ₹ fell back to a different font while the digits
   stayed HP Simplified — making the symbol and the number look mismatched.
   Ubuntu contains ₹, so symbol + digits render in one consistent font. */
body.woocommerce-page .wc-block-formatted-money-amount,
body.woocommerce-page .woocommerce-Price-amount,
body.woocommerce-page .wc-block-components-totals-item__value {
    font-family: var(--font-body, 'Ubuntu', sans-serif) !important;
}

/* The ₹ symbol must MATCH its amount's colour + font. On classic order tables
   (order-received / order-pay) the .woocommerce-Price-currencySymbol span was
   being painted deep-brown by the .kalp-page--* span rule while the digits
   stayed gold — so "₹" and the number looked mismatched. Inherit fixes both. */
body.woocommerce-page .woocommerce-Price-currencySymbol {
    color: inherit !important;
    font-family: inherit !important;
}

/* Classic WC notices (e.g. order-pay "Please wait while we are processing your
   payment") render a WooCommerce icon-font ::before glyph positioned over the
   text — the icon font often isn't loaded, so it shows as a broken box
   superimposed on the first word. Hide it; the block notices keep their proper
   gold-circle SVG icon. */
body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-error::before {
    display: none !important;
}

/* The per-unit price element duplicates the right-column line total (identical
   at qty 1). Kept hidden per the Chat-07 content decision — do NOT re-introduce
   the duplicate price. */
body.woocommerce-page .wc-block-cart-item__prices {
    display: none !important;
}

/* Sidebar totals */
body.woocommerce-page .wc-block-components-totals-item {
    color: var(--deep-brown, #1A0A03) !important;
    border-bottom-color: rgba(26, 10, 3, 0.1) !important;
}
body.woocommerce-page .wc-block-components-totals-footer-item {
    background: rgba(201, 168, 76, 0.12) !important;
    border-top: 1px solid var(--gold-dark, #A68A3A) !important;
    border-radius: 4px !important;
    color: var(--deep-brown, #1A0A03) !important;
    /* internal padding so "Estimated total"/"Total" + the amount don't hug the
       box edges (was dropped in the lean rewrite). */
    padding: 14px 18px !important;
    margin-top: 12px !important;
}
body.woocommerce-page .wc-block-components-totals-footer-item-tax-value,
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    color: var(--gold-dark, #A68A3A) !important;
    font-weight: 700 !important;
}

body.woocommerce-page .wc-block-components-product-price,
body.woocommerce-page .woocommerce-Price-amount {
    color: var(--gold-dark, #A68A3A) !important;
    font-weight: 600 !important;
}

/* ============================================
   FORM INPUTS — light backgrounds, dark text, gold focus
   ============================================ */
body.woocommerce-page input[type="text"],
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="tel"],
body.woocommerce-page input[type="password"],
body.woocommerce-page input[type="number"],
body.woocommerce-page input[type="search"],
body.woocommerce-page textarea,
body.woocommerce-page select,
body.woocommerce-page .wc-block-components-text-input input,
body.woocommerce-page .wc-block-components-text-input textarea {
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--deep-brown, #1A0A03) !important;
    border: 1px solid rgba(26, 10, 3, 0.18) !important;
    border-radius: 4px !important;
    font-family: var(--font-body, 'Ubuntu', sans-serif) !important;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s !important;
}

body.woocommerce-page input:focus,
body.woocommerce-page textarea:focus,
body.woocommerce-page select:focus,
body.woocommerce-page .wc-block-components-text-input input:focus {
    border-color: var(--gold-dark, #A68A3A) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18) !important;
    outline: none !important;
}

/* Floating label inside .wc-block-components-text-input */
body.woocommerce-page .wc-block-components-text-input label {
    color: var(--deep-brown, #1A0A03) !important;
    opacity: 0.7;
}
body.woocommerce-page .wc-block-components-text-input.is-active label,
body.woocommerce-page .wc-block-components-text-input input:focus + label {
    color: var(--gold-dark, #A68A3A) !important;
    opacity: 1 !important;
}

/* Country/State combobox wrappers — light bg */
body.woocommerce-page .wc-block-components-combobox,
body.woocommerce-page .wc-block-components-country-input,
body.woocommerce-page .wc-block-components-state-input,
body.woocommerce-page .wc-block-components-address-form__country,
body.woocommerce-page .wc-block-components-address-form__state {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(26, 10, 3, 0.18) !important;
    color: var(--deep-brown, #1A0A03) !important;
}
body.woocommerce-page .wc-block-components-address-form__country *,
body.woocommerce-page .wc-block-components-address-form__state *,
body.woocommerce-page .wc-block-components-country-input *,
body.woocommerce-page .wc-block-components-state-input * {
    background: transparent !important;
    color: var(--deep-brown, #1A0A03) !important;
}
body.woocommerce-page .wc-block-components-combobox-control__suggestions-container > div {
    background: var(--cream, #FFF8EE) !important;
    color: var(--deep-brown, #1A0A03) !important;
    border: 1px solid rgba(26, 10, 3, 0.12) !important;
}
body.woocommerce-page .wc-block-components-combobox-control__suggestions-container .wc-block-components-combobox-control__suggestion:hover,
body.woocommerce-page .wc-block-components-combobox-control__suggestions-container .is-highlighted {
    background: rgba(201, 168, 76, 0.15) !important;
    color: var(--gold-dark, #A68A3A) !important;
}

/* Checkboxes + radios — gold accent (native control, no rebuild) */
body.woocommerce-page input[type="checkbox"],
body.woocommerce-page input[type="radio"] {
    accent-color: var(--gold-dark, #A68A3A) !important;
}
body.woocommerce-page .wc-block-components-radio-control__option--checked,
body.woocommerce-page .wc-block-components-radio-control__option:has(input:checked) {
    background: rgba(201, 168, 76, 0.12) !important;
    border-radius: 4px !important;
}

/* Coupon chip remove (×) — flex-centre the glyph, transparent (not gold box) */
body.woocommerce-page .wc-block-components-chip__remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--deep-brown, #1A0A03) !important;
}
body.woocommerce-page .wc-block-components-chip__remove:hover {
    background: rgba(26, 10, 3, 0.08) !important;
}
body.woocommerce-page .wc-block-components-chip__remove svg {
    fill: currentColor !important;
}

/* ============================================
   SECTION HEADERS — "Contact information", "Shipping address"
   ============================================ */
body.woocommerce-page .wc-block-components-checkout-step__title,
body.woocommerce-page .wc-block-components-title {
    font-family: var(--font-display, 'HP Simplified', sans-serif) !important;
    color: var(--deep-brown, #1A0A03) !important;
    font-weight: 600 !important;
}
body.woocommerce-page .wc-block-components-checkout-step__heading-content {
    color: var(--deep-brown, #1A0A03) !important;
    opacity: 0.65 !important;
    font-style: italic;
}

/* ============================================
   ORDER RECEIVED / THANK YOU PAGE
   ============================================ */
body.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-family: var(--font-display, 'HP Simplified', sans-serif) !important;
    color: var(--deep-brown, #1A0A03) !important;
    font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 28px !important;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.04)) !important;
    border: 1px solid rgba(26, 10, 3, 0.12) !important;
    border-radius: 8px !important;
    margin-bottom: 28px !important;
}
body.woocommerce-order-received .woocommerce-order-overview li strong {
    display: block !important;
    color: var(--gold-dark, #A68A3A) !important;
    font-family: var(--font-button, 'Cinzel', serif) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}

/* Tables in order details */
body.woocommerce-page table.shop_table th,
body.woocommerce-page table.shop_table td {
    border-bottom: 1px solid rgba(26, 10, 3, 0.1) !important;
    color: var(--deep-brown, #1A0A03) !important;
}
body.woocommerce-page table.shop_table tfoot th {
    color: var(--gold-dark, #A68A3A) !important;
    font-family: var(--font-button, 'Cinzel', serif) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* ============================================
   MY-ACCOUNT NAV (dashboard sidebar)
   ============================================ */
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 14px 16px !important;
    color: var(--deep-brown, #1A0A03) !important;
    font-family: var(--font-button, 'Cinzel', serif) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(26, 10, 3, 0.1) !important;
    transition: background 0.3s, padding-left 0.3s !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: rgba(201, 168, 76, 0.15) !important;
    color: var(--gold-dark, #A68A3A) !important;
    padding-left: 22px !important;
}

/* My-account page-level Login / Register heading */
body.woocommerce-account .entry-content > h2,
body.woocommerce-account .woocommerce > h2,
body.woocommerce-account .u-columns h2 {
    font-family: var(--font-display, 'HP Simplified', sans-serif) !important;
    color: var(--deep-brown, #1A0A03) !important;
    font-size: clamp(1.75rem, 2.6vw, 2.4rem) !important;
    font-weight: 600 !important;
    margin: 40px 0 1.25rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--gold-dark, #A68A3A) !important;
    display: inline-block !important;
}

/* Lost-password / simple-form labels + required marker */
body.woocommerce-page .woocommerce-form-row label {
    color: var(--deep-brown, #1A0A03) !important;
    font-family: var(--font-body, 'Ubuntu', sans-serif) !important;
    font-weight: 500 !important;
}
body.woocommerce-page .required {
    color: var(--color-danger, #D4517E) !important;
}

/* Header keeps its default sticky behaviour on cream WC pages */
body.woocommerce-page .kalp-header {
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}