/*
 * AJ WooCommerce My Account Styles
 * File: woocommerce-account.css
 * Theme: /wp-content/themes/aj-child-theme/
 *
 * ROOT CAUSE OF DARK BOX BUG: WooCommerce renders the account sidebar
 * as a <nav> element (.woocommerce-MyAccount-navigation). The global
 * `nav {}` rule from other templates applies dark bg, sticky position,
 * and 56px height to it. This file resets those styles.
 *
 * Design system vars: --cream, --cream-dark, --dark, --dark-mid,
 * --orange, --orange-dark, --text, --text-mid, --text-light, --rule
 * Fonts: Chaparral Pro · Proxima Nova Condensed · Proxima Nova (via Typekit)
 */


/* ═══════════════════════════════════════════════════════════════════
   1. PAGE WRAPPER — kill GP body/container constraints
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account body,
.woocommerce-account .site-content,
.woocommerce-account .content-area,
.woocommerce-account .site-main,
.woocommerce-account #primary,
.woocommerce-account #main {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   2. PAGE TITLE ("MY ACCOUNT")
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .entry-header {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 48px 40px 0 !important;
}

.woocommerce-account .entry-title {
    font-family: proxima-nova-condensed, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--text, #2A2925) !important;
    margin: 0 0 0 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 2px solid var(--text, #2A2925) !important;
    line-height: 1.4 !important;
}

/* Kill any drop cap on the page title */
.woocommerce-account .entry-title::first-letter {
    font-size: inherit !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}


/* ═══════════════════════════════════════════════════════════════════
   3. ENTRY CONTENT — margin between title and grid
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .entry-content {
    margin-top: 32px !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════════
   4. GRID LAYOUT — sidebar + content side by side
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .entry-content > .woocommerce {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    gap: 0 64px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 40px 80px !important;
    align-items: start !important;
}


/* ═══════════════════════════════════════════════════════════════════
   5. SIDEBAR NAV — THE CORE FIX
   Reset every global `nav` property that bleeds in.
   WooCommerce outputs <nav class="woocommerce-MyAccount-navigation">
   which matches the global `nav {}` rule.
   Also reset WC layout.css floats and percentage widths.
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account nav.woocommerce-MyAccount-navigation,
nav.woocommerce-MyAccount-navigation {
    /* Reset global nav properties */
    background: transparent !important;
    background-color: transparent !important;
    position: static !important;
    height: auto !important;
    z-index: auto !important;
    top: auto !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;

    /* Reset flex/display from global nav */
    display: block !important;
    justify-content: initial !important;
    align-items: initial !important;

    /* Reset WooCommerce layout.css: float:left; width:30% */
    float: none !important;
    width: 100% !important;

    /* Explicit grid placement — column 1 */
    grid-column: 1 !important;
    grid-row: 1 !important;

    /* Layout */
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Sidebar list */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Sidebar items */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    list-style: none !important;
}

/* Hide Downloads if present (no digital downloads) */
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}

/* Sidebar links */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    font-family: proxima-nova-condensed, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--text, #2A2925) !important;
    text-decoration: none !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--rule, #D4C9B5) !important;
    background: none !important;
    opacity: 1 !important;
    transition: color 0.15s ease !important;
}

/* Sidebar link hover */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--orange, #D4521A) !important;
    background: none !important;
}

/* Active state */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
    background: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--orange, #D4521A) !important;
    background: none !important;
}

