/* =====================================================================
   akaguriro-product.css — Fiche produit Akaguriro (produits, services,
   freelance). Compact, mobile-first, charte Akaguriro : bleu #071689,
   orange #FF8400 en accent.
   ===================================================================== */

.akg-pdp {
  --akg-blue: #071689;
  --akg-orange: #FF8400;
  --akg-border: #e7e9f2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 16px 90px;
  font-family: 'Poppins', sans-serif;
  color: #111827;
}

.akg-pdp-breadcrumb {
  font-size: 13px;
  margin-bottom: 10px;
}
.akg-pdp-breadcrumb a {
  color: var(--akg-blue);
  text-decoration: none;
}
.akg-pdp-breadcrumb a:hover { color: var(--akg-orange); }

/* ---------- Layout principal ---------- */
.akg-pdp-main {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 880px) {
  .akg-pdp-main {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------- Galerie ---------- */
.akg-pdp-gallery {
  position: sticky;
  top: 12px;
}
@media (max-width: 880px) {
  .akg-pdp-gallery { position: static; }
}

.akg-pdp-gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 700 / 900;
  max-height: 560px;
  background: #f6f7fb;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--akg-border);
}

.akg-pdp-gallery-slide {
  position: absolute;
  inset: 0;
  display: none;
}
.akg-pdp-gallery-slide.is-active { display: block; }

.akg-pdp-gallery-slide img,
.akg-pdp-gallery-slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

.akg-pdp-no-image {
  background: repeating-linear-gradient(45deg, #f0f1f6, #f0f1f6 10px, #eaebf3 10px, #eaebf3 20px);
}

.akg-pdp-video-play {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
}
.akg-pdp-video-play img { width: 100%; height: 100%; object-fit: cover; }
.akg-pdp-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
  background: rgba(7, 22, 137, .35);
}

.akg-pdp-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.akg-pdp-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--akg-border);
  padding: 0;
  cursor: pointer;
  background: #f6f7fb;
}
.akg-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.akg-pdp-thumb.is-active { border-color: var(--akg-orange); }
.akg-pdp-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(7, 22, 137, .35);
  font-size: 12px;
}

/* ---------- Infos ---------- */
.akg-pdp-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.akg-pdp-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.akg-pdp-badge.is-new { background: var(--akg-blue); }
.akg-pdp-badge.is-sale { background: #d33; }
.akg-pdp-badge.is-verified { background: #1a9c5c; }
.akg-pdp-badge.is-fast { background: var(--akg-orange); }

.akg-pdp-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--akg-blue);
}

.akg-pdp-authors {
  font-size: 13.5px;
  color: var(--akg-blue);
  opacity: .85;
  margin: -4px 0 10px;
}
.akg-pdp-authors a {
  color: var(--akg-blue);
  font-weight: 600;
  text-decoration: none;
}
.akg-pdp-authors a:hover { text-decoration: underline; }

.akg-pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.akg-pdp-price {
  font-size: 24px;
  font-weight: 800;
  color: var(--akg-orange);
}
.akg-pdp-old-price {
  font-size: 15px;
  color: var(--akg-blue);
  opacity: .55;
  text-decoration: line-through;
}

.akg-pdp-stock-line { margin-bottom: 10px; font-size: 13.5px; font-weight: 600; }
.akg-pdp-stock.is-ok { color: #1a9c5c; }
.akg-pdp-stock.is-out { color: #d33; }

.akg-pdp-short-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--akg-blue);
  margin-bottom: 14px;
}

/* Le texte libre (description courte, body, caractéristiques) vient de
   l'éditeur du vendeur, qui embarque souvent une couleur en style inline
   (copié-collé Word/Docs, éditeur riche) — une classe seule ne peut pas
   la battre en spécificité CSS, d'où le !important sur TOUT ce qui est à
   l'intérieur : on force le bleu Akaguriro quelle que soit la mise en
   forme d'origine, jamais de gris. */
.akg-pdp-short-desc,
.akg-pdp-short-desc *,
.akg-pdp-tab-panel,
.akg-pdp-tab-panel * {
  color: var(--akg-blue) !important;
  background-color: transparent !important;
}

/* Mots-clés en gras / sous-titres dans le texte libre : le vendeur les met
   en <strong> depuis l'éditeur pour structurer son texte — on les fait
   ressortir plus grands et plus épais que le corps du texte (même bleu,
   hiérarchie par la taille/graisse plutôt qu'une autre couleur). */
