/**
 * product-r2.css — Akekart Product Experience — Convergence Pass
 * ================================================================
 * RULES:
 *  - NO transform on containers or images (causes overflow)
 *  - NO opacity animations (causes CLS / invisible content)
 *  - NO will-change (GPU memory pressure)
 *  - NO -webkit-text-fill-color tricks
 *  - NO !important except to neutralise known conflicts
 *  - Transitions: color/background/border/shadow ONLY
 *  - Border-radius: match embedded DNA (12px cards, 8px cells, 20px pills)
 *  - Shadow depth: max 0 2px 12px rgba(0,0,0,.06)
 *  - Every override must make the page feel MORE Akekart, not less
 * ================================================================
 */

/* ─────────────────────────────────────────────────────────────
   1. TYPOGRAPHY — subtle rhythm improvement
   ───────────────────────────────────────────────────────────── */
.c-brand {
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.c-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: #0f172a;
  margin: 0 0 10px;
}
@media (min-width: 992px) {
  .c-title { font-size: 17px; }
}
.c-price {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.015em;
}
.c-off {
  font-size: 12px;
  font-weight: 800;
  color: #059669;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}
.c-mrp {
  font-size: 13px;
  color: #94a3b8;
}
.c-head {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .005em;
}

/* ─────────────────────────────────────────────────────────────
   2. CARDS — consistent elevation, no hover transforms
   ───────────────────────────────────────────────────────────── */
.card-pro {
  border-radius: 12px;
  border-color: #e4eaf3;
  box-shadow: 0 1px 6px rgba(15,23,42,.04);
}
/* No hover transform on cards — preserves native marketplace rhythm */

/* ─────────────────────────────────────────────────────────────
   3. GALLERY — stable, no overflow-causing transforms
   ───────────────────────────────────────────────────────────── */
.img-showcase {
  background: #fafbfc;
  /* overflow hidden essential — must not be overridden */
  overflow: hidden;
}
/* NO transform on image hover — that caused the overflow regression */
.img-showcase img {
  transition: none; /* remove the opacity+transform transition */
}

/* Thumbnail strip */
.r1-thumb-strip {
  background: #fafbfc;
  border-top: 1px solid #f1f5f9;
  padding: 8px 10px;
  gap: 7px;
}
.r1-thumb {
  width: 54px;
  height: 54px;
  border-radius: 7px;
  border: 2px solid #e2e8f0;
  background: #fff;
  transition: border-color .15s;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}
.r1-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 2px;
  box-sizing: border-box;
}
.r1-thumb.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}
.r1-thumb:hover:not(.active) {
  border-color: #93c5fd;
}
/* NO scale transform on thumbs — native marketplace feel */

/* Gallery action buttons */
.img-showcase button {
  background: rgba(255,255,255,.9) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  transition: background .15s !important;
}
.img-showcase button:hover {
  background: #fff !important;
  /* no transform */
}

/* ─────────────────────────────────────────────────────────────
   4. TRUST MOMENTUM BADGES — native Akekart pill style
   ───────────────────────────────────────────────────────────── */
.r2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}
.r2-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .02em;
  border-width: 1px;
  border-style: solid;
  /* no hover transform — badges are signals, not buttons */
}
.r2-badge i { font-size: 11px; }

/* ─────────────────────────────────────────────────────────────
   5. STAR / AKE BADGES — matching DNA
   ───────────────────────────────────────────────────────────── */
.star-badge {
  background: #10b981;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  gap: 3px;
  font-weight: 800;
}
.ake-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  background: #1e3a8a;
}

/* ─────────────────────────────────────────────────────────────
   6. SELLER TRUST CARD — premium identity, native rhythm
   ───────────────────────────────────────────────────────────── */
