/* ==========================================================
   WEARAGAIN — Mobile UI (≤991px) · App-like experience
   Loaded after luxetrade.css so these rules win
   ========================================================== */

@media (max-width: 991.98px) {

/* Note: an earlier pass here tried to hide .topbar entirely and turn .main-nav
   into a slide-in drawer (position:fixed + a .mobile-drawer-open toggle class),
   but the JS/markup that opens the drawer and rebuilds the topbar's account/cart/
   language controls into the header was never built. Shipping those rules as-is
   would strip mobile users of login, cart, and the language switcher (all live
   only inside .topbar today) and would permanently hide .main-nav off-screen
   with no way to reopen it. Left out until that drawer is actually wired up. */

/* ── 2. Site-header: sticky, compact, app-like ──────────────── */
.site-header {
    padding: 0 !important;
    position: sticky;
    top: 0;
    z-index: 400;
    box-shadow: 0 1px 0 #D8E4E0;
    background: #fff;
}
/* .main-nav has its own Bootstrap .sticky-top (top:0); offset it below the now-
   sticky .site-header (58px tall) so the two don't stack on top of each other. */
.main-nav { top: 58px !important; }
.site-header > .container-fluid {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.site-header > .container-fluid > .row {
    flex-wrap: nowrap;
    margin: 0;
    height: 58px;
    display: flex;
    align-items: center;
}
/* Logo column: stay full-width (Bootstrap's .col-12, already on this element,
   already does this) so the critical inline CSS's `text-align:center` on it
   actually has room to center the logo instead of hugging the hamburger. */
/* Do NOT shrink .brand-logo's box below the 220x50 size already set by the
   critical inline CSS in header.php. Confirmed by direct testing (headless
   Chromium against the live page) that shrinking this box further — e.g. to
   110x40 — triggers what looks like a real browser bug: object-fit:contain
   downscaling this specific image that aggressively renders a cropped sliver
   instead of the full logo, regardless of transform/overflow/display. 220x50
   downscales fine. */
.brand-logo img {
    transform: none !important;
}
/* Desktop search: hidden on mobile */
.site-header > .container-fluid > .row > .col-lg-5 {
    display: none !important;
}
/* Right col: mobile header actions */
.site-header > .container-fluid > .row > .col-lg-4,
.site-header .header-actions {
    flex: 1 !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 4px 0 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}
/* Hamburger pill */
.mobile-header-toggle {
    width: 24px !important;
    height: 24px !important;
    background: #F3F7F5 !important;
    border: none !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-shrink: 0;
}
/* Mobile header icon buttons */
.mobile-hdr-btn {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background: #F3F7F5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    text-decoration: none !important;
    color: #0F766E !important;
    font-size: 18px;
    flex-shrink: 0;
}
.mobile-hdr-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 17px;
    text-align: center;
    padding: 0 3px;
    display: none;
    border: 2px solid #fff;
}
.mobile-hdr-account-pill {
    height: 42px;
    border-radius: 21px;
    background: #F3F7F5;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    cursor: pointer;
    text-decoration: none !important;
    color: #115E59 !important;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
}
.mobile-hdr-account-pill i { font-size: 18px; }
.mobile-hdr-account-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 4. Bottom floating tab bar: markup + real styling live in
   includes/header.php (.mobile-bottom-nav) and css/luxetrade.css ──────── */

/* ── 5. Page padding to clear tab bar ───────────────────────── */
body { padding-bottom: 88px !important; }

/* ── 6. Product cards: rounded like app ─────────────────────── */
.product-item {
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(31,41,51,.07) !important;
    border: 1px solid #D8E4E0 !important;
}
.product-item .card-header {
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden !important;
}
.product-item .card-footer { border-radius: 0 0 18px 18px !important; }

/* ── 6b. Card title/price/actions: match app's Cards.tsx (teal title,
   bold price, pill action buttons — solid primary + outline) ────────── */
.product-item .card-body > div.d-flex.justify-content-center h6,
.product-card .item-price {
    color: var(--lt-primary-dark) !important;
    font-weight: 900 !important;
}
.product-card .card-body h6 {
    color: var(--lt-primary) !important;
    font-weight: 900 !important;
}

.product-item .card-footer {
    background: #fff !important;
    border: none !important;
    padding: 12px 14px 14px !important;
    gap: 10px !important;
}
.product-item .card-footer > a,
.product-item .card-footer > span {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    padding: 0 12px !important;
}
.product-item .card-footer > a:first-child {
    background: var(--lt-primary);
    color: #fff !important;
}
.product-item .card-footer > a:first-child i { color: #fff !important; }
.product-item .card-footer > *:last-child:not(:first-child):not(.sold-out-action) {
    background: #fff;
    border: 1px solid var(--lt-border) !important;
    color: var(--lt-primary) !important;
}

.product-card .card-footer { padding: 12px 14px 14px !important; gap: 10px !important; }
.product-card .btn-view,
.product-card .btn-action {
    min-height: 44px;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}
.product-card .btn-view {
    background: var(--lt-primary) !important;
    color: #fff !important;
}
.product-card .btn-action:not(.sold-out-action) {
    background: #fff !important;
    color: var(--lt-primary) !important;
    border: 1px solid var(--lt-border) !important;
}

/* ── 7. Hide footer sections — keep it minimal ──────────────── */
.newsletter-section { display: none !important; }
.site-footer .footer-links-col { display: none !important; }
.site-footer .footer-brand-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center;
}
.site-footer .footer-contact-list,
.site-footer .footer-cta-row { justify-content: center; }
.site-footer .footer-socials { justify-content: center; }
.site-footer .footer-about { text-align: center; }

} /* end @media */