/* ============================================================
   La'Glamica — WooCommerce (account, auth, checkout, cart)
   Loaded conditionally: is_woocommerce() || is_cart() || is_checkout() ||
   is_account_page() — see inc/woocommerce.php.

   Two kinds of selectors live in this file, on purpose:
     1. WooCommerce's OWN class names (.woocommerce-form-login,
        .woocommerce-MyAccount-navigation-link, .woocommerce-orders-table, ...)
        — styling WooCommerce's real markup, never replacing it.
     2. Our own class names (.auth, .card, .acc-wrap, ...) — only for the
        wrapper markup WE print via hooks/overrides (see inc/woocommerce.php
        and woocommerce/myaccount/*.php).

   Checked against style.css before writing this file — no existing
   selector collisions for .card/.status/.kv/.quick/.empty/.timeline/.notice.
   Breakpoints match the rest of the theme: 900px, 768px, 600px.
   ============================================================ */

/* ============================================================
   FIX 2026-09-27 — Hello Elementor's own .site-main wrapper squeezes
   these pages into a narrow, centered, padded column.

   Checkout/Cart/My Account use the default page template (no page.php in
   this theme), so they render through Hello Elementor's own
   template-parts/single.php, which wraps everything in
   <main id="content" class="site-main">. Verified live on
   hello-elementor/assets/css/theme.css: .site-main gets max-width capped
   at 1140px (with breakpoints as low as 500px) plus 10px of horizontal
   padding — narrower than this theme's own --container (1240px). Result:
   the login split-panel and the dashboard's cream header band were
   rendering "boxed" inside that narrower column instead of full-bleed.

   404.php and search.php are NOT affected — they are root-level template
   files WordPress loads directly, bypassing Hello Elementor's router
   entirely, so .site-main never wraps them.

   Fix: neutralize .site-main's own width constraint specifically on these
   three page types (matched by the body classes WooCommerce itself adds —
   verified live via curl), and let our own containers (.acc-wrap's
   max-width: var(--container), .auth's full-bleed grid) take over
   completely instead of being double-constrained by the parent's.
   ============================================================ */
.woocommerce-account .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
	max-width: none;
	padding-inline: 0;
}

/* ============================================================
   AUTH — login / lost password / reset password
   Wrapper markup: .auth/.auth-brand/.auth-form/.auth-card (ours, printed by
   inc/woocommerce.php). Form itself: 100% native WooCommerce markup.
   ============================================================ */
.auth { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 640px; }
.auth-brand { background: var(--burgundy); color: var(--cream); padding: clamp(48px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.auth-brand .display { color: var(--cream); }
.auth-brand .display em { color: var(--gold-soft); font-style: italic; }
.auth-brand .lede { color: rgba(255, 248, 248, 0.78); }
.auth-quote { border-left: 2px solid var(--gold); padding-left: 20px; font-family: var(--serif); font-size: 20px; line-height: 1.35; color: rgba(255, 248, 248, 0.92); }
.auth-form { background: var(--paper); padding: clamp(48px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; }
.auth-card { width: 100%; max-width: 420px; margin: 0 auto; }

/* Native WooCommerce login form, restyled */
.auth-card h2 { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 36px); font-weight: 400; color: var(--burgundy); margin-bottom: 24px; }
.auth-card .woocommerce-form-row { margin-bottom: 18px; }
.auth-card .woocommerce-form-row label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.auth-card .woocommerce-form-row .required { display: none; } /* asterisk — redundant with our own visual language */
.auth-card .woocommerce-Input { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font-family: var(--sans); font-size: 15px; color: var(--ink); }
.auth-card .woocommerce-Input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(181, 142, 51, 0.15); }
.auth-card .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 400; text-transform: none; letter-spacing: 0; margin: 0; }
.auth-card form p.form-row:has(.woocommerce-form-login__rememberme) { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.auth-card .woocommerce-LostPassword { margin: 0 0 22px; font-size: 13.5px; }
.auth-card .woocommerce-LostPassword a { color: var(--gold-2); border-bottom: 1px solid rgba(142, 111, 40, 0.35); }
.auth-card .woocommerce-form-login__submit,
.auth-card .woocommerce-Button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 16px 26px; font-family: var(--sans); font-size: 15px; font-weight: 500; background: var(--burgundy); color: var(--cream); border-radius: 999px; border: none; }
.auth-card .woocommerce-form-login__submit:hover,
.auth-card .woocommerce-Button:hover { background: var(--burgundy-2); color: var(--gold-soft); }

