/**
 * The Meat Master — My Account styling.
 * ---------------------------------------------------------------------------
 * Lives in meatmaster-core because ALL WooCommerce customisation — behaviour
 * AND styling — is self-contained in the plugin (the theme stays generic).
 *
 * OWNER: Alissa. Per Alissa's instruction (30 Aug 2026) Claude may ADD CSS here
 * using ONLY the brand variables; Alissa owns this file and adjusts freely.
 * All My Account visual styling lives here. Enqueued by Modules\Storefront\Module on every account page
 * (is_account_page) at priority 20, so it loads AFTER address-book.css (the
 * plugin's minimal structural base) and wins on any overlap.
 *
 * Selector cheat-sheet per area below — fill in as you go.
 */

/* ===== Account nav + layout ============================================= */
/* .woocommerce-MyAccount-navigation
   .woocommerce-MyAccount-navigation ul li
   .woocommerce-MyAccount-navigation a
   .woocommerce-MyAccount-content                                           */


/* ===== Dashboard (B3: Hello / name / Logout) =========================== */
/* .woocommerce-MyAccount-content                                           */


/* ===== Orders (B1 thumbnails, B2 mobile tabs) ========================== */
/* .woocommerce-orders-table
   .woocommerce-orders-table__row
   .woocommerce-orders-table__cell
   .woocommerce-button.button                                               */


/* ===== Delivery Addresses (address book) =============================== */
/* .mm-addressbook            (list wrapper)
   .mm-addressbook__grid      (cards grid)
   .mm-address-card           /  .mm-address-card.is-default
   .mm-address-card__badge    (Default badge)
   .mm-address-card__buttons .button
   .mm-address-form           (add/edit form)
   .mm-address-search #mm-address-autocomplete  (Google picker mount)       */


/* ===== Account details ================================================= */
/* .woocommerce-EditAccountForm                                             */


/* ===== Buttons (A6: buttons instead of text links) ===================== */


/* ===== Mobile ========================================================== */
/* @media (max-width: 768px) { … } */

.woocommerce.woocommerce-account table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background-color: rgba(0,0,0,.0);
}


/* ===== A3/A8 — Account details email (added by Claude; adjust freely) === */
.mm-email-note {
    display: block;
    margin: .15rem 0 .4rem;
    font-size: .85em;
    color: var(--mm-muted);
}
.mm-email-row--needs-real input#account_email {
    border-color: var(--accent-red);
    background: var(--mm-light-cream);
}
.mm-email-row--needs-real .mm-email-note {
    color: var(--accent-red);
}

/* ===== A5 — "Delivery address saved" notice: brand green, no blue ======= */
.woocommerce-account .woocommerce-message {
    border-top-color: var(--accent);
    background-color: var(--mm-accent-tint);
    color: var(--contrast);
}
.woocommerce-account .woocommerce-message::before {
    color: var(--accent);
}

/* ===== B2 + A6 — My Account navigation (desktop buttons; mobile dropdown) ===
   Pure-CSS: the hidden checkbox toggles the list on mobile; no JS.
   Added by Claude (brand variables only); adjust freely. */
.mm-acct-nav-toggle {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Desktop / base: vertical list of button-styled links (A6); toggle hidden. */
.mm-acct-nav-current { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-width: 0;}
.woocommerce-account .site-main .woocommerce-MyAccount-navigation li { margin: 0 0 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 14px;
    border: 1px solid var(--mm-border);
    border-radius: 10px;
    background: var(--base);
    color: var(--contrast);
    font-weight: 600;
    text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--base);
}

.woocommerce-account h2, .woocommerce-account h3 {
    font-size: 25px;
    font-weight: 500;
}
.woocommerce-MyAccount-navigation ul {
    margin: 0;
    border-top: 0px solid rgba(0,0,0,.1);
} 
/* Mobile: collapse the list into a single "You are viewing" dropdown. */
@media (max-width: 768px) {

    .woocommerce-account .site-main .woocommerce-MyAccount-content {
        padding: 8px;
        margin-top: 8px;
    }

    .mm-acct-nav { position: relative; }

    .mm-acct-nav-current {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border: 1.5px solid var(--accent);
        border-radius: 12px;
        background: var(--mm-accent-tint);
        cursor: pointer;
    }
    .mm-acct-nav-current__text { flex: 1; }
    .mm-acct-nav-current__eyebrow {
        display: block;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--mm-muted);
    }
    .mm-acct-nav-current__label {
        display: block;
        font-weight: 700;
        font-size: 15px;
        color: var(--contrast);
    }
    .mm-acct-nav-current__chev {
        margin-left: auto;
        color: var(--accent);
        transition: transform .15s ease;
    }
    .mm-acct-nav-toggle:checked ~ .mm-acct-nav-current .mm-acct-nav-current__chev {
        transform: rotate(180deg);
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: none;
        margin-top: 8px;
        border: 1px solid var(--mm-border);
        border-radius: 12px;
        overflow: hidden;
    }
    .mm-acct-nav-toggle:checked ~ ul { display: block; }

    .woocommerce-account .site-main .woocommerce-MyAccount-navigation li { margin: 0; }
    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        border: 0;
        border-bottom: 1px solid var(--mm-border);
        border-radius: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
        background: var(--mm-accent-tint);
        color: var(--accent);
    }
}

