← Autopsie d'une card produit — de 87 à 38 éléments, 0 div

Démo interactive

Sandbox — Autopsie d'une card produit

Modifiez le HTML et le CSS de chaque version, puis cliquez sur « Appliquer » pour voir le résultat. Les photos produit ont été remplacées par des placeholders pour ne pas porter atteinte à l'image de la marque, ce qui rend les indicateurs de pagination visibles dans la version originale.

Original vs reconstruit
	Original	Reconstruit	Réduction
Éléments HTML	87	38	−56 %
Balises <div>	27	0	−100 %
Défauts d'accessibilité	8	0	−100 %

Original

Version originale — 87 éléments, 27 div

Cette card contient des problèmes d'accessibilité volontaires — c'est le code récupéré tel quel.

card-originale.html

<article class="card" id="orig-card-view">
  <div class="card-border-overlay"></div>
  <a class="card-media-link" href="#orig-product-page">
    <div class="carousel-wrapper">
      <div class="carousel-container">
        <ul class="carousel-list" role="list" tabindex="-1">
          <li class="carousel-slide">
            <div class="slide-inner">
              <div class="image-aspect-ratio">
                <div class="image-container">
                  <img class="card-image"
                       alt="Placeholder 1"
                       width="300" height="433" loading="eager"
                       src="/images/demo/placeholder-1.svg">
                </div>
              </div>
            </div>
          </li>
          <li class="carousel-slide">
            <div class="slide-inner">
              <div class="image-aspect-ratio">
                <div class="image-container">
                  <img class="card-image"
                       alt="Placeholder 2"
                       width="300" height="433" loading="lazy"
                       src="/images/demo/placeholder-2.svg">
                </div>
              </div>
            </div>
          </li>
          <li class="carousel-slide">
            <div class="slide-inner">
              <div class="image-aspect-ratio">
                <div class="image-container">
                  <img class="card-image"
                       alt="Placeholder 3"
                       width="300" height="433" loading="lazy"
                       src="/images/demo/placeholder-3.svg">
                </div>
              </div>
            </div>
          </li>
          <li class="carousel-slide">
            <div class="slide-inner">
              <div class="image-aspect-ratio">
                <div class="image-container">
                  <img class="card-image"
                       alt="Placeholder 4"
                       width="300" height="433" loading="lazy"
                       src="/images/demo/placeholder-4.svg">
                </div>
              </div>
            </div>
          </li>
          <li class="carousel-slide">
            <div class="slide-inner">
              <div class="image-aspect-ratio">
                <div class="image-container">
                  <img class="card-image"
                       alt="Placeholder 5"
                       width="300" height="433" loading="lazy"
                       src="/images/demo/placeholder-5.svg">
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="pagination-wrapper" aria-hidden="true">
          <div class="pagination-inner">
            <ul class="pagination-list">
              <li class="pagination-dot" data-active="true" aria-current="true">
                <i class="dot-indicator active"></i>
                <span class="sr-only">1 / 5</span>
              </li>
              <li class="pagination-dot" data-active="false">
                <i class="dot-indicator inactive"></i>
                <span class="sr-only">2 / 5</span>
              </li>
              <li class="pagination-dot" data-active="false">
                <i class="dot-indicator inactive"></i>
                <span class="sr-only">3 / 5</span>
              </li>
              <li class="pagination-dot" data-active="false">
                <i class="dot-indicator inactive"></i>
                <span class="sr-only">4 / 5</span>
              </li>
              <li class="pagination-dot" data-active="false">
                <i class="dot-indicator inactive"></i>
                <span class="sr-only">5 / 5</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <ul class="badge-list" role="list" tabindex="-1">
      <li class="badge-item">
        <div class="badge-scope">
          <span class="badge-label"><span class="badge-text">Promo</span></span>
        </div>
      </li>
    </ul>
  </a>
  <div class="wishlist-wrapper">
    <div class="wishlist-inner">
      <button class="wishlist-button" type="button" aria-label="Ajouter aux préférés">
        <span class="icon-wrapper">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
          </svg>
        </span>
      </button>
    </div>
  </div>
  <div class="card-spacer"></div>
  <div class="info-section">
    <div class="sponsored-wrapper">
      <button class="sponsored-button" type="button" aria-haspopup="dialog" aria-label="Sponsorisé, informations">
        <span class="sponsored-text">Sponsorisé</span>
        <svg class="sponsored-icon" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.624-.008 11.992-5.376 12-12 0-6.627-5.373-12-12-12m0 22.5C6.201 22.5 1.5 17.799 1.5 12S6.201 1.5 12 1.5c5.796.007 10.493 4.704 10.5 10.5 0 5.799-4.701 10.5-10.5 10.5"></path>
          <circle cx="12" cy="5.6" r="1.1"></circle>
          <path d="M12 8.25a.75.75 0 0 0-.75.75v9.75a.75.75 0 1 0 1.5 0V9a.75.75 0 0 0-.75-.75"></path>
        </svg>
      </button>
    </div>
    <dialog class="sponsored-dialog">
      <p>Ce contenu est sponsorisé par un partenaire commercial.</p>
      <p class="dialog-note">Cette modale est une reconstitution simplifiée. Le site original utilisait un composant plus complexe que je n'ai pas reproduit intégralement.</p>
      <button type="button" class="dialog-close" aria-label="Fermer">✕</button>
    </dialog>
    <a class="info-link" tabindex="-1" href="#orig-product-page">
      <header>
        <div class="title-wrapper">
          <h3 class="card-title">
            <span class="brand-name">Marque</span>
            <span class="product-name">Modèle XYZ</span>
          </h3>
        </div>
        <section class="prices">
          <p class="price-line" aria-label="">
            <span class="price-sale-prefix">à partir de</span>
            <span class="price-sale">85,95&nbsp;€</span>
          </p>
          <p class="price-line" aria-label="">
            <span class="price-ref-label">Prix de référence :</span>
            <span class="price-ref-value">114,95&nbsp;€</span>
            <span class="price-discount-label">Jusqu'à</span>
            <span class="price-discount-value">-25%</span>
          </p>
        </section>
      </header>
    </a>
  </div>
