/* RS2EYEWEAR — premium commerce surfaces (catalog, product, cart, checkout). */

.rs2-commerce {
  --rs2-commerce-glow: rgb(255 29 29 / 18%);
  color: var(--rs2-text);
  padding-block: clamp(2rem, 5vw, 5rem);
}

.rs2-commerce__eyebrow {
  color: var(--rs2-red-hover);
  display: block;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .22em;
  margin-bottom: .8rem;
  text-transform: uppercase;
}

.rs2-listing-heading,
.rs2-commerce-header {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.rs2-listing-heading .page-title-section,
.rs2-category-hero .page-title-section,
.rs2-commerce-header .page-title-section {
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  font-weight: 850;
  letter-spacing: -.065em;
  line-height: .94;
  margin: 0;
  max-width: 900px;
}

.rs2-listing-heading__intro,
.rs2-commerce-header > div > p {
  color: var(--rs2-muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.7;
  margin: 1.25rem 0 0;
  max-width: 670px;
}

/* Category and generic listings */

/* En-tete de collection
   ==========================================================================
   Bande pleine largeur : le texte reste aligne sur la grille du site, la photo
   deborde a droite jusqu'au bord de l'ecran. Le debordement se fait par des
   marges negatives calculees sur la fenetre ; html porte overflow-x: clip pour
   qu'elles ne creent pas de defilement lateral. */

.rs2-category-hero {
  align-items: center;
  background: var(--rs2-bg);
  display: block;
  margin-block: 0 clamp(1rem, 2vw, 1.75rem);
  margin-inline: calc(50% - 50vw);
  min-height: clamp(20rem, 27vw, 33rem);
  overflow: hidden;
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  padding-inline: max(calc(50vw - 50%), 1.1rem);
  position: relative;
  width: 100vw;
}

/* Halo rouge cote produit : il prolonge celui de la photo pour que la limite
   du cliche ne se devine pas. */
.rs2-category-hero::before {
  background: radial-gradient(circle at 74% 46%, rgb(255 29 29 / 16%), transparent 52%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.rs2-category-hero__inner {
  margin-inline: auto;
  max-width: var(--rs2-max-width, min(1560px, 94vw));
  position: relative;
  z-index: 3;
}

.rs2-category-hero__copy {
  max-width: min(38rem, 100%);
}

.rs2-category-hero .page-title-section {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .95;
  margin: 0;
  max-width: 13ch;
}

.rs2-category-hero .category__description {
  color: var(--rs2-muted);
  font-size: clamp(.98rem, 1.35vw, 1.08rem);
  line-height: 1.68;
  margin: 1.25rem 0 0;
  max-width: 34rem;
}

.rs2-category-hero .category__description p:last-child {
  margin-bottom: 0;
}

/* --- Les trois arguments -------------------------------------------------- */

/* Grille de trois colonnes egales plutot qu'une rangee flex : la somme des
   largeurs intrinseques depassait la colonne de texte, et le troisieme
   argument passait a la ligne en emportant son filet de separation. */
.rs2-category-hero__signals {
  display: grid;
  gap: 1rem 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  padding: 0;
}

.rs2-category-hero__signals li {
  align-items: center;
  color: var(--rs2-muted);
  display: flex;
  font-size: .82rem;
  font-weight: 700;
  gap: .7rem;
  line-height: 1.35;
  padding-inline: clamp(.85rem, 1.6vw, 1.35rem);
}

.rs2-category-hero__signals li:first-child {
  padding-inline-start: 0;
}

.rs2-category-hero__signals li + li {
  border-inline-start: 1px solid var(--rs2-line-strong);
}

/* Le bundle CCC garde sept jours l'ancienne version de cette feuille, dont la
   pastille rouge posee en ::before sur chaque argument. Supprimer la regle du
   fichier ne suffit donc pas : sans cette annulation, le point s'affiche en
   plus du pictogramme chez les visiteurs deja venus. */
.rs2-category-hero__signals li::before,
.rs2-commerce-benefits > div::before {
  content: none;
}

.rs2-category-hero__signal-icon {
  color: var(--rs2-red);
  flex: 0 0 auto;
}

.rs2-category-hero__signal-icon svg {
  display: block;
  height: 1.65rem;
  width: 1.65rem;
}

.rs2-category-hero__signal-text {
  min-width: 0;
}

/* --- La photo ------------------------------------------------------------- */

.rs2-category-hero__photo {
  inset-block: 0;
  inset-inline-end: 0;
  margin: 0;
  position: absolute;
  width: min(66%, 74rem);
  z-index: 2;
}

.rs2-category-hero__photo picture,
.rs2-category-hero__photo img {
  display: block;
  height: 100%;
  width: 100%;
}

/* Le degrade fond le bord gauche du cliche dans la bande. Sans lui, la photo
   se termine par une arete verticale au milieu du titre. */
.rs2-category-hero__photo img {
  mask-image: linear-gradient(90deg, transparent, #000 32%);
  object-fit: cover;
  object-position: 62% center;
}

.rs2-category-hero__photo-caption {
  bottom: clamp(1.4rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  inset-inline-end: max(calc(50vw - 50%), 1.1rem);
  position: absolute;
  text-align: end;
  z-index: 4;
}

.rs2-category-hero__photo-caption strong {
  color: var(--rs2-text);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rs2-category-hero__photo-caption span {
  color: var(--rs2-subtle);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* --- La mention en haut a droite ------------------------------------------ */

.rs2-category-hero__tagline {
  align-items: center;
  color: var(--rs2-subtle);
  display: flex;
  font-size: .62rem;
  font-weight: 800;
  gap: .8rem;
  inset-inline-end: max(calc(50vw - 50%), 1.1rem);
  letter-spacing: .26em;
  margin: 0;
  position: absolute;
  text-align: start;
  text-transform: uppercase;
  top: clamp(1.6rem, 3vw, 2.8rem);
  z-index: 4;
}

/* Sur une seule ligne : la coupure « VISION / SANS LIMITES » de la maquette
   demanderait une largeur comprise entre 120 et 126 px, trop etroite pour
   tenir d'une police ou d'une traduction a l'autre. */
.rs2-category-hero__tagline > span:last-child {
  white-space: nowrap;
}

.rs2-category-hero__tagline-rule {
  background: var(--rs2-red);
  flex: 0 0 2.2rem;
  height: 1px;
}

.rs2-category-hero__subcategories {
  margin-inline: auto;
  max-width: var(--rs2-max-width, min(1560px, 94vw));
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  z-index: 3;
}

.rs2-category-hero__subcategories .subcategories__list {
  gap: .75rem;
}

.rs2-category-hero__subcategories .subcategory-miniature {
  background: rgb(0 0 0 / 18%);
  border: 1px solid var(--rs2-line);
  border-radius: 1rem;
}

/* Sous 992 px la photo passe au-dessus du texte plutot qu'a cote : a cette
   largeur, la superposer rendrait le titre illisible. */
@media (max-width: 991.98px) {
  .rs2-category-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-block: 0 clamp(1.75rem, 5vw, 2.5rem);
  }

  /* « order » plutot que column-reverse : l'inversion remonterait aussi les
     sous-categories, qui se placent apres la photo dans le gabarit. */
  .rs2-category-hero__photo {
    aspect-ratio: 16 / 9;
    inset: auto;
    order: -1;
    margin-inline: calc(-1 * max(calc(50vw - 50%), 1.1rem));
    position: relative;
    width: 100vw;
  }

  .rs2-category-hero__photo img {
    mask-image: linear-gradient(#000 62%, transparent);
    object-position: center;
  }

  .rs2-category-hero__photo-caption,
  .rs2-category-hero__tagline {
    display: none;
  }

  .rs2-category-hero__inner {
    margin-top: -2.5rem;
  }

  .rs2-category-hero__signals li {
    padding-inline: 0;
  }

  .rs2-category-hero__signals li + li {
    border-inline-start: 0;
  }

  .rs2-category-hero__signals {
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr);
  }

}


.rs2-products .products__selection {
  align-items: center;
  background: var(--rs2-surface);
  border: 1px solid var(--rs2-line);
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: .75rem .85rem .75rem 1.2rem;
}

.rs2-products .products__count {
  color: var(--rs2-subtle);
  font-size: .82rem;
  font-weight: 650;
}

.rs2-products .products__sort,
.rs2-products .products-sort-order {
  align-items: center;
  display: flex;
  gap: .65rem;
}

.rs2-products .products-sort-order .select-title,
.rs2-products .products__filter-button {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line-strong);
  border-radius: 999px;
  color: var(--rs2-text);
  min-height: 44px;
}

.rs2-products .products__sort-dropdown-button::after {
  border: solid currentcolor;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  display: inline-block;
  height: .45rem;
  margin-left: .75rem;
  transform: rotate(45deg) translateY(-2px);
  vertical-align: .18rem;
  width: .45rem;
}

.rs2-products .products-sort-order .dropdown-menu {
  border: 1px solid var(--rs2-line);
  border-radius: 1rem;
  box-shadow: var(--rs2-shadow);
  overflow: hidden;
}

.rs2-products .products-sort-order .select-list:hover,
.rs2-products .products-sort-order .select-list.current {
  background: rgb(255 29 29 / 12%);
  color: var(--rs2-on-tint);
}

.rs2-products .products.row,
.rs2-products .product-list {
  row-gap: clamp(1.25rem, 3vw, 2.25rem);
}

/* Product cards */

.rs2-product-card.product-miniature {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: 1.5rem;
  box-shadow: 0 16px 44px rgb(0 0 0 / 14%);
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: border-color .35s var(--rs2-ease), box-shadow .35s var(--rs2-ease), transform .35s var(--rs2-ease);
}

.rs2-product-card.product-miniature:hover {
  border-color: rgb(255 29 29 / 42%);
  box-shadow: 0 26px 65px rgb(0 0 0 / 28%), 0 0 0 1px rgb(255 29 29 / 9%);
  transform: translateY(-7px);
}

.rs2-product-card .product-miniature__inner,
.rs2-product-card .product-miniature__bottom {
  height: 100%;
}

.rs2-product-card .product-miniature__inner,
.rs2-product-card .product-miniature__bottom {
  display: flex;
  flex-direction: column;
}

.rs2-product-card .product-miniature__inner {
  background: var(--rs2-card) !important;
  border-radius: 0 !important;
}

.rs2-product-card .product-miniature__top {
  background:
    radial-gradient(circle at 50% 45%, rgb(255 29 29 / 13%), transparent 46%),
    linear-gradient(160deg, var(--rs2-raised), var(--rs2-surface));
  min-height: 310px;
  overflow: hidden;
  position: relative;
  border-radius: 0 !important;
}

.rs2-product-card__technology {
  color: var(--rs2-subtle);
  font-size: .58rem;
  font-weight: 800;
  left: 1.1rem;
  letter-spacing: .17em;
  position: absolute;
  text-transform: uppercase;
  top: 1.05rem;
  z-index: 3;
}

.rs2-product-card .product-flags {
  display: flex;
  left: auto !important;
  padding: 0 !important;
  right: 1rem !important;
  top: 1rem !important;
  width: auto !important;
  z-index: 4;
}

.rs2-product-card .product-flag,
.rs2-product-card .product-flags .badge,
.rs2-product-card .rs2-product-flag {
  background: var(--rs2-red-fill) !important;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgb(255 29 29 / 20%);
  color: #fff !important;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .45rem .75rem;
  text-transform: uppercase;
}

.rs2-product-card .rs2-product-flag {
  list-style: none;
}

.rs2-products .pagination__number,
.rs2-products .pagination__summary {
  color: var(--rs2-muted);
  font-size: .84rem;
  font-weight: 650;
}

.rs2-product-card .product-miniature__image-container,
.rs2-product-card .product-miniature__image-link,
.rs2-product-card .product-miniature__image-container picture {
  display: block;
  height: 100%;
}

.rs2-product-card .product-miniature__image {
  height: 310px;
  object-fit: contain;
  padding: clamp(2.2rem, 5vw, 3.6rem) 1.2rem 1.5rem;
  transition: transform .65s var(--rs2-ease);
  width: 100%;
}

.rs2-product-card:hover .product-miniature__image {
  transform: scale(1.055);
}

.rs2-product-card .product-miniature__quickview {
  backdrop-filter: blur(12px);
  background: rgb(14 15 19 / 70%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  bottom: 1rem;
  color: #fff;
  right: 1rem;
}

.rs2-product-card .product-miniature__bottom {
  background: var(--rs2-card) !important;
  color: var(--rs2-text);
  padding: 1.5rem;
}

.rs2-product-card .product-miniature__infos {
  flex: 1;
}

.rs2-product-card .product-miniature__title {
  color: var(--rs2-text);
  display: inline-block;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-decoration: none;
}

.rs2-product-card .product-miniature__title:hover {
  color: var(--rs2-red-hover);
}

.rs2-product-card__promise {
  color: var(--rs2-subtle);
  font-size: .82rem;
  line-height: 1.55;
  margin: .7rem 0 1rem;
}

.rs2-product-card .product-miniature__variants {
  margin-block: .75rem;
}

.rs2-product-card .variant-links {
  gap: .45rem;
}

.rs2-product-card .product-miniature__variants {
  align-items: center;
  display: flex;
  gap: .65rem;
}

.rs2-product-card .product-miniature__variants::before {
  color: var(--rs2-subtle);
  content: "Coloris";
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .1em;
  margin-right: .1rem;
  text-transform: uppercase;
}

.rs2-product-card .product-miniature__variants .color {
  /* Le cercle de contour a 28 % de blanc donnait 2,52:1 sur la carte : la
     pastille graphite du catalogue n'avait pas de limite perceptible. A 40 %
     il atteint 3,95:1, au-dessus du seuil de 3:1 des contours de composant. */
  border: 2px solid var(--rs2-card) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 40%);
  height: 18px;
  outline: 0;
  transition: box-shadow .2s ease, transform .2s ease;
  width: 18px;
}

.rs2-product-card .product-miniature__variants .color:hover,
.rs2-product-card .product-miniature__variants .color:focus-visible {
  box-shadow: 0 0 0 2px var(--rs2-red-hover);
  transform: scale(1.08);
}

.rs2-product-card .product-miniature__variants .color.is-current {
  box-shadow: 0 0 0 2px var(--rs2-red);
}

.rs2-product-card .product-miniature__prices {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  margin-top: .65rem;
}

.rs2-product-card .product-miniature__price {
  color: var(--rs2-text);
  font-size: 1.28rem;
  font-weight: 850;
}

.rs2-product-card .product-miniature__regular-price {
  color: var(--rs2-subtle);
  font-size: .82rem;
}

.rs2-product-card .product-miniature__actions {
  border-top: 1px solid var(--rs2-line);
  margin-top: 1.25rem;
  padding-top: 1.15rem;
}

.rs2-product-card .product-miniature__form {
  align-items: center;
  display: grid;
  gap: .65rem;
  grid-template-columns: 1fr;
}

.rs2-product-card .quantity-button {
  display: none;
}

.rs2-product-card .product-miniature__add,
.rs2-product-card .product-miniature__details {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 48px;
  width: 100%;
}

.rs2-product-card .product-miniature__add-text {
  display: inline;
}

.rs2-product-card .product-miniature__quickview .material-icons,
.rs2-products .products-sort-order .material-icons {
  display: none;
}

/* Product page */

body#product #wrapper {
  background:
    radial-gradient(circle at 14% 12%, rgb(255 29 29 / 7%), transparent 25%),
    var(--rs2-bg);
}

body#product .product__container {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  margin-block: clamp(2rem, 5vw, 5rem);
}

body#product .product__left {
  min-width: 0;
  position: sticky;
  top: 110px;
}

body#product .product__images,
body#product .product__no-image {
  background:
    radial-gradient(circle at 50% 42%, rgb(255 29 29 / 11%), transparent 48%),
    linear-gradient(155deg, var(--rs2-raised), var(--rs2-surface));
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}

/* Les photos du catalogue sont des carres dont le sujet occupe une bande de
   1672 x 941 : au carre et en « contain », la fiche affichait surtout les
   marges noires du fichier, un tiers de la hauteur du cadre. Un rapport 16/9
   en « cover » retire exactement ces marges. Le remplissage disparait, la
   photo portant deja son propre espace autour du produit. */
body#product .product__carousel .carousel-item img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  padding: 0;
}

/* Le visuel de remplacement, lui, n'a pas de marges a retirer. */
body#product .product__no-image > img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(1.5rem, 5vw, 4rem);
}

