/* ════════════════════════════════════════════════════════════════
   StickDecor — Mobile QA fixes (loaded everywhere, low specificity
   except where explicitly !important to overrule legacy rules).
   This file is the single place to add post-launch mobile polish so
   future audits can find them all together.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Global horizontal-overflow safety net ───────────────────────
   Before this, several pages (product with color-picker, /shop/
   archive, etc.) had children wider than the viewport. iOS Safari
   doesn't always respect `overflow-x: hidden` on body alone, so we
   pin BOTH `html` and `body`, plus add max-width:100vw and
   `overflow-x: clip` (a newer property iOS respects more reliably). */
html, body {
    max-width: 100vw;
    overflow-x: clip;
    overflow-x: hidden;            /* fallback for browsers without clip */
}

/* Prevent images / iframes / videos from forcing a wider scroll area.
   Most theme images already have width: 100% but a few inline-styled
   elements were escaping. */
img, iframe, video, embed, object, canvas {
    max-width: 100%;
}

/* ── 2. Cross-sell ("יש לכם הכל") — mobile layout ──────────────────
   Desktop keeps the 4-column grid. Below 760px we turn the grid into
   a horizontal slider with peek-of-next-card, bigger image, and a
   shorter text block so the card feels like a real product card. */
@media (max-width: 760px) {
    .sd-product-v2 .tools-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 4px;
        /* Carve a little container-bleed so the right edge peek isn't
           cut by the .container padding. */
        margin-inline: calc( -1 * var(--gutter, 16px) );
        padding-inline: var(--gutter, 16px);
    }
    .sd-product-v2 .tool-card {
        flex: 0 0 75%;        /* one full + 25% peek of next */
        min-width: 260px;
        max-width: 320px;
        scroll-snap-align: start;
    }
    .sd-product-v2 .tool-card__media {
        aspect-ratio: 1 / 1;  /* taller, more visible image */
    }
    .sd-product-v2 .tool-card__body { padding: 14px; }
    .sd-product-v2 .tool-card__title { font-size: 15px; }
    .sd-product-v2 .tool-card__desc {
        font-size: 12.5px;
        line-height: 1.45;
        min-height: 0;        /* drop the 2.6em min-height clamp */
        /* Hide the long description on mobile — title + price + CTA
           is the right density for a peek-card. */
        display: none;
    }
    .sd-product-v2 .tool-card__price-row { gap: 10px; }
    .sd-product-v2 .tool-card__add {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ── 3. Single-product page (color-picker variant) — prevent
       horizontal bleed. The `.sd-product-v2 .gallery__main` had
       inline aspect-ratio from PHP that, combined with the
       color-picker's absolute-positioned swatches, occasionally
       exceeded the column width. Force the gallery to behave. */
@media (max-width: 760px) {
    .sd-product-v2 { overflow-x: hidden; }
    .sd-product-v2 .pgrid,
    .sd-product-v2 .gallery-main,
    .sd-product-v2 .info {
        max-width: 100%;
        min-width: 0;
    }
    .sd-product-v2 .gallery__main {
        max-width: 100%;
    }
    /* Color picker swatch row sometimes overflows on narrow phones —
       wrap it. */
    .sd-product-v2 #sd-wall-color-wrap,
    .sd-product-v2 .sd-wall-color-swatches {
        flex-wrap: wrap;
        max-width: 100%;
    }
}

/* ── 4. WooCommerce shop / category archive — prevent bleed ─────── */
@media (max-width: 760px) {
    .woocommerce.archive .site-content,
    .woocommerce.archive #content,
    .woocommerce-page.archive .site-content,
    .woocommerce-page.archive #content {
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* WC product loop — make sure cards never push wider than viewport. */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        max-width: 100%;
        min-width: 0;
    }
}

/* ── 5. Container utility hardening ─────────────────────────────── */
@media (max-width: 760px) {
    .container {
        max-width: 100%;
        padding-inline: 16px;
        margin-inline: auto;
    }
}