/* LUNE & LUNA: never crop product gallery / lightbox / shop cards.
   Letterbox bars must match page (white/transparent) — never gray #f5f5f5. */

/* --- Block product gallery: large image --- */
.wc-block-product-gallery-large-image img,
.wc-block-product-gallery-large-image video,
.wc-block-product-gallery-large-image .wc-block-components-product-image img,
.wc-block-product-gallery-large-image .wc-block-components-product-image video,
.wc-block-product-gallery-large-image .wc-block-woocommerce-product-gallery-large-image__image,
.wc-block-components-product-image img,
.wc-block-components-product-image video,
.wp-block-woocommerce-product-image img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
}

/* Force contain even when block uses non-auto aspect-ratio classes */
.wc-block-components-product-image--aspect-ratio-3-4 img,
.wc-block-components-product-image--aspect-ratio-4-3 img,
.wc-block-components-product-image--aspect-ratio-1 img,
.wc-block-components-product-image--aspect-ratio-3-2 img,
.wc-block-components-product-image--aspect-ratio-2-3 img,
.wc-block-components-product-image--aspect-ratio-16-9 img,
.wc-block-components-product-image--aspect-ratio-9-16 img,
.wc-block-components-product-image--aspect-ratio-auto img {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* Letterbox wrappers: match page background (white), never gray bars */
.wc-block-product-gallery-large-image,
.wc-block-product-gallery-large-image__wrapper,
.wc-block-product-gallery-large-image .wc-block-components-product-image,
.wc-block-product-gallery-large-image .wc-block-components-product-image__inner-container,
.wp-block-woocommerce-product-gallery,
.wp-block-woocommerce-product-gallery-large-image,
.wc-block-product-gallery,
.wc-block-product-gallery__inner-blocks {
  background: transparent !important;
  background-color: transparent !important;
}

/* Single-product gallery: keep natural/auto frame — NEVER force catalog 1:1.
   WC sets aspect-ratio 3/4 on __wrapper via --wc-block-product-gallery-large-image-ratio-*
   + align-items:center, which letterboxes the contain image and leaves a large white
   field ABOVE the packshot (gallery top no longer lines up with the title). */
.single-product .wc-block-product-gallery-large-image,
.single-product .wc-block-product-gallery-large-image__wrapper,
.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image,
.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image__inner-container,
.single-product .wp-block-woocommerce-product-gallery-large-image,
.single-product .woocommerce-product-gallery__image,
.single-product .flex-viewport {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: none !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Top-align packshot so gallery image top ≈ title top.
   WC inlines style="object-fit:cover;aspect-ratio:3/4;" on the <img>.
   IMPORTANT: height:auto + aspect-ratio:auto was resolving to ~1500px used height
   (huge white void under packshot before Beskrivelse tabs). Packshots are square
   (width/height attrs + natural); force 1/1 so width:100% → natural square height.
   object-fit:contain keeps non-square media uncropped. */
.single-product .wc-block-product-gallery-large-image img,
.single-product .wc-block-product-gallery-large-image video,
.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image img,
.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image video,
.single-product .wc-block-woocommerce-product-gallery-large-image__image,
.single-product .wc-block-components-product-image--aspect-ratio-3-4 img,
.single-product .wc-block-components-product-image--aspect-ratio-auto img,
.single-product img.wc-block-woocommerce-product-gallery-large-image__image {
  aspect-ratio: auto !important;
  height: auto !important;
  width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: top center !important;
  background: transparent !important;
}

/* Product-image block still gets --aspect-ratio-3-4 class; force auto frame */
.single-product .wc-block-components-product-image--aspect-ratio-3-4,
.single-product .wc-block-components-product-image--aspect-ratio-3-4 .wc-block-components-product-image__inner-container {
  aspect-ratio: auto !important;
  height: auto !important;
}

/* Do NOT force 1:1 vars (that reserved a tall square → huge white under packshot).
   Neutralize ratio vars and size frame to content height.
   Also kill flex-grow/height:100% chain that stretched gallery to ~1500px. */
.single-product .wc-block-product-gallery,
.single-product .wp-block-woocommerce-product-gallery {
  --wc-block-product-gallery-large-image-ratio-width: initial !important;
  --wc-block-product-gallery-large-image-ratio-height: initial !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start !important;
  align-items: flex-start !important;
}
.single-product .wc-block-product-gallery-large-image,
.single-product .wp-block-woocommerce-product-gallery-large-image {
  flex-grow: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.single-product .wc-block-product-gallery-large-image__container,
.single-product .wc-block-product-gallery-large-image__wrapper,
.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image,
.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image__inner-container {
  aspect-ratio: auto !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: none !important;
  align-items: flex-start !important;
}
.single-product main .wp-block-columns.alignwide {
  align-items: flex-start !important;
}

/* Columns: keep gallery + summary tops aligned */
.single-product main .wp-block-columns.alignwide > .wp-block-column {
  align-self: flex-start !important;
}

/* Breadcrumbs → product row: theme uses padding-top xx-large (~3–4.5rem). Tighten. */
body.single-product main#wp--skip-link--target.wp-block-group,
body.single-product main.wp-block-group {
  padding-top: var(--wp--preset--spacing--medium, 1.5rem) !important;
}

@media (max-width: 781px) {
  body.single-product main#wp--skip-link--target.wp-block-group,
  body.single-product main.wp-block-group {
    padding-top: var(--wp--preset--spacing--small, 1rem) !important;
  }
}

/* --- Block gallery thumbnails: WC defaults to cover — override --- */
.wc-block-product-gallery-thumbnails__thumbnail,
.wc-block-product-gallery-thumbnails__thumbnail__image,
.wc-block-product-gallery-thumbnails img {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* --- Fullscreen / dialog lightbox --- */
.wc-block-product-gallery-dialog img,
.wc-block-product-gallery-dialog video,
.wc-block-product-gallery-dialog__content img,
.wc-block-product-gallery-dialog__content video {
  object-fit: contain !important;
  object-position: center center !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
}

/* --- Classic Woo gallery + zoom + Photoswipe --- */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image--placeholder img,
.single-product .flex-viewport img,
.single-product .zoomImg,
.single-product .woocommerce-product-gallery .zoomImg,
.single-product .pswp__img,
.single-product .pswp__img--placeholder,
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img,
.pswp__img,
.pswp img,
.pswp__zoom-wrap img,
.pswp__item img,
.photoswipe img,
.mfp-img,
.flex-viewport img {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* Kill gray letterbox on classic gallery frames / flex-viewport */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image--placeholder,
.single-product .flex-viewport,
.woocommerce div.product div.images,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .flex-viewport,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.flex-viewport {
  background: transparent !important;
  background-color: transparent !important;
}

.single-product .woocommerce-product-gallery__image {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.single-product .woocommerce-product-gallery__image a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}

/* --- Shop / archive / related product cards (contain only) --- */
ul.products li.product img,
.wc-block-grid__product-image img,
.wc-block-product-image img,
.woocommerce-LoopProduct-link img,
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image a img {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}


/* --- Catalog / archive / category / related / collection cards: fixed 1:1 ---
   Site-wide permanent rule for every current and future product card.
   object-fit:contain = no crop; transparent letterbox. Does NOT apply to
   single-product gallery (see aspect-ratio:auto rules above). */

/* Block / collection / related card IMAGE WRAPPERS */
.wc-block-product-template .wc-block-product .wc-block-components-product-image,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image,
.wc-block-product-template .wc-block-product .wc-block-grid__product-image,
.wc-block-product-template .wc-block-product .product__img > .wc-block-components-product-image,
.wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-product-collection .wc-block-product .wp-block-woocommerce-product-image,
.wp-block-woocommerce-related-products .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-related-products .wc-block-product .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-new .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-product-best-sellers .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-product-on-sale .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-product-top-rated .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-handpicked-products .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-product-category .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-products-by-attribute .wc-block-product .wc-block-components-product-image,
ul.products li.product .wc-block-components-product-image,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-color: transparent !important;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-image a,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image a,
.wc-block-product-template .wc-block-product .wc-block-grid__product-image a,
.wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-image a,
.wp-block-woocommerce-product-collection .wc-block-product .wp-block-woocommerce-product-image a,
.wp-block-woocommerce-related-products .wc-block-product .wc-block-components-product-image a,
.wp-block-woocommerce-related-products .wc-block-product .wp-block-woocommerce-product-image a,
ul.products li.product .wc-block-components-product-image a,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-image img,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image img,
.wc-block-product-template .wc-block-product .wc-block-grid__product-image img,
.wc-block-product-template .wc-block-product .wc-block-components-product-image--aspect-ratio-auto img,
.wc-block-product-template .wc-block-product .wc-block-components-product-image--aspect-ratio-1 img,
.wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-product-collection .wc-block-product .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-related-products .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-related-products .wc-block-product .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-new .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-product-best-sellers .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-product-on-sale .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-product-top-rated .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-handpicked-products .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-product-category .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-products-by-attribute .wc-block-product .wc-block-components-product-image img,
ul.products li.product .wc-block-components-product-image img,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
}

/* Classic Woo loop thumbs (no dedicated image wrapper): square the <img> itself */
ul.products li.product .woocommerce-LoopProduct-link > img,
ul.products li.product > a.woocommerce-LoopProduct-link > img,
ul.products li.product a img.attachment-woocommerce_thumbnail,
ul.products li.product a img.wp-post-image,
.related.products ul.products li.product .woocommerce-LoopProduct-link > img,
.upsells.products ul.products li.product .woocommerce-LoopProduct-link > img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: transparent !important;
}

/* Single-product Woo Blocks hover zoom: deliberately subtle (Woo default is scale(1.3)).
   Keep the existing contain/no-crop rules; override only while the zoomable image is hovered. */
.single-product .wc-block-product-gallery-large-image .wc-block-woocommerce-product-gallery-large-image__image--hoverZoom:hover,
.single-product .wc-block-product-gallery-large-image img.wc-block-woocommerce-product-gallery-large-image__image--hoverZoom:hover {
  transform: scale(1.1) !important;
}