body#product .product__zoom,
body#product .carousel-control-prev,
body#product .carousel-control-next {
  backdrop-filter: blur(14px);
  background: rgb(12 13 17 / 68%);
  border: 1px solid rgb(255 255 255 / 14%);
  color: #fff;
}

body#product .product__thumbnails {
  margin-top: .85rem;
}

body#product .product__thumbnail {
  aspect-ratio: 16 / 9;
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: .85rem;
  height: auto;
  overflow: hidden;
}

body#product .product__thumbnail img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

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

body#product .product__right {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 30px 80px rgb(0 0 0 / 20%);
  padding: clamp(1.6rem, 4vw, 3rem);
}

body#product .product__right::before {
  color: var(--rs2-red-hover);
  content: "RS2 · LUNETTES CONNECTÉES";
  display: block;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .22em;
  margin-bottom: 1rem;
}

body#product .product__name {
  color: var(--rs2-text);
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .94;
  margin-bottom: .55rem;
}

body#product .product__manufacturer a {
  color: var(--rs2-subtle);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body#product .product__prices {
  border-bottom: 1px solid var(--rs2-line);
  margin-block: 1.25rem;
  padding-bottom: 1.25rem;
}

body#product .product__current-price,
body#product .product__price {
  color: var(--rs2-text);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 850;
}