.auth-alt { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-2); }
.auth-alt a { color: var(--burgundy); font-weight: 500; border-bottom: 1px solid var(--pink-soft); }
.auth-secure { margin-top: 20px; font-size: 12px; color: var(--ink-3); }
.auth-back { margin-top: 22px; font-size: 13.5px; color: var(--ink-3); }
.auth-back a { color: var(--gold-2); border-bottom: 1px solid rgba(142, 111, 40, 0.35); }

/* Lost/reset password share the same native wrapper class */
.auth-card .woocommerce-ResetPassword p:first-child { font-size: 14.5px; color: var(--ink-2); margin-bottom: 26px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { order: 2; padding: 56px 24px; }
  .auth-form { padding: 56px 24px; }
}

/* ============================================================
   ACCOUNT LAYOUT — wrapper markup ours, nav data + content 100% WooCommerce
   ============================================================ */
.acc-head { background: var(--cream-2); border-bottom: 1px solid var(--line-soft); padding: 48px 0 40px; }
.acc-head-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.acc-wrap { max-width: var(--container); margin: 0 auto; padding: 44px 32px 60px; display: grid; grid-template-columns: 248px 1fr; gap: 44px; align-items: start; }

/* Native nav data (wc_get_account_menu_items), our wrapper classes */
.acc-nav-wrap { position: sticky; top: 20px; }
.acc-nav { list-style: none; display: grid; gap: 2px; }
.acc-nav .woocommerce-MyAccount-navigation-link a { display: flex; align-items: center; padding: 12px 16px; border-radius: var(--r-md); font-size: 14.5px; color: var(--ink-2); border-left: 2px solid transparent; }
.acc-nav .woocommerce-MyAccount-navigation-link a:hover { background: var(--cream-2); color: var(--burgundy); }
.acc-nav .woocommerce-MyAccount-navigation-link.is-active a { background: #fff; border-left-color: var(--gold); color: var(--burgundy); font-weight: 600; box-shadow: 0 1px 2px rgba(62, 11, 6, 0.05); }
.acc-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.acc-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ink-3); }

/* FIX 2026-09-27: plain links inside the account content area (e.g. the
   native "Hello X (not X? Log out)" greeting from dashboard.php, and the
   "recent orders" / "billing address" links WooCommerce prints alongside
   it) had no brand color rule anywhere, so they fell back to the
   browser's default blue-and-underlined link. This is a general baseline
   for the whole content column — anything with a more specific selector
   above (buttons, .kv, .card-actions links, etc.) still wins over it. */
.woocommerce-MyAccount-content a:not(.btn):not(.view) { color: var(--gold-2); text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 2px; }
.woocommerce-MyAccount-content a:not(.btn):not(.view):hover { color: var(--burgundy); }

@media (max-width: 900px) {
  .acc-wrap { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px 48px; }
  .acc-nav-wrap { position: static; }
  .acc-nav { display: flex; overflow-x: auto; gap: 8px; }
  .acc-nav .woocommerce-MyAccount-navigation-link { flex: 0 0 auto; }
  .acc-nav .woocommerce-MyAccount-navigation-link--customer-logout { border-top: none; margin: 0; padding-top: 0; }
}

/* ============================================================
   DASHBOARD CARDS — our own markup in woocommerce/myaccount/dashboard.php,
   populated with real WooCommerce/WC Subscriptions data
   ============================================================ */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 24px; }
.quick a { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 20px 22px; display: block; transition: all 0.18s ease; }
.quick a:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.quick h4 { font-family: var(--serif); font-size: 19px; color: var(--burgundy); font-weight: 400; margin-bottom: 4px; }
.quick p { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

.card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 28px 30px; margin-bottom: 24px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.card-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft); }

