/* =========================================================
   SWISS RACE CUSTOMS — BOUTIQUE
   DA 2026 — EDITORIAL / PREMIUM / STRUCTURÉE
========================================================= */

.src-shop-page,
.src-shop-page * {
  box-sizing: border-box;
}

.src-shop-page {
  width: 100%;
  overflow: hidden;
  background: #f3f3f3;
  color: #111;
}

.src-shop-container {
  width: min(calc(100% - 48px), 1240px);
  margin: 0 auto;
}


/* =========================================================
   EYEBROW
========================================================= */

.src-shop-eyebrow {
  margin: 0 0 12px;

  color: #898989;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .17em;

  text-transform: uppercase;
}


/* =========================================================
   HERO
========================================================= */

.src-shop-hero {
  position: relative;

  padding:
    95px
    0
    90px;

  overflow: hidden;

  background: #e6e6e6;

  border-bottom:
    1px
    solid
    #d3d3d3;
}


/* grande ligne graphique à droite */

.src-shop-hero::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 31%;
  height: 100%;

  background: #dddddd;
}


/* petit bloc décoratif */

.src-shop-hero::after {
  content: "";

  position: absolute;

  right: 7%;
  bottom: -140px;

  width: 330px;
  height: 330px;

  border:
    1px
    solid
    rgba(0,0,0,.06);

  border-radius: 50%;

  pointer-events: none;
}


.src-shop-hero__grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    330px;

  align-items: end;

  gap: 85px;
}


.src-shop-hero__content {
  max-width: 790px;
}


.src-shop-hero__title {
  margin: 0;

  color: #111;

  font-size:
    clamp(
      54px,
      5.5vw,
      78px
    );

  font-weight: 750;

  line-height: .98;

  letter-spacing: -3.5px;
}


.src-shop-hero__text {
  max-width: 620px;

  margin:
    28px
    0
    0;

  color: #585858;

  font-size: 15px;

  line-height: 1.75;
}


/* =========================================================
   HERO INFO
========================================================= */

.src-shop-hero__info {
  padding:
    6px
    24px;

  background: #fff;

  border:
    1px
    solid
    #cacaca;

  box-shadow:
    0
    16px
    45px
    rgba(0,0,0,.045);
}


.src-shop-hero__info-item {
  display: grid;

  min-height: 66px;

  grid-template-columns:
    34px
    1fr;

  align-items: center;

  border-bottom:
    1px
    solid
    #e3e3e3;

  color: #111;

  font-size: 12px;
  font-weight: 600;
}


.src-shop-hero__info-item:last-child {
  border-bottom: 0;
}


.src-shop-hero__info-number {
  color: #a18562;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .08em;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.src-shop-section-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 30px;
}


.src-shop-section-heading h2 {
  max-width: 820px;

  margin: 0;

  color: #111;

  font-size:
    clamp(
      32px,
      3.4vw,
      48px
    );

  font-weight: 720;

  line-height: 1.03;

  letter-spacing: -2px;
}


/* =========================================================
   VEHICLE SELECTOR SECTION
========================================================= */

.src-shop-vehicle {
  padding:
    82px
    0
    34px;

  background: #f3f3f3;
}


/* =========================================================
   SELECTEUR HERO REUTILISÉ
========================================================= */

.src-shop-vehicle__selector .vehicle-hero {
  min-height: 0 !important;

  padding: 0 !important;

  background: transparent !important;

  overflow: visible !important;
}


.src-shop-vehicle__selector .vehicle-overlay {
  display: none !important;
}


.src-shop-vehicle__selector .vehicle-container {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


.src-shop-vehicle__selector .vehicle-left {
  display: none !important;
}


/* =========================================================
   GRANDE CARTE SELECTEUR
========================================================= */

.src-shop-vehicle__selector .vehicle-box {
  position: relative;

  display: grid !important;

  width: 100% !important;
  max-width: none !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    )
    minmax(
      190px,
      .72fr
    );

  gap: 13px;

  margin: 0 !important;

  padding:
    24px !important;

  border:
    1px
    solid
    #d0d0d0 !important;

  border-radius:
    8px !important;

  background:
    #fff !important;

  box-shadow:
    0
    16px
    45px
    rgba(0,0,0,.035) !important;
}


