/*
 * BigDIAMOND PDP responsive layer (390px canonical phone viewport).
 * Loaded only on is_product(), after bigdiamond-product-page.css.
 * Rules are grouped by GeneratePress' canonical tiers: the stacked layout
 * runs to 1024px (phone and tablet share it), desktop starts at 1025px.
 */

@media (max-width: 1024px) {
    /*
     * docs/DESIGN.md caps radius at 4px and forbids shadows site-wide. This
     * file is the one documented exception: the gallery/thumbnail/CTA chrome
     * on the mobile PDP reference screenshot uses larger radii. Scoped to
     * .bd-pdp-mobile so it can never leak into catalogue, cart, or any other
     * route.
     */
    .bd-pdp-mobile {
        --bd-pdp-radius-sm: 6px;
        --bd-pdp-radius-md: 8px;
    }

    /* Gallery: outer inset ~8-12px, image never cropped, height reserved
       to avoid CLS on the LCP image. */
    .bd-pdp-mobile .woocommerce-product-gallery {
        margin-inline: 10px;
        border-radius: var(--bd-pdp-radius-md);
        overflow: hidden;
        position: relative;
    }

    /* Every product photo in the catalogue is square (verified via
       wp_get_attachment_metadata across 40 random products - all 1:1), so the
       stage is square too: the image then fills it exactly, full size, with
       no crop and no letterbox band. A fixed vh height used to drive this
       instead and left whitespace above/below square photos - see the
       replaced rule in git history for that approach.

       aspect-ratio can only be set on .flex-viewport: its width is the real,
       100%-of-parent box (measured 310px on a 390px phone). The wrapper's OWN
       width is FlexSlider's blown-up track - `width: 1600%` for a 16-panel
       track, so applying aspect-ratio there would compute against that, not
       the visible box. The wrapper and each slide panel instead inherit the
       resulting pixel height by percentage, chaining down from the viewport's
       now-definite height - which is also what keeps this a CLS guard: the
       box is sized before any image loads. */
    .bd-pdp-mobile .woocommerce-product-gallery .flex-viewport {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .bd-pdp-mobile .woocommerce-product-gallery__wrapper,
    .bd-pdp-mobile .woocommerce-product-gallery__image {
        height: 100%;
    }

    /* WooCommerce wraps the slide image in an unclassed <a>, which picks up a
       3/2 aspect-ratio from the base gallery rules. The heights above never
       reached it, so `height: 100%` on the image resolved against 207px and
       the photo rendered 310x207 inside a 591px stage. */
    .bd-pdp-mobile .woocommerce-product-gallery__image > a {
        display: block;
        height: 100%;
        aspect-ratio: auto;
    }

    .bd-pdp-mobile .woocommerce-product-gallery__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .bd-pdp-mobile .woocommerce-product-gallery .flex-control-thumbs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-inline: 10px;
        margin-top: 10px;
    }

    .bd-pdp-mobile .woocommerce-product-gallery .flex-control-thumbs li {
        aspect-ratio: 1 / 1;
    }

    .bd-pdp-mobile .woocommerce-product-gallery .flex-control-thumbs img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--bd-pdp-radius-sm);
        border: 1.5px solid transparent;
        transition: border-color 200ms ease-out;
    }

    .bd-pdp-mobile .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
        border-color: var(--bd-gold);
    }

    /* Video teaser under gallery when not inside thumbnail rail */
    .bd-pdp-mobile .bd-product-video-teaser {
        border-radius: var(--bd-pdp-radius-sm);
        margin: 12px 10px 0;
        overflow: hidden;
    }

    .bd-pdp-mobile .bd-product-video-teaser__icon {
        width: 32px;
        height: 32px;
    }

}

@media (max-width: 1024px) {
    .bd-pdp-mobile .woocommerce-product-gallery {
        position: relative;
    }

    .bd-pdp-gallery-wishlist {
        position: absolute;
        top: 12px;
        left: 20px;
        z-index: 5;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--bd-primary);
    }

    .bd-pdp-gallery-wishlist__icon {
        width: 24px;
        height: 24px;
    }

    .bd-pdp-gallery-wishlist.is-active,
    .bd-pdp-gallery-wishlist[aria-pressed="true"] {
        color: var(--bd-gold) !important;
    }

    .bd-pdp-gallery-wishlist.is-active .bd-pdp-gallery-wishlist__icon,
    .bd-pdp-gallery-wishlist[aria-pressed="true"] .bd-pdp-gallery-wishlist__icon {
        color: var(--bd-gold) !important;
    }

    .bd-pdp-gallery-wishlist.is-active svg path,
    .bd-pdp-gallery-wishlist[aria-pressed="true"] svg path {
        fill: currentColor !important;
        stroke: currentColor !important;
    }
}

