/**
 * VSLocks mobile responsive overrides.
 * All rules are scoped to max-width: 767px so desktop stays unchanged.
 */

@media (max-width: 767px) {
    body.vslocks-mobile-ready.vslocks-mobile-drawer-from-right .mobile-nav.wd-side-hidden-nav {
        left: auto !important;
        right: 0 !important;
    }

    body.vslocks-mobile-ready.vslocks-mobile-drawer-from-left .mobile-nav.wd-side-hidden-nav {
        left: 0 !important;
        right: auto !important;
    }

    body.vslocks-mobile-ready.vslocks-mobile-drawer-from-right .mobile-nav.wd-side-hidden-nav:not(.wd-opened) {
        transform: translate3d(100%, 0, 0) !important;
    }

    body.vslocks-mobile-ready.vslocks-mobile-drawer-from-left .mobile-nav.wd-side-hidden-nav:not(.wd-opened) {
        transform: translate3d(-100%, 0, 0) !important;
    }

    body.vslocks-mobile-ready .mobile-nav.wd-side-hidden-nav.wd-opened {
        transform: translate3d(0, 0, 0) !important;
    }


    /* ─── Hide shop sidebar controls ────────────────────────────────────────── */

    /* WoodMart native sidebar openers — replaced by .vslocks-mobile-filter-open */
    body.vslocks-woo-mobile .wd-show-sidebar-btn,
    body.vslocks-woo-mobile .wd-toolbar-sidebar,
    body.vslocks-woo-mobile .wd-sidebar-opener,
    body.vslocks-woo-mobile aside.sidebar-container,
    body.vslocks-woo-mobile .wd-sidebar:not(.wd-side-hidden):not(.vslocks-shop-sidebar) {
        display: none !important;
    }

    body.vslocks-woo-mobile .wd-content-layout {
        --wd-col-lg: 12 !important;
    }

    body.vslocks-woo-mobile main.wd-content-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.vslocks-woo-mobile .wd-content-area {
        max-width: 100%;
        padding-inline: 12px;
    }

    /* ─── Header: hide desktop main nav on mobile ───────────────────────────── */

    body.vslocks-mobile-ready:not(.home) .wd-nav-main,
    body.vslocks-mobile-ready:not(.home) .whb-main-nav .wd-nav.wd-nav-main {
        display: none !important;
    }

    body.vslocks-mobile-ready:not(.home) .whb-header .wd-header-mobile-nav,
    body.vslocks-mobile-ready:not(.home) .whb-header .wd-tools-element.wd-header-mobile-nav {
        display: inline-flex !important;
    }

    /*
     * Keep the exact same hamburger control visible above Woodmart's drawer.
     * Its coordinates are captured before opening, so the control cannot jump
     * between the header and the opposite side of the panel.
     */
    body.vslocks-mobile-ready .wd-header-mobile-nav.vslocks-mobile-nav-floating {
        position: fixed !important;
        top: var(--vslocks-menu-toggle-top) !important;
        left: var(--vslocks-menu-toggle-left) !important;
        right: auto !important;
        z-index: 10002 !important;
        display: inline-flex !important;
        width: var(--vslocks-menu-toggle-width) !important;
        height: var(--vslocks-menu-toggle-height) !important;
        margin: 0 !important;
    }

    body.vslocks-mobile-ready .wd-header-mobile-nav.vslocks-mobile-nav-floating > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #fff !important;
    }

    body.vslocks-mobile-ready .wd-header-mobile-nav.vslocks-mobile-nav-floating .wd-tools-icon::before {
        content: "\f112" !important;
        font-family: "woodmart-font" !important;
    }

    body.vslocks-mobile-ready .wd-header-mobile-nav.vslocks-mobile-nav-floating .wd-tools-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    /* ─── Sticky bottom toolbar ─────────────────────────────────────────────── */

    body.vslocks-mobile-ready.sticky-toolbar-on {
        padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.vslocks-mobile-ready.sticky-toolbar-on.wd-sticky-btn-on-mb,
    body.vslocks-mobile-ready.sticky-toolbar-on.wd-sticky-btn-on {
        padding-bottom: calc(55px + var(--wd-sticky-btn-height, 0px) + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.vslocks-mobile-ready.sticky-toolbar-on .wd-toolbar {
        display: flex !important;
        position: fixed !important;
        inset-inline: 0 !important;
        bottom: 0 !important;
        z-index: 350 !important;
        height: calc(55px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #111 !important;
        border-top: 1px solid #2a2a2a;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45) !important;
    }

    body.vslocks-mobile-ready.sticky-toolbar-on .wd-toolbar a,
    body.vslocks-mobile-ready.sticky-toolbar-on .wd-toolbar .wd-tools-icon::before {
        color: #fff !important;
    }

    body.vslocks-mobile-ready.sticky-toolbar-on .wd-toolbar > a,
    body.vslocks-mobile-ready.sticky-toolbar-on .wd-toolbar > div a {
        min-height: 44px;
        min-width: 44px;
    }

    body.vslocks-mobile-ready.sticky-toolbar-on .wd-toolbar-label {
        color: #b8b8b8 !important;
        font-size: 10px !important;
    }

    /* ─── Tap targets & readable text on Woo pages ──────────────────────────── */

    body.vslocks-woo-mobile .wd-breadcrumbs a,
    body.vslocks-woo-mobile .wd-breadcrumbs .wd-last,
    body.vslocks-woo-mobile .wd-woo-page-title .wd-nav-link,
    body.vslocks-woo-mobile .shop-loop-head a,
    body.vslocks-woo-mobile .wd-shop-tools a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        font-size: 14px !important;
        line-height: 1.3;
    }

    /* Shop toolbar crumbs: compact Figma 757:27058 line (not 44px chips) */
    body.vslocks-woo-mobile .vslocks-shop-toolbar .wd-breadcrumbs,
    body.vslocks-woo-mobile .vslocks-shop-toolbar .wd-breadcrumbs a,
    body.vslocks-woo-mobile .vslocks-shop-toolbar .wd-breadcrumbs .wd-last,
    body.vslocks-woo-mobile .vslocks-shop-toolbar .wd-breadcrumbs .wd-last-link,
    body.vslocks-woo-mobile .vslocks-shop-toolbar .wd-breadcrumbs .wd-delimiter {
        min-height: 0 !important;
        min-width: 0 !important;
        height: auto !important;
        display: inline !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        padding: 0 !important;
    }

    body.vslocks-woo-mobile .vslocks-shop-toolbar .wd-breadcrumbs .wd-delimiter {
        display: inline !important;
    }

    body.vslocks-woo-mobile .vslocks-shop-toolbar .wd-breadcrumbs .wd-delimiter::after {
        content: "/" !important;
        display: inline !important;
    }

    body.vslocks-woo-mobile .wd-show-sidebar-btn,
    body.vslocks-woo-mobile .wd-open-cats,
    body.vslocks-woo-mobile .wd-nav-product-cat > a,
    body.vslocks-woo-mobile .wd-nav-product-cat .wd-opener {
        min-height: 44px;
        min-width: 44px;
    }

    body.vslocks-woo-mobile .woocommerce-ordering select,
    body.vslocks-woo-mobile .wd-shop-tools select {
        min-height: 44px;
        min-width: 44px;
        font-size: 14px !important;
        padding: 8px 32px 8px 12px;
    }

    body.vslocks-woo-mobile .products .product .wd-add-btn a,
    body.vslocks-woo-mobile .products .product .add_to_cart_button,
    body.vslocks-woo-mobile .wd-products .wd-add-btn a {
        min-height: 44px;
        font-size: 14px !important;
    }

    body.vslocks-woo-mobile .product-grid-item .wd-entities-title,
    body.vslocks-woo-mobile .products .product .wd-entities-title {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    body.vslocks-woo-mobile .product-grid-item .wd-product-cats a,
    body.vslocks-woo-mobile .products .product .wd-product-cats a {
        font-size: 12px !important;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    body.vslocks-woo-mobile .whb-header .wd-tools-element > a {
        min-width: 44px;
        min-height: 44px;
    }

    body.vslocks-woo-mobile .shop-loop-head {
        gap: 12px;
    }

    body.vslocks-woo-mobile .woocommerce-result-count {
        font-size: 13px !important;
    }

    /* ─── Cart page ─────────────────────────────────────────────────────────── */

    body.woocommerce-cart .woocommerce-cart-form .product-remove a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
        min-height: 48px;
        font-size: 16px !important;
    }

    /* ─── Footer: compact mobile layout ───────────────────────────────────── */

    body.vslocks-mobile-ready .vslocks-main-footer {
        padding-block: 32px 24px;
    }

    body.vslocks-mobile-ready .vslocks-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }

    body.vslocks-mobile-ready .vslocks-footer-brand {
        grid-column: 1 / -1;
    }

    body.vslocks-mobile-ready .vslocks-footer-brand p {
        font-size: 13px;
        max-width: none;
    }

    body.vslocks-mobile-ready .vslocks-footer-menu a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        font-size: 14px !important;
    }

    body.vslocks-mobile-ready .vslocks-footer-title {
        margin-bottom: 8px;
        font-size: 12px;
    }

    body.vslocks-mobile-ready .wd-footer .wd-copyrights .container {
        flex-direction: column;
        gap: 8px;
        padding-block: 18px;
    }

    /* ─── Utility / content pages ───────────────────────────────────────────── */

    body.vslocks-utility-page .vslocks-contact-grid,
    body.vslocks-utility-page .vslocks-page-section {
        padding: 20px 16px;
    }

    /* About Us mobile tokens live in site-pages.php (Figma 582:446).
       Keep only non-conflicting touch targets here if needed. */

    body.vslocks-utility-page .vslocks-contact-card a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ─── My Account ────────────────────────────────────────────────────────── */

    body.woocommerce-account .woocommerce-MyAccount-navigation a {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 14px !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 24px;
    }

    /* ─── Landing page (home) ───────────────────────────────────────────────── */

    body.home .testimonials-eyebrow,
    body.home .stage-layer-testimonials .testimonials-eyebrow {
        font-size: clamp(0.75rem, 3vw, 0.82rem) !important;
    }

    body.home .testimonial-role,
    body.home .stage-layer-testimonials .testimonial-role {
        font-size: 0.75rem !important;
    }

    body.home .testimonial-body,
    body.home .stage-layer-testimonials .testimonial-body {
        font-size: clamp(0.88rem, 3.6vw, 0.95rem) !important;
    }

    body.home .hamburger-panel a,
    body.home .hamburger-panel button {
        min-height: 44px;
    }
}

@media (max-width: 420px) {
    body.vslocks-mobile-ready .vslocks-footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SWG-127 / SWG-129 — Products mobile header parity (Figma 757:27055)
   Order: cart · account · centred brand · hamburger.
   ═══════════════════════════════════════════════════════════════════════════ */

.vslocks-mobile-account {
    display: none !important;
}

@media (max-width: 767px) {
    body.vslocks-mobile-ready .whb-header:not(.whb-clone),
    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-general-header,
    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-general-header-inner {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-general-header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-right,
    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .vslocks-mobile-account,
    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-left {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-right {
        order: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .vslocks-mobile-account {
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-center {
        order: 3 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-center > * {
        max-width: 100% !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-left {
        order: 4 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-right > *,
    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .vslocks-mobile-account > *,
    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-left > * {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .vslocks-mobile-account .wd-tools-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .vslocks-mobile-account .wd-tools-icon,
    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .vslocks-mobile-account .wd-tools-icon::before {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.vslocks-mobile-ready .whb-header:not(.whb-clone) .whb-mobile-center img {
        max-height: 34px !important;
        height: 34px !important;
        width: auto !important;
    }
}