/* ============================================================
   ACCOUNT.CSS — Masazeri Child Theme
   Scope: My Account page (is_account_page()) — dashboard, orders,
          downloads, addresses, edit account, login/register
   Table/form/button styling itself comes from checkout.css (also
   enqueued here, see functions.php) — this file only covers the
   account-page-specific layout: sidebar nav + content.
   ============================================================ */

/* Sidebar removal — same pattern as shop/product/cart/checkout.
   .masazeri-wishlist-page is added via functions.php (body_class filter)
   for the standalone Wishlist page, which isn't is_account_page(). */
.woocommerce-account aside#sidebar,
.masazeri-wishlist-page aside#sidebar {
    display: none !important;
}

/* ============================================================
   LAYOUT — nav + content side by side
   ============================================================ */
.woocommerce-account .woocommerce {
    max-width: var(--maz-container);
    margin: 0 auto;
    padding: var(--maz-space-xl) var(--maz-space-md);
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--maz-space-lg);
    align-items: start;
}

/* !important needed — WC core (woocommerce-layout.css) floats these at
   width:30%/68% of their own grid cell; same collision pattern as the
   cart_totals/gallery width fixes elsewhere in this theme. */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
}

/* Explicit placement — for reasons not fully pinned down (possibly a
   float-related auto-placement quirk, since core sets float:left on nav
   and float:right on content), auto-placement was putting nav in column 2
   and content in column 1, reversed from DOM order, and in separate rows
   instead of side by side. Pinning both directly is the reliable fix. */
.woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 1;
    /* Grid items default to min-width:auto (their content's min-content
       size) — the orders table needs ~700px for its columns, which was
       forcing this whole grid track to grow instead of letting the table
       scroll inside itself. Same fix as .woocommerce-cart-form on /cart/. */
    min-width: 0;
}

/* ============================================================
   ACCOUNT NAVIGATION
   ============================================================ */
.woocommerce-MyAccount-navigation {
    background: var(--maz-white);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-xl);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: var(--maz-space-sm);
}

.woocommerce-MyAccount-navigation li {
    margin: 0;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px var(--maz-space-md);
    border-radius: var(--maz-radius-md);
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-charcoal);
    text-decoration: none;
    transition: background-color var(--maz-transition), color var(--maz-transition);
}

.woocommerce-MyAccount-navigation li a:hover {
    background-color: var(--maz-beige);
    color: var(--maz-dark);
}

.woocommerce-MyAccount-navigation li.is-active a {
    background-color: var(--maz-orange-light);
    color: var(--maz-orange);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    border-top: 1px solid var(--maz-border);
    margin-top: var(--maz-space-sm);
    padding-top: var(--maz-space-sm);
}

/* ============================================================
   ACCOUNT CONTENT
   ============================================================ */
.woocommerce-MyAccount-content {
    background: var(--maz-white);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-xl);
    padding: var(--maz-space-lg);
}

.woocommerce-MyAccount-content p {
    color: var(--maz-charcoal);
    line-height: 1.6;
}

.woocommerce-MyAccount-content a {
    color: var(--maz-orange);
}

.woocommerce-MyAccount-content mark {
    background: none;
    color: var(--maz-dark);
    font-weight: 700;
}

/* Addresses ("Adrese" tab) — two cards side by side */
.woocommerce-MyAccount-content .u-columns {
    display: flex;
    gap: var(--maz-space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.woocommerce-MyAccount-content .u-column1,
.woocommerce-MyAccount-content .u-column2 {
    flex: 1 1 260px;
}

.woocommerce-MyAccount-content address {
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-lg);
    padding: var(--maz-space-md);
    font-style: normal;
    line-height: 1.6;
    color: var(--maz-charcoal);
}

/* Orders table empty state / order details */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
    margin: 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
    }

    /* The base rules pin nav to column 1 and content to column 2 — with
       only one column left on mobile, content's explicit column:2 has no
       track to land in (browsers create a phantom implicit column for it,
       which renders empty/off to the side, making the nav look like it
       vanished since content silently overlaps/hides it). Re-pin both to
       column 1, stacked in reading order. */
    .woocommerce-MyAccount-navigation {
        grid-column: 1;
        grid-row: 1;
    }

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

    .woocommerce-MyAccount-navigation {
        position: static;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: var(--maz-space-sm);
    }

    .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
        width: 100%;
    }

    .woocommerce-MyAccount-content .u-columns {
        flex-direction: column;
    }

    .woocommerce-MyAccount-content .u-column1,
    .woocommerce-MyAccount-content .u-column2 {
        /* .u-columns is flex-direction:column here, so width is the
           cross-axis dimension (flex-basis would affect height instead —
           wrong axis, tried that first). !important needed because these
           elements are ALSO .col-1/.col-2 — WC core's
           `.woocommerce .col2-set .col-1 { width:48% }` (3 classes)
           outranks this rule's 2 classes, same collision pattern as
           elsewhere in this theme. */
        width: 100% !important;
    }

    .woocommerce-MyAccount-content address {
        width: 100%;
    }

    .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
        padding: 15px 0;
    }

    /* Tighter mobile spacing — tested live on device. */
    .woocommerce-account .woocommerce {
        padding: 0;
    }

    .woocommerce-MyAccount-content {
        padding: 10px;
    }

    .woocommerce-MyAccount-content table.shop_table {
        border: none;
    }
}