</article>

<article class="product-page" id="orig-product-page" hidden>
  <nav class="product-page__nav">
    <a href="#orig-card-view" class="product-page__back">← Retour</a>
  </nav>
  <h2 class="product-page__title">Fiche produit</h2>
  <p class="product-page__brand">Marque</p>
  <p class="product-page__name">Modèle XYZ</p>
  <p class="product-page__price">85,95&nbsp;€</p>
  <p class="product-page__desc">Ceci est une page produit simplifiée pour la démonstration.</p>
</article>

function updateDots() {
    dots.forEach(function(dot, i) {
      dot.setAttribute('data-active', String(i === current));
      dot.querySelector('.dot-indicator').className = 'dot-indicator ' + (i === current ? 'active' : 'inactive');
    });
  }

function goTo(index) {
    current = (index + total) % total;
    slides[current].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
    updateDots();
  }

/* Buttons created on hover, destroyed on mouseleave — the original behavior */
  container.addEventListener('mouseenter', function() {
    if (container.querySelector('.carousel-btn')) return;
    var prev = document.createElement('button');
    prev.className = 'carousel-btn carousel-btn-prev';
    prev.innerHTML = '‹';
    prev.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); goTo(current - 1); });

var next = document.createElement('button');
    next.className = 'carousel-btn carousel-btn-next';
    next.innerHTML = '›';
    next.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); goTo(current + 1); });

container.appendChild(prev);
    container.appendChild(next);
  });

container.addEventListener('mouseleave', function() {
    container.querySelectorAll('.carousel-btn').forEach(function(btn) { btn.remove(); });
  });