body#product .product__description-short {
  color: var(--rs2-muted);
  font-size: 1rem;
  line-height: 1.72;
}

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

body#product .product-variant + .product-variant {
  margin-top: 1.3rem;
}

body#product .product-variant__legend {
  color: var(--rs2-text);
  font-size: .82rem;
  font-weight: 800;
}

body#product .product-variant__selected {
  color: var(--rs2-subtle);
}

body#product .input-color__label {
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 3px;
}

body#product .input-color__input:checked + .input-color__label {
  border-color: var(--rs2-red);
}

body#product .product__add-to-cart-container {
  background: var(--rs2-surface);
  border: 1px solid var(--rs2-line);
  border-radius: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.2rem;
}

body#product .product__actions-qty-add {
  align-items: stretch;
  display: grid;
  gap: .7rem;
  grid-template-columns: 142px minmax(0, 1fr);
}

body#product .product__quantity,
body#product .product__quantity .quantity-button__group {
  min-width: 0;
  width: 100%;
}

body#product .product__quantity .quantity-button__group {
  display: grid;
  grid-template-columns: 42px minmax(44px, 1fr) 42px;
  flex-wrap: nowrap;
}

body#product .product__quantity .quantity-button__group > * {
  min-width: 0;
}

body#product .product__quantity .btn {
  border-color: var(--rs2-line-strong);
  border-radius: .75rem;
  padding: 0;
  width: 42px;
}

body#product .product__quantity .btn .material-icons,
body#product .product__availability-icon,
body#product .product__zoom .material-icons {
  display: none;
}

body#product .product__quantity .decrement::after {
  content: "−";
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
}

body#product .product__quantity .increment::after {
  content: "+";
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1;
}

body#product .product__zoom::after {
  content: "+";
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
}

body#product .product__quantity input {
  border-radius: .75rem;
  height: 54px;
  text-align: center;
}

body#product .product__add-to-cart-button {
  border-radius: .85rem;
  font-size: .92rem;
  min-height: 54px;
  width: 100%;
}

body#product .product__add-to-cart-button .material-icons {
  display: none;
}

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

.rs2-product-assurances {
  border-top: 1px solid var(--rs2-line);
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
  padding-top: 1rem;
}

.rs2-product-assurances > div {
  align-items: center;
  color: var(--rs2-subtle);
  display: flex;
  font-size: .7rem;
  font-weight: 700;
  gap: .4rem;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.rs2-product-assurances .material-icons {
  display: none;
}

.rs2-product-assurances > div::before {
  background: var(--rs2-red);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgb(255 29 29 / 12%);
  content: "";
  flex: 0 0 6px;
  height: 6px;
  width: 6px;
}

body#product .product__bottom {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(250px, .34fr);
  margin-block: clamp(3rem, 7vw, 6rem);
}

body#product .product__accordion {
  border: 1px solid var(--rs2-line);
  border-radius: 1.5rem;
  overflow: hidden;
}

body#product .product__accordion .accordion-item {
  background: var(--rs2-card);
  border-color: var(--rs2-line);
  color: var(--rs2-text);
}

body#product .product__accordion .accordion-button {
  background: var(--rs2-card);
  color: var(--rs2-text);
  font-weight: 800;
  padding: 1.35rem 1.5rem;
}

body#product .product__accordion .accordion-button:not(.collapsed) {
  background: var(--rs2-raised);
  box-shadow: inset 3px 0 0 var(--rs2-red);
}

