/* Promotos fixes on top of the Ecomus theme (styles.css). */

/* Product photo keeps its own proportions: Drift sizes the zoom from the photo box,
   a cropped/stretched box gave a deformed magnifier. */
.tf-product-media-main .item img {
  height: auto;
  object-fit: contain;
}

/* Pagination sits inside the product grid: span every column so it is centred under the products. */
.tf-grid-layout > .tf-pagination-wrap {
  grid-column: 1 / -1;
  width: 100%;
}
.tf-pagination-wrap .tf-pagination-list {
  justify-content: center;
}

/* Product description (admin rich text or laid-out plain text) */
.product-description {
  font-size: 16px;
  line-height: 1.7;
}
.product-description h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 18px 0 8px;
}
.product-description p {
  margin-bottom: 12px;
}
.product-description ul,
.product-description ol {
  padding-left: 22px;
  margin-bottom: 14px;
}
.product-description ul li {
  list-style: disc;
  margin-bottom: 6px;
}
.product-description ol li {
  list-style: decimal;
  margin-bottom: 6px;
}

/* Store locator: accordion list, map stays in view while the list scrolls */
.store-locator .store-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.store-locator .store-item {
  border: 1px solid #ebebeb;
  border-radius: 10px;
  background: #fff;
}
.store-locator .store-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-weight: 600;
}
.store-locator .store-item summary::-webkit-details-marker {
  display: none;
}
.store-locator .store-item summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
}
.store-locator .store-item[open] summary::after {
  content: "\2212";
}
.store-locator .store-item[open] {
  border-color: #000;
}
.store-locator .store-city {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: #777;
}
.store-locator .store-body {
  padding: 0 18px 16px;
  font-size: 14px;
}
.store-locator .store-map {
  position: sticky;
  top: 100px;
  height: 520px;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
}
.store-locator .store-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 991px) {
  .store-locator .store-map {
    position: static;
    height: 360px;
  }
}
@media (min-width: 992px) {
  /* 45+ stores: the list scrolls inside its own box, next to the map */
  .store-locator .store-accordion {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
  }
}

/* Phones: big rounded grey boxes (e.g. "Meilleurs vendus") clipped the cards' corners and bottom */
@media (max-width: 767px) {
  /* "Meilleurs vendus" (client #31): no grey rounded frame on phones, the block lines up with the page */
  .bg_grey-5.radius-60 {
    background: none;
    border-radius: 0 !important; /* the theme's .radius-60 is !important too */
    padding-top: 0;
    padding-bottom: 0;
  }
  /* the price line kept 52px for two prices (promo), leaving a gap above the colours */
  .bg_grey-5.radius-60 .card-product-info .price {
    min-height: 0 !important; /* beats the page's inline .tf-sw-product-sell ... { min-height: 52px !important } */
  }
  /* Product page banner (LX05...): the theme makes it 80px wider than the screen and crops it to 400px high,
     so the scooter on the right of the photo was cut off. Show the whole photo instead. */
  .tf-slideshow.slider-home-2 .wrap-slider {
    height: auto !important; /* beats the layout's inline .tf-slideshow .wrap-slider { height: 400px !important } */
    margin-right: 0;
  }
  .slider-home-2 .wrap-slider > img {
    height: auto;
  }
}

/* Phones: category tiles side by side (/2roue): labels were cut ("Puissance écolo...") */
@media (max-width: 575px) {
  .masonry-layout-v7 .collection-content .collection-title {
    font-size: 13px !important;
    padding: 8px 12px;
    white-space: normal;
    text-align: center;
    max-width: calc(100% - 16px);
    line-height: 1.25;
  }
  .masonry-layout-v7 .collection-content .collection-title .icon {
    display: none;
  }
}