/* Sponsored dialog */
  var sponsoredBtn = document.querySelector('.sponsored-button');
  var dialog = document.querySelector('.sponsored-dialog');
  var closeBtn = dialog.querySelector('.dialog-close');

sponsoredBtn.addEventListener('click', function() { dialog.showModal(); });
  closeBtn.addEventListener('click', function() { dialog.close(); });
  dialog.addEventListener('click', function(e) {
    if (e.target === dialog) dialog.close();
  });

/* Wishlist toggle */
  var wishBtn = document.querySelector('.wishlist-button');
  wishBtn.addEventListener('click', function() {
    var svg = wishBtn.querySelector('svg');
    var filled = svg.getAttribute('fill') !== 'none';
    svg.setAttribute('fill', filled ? 'none' : 'currentColor');
  });

/* Navigation card <-> product page */
  var cardView = document.getElementById('orig-card-view');
  var productPage = document.getElementById('orig-product-page');

/* === CARD === */
.card {
  display: flex;
  flex-direction: column;
  width: 200px;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Border overlay (hover state placeholder) */
.card-border-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  box-shadow: inset 0 0 0 1px #000;
}

/* Main link */
.card-media-link {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  outline-offset: 0;
}

/* Carousel */
.carousel-wrapper {
  /* div */
}
.carousel-container {
  /* div */
  position: relative;
}
.carousel-list {
  display: flex;
  overflow: scroll hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
}
.carousel-list::-webkit-scrollbar {
  display: none;
}
.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.slide-inner {
  /* div */
}
.image-aspect-ratio {
  /* div */
  position: relative;
  overflow: hidden;
  padding-top: 144.3%;
}
.image-container {
  /* div */
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.card-image {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  position: relative;
  vertical-align: middle;
  transition: opacity 0.25s ease-in-out;
  aspect-ratio: 300 / 433;
  object-fit: cover;
}

/* Pagination dots */
.pagination-wrapper {
  /* div */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.pagination-inner {
  /* div */
  display: flex;
  align-items: center;
}
.pagination-list {
  display: flex;
  flex: 1 1 auto;
  list-style: none;
  background: #fff;
}
.pagination-dot {
  flex: 1 1 auto;
  position: relative;
  height: 4px;
}
.dot-indicator {
  display: flex;
  flex: 1 1 auto;
  height: 4px;
  padding-top: 4px;
  font-style: italic;
}
.dot-indicator.active {
  background: #000;
}
.dot-indicator.inactive {
  background: #fff;
}
.sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Badge */
.badge-list {
  position: absolute;
  bottom: 8px;
  left: 0;
  max-width: 80%;
  display: flex;
  flex-wrap: wrap-reverse;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  list-style: none;
}
.badge-item {
  flex: 0 0 auto;
  margin: 4px 4px 0 0;
  max-width: 100%;
}
.badge-scope {
  /* div */
}
.badge-label {
  display: flex;
  align-items: center;
  max-width: fit-content;
  padding: 4px;
  background: #da0410;
}
.badge-text {
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wishlist */
.wishlist-wrapper {
  /* div */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}
.wishlist-inner {
  /* div */
  margin-top: 8px;
}
.wishlist-button {
  display: inline-block;
  background: #fff;
  border: none;
  padding: 8px;
  cursor: pointer;
  outline: none;
}
.wishlist-button:focus-visible {
  outline: 2px solid #000;
}
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: relative;
}
.icon-wrapper svg {
  width: 24px;
  height: 24px;
}

/* Spacer (reserves space for overlay content) */
.card-spacer {
  /* div */
  position: absolute;
  top: 0;
  width: 100%;
  height: 288px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

/* Info section */
.info-section {
  /* div */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 180px;
}

/* Sponsored */
.sponsored-wrapper {
  /* div */
}
.sponsored-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: transparent;
  border: none;
  padding: 8px 0 0 0;
  cursor: pointer;
  width: 100%;
}
.sponsored-text {
  font-size: 12px;
  line-height: 16px;
  color: #5c6169;
  margin-right: 8px;
}
.sponsored-icon {
  width: 12px;
  height: 12px;
  fill: #5c6169;
  flex: 0 0 auto;
  vertical-align: middle;
  overflow: hidden;
}

/* Info link */
.info-link {
  display: block;
  position: relative;
  z-index: 3;
  text-decoration: none;
  color: inherit;
}

/* Title */
.title-wrapper {
  /* div */
  margin-bottom: 8px;
}
.card-title {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}
.brand-name {
  display: block;
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  hyphens: auto;
}
.product-name {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  hyphens: auto;
}

/* Prices */
.prices {
  display: flex;
  flex-direction: column;
}
.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
}
.price-sale {
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
  color: #da0410;
}
.price-sale-prefix {
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
  color: #da0410;
  margin-right: 4px;
}
.price-ref-label {
  font-size: 12px;
  line-height: 16px;
  color: #5c6169;
  margin-right: 4px;
}
.price-ref-value {
  font-size: 12px;
  line-height: 16px;
  color: #5c6169;
  text-decoration: line-through;
  margin-right: 4px;
}
.price-discount-label {
  font-size: 12px;
  line-height: 16px;
  color: #da0410;
  margin-right: 4px;
}
.price-discount-value {
  font-size: 12px;
  line-height: 16px;
  color: #da0410;
}

/* Sponsored dialog */
.sponsored-dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 24px;
  max-width: 200px;
  font-size: 14px;
  line-height: 20px;
}
.sponsored-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.dialog-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  color: #5c6169;
  font-style: italic;
}
.dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}

