/*
 * Product carousel block (hediyesahibi/product-carousel). Loaded only on pages with the
 * block. Colours, font, radii and corner smoothing come from the child theme's tokens
 * (style.css :root); the fallbacks keep the block usable without them (and in the
 * block editor).
 *
 * Two layouts:
 * - the plain list (phones, no JavaScript, the editor preview): cards in a row that
 *   scrolls sideways with snap points;
 * - the coverflow (from 768 px, with JavaScript; .is-coverflow and the first data-pos
 *   come from the server, product-carousel.js takes over): the cards are stacked in one
 *   grid cell and placed by their data-pos (offset from the active card).
 *   The container width decides how many side cards show: one on each side, two from
 *   680 px.
 */
.hs-product-carousel {
  --hs-pc-ink: var(--hs-ink, #1f2547);
  --hs-pc-muted: var(--hs-muted, #5b6180);

  /*
   * Card text in three steps, so the price leads: price --hs-pc-ink (14.85:1 on white),
   * title and rating a softer navy, review count and old price --hs-pc-muted (6.06:1).
   */
  --hs-pc-title: #3a4064; /* 10.0:1 on white */
  --hs-pc-soft: #4b5070; /* 7.8:1 on white */
  --hs-pc-surface: var(--hs-surface, #fff);
  --hs-pc-line: var(--hs-line, #e6e9f0);
  --hs-pc-accent: var(--hs-orange-600, #e06c00);
  --hs-pc-accent-hover: var(--hs-orange-700, #c2410c);
  --hs-pc-star: #f5a524;
  --hs-pc-dot: #d3d9e6;

  /* Card: design radius and padding (the image tile is concentric: R − p). */
  --hs-pc-card-r: var(--hs-radius-xl, 28px);
  --hs-pc-card-p: 10px;

  container: hs-pc / inline-size;
  position: relative;
  color: var(--hs-pc-ink);
  font-family: var(--hs-font, system-ui, sans-serif);
}

/*
 * Coverflow geometry, on every child (custom properties in container units resolve
 * against .hs-product-carousel only below it). --hs-pc-w: card width; --hs-pc-x1/x2:
 * offset of the first/second side card in card widths; --hs-pc-s1/s2: their scale;
 * --hs-pc-r1/r2: their turn; --hs-pc-reach: from the centre to the arrow centres.
 * The image `sizes` attribute follows the width (Block::IMAGE_SIZES).
 */
.hs-product-carousel > * {
  --hs-pc-w: min(290px, 44cqi);
  --hs-pc-x1: 0.66;
  --hs-pc-s1: 0.84;
  --hs-pc-r1: 16deg;
  --hs-pc-x2: 1.04;
  --hs-pc-s2: 0.68;
  --hs-pc-r2: 22deg;
  --hs-pc-reach: var(--hs-pc-w);
}

@container hs-pc (min-width: 680px) {
  .hs-product-carousel > * {
    --hs-pc-w: min(290px, 37cqi);
    --hs-pc-reach: calc(var(--hs-pc-w) * 1.3);
  }
}

.hs-product-carousel *,
.hs-product-carousel *::before,
.hs-product-carousel *::after {
  box-sizing: border-box;
}

/* Read by screen readers only: the carousel title, the slide change, the rating. */
.hs-product-carousel .hs-product-carousel__title,
.hs-product-carousel__status,
.hs-product-carousel__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Plain list ─────────────────────────────────────────────────────────── */

.hs-product-carousel__track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 12px 0 28px; /* room for the card shadows */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hs-product-carousel__track::-webkit-scrollbar {
  display: none;
}

.hs-product-carousel__slide {
  display: flex;
  flex: 0 0 min(66cqi, 270px);
  min-width: 0;
  scroll-snap-align: start;
}

/* ─── Card ───────────────────────────────────────────────────────────────── */

.hs-product-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--hs-pc-card-p);
  background: var(--hs-pc-surface);
  border-radius: calc(var(--hs-pc-card-r) * var(--hs-corner-scale, 1));
  corner-shape: var(--hs-corner-shape, round);
  box-shadow:
    0 22px 44px -22px rgb(31 37 71 / 32%),
    0 2px 8px rgb(31 37 71 / 6%);
}

.hs-product-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--hs-product-backdrop, #ece6df);
  border-radius: max(
    calc((var(--hs-pc-card-r) - var(--hs-pc-card-p)) * var(--hs-corner-scale, 1)),
    var(--hs-r-min, 4px)
  );
  corner-shape: var(--hs-corner-shape, round);
}

.hs-product-carousel .hs-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hs-product-card:hover .hs-product-card__image {
  transform: scale(1.04);
}

/*
 * Loading pictures (the product tiles' script, tile-images.js; D-086): until the picture
 * is in, a soft light passes over the backdrop, then the picture fades in; one that fails
 * leaves a quiet gift. Only with the script (it marks <html> and the box).
 */
.hs-product-card__media {
  --hs-pc-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4.5' rx='2'/%3E%3Cpath d='M5 12.5v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6M12 8v12.5'/%3E%3Cpath d='M12 8c-.5-2.5-1.75-4.5-3.5-4.5-1.15 0-1.9.85-1.65 1.9.35 1.55 2.4 2.35 5.15 2.6Zm0 0c.5-2.5 1.75-4.5 3.5-4.5 1.15 0 1.9.85 1.65 1.9-.35 1.55-2.4 2.35-5.15 2.6Z'/%3E%3C/svg%3E");
}

.hs-media-js .hs-product-card__media:not(.is-loaded) .hs-product-card__image {
  visibility: hidden;
}

.hs-media-js .hs-product-card__media:not(.is-loaded, .is-broken)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 70%) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: hs-pc-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hs-pc-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* Reduced motion (below): nothing changes, the animation only starts (it tells the script). */
@keyframes hs-pc-still {
  to {
    opacity: 1;
  }
}

.hs-product-card__media.is-fading .hs-product-card__image {
  animation: hs-pc-image-in 0.35s ease;
}

@keyframes hs-pc-image-in {
  from {
    opacity: 0;
  }
}

.hs-product-card__media.is-broken::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  height: 30%;
  margin: auto;
  background: rgb(31 37 71 / 22%);
  -webkit-mask: var(--hs-pc-gift) center / contain no-repeat;
  mask: var(--hs-pc-gift) center / contain no-repeat;
  pointer-events: none;
}

/* One badge: bestseller (orange), new (blue), on sale (red). White text ≥ 4.5:1 on each. */
.hs-product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 9px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 16px;
  background: var(--hs-orange-700, #c2410c);
  border-radius: var(--hs-r-pill, 999px); /* pills stay round */
  box-shadow: 0 6px 14px -6px rgb(194 65 12 / 60%);
}

.hs-product-card__badge--new {
  background: var(--hs-blue-600, #0070e0);
  box-shadow: 0 6px 14px -6px rgb(0 112 224 / 60%);
}

.hs-product-card__badge--sale {
  background: var(--hs-red, #e11d48);
  box-shadow: 0 6px 14px -6px rgb(225 29 72 / 60%);
}

/* The favourite heart (wishlist module; its look is in wishlist.css): top right, above the card link. */
.hs-product-card .hs-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
}

.hs-product-card__badge-icon {
  flex: none;
  --hs-icon-accent: currentColor;
}

.hs-product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px 8px 6px;
}

.hs-product-carousel .hs-product-card__title {
  display: -webkit-box;
  min-height: 2.6em; /* two lines on every card, so they line up; longer names end in … */
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--hs-pc-title);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.hs-product-carousel .hs-product-card__link {
  color: inherit;
  text-decoration: none;
}

/* The title link covers the card: one link per card; the button sits above it. */
.hs-product-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.hs-product-carousel .hs-product-card__link:focus-visible {
  outline: none;
}

.hs-product-card:has(.hs-product-card__link:focus-visible) {
  outline: 3px solid var(--hs-focus, #1f2547);
  outline-offset: 3px;
}

.hs-product-carousel .hs-product-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--hs-pc-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

/* Cards without reviews keep the rating row's height when others have one. */
.hs-product-carousel.has-ratings .hs-product-card__body:not(:has(.hs-product-card__rating)) .hs-product-card__title {
  margin-bottom: 26px;
}

.hs-product-card__star {
  flex: none;
  color: var(--hs-pc-star);
  fill: currentColor;
}

.hs-product-card__reviews {
  color: var(--hs-pc-muted);
  font-weight: 500;
}

.hs-product-card__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 8px;
  margin-top: auto;
  padding-top: 4px;
}

.hs-product-carousel .hs-product-card__price {
  margin: 0;
  color: var(--hs-pc-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

/* The currency sign a step smaller and lighter than the amount. */
.hs-product-carousel .hs-product-card__price .woocommerce-Price-currencySymbol {
  font-size: 0.8em;
  font-weight: 700;
}

.hs-product-carousel .hs-product-card__price del {
  margin-right: 4px;
  color: var(--hs-pc-muted);
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
}

.hs-product-carousel .hs-product-card__price del .woocommerce-Price-currencySymbol {
  font-weight: inherit;
}

.hs-product-carousel .hs-product-card__price ins {
  color: inherit;
  text-decoration: none;
  background: none;
}

/*
 * Button: a full-width pill (19 px bold: white on --hs-orange-600 counts as large
 * text, 3.33:1). Side cards of the coverflow show it as an icon tile.
 */
.hs-product-carousel .hs-product-card__button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 1 0 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  background: var(--hs-pc-accent);
  border: 0;
  border-radius: var(--hs-r-pill, 999px);
  box-shadow: 0 10px 24px -10px rgb(224 108 0 / 60%);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.hs-product-carousel .hs-product-card__button:hover,
.hs-product-carousel .hs-product-card__button:focus-visible {
  color: #fff;
  background: var(--hs-pc-accent-hover);
}

.hs-product-carousel .hs-product-card__button:focus-visible {
  outline: 3px solid var(--hs-focus, #1f2547);
  outline-offset: 2px;
}

.hs-product-card__button-icon {
  flex: none;
}

/*
 * WooCommerce's add-to-cart states, as the tiles: loading, the cart rocks on its wheels;
 * added, the cart turns into a check (CardParts::cart_icon(), cart-toast.js) and the
 * button turns blue.
 */
.hs-product-carousel .hs-product-card__button.loading {
  opacity: 0.85;
  pointer-events: none;
}

.hs-product-carousel .hs-product-card__button.loading .hs-product-card__button-morph {
  transform-origin: 50% 80%;
  animation: hs-pc-cart-rock 0.35s ease-in-out infinite alternate;
}

@keyframes hs-pc-cart-rock {
  from {
    transform: translateX(-1.5px) rotate(-8deg);
  }

  to {
    transform: translateX(1.5px) rotate(8deg);
  }
}

.hs-product-carousel .hs-product-card__button.added {
  background: var(--hs-blue-600, #0070e0);
  box-shadow: 0 10px 24px -10px rgb(0 112 224 / 60%);
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.hs-product-carousel .hs-product-card__button.added:is(:hover, :focus-visible) {
  background: var(--hs-blue-700, #185c9f);
}

/* WooCommerce's "View cart" link after adding: not shown, a notification says it (Core\Toast). */
.hs-product-carousel .added_to_cart {
  display: none;
}

/* ─── Coverflow (≥ 768 px, with JavaScript) ──────────────────────────────── */

/* Drawn from the first paint: the server gives .is-coverflow and the first places
   (data-pos); .hs-media-js (tile-images.js, inline in <head>) says the script runs. */
@media (min-width: 768px) {
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__track {
    display: grid;
    grid-template-areas: 'stack';
    align-items: center;
    justify-items: center;
    padding: 14px 0 22px;
    overflow: visible;
    scroll-snap-type: none;
    perspective: 1600px;
    touch-action: pan-y;
  }

  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide {
    --x: 0;
    --s: 1;
    --r: 0deg;

    z-index: 5;
    grid-area: stack;
    width: var(--hs-pc-w);
    cursor: pointer;
    transform: translateX(calc(var(--x) * var(--hs-pc-w))) scale(var(--s)) rotateY(var(--r));
    transition:
      transform 0.5s cubic-bezier(0.22, 0.8, 0.26, 1),
      opacity 0.35s ease,
      visibility 0s;
  }

  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='0'] {
    cursor: auto;
  }

  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='-1'] {
    --x: calc(-1 * var(--hs-pc-x1));
    --s: var(--hs-pc-s1);
    --r: calc(-1 * var(--hs-pc-r1));

    z-index: 4;
  }

  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='1'] {
    --x: var(--hs-pc-x1);
    --s: var(--hs-pc-s1);
    --r: var(--hs-pc-r1);

    z-index: 4;
  }

  /* Hidden cards wait behind the last visible ones; the second side cards show from 680 px. */
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='-2'],
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='-3'] {
    --x: calc(-1 * var(--hs-pc-x2));
    --s: var(--hs-pc-s2);
    --r: calc(-1 * var(--hs-pc-r2));
  }

  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='2'],
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='3'] {
    --x: var(--hs-pc-x2);
    --s: var(--hs-pc-s2);
    --r: var(--hs-pc-r2);
  }

  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='-2'],
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='2'],
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='-3'],
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='3'] {
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.5s cubic-bezier(0.22, 0.8, 0.26, 1),
      opacity 0.35s ease,
      visibility 0s 0.5s;
  }

  @container hs-pc (min-width: 680px) {
    .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='-2'],
    .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='2'] {
      z-index: 3;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transition:
        transform 0.5s cubic-bezier(0.22, 0.8, 0.26, 1),
        opacity 0.35s ease,
        visibility 0s;
    }

    .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='-3'] {
      --x: calc(-1 * var(--hs-pc-x2) - 0.3);
      --s: 0.6;
    }

    .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide[data-pos='3'] {
      --x: calc(var(--hs-pc-x2) + 0.3);
      --s: 0.6;
    }
  }

  /* Side cards: the button as an icon tile beside the price. */
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide:not([data-pos='0']) .hs-product-card__buy {
    flex-wrap: nowrap;
  }

  .hs-media-js
    .hs-product-carousel.is-coverflow
    .hs-product-carousel__slide:not([data-pos='0'])
    .hs-product-card__button {
    flex: none;
    width: 48px;
    min-height: 48px;
    padding: 0;
    color: var(--hs-pc-accent);
    background: var(--hs-pc-surface);

    /* Concentric with the card: inset = card padding + body padding (10 + 8 px). */
    border-radius: max(calc((var(--hs-pc-card-r) - 18px) * var(--hs-corner-scale, 1)), var(--hs-r-min, 4px));
    corner-shape: var(--hs-corner-shape, round);
    box-shadow:
      0 8px 18px -8px rgb(31 37 71 / 30%),
      inset 0 0 0 1px var(--hs-pc-line);
  }

  .hs-media-js
    .hs-product-carousel.is-coverflow
    .hs-product-carousel__slide:not([data-pos='0'])
    .hs-product-card__button:hover {
    color: #fff;
    background: var(--hs-pc-accent);
  }

  /* Added from a side card: its check in blue. */
  .hs-media-js
    .hs-product-carousel.is-coverflow
    .hs-product-carousel__slide:not([data-pos='0'])
    .hs-product-card__button.added {
    color: var(--hs-blue-600, #0070e0);
  }

  .hs-media-js
    .hs-product-carousel.is-coverflow
    .hs-product-carousel__slide:not([data-pos='0'])
    .hs-product-card__button.added:hover {
    color: #fff;
    background: var(--hs-blue-600, #0070e0);
  }

  .hs-media-js
    .hs-product-carousel.is-coverflow
    .hs-product-carousel__slide:not([data-pos='0'])
    .hs-product-card__button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hs-media-js
    .hs-product-carousel.is-coverflow
    .hs-product-carousel__slide:not([data-pos='0']):hover
    .hs-product-card {
    box-shadow:
      0 26px 48px -20px rgb(31 37 71 / 40%),
      0 2px 8px rgb(31 37 71 / 8%);
  }
}

/* Arrows: white discs over the outer cards, centred on the cards (not the dots). */
.hs-product-carousel .hs-product-carousel__arrow {
  position: absolute;
  top: calc((100% - 32px) / 2 - 24px);
  z-index: 10;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  color: var(--hs-pc-ink);
  background: var(--hs-pc-surface);
  border: 0;
  border-radius: 50%;
  box-shadow:
    0 10px 24px -10px rgb(31 37 71 / 40%),
    0 1px 3px rgb(31 37 71 / 10%);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}

/* Arrows and dots belong to the coverflow (≥ 768 px, with the script, which hides them
   again when it switches the coverflow off). */
.hs-product-carousel .hs-product-carousel__arrow[hidden],
.hs-product-carousel .hs-product-carousel__dots[hidden],
html:not(.hs-media-js) .hs-product-carousel :is(.hs-product-carousel__arrow, .hs-product-carousel__dots),
.hs-product-carousel:not(.is-coverflow) :is(.hs-product-carousel__arrow, .hs-product-carousel__dots) {
  display: none;
}

@media (max-width: 767px) {
  .hs-product-carousel .hs-product-carousel__arrow,
  .hs-product-carousel .hs-product-carousel__dots {
    display: none;
  }
}

.hs-product-carousel .hs-product-carousel__arrow--prev {
  left: calc(50% - var(--hs-pc-reach) - 24px);
}

.hs-product-carousel .hs-product-carousel__arrow--next {
  left: calc(50% + var(--hs-pc-reach) - 24px);
}

.hs-product-carousel .hs-product-carousel__arrow:hover {
  color: var(--hs-pc-accent-hover);
  background: var(--hs-pc-surface);
  transform: scale(1.06);
}

.hs-product-carousel .hs-product-carousel__arrow:focus-visible {
  outline: 3px solid var(--hs-focus, #1f2547);
  outline-offset: 2px;
}

/* Dots: pointer shortcuts (24 px targets around a 10 px dot). */
.hs-product-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  height: 32px;
  padding-top: 4px;
}

.hs-product-carousel .hs-product-carousel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.hs-product-carousel__dot::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--hs-pc-dot);
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.hs-product-carousel .hs-product-carousel__dot:hover::before {
  background: var(--hs-pc-muted);
}

