/* ============================================================
   product-page.css — AliExpress mobile-first design
   IciOnDeal — v1.0
   ============================================================ */

/* ── Variables ── */
:root {
  --pp-primary:        #ff5722;
  --pp-primary-light:  #fff3e0;
  --pp-success:        #10b981;
  --pp-text:           #212121;
  --pp-text-secondary: #757575;
  --pp-border:         #e0e0e0;
  --pp-bg:             #ffffff;
  --pp-bg-section:     #f7f7f7;
  --pp-sticky-height:  60px;
  /* keep legacy vars for existing JS-driven components */
  --primary:           #2d6a4f;
  --btn-blue:          #2d6a4f;
  --btn-blue-hover:    #1b4332;
  --green-promo:       #00A651;
  --price-red:         #e53935;
  --border:            #E5E5E0;
  --text-dark:         #0f2016;
  --bg-card:           #ffffff;
}

/* ── Body override ── */
body.product-page {
  background: var(--pp-bg-section);
  padding-bottom: calc(var(--pp-sticky-height) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) {
  body.product-page { padding-bottom: 0; }
}

/* ── Masquer les anciens composants desktop remplacés ── */
body.product-page .pd-actions-mobile { display: none !important; }
body.product-page #sticky-commander  { display: none !important; }
body.product-page #pf-sticky-bar     { display: none !important; }


/* ── Layout principal 2 colonnes desktop / 1 colonne mobile ── */
.pp-layout {
  max-width: 1200px;
  margin: 0 auto;
  /* padding-top explicite pour ne jamais être écrasé par une règle shorthand */
  padding-top: calc(var(--promo-h, 44px) + var(--navbar-h, 72px));
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 1024px) {
  .pp-layout {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    align-items: start;
  }
}

/* ── Colonne galerie ── */
.pp-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1024px) {
  .pp-gallery-col {
    position: sticky;
    top: calc(44px + 72px + 16px); /* promo bar + navbar + offset */
    align-self: start;
  }
}

/* ── Galerie ── */
.pp-gallery {
  position: relative;
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
}
@media (min-width: 1024px) {
  .pp-gallery { border-radius: 12px; }
}

/* ── Sliding track (AliExpress style) ── */
.pp-gallery__track-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.pp-gallery__track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  touch-action: pan-y;
}
.pp-gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
}
.pp-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  background: #f7f7f7;
}

/* image principale et overlay (legacy — caché) */
.pp-gallery .pd-main-image-wrap {
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 0;
  background: #fff;
  display: none; /* remplacé par sliding track */
}

/* Counter overlay */
.pp-gallery__counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,.48);
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  z-index: 5;
  pointer-events: none;
}

