/* ============================================================
   RS2EYEWEAR — Fiche produit premium
   ============================================================ */

body#product {
  background:
    radial-gradient(circle at 9% 13%, rgb(255 29 29 / 10%), transparent 27rem),
    radial-gradient(circle at 92% 38%, rgb(255 88 52 / 5%), transparent 32rem),
    var(--rs2-bg);
}

body#product #wrapper {
  background: transparent;
  overflow: hidden;
}

body#product #main-content {
  padding-bottom: 0;
}

body#product .breadcrumb {
  margin-bottom: 0;
}

.rs2-pdp {
  color: var(--rs2-text);
  isolation: isolate;
  margin-inline: auto;
  max-width: var(--rs2-max-width);
  padding: clamp(2rem, 5vw, 4.25rem) 0 clamp(3rem, 7vw, 6rem);
  position: relative;
}

.rs2-pdp::before {
  background: linear-gradient(90deg, transparent, rgb(255 29 29 / 30%), transparent);
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: min(42rem, 72%);
}

/* ---------- Hero ---------- */

body#product .rs2-pdp__hero.product__container {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 3.25vw, 3rem);
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  margin: 0;
  max-width: none;
  padding: 0;
}

body#product .rs2-pdp__media.product__left {
  align-self: start;
  min-width: 0;
  position: sticky;
  top: 7.4rem;
}

.rs2-pdp__media {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 5%), transparent 34%),
    rgb(18 20 26 / 82%);
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1.25rem, 2.4vw, 2rem);
  box-shadow: 0 36px 100px rgb(0 0 0 / 28%);
  overflow: hidden;
  padding: clamp(.85rem, 1.6vw, 1.25rem);
}

.rs2-pdp__media-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 2.2rem;
  padding: .1rem .25rem .85rem;
}

.rs2-pdp__edition,
.rs2-pdp__reference {
  color: var(--rs2-subtle);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.rs2-pdp__edition {
  align-items: center;
  display: inline-flex;
  gap: .5rem;
}

.rs2-pdp__edition > span {
  background: var(--rs2-red-fill);
  border-radius: 50%;
  box-shadow: 0 0 12px rgb(255 29 29 / 85%);
  height: .45rem;
  width: .45rem;
}

.rs2-pdp__visual {
  background: #0b0c10;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: clamp(1rem, 2vw, 1.55rem);
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.rs2-pdp__visual::after {
  background: linear-gradient(90deg, transparent, rgb(255 29 29 / 65%), transparent);
  bottom: 0;
  content: "";
  height: 2px;
  left: 14%;
  opacity: .75;
  position: absolute;
  width: 72%;
  z-index: 3;
}

body#product .rs2-pdp__visual .product__images,
body#product .rs2-pdp__visual .product__carousel,
body#product .rs2-pdp__visual .carousel-inner,
/* Bootstrap superpose ses diapositives en les faisant flotter a gauche avec
   margin-right: -100%. Le « margin: 0 » qui figurait ici annulait cette marge :
   au changement de photo, les deux vues se posaient l'une SOUS l'autre, le
   cadre doublait de hauteur le temps de la transition, la page sautait et
   l'image arrivante apparaissait sous une grande zone noire.

   Retablir la marge negative ne convient pas : le pourcentage se resout sur un
   conteneur dont la largeur depend elle-meme du contenu, et le cadre gonflait
   a 3127 px. On superpose donc les diapositives par positionnement absolu, ce
   qui donne le meme empilement sans boucle de calcul : la hauteur du cadre
   reste celle de la vue courante. */
body#product .rs2-pdp__visual .carousel-inner {
  position: relative;
}

body#product .rs2-pdp__visual .carousel-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}

body#product .rs2-pdp__visual .carousel-item:not(.active) {
  inset: 0;
  position: absolute;
  width: 100%;
}

/* Les photos du catalogue sont des carres dont le sujet occupe une bande de
   1672 x 941 : au carre, la fiche affichait un bandeau noir sur pres d'un
   tiers de la hauteur et le produit se retrouvait cale en bas. Le rapport
   16/9, en « cover », retire exactement ces marges. */
body#product .rs2-pdp__visual .product__carousel .carousel-item img,
body#product .rs2-pdp__visual .product__no-image img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  padding: 0;
  transform: scale(1.002);
  transition: transform .8s var(--rs2-ease), filter .8s var(--rs2-ease);
  width: 100%;
}

body#product .rs2-pdp__visual:hover .product__carousel .carousel-item.active img {
  filter: saturate(1.06) contrast(1.03);
  transform: scale(1.025);
}

body#product .rs2-pdp__visual .product-flags {
  display: none;
}

body#product .rs2-pdp__visual .product__zoom {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgb(11 12 16 / 72%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  bottom: auto;
  color: #fff;
  display: inline-flex;
  height: 3rem;
  justify-content: center;
  left: auto;
  min-width: 3rem;
  padding: 0;
  right: 1rem;
  top: 1rem;
  transition: background .25s var(--rs2-ease), border-color .25s var(--rs2-ease), transform .25s var(--rs2-ease);
  width: 3rem;
}

body#product .rs2-pdp__visual .product__zoom:hover {
  background: var(--rs2-red-strong);
  border-color: var(--rs2-red-strong);
  transform: scale(1.06);
}

body#product .rs2-pdp__visual .product__zoom .material-icons {
  font-size: 1.3rem;
}

body#product .rs2-pdp__visual .carousel-control-prev,
body#product .rs2-pdp__visual .carousel-control-next {
  background: rgb(11 12 16 / 68%);
  border-color: rgb(255 255 255 / 16%);
  height: 2.75rem;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
}