@media (max-width: 1024px) {
    .bd-pdp-mobile .bd-accordion__trigger {
        display: flex;
        align-items: center;
        gap: var(--bd-space-xs);
        min-height: 58px;
        width: 100%;
        border: none;
        background: none;
        border-bottom: 1px solid #e9e4de;
        font-size: 13.5px;
        text-align: left;
    }

    .bd-pdp-mobile .bd-accordion__icon {
        width: 20px;
        height: 20px;
        flex: none;
    }

    /* bigdiamond-woocommerce-product.css paints a legacy plus/minus
       expand-indicator via ::before/::after on .bd-accordion__icon. The
       mobile redesign injects a real SVG into that same element (see
       initAccordionIcons() in bigdiamond-product-mobile.js), so the two
       overlap. Suppressed only inside the mobile PDP scope — other
       accordions elsewhere in the theme keep the plus/minus style. */
    .bd-pdp-mobile .bd-accordion__icon::before,
    .bd-pdp-mobile .bd-accordion__icon::after {
        content: none;
    }

    .bd-pdp-mobile .bd-accordion__trigger::after {
        content: '';
        margin-inline-start: auto;
        width: 10px;
        height: 10px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform 200ms ease-out;
    }

    .bd-pdp-mobile .bd-accordion__trigger[aria-expanded="true"]::after {
        transform: rotate(-135deg);
    }

    .bd-pdp-mobile .bd-accordion__item .woocommerce-Tabs-panel {
        transition: none;
    }
}

