:root {
  --vxg-shop-bg: #0c0d10;
  --vxg-shop-bg-soft: #14161b;
  --vxg-shop-border: rgba(255, 255, 255, 0.13);
  --vxg-shop-border-strong: rgba(255, 255, 255, 0.22);
  --vxg-shop-text: #f7f7f8;
  --vxg-shop-muted: #a9abb3;
  --vxg-shop-red: #e31b36;
  --vxg-shop-red-hover: #f12a45;
  --vxg-shop-radius: 16px;
  --vxg-shop-shadow: 0 18px 50px rgba(0, 0, 0, 0.48);
}

.vxg-shop-host--relative {
  position: relative !important;
}

.vxg-shop-promo {
  box-sizing: border-box;
  color: var(--vxg-shop-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.35;
  min-width: 0;
}

.vxg-shop-promo *,
.vxg-shop-promo *::before,
.vxg-shop-promo *::after {
  box-sizing: border-box;
}

.vxg-shop-promo a {
  color: inherit;
  text-decoration: none;
}

.vxg-shop-promo__inner {
  background:
    radial-gradient(circle at 95% 0%, rgba(227, 27, 54, 0.12), transparent 42%),
    linear-gradient(145deg, var(--vxg-shop-bg-soft), var(--vxg-shop-bg));
  border: 1px solid var(--vxg-shop-border);
  border-radius: var(--vxg-shop-radius);
  box-shadow: var(--vxg-shop-shadow);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.7fr);
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  padding: 12px;
  position: relative;
}

.vxg-shop-promo__inner::after {
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: calc(var(--vxg-shop-radius) - 2px);
  content: "";
  inset: 2px;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.vxg-shop-promo__media {
  align-items: center;
  background: #090a0d;
  border: 1px solid var(--vxg-shop-border);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  min-height: 92px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.vxg-shop-promo__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.vxg-shop-promo__brand-art {
  align-items: center;
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.22) 0 4%, transparent 5%),
    radial-gradient(circle at 27% 72%, rgba(255, 255, 255, 0.16) 0 6%, transparent 7%),
    linear-gradient(145deg, #12141a, #242833);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  justify-content: center;
  min-height: 92px;
  padding: 12px;
  width: 100%;
}

.vxg-shop-promo__brand-art--poppers {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.26) 0 4%, transparent 5%),
    radial-gradient(circle at 25% 77%, rgba(255, 255, 255, 0.19) 0 7%, transparent 8%),
    linear-gradient(145deg, #223188, #5a2b91 58%, #1e6db2);
}

