/* 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%; }
/* step: portrait 4:5 photo with every corner cut in two steps (--et-step) and a thin inner frame (--et-gold-line) that widens on hover */
:root[data-card-shape="step"] .et-card .et-card__image {
  --s: var(--et-step, 9px);
  position: relative; height: auto; aspect-ratio: 4 / 5; border-radius: 0;
  background: var(--et-media-box, var(--et-surface-2, var(--et-surface)));
  clip-path: polygon(0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s), calc(var(--s) * 2) 0,
    calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2),
    100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%,
    calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2));
}
:root[data-card-shape="step"] .et-card .et-card__image-link { border-radius: 0; }
:root[data-card-shape="step"] .et-card .et-card__image-link::after {
  content: ""; position: absolute; z-index: 1; inset: calc(var(--s) * 1.6); pointer-events: none;
  border: 1px solid var(--et-gold-line, color-mix(in srgb, var(--et-accent) 55%, transparent));
  transition: inset var(--et-motion-medium, 0.3s) var(--et-motion-ease, ease);
}
:root[data-card-shape="step"] .et-card:hover .et-card__image-link::after { inset: calc(var(--s) * 0.8); }
:root[data-card-shape="step"]:not([data-card-fit="cover"]) .et-card .et-card__image img { padding: calc(var(--s) * 2.5); }
@media (max-width: 575.98px) { :root[data-card-shape="step"] .et-card .et-card__image { --s: calc(var(--et-step, 9px) * 0.78); } }
/* paper: the photo on a sheet of the surface colour lying over a coloured sheet turned −3° (cut-paper look). The under-sheet colour goes
   by the card position (--et-plate-1..4, falling back to the accent tint), the soft shadow between the layers — --et-paper-shadow.
   The white sheet is the link (the photo is clipped by it, so a zoom stays on the sheet: inside the isolated box a z-index −1 layer
   paints over the box's own background, hence the sheet on the child); on hover the under sheet turns a little more. */
:root[data-card-shape="paper"] .et-card { --et-sheet: var(--et-plate-1, color-mix(in srgb, var(--et-accent) 28%, var(--et-surface))); }
:root[data-card-shape="paper"] :nth-child(4n+2) > .et-card { --et-sheet: var(--et-plate-2, var(--et-plate-1, color-mix(in srgb, var(--et-accent) 28%, var(--et-surface)))); }
:root[data-card-shape="paper"] :nth-child(4n+3) > .et-card { --et-sheet: var(--et-plate-3, var(--et-plate-1, color-mix(in srgb, var(--et-accent) 28%, var(--et-surface)))); }
:root[data-card-shape="paper"] :nth-child(4n) > .et-card { --et-sheet: var(--et-plate-4, var(--et-plate-2, color-mix(in srgb, var(--et-accent) 28%, var(--et-surface)))); }
:root[data-card-shape="paper"] .et-card .et-card__image {
  position: relative; isolation: isolate; overflow: visible; height: auto; aspect-ratio: 1;
  padding: 0; border-radius: var(--et-media-radius, var(--et-radius)); background: transparent;
}
:root[data-card-shape="paper"]:not([data-card-fit="cover"]) .et-card .et-card__image img { padding: 8%; }
/* the sheet is the surface colour in both themes: no multiply (it would sink cut-out photos into a dark sheet) */
:root[data-card-shape="paper"] .et-card .et-card__image img { mix-blend-mode: normal; }
:root[data-card-shape="paper"] .et-card .et-card__image::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--et-sheet); opacity: 0.9;
  transform: rotate(-3deg) translate(-4px, 6px); transition: transform var(--et-motion-medium, 0.3s) var(--et-motion-ease, ease);
}
:root[data-card-shape="paper"] .et-card:hover .et-card__image::before { transform: rotate(-5deg) translate(-7px, 8px); }
:root[data-card-shape="paper"] .et-card .et-card__image-link {
  display: block; height: 100%; overflow: hidden; border-radius: inherit; background: var(--et-surface);
  box-shadow: var(--et-paper-shadow, 0 2px 0 rgb(var(--et-shadow-rgb, 0 0 0) / 0.06), 0 10px 18px -12px rgb(var(--et-shadow-rgb, 0 0 0) / 0.35));
}
@media (prefers-reduced-motion: reduce) { :root[data-card-shape="paper"] .et-card .et-card__image::before { transition: none; } }
/* petal: a square photo with three corners fully round and one (bottom left) --et-petal-r; on hover the sharp corner moves to the top left */
:root[data-card-shape="petal"] .et-card .et-card__image {
  height: auto; aspect-ratio: 1; overflow: hidden;
  border-radius: 50% 50% 50% var(--et-petal-r, 1.625rem);
  background: var(--et-media-box, var(--et-surface-2, var(--et-surface)));
  transition: border-radius var(--et-motion-slow, 0.6s) var(--et-motion-ease, ease);
}
:root[data-card-shape="petal"] .et-card:hover .et-card__image { border-radius: var(--et-petal-r, 1.625rem) 50% 50% 50%; }
:root[data-card-shape="petal"] .et-card .et-card__image-link { border-radius: inherit; }
:root[data-card-shape="petal"]:not([data-card-fit="cover"]) .et-card .et-card__image img { padding: 9%; }
:root[data-card-shape="petal"][data-motion="none"] .et-card:hover .et-card__image { border-radius: 50% 50% 50% var(--et-petal-r, 1.625rem); }
/* frame: the photo hangs like a picture on a wall — a passe-partout (--et-mat, default the surface) inside a gilded frame of rings
   (--et-frame, gold --et-gold-1..5 — elbuz_theme.css) with a drop shadow (--et-frame-drop), on the media box as the wall
   (--et-media-box). A poster with card_fit = cover fills the mat; a cut-out stands on it. On hover the frame lifts a little. */
