/* =========================================================================
   JYNN — My Account + Order Received (thank you)
   Loaded on is_account_page() || is_order_received_page(), after
   woocommerce-pages-v3.css (global form/table/button styling) and
   content-page.css (the .content-hero + .jynn-woocommerce-page shell).

   Palette: --bg-void #030407 · --accent-glow #D4AF37 · --text-bright #F5E6DA
            --text-dim #A88160 · --border-light rgba(212,175,55,.15)
   Type:    --font-display Fraunces · --font-body Satoshi
   ========================================================================= */

/* Comfortable measure for the account / thank-you body. */
.woocommerce-account .jynn-woocommerce-page__body > .container,
.woocommerce-order-received .jynn-woocommerce-page__body > .container {
    max-width: 1100px;
}

/* On the thank-you page there's no .content-hero band, so add breathing room
   at the top where the fixed navbar would otherwise crowd the hero. */
.woocommerce-order-received .jynn-woocommerce-page__body {
    padding-top: 12rem;
}

/* =========================================================================
   THANK YOU / ORDER RECEIVED
   ========================================================================= */
.jynn-order-received {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    max-width: 840px;
    margin: 0 auto;
}

.jynn-thankyou__hero {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.jynn-thankyou__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--accent-glow);
    margin-bottom: 1.5rem;
    padding-left: 0.34em;
}

.jynn-thankyou__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    line-height: 1.05;
    color: var(--text-bright);
    margin: 0 0 1.25rem;
}

.jynn-thankyou__lead {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-dim);
    margin: 0 auto;
    max-width: 34rem;
}

.jynn-thankyou__lead strong {
    color: var(--text-bright);
    font-weight: 500;
}

.jynn-thankyou__actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Order overview: four quiet stat cells, centred under the hero. The 1px grid
   gap reveals the gold wrapper as hairline dividers; cells use an opaque dark
   fill (not a translucent tint, which turned muddy/olive over the gold layer).
   The clearfix ::before/::after are killed so they don't become stray grid
   cells (which was pushing an empty cell in and wrapping PAYMENT to row 2). */
.jynn-order-overview {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-light);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
}

.jynn-order-overview::before,
.jynn-order-overview::after {
    content: none !important;
    display: none !important;
}

.jynn-order-overview__item {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.5rem 1.1rem;
    background: #0a0b0f;
    text-align: center;
    word-break: break-word;
}

.jynn-order-overview__label {
    font-family: var(--font-body);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.jynn-order-overview__value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
}

.jynn-order-overview__item.total .jynn-order-overview__value {
    color: var(--accent-glow);
}

@media (max-width: 640px) {

    .jynn-order-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    .woocommerce-order-received .jynn-woocommerce-page__body {
        padding-top: 9rem;
    }
}

/* Closing actions row (Continue shopping / View orders). */
.jynn-thankyou__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    margin-top: 0.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-light);
}

/* =========================================================================
   ORDER DETAILS TABLE + CUSTOMER ADDRESSES
   (shown on the thank-you page and on My Account > view order)
   ========================================================================= */
.woocommerce-order-details,
.woocommerce-customer-details {
    margin-top: 0;
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
    font-family: var(--font-display) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 1.5rem !important;
    color: var(--text-bright) !important;
    margin: 0 0 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.woocommerce table.woocommerce-table--order-details {
    width: 100% !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.012) !important;
    margin-bottom: 3rem !important;
}

.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.woocommerce-table--order-details td {
    padding: 1rem 1.4rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-family: var(--font-body) !important;
    color: var(--text-bright) !important;
    background: transparent !important;
    font-variant-numeric: tabular-nums !important;
    overflow-wrap: anywhere !important;
}

.woocommerce table.woocommerce-table--order-details thead th {
    font-size: 0.68rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--text-dim) !important;
    font-weight: 600 !important;
}

.woocommerce table.woocommerce-table--order-details td.product-total,
.woocommerce table.woocommerce-table--order-details th.product-total,
.woocommerce table.woocommerce-table--order-details tfoot td {
    text-align: right !important;
}

.woocommerce table.woocommerce-table--order-details td.product-name a {
    color: var(--text-bright) !important;
    text-decoration: none !important;
}

.woocommerce table.woocommerce-table--order-details td.product-name a:hover {
    color: var(--accent-glow) !important;
}

.woocommerce table.woocommerce-table--order-details tfoot th {
    text-align: right !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-dim) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 1rem 1.4rem !important;
}

.woocommerce table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: 0 !important;
}

/* Grand total row stands out. */
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child td {
    font-family: var(--font-display) !important;
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.4rem) !important;
    color: var(--accent-glow) !important;
}

/* Customer address cards (.jynn-order-addresses from the order-details-customer
   override): billing always, shipping added only for gift orders. */