/* ===== B1 — order line-item thumbnail (view-order + order-received) =====
   Added by Claude (brand variables only); adjust freely. */
.mm-order-item { display: flex; gap: 12px; align-items: flex-start; }
.mm-order-item__media { flex: 0 0 auto; }
.mm-order-item__thumb {
    width: 56px; height: 56px;
    border-radius: 8px;
    border: 1px solid var(--mm-border);
    object-fit: cover;
    display: block;
}
.mm-order-item__body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 768px) {
    .mm-order-item__thumb { width: 46px; height: 46px; }
}

/* ===== B4 — "Order again" button on the order-details page =============
   Added by Claude (brand variables only); adjust freely. */
.mm-order-again-wrap { margin-top: 14px; }
.mm-order-again.button {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--base);
}
.mm-order-again.button:hover {
    background: var(--contrast-2);
    border-color: var(--contrast-2);
    color: var(--base);
}

/* ══════════════════════════════════════════════════════════════════════
   Round 3 — My Account uniformity.
   Same palette + treatment as checkout / cart / order-received:
   --base (white) cards on --mm-border with soft shadow, --accent for
   CTAs, --contrast-2 for prominent totals, muted labels.
   No !important — specificity via nested selectors instead.
   ══════════════════════════════════════════════════════════════════════ */

body.woocommerce-account {
    color: var(--contrast);
}

/* Content area gets a card container by default so every endpoint reads
   consistent — Dashboard, Orders, Delivery Addresses, Account details, etc. */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--base);
    border: 1px solid var(--mm-border);
    border-radius: 10px;
    padding: 24px 22px;
    box-shadow: 0 1px 3px rgba(36, 43, 56, .06);
}
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3 {
    margin-top: 0;
    color: var(--contrast);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.005em;
}

/* ── R3 — Mobile: Dashboard endpoint keeps all nav items as buttons ────
   Every other endpoint keeps the dropdown from B2. The dashboard is where
   customers land — client wants the full menu visible immediately. */
@media (max-width: 768px) {
    /* Hide the "You are viewing" chip when we're on the dashboard */
    .mm-acct-nav.mm-acct-nav--dashboard .mm-acct-nav-current {
        display: none;
    }
    /* Un-collapse the list on the dashboard and revert to the desktop
       button-styled treatment. */
    body.woocommerce-account .site-main .mm-acct-nav.mm-acct-nav--dashboard ul {
        display: block;
        margin-top: 0;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    body.woocommerce-account .site-main .mm-acct-nav.mm-acct-nav--dashboard li {
        margin: 0 0 8px;
    }
    body.woocommerce-account .site-main .mm-acct-nav.mm-acct-nav--dashboard li a {
        border: 1px solid var(--mm-border);
        border-radius: 10px;
        padding: 12px 14px;
    }
    body.woocommerce-account .site-main .mm-acct-nav.mm-acct-nav--dashboard li.is-active a {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--base);
    }
}