body#product .product__accordion .accordion-body {
  color: var(--rs2-muted);
  line-height: 1.75;
  padding: 1.5rem;
}

body#product .product-accessories,
body#product .featured-products {
  margin-block: clamp(3rem, 7vw, 6rem);
}

/* Shared benefits */

.rs2-commerce-benefits {
  background: var(--rs2-surface);
  border: 1px solid var(--rs2-line);
  border-radius: 1.4rem;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 1.35rem;
}

.rs2-commerce-benefits > div {
  align-items: center;
  display: flex;
  gap: .85rem;
  padding: .4rem 1rem;
}

.rs2-commerce-benefits > div + div {
  border-left: 1px solid var(--rs2-line);
}

.rs2-commerce-benefits .material-icons {
  display: none;
}

/* Selecteur qualifie : la regle generique « .rs2-commerce-benefits span »,
   ecrite plus bas, a la meme specificite et grisait le pictogramme. */
.rs2-commerce-benefits span.rs2-commerce-benefits__icon {
  color: var(--rs2-red);
  flex: 0 0 auto;
}

.rs2-commerce-benefits__icon svg {
  display: block;
  height: 1.6rem;
  width: 1.6rem;
}

.rs2-commerce-benefits span {
  color: var(--rs2-subtle);
  display: flex;
  flex-direction: column;
  font-size: .72rem;
  line-height: 1.45;
}

.rs2-commerce-benefits strong {
  color: var(--rs2-text);
  font-size: .82rem;
}

/* Cart */