.src-shop-vehicle__selector
.vehicle-box > h2,

.src-shop-vehicle__selector
.vehicle-box-description,

.src-shop-vehicle__selector
.vehicle-box-footer {
  display: none !important;
}


.src-shop-vehicle__selector .vehicle-field {
  margin: 0 !important;
}


.src-shop-vehicle__selector
.vehicle-field label {
  display: block;

  margin:
    0
    0
    7px;

  color: #555;

  font-size: 10px;
  font-weight: 650;
}


.src-shop-vehicle__selector
.vehicle-field select {
  width: 100% !important;
  height: 48px !important;

  padding:
    0
    14px !important;

  border:
    1px
    solid
    #d2d2d2 !important;

  border-radius:
    4px !important;

  outline:
    none !important;

  background:
    #f7f7f7 !important;

  color:
    #111 !important;

  font-size:
    12px !important;

  transition:
    border-color .16s ease,
    background .16s ease;
}


.src-shop-vehicle__selector
.vehicle-field select:focus {
  border-color:
    #111 !important;

  background:
    #fff !important;
}


.src-shop-vehicle__selector
.vehicle-search-button {
  align-self: end;

  width: 100% !important;
  height: 48px !important;

  margin: 0 !important;

  padding:
    0
    16px !important;

  border:
    1px
    solid
    #111 !important;

  border-radius:
    4px !important;

  background:
    #111 !important;

  color:
    #fff !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  transition:
    background .16s ease,
    border-color .16s ease;
}


.src-shop-vehicle__selector
.vehicle-search-button:not(:disabled):hover {
  background:
    #2a2a2a !important;

  border-color:
    #2a2a2a !important;
}


.src-shop-vehicle__selector
.vehicle-search-button:disabled {
  opacity: .35;

  cursor: not-allowed;
}


/* =========================================================
   USP
========================================================= */

.src-shop-usps {
  padding:
    0
    0
    80px;

  background: #f3f3f3;
}


.src-shop-usps__grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  margin-top: 18px;
}


.src-shop-usp {
  display: flex;

  min-height: 100px;

  align-items: center;

  gap: 13px;

  padding:
    22px
    24px;

  border-top:
    1px
    solid
    #d6d6d6;

  border-bottom:
    1px
    solid
    #d6d6d6;

  border-right:
    1px
    solid
    #d6d6d6;

  background: transparent;
}


.src-shop-usp:first-child {
  border-left:
    1px
    solid
    #d6d6d6;
}


.src-shop-usp__icon {
  display: grid;

  width: 24px;
  height: 24px;

  flex:
    0
    0
    24px;

  place-items: center;

  border-radius: 50%;

  background: #111;

  color: #fff;

  font-size: 9px;
}


.src-shop-usp strong {
  display: block;

  margin-bottom: 4px;

  color: #111;

  font-size: 12px;
  font-weight: 700;
}


.src-shop-usp div > span {
  display: block;

  color: #777;

  font-size: 10px;

  line-height: 1.5;
}


/* =========================================================
   PRODUITS POPULAIRES
========================================================= */

.src-shop-popular {
  position: relative;

  padding:
    88px
    0
    105px;

  background: #fff;

  border-top:
    1px
    solid
    #dedede;
}


/* petite rupture visuelle */

.src-shop-popular::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 6px;

  background: #111;
}


.src-shop-popular__grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 16px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.src-shop-product-card {
  min-width: 0;

  padding-bottom: 2px;
}


.src-shop-product-card__image {
  position: relative;

  display: flex;

  width: 100%;

  aspect-ratio:
    1 / 1;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #f6f6f6;

  border:
    1px
    solid
    #e0e0e0;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.src-shop-product-card:hover
.src-shop-product-card__image {
  border-color: #bdbdbd;

  transform:
    translateY(-3px);

  box-shadow:
    0
    14px
    35px
    rgba(0,0,0,.055);
}


.src-shop-product-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition:
    transform .25s ease;
}


.src-shop-product-card:hover
.src-shop-product-card__image img {
  transform:
    scale(1.025);
}


