/* ==========================================================================
   4. CARDS — the product card and every grid that holds one
   ==========================================================================
   Two per row is the rule on a phone. The image carries the card; the text
   underneath stays quiet — name, then price, nothing else competing.
   ========================================================================== */

/* ── the grids ───────────────────────────────────────────────────────────
   These must not be set with an inline style anywhere, or the count here
   cannot win. The templates pass a --cols variable instead. */
.products,
.product-grid,
.mood-grid,
.related-grid,
.acc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--m-gap) var(--m-gap);
  padding-left:10px;
  padding-right:10px;
}

/* The gutter belongs to the block around the grid, so nesting never doubles
   it up. Only grids that sit directly on the page get their own. */
.sec-block{padding:0;}
.sec-block-dark{padding:var(--m-block) 0;}
.sec-body{padding:0 var(--m-gutter) 12px;}
.related-grid,.mood-grid{padding:0 var(--m-gutter);}

/* ── the card ────────────────────────────────────────────────────────────── */
.pcard{
  border:none;
  background:transparent;
  display:flex;flex-direction:column;
  position:relative;
}

.pcard-img{
  height:auto;
  aspect-ratio:2/3;                 /* tall and editorial, like a lookbook shot */
  width:100%;
  overflow:hidden;
  background:#f1f0ee;
  position:relative;
  margin-bottom:10px;
}
.pcard-img img{
  width:100%;height:100%;
  object-fit:cover;
  color:transparent;                /* a 404 shows the grey box, not alt text */
}

/* wishlist heart stays visible and reachable */
.pwish{
  position:absolute;top:8px;right:8px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);
  border-radius:50%;border:none;
  font-size:1.05rem;color:var(--black);
  opacity:1;transform:none;
}
.pwish.on,.pwish.active{color:var(--red);}

/* the desktop hover panel has no place on a touch screen */
.pcard-hover{display:none;}
.padd{display:none;}

/* badge: small, quiet, top-left */
.pbadge{
  position:absolute;top:8px;left:8px;
  padding:4px 8px;
  font-size:.625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  max-width:calc(100% - 60px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── card text ───────────────────────────────────────────────────────────── */
.pbody{padding:0;text-align:left;}

.pname{
  font-size:.9375rem;              /* 15px */
  font-weight:500;
  line-height:1.4;
  color:var(--black);
  margin-bottom:4px;
  min-height:2.8em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:break-word;
  word-break:normal;
}
.psub{display:none;}                /* category duplicates the page context */

.pprice{
  font-size:1.0625rem;             /* 17px */
  font-weight:700;
  color:var(--black);
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.pprice s{font-size:.8125rem;font-weight:400;color:#b0aeaa;}
.pprice .disc{font-size:.75rem;font-weight:600;color:var(--red);}

/* colourway dots */
.pswatch{margin-top:8px;gap:6px;}
.pswatch span{width:14px;height:14px;}

/* ── related / smaller cards ─────────────────────────────────────────────── */
.rcard img{height:auto;aspect-ratio:2/3;}
.rcard-body{padding:10px 0;}
.rcard-body h4{font-size:.8125rem;line-height:1.4;}
.rcard-body .rp{font-size:.9375rem;}

/* ── category tiles ──────────────────────────────────────────────────────── */
.cat-grid{
  grid-template-columns:repeat(2,1fr);
  gap:var(--m-gap);
  padding:0 var(--m-gutter);
}
.cat-card{min-height:200px;}
.cat-card h3{font-size:1rem;}
.cat-card span{font-size:.75rem;}

/* ── category hub cards ──────────────────────────────────────────────────── */
.acc-grid{grid-template-columns:repeat(2,1fr);}
.acc-card img,.acc-card .img-collage{height:180px;}
.acc-card-body{padding:12px 10px;}
.acc-card-body h3{font-size:.9375rem;}
.acc-card-body .cnt{font-size:.75rem;}

@media (max-width:360px){
  .pname{font-size:.8125rem;min-height:2.7em;}
  .pprice{font-size:.9375rem;}
  .acc-card img,.acc-card .img-collage{height:150px;}
}

/* Tablets have room for three across before the drawer layout takes over. */
@media (min-width:700px) and (max-width:900px){
  .products,.product-grid,.mood-grid,.related-grid,.acc-grid{
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .sec-body{padding:0 24px 12px;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
}