.rs2-cart-page .rs2-commerce-header {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

.rs2-commerce-header__secure {
  align-items: center;
  background: rgb(49 190 113 / 10%);
  border: 1px solid rgb(49 190 113 / 24%);
  border-radius: 999px;
  color: var(--rs2-success-text);
  display: flex;
  flex: 0 0 auto;
  gap: .65rem;
  margin-left: 1.5rem;
  padding: .65rem 1rem;
}

.rs2-commerce-header__secure .material-icons {
  display: none;
}

.rs2-commerce-header__secure::before {
  content: "✓";
  font-size: 1rem;
  font-weight: 900;
}

.rs2-commerce-header__secure span {
  display: flex;
  flex-direction: column;
  font-size: .67rem;
  line-height: 1.35;
}

.rs2-commerce-header__secure strong {
  color: var(--rs2-text);
  font-size: .75rem;
}

.rs2-cart-page .cart-grid {
  align-items: start;
  row-gap: 1.5rem;
}

.rs2-cart-page .rs2-cart-page__empty .cart-grid__products-details {
  margin-inline: auto;
  max-width: 820px;
}

.rs2-cart-page .rs2-cart-page__empty .cart__overview {
  background:
    radial-gradient(circle at 50% 0, rgb(255 29 29 / 12%), transparent 45%),
    var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: 1.5rem;
  padding: clamp(2rem, 6vw, 4.5rem);
  text-align: center;
}

.rs2-cart-page .rs2-cart-page__empty .cart__continue-shopping {
  display: flex;
  margin: 1.25rem auto 0;
  width: fit-content;
}

.rs2-cart-page .cart__overview > hr {
  display: none;
}

.rs2-cart-page .cart__list {
  display: grid;
  gap: 1rem;
}

.rs2-cart-page .cart__item {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: border-color .25s var(--rs2-ease);
}

.rs2-cart-page .cart__item:hover {
  border-color: var(--rs2-line-strong);
}

.rs2-cart-page .product-line {
  align-items: stretch;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 160px 1fr;
  padding: 1rem;
}

.rs2-cart-page .product-line__image {
  background:
    radial-gradient(circle at center, rgb(255 29 29 / 10%), transparent 55%),
    var(--rs2-surface);
  border-radius: 1rem;
  overflow: hidden;
}

.rs2-cart-page .product-line__img {
  aspect-ratio: 1;
  height: 100%;
  object-fit: contain;
  padding: .6rem;
  width: 100%;
}

.rs2-cart-page .product-line__content {
  min-width: 0;
}

.rs2-cart-page .product-line__title {
  color: var(--rs2-text);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
}

.rs2-cart-page .product-line__item--info,
.rs2-cart-page .product-line__item--small-info {
  color: var(--rs2-subtle);
  font-size: .78rem;
}

.rs2-cart-page .product-line__item-price,
.rs2-cart-page .product-line__price {
  color: var(--rs2-text);
  font-weight: 850;
}

.rs2-cart-page .product-line__actions a {
  color: var(--rs2-subtle);
  font-size: .74rem;
  font-weight: 700;
}

.rs2-cart-page .product-line__actions a:hover {
  color: var(--rs2-red-hover);
}

.rs2-cart-page .cart__continue-shopping {
  margin-top: 1.25rem;
}

.rs2-cart-page .cart__continue-shopping .material-icons {
  display: none;
}

.rs2-cart-page .cart__continue-shopping::before {
  content: "←";
  margin-right: .45rem;
}

.rs2-cart-page .product-line__quantity-button .quantity-button__group {
  display: grid;
  flex-wrap: nowrap;
  grid-template-columns: 38px 48px 38px;
  width: 124px;
}

.rs2-cart-page .product-line__quantity-button .quantity-button__group > * {
  min-width: 0;
}

.rs2-cart-page .product-line__quantity-button .btn {
  border-color: var(--rs2-line-strong);
  border-radius: .7rem;
  color: var(--rs2-text);
  padding: 0;
  width: 38px;
}

.rs2-cart-page .product-line__quantity-button input {
  border-radius: .7rem;
  height: 42px;
  padding: 0;
  text-align: center;
}

.rs2-cart-page .product-line__quantity-button .material-icons {
  display: none;
}

.rs2-cart-page .product-line__quantity-button .decrement::after {
  content: "−";
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
}

.rs2-cart-page .product-line__quantity-button .increment::after {
  content: "+";
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
}

.rs2-cart-page .cart-grid__footer .all-product-link,
.rs2-cart-page .cart-grid__footer .module-products__buttons {
  display: none !important;
}

.rs2-cart-page .cart-grid__footer .module-products {
  margin-inline: 0;
  max-width: none;
  padding-inline: 0;
  width: 100%;
}

.rs2-cart-page .cart-grid__footer .products {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rs2-cart-page .cart-grid__footer .rs2-product-card {
  width: 100%;
}

.rs2-cart-page .cart-grid__aside-wrapper,
.rs2-checkout-page .checkout-grid__aside-wrapper {
  background:
    radial-gradient(circle at 90% 0, rgb(255 29 29 / 9%), transparent 34%),
    var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: 1.5rem;
  box-shadow: 0 28px 65px rgb(0 0 0 / 20%);
  padding: clamp(1.25rem, 3vw, 2rem);
  position: sticky;
  top: 110px;
}

.rs2-cart-page .cart-grid__aside-wrapper h2 {
  font-size: 1.55rem;
  margin-bottom: 1.4rem;
}

.rs2-cart-page .cart-summary__line,
.rs2-checkout-page .cart-summary__line {
  color: var(--rs2-muted);
  display: flex;
  justify-content: space-between;
  padding-block: .65rem;
}

.rs2-cart-page .cart-summary__total,
.rs2-checkout-page .cart-summary__total {
  border-top: 1px solid var(--rs2-line);
  color: var(--rs2-text);
  font-size: 1.1rem;
  font-weight: 850;
  margin-top: .6rem;
  padding-top: 1rem;
}

.rs2-cart-page .cart-summary__actions .btn {
  border-radius: .85rem;
  min-height: 54px;
  width: 100%;
}

.rs2-cart-security,
.rs2-checkout-trust {
  border-top: 1px solid var(--rs2-line);
  display: grid;
  gap: .55rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.rs2-cart-security p,
.rs2-checkout-trust p {
  align-items: center;
  color: var(--rs2-subtle);
  display: flex;
  font-size: .74rem;
  gap: .55rem;
  margin: 0;
}

.rs2-cart-security .material-icons,
.rs2-checkout-trust .material-icons {
  display: none;
}

.rs2-cart-security p::before,
.rs2-checkout-trust p::before {
  background: var(--rs2-red);
  border-radius: 50%;
  content: "";
  flex: 0 0 6px;
  height: 6px;
  width: 6px;
}

/* Checkout */

body#checkout #header,
body#checkout #footer,
body#checkout .breadcrumb__wrapper {
  display: none;
}

.rs2-checkout-page {
  min-height: 100vh;
  padding: 0 0 4rem;
}

.rs2-checkout-header {
  align-items: center;
  border-bottom: 1px solid var(--rs2-line);
  display: flex;
  justify-content: space-between;
  min-height: 88px;
}

/* Le tunnel affichait un mot-symbole ecrit en dur dans checkout.tpl
   (<span>RS2</span><span>EYEWEAR</span>) au lieu du logo de la boutique : autre
   police, autre graisse, autre inclinaison que l'en-tete de toutes les autres
   pages. Il porte desormais la meme image que _partials/helpers.tpl. */
.rs2-checkout-header__brand {
  align-items: center;
  display: inline-flex;
  line-height: 1;
  text-decoration: none;
}

.rs2-checkout-header__logo {
  display: block;
  filter: drop-shadow(0 4px 14px rgb(255 29 29 / 20%));
  height: 38px;
  object-fit: contain;
  width: auto;
}

.rs2-checkout-header__secure {
  align-items: center;
  color: var(--rs2-success-text);
  display: flex;
  font-size: .76rem;
  font-weight: 750;
  gap: .4rem;
}

.rs2-checkout-header__secure .material-icons {
  display: none;
}

.rs2-checkout-header__secure::before {
  content: "✓";
  font-size: .9rem;
  font-weight: 900;
}

.rs2-checkout-navigation {
  background: var(--rs2-checkout-band) !important;
  border-bottom: 1px solid var(--rs2-line);
}

.rs2-checkout-navigation .checkout-steps,
.rs2-checkout-navigation .checkout-steps__list,
.rs2-checkout-navigation .container,
.rs2-checkout-navigation .container-fluid {
  background: transparent !important;
}

.rs2-checkout-page .checkout-steps {
  margin-inline: auto;
  max-width: var(--rs2-max-width);
}

.rs2-checkout-page .checkout-steps__list {
  gap: 0;
  justify-content: center;
}

.rs2-checkout-page .checkout-steps__step {
  color: var(--rs2-subtle);
  flex: 1;
  max-width: 270px;
  position: relative;
}

.rs2-checkout-page .checkout-steps__step::after {
  background: var(--rs2-line-strong);
  content: "";
  height: 1px;
  position: absolute;
  right: -22%;
  top: 50%;
  width: 44%;
}

.rs2-checkout-page .checkout-steps__step:last-child::after {
  display: none;
}

.rs2-checkout-page .checkout-steps__step:has(.checkout-steps__btn.active),
.rs2-checkout-page .checkout-steps__step:has(.checkout-steps__btn[aria-selected="true"]) {
  color: var(--rs2-text);
}

.rs2-checkout-page .checkout-steps__btn {
  color: inherit;
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
}

.rs2-checkout-page .checkout-steps__btn.active,
.rs2-checkout-page .checkout-steps__btn[aria-selected="true"] {
  color: var(--rs2-text);
}

.rs2-checkout-page .checkout-steps__number {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line-strong);
  color: var(--rs2-subtle);
}

.rs2-checkout-page .checkout-steps__step:has(.checkout-steps__btn.active) .checkout-steps__number,
.rs2-checkout-page .checkout-steps__step:has(.checkout-steps__btn[aria-selected="true"]) .checkout-steps__number {
  background: var(--rs2-red-fill);
  border-color: var(--rs2-red);
  box-shadow: 0 0 0 5px rgb(255 29 29 / 13%);
  color: #fff;
}

.rs2-checkout-page .columns-container {
  padding-top: clamp(2rem, 5vw, 4rem);
}

.rs2-checkout-page .checkout-grid {
  align-items: start;
  row-gap: 1.5rem;
}

.rs2-checkout-page .checkout-grid__content {
  min-width: 0;
}

.rs2-checkout-page .step {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: 1.5rem;
  color: var(--rs2-text);
  overflow: hidden;
  padding: clamp(1.3rem, 4vw, 2.5rem);
}

.rs2-checkout-page .step__title .page-title-section {
  color: var(--rs2-text);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -.045em;
}

.rs2-checkout-page .step__title hr {
  border-color: var(--rs2-line);
  margin-block: 1.25rem 1.75rem;
  opacity: 1;
}

.rs2-checkout-page .step__content,
.rs2-checkout-page .form-informations,
.rs2-checkout-page .form-control-comment {
  color: var(--rs2-muted);
}

.rs2-checkout-page .nav-tabs,
.rs2-checkout-page .nav-underline {
  border-color: var(--rs2-line);
}

.rs2-checkout-page .nav-tabs .nav-link,
.rs2-checkout-page .nav-underline .nav-link {
  background: transparent;
  border-color: transparent;
  color: var(--rs2-muted) !important;
  font-weight: 750;
}

.rs2-checkout-page .nav-tabs .nav-link.active,
.rs2-checkout-page .nav-tabs .nav-link[aria-selected="true"],
.rs2-checkout-page .nav-underline .nav-link.active,
.rs2-checkout-page .nav-underline .nav-link[aria-selected="true"] {
  border-bottom-color: var(--rs2-red);
  color: var(--rs2-text) !important;
}

.rs2-checkout-page .nav-tabs .nav-link.active *,
.rs2-checkout-page .nav-tabs .nav-link[aria-selected="true"] *,
.rs2-checkout-page .nav-underline .nav-link.active *,
.rs2-checkout-page .nav-underline .nav-link[aria-selected="true"] * {
  color: var(--rs2-text) !important;
}

body#checkout .rs2-checkout-page .form-text,
body#checkout .rs2-checkout-page .form-control-comment,
body#checkout .rs2-checkout-page .form-check-label em,
body#checkout .rs2-checkout-page .form-check-label small,
body#checkout .rs2-checkout-page .cart-summary__products-number {
  color: var(--rs2-muted) !important;
  opacity: 1 !important;
}