body#product .rs2-pdp__visual .carousel-control-prev { left: 1rem; }
body#product .rs2-pdp__visual .carousel-control-next { right: 1rem; }

body#product .rs2-pdp__visual .product__thumbnails {
  bottom: 1rem;
  left: 50%;
  margin: 0;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

body#product .rs2-pdp__visual .product__thumbnails-list {
  align-items: center;
  display: flex;
  gap: .55rem;
  justify-content: center;
  margin: 0;
  padding: .45rem;
}

body#product .rs2-pdp__visual .product__thumbnail {
  aspect-ratio: 16 / 9;
  background: rgb(11 12 16 / 78%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: .8rem;
  height: auto;
  overflow: hidden;
  padding: .22rem;
  transition: border-color .2s ease, transform .2s ease;
  width: 5.4rem;
}

body#product .rs2-pdp__visual .product__thumbnail.active {
  border-color: var(--rs2-red);
  box-shadow: 0 0 0 1px rgb(255 29 29 / 45%);
}

body#product .rs2-pdp__visual .product__thumbnail:hover {
  transform: translateY(-2px);
}

body#product .rs2-pdp__visual .product__thumbnail-image {
  border: 0;
  border-radius: .58rem;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Sur telephone, quatre vignettes de 5,4 rem plus leurs ecarts font 380 px
   pour un visuel de 319 : la rangee debordait sur les fleches du carrousel.
   On les resserre en dessous de 768 px. */
@media (max-width: 767.98px) {
  body#product .rs2-pdp__visual .product__thumbnails-list {
    gap: .35rem;
    padding: .35rem;
  }

  body#product .rs2-pdp__visual .product__thumbnail {
    width: 4.2rem;
  }
}

body#product .rs2-pdp__visual .product__thumbnails:has(.product__thumbnail:only-child) {
  display: none;
}

.rs2-pdp__visual-meta {
  display: grid;
  gap: .3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: .8rem;
}

.rs2-pdp__visual-meta > div {
  align-items: center;
  border-right: 1px solid var(--rs2-line);
  display: flex;
  gap: .65rem;
  min-width: 0;
  padding: .65rem .65rem;
}

.rs2-pdp__visual-meta > div:last-child {
  border-right: 0;
}

.rs2-pdp__visual-meta svg {
  color: var(--rs2-red-hover);
  flex: 0 0 auto;
  height: 1.35rem;
  width: 1.35rem;
}

.rs2-pdp__visual-meta span {
  color: var(--rs2-subtle);
  font-size: .68rem;
  line-height: 1.35;
}

.rs2-pdp__visual-meta b {
  color: var(--rs2-text);
  display: block;
  font-size: .72rem;
  font-weight: 700;
}

/* ---------- Buy panel ---------- */

body#product .rs2-pdp__buy.product__right {
  background:
    radial-gradient(circle at 100% 0, rgb(255 29 29 / 10%), transparent 18rem),
    linear-gradient(145deg, rgb(255 255 255 / 4%), transparent 46%),
    var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1.25rem, 2.4vw, 2rem);
  box-shadow: 0 36px 100px rgb(0 0 0 / 25%);
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.6rem);
}

body#product .rs2-pdp__buy.product__right::before {
  content: none;
}

.rs2-pdp__eyebrow {
  align-items: center;
  color: var(--rs2-red-hover);
  display: flex;
  font-size: .68rem;
  font-weight: 800;
  gap: .52rem;
  letter-spacing: .19em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.rs2-pdp__eyebrow-dot {
  background: var(--rs2-red);
  border-radius: 50%;
  box-shadow: 0 0 12px rgb(255 29 29 / 80%);
  height: .45rem;
  width: .45rem;
}

body#product .rs2-pdp__title.product__name {
  color: var(--rs2-text);
  font-size: clamp(2.4rem, 4.8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .92;
  margin: 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.rs2-pdp__line {
  color: var(--rs2-muted);
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  font-weight: 500;
  margin: .85rem 0 .45rem;
}

.rs2-pdp__brand {
  color: var(--rs2-subtle);
  display: inline-flex;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-decoration: none;
  text-transform: uppercase;
}

.rs2-pdp__brand:hover {
  color: var(--rs2-red-hover);
}

.rs2-pdp__price-row {
  align-items: end;
  border-block: 1px solid var(--rs2-line);
  display: flex;
  justify-content: space-between;
  margin: 1.6rem 0 1.35rem;
  padding: 1.25rem 0;
}

body#product .rs2-pdp__price-row .product__prices {
  border: 0;
  margin: 0;
  padding: 0;
}

body#product .rs2-pdp__price-row .product__price {
  color: var(--rs2-text);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}

body#product .rs2-pdp__price-row .product__tax-infos {
  color: var(--rs2-subtle);
  font-size: .75rem;
  font-weight: 600;
  margin-top: .45rem;
}

.rs2-pdp__price-note {
  color: var(--rs2-subtle);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: right;
}

.rs2-pdp__intro {
  color: var(--rs2-muted);
  font-size: clamp(.95rem, 1.35vw, 1.08rem);
  line-height: 1.75;
  margin-bottom: 1.45rem;
}

.rs2-pdp__intro p {
  margin: 0;
}

/* Variants */

body#product .rs2-pdp__buy .product__variants {
  border-top: 1px solid var(--rs2-line);
  margin: 0;
  padding-top: 1.25rem;
}

body#product .rs2-pdp__buy .product-variant {
  margin: 0 0 1.2rem;
}