.src-shop-product-card__content {
  padding:
    15px
    2px
    0;
}


.src-shop-product-card__content h3 {
  margin:
    0
    0
    8px;

  font-size: 13px;
  font-weight: 620;

  line-height: 1.4;
}


.src-shop-product-card__content h3 a {
  color: #111;

  text-decoration: none;
}


.src-shop-product-card__price {
  color: #111;

  font-size: 13px;
  font-weight: 700;
}


/* =========================================================
   TABLETTE
========================================================= */

@media screen and (max-width: 1050px) {

  .src-shop-container {
    width:
      min(
        calc(100% - 40px),
        1100px
      );
  }


  .src-shop-hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      290px;

    gap: 45px;
  }


  .src-shop-vehicle__selector
  .vehicle-box {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }


  .src-shop-popular__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      32px
      14px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 749px) {

  .src-shop-container {
    width:
      calc(
        100% - 30px
      );
  }


  /* =====================================================
     HERO
  ====================================================== */

  .src-shop-hero {
    padding:
      52px
      0
      48px;
  }


  .src-shop-hero::before,
  .src-shop-hero::after {
    display: none;
  }


  .src-shop-hero__grid {
    display: block;
  }


  .src-shop-hero__title {
    font-size: 40px;

    line-height: 1;

    letter-spacing: -2px;
  }


  .src-shop-hero__text {
    margin-top: 20px;

    font-size: 14px;
  }


  .src-shop-hero__info {
    display: none;
  }


  /* =====================================================
     VEHICLE
  ====================================================== */

  .src-shop-vehicle {
    padding:
      52px
      0
      25px;
  }


  .src-shop-section-heading {
    margin-bottom: 24px;
  }


  .src-shop-section-heading h2 {
    font-size: 31px;

    letter-spacing: -1.4px;
  }


  .src-shop-vehicle__selector
  .vehicle-box {
    display: block !important;

    padding:
      16px !important;

    border-radius:
      6px !important;

    box-shadow:
      none !important;
  }


  .src-shop-vehicle__selector
  .vehicle-field {
    margin-bottom:
      12px !important;
  }


  .src-shop-vehicle__selector
  .vehicle-field select {
    height:
      47px !important;
  }


  .src-shop-vehicle__selector
  .vehicle-search-button {
    height:
      48px !important;

    margin-top:
      4px !important;
  }


  /* =====================================================
     USP CAROUSEL
  ====================================================== */

  .src-shop-usps {
    padding:
      0
      0
      55px;
  }


  .src-shop-usps__grid {
    display: flex;

    width:
      calc(
        100% + 15px
      );

    margin-right: -15px;

    padding-right: 15px;

    gap: 9px;

    overflow-x: auto;

    scroll-snap-type:
      x mandatory;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }


  .src-shop-usps__grid::-webkit-scrollbar {
    display: none;
  }


  .src-shop-usp,
  .src-shop-usp:first-child {
    flex:
      0
      0
      82%;

    min-width: 82%;
    min-height: 100px;

    padding:
      20px;

    border:
      1px
      solid
      #d6d6d6;

    background: #fff;

    scroll-snap-align: start;
  }


  /* =====================================================
     PRODUITS
  ====================================================== */

  .src-shop-popular {
    padding:
      60px
      0
      70px;
  }


  .src-shop-popular::before {
    height: 4px;
  }


  .src-shop-popular__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      26px
      9px;
  }


  .src-shop-product-card__content {
    padding-top: 10px;
  }


  .src-shop-product-card__content h3 {
    font-size: 11px;

    line-height: 1.35;
  }


  .src-shop-product-card__price {
    font-size: 11px;
  }

}


/* =========================================================
   PETIT MOBILE
========================================================= */

@media screen and (max-width: 390px) {

  .src-shop-hero__title {
    font-size: 36px;
  }


  .src-shop-usp,
  .src-shop-usp:first-child {
    flex-basis: 87%;

    min-width: 87%;
  }

}














/* SUPPRIMER LE TRAIT NOIR AU-DESSUS DES PRODUITS */

.src-shop-popular::before {
  display: none !important;
  content: none !important;
}

.src-shop-popular {
  border-top: none !important;
}