body#checkout .rs2-checkout-page .form-check-label {
  color: var(--rs2-text) !important;
}

body#checkout .rs2-checkout-page .form-check-input {
  border-color: var(--rs2-field-border);
}

.rs2-checkout-page select,
.rs2-checkout-page .accordion-button,
.rs2-checkout-page .checkout__summary-accordion-header select {
  background-color: var(--rs2-surface) !important;
  border-color: var(--rs2-field-border);
  color: var(--rs2-text) !important;
}

.rs2-checkout-page .btn .material-icons {
  display: none;
}

.rs2-checkout-page .form-control,
.rs2-checkout-page .form-select {
  border-radius: .8rem;
  min-height: 48px;
}

.rs2-checkout-page .form-check-input:checked {
  background-color: var(--rs2-red);
  border-color: var(--rs2-red);
}

.rs2-checkout-page .address-card,
.rs2-checkout-page .delivery-option__item,
.rs2-checkout-page .payment-option {
  background: var(--rs2-surface);
  border: 1px solid var(--rs2-line);
  border-radius: 1rem;
  color: var(--rs2-text);
  margin-bottom: .8rem;
  padding: 1rem;
}

.rs2-checkout-page .address-card.selected,
.rs2-checkout-page .delivery-option__item:has(input:checked),
.rs2-checkout-page .payment-option:has(input:checked) {
  border-color: rgb(255 29 29 / 55%);
  box-shadow: 0 0 0 3px rgb(255 29 29 / 9%);
}

.rs2-checkout-page .step__content .btn-primary {
  border-radius: .85rem;
  min-height: 50px;
  padding-inline: 1.5rem;
}

.rs2-checkout-page .checkout-grid__aside-wrapper {
  top: 2rem;
}

.rs2-checkout-page .checkout__summary-accordion-item {
  background: transparent;
  border: 0;
}

.rs2-checkout-page .checkout__summary-accordion-header .accordion-button {
  background: transparent;
  box-shadow: none;
  color: var(--rs2-text);
  font-size: 1.35rem;
  font-weight: 850;
  padding: 0 0 1.2rem;
}

.rs2-checkout-page .checkout__summary-accordion-wrapper {
  border-top: 1px solid var(--rs2-line);
  padding-top: 1rem;
}

.rs2-checkout-page .cart-summary-product {
  border-bottom: 1px solid var(--rs2-line);
  padding-block: .8rem;
}

.rs2-checkout-page .cart-summary-product__image img {
  background: var(--rs2-surface);
  border-radius: .7rem;
}

/* Confirmation and cart modal */

body#order-confirmation .page-content,
body.page-order-confirmation .page-content {
  margin-inline: auto;
  max-width: 980px;
  padding-block: clamp(2rem, 6vw, 5rem);
}

body#order-confirmation .alert-success,
body.page-order-confirmation .alert-success {
  background:
    radial-gradient(circle at 90% 10%, rgb(49 190 113 / 12%), transparent 38%),
    var(--rs2-card);
  border: 1px solid rgb(49 190 113 / 30%);
  border-radius: 1.5rem;
  color: var(--rs2-muted);
  padding: clamp(1.5rem, 4vw, 3rem);
}

body#order-confirmation .alert-success .page-title-section,
body.page-order-confirmation .alert-success .page-title-section {
  color: var(--rs2-text);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -.055em;
}

body#order-confirmation .alert-success::before,
body.page-order-confirmation .alert-success::before {
  align-items: center;
  background: rgb(49 190 113 / 15%);
  border: 1px solid rgb(49 190 113 / 32%);
  border-radius: 999px;
  color: var(--rs2-success-text);
  content: "✓";
  display: flex;
  font-size: 1.4rem;
  height: 48px;
  justify-content: center;
  margin-bottom: 1.25rem;
  width: 48px;
}

body#order-confirmation .order-confirmation__details,
body.page-order-confirmation .order-confirmation__details {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line) !important;
  border-radius: 1.5rem;
  color: var(--rs2-muted);
  overflow: hidden;
}

body#order-confirmation .order-confirmation__details-list,
body.page-order-confirmation .order-confirmation__details-list {
  display: grid;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

body#order-confirmation .order-confirmation__product,
body.page-order-confirmation .order-confirmation__product {
  border-bottom: 1px solid var(--rs2-line);
  padding-block: 1rem;
}

body#order-confirmation .order-confirmation__product-img,
body.page-order-confirmation .order-confirmation__product-img {
  background: var(--rs2-surface);
  border-radius: .85rem;
}

.blockcart-modal .modal-content {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: 1.5rem;
  box-shadow: var(--rs2-shadow);
  color: var(--rs2-text);
  overflow: hidden;
}

.blockcart-modal .modal-header,
.blockcart-modal .modal-footer {
  border-color: var(--rs2-line);
}

.blockcart-modal__title-icon {
  display: none;
}

.blockcart-modal__title {
  font-size: 0;
}

.blockcart-modal__title::after {
  content: "Ajouté au panier";
  font-size: 1.5rem;
}

.blockcart-modal__image {
  background: var(--rs2-surface);
  border-radius: 1rem;
}

/* Facets and ancillary commerce blocks */

body#category #left-column,
body#search #left-column,
body#prices-drop #left-column,
body#new-products #left-column,
body#best-sales #left-column {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: 1.25rem;
  height: fit-content;
  padding: 1.25rem;
}

.facet,
.active_filters {
  border-color: var(--rs2-line);
}

.facet .facet-title {
  color: var(--rs2-text);
  font-weight: 800;
}

.facet .facet-label,
.facet .facet-label a {
  color: var(--rs2-muted);
}

.facet .facet-label:hover,
.facet .facet-label a:hover {
  color: var(--rs2-text);
}

.ui-slider .ui-slider-range,
.ui-slider .ui-slider-handle {
  background: var(--rs2-red);
}

.rs2-empty-state {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line);
  border-radius: 1.5rem;
  min-height: 320px;
  padding: clamp(2rem, 6vw, 5rem);
  text-align: center;
}

/* Light mode */

html[data-rs2-theme="light"] .rs2-product-card,
html[data-rs2-theme="light"] body#product .product__right,
html[data-rs2-theme="light"] .rs2-cart-page .cart-grid__aside-wrapper,
html[data-rs2-theme="light"] .rs2-checkout-page .checkout-grid__aside-wrapper {
  box-shadow: 0 22px 55px rgb(16 18 27 / 10%);
}

html[data-rs2-theme="light"] .rs2-product-card .product-miniature__quickview,
html[data-rs2-theme="light"] body#product .product__zoom,
html[data-rs2-theme="light"] body#product .carousel-control-prev,
html[data-rs2-theme="light"] body#product .carousel-control-next {
  background: rgb(255 255 255 / 82%);
  border-color: rgb(16 18 27 / 12%);
  color: #14151a;
}

/* Responsive */