body#product .rs2-pdp__buy .product-variant__label {
  align-items: baseline;
  display: flex;
  gap: .15rem;
  margin-bottom: .8rem;
}

body#product .rs2-pdp__buy .product-variant__legend {
  color: var(--rs2-text);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  margin: 0;
  text-transform: uppercase;
}

body#product .rs2-pdp__buy .product-variant__selected {
  color: var(--rs2-muted);
  font-size: .8rem;
}

body#product .rs2-pdp__buy .product-variant__colors {
  display: flex;
  gap: .7rem;
}

body#product .rs2-pdp__buy .input-color {
  margin: 0;
}

body#product .rs2-pdp__buy .input-color__label {
  border-radius: .9rem;
  cursor: pointer;
  display: block;
  margin: 0;
  padding: .2rem;
}

body#product .rs2-pdp__buy .input-color__label .color {
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: .72rem;
  display: block;
  height: 2.8rem;
  transition: box-shadow .2s ease, transform .2s ease;
  width: 2.8rem;
}

body#product .rs2-pdp__buy .input-color__label:hover .color {
  transform: translateY(-2px);
}

body#product .rs2-pdp__buy .input-color__label .color.active,
body#product .rs2-pdp__buy .input-color__input:checked + .input-color__label .color {
  box-shadow: 0 0 0 3px var(--rs2-card), 0 0 0 5px var(--rs2-red);
}

body#product .rs2-pdp__buy .form-select {
  background-color: var(--rs2-raised);
  border-color: var(--rs2-line-strong);
  border-radius: .9rem;
  color: var(--rs2-text);
  min-height: 3.15rem;
}

/* Tier pricing — replaces the native white Bootstrap discount table. */

body#product .rs2-pdp__buy .rs2-tier-pricing {
  background:
    linear-gradient(135deg, rgb(255 29 29 / 8%), transparent 52%),
    var(--rs2-raised);
  border: 1px solid var(--rs2-line-strong);
  border-radius: 1.15rem;
  margin: .15rem 0 1rem;
  overflow: hidden;
}

body#product .rs2-pdp__buy .rs2-tier-pricing[hidden] {
  display: none !important;
}

.rs2-tier-pricing__head {
  align-items: center;
  display: flex;
  gap: .75rem;
  padding: 1rem 1.05rem .9rem;
}

.rs2-tier-pricing__icon {
  align-items: center;
  background: rgb(255 29 29 / 12%);
  border: 1px solid rgb(255 29 29 / 28%);
  border-radius: .75rem;
  color: var(--rs2-red-hover);
  display: flex;
  flex: 0 0 2.35rem;
  height: 2.35rem;
  justify-content: center;
}

.rs2-tier-pricing__icon svg {
  height: 1.15rem;
  width: 1.15rem;
}

.rs2-tier-pricing__head > span:last-child {
  display: grid;
  gap: .18rem;
}