.hero-card { background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-2) 100%); color: var(--cream); border: none; }
.hero-card .display { color: var(--cream); }
.hero-card .kv dt { color: rgba(255, 248, 248, 0.6); }
.hero-card .kv dd { color: #fff; }
.hero-card .card-actions { border-top-color: rgba(255, 248, 248, 0.18); }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.status-active { background: #E7F1E8; color: #2F6B39; }
.status-on-hold { background: var(--gold-bg); color: var(--gold-2); }
.status-pending-cancel,
.status-cancelled,
.status-expired { background: var(--pink-bg); color: var(--burgundy-soft); }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; margin: 22px 0 4px; list-style: none; padding: 0; }
.kv dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.kv dd { font-size: 17px; color: var(--burgundy-2); font-weight: 500; margin: 0; }

table.orders { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.orders th { text-align: left; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
table.orders td { padding: 15px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
table.orders tr:last-child td { border-bottom: none; }
table.orders td.num { font-weight: 600; color: var(--burgundy-2); }
table.orders a.view { color: var(--gold-2); border-bottom: 1px solid rgba(142, 111, 40, 0.3); }

.notice { border-radius: var(--r-md); padding: 18px 22px; font-size: 14.5px; margin-bottom: 24px; display: flex; gap: 16px; align-items: flex-start; line-height: 1.55; }
.notice-warn { background: var(--gold-bg); color: var(--burgundy-2); border-left: 3px solid var(--gold-2); }
.notice-soft { background: var(--pink-bg); color: var(--burgundy-2); border-left: 3px solid var(--pink); }
.notice b { display: block; margin-bottom: 3px; }

.empty { background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-2) 100%); color: var(--cream); border-radius: var(--r-lg); padding: clamp(34px, 4vw, 48px); margin-bottom: 24px; }
.empty .display { color: var(--cream); }
.empty .display em { color: var(--gold-soft); font-style: italic; }
.empty p { color: rgba(255, 248, 248, 0.8); max-width: 52ch; margin: 14px 0 26px; font-size: 16.5px; }
.empty-list { list-style: none; display: grid; gap: 11px; margin: 0 0 30px; font-size: 14.5px; color: rgba(255, 248, 248, 0.82); padding: 0; }
.empty-list li { display: flex; gap: 12px; }
.empty-list span { color: var(--gold-soft); }

.timeline { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding-bottom: 18px; position: relative; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.timeline .mark { width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--line); background: #fff; z-index: 1; }
.timeline .mark.now { border-color: var(--gold); background: var(--gold-bg); }
.timeline .mark.end { border-color: var(--pink); }
.timeline h5 { font-size: 14.5px; font-weight: 600; color: var(--burgundy-2); margin-bottom: 1px; }
.timeline p { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

/* ============================================================
   NATIVE ORDERS TABLE — WooCommerce's own "Orders" account endpoint,
   NOT overridden as a file (see blueprint C2/Faza D) — styled purely
   through its own well-documented core class names.
   ============================================================ */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.woocommerce-orders-table th { text-align: left; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.woocommerce-orders-table td { padding: 15px 10px 15px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.woocommerce-orders-table .button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 13px; border-radius: 999px; background: transparent; color: var(--burgundy); border: 1px solid var(--burgundy); }
.woocommerce-orders-table .button:hover { background: var(--burgundy); color: var(--cream); }

/* ============================================================
   NATIVE SUBSCRIPTIONS TABLE — Faza D, WooCommerce Subscriptions plugin.
   BEST EFFORT: WC Subscriptions is closed-source, so these selectors follow
   the plugin's publicly documented/observed convention
   (.woocommerce-orders-table--subscriptions, mark.subscription-status,
   .button.cancel / .change_payment_method / .resubscribe) but have NOT been
   checked against the live-rendered HTML of v9.2.0. VERIFY ON STAGING with
   a real subscription (View Page Source) before relying on this block —
   adjust selectors to match whatever actually renders if they differ.
   ============================================================ */
.woocommerce-orders-table--subscriptions .button.change_payment_method,
.woocommerce-orders-table--subscriptions .button.resubscribe { background: var(--burgundy); color: var(--cream); border-color: var(--burgundy); }
.woocommerce-orders-table--subscriptions .button.change_payment_method:hover,
.woocommerce-orders-table--subscriptions .button.resubscribe:hover { background: var(--burgundy-2); }
.woocommerce-orders-table--subscriptions .button.cancel { background: transparent; color: var(--ink-3); border: none; }
mark.subscription-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--gold-bg); color: var(--gold-2); }
mark.subscription-status.active { background: #E7F1E8; color: #2F6B39; }
mark.subscription-status.cancelled,
mark.subscription-status.pending-cancel,
mark.subscription-status.expired { background: var(--pink-bg); color: var(--burgundy-soft); }