/* Category pages (men, women, kids, sunglasses, contacts) until the collection arrives.
   Same world as the home: cream, gold hairlines, Caslon + Jost, flat. Prefix: cp- */

.cp { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(64px, 8vw, 112px); }

/* ---------- intro: the home tile at its natural size + the copy ---------- */
.cp-hero { display: grid; gap: 36px; align-items: center; }
.cp-tile {
  margin: 0; width: 220px; justify-self: start;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(20, 19, 18, .06), 0 8px 22px -16px rgba(20, 19, 18, .28);
}
.cp-tile img { width: 220px; height: 177px; }   /* the tile photo is 220 × 177: shown as is, never enlarged */
.cp-h1 { margin: 0; font: 400 clamp(38px, 5vw, 66px)/1.06 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.cp-copy .rule { margin: 22px 0; }
.cp-soon { margin: 0; font: 400 clamp(21px, 2vw, 27px)/1.3 var(--font-display); color: var(--ink); text-wrap: balance; }
.cp-lead { margin: 12px 0 0; max-width: 52ch; font-size: 16px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.cp-copy .btn { margin-top: 28px; }

/* ---------- typical shapes (drawn by js/pages/categoria.js with window.hoeFrameSVG) ---------- */
.cp-shapes, .cp-mean { margin-top: clamp(48px, 6vw, 80px); }
.cp-shapes-title { margin: 0 0 18px; font: 400 clamp(22px, 2.2vw, 30px)/1.2 var(--font-display); letter-spacing: -0.01em; }
.cp-shape-row { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.cp-shape-row svg { max-width: 150px; }

/* ---------- meanwhile: the guides ---------- */
.cp-links { display: flex; flex-wrap: wrap; gap: 12px 40px; }

@media (max-width: 560px) {
  .cp-shape-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cp-hero { grid-template-columns: 220px minmax(0, 1fr); column-gap: clamp(48px, 7vw, 112px); }
}