/* =========================================================
   LUMORA — Responsive Overrides
   Mobile-first fine-tuning on top of Bootstrap's grid.
   ========================================================= */

/* ---------- Large desktops ---------- */
@media (min-width: 1400px){
    .container-xl-fluid{ max-width: 1680px; }
}

/* ---------- Tablets / small laptops (<1200px) ---------- */
@media (max-width: 1199.98px){
    .main-nav .nav-link{ padding: 1.2rem .7rem !important; }
    .hero{ min-height: 72vh; }
    .legal-toc{ position:static; margin-bottom: 2rem; }
}

/* ---------- Tablets (<992px) ---------- */
@media (max-width: 991.98px){
    :root{ --header-h: 70px; }
    .hero{ min-height: 62vh; text-align:left; }
    .section-head{ align-items:flex-start; }
    .mega-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border-top:0; padding: .5rem 0 1rem; display:none; }
    .fab-stack{ right:.9rem; bottom:.9rem; }
    .stat-strip .stat{ padding: 1.5rem .5rem; }
    .cat-strip .scroller{ gap:1.25rem; }
}

/* ---------- Mobile (<768px) ---------- */
@media (max-width: 767.98px){
    h1{ font-size: 2.1rem; }
    h2{ font-size: 1.65rem; }
    /* Header action icons (search/account/wishlist/cart/menu) were smaller
       than their desktop 42px size on mobile, and the glyphs themselves used
       the browser default with no bump — both made them cramped touch
       targets. Slight increase only, no color/alignment/height change.
       .site-header .icon-btn alone covers .header-actions too (it's nested
       inside .site-header) as well as the mobile-nav hamburger button. */
    .site-header .icon-btn{ width: 30px; height: 44px; }
    .site-header .icon-btn i{ font-size: 1.15rem; }

    /* Cart badge (.icon-btn .count) sat at the SQUARE bounding-box corner
       (top/right: -4px) of a CIRCULAR button — visually floating past the
       circle's actual curved edge into empty corner space. Pulling it in
       anchors it back onto the visible rim instead. Desktop untouched
       (still -4px there) since it wasn't part of the reported problem. */
    .icon-btn .count{ top: -2px; right: -2px; }

    /* Language switcher — matches the icon buttons' height, roundness
       style, color and hover, but stays auto-width (content-driven, plus
       its own horizontal padding) rather than being forced into a fixed
       44x44 box. Its content (flag emoji + language code, e.g. "🇬🇧 EN")
       is plain text directly inside the <button> in
       language_switcher_menu.blade.php — a shared partial (also used by
       metro/shopify-template/nastygal/auth) out of this fix's scope — so
       auto-width is also the more robust choice: nothing needs to be
       measured, shrunk, or clipped to fit a fixed box. border-radius is
       22px (exactly half of the 44px height) rather than the icon buttons'
       literal 50%, since 50% on a non-square box would curve the top/bottom
       edges into an ellipse instead of the intended pill shape with fully
       rounded ends — 22px is the equivalent "fully rounded" treatment for a
       height-locked, auto-width control. Dropdown markup/toggle behavior is
       completely untouched — presentation only. */
    .header-actions .lang-switcher-toggle{
        height: 44px;
        padding: 0 .85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border-radius: 22px;
        font-size: .95rem;
        line-height: 1;
        color: var(--seller-menu-color, #000000);
        background: transparent;
        border: 1px solid transparent;
    }
    .header-actions .lang-switcher-toggle:hover{ background: var(--soft-primary); color: var(--seller-menu-hover-color, #000000); }

    .section-pad{ padding-block: 2.5rem; }
    /* Small gap between the header and the hero specifically (.hero is only
       ever rendered on the homepage — see index.blade.php), rather than a
       global .site-header margin, so checkout/category/account/etc. stay
       exactly as they were (flush against the header, unchanged). */
    .hero{ min-height: 56vh; padding-block: 3rem; margin-top: .75rem; }
    .hero p{ max-width:none; }
    .promo-banner{ min-height: 220px; }
    .newsletter{ text-align:center; }
    .newsletter .d-flex{ flex-direction:column; }
    .site-footer .col-lg-4, .site-footer .col-lg-2{ margin-bottom: 1.75rem; }
    .pd-thumbs button{ width: 64px; }
    .checkout-step span.label{ display:none; }
    .search-modal input{ font-size:1.4rem; }
    .utility-bar{ font-size:.72rem; }
    .footer-bottom .d-flex{ flex-direction:column; text-align:center; gap:.5rem; }

    /* Cart table -> stacked cards. Avoids the 5-column table (image/title,
       price, qty, subtotal, remove) forcing horizontal scroll or overlap on
       narrow phones; each row becomes its own bordered card, each value is
       shown next to a label pulled from its data-label attribute. */
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{
        display:block;
        width:100%;
    }
    .cart-table thead{ display:none; }
    .cart-table tr{
        position:relative;
        border:1px solid var(--lm-border);
        border-radius: var(--radius);
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .cart-table td{
        border:0;
        padding:.35rem 0;
    }
    .cart-table td:first-child{ padding-top:0; padding-right: 2.5rem; }
    .cart-item-thumb{ width:64px; height:78px; }
    .cart-table td[data-label]{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.75rem;
    }
    .cart-table td[data-label]::before{
        content: attr(data-label);
        font-size:.75rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.04em;
        color: var(--lm-gray);
        flex-shrink:0;
    }
    .cart-table td:last-child{
        position:absolute;
        top:1rem;
        right:1rem;
        padding:0;
        width: 90%;
    }

    #cart-summary .table > :not(caption) > * > *{
        background-color: transparent !important;
    }

    .mobile-nav.show{
        background-color:  var(--bg-color);
    }
}

/* ---------- Small mobile (<576px) ---------- */
@media (max-width: 575.98px){
    .announcement{ font-size:.7rem; padding:.45rem .75rem; }
    .product-card h3{ font-size:.85rem; }
    /* Icon size now inherited from the 767.98px breakpoint above (44px) —
       this used to shrink icons further on the smallest phones, which was
       the opposite of what touch targets need. */
    .error-page .code{ -webkit-text-stroke: 1.5px var(--lm-ink); }
    .qty-input{ width: 112px; }
    .qty-input button{ width:36px; }
    .qty-input input{ width:40px; }
    .hero{ min-height: 42vh; padding-block: 2rem; }
    /* Logo sizing now lives entirely in style.css's fluid clamp() rule for
       .brand-mark-logo — no fixed override needed here anymore.
       .py-1 (Bootstrap, !important) is the header nav's only vertical
       padding at this breakpoint — overriding it here is the only way to
       claw back space for the larger logo without a blade change; matches
       the existing precedent of overriding Bootstrap !important utilities
       at specific breakpoints elsewhere in this file (e.g. .main-nav .nav-link above). */
    .site-header nav.navbar{ padding-top: .15rem !important; padding-bottom: .15rem !important; }
    .site-footer p{
        font-size: 0.85rem !important;
    }
    .site-footer p i {
        font-style: normal !important;
    }
    .site-footer hr{
        display: none !important;
    }
}

/* Prevent any accidental horizontal scroll */
html, body{ overflow-x: hidden; }