/* 98-product-card-media.css
 * Product card image handling for LibertyRoots.
 *
 * Why this exists:
 * The legacy Code Snippets setup styled WooCommerce shop cards, product sliders
 * and related products globally. After the migration the cards were stable again,
 * but mixed image ratios still created white stripes inside the fixed product card
 * frame. The default card behavior is now: fill the visual area cleanly.
 *
 * Exceptions:
 * Voucher and gift-card style products must show the full artwork without crop.
 * Preferred production control: add .sd-gutschein-raster to the product raster
 * section or product grid in Enfold. This is more robust than guessing by title.
 * Additional fallbacks still support product classes, known legacy product IDs
 * and a small JS enhancer in assets/js/frontend.js.
 */

:root {
    --lr-product-card-media-ratio: 0.94;
}

/* Shared visual frame for shop archives, landing page sliders and related products. */
#top ul.products li.product .thumbnail_container,
#top .avia-content-slider li.product .thumbnail_container,
#top .related.products li.product .thumbnail_container,
#top .woocommerce.columns-1 li.product .thumbnail_container,
#top .woocommerce.columns-2 li.product .thumbnail_container,
#top .woocommerce.columns-3 li.product .thumbnail_container,
#top .woocommerce.columns-4 li.product .thumbnail_container,
#top .woocommerce.columns-5 li.product .thumbnail_container,
#top .woocommerce.columns-6 li.product .thumbnail_container {
    aspect-ratio: var(--lr-product-card-media-ratio) !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: var(--radius-element-klein) var(--radius-element-klein) 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

#top ul.products li.product .thumbnail_container > a,
#top .avia-content-slider li.product .thumbnail_container > a,
#top .related.products li.product .thumbnail_container > a,
#top .woocommerce li.product .thumbnail_container > a {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/* Default product cards: fill the frame. This removes white top, bottom, left or right strips from mixed-ratio product images. */
#top ul.products li.product .thumbnail_container img,
#top .avia-content-slider li.product .thumbnail_container img,
#top .related.products li.product .thumbnail_container img,
#top .woocommerce li.product .thumbnail_container img,
#top ul.products li.product .thumbnail_container a img,
#top .avia-content-slider li.product .thumbnail_container a img,
#top .related.products li.product .thumbnail_container a img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    background: #ffffff !important;
}

/* Hover or secondary product images must follow the same media behavior. */
#top ul.products li.product .thumbnail_container .secondary-image img,
#top .avia-content-slider li.product .thumbnail_container .secondary-image img,
#top .related.products li.product .thumbnail_container .secondary-image img,
#top ul.products li.product .thumbnail_container .avia-product-hover-image img,
#top .avia-content-slider li.product .thumbnail_container .avia-product-hover-image img,
#top .related.products li.product .thumbnail_container .avia-product-hover-image img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Full-artwork exceptions. Gutscheine and comparable voucher products should never be cropped in product sliders. */
#top .sd-gutschein-raster li.product .thumbnail_container img,
#top .sd-gutschein-raster .product .thumbnail_container img,
#top .sd-gutschein-raster .thumbnail_container img,
#top li.product.lr-product-card--contain-image .thumbnail_container img,
#top li.product.product_cat-gutschein .thumbnail_container img,
#top li.product.product_cat-gutscheine .thumbnail_container img,
#top li.product.product_cat-geschenkgutschein .thumbnail_container img,
#top li.product.product_cat-geschenkgutscheine .thumbnail_container img,
#top li.product.product_cat-voucher .thumbnail_container img,
#top li.product.product_cat-gift-card .thumbnail_container img,
#top li.product.post-22731 .thumbnail_container img,
#top li.product.post-22862 .thumbnail_container img,
#top li.product.post-22865 .thumbnail_container img,
#top li.product.post-22868 .thumbnail_container img,
#top li.product.post-22226 .thumbnail_container img,
#top li.product.post-22262 .thumbnail_container img,
#top li.product.post-22266 .thumbnail_container img,
#top li.product.post-22268 .thumbnail_container img {
    object-fit: contain !important;
    object-position: center center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
}