/* Wishlist button overlay */
.pp-gallery__wishlist {
  position: absolute;
  top: 10px;
  right: 54px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform .2s;
  padding: 0;
}
.pp-gallery__wishlist:hover { transform: scale(1.1); }
.pp-gallery__wishlist svg { width: 18px; height: 18px; stroke: #9e9e9e; fill: none; }
.pp-gallery__wishlist.active svg { stroke: #e53935; fill: #e53935; }

/* Badges */
.pd-img-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  z-index: 4;
  pointer-events: none;
}
.pd-img-badge--promo { background: var(--pp-primary); color: #fff; }
.pd-img-badge--digital { background: #7c3aed; color: #fff; top: auto; bottom: 10px; }
.pp-badge-oos { background: #e53935; color: #fff; top: auto; bottom: 10px; }

/* Dots overlaid at bottom of gallery */
.pp-gallery .pd-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 5;
  padding: 0;
}
.pp-gallery .pd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.pp-gallery .pd-dot.active {
  width: 18px;
  border-radius: 3px;
  background: #fff;
}
.pp-gallery .pd-dot:hover:not(.active) { background: rgba(255,255,255,.8); }

/* Video panel */
.pd-video-panel {
  display: none;
  position: absolute;
  inset: 0;
  background: #000;
}
.pd-video-panel.visible { display: block; }
.pd-video-panel video { width: 100%; height: 100%; object-fit: contain; }

/* ── Actions desktop (sous la galerie) ── */
.pp-desktop-actions {
  display: none;
  gap: 10px;
}
@media (min-width: 1024px) {
  .pp-desktop-actions { display: flex; }
}

/* ── Colonne info ── */
.pp-info-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Breadcrumb ── */
.pd-breadcrumb {
  font-size: .72rem;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 0;
}
.pd-breadcrumb a { color: #999; text-decoration: none; font-weight: 600; }
.pd-breadcrumb a:hover { color: var(--btn-blue); }
.pd-breadcrumb__sep { color: #ddd; }
.pd-breadcrumb__current { color: #555; font-weight: 500; }

/* ── Bloc prix + titre ── */
.pp-price-block {
  background: #fff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Ordre visuel Shopsy : titre → note → prix → économies → description */
.pp-combo-badge                    { order: 0; }
.pp-price-block__title             { order: 1; }
.pp-price-block__meta              { order: 2; }
.pp-price-block__prices            { order: 3; }
.pp-you-save                       { order: 4; }
.pp-price-block > .pd2-info__desc  { order: 5; }
.pp-price-block > .price-label     { order: 6; }

.pp-price-block__prices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.pp-price-block__current {
  font-size: 28px;
  font-weight: 800;
  color: var(--price-red, #e53935);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.pp-price-block__old {
  font-size: 14px;
  color: var(--pp-text-secondary);
  text-decoration: line-through;
}
.pp-price-block__discount {
  display: inline-flex;
  align-items: center;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: .02em;
}

.pp-price-block__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pp-text);
  line-height: 1.35;
  margin: 0;
  letter-spacing: -.2px;
}

.pp-price-block__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pp-text-secondary);
  flex-wrap: wrap;
}
.pp-price-block__rating {
  color: #f59e0b;
  font-weight: 600;
}

.pp-combo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #7c3aed;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

/* ── Shipping info ── */
.pp-shipping-info {
  background: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .83rem;
  color: #1b4332;
  border-top: 1px solid #bbf7d0;
  background: #f0fdf6;
}
.pp-shipping-info__icon { flex-shrink: 0; font-size: 1rem; }

/* ── Section background (combo, paliers, etc.) ── */
.pp-section-bg {
  background: #fff;
  padding: 14px 16px;
}

/* ── Combo includes ── */
.pp-combo-includes__title {
  font-size: .8rem;
  font-weight: 700;
  color: #7c3aed;
  margin-bottom: 8px;
}
.pp-combo-includes__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-combo-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px 10px;
  text-decoration: none;
  color: inherit;
  font-size: .82rem;
  font-weight: 600;
}
.pp-combo-item img { border-radius: 5px; object-fit: cover; }

/* ── Variants ── */
.pp-variants {
  background: #fff;
  padding: 14px 16px;
}
.pp-variants__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text);
  margin-bottom: 10px;
}

/* ── Paliers (réutilise les classes existantes + override background) ── */
.pd2-paliers { background: #fff; padding: 14px 16px; }
.pd2-paliers__label {
  font-size: .85rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 10px;
}
.pd2-paliers__grid { display: flex; gap: 10px; flex-wrap: wrap; }
.pd2-palier-card {
  flex: 1;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 2px solid var(--pp-border);
  border-radius: 10px;
  padding: 10px 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  text-align: center;
  position: relative;
  overflow: visible;
}
.pd2-palier-card:hover  { border-color: var(--btn-blue); background: #e8f5ee; transform: translateY(-2px); }
.pd2-palier-card.active { border-color: var(--btn-blue); background: #e8f5ee; box-shadow: 0 0 0 3px rgba(45,106,79,.2); }
.pd2-palier-card__best {
  position: absolute; top: -8px; left: -6px;
  color: #fff; font-size: .6rem; font-weight: 800;
  padding: 3px 8px; border-radius: 4px 12px 12px 4px;
  pointer-events: none; white-space: nowrap;
  animation: badge-bounce 1.6s ease-in-out infinite;
}
.pd2-palier-card__best--meilleur_prix { background: linear-gradient(135deg,#2d6a4f,#1b4332); }
.pd2-palier-card__best--bon_deal      { background: linear-gradient(135deg,#e53e3e,#c53030); }
@keyframes badge-bounce {
  0%,100%{transform:translateY(0) rotate(-2deg);}
  40%{transform:translateY(-4px) rotate(-2deg);}
  60%{transform:translateY(-2px) rotate(-2deg);}
}
.pd2-palier-card__qty  { font-size: .75rem; font-weight: 600; color: #888; }
.pd2-palier-card__prix { font-size: 1rem; font-weight: 800; color: var(--text-dark); }
.pd2-palier-card__unit { font-size: .7rem; color: #888; }
.pd2-palier-card__save { font-size: .7rem; font-weight: 700; color: #2E7D32; background: #e8f5e9; border-radius: 20px; padding: 2px 7px; }

/* ── Votre choix panel ── */
#votre-choix-panel {
  background: #fff;
  padding: 14px 16px;
  border: 2px solid var(--btn-blue);
  border-radius: 12px;
}
.vc-header { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; color: var(--btn-blue); margin-bottom: 10px; }
.vc-count-badge { background: var(--btn-blue); color: #fff; border-radius: 20px; padding: 1px 9px; font-size: .72rem; font-weight: 700; }
.vc-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #d1fae5; font-size: .85rem; }
.vc-item:last-child { border-bottom: none; }
.vc-item__label { flex: 1; font-weight: 600; }
.vc-qty-ctrl { display: flex; align-items: center; gap: 4px; }
.vc-qty-ctrl button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--btn-blue); background: #fff; color: var(--btn-blue); cursor: pointer; font-size: .95rem; display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; }
.vc-qty-ctrl button:hover { background: var(--btn-blue); color: #fff; }
.vc-qty-ctrl input { width: 34px; text-align: center; border: 1px solid #ccc; border-radius: 6px; padding: 3px 2px; font-size: .82rem; font-family: inherit; }
.vc-remove-btn { background: none; border: none; cursor: pointer; color: #e53935; font-size: 1rem; padding: 2px 6px; border-radius: 4px; }
.vc-remove-btn:hover { background: #ffeaea; }
.vc-item__sub { font-size: .82rem; font-weight: 700; color: #e53935; min-width: 72px; text-align: right; white-space: nowrap; }
.vc-item__sub small { font-weight: 400; color: #999; font-size: .7rem; display: block; }
.vc-footer { margin-top: 12px; padding-top: 12px; border-top: 2px solid #bbf7d0; }
.vc-footer-total { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .9rem; }
.vc-badge { position: absolute; top: -7px; right: -7px; background: #e53935; color: #fff; border-radius: 50%; width: 17px; height: 17px; font-size: .6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; pointer-events: none; }

/* ── Quantité ── */
.pp-quantity {
  background: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.pp-quantity__label { font-size: 14px; font-weight: 600; color: var(--pp-text); }
.pp-quantity__controls {
  display: flex;
  align-items: center;
  border: 1px solid var(--pp-border);
  border-radius: 6px;
  overflow: hidden;
}
.pp-quantity__btn {
  width: 38px;
  height: 38px;
  background: #f7f7f7;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-quantity__btn:hover { background: #eee; }
.pp-quantity__input {
  width: 52px;
  height: 38px;
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  border-left: 1px solid var(--pp-border);
  border-right: 1px solid var(--pp-border);
  font-family: inherit;
  background: #fff;
}
.pp-quantity__stock { font-size: 12px; color: var(--pp-text-secondary); }

/* Hint stock faible */
.pd2-stock-hint {
  font-size: .8rem;
  color: #e53935;
  font-weight: 600;
  padding: 0 16px;
}

/* ── Total bar ── */
.pp-total-bar {
  background: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-text);
}
.pp-total-bar__amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--price-red, #e53935);
  letter-spacing: -.3px;
}

/* ── Trust badges ── */
.pd2-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
}
.pd2-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .7rem;
  color: #444;
  font-weight: 600;
  background: #f8faf8;
  border: 1px solid #e8f0ec;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  line-height: 1.3;
}
.pd2-trust__item svg {
  flex-shrink: 0;
  color: var(--primary, #2d6a4f);
  stroke: var(--primary, #2d6a4f);
}
.pd2-trust__sep { display: none; }

/* ── Accordéon AliExpress (pp-accordion) ── */
.pp-accordion {
  background: #fff;
}
.pp-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
}
.pp-accordion__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-text);
}
.pp-accordion__title svg { width: 18px; height: 18px; flex-shrink: 0; }
.pp-accordion__chevron {
  font-size: 1.1rem;
  color: var(--pp-text-secondary);
  transition: transform .2s;
}
.pp-accordion--open .pp-accordion__chevron { transform: rotate(90deg); }
.pp-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.pp-accordion--open .pp-accordion__body { max-height: 1000px; }
.pp-accordion__content {
  padding: 0 16px 16px;
  font-size: 13px;
  color: var(--pp-text-secondary);
  line-height: 1.6;
  border-top: 1px solid #f5f5f5;
  padding-top: 10px;
}

/* Accordéon existant pf-acc — styles conservés */
.pf-acc { border-bottom: 1px solid var(--pp-border); background: #fff; }
.pf-acc:last-child { border-bottom: none; }
.pf-acc__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: #fff; border: none;
  font-family: inherit; font-size: .88rem; font-weight: 700; color: #0f2016;
  cursor: pointer; text-align: left; transition: background .2s;
}
.pf-acc__toggle:hover { background: #f9f9f9; }
.pf-acc.open .pf-acc__toggle { background: #f9f9f9; }
.pf-acc__arrow { font-size: .8rem; color: #888; transition: transform .3s ease; margin-left: 8px; }
.pf-acc.open .pf-acc__arrow { transform: rotate(180deg); }
.pf-acc__body { max-height: 0; overflow: hidden; transition: max-height .38s ease; }
.pf-acc__content { padding: 16px; border-top: 1px solid var(--pp-border); }
.desc-body { line-height: 1.85; color: #555; font-size: .94rem; }
.desc-body img { max-width: 100%; height: auto; border-radius: 8px; }
.pf-specs-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pf-specs-table .spec-group td { background: #f5f5f5; font-weight: 700; font-size: .73rem; color: #666; text-transform: uppercase; letter-spacing: .05em; padding: 7px 16px; border-bottom: 1px solid var(--pp-border); }
.pf-specs-table tr { border-bottom: 1px solid #f0f0f0; }
.pf-specs-table tr:last-child { border-bottom: none; }
.pf-specs-table .spec-label { padding: 9px 8px 9px 16px; color: #888; width: 44%; vertical-align: top; }
.pf-specs-table .spec-value { padding: 9px 16px 9px 8px; color: #222; font-weight: 500; }

/* ── Reviews AliExpress style ── */
.pp-reviews {
  background: #fff;
  padding: 20px 16px;
  margin-top: 16px;
}
.pp-reviews__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.pp-reviews__title { font-size: 16px; font-weight: 700; margin: 0; }
.pp-reviews__see-all { color: var(--btn-blue); font-size: 13px; text-decoration: none; }
.pp-reviews__summary {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: var(--pp-bg-section);
  border-radius: 8px;
  margin-bottom: 14px;
}
.pp-reviews__avg { text-align: center; min-width: 72px; }
.pp-reviews__avg-score { font-size: 30px; font-weight: 700; color: var(--pp-text); }
.pp-reviews__bars { flex: 1; }
.pp-reviews__bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 4px; }
.pp-reviews__bar-track { flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.pp-reviews__bar-fill { height: 100%; background: var(--pp-success); border-radius: 3px; }

/* ── Reviews Carousel ── */
/* ── Reviews Carousel ── */
.rv-carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  /* padding bas pour que l'ombre des cartes soit visible */
  padding-bottom: 4px;
}

.rv-carousel__track {
  display: flex;
  will-change: transform;
}

.rv-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  /* padding côtés pour que la carte ait de l'air */
  padding: 4px 2px 8px;
}

/* ── La carte ── */
.rv-slide {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.09);
  border: 1px solid #f0f0f0;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rv-slide__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rv-slide__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--btn-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  letter-spacing: 0;
}

.rv-slide__meta {
  flex: 1;
  min-width: 0;
}

.rv-slide__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--pp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.rv-slide__stars {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

.rv-slide__date {
  font-size: 11px;
  color: var(--pp-text-secondary);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.rv-slide__text {
  font-size: 14px;
  line-height: 1.65;
  color: #444;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* ── Dots ── */
.rv-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0 2px;
}

.rv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d5d5d5;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .25s ease;
  flex-shrink: 0;
}

.rv-dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--btn-blue);
}

.rv-dot:hover:not(.active) {
  background: #aaa;
}

/* Reviews list */
.reviews-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.pp-review, .review-item { padding: 12px 0; border-bottom: 1px solid var(--pp-border); }
.pp-review:last-child, .review-item:last-child { border-bottom: none; }
.pp-review__header, .review-item__header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pp-review__avatar, .review-item__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--btn-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .88rem; flex-shrink: 0;
}
.pp-review__name, .review-item__name { font-size: 13px; font-weight: 600; }
.pp-review__date, .review-item__date { font-size: 11px; color: var(--pp-text-secondary); margin-left: auto; }
.pp-review__text, .review-item__text { font-size: 13px; line-height: 1.5; color: var(--pp-text); margin: 0; }

/* Review form */
.review-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pp-border); }
.review-form h3 { font-size: .95rem; font-weight: 700; margin: 0 0 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: .82rem; font-weight: 600; color: #555; }
.form-group input, .form-group textarea, .form-group select { font-family: inherit; font-size: .88rem; }
.star-rating-input { display: flex; flex-direction: row-reverse; gap: 2px; }
.star-rating-input input { display: none; }
.star-rating-input label { font-size: 1.5rem; cursor: pointer; color: #d1d5db; transition: color .15s; }
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label { color: #f59e0b; }
.form-message { margin-top: 10px; font-size: .85rem; padding: 8px 12px; border-radius: 6px; }
.form-message.success { background: #ecfdf5; color: #065f46; }
.form-message.error   { background: #fef2f2; color: #991b1b; }

/* ── Titres de sections — soulignement vert style homepage ── */
.pp-description h3,
.pp-reviews .pp-reviews__title,
.pp-related .pp-related__title {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.pp-description h3::after,
.pp-reviews .pp-reviews__title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--primary, #2d6a4f);
  border-radius: 2px;
  margin-top: 8px;
}
/* Soulignement centré pour "Vous aimerez aussi" */
.pp-related .pp-related__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--primary, #2d6a4f);
  border-radius: 2px;
  margin: 8px auto 0;
}

/* ── Séparateur visuel entre sections (corps de page) ── */
.pp-layout__sections > section,
.pp-layout__sections > div {
  position: relative;
}
.pp-layout__sections > section + section,
.pp-layout__sections > section + div,
.pp-layout__sections > div + section,
.pp-layout__sections > div + div {
  margin-top: 0; /* géré par le gap du flex/grid */
}

/* ── Description tronquée ── */
.pp-description {
  background: #fff;
  padding: 20px 16px;
  margin-top: 16px;
}
.pp-description__content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--pp-text);
  max-height: 160px;
  overflow: hidden;
  position: relative;
  transition: max-height .35s ease;
}
.pp-description__content::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}
.pp-description--expanded .pp-description__content { max-height: 6000px; }
.pp-description--expanded .pp-description__content::after { display: none; }
.pp-description__toggle {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: 1px solid var(--pp-border);
  color: var(--pp-text);
  padding: 8px 28px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.pp-description__toggle:hover { background: #f5f5f5; }

/* ── Produits similaires ── */
.pp-related {
  background: #f0fdf6;
  padding: 28px 16px 24px;
  margin-top: 0;
  border-top: 3px solid var(--primary, #2d6a4f);
  border-bottom: 3px solid var(--primary, #2d6a4f);
}
.pp-related__title {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 18px;
  text-align: center;
  color: #0f2016;
  letter-spacing: .01em;
}

/* Swiper override pour related */
.related-swiper-wrap { overflow: hidden; position: relative; }
.related-swiper { overflow: hidden !important; }
.related-swiper .swiper-wrapper { align-items: stretch; }
.related-swiper .swiper-slide { height: auto !important; box-sizing: border-box; display: flex !important; }
.related-swiper .product-card {
  display: flex !important; flex-direction: column !important;
  width: 100% !important; height: 100% !important;
  overflow: hidden !important; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07); background: #fff;
}
.related-swiper .product-card__img-wrap { position: relative !important; padding-top: 70% !important; overflow: hidden; flex-shrink: 0; background: #f7f7f7; }
.related-swiper .product-card__img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; }
.related-swiper .product-card__body { padding: 10px !important; display: flex !important; flex-direction: column !important; flex: 1; }
.related-swiper .product-card__name { font-size: .86rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; min-height: 2.4em; }
.related-swiper .product-card__actions { margin-top: auto; }
.related-swiper .product-card__actions .btn { width: 100%; padding: 8px 12px; font-size: .82rem; text-align: center; }

/* ── Bouton boutique dans la sticky bar ── */
.pp-sticky-bar__shop {
  color: var(--btn-blue);
  position: relative;
}
.pp-sticky-bar__shop:hover {
  background: #e8f5ee;
  color: var(--btn-blue);
}
.pp-sticky-bar__shop svg {
  stroke: var(--btn-blue);
  transition: transform .2s;
}
.pp-sticky-bar__shop:hover svg { transform: scale(1.12); }
/* Tooltip boutique */
.pp-sticky-bar__shop::after {
  content: 'Boutique';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.pp-sticky-bar__shop:hover::after { opacity: 1; }

/* ── Navigation universelle — tap sans délai sur mobile ── */
.pp-sticky-bar button,
.pp-desktop-actions button,
.pp-accordion__header,
.pp-description__toggle,
.pd-qty-btn,
.pd2-palier-card,
.pd2-swatch,
.pd2-pill,
.pay-method-btn,
.btn-add-order,
[onclick] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Barre sticky bottom ── */
.pp-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--pp-sticky-height);
  background: #fff;
  border-top: 1px solid var(--pp-border);
  display: flex;
  align-items: center;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  z-index: 998;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
@media (min-width: 1024px) { .pp-sticky-bar { display: none !important; } }

.pp-sticky-bar__contact {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0f0f0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s;
}
.pp-sticky-bar__contact:hover { background: #e0e0e0; }
.pp-sticky-bar__contact svg { width: 20px; height: 20px; }

.pp-sticky-bar__buy {
  flex: 1;
  height: 46px;
  border-radius: 23px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .1s;
  background: var(--btn-blue);
  color: #fff;
  box-shadow: 0 3px 12px rgba(45,106,79,.28);
}
.pp-sticky-bar__buy:hover  { opacity: .92; transform: translateY(-1px); }
.pp-sticky-bar__buy:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* ── Stepper quantité compact dans la sticky bar ── */
.pp-sticky-bar__qty {
  display: flex;
  align-items: center;
  height: 46px;
  border: 2px solid var(--btn-blue, #2d6a4f);
  border-radius: 23px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
}
.pp-sticky-bar__qty-btn {
  width: 38px;
  height: 100%;
  background: transparent;
  border: none;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  color: var(--btn-blue, #2d6a4f);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pp-sticky-bar__qty-btn:hover,
.pp-sticky-bar__qty-btn:active { background: #e8f5ee; }
.pp-sticky-bar__qty-val {
  min-width: 38px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  border-left: 1px solid rgba(45,106,79,.25);
  border-right: 1px solid rgba(45,106,79,.25);
  padding: 0 4px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Order form bottom sheet ── */
#order-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 1290;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
#order-backdrop.open { opacity: 1; visibility: visible; }

#pd-order-form {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1300;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  padding: 0 24px 48px;
}
#pd-order-form.open { transform: translateY(0); }

.order-sheet-handle { width: 44px; height: 4px; background: #e0e0e0; border-radius: 2px; margin: 14px auto 0; flex-shrink: 0; }
.order-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 14px; border-bottom: 1px solid #f0f0f0;
  margin-bottom: 18px; position: sticky; top: 0; background: #fff; z-index: 1;
}
.order-sheet-title { font-size: 1rem; font-weight: 800; color: #0f2016; }
.order-sheet-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: #f5f5f5; color: #555; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.order-sheet-close:hover { background: #e0e0e0; }

.pd-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) { .pd-checkout-grid { grid-template-columns: 1fr; } }

.pd-section__title {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 700; color: #0f2016;
  margin-bottom: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-group label { font-size: .82rem; font-weight: 600; color: #555; }
.pd-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--pp-border);
  border-radius: 8px; font-size: .88rem; font-family: inherit;
  transition: border-color .2s;
  background: #fff;
}
.pd-input:focus { outline: none; border-color: var(--btn-blue); }
.pd-phone-row { display: flex; gap: 8px; }

.pay-methods-wrap { display: flex; flex-direction: column; gap: 10px; }
.pay-method-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 2px solid var(--pp-border);
  border-radius: 10px; background: #fff; cursor: pointer;
  font-family: inherit; text-align: left; transition: border-color .2s, background .2s;
  width: 100%;
}
.pay-method-btn.selected { border-color: var(--btn-blue); background: #f0fdf6; }
.pay-method-btn__icon { font-size: 1.3rem; flex-shrink: 0; }
.pay-method-btn__title { font-size: .88rem; font-weight: 700; color: #0f2016; display: block; }
.pay-method-btn__sub   { font-size: .75rem; color: #888; display: block; }

.btn-add-order {
  display: block; width: 100%;
  padding: 16px; margin-top: 16px;
  background: var(--btn-blue); color: #fff;
  border: none; border-radius: 14px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  font-family: inherit;
  transition: background .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(45,106,79,.28);
  letter-spacing: .01em;
}
.btn-add-order:hover {
  background: var(--btn-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(45,106,79,.38);
}
.btn-add-order:active { transform: translateY(0); }
.btn-add-order:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.checkout-success { text-align: center; padding: 10px 0; }
.checkout-success__icon { font-size: 2.5rem; margin-bottom: 10px; }
.checkout-success__ref { color: #555; font-size: .9rem; }
.checkout-success__instructions { font-size: .9rem; line-height: 1.7; color: #444; margin-top: 10px; }

/* ── Variants swatches (styles existants conservés) ── */
.pd2-variant-block { display: flex; flex-direction: column; gap: 8px; background: #fff; padding: 14px 16px; }
.pd2-variant__label { font-size: .85rem; font-weight: 600; color: #444; }
.pd2-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.pd2-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  transition: transform .15s, border-color .15s; outline: none;
}
.pd2-swatch.active,
.pd2-swatch.in-selection { transform: scale(1.15); border-color: var(--btn-blue); }
.pd2-swatch:hover { transform: scale(1.1); }
.pd2-pill-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.pd2-pill {
  border: 1.5px solid var(--pp-border); border-radius: 6px;
  padding: 5px 14px; font-size: .82rem; font-weight: 600;
  cursor: pointer; background: #fff; transition: all .15s; outline: none; font-family: inherit;
}
.pd2-pill.active,
.pd2-pill.in-selection { border-color: var(--btn-blue); background: var(--btn-blue); color: #fff; }
.pd2-pill:hover { border-color: var(--btn-blue); }

/* ── Multi-variants panel ── */
#mv-panel { border: 1.5px solid var(--pp-border); border-radius: 12px; padding: 16px; background: #fff; animation: mvFadeIn .25s ease; }
@keyframes mvFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.mv-panel__title { font-size: .82rem; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.mv-count-badge { background: var(--btn-blue); color: #fff; border-radius: 20px; padding: 1px 9px; font-size: .72rem; margin-left: auto; }
.mv-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.mv-table th { padding: 5px 8px; text-align: left; color: #999; font-weight: 600; font-size: .72rem; text-transform: uppercase; border-bottom: 1px solid var(--pp-border); }
.mv-table td { padding: 8px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; }
.mv-table tbody tr:last-child td { border-bottom: none; }
.mv-variant-label { font-weight: 600; color: var(--text-dark); }
.mv-qty-ctrl { display: flex; align-items: center; gap: 4px; }
.mv-qty-ctrl button { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--pp-border); background: #fff; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s; }
.mv-qty-ctrl button:hover { background: var(--btn-blue); color: #fff; border-color: var(--btn-blue); }
.mv-qty-ctrl input { width: 36px; text-align: center; border: 1px solid var(--pp-border); border-radius: 4px; padding: 2px 4px; font-size: .82rem; font-family: inherit; }
.mv-remove-btn { background: none; border: none; cursor: pointer; color: #e53935; font-size: 1rem; padding: 2px 6px; border-radius: 4px; }
.mv-grand-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--pp-border); font-weight: 800; font-size: .95rem; }
.mv-grand-total__amount { font-size: 1.15rem; color: #e53935; }
.mv-btn-order { width: 100%; margin-top: 12px; padding: 13px; background: var(--btn-blue); color: #fff; border: none; border-radius: 8px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: filter .2s; }
.mv-btn-order:hover { filter: brightness(1.1); }
.mv-btn-add { width: 100%; padding: 11px; margin-top: 4px; border: 2px dashed var(--btn-blue); border-radius: 8px; background: transparent; color: var(--btn-blue); font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; font-family: inherit; }
.mv-btn-add:hover { background: var(--btn-blue); color: #fff; }
.mv-empty-msg { text-align: center; color: #aaa; font-size: .82rem; padding: 10px 0; }

/* ── Qty controls (garde compatibilité avec le JS existant) ── */
.pd-qty-ctrl { display: flex; align-items: center; border: 1px solid var(--pp-border); border-radius: 6px; overflow: hidden; }
.pd-qty-btn { width: 38px; height: 38px; background: #f7f7f7; border: none; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.pd-qty-btn:hover { background: #eee; }
.pd-qty-input { width: 52px; height: 38px; border: none; text-align: center; font-size: 15px; font-weight: 600; border-left: 1px solid var(--pp-border); border-right: 1px solid var(--pp-border); font-family: inherit; background: #fff; }

.pd2-inline-total { display: flex; flex-direction: column; align-items: flex-end; }
.pd2-inline-total__label { font-size: .72rem; color: #999; font-weight: 500; text-transform: uppercase; }
.pd2-inline-total__amount { font-size: 1.3rem; font-weight: 800; color: #e53935; white-space: nowrap; }

/* Shipping block info */
.pf-shipping { display: flex; align-items: flex-start; gap: 10px; background: #f0fdf6; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 14px; }
.pf-shipping__icon { flex-shrink: 0; color: var(--btn-blue); }
.pf-shipping__text { font-size: .84rem; color: #1b4332; line-height: 1.65; }

/* ── Desktop sticky commander (conservé mais caché sur mobile) ── */
#sticky-commander {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1200; background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 10px 16px;
  display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 -2px 12px rgba(0,0,0,.10);
}
#sticky-commander .sticky-cmd-btn {
  width: 100%; max-width: 480px; padding: 14px 24px;
  background: var(--btn-blue); color: #fff; border: none;
  border-radius: 12px; font-size: 1rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
@media (max-width: 1023px) { #sticky-commander { display: none !important; } }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .pp-gallery { border-radius: 0; }
  .pd-breadcrumb { border-radius: 0; }
  .form-row { grid-template-columns: 1fr; }
  .pd2-paliers__grid { gap: 6px; }
  .pd2-palier-card { min-width: 0; padding: 8px 5px; }
  .pd2-palier-card__prix { font-size: .88rem; }
}
@media (max-width: 480px) {
  .pp-price-block__current { font-size: 22px; }
  .pp-layout {
    padding-top: calc(var(--promo-h, 40px) + var(--navbar-h, 64px));
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    gap: 0;
  }
  .pp-info-col { gap: 0; }
  .pp-price-block, .pp-shipping-info, .pp-section-bg,
  .pp-variants, .pd2-paliers, .pd2-variant-block,
  .pp-quantity, .pp-total-bar, .pd2-trust,
  .pp-accordion, .pf-acc, .pp-reviews,
  .pp-description {
    border-radius: 0;
    margin-bottom: 6px;
  }
  /* "Vous aimerez aussi" : garde sa séparation visuelle sur mobile */
  .pp-related {
    border-radius: 0;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  #votre-choix-panel { border-radius: 0; margin-bottom: 6px; }
  .pd-breadcrumb { padding: 8px 14px; }
}

/* ═══════════════════════════════════════════════════════
   FEEDBACK :ACTIVE spécifique page produit
   (complète les règles globales de style.css)
   ═══════════════════════════════════════════════════════ */

/* Bouton ajouter variante */
.mv-btn-add:active {
  background: var(--btn-blue) !important;
  color: #fff !important;
  transform: scale(0.97) !important;
  transition: none !important;
}

/* Formulaire commande — bouton valider */
.btn-add-order:active {
  transform: scale(0.97) !important;
  opacity: .84 !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Bouton fermer le bottom sheet */
.order-sheet-close:active {
  background: #d0d0d0 !important;
  transform: scale(0.9) !important;
  transition: none !important;
}

/* Panel "Votre choix" — boutons qty et supprimer */
.vc-qty-ctrl button:active {
  background: var(--btn-blue) !important;
  color: #fff !important;
  transform: scale(0.88) !important;
  transition: none !important;
}
.vc-remove-btn:active {
  background: #ffd0d0 !important;
  transform: scale(0.88) !important;
  transition: none !important;
}

/* Avis — étoiles */
.star-rating-input label:active {
  transform: scale(1.25) !important;
  transition: none !important;
}

/* Bouton "Voir plus/moins" description */
.pp-description__toggle:active {
  background: #e0e0e0 !important;
  transition: none !important;
}

/* Dots galerie */
.pd-dot:active {
  transform: scale(0.75) !important;
  transition: none !important;
}

/* Miniatures galerie */
.pp-thumbs__item:active {
  transform: scale(0.93) !important;
  opacity: .85 !important;
  transition: none !important;
}

/* Sticky bar bouton boutique */
.pp-sticky-bar__shop:active {
  background: #e2f4eb !important;
  transform: scale(0.88) !important;
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════
   FLIPKART / SHOPSY REDESIGN — IciOnDeal identity
   ═══════════════════════════════════════════════════════ */

/* ── Rating pill (green badge "4.3 ★") ── */
.pp-rating-pill {
  display: inline-flex;
  align-items: center;
  background: #388e3c;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  gap: 3px;
  white-space: nowrap;
  letter-spacing: .01em;
}
.pp-rating-count {
  font-size: .83rem;
  color: #757575;
}

/* ── Discount badge → vert IciOnDeal (override rouge mobile) ── */
.pp-price-block__discount {
  background: #388e3c !important;
  color: #fff !important;
}

/* ── Prix courant : rouge IciOnDeal ── */
.pp-price-block__current {
  color: #e53935 !important;
}
.pp-qty-price-row__price {
  color: #e53935 !important;
}
.pp-total-bar__amount {
  color: #e53935 !important;
}

/* ── Barre sticky mobile 2 boutons (pd-sticky-bottom) ── */
.pd-sticky-bottom {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 998;
  height: 56px;
  background: #fff;
  border-top: 1px solid var(--border, #E5E5E0);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 1023px) {
  .pd-sticky-bottom { display: flex !important; }
  #pp-sticky-bar-new { display: none !important; }
}
@media (min-width: 1024px) {
  .pd-sticky-bottom { display: none !important; }
}

.pd-sticky-bottom__cart,
.pd-sticky-bottom__buy {
  flex: 1;
  height: 56px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: filter .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pd-sticky-bottom__cart {
  background: var(--primary, #2d6a4f);
  color: #fff;
}
.pd-sticky-bottom__buy {
  background: var(--btn-blue-hover, #1b4332);
  color: #fff;
}
.pd-sticky-bottom__cart:active { filter: brightness(.88); transition: none; }
.pd-sticky-bottom__buy:active  { filter: brightness(.88); transition: none; }
.pd-sticky-bottom__cart:disabled,
.pd-sticky-bottom__buy:disabled { opacity: .45; cursor: not-allowed; }

/* Séparateur vertical entre les deux boutons */
.pd-sticky-bottom__cart + .pd-sticky-bottom__buy {
  border-left: 1px solid rgba(255,255,255,.25);
}

/* ── "Vous économisez" (Shopsy style) ── */
.pp-you-save {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: .82rem;
  font-weight: 600;
  color: #388e3c;
  padding: 2px 0 0;
}
.pp-you-save__label { font-weight: 600; }
.pp-you-save__amount { font-weight: 800; }

/* ── Section Highlights / Points forts (Shopsy style) ── */
.pp-highlights {
  background: #fff;
  padding: 12px 16px;
}
.pp-highlights__title {
  font-size: .72rem;
  font-weight: 700;
  color: #878787;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.pp-highlights__list {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: disc;
}
.pp-highlights__list li {
  font-size: .84rem;
  color: #212121;
  line-height: 1.55;
  padding-left: 2px;
}

/* ── Livraison desktop — cachée sur mobile (remplacée par pp-mobile-delivery) ── */
@media (max-width: 767px) {
  .pd-desktop-delivery-row { display: none !important; }
}

/* ── Delivery rows mobile : masquée sur desktop ── */
@media (min-width: 768px) {
  .pp-mobile-delivery { display: none; }
}

/* ── Détail accordéon mobile — caché par défaut partout ── */
.pp-md-detail { display: none; }

/* ══════════════════════════════════════════════════════════
   SHOPSY MOBILE REDESIGN — présentation mobile uniquement
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* --- Layout : 0 padding pour galerie plein écran --- */
  .pp-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }
  .pp-info-col { gap: 0 !important; }

  /* --- Séparations entre sections (fond gris #f7f7f7 = séparateur entre cartes blanches) --- */
  .pp-qty-price-row   { margin-top: 8px !important; }
  .pd2-variant-block  { margin-top: 8px !important; }
  .pd2-paliers        { margin-top: 8px !important; }
  .pp-mobile-delivery { margin-top: 8px !important; }
  .pp-related         { margin-top: 8px !important; }
  .pp-reviews         { margin-top: 8px !important; }

  /* --- Sticky bar Shopsy : Cart = outline, Buy = solid green --- */
  .pd-sticky-bottom__cart {
    background: #fff !important;
    color: var(--primary, #2d6a4f) !important;
    font-weight: 800 !important;
    border-right: 1px solid rgba(45,106,79,.2) !important;
  }
  .pd-sticky-bottom__buy {
    background: var(--primary, #2d6a4f) !important;
    color: #fff !important;
  }
  .pd-sticky-bottom__cart + .pd-sticky-bottom__buy { border-left: none !important; }

  /* --- Masquer les éléments non Shopsy sur mobile --- */
  .pp-guarantees    { display: none !important; }
  .pp-shipping-info { display: none !important; }
  .pd-sections-wrap { display: none !important; }
  .pp-highlights    { display: none !important; }

  /* --- pd-tabs-acc : 2 onglets côte à côte (Description + Détails) --- */
  .pd-tabs-acc { padding: 0 !important; background: transparent !important; margin-top: 8px; }
  .pd-tabs-acc__header {
    display: flex !important;
    background: #fff;
    border-bottom: 2px solid #f0f0f0;
    padding: 0 16px;
  }
  /* Masquer le tab Avis de la barre (reviews accessibles via section dédiée) */
  #pd-tab-avis { display: none !important; }
  .pd-tabs-acc__tab {
    flex: 1;
    padding: 13px 8px;
    font-size: .88rem;
    font-weight: 600;
    color: #757575;
    justify-content: center;
  }
  .pd-tabs-acc__tab.active {
    color: var(--primary, #2d6a4f);
    border-bottom-color: var(--primary, #2d6a4f);
    font-weight: 700;
  }
  .pd-tab-chev { display: none !important; }
  .pd-tabs-acc__body {
    display: none !important;
    background: #fff;
    animation: none !important;
  }
  .pd-tabs-acc__body.open { display: block !important; }
  /* Masquer les titres redondants à l'intérieur des corps (le tab fait office de titre) */
  .pd-tabs-acc__body .pp-mob-section-title { display: none !important; }

  /* --- Titre de section mobile (barre titre dans chaque body) --- */
  .pp-mob-section-title {
    font-size: .9rem;
    font-weight: 700;
    color: #212121;
    padding: 14px 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
  }
  .pp-mob-section-title__action,
  a.pp-mob-section-title__action {
    font-size: .76rem;
    font-weight: 600;
    color: var(--primary, #2d6a4f);
    background: none;
    border: 1.5px solid var(--primary, #2d6a4f);
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* --- Padding interne des corps de tabs --- */
  .pd-desc-wrap { padding: 12px 16px 4px; }
  .pd-desc-more-btn { display: block !important; margin: 8px 16px 14px; }
  .pd-rating-summary { padding: 12px 16px 8px; }
  .pd-rev-list { padding: 0 16px; }
  .pd-rev-empty { padding: 12px 16px; }
  #pd-tab-body-details { padding-bottom: 8px; }
  #pd-tab-body-details .pd-stbl { width: 100%; margin: 0; }
  #pd-tab-body-details .pd-stbl .sl { padding-left: 16px; }
  #pd-tab-body-details .pd-stbl .sv { padding-right: 16px; }
  #pd-tab-body-details .pd-stbl .sg td { padding-left: 16px; padding-right: 16px; }
  .review-form { padding: 0 16px 16px; }

  /* --- Section livraison mobile --- */
  .pp-mobile-delivery { background: #fff; margin-top: 6px; padding: 0 16px; }
  .pp-mobile-delivery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 12px;
    border-bottom: 1px solid #ebebeb;
  }
  .pp-mobile-delivery__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #212121;
  }
  .pp-mobile-delivery__pin {
    font-size: .85rem;
    font-weight: 700;
    color: #2874f0;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .pp-mobile-delivery__item { border-bottom: 1px solid #ebebeb; }
  .pp-mobile-delivery__item:last-child { border-bottom: none; }
  .pp-mobile-delivery__row {
    display: flex;
    align-items: center;
    padding: 1.3px 0;
    gap: 16px;
    border-top: none !important;
  }
  .pp-mobile-delivery__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .pp-mobile-delivery__icon svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .pp-mobile-delivery__content { flex: 1; min-width: 0; }
  .pp-mobile-delivery__label {
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    display: block;
    line-height: 1.35;
  }
  .pp-mobile-delivery__sub {
    font-size: .78rem;
    color: #757575;
    display: block;
    margin-top: 3px;
    line-height: 1.3;
  }
  .pp-mobile-delivery__item.no-sub .pp-mobile-delivery__sub { display: none; }
  .pp-mobile-delivery__arrow {
    color: #878787;
    font-size: 1.1rem;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
    transition: transform .2s ease;
  }
  .pp-md-toggle { cursor: pointer; user-select: none; }
  .pp-md-toggle.is-open .pp-mobile-delivery__arrow { transform: rotate(90deg); }
  .pp-md-detail {
    display: none;
    padding: 0 0 12px 52px;
    font-size: .82rem;
    color: #555;
    line-height: 1.6;
  }
  .pp-md-detail.is-open { display: block; }
  .pp-md-detail p { margin: 0 0 6px; }
  .pp-md-detail p:last-child { margin-bottom: 0; }
  .pp-md-detail strong { color: #212121; }
}