.akg-pdp-short-desc strong,
.akg-pdp-short-desc b,
.akg-pdp-tab-panel strong,
.akg-pdp-tab-panel b {
  color: var(--akg-blue) !important;
  font-weight: 800;
  font-size: 1.1em;
}
.akg-pdp-short-desc h1, .akg-pdp-short-desc h2, .akg-pdp-short-desc h3,
.akg-pdp-short-desc h4, .akg-pdp-short-desc h5, .akg-pdp-short-desc h6,
.akg-pdp-tab-panel h1, .akg-pdp-tab-panel h2, .akg-pdp-tab-panel h3,
.akg-pdp-tab-panel h4, .akg-pdp-tab-panel h5, .akg-pdp-tab-panel h6 {
  color: var(--akg-blue);
  font-weight: 800;
  line-height: 1.3;
  margin: 18px 0 8px;
}

/* ---------- Formulaire panier natif (re-thémé, pas réinventé) ---------- */
.akg-pdp-buybox {
  border: 1px solid var(--akg-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fbfbfe;
}
/* Le <select> de variante hérite des classes Bootstrap 3 du thème admin
   "jango" (input-lg, form-control, c-square...) — pensées pour un panneau
   d'administration étroit, jamais pour une fiche produit. Ce thème met le
   label ("Pack") et le <select> côte à côte façon input-group et force une
   largeur figée sur le select, tronquant des libellés longs (ex. "Pack
   Famille Securite Aquatique (par enfant)") aussi bien dans le champ fermé
   que dans le menu déroulant ouvert. On reprend la structure à la main
   (empilée, pleine largeur) plutôt que de rajouter des règles au thème
   admin — les !important sont nécessaires face à ses propres règles, plus
   spécifiques/chargées après les nôtres.
*/
.akg-pdp-buybox .form-group,
.akg-pdp-buybox .js-form-item {
  display: block !important;
  width: 100% !important;
}
.akg-pdp-buybox .form-group label,
.akg-pdp-buybox .js-form-item label {
  display: block !important;
  margin-bottom: 6px !important;
}
.akg-pdp-buybox select,
.akg-pdp-buybox input[type="number"] {
  display: block !important;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--akg-border);
  font-family: inherit;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.akg-pdp-buybox .form-actions,
.akg-pdp-buybox button[type="submit"],
.akg-pdp-buybox input[type="submit"] {
  margin-top: 10px;
  background: var(--akg-orange);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  width: 100%;
}
.akg-pdp-buybox button[type="submit"]:hover { background: #d96f00; }

.akg-pdp-live-info {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--akg-border);
}
.akg-pdp-live-info .akg-pdp-stock.is-ok { color: #1a9c5c; }
.akg-pdp-live-info .akg-pdp-stock.is-out { color: #d33; }
.akg-pdp-live-info .akg-pdp-weight { color: var(--akg-blue); opacity: .8; font-weight: 500; }

.akg-pdp-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  background: #25d366;
  color: #fff !important;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}
.akg-pdp-whatsapp-btn:hover { background: #1eb858; }

.akg-pdp-meta-line {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--akg-blue);
  margin-bottom: 14px;
}

/* ---------- Actions (comparer / favoris / partager) ---------- */
.akg-pdp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.akg-pdp-actions .akg-compare-toggle-wrap,
.akg-pdp-actions .akg-wishlist-toggle-wrap {
  margin-top: 0;
}
.akg-pdp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--akg-blue);
  background: #fff;
  border: 1.5px solid var(--akg-blue);
  border-radius: 10px;
  cursor: pointer;
}
.akg-pdp-share-btn:hover { background: rgba(7, 22, 137, .06); }

/* ---------- Carte vendeur ---------- */
.akg-pdp-vendor-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--akg-border);
  border-radius: 12px;
  padding: 12px;
}
.akg-pdp-vendor-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.akg-pdp-vendor-name { font-size: 13.5px; margin-bottom: 4px; }
.akg-pdp-vendor-desc { font-size: 12.5px; color: var(--akg-blue); opacity: .75; margin: 0 0 6px; }
.akg-pdp-vendor-link { font-size: 13px; font-weight: 700; color: var(--akg-orange); text-decoration: none; }
.akg-pdp-vendor-link:hover { text-decoration: underline; }

/* ---------- Onglets ---------- */
.akg-pdp-tabs { margin-top: 34px; }
.akg-pdp-tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--akg-border);
  margin-bottom: 18px;
  overflow-x: auto;
}
.akg-pdp-tab-btn {
  padding: 10px 16px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--akg-blue);
  opacity: .5;
  cursor: pointer;
  white-space: nowrap;
}
.akg-pdp-tab-btn.is-active { opacity: 1; border-bottom-color: var(--akg-orange); }
.akg-pdp-tab-panel { display: none; font-size: 14px; line-height: 1.6; }
.akg-pdp-tab-panel.is-active { display: block; }

/* ---------- Avis clients ---------- */
.akg-stars { display: inline-flex; gap: 1px; }
.akg-star { color: var(--akg-border); font-size: 16px; line-height: 1; }
.akg-star.is-filled { color: var(--akg-orange); }

