/* Hagoma product card on Ecomus card layout 1, converted from the reference
   theme's snippets/product-card.liquid: framed image, black badges, a "Quick
   view" pill over the image, name and price in the text face. Catalog grids
   centre the text and keep the name on one line (catalog.css). */

ul.products li.product .product-thumbnail {
  background: var(--hg-card-media-bg);
}
ul.products li.product .product-thumbnail img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* The second (hover) image never shows without a hovering pointer; hidden, its lazy image is not downloaded.
   The link and img parts outrank Ecomus' "body:not(.product-image-uncropped) ul.products ... img" display rule.
   Light mode (html.hg-lite) skips it too. */
@media (hover: none) {
  ul.products li.product .product-thumbnail .woocommerce-loop-product__link img.product-thumbnails--fadein-image {
    display: none;
  }
}
.hg-lite ul.products li.product .product-thumbnail .woocommerce-loop-product__link img.product-thumbnails--fadein-image {
  display: none;
}

/* Loading: a photo still loading when assets/js/card-zoom.js sees it waits hidden over the
   frame colour (the band's card colour on home sections), which pulses slowly, then fades in.
   The grey pulse lightens a dark frame and darkens a light one. The wait outranks Ecomus'
   hover rule, which would show a half-loaded second photo. */
ul.products li.product .product-thumbnail img {
  transition: opacity 0.5s ease;
}
ul.products li.product .product-thumbnail img.hg-photo-wait {
  opacity: 0 !important;
}
ul.products li.product .product-thumbnail.hg-frame-wait::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(128 128 128 / 0.16);
  pointer-events: none;
  animation: hg-frame-pulse 1.8s ease-in-out infinite alternate;
}
@keyframes hg-frame-pulse {
  from { opacity: 0.15; }
}

/* Eye button (hg_card_zoom_button()): a 40px target around a 32px disc in the photo's top
   inline-end corner, beside the card link. Pointer screens show it on hover or keyboard focus,
   touch screens always. Hidden until card-zoom.js can open the viewer. Every property of the
   store's generic button style is reset here. */