/* Log out — muted */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--text-light, #8A8780) !important;
    font-weight: 500 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--orange, #D4521A) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   6. CONTENT AREA — text, links, "Hello" fix
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-MyAccount-content {
    padding-top: 8px !important;
    min-height: 200px;
    /* Reset WooCommerce layout.css: float:right; width:68% */
    float: none !important;
    width: 100% !important;
    /* Explicit grid placement — column 2 */
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* Body text */
.woocommerce-account .woocommerce-MyAccount-content p {
    font-family: proxima-nova, sans-serif !important;
    font-size: 16px !important;
    color: var(--text-mid, #5A5750) !important;
    line-height: 1.7 !important;
    white-space: normal !important;
}

/* Kill the drop cap that causes "H ello" */
.woocommerce-account .woocommerce-MyAccount-content p::first-letter,
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type::first-letter {
    font-size: inherit !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    text-transform: none !important;
    initial-letter: normal !important;
}

.woocommerce-account .woocommerce-MyAccount-content p strong {
    color: var(--text, #2A2925) !important;
    font-weight: 600 !important;
}

/* Content links */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
    color: var(--orange, #D4521A) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--rule, #D4C9B5) !important;
    text-underline-offset: 3px !important;
    transition: text-decoration-color 0.2s !important;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover {
    text-decoration-color: var(--orange, #D4521A) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   7. WC NOTICES — orange instead of blue/green
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-notice,
.woocommerce-account .woocommerce-error {
    border-top-color: var(--orange, #D4521A) !important;
    border-left-color: transparent !important;
    background: var(--cream-dark, #EDE7D9) !important;
    font-family: proxima-nova, sans-serif !important;
    font-size: 14px !important;
    color: var(--text-mid, #5A5750) !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}

/* Hide the WooCommerce notice icon. The glyph comes from the WooCommerce icon
   font, which isn't enqueued here, so it rendered as an empty orange box; the
   symmetric card padding also left it no room, so it overlapped the text. The
   AJ notice card (orange top rule + text + button) doesn't need it. */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-notice::before,
.woocommerce-account .woocommerce-error::before {
    content: none !important;
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   8. WC BUTTONS — AJ orange
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-message a.button,
.woocommerce-account .woocommerce-info a.button {
    font-family: proxima-nova-condensed, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background: var(--orange, #D4521A) !important;
    color: var(--cream, #F5F0E8) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-message a.button:hover,
.woocommerce-account .woocommerce-info a.button:hover {
    background: var(--orange-dark, #B84416) !important;
    color: var(--cream, #F5F0E8) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   9. ORDERS TABLE
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-orders-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: proxima-nova, sans-serif !important;
}

.woocommerce-account .woocommerce-orders-table th {
    font-family: proxima-nova-condensed, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--text-light, #8A8780) !important;
    padding: 12px 16px 12px 0 !important;
    border-bottom: 1px solid var(--rule, #D4C9B5) !important;
    text-align: left !important;
}

.woocommerce-account .woocommerce-orders-table td {
    font-family: proxima-nova, sans-serif !important;
    font-size: 14px !important;
    color: var(--text, #2A2925) !important;
    padding: 14px 16px 14px 0 !important;
    border-bottom: 1px solid var(--rule, #D4C9B5) !important;
    vertical-align: middle !important;
}

.woocommerce-account .woocommerce-orders-table td a.button {
    font-size: 10px !important;
    padding: 8px 16px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   10. FORMS — Account details, Addresses, etc.
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-MyAccount-content label {
    font-family: proxima-nova-condensed, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--text-light, #8A8780) !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    width: 100% !important;
    background: var(--cream-dark, #EDE7D9) !important;
    border: 1px solid var(--rule, #D4C9B5) !important;
    padding: 12px 16px !important;
    font-family: proxima-nova, sans-serif !important;
    font-size: 15px !important;
    color: var(--text, #2A2925) !important;
    outline: none !important;
    border-radius: 0 !important;
    transition: border-color 0.2s !important;
    -webkit-appearance: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
    border-color: var(--orange, #D4521A) !important;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
    border: 1px solid var(--rule, #D4C9B5) !important;
    padding: 24px !important;
    margin: 24px 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
    font-family: proxima-nova-condensed, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--text, #2A2925) !important;
    padding: 0 8px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   11. ADDRESSES
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .col2-set.addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
}

/* Kill WC clearfix pseudo-elements that create extra grid items */
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
    display: none !important;
    content: none !important;
}

/* Reset WC layout.css float/width on address columns */
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2,
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2 {
    float: none !important;
    width: 100% !important;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    font-family: proxima-nova-condensed, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--text, #2A2925) !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--rule, #D4C9B5) !important;
    line-height: 1.4 !important;
}

/* Kill drop cap / first-letter on address headings */
.woocommerce-account .woocommerce-Address-title h2::first-letter,
.woocommerce-account .woocommerce-Address-title h3::first-letter {
    font-size: inherit !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
}

.woocommerce-account .woocommerce-Address address {
    font-family: proxima-nova, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    color: var(--text-mid, #5A5750) !important;
    line-height: 1.7 !important;
}

/* "Add/Edit" link next to address heading */
.woocommerce-account .woocommerce-Address-title {
    display: block !important;
}

.woocommerce-account .woocommerce-Address-title a,
.woocommerce-account .addresses .title .edit {
    display: inline-block !important;
    float: none !important;
    font-family: proxima-nova-condensed, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--orange, #D4521A) !important;
    text-decoration: none !important;
    margin-top: 8px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .woocommerce-account .entry-content > .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 20px 60px !important;
    }

    .woocommerce-account .entry-header {
        padding: 36px 20px 0 !important;
    }

    /* Mobile account nav: full-width tappable rows (settings-list pattern) */
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        border-top: 1px solid var(--rule, #D4C9B5) !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        display: block !important;
        padding: 18px 8px 18px 16px !important;
        font-size: 15px !important;
        letter-spacing: 0.08em !important;
        border-bottom: 1px solid var(--rule, #D4C9B5) !important;
        border-left: 3px solid transparent !important;
        position: relative !important;
    }

    /* Chevron affordance on each row */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a::after {
        content: '' !important;
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid var(--text-light, #8A8780) !important;
        border-bottom: 2px solid var(--text-light, #8A8780) !important;
        transform: translateY(-60%) rotate(-45deg) !important;
    }

    /* Active row: orange text + left accent bar + tinted background */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
        border-left-color: var(--orange, #D4521A) !important;
        background: rgba(212,82,26,0.05) !important;
        padding-left: 16px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr !important;
    }

    /* Mobile supporting-text bumps — the desktop sizes read too small on a phone */
    .woocommerce-account .woocommerce-MyAccount-content p {
        font-size: 17px !important;
    }
    .woocommerce-account .woocommerce-Address-title h2,
    .woocommerce-account .woocommerce-Address-title h3 {
        font-size: 13px !important;
    }
    .woocommerce-account .woocommerce-Address address {
        font-size: 16px !important;
    }
    .woocommerce-account .woocommerce-Address-title a,
    .woocommerce-account .addresses .title .edit {
        font-size: 12px !important;
    }
    .woocommerce-account .woocommerce-Addresses .woocommerce-Address {
        margin-bottom: 28px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce-account .entry-content > .woocommerce {
        padding: 0 20px 48px !important;
    }

    .woocommerce-account .entry-header {
        padding: 28px 20px 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   13. OVERFLOW BACKSTOP + LOGGED-OUT LOGIN / REGISTER   (v3.10.23)
   The logged-out /my-account/ view renders #customer_login as WooCommerce's
   default two-column col2-set (floated ~48% columns + default form widths),
   which pushes past a phone's viewport and slides the page sideways. The
   global .aj-page-wrap clip can't save this — clipping would just cut the
   register column off-screen — so we actually stack the columns on mobile,
   force border-box full-width fields, and clip any residual horizontal bleed
   at the account content column itself as a backstop.
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-account #primary,
.woocommerce-account #main,
.woocommerce-account .site-main,
.woocommerce-account .content-area,
.woocommerce-account .entry-content {
    overflow-x: clip !important;
    max-width: 100% !important;
}

.woocommerce-account input,
.woocommerce-account select,
.woocommerce-account textarea,
.woocommerce-account button,
.woocommerce-account .button {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    .woocommerce-account #customer_login.u-columns,
    .woocommerce-account #customer_login.col2-set {
        display: block !important;
        padding: 0 24px 48px !important;
    }
    .woocommerce-account #customer_login .u-column1,
    .woocommerce-account #customer_login .u-column2,
    .woocommerce-account #customer_login .col-1,
    .woocommerce-account #customer_login .col-2 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 36px 0 !important;
        padding: 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   14. HARD HORIZONTAL CONTAINMENT — STILL-SLIDING BACKSTOP  (v3.10.24)
   v3.10.23 stacked the login columns + clipped the content column, but the
   page still slid on iOS — so clip is not holding it here. The site-wide
   wrapper uses overflow-x:clip (to preserve the sticky site nav), but that
   nav sits OUTSIDE .aj-page-wrap and nothing inside the account wrapper is
   sticky, so on this page we can safely upgrade to overflow-x:hidden, which
   establishes a real horizontal scroll container and stops the body slide
   regardless of which child is overflowing. Plus the usual wide-content
   sources: WooCommerce tables scroll inside their box, long strings wrap.
   ═══════════════════════════════════════════════════════════════════ */

body.woocommerce-account .aj-page-wrap {
    overflow-x: hidden !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content td,
.woocommerce-account .woocommerce-MyAccount-content a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.woocommerce-account .entry-content > .woocommerce > *,
.woocommerce-account #customer_login > * {
    max-width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════════
   15. iOS INPUT-ZOOM GUARD  (v3.10.30)
   THE remaining /my-account/ "slide": iOS Safari auto-zooms when a focused
   field is < 16px, and the zoomed page then pans side-to-side. Login/account
   fields were 14px. Force 16px on mobile so Safari never zooms on focus. This
   sheet loads after woocommerce-cart-checkout.css, so it wins the 14px rule.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .woocommerce-account input[type="text"],
    .woocommerce-account input[type="email"],
    .woocommerce-account input[type="password"],
    .woocommerce-account input[type="tel"],
    .woocommerce-account input[type="number"],
    .woocommerce-account input[type="search"],
    .woocommerce-account select,
    .woocommerce-account textarea,
    .woocommerce-form-login input,
    .woocommerce-form-register input {
        font-size: 16px !important;
    }
}