.rs2-tier-pricing__head small {
  color: var(--rs2-red-hover);
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rs2-tier-pricing__head strong {
  color: var(--rs2-text);
  font-size: .83rem;
  line-height: 1.35;
}

.rs2-tier-pricing__table-wrap {
  border-top: 1px solid var(--rs2-line);
  overflow-x: auto;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table {
  --bs-table-accent-bg: transparent;
  --bs-table-bg: transparent;
  --bs-table-color: var(--rs2-text);
  border-collapse: collapse;
  color: var(--rs2-text);
  margin: 0;
  min-width: 100%;
  table-layout: fixed;
  width: 100%;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table > :not(caption) > * > * {
  background-color: transparent !important;
  border: 0;
  box-shadow: none !important;
  color: inherit;
  padding: .78rem .82rem;
  vertical-align: middle;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table thead {
  background: rgb(255 255 255 / 3%);
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table th {
  color: var(--rs2-subtle);
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table th:first-child {
  width: 30%;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table th:nth-child(2) {
  width: 35%;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table th:last-child {
  width: 35%;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table th:nth-child(n + 2),
body#product .rs2-pdp__buy .rs2-tier-pricing__table td:nth-child(n + 2) {
  text-align: right;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table tbody tr {
  border-top: 1px solid var(--rs2-line);
  transition: background-color .2s ease;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table tbody tr:hover {
  background: rgb(255 29 29 / 5%);
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table td {
  color: var(--rs2-muted);
  font-size: .8rem;
  font-weight: 700;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table td:first-child {
  align-items: baseline;
  display: flex;
  gap: .28rem;
  text-align: left;
}

.rs2-tier-pricing__quantity {
  color: var(--rs2-text);
  font-size: 1rem;
  font-weight: 850;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table td:first-child small {
  color: var(--rs2-subtle);
  font-size: .61rem;
  font-weight: 700;
  white-space: nowrap;
}

body#product .rs2-pdp__buy .rs2-tier-pricing__table td:last-child strong {
  color: #52df99;
  font-size: .84rem;
  font-weight: 850;
}

/* Quantity and CTA */

body#product .rs2-pdp__buy .product__add-to-cart-container {
  margin-top: .35rem;
}

body#product .rs2-pdp__buy .product__availability {
  margin-bottom: .8rem;
}

/* Le message de disponibilite herite du vert de Bootstrap, #188251, prevu pour
   un fond clair : sur le fond sombre du theme il tombe a 4,00:1. Il prend
   maintenant --rs2-success-text, le jeton commun au tunnel et au localisateur,
   qui bascule avec le theme — #4ec27a en dur ne faisait que 2,25:1 en clair. */
body#product .rs2-pdp__buy .product__availability,
body#product .rs2-pdp__buy .product__availability * {
  color: var(--rs2-success-text);
}

body#product .rs2-pdp__buy .product__actions-qty-add {
  align-items: stretch;
  background: rgb(7 8 11 / 38%);
  border: 1px solid var(--rs2-line);
  border-radius: 1.35rem;
  display: grid;
  gap: .75rem;
  /* 9.2rem : les deux boutons font 42 px chacun, il faut le reste pour que le
     champ affiche sa valeur. A 7.8rem le champ tombait a 32 px de large, soit
     moins que ses propres 2 x 16 px de padding Bootstrap : le chiffre existait
     mais etait entierement rogne. */
  grid-template-columns: 9.2rem minmax(0, 1fr);
  margin: 0;
  padding: .72rem;
}

body#product .rs2-pdp__buy .product__quantity {
  min-width: 0;
}

body#product .rs2-pdp__buy .quantity-button__group {
  background: var(--rs2-raised);
  border: 1px solid var(--rs2-line-strong);
  border-radius: 999px;
  height: 3.55rem;
  overflow: hidden;
}

body#product .rs2-pdp__buy .quantity-button__group button {
  background: transparent;
  border: 0;
  color: var(--rs2-text);
}

body#product .rs2-pdp__buy .quantity-button__group input {
  background: transparent;
  border: 0;
  color: var(--rs2-text);
  font-size: 1.02rem;
  font-weight: 800;
  /* Bootstrap pose `width: 1%` sur les .form-control d'un .input-group : c'est
     prevu pour une repartition en flex, mais le groupe est ici une grille, ou
     cette largeur s'applique litteralement. Le champ se reduisait alors a ses
     seuls paddings (32 px de padding, 0 px de contenu), d'ou une quantite
     invisible. On lui rend la largeur de sa colonne. */
  padding-inline: 0;
  width: 100%;
}

body#product .rs2-pdp__buy .product__add-to-cart-button {
  align-items: center;
  /* Le degrade allait de #ff1717 (3,90:1 avec du blanc) a #ff3434 (3,47:1) :
     l'appel a l'action principal de la fiche produit etait sous le seuil AA
     sur toute sa largeur. Les deux teintes passent maintenant, 5,19:1 et
     4,77:1, en restant le rouge RS. */
  background: linear-gradient(105deg, #d81616, #e02020);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 16px 38px -13px rgb(255 29 29 / 88%);
  color: #fff;
  display: flex;
  font-size: .95rem;
  font-weight: 800;
  gap: .55rem;
  height: 3.55rem;
  justify-content: center;
  letter-spacing: .01em;
  width: 100%;
}

body#product .rs2-pdp__buy .product__add-to-cart-button:hover:not(:disabled) {
  /* Au survol on FONCE : l'ancien degrade eclaircissait, le bouton devenait
     moins lisible au survol qu'au repos. */
  background: linear-gradient(105deg, #c11313, #d81616);
  box-shadow: 0 20px 44px -13px rgb(255 29 29 / 95%);
  transform: translateY(-2px);
}

body#product .rs2-pdp__buy .product__add-to-cart-button:disabled {
  background: var(--rs2-raised);
  box-shadow: none;
  color: var(--rs2-subtle);
}

body#product .rs2-pdp__buy .rs2-product-assurances {
  display: none;
}

body#product .rs2-pdp__buy .product__minimal-quantity {
  color: var(--rs2-muted);
  font-size: .78rem;
  margin: .65rem 0 0;
}

body#product .rs2-pdp__buy .product__additional-info {
  margin: .85rem 0 0;
}

body#product .rs2-pdp__buy .social-sharing {
  align-items: center;
  display: flex;
  gap: .6rem;
  margin: 0;
}

body#product .rs2-pdp__buy .social-sharing > span,
body#product .rs2-pdp__buy .social-sharing > span:first-child {
  color: var(--rs2-subtle);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body#product .rs2-pdp__buy .social-sharing ul {
  display: flex;
  gap: .3rem;
  margin: 0;
}

body#product .rs2-pdp__buy .social-sharing a {
  opacity: .72;
  transform: scale(.88);
}

.rs2-pdp__availability {
  align-items: center;
  border-bottom: 1px solid var(--rs2-line);
  color: var(--rs2-muted);
  display: flex;
  font-size: .78rem;
  gap: .55rem;
  margin-top: 1rem;
  padding: 0 .15rem 1rem;
}

.rs2-pdp__availability b {
  color: var(--rs2-text);
}

.rs2-pdp__availability-dot {
  background: #28d47b;
  border-radius: 50%;
  box-shadow: 0 0 12px rgb(40 212 123 / 90%);
  height: .5rem;
  width: .5rem;
}

.rs2-pdp__trust {
  display: grid;
  gap: .45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
}

.rs2-pdp__trust li {
  align-items: center;
  display: flex;
  gap: .55rem;
  min-width: 0;
}

.rs2-pdp__trust svg {
  color: var(--rs2-red-hover);
  flex: 0 0 auto;
  height: 1.2rem;
  width: 1.2rem;
}

.rs2-pdp__trust span {
  color: var(--rs2-subtle);
  font-size: .61rem;
  line-height: 1.35;
}

.rs2-pdp__trust b {
  color: var(--rs2-text);
  display: block;
  font-size: .65rem;
}

/* ---------- Value proposition ---------- */