/* Ensure the image frame still looks intentional when contain mode is used. */
#top .sd-gutschein-raster li.product .thumbnail_container,
#top .sd-gutschein-raster .product .thumbnail_container,
#top .sd-gutschein-raster .thumbnail_container,
#top li.product.lr-product-card--contain-image .thumbnail_container,
#top li.product.product_cat-gutschein .thumbnail_container,
#top li.product.product_cat-gutscheine .thumbnail_container,
#top li.product.product_cat-geschenkgutschein .thumbnail_container,
#top li.product.product_cat-geschenkgutscheine .thumbnail_container,
#top li.product.product_cat-voucher .thumbnail_container,
#top li.product.product_cat-gift-card .thumbnail_container,
#top li.product.post-22731 .thumbnail_container,
#top li.product.post-22862 .thumbnail_container,
#top li.product.post-22865 .thumbnail_container,
#top li.product.post-22868 .thumbnail_container,
#top li.product.post-22226 .thumbnail_container,
#top li.product.post-22262 .thumbnail_container,
#top li.product.post-22266 .thumbnail_container,
#top li.product.post-22268 .thumbnail_container {
    background: #ffffff !important;
}


/* Enfold product grids manually marked as voucher/gift-card rasters.
 * This class should be placed on the Avia product grid or surrounding section.
 * It is the preferred long-term control because it avoids brittle title or ID matching.
 */
#top .sd-gutschein-raster .thumbnail_container > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#top .sd-gutschein-raster .thumbnail_container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* ============================================================
 * v10: Manual voucher raster parity for Avia product sliders.
 *
 * Real Enfold markup places .thumbnail_container inside
 * .woocommerce-LoopProduct-link, not the other way around. The earlier v9 rule
 * targeted .thumbnail_container > a, which cannot match this slider structure.
 * In manually marked voucher rasters the artwork must keep its natural height
 * and must not be cropped into the standard streetwear card ratio.
 *
 * Usage: add .sd-gutschein-raster to the Avia product slider, product grid or
 * surrounding section. Normal product sliders remain full-bleed cover cards.
 * ============================================================ */
#top .sd-gutschein-raster.avia-product-slider-container .avia-content-slider-inner,
#top .sd-gutschein-raster .avia-product-slider-container .avia-content-slider-inner {
    height: auto !important;
    min-height: 0 !important;
}

#top .sd-gutschein-raster.avia-product-slider-container ul.products,
#top .sd-gutschein-raster .avia-product-slider-container ul.products,
#top .sd-gutschein-raster ul.products.slide-entry-wrap {
    align-items: stretch !important;
}

#top .sd-gutschein-raster li.product .inner_product,
#top .sd-gutschein-raster .product .inner_product {
    height: auto !important;
}

#top .sd-gutschein-raster li.product .woocommerce-LoopProduct-link,
#top .sd-gutschein-raster .product .woocommerce-LoopProduct-link {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

#top .sd-gutschein-raster li.product .thumbnail_container,
#top .sd-gutschein-raster .product .thumbnail_container,
#top .sd-gutschein-raster .thumbnail_container {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    background: #ffffff !important;
    border-radius: var(--radius-element-klein) var(--radius-element-klein) 0 0 !important;
}

#top .sd-gutschein-raster li.product .thumbnail_container img,
#top .sd-gutschein-raster .product .thumbnail_container img,
#top .sd-gutschein-raster .thumbnail_container img,
#top .sd-gutschein-raster li.product .thumbnail_container img.wp-post-image,
#top .sd-gutschein-raster li.product .thumbnail_container img.avia-product-hover {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
    background: #ffffff !important;
}

/* Keep Enfold hover image behavior usable inside voucher rasters without cropping. */
#top .sd-gutschein-raster li.product .thumbnail_container img.avia-product-hover,
#top .sd-gutschein-raster .product .thumbnail_container img.avia-product-hover {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: auto !important;
    opacity: 0 !important;
    z-index: 2 !important;
}