.jynn-order-addresses {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0;
}

.jynn-order-addresses--two {
    grid-template-columns: repeat(2, 1fr);
}

.jynn-order-address {
    padding: 1.75rem !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.012) !important;
}

.woocommerce-customer-details address {
    font-family: var(--font-body) !important;
    font-style: normal !important;
    line-height: 1.85 !important;
    color: var(--text-dim) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-customer-details address a {
    color: var(--text-bright) !important;
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
    margin: 0.7rem 0 0 !important;
    color: var(--text-dim) !important;
}

@media (max-width: 640px) {

    .jynn-order-addresses--two {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   MY ACCOUNT
   ========================================================================= */

/* Two-column dashboard: nav rail + content. Gridded on the dedicated
   .jynn-account wrapper (from the my-account.php override) rather than on
   .woocommerce itself — WooCommerce gives .woocommerce (and .col2-set) a
   clearfix ::before/::after, and those pseudo-elements become stray grid
   cells when the grid is placed on them, which shoved the nav and content
   into the wrong tracks. Neutralising those clearfix pseudos on every grid
   container below keeps auto-placement clean. */
.jynn-account {
    display: grid !important;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr) !important;
    gap: 3.5rem !important;
    align-items: start !important;
}

.jynn-account::before,
.jynn-account::after,
.woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-customer-details .woocommerce-columns--addresses::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after {
    content: none !important;
    display: none !important;
}

.woocommerce-MyAccount-navigation {
    width: auto !important;
    float: none !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
    margin: 0 !important;
    border-bottom: 1px solid var(--border-light);
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: 0;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.95rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
    color: var(--text-bright);
    background: rgba(212, 175, 55, 0.04);
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: var(--bg-void);
    background: var(--accent-glow);
    font-weight: 700;
}

.woocommerce-MyAccount-content {
    width: auto !important;
    float: none !important;
    color: var(--text-dim);
    line-height: 1.7;
}

.woocommerce-MyAccount-content p {
    line-height: 1.7;
}

.woocommerce-MyAccount-content a:not(.button) {
    color: var(--accent-glow);
}

.woocommerce-MyAccount-content mark {
    background: transparent;
    color: var(--text-bright);
    font-weight: 600;
}

/* Account tables (orders, downloads). */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
    width: 100% !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.012) !important;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account table.shop_table th {
    font-family: var(--font-body) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--text-dim) !important;
    font-weight: 600 !important;
    padding: 1rem 1.2rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    text-align: left !important;
}

.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account table.shop_table td {
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    color: var(--text-bright) !important;
    padding: 1.1rem 1.2rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    background: transparent !important;
    vertical-align: middle !important;
}

.woocommerce-account .woocommerce-orders-table tr:last-child td {
    border-bottom: 0 !important;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    text-align: right !important;
}

/* Small "view / pay / cancel" buttons in order rows. */
.woocommerce-account .woocommerce-orders-table .button,
.woocommerce-account .woocommerce-MyAccount-content .button.woocommerce-button {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    color: var(--text-bright) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 3px !important;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease !important;
}

.woocommerce-account .woocommerce-orders-table .button:hover {
    border-color: var(--accent-glow) !important;
    color: var(--accent-glow) !important;
    background: rgba(212, 175, 55, 0.05) !important;
}

/* Addresses grid on the account "Addresses" endpoint. */
.woocommerce-account .woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
}

.woocommerce-account .woocommerce-Address {
    width: auto !important;
    float: none !important;
    padding: 1.75rem !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.012) !important;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    font-family: var(--font-display) !important;
    font-weight: 300 !important;
    font-size: 1.25rem !important;
    color: var(--text-bright) !important;
}

.woocommerce-account .woocommerce-Address-title .edit {
    font-family: var(--font-body) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--accent-glow) !important;
}

.woocommerce-account .woocommerce-Address address {
    font-style: normal !important;
    line-height: 1.8 !important;
    color: var(--text-dim) !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Login / register (logged-out account view): centre + card the forms. */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
    max-width: 960px;
    margin-inline: auto;
}

.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
    border: 1px solid var(--border-light) !important;
    border-radius: 6px !important;
    padding: 2.5rem !important;
    background: rgba(255, 255, 255, 0.012) !important;
    margin: 0 !important;
}

.woocommerce-account .u-columns.col2-set {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    width: 100% !important;
}

.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2 {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

@media (max-width: 860px) {

    .jynn-account {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

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

/* Horizontal-scroll safety for the orders table on very small screens. */
@media (max-width: 560px) {

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .woocommerce-MyAccount-navigation li a,
    .woocommerce-account .woocommerce-orders-table .button {
        transition: none !important;
    }
}