/* My account — page-scoped additions */
@media (min-width: 992px) { .page-account .account-sidebar { position: sticky; top: 96px; } }
.page-account .account-nav .list-group-item.active i, .page-account .account-nav .list-group-item.active span[class*="fa-"] { color: inherit; }
.page-account .order-detail-card .card-header { background: var(--brand-bg-soft); }
.page-account .order-thumb { flex: none; width: 96px; aspect-ratio: 3 / 2; object-fit: contain; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); }
.page-account .track-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; padding-top: .25rem; }
.page-account .track-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; font-size: var(--text-xs); color: var(--brand-text-secondary); }
.page-account .track-steps li::before { content: ""; position: absolute; top: .7rem; left: -50%; width: 100%; height: 3px; background: var(--brand-border); z-index: 0; }
.page-account .track-steps li:first-child::before { display: none; }
.page-account .track-steps li.is-done::before, .page-account .track-steps li.is-current::before { background: var(--bs-success); }
.page-account .track-steps i, .page-account .track-steps span[class*="fa-"] { position: relative; z-index: 1; font-size: 1.4rem; background: var(--brand-bg); color: var(--brand-border-strong); }
.page-account .track-steps .is-done i, .page-account .track-steps .is-done span[class*="fa-"] { color: var(--bs-success); }
.page-account .track-steps .is-current i, .page-account .track-steps .is-current span[class*="fa-"] { color: var(--brand-primary); }
.page-account .track-steps strong { display: block; color: var(--brand-text); font-size: var(--text-sm); }
@media (max-width: 575.98px) { .page-account .track-steps { grid-template-columns: 1fr; } .page-account .track-steps li { flex-direction: row; text-align: left; } .page-account .track-steps li::before { display: none; } }
.page-account .saved-card-icon { font-size: 2.5rem; color: var(--brand-text); }
.page-account .add-card-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; border-style: dashed; border-width: 2px; background: var(--brand-bg-soft); color: var(--brand-text); }
.page-account .add-card-tile:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.page-account .password-form { max-width: 520px; height: auto; }

/* ---- Signed-out account page (myprofile default_login) ---- */
/* Same surface as the log-in page: full-width auth card + soft benefits card. */
.page-account .auth-card { max-width: none; }
.page-account .benefits-card { border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--brand-bg-soft); }
.page-account .benefits-card .pdp-perks { gap: 1rem; }
.page-account .benefits-card .pdp-perks li { font-size: var(--text-sm); }
.page-account .benefits-card .pdp-perks i, .page-account .benefits-card .pdp-perks span[class*="fa-"] { width: 1.25rem; text-align: center; font-size: 1.1rem; }
.page-account .auth-tabs { border-bottom: 1px solid var(--brand-border); gap: .25rem; }
.page-account .auth-tabs .nav-link { padding: .6rem 1rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--brand-text-secondary); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.page-account .auth-tabs .nav-link:hover { color: var(--brand-text); }
.page-account .auth-tabs .nav-link.active { background: transparent; color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

/* ---- Account sidebar nav (mod_j2commerce_tools, Vertical Profile) ---- */
/* The sidebar is one <ul class="nav"> so Bootstrap's Tab deactivates built-in and
   plugin-contributed tabs against each other. A plugin emits <li><a class="nav-link">,
   which a .list-group cannot hold, so these rules reproduce the list-group row look. */
.page-account .account-nav .nav-link { width: 100%; display: flex; align-items: center; gap: .75rem; text-align: start; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: .85rem 1.1rem; color: var(--brand-text-secondary); background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 0; }
.page-account .account-nav .nav-item:first-child .nav-link { border-start-start-radius: var(--radius-sm); border-start-end-radius: var(--radius-sm); }
.page-account .account-nav .nav-item:last-child .nav-link { border-end-start-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.page-account .account-nav .nav-item + .nav-item .nav-link { border-top: 0; }
.page-account .account-nav .nav-link i, .page-account .account-nav .nav-link span[class*="fa-"] { width: 1.25rem; margin-inline-end: 0; text-align: center; }
.page-account .account-nav .nav-link:hover { background: var(--brand-bg-soft); color: var(--brand-text); }
/* --brand-primary is the link-safe red and lightens in dark mode; --brand-primary-fill is
   the solid-surface red the primary buttons on this page use. */
.page-account .account-nav .nav-link.active { background: var(--brand-primary-fill); border-color: var(--brand-primary-fill); color: #fff; }
.page-account .account-nav .nav-link.active i, .page-account .account-nav .nav-link.active span[class*="fa-"] { color: inherit; }

/* ---- Orders / downloads list tables ---- */
/* .table-responsive only wants the horizontal axis, but CSS forces the other axis away from
   `visible` as soon as one is `auto`. Sub-pixel row heights then leave the table a fraction
   of a pixel taller than the box, and the list paints a full-height vertical scrollbar it
   can never scroll. Paging here is the AJAX pager under the table, never a scroll. */
.page-account #j2c-orders-table-wrap .table-responsive,
.page-account #j2c-downloads-table-wrap .table-responsive { overflow-y: hidden; }