/* ==========================================================================
   Shopel — pont vers le DOM réel d'Epsilon
   --------------------------------------------------------------------------
   La section 5 de css/shopel.css cible .item-layout, .item-photo, .item-thumbs,
   .item-description, .item-specs, .item-actions… Ces classes n'existent pas
   dans Epsilon : item.php n'est pas découpé en partiels et utilise ses propres
   identifiants. Le handoff prévoyait ce cas — « If the partial names differ,
   keep the block order below and adjust paths ».

   Trois classes de conteneur ont été ajoutées au balisage (item-layout,
   item-gallery, item-sidebar), purement additives. Le reste est traduit ici
   plutôt que dans shopel.css : cette feuille est un livrable de design qui sera
   réédité, et une correction de compatibilité noyée dedans disparaîtrait à la
   prochaine version.

   Correspondances :
     .item-photo      →  #item-image .swiper-wrapper li
     .item-thumbs     →  #item-image .swiper-thumbs ul
     .item-thumbs a   →  .swiper-thumbs li          (pas de <a> dans Epsilon)
     .is-active       →  .swiper-thumbs li.active
     .item-description→  #item-main .row.description
     .item-specs      →  #item-main .custom-fields
     .item-actions    →  #item-side  (les boutons y sont enfants directs)
     .item-qr         →  .qr-code
     .listing-card    →  .simple-prod
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Colonnes et rail collant
   -------------------------------------------------------------------------- */

/* Epsilon dispose les deux colonnes en flex, pas en grille. On garde le flex —
   le passer en grid casserait la même chose que sur la page d'accueil — et on
   se contente d'aligner les dimensions sur la spécification : 340px de rail,
   40px de gouttière. */
body#item .data-box.item-layout { gap: 40px; }
body#item .item-layout > #item-main { width: calc(100% - 380px); }
body#item .item-layout > #item-side { width: 340px; }

/* Le rail se cale sous le header, dont la hauteur est un jeton. */
body#item #item-side.item-sidebar {
  top: calc(var(--eps-header-height, 72px) + 24px);
  gap: 20px;
}

/* Sous 1024px, Epsilon repasse déjà en colonne unique (responsive.css:161).
   On neutralise seulement les largeurs fixes, qui déborderaient. */
@media (max-width: 1023px) {
  body#item .item-layout > #item-main,
  body#item .item-layout > #item-side { width: 100%; }
  body#item #item-side.item-sidebar { position: static; }
}


/* --------------------------------------------------------------------------
   2. Galerie
   -------------------------------------------------------------------------- */

/* Cadre 16:9. Epsilon simule le ratio par un padding-top de 75 % et prévoit
   déjà une variante .ratio16to9 : on impose simplement cette valeur. */
.item-gallery .swiper-wrapper li { padding-top: 56.25%; }

/* La photo remplit le cadre sans se déformer. Epsilon appliquait
   object-fit:contain une fois l'image chargée, ce qui laissait des bandes, et
   un fond noir #171717 derrière. */
.item-gallery li a img,
.item-gallery li a img.lazy.loaded {
  object-fit: cover;
  object-position: center;
  background: var(--sh-n-100, #eff1f4);
}

/* Miniatures : six colonnes carrées, quatre sur mobile. Epsilon les rend en
   <li> dans une <ul> horizontale ; la grille remplace le flux. */
.item-gallery .swiper-thumbs ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .item-gallery .swiper-thumbs ul { grid-template-columns: repeat(4, 1fr); }
}

.item-gallery .swiper-thumbs li {
  aspect-ratio: 1 / 1;
  width: auto;
  height: auto;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
}

.item-gallery .swiper-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: 0 none;
  box-shadow: none;
}

/* La miniature active porte le filet primaire, pas une simple opacité. */
.item-gallery .swiper-thumbs li.active { border-color: var(--eps-primary); }
.item-gallery .swiper-thumbs li:hover  { border-color: var(--sh-n-300, #cbd1d9); }
.item-gallery .swiper-thumbs li.active img,
.item-gallery .swiper-thumbs li:hover img { box-shadow: none; }


/* --------------------------------------------------------------------------
   3. Description, caractéristiques, QR
   -------------------------------------------------------------------------- */

/* Longueur de ligne lisible. 68 caractères est la limite haute au-delà de
   laquelle l'œil perd le début de la ligne suivante. */
body#item #item-main .row.description .desc-text .text,
body#item #item-main .row.description .desc-text-raw { max-width: 68ch; }

/* QR et localisation sur une même ligne, en pied de description.
   Le thème plaçait le QR en flottant DANS le texte — trois fois, une par
   variante de description — et la localisation en encart collant à droite. Les
   deux se chevauchaient et coupaient la colonne de lecture.

   Le balisage ne contient plus qu'un seul QR, déplacé juste avant la
   localisation ; il reste à les faire tenir sur la même rangée. .desc-parts est
   déjà un conteneur flex : il suffit de l'autoriser à passer à la ligne et de
   donner toute la largeur au texte, pour que QR et localisation se retrouvent
   ensemble sur la rangée suivante. */
body#item #item-main .description .desc-parts { flex-wrap: wrap; }
body#item #item-main .description .desc-text { flex: 1 1 100%; }

/* La rangée de pied, séparée du texte par un filet. */
body#item #item-main .description .qr-code,
body#item #item-main .description .location {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--eps-border);
}

body#item #item-main .description .qr-code {
  float: none;
  position: static;
  flex: 0 0 auto;
  margin-right: 24px;
  border-radius: 0;
  border-left: 0 none;
  border-right: 0 none;
  border-bottom: 0 none;
  background: transparent;
  height: auto;
  padding: 20px 0 0;
}

