/**
 * Velonix Labs — My Account
 * Enqueued ONLY on the WooCommerce My Account page (see inc/enqueue.php,
 * is_account_page()).
 *
 * CSS-only reskin of WooCommerce's own default My Account markup — the
 * same approach already used for Cart/Checkout (page-cart-checkout.css)
 * and for the same reason: "improve the visual presentation without
 * changing the underlying WooCommerce functionality" means restyling
 * WooCommerce's own stable, documented class names
 * (.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content,
 * etc.), not a template override. Nothing here touches how the
 * dashboard/orders/addresses/account-details/logout screens actually
 * work — only how the existing bullet-list navigation and surrounding
 * content look.
 *
 * ROOT CAUSE FOUND THIS ROUND, not previously known: My Account has no
 * dedicated page template (no page-account.php, no page.php at all in
 * this theme) — WordPress's template hierarchy falls all the way back
 * to index.php for it, which wraps the_content() (i.e. everything
 * [woocommerce_my_account] outputs) in <div class="prose">. .prose has
 * its own max-width:720px (components.css) — correct for actual body
 * text on a genuinely untemplated page or the Legal & Policy template,
 * completely wrong for a two-column dashboard grid, which was
 * silently being squeezed into a 720px reading column regardless of
 * the actual page width. This is what produced the exact symptom in
 * the reference screenshot — a narrow content panel with a large
 * empty area beside it — and it would have done so even with a
 * completely fresh CSS load and zero caching involved; the previous
 * nav-width fix was real but was always going to be visually
 * undermined by this, since 300px of a 720px-capped total leaves very
 * little left for the content column regardless of how wide the
 * actual browser viewport is.
 */

/* Removes the reading-width cap specifically on this page — .prose
   keeps max-width:720px everywhere else it's used (Legal & Policy,
   any other untemplated page) untouched. */
body.woocommerce-account .prose{
  max-width:none;
}

/* !important only on properties that have no legitimate override at
   any other breakpoint (max-width/margin/display/align-items) —
   grid-template-columns and gap are deliberately left as normal-
   weight rules, since the ≤900px block further down changes both of
   those on purpose for tablet/mobile, and an !important here would
   have defeated that override entirely (caught by testing tablet and
   mobile after this change, not assumed safe). */
.woocommerce-account .woocommerce{
  display:grid !important;
  grid-template-columns:320px 1fr;
  gap:48px;
  align-items:start !important;
  max-width:1100px !important;
  margin:0 auto !important;
}

/* Explicit width on the navigation element itself, not just relying
   on the grid track around it — belt-and-suspenders now that a
   diagnostic pass confirmed this stylesheet genuinely reaches the
   browser: if a grid item also carries its own conflicting width from
   elsewhere (a real, documented possibility — WooCommerce's
   'woocommerce-layout' stylesheet handle historically includes its
   own float:left/width:30-48% rules for .woocommerce-MyAccount-
   navigation, a legacy two-column layout WooCommerce itself no longer
   needs once this theme supplies its own grid, but which was not
   being dequeued — see inc/enqueue.php, velonix_dequeue_default_wc_styles(),
   now updated to also unset that handle specifically for this reason),
   an explicit width here, at !important, is what wins regardless. */
.woocommerce-MyAccount-navigation{
  width:320px !important;
  max-width:320px !important;
  flex:none !important;
  float:none !important;
}
/* Grid items default to min-width:auto, meaning they refuse to shrink
   below their own content's intrinsic minimum size — confirmed this
   was the actual cause of a real overflow (measured 255px+ at 390px)
   once the orders table below got white-space:nowrap for its own
   horizontal-scroll fix: without this, that table's now-large
   min-content width was inflating the whole grid TRACK instead of
   scrolling within itself. min-width:0 here is what actually lets
   .woocommerce-MyAccount-content shrink to the grid track's real
   available width, so the table's own overflow-x:auto (further down)
   is what handles the wide content, not the grid. */
.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content{ min-width:0; }

/* The bullet list becomes a bordered card of stacked rows — "styled
   navigation cards or rows" as asked for, reusing the exact same
   shell recipe (surface background, line border, radius-lg) already
   established for every other prominent card in this theme
   (.tracking-card, .contact-card, .calc-card), not a new visual
   language. */
