@charset "UTF-8";
/**
 * Layout of the server-rendered product page.
 *
 * Deliberately thin: the page reuses the shop's card, badge, price and button styling by keeping
 * the same class names, so the two shops' charters apply through their own scss/<shop>/shop.css.
 * Only what the page introduces — breadcrumb, gallery, specs table — lives here.
 */
.product-page {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 60px;
}
.product-page .breadcrumb-product {
  @media (max-width: 767.98px) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.product-page .breadcrumb-product a {
  color: inherit;
  text-decoration: none;
}
.product-page .breadcrumb-product a:hover {
  text-decoration: underline;
}
.product-page .breadcrumb-product .breadcrumb-trail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.product-page .breadcrumb-product .breadcrumb-trail li + li::before {
  content: "›";
  margin: 0 0.5rem;
}
.product-page .breadcrumb-product .breadcrumb-current {
  margin: 0;
  font-weight: 600;
}
.product-page h1 {
  line-height: 1.2;
}
.product-page .product-gallery img {
  width: 100%;
  height: auto;
}
.product-page .product-gallery .product-gallery-thumbs .item {
  border: 1px solid transparent;
}
.product-page .product-gallery .product-gallery-thumbs .item.active, .product-page .product-gallery .product-gallery-thumbs .item:hover {
  border-color: rgba(0, 0, 0, 0.25);
}
.product-page .product-specs table {
  max-width: 640px;
}
.product-page .product-specs table th {
  font-weight: 600;
}
.product-page .product-description {
  max-width: 900px;
}
.product-page {
  /* The pre-order panel is opened by product-page.js, exactly as in the modal. */
}
.product-page .container-explications {
  display: none;
}
.product-page {
  /* The related products reuse the shop list markup, whose .result reserves 305 px for the
     filters sidebar. There is no sidebar here, so the grid takes the full width. */
}
.product-page .product-related .container-filters-result .result {
  width: 100%;
}

@media (max-width: 991.98px) {
  .product-page h1 {
    font-size: 1.4rem !important;
  }
  .product-page .product-gallery {
    padding: 0 !important;
  }
}

/*# sourceMappingURL=product-page.css.map */

/**
 * Below md the trail stays on one row and scrolls sideways instead of wrapping, so the whole
 * hierarchy stays reachable. public/js/breadcrumb-scroll.js puts it on its end — the current page
 * shows first, the ancestors are one swipe away — and maintains data-overflow, which fades the edge
 * where content remains. Touch scrollbars are invisible on iOS and Android anyway, so the fade is
 * the only cue there is.
 *
 * flex-wrap goes back to wrap above md: the desktop layout does not change.
 */
@media (max-width: 767.98px) {
  .product-page .breadcrumb-product .breadcrumb-trail {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-page .breadcrumb-product .breadcrumb-trail::-webkit-scrollbar {
    display: none;
  }
  .product-page .breadcrumb-product .breadcrumb-trail li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .product-page .breadcrumb-product .breadcrumb-trail[data-overflow="left"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
  }
  .product-page .breadcrumb-product .breadcrumb-trail[data-overflow="right"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
  }
  .product-page .breadcrumb-product .breadcrumb-trail[data-overflow="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  }
}