/* Boutique : étiquettes papier / polaroids */
.shop-grid { align-items: start; gap: 34px 26px; }

.shop-grid .card {
  min-height: 470px;
  padding: 14px 14px 18px;
  color: #17131a;
  border: 0;
  border-radius: 0;
  background: #f2eee6;
  box-shadow: 0 18px 35px rgba(0, 0, 0, .34);
  overflow: visible;
}

.shop-grid .card::before {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  width: 88px;
  height: 26px;
  content: '';
  background: rgba(185, 177, 164, .72);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transform: translateX(-50%) rotate(-2deg);
}

.shop-grid .card:nth-child(3n + 2) { transform: rotate(1.15deg); }
.shop-grid .card:nth-child(3n) { transform: rotate(-1deg); }
.shop-grid .card:hover { transform: translateY(-7px) rotate(0); border-color: transparent; }

.shop-grid .card .card-img,
.shop-grid .card .coin-visual {
  width: 100%;
  height: 196px;
  margin: 0 0 18px;
  object-fit: cover;
  border: 1px solid #cbc3b7;
  filter: saturate(.25) contrast(1.08);
}

.shop-grid .card .coin-visual { display: none; }
.shop-grid .coin-card:not(:has(.card-img)) { min-height: 0; padding-top: 38px; }
.shop-grid .card h3 {
  margin: 0 4px 14px;
  color: #17131a;
  font: 400 28px/1 var(--brush);
  letter-spacing: .3px;
  text-transform: none;
}

.shop-grid .card .coin-amount { margin: 0 4px 16px; color: #17131a; }
.shop-grid .card .coin-amount b { font: 700 42px/1 var(--display); }
.shop-grid .card .coin-amount span { color: #5e564e; }
.shop-grid .card .coin-amount em { color: #32764c; }

/* Le montant est directement intégré au visuel des packs qui ont une photo. */
.shop-grid .card:has(.card-img) .coin-amount {
  position: absolute;
  z-index: 3;
  /* Centre du visuel de 196 px, sans déborder sur le titre. */
  top: 112px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 118px;
  margin: 0;
  padding: 8px 14px 7px;
  color: #fff8ed;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 4px;
  background: rgba(20, 16, 20, .82);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
}
.shop-grid .card:has(.card-img) .coin-amount b { color: #ffd37a; font-size: 34px; }
.shop-grid .card:has(.card-img) .coin-amount span { color: #fff8ed; font-size: 11px; letter-spacing: .13em; }
.shop-grid .card:has(.card-img) .coin-amount em { color: #c5f0d0; font-size: 11px; }
.shop-grid .card .price { margin: 0 4px 14px; color: #17131a; font-size: 34px; }
.shop-grid .card .price small { color: #625b54; }
.shop-grid .card ul { margin: 0 4px 18px; }
.shop-grid .card li { color: #403a37; border-top-color: rgba(40, 34, 29, .17); }
.shop-grid .card li::before { border-color: #bd4e25; }

.shop-grid .card .badge {
  z-index: 4;
  top: -14px;
  right: 12px;
  color: #fff5e8;
  border-radius: 0;
  background: #c64e25;
  transform: rotate(2deg);
}

.shop-grid .card .btn { margin: auto 4px 0; color: #fff9ef; background: #211a23; border-color: #211a23; }
.shop-grid .card .btn:hover { color: #fff; background: #c64e25; border-color: #c64e25; }
.shop-grid .card.featured { border: 0; box-shadow: 0 18px 35px rgba(0, 0, 0, .34); }

@media (max-width: 640px) {
  .shop-grid { gap: 32px 18px; }
  .shop-grid .card { min-height: 0; }
}