/* ============================================================
   WISHLIST PAGE (standalone /wishlist/ page, not a /my-account/ endpoint —
   see is_wishlist() branch above and the masazeri-wishlist-page body class)
   The TI WooCommerce Wishlist plugin ships its own frontend stylesheet
   (public.css) with generic gray/blue colors and no side padding of its
   own. This re-skins it to the theme palette; the plugin's own responsive
   breakpoints/markup (mobile column stacking) are left alone.
   ============================================================ */
.masazeri-wishlist-page .tinv-header,
.masazeri-wishlist-page .tinv-wishlist {
    padding-left: var(--maz-space-md);
    padding-right: var(--maz-space-md);
}

.masazeri-wishlist-page .tinv-header h2 {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-3xl);
    font-weight: 700;
    color: var(--maz-dark);
    margin: var(--maz-space-lg) 0;
}

.masazeri-wishlist-page table.tinvwl-table-manage-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--maz-white);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-lg);
    overflow: hidden;
    font-family: var(--maz-font);
}

.masazeri-wishlist-page table.tinvwl-table-manage-list thead {
    background-color: var(--maz-white);
}

.masazeri-wishlist-page table.tinvwl-table-manage-list th {
    font-size: var(--maz-font-size-xs);
    font-weight: 700;
    color: var(--maz-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    text-align: left;
}

.masazeri-wishlist-page table.tinvwl-table-manage-list td {
    padding: var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    vertical-align: middle;
    font-size: var(--maz-font-size-sm);
    color: var(--maz-charcoal);
}

.masazeri-wishlist-page table.tinvwl-table-manage-list tbody tr:last-child td {
    border-bottom: none;
}

.masazeri-wishlist-page .product-thumbnail img {
    border-radius: var(--maz-radius-md);
    background: var(--maz-beige);
}

.masazeri-wishlist-page .product-name a {
    color: var(--maz-dark);
    font-weight: 600;
    text-decoration: none;
}

.masazeri-wishlist-page .product-name a:hover {
    color: var(--maz-orange);
}

.masazeri-wishlist-page .product-price .amount {
    color: var(--maz-dark);
    font-weight: 600;
}

/* Remove ("x") button — quiet circular icon button instead of the
   plugin's default bordered square. */
.masazeri-wishlist-page .product-remove button {
    background: none;
    border: none;
    color: var(--maz-gray-400);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: var(--maz-transition);
}

.masazeri-wishlist-page .product-remove button:hover {
    background: var(--maz-orange-light);
    color: var(--maz-orange);
}

/* Stock status — reuse the sage green already used for in-stock/"new"
   indicators elsewhere (header trust bar, NOVO badge). */
.masazeri-wishlist-page .stock.in-stock {
    color: var(--maz-sage);
    font-weight: 600;
}

.masazeri-wishlist-page .stock.out-of-stock {
    color: var(--maz-orange-hover);
    font-weight: 600;
}

/* Bulk-action row (tfoot) + share row */
.masazeri-wishlist-page .tinvwl-table-manage-list tfoot td {
    background: var(--maz-surface);
    padding: var(--maz-space-md);
    border-bottom: none;
}

.masazeri-wishlist-page #tinvwl_product_actions {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    color: var(--maz-charcoal);
    background-color: var(--maz-white);
    border: 1.5px solid var(--maz-border);
    border-radius: var(--maz-radius-md);
    padding: 10px 14px;
}

.masazeri-wishlist-page .tinvwl-to-left,
.masazeri-wishlist-page .tinvwl-to-right {
    display: flex;
    gap: var(--maz-space-sm);
    align-items: center;
    flex-wrap: wrap;
    margin: 6px 0;
}

.masazeri-wishlist-page .social-buttons {
    padding: var(--maz-space-md);
    display: flex;
    align-items: center;
    gap: var(--maz-space-md);
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-gray-500);
}

.masazeri-wishlist-page .social-buttons ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.masazeri-wishlist-page .social-buttons .social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--maz-dark);
    color: var(--maz-white);
    transition: var(--maz-transition);
}

.masazeri-wishlist-page .social-buttons .social:hover {
    background: var(--maz-orange);
}