@media (max-width: 991.98px) {
  body#product .product__container,
  body#product .product__bottom {
    grid-template-columns: 1fr;
  }

  body#product .product__left {
    position: static;
  }

  .rs2-cart-page .cart-grid__aside-wrapper,
  .rs2-checkout-page .checkout-grid__aside-wrapper {
    position: static;
  }

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

  .rs2-commerce-benefits > div + div {
    border-left: 0;
    border-top: 1px solid var(--rs2-line);
    margin-top: .75rem;
    padding-top: 1.15rem;
  }

  .rs2-checkout-page .checkout-steps__step::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .rs2-commerce {
    padding-block: 1.75rem 3rem;
  }

  .rs2-products .products__selection {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
  }

  .rs2-products .products__sort {
    justify-content: space-between;
  }

  .rs2-product-card .product-miniature__top,
  .rs2-product-card .product-miniature__image {
    min-height: 250px;
  }

  .rs2-product-card .product-miniature__image {
    height: 250px;
  }

  body#product .product__right {
    padding: 1.35rem;
  }

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

  .rs2-cart-page .rs2-commerce-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .rs2-commerce-header__secure {
    margin: 1.25rem 0 0;
  }

  .rs2-cart-page .product-line {
    grid-template-columns: 105px 1fr;
  }

  .rs2-cart-page .cart-grid__footer .products {
    grid-template-columns: 1fr;
  }

  .rs2-checkout-header {
    min-height: 72px;
  }

  .rs2-checkout-page .step {
    border-radius: 1.15rem;
    padding: 1.25rem;
  }
}

