← Anatomy of a product card — from 87 to 38 elements, 0 divs

Interactive demo

Sandbox — Anatomy of a product card

Edit the HTML and CSS of each version, then click "Apply" to see the result. Product photos have been replaced with placeholders to protect the brand's image, which makes the pagination dots visible in the original version.

Original vs reworked
	Original	Reworked	Reduction
HTML elements	87	38	−56 %
<div> tags	27	0	−100 %
Accessibility issues	8	0	−100 %

Original

Original version — 87 elements, 27 divs

This card contains intentional accessibility issues — this is the code as retrieved.

original-card.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;
}

Reworked

Reworked version — 38 elements, 0 divs

Same render, but semantic HTML: keyboard-navigable and correctly announced by screen readers.

reworked-card.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);
}