ul.products li.product .hg-card-zoom {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  z-index: 2;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--hg-text);
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}
.hg-zoom-ready ul.products li.product .hg-card-zoom { display: grid; }
ul.products li.product .hg-card-zoom::after { content: none; }
ul.products li.product .hg-card-zoom:is(:hover, :focus, :active) {
  border: 0;
  background: none;
  color: var(--hg-text);
}
.hg-card-zoom__disc {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.hg-card-zoom__disc svg { display: block; }
ul.products li.product .hg-card-zoom:hover .hg-card-zoom__disc {
  background: #fff;
  transform: scale(1.08);
}
/* A dark and a white ring around the disc read on any photo; the transparent outline shows in forced colours. */
ul.products li.product .hg-card-zoom:focus-visible {
  outline: 2px solid transparent;
}
ul.products li.product .hg-card-zoom:focus-visible .hg-card-zoom__disc {
  box-shadow: 0 0 0 2px var(--hg-text), 0 0 0 4px #fff;
}
@media (hover: hover) and (pointer: fine) {
  ul.products li.product .hg-card-zoom { opacity: 0; }
  ul.products li.product .product-inner:is(:hover, :focus-within) .hg-card-zoom { opacity: 1; }
}

/* Badges sit top-left and stack. Black sale badge, as set in the reference theme. */
ul.products li.product .woocommerce-badges {
  top: 10px;
  inset-inline: 10px auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
ul.products li.product .woocommerce-badge {
  padding: 4px 10px;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  font-family: var(--hg-font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
ul.products li.product .woocommerce-badge.new,
ul.products li.product .woocommerce-badge.featured {
  background-color: var(--hg-text);
}
ul.products li.product .woocommerce-badge.sold-out {
  background-color: var(--hg-sold-out-bg);
  color: #fff;
}

/* Quick view: one full-width pill over the bottom of the image (the Ecomus
   text button, see inc/catalog.php), shown on hover and always on touch screens.
   The add to cart icon is left out, as on the reference card. */
ul.products li.product .product-featured-icons--primary {
  inset-inline: 10px;
  bottom: 10px;
}
ul.products li.product .product-featured-icons--primary .product-loop-button-atc {
  display: none;
}
ul.products li.product .product-thumbnail .product-featured-icons--primary .ecomus-quickview-button {
  width: 100%;
  height: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: none;
  color: #000;
  font-family: var(--hg-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  visibility: visible;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
ul.products li.product .product-thumbnail .product-featured-icons--primary .ecomus-quickview-button::after,
ul.products li.product .ecomus-quickview-button .ecomus-button__icon {
  display: none;
}
@media (hover: hover) {
  ul.products li.product .product-inner:hover .product-thumbnail .product-featured-icons--primary .ecomus-quickview-button {
    opacity: 1;
    transform: none;
  }
}
@media (hover: none) {
  ul.products li.product .product-thumbnail .product-featured-icons--primary .ecomus-quickview-button {
    opacity: 1;
    transform: none;
  }
}
ul.products li.product .product-thumbnail .product-featured-icons--primary .ecomus-quickview-button:focus-visible {
  opacity: 1;
  transform: none;
}

/* Text */
ul.products li.product .product-summary {
  padding-top: 10px;
}
ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  color: var(--hg-text);
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}
ul.products li.product .woocommerce-loop-product__title a {
  color: inherit;
}
ul.products li.product .woocommerce-loop-product__title a:hover {
  color: inherit;
  text-decoration: underline;
}

/* Price: current price bold, the regular price smaller and faded after it. */
ul.products li.product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin: 5px 0 0;
  color: var(--hg-text);
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
/* Sale price first, then the struck-through regular price (both are aria-hidden;
   WooCommerce's screen-reader text keeps the spoken order). */
ul.products li.product .price ins {
  order: -1;
  font-weight: 700;
  text-decoration: none;
}
ul.products li.product .price del {
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}

/* Ratings appear only for products with reviews. */
ul.products li.product .ecomus-rating {
  margin-bottom: 6px;
  color: var(--hg-text);
  font-size: 12px;
}
ul.products li.product .jdgm-preview-badge {
  margin-top: 4px;
  font-size: 12px;
}

@media (max-width: 749px) {
  ul.products li.product .woocommerce-loop-product__title {
    line-height: 1.28;
  }
}
/* Photo viewer (assets/js/card-zoom.js): one native dialog for every card's eye button, centred
   with the page showing around it, never full screen; phones keep small margins. The script
   sets --hg-zoom-ratio (the photo's width over height) and the photo box takes the largest
   size that fits beside or above the bar with the name and the product link. Warm black like
   the club popup (newsletter.css), with the cards' dark loading frame. */
.hg-zoom {
  --hg-zoom-ratio: 1;
  --hg-zoom-gap-x: clamp(12px, 4vw, 48px);
  --hg-zoom-gap-y: clamp(12px, 5vh, 56px);
  --hg-zoom-bar: 72px;
  --hg-zoom-photo-h: min(86vh, 900px, 100vh - 2 * var(--hg-zoom-gap-y) - var(--hg-zoom-bar));
  --hg-btn-focus: var(--hg-footer-heading);
  width: min(100vw - 2 * var(--hg-zoom-gap-x), 760px, var(--hg-zoom-photo-h) * var(--hg-zoom-ratio));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--hg-text);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
  color: var(--hg-footer-heading);
  overscroll-behavior: contain;
}
@supports (height: 100dvh) {
  .hg-zoom {
    --hg-zoom-photo-h: min(86dvh, 900px, 100dvh - 2 * var(--hg-zoom-gap-y) - var(--hg-zoom-bar));
  }
}
.hg-zoom::backdrop {
  background: rgb(11 11 11 / 0.72);
}
.hg-zoom[open] {
  animation: hg-zoom-in 0.25s ease both;
}
.hg-zoom[open]::backdrop {
  animation: hg-zoom-fade 0.25s ease both;
}
@keyframes hg-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
@keyframes hg-zoom-fade {
  from { opacity: 0; }
}
html.hg-zoom-lock {
  overflow: hidden;
}
.hg-zoom :focus-visible {
  outline-color: var(--hg-footer-heading);
}

.hg-zoom__inner {
  position: relative;
  display: flex;
  flex-direction: column;
}
.hg-zoom__media {
  position: relative;
  aspect-ratio: var(--hg-zoom-ratio);
  overflow: hidden;
  background: #161514;
}
.hg-zoom__media.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(128 128 128 / 0.16);
  animation: hg-frame-pulse 1.8s ease-in-out infinite alternate;
}
.hg-zoom__preview,
.hg-zoom__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hg-zoom__img {
  transition: opacity 0.4s ease;
}
.hg-zoom__img.is-waiting {
  opacity: 0;
}
.hg-zoom__img.is-instant {
  transition: none;
}
.hg-zoom__error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  color: #cfc6b8;
  font-family: var(--hg-font-body);
  font-size: 14px;
  text-align: center;
}
.hg-zoom__error[hidden],
.hg-zoom__link[hidden] {
  display: none;
}
.hg-zoom__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--hg-zoom-bar);
  padding: 0 16px;
}
.hg-zoom__title {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--hg-footer-heading);
  font-family: var(--hg-font-body);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hg-zoom__link {
  flex: none;
}