.rs2-pdp__promise {
  align-items: end;
  background:
    linear-gradient(105deg, rgb(255 29 29 / 14%), transparent 40%),
    var(--rs2-surface);
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1.2rem, 2.5vw, 2rem);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  margin-top: clamp(2.4rem, 6vw, 5.8rem);
  overflow: hidden;
  padding: clamp(1.7rem, 4vw, 3.6rem);
  position: relative;
}

.rs2-pdp__promise::after {
  color: rgb(255 255 255 / 2.2%);
  content: "RS2";
  font-size: clamp(7rem, 17vw, 14rem);
  font-weight: 800;
  line-height: .7;
  pointer-events: none;
  position: absolute;
  right: -1rem;
  top: -.2rem;
}

.rs2-pdp__section-kicker {
  color: var(--rs2-red-hover);
  display: block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: .7rem;
  text-transform: uppercase;
}

.rs2-pdp__promise h2,
.rs2-pdp__story h2,
.rs2-pdp__details h2 {
  color: var(--rs2-text);
  font-size: clamp(2rem, 4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 0;
}

.rs2-pdp__promise p {
  color: var(--rs2-muted);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.75;
  margin: 0;
  max-width: 42rem;
  position: relative;
  z-index: 1;
}

/* ---------- Story ---------- */

.rs2-pdp__story {
  align-items: stretch;
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
}

.rs2-pdp__story-copy,
.rs2-pdp__story-visual {
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1.2rem, 2.5vw, 2rem);
  overflow: hidden;
}

.rs2-pdp__story-copy {
  background: var(--rs2-card);
  padding: clamp(1.8rem, 4vw, 4rem);
}

.rs2-pdp__description {
  color: var(--rs2-muted);
  font-size: 1rem;
  line-height: 1.8;
  margin-top: 1.6rem;
  max-width: 48rem;
}

.rs2-pdp__description h2,
.rs2-pdp__description h3 {
  color: var(--rs2-text);
  font-size: 1.2rem;
  letter-spacing: -.02em;
  margin: 1.4rem 0 .55rem;
}

.rs2-pdp__description p:last-child {
  margin-bottom: 0;
}

.rs2-pdp__story-points {
  border-top: 1px solid var(--rs2-line);
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.8rem;
  padding-top: 1.3rem;
}

.rs2-pdp__story-points span {
  align-items: center;
  color: var(--rs2-text);
  display: inline-flex;
  font-size: .76rem;
  font-weight: 700;
  gap: .4rem;
}

.rs2-pdp__story-points span::before {
  background: var(--rs2-red);
  border-radius: 50%;
  content: "";
  height: .35rem;
  width: .35rem;
}

.rs2-pdp__story-visual {
  background: #0a0b0f;
  min-height: 28rem;
  position: relative;
}

.rs2-pdp__story-visual::after {
  background: linear-gradient(180deg, transparent 38%, rgb(4 5 7 / 82%));
  content: "";
  inset: 0;
  position: absolute;
}

.rs2-pdp__story-visual img {
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  width: 100%;
}

.rs2-pdp__story-visual > span {
  bottom: 2rem;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  left: 2rem;
  letter-spacing: .24em;
  line-height: 1.75;
  position: absolute;
  z-index: 2;
}

/* ---------- Specifications ---------- */

.rs2-pdp__details {
  background:
    radial-gradient(circle at 90% 0, rgb(255 29 29 / 8%), transparent 26rem),
    var(--rs2-surface);
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
  padding: clamp(1.8rem, 4vw, 4rem);
}

.rs2-pdp__details-head {
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .6fr);
}

.rs2-pdp__details-head .rs2-pdp__section-kicker {
  grid-column: 1 / -1;
  margin-bottom: -.25rem;
}

.rs2-pdp__details-head p {
  color: var(--rs2-muted);
  line-height: 1.7;
  margin: 0;
}

.rs2-pdp__spec-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
}

.rs2-pdp__spec {
  border-left: 1px solid var(--rs2-line);
  border-top: 1px solid var(--rs2-line);
  min-height: 8.5rem;
  padding: 1.5rem;
}

.rs2-pdp__spec:nth-child(3n + 1) {
  border-left: 0;
}

.rs2-pdp__spec dt {
  color: var(--rs2-subtle);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  margin-bottom: .8rem;
  text-transform: uppercase;
}

.rs2-pdp__spec dd {
  color: var(--rs2-text);
  font-size: clamp(.95rem, 1.35vw, 1.08rem);
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
}

.rs2-pdp__optician {
  align-items: center;
  background:
    linear-gradient(110deg, rgb(255 29 29 / 12%), transparent 58%),
    var(--rs2-card);
  border: 1px solid rgb(255 29 29 / 25%);
  border-radius: 1.35rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.rs2-pdp__optician-icon {
  align-items: center;
  background: rgb(255 29 29 / 13%);
  border: 1px solid rgb(255 29 29 / 28%);
  border-radius: 1rem;
  color: var(--rs2-red-hover);
  display: flex;
  height: 4rem;
  justify-content: center;
  width: 4rem;
}

.rs2-pdp__optician-icon svg {
  height: 2rem;
  width: 2rem;
}

.rs2-pdp__optician .rs2-pdp__section-kicker {
  margin-bottom: .3rem;
}

.rs2-pdp__optician h3 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  margin: 0 0 .35rem;
}

.rs2-pdp__optician p {
  color: var(--rs2-muted);
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
}

.rs2-pdp__text-link {
  align-items: center;
  border: 1px solid var(--rs2-line-strong);
  border-radius: 999px;
  color: var(--rs2-text);
  display: inline-flex;
  font-size: .8rem;
  font-weight: 800;
  gap: .75rem;
  padding: .85rem 1.15rem;
  text-decoration: none;
  white-space: nowrap;
}