/* L'étiquette « Scanner QR » était positionnée sous un cadre qui n'existe
   plus : elle revient dans le flux. */
body#item #item-main .description .qr-code > strong {
  position: static;
  display: block;
  height: auto;
  padding: 6px 0 0;
  border: 0 none;
  background: none;
  color: var(--eps-text-muted);
  font-size: 12px;
}

/* La localisation cesse d'être un encart collant : elle occupe le reste de la
   rangée, à côté du QR. */
body#item #item-main .description .location {
  position: static;
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
  margin-left: 0;
  margin-bottom: 0;
  border-left: 0 none;
  padding: 20px 0 0;
}

/* Sous 640px la rangée se replie : le QR passe au-dessus de l'adresse. */
@media (max-width: 640px) {
  body#item #item-main .description .qr-code {
    margin-right: 0;
    border-bottom: 0 none;
  }
  body#item #item-main .description .location {
    flex-basis: 100%;
    margin-top: 16px;
    padding-top: 16px;
  }
}

/* Caractéristiques : deux colonnes, séparées du texte par un filet. */
body#item #item-main .custom-fields {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--eps-border);
}


/* --------------------------------------------------------------------------
   4. Famille de boutons du rail
   -------------------------------------------------------------------------- */

/* Epsilon empile des .master-button de tailles et de rayons variables. Une
   seule famille : même hauteur, même rayon, pleine largeur. */
body#item #item-side .master-button,
body#item #item-side .btn {
  width: 100%;
  min-height: var(--eps-btn-height, 40px);
  border-radius: var(--eps-btn-radius, 5px);
  font-size: var(--eps-btn-font-size, 15px);
  font-weight: var(--eps-btn-font-weight, 600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
}

body#item #item-side .master-button i { font-size: 20px; }
body#item #item-side .master-button:active { transform: scale(.99); }

/* Le bouton de contact est le seul primaire du rail. */
body#item #item-side .master-button.contact {
  background: var(--eps-btn-contact-bg, var(--eps-primary));
  color: var(--eps-btn-contact-text, #fff);
  border: 1px solid transparent;
}

body#item #item-side .master-button.contact:hover {
  background: var(--eps-btn-contact-bg-hover, var(--eps-primary-dark));
}

/* Téléphone et courriel sont secondaires : fond blanc, filet marqué. */
body#item #item-side .master-button.phone,
body#item #item-side .master-button.email {
  background: var(--eps-surface, #fff);
  border: 1px solid var(--sh-n-300, #cbd1d9);
  color: var(--eps-text);
}

body#item #item-side .master-button.phone:hover,
body#item #item-side .master-button.email:hover {
  background: var(--eps-surface-alt, #f7f8fa);
  border-color: var(--sh-n-300, #cbd1d9);
}

/* Signaler : discret, aligné à gauche, en bas du rail. */
body#item #item-side #report a,
body#item #item-side .report a {
  color: var(--eps-text-muted);
  font-size: 14px;
}

/* Prix du rail en chiffres tabulaires : deux prix superposés s'alignent. */
body#item #item-side .price,
body#item #item-main .price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}


/* --------------------------------------------------------------------------
   5. Carte de localisation
   -------------------------------------------------------------------------- */

body#item #item-main .row.description .location { margin-top: 32px; }

body#item #item-main .location .directions {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--eps-link);
}

body#item #location-hook iframe,
body#item #item-main .location iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: 1px solid var(--eps-border);
  border-radius: 8px;
}


/* --------------------------------------------------------------------------
   6. Blocs injectés par les plugins
   --------------------------------------------------------------------------
   Ces blocs n'appartiennent pas au thème : ils arrivent par le hook
   « item_detail » et atterrissent dans #item-hook. Sélecteurs relevés dans le
   code des plugins, pas devinés :

     Osclass Pay 4.0.4    #osp-promos, .osp-product, .osp-product-to-cart,
                          .osp-product-quantity   (functions.php:373, 1831-1860)
     Online Chat 2.3.4    .oc-chat-button          (functions.php:104)
     Business Profile 1.9 #bpr-notice, .bpr-open-notice (functions.php:247)

   RIEN N'EST MASQUÉ ICI. Le handoff dit « delete the blue Add to cart », mais
   son propre tableau le conserve en position 2, variante secondaire : c'est un
   restylage, pas une suppression. Masquer .osp-product-to-cart retirerait le
   chemin d'achat d'Osclass Pay — une décision commerciale, pas une décision de
   style. Ces règles unifient l'apparence et laissent chaque fonction en place.
   -------------------------------------------------------------------------- */

