@media (min-width: 1024px) {
  .pdp-layout .rightSide {
    min-width: 500px;
  }
}

/* EDS masque la section pendant le chargement de ses blocs et de la première
   image. La navigation, ajoutée en dehors, ne doit pas apparaître au-dessus
   du produit puis être repoussée lorsque la section devient visible. */
main:has(> .pdp-layout-container[data-section-status]:not([data-section-status='loaded'])) > .pdp-sticky-nav-container {
  visibility: hidden;
}

.pdp-ctas .d-show--plp {
  display: initial !important;
}

/* =============================================================================
 * Skeleton de chargement PDP
 *
 * Affiché tant que le produit n'est pas chargé.
 * - Injecté inline dans pdp-layout.js dès le decorate (visible avant que le
 *   bundle WC/Preact ne soit téléchargé).
 * - Re-rendu côté Preact via dangerouslySetInnerHTML quand le store est encore
 *   vide à l'hydration (évite le flash blanc).
 *
 * Voir features/pdp/ui/components/skeletons/pdp-skeletons.js
 * ============================================================================= */
.pdp-skeleton {
  display: block;
}

.pdp-skeleton__line,
.pdp-skeleton__block {
  background: linear-gradient(90deg, #eef0f3 0%, #f7f8fa 50%, #eef0f3 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: mkp-skeleton-shimmer 1.4s ease-in-out infinite;
}

.pdp-skeleton__line {
  height: 12px;
  margin: 8px 0;
}

/* Variante inline (utilisée comme placeholder dans une ligne de texte) :
 * on retire la marge verticale et on aligne sur le milieu de la x-height
 * pour ne pas étendre la inline-box du wrapper <p>. */
.pdp-skeleton__line.d-inline-block {
  margin: 0;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  .pdp-skeleton__line,
  .pdp-skeleton__block {
    animation: none;
    opacity: 0.6;
  }
}

/* --- Hero --- */
.pdp-skeleton--hero .pdp-skeleton__flag {
  width: 30%;
  height: 18px;
  margin-bottom: 12px;
}

.pdp-skeleton--hero .pdp-skeleton__title {
  width: 80%;
  height: 32px;
  margin: 12px 0;
}

.pdp-skeleton--hero .pdp-skeleton__subtitle {
  width: 60%;
  height: 16px;
  margin: 8px 0 16px;
}

.pdp-skeleton--hero .pdp-skeleton__anchors {
  width: 50%;
  height: 16px;
  margin: 8px 0 24px;
}

.pdp-skeleton--hero .pdp-skeleton__gallery {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  margin: 16px auto 0;
}

/* --- Formats --- */
.pdp-skeleton--formats .pdp-skeleton__formats-label {
  width: 25%;
  height: 14px;
  margin: 0 0 16px;
}

.pdp-skeleton--formats .pdp-skeleton__chips {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.pdp-skeleton--formats .pdp-skeleton__chip {
  flex: 1 1 0;
  height: 56px;
  border-radius: 8px;
}

/* --- CTAs --- */
.pdp-skeleton--ctas {
  padding: 16px 0;
}

.pdp-skeleton--ctas .pdp-skeleton__vendor {
  width: 70%;
  height: 14px;
  margin: 0 0 12px;
}

.pdp-skeleton--ctas .pdp-skeleton__stock {
  width: 40%;
  height: 16px;
  margin: 12px 0;
}

.pdp-skeleton--ctas .pdp-skeleton__cta {
  width: 100%;
  height: 48px;
  margin: 16px 0;
  border-radius: 8px;
}

.pdp-skeleton--ctas .pdp-skeleton__delivery {
  width: 60%;
  height: 14px;
  margin: 12px 0;
}

/* --- Footer (loyalty + license) --- */
.pdp-skeleton--footer .pdp-skeleton__loyalty {
  width: 100%;
  height: 64px;
  margin: 16px 0;
  border-radius: 4px;
}

.pdp-skeleton--footer .pdp-skeleton__license {
  width: 100%;
  height: 80px;
  margin: 16px 0;
  border-radius: 4px;
}