/* ==========================================================================
   PlayGuitar v3 — My account (WooCommerce) light restyle
   Member chrome (member header, dark footer, base) from member.css +
   marketing.css. This restyles the stock WC account area — the v3 tab strip +
   account hero (overridden templates) and WC's default content markup (orders,
   edit-account, addresses, downloads, notices) — scoped under body.pg-myaccount,
   tokens-only. Ported from design/od-myaccount/screens/desktop.html.
   ========================================================================== */

/* Hide the theme's redundant "My Account" page title — the account hero h1 leads. */
.pg-myaccount .wc-page__title,
.pg-myaccount .entry-title { display: none; }

/* Layout: single centered column, tabs on top, content below. The base theme
   woocommerce.css forces a `display:grid` 220px sidebar with !important + high
   specificity (body.woocommerce-account .wc-page--account > .woocommerce), so the
   override mirrors that specificity (+ the pg-myaccount class) to win. */
body.pg-myaccount.woocommerce-account .wc-page--account > .woocommerce,
body.pg-myaccount.woocommerce-account .woocommerce {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-10) 0 var(--space-24);
}
.pg-myaccount .woocommerce-MyAccount-navigation,
.pg-myaccount .woocommerce-MyAccount-content { float: none !important; width: 100% !important; margin: 0; }

/* Tab strip */
.pg-myaccount .tabs { border-bottom: 1px solid var(--hairline); margin: 0 0 var(--space-10) 0; }
.pg-myaccount .tabs-list { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.pg-myaccount .tabs-list li { margin: 0; }
.pg-myaccount .tabs-list a { display: inline-block; padding: 14px 18px 16px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transition-fast), border-color var(--transition-fast); }
.pg-myaccount .tabs-list a:hover { color: var(--ink-heading); }
.pg-myaccount .tabs-list a.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--weight-semibold); }
.pg-myaccount .tabs-list a.tab-logout { margin-left: auto; color: var(--ink-light); }
.pg-myaccount .tabs-list a.tab-logout:hover { color: var(--ink-heading); }
.pg-myaccount .tabs-mobile { display: none; position: relative; }
.pg-myaccount .tabs-mobile select { appearance: none; -webkit-appearance: none; width: 100%; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--ink-heading); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 13px 44px 13px 16px; cursor: pointer; }
.pg-myaccount .tabs-mobile select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,122,71,0.22); }
.pg-myaccount .tabs-mobile::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* Account hero (dashboard.php override) */
.pg-myaccount .acct-hero { margin: 0 0 var(--space-12) 0; }
.pg-myaccount .acct-hero h1 { font-size: var(--h1); margin: 0 0 var(--space-2) 0; line-height: var(--leading-tight); }
.pg-myaccount .acct-hero p.lede { margin: 0 0 var(--space-5) 0; color: var(--ink-muted); font-size: var(--text-md); max-width: 56ch; }
.pg-myaccount .acct-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--text-sm); color: var(--ink-light); margin: 0 0 var(--space-8) 0; }
.pg-myaccount .acct-stats span { display: inline-flex; align-items: center; }
.pg-myaccount .acct-stats span + span::before { content: "\00b7"; margin-right: 16px; color: var(--hairline); }
.pg-myaccount .acct-cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }

/* Buttons (account hero + WC actions) */
.pg-myaccount .btn-orange,
.pg-myaccount .woocommerce-Button,
.pg-myaccount .woocommerce-button,
.pg-myaccount a.button,
.pg-myaccount button.button,
.pg-myaccount input.button { display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--on-dark); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); padding: 14px 26px; border-radius: var(--radius-md); border: 0; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background var(--transition-fast); }
.pg-myaccount .btn-orange:hover,
.pg-myaccount .woocommerce-Button:hover,
.pg-myaccount a.button:hover,
.pg-myaccount button.button:hover,
.pg-myaccount input.button:hover { background: var(--brand-hover); color: var(--on-dark); }
.pg-myaccount .btn-orange:focus-visible,
.pg-myaccount .woocommerce-Button:focus-visible,
.pg-myaccount .button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Quiet secondary "View" button on orders */
.pg-myaccount .woocommerce-orders-table .button.view { background: transparent; color: var(--ink-heading); padding: 6px 0; border-radius: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; }
.pg-myaccount .woocommerce-orders-table .button.view:hover { background: transparent; color: var(--ink-heading); text-decoration-color: var(--ink-muted); }

/* Content headings */
.pg-myaccount .woocommerce-MyAccount-content h2,
.pg-myaccount .woocommerce-MyAccount-content h3 { font-size: var(--text-2xl); line-height: var(--leading-tight); margin: 0 0 var(--space-4) 0; color: var(--ink-heading); }
.pg-myaccount .woocommerce-MyAccount-content p { color: var(--ink-body); line-height: var(--leading-normal); }