/* Carousel buttons — created by JS on hover only */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.carousel-btn-prev {
  left: 4px;
}
.carousel-btn-next {
  right: 4px;
}

/* Product page (shared with clean version) */
.product-page {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
}
.product-page__nav {
  margin-bottom: 1rem;
}
.product-page__back {
  font-size: 12px;
  color: #1a1a1a;
}
.product-page__title {
  font-size: 18px;
  margin-bottom: 8px;
}
.product-page__brand {
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
}
.product-page__name {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
}
.product-page__price {
  font-size: 16px;
  font-weight: 650;
  color: #da0410;
  margin-bottom: 16px;
}
.product-page__desc {
  font-size: 12px;
  line-height: 16px;
  color: #5c6169;
}

Reconstruit

Version reconstruite — 38 éléments, 0 div

Même rendu, mais HTML sémantique : navigable au clavier et correctement annoncé par les lecteurs d'écran.

card-reconstruite.html

<p class="card-badge">Promo</p>
  </header>

<button class="sponsored-button" type="button" aria-haspopup="dialog" aria-label="Sponsorisé, informations">
    <span class="sponsored-text">Sponsorisé</span>
    <svg class="sponsored-icon" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true">
      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.624-.008 11.992-5.376 12-12 0-6.627-5.373-12-12-12m0 22.5C6.201 22.5 1.5 17.799 1.5 12S6.201 1.5 12 1.5c5.796.007 10.493 4.704 10.5 10.5 0 5.799-4.701 10.5-10.5 10.5"></path>
      <circle cx="12" cy="5.6" r="1.1"></circle>
      <path d="M12 8.25a.75.75 0 0 0-.75.75v9.75a.75.75 0 1 0 1.5 0V9a.75.75 0 0 0-.75-.75"></path>
    </svg>
  </button>

<dialog class="sponsored-dialog">
    <p>Ce contenu est sponsorisé par un partenaire commercial.</p>
    <button type="button" class="dialog-close" aria-label="Fermer">✕</button>
  </dialog>

<h3 class="card-title">
    <a class="card-link" href="#product-page">
      <span class="title-brand">Marque</span>
      <span class="title-product">Modèle XYZ</span>
    </a>
  </h3>
  <p class="price-sale">à partir de 85,95&nbsp;€</p>
  <p class="price-ref">Prix de référence : <s>114,95&nbsp;€</s> Jusqu'à -25%</p>
