/* MMM Embroidery catalog page. Layout follows references/NOVA-03-catalog.webp (1536 wide): same reference-pixel system as
   site.css (calc(N * var(--u))). Header, buttons and footer come from site.css. Phones/tablets: bottom of this file. */

body.page-catalog { background: #f3f2ee; }

/* ===================== HERO (0 - 332) ===================== */
.chero { position: relative; height: calc(332 * var(--u)); background: linear-gradient(180deg, #efeeea 0%, #ebe9e4 100%); }   /* no overflow: hidden here: the header's menus hang below the hero */
.chero__photo {
  position: absolute; top: 0; bottom: 0; right: 0; left: calc(512 * var(--u)); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 10%, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 10%, #000 26%);
}
.chero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.chero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,19,18,.35) 0%, rgba(20,19,18,0) 30%),
    linear-gradient(90deg, rgba(20,19,18,0) 55%, rgba(20,19,18,.55) 82%, rgba(20,19,18,.7) 100%);
}
.chero__copy { position: absolute; z-index: 3; left: calc(64 * var(--u)); top: 0; }
.chero .eyebrow { top: calc(80 * var(--u)); left: 0; }
.h1--cat { top: calc(99 * var(--u)); width: calc(640 * var(--u)); font-size: calc(55 * var(--u)); line-height: calc(51 * var(--u)); letter-spacing: -0.006em; }
.chero__sub {
  position: absolute; top: calc(211 * var(--u)); left: 0; width: calc(520 * var(--u));
  font-size: calc(14.6 * var(--u)); line-height: calc(19.5 * var(--u)); color: #393734;
}
.chero__ctas { top: calc(267 * var(--u)); left: 0; }
.chero__ctas .btn { height: calc(40 * var(--u)); }
.chero__ctas .btn--dark { width: calc(151 * var(--u)); }
.chero__ctas .btn--light { width: calc(143 * var(--u)); }
.chero__script {
  position: absolute; z-index: 3; left: calc(1262 * var(--u)); top: calc(98 * var(--u)); margin: 0;
  font-family: "Mrs Saint Delafield", cursive; font-size: calc(39 * var(--u)); line-height: 1; color: #fbfaf7;
  transform: rotate(-7deg); text-shadow: 0 2px 10px rgba(0,0,0,.25); white-space: nowrap;
}
.chero__card {
  position: absolute; z-index: 3; left: calc(1270 * var(--u)); top: calc(176 * var(--u));
  width: calc(224 * var(--u)); height: calc(131 * var(--u)); border-radius: calc(10 * var(--u)); overflow: hidden;
  border: 1px solid rgba(255,255,255,.35); box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
.chero__card img { width: 100%; height: 100%; object-fit: cover; }
.chero__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); }
.chero__card span {
  position: absolute; z-index: 1; left: calc(16 * var(--u)); bottom: calc(18 * var(--u));
  font-family: var(--display); font-size: calc(11.6 * var(--u)); line-height: calc(15 * var(--u)); letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
.chero__go {
  position: absolute; z-index: 1; right: calc(14 * var(--u)); bottom: calc(15 * var(--u));
  width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center;
}
.chero__go .arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* ===================== CATEGORY STRIP (332 - 432) ===================== */
.cstrip {
  display: flex; gap: calc(8 * var(--u)); height: calc(100 * var(--u));
  padding: calc(10 * var(--u)) 0 0 calc(40 * var(--u)); background: #e9e7e2;
}
.ccard {
  position: relative; flex: 0 0 calc(var(--w) * var(--u)); height: calc(78 * var(--u));
  border-radius: calc(8 * var(--u)); background: linear-gradient(180deg, #f8f7f5 0%, #f2f1ed 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.04); text-align: left; transition: box-shadow .2s, transform .2s;
}
.ccard:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.ccard[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px #111; }
.ccard img { position: absolute; left: calc(9 * var(--u)); top: calc(8 * var(--u)); width: calc(72 * var(--u)); height: calc(62 * var(--u)); object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.14)); }
.ccard span { position: absolute; left: calc(96 * var(--u)); top: calc(22 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 500; color: #1d1c1a; white-space: nowrap; }
.ccard .arr { position: absolute; left: calc(96 * var(--u)); top: calc(44 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #1d1c1a; }

/* ===================== FILTERS + GRID (432 -) ===================== */
.cbody {
  display: grid; grid-template-columns: calc(211 * var(--u)) 1fr; column-gap: calc(27 * var(--u));
  padding: calc(30 * var(--u)) calc(42 * var(--u)) calc(60 * var(--u)) calc(39 * var(--u));
  align-items: start;
}
.filters {
  position: sticky; top: calc(16 * var(--u));
  background: #faf9f7; border: 1px solid #ebe8e2; border-radius: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  max-height: calc(100vh - 32 * var(--u)); overflow: auto; scrollbar-width: thin;
}
.filters__head, .filters__apply { display: none; }
.fgroup + .fgroup { border-top: 1px solid #e8e5df; }
.fgroup summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: calc(13 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; color: #111;
}
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after {
  content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-right: calc(4 * var(--u));
  border-left: 1.4px solid #222; border-top: 1.4px solid #222; transform: rotate(45deg) translate(1px, 1px);
}
.fgroup:not([open]) summary::after { transform: rotate(225deg) translate(1px, 1px); }
.fgroup > :not(summary) { margin-bottom: calc(14 * var(--u)); }
.fcats li button {
  display: flex; justify-content: space-between; width: 100%; height: max(24px, calc(24 * var(--u))); align-items: center;   /* B20: 24 px targets */
  font-size: calc(13 * var(--u)); color: #57544f; text-align: left;
}
.fcats li button span:last-child { font-size: calc(12 * var(--u)); color: #66635d; }
.fcats li button:hover, .fcats li button[aria-pressed="true"] { color: #111; }
.fcats li button[aria-pressed="true"] { font-weight: 600; }
.fswatches { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)) calc(10.2 * var(--u)); padding-top: calc(2 * var(--u)); }
.sw {
  width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); position: relative;
}
.sw[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #faf9f7, 0 0 0 3.5px #111; }
.sw--more { background: #fff; display: grid; place-items: center; font-size: calc(15 * var(--u)); color: #333; box-shadow: inset 0 0 0 1px #e2dfd9; }
.fsizes { display: flex; flex-wrap: wrap; gap: calc(2.5 * var(--u)); }
.chipz {
  height: max(24px, calc(24 * var(--u))); min-width: max(24px, calc(24 * var(--u))); padding: 0 calc(3 * var(--u));   /* B20 */
  border: 1px solid #dcd8d1; border-radius: calc(4 * var(--u)); background: #fff;
  font-size: calc(10.2 * var(--u)); color: #3a3835; display: inline-grid; place-items: center;
}
.chipz[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.fchecks label { display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: max(25px, calc(25 * var(--u)));   /* B20: rows 24+ px apart, so the small box passes on spacing */ font-size: calc(13 * var(--u)); color: #57544f; cursor: pointer; }
.fchecks input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto;
  width: calc(13 * var(--u)); height: calc(13 * var(--u)); border: 1px solid #c9c5be; border-radius: calc(3 * var(--u)); background: #fff; display: grid; place-items: center;
}
.fchecks input:checked { background: #111; border-color: #111; }
.fchecks input:checked::after { content: ""; width: 40%; height: 65%; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(-8%, -8%); }
.fchecks label span { margin-left: auto; font-size: calc(11.5 * var(--u)); color: #66635d; }
.fbrand-q { width: 100%; height: calc(28 * var(--u)); border: 1px solid #e0ddd6; border-radius: calc(6 * var(--u)); background: #fff; padding: 0 calc(10 * var(--u)); font-size: calc(12 * var(--u)); margin-bottom: calc(8 * var(--u)) !important; outline: none; }
.fbrands { max-height: calc(260 * var(--u)); overflow: auto; }

.results { min-width: 0; }
.rhead { display: flex; align-items: center; height: calc(35 * var(--u)); margin-top: calc(-2 * var(--u)); }
.rtitle { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: calc(30 * var(--u)); letter-spacing: -0.015em; color: #0f0f0f; white-space: nowrap; }
.rcount { margin-left: calc(26 * var(--u)); font-size: calc(15 * var(--u)); color: #66635d; white-space: nowrap; }
.rfilter { display: none; }
.rsort {
  margin-left: auto; display: flex; align-items: center; gap: calc(6 * var(--u));
  width: calc(175 * var(--u)); height: calc(35 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(16 * var(--u));
  border: 1px solid #e2dfd9; border-radius: calc(6 * var(--u)); background: #f8f7f4; font-size: calc(12.4 * var(--u)); color: #111;
}
.rsort span { white-space: nowrap; }
.rsort select {
  flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; outline: none;
  font: inherit; font-weight: 500; color: #111; cursor: pointer; padding-right: calc(16 * var(--u));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: calc(14 * var(--u));
}
.rview { display: flex; gap: calc(9 * var(--u)); margin-left: calc(15 * var(--u)); }
.rview button { width: calc(35 * var(--u)); height: calc(35 * var(--u)); border-radius: calc(7 * var(--u)); display: grid; place-items: center; color: #222; }
.rview button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.rview svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.8; }
.rview svg .fill { fill: currentColor; stroke: none; }
.ractive { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.ractive button {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u));
  border-radius: 999px; background: #fff; border: 1px solid #e2dfd9; font-size: calc(12 * var(--u)); color: #222;
}
.ractive button::after { content: "\00d7"; font-size: calc(15 * var(--u)); line-height: 1; color: #777; }
.ractive .ractive__clear { background: transparent; border-color: transparent; text-decoration: underline; }
.ractive .ractive__clear::after { content: none; }

.pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: calc(12 * var(--u)); row-gap: calc(14 * var(--u)); margin-top: calc(17 * var(--u)); }
.pc {
  position: relative; display: flex; flex-direction: column; padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(9 * var(--u)); background: linear-gradient(180deg, #f0efeb 0%, #f3f2ef 70%, #f6f5f2 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .2s, transform .2s;
}
.pc:hover { box-shadow: 0 10px 26px rgba(40,34,28,.12); transform: translateY(-2px); }
.pc__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pc__link:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.pc__img { position: relative; height: calc(158 * var(--u)); overflow: hidden; border-radius: calc(5 * var(--u)); }
.pc__img img { position: absolute; inset: calc(4 * var(--u)) calc(8 * var(--u)); width: calc(100% - 16 * var(--u)); height: calc(100% - 8 * var(--u)); object-fit: contain; mix-blend-mode: multiply; }
.pc__badge {
  position: absolute; z-index: 1; left: 0; top: calc(-2 * var(--u)); height: calc(17 * var(--u)); padding: 0 calc(7 * var(--u));
  border-radius: calc(4 * var(--u)); background: #111; color: #fff; font-size: calc(10.4 * var(--u)); font-weight: 500; display: inline-grid; place-items: center;
}
.pc__badge--new { background: #3a3631; }
.pc__row { display: flex; align-items: center; justify-content: space-between; height: calc(24 * var(--u)); margin-top: calc(4 * var(--u)); padding-left: calc(6 * var(--u)); }
.pc__dots { display: flex; align-items: center; gap: calc(4.8 * var(--u)); font-size: calc(10.5 * var(--u)); color: #66635d; }
.pc__dots i { width: calc(9.6 * var(--u)); height: calc(9.6 * var(--u)); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.pc__add {
  width: max(24px, calc(24 * var(--u))); height: max(24px, calc(24 * var(--u))); border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1);   /* B20 */
  position: relative; z-index: 3; flex: 0 0 auto;
}
.pc__add::before, .pc__add::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(10 * var(--u)); height: 1.4px; background: #111; transform: translate(-50%, -50%); }
.pc__add::after { transform: translate(-50%, -50%) rotate(90deg); }
.pc__code { margin-top: calc(5 * var(--u)); padding-left: calc(6 * var(--u)); font-size: calc(11 * var(--u)); color: #66635d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc__name { margin-top: calc(3 * var(--u)); padding-left: calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 400; color: #151515; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc__meta { margin-top: calc(4 * var(--u)); padding-left: calc(6 * var(--u)); font-size: calc(12.6 * var(--u)); font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* list view */
.pgrid[data-view="list"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid[data-view="list"] .pc { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; grid-template-rows: auto auto auto 1fr; column-gap: calc(18 * var(--u)); }
.pgrid[data-view="list"] .pc__img { grid-row: 1 / span 4; height: calc(130 * var(--u)); }
.pgrid[data-view="list"] .pc__row { grid-column: 2; grid-row: 4; align-self: end; padding-left: 0; }
.pgrid[data-view="list"] .pc__code, .pgrid[data-view="list"] .pc__name, .pgrid[data-view="list"] .pc__meta { grid-column: 2; padding-left: 0; }
.pgrid[data-view="list"] .pc__code { margin-top: calc(14 * var(--u)); }
.pgrid[data-view="list"] .pc__name { font-size: calc(15 * var(--u)); white-space: normal; }

.rempty { margin: calc(40 * var(--u)) 0; font-size: calc(15 * var(--u)); color: #57544f; }
.rempty button { text-decoration: underline; font-weight: 600; }
.rmore { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(34 * var(--u)); font-size: calc(13 * var(--u)); color: #66635d; }
.rmore .btn { width: auto; }
.rmore[hidden], .rmore .btn[hidden] { display: none; }
.page-catalog .foot { border-top: 1px solid #e6e3dd; }

/* ===================== PHONES + TABLETS ===================== */
@media (max-width: 1179px) {
  .chero { height: auto; display: flex; flex-direction: column; padding-bottom: 14px; }
  .chero .hdr { order: 1; }
  .chero__copy { position: relative; left: auto; order: 2; padding: 20px 16px 18px; }
  .chero .eyebrow, .h1--cat, .chero__sub, .chero__ctas { position: static; }
  .h1--cat { width: auto; margin-top: 10px; font-size: 40px; line-height: 40px; }
  .chero__sub { width: auto; margin-top: 14px; font-size: 15px; line-height: 22px; }
  .chero__sub br { display: none; }
  .chero__ctas { margin-top: 18px; }
  .chero__ctas .btn { height: 46px; flex: 1; width: auto !important; }
  .chero__photo { position: relative; order: 3; left: auto; height: 190px; margin: 0 16px; border-radius: 12px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .chero__script { display: none; }
  .chero__card { position: relative; order: 4; left: auto; top: auto; width: auto; height: 96px; margin: 10px 16px 0; border-radius: 12px; }
  .chero__card span { left: 14px; bottom: 14px; font-size: 12px; line-height: 15px; }
  .chero__card span br { display: none; }
  .chero__go { right: 12px; bottom: 12px; width: 32px; height: 32px; }
  .chero__go .arr { width: 14px; height: 14px; }

  .cstrip { height: auto; gap: 8px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; }
  .cstrip::-webkit-scrollbar { display: none; }
  .ccard { flex: 0 0 132px; height: 70px; border-radius: 9px; }
  .ccard img { left: 6px; top: 7px; width: 56px; height: 56px; }
  .ccard span { left: 68px; top: 20px; font-size: 13px; }
  .ccard .arr { left: 68px; top: 41px; width: 13px; height: 13px; }

  .cbody { display: block; padding: 16px 16px 40px; }
  .filters {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: auto; max-height: 86vh; border-radius: 16px 16px 0 0;
    padding: 0 18px 18px; transform: translateY(105%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; box-shadow: 0 -10px 40px rgba(0,0,0,.2);
  }
  .filters.is-open { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
  .filters__head { display: flex; position: sticky; top: 0; z-index: 1; justify-content: space-between; align-items: center; height: 54px; background: #faf9f7; border-bottom: 1px solid #ebe8e2; margin: 0 -18px 4px; padding: 0 18px; font-size: 17px; }
  .filters__close { font-size: 28px; line-height: 1; width: 40px; height: 40px; }
  .filters__apply { display: inline-flex; width: 100%; height: 50px; margin-top: 12px; font-size: 16px; position: sticky; bottom: 0; }
  .fgroup summary { font-size: 16px; padding: 14px 0 10px; }
  .fgroup summary::after { width: 8px; height: 8px; }
  .fcats li button { height: 36px; font-size: 15px; }
  .fcats li button span:last-child { font-size: 13px; }
  .fswatches { gap: 12px 14px; }
  .sw { width: 32px; height: 32px; }
  .sw--more { font-size: 18px; }
  .chipz { height: 34px; min-width: 40px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
  .fsizes { gap: 8px; }
  .fchecks label { min-height: 38px; font-size: 15px; gap: 12px; }
  .fchecks input { width: 20px; height: 20px; border-radius: 5px; }
  .fchecks label span { font-size: 13px; }
  .fbrand-q { height: 40px; font-size: 16px; border-radius: 8px; padding: 0 12px; }
  .fbrands { max-height: none; }
  body.filters-open::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.35); }

  .rhead { height: auto; flex-wrap: wrap; gap: 10px 12px; margin: 4px 0 0; }
  .rtitle { font-size: 24px; flex-basis: 100%; white-space: normal; }
  .rcount { margin-left: 0; font-size: 14px; flex-basis: 100%; margin-top: -6px; }
  .rfilter { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 8px; background: #fff; border: 1px solid #e2dfd9; font-size: 14px; font-weight: 500; }
  .rfilter svg { width: 18px; height: 18px; }
  .rfilter span:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #111; color: #fff; font-size: 11px; }
  .rsort { margin-left: auto; width: auto; height: 40px; padding: 0 10px 0 12px; font-size: 14px; border-radius: 8px; }
  .rsort span { display: none; }
  .rsort select { padding-right: 18px; background-size: 14px; }
  .rview { display: none; }
  .ractive { gap: 8px; margin-top: 12px; }
  .ractive button { height: 32px; padding: 0 12px; font-size: 13px; }
  .ractive button::after { font-size: 17px; }
  .pgrid, .pgrid[data-view="list"] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 12px; margin-top: 14px; }
  .pc { padding: 8px 8px 12px; border-radius: 10px; }
  .pc__img { height: auto; aspect-ratio: 1 / 1; }
  .pc__badge { height: 20px; padding: 0 7px; font-size: 11px; border-radius: 5px; }
  .pc__row { height: 28px; margin-top: 4px; padding-left: 4px; }
  .pc__dots { gap: 5px; font-size: 11px; }
  .pc__dots i { width: 11px; height: 11px; }
  .pc__add { width: 28px; height: 28px; }
  .pc__add::before, .pc__add::after { width: 11px; }
  .pc__code, .pc__name, .pc__meta { padding-left: 4px; }
  .pc__code { font-size: 12px; margin-top: 4px; }
  .pc__name { font-size: 14px; }
  .pc__meta { font-size: 13px; }
  .rempty { font-size: 15px; }
  .rmore { font-size: 14px; margin-top: 26px; gap: 12px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .chero__copy { padding: 30px 32px 22px; }
  .h1--cat { font-size: 54px; line-height: 54px; }
  .chero__photo { height: 260px; margin: 0 32px; }
  .chero__card { margin: 12px 32px 0; height: 110px; }
  .cstrip { padding: 14px 32px; }
  .cbody { padding: 20px 32px 50px; }
  .pgrid, .pgrid[data-view="list"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters { left: auto; right: 0; top: 0; bottom: 0; max-height: none; width: 380px; border-radius: 16px 0 0 16px; transform: translateX(105%); }
  .filters.is-open { transform: none; }
}
.pc__add.is-added { background: #111; }
.pc__add.is-added::before, .pc__add.is-added::after { background: #fff; }

/* ===================== SHOP BY NEED ROW (main catalog + collection pages; tools/build_catalog_pages.py) ===================== */
.needs-band { background: #e9e7e2; }
.needs { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(14 * var(--u)) calc(40 * var(--u)) 0; overflow-x: auto; scrollbar-width: none; }
.needs::-webkit-scrollbar { display: none; }
.needs__label { flex: 0 0 auto; margin-right: calc(8 * var(--u)); font-family: var(--display); font-size: calc(11.5 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: #66635d; white-space: nowrap; }
.needs__chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: calc(32 * var(--u)); padding: 0 calc(15 * var(--u));
  border-radius: 999px; background: #f8f7f5; border: 1px solid rgba(0,0,0,.06); font-size: calc(12.5 * var(--u)); font-weight: 500; color: #1d1c1a;
  white-space: nowrap; transition: background .2s, box-shadow .2s, color .2s;
}
.needs__chip:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.needs__chip[aria-current="page"] { background: #111; border-color: #111; color: #fff; }
.page-catalog--scoped .needs-band { padding-bottom: calc(14 * var(--u)); }
a.ccard { display: block; }

/* ===================== HELP ME BUILD IT (top of the results, every catalog page) ===================== */
.helpcard {
  display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u));
  background: #fff; border: 1px solid #ebe8e2; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .2s;
}
.helpcard:hover { box-shadow: 0 8px 22px rgba(40,34,28,.1); }
.helpcard:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.helpcard__ic { flex: 0 0 auto; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: #f3f2ee; display: grid; place-items: center; color: #111; }
.helpcard__ic svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.5; }
.helpcard__txt { flex: 1; min-width: 0; font-size: calc(13.5 * var(--u)); color: #66635d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.helpcard__txt b { color: #111; font-weight: 600; }
.helpcard__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u));
  border-radius: calc(7 * var(--u)); background: #050607; color: #fff; font-size: calc(12.8 * var(--u)); font-weight: 500; white-space: nowrap;
}
.helpcard__btn .arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); transition: transform .2s; }
.helpcard:hover .helpcard__btn .arr { transform: translateX(2px); }

/* ===================== CATEGORY + COLLECTION PAGES (concept C01 on the NOVA-03 browser) ===================== */
.cathero { position: relative; min-height: calc(384 * var(--u)); padding: calc(24 * var(--u)) 0 calc(30 * var(--u)) calc(57 * var(--u)); }
.cathero__copy { position: relative; z-index: 2; width: calc(560 * var(--u)); }
.cathero .eyebrow2 { font-size: calc(12 * var(--u)); }
.cathero__h1 {
  margin-top: calc(14 * var(--u)); font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: calc(var(--fs, 58) * var(--u)); line-height: .95; letter-spacing: -0.008em;
  background: linear-gradient(172deg, #050505 0%, #0b0b0b 60%, #2c2c2c 86%, #5a5856 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cathero__h1 span { display: block; }
.cathero__sub { margin-top: calc(18 * var(--u)); width: calc(480 * var(--u)); font-size: calc(15.2 * var(--u)); line-height: calc(23 * var(--u)); color: #393734; }
.cathero__ctas { display: flex; gap: calc(12 * var(--u)); margin-top: calc(26 * var(--u)); }
.cathero__media {
  position: absolute; top: 0; bottom: 0; right: 0; width: calc(896 * var(--u)); margin: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 22%);
}
.cathero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cathero__media img.is-color { opacity: 0; transition: opacity 1.6s ease; }
.cathero__media.is-in img.is-color, .cathero__media:hover img.is-color { opacity: 1; }
.cathero__media figcaption {
  position: absolute; z-index: 1; right: calc(24 * var(--u)); bottom: calc(22 * var(--u)); padding: calc(8 * var(--u)) calc(15 * var(--u));
  border-radius: 999px; background: rgba(20,19,18,.42); border: 1px solid rgba(255,255,255,.28); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: calc(12 * var(--u)); white-space: nowrap;
}
/* pages without a shop photo: a row of the page's own products */
.cathero__media--row {
  top: calc(4 * var(--u)); bottom: calc(26 * var(--u)); right: calc(42 * var(--u)); width: calc(832 * var(--u)); border-radius: calc(14 * var(--u));
  -webkit-mask-image: none; mask-image: none; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 65% 75% at 50% 55%, #f8f7f4 0%, #eeece7 62%, #e6e3dd 100%);
}
.cathero__media--row img {
  position: relative; inset: auto; flex: 0 0 auto; width: calc(212 * var(--u)); height: calc(272 * var(--u)); margin: 0 calc(-10 * var(--u));
  object-fit: contain; mix-blend-mode: multiply; transform: translateY(calc(var(--y, 0) * var(--u))) rotate(var(--rot, 0deg));
}
.cathero__media--row img:nth-child(1) { --rot: -5deg; --y: 14; }
.cathero__media--row img:nth-child(2) { --rot: 2deg; --y: -12; }
.cathero__media--row img:nth-child(3) { --rot: -2deg; --y: 10; }
.cathero__media--row img:nth-child(4) { --rot: 5deg; --y: -8; }

/* style chips: product photo + name + count */
.cstrip--styles { overflow-x: auto; scrollbar-width: none; padding-right: calc(40 * var(--u)); }
.cstrip--styles::-webkit-scrollbar { display: none; }
.cstrip--styles .ccard {
  flex: 0 0 auto; display: grid; grid-template-columns: calc(70 * var(--u)) auto; grid-template-rows: auto auto; column-gap: calc(10 * var(--u));
  align-content: center; padding: 0 calc(22 * var(--u)) 0 calc(8 * var(--u));
}
.cstrip--styles .ccard img { position: static; grid-row: 1 / span 2; width: calc(70 * var(--u)); height: calc(64 * var(--u)); object-fit: contain; filter: none; mix-blend-mode: multiply; }
.cstrip--styles .ccard span, .cstrip--styles .ccard small { position: static; }
.cstrip--styles .ccard span { align-self: end; font-size: calc(13 * var(--u)); font-weight: 600; }
.cstrip--styles .ccard small { align-self: start; margin-top: calc(3 * var(--u)); font-size: calc(11.2 * var(--u)); color: #66635d; white-space: nowrap; }
.fcats li a { display: flex; justify-content: space-between; width: 100%; height: calc(20.5 * var(--u)); align-items: center; font-size: calc(13 * var(--u)); color: #57544f; }
.fcats li a span:last-child { font-size: calc(12 * var(--u)); color: #66635d; }
.fcats li a:hover, .fcats li a[aria-current="page"] { color: #111; }
.fcats li a[aria-current="page"] { font-weight: 600; }
.fgroup[hidden] { display: none; }

/* "Popular for": the eight customer types, each opens the Help Me Build It door */
.popfor { margin-top: calc(56 * var(--u)); padding-top: calc(34 * var(--u)); border-top: 1px solid #e3e0da; }
.popfor__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(22 * var(--u)); }
.popfor__title { font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase; font-size: calc(30 * var(--u)); letter-spacing: -0.01em; color: #0f0f0f; }
.popfor__head p { font-size: calc(14 * var(--u)); color: #66635d; }
.popfor__chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); }
.popchip {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(7 * var(--u));
  border-radius: 999px; background: #fff; border: 1px solid #e6e3dd; font-size: calc(13.5 * var(--u)); font-weight: 500; color: #151515; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.popchip__ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #f1efea; display: grid; place-items: center; transition: background .2s; }
.popchip__ic svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.6; }
.popchip .arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #66635d; transition: transform .2s, color .2s; }
.popchip:hover, .popchip:focus-visible { background: #111; border-color: #111; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.popchip:hover .popchip__ic, .popchip:focus-visible .popchip__ic { background: rgba(255,255,255,.14); }
.popchip:hover .arr, .popchip:focus-visible .arr { color: #fff; transform: translateX(2px); }
.page-catalog--scoped .cbody { padding-bottom: calc(70 * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  .cathero__media img.is-color { transition: none; }
}

/* ----- phones + tablets ----- */
@media (max-width: 1179px) {
  .needs { gap: 8px; padding: 12px 16px 0; }
  .needs__label { font-size: 11px; margin-right: 4px; }
  .needs__chip { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .page-catalog--scoped .needs-band { padding-bottom: 12px; }

  .helpcard { gap: 10px; margin-top: 12px; padding: 6px 6px 6px 12px; border-radius: 10px; }
  .helpcard__ic { display: none; }
  .helpcard__txt { font-size: 14px; }
  .helpcard__txt > span { display: none; }
  .helpcard__btn { height: 38px; padding: 0 13px; gap: 6px; font-size: 13.5px; border-radius: 8px; }
  .helpcard__btn .arr { width: 13px; height: 13px; }

  .cathero { min-height: 0; display: flex; flex-direction: column; padding: 16px 16px 0; }
  .cathero__copy { width: auto; }
  .cathero .eyebrow2 { font-size: 11.5px; }
  .cathero__h1 { margin-top: 10px; font-size: 38px; line-height: 38px; }
  .cathero__sub { width: auto; margin-top: 12px; font-size: 15px; line-height: 22px; }
  .cathero__ctas { gap: 10px; margin-top: 18px; }
  .cathero__ctas .btn { flex: 1; height: 46px; padding: 0 10px; font-size: 14px; }
  .cathero__media { position: relative; top: auto; right: auto; bottom: auto; width: auto; height: 200px; margin: 18px 0 14px; border-radius: 12px; -webkit-mask-image: none; mask-image: none; }
  .cathero__media figcaption { right: 10px; bottom: 10px; padding: 6px 12px; font-size: 12px; }
  .cathero__media--row { height: 190px; }
  .cathero__media--row img { width: 100px; height: 140px; margin: 0 -6px; transform: translateY(calc(var(--y, 0) * .5px)) rotate(var(--rot, 0deg)); }

  .cstrip--styles { padding-right: 16px; }
  .cstrip--styles .ccard { flex: 0 0 auto; height: 66px; grid-template-columns: 50px auto; column-gap: 8px; padding: 0 14px 0 6px; }
  .cstrip--styles .ccard img { width: 50px; height: 52px; }
  .cstrip--styles .ccard span { font-size: 13.5px; }
  .cstrip--styles .ccard small { font-size: 11.5px; margin-top: 2px; }
  .fcats li a { height: 36px; font-size: 15px; }
  .fcats li a span:last-child { font-size: 13px; }

  .popfor { margin-top: 36px; padding-top: 26px; }
  .popfor__title { font-size: 24px; }
  .popfor__head p { font-size: 14px; line-height: 20px; }
  .popfor__chips { gap: 8px; margin-top: 16px; }
  .popchip { height: 44px; gap: 9px; padding: 0 14px 0 6px; font-size: 14px; }
  .popchip__ic { width: 32px; height: 32px; }
  .popchip__ic svg { width: 17px; height: 17px; }
  .popchip .arr { width: 13px; height: 13px; }
  .page-catalog--scoped .cbody { padding-bottom: 44px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .needs { padding: 14px 32px 0; }
  .cathero { padding: 26px 32px 0; }
  .cathero__h1 { font-size: 52px; line-height: 52px; }
  .cathero__sub { max-width: 620px; }
  .cathero__ctas .btn { flex: 0 0 auto; padding: 0 22px; }
  .cathero__media { height: 300px; }
  .cathero__media--row { height: 280px; }
  .cathero__media--row img { width: 160px; height: 210px; margin: 0 -8px; }
  .cstrip--styles { padding-right: 32px; }
}

/* search inside the results on phones and tablets (the header search shows from 1180px) */
.rsearch { display: none; }
@media (max-width: 1179px) {
  .rsearch { display: flex; align-items: center; flex-basis: 100%; height: 44px; padding: 0 12px; border-radius: 9px; background: #fff; border: 1px solid #e2dfd9; }
  .rsearch svg { flex: 0 0 auto; width: 18px; height: 18px; color: #555; stroke-width: 1.8; }
  .rsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 10px; font-size: 16px; color: #111; }
  .rsearch:focus-within { border-color: #111; }
}

/* ===================== 10/22 MOBILE PASS (phones + tablets) ===================== */
@media (max-width: 1179px) {
  /* the filter sheet: sized to the dynamic viewport (Safari's toolbars), "Show styles" docked on its bottom edge: solid, a top
     divider, the safe area under it */
  .filters { max-height: 86vh; max-height: 86dvh; padding-bottom: 0; overscroll-behavior: contain; }
  .filters__foot { position: sticky; bottom: 0; z-index: 1; margin: 12px -18px 0; padding: 12px 18px calc(12px + var(--safe-b)); background: #faf9f7; border-top: 1px solid #ebe8e2; }
  .filters__apply { position: static; margin: 0; }
  .filters__close { width: 44px; height: 44px; margin-right: -8px; }
  .rfilter, .rsort { height: 44px; }
  .rsort select { font-size: 16px; }   /* iOS zooms into a field under 16 px */
  /* the + on a card: a 44 px target around the same 28 px circle */
  .pc__add { width: 44px; height: 44px; margin: -8px -8px -8px 0; box-shadow: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12));
    background: radial-gradient(circle closest-side, #fff 14px, rgba(255, 255, 255, 0) 14.5px); }
  .pc__add.is-added { background: radial-gradient(circle closest-side, #111 14px, rgba(17, 17, 17, 0) 14.5px); }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .filters { max-height: none; padding-right: max(18px, var(--safe-r)); }
}