/* Orders / generic WC tables */
.pg-myaccount .woocommerce-orders-table,
.pg-myaccount .shop_table,
.pg-myaccount table.woocommerce-table { width: 100%; border-collapse: collapse; border: 0; font-size: var(--text-base); margin: 0 0 var(--space-6); }
.pg-myaccount .woocommerce-orders-table th,
.pg-myaccount .shop_table th { text-align: left; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--ink-muted); padding: 0 16px 12px 0; border-bottom: 1px solid var(--hairline); background: transparent; }
.pg-myaccount .woocommerce-orders-table td,
.pg-myaccount .shop_table td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--hairline); border-top: 0; color: var(--ink-body); vertical-align: middle; background: transparent; }
.pg-myaccount .woocommerce-orders-table tr:last-child td { border-bottom: 0; }
.pg-myaccount .woocommerce-orders-table__cell-order-number { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--ink-heading); }
.pg-myaccount .woocommerce-orders-table__cell-order-actions { text-align: right; }
.pg-myaccount .woocommerce-orders-table__cell-order-status { color: var(--accent-hover); font-weight: var(--weight-semibold); font-size: var(--text-sm); }

/* Forms (edit-account, addresses) */
.pg-myaccount .woocommerce-MyAccount-content form { max-width: 640px; }
.pg-myaccount .woocommerce form .form-row { padding: 0; margin: 0 0 var(--space-5); display: block; }
.pg-myaccount .woocommerce form .form-row label,
.pg-myaccount .woocommerce-EditAccountForm label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-heading); margin-bottom: 8px; }
.pg-myaccount .woocommerce form .form-row input.input-text,
.pg-myaccount .woocommerce form .form-row input[type="text"],
.pg-myaccount .woocommerce form .form-row input[type="email"],
.pg-myaccount .woocommerce form .form-row input[type="password"],
.pg-myaccount .woocommerce form .form-row input[type="tel"],
.pg-myaccount .woocommerce form .form-row select,
.pg-myaccount .woocommerce .select2-selection { width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-body); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px 14px; line-height: 1.4; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.pg-myaccount .woocommerce form .form-row input:focus-visible,
.pg-myaccount .woocommerce form .form-row select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,122,71,0.22); }
.pg-myaccount .woocommerce form .form-row span.description,
.pg-myaccount .woocommerce-password-hint { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--ink-light); line-height: var(--leading-normal); }
.pg-myaccount fieldset { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-8) 0 var(--space-6); }
.pg-myaccount fieldset legend { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-heading); padding: 0 var(--space-2); }

/* Addresses */
.pg-myaccount .woocommerce-Addresses { margin-top: var(--space-4); }
.pg-myaccount .woocommerce-Address address { font-style: normal; font-size: var(--text-base); line-height: var(--leading-loose); color: var(--ink-body); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-5); }
.pg-myaccount .woocommerce-Address-title h3 { font-size: var(--text-lg); }

/* Notices */
.pg-myaccount .woocommerce-message,
.pg-myaccount .woocommerce-info,
.pg-myaccount .woocommerce-error { border: 1px solid var(--hairline); border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink-body); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); list-style: none; font-size: var(--text-base); }
.pg-myaccount .woocommerce-error { border-left-color: var(--error); background: color-mix(in oklab, var(--error) 8%, var(--paper)); }

@media (max-width: 720px) {
  .pg-myaccount .tabs-list { display: none; }
  .pg-myaccount .tabs-mobile { display: block; }
  .pg-myaccount .tabs { border-bottom: 0; margin-bottom: var(--space-8); }
  .pg-myaccount .acct-form, .pg-myaccount .woocommerce-MyAccount-content form { max-width: 100%; }
}

/* Set a password (dashboard.php → pg_render_set_password_form).
   The only working set-password surface on the site; see inc/account-password.php. */
.pg-myaccount .acct-setpw { border-top: 1px solid var(--hairline); margin: var(--space-12) 0 0; padding: var(--space-10) 0 0; }
.pg-myaccount .acct-setpw h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); line-height: var(--leading-tight); }
.pg-myaccount .acct-setpw p.lede { margin: 0 0 var(--space-6); color: var(--ink-muted); font-size: var(--text-md); max-width: 56ch; }
.pg-myaccount .woocommerce-MyAccount-content form.acct-setpw-form { max-width: 420px; }
.pg-myaccount .acct-setpw-form .setpw-hint { font-size: var(--text-sm); color: var(--ink-light); margin: 0 0 var(--space-5); }
.pg-myaccount .woocommerce-MyAccount-content p.acct-setpw-pointer { font-size: var(--text-base); color: var(--ink-muted); margin: 0 0 var(--space-5); }

@media (max-width: 720px) {
  .pg-myaccount .woocommerce-MyAccount-content form.acct-setpw-form { max-width: 100%; }
}