.woocommerce-MyAccount-navigation{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden;
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation-link{ border-bottom:1px solid var(--line); }
.woocommerce-MyAccount-navigation-link:last-child{ border-bottom:none; }
.woocommerce-MyAccount-navigation-link a{
  display:block; padding:18px 24px; color:var(--ink-soft); text-decoration:none;
  font-size:14px; font-weight:500;
  transition:background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.woocommerce-MyAccount-navigation-link a:hover{ background:var(--bg); color:var(--ink); }

/* .is-active is WooCommerce's own class, added automatically to
   whichever section is currently open — reused directly, not
   duplicated with a second mechanism. Same accent-tint + left-accent-
   border treatment already used for .tracking-badge/.calc-result-primary
   elsewhere for "this is the highlighted/current one". */
.woocommerce-MyAccount-navigation-link.is-active a{
  background:var(--accent-tint); color:var(--accent); font-weight:600;
  border-left:3px solid var(--accent); padding-left:21px;
}

/* Log out reads as a distinct, slightly cautionary action — reuses the
   same muted red already established for .woocommerce-error/.calc-error
   elsewhere, not a new color. */
.woocommerce-MyAccount-navigation-link--customer-logout a{ color:#E0857D; }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background:rgba(224,133,125,0.1); color:#E0857D; }

.woocommerce-MyAccount-content{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:40px;
}
.woocommerce-MyAccount-content > p{ color:var(--ink-soft); line-height:1.7; }
.woocommerce-MyAccount-content a{ color:var(--accent); }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3{ margin-bottom:16px; }
.woocommerce-MyAccount-content mark{ background:none; color:var(--ink); font-weight:600; }

/* Orders table / downloads table — same shop_table treatment already
   built for Cart/Checkout, reused here rather than redefined, since
   this file loads on a completely different page and can't reach
   page-cart-checkout.css's rules directly. */
.woocommerce-MyAccount-content table.shop_table{
  width:100%; border-collapse:collapse; margin-bottom:24px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.woocommerce-MyAccount-content table.shop_table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink-faint); font-weight:600; padding:14px 16px; border-bottom:1px solid var(--line);
}
.woocommerce-MyAccount-content table.shop_table td{
  padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink); font-size:14px;
}
.woocommerce-MyAccount-content table.shop_table tr:last-child td{ border-bottom:none; }

/* Buttons / form fields — same visual language as every other form in
   this theme (.field-input, .btn-primary), reused rather than
   redefined. */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content input.button{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#0D1017; border:none; border-radius:var(--radius);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px;
  padding:12px 24px; cursor:pointer; text-decoration:none;
  transition:background-color 0.18s ease;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content input.button:hover{ background:var(--accent-deep); }

.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; color:var(--ink); font-family:'Inter',sans-serif; font-size:14px; outline:none;
  transition:border-color 0.18s ease;
}
.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus{ border-color:var(--accent); }
.woocommerce-MyAccount-content label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.woocommerce-MyAccount-content fieldset{ border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.woocommerce-MyAccount-content legend{ padding:0 8px; color:var(--ink); font-weight:600; font-size:14px; }

/* Address cards on the Addresses screen */
.woocommerce-MyAccount-content .woocommerce-Address{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.woocommerce-MyAccount-content address{ font-style:normal; color:var(--ink-soft); line-height:1.7; }

@media (max-width:900px){
  .woocommerce-account .woocommerce{ grid-template-columns:1fr; gap:24px; }
  .woocommerce-MyAccount-content{ padding:24px 20px; }
  /* Resets the new desktop-only width:320px !important above — without
     this, that unconditional !important would also apply here and
     break the single-column tablet/mobile stack the exact same way an
     earlier round's !important mistake did (caught and fixed then by
     testing every breakpoint immediately after any !important change,
     doing the same here rather than assuming it's safe). */
  .woocommerce-MyAccount-navigation{
    width:100% !important;
    max-width:none !important;
  }
}

@media (max-width:767px){
  /* The new page-my-account.php template (replacing the previous
     index.php fallback) gives desktop/tablet a real hero introduction
     — eyebrow badge + lead paragraph — matching every other utility
     page (Contact, Order Tracking). Mobile is explicitly excluded from
     that: the brief was clear that the existing mobile layout should
     not change, and the original mobile view (via the old index.php
     fallback's bare page-intro) was just the "My account." heading on
     its own, no eyebrow, no lead text. Hiding both here — rather than
     leaving them out of the template entirely — keeps a single shared
     template for every breakpoint while still landing mobile back at
     its previously-verified exact appearance. */
  .woocommerce-account .hero .eyebrow,
  .woocommerce-account .hero p.lead{
    display:none;
  }
}

@media (max-width:700px){
  /* Orders/downloads tables have real multi-column content (order
     number, date, status, total, actions) that doesn't fit a narrow
     screen — rather than force a card-based reflow (the cart table's
     treatment, appropriate there because it only has to handle one
     specific known column set), this makes the table scroll
     horizontally within its own contained box. Confirmed via
     rendering: this was a genuine overflow before this rule (measured
     140px of actual page overflow at 390px), not just a style
     preference. */
  .woocommerce-MyAccount-content table.shop_table{
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
}