.vxg-shop-promo__brand-art--discount {
  background: linear-gradient(145deg, #1b1c22, #4a111d);
}

.vxg-shop-promo__brand-mark {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  color: #15161b;
  display: inline-flex;
  font-family: Outfit, Inter, sans-serif;
  font-size: 17px;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  letter-spacing: -0.04em;
  width: 44px;
}

.vxg-shop-promo__brand-name {
  color: #fff;
  font-family: Outfit, Inter, sans-serif;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.vxg-shop-promo__content {
  align-content: center;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.vxg-shop-promo__eyebrow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vxg-shop-promo__discount {
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.045em;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.vxg-shop-promo__title {
  color: #fff;
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  overflow-wrap: anywhere;
}

.vxg-shop-promo__description {
  color: var(--vxg-shop-muted);
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.38;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vxg-shop-promo__prices {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vxg-shop-promo__price {
  color: #fff;
  font-family: Outfit, Inter, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.vxg-shop-promo__old-price {
  color: #858892;
  font-size: 12px;
}

.vxg-shop-promo__discount {
  background: rgba(227, 27, 54, 0.16);
  border: 1px solid rgba(227, 27, 54, 0.32);
  color: #ff8393;
}

.vxg-shop-promo__actions {
  align-items: center;
  display: flex;
  min-width: 0;
}

.vxg-shop-promo__cta {
  align-items: center;
  background: var(--vxg-shop-red);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  font-family: Outfit, Inter, sans-serif;
  font-size: 13px;
  font-weight: 750;
  gap: 10px;
  justify-content: center;
  line-height: 1;
  min-height: 38px;
  padding: 9px 13px;
  transition: background-color 160ms ease, transform 160ms ease;
}

.vxg-shop-promo__cta:hover,
.vxg-shop-promo__cta:focus-visible {
  background: var(--vxg-shop-red-hover);
  transform: translateY(-1px);
}

.vxg-shop-promo__cta:focus-visible,
.vxg-shop-promo__media:focus-visible,
.vxg-shop-promo__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.vxg-shop-promo__cta-arrow {
  font-size: 16px;
  line-height: 0.8;
}

.vxg-shop-promo__close {
  align-items: center;
  appearance: none;
  background: rgba(5, 6, 8, 0.76);
  border: 1px solid var(--vxg-shop-border-strong);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: 600 20px/1 Inter, sans-serif;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 36px;
  z-index: 3;
}

.vxg-shop-promo.is-paused {
  visibility: hidden;
}

/* Listing card: it is a sibling of video/FapHouse cells, never a video item. */
.vxg-shop-promo--listing-card {
  display: block;
  list-style: none;
  min-height: 0;
}

.vxg-shop-promo--listing-card .vxg-shop-promo__inner {
  gap: 10px;
  grid-template-columns: 1fr;
  padding: 9px;
}

.vxg-shop-promo--listing-card .vxg-shop-promo__media {
  aspect-ratio: 16 / 9;
}

.vxg-shop-promo--listing-card .vxg-shop-promo__content {
  align-content: start;
  padding: 2px 2px 4px;
}

.vxg-shop-promo--listing-card .vxg-shop-promo__title {
  font-size: 17px;
}

.vxg-shop-promo--listing-card .vxg-shop-promo__description {
  -webkit-line-clamp: 2;
}

.vxg-shop-promo--listing-card .vxg-shop-promo__cta {
  width: 100%;
}

/* One rail replaces the existing Exo/FapHouse auxiliary rail. */
.vxg-shop-promo--listing-rail {
  margin-block: 18px;
  width: 100%;
}

/* Socle de repli, servi seulement si la promotion arrive sans classe de
   composition. Le minimum de 116px est devenu 0 : c'était la dernière piste en
   pixels durs de cette surface, et elle débordait sous 300px de largeur utile. */
.vxg-shop-promo--listing-rail .vxg-shop-promo__inner {
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  min-height: 138px;
  padding-right: 52px;
}

/* Existing dynamic side host; no new sidebar inventory. */
.vxg-shop-promo--watch-side {
  max-width: 360px;
  width: 100%;
}

.vxg-shop-promo--watch-side .vxg-shop-promo__inner {
  grid-template-columns: 1fr;
  padding: 10px;
}

.vxg-shop-promo--watch-side .vxg-shop-promo__media {
  aspect-ratio: 4 / 3;
}

/* Timed desktop slide, mounted only after the player threshold. */
.vxg-shop-promo--watch-slide {
  bottom: max(62px, env(safe-area-inset-bottom));
  max-width: min(420px, calc(100% - 24px));
  position: absolute;
  right: 12px;
  width: 420px;
  z-index: 12;
}

.vxg-shop-promo--watch-slide .vxg-shop-promo__inner {
  grid-template-columns: 106px minmax(0, 1fr);
  max-height: 120px;
  min-height: 116px;
  padding: 9px 48px 9px 9px;
}

.vxg-shop-promo--watch-slide .vxg-shop-promo__media {
  min-height: 96px;
}

.vxg-shop-promo--watch-slide .vxg-shop-promo__description {
  display: none;
}

.vxg-shop-promo--watch-slide .vxg-shop-promo__cta {
  min-height: 32px;
  padding-block: 7px;
}

/* Passive mobile / post-player panel in an existing dynamic host. */
.vxg-shop-promo--watch-passive {
  margin-block: 12px;
  width: 100%;
}

.vxg-shop-promo--watch-passive .vxg-shop-promo__inner {
  min-height: 124px;
  padding-right: 48px;
}

/* Xreels renderer: the CTA stays in the ad slide safe area. */
.vxg-shop-promo--xreels {
  height: 100%;
  min-height: min(70vh, 720px);
  width: 100%;
}

.vxg-shop-promo--xreels .vxg-shop-promo__inner {
  align-content: end;
  background:
    linear-gradient(to top, rgba(5, 6, 8, 0.98) 0 32%, rgba(5, 6, 8, 0.12) 64%),
    radial-gradient(circle at 50% 25%, rgba(227, 27, 54, 0.25), transparent 46%),
    #0b0c0f;
  border-radius: 0;
  grid-template-columns: 1fr;
  padding: 28px 18px max(34px, env(safe-area-inset-bottom));
}

.vxg-shop-promo--xreels .vxg-shop-promo__media {
  inset: 0;
  min-height: 100%;
  position: absolute;
  z-index: 0;
}

.vxg-shop-promo--xreels .vxg-shop-promo__media::after {
  background: linear-gradient(to top, rgba(5, 6, 8, 0.96), transparent 68%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.vxg-shop-promo--xreels .vxg-shop-promo__brand-art {
  min-height: 100%;
}

.vxg-shop-promo--xreels .vxg-shop-promo__content {
  align-content: end;
  margin-top: auto;
  max-width: 520px;
  z-index: 2;
}

.vxg-shop-promo--xreels .vxg-shop-promo__title {
  font-size: clamp(26px, 6vw, 40px);
}

.vxg-shop-promo--xreels .vxg-shop-promo__description {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  -webkit-line-clamp: 3;
}

.vxg-shop-promo--xreels .vxg-shop-promo__cta {
  min-height: 46px;
  width: 100%;
}

@media (max-width: 767px) {
  .vxg-shop-promo__inner {
    gap: 10px;
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 9px;
  }

  .vxg-shop-promo__description {
    -webkit-line-clamp: 1;
  }

  .vxg-shop-promo__title {
    font-size: 16px;
  }

  .vxg-shop-promo__cta {
    min-height: 40px;
  }

  .vxg-shop-promo__close {
    height: 40px;
    width: 40px;
  }

  .vxg-shop-promo--listing-card .vxg-shop-promo__inner {
    grid-template-columns: 1fr;
  }

  .vxg-shop-promo--listing-rail .vxg-shop-promo__inner,
  .vxg-shop-promo--watch-passive .vxg-shop-promo__inner {
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 132px;
    padding-right: 48px;
  }

  .vxg-shop-promo--watch-slide {
    display: none;
  }

  .vxg-shop-promo--watch-side {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vxg-shop-promo *,
  .vxg-shop-promo *::before,
  .vxg-shop-promo *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.vxg-footer-shops {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 18px 0 4px;
  padding: 12px 0;
  border-top: 1px solid var(--border, rgba(255, 255, 255, .09));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .09));
}

.vxg-footer-shops__title {
  color: var(--foreground, #fff);
  font-family: Outfit, Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.vxg-footer-shops__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vxg-footer-shops__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  border-radius: 14px;
  background: var(--surface, rgba(255, 255, 255, .035));
  color: inherit;
  text-decoration: none;
}

.vxg-footer-shops__link:hover,
.vxg-footer-shops__link:focus-visible {
  border-color: var(--primary, #d71920);
  color: var(--foreground, #fff);
}

.vxg-footer-shops__link:focus-visible {
  outline: 2px solid var(--primary, #d71920);
  outline-offset: 2px;
}

.vxg-footer-shops__link strong {
  font-family: Outfit, Inter, sans-serif;
  font-size: 13px;
}

.vxg-footer-shops__link small {
  color: var(--muted-foreground, rgba(255, 255, 255, .6));
  font-size: 10px;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .vxg-footer-shops {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* FR/EN/DE ajoutent Discount au drawer existant : quatre cartes restent une
   grille 2 x 2 lisible, sans nouvelle entrée dans le rail desktop de 80 px. */
html .vxg-nav-partners .nav-link[data-vxg-partner="discount"] {
  --vxg-pt-a: oklch(0.64 0.23 19);
  --vxg-pt-b: oklch(0.49 0.2 14);
}

html body.vxg-sidebar-open .header-nav .vxg-nav-partners--shops4,
html body.nav-open .header-nav .vxg-nav-partners--shops4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.vxg-shop-promo--poppers .vxg-shop-promo__media {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(145deg, #17265f, #4a237a 58%, #145d96);
}

.vxg-shop-promo--poppers .vxg-shop-promo__image {
  box-sizing: border-box;
  object-fit: contain;
  padding: 12%;
}

.vxg-shop-promo--xreels.vxg-shop-promo--poppers .vxg-shop-promo__image {
  padding: clamp(28px, 14vw, 96px);
}

@media (max-width: 1023px) {
  .vxg-shop-promo--watch-slide {
    display: none;
  }
}

/* UX variants 1.1.0 — surface-specific hierarchy, local assets and one CTA. */
.vxg-shop-promo[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  background: linear-gradient(145deg, #202126, #141519);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.vxg-shop-promo[class*="vxg-shop-promo--v-"] .vxg-shop-promo__brand {
  align-items: center;
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 1 auto;
  line-height: 0;
  max-width: 142px;
  min-height: 24px;
  padding: 4px 8px;
}

.vxg-shop-promo[class*="vxg-shop-promo--v-"] .vxg-shop-promo__logo {
  display: block;
  height: 13px;
  max-width: 124px;
  object-fit: contain;
  width: auto;
}

.vxg-shop-promo[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  align-content: start;
}

.vxg-shop-promo[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vxg-shop-promo[class*="vxg-shop-promo--v-"] .vxg-shop-promo__actions {
  margin-top: auto;
}

.vxg-shop-promo[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  background: linear-gradient(135deg, #d51632, #a70f28);
  border-radius: 999px;
  min-height: 44px;
}

.vxg-shop-promo--fit-contain .vxg-shop-promo__media {
  background: #fff;
}

.vxg-shop-promo--fit-contain .vxg-shop-promo__image {
  object-fit: contain;
  padding: 4%;
}

.vxg-shop-promo--fit-cover .vxg-shop-promo__media {
  background: #0b0c0f;
}

.vxg-shop-promo--fit-cover .vxg-shop-promo__image,
.vxg-shop-promo--poppers.vxg-shop-promo--fit-cover .vxg-shop-promo__image {
  object-fit: cover;
  padding: 0;
}

/* Native cards: product first, compact copy, real price and full-width CTA. */
.vxg-shop-promo--v-native-product .vxg-shop-promo__inner,
.vxg-shop-promo--v-native-deal .vxg-shop-promo__inner,
.vxg-shop-promo--v-native-brand .vxg-shop-promo__inner {
  gap: 8px;
  grid-template-columns: 1fr;
  padding: 8px;
}

.vxg-shop-promo--v-native-product .vxg-shop-promo__media,
.vxg-shop-promo--v-native-deal .vxg-shop-promo__media,
.vxg-shop-promo--v-native-brand .vxg-shop-promo__media {
  aspect-ratio: 16 / 9;
  border: 0;
}

.vxg-shop-promo--v-native-product .vxg-shop-promo__content,
.vxg-shop-promo--v-native-deal .vxg-shop-promo__content,
.vxg-shop-promo--v-native-brand .vxg-shop-promo__content {
  gap: 6px;
  padding: 2px 2px 3px;
}

.vxg-shop-promo--v-native-product .vxg-shop-promo__title,
.vxg-shop-promo--v-native-deal .vxg-shop-promo__title,
.vxg-shop-promo--v-native-brand .vxg-shop-promo__title {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.vxg-shop-promo--v-native-product .vxg-shop-promo__description,
.vxg-shop-promo--v-native-deal .vxg-shop-promo__description {
  display: none;
}

.vxg-shop-promo--v-native-brand .vxg-shop-promo__description {
  font-size: 11.5px;
  -webkit-line-clamp: 1;
}

.vxg-shop-promo--v-native-product .vxg-shop-promo__cta,
.vxg-shop-promo--v-native-deal .vxg-shop-promo__cta,
.vxg-shop-promo--v-native-brand .vxg-shop-promo__cta {
  min-height: 40px;
  width: 100%;
}

/* Pagination rails: one product/brand, no dismiss control on a passive block. */
.vxg-shop-promo--v-rail-product .vxg-shop-promo__inner,
.vxg-shop-promo--v-rail-brand .vxg-shop-promo__inner {
  gap: 16px;
  grid-template-columns: minmax(128px, 176px) minmax(0, 1fr);
  min-height: 138px;
  padding: 12px;
}

.vxg-shop-promo--v-rail-product .vxg-shop-promo__media,
.vxg-shop-promo--v-rail-brand .vxg-shop-promo__media {
  aspect-ratio: 1 / 1;
  border: 0;
  min-height: 112px;
}

.vxg-shop-promo--v-rail-product .vxg-shop-promo__content,
.vxg-shop-promo--v-rail-brand .vxg-shop-promo__content {
  gap: 7px;
  padding-block: 2px;
}

.vxg-shop-promo--v-rail-product .vxg-shop-promo__title,
.vxg-shop-promo--v-rail-brand .vxg-shop-promo__title {
  font-size: 18px;
}

.vxg-shop-promo--v-rail-product .vxg-shop-promo__cta,
.vxg-shop-promo--v-rail-brand .vxg-shop-promo__cta {
  min-width: 148px;
}

/* Real KVS side contract: 320 px host, 500–605 px, editorial visual + bottom CTA. */
.vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] {
  height: var(--vxg-shop-side-height, auto);
  max-height: 605px;
  max-width: none;
  min-height: 500px;
  width: 100%;
}

.vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(240px, 54%) minmax(0, 1fr);
  min-height: 500px;
  padding: 0;
}

.vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  min-height: 240px;
}

.vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}

.vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
  font-size: 18px;
  line-height: 1.15;
}

.vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  font-size: 12.5px;
  -webkit-line-clamp: 3;
}

.vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  font-size: 13.5px;
  min-height: 46px;
  width: 100%;
}

/* Timed player slide: compact and outside the control strip. */
.vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  gap: 10px;
  grid-template-columns: 108px minmax(0, 1fr);
  max-height: 124px;
  min-height: 118px;
  padding: 8px 46px 8px 8px;
}

.vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  border: 0;
  min-height: 102px;
}

.vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__eyebrow {
  padding-right: 8px;
}

.vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  display: none;
}

.vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  min-height: 36px;
  padding: 7px 13px;
}

/* Passive mobile/post-player strip: no close button and no fake urgency. */
.vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  gap: 10px;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 132px;
  padding: 9px;
}

.vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  border: 0;
  min-height: 112px;
}

.vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  gap: 5px;
}

.vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  font-size: 11.5px;
  -webkit-line-clamp: 1;
}

.vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  min-height: 40px;
  width: 100%;
}

/* Xreels: complete product/creative above a flat dark panel; controls keep 64 px. */
.vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] {
  --vxg-reel-safe-bottom: max(18px, env(safe-area-inset-bottom));
  --vxg-reel-safe-right: 64px;
  background: #fff;
  height: 100%;
  min-height: min(70vh, 720px);
}

.vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  display: block;
  padding: 0;
}

.vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  background: #fff;
  border: 0;
  border-radius: 0;
  inset: 0 0 36%;
  min-height: 0;
  padding: clamp(18px, 6vh, 54px);
  position: absolute;
}

.vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media::after {
  display: none;
}

.vxg-shop-promo--xreels.vxg-shop-promo--fit-contain .vxg-shop-promo__image {
  object-fit: contain;
  padding: 0;
}

.vxg-shop-promo--xreels.vxg-shop-promo--fit-cover .vxg-shop-promo__media {
  padding: 0;
}

.vxg-shop-promo--xreels.vxg-shop-promo--fit-cover .vxg-shop-promo__image {
  object-fit: cover;
  padding: 0;
}

.vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  background: linear-gradient(180deg, #202126, #151619);
  border-radius: 20px 20px 0 0;
  bottom: 0;
  left: 0;
  margin: 0;
  max-width: none;
  padding: 16px calc(16px + var(--vxg-reel-safe-right)) calc(18px + var(--vxg-reel-safe-bottom)) 16px;
  position: absolute;
  right: 0;
  z-index: 2;
}

.vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
  font-size: clamp(19px, 5vw, 26px);
}

.vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  font-size: 12px;
  -webkit-line-clamp: 1;
}

.vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  min-height: 44px;
  width: 100%;
}

@media (max-width: 1023px) {
  .vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] {
    display: none;
  }

  .vxg-shop-promo--v-rail-product .vxg-shop-promo__inner,
  .vxg-shop-promo--v-rail-brand .vxg-shop-promo__inner {
    gap: 10px;
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 132px;
    padding: 9px;
  }

  .vxg-shop-promo--v-rail-product .vxg-shop-promo__media,
  .vxg-shop-promo--v-rail-brand .vxg-shop-promo__media {
    min-height: 112px;
  }

  .vxg-shop-promo--v-rail-product .vxg-shop-promo__description,
  .vxg-shop-promo--v-rail-brand .vxg-shop-promo__description {
    display: none;
  }

  .vxg-shop-promo--v-rail-product .vxg-shop-promo__title,
  .vxg-shop-promo--v-rail-brand .vxg-shop-promo__title {
    font-size: 15px;
  }

  .vxg-shop-promo--v-rail-product .vxg-shop-promo__cta,
  .vxg-shop-promo--v-rail-brand .vxg-shop-promo__cta {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .vxg-shop-promo[class*="vxg-shop-promo--v-"] .vxg-shop-promo__logo {
    max-width: 96px;
  }

  .vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__eyebrow {
    flex-wrap: nowrap;
  }
}
/* Native listing 1.3.0 — hauteur intrinsèque alignée sur une carte vidéo VXG.
   Contrat : média 16:9 (16:11 en listing mobile compact) + footer CTA de 44px.
   Logo, titre et prix sont superposés au média et ne peuvent donc jamais agrandir la carte.

   MESURE DE RÉFÉRENCE (vxg-v2.css, `.thumb.vxg-thumb-card` du même listing) :
     desktop ≥768px : 6px (padding haut) + L*9/16 (.img-holder, L2047)
                      + 12px (.vxg-card-meta, L2193) + 38px (.title min-height, L2217)
                      + 7px + 14px (.thumb-bottom) + 6px (padding bas)  =  média + 83,8px
     mobile <768px  : padding 0 (L2712, !important) + L*11/16 (L8635)
                      + 9px + 38px + 5px + 18px                          =  média + 70px
   Notre carte vaut média + 44px : elle reste 27,8px (desktop) / 26px (mobile) SOUS la
   carte vidéo la plus courte, à toutes les largeurs. Le plafond `max-height` posé sur
   `__inner` ci-dessous rend l'invariant vrai par construction et non par arithmétique. */