/* Phones: product tabs (Description / Informations / Livraison) went 10px past the screen */
@media (max-width: 575px) {
  .widget-tabs .widget-menu-tab {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* Réassurance icons on product pages: the white icon background had no size and showed as a
   flat white strip with a small "cube" icon (client #10). Make it a round badge. */
.flat-iconbox .tf-icon-box .icon.bg_white {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.flat-iconbox .tf-icon-box .icon.bg_white i {
  color: var(--main);
}

/* Top bar "L'avenir du deux-roues": its markup uses Cartzilla's .min-w-0, which this theme lacks,
   so the text could not shrink and pushed the close button 6px off the screen on phones */
.alert-dismissible .min-w-0 {
  min-width: 0;
}

/* Phones, product pages: the two portrait banners under the main banner were shown one at a time in a
   390x300 box (rider's head and wheel cut, the second banner hidden). Now side by side, whole photos. */
@media (max-width: 767px) {
  .tf-sw-recent[data-mobile="2"] .collection-item-v4,
  .tf-sw-recent[data-mobile="2"] .collection-inner,
  .tf-sw-recent[data-mobile="2"] .collection-image,
  .tf-sw-recent[data-mobile="2"] .collection-image img {
    height: auto !important;
  }
  /* dark fade behind the text so it stays readable on bright photos */
  .tf-sw-recent[data-mobile="2"] .collection-inner {
    position: relative;
  }
  .tf-sw-recent[data-mobile="2"] .collection-inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
    pointer-events: none;
  }
  .tf-sw-recent[data-mobile="2"] .collection-item-v4.style-2 .collection-content {
    z-index: 1;
    left: 6%;
    right: 6%;
    top: auto;
    bottom: 6%;
    transform: none;
    text-align: center;
  }
  .tf-sw-recent[data-mobile="2"] .collection-item-v4.style-2 .collection-content .heading {
    font-size: 17px !important;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  }
  .tf-sw-recent[data-mobile="2"] .collection-content .tf-btn {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.3;
    background: rgba(0, 0, 0, .25);
  }
}

/* Product reviews (client #13): stars under the product name and the "Avis clients" section */
.review-stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a623;
}
.product-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: #4a4a4a;
}
.product-reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.product-reviews-title {
  font-size: 28px;
  margin: 0;
}
.product-reviews-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-reviews-summary .average {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}
.product-review {
  border-bottom: 1px solid #ebebeb;
  padding: 18px 0;
}
.product-review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-review .date {
  color: #868686;
  font-size: 13px;
}
.product-review .comment {
  margin: 10px 0 8px;
  white-space: pre-line;
}
.product-review .author {
  font-weight: 600;
}
.product-review .verified {
  color: #3a9b4b;
  font-weight: 400;
  font-size: 13px;
  margin-left: 6px;
}
.product-review-form {
  background: #f6f6f6;
  border-radius: 12px;
  padding: 24px;
}
.product-review-form h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.product-review-form .form-label {
  display: block; /* the theme makes labels inline */
  margin-bottom: 6px;
}
/* clickable stars: radios are in reverse order, so "hovered/checked star and the ones before it" is ~ */
.star-input {
  display: flex;
  width: max-content;
  flex-direction: row-reverse;
  gap: 4px;
  font-size: 26px;
}
.star-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.star-input label {
  cursor: pointer;
  color: #d6d6d6;
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
  color: #f5a623;
}
.star-input input:focus-visible + label {
  outline: 2px solid #f5a623;
  outline-offset: 2px;
}
/* stars on product cards: an inline row, so it follows the card's own text alignment */
.card-rating {
  display: block;
  margin: 4px 0 2px;
  line-height: 1;
  font-size: 12px;
  color: #868686;
}
.card-rating .review-stars {
  font-size: 12px;
  vertical-align: middle;
}
.card-rating span {
  vertical-align: middle;
}

/* product page buttons (client N° 2): "Ajout rapide", "Acheter maintenant" and "Conseil personnalisé"
   had 49 / 46 / 48 px heights and two text sizes; one height and size for all, the favoris/compare squares match */
.tf-product-info-buy-button form .tf-btn {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 15px;
}
.tf-product-info-buy-button form .btn-icon-action {
  width: 48px;
  height: 48px;
}
/* phones: "Ajout rapide - 250,00 DT" shrinks a little so the two icons stay on its line */
@media (max-width: 575px) {
  .tf-product-info-buy-button form .tf-btn.btn-add-to-cart {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
    font-size: 14px !important; /* beats the theme's .fs-16 !important */
  }
}

/* Pack Zitouna + credit simulator under the product buttons (client N° 5, model of 27/10):
   title above, logo in a plain frame, short text, terms link */
.pz-offers { margin-top: 24px; }
.pz-offer { display: flex; flex-direction: column; height: 100%; }
.pz-offer-title { margin-bottom: 8px; font-size: 15px; color: #111; }
.pz-offer-logo {
  display: flex; align-items: center; justify-content: center;
  height: 88px; padding: 10px; border: 1px solid #d9d9d9; background: #fff;
  transition: border-color .2s;
}
.pz-offer-logo:hover { border-color: #111; }
.pz-offer-logo img { max-width: 75%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.pz-offer-text { margin: 12px 0 14px; font-size: 12px; line-height: 1.4; color: #333; }
.pz-offer-link { margin-top: auto; font-size: 13px; font-weight: 600; line-height: 1.4; color: #111; text-decoration: underline; }
.pz-offer-link:hover { color: #e31e24; }
@media (max-width: 575px) {
  .pz-offer-logo { height: 70px; }
  .pz-offer-link { font-size: 12px; }
}