/* --- Barre « Promote your item » (propriétaire seulement) ---------------- */

body#item #osp-promos {
  margin: 0 0 20px;
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius, 8px);
  background: var(--eps-surface);
  overflow: hidden;
}

body#item #osp-promos .osp-promo-head {
  background: var(--eps-surface-alt);
  border-bottom: 1px solid var(--eps-border);
}

body#item #osp-promos .osp-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  font-family: var(--eps-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--eps-text);
}

/* « Owner » devient un badge étiqueté, pas un bandeau vert. */
body#item #osp-promos .osp-visbl-label {
  padding: 3px 8px;
  border: 1px solid var(--sh-promoted-border);
  border-radius: 999px;
  background: var(--sh-promoted-bg);
  color: var(--sh-promoted-fg);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* --- Panier et stock : une seule rangée ---------------------------------- */

body#item .osp-product {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}

/* Bouton secondaire de la famille Shopel : blanc, filet marqué. Le bleu du
   plugin ne correspond à aucune couleur de la palette. */
body#item .osp-product-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--eps-btn-height, 40px);
  padding: 0 var(--eps-btn-padding-x, 16px);
  border: 1px solid var(--sh-n-300, #cbd1d9);
  border-radius: var(--eps-btn-radius, 5px);
  background: var(--eps-surface, #fff);
  color: var(--eps-text);
  font-size: var(--eps-btn-font-size, 15px);
  font-weight: var(--eps-btn-font-weight, 600);
  box-shadow: none;
}

body#item .osp-product-to-cart:hover {
  background: var(--eps-surface-alt);
  border-color: var(--sh-n-300, #cbd1d9);
  color: var(--eps-text);
}

body#item .osp-product-to-cart svg { width: 20px; height: 20px; }

/* L'état indisponible s'assombrit au lieu de s'effacer : une opacité ne dit
   pas si le bouton est désactivé ou simplement décoratif. */
body#item .osp-product-to-cart.osp-disabled {
  opacity: 1;
  background: var(--sh-n-100, #eff1f4);
  border-color: transparent;
  color: #9aa3af;
}

/* Le stock est une information, pas un bouton : badge neutre à côté. */
body#item .osp-product-quantity {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sh-n-100, #eff1f4);
  color: #4b535e;
  font-size: 13px;
}

body#item .osp-product-quantity strong { font-variant-numeric: tabular-nums; font-weight: 700; }
body#item .osp-product-quantity .osp-sold-out { color: var(--eps-danger); }


/* --- Bouton de discussion ------------------------------------------------ */

/* Le plugin rend un bloc orange sur deux lignes, hors de la famille de boutons.
   Il devient le bouton primaire, sur une seule ligne. */
body#item .oc-chat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--eps-btn-height, 40px);
  padding: 0 var(--eps-btn-padding-x, 16px);
  border: 1px solid transparent;
  border-radius: var(--eps-btn-radius, 5px);
  background: var(--eps-btn-contact-bg, var(--eps-primary));
  color: var(--eps-btn-contact-text, #fff);
  font-size: var(--eps-btn-font-size, 15px);
  font-weight: var(--eps-btn-font-weight, 600);
  box-shadow: none;
}

body#item .oc-chat-button:hover {
  background: var(--eps-btn-contact-bg-hover, var(--eps-primary-dark));
  color: var(--eps-btn-contact-text, #fff);
}

body#item .oc-chat-button .oc-user-left,
body#item .oc-chat-button .oc-user-right {
  display: inline-flex;
  align-items: center;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
}

body#item .oc-chat-button .oc-user-left i { font-size: 20px; }
body#item .oc-chat-button .oc-user-top { font-weight: inherit; font-size: inherit; }

/* La seconde ligne (« L'utilisateur est hors ligne ») encombre un bouton :
   elle passe en info-bulle native via le title déjà posé par le plugin. */
body#item .oc-chat-button .oc-user-bot { display: none; }


/* --- Mention légale : une divulgation, pas un select --------------------- */

body#item #bpr-notice {
  margin: 20px 0 0;
  padding-top: 20px;
  border: 0 none;
  border-top: 1px solid var(--eps-border);
  background: none;
  border-radius: 0;
}

body#item #bpr-notice .bpr-notice-head { border: 0 none; background: none; padding: 0; }

/* Cible tactile de 44px, conforme au handoff. */
body#item #bpr-notice .bpr-open-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0 none;
  background: none;
  color: var(--eps-text-muted);
  font-size: 14px;
  font-weight: 500;
}

body#item #bpr-notice .bpr-open-notice:hover { color: var(--eps-text); }

body#item #bpr-notice .bpr-notice-text {
  max-width: 68ch;
  color: var(--eps-text-muted);
  font-size: 14px;
  line-height: 1.6;
}