.akg-pdp-reviews-summary-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.akg-pdp-reviews-summary-text { font-size: 13.5px; font-weight: 700; color: var(--akg-blue); }

.akg-pdp-reviews-box {
  background: #fff;
  border: 1px solid var(--akg-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
  position: relative;
}
.akg-pdp-reviews-box-title { font-size: 15px; font-weight: 800; color: var(--akg-blue); margin: 0 0 10px; }
.akg-pdp-reviews-star-picker { display: flex; gap: 4px; margin-bottom: 12px; }
.akg-star-pick {
  background: none;
  border: 0;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--akg-border);
  cursor: pointer;
}
.akg-star-pick.is-filled { color: var(--akg-orange); }
.akg-pdp-reviews-textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border: 1px solid var(--akg-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--akg-blue);
  background: #fbfbfe;
  margin-bottom: 12px;
}
.akg-pdp-reviews-submit-btn {
  background: var(--akg-orange);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.akg-pdp-reviews-submit-btn:disabled { opacity: .6; cursor: default; }
.akg-pdp-reviews-submit-btn:hover:not(:disabled) { background: #d96f00; }

.akg-pdp-reviews-login-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #fbfbfe;
  border: 1px solid var(--akg-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--akg-blue);
}
.akg-pdp-reviews-login-link {
  color: var(--akg-orange);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.akg-pdp-reviews-login-link:hover { text-decoration: underline; }

.akg-pdp-reviews-toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -14px;
  transform: translateY(100%);
  background: #1a9c5c;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
}
.akg-pdp-reviews-toast--error { background: #d33; }

.akg-pdp-reviews-empty { font-size: 13.5px; color: var(--akg-blue); opacity: .6; padding: 8px 4px; }

.akg-pdp-review-card {
  border: 1px solid var(--akg-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.akg-pdp-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.akg-pdp-review-author { font-weight: 700; font-size: 13.5px; color: var(--akg-blue); }
.akg-pdp-review-date { font-size: 11.5px; color: var(--akg-blue); opacity: .5; white-space: nowrap; }
.akg-pdp-review-body { font-size: 13.5px; line-height: 1.5; color: var(--akg-blue); opacity: .85; margin: 8px 0 0; }

.akg-pdp-reviews-more { text-align: center; margin-top: 6px; }
.akg-pdp-reviews-more-btn {
  background: none;
  border: 0;
  color: var(--akg-blue);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 12px;
}
.akg-pdp-reviews-more-btn:hover { text-decoration: underline; }

/* ---------- Produits similaires ---------- */
.akg-pdp-related { margin-top: 34px; }
.akg-pdp-related-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--akg-blue);
  margin: 0 0 14px;
}
.akg-pdp-related-viewport { position: relative; }
.akg-pdp-related-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--akg-border);
  background: #fff;
  color: var(--akg-blue);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(7, 22, 137, .18);
}
.akg-pdp-related-nav--prev { left: -14px; }
.akg-pdp-related-nav--next { right: -14px; }
.akg-pdp-related-nav:hover:not(:disabled) {
  background: var(--akg-blue);
  border-color: var(--akg-blue);
  color: #fff;
}
.akg-pdp-related-nav:disabled {
  opacity: .3;
  cursor: default;
  box-shadow: none;
}
@media (max-width: 640px) {
  .akg-pdp-related-nav { display: none; }
}
.akg-pdp-related-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scroll-behavior: smooth;
}
.akg-pdp-related-card {
  flex: 0 0 auto;
  width: 160px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}
.akg-pdp-related-thumb {
  width: 100%;
  aspect-ratio: 700 / 900;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f7fb;
  border: 1px solid var(--akg-border);
  margin-bottom: 8px;
}
.akg-pdp-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.akg-pdp-related-thumb--empty {
  background: repeating-linear-gradient(45deg, #f0f1f6, #f0f1f6 10px, #eaebf3 10px, #eaebf3 20px);
}
.akg-pdp-related-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--akg-blue);
  line-height: 1.35;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.akg-pdp-related-price-row { display: flex; align-items: baseline; gap: 6px; }
.akg-pdp-related-price { font-size: 14px; font-weight: 800; color: var(--akg-orange); }
.akg-pdp-related-old-price { font-size: 11.5px; color: var(--akg-blue); opacity: .55; text-decoration: line-through; }
@media (max-width: 880px) {
  .akg-pdp-related-card { width: 130px; }
}

/* ---------- Barre sticky mobile ---------- */
.akg-pdp-sticky-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: #fff;
  border-top: 1px solid var(--akg-border);
  box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.akg-pdp-sticky-price { font-size: 17px; font-weight: 800; color: var(--akg-orange); }
.akg-pdp-sticky-cta {
  flex: 1;
  max-width: 220px;
  margin-left: auto;
  background: var(--akg-orange);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
@media (max-width: 880px) {
  .akg-pdp-sticky-bar { display: flex; }
}