/* ==================================================================
 *  LUMME · WOOCOMMERCE REFINEMENT LAYER (v1.3.0)
 *  Loaded AFTER lumme-woo.css. Contains ONLY targeted fixes for:
 *   – header/content spacing on WC pages
 *   – card / form internal spacing
 *   – WooCommerce notice icon alignment
 *   – subtly warmer WC page surface
 *   – responsive edge-cases
 *   – optional background-image support
 *  It does not repeat any existing rules; it overrides selectively.
 * =============================================================== */

/* --- 1. Subtly lighter / warmer WC page surface ----------------- */
body.lumme-woo-page {
    background:
        radial-gradient(1100px 480px at 15% -20%, rgba(207, 198, 178, 0.11), transparent 60%),
        radial-gradient(1100px 620px at 110% 8%, rgba(243, 240, 226, 0.07), transparent 60%),
        linear-gradient(180deg, rgba(30, 29, 27, 1) 0%, rgba(35, 33, 30, 1) 100%);
}
body.lumme-woo-page .lumme-woo {
    position: relative;
    isolation: isolate;
}
/* Hairline separator immediately under the fixed site header
   so the page surface reads as a distinct plane. */
body.lumme-woo-page .lumme-woo::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207,198,178,0.14) 20%, rgba(207,198,178,0.14) 80%, transparent);
    pointer-events: none;
}

/* --- 2. Reduce top padding — closer to header, no header overlap - */
.lumme-woo { padding-top: 92px; padding-bottom: 72px; }
@media (min-width: 900px) { .lumme-woo { padding-top: 104px; padding-bottom: 88px; } }
@media (max-width: 600px) { .lumme-woo { padding-top: 84px; padding-bottom: 56px; } }

/* Tight up page heading spacing */
.lumme-woo-heading { margin-bottom: 28px; }
.lumme-woo-heading__eyebrow { margin-bottom: 10px; }
.lumme-woo-heading__title { margin-bottom: 10px; }

/* --- 3. Card / form internal spacing (subtly tighter) ----------- */
.lumme-surface,
.lumme-auth-card,
.lumme-account-hero,
.lumme-empty-state,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-checkout .lumme-checkout-details,
.woocommerce-checkout .lumme-checkout-review,
.cart-collaterals .cart_totals,
.lumme-thankyou-hero {
    padding: 26px !important;
}
@media (min-width: 900px) {
    .lumme-surface,
    .lumme-account-hero,
    .lumme-auth-card,
    .woocommerce-account .woocommerce-MyAccount-content,
    .woocommerce-checkout .lumme-checkout-details,
    .woocommerce-checkout .lumme-checkout-review,
    .cart-collaterals .cart_totals { padding: 30px !important; }
    .lumme-account-hero { padding: 32px !important; }
    .lumme-thankyou-hero { padding: 40px 32px !important; }
    .lumme-empty-state { padding: 48px 32px !important; }
}
.lumme-account-hero { margin-bottom: 22px !important; }
.woocommerce-account .woocommerce-MyAccount-navigation { margin: 0 0 22px !important; }

/* Auth cards fit initial viewport on desktop */
.lumme-auth-shell { padding-top: 8px; }
.lumme-auth-card__title { margin-bottom: 6px; }
.lumme-auth-card__lede { margin-bottom: 22px; }
.lumme-auth-card__form { gap: 16px; }
.lumme-auth-card__submit-row { padding-top: 6px; }
.lumme-auth-card__register-cta { margin-top: 18px; padding-top: 18px; }

/* Dashboard summary — tighter gap */
.lumme-dashboard-summary { gap: 14px; margin-top: 22px; }
.lumme-dashboard-card { padding: 20px; }
.lumme-dashboard-card__value { font-size: 2rem; }

/* Cart / checkout — sticky sidebar sits closer to header */
.cart-collaterals .cart_totals,
.woocommerce-checkout .lumme-checkout-review { top: 92px !important; }

/* Product single: reduce top padding of tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: 44px; padding-top: 28px; }

/* --- 4. Central alignment & consistent widths ------------------- */
.lumme-woo .lumme-woo__inner { max-width: 1200px; }
.lumme-auth-shell { max-width: 500px; margin-left: auto; margin-right: auto; }
.lumme-auth-shell--wide { max-width: 720px; }
.lumme-empty-state { max-width: 620px; margin-left: auto; margin-right: auto; }

