/* ---- Page produit: mise en page facon reference --------------------------
   dtf.css approche la limite d ecriture de l API: ce second fichier prend la
   suite. Balisage non modifiable, tout passe par la CSS. */

/* Titre et statut sur la meme ligne. */
.product-page h1, .product h1 { display: inline; margin-right: .6rem; }
.product-page .status, .product .status { display: inline-flex; vertical-align: middle; }

/* Variantes en rangee compacte, pas en colonne pleine largeur. */
.variants {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: .55rem !important;
}

.variant {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 104px;
  align-items: center !important;
  text-align: center;
  padding: .7rem 1.1rem !important;
}

.variant .name { font-size: .72rem; }
.variant .price { font-size: .92rem; }
.dtf-perday { display: block; margin-top: .1rem; }

/* Le libelle "Variant" en petites capitales, comme "SELECT PLAN". */
.form-label {
  font-size: .7rem !important;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7a869c !important;
}

/* Prix principal: gros, violet, l element le plus lu de la page. */
.product-price, .price-total, .total-price {
  font-size: 1.9rem !important;
  font-weight: 800;
  color: #a78bfa !important;
  font-variant-numeric: tabular-nums;
}

/* Onglets de description: filet actif plutot que pastilles violettes pleines. */
.description-tabs .btn,
.tabs .btn,
.product-tabs .btn {
  border: 1px solid rgba(125, 150, 190, .20) !important;
  border-radius: 8px !important;
  background: #121a26 !important;
  color: #8b9ab5 !important;
  font-size: .76rem !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .5rem .9rem !important;
}

.description-tabs .btn.active,
.tabs .btn.active,
.product-tabs .btn.active {
  background: #16202e !important;
  border-color: rgba(124, 92, 255, .60) !important;
  color: #fff !important;
}

/* Quantite: un rectangle unique. */
.quantity-selector, .quantity-input, .input-group {
  border: 1px solid rgba(125, 150, 190, .26) !important;
  border-radius: 8px !important;
  overflow: hidden;
  background: rgba(125, 150, 190, .06);
}

.quantity-selector .btn, .input-group .btn {
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: #c7d2e4 !important;
  width: 38px;
}

.quantity-selector .btn:hover, .input-group .btn:hover {
  background: rgba(124, 92, 255, .18) !important; color: #fff !important;
}

.quantity-selector input, .input-group input.form-control {
  border: 0 !important; background: transparent !important;
  color: #fff !important; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Deux actions: le panier reste sobre, l achat immediat porte le degrade. */
.add-to-cart, .btn-add-to-cart,
button[\@click*='addToCart'] {
  background: #16202e !important;
  border: 1px solid rgba(125, 150, 190, .30) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700;
}

.add-to-cart:hover, .btn-add-to-cart:hover {
  border-color: rgba(124, 92, 255, .55) !important;
}

.buy-now, .btn-buy-now,
button[type='submit'] {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Galerie: vignettes carrees, la selection en violet. */
.product-gallery img, .gallery-thumb img, .thumbnails img {
  border-radius: 8px;
  border: 1px solid rgba(125, 150, 190, .18);
}

.product-gallery .active img, .thumbnails .active img {
  border-color: rgba(124, 92, 255, .70);
}

/* ---- Colonne d achat: sections separees par un filet ---------------------
   La reference decoupe la colonne en blocs - plan, total, addons, actions -
   separes par une ligne fine. Le balisage empile deja des blocs: on pose le
   filet entre eux plutot que d ajouter des elements. */
.product-page form > div + div,
.product form > div + div {
  padding-top: 1.1rem;
  margin-top: 1.1rem;
  border-top: 1px solid rgba(125, 150, 190, .14);
}

/* Prix total: gros, bleu, avec la pastille de stock alignee a droite. */
.product-page form .price,
.product form .price {
  font-size: 1.8rem !important;
  font-weight: 800;
  color: #4f7cff !important;
  font-variant-numeric: tabular-nums;
}

/* Pastille de disponibilite, poussee a droite de sa ligne. */
.stock-unlimited,
.product-page .in-stock,
.product .in-stock {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid rgba(125, 150, 190, .20);
  border-radius: 7px;
  background: #121a26;
  font-size: .74rem; font-weight: 700;
  color: #4ade80;
}

/* Bloc addons: une carte a part, l offre doit se distinguer du reste. */
.addons, .product-addons, .addon-item {
  border: 1px solid rgba(125, 150, 190, .18);
  border-radius: 10px;
  background: #121a26;
  padding: .85rem 1rem;
}

.addon-item .name, .addons .name { font-size: .8rem; font-weight: 800; color: #fff; text-transform: uppercase; }
.addon-item .desc, .addons .desc { font-size: .72rem; color: #7a869c; }

/* Mention legale sous les boutons: centree et discrete. */
.product-page form small,
.product form small,
.terms-notice {
  display: block;
  text-align: center;
  font-size: .72rem;
  color: #7a869c;
  margin-top: .8rem;
}

.product-page form small a,
.product form small a { color: #4f7cff; text-decoration: none; }
.product-page form small a:hover { text-decoration: underline; }

/* Le tout dans une grande carte, comme la reference. */
.product-page > .container > .row,
.product > .container > .row {
  border: 1px solid rgba(125, 150, 190, .14);
  border-radius: 14px;
  background: rgba(18, 26, 38, .35);
  padding: 1.4rem;
  margin: 0;
}

/* ---- Corrections: vrais selecteurs releves par inspection --------------- */

/* Le grand cadre: c est "row gx-4 gx-lg-5", qui enveloppe la galerie et le
   formulaire. Mes classes precedentes ("product-page", "product") n existent
   pas dans ce theme, d ou le cadre absent. */
.row.gx-4.gx-lg-5 {
  border: 1px solid rgba(125, 150, 190, .14);
  border-radius: 14px;
  background: rgba(18, 26, 38, .35);
  padding: 1.4rem;
  margin: 0 auto;
}

/* Prix total: cible le span x-text="...totalPrice...", pas ".price" qui n existe
   pas ici. */
span[x-text*="totalPrice"] {
  font-size: 1.8rem !important;
  font-weight: 800;
  color: #4f7cff !important;
  font-variant-numeric: tabular-nums;
}