/* ShoPin — Promotions flash : prix barré, badge, minuteur, cartes "hot" */
.price-wrap.promo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price-fcfa.promo-now{color:#e11900;font-weight:900}
.price-old{color:#9aa4b2;text-decoration:line-through;font-size:.82em;font-weight:600}
.promo-pct{background:#e11900;color:#fff;font-weight:800;font-size:11px;padding:2px 7px;border-radius:6px;letter-spacing:.02em}
.promo-timer{margin-top:4px;font-size:11px;font-weight:700;color:#e11900;display:flex;align-items:center;gap:4px}
.promo-timer b{font-variant-numeric:tabular-nums}
.promo-timer.ended{color:#9aa4b2}
/* pastille coin sur les cartes en promo */
.pcard{position:relative}
.promo-flame{position:absolute;top:8px;left:8px;z-index:3;background:linear-gradient(135deg,#ff3b30,#ff6a1a);color:#fff;font-weight:800;font-size:11px;padding:3px 8px;border-radius:20px;box-shadow:0 3px 10px rgba(225,25,0,.4);animation:promoPulse 1.6s infinite}
@keyframes promoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* bandeau "en promotion" sur la fiche */
.promo-banner{background:linear-gradient(135deg,#ff3b30,#ff6a1a);color:#fff;padding:10px 14px;border-radius:12px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;box-shadow:0 6px 18px rgba(225,25,0,.28)}
.promo-banner .pb-timer{font-size:13px;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:20px;font-variant-numeric:tabular-nums}
/* entête sections promo/tendance */
.sec-hero{background:linear-gradient(135deg,#ff3b30,#ff6a1a);color:#fff;padding:20px 16px;border-radius:0 0 22px 22px;margin-bottom:16px}
.sec-hero h1{margin:0;font-size:22px}.sec-hero p{margin:4px 0 0;opacity:.92;font-size:13px}
@media (prefers-reduced-motion: reduce){.promo-flame{animation:none}}
/* liens topbar promos/tendances */
@media(max-width:600px){ .tb-hide-sm{display:none} }

/* ── Grille catalogue partagée (Tendances, Promotions, etc.) ──
   Ces styles n'étaient définis que dans index.php : les pages isolées
   affichaient les cartes en pleine largeur. On les rend globaux. */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.products-grid .pcard{background:var(--white,#fff);border-radius:var(--rad-lg,16px);border:1.5px solid transparent;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s;box-shadow:var(--sh,0 2px 12px rgba(15,31,61,.08))}
.products-grid .pcard:hover{border-color:var(--ora,#E8621A);box-shadow:var(--sh-lg,0 8px 32px rgba(15,31,61,.15));transform:translateY(-2px)}
.products-grid .pcard-img{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#E8EDF5}
.products-grid .pcard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.products-grid .pcard:hover .pcard-img img{transform:scale(1.05)}
.products-grid .pcard-body{padding:12px}
.products-grid .pcard-title{font-size:12.5px;color:var(--text,#0F1F3D);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;min-height:37px}
.products-grid .price-fcfa{font-size:16px;font-weight:800;color:var(--ora,#E8621A)}
.products-grid .price-cny{font-size:11px;color:var(--sub,#4D607A);margin-top:1px}
@media(max-width:600px){.products-grid{grid-template-columns:repeat(2,1fr);gap:10px}}