</article>

<article class="product-page" id="product-page" hidden>
  <nav class="product-page__nav">
    <a href="#card-view" class="product-page__back">← Retour</a>
  </nav>
  <h2 class="product-page__title">Fiche produit</h2>
  <p class="product-page__brand">Marque</p>
  <p class="product-page__name">Modèle XYZ</p>
  <p class="product-page__price">85,95&nbsp;€</p>
  <p class="product-page__desc">Ceci est une page produit simplifiée pour la démonstration.</p>
</article>

prev.addEventListener('click', function() { goTo(current - 1); });
  next.addEventListener('click', function() { goTo(current + 1); });

/* --- Wishlist toggle --- */
  var wishBtn = document.querySelector('.wishlist-button');
  wishBtn.addEventListener('click', function() {
    var pressed = wishBtn.getAttribute('aria-pressed') === 'true';
    wishBtn.setAttribute('aria-pressed', String(!pressed));
    wishBtn.querySelector('svg').setAttribute('fill', pressed ? 'none' : 'currentColor');
    wishBtn.setAttribute('aria-label', pressed ? 'Ajouter aux préférés' : 'Retirer des préférés');
  });

/* --- Sponsored dialog --- */
  var sponsoredBtn = document.querySelector('.sponsored-button');
  var dialog = document.querySelector('.sponsored-dialog');
  var closeBtn = dialog.querySelector('.dialog-close');

/* --- Navigation card <-> product page --- */
  var cardView = document.getElementById('card-view');
  var productPage = document.getElementById('product-page');

/* === TOKENS === */
.card {
  --color-ink: #000;
  --color-surface: #fff;
  --color-surface-translucent: rgba(255, 255, 255, 0.85);
  --color-promo: #da0410;
  --color-muted: #5c6169;
  --color-border: #ccc;
  --color-backdrop: rgba(0, 0, 0, 0.4);

--font-family: Helvetica, Arial, sans-serif;
  --font-size-title: 1.125rem;
  --font-size-body: 0.875rem;
  --line-height-body: 1.25rem;
  --font-size-small: 0.75rem;
  --line-height-small: 1rem;
  --font-weight-bold: 650;
  --font-weight-normal: 400;

--space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1.5rem;

--card-width: 12.5rem;
  --card-image-ratio: 300 / 433;
  --size-carousel-btn: 2rem;
  --size-icon: 1.5rem;

--outline-focus: 0.125rem solid var(--color-ink);
}

/* === CARD === */
.card {
  display: flex;
  flex-direction: column;
  width: var(--card-width);
  position: relative;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

/* === CAROUSEL === */
.card-media {
  position: relative;
}

/* Slides container */
.carousel-slides {
  display: flex;
  overflow: scroll hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
}
.carousel-slides::-webkit-scrollbar {
  display: none;
}
.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Image */
.card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--card-image-ratio);
  object-fit: cover;
}

/* Carousel controls */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-carousel-btn);
  height: var(--size-carousel-btn);
  border: none;
  border-radius: 50%;
  background: var(--color-surface-translucent);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.card-media:hover .carousel-prev,
.card-media:hover .carousel-next,
.carousel-prev:focus-visible,
.carousel-next:focus-visible {
  opacity: 1;
}
.carousel-prev:focus-visible,
.carousel-next:focus-visible {
  outline: var(--outline-focus);
  outline-offset: var(--space-xs);
}
.carousel-prev {
  left: var(--space-xs);
}
.carousel-next {
  right: var(--space-xs);
}
.carousel-prev svg,
.carousel-next svg {
  width: var(--line-height-small);
  height: var(--line-height-small);
}

/* Pagination dots (CSS-only, via pseudo-element) */
.card-media::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--space-xs);
  z-index: 5;
  background: var(--color-surface);
  background-image: linear-gradient(var(--color-ink), var(--color-ink));
  background-size: calc(100% / var(--total, 5)) 100%;
  background-position: calc(var(--current, 0) * 100% / var(--total, 5)) 0;
  background-repeat: no-repeat;
}

