@media (max-width:991px) {

    .about-background,
    .video-background,
    .contact-background {
        background-size: 50% 100% !important;
    }

    .shipping::after {
        width: 60px !important;
    }
}

@media (min-width:768px) {
    .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        display: block;
    }
}

@media (max-width:767px) {

    p.fs-5,
    a.fs-5,
    i.fs-5 {
        font-size: 18px !important;
    }

    img {
        width: 100%;
    }

    .nav-link button {
        font-size: 16px !important;
    }

    .logo {
        width: 50px !important;
    }

    .navbar {
        background: var(--nav-theme) !important;
        padding: 0 !important;
    }

    .main-header.scrolled {
        padding: 5px 0 !important;
    }

    /* hero */
    .hero-section .carousel-item,
    .slide-1,
    .slide-2,
    .slide-3 {
        min-height: 600px !important;
    }

    .theme-btn {
        padding: 11px 17px !important;
    }

    .login-btn {
        padding: 4px 8px 6px !important;
    }

    .fancybox__content, .fancybox__content img {
        width: 300px !important;
        height: 300px !important;
    }

    .counter-box::after {
        width: 1px !important;
        height: 30px !important;
        top: inherit !important;
        bottom: -38px !important;
        right: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* about page */
    .about-background,
    .video-background,
    .contact-background {
        background: none !important;
    }

    .top-btn {
        padding: 5px 10px !important;
    }
}

/* ───────────────────────────────────────────────────────────
 *  Mobile-friendly gallery rules (Jun-2026)
 *
 *  All three gallery surfaces (/Gallery, /ImageGallery,
 *  /VideoGallery) inherit the same hero / grid pattern as the
 *  other Vande pages and were rendering with desktop dimensions
 *  pushed onto small screens.  This block scales them down
 *  cleanly for phones.
 * ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* Safety net — no page should overflow horizontally on a
       phone.  Without this any rogue fixed-width element (e.g.
       Fancybox lightbox img) drags a horizontal scrollbar onto
       the entire site. */
    html, body { overflow-x: hidden; }

    /* Hero strips — were 400px tall + Bootstrap display-2
       (5.5rem ≈ 88px) headings.  Both crowd the viewport on a
       375 px phone. */
    .hero-about,
    .hero-shop,
    .hero-contact,
    .hero-gallery {
        min-height: 220px !important;
        padding-top:   72px !important;   /* clear the fixed navbar */
        padding-bottom: 24px !important;
    }
    .hero-gallery .display-2,
    .hero-about   .display-2,
    .hero-shop    .display-2,
    .hero-contact .display-2 {
        font-size: 2rem !important;       /* 32 px */
        line-height: 1.15 !important;
    }
    .hero-gallery .breadcrumb,
    .hero-about   .breadcrumb,
    .hero-shop    .breadcrumb,
    .hero-contact .breadcrumb {
        font-size: 13px !important;
        flex-wrap: wrap;
    }

    /* Section headings — display-5 (3rem ≈ 48 px) is too tall
       on a phone, especially when paired with the big "Organic
       way" eyebrow. */
    .display-5 {
        font-size: 1.6rem !important;     /* 25.6 px */
        line-height: 1.2 !important;
    }
    h6.fs-5,
    p.fs-5,
    a.fs-5  { font-size: 15px !important; }

    /* "View more" / page action buttons can grow too wide on a
       phone — keep them tight but tappable (≥44 px tall). */
    .theme-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* ── /Gallery (static hero gallery) ─────────────────────
       The product grid uses col-6 / col-4 unprefixed values
       which stay tight on phones.  Bump the gutter so adjacent
       tiles don't fuse visually, and stop tile heights from
       collapsing on portrait images. */
    section .gallery {
        border-radius: 10px;
    }
    section .gallery img {
        width: 100%;
        height: auto;
        display: block;
    }
    .row-gap-lg-3.row-gap-2 { row-gap: 8px !important; }
    .px-lg-2.px-1           { padding-left: 4px !important; padding-right: 4px !important; }

    /* ── /ImageGallery + /VideoGallery (category cards) ─────
       The .vn-cat-card has 1.4rem padding which feels cramped
       once the icon and CTA stack.  Slightly larger touch
       target + balanced spacing for phones. */
    .vn-cat-card {
        padding: 1rem 1.1rem !important;
        gap: .45rem !important;
    }
    .vn-cat-card__name { font-size: 1rem !important; }
    .vn-cat-card__icon { width: 40px; height: 40px; font-size: 18px; }

    /* ── /ImageGallery (images inside a category) ──────────
       Image tiles default to col-lg-3 col-md-4 col-sm-6 — on a
       phone (< sm) Bootstrap stacks them full-width which makes
       a 1-per-row gallery scroll forever.  Force 2-per-row at
       very small widths so the page stays browseable. */
    #vnImageGrid > .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 6px;
        padding-right: 6px;
    }
    #vnImageGrid .gallery {
        border-radius: 8px;
    }
    #vnImageGrid .gallery img { aspect-ratio: 1 / 1; object-fit: cover; }

    /* ── /VideoGallery (16:9 player) ───────────────────────
       col-lg-6 means the video column auto-stacks on phones.
       Make sure the iframe fills width with no side gutters. */
    .vn-vid-card .ratio { border-radius: 10px; overflow: hidden; }
    .vn-vid-card iframe { width: 100% !important; height: 100% !important; }

    /* Fancybox lightbox sizing — style.css's 500×500 fixed
       size already gets clamped to 300×300 above, but make sure
       it never overflows the viewport width on tiny phones. */
    .fancybox__content,
    .fancybox__content img {
        max-width: 92vw !important;
        max-height: 80vh !important;
        width: auto !important;
        height: auto !important;
    }

    /* "All Categories" / "Start Slideshow" toolbar — wraps on
       phones; centre the buttons so they don't look orphaned. */
    .d-flex.flex-wrap.justify-content-between {
        justify-content: center !important;
        text-align: center;
    }
}