html .vxg-shop-promo--listing-card {
  align-self: start;
  container-name: vxgshopnative;
  container-type: inline-size;
  display: block;
  list-style: none;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 6px 8px;
  width: 100%;
}

/* La gouttière de cellule appartient à la GRILLE, pas à la carte : `html .grid-temp .thumb`
   (vxg-v2.css:318, spécificité 0-2-1) battait notre `html .vxg-shop-promo--listing-card`
   (0-1-1) et remettait la cellule boutique à padding:0 pendant que la cellule vidéo gardait
   ses 6px 8px via `html .thumb.vxg-thumb-card` (vxg-v2.css:2043, 0-2-1). Le média boutique
   sortait donc de 16px en largeur et de 9px en hauteur du gabarit de ses voisines : c'est
   exactement le « rapporté » visible. On reprend le même sélecteur de classe composée que la
   carte vidéo. Sous 768px, vxg-v2.css:2712 remet les DEUX à 0 en !important — rien à ajouter. */
html .grid-temp .thumb.vxg-shop-promo--listing-card,
html .thumbs .thumb.vxg-shop-promo--listing-card {
  padding: 6px 8px;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__inner {
  /* `cqw` se résout sur le conteneur ANCESTRAL : déclaré ici (et non sur la cellule, qui est
     elle-même le conteneur et s'exclut), 100cqw vaut exactement la largeur de média. Si le
     navigateur ignore les unités de conteneur, la déclaration tombe et on retrouve le
     comportement actuel — jamais une carte plus haute. */
  --vxg-shop-native-cta: 44px;
  --vxg-shop-native-media: calc(100cqw * 9 / 16);
  background: var(--surface, #0b0c0f);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-card, 0 12px 30px rgba(0, 0, 0, 0.38));
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto) var(--vxg-shop-native-cta);
  height: auto;
  isolation: isolate;
  /* +4px : `__inner` porte un filet de 1px en box-sizing:border-box, la boîte de bordure vaut
     donc média + CTA + 2px. Le plafond n'est pas une mise en page, c'est un garde-fou —
     il doit rester au-dessus de la géométrie nominale, jamais la rogner. */
  max-height: calc(var(--vxg-shop-native-media) + var(--vxg-shop-native-cta) + 4px);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__inner::after {
  display: none;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__media,
html .vxg-home .thumb.vxg-shop-promo--listing-card .vxg-shop-promo__media {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: calc(var(--radius, 16px) - 1px) calc(var(--radius, 16px) - 1px) 0 0;
  display: flex !important;
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__media::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0 36%, rgba(0, 0, 0, 0.78) 78%, rgba(0, 0, 0, 0.94) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* `max-height:100%` : l'attribut height= de l'image (320 ou 240) est sa taille intrinsèque et
   pouvait, en tant que contribution min-content de la rangée `auto`, pousser le média au-delà
   du 16:9. Deuxième verrou du plafond de hauteur. */
html .vxg-shop-promo--listing-card .vxg-shop-promo__image,
html .vxg-shop-promo--listing-card .vxg-shop-promo__brand-art {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  object-position:
    var(--vxg-shop-object-position-x, 50%)
    var(--vxg-shop-object-position-y, 50%);
  position: relative;
  z-index: 0;
}

/* Pack-shot sur panneau clair (image_fit:"contain" — tous les produits Discount.gay, qui
   n'envoient pas le champ, et les produits Poppers qui l'envoient) : le voile ne doit pas
   éteindre le produit. Il ne démarre qu'au tiers, et l'image se réserve le haut du cadre. */
html .vxg-shop-promo--listing-card.vxg-shop-promo--fit-contain .vxg-shop-promo__media::after {
  background:
    linear-gradient(180deg, transparent 0 32%, rgba(0, 0, 0, 0.6) 66%, rgba(0, 0, 0, 0.93) 100%);
}

html .vxg-shop-promo--listing-card.vxg-shop-promo--fit-contain .vxg-shop-promo__image {
  padding: 4% 6% 16%;
}

/* La capsule de marque est blanche : sur un panneau clair il lui faut un filet, sinon elle
   disparaît. Les deux boutiques passent par la même règle — une seule famille visuelle. */
html .vxg-shop-promo--listing-card.vxg-shop-promo--fit-contain .vxg-shop-promo__brand {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__content {
  display: contents;
  min-height: 0;
  min-width: 0;
  padding: 0;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__eyebrow {
  left: 8px;
  margin: 0;
  max-width: calc(100% - 16px);
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__brand {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
  max-width: min(132px, calc(100% - 40px));
  min-height: 22px;
  padding: 3px 7px;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__logo {
  height: 12px;
  max-width: 116px;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__title {
  bottom: 80px;
  color: var(--foreground, #fff);
  display: -webkit-box;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 750;
  left: 10px;
  letter-spacing: 0;
  line-height: 17px;
  margin: 0;
  max-height: 34px;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: 10px;
  text-shadow: 0 2px 12px #000;
  z-index: 3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__description {
  display: none !important;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__prices {
  align-items: center;
  bottom: 51px;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  left: 10px;
  margin: 0;
  max-width: calc(100% - 20px);
  min-height: 24px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 10px;
  white-space: nowrap;
  z-index: 3;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__price {
  color: var(--foreground, #fff);
  flex: 0 1 auto;
  font-size: 17px;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px #000;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__old-price {
  color: var(--muted-foreground, rgba(255, 255, 255, 0.66));
  flex: 0 1 auto;
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__discount {
  background: var(--primary, #d51632);
  border: 0;
  color: #fff;
  flex: 0 0 auto;
  font-size: 10px;
  padding: 5px 7px;
  white-space: nowrap;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__inner:not(:has(.vxg-shop-promo__prices)) .vxg-shop-promo__title {
  bottom: 53px;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__actions {
  align-items: stretch;
  display: flex;
  grid-column: 1;
  grid-row: 2;
  height: var(--vxg-shop-native-cta, 44px);
  margin: 0 !important;
  min-height: var(--vxg-shop-native-cta, 44px);
  min-width: 0;
  position: relative;
  width: 100%;
  z-index: 4;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__cta,
html .vxg-home .thumb.vxg-shop-promo--listing-card .vxg-shop-promo__cta {
  align-items: center;
  /* rouge de marque du site plutôt que le dégradé maison ; la première déclaration reste le
     repli si `color-mix` n'est pas supporté. */
  background: var(--primary, #d51632);
  background:
    linear-gradient(135deg, var(--primary, #d51632), color-mix(in oklab, var(--primary, #d51632) 72%, #000));
  border: 0;
  border-radius: 0 0 calc(var(--radius, 16px) - 1px) calc(var(--radius, 16px) - 1px);
  display: flex !important;
  font-size: 13px;
  gap: 8px;
  height: var(--vxg-shop-native-cta, 44px);
  justify-content: space-between;
  letter-spacing: 0;
  min-height: var(--vxg-shop-native-cta, 44px);
  min-width: 0;
  padding: 0 13px;
  transform: none;
  width: 100%;
}

/* Le libellé vient de l'API (« Voir l'offre », « Voir la sélection »… et ses cinq
   traductions) : il n'a pas de longueur garantie. Une seule ligne, jamais de césure, et
   l'ellipse comme dernier filet — la flèche, elle, ne se comprime jamais. */
html .vxg-shop-promo--listing-card .vxg-shop-promo__cta-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__cta-arrow {
  flex: 0 0 auto;
  font-size: 14px;
}

html .vxg-shop-promo--listing-card .vxg-shop-promo__cta:focus-visible {
  outline-offset: -3px;
}

/* Les huit variantes changent la hiérarchie visuelle, jamais la géométrie. */
html .vxg-shop-promo--v-native-etiquette .vxg-shop-promo__title,
html .vxg-shop-promo--v-native-vitrine .vxg-shop-promo__title {
  background: rgba(8, 9, 12, 0.82);
  border-left: 3px solid var(--primary, #d51632);
  left: 0;
  max-height: 39px;
  padding: 3px 10px;
  right: 0;
}

html .vxg-shop-promo--v-native-portrait .vxg-shop-promo__image {
  margin-left: auto;
  padding: 5%;
  width: 62%;
}

/* la variante portrait pose sa propre géométrie d'image : elle doit repasser DEVANT la règle
   `--fit-contain` de la carte de listing, plus spécifique d'une classe. */
html .vxg-shop-promo--listing-card.vxg-shop-promo--fit-contain.vxg-shop-promo--v-native-portrait .vxg-shop-promo__image {
  padding: 5%;
  width: 62%;
}

html .vxg-shop-promo--v-native-legacy-v4 .vxg-shop-promo__media {
  box-shadow: inset 0 0 0 2px rgba(213, 22, 50, 0.5);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--primary, #d51632) 50%, transparent);
}

html .vxg-shop-promo--v-native-sombre .vxg-shop-promo__media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.96));
}

html .vxg-shop-promo--v-native-vitrine .vxg-shop-promo__media {
  background: #f5f5f6;
}

html .vxg-shop-promo--v-native-prix .vxg-shop-promo__price {
  background: var(--primary, #d51632);
  border-radius: 8px;
  padding: 5px 8px;
}

html .vxg-shop-promo--v-native-ruban .vxg-shop-promo__discount {
  margin-left: auto;
}

@media (max-width: 767px) {
  /* vxg-v2.css:2712 remet `html .grid-temp .thumb` à padding:0 en !important : la cellule
     vidéo comme la nôtre y perdent leur gouttière. Le 5px qui vivait ici ne s'appliquait
     jamais dans un listing ; on l'aligne pour les hôtes hors grille. */
  html .vxg-shop-promo--listing-card {
    padding: 0;
  }

  html:not(.vxg-density-comfort) .vxg-listing .vxg-shop-promo--listing-card .vxg-shop-promo__media {
    aspect-ratio: 16 / 11;
  }

  /* le plafond suit la vignette compacte, sinon il resterait calé sur le 16:9 */
  html:not(.vxg-density-comfort) .vxg-listing .vxg-shop-promo--listing-card .vxg-shop-promo__inner {
    --vxg-shop-native-media: calc(100cqw * 11 / 16);
  }

  html:not(.vxg-density-comfort) .vxg-listing .vxg-shop-promo--listing-card .vxg-shop-promo__old-price {
    display: none;
  }

  html:not(.vxg-density-comfort) .vxg-listing .vxg-shop-promo--listing-card .vxg-shop-promo__title {
    -webkit-line-clamp: 1;
    bottom: 76px;
    max-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not(.vxg-density-comfort) .vxg-listing .vxg-shop-promo--listing-card .vxg-shop-promo__inner:not(:has(.vxg-shop-promo__prices)) .vxg-shop-promo__title {
    bottom: 53px;
  }
}

html .vxg-home .vxg-video-section .vxg-shop-promo--listing-card {
  padding: 0 !important;
}

/* Deux paliers de conteneur, mesurés sur la cellule réelle du listing :
     320px → colonne 144px · 390px → 179px · 720px → 223px · 768px → 223px (hors padding)
     1024px → 213px · 1120px → 237px · 1440px → 246px.
   Le libellé le plus long du catalogue FR (« Voir la sélection », 17 signes) demande
   ~0,55em/signe en Outfit 750 : 103px à 11px de fonte contre 128px disponibles dans la
   cellule de 144px, flèche et gouttière déduites. */
@container vxgshopnative (max-width: 179px) {
  html .vxg-shop-promo--listing-card .vxg-shop-promo__brand {
    max-width: 104px;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__logo {
    max-width: 90px;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__old-price {
    display: none;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__price {
    font-size: 15px;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__discount {
    font-size: 9px;
    padding-inline: 5px;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__cta {
    font-size: 12px;
    gap: 6px;
    padding: 0 10px;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__cta-arrow {
    font-size: 12px;
  }
}

@container vxgshopnative (max-width: 159px) {
  html .vxg-shop-promo--listing-card .vxg-shop-promo__title {
    font-size: 12px;
    line-height: 16px;
    max-height: 32px;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__price {
    font-size: 14px;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__cta {
    font-size: 11px;
    gap: 5px;
    padding: 0 8px;
  }

  html .vxg-shop-promo--listing-card .vxg-shop-promo__cta-arrow {
    font-size: 11px;
  }
}

/* Layouts de campagne 1.2.0 — portage des familles pile, etiquette, portrait et affiche. */
.vxg-shop-promo__deck {
  display: grid;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

.vxg-shop-promo__tile {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: grid;
  gap: 9px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 6px;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.vxg-shop-promo__tile:hover,
.vxg-shop-promo__tile:focus-visible {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(213, 22, 50, 0.72);
}

.vxg-shop-promo__tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

.vxg-shop-promo__tile-media {
  align-items: center;
  align-self: stretch;
  background: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 52px;
  min-width: 0;
  overflow: hidden;
}

.vxg-shop-promo__tile-image {
  display: block;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  width: 100%;
}

.vxg-shop-promo__tile--fit-cover .vxg-shop-promo__tile-image {
  object-fit: cover;
}

.vxg-shop-promo__tile-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.vxg-shop-promo__tile-title {
  color: #fff;
  display: -webkit-box;
  font: 650 12px/1.22 Inter, sans-serif;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vxg-shop-promo__tile-prices {
  align-items: baseline;
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.vxg-shop-promo__tile-price {
  color: #fff;
  font: 800 13px/1 Outfit, Inter, sans-serif;
}

.vxg-shop-promo__tile-old-price {
  color: #8f9199;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vxg-shop-promo__tile-discount {
  background: rgba(213, 22, 50, 0.2);
  border-radius: 999px;
  color: #ff8c9c;
  font-size: 9px;
  font-weight: 750;
  padding: 3px 5px;
}

/* ==========================================================================
   Rangée éditoriale sous la pagination — portage de la fiche prototype
   (shop-promo/pagination-banner.html, format 05 « listing_pagination »)
   ==========================================================================

   Le prototype ne dessine PAS une bannière : c'est une RANGÉE de la page.
   Un filet en haut, un filet en bas, fond transparent, ni ombre ni rayon
   (« plus de pavé noir encadré et ombre de 250px de haut »). On reprend cette
   grammaire dans le vocabulaire de production.

   Deux règles de gabarit, imposées par la rotation avec la rangée ExoClick
   native qui occupe la MÊME fente (.vxg-ct-rail-slot, cf. vxg-cartes.css) :

   1. la largeur est celle de la fente, jamais un max-width centré. La colonne
      de listing monte à 2440px (vxg-v2.css : .vxg-listing .main>.container),
      les 950px du prototype auraient laissé la moitié de la rangée vide dès
      1440px et la largeur aurait sauté d'un tirage à l'autre ;
   2. la hauteur reste dans la bande d'une unité ExoClick — vignette 16/9 à la
      largeur d'une colonne + deux lignes de titre, soit ~200 à 260px. C'est
      exactement la cible que le prototype se donne, « tenir entre 250 et
      300px » : on la tient par --vxg-shop-rail-media, un PLAFOND de hauteur
      d'image, et non par un ratio qui grandirait avec la largeur.

   La géométrie passe par des PROPRIÉTÉS PERSONNALISÉES, pas par des règles
   concurrentes : les valeurs par défaut vivent dans le repli du var(), les
   quatre compositions ne posent que des jetons sur la racine. Aucune course à
   la spécificité entre le socle et une composition, et les media queries
   redéclarent les jetons au lieu de rejouer toute la grille.

   Pondérations de rotation inchangées (pile 5 / étiquette 4 / portrait 3 /
   affiche 3) : c'est le RENDU qui change, pas le tirage.
   ========================================================================== */

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] {
  /* Plafond de hauteur d'image, seul garde-fou de la bande 250–300px : mesuré
     à 1440px, la rangée fait 291px filets compris — une unité ExoClick de la
     même fente en fait ~200 à 260. */
  --vxg-shop-rail-media: clamp(100px, 9vw, 132px);
  margin: 22px 0 18px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  align-content: start;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.09));
  border-radius: 0;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.09));
  box-shadow: none;
  column-gap: clamp(14px, 2vw, 28px);
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: var(
    --vxg-shop-rail-cols,
    minmax(0, var(--vxg-shop-rail-hero, clamp(196px, 22vw, 296px))) minmax(0, 1fr)
  );
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 16px 0;
  row-gap: 8px;
}

/* Le filet intérieur appartient au pavé encadré : sur une rangée il dessinait
   un rectangle fantôme au-dessus du filet haut. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner::after {
  display: none;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  aspect-ratio: var(--vxg-shop-rail-hero-ratio, 16 / 10);
  border: 0;
  border-radius: 16px;
  grid-column: 1;
  grid-row: 1;
  max-height: var(--vxg-shop-rail-media);
  min-height: 0;
}

/* Signature plus présente que sur une carte : le bloc est large, une capsule
   de 24px s'y perdait (le prototype la monte à 36px sur cette surface). */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__brand {
  max-width: 168px;
  min-height: 28px;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__logo {
  height: 16px;
  max-width: 148px;
}

/* Le prix et le bouton partagent la dernière ligne : empilés, ils coûtaient
   28px de haut et faisaient sortir la rangée de sa bande de hauteur. Les
   places sont posées à la main — la description est facultative, une mise en
   place automatique aurait décalé le prix d'une ligne selon la fiche. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  align-content: start;
  column-gap: 12px;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 152px);
  row-gap: 6px;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
  display: -webkit-box;
  font-size: clamp(16px, 1.15vw, 20px);
  grid-column: 1 / -1;
  grid-row: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* La rangée ferme une page de grille : deux lignes d'argumentaire de plus la
   feraient dépasser la bande de hauteur d'une unité ExoClick. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  display: none;
}

/* Repliés, le prix, le prix barré et la remise prenaient trois lignes dans une
   colonne étroite. Sur cette surface ils se ROGNENT — c'est la règle que suit
   déjà .vxg-shop-promo__tile-prices. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__prices {
  align-self: center;
  flex-wrap: nowrap;
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__actions {
  grid-column: 2;
  grid-row: 3;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  overflow: hidden;
  padding-inline: 10px;
  width: 100%;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__deck {
  align-content: start;
  gap: 10px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: var(--vxg-shop-rail-deck-flow, row);
  grid-column: var(--vxg-shop-rail-deck-col, 2);
  grid-row: 1 / span 2;
  grid-template-columns: var(--vxg-shop-rail-deck-cols, repeat(2, minmax(0, 1fr)));
  grid-template-rows: var(--vxg-shop-rail-deck-rows, none);
  overflow: hidden;
}

/* Aucune piste en pixels durs : tout passe par minmax(0, …). C'est ce qui
   permet au contenu d'être ROGNÉ au lieu de pousser la page en défilement
   horizontal quand la largeur utile tombe sous 300px. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile {
  align-content: var(--vxg-shop-rail-tile-align, center);
  grid-template-columns: var(
    --vxg-shop-rail-tile-cols,
    minmax(0, clamp(48px, 5vw, 68px)) minmax(0, 1fr)
  );
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-media {
  aspect-ratio: var(--vxg-shop-rail-tile-ratio, auto);
  max-height: var(--vxg-shop-rail-media);
}

/* --- pile : quatre lignes rangées en deux colonnes ------------------------
   Le prototype s'arrête à quatre : cinq lignes empilées faisaient 440px. */
html .vxg-shop-promo--v-rail-pile {
  --vxg-shop-rail-deck-rows: repeat(2, minmax(0, 1fr));
}

/* --- étiquette : la vedette à gauche, les deux offres à droite ------------ */
html .vxg-shop-promo--v-rail-etiquette {
  --vxg-shop-rail-deck-cols: minmax(0, 1fr);
  --vxg-shop-rail-deck-rows: repeat(2, minmax(0, 1fr));
  --vxg-shop-rail-hero: clamp(232px, 28vw, 372px);
  --vxg-shop-rail-hero-ratio: 16 / 7;
  --vxg-shop-rail-tile-cols: minmax(0, clamp(84px, 9vw, 112px)) minmax(0, 1fr);
}

/* --- portrait : rail horizontal, une création par colonne ----------------- */
html .vxg-shop-promo--v-rail-portrait {
  --vxg-shop-rail-deck-cols: none;
  --vxg-shop-rail-deck-flow: column;
  --vxg-shop-rail-tile-align: start;
  --vxg-shop-rail-tile-cols: minmax(0, 1fr);
  --vxg-shop-rail-tile-ratio: 4 / 3;
}

/* --- affiche : trois colonnes égales, vedette comprise -------------------- */
html .vxg-shop-promo--v-rail-affiche {
  --vxg-shop-rail-cols: repeat(3, minmax(0, 1fr));
  --vxg-shop-rail-deck-col: 2 / -1;
  --vxg-shop-rail-tile-align: start;
  --vxg-shop-rail-tile-cols: minmax(0, 1fr);
  --vxg-shop-rail-tile-ratio: 4 / 3;
}

/* Sidebar : le conteneur historique reste le seul inventaire, 320px et 500–605px. */
html .vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] {
  max-width: 320px;
  width: 100%;
}

html .vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  align-content: start;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  max-height: 605px;
  min-height: 500px;
  overflow: hidden;
  padding: 10px;
}

html .vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  min-height: 0;
}

html .vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  gap: 6px;
}

html .vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  display: none;
}

html .vxg-shop-promo--watch-side[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  width: 100%;
}

html .vxg-shop-promo--v-side-pile .vxg-shop-promo__media {
  aspect-ratio: 16 / 7;
}

html .vxg-shop-promo--v-side-pile .vxg-shop-promo__deck {
  grid-template-columns: 1fr;
}

html .vxg-shop-promo--v-side-pile .vxg-shop-promo__tile {
  min-height: 64px;
}

html .vxg-shop-promo--v-side-etiquette .vxg-shop-promo__deck,
html .vxg-shop-promo--v-side-affiche .vxg-shop-promo__deck {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html .vxg-shop-promo--v-side-etiquette .vxg-shop-promo__tile,
html .vxg-shop-promo--v-side-affiche .vxg-shop-promo__tile {
  align-content: start;
  grid-template-columns: 1fr;
}

html .vxg-shop-promo--v-side-etiquette .vxg-shop-promo__tile-media,
html .vxg-shop-promo--v-side-affiche .vxg-shop-promo__tile-media {
  aspect-ratio: 1;
}

html .vxg-shop-promo--v-side-portrait .vxg-shop-promo__deck {
  display: flex;
  overflow: hidden;
  scroll-snap-type: x mandatory;
}

html .vxg-shop-promo--v-side-portrait .vxg-shop-promo__tile {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Bloc mobile passif : plafond absolu 150px, quelle que soit la copie. */
html .vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] {
  max-height: 150px;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

html .vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  gap: 8px;
  grid-template-columns: 96px minmax(0, 1fr);
  height: 150px;
  max-height: 150px;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}

html .vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  aspect-ratio: auto;
  border: 0;
  grid-column: 1;
  grid-row: 1;
  height: 132px;
  min-height: 0;
}

html .vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  align-content: start;
  gap: 5px;
  grid-column: 2;
  grid-row: 1;
  max-height: 132px;
  overflow: hidden;
}

html .vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  display: none;
}

html .vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
  font-size: 14px;
  -webkit-line-clamp: 1;
}

html .vxg-shop-promo--watch-passive[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  min-height: 40px;
  width: 100%;
}

html .vxg-shop-promo--watch-passive .vxg-shop-promo__deck {
  display: none;
}

/* Slide player : trois géométries de référence, hors contrôles et fermé en 11s par le cycle existant. */
html .vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] {
  bottom: 54px;
  max-width: min(390px, calc(100% - 24px));
  right: 12px;
  width: 390px;
}

html .vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
  gap: 8px;
  grid-template-columns: 94px minmax(0, 1fr);
  max-height: 124px;
  min-height: 0;
  overflow: hidden;
  padding: 8px 44px 8px 8px;
}

html .vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  aspect-ratio: 1;
  border: 0;
  min-height: 0;
}

html .vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  gap: 4px;
  overflow: hidden;
}

html .vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  display: none;
}

html .vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
  font-size: 14px;
  -webkit-line-clamp: 1;
}

html .vxg-shop-promo--watch-slide[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  min-height: 36px;
  width: 100%;
}

html .vxg-shop-promo--v-slide-legacy-v5 .vxg-shop-promo__inner {
  height: 104px;
}

html .vxg-shop-promo--v-slide-affiche .vxg-shop-promo__inner {
  height: 124px;
}

html .vxg-shop-promo--v-slide-pile .vxg-shop-promo__inner {
  grid-template-columns: 68px minmax(0, 1fr);
  height: 78px;
  padding-block: 6px;
}

html .vxg-shop-promo--v-slide-pile .vxg-shop-promo__eyebrow,
html .vxg-shop-promo--v-slide-pile .vxg-shop-promo__prices {
  display: none;
}

html .vxg-shop-promo--v-slide-pile .vxg-shop-promo__deck {
  display: none;
}

/* Xreels 9:16 : média 70%, packshot contain ou création Poppers cover. */
html .vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
  height: 70%;
  min-height: 70%;
}

html .vxg-shop-promo--xreels[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  min-height: 30%;
}

/* --- Rangée : dégradation en espace réduit -------------------------------

   Le prototype coupait à 759px. Le reste du site coupe à 767 (vxg-v2.css,
   vxg-cartes.css, et la carte de listing juste en dessous) : les huit pixels
   d'écart laissaient une bande où la rangée était déjà en mode étroit alors
   que la grille tenait encore ses colonnes. Le point est ramené sur celui du
   site. Les largeurs, elles, ne sont plus des paliers : hero, colonne d'image
   des tuiles et plafond de hauteur sont des clamp(), donc continus entre deux
   points de rupture.

   Ordre de retrait, celui du prototype : on enlève des OFFRES, jamais l'offre
   principale. Le nom, le prix, le prix barré et le bouton ne tombent à aucune
   largeur.
   ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
  /* portrait : cinq colonnes ne se lisent plus, on descend à trois. */
  html .vxg-shop-promo--v-rail-portrait .vxg-shop-promo__tile:nth-child(n + 4) {
    display: none;
  }

  /* affiche : la troisième colonne tombe, comme sur la fiche prototype. */
  html .vxg-shop-promo--v-rail-affiche {
    --vxg-shop-rail-cols: repeat(2, minmax(0, 1fr));
    --vxg-shop-rail-deck-cols: minmax(0, 1fr);
  }

  html .vxg-shop-promo--v-rail-affiche .vxg-shop-promo__tile:nth-child(n + 2) {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Toutes les compositions convergent : une ligne vedette (packshot carré +
     copie), puis les offres restantes sur une deuxième rangée. Les jetons sont
     posés sur le sélecteur générique, donc au-dessus de ceux des quatre
     compositions : une seule forme, quel que soit le tirage. */
  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] {
    /* Le packshot est carré : sa colonne et son plafond de hauteur sont le même
       jeton, sinon les deux se désaccordent au premier réglage. Il reste fluide
       — figé à 96px il n'était qu'un timbre-poste sur une tablette de 720px. */
    --vxg-shop-rail-media: clamp(96px, 20vw, 160px);
    --vxg-shop-rail-cols: minmax(0, var(--vxg-shop-rail-media)) minmax(0, 1fr);
    --vxg-shop-rail-deck-col: 1 / -1;
    --vxg-shop-rail-deck-cols: repeat(2, minmax(0, 1fr));
    --vxg-shop-rail-deck-flow: row;
    --vxg-shop-rail-deck-rows: none;
    --vxg-shop-rail-hero-ratio: 1;
    --vxg-shop-rail-tile-align: center;
    --vxg-shop-rail-tile-cols: minmax(0, 52px) minmax(0, 1fr);
    --vxg-shop-rail-tile-ratio: auto;
    margin: 16px 0 14px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner {
    column-gap: 12px;
    grid-template-rows: auto auto;
    padding: 14px 0;
    row-gap: 10px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media {
    border-radius: 14px;
    grid-column: 1;
    grid-row: 1;
  }

  /* La piste du bouton se dimensionne sur son libellé : figée à 152px, elle ne
     laissait plus que 34px au prix sur un écran de 320px. */
  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__deck {
    gap: 8px;
    grid-row: 2;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile:nth-child(n + 3) {
    display: none;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
    font-size: 15px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__price {
    font-size: 16px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__brand {
    max-width: 132px;
    min-height: 24px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__logo {
    height: 13px;
    max-width: 116px;
  }
}

/* Le prototype coupait ici sa deuxième offre. Sous 460px de fenêtre il reste
   ~296px utiles une fois la gouttière du site retirée (--vxg-gutter, 12px de
   chaque côté) : deux tuiles côte à côte y tombaient à 144px, dont 52 pris par
   le packshot. Une seule tuile, pleine largeur. */
@media (max-width: 459px) {
  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] {
    --vxg-shop-rail-deck-cols: minmax(0, 1fr);
    --vxg-shop-rail-media: 84px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile:nth-child(n + 2) {
    display: none;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
    font-size: 12px;
    gap: 6px;
  }
}

/* Invariant final listing — aucune variante ne peut dépasser média + 44px. */
html .grid-temp > li[data-vxg-shop-surface="listing-card"] {
  align-self: start !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: clip !important;
  width: 100% !important;
}

html .vxg-listing .grid-temp > li[data-vxg-shop-surface="listing-card"] {
  padding: 6px 8px !important;
}

html .grid-temp > li[data-vxg-shop-surface="listing-card"] .vxg-shop-promo__inner {
  border: 0 !important;
  display: grid !important;
  gap: 0 !important;
  grid-template: minmax(0, auto) 44px / minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html .grid-temp > li[data-vxg-shop-surface="listing-card"] .vxg-shop-promo__media {
  aspect-ratio: 16 / 9 !important;
  display: flex !important;
  grid-area: 1 / 1 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}

html .grid-temp > li[data-vxg-shop-surface="listing-card"] .vxg-shop-promo__content {
  display: block !important;
  grid-area: 2 / 1 !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: static !important;
}

html .grid-temp > li[data-vxg-shop-surface="listing-card"] :is(
  .vxg-shop-promo__eyebrow,
  .vxg-shop-promo__title,
  .vxg-shop-promo__prices
) {
  min-width: 0;
  position: absolute;
  z-index: 3;
}

html .grid-temp > li[data-vxg-shop-surface="listing-card"] .vxg-shop-promo__description {
  display: none !important;
}

html .grid-temp > li[data-vxg-shop-surface="listing-card"] .vxg-shop-promo__actions {
  display: flex !important;
  height: 44px !important;
  margin: 0 !important;
  width: 100% !important;
}

html .grid-temp > li[data-vxg-shop-surface="listing-card"] .vxg-shop-promo__cta {
  display: flex !important;
  height: 44px !important;
  max-height: 44px !important;
  min-height: 44px !important;
  overflow: hidden !important;
  width: 100% !important;
}

html .grid-temp > li[data-vxg-shop-surface="listing-card"] .vxg-shop-promo__cta > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* La cellule video est a padding:0!important (vxg-v2.css, bloc mobile) : tout
     retrait ici rendrait la carte boutique 10px plus etroite que ses voisines,
     soit exactement l'effet de « piece rapportee » qu'on cherche a supprimer. */
  html .vxg-listing .grid-temp > li[data-vxg-shop-surface="listing-card"] {
    padding: 0 !important;
  }

  html:not(.vxg-density-comfort) .vxg-listing .grid-temp > li[data-vxg-shop-surface="listing-card"] .vxg-shop-promo__media {
    aspect-ratio: 16 / 11 !important;
  }
}

/* --- Rangee boutique sous la grille de listing -----------------------------
   Section propre a la boutique, distincte de la rangee ExoClick : elle se pose
   sous la grille et au-dessus de la pagination. Largeur bornee par la colonne
   de listing, jamais de debordement horizontal. */
html .vxg-shop-rail-host {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 18px 0 22px;
  padding: 0;
  overflow: hidden;
}

html .vxg-shop-rail-host > div {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767px) {
  html .vxg-shop-rail-host {
    margin: 14px 0 16px;
  }
}

/* Fente du banc d'essai : sans largeur explicite, un div insere dans une
   colonne se reduit a la largeur de son contenu — c'est le piege qui ecrase
   les apercus du prototype. On lui donne la largeur de son hote. */
html [data-vxg-shop-forced-slot] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 14px;
}

/* =========================================================================
   Rangee sous pagination — rendu calque sur /shop-promo/pagination-banner.html
   Rangee editoriale de 950 px maximum, filets haut et bas, en-tete a droite,
   grille de lignes produit, bouton large en pied. Les accents dores du
   prototype passent au rouge de la marque (var(--primary)).
   ========================================================================= */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner,
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner--multi {
  position: relative;
  display: grid;
  grid-template-areas: "tete" "produits";
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding: 18px 0 78px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, .09));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .09));
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner::after {
  display: none;
}

/* Le visuel vedette du gabarit de production n'existe pas dans le prototype :
   la rangee est une grille de lignes, toutes de meme poids. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__media,
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__description {
  display: none !important;
}

/* En-tete : signature a gauche, accroche a droite. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__content {
  grid-area: tete;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  position: static;
  background: none;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__eyebrow {
  order: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__brand {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 190px;
  padding: 0;
  background: none;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__logo {
  height: 18px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  position: static;
  max-height: none;
  margin: 0;
  padding: 0;
  color: var(--foreground, #fff);
  font: 700 15px/1.25 Outfit, Inter, sans-serif;
  text-align: right;
  text-shadow: none;
  -webkit-line-clamp: 1;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__prices {
  display: none !important;
}

/* Bouton large en pied, comme « Voir les autres deals » du prototype. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__actions {
  position: absolute;
  bottom: 20px;
  left: 0;
  display: flex;
  justify-content: center;
  /* Largeur explicite : le couple left/right ne suffit pas ici, une regle de
     base laisse right a auto et la boite retombe a zero — le bouton perd
     alors son min-width, exprime en pourcentage du parent. */
  width: 100%;
  padding: 0;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
  width: min(420px, 100%);
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 10px;
  background: var(--primary, #c5162e);
  color: #fff;
  font: 700 14px/1 Outfit, Inter, sans-serif;
}

/* Grille de lignes produit : deux colonnes en desktop, une seule en mobile. */
html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__deck {
  grid-area: produits;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  text-decoration: none;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-media {
  display: block;
  width: 84px;
  height: 84px;
  min-width: 0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-title {
  display: -webkit-box;
  overflow: hidden;
  max-height: 40px;
  color: var(--foreground, #fff);
  font: 600 14px/1.35 Inter, sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-price {
  color: var(--foreground, #fff);
  font: 800 17px/1 Outfit, Inter, sans-serif;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-old-price {
  color: var(--muted-foreground, #9b9ea6);
  font: 500 12.5px/1 Inter, sans-serif;
  text-decoration: line-through;
}

html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-discount {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--primary, #c5162e);
  color: #fff;
  font: 800 12.5px/1 Outfit, Inter, sans-serif;
  white-space: nowrap;
}

@media (max-width: 767px) {
  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner,
  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__inner--multi {
    gap: 11px;
    padding: 14px 0 70px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__deck {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile {
    grid-template-columns: 66px minmax(0, 1fr) 38px;
    gap: 11px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-media {
    width: 66px;
    height: 66px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-title {
    max-height: 36px;
    font-size: 13px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__tile-price {
    font-size: 15px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__title {
    font-size: 13.5px;
  }

  html .vxg-shop-promo--listing-rail[class*="vxg-shop-promo--v-"] .vxg-shop-promo__cta {
    min-width: 100%;
    min-height: 42px;
    font-size: 13px;
  }
}