/* ==========================================================
   Responsive for .d12-new pages (plain CSS — selectors fully expanded)
   Every rule is scoped to .d12-new, same as newstyle.scss.
   ========================================================== */

@media screen and (max-width: 1500px) {}

@media screen and (max-width: 1400px) {}

@media screen and (max-width: 1370px) {}

@media screen and (max-width: 1280px) {

    /* 3-col cards narrow to ~260px here — plugin "ADD TO QUOTE" label needs 12px to fit half */
    .d12-new .d12-pcard .d12-pcard__body>a.button {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 1199px) {

    /* Shop grid: 3 cards drop below ~272px (2 buttons stop fitting) — go to 2 per row
       (.d12-shop covers both static .d12-shopmain and live WooCommerce markup) */
    .d12-new .d12-shop .d12-pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 2 per row → cards wide again, live buttons back to Figma 14px */
    .d12-new .d12-pcard .d12-pcard__body>a.button {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 991px) {

    /* Related cards (~293px) — smaller title so 2 buttons still fit */
    .d12-new .d12-pcard.d12-pcard--lg .d12-pcard__title,
    .d12-new .d12-related .d12-pcard .d12-pcard__title {
        min-height: 5.25rem;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .d12-new .d12-pcard.d12-pcard--lg .d12-pcard__body,
    .d12-new .d12-related .d12-pcard .d12-pcard__body {
        padding: 0 0.75rem;
    }

    .d12-new .d12-pcard.d12-pcard--lg .d12-pcard__actions,
    .d12-new .d12-related .d12-pcard .d12-pcard__actions {
        padding-top: 1.25rem;
    }

    /* Live related cards — loose WooCommerce buttons */
    .d12-new .d12-related .d12-pcard .d12-pcard__body>a.button {
        margin-top: 1.25rem;
    }

    /* Product detail — still 2 columns here (~455px each); smaller title */
    .d12-new .d12-psummary .d12-psummary__title,
    .d12-new .d12-psummary .product_title {
        font-size: 1.75rem;
    }

    /* Products take the full width — sidebar moves into the drawer below */
    .d12-new .d12-shop {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Undo desktop column placement (live WooCommerce children) */
    .d12-new .d12-shop>.d12-shopfilters {
        grid-column: auto;
        grid-row: auto;
    }

    .d12-new .d12-shop> :not(.d12-shopfilters):not(.d12-shopfilters-overlay) {
        grid-column: auto;
    }

    /* Fallback — no Filters button (JS didn't run): filters stay inline as wrapping chips */
    .d12-new .d12-shop:not(:has(.d12-filterbtn)) .d12-shopfilters {
        gap: 1.5rem;
        margin-bottom: 1.875rem;
        padding-top: 0;
    }

    .d12-new .d12-shop:not(:has(.d12-filterbtn)) .d12-shopfilters>.d12-filterbar-new {
        gap: 1.5rem;
    }

    .d12-new .d12-shop:not(:has(.d12-filterbtn)) .d12-shopfilters .d12-shopfilter ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* ---- Filters → off-canvas drawer, slides in from the left ----
       Only when a .d12-filterbtn exists (static markup, or added by assets/js/newscript.js
       on live WooCommerce pages). newscript.js toggles .is-open */
    .d12-new .d12-shop:has(.d12-filterbtn) .d12-shopfilters {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        /* above live sticky header (50) and the overlay (1000) */
        width: 20rem;
        max-width: 85vw;
        gap: 1.5rem;
        padding: 0 1.25rem 2rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: 0.5rem 0 1.5rem rgba(28, 28, 26, 0.12);
        transform: translateX(-100%);
        visibility: hidden;
        transition:
            transform 0.3s ease,
            visibility 0s linear 0.3s;
    }

    .d12-new .d12-shop:has(.d12-filterbtn) .d12-shopfilters.is-open {
        transform: translateX(0);
        visibility: visible;
        transition:
            transform 0.3s ease,
            visibility 0s;
    }

    .d12-new .d12-shop:has(.d12-filterbtn) .d12-shopfilters>.d12-filterbar-new {
        gap: 1.5rem;
    }

    .d12-new .d12-shop:has(.d12-filterbtn) .d12-shopfilters .d12-shopfilters__head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        margin: 0 -1.25rem;
        padding: 1rem 1.25rem;
        border-bottom: 0.0625rem solid var(--d12-divider, #d9d9d9);
        background: #fff;
    }

    .d12-new .d12-shopfilters-overlay {
        display: block;
    }

    .d12-new .d12-shopfilters .d12-shopfilter .d12-shopfilter__title {
        margin-bottom: 0.875rem;
        font-size: 1.125rem;
    }

    .d12-new .d12-shopfilters .d12-shopfilter ul {
        gap: 0.625rem;
    }

    /* Toolbar + Filters button */
    .d12-new .d12-shopbar {
        display: flex;
        align-items: center;
        margin-bottom: 1.25rem;
    }

    .d12-new .d12-filterbtn {
        display: inline-flex;
    }

    /* Gallery arrows — thumbs drop to ~70px, so shrink the buttons and hug the edges */
    .d12-new .d12-gallery .d12-gallery__thumbs .swiper-button-prev,
    .d12-new .d12-gallery .d12-gallery__thumbs .swiper-button-next {
        width: 1.75rem;
        height: 1.75rem;
    }

    .d12-new .d12-gallery .d12-gallery__thumbs .swiper-button-prev {
        left: 0.25rem;
    }

    .d12-new .d12-gallery .d12-gallery__thumbs .swiper-button-next {
        right: 0.25rem;
    }
}

@media screen and (max-width: 767px) {

    /* Promo popup */
    .d12-promo {
        padding: 1rem;
    }

    .d12-promo .d12-promo__box {
        padding: 2.5rem 1.25rem 1.75rem;
    }

    .d12-promo .d12-promo__title {
        font-size: 3.5rem;
    }

    .d12-promo .d12-promo__sub {
        font-size: 1.25rem;
    }

    .d12-promo .d12-promo__text {
        margin-top: 1.5rem;
        font-size: 1.0625rem;
        line-height: 1.5rem;
    }

    .d12-promo .d12-promo__form {
        margin-top: 1.5rem;
    }

    .d12-promo .d12-promo__form input[type="submit"] {
        padding: 0.875rem 1rem;
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    /* Page head — centred, tighter rhythm */
    .d12-new .d12-crumbs {
        margin-bottom: 1.25rem;
    }

    /* Centre only when a centred page title follows (shop) — product page stays left-aligned
       (2nd selector = live WooCommerce breadcrumb without .d12-crumbs wrapper) */
    .d12-new .d12-crumbs:has(+ .d12-pagehead) .woocommerce-breadcrumb,
    .d12-new>.woocommerce-breadcrumb:has(+ .d12-pagehead) {
        justify-content: center;
    }

    .d12-new>.woocommerce-breadcrumb {
        margin-bottom: 1.25rem;
    }

    .d12-new nav.woocommerce-pagination {
        margin-top: 2.5rem;
    }

    .d12-new .d12-pagehead {
        padding-bottom: 1.25rem;
        text-align: center;
    }

    .d12-new .d12-pagehead .page-title {
        font-size: 1.75rem;
    }

    .d12-new .d12-shop {
        margin-top: 1.25rem;
    }

    /* Product detail — gallery above summary, not sticky, capped so it
       never fills the whole screen */
    .d12-new .d12-pdetail {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.5rem;
    }

    .d12-new .d12-gallery {
        position: static;
        width: 100%;
        max-width: 36rem;
        margin-inline: auto;
    }

    .d12-new .d12-gallery .d12-gallery__thumbs {
        margin-top: 0.75rem;
    }

    .d12-new .d12-psummary {
        gap: 1.5rem;
    }

    .d12-new .d12-psummary .d12-psummary__tags {
        margin-bottom: 1.25rem;
    }

    /* Live product summary — form blocks + divider follow the tighter 24px rhythm */
    .d12-new .d12-psummary form.d12-cart-form {
        gap: 1.5rem;
    }

    .d12-new .d12-psummary .d12-product-wrapper {
        padding-top: 1.5rem;
    }

    .d12-new .d12-related .d12-pcard .d12-pcard__body>a.button {
        margin-top: 1rem;
    }

    /* Product tabs */
    .d12-new .d12-ptabs {
        margin-top: 3rem;
    }

    /* Related — cards stack, one per row */
    .d12-new .d12-related {
        margin-top: 3rem;
    }

    .d12-new .d12-related .d12-related__head {
        margin-bottom: 1.25rem;
    }

    .d12-new .d12-related .d12-related__title {
        margin-bottom: 0.5rem;
        font-size: 1.75rem;
    }

    .d12-new .d12-related .d12-pgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .d12-new .d12-pcard.d12-pcard--lg .d12-pcard__title,
    .d12-new .d12-related .d12-pcard .d12-pcard__title {
        min-height: 0;
        /* stacked full-width cards — no need to reserve 3 lines */
        margin-bottom: 0.5rem;
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .d12-new .d12-pcard.d12-pcard--lg .d12-pcard__actions,
    .d12-new .d12-related .d12-pcard .d12-pcard__actions {
        padding-top: 1rem;
    }

    .d12-new .d12-ptabs .d12-ptabs__list {
        gap: 2.5rem;
    }

    .d12-new .d12-ptabs .d12-ptabs__tab {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .d12-new .d12-psummary .d12-psummary__title,
    .d12-new .d12-psummary .product_title {
        font-size: 1.75rem;
    }

    /* Grid */
    .d12-new .d12-pgrid {
        column-gap: 1rem;
        row-gap: 1.25rem;
    }
}

@media screen and (max-width: 639px) {

    /* Grid — same 12px gap as live shop grid on mobile */
    .d12-new .d12-pgrid {
        column-gap: 0.75rem;
        row-gap: 0.75rem;
    }

    /* Card */
    .d12-new .d12-pcard {
        gap: 0.75rem;
    }

    .d12-new .d12-pcard .d12-pcard__badges {
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .d12-new .d12-pcard .d12-pcard__eyebrow {
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
    }

    .d12-new .d12-pcard .d12-pcard__title {
        margin-bottom: 0.5rem;
        font-size: 1rem;
        line-height: 1.375rem;
    }

    .d12-new .d12-pcard .d12-pcard__stock {
        font-size: 0.8125rem;
    }

    /* Buttons stack full width */
    .d12-new .d12-pcard .d12-pcard__actions {
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 1rem;
    }

    .d12-new .d12-pcard .d12-pcard__actions .d12-pbtn {
        flex: none;
    }

    /* Live WooCommerce buttons (loose in body) — stack too: Add to cart row 8, Quote row 9 */
    .d12-new .d12-pcard .d12-pcard__body>a.button {
        grid-column: 1 / -1;
        margin-top: 1rem;
    }

    .d12-new .d12-pcard .d12-pcard__body>a.button.afrfqbt {
        grid-row: 9;
        margin-top: 0.5rem;
    }

    .d12-new .d12-pcard .d12-pcard__body:not(:has(> a.add_to_cart_button:not(.afrfqbt)))>a.button.afrfqbt {
        margin-top: 1rem;
    }

    .d12-new .d12-pcard .d12-pcard__body>a.added_to_cart {
        grid-row: 10;
    }
}

@media screen and (max-width: 480px) {

    /* Promo popup — fits a phone screen without scrolling */
    .d12-promo .d12-promo__box {
        padding: 2.25rem 1rem 1.5rem;
    }

    .d12-promo .d12-promo__title {
        font-size: 2.75rem;
    }

    .d12-promo .d12-promo__sub {
        font-size: 1.0625rem;
    }

    .d12-promo .d12-promo__text {
        margin-top: 1rem;
        font-size: 0.9375rem;
        line-height: 1.375rem;
    }

    .d12-promo .d12-promo__form {
        margin-top: 1.25rem;
    }

    .d12-promo .d12-promo__form input[type="email"] {
        font-size: 1rem;
    }

    .d12-promo .d12-promo__decline {
        margin-top: 1rem;
        font-size: 0.875rem;
    }

    .d12-promo .d12-promo__fine {
        margin-top: 1rem;
        font-size: 0.6875rem;
    }

    /* Breadcrumb — keep 3-level trail (product page) on one line */
    .d12-new .d12-crumbs .woocommerce-breadcrumb,
    .d12-new>.woocommerce-breadcrumb {
        font-size: 0.875rem;
    }

    .d12-new .d12-pagehead .page-title {
        font-size: 1.5rem;
    }

    /* Product detail */
    .d12-new .d12-psummary .d12-psummary__title,
    .d12-new .d12-psummary .product_title {
        font-size: 1.5rem;
    }

    .d12-new .d12-psummary .d12-psummary__desc,
    .d12-new .d12-psummary .d12-psummary__disclaimer p,
    .d12-new .d12-orderopt .d12-orderopt__text {
        font-size: 0.9375rem;
        line-height: 1.375rem;
    }

    .d12-new .d12-psummary .d12-psummary__disclaimer,
    .d12-new .d12-orderopt {
        padding: 1rem;
    }

    /* Product tabs */
    .d12-new .d12-ptabs {
        margin-top: 2.5rem;
    }

    /* Related */
    .d12-new .d12-related {
        margin-top: 2.5rem;
    }

    .d12-new .d12-related .d12-related__title {
        font-size: 1.5rem;
    }

    .d12-new .d12-related .d12-related__text {
        font-size: 0.9375rem;
        line-height: 1.375rem;
    }

    .d12-new .d12-ptabs .d12-ptabs__list {
        gap: 2rem;
        padding-bottom: 0.9375rem;
    }

    .d12-new .d12-ptabs .d12-ptabs__tab {
        font-size: 1.125rem;
    }

    .d12-new .d12-ptabs .d12-ptabs__tab::after {
        bottom: -0.9375rem;
    }

    .d12-new .d12-ptabs .d12-ptabs__panel p {
        font-size: 0.9375rem;
        line-height: 1.375rem;
    }

    /* Card */
    .d12-new .d12-pcard .d12-pcard__body {
        padding: 0.5rem;
    }

    .d12-new .d12-pcard .d12-pcard__badges {
        top: 0.375rem;
        left: 0.375rem;
        right: 0.375rem;
    }

    .d12-new .d12-badge {
        padding: 0.1875rem 0.3125rem;
        font-size: 0.6875rem;
        /* 11px floor for legibility */
    }

    .d12-new .d12-pcard .d12-pcard__eyebrow {
        font-size: 0.6875rem;
    }

    .d12-new .d12-pcard .d12-pcard__title {
        font-size: 0.9375rem;
        line-height: 1.25rem;
    }

    .d12-new .d12-pcard .d12-pcard__stock {
        font-size: 0.75rem;
    }

    /* 44px tall: 1 + 12 + 18 + 12 + 1 */
    .d12-new .d12-pcard .d12-pcard__actions .d12-pbtn,
    .d12-new .d12-pcard .d12-pcard__body>a.button {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 375px) {

    /* Product swatches — slightly smaller so 4 still fit per row */
    .d12-new .d12-psummary form.cart.variations_form .tawcvs-swatches .swatch-item-wrapper {
        width: 4rem;
    }

    .d12-new .d12-psummary form.cart.variations_form .tawcvs-swatches .swatch.swatch {
        width: 2.25rem;
        height: 2.25rem;
    }

    .d12-new .d12-crumbs .woocommerce-breadcrumb,
    .d12-new>.woocommerce-breadcrumb {
        gap: 0.25rem;
        font-size: 0.75rem;
    }

    .d12-new .d12-pcard .d12-pcard__eyebrow {
        font-size: 0.6875rem;
        /* 11px floor for legibility */
    }

    .d12-new .d12-pcard .d12-pcard__title {
        font-size: 0.875rem;
        line-height: 1.1875rem;
    }

    .d12-new .d12-pcard .d12-pcard__actions .d12-pbtn,
    .d12-new .d12-pcard .d12-pcard__body>a.button {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
        font-size: 0.6875rem;
    }
}