.rs2-pdp__text-link:hover {
  background: var(--rs2-red-strong);
  border-color: var(--rs2-red-strong);
  color: #fff;
}

.rs2-pdp__downloads {
  display: grid;
  gap: .75rem;
  margin-top: 1.5rem;
}

.rs2-pdp__downloads a {
  align-items: center;
  border: 1px solid var(--rs2-line);
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  text-decoration: none;
}

.rs2-pdp__downloads small {
  color: var(--rs2-subtle);
}

.rs2-pdp__extra {
  border-top: 1px solid var(--rs2-line);
  color: var(--rs2-muted);
  margin-top: 1.5rem;
  padding-top: 1.1rem;
}

.rs2-pdp__extra summary {
  color: var(--rs2-text);
  cursor: pointer;
  font-weight: 700;
  padding: .35rem 0;
}

.rs2-pdp__extra > div {
  padding: 1rem 0;
}

/* ---------- Footer modules / related products ---------- */

.rs2-pdp__accessories,
.rs2-pdp__footer-modules {
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

body#product .rs2-pdp__footer-modules .ps-viewedproduct {
  display: none;
}

body#product .rs2-pdp__footer-modules .product-comments,
body#product .rs2-pdp__footer-modules .product-comments-wrapper {
  background:
    radial-gradient(circle at 50% 0, rgb(255 29 29 / 8%), transparent 20rem),
    var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1.2rem, 2.5vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3rem);
}

body#product .rs2-pdp__footer-modules .product-comments-wrapper .section-title {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  margin-bottom: 1.35rem;
}

body#product .rs2-pdp__footer-modules .product-comments-wrapper .product-comment-list-item {
  background: var(--rs2-surface);
  border: 1px solid var(--rs2-line);
  border-radius: 1rem;
  color: var(--rs2-muted);
  margin: 0 auto;
  max-width: 46rem;
  padding: 1.35rem !important;
  text-align: center;
}

body#product .rs2-pdp__footer-modules .ps-categoryproducts,
body#product .rs2-pdp__accessories .product__accessories {
  border-top: 0;
  margin: 0;
  padding: 0;
}

body#product .rs2-pdp__footer-modules .section-title,
body#product .rs2-pdp__accessories .section-title {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.045em;
  margin: 0 auto 2rem;
  max-width: 50rem;
  text-align: center;
}

body#product .rs2-pdp__footer-modules .section-title::after,
body#product .rs2-pdp__accessories .section-title::after {
  background: var(--rs2-red);
  border-radius: 99px;
  content: "";
  display: block;
  height: 3px;
  margin: 1rem auto 0;
  width: 3rem;
}

body#product .rs2-pdp__footer-modules .products,
body#product .rs2-pdp__accessories .products {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  max-width: 50rem;
}

body#product .rs2-pdp__footer-modules .product-miniature,
body#product .rs2-pdp__accessories .product-miniature {
  max-width: none;
  width: auto;
}

/* ---------- Light theme ---------- */

html[data-rs2-theme="light"] body#product {
  background:
    radial-gradient(circle at 9% 13%, rgb(255 29 29 / 7%), transparent 27rem),
    var(--rs2-bg);
}

html[data-rs2-theme="light"] .rs2-pdp__media,
html[data-rs2-theme="light"] body#product .rs2-pdp__buy.product__right {
  box-shadow: 0 30px 80px rgb(16 18 27 / 10%);
}

html[data-rs2-theme="light"] .rs2-pdp__visual,
html[data-rs2-theme="light"] .rs2-pdp__story-visual {
  background: #111319;
}

html[data-rs2-theme="light"] body#product .rs2-pdp__buy .product__actions-qty-add {
  background: rgb(16 18 27 / 3%);
}

html[data-rs2-theme="light"] body#product .rs2-pdp__buy .rs2-tier-pricing__table thead {
  background: rgb(16 18 27 / 3%);
}

html[data-rs2-theme="light"] body#product .rs2-pdp__buy .rs2-tier-pricing__table td:last-child strong {
  color: #08774a;
}

/* ---------- Responsive ---------- */

