/* Horeka Discover Complete CSS */

/* ── Mobile: size the "Serving [pincode] / Change" block ── */
@media (max-width: 1023px) {
    .hqm-pincode-block {
        gap: 3px !important;
        padding: 4px 0 !important;
    }
    .hqm-pincode-line {
        font-size: 13px !important;
    }
    .hqm-pincode-line strong {
        font-size: 15px !important;
    }
    .hqm-pincode-change {
        font-size: 12px !important;
    }

    /* ── Mobile: size the Quick/Discover mode toggle ── */
    .hqm-header .horeka-toggle {
        width: 130px !important;
        height: 34px !important;
    }
    .hqm-header .toggle-pill {
        height: 27px !important;
    }
    .hqm-header .toggle-label {
        font-size: 11.5px !important;
    }
    .hqm-header .toggle-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* ── Mobile: reduce font size of the post-header store notice banner ── */
    .woocommerce-store-notice,
    p.demo_store {
        font-size: 0.75em !important;
        padding: 6px 15px !important;
    }
    .woocommerce-store-notice__dismiss-link {
        font-size: inherit !important;
    }
}

/* ── Product image carousel: interaction layer (all devices) ─────────────────
   touch-action: pan-y — browser handles vertical scroll; we handle horizontal.
   user-select: none  — no text/image selection during a drag gesture.
   -webkit-user-drag  — disables the native browser image-drag (desktop).
   These apply on every device so desktop mouse drag and trackpad swipe work
   just as well as touch on mobile.
   ─────────────────────────────────────────────────────────────────────────── */
.hq-main-image {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.hq-main-image img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Mobile: also remove pointer-events so the img can't steal touch start */
@media (max-width: 1023px) {
    .hq-main-image img {
        pointer-events: none;
    }
}

/* Desktop: show grab cursor to signal draggability */
@media (hover: hover) and (pointer: fine) {
    .hq-main-image {
        cursor: grab;
    }
}

/* ── All Products grid: responsive column count based on screen width ──────────
   The base rule in discover.php always sets repeat(3,1fr) with no breakpoint.
   Below 480px (iPhone SE 320–375px, and other small phones up to 479px),
   we force exactly 2 columns so cards are not cramped.
   480px and above keep the existing 3-column layout untouched.
   List-view and desktop layout are never affected.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
    /* 2 columns — excludes list-view which stays at 1 column */
    .hd-ap-grid:not(.hd-ap-list-view) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* min-width:0 lets CSS grid shrink each cell to its fair 1fr share
       without blowout from any intrinsic content width.
       max-width:100% is a belt-and-suspenders guard against overflow. */
    .hd-ap-grid:not(.hd-ap-list-view) .hd-ap-card,
    .hd-ap-grid:not(.hd-ap-list-view) .hd-ap-skeleton {
        min-width: 0;
        max-width: 100%;
    }
}

/* ── Mobile only: promo/store banner horizontal spacing ──────────────────────
   Below 768px the tablet/desktop .ds-promo-wrap rules don't apply, so the
   banner stretches edge-to-edge.  Match the 15px horizontal margin that the
   trust-banner above it already carries via its inline style, and box-size
   so the padding never causes overflow.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ds-promo-wrap {
        padding: 12px 15px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
}