/* Close: the eye button's disc, larger, in the dialog's top inline-end corner. */
.hg-zoom .hg-zoom__close {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--hg-text);
  cursor: pointer;
}
.hg-zoom .hg-zoom__close::after { content: none; }
.hg-zoom .hg-zoom__close:is(:hover, :focus, :active) {
  border: 0;
  background: none;
  color: var(--hg-text);
}
.hg-zoom__disc {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
}
.hg-zoom__disc svg { display: block; }
.hg-zoom .hg-zoom__close:hover .hg-zoom__disc { background: #fff; }
.hg-zoom .hg-zoom__close:focus-visible {
  outline: 2px solid transparent;
}
.hg-zoom .hg-zoom__close:focus-visible .hg-zoom__disc {
  box-shadow: 0 0 0 2px var(--hg-text), 0 0 0 4px #fff;
}

/* Phones: the name above a full-width button. */
@media (max-width: 599px) {
  .hg-zoom { --hg-zoom-bar: 124px; }
  .hg-zoom__bar {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px 14px;
  }
}
/* Short landscape screens: the bar becomes a column beside the photo. */
@media (orientation: landscape) and (max-height: 520px) {
  .hg-zoom {
    --hg-zoom-bar: 0px;
    --hg-zoom-side: 200px;
    width: min(100vw - 2 * var(--hg-zoom-gap-x), var(--hg-zoom-photo-h) * var(--hg-zoom-ratio) + var(--hg-zoom-side));
  }
  .hg-zoom__inner { flex-direction: row; }
  .hg-zoom__media {
    flex: 1 1 auto;
    min-width: 0;
  }
  .hg-zoom__bar {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 12px;
    width: var(--hg-zoom-side);
    height: auto;
    padding: 56px 16px 16px;
  }
  .hg-zoom__title { -webkit-line-clamp: 5; }
}

@media (prefers-reduced-motion: reduce) {
  ul.products li.product .product-thumbnail .product-featured-icons--primary .ecomus-quickview-button {
    transition: none;
  }
}
/* No pulses, fades or zooms under reduced motion or in light mode. */
@media (prefers-reduced-motion: reduce) {
  ul.products li.product .product-thumbnail.hg-frame-wait::before,
  .hg-zoom__media.is-loading::before,
  .hg-zoom[open],
  .hg-zoom[open]::backdrop {
    animation: none;
  }
  ul.products li.product .product-thumbnail img,
  ul.products li.product .hg-card-zoom,
  .hg-card-zoom__disc,
  .hg-zoom__img {
    transition: none;
  }
}
.hg-lite ul.products li.product .product-thumbnail.hg-frame-wait::before,
.hg-lite .hg-zoom__media.is-loading::before,
.hg-lite .hg-zoom[open],
.hg-lite .hg-zoom[open]::backdrop {
  animation: none;
}
.hg-lite ul.products li.product .product-thumbnail img,
.hg-lite .hg-zoom__img {
  transition: none;
}