/**
 * Florify — single product page: gallery carousel and load stability.
 *
 * Loaded on product pages only, after style.css (see includes/single-product.php).
 * Reserves room for things that render after first paint, so the summary doesn't jump down.
 */


/* PRODUCT ACCORDION
   The panel that's open on load shows at full height straight away, instead of animating
   open when js/product-accordion.js runs. */

.florify-accordion__panel:not([hidden]) .florify-accordion__panel-inner {max-height: none;opacity: 1;}


/* WISHLIST BUTTON
   YITH renders the button with JS into an empty block next to the Klarna bubble. Until then the
   block reserves the button's height (button height + its margins from style.css at each breakpoint). */

.single-product .yith-add-to-wishlist-button-block--single:empty {min-height: 77px;}


/* PAYPAL PAY LATER MESSAGE
   PayPal injects a one-line message after load. Reserve its rendered height (padding included). */

.single-product .summary .ppcp-messages {min-height: 42px;}


/* GALLERY THUMBNAILS: product badges
   YITH adds its badge to the first thumbnail too (the others are kept badge-free in
   includes/single-product.php). The badge belongs on the main image only. */

.single-product .product-thumbs .yith-wcbm-badge {display: none;}


/* GALLERY IMAGES WITH A BADGE
   style.css gives badge wrappers and their images transition: all (for the product cards). In the
   gallery that made the first image and thumbnail animate to their new size whenever the layout
   changed, e.g. resizing the window, while the others snapped straight to it. */

.single-product .woocommerce-product-gallery .container-image-and-badge {transition: none;}
.single-product .woocommerce-product-gallery .container-image-and-badge img {transition: border-color 0.1s ease;}


/* GALLERY CAROUSEL (999px and below)
   Salient turns the gallery into a carousel. Slides are 1 / 1.1 and narrower than the carousel so the
   next image peeks in (js/single-product-gallery.js lines them up on the left). They're capped at 590px
   wide (650px tall) so the image doesn't fill a tablet screen. A product with one image fills the width,
   up to 650px tall.
   Before the carousel starts, the slides sit in the same row, so nothing moves when it does. */

@media only screen and (max-width: 999px) {
    .woocommerce.single-product div.product[data-gallery-style="left_thumb_sticky"] div.images .product-slider .slide {width: min(85%, 590px) !important;height: auto !important;aspect-ratio: 1 / 1.1;margin: 0 var(--florify-gap) 0 0 !important;}
    .woocommerce.single-product div.product[data-gallery-style="left_thumb_sticky"] div.images[data-has-gallery-imgs="false"] .product-slider .slide {width: 100% !important;max-height: 650px;margin-right: 0 !important;}
    .woocommerce.single-product div.product[data-gallery-style="left_thumb_sticky"] div.images .product-slider .slide img {width: 100%;}

    .woocommerce.single-product div.product[data-gallery-style="left_thumb_sticky"] div.images .product-slider .slider:not(.flickity-enabled) {display: flex;overflow: hidden;}
    .woocommerce.single-product div.product[data-gallery-style="left_thumb_sticky"] div.images .product-slider .slider:not(.flickity-enabled) > .slide {position: relative;opacity: 1;z-index: auto;flex: none;}

    /* Every slide is the same height, so the carousel height doesn't need to animate (it lagged behind when resizing). */
    .single-product .product-slider .flickity-viewport {transition: none;}
}


@media only screen and (max-width: 1800px) {
    .single-product .yith-add-to-wishlist-button-block--single:empty {min-height: 79px;}
}

@media only screen and (max-width: 1400px) {
    .single-product .yith-add-to-wishlist-button-block--single:empty {min-height: 73px;}
    .single-product .summary .ppcp-messages {min-height: 41px;}
}

@media only screen and (max-width: 999px) {
    .single-product .summary .ppcp-messages {min-height: 37px;}
}

@media only screen and (max-width: 690px) {
    .single-product .yith-add-to-wishlist-button-block--single:empty {min-height: 75px;}
    .single-product .summary .ppcp-messages {min-height: 34px;}
}

@media only screen and (max-width: 479px) {
    .single-product .yith-add-to-wishlist-button-block--single:empty {min-height: 67px;}
    .single-product .summary .ppcp-messages {min-height: 33px;}
}

@media only screen and (max-width: 350px) {
    .single-product .yith-add-to-wishlist-button-block--single:empty {min-height: 52px;}
}