/* ============================================================================
   Collection (PLP) — Final Buyer-Ready Styles (with image & badge fixes)
   - Uniform image area across cards (pixel-consistent, responsive)
   - Title locked to exactly 4 lines (perfect row alignment)
   - Right-aligned red discount badge with white text
   - Reuses base .p-card visuals from home.css
   ========================================================================== */

/* -------------------- Layout Controls -------------------- */
:root{
  /* Card media height (tuned per breakpoint below) */
  --card-media-h: 220px;        /* desktop default */
  --card-radius: 14px;
  --card-pad: 12px;
}

@media (max-width:1200px){ :root{ --card-media-h: 200px; } }
@media (max-width:900px) { :root{ --card-media-h: 190px; } }
@media (max-width:560px) { :root{ --card-media-h: 180px; } }

/* -------------------- Top Header: Title, Count, Sort -------------------- */
.pl-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:18px 0;
}
.pl-title{ margin:0; font-size:28px; font-weight:800; line-height:1.2; }
.pl-tools{ display:flex; align-items:center; gap:12px; }
.pl-count{ color:#64748b; font-size:14px; }

/* Native select keeps platform a11y while lightly styled */
.pl-sort select{
  height:36px; border-radius:8px; border:1px solid #e5e7eb;
  padding:0 10px; background:#fff; font:inherit; color:inherit; cursor:pointer;
}

/* -------------------- Filter Pills (optional) -------------------- */
.pl-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px;
}
.pl-filters .pill{
  padding:8px 12px; border-radius:999px; background:#fff;
  border:1px solid #e5e7eb; cursor:pointer; line-height:1;
}
.pl-filters .pill.is-active{
  background:#111827; color:#fff; border-color:transparent;
}

/* -------------------- Product Grid -------------------- */
.pl-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(220px,1fr));
  gap:16px;
}
@media (max-width:1200px){ .pl-grid{ grid-template-columns:repeat(3, minmax(200px,1fr)); } }
@media (max-width:900px) { .pl-grid{ grid-template-columns:repeat(2, minmax(200px,1fr)); } }
@media (max-width:560px){ .pl-grid{ grid-template-columns:1fr; } }

/* -------------------- Pagination -------------------- */
.pl-pager{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:18px 0 32px;
}
.pl-pager [data-pl-prev],
.pl-pager [data-pl-next]{
  height:36px; min-width:36px; border-radius:10px;
  border:1px solid #e5e7eb; background:#fff; cursor:pointer;
}
.pl-pages{ display:flex; gap:6px; }
.pl-pages button{
  min-width:32px; height:32px; border:1px solid #e5e7eb;
  background:#fff; border-radius:8px; cursor:pointer;
}
.pl-pages button[aria-current="true"]{
  background:#111827; color:#fff; border-color:transparent;
}

/* -------------------- A11y Helper (safe include) -------------------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================================
   PRODUCT CARD — Alignment, Uniform Media, and Badge
   ========================================================================== */

/* Card is a vertical flex container so price/CTA can align at bottom */
.p-card{
  position:relative;            /* required for top-right badge */
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius: var(--card-radius);
  overflow:hidden;              /* keeps badge/media corners crisp */
}

/* --- Uniform media area (same height on every card) --- */
.p-card__media{
  height: var(--card-media-h);  /* fixed visual window per breakpoint */
  background:#f6f7fb;          /* light plate like your reference */
  display:grid; place-items:center;
  overflow:hidden;
}

/* Images auto-fit inside the reserved window without layout shifts */
.p-card__media img{
  display:block;
  max-width: 85%;
  max-height: calc(var(--card-media-h) - 20px);  /* inner breathing space */
  height:auto; width:auto;
  object-fit:contain;           /* no cropping; keeps product integrity */
  transition: transform .2s ease;
}
.p-card:hover .p-card__media img{ transform: translateY(-2px); } /* subtle lift */

/* --- Title: lock to exactly 4 lines (clamped if longer) --- */
.p-card__title{
  --lh: 1.25;                   /* keep in sync with your type scale */
  line-height: var(--lh);

  /* Reserve exactly 4 lines regardless of content */
  min-height: calc(var(--lh) * 4em);
  max-height: calc(var(--lh) * 4em);

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
  word-break: break-word;
  margin: 8px 0;
}
.p-card__title a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}

/* Meta and CTA rows pin to the bottom to keep rows even */
.p-card__meta,
.p-card__actions{ margin-top:auto; }

/* Optional: enforce a minimum height for price/meta row so cards without
   extra badges or labels still align with those that have them */
.p-card__meta{ min-height: 1.6em; }

/* --- Discount/Promo Badge (top-right, red bg, white text) --- */
.p-card__badge{
  position:absolute;
  top:10px; right:10px; z-index:2;
  background:#ef4444;           /* Tailwind red-500 equivalent */
  color:#fff;
  font-weight:700;
  font-size:12px;
  line-height:1;
  padding:6px 9px;
  border-radius:999px;          /* pill shape like reference */
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  pointer-events:none;          /* purely decorative */
}

/* Mobile keeps 4-line lock and scales media height slightly down */
@media (max-width:560px){
  .p-card__title{
    --lh: 1.3;
    min-height: calc(var(--lh) * 4em);
    max-height: calc(var(--lh) * 4em);
  }
}

/* Defensive reset for any images inside card body to avoid jumps */
.p-card img{ display:block; max-width:100%; height:auto; object-fit:contain; }