.r2-seller-card {
  border-radius: 12px;
  border: 1px solid #e4eaf3;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(15,23,42,.04);
  background: #fff;
  /* no hover effect — seller card is informational */
}
.r2-seller-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eff6ff;
  border: 2px solid #2563eb;
  font-size: 16px;
  font-weight: 800;
  color: #1d4ed8;
  flex-shrink: 0;
  /* no shadow ring — keep it clean/native */
}
.r2-seller-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -.01em;
}
.r2-seller-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.r2-seller-stat {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  border: 1px solid #f1f5f9;
  transition: border-color .15s;
}
.r2-seller-stat:hover {
  border-color: #bfdbfe;
  background: #f0f6ff;
  /* no transform */
}
.r2-seller-stat .sv {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  display: block;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.r2-seller-stat .sk {
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
  margin-top: 2px;
}

/* Verified pill — native Akekart language */
.ake-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  background: #1e3a8a;
  color: #fff;
  letter-spacing: .03em;
  vertical-align: middle;
}
.ake-verified-pill i { color: #93c5fd; font-size: 10px; }

/* ─────────────────────────────────────────────────────────────
   7. ECOSYSTEM PERKS / FEATURES GRID
   ───────────────────────────────────────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.feat-item {
  padding: 12px 5px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color .15s;
  /* no transform/shadow on hover — keep it compact + native */
}
.feat-item:hover {
  border-color: #93c5fd;
}
.feat-item i {
  font-size: 20px;
  color: #2563eb;
  width: 36px;
  height: 36px;
  background: #eff6ff;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feat-item span {
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  line-height: 1.3;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   8. OFFERS CARD — premium row structure
   ───────────────────────────────────────────────────────────── */
.ake-offer-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fafbfc;
  border: 1px solid #f1f5f9;
  transition: border-color .15s, background .15s;
}
.ake-offer-row:hover {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.ake-offer-row i {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ake-offer-row div {
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}
.ake-offer-row strong {
  color: #0f172a;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   9. PAYMENT BADGES
   ───────────────────────────────────────────────────────────── */
.pmt-badges {
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pmt-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  letter-spacing: .02em;
}
.pmt-badge.available {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

/* ─────────────────────────────────────────────────────────────
   10. WALLET ROW
   ───────────────────────────────────────────────────────────── */
.r2-wallet-row {
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  color: #5b21b6;
  font-weight: 600;
  gap: 8px;
}

/* ─────────────────────────────────────────────────────────────
   11. STOCK + SUBSCRIBE TEASER
   ───────────────────────────────────────────────────────────── */
.ake-stock-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #059669;
  font-weight: 700;
  margin-bottom: 5px;
}
.ake-stock-ok::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ake-sub-teaser {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #5b21b6;
  font-weight: 700;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  border-radius: 7px;
  padding: 7px 10px;
  margin-bottom: 8px;
}
.ake-sub-teaser i { font-size: 13px; flex-shrink: 0; }
.ake-sub-teaser span {
  color: #7c3aed;
  cursor: pointer;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   12. FBT — PREMIUM BUNDLE CARD
   ───────────────────────────────────────────────────────────── */
.ake-fbt-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  overflow-x: auto;
}
.ake-fbt-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 76px;
}
.ake-fbt-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fafbfc;
  padding: 5px;
  box-sizing: border-box;
}
.ake-fbt-price {
  font-size: 10px;
  font-weight: 800;
  color: #0f172a;
}
.ake-fbt-plus {
  font-size: 18px;
  font-weight: 800;
  color: #cbd5e1;
  flex-shrink: 0;
}
.ake-fbt-action {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 95px;
  margin-left: auto;
}
.ake-fbt-combo {
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ake-fbt-total {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
}
.ake-fbt-save {
  font-size: 10px;
  font-weight: 700;
  color: #059669;
  background: #dcfce7;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}
.ake-fbt-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 9px 13px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  transition: background .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ake-fbt-btn:hover { background: #1d4ed8; }
/* no transform on FBT button — keep native */

/* ─────────────────────────────────────────────────────────────
   13. RECOMMENDATION RAIL — native Akekart cards
   ───────────────────────────────────────────────────────────── */
.r2-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.r2-rail::-webkit-scrollbar { display: none; }
.r2-rail:active { cursor: grabbing; }

.r2-rcard {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 150px;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.r2-rcard:hover {
  border-color: #93c5fd;
  box-shadow: 0 3px 12px rgba(15,23,42,.08);
  /* no translateY — avoids visual fragmentation */
}
.r2-rimg {
  width: 100%;
  height: 130px;
  object-fit: contain;
  background: #f8fafc;
  display: block;
  padding: 8px;
  box-sizing: border-box;
  /* no transform — caused the overflow regression */
}
.r2-rinfo {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.r2-rtitle {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: 31px;
  letter-spacing: -.005em;
}
.r2-rprice {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
}
.r2-rdisc {
  font-size: 10px;
  color: #059669;
  font-weight: 700;
  background: #dcfce7;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  width: fit-content;
}
.r2-rtrust {
  font-size: 9px;
  color: #64748b;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
/* Discount overlay on rail cards (added via JS) */
.r2-disc-overlay {
  position: absolute;
  top: 7px;
  left: 7px;
  background: #ec4899;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .02em;
  z-index: 1;
  pointer-events: none;
}
.r2-rcard { position: relative; } /* needed for overlay positioning */

/* ─────────────────────────────────────────────────────────────
   14. MOBILE STICKY BAR
   ───────────────────────────────────────────────────────────── */
.mob-action-bar {
  padding: 10px 14px 12px;
  background: rgba(255,255,255,.97);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 12px rgba(15,23,42,.07);
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────
   15. ACTION BUTTONS — matching existing DNA exactly
   ───────────────────────────────────────────────────────────── */
.b-cart {
  border-radius: 8px;
  border: 2px solid #2563eb;
  transition: background .15s;
}
.b-cart:hover { background: #eff6ff; }

.b-buy {
  border-radius: 8px;
  transition: background .15s, box-shadow .15s;
}
.b-buy:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 14px rgba(37,99,235,.25);
}
.b-act:active { opacity: .88; } /* replace scale with opacity — no layout shift */

/* Monopoly buttons — don't override colors, just clean spacing */
.monopoly-actions { gap: 8px; margin-top: 10px; }
.m-btn {
  border-radius: 10px;
  min-height: 60px;
  padding: 10px 5px;
}
.m-btn:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  /* no transform */
}

/* ─────────────────────────────────────────────────────────────
   16. TRUST / PARTIAL SLOTS — defensive containment
   ───────────────────────────────────────────────────────────── */
.r1-intel-slot:empty,
.r1-trust-slot:empty,
.r1-partial-wrap:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.r1-intel-slot { margin-top: 6px; }
.r1-trust-slot { margin-top: 8px; overflow: hidden; }
.r1-partial-wrap { min-height: 0; overflow: hidden; }

/* ─────────────────────────────────────────────────────────────
   17. REVIEWS — clean, native polish
   ───────────────────────────────────────────────────────────── */
.review-item {
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
}
.review-item:last-child { border-bottom: none; }
.r-rate {
  background: #10b981;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
}
.r-rate.mid { background: #f59e0b; }
.r-rate.low { background: #ef4444; }
.r-text { font-size: 13px; color: #374151; line-height: 1.65; }
.r-user { font-size: 11px; color: #9ca3af; }

/* ─────────────────────────────────────────────────────────────
   18. GROUP DEAL BANNER
   ───────────────────────────────────────────────────────────── */
.group-deal-banner {
  border-radius: 12px;
  /* preserve original gradient from embedded CSS */
}
.group-deal-banner:hover {
  box-shadow: 0 3px 12px rgba(124,58,237,.12);
  /* no transform */
}
/* disc-big: use color only, NO gradient text (invisible on some browsers) */
.group-deal-banner .disc-big {
  color: #7c3aed;
  /* no background-clip text trick */
}

/* ─────────────────────────────────────────────────────────────
   19. MODALS — minimal upgrade
   ───────────────────────────────────────────────────────────── */
.modal-box { border-radius: 16px; }
.modal-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.modal-btn { border-radius: 9px; }
.modal-btn:hover { opacity: .93; } /* opacity not transform */
.freq-btn { border-radius: 10px; }

/* ─────────────────────────────────────────────────────────────
   20. RESPONSIVE — matching existing breakpoints exactly
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .c-title { font-size: 15px; }
  .c-price { font-size: 22px; }
  .r2-seller-stats { grid-template-columns: repeat(2, 1fr); }
  .r2-seller-stat .sv { font-size: 12px; }
  .r2-rcard { width: 135px; }
  .r2-rimg { height: 115px; }
  .feat-grid { gap: 6px; }
  .feat-item { padding: 10px 4px 9px; }
  .feat-item i { width: 32px; height: 32px; font-size: 17px; border-radius: 8px; }
  .feat-item span { font-size: 9px; }
  .m-btn { font-size: 10px; padding: 8px 4px; min-height: 56px; }
  .m-btn i { font-size: 16px; }
  .b-act { height: 44px; font-size: 12px; }
  .r1-thumb { width: 50px; height: 50px; }
  .ake-fbt-img { width: 62px; height: 62px; }
}
@media (max-width: 360px) {
  .r2-rcard { width: 128px; }
  .r2-rimg { height: 108px; }
  .c-price { font-size: 20px; }
}

/* ─────────────────────────────────────────────────────────────
   21. B2B CARD
   ───────────────────────────────────────────────────────────── */
.b2b-card {
  border-radius: 10px;
  background: #f8fafc;
}
.btn-b2b {
  border-radius: 7px;
  transition: background .15s;
}
.btn-b2b:hover { background: #0f172a; }