/* Card axes — work over any card variant (template/blocks/card/*.twig). Switches on <html> from style.card_* of the preset
   (data-card-fit, -shape, -hover, -align, -brand, -rating, -quick, -quickview, -swatches, -badges); photo ratio is the
   existing data-media. No attribute / default value = the variant as designed. Loaded on every page (common/header.twig).
   Slots every variant renders but shows only on an axis: .et-card__img-alt, .et-card__qv-btn, .et-card__cart-label--options.
   ([hidden] cannot be used for them: elbuz_compat.css makes it display: none !important.)
   Selectors start with :root[data-card-…] .et-card so they beat the variant files (html[data-card="<v>"] .et-card--<v> …). Tokens only. */

/* hidden unless an axis shows them */
.et-card :is(.et-card__img-alt, .et-card__qv-btn, .et-card__cart-label--options) { display: none; }

/* ---- photo fit: contain (default) / cover ---- */
:root[data-card-fit="cover"] .et-card .et-card__image img { object-fit: cover; padding: 0; }

/* ---- photo shape: default / arch / circle ---- */
:root:is([data-card-shape="arch"], [data-card-shape="circle"]) .et-card .et-card__image {
  height: auto;
  background: var(--et-media-box, var(--et-surface-2, var(--et-surface)));
}
/* ponytail: 100vmax radii are scaled down to half the width by the browser = a semicircle top on any ratio */
:root[data-card-shape="arch"] .et-card .et-card__image { aspect-ratio: 3 / 4; border-radius: 100vmax 100vmax 0 0; }
:root[data-card-shape="circle"] .et-card .et-card__image { aspect-ratio: 1; border-radius: 50%; }
:root:is([data-card-shape="arch"], [data-card-shape="circle"]) .et-card .et-card__image-link { border-radius: inherit; }
:root:is([data-card-shape="arch"], [data-card-shape="circle"]):not([data-card-fit="cover"]) .et-card .et-card__image img { padding: calc(var(--et-card-pad) * 1.25); }
/* slide: the photo in a slide mount — a thick rounded frame of the surface colour with a hairline inside, the picture well inset */
:root[data-card-shape="slide"] .et-card .et-card__image {
  height: auto;
  aspect-ratio: 1;
  border: clamp(0.5rem, 1.2vw, 0.875rem) solid var(--et-surface);
  border-radius: calc(var(--et-card-radius, var(--et-radius)) + 0.25rem);
  background: var(--et-media-box, var(--et-surface-2, var(--et-surface)));
  box-shadow: 0 0 0 var(--et-border-width, 1px) var(--et-border), inset 0 0 0 var(--et-border-width, 1px) var(--et-border);
}
:root[data-card-shape="slide"][data-media-bg="plate"] .et-card .et-card__image { background: radial-gradient(closest-side, var(--et-surface), var(--et-surface-2)); }
:root[data-card-shape="slide"] .et-card .et-card__image-link { border-radius: calc(var(--et-card-radius, var(--et-radius)) - 0.375rem); }
:root[data-card-shape="slide"]:not([data-card-fit="cover"]) .et-card .et-card__image img { padding: 11%; }

/* ---- hover: filmstrip (default: zoom + photo scrub, animations.js) / second / zoom / loupe / none ---- */
:root[data-card-hover]:not([data-card-hover="filmstrip"]) .et-card .et-card__img-dots { display: none; }
:root:is([data-card-hover="second"], [data-card-hover="none"]) .et-card:hover .et-card__image img { transform: none; }
:root[data-card-hover="second"] .et-card .et-card__img-alt {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--et-transition);
  pointer-events: none;
}
@media (hover: hover) {
  :root[data-card-hover="second"] .et-card:hover .et-card__img-alt { opacity: 1; }
}
:root[data-card-hover="second"] .et-card .et-card__image-link:focus-visible .et-card__img-alt { opacity: 1; }
/* loupe: ×2.1 at the pointer (--lx / --ly from animations.js), fine pointers only; touch keeps the photo as is */
@media (hover: hover) and (pointer: fine) {
  :root[data-card-hover="loupe"] .et-card .et-card__image { cursor: zoom-in; }
  :root[data-card-hover="loupe"] .et-card .et-card__image:hover img { transform: scale(2.1); transform-origin: var(--lx, 50%) var(--ly, 50%); }
}
:root[data-card-hover="loupe"] .et-card:not(:hover) .et-card__image img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-card-hover] .et-card .et-card__image img { transition: none; }
  :root:is([data-card-hover="zoom"], [data-card-hover="loupe"]) .et-card:hover .et-card__image img { transform: none; }
}

/* ---- text alignment: start (default) / center ---- */
:root[data-card-align="center"] .et-card .et-card__body { text-align: center; align-items: center; }
:root[data-card-align="center"] .et-card :is(.et-card__price, .et-card__rating, .et-card__row, .et-card__swatches, .et-card__footer) { justify-content: center; }

/* ---- brand / rating: auto (as the variant is designed) / show / hide ---- */
:root[data-card-brand="hide"] .et-card :is(.et-card__brand, [data-card-part="brand"]),
:root:not([data-card-brand="show"]) .et-card--no-brand .et-card__brand,
:root[data-card-rating="hide"] .et-card :is(.et-card__rating, [data-card-part="rating"]),
:root:not([data-card-rating="show"]) .et-card--no-rating .et-card__rating { display: none; }

/* ---- quick buy: button (default: adds to cart) / options (products with options open quick view) / none ---- */
:root[data-card-quick="none"] .et-card [data-cart] { display: none; }
:root[data-card-quick="options"] .et-card[data-has-options] .et-card__cart-label { display: none; }
:root[data-card-quick="options"] .et-card[data-has-options] .et-card__cart-label--options { display: inline; }

/* ---- quick view button: none (default) / modal / sheet ---- */
:root:is([data-card-quickview="modal"], [data-card-quickview="sheet"]) .et-card .et-card__qv-btn { display: flex; }

/* ---- colour swatches: show (default, when the product has an option with pictures) / hide ---- */
.et-card__swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-xs) 0;
  padding: 0;
  list-style: none;
}
.et-card__swatch {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--et-radius-full);
  outline: var(--et-border-width) solid var(--et-border);
  outline-offset: 1px;
  font-size: var(--et-text-xs);
  color: var(--et-text-muted);
}
.et-card__swatch img { width: 100%; height: 100%; object-fit: cover; }
.et-card__swatch--more { width: auto; outline: 0; }
/* family members (module elbuz_product_family): a link per swatch, colour circle (two halves for a two-colour value), current ringed */
.et-card__swatch a { display: flex; width: 100%; height: 100%; }
.et-card__swatch-fill { width: 100%; height: 100%; background: linear-gradient(135deg, var(--et-swatch) 50%, var(--et-swatch-2) 50%); }
.et-card__swatch.is-current { outline-color: var(--et-accent); }
:root[data-card-swatches="hide"] .et-card .et-card__swatches { display: none; }

/* ---- badges: start (default, top left) / end (top right; the action buttons move left) / bottom ---- */
:root[data-card-badges="end"] .et-card .et-card__badges { left: auto; right: var(--space-sm); align-items: flex-end; }
:root[data-card-badges="end"] .et-card .et-card__actions { right: auto; left: var(--space-sm); }
:root[data-card-badges="bottom"] .et-card .et-card__badges { top: auto; bottom: var(--space-sm); }