.hs-product-carousel .hs-product-carousel__dot.is-active::before {
  background: var(--hs-pc-accent);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .hs-media-js .hs-product-carousel.is-coverflow .hs-product-carousel__slide,
  .hs-product-carousel .hs-product-card__image,
  .hs-product-carousel .hs-product-card__button,
  .hs-product-carousel .hs-product-carousel__arrow,
  .hs-product-carousel__dot::before {
    transition: none !important;
  }

  .hs-product-carousel .hs-product-card__button.loading .hs-product-card__button-morph {
    animation: none;
  }

  .hs-product-card:hover .hs-product-card__image {
    transform: none;
  }

  .hs-media-js .hs-product-card__media:not(.is-loaded, .is-broken)::before {
    background: none;
    transform: none;
    animation: hs-pc-still 1ms;
  }

  .hs-product-card__media.is-fading .hs-product-card__image {
    animation: none;
  }
}

/* ─── Block editor ───────────────────────────────────────────────────────── */

.hs-product-carousel-notice {
  margin: 0;
  padding: 12px 16px;
  color: #1e1e1e;
  font-size: 13px;
  background: #fcf9e8;
  border-left: 4px solid #dba617;
}

.hs-product-carousel-editor__fallback {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed #c3c4c7;
  border-radius: 8px;
}

.hs-product-carousel-editor__fallback-label {
  margin: 0 0 8px;
  color: #757575;
  font-size: 12px;
}