@media (max-width: 1024px) {
    .bd-product-benefits-block {
        display: block;
        margin: var(--bd-space-md, 16px) 0;
        padding: 16px 14px;
        background: var(--bd-surface-lowest, #FFFDF9);
        border: 1px solid var(--bd-outline-variant, #E6E0D6);
        border-radius: var(--bd-radius, 4px);
        box-sizing: border-box;
    }

    .bd-product-top .bd-product-benefits-strip__list,
    .bd-product-benefits-strip__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 10px;
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .bd-product-benefits-tile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .bd-product-benefits-tile__icon-wrap {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(184, 146, 79, 0.10);
        color: var(--bd-gold, #B8924F);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .bd-product-benefits-tile__icon {
        width: 18px;
        height: 18px;
    }

    .bd-product-benefits-tile__content {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .bd-product-benefits-tile__title {
        font-family: var(--bd-sans, "Manrope", sans-serif);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--bd-primary, #0F342A);
    }

    .bd-product-benefits-tile__detail {
        font-family: var(--bd-sans, "Manrope", sans-serif);
        font-size: 11px;
        font-weight: 450;
        line-height: 1.35;
        color: var(--bd-muted, #58625B);
    }

    .bd-pdp-benefits-details__timing-grid,
    .bd-pdp-trust-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bd-pdp-shipping-method-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bd-pdp-shipping-method-item__pricing {
        align-items: flex-start;
        text-align: left;
    }

    .bd-pdp-payment-badges {
        gap: 6px;
    }

    .bd-pdp-payment-badge {
        font-size: 10.5px;
        padding: 4px 8px;
        height: 34px;
    }
}

@media (max-width: 1024px) {
    .bd-commerce.woocommerce .bd-product-recommendations ul.products,
    .bd-commerce.woocommerce-page .bd-product-recommendations ul.products {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 1024px) {
    .bd-product-trust-strip,
    .bd-product-evidence-strip {
        list-style: none;
        margin: var(--bd-space-lg) 0 0;
        padding: var(--bd-space-md) 20px;
        background: var(--bd-surface);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--bd-space-sm);
        text-align: center;
    }

    .bd-product-trust-strip li,
    .bd-product-evidence-strip li {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .bd-product-trust-strip__icon,
    .bd-product-evidence-strip__icon {
        width: 32px;
        height: 32px;
        color: var(--bd-gold);
    }

    .bd-product-trust-strip span,
    .bd-product-evidence-strip span {
        font-size: 11px;
        line-height: 1.3;
    }
}

@media (max-width: 1024px) {
    .bd-product-final-benefits {
        display: block;
        list-style: none;
        margin: var(--bd-space-lg) 0 0;
        padding: 0;
        background: var(--bd-surface-bright);
    }

    .bd-product-final-benefits li {
        display: flex;
        align-items: center;
        gap: var(--bd-space-xs);
        min-height: 64px;
        padding-inline: 20px;
        border-bottom: 1px solid #e9e4de;
    }

    .bd-product-final-benefits li:last-child {
        border-bottom: none;
    }

    .bd-product-final-benefits__icon {
        width: 22px;
        height: 22px;
        flex: none;
        color: var(--bd-primary);
    }

    .bd-product-final-benefits span {
        font-size: 12.5px;
    }
}

@media (max-width: 1024px) {
    .bd-pdp-mobile div.product .summary {
        padding-inline: 20px;
    }

    .bd-pdp-mobile .product_title {
        font-family: var(--bd-serif);
        font-size: 30px;
        line-height: 1.08;
        font-weight: 600;
        letter-spacing: -0.01em;
        margin: var(--bd-space-sm) 0 4px;
    }

    .bd-pdp-mobile .bd-product-card__meta--single {
        font-family: var(--bd-sans);
        font-size: 13.5px;
        color: var(--bd-muted);
        margin-bottom: var(--bd-space-sm);
    }

    /*
     * Specificity note: bigdiamond-woocommerce-product.css's
     * ".bd-commerce.single-product .summary .price" (color) and
     * bigdiamond-product-page.css's
     * ".bd-product-page.single-product .summary .price" (font-size, inside
     * its own max-width:680px block) are each 4 classes (0,4,0). A plain
     * ".bd-pdp-mobile .summary .price" (0,3,0) loses that cascade battle
     * even though this file loads last, so every selector touching .price
     * here is intentionally compounded on the real <body> classes
     * (.bd-commerce.bd-product-page.bd-pdp-mobile, 5 classes) to win
     * outright rather than rely on source-order tie-breaking.
     */
    .bd-commerce.bd-product-page.bd-pdp-mobile .summary .price {
        font-family: var(--bd-serif);
        font-size: 28px;
        color: var(--bd-text-strong);
    }

    .bd-commerce.bd-product-page.bd-pdp-mobile .summary .price del {
        color: var(--bd-muted);
        opacity: 1;
        font-size: 0.7em;
    }

    .bd-commerce.bd-product-page.bd-pdp-mobile .summary .price ins {
        text-decoration: none;
        color: var(--bd-text-strong);
    }

    .bd-pdp-mobile .bd-product-tax-note {
        font-size: 11.5px;
        color: var(--bd-muted);
        margin-top: 2px;
    }

    .bd-pdp-mobile .woocommerce-product-details__short-description,
    .bd-pdp-mobile .summary > .woocommerce-product-details__short-description p {
        font-size: 13.5px;
        line-height: 1.6;
        margin-top: var(--bd-space-sm);
    }

    .bd-pdp-mobile .summary p.stock {
        font-size: 12.5px;
        display: flex;
        align-items: center;
        gap: 6px;
        margin: var(--bd-space-sm) 0;
    }

    .bd-pdp-mobile .summary p.stock.in-stock::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2f8f4e;
        display: inline-block;
    }
}

@media (max-width: 1024px) {
    .bd-pdp-mobile.single-product .bd-product-consultation-cta {
        gap: 0.625rem;
        margin-bottom: 0.875rem;
        padding: 0.75rem;
    }

    .bd-pdp-mobile.single-product .bd-product-consultation-cta__link {
        width: 100%;
        min-height: 52px;
    }

    .bd-pdp-mobile div.product form.cart .single_add_to_cart_button.button.alt {
        width: 100%;
        height: 51px;
        border-radius: var(--bd-pdp-radius-sm);
        background: var(--bd-primary);
        color: var(--bd-on-primary);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        box-shadow: none;
    }

    .bd-product-top .bd-product-benefits-strip__list,
    .bd-product-benefits-strip__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet shares the phone's stacked layout, but not its full bleed:
       without a cap, 390px-tuned type and spacing stretch across 1024px and
       read as sparse. One container constraint instead of a third set of
       tunings. */
    /* .bd-product-top needs `.single-product` here: without it this selector
       is (0,3,1) and loses to bigdiamond-product-page.css's (0,4,1) width
       rule, which left the container at 832px on a 1024px tablet while the
       three strips below - which have no competitor - correctly took 720px. */
    .bd-pdp-mobile.single-product div.product .bd-product-top,
    .bd-pdp-mobile .bd-product-benefits-strip,
    .bd-pdp-mobile .bd-product-trust-strip,
    .bd-pdp-mobile .bd-product-evidence-strip,
    .bd-pdp-mobile .bd-product-final-benefits {
        width: min(100%, 720px);
        margin-inline: auto;
    }
}

@media (min-width: 1025px) {
    /* The strips print at every viewport (inc/product-page.php hooks them
       unconditionally). Mobile sizing lives in the stacked tier above; these
       are their desktop counterparts. */

    /* The button is rendered before the gallery, then moved into the actions
       row by progressive enhancement. Keep its SSR origin out of the product
       grid so that move cannot shift the gallery and summary after paint. */
    .bd-pdp-mobile.single-product div.product .bd-product-top > .bd-pdp-gallery-wishlist {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 5;
        width: 44px;
        height: 44px;
    }

    /* Owner correction: the heart sat in the gallery corner at every width.
       On desktop it now moves into the actions row beside "Porownaj"
       (initWishlistPlacement() in bigdiamond-product-gallery.js does the DOM
       move; this styles it once it lands there). The stacked tier keeps the
       gallery-corner overlay in its own block above - unchanged. */
    .bd-product-secondary-actions .bd-pdp-gallery-wishlist {
        position: static;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border: 1px solid var(--bd-primary);
        color: var(--bd-primary);
    }

    .bd-product-secondary-actions .bd-pdp-gallery-wishlist:hover,
    .bd-product-secondary-actions .bd-pdp-gallery-wishlist:focus,
    .bd-product-secondary-actions .bd-pdp-gallery-wishlist:focus-visible,
    .bd-product-secondary-actions .bd-pdp-gallery-wishlist:active {
        border-color: var(--bd-gold) !important;
        color: var(--bd-gold) !important;
    }

    .bd-product-secondary-actions .bd-pdp-gallery-wishlist__icon {
        width: 24px;
        height: 24px;
    }

    .bd-product-secondary-actions .bd-pdp-gallery-wishlist.is-active,
    .bd-product-secondary-actions .bd-pdp-gallery-wishlist[aria-pressed="true"] {
        border-color: var(--bd-gold) !important;
        color: var(--bd-gold) !important;
    }

    .bd-product-secondary-actions .bd-pdp-gallery-wishlist.is-active .bd-pdp-gallery-wishlist__icon,
    .bd-product-secondary-actions .bd-pdp-gallery-wishlist[aria-pressed="true"] .bd-pdp-gallery-wishlist__icon {
        color: var(--bd-gold) !important;
    }

    .bd-product-secondary-actions .bd-pdp-gallery-wishlist.is-active svg path,
    .bd-product-secondary-actions .bd-pdp-gallery-wishlist[aria-pressed="true"] svg path {
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .bd-product-benefits-block {
        display: block;
    }

    .bd-product-top .bd-product-benefits-strip__list,
    .bd-product-benefits-strip__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .bd-product-trust-strip,
    .bd-product-evidence-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--bd-space-lg);
        margin: var(--bd-space-xl) 0 0;
        padding: var(--bd-space-lg) var(--bd-space-md);
        background: var(--bd-surface);
        list-style: none;
        text-align: center;
    }

    .bd-product-trust-strip li,
    .bd-product-evidence-strip li {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .bd-product-trust-strip__icon,
    .bd-product-evidence-strip__icon {
        width: 34px;
        height: 34px;
        color: var(--bd-gold);
    }

    .bd-product-trust-strip span,
    .bd-product-evidence-strip span {
        font-size: 13px;
        line-height: 1.4;
    }

    .bd-product-final-benefits {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin: var(--bd-space-xl) 0 0;
        padding: 0;
        list-style: none;
        background: var(--bd-surface-bright);
    }

    .bd-product-final-benefits li {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--bd-space-xs);
        min-height: 72px;
        padding-inline: var(--bd-space-md);
        border-right: 1px solid #e9e4de;
    }

    .bd-product-final-benefits li:last-child {
        border-right: none;
    }

    .bd-product-final-benefits__icon {
        width: 22px;
        height: 22px;
        flex: none;
        color: var(--bd-primary);
    }

    .bd-product-final-benefits span {
        font-size: 13px;
    }
}

/* Video tile inside the native thumbnail rail.
 *
 * assets/js/bigdiamond-product-mobile.js moves the existing teaser into
 * .flex-control-thumbs at every width, so this styling is tier-independent -
 * the stacked rail is a 4-column grid and the desktop rail a flex column, and
 * both need the same square tile.
 *
 * Inside the rail the teaser is a THUMBNAIL, not the standalone card it is
 * elsewhere: its two-column grid collapsed the copy block to zero width and
 * pushed the stage outside the tile (measured 96x72 stage inside a 65x65 tile
 * at 390px). Only the stage is shown here; the copy stays with the standalone
 * presentation.
 */
.bd-pdp-mobile .flex-control-thumbs li.bd-video-thumb {
    aspect-ratio: 1 / 1;
    flex: none;
    min-height: 0;
    list-style: none;
}

.bd-pdp-mobile .flex-control-thumbs .bd-product-video-teaser {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.bd-pdp-mobile .flex-control-thumbs .bd-product-video-teaser__copy {
    display: none;
}

.bd-pdp-mobile .flex-control-thumbs .bd-product-video-teaser__stage {
    display: block;
    width: 100%;
    height: 100%;
}

.bd-pdp-mobile .flex-control-thumbs .bd-product-video-teaser__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}