/* ── R3 — Orders LIST: each row as a distinguishable card ────────────── */
.woocommerce-account .woocommerce-orders-table {
    border-collapse: separate;
    border-spacing: 0 14px;
    border: 0;
    background: transparent;
    margin: 0;
}
.woocommerce-account .woocommerce .woocommerce-orders-table thead th {
    background: transparent;
    border: 0;
    padding: 0 16px 6px;
    color: var(--mm-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.woocommerce-account .woocommerce-orders-table tbody tr {
    background: var(--base);
}
/* Cell rule targets BOTH td AND th — WC uses <th scope="row"> for the order
   number column, which without this would keep its default rgba(0,0,0,.03)
   grey background and break the "one card per row" look. */
.woocommerce-account .woocommerce-orders-table tbody tr td,
.woocommerce-account .woocommerce-orders-table tbody tr th {
    background: var(--base);
    border-top: 1px solid var(--mm-border);
    border-bottom: 1px solid var(--mm-border);
    padding: 18px 16px;
    color: var(--contrast);
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(36, 43, 56, .05);
}
.woocommerce-account .woocommerce-orders-table tbody tr td:first-child,
.woocommerce-account .woocommerce-orders-table tbody tr th:first-child {
    border-left: 1px solid var(--mm-border);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.woocommerce-account .woocommerce-orders-table tbody tr td:last-child,
.woocommerce-account .woocommerce-orders-table tbody tr th:last-child {
    border-right: 1px solid var(--mm-border);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.woocommerce-account .woocommerce-orders-table tbody tr:hover td,
.woocommerce-account .woocommerce-orders-table tbody tr:hover th {
    border-color: var(--accent);
}
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    color: var(--contrast);
    font-weight: 600;
    text-decoration: none;
}
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
    color: var(--accent);
}
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
    color: var(--mm-muted);
    font-weight: 500;
}

/* Action buttons in the Actions column */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-account .woocommerce-orders-table__cell-order-actions button.button {
    background: var(--accent);
    border: 0;
    color: var(--base);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    margin: 2px 4px 2px 0;
    box-shadow: 0 2px 4px rgba(0, 147, 99, .2);
    transition: background-color .12s ease;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover {
    background: var(--contrast-2);
    color: var(--base);
}

/* Mobile stacked rows still look like cards */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-orders-table tbody tr {
        display: block;
        border: 1px solid var(--mm-border);
        border-radius: 10px;
        padding: 8px 0;
        margin-bottom: 14px;
        box-shadow: 0 1px 3px rgba(36, 43, 56, .05);
    }
    .woocommerce-account .woocommerce-orders-table tbody tr td,
    .woocommerce-account .woocommerce-orders-table tbody tr th {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 10px 16px;
    }
    .woocommerce-account .woocommerce-orders-table tbody tr td:first-child,
    .woocommerce-account .woocommerce-orders-table tbody tr td:last-child,
    .woocommerce-account .woocommerce-orders-table tbody tr th:first-child,
    .woocommerce-account .woocommerce-orders-table tbody tr th:last-child {
        border-radius: 0;
    }
}

/* ── R3 — View-order details: subtle totals + Total accent ───────────── */
.woocommerce-account .woocommerce-order-details {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}
.woocommerce-account .woocommerce-order-details table.shop_table {
    border: 1px solid var(--mm-border);
    border-radius: 10px;
    border-collapse: separate;
    background: var(--base);
    box-shadow: 0 1px 3px rgba(36, 43, 56, .05);
    overflow: hidden;
}
.woocommerce-account .woocommerce-order-details table.shop_table thead th {
    background: var(--base-2);
    color: var(--mm-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 0;
    padding: 12px 16px;
}
.woocommerce-account .woocommerce-order-details table.shop_table tbody td,
.woocommerce-account .woocommerce-order-details table.shop_table tfoot th,
.woocommerce-account .woocommerce-order-details table.shop_table tfoot td {
    border-top: 1px solid var(--mm-border);
    padding: 14px 16px;
    background: var(--base);
    color: var(--contrast);
}
.woocommerce-account .woocommerce-order-details table.shop_table tfoot th {
    font-weight: 500;
    color: var(--mm-muted);
}
.woocommerce-account .woocommerce-order-details table.shop_table tfoot .order-total th,
.woocommerce-account .woocommerce-order-details table.shop_table tfoot .order-total td {
    font-size: 18px;
    font-weight: 700;
}
.woocommerce-account .woocommerce-order-details table.shop_table tfoot .order-total td {
    color: var(--contrast-2);
    font-size: 20px;
}

/* Reorder button — brand green pill (was already styled above; refine for
   the account context so it matches the checkout Continue treatment). */
.woocommerce-account .mm-order-again.button {
    background: var(--accent);
    border: 0;
    color: var(--base);
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 147, 99, .25);
    transition: background-color .12s ease;
}
.woocommerce-account .mm-order-again.button:hover {
    background: var(--contrast-2);
    color: var(--base);
}

/* ---------------------------------------------------------------------------
   R3 — Dashboard greeting block
   (templates/woocommerce/myaccount/dashboard.php)

   Layout:
     Hello                     ← small muted label
     Alissa Eggleston          ← big, prominent
     Not Alissa? Log out       ← smaller muted line (WC's standard blurb)

   The no-name fallback drops the "Not X? Log out" line and uses a medium
   welcome paragraph — the fallback text stays legible without being as loud
   as a real name would be.
--------------------------------------------------------------------------- */
.woocommerce-account .mm-dashboard {
    padding: 4px 0 0;
}
.woocommerce-account .mm-dashboard__hello {
    font-size: 14px;
    font-weight: 500;
    color: var(--mm-muted);
    margin: 0 0 6px;
    letter-spacing: .02em;
}
.woocommerce-account .mm-dashboard__name {
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--contrast-2);
    margin: 0 0 10px;
    letter-spacing: -.01em;
}
.woocommerce-account .mm-dashboard__welcome {
    /* Fallback for accounts with no name — bigger than body copy but
       nowhere near the treatment a real name would get, so a long welcome
       sentence doesn't shout at the customer. */
    font-size: 18px;
    line-height: 1.4;
    color: var(--contrast-2);
    margin: 0 0 12px;
    max-width: 46ch;
}
.woocommerce-account .mm-dashboard__logout {
    font-size: 14px;
    color: var(--mm-muted);
    margin: 0;
}
.woocommerce-account .mm-dashboard__logout a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .12s ease;
}
.woocommerce-account .mm-dashboard__logout a:hover,
.woocommerce-account .mm-dashboard__logout a:focus {
    border-bottom-color: var(--accent);
}

/* On wider screens the name can breathe a little more; on the tightest
   mobile widths it comes back down so it doesn't wrap awkwardly for
   long two-word names. */
@media (min-width: 900px) {
    .woocommerce-account .mm-dashboard__name {
        font-size: 40px;
    }
}
@media (max-width: 480px) {
    .woocommerce-account .mm-dashboard__name {
        font-size: 28px;
    }
    .woocommerce-account .mm-dashboard__welcome {
        font-size: 17px;
    }
}