/* ==========================================================================
   ReWear — Unified Product Card
   Used by: index.php, explore.php, category.php
   Single source of truth so cards look/behave identically everywhere.
   ========================================================================== */

/* ---- Grid: real CSS Grid, independent of the theme's bootstrap classes
   so column counts are guaranteed (theme CSS was overriding row-cols-*) ---- */
.rw-grid{
  display:grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 6px;
  width:100%;
  margin-left:0 !important; margin-right:0 !important;
}
.rw-grid > *{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important; margin:0 !important; position:static !important;
  /* CSS Grid items don't shrink below their content's min-content width
     by default, even with width:auto — a long price string or title was
     forcing this column (and the whole page, on mobile) wider than the
     viewport. min-width:0 is what actually lets the track's 1fr win. */
  min-width:0;
}
@media (min-width:768px){ .rw-grid{ grid-template-columns: repeat(2, 1fr); gap:10px; } }
@media (min-width:992px){ .rw-grid{ grid-template-columns: repeat(3, 1fr); gap:10px; } }
@media (min-width:1200px){ .rw-grid{ grid-template-columns: repeat(4, 1fr); gap:10px; } }
/* explore.php has a filter sidebar eating width, so cap it at 3 columns on desktop */
@media (min-width:1200px){ .rw-grid.rw-grid-narrow{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:576px){ .rw-grid{ grid-template-columns: repeat(2, 1fr) !important; gap:6px !important; } }

.rw-card{
  background:#fff;
  border:1px solid var(--rw-border,#f1e3ea);
  border-radius:9px;
  height:100%;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  box-shadow:0 1px 4px rgba(34,16,26,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  width:100%;
  min-width:0; /* same fix, one level down: the card itself must be
                  allowed to shrink below its content's natural width */
}
.rw-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px -12px rgba(173,122,73,.24);
  border-color:#ffd0e2;
}

/* Image area is the main contributor to card height — square instead of
   portrait, so cards read shorter even as columns get wider. The card
   itself has NO overflow:hidden (only the thumbnail does, for the crop)
   so the "Buy Now" hover tooltip on the cart button isn't clipped. */
.rw-thumb-box{ position:relative; padding:4px; }
.rw-thumb{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:var(--rw-cream,#f5f5f6);
  border-radius:6px;
  overflow:hidden;
}
.rw-thumb img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  transition:transform .35s ease;
}
.rw-card:hover .rw-thumb img{ transform:scale(1.05); }

/* ---- Badges: small rounded pills, always legible ---- */
.rw-badge-discount{
  position:absolute; top:5px; left:5px;
  background:#ef4444; color:#fff;
  font-size:9.5px; font-weight:700;
  padding:3px 7px; border-radius:999px;
  z-index:2; line-height:1.3;
}
.rw-badge-condition{
  position:absolute; top:5px; right:5px;
  background:rgba(255,255,255,.95); color:var(--rw-text,#211018);
  border:1px solid var(--rw-primary,#AD7A49);
  font-size:9.5px; font-weight:700;
  padding:3px 8px; border-radius:999px;
  z-index:2; line-height:1.3;
  white-space:nowrap;
}

/* Tightened vertical rhythm: less padding, tighter line-height, smaller
   gaps between title/seller/price/lastbid/actions — this is what actually
   drives card height down, independent of column width. */
.rw-body{ padding:2px 7px 6px; display:flex; flex-direction:column; flex:1; }

.rw-title{
  font-size:11px; font-weight:700; line-height:1.22;
  color:var(--rw-text,#211018); margin:1px 0 2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:0;
}
.rw-title a{ color:inherit; text-decoration:none; }
.rw-card:hover .rw-title{ color:var(--rw-primary,#AD7A49); }

.rw-seller{
  font-size:9.5px; color:var(--rw-muted,#8a7680);
  margin-bottom:3px; font-weight:500;
  display:flex; align-items:center; gap:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rw-seller i{ color:var(--rw-primary,#AD7A49); font-size:9px; }

.rw-price-row{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.rw-price{ font-weight:800; font-size:11.5px; color:var(--rw-sage,#3E7A5C); display:flex; align-items:center; gap:5px; }
.rw-price.is-discounted .rw-price-new{ color:var(--rw-primary,#AD7A49); }
.rw-price-old{ text-decoration:line-through; color:#9ca3af; font-weight:600; font-size:9.5px; }

.rw-lastbid{ font-size:9.5px; color:var(--rw-muted,#8a7680); margin-top:2px; }
.rw-lastbid b{ color:var(--rw-text,#211018); font-weight:700; }

/* ---- Actions area: pinned to the bottom of every card (margin-top:auto)
   so button rows line up across a row even when titles/seller/lastbid
   text take up different amounts of space above them.
   Row 1 = offer/bid controls (or "Bid Placed").
   Row 2 = two clearly-labeled buttons so first-time users understand
   the difference between adding to the cart and buying immediately. ---- */
.rw-actions{
  display:flex; flex-direction:column; gap:6px;
  margin-top:auto; padding-top:5px;
  border-top:1px dashed var(--rw-border,#eee);
}
.rw-top-row{ display:flex; align-items:center; gap:4px; }
.rw-offer-btn{
  flex:1; font-size:10px; font-weight:600;
  padding:5px 4px; border-radius:6px;
  border:1px solid var(--rw-primary,#AD7A49);
  color:var(--rw-primary,#AD7A49); background:transparent;
  text-align:center; text-decoration:none !important;
  transition:background .2s ease, color .2s ease; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rw-offer-btn:hover{ background:var(--rw-primary,#AD7A49); color:#fff !important; }
.rw-offer-btn.is-hidden{ display:none; }

/* ---- Bid control: plain small input + a snug Done/tick button right
   next to it. No slider — just type the number. ---- */
.rw-bid-inline{ display:none; align-items:center; gap:3px; flex:1; min-width:0; }
.rw-bid-inline.is-open{ display:flex; }

.rw-bid-input{
  flex:1; width:auto !important; min-width:0; height:24px !important; font-size:10px !important;
  border:1px solid var(--rw-border,#e5e7eb); border-radius:12px !important;
  padding:0 8px !important; box-sizing:border-box;
  -moz-appearance:textfield; appearance:textfield;
}
.rw-bid-input::-webkit-outer-spin-button,
.rw-bid-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.rw-bid-input:focus{ outline:0; border-color:var(--rw-primary,#AD7A49); box-shadow:0 0 0 2px rgba(173,122,73,.15); }

.rw-bid-submit{
  flex-shrink:0; width:22px; height:22px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
  border-radius:50%; border:none; background:#10b981; color:#fff; cursor:pointer;
}

/* ---- Buy row: two clearly-labeled buttons side by side, 50/50 ---- */
.rw-buy-row{ display:flex; gap:6px; }

.rw-addcart-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:10.5px; font-weight:600;
  padding:6px 4px; border-radius:6px;
  border:1px solid var(--rw-primary,#AD7A49);
  color:var(--rw-primary,#AD7A49); background:#fff;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .2s ease, color .2s ease;
}
.rw-addcart-btn:hover{ background:var(--rw-primary,#AD7A49); color:#fff; }
.rw-addcart-btn[disabled]{ opacity:.6; cursor:default; }

.rw-cart-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:10.5px; font-weight:700;
  padding:6px 4px; border-radius:6px; border:none;
  background:var(--rw-primary,#AD7A49); color:#fff;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .2s ease, transform .2s ease;
}
.rw-cart-btn:hover{ background:var(--rw-primary-dark,#7C5734); transform:translateY(-1px); }
.rw-cart-btn[disabled]{ opacity:.6; cursor:default; }

.rw-bid-placed-inline{
  flex:1; text-align:center; font-size:10px; color:#10b981; font-weight:700;
}

/* ---- "Load more" section CTA: simple flat button, no gradient ---- */
.rw-loadmore-wrap{ text-align:center; margin-top:18px; }
.rw-loadmore-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--rw-primary,#AD7A49);
  color:#fff; padding:8px 20px; border-radius:7px;
  font-size:12.5px; font-weight:600; text-decoration:none;
  border:1px solid var(--rw-primary,#AD7A49);
  transition:background .2s ease;
}
.rw-loadmore-btn:hover{ background:var(--rw-primary-dark,#7C5734); color:#fff; }

/* ==========================================================================
   Mobile: keep 2 columns, shrink everything further, smaller image area
   ========================================================================== */
@media (max-width: 576px){
  .rw-card{ border-radius:7px; max-width:none; }
  .rw-thumb-box{ padding:3px; }
  .rw-thumb{ border-radius:5px; aspect-ratio:1/1; } /* shorter image area on mobile */

  .rw-badge-discount{ font-size:8.5px; padding:2px 6px; top:4px; left:4px; }
  .rw-badge-condition{ font-size:8.5px; padding:2px 7px; top:4px; right:4px; }

  .rw-body{ padding:4px 6px 6px; }
  .rw-title{ font-size:10.5px; margin:1px 0 2px; }
  .rw-seller{ font-size:8.5px; margin-bottom:2px; }
  .rw-seller i{ font-size:8px; }

  .rw-price{ font-size:14px; gap:4px; }
  .rw-price-old{ font-size:10.5px; }
  .rw-lastbid{ font-size:11px; margin-top:3px; font-weight:700; color:var(--rw-text,#211018); }
  .rw-lastbid b{ font-weight:800; }

  /* Trailing ".00" adds noise on the small mobile cards — hide it here only;
     desktop keeps the full "Rs.1,600.00" formatting. */
  .rw-price-decimals{ display:none; }

  .rw-actions{ gap:5px; padding-top:5px; }
  .rw-top-row{ gap:4px; }
  .rw-offer-btn{ font-size:9px; padding:6px 4px; border-radius:6px; }

  .rw-bid-inline{ gap:3px; }
  .rw-bid-input{ height:24px !important; font-size:9px !important; padding:0 7px !important; }
  .rw-bid-submit{ width:20px; height:20px; font-size:9px; }

  .rw-buy-row{ gap:4px; }
  .rw-addcart-btn, .rw-cart-btn{ font-size:8.5px; padding:6px 2px; border-radius:6px; gap:3px; }
  .rw-addcart-btn i, .rw-cart-btn i{ font-size:8.5px; }
  .rw-bid-placed-inline{ font-size:8.5px; }

  .rw-loadmore-btn{ padding:6px 14px; font-size:10.5px; gap:4px; }
  .rw-loadmore-btn i{ font-size:9px !important; }
}