/* =============================================================
   sn-product.css — Shirinats Child v4
   LAYOUT ONLY.  Zero color / font / button overrides.
   Woodmart's styling engine owns every visual token.
   ============================================================= */

/* ── Outer wrapper ──────────────────────────────────────────── */
.sn-product-wrap {
    max-width: 1280px;
    margin-inline: auto;
    padding: 24px 16px 56px;
    box-sizing: border-box;
}

/* ── Two-column grid (gallery | summary) ────────────────────── */
.sn-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* ── Gallery: sticky while scrolling the summary ────────────── */
.sn-gallery {
    position: sticky;
    top: 90px;          /* increase if your sticky header is taller */
    min-width: 0;       /* prevents grid blowout */
}

/* ── Summary: natural flow ───────────────────────────────────── */
.sn-summary {
    min-width: 0;
}

/* ── After-summary blocks (tabs, related, upsells) ──────────── */
.sn-product-wrap .woocommerce-tabs,
.sn-product-wrap .related.products,
.sn-product-wrap .up-sells.products {
    margin-top: 48px;
    clear: both;
}

/* ── Tablet  ≤ 1024 px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .sn-layout {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 24px;
    }

    .sn-gallery {
        top: 72px;
    }
}

/* ── Large mobile  ≤ 768 px ──────────────────────────────────── */
@media (max-width: 768px) {
    .sn-gallery {
        position: static;   /* un-stick; gallery flows above summary */
    }

    .sn-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ── Small mobile  ≤ 480 px ──────────────────────────────────── */
@media (max-width: 480px) {
    .sn-product-wrap {
        padding: 12px 8px 32px;
    }

    .sn-product-wrap .woocommerce-tabs,
    .sn-product-wrap .related.products,
    .sn-product-wrap .up-sells.products {
        margin-top: 32px;
    }
}