/*
PrintCraft Pro — Product Grid Widget
Replicates the "Shop Our Most Popular Garment Blanks" mockup section.
All styles are scoped under .pcp-grid-widget so they never leak.
*/

.pcp-grid-widget{
  /* Palette from the mockup (Material 3 tokens) */
  --pcp-g-primary-container:#f59e0b;
  --pcp-g-on-primary-fixed:#2a1700;
  --pcp-g-on-surface:#191c1e;
  --pcp-g-on-surface-variant:#534434;
  --pcp-g-on-surface-muted:#565e74;
  --pcp-g-secondary:#4b41e1;
  --pcp-g-secondary-soft:#e2dfff;
  --pcp-g-surface:#f7f9fb;
  --pcp-g-surface-low:#f2f4f6;
  --pcp-g-surface-container:#eceef0;
  --pcp-g-surface-lowest:#ffffff;
  --pcp-g-surface-variant:#e0e3e5;
  --pcp-g-tertiary:#565e74;

  max-width:1240px;
  margin:0 auto;
  padding:5rem 1.5rem;
  box-sizing:border-box;
  font-family:inherit;
}
.pcp-grid-widget *,.pcp-grid-widget *::before,.pcp-grid-widget *::after{box-sizing:border-box;}

/* ── Header ─────────────────────────────────────────────── */
.pcp-grid-header{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:2.5rem;
}
@media (min-width:768px){
  .pcp-grid-header{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
  }
}
.pcp-grid-heading{display:flex;flex-direction:column;gap:0.25rem;}
.pcp-grid-eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--pcp-g-secondary);
}
.pcp-grid-title{
  font-size:26px;
  line-height:32px;
  font-weight:700;
  color:var(--pcp-g-on-surface);
  margin:0;
}
.pcp-grid-subtitle{
  font-size:14px;
  line-height:20px;
  color:var(--pcp-g-on-surface-variant);
  margin:0;
}

/* ── Filter tabs ────────────────────────────────────────── */
.pcp-grid-tabs{
  display:flex;
  align-items:center;
  gap:0.375rem;
  padding:0.25rem;
  background:var(--pcp-g-surface-container);
  border:1px solid var(--pcp-g-surface-variant);
  border-radius:0.75rem;
  overflow-x:auto;
  max-width:100%;
  flex-shrink:0;
}
.pcp-grid-tab{
  appearance:none;
  border:none;
  background:transparent;
  padding:0.375rem 1rem;
  border-radius:0.5rem;
  font-size:12px;
  font-weight:600;
  line-height:16px;
  color:var(--pcp-g-on-surface-variant);
  cursor:pointer;
  white-space:nowrap;
  transition:color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.pcp-grid-tab:hover{color:var(--pcp-g-on-surface);}
.pcp-grid-tab.is-active{
  background:var(--pcp-g-surface-lowest);
  color:var(--pcp-g-on-surface);
  font-weight:700;
  box-shadow:0 1px 2px rgba(11,11,18,0.06);
}

/* ── Card grid ──────────────────────────────────────────── */
.pcp-grid-cards{
  display:grid;
  grid-template-columns:repeat(var(--pcp-g-cols,4),minmax(0,1fr));
  gap:1.5rem;
}
@media (max-width:1024px){
  .pcp-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .pcp-grid-cards{grid-template-columns:1fr;}
}

/* ── Card ───────────────────────────────────────────────── */
.pcp-grid-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--pcp-g-surface-lowest);
  border:1px solid rgba(224,227,229,0.7);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(11,11,18,0.06);
  transition:box-shadow 260ms cubic-bezier(0.4,0,0.2,1), transform 260ms cubic-bezier(0.4,0,0.2,1);
}
.pcp-grid-card:hover{
  box-shadow:0 8px 24px rgba(11,11,18,0.10);
  transform:translateY(-2px);
}
.pcp-grid-card.is-hidden{display:none;}

/* Media */
.pcp-grid-card-media{
  position:relative;
  background:var(--pcp-g-surface-low);
  overflow:hidden;
  aspect-ratio:4/5;
}
.pcp-grid-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 300ms ease;
  display:block;
}
.pcp-grid-card:hover .pcp-grid-card-media img{transform:scale(1.05);}

/* Material badge (top-left) */
.pcp-grid-card-material{
  position:absolute;
  top:0.75rem;
  left:0.75rem;
  padding:0.125rem 0.5rem;
  font-size:11px;
  font-weight:700;
  color:var(--pcp-g-on-surface);
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(4px);
  border:1px solid var(--pcp-g-surface-variant);
  border-radius:0.25rem;
  line-height:1;
}

/* Featured badge (top-right) */
.pcp-grid-card-badge{
  position:absolute;
  top:0.75rem;
  right:0.75rem;
  padding:0.125rem 0.5rem;
  font-size:10px;
  font-weight:700;
  color:var(--pcp-g-on-primary-fixed);
  background:var(--pcp-g-primary-container);
  border-radius:0.25rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0.02em;
}

/* Body */
.pcp-grid-card-body{
  padding:1rem;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
}

/* Color swatches */
.pcp-grid-card-colors{
  display:flex;
  align-items:center;
  gap:0.25rem;
  margin-bottom:0.25rem;
}
.pcp-grid-card-swatch{
  width:0.75rem;
  height:0.75rem;
  border-radius:999px;
  border:1px solid var(--pcp-g-surface-variant);
  display:inline-block;
  flex-shrink:0;
}
.pcp-grid-card-more{
  font-size:11px;
  color:var(--pcp-g-tertiary);
  margin-left:0.25rem;
}

/* Title */
.pcp-grid-card-title{
  font-size:16px;
  line-height:22px;
  font-weight:700;
  color:var(--pcp-g-on-surface);
  margin:0;
  transition:color 200ms ease;
}
.pcp-grid-card-title a{
  color:inherit;
  text-decoration:none;
}
.pcp-grid-card:hover .pcp-grid-card-title a{color:var(--pcp-g-secondary);}

/* Subtitle */
.pcp-grid-card-sub{
  font-size:12px;
  line-height:16px;
  color:var(--pcp-g-on-surface-variant);
  margin:0.25rem 0 0;
}

/* Footer */
.pcp-grid-card-footer{
  padding-top:1rem;
  margin-top:0.75rem;
  border-top:1px solid rgba(224,227,229,0.6);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.pcp-grid-card-price{display:flex;flex-direction:column;gap:0.125rem;}
.pcp-grid-card-from{
  font-size:12px;
  line-height:16px;
  color:var(--pcp-g-tertiary);
}
.pcp-grid-card-price-value{
  font-size:16px;
  line-height:22px;
  font-weight:700;
  color:var(--pcp-g-on-surface);
}
.pcp-grid-card-price-value span{
  font-size:12px;
  font-weight:400;
  color:var(--pcp-g-tertiary);
}

/* CTA (edit/design icon) */
.pcp-grid-card-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:0.5rem;
  background:var(--pcp-g-surface-container);
  color:var(--pcp-g-on-surface);
  text-decoration:none;
  transition:background 200ms ease, color 200ms ease, transform 200ms ease;
  flex-shrink:0;
}
.pcp-grid-card-cta:hover{
  background:var(--pcp-g-primary-container);
  color:var(--pcp-g-on-primary-fixed);
  transform:scale(1.05);
}
.pcp-grid-card-cta-label{
  font-size:20px;
  line-height:1;
}

/* Empty state */
.pcp-grid-empty{
  grid-column:1/-1;
  text-align:center;
  padding:3rem 1rem;
  color:var(--pcp-g-on-surface-variant);
  font-size:14px;
}