/* Live region */
.sr-only {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Badge */
.card-badge {
  position: absolute;
  bottom: var(--space-s);
  left: 0;
  max-width: 80%;
  padding: var(--space-xs);
  background: var(--color-promo);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  color: var(--color-surface);
  pointer-events: none;
  z-index: 3;
}

/* Wishlist — above the stretched link */
.wishlist-button {
  position: absolute;
  top: var(--space-s);
  right: 0;
  z-index: 2;
  display: inline-block;
  background: transparent;
  border: none;
  padding: var(--space-s);
  cursor: pointer;
}
.wishlist-button:focus-visible {
  outline: var(--outline-focus);
}
.wishlist-button svg {
  fill: var(--color-surface);
  width: var(--size-icon);
  height: var(--size-icon);
  display: block;
}

/* === INFO === */

/* Sponsored — above the stretched link */
.sponsored-button {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: transparent;
  border: none;
  padding-top: var(--space-s);
  cursor: pointer;
  width: 100%;
}
.sponsored-text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-muted);
  margin-right: var(--space-s);
}
.sponsored-icon {
  width: var(--font-size-small);
  height: var(--font-size-small);
  fill: var(--color-muted);
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Card link — stretched to cover the entire card */
.card-link {
  text-decoration: none;
  color: inherit;
}
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Title */
.card-title {
  display: block;
  margin-bottom: var(--space-s);
  font-size: var(--line-height-small);
  font-weight: var(--font-weight-normal);
}
.title-brand,
.title-product {
  display: -webkit-box;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  hyphens: auto;
}
.title-brand {
  font-weight: var(--font-weight-bold);
}
.title-product {
  font-weight: var(--font-weight-normal);
}

/* Prices — z-index: 2 to pierce the stretched link overlay */
.price-sale {
  position: relative;
  z-index: 2;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  color: var(--color-promo);
}
.price-ref {
  position: relative;
  z-index: 2;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  width: fit-content;
  background: conic-gradient(from 0deg at 23ch var(--line-height-small), var(--color-promo) 270deg, var(--color-muted) 270deg);
  background-clip: text;
  color: transparent;
}
.price-ref s {
  text-decoration-color: var(--color-muted);
}

@media (forced-colors: active) {
  .price-ref {
    background: none;
    color: ActiveText;
  }
  .price-ref s {
    color: GrayText;
    text-decoration-color: GrayText;
  }
}

/* === WISHLIST TOGGLE === */
.wishlist-button[aria-pressed="true"] svg {
  fill: var(--color-promo);
  stroke: var(--color-promo);
}

/* === SPONSORED DIALOG === */
.sponsored-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--space-s);
  padding: var(--space-m);
  width: var(--card-width);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.sponsored-dialog::backdrop {
  background: var(--color-backdrop);
}
.dialog-close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  background: none;
  border: none;
  font-size: var(--line-height-small);
  cursor: pointer;
  padding: var(--space-xs);
}
.dialog-close:focus-visible {
  outline: var(--outline-focus);
  outline-offset: var(--space-xs);
}

/* === PRODUCT PAGE === */
.product-page {
  width: var(--card-width);
  font-family: var(--font-family);
}
.product-page__nav {
  margin-bottom: var(--line-height-small);
}
.product-page__back {
  font-size: var(--font-size-body);
  color: var(--color-ink);
}
.product-page__back:focus-visible {
  outline: var(--outline-focus);
  outline-offset: var(--space-xs);
}
.product-page__title {
  font-size: var(--font-size-title);
  margin-bottom: var(--space-s);
}
.product-page__brand {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}
.product-page__name {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-s);
}
.product-page__price {
  font-size: var(--line-height-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-promo);
  margin-bottom: var(--line-height-small);
}
.product-page__desc {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-muted);
}