/* --- 5. WooCommerce notices — icon / text alignment ------------- */
/* Reset default absolute-positioned icon and use flex layout so the
   icon can never overlap the message text. Padding-left is generous
   enough to leave breathing room around the icon. */
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-noreviews,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 20px !important;
    padding-left: 20px !important;
    line-height: 1.55 !important;
    flex-wrap: wrap;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center;
    margin-top: 1px !important;
    font-size: 15px !important;
    color: var(--lumme-taupe) !important;
}
.woocommerce-message::before { color: var(--lumme-cream) !important; }
.woocommerce-error::before   { color: #d47c7c !important; }

/* Ensure inline lists / buttons wrap gracefully next to the icon */
.woocommerce-notices-wrapper .woocommerce-info > *,
.woocommerce-notices-wrapper .woocommerce-message > *,
.woocommerce-notices-wrapper .woocommerce-error > *,
.woocommerce-info > *,
.woocommerce-message > *,
.woocommerce-error > * { flex: 0 1 auto; min-width: 0; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto !important; float: none !important; }

/* Nested <ul> inside error notices */
.woocommerce-error li,
.woocommerce-info  li,
.woocommerce-message li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-error ul,
.woocommerce-info  ul,
.woocommerce-message ul { margin: 0 !important; padding: 0 !important; flex: 1 1 100%; }

/* Empty-state icon safety (in case any theme/plugin adds ::before) */
.lumme-empty-state::before,
.lumme-empty-state::after { content: none !important; }
.lumme-empty-state {
    display: block;
    text-align: center;
}

/* Login form notice inside auth card */
.lumme-auth-card .woocommerce-error,
.lumme-auth-card .woocommerce-message,
.lumme-auth-card .woocommerce-info { margin-bottom: 18px !important; }
.lumme-modal .woocommerce-error,
.lumme-modal .woocommerce-message,
.lumme-modal .woocommerce-info { margin-bottom: 14px !important; }

/* --- 6. Prevent horizontal overflow at small widths ------------- */
body.lumme-woo-page,
body.lumme-woo-page .lumme-woo,
body.lumme-woo-page .lumme-woo__inner { overflow-x: clip; }
.woocommerce-cart-form,
.woocommerce-checkout form.checkout { max-width: 100%; }
.woocommerce-cart-form .shop_table { width: 100%; table-layout: fixed; }
.woocommerce-cart-form .shop_table td,
.woocommerce-cart-form .shop_table th { word-break: normal; overflow-wrap: anywhere; }
.woocommerce-orders-table td { overflow-wrap: anywhere; }

/* Modal on narrow phones — full-viewport comfort */
@media (max-width: 480px) {
    .lumme-modal { padding: 12px; }
    .lumme-modal__dialog { padding: 32px 22px 24px; margin: 6vh auto 2vh; }
    .lumme-modal__title { font-size: 1.6rem; }
    .lumme-modal__close { top: 10px; right: 10px; width: 36px; height: 36px; }
}

/* --- 7. Coupon form / disclosure spacing ------------------------ */
.woocommerce-form-login,
.woocommerce-form-coupon { padding: 20px !important; margin-bottom: 18px !important; }
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle { margin-bottom: 12px !important; }
.woocommerce-form-coupon .form-row { margin-bottom: 12px !important; }

/* --- 8. Pagination — vertical space --------------------------- */
.woocommerce nav.woocommerce-pagination { margin: 32px 0 0 !important; }

/* --- 9. My-account content headings size fit ------------------ */
.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 1.5rem !important; margin-bottom: 14px !important; }
.woocommerce-account .woocommerce-MyAccount-content > p { margin-top: 0; }

/* --- 10. OPTIONAL BACKGROUND IMAGE support --------------------- *
 *  Activated by lumme-wc-bg-on body class. The inline
 *  --lumme-wc-bg-image / --lumme-wc-bg-position / --lumme-wc-bg-overlay
 *  custom properties are emitted by lumme_wc_bg_inline_css() in PHP
 *  ONLY on WooCommerce/account pages when the toggle is on.
 * -------------------------------------------------------------- */
body.lumme-wc-bg-on .lumme-woo {
    background-image: var(--lumme-wc-bg-image, none);
    background-size: cover;
    background-position: var(--lumme-wc-bg-position, center center);
    background-repeat: no-repeat;
    background-attachment: scroll;
}
body.lumme-wc-bg-on .lumme-woo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, var(--lumme-wc-bg-overlay, 0.55));
    z-index: 0;
    pointer-events: none;
}
body.lumme-wc-bg-on .lumme-woo > .lumme-woo__inner {
    position: relative;
    z-index: 1;
}
/* Keep the site background solid on non-WC pages */
body:not(.lumme-woo-page) .lumme-woo { background-image: none !important; }
body:not(.lumme-woo-page) .lumme-woo::after { display: none !important; }