@media (max-width: 1099.98px) {
  body#product .rs2-pdp__hero.product__container {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
  }

  .rs2-pdp__visual-meta span {
    font-size: .62rem;
  }

  .rs2-pdp__visual-meta svg {
    display: none;
  }

  body#product .rs2-pdp__buy.product__right {
    padding: 1.6rem;
  }

  .rs2-pdp__trust {
    gap: .65rem;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 899.98px) {
  .rs2-pdp {
    padding-top: 1.25rem;
  }

  body#product .rs2-pdp__hero.product__container {
    grid-template-columns: minmax(0, 1fr);
  }

  body#product .rs2-pdp__media.product__left {
    position: static;
  }

  .rs2-pdp__visual-meta svg {
    display: block;
  }

  .rs2-pdp__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rs2-pdp__story {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs2-pdp__story-visual {
    min-height: 24rem;
  }

  .rs2-pdp__details-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 679.98px) {
  .rs2-pdp {
    padding-bottom: 3rem;
  }

  .rs2-pdp__media,
  body#product .rs2-pdp__buy.product__right,
  .rs2-pdp__promise,
  .rs2-pdp__story-copy,
  .rs2-pdp__story-visual,
  .rs2-pdp__details {
    border-radius: 1.2rem;
  }

  .rs2-pdp__media {
    padding: .65rem;
  }

  .rs2-pdp__media-head {
    padding: .2rem .25rem .65rem;
  }

  .rs2-pdp__reference {
    display: none;
  }

  .rs2-pdp__visual-meta {
    grid-template-columns: 1fr;
  }

  .rs2-pdp__visual-meta > div {
    border-bottom: 1px solid var(--rs2-line);
    border-right: 0;
    padding: .65rem .45rem;
  }

  .rs2-pdp__visual-meta > div:last-child {
    border-bottom: 0;
  }

  .rs2-pdp__visual-meta span {
    font-size: .67rem;
  }

  body#product .rs2-pdp__buy.product__right {
    padding: 1.3rem;
  }

  body#product .rs2-pdp__title.product__name {
    font-size: clamp(2.35rem, 13vw, 3.5rem);
  }

  .rs2-pdp__price-note {
    display: none;
  }

  body#product .rs2-pdp__buy .product__actions-qty-add {
    grid-template-columns: 6.7rem minmax(0, 1fr);
  }

  .rs2-pdp__trust {
    grid-template-columns: 1fr;
  }

  .rs2-pdp__promise {
    align-items: start;
    grid-template-columns: 1fr;
    padding: 1.55rem;
  }

  .rs2-pdp__promise::after {
    font-size: 8rem;
  }

  .rs2-pdp__story-copy,
  .rs2-pdp__details {
    padding: 1.55rem;
  }

  .rs2-pdp__story-visual {
    min-height: 20rem;
  }

  .rs2-pdp__spec-grid {
    grid-template-columns: 1fr;
  }

  .rs2-pdp__spec,
  .rs2-pdp__spec:nth-child(3n + 1) {
    border-left: 0;
    min-height: 0;
    padding: 1.2rem 0;
  }

  .rs2-pdp__optician {
    align-items: start;
    grid-template-columns: auto 1fr;
  }

  .rs2-pdp__optician .rs2-pdp__text-link {
    grid-column: 1 / -1;
    justify-content: center;
  }

  body#product .rs2-pdp__footer-modules .products,
  body#product .rs2-pdp__accessories .products {
    grid-template-columns: 1fr;
    max-width: 25rem;
  }
}

@media (max-width: 419.98px) {
  .rs2-tier-pricing__head {
    padding: .9rem;
  }

  body#product .rs2-pdp__buy .rs2-tier-pricing__table > :not(caption) > * > * {
    padding: .7rem .58rem;
  }

  body#product .rs2-pdp__buy .rs2-tier-pricing__table th,
  body#product .rs2-pdp__buy .rs2-tier-pricing__table td:first-child small {
    font-size: .55rem;
  }

  body#product .rs2-pdp__buy .rs2-tier-pricing__table td {
    font-size: .72rem;
  }

  body#product .rs2-pdp__buy .product__actions-qty-add {
    grid-template-columns: 1fr;
  }

  body#product .rs2-pdp__buy .product__quantity {
    max-width: 9.2rem;
  }

  .rs2-pdp__optician {
    grid-template-columns: 1fr;
  }

  .rs2-pdp__optician-icon {
    height: 3.4rem;
    width: 3.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#product *,
  body#product *::before,
  body#product *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* 2026-09 editorial refinement: reduce the stacked-card effect. */

body#product #main {
  padding-top: 1rem;
}

body#product #notifications .alert {
  border-radius: .7rem;
  font-size: .78rem;
  margin: .8rem auto;
  max-width: var(--rs2-max-width);
  padding: .65rem 1rem;
}

.rs2-pdp {
  padding: 1.25rem 0 4.5rem;
}

.rs2-pdp__media,
body#product .rs2-pdp__buy.product__right {
  border-radius: 1.15rem;
  box-shadow: 0 24px 70px rgb(0 0 0 / 22%);
}

.rs2-pdp__visual {
  border-radius: .9rem;
}

.rs2-pdp__promise {
  background: transparent;
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(2.2rem, 5vw, 3.5rem) 0;
}

.rs2-pdp__promise::after {
  opacity: .45;
  right: 0;
}

.rs2-pdp__promise h2,
.rs2-pdp__story h2,
.rs2-pdp__details h2 {
  font-size: clamp(1.9rem, 3.4vw, 3.15rem);
}

.rs2-pdp__story {
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.rs2-pdp__story-copy {
  align-self: center;
  background: transparent;
  border: 0;
  padding: clamp(.25rem, 2vw, 1.5rem) 0;
}

.rs2-pdp__story-visual {
  border-radius: 1rem;
  min-height: 24rem;
}

.rs2-pdp__description {
  line-height: 1.7;
  margin-top: 1.25rem;
}

.rs2-pdp__details {
  background: transparent;
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 3.8rem) 0 0;
}

.rs2-pdp__spec {
  min-height: 7rem;
  padding: 1.25rem;
}

.rs2-pdp__accessories,
.rs2-pdp__footer-modules {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

body#product .rs2-pdp__footer-modules .product-comments,
body#product .rs2-pdp__footer-modules .product-comments-wrapper {
  background: transparent;
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  margin-bottom: 3.5rem;
  padding: 2.5rem 0;
}

body#product .rs2-pdp__footer-modules .product-comments-wrapper .section-title {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  margin-bottom: 1rem;
  text-align: left;
}

body#product .rs2-pdp__footer-modules .product-comments-wrapper .product-comment-list-item {
  border-radius: .75rem;
  margin: 0;
  max-width: none;
  padding: 1rem !important;
}

body#product .rs2-pdp__footer-modules .section-title,
body#product .rs2-pdp__accessories .section-title {
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  margin-bottom: 1.5rem;
  text-align: left;
}