:root[data-card-shape="frame"] .et-card .et-card__image {
  height: auto; aspect-ratio: 1; overflow: visible; padding: 13%; border-radius: var(--et-media-radius, 2px);
  background: var(--et-media-box, var(--et-surface-2, var(--et-surface)));
}
:root[data-card-shape="frame"] .et-card .et-card__image-link {
  display: block; height: 100%; overflow: hidden; padding: 7%; border-radius: 0; background: var(--et-mat, var(--et-surface));
  box-shadow: var(--et-frame), var(--et-frame-drop, 0 18px 26px -16px rgb(var(--et-shadow-rgb, 0 0 0) / 0.5));
  transition: transform var(--et-motion-medium, 0.3s) var(--et-motion-ease, ease);
}
/* the mat is the surface colour in both themes: no multiply (it would sink the photo into a dark mat) */
:root[data-card-shape="frame"] .et-card .et-card__image img { padding: 0; mix-blend-mode: normal; }
:root[data-card-shape="frame"][data-card-fit="cover"] .et-card .et-card__image img { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12); }
:root[data-card-shape="frame"] .et-card:hover .et-card__image-link { transform: translateY(-3px); }
:root[data-card-shape="frame"][data-motion="none"] .et-card:hover .et-card__image-link { transform: none; }
@media (prefers-reduced-motion: reduce) { :root[data-card-shape="frame"] .et-card:hover .et-card__image-link { transform: none; } }

/* ---- 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); }
/* swatch shape (style.swatch): pinked — a square sample, the fill cut with pinking shears top and bottom; the ring stays square */
:root[data-swatch="pinked"] .et-card__swatch:not(.et-card__swatch--more) { border-radius: 0; outline-color: transparent; }
:root[data-swatch="pinked"] .et-card__swatch.is-current { outline-color: var(--et-text); }
:root[data-swatch="pinked"] :is(.et-card__swatch-fill, .et-card__swatch img) {
  --et-pk: var(--et-pinked, 7px);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--et-pk) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--et-pk) 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--et-pk) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--et-pk) 51% repeat-x;
}
: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); }