/* ============================================================
   "Best sellers" product grid — V7 card design, scoped under
   .bestsellers. Section width, heading, eyebrow, and buttons
   all come from v6.css; this file styles ONLY the cards.
   ============================================================ */
.bestsellers{
  --bs-muted:#8a837a;    /* warm label tint */
  --bs-line:#ebe7e0;     /* card hairline border */
  --bs-img-bg:#f2efe9;   /* placeholder behind photos */
}
.bestsellers .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 20px}
.bestsellers .pcard{background:#fff;border:1px solid var(--bs-line);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.bestsellers .pcard:hover,.bestsellers .pcard:focus-within{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(30,26,20,.45)}
.bestsellers .pcard a{color:inherit;text-decoration:none}
.bestsellers .ph{aspect-ratio:1/1;background-size:cover;background-position:center;background-color:var(--bs-img-bg);display:block}
.bestsellers .bd{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1}
.bestsellers .tone{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--bs-muted);font-weight:600}
.bestsellers .nm{font-size:15.5px;font-weight:600;margin-top:3px;line-height:1.25}
.bestsellers .nm:hover{color:var(--accent)}
.bestsellers .pr{font-size:14px;font-weight:700;margin-top:7px}
.bestsellers .pr span{color:var(--bs-muted);font-weight:400}
.bestsellers .ct{font-size:11.5px;color:var(--bs-muted);margin-top:1px}

/* responsive */
@media (max-width:960px){ .bestsellers .pgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .bestsellers .pgrid{gap:20px 12px} .bestsellers .nm{font-size:14px} }
@media (prefers-reduced-motion: reduce){ .bestsellers .pcard:hover,.bestsellers .pcard:focus-within{transform:none} }

/* ============================================================
   V7 card skin for the catalog grid — same concepts applied to
   the existing .v6-card markup (fav/compare/sample untouched).
   ============================================================ */
.cat-grid .v6-card{background:#fff;border:1px solid #ebe7e0;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cat-grid .v6-card:hover,.cat-grid .v6-card:focus-within{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(30,26,20,.45)}
.cat-grid .v6-card-media{aspect-ratio:1/1;background:#f2efe9}
.cat-grid .v6-card-body{padding:13px 14px 15px}
.cat-grid .v6-card-coll{font-size:10.5px;letter-spacing:.05em;color:#8a837a}
.cat-grid .v6-card-carton{font-size:11.5px;color:#8a837a;margin-top:-2px}
@media (prefers-reduced-motion: reduce){ .cat-grid .v6-card:hover,.cat-grid .v6-card:focus-within{transform:none;box-shadow:none} }