@media (max-width: 479.98px) {
  .rs2-product-card .product-miniature__form {
    grid-template-columns: 1fr;
  }

  .rs2-product-card .quantity-button {
    max-width: 110px;
  }

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

  .rs2-cart-page .product-line {
    grid-template-columns: 84px 1fr;
    gap: .8rem;
    padding: .75rem;
  }

  .rs2-checkout-header__logo {
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs2-product-card,
  .rs2-product-card .product-miniature__image {
    transition: none;
  }
}

/* 2026-09 editorial refinement: fewer panels, stronger product focus. */

.rs2-product-card.product-miniature {
  border-radius: 1rem;
  box-shadow: 0 12px 34px rgb(0 0 0 / 12%);
}

.rs2-product-card.product-miniature:hover {
  box-shadow: 0 20px 48px rgb(0 0 0 / 23%), 0 0 0 1px rgb(255 29 29 / 8%);
  transform: translateY(-3px);
}

.rs2-product-card .product-miniature__top,
.rs2-product-card .product-miniature__image {
  height: 275px;
  min-height: 275px;
}

.rs2-product-card .product-miniature__image {
  padding: 2.5rem 1rem 1.2rem;
}

.rs2-product-card .product-miniature__bottom {
  padding: 1.25rem;
}

.rs2-product-card .product-miniature__title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.rs2-product-card__promise {
  display: -webkit-box;
  font-size: .78rem;
  line-height: 1.5;
  margin: .55rem 0 .8rem;
  min-height: 2.35rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rs2-product-card .product-miniature__actions {
  margin-top: .85rem;
  padding-top: .85rem;
}

.rs2-product-card .product-miniature__add,
.rs2-product-card .product-miniature__details {
  background: transparent !important;
  border: 1px solid var(--rs2-line-strong) !important;
  border-radius: 999px;
  color: var(--rs2-text) !important;
  font-size: .74rem;
  font-weight: 780;
  justify-content: space-between;
  min-height: 42px;
  padding-inline: 1rem;
}

/* Le panier occupe le debut du bouton, le chevron la fin : le libelle reste
   ainsi cale a gauche, comme sur la maquette. Le chevron est un masque SVG
   plutot qu'un caractere, dont le dessin varie d'une fonte a l'autre. */
.rs2-product-card .product-miniature__add {
  gap: .6rem;
  justify-content: flex-start;
}

.rs2-product-card .product-miniature__add-icon {
  color: var(--rs2-red-hover);
  flex: 0 0 auto;
}

.rs2-product-card .product-miniature__add-icon svg {
  display: block;
  height: 1.05rem;
  width: 1.05rem;
}

.rs2-product-card .product-miniature__add-text {
  margin-inline-end: auto;
}

.rs2-product-card .product-miniature__add::after,
.rs2-product-card .product-miniature__details::after {
  background: var(--rs2-red-hover);
  content: "";
  flex: 0 0 auto;
  height: .82rem;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  width: .48rem;
}

.rs2-product-card .product-miniature__add:hover .product-miniature__add-icon,
.rs2-product-card .product-miniature__add:hover::after,
.rs2-product-card .product-miniature__details:hover::after {
  background-color: #fff;
  color: #fff;
}

.rs2-product-card .product-miniature__add:hover,
.rs2-product-card .product-miniature__details:hover {
  background: var(--rs2-red-strong) !important;
  border-color: var(--rs2-red-strong) !important;
  color: #fff !important;
}

@media (max-width: 767.98px) {
  .rs2-product-card .product-miniature__top,
  .rs2-product-card .product-miniature__image {
    height: 235px;
    min-height: 235px;
  }
}

/* ==========================================================================
   Bouton d apercu rapide de la carte produit
   ==========================================================================
   Le bouton natif .product-miniature__quickview-button n avait aucune regle
   dans le theme : il restait blanc a texte sombre (rgb 33,37,41), pose sur une
   carte noire, et il etait gare a bottom:-57px sous un conteneur en
   overflow:hidden, d ou le liseré blanc visible au repos.

   Le clignotement venait de la : le bouton remontait au survol de la ZONE
   IMAGE, mais en remontant il passait sous le curseur, qui ne survolait donc
   plus l image — le bouton redescendait, le curseur retrouvait l image, et
   ainsi de suite. On declenche desormais sur la carte entiere : le bouton ne
   peut plus sortir de sa propre zone de declenchement. */

.rs2-product-card .product-miniature__quickview-button {
  backdrop-filter: blur(12px);
  background: rgb(14 15 19 / 82%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  bottom: 1rem;
  color: var(--rs2-text);
  font-size: .78rem;
  font-weight: 700;
  left: 50%;
  opacity: 0;
  padding: .6rem 1.2rem;
  top: auto;
  transform: translate(-50%, .5rem);
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
  width: auto;
}

.rs2-product-card:hover .product-miniature__quickview-button,
.rs2-product-card:focus-within .product-miniature__quickview-button {
  opacity: 1;
  transform: translate(-50%, 0);
}

.rs2-product-card .product-miniature__quickview-button:hover {
  background: var(--rs2-red-fill);
  border-color: var(--rs2-red-fill);
}

/* Au clavier et au toucher, pas de survol : le bouton doit rester atteignable
   sans etre visible en permanence. */
.rs2-product-card .product-miniature__quickview-button:focus-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==========================================================================
   Apercu rapide (modale)
   ==========================================================================
   La modale reprend le balisage de la fiche produit mais AUCUNE des regles du
   theme : celles-ci sont presque toutes ancrees sur .rs2-product-card ou
   body#product, deux ancres absentes ici. Elle tombait donc sur les defauts
   Bootstrap clairs. Reprise complete pour se rapprocher de la maquette. */

.quickview .quickview__content {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-field-border);
  border-radius: 1.4rem;
}

.quickview .quickview__body {
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* La maquette donne plus de place a l image qu au texte : 56 / 44. */
@media (min-width: 992px) {
  .quickview .quickview__body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* --- Colonne image ------------------------------------------------------- */

/* Sans plafond, l image occupait 570 px de haut et poussait la colonne a
   798 px pour un corps de modale de 608 : tout se mettait a defiler.
   Le plafond seul ne suffisait pas : il coupait le bas de l image sans la
   recadrer, si bien qu on voyait la bande noire du haut et que les lunettes
   sortaient par le bas. On donne donc au cadre un rapport defini, et une
   hauteur aux elements intermediaires du carrousel pour que le height: 100%
   de l image ait une reference.

   16/9 parce que les photos du catalogue sont des carres dont le sujet occupe
   une bande de 1672 x 941 : ce rapport retire exactement les marges noires. */
.quickview .product__carousel {
  aspect-ratio: 16 / 9;
  border-radius: 1.1rem;
  max-height: min(46vh, 30rem);
  overflow: hidden;
  position: relative;
}

.quickview .product__carousel .carousel-inner,
.quickview .product__carousel .carousel-item {
  height: 100%;
}

.quickview .carousel-item img,
.quickview .product__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* La pastille se pose DANS l image, avec une marge, au lieu de flotter au coin
   du panneau ou elle se faisait rogner. */
.quickview .product-flags {
  left: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 1rem;
  z-index: 3;
}

.quickview .rs2-product-flag,
.quickview .product-flags .badge {
  background: var(--rs2-red-fill);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .38rem .85rem;
  text-transform: uppercase;
}

/* Vignettes en rangee sous l image, l active cerclee de rouge. */
.quickview .product__thumbnails-list {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
}

/* Meme cadrage 16/9 que l image principale : au carre, la vignette montrait
   surtout les marges noires du fichier. */
.quickview .product__thumbnail {
  aspect-ratio: 16 / 9;
  background: var(--rs2-surface);
  border: 2px solid transparent;
  border-radius: .8rem;
  flex: 0 0 6.5rem;
  height: auto;
  overflow: hidden;
  padding: 0;
}

.quickview .product__thumbnail img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.quickview .product__thumbnail.active,
.quickview .product__thumbnail[aria-current="true"] {
  border-color: var(--rs2-red-fill);
}

/* Une seule photo au catalogue : une vignette unique sous l image ne dit rien,
   elle occupe juste de la place. */
.quickview .product__thumbnails:has(li:only-child) {
  display: none;
}

/* --- Colonne texte ------------------------------------------------------- */

.quickview .product__right {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.quickview .product__name {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0;
}

.quickview .product__manufacturer a {
  color: var(--rs2-subtle);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.quickview .product__price {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.quickview .product__tax-label,
.quickview .tax-shipping-delivery-label {
  color: var(--rs2-subtle);
  font-size: .78rem;
}

/* Filets de separation, comme sur la maquette. */
.quickview .product__prices,
.quickview .product__description-short {
  border-bottom: 1px solid var(--rs2-line);
  padding-bottom: .9rem;
}

.quickview .product__description-short {
  color: var(--rs2-muted);
  line-height: 1.6;
}

.quickview .product-variant__label {
  color: var(--rs2-text);
  font-weight: 700;
}

/* Pastilles de couleur : rondes et plus grandes, l active cerclee. */
.quickview .product-variant__colors {
  display: flex;
  gap: .7rem;
}

.quickview .color,
.quickview .product-variant__color {
  border: 2px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  height: 34px;
  width: 34px;
}

.quickview .input-color:checked + .color,
.quickview .input-color:checked + span .color,
.quickview .color.selected {
  border-color: var(--rs2-red-fill);
  box-shadow: 0 0 0 3px rgb(255 29 29 / 20%);
}

/* Disponibilite : pastille bordee avec un point, au lieu d une ligne de texte.
   .text-success de Bootstrap porte un !important, d ou celui-ci. */
/* Le libelle est dans un span interieur qui porte lui aussi .text-success :
   la regle doit couvrir les descendants, sinon le vert de Bootstrap
   (#188251, 3,61:1 ici) reste sur le texte. */
.quickview .product__availability-status,
.quickview .product__availability-status * {
  color: var(--rs2-success-text) !important;
}

.quickview .product__availability-status {
  align-items: center;
  border: 1px solid rgb(24 112 69 / 55%);
  border-radius: 999px;
  color: var(--rs2-success-text) !important;
  display: flex;
  font-size: .86rem;
  gap: .55rem;
  padding: .6rem 1rem;
}

.quickview .product__availability-status::before {
  background: var(--rs2-success-text);
  border-radius: 50%;
  content: "";
  flex: 0 0 .5rem;
  height: .5rem;
}

.quickview .product__availability-icon {
  display: none;
}

/* Quantite et ajout au panier sur une seule rangee. */
.quickview .product__actions-qty-add {
  align-items: stretch;
  display: flex;
  gap: .7rem;
}

.quickview .product-quantity .input-group,
.quickview .product__actions-qty-add .input-group {
  border: 1px solid var(--rs2-field-border);
  border-radius: 999px;
  flex: 0 0 auto;
  overflow: hidden;
}

.quickview .product-quantity .btn.decrement,
.quickview .product-quantity .btn.increment {
  background: transparent;
  border: 0;
  color: var(--rs2-text);
  min-width: 2.8rem;
}

.quickview .product-quantity .btn.decrement:hover,
.quickview .product-quantity .btn.increment:hover {
  background: rgb(255 255 255 / 8%);
}

.quickview .js-quantity-wanted,
.quickview input[name="qty"] {
  background: transparent;
  border: 0;
  color: var(--rs2-text);
  font-weight: 700;
  text-align: center;
  width: 3rem;
}

.quickview .product__add-to-cart-button {
  background: var(--rs2-red-fill);
  border: 0;
  border-radius: 999px;
  color: #fff;
  flex: 1;
  font-weight: 700;
  min-height: 3.2rem;
}

.quickview .product__add-to-cart-button:hover:not(:disabled) {
  background: var(--rs2-red-fill-hover);
}

/* --- Pied de la modale ---------------------------------------------------- */

.quickview .quickview__footer,
.quickview .modal-footer {
  border-top: 1px solid var(--rs2-line);
}

.quickview .ps-sharebuttons__list {
  border-left: 1px solid var(--rs2-line);
  margin-left: .9rem;
  padding-left: 1.1rem;
}

.quickview .js-thumb:focus-visible,
.quickview .product__thumbnail:focus-visible {
  outline: 2px solid var(--rs2-red-fill);
  outline-offset: 2px;
}


/* Le theme parent pose la classe utilitaire .outline sur TOUTES les vignettes,
   pas seulement l active : elle y dessine un contour permanent. Il etait bleu,
   le passage au rouge de marque l a rendu voyant — sept vignettes cerclees de
   rouge, sans distinguer celle en cours. On le neutralise ici, l etat actif
   etant deja porte par la bordure du bouton. */
.quickview .product__thumbnail-image,
body#product .product__thumbnail-image {
  outline-color: transparent;
}