body#product .rs2-pdp__footer-modules .section-title::after,
body#product .rs2-pdp__accessories .section-title::after {
  margin: .75rem 0 0;
}

body#product .rs2-pdp__footer-modules .products,
body#product .rs2-pdp__accessories .products {
  gap: 1rem;
  margin: 0;
  max-width: 62rem;
}

body#product .rs2-pdp__footer-modules .rs2-product-card,
body#product .rs2-pdp__accessories .rs2-product-card {
  border-radius: .9rem;
}

body#product .rs2-pdp__footer-modules .rs2-product-card .product-miniature__bottom,
body#product .rs2-pdp__accessories .rs2-product-card .product-miniature__bottom {
  padding: 1rem;
}

/* L'accroche du produit restait masquee : la carte gardait pourtant la place
   d'une description, si bien qu'un grand vide separait le prix du bouton. On
   la reaffiche plutot que de resserrer la carte — l'espace sert alors a
   quelque chose. Les pastilles de coloris, elles, restent masquees : elles
   font doublon avec celles de la fiche ouverte. */
body#product .rs2-pdp__footer-modules .product-miniature__variants,
body#product .rs2-pdp__accessories .product-miniature__variants {
  display: none;
}

body#product .rs2-product-card__promise {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body#product .rs2-pdp__footer-modules .rs2-product-card .product-miniature__title,
body#product .rs2-pdp__accessories .rs2-product-card .product-miniature__title {
  font-size: 1.15rem;
}

body#product .rs2-pdp__footer-modules .rs2-product-card .product-miniature__actions,
body#product .rs2-pdp__accessories .rs2-product-card .product-miniature__actions {
  margin-top: .65rem;
  padding-top: .65rem;
}

@media (max-width: 679.98px) {
  .rs2-pdp {
    padding-bottom: 3rem;
  }

  .rs2-pdp__promise {
    border-radius: 0;
    padding: 2rem 0;
  }

  .rs2-pdp__story-copy,
  .rs2-pdp__details {
    padding-left: 0;
    padding-right: 0;
  }

  .rs2-pdp__story {
    margin-top: 2.5rem;
  }

  .rs2-pdp__story-visual {
    min-height: 18rem;
  }
}

/* ---------- Visionneuse d'image (modal de zoom) ---------- */

body#product .product-images-modal .modal-dialog {
  max-width: min(1080px, 94vw);
}

body#product .product-images-modal .modal-content {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1rem, 2vw, 1.35rem);
  box-shadow: 0 32px 90px rgb(0 0 0 / 55%);
}

body#product .product-images-modal .modal-header {
  border: 0;
  min-height: 0;
  padding: .75rem .75rem 0;
}

body#product .product-images-modal .btn-close {
  background: rgb(255 255 255 / 8%);
  border-radius: 999px;
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .85;
  padding: .65rem;
  transition: opacity .2s ease, background .2s ease;
}

body#product .product-images-modal .btn-close:hover {
  background: rgb(255 29 29 / 22%);
  opacity: 1;
}

body#product .product-images-modal .modal-body {
  overflow: hidden;
  padding: .35rem 1rem 1.25rem;
}

/* L'image ne doit jamais depasser la fenetre : sans plafond de hauteur elle
   s'affiche a sa taille naturelle (1440 px) et le modal devient plus haut que
   l'ecran, ce qui donne une image « figee » qu'il faut faire defiler. */
body#product .product-images-modal .carousel-item img {
  display: block;
  height: auto;
  margin-inline: auto;
  max-height: calc(100vh - 12rem);
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

/* Zoom au clic, pilote par rs2.js */
body#product .product-images-modal .carousel-item img {
  cursor: zoom-in;
  transition: transform .3s var(--rs2-ease);
  will-change: transform;
}

body#product .product-images-modal .carousel-item img.rs2-zoomed {
  cursor: zoom-out;
  transform: scale(2.4);
}

body#product .product-images-modal .rs2-zoom-hint {
  color: var(--rs2-subtle);
  font-size: .72rem;
  letter-spacing: .08em;
  padding-bottom: .35rem;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  body#product .product-images-modal .carousel-item img {
    max-height: calc(100vh - 10rem);
  }
}


/* Cartes produit des blocs de bas de fiche
   ==========================================================================
   « Autres modeles de la gamme », accessoires, produits associes : ces tuiles
   affichaient la photo en « contain » dans un cadre plus large que haut. Le
   cliche, carre, apparaissait donc au centre en tout petit, borde de noir a
   gauche et a droite par le cadre, et en haut et en bas par ses propres
   marges. Elles reprennent le cadrage de la page collection : 16/9, la photo
   remplit la tuile, et l'etiquette comme la pastille « Neuf » se posent
   dessus au lieu de flotter dans le vide. */

body#product .rs2-product-card .product-miniature__top,
body#product .rs2-product-card .product-miniature__image-container {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* La carte est une colonne flexible dont la hauteur est imposee par la rangee
   de grille. Sans cette regle, le panneau visuel se laissait comprimer pour
   faire de la place au texte : il tombait a 175 px alors que le cadre de
   l'image en gardait 274, et « overflow: hidden » coupait le bas du produit —
   d'autant plus visible au survol, ou l'image s'agrandit de 5,5 %. */
body#product .rs2-product-card .product-miniature__top {
  flex: 0 0 auto;
}

body#product .rs2-product-card .product-miniature__image-link,
body#product .rs2-product-card .product-miniature__image-container picture {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

body#product .rs2-product-card .product-miniature__image {
  height: 100%;
  object-fit: cover;
  padding: 0;
  width: 100%;
}