#top .sd-gutschein-raster li.product .thumbnail_container:hover img.avia-product-hover,
#top .sd-gutschein-raster .product .thumbnail_container:hover img.avia-product-hover,
#top .sd-gutschein-raster li.product .woocommerce-LoopProduct-link:hover .thumbnail_container img.avia-product-hover,
#top .sd-gutschein-raster .product .woocommerce-LoopProduct-link:hover .thumbnail_container img.avia-product-hover {
    opacity: 1 !important;
}

/* Products that are individually marked as contain-image but are not inside a
 * manual voucher raster keep the fixed card frame. This preserves category pages
 * and prevents unexpected layout jumps in mixed product sections.
 */
#top li.product.lr-product-card--contain-image:not(.product_cat-gutscheine) .thumbnail_container img {
    object-fit: contain !important;
}

/* ============================================================
 * v12: Full height voucher raster expansion
 * ============================================================
 * Voucher grids with .sd-gutschein-raster are allowed to become taller than
 * regular streetwear product cards. This is intentional because voucher artwork
 * has a document-like ratio and should be shown fully instead of being forced
 * into the standard product card frame.
 */
#top .sd-gutschein-raster.avia-product-slider-container,
#top .sd-gutschein-raster .avia-product-slider-container,
#top .sd-gutschein-raster.avia-product-slider-container .avia-content-slider-inner,
#top .sd-gutschein-raster .avia-product-slider-container .avia-content-slider-inner,
#top .sd-gutschein-raster .avia-content-slider-inner,
#top .sd-gutschein-raster ul.products,
#top .sd-gutschein-raster ul.products.slide-entry-wrap,
#top .sd-gutschein-raster .slide-entry-wrap,
#top .sd-gutschein-raster li.product,
#top .sd-gutschein-raster .product,
#top .sd-gutschein-raster li.product .inner_product,
#top .sd-gutschein-raster .product .inner_product,
#top .sd-gutschein-raster li.product .woocommerce-LoopProduct-link,
#top .sd-gutschein-raster .product .woocommerce-LoopProduct-link {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

#top .sd-gutschein-raster li.product .thumbnail_container,
#top .sd-gutschein-raster .product .thumbnail_container,
#top .sd-gutschein-raster .thumbnail_container {
    aspect-ratio: unset !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

#top .sd-gutschein-raster li.product .thumbnail_container img.wp-post-image,
#top .sd-gutschein-raster .product .thumbnail_container img.wp-post-image,
#top .sd-gutschein-raster li.product .thumbnail_container img:not(.avia-product-hover),
#top .sd-gutschein-raster .product .thumbnail_container img:not(.avia-product-hover) {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
}

#top .sd-gutschein-raster li.product .thumbnail_container img.avia-product-hover,
#top .sd-gutschein-raster .product .thumbnail_container img.avia-product-hover {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
}

#top .sd-gutschein-raster .inner_product_header,
#top .sd-gutschein-raster li.product .inner_product_header {
    clear: both !important;
}


/* Product card shell and slider card parity.
 * Moved from the former 97-legacy-parity.css cleanup layer into the product
 * media module. Image sizing itself is handled by the cover/contain rules in
 * this file below and must stay there to avoid global contain behavior.
 */
#top ul.products .product .inner_product,
#top .avia-content-slider .product .inner_product,
#top .related.products .product .inner_product {
    border-radius: var(--radius-element-klein) !important;
    transition: var(--uebergang-button) !important;
    border: none !important;
    overflow: hidden !important;
}

#top ul.products .product .inner_product:hover,
#top .avia-content-slider .product .inner_product:hover,
#top .related.products .product .inner_product:hover {
    box-shadow: var(--button-3d-hover) !important;
    -webkit-box-shadow: var(--button-3d-hover) !important;
    -moz-box-shadow: var(--button-3d-hover) !important;
}

#top .inner_product_header,
#top ul.products .product .inner_product_header,
#top .avia-content-slider .product .inner_product_header,
#top .related.products .product .inner_product_header {
    background: transparent !important;
    min-height: 70px !important;
    padding: 5px !important;
}