/* ==========================================================================
   app-shell.css — the "feels like an app" layer for phones and tablets.

   Bottom tab bar, full-height slide-in menu, safe-area handling and the
   mobile reflows for tables. Loaded last in the storefront stack so it can
   place the shell above page content without fighting for specificity.
   ========================================================================== */

/* ==========================================================================
   1. Bottom tab bar  (hidden from 992px up)
   ========================================================================== */
.app_bottom_nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bottomnav);
    display: flex;
    align-items: stretch;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-nav);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app_bottom_nav_item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--bottomnav-h);
    padding: var(--sp-2) var(--sp-1);
    background: none;
    border: 0;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.app_bottom_nav_item:hover { color: var(--ink); }
.app_bottom_nav_item.is-active { color: var(--ink); }

/* Active tab gets a gold cap rule, mirroring the section-heading motif. */
.app_bottom_nav_item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 34px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--gold);
}
.app_bottom_nav_item { position: relative; }

.app_bottom_nav_icon { position: relative; display: block; font-size: 1.125rem; line-height: 1; }
.app_bottom_nav_label { font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; }

.app_bottom_nav_badge {
    position: absolute;
    top: -6px;
    left: 60%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--gold-deep);
    color: var(--white);
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}
.app_bottom_nav_badge[hidden] { display: none; }

/* Page content must clear the bar. */
body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }

/* Floating buttons sit above the bar rather than behind it, and no longer
   outrank the mini-cart drawer. */
.theme_fab_stack {
    z-index: var(--z-fab);
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3));
}

@media (min-width: 992px) {
    .app_bottom_nav { display: none; }
    body { padding-bottom: 0; }
    .theme_fab_stack { bottom: var(--sp-5); }
}

/* ==========================================================================
   2. Slide-in menu
   Mirrors the mini-cart drawer pattern already proven in this codebase
   (class toggle + overlay + body scroll lock), and adds the focus/escape
   handling the old jQuery display-toggle never had.
   ========================================================================== */
.mob_menu_overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(20, 19, 18, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.mob_menu_overlay.is-open { opacity: 1; visibility: visible; }

.mob_menu_dropdown {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: var(--z-menu);
    width: min(86vw, 360px);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--sp-7) + env(safe-area-inset-top, 0px)) var(--sp-5)
             calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
    display: block;
}
.mob_menu_dropdown.is-open { transform: translateX(0); }

.mob_menu_cont { display: flex; flex-direction: column; gap: var(--sp-1); }

.mob_menu_link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-serif);
    font-size: var(--fs-h4);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    color: var(--ink);
}
.mob_menu_link:hover { color: var(--gold-deep); }
/* The social row reuses .mob_menu_link but is not a nav item. */
.mob_menu_link a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); color: var(--ink-soft); }
.mob_menu_link a:hover { color: var(--gold-deep); }

.mob_menu_close {
    position: absolute;
    top: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
    right: var(--sp-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    background: none;
    border: 0;
    font-size: 1.25rem;
    color: var(--ink);
    cursor: pointer;
}

body.mob-menu-lock { overflow: hidden; }

@media (min-width: 992px) {
    .mob_menu_dropdown, .mob_menu_overlay { display: none; }
}

/* ==========================================================================
   3. Compact mobile header
   The header stacked three full-width rows on a phone (search / account+
   wishlist+cart icons / logo+hamburger), eating ~40% of the first screen.
   Below 992px the action icons are redundant — the bottom tab bar carries
   Account, Wishlist and Cart — so they are dropped here and the header
   becomes: [hamburger  wordmark  cart] over a full-width search field.
   ========================================================================== */
@media (max-width: 991.98px) {
    .headerbar { display: flex; flex-direction: column; }
    .headerbar .headerinner { order: 1; }
    .headerbar .hdr_action_bar { order: 2; padding: 0 var(--gutter) var(--sp-3); }

    /* Row 1: hamburger, then the wordmark filling the rest.
       nowrap matters — with the default wrap the wordmark and hamburger
       totalled just over the viewport width and broke onto two lines, which
       is what made the header 184px tall. */
    .headerinner .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-3) var(--gutter);
    }
    .hdr_mob_menu_sec { order: 1; flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
    .hdr_logo {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        text-align: center;
        /* Offsets the hamburger so the wordmark is optically centred. */
        margin-right: var(--tap-min);
    }

    /* Row 2: search only. Account / Wishlist / Cart are all in the bottom tab
       bar, so repeating them here is pure duplication. #hdrCartToggle stays in
       the DOM (merely hidden) because the bottom bar's Cart tab forwards a
       click to it — see includes/bottom_nav.php. */
    .hdr_action_icons { display: none; }

    .hdr_action_bar { padding-top: 0; }
    .hdr_search_form { flex: 1 1 auto; max-width: none; }
}

/* ==========================================================================
   4. Touch targets
   The header icons, card wishlist button and card title links were all
   rendering well under the 44px minimum.
   ========================================================================== */
.hdr_action_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0 var(--sp-2);
}
.theme_product_wish_btn {
    width: var(--tap-min);
    height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme_product_name a,
.theme_product_card_name a,
.pdp_related_name {
    display: inline-block;
    padding-block: var(--sp-1);
}

/* ==========================================================================
   5. Cart table -> cards on mobile
   The table lived in a horizontal scroller, so on a phone the price, quantity
   and remove control were all off-screen until you scrolled sideways.
   ========================================================================== */
@media (max-width: 767.98px) {
    .cart_table_wrap { overflow-x: visible; }
    .cart_table, .cart_table tbody, .cart_table tr, .cart_table td { display: block; width: 100%; }
    .cart_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

    .cart_table .cart_row {
        position: relative;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: var(--sp-4);
        margin-bottom: var(--sp-3);
    }
    .cart_table .cart_row td { border: 0; padding: 0; }

    /* Product cell keeps its image + text layout and spans the card. */
    .cart_table .cart_product_cell {
        display: flex;
        gap: var(--sp-3);
        min-width: 0;
        padding-right: var(--tap-min);
        margin-bottom: var(--sp-3);
    }
    .cart_table .cart_product_cell img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; }

    /* Labelled rows for price / qty / subtotal. */
    .cart_table td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
        padding: var(--sp-2) 0;
        border-top: 1px dashed var(--line);
    }
    .cart_table td[data-label]::before {
        content: attr(data-label);
        font-size: var(--fs-xs);
        font-weight: 500;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    .cart_table .cart_line_total { font-weight: 600; }

    /* Remove button pinned to the card's top-right. */
    .cart_table .cart_row td:last-child {
        position: absolute;
        top: var(--sp-2);
        right: var(--sp-2);
        width: auto;
    }
    .cart_table .cart_remove_btn {
        width: var(--tap-min);
        height: var(--tap-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   6. Product filter disclosure (mobile)
   ========================================================================== */
.product_filter_toggle { display: none; }

@media (max-width: 991.98px) {
    .product_filter_toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        width: 100%;
        min-height: var(--tap-min);
        margin-bottom: var(--sp-4);
        padding: var(--sp-3) var(--sp-4);
        background: var(--white);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        font-family: var(--font-sans);
        font-size: var(--fs-xs);
        font-weight: 500;
        letter-spacing: var(--ls-button);
        text-transform: uppercase;
        color: var(--ink);
        cursor: pointer;
    }
    .product_filter_toggle_caret { transition: transform var(--dur) var(--ease); }
    .product_filter_toggle.is-open .product_filter_toggle_caret { transform: rotate(180deg); }

    /* Collapsed by default so the grid starts near the top of the page. */
    .product_filter_sidebar { display: none; }
    .product_filter_sidebar.is-open { display: block; margin-bottom: var(--sp-5); }
}

/* ==========================================================================
   7. Checkout on mobile
   The summary column is col-lg-5, so below 992px it fell to the very bottom,
   under ~8 form sections — the customer could not see what they were paying
   until they had scrolled past the entire address form. It moves to the top
   as a collapsible-feeling recap instead.
   ========================================================================== */
@media (max-width: 991.98px) {
    .checkout_page_wrap .row { display: flex; flex-direction: column; }
    .checkout_summary_col { order: 1; }
    .checkout_form_col { order: 2; }
    .checkout_summary_box {
        position: static;
        margin-bottom: var(--sp-5);
    }
    /* Keep the primary action reachable without scrolling back up. */
    .checkout_place_order_btn { width: 100%; }
}

/* ==========================================================================
   7. Account sidebar
   .account_sidebar had flex: 0 0 220px and no media query at all, so on a
   phone it rendered as a narrow 220px column floating above full-width
   content. It becomes a horizontal scrolling tab strip.
   ========================================================================== */
@media (max-width: 991.98px) {
    .account_layout { display: block; }
    .account_sidebar {
        flex: 1 1 100%;
        margin-bottom: var(--sp-5);
        border-bottom: 1px solid var(--line);
    }
    .account_sidebar ul {
        display: flex;
        gap: var(--sp-1);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .account_sidebar ul::-webkit-scrollbar { display: none; }
    .account_sidebar li { flex: 0 0 auto; }
    .account_sidebar li a {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        white-space: nowrap;
        min-height: var(--tap-min);
        padding: var(--sp-2) var(--sp-4);
        border-bottom: 2px solid transparent;
        font-size: var(--fs-sm);
    }
    .account_sidebar li.is-active a { border-bottom-color: var(--gold); font-weight: 600; }
}

/* ==========================================================================
   8. Product detail on mobile
   .pdp_action_row crammed Add to Cart, Buy Now, Wishlist and Enquire into a
   single wrapping flex row.
   ========================================================================== */
@media (max-width: 767.98px) {
    .pdp_action_row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .pdp_add_cart_btn, .pdp_buy_now_btn { min-height: var(--tap-min); }
    /* Enquire spans the row: for enquiry-only products it is the sole action. */
    .pdp_enquire_btn { grid-column: 1 / -1; min-height: var(--tap-min); }
    .pdp_wishlist_btn {
        grid-column: 1 / -1;
        min-height: var(--tap-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-2);
    }
}

/* ==========================================================================
   9. Orders table reflow
   account-orders.php and order-success.php render real tables with no scroll
   wrapper, which overflow a phone viewport. Below 768px they become stacked
   cards, using the data-label attribute rendered on each cell.
   ========================================================================== */
@media (max-width: 767.98px) {
    .orders_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .orders_table, .orders_table tbody, .orders_table tr, .orders_table td { display: block; width: 100%; }
    .orders_table tr {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-3);
    }
    .orders_table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-4);
        padding: var(--sp-2) 0;
        border: 0;
        text-align: right;
    }
    .orders_table td + td { border-top: 1px dashed var(--line); }
    .orders_table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--fs-xs);
        font-weight: 500;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink-soft);
        text-align: left;
    }
    /* A cell with no label (action buttons) spans the row. */
    .orders_table td:not([data-label])::before { content: none; }
    .orders_table td:not([data-label]) { justify-content: flex-end; }
}