/* ============================================================
   Internal Materials Catalog and Estimate Builder
   ------------------------------------------------------------
   Everything is scoped under .hr-catalog. Same discipline
   resources.css uses with .hr-res: this module shares a page with
   nothing today, but a single unscoped .card or .grid here would
   be a live grenade the first time it does.

   The mockup's :root copy of colors_and_type.css is deliberately
   NOT carried over, and neither are its gradient swatch classes.
   Tokens load site-wide from the theme, and the swatches were
   standing in for photographs that now come from HubDB.

   NO HEX CODES. Every colour, size, space, radius, shadow and
   duration is a token. The only literal colours reaching this
   module are the chip hexes, which arrive as inline styles from
   the data, not from this file.

   AMBER IS RESERVED, and the reservation is doing real work here.
   It marks exactly three things: an internal cost figure, a colour
   that costs more than the base, and the presenting switch when it
   is off, which is the state that puts those figures on screen.
   Spending it anywhere else would cost the consultant the one
   signal that means "this number is not for the homeowner".

   This is a dense internal tool. It runs tighter than a marketing
   page on purpose, so --section-y never appears.
   ============================================================ */

.hr-catalog {
  --rail-w: 268px;
  --card-min: 236px;
  font-family: var(--font-sans);
  color: var(--hr-body);
}
.hr-catalog *, .hr-catalog *::before, .hr-catalog *::after { box-sizing: border-box; }

/* [hidden] MUST WIN, everywhere in this module.

   [hidden] is display:none in the UA stylesheet, which any class selector
   setting display beats. That caught the two slide-out panels first, and then
   the price sheet view panel via the app shell's display:flex, which put the
   whole sheet and its search box on the page under the builder. Restated once
   here rather than guarded per element, so adding a display rule later cannot
   quietly reopen it. */
.hr-catalog [hidden] { display: none !important; }

/* NO SPINNERS. Every number in this module is typed, not nudged: a roof area
   is 2,140, and stepping to it one at a time is not a thing anyone does. The
   arrows also sit exactly where a thumb lands on a tablet, so they get hit by
   accident far more often than on purpose. */
.hr-catalog input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.hr-catalog input[type="number"]::-webkit-outer-spin-button,
.hr-catalog input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* A unit that sits inside the field rather than under it, so the number and
   what it is measured in read as one value. The input keeps type=number, so
   the suffix is a sibling: a per cent sign typed into a number field makes
   the whole value invalid. */
.hr-catalog__suffixed { position: relative; display: block; }
.hr-catalog__suffixed input { width: 100%; padding-right: 46px; }
.hr-catalog__suffixed--wide input { padding-right: 58px; }
.hr-catalog__suffixed i {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-style: normal; pointer-events: none;
  font-family: var(--font-display); font-size: var(--fs-small);
  font-weight: var(--fw-semibold); color: var(--hr-text-muted);
}

.hr-catalog__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- App shell ----------
   From 1024px up this stops being a block on a page and becomes a fixed
   height application: one frozen header, two independent scroll regions.
   That is what makes the rail hold still while the grid scrolls, and it is
   structural rather than sticky, so nothing can drift out from under itself.

   --hrc-vh is measured in JS from the shell's own top to the bottom of the
   viewport, so it stays correct whatever sits above the module. 100dvh is
   the fallback if the measure has not run yet. */
.hr-catalog__shell {
  border: 1px solid var(--hr-border);
  border-radius: var(--r-lg);
  background: var(--hr-surface);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hr-catalog__shell {
    display: flex;
    flex-direction: column;
    height: var(--hrc-vh, 100dvh);
  }
  .hr-catalog__topbar { flex: none; }
  .hr-catalog__body { flex: 1 1 auto; min-height: 0; }
  .hr-catalog__view-panel {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
  }
  /* Each column owns its scrollbar. overscroll-behavior stops a scroll that
     reaches the end of one from chaining into the page behind it, which is
     what produced two scrollbars moving together. */
  .hr-catalog__rail {
    max-height: none; height: 100%;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .hr-catalog__main { overflow: hidden; }
  /* The category header scrolls away with the cards: on a 660px column an
     eyebrow and a line of help text is a lot of permanent furniture. */
  .hr-catalog__scroller { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* Price sheet: tools frozen, table scrolls in both directions. */
  .hr-catalog__sheet-tools { flex: none; }
  .hr-catalog__tablewrap { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
}

/* ---------- Top bar ----------
   One row on a computer: the two views, the view's own tools, then the
   presenting switch, Present and the estimate on the right. On a phone the
   row keeps only the title and the magnifier (the phone block at the foot). */
.hr-catalog__topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hr-divider);
  background: var(--hr-surface);
  flex: none;
}
/* The two views with their words, as one segmented control. The icons alone
   were a grid and a table that nobody could name at a glance. */
.hr-catalog__views {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 3px; border-radius: var(--r-pill);
  background: var(--hr-surface-alt); border: 1px solid var(--hr-border);
}
.hr-catalog__view {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-4); cursor: pointer;
  border: 0; border-radius: var(--r-pill); background: none;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--hr-text-muted); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hr-catalog__view [data-lucide], .hr-catalog__view svg { width: 17px; height: 17px; flex: none; display: block; }
.hr-catalog__view:hover { color: var(--hr-navy); }
.hr-catalog__view.is-active { background: var(--hr-surface); color: var(--hr-navy); box-shadow: var(--shadow-sm); }
.hr-catalog__view:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* A tablet's row has room for the two icons but not the words beside them. */
@media (max-width: 1023px) {
  .hr-catalog__view { padding: 0 var(--sp-3); }
  .hr-catalog__viewlbl {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- Two column body ---------- */
.hr-catalog__body { display: flex; align-items: stretch; min-height: 660px; }
.hr-catalog__side {
  width: var(--rail-w); flex: none; min-width: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--hr-divider);
}
.hr-catalog__content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Rail hidden, by the toggle or by the price sheet having no services to
   list. The column shrinks to the controls rather than leaving 268px of
   nothing beside the table. */
.hr-catalog__body.is-norail .hr-catalog__rail { display: none; }
.hr-catalog__body.is-norail .hr-catalog__side { width: auto; }
/* The sheet has no services to list, so the column goes entirely and the
   table takes the full width. The controls are in the shared top bar now, so
   nothing needs relocating for it. */
.hr-catalog.is-sheet .hr-catalog__side { display: none; }

.hr-catalog__rail {
  padding: var(--sp-4) var(--sp-3) var(--sp-6);
  overflow-y: auto; max-height: 820px; min-width: 0;
}
.hr-catalog__railtop .lbl {
  display: block; font-family: var(--font-display); font-size: var(--fs-micro);
  font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--hr-text-muted);
  padding: 0 var(--sp-3) var(--sp-3);
}

/* ---------- Rail accordion ----------
   Same technique as initFaq in the Resources JS, which is the accordion
   already running on the live site. Two things carried over from it that
   are not obvious:

   1. height AND padding-bottom animate together. With border-box a height
      of 0 cannot drop below the panel's own bottom padding, so without
      collapsing the padding too the close stalls partway. That stutter is
      exactly the bug initFaq already solved.
   2. Reduced motion REMOVES the transition rather than shortening it, so
      the JS skips the measure entirely and the panel just appears. */
.hr-catalog__svc { border-bottom: 1px solid var(--hr-divider); }
.hr-catalog__svc:last-child { border-bottom: 0; }
.hr-catalog__svc > button {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: 11px var(--sp-3); min-height: 44px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--fs-small);
  font-weight: var(--fw-semibold); color: var(--hr-navy);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__svc > button:hover { background: var(--hr-blue-50); }
.hr-catalog__svc > button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__svc > button .nm { flex: 1 1 auto; min-width: 0; }
.hr-catalog__svc > button .n {
  font-family: var(--font-sans); font-size: var(--fs-micro);
  font-weight: var(--fw-semibold); color: var(--hr-text-subtle);
}
.hr-catalog__svc > button [data-lucide] {
  width: 15px; height: 15px; flex: none; color: var(--hr-text-subtle);
  transition: transform var(--dur) var(--ease-out);
}
.hr-catalog__svc.is-open > button [data-lucide] { transform: rotate(90deg); }
.hr-catalog__svc.is-empty > button { opacity: .55; }

.hr-catalog__sub {
  list-style: none; margin: 0; padding: 0 0 var(--sp-2);
  overflow: hidden;
  transition: height var(--dur) var(--ease-out), padding-bottom var(--dur) var(--ease-out);
}
.hr-catalog__sub li { margin: 0; }
.hr-catalog__sub button {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: 9px var(--sp-3) 9px var(--sp-6); min-height: 44px;
  border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: var(--fs-small); color: var(--hr-body);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hr-catalog__sub button .n { margin-left: auto; font-size: var(--fs-micro); color: var(--hr-text-subtle); }
.hr-catalog__sub button:hover { background: var(--hr-blue-50); color: var(--hr-navy); }
.hr-catalog__sub button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* The All products row reads as the parent of the categories under it, so
   it sits at the shallower indent the service header uses and carries the
   display face. Otherwise it looks like just another category. */
.hr-catalog__all {
  padding-left: var(--sp-4) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-semibold) !important;
}
.hr-catalog__sub button[aria-current="true"] {
  background: var(--hr-blue-50); color: var(--hr-blue-700); font-weight: var(--fw-semibold);
}

/* ---------- Toolbar ---------- */
.hr-catalog__main { min-width: 0; display: flex; flex-direction: column; }
.hr-catalog__bar,
.hr-catalog__sheet-tools {
  display: flex; align-items: center; gap: var(--sp-3);
  flex: 1 1 auto; min-width: 0;
}
.hr-catalog__bar .hr-catalog__search { max-width: 520px; }
.hr-catalog__acts { display: flex; align-items: center; gap: var(--sp-3); flex: none; margin-left: auto; }
/* Phone only, all four. Drawn inside the max-width 767px block at the foot. */
.hr-catalog__titlebtn, .hr-catalog__iconbtn, .hr-catalog__chips, .hr-catalog__tabbar { display: none; }

/* THE PRESENTING SWITCH. A real switch and a harmless word, nothing that says
   what it hides (user, 2026-09-21). On, the default, is the safe state: every
   figure hidden. Off, the track turns amber, so the state reads from across
   the table. */
.hr-catalog__mode {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  min-height: 44px; padding: 0 var(--sp-1); cursor: pointer;
  border: 0; background: none;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--hr-navy); white-space: nowrap;
}
.hr-catalog__mode .sw {
  position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--r-pill);
  background: var(--hr-warm);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__mode .sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--hr-surface); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.hr-catalog__mode[aria-checked="true"] .sw { background: var(--hr-navy); }
.hr-catalog__mode[aria-checked="true"] .sw::after { transform: translateX(16px); }
.hr-catalog__mode:focus-visible { outline: none; }
.hr-catalog__mode:focus-visible .sw { box-shadow: var(--shadow-focus); }

.hr-catalog__showbtn, .hr-catalog__cartbtn {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  min-height: 44px; padding: 0 var(--sp-4); cursor: pointer; white-space: nowrap;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__showbtn { border: 1.5px solid var(--hr-blue); background: var(--hr-surface); color: var(--hr-blue-700); }
.hr-catalog__showbtn:hover { background: var(--hr-blue-50); }
.hr-catalog__showbtn [data-lucide], .hr-catalog__showbtn svg { width: 15px; height: 15px; flex: none; fill: currentColor; }
.hr-catalog__showbtn[disabled] { opacity: .4; cursor: not-allowed; }
.hr-catalog__cartbtn { border: 1px solid var(--hr-border); background: var(--hr-surface); color: var(--hr-navy); }
.hr-catalog__cartbtn [data-lucide], .hr-catalog__cartbtn svg { width: 17px; height: 17px; flex: none; }
.hr-catalog__cartbtn:hover { background: var(--hr-blue-50); border-color: var(--hr-blue); }
.hr-catalog__cartbtn.is-full { background: var(--hr-navy); border-color: var(--hr-navy); color: var(--hr-text-on-color); }
.hr-catalog__cartbtn.is-full:hover { background: var(--hr-blue-700); border-color: var(--hr-blue-700); }
.hr-catalog__showbtn:focus-visible, .hr-catalog__cartbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__cartcount {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--hr-blue); color: var(--hr-text-on-color);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  line-height: 1; font-variant-numeric: tabular-nums;
}

/* ---------- Category chips (phone) ---------- */
.hr-catalog__chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 var(--sp-4); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--hr-border); border-radius: var(--r-pill); background: var(--hr-surface);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--hr-navy);
}
.hr-catalog__chip .n { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--hr-text-subtle); }
.hr-catalog__chip[aria-pressed="true"] { background: var(--hr-navy); border-color: var(--hr-navy); color: var(--hr-text-on-color); }
.hr-catalog__chip[aria-pressed="true"] .n { color: var(--hr-blue-100); }
.hr-catalog__chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- Tab bar (phone) ---------- */
.hr-catalog__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 54px; padding: 0; cursor: pointer; border: 0; background: none;
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  color: var(--hr-text-muted);
}
.hr-catalog__tab > [data-lucide], .hr-catalog__tab > svg { width: 22px; height: 22px; }
.hr-catalog__tab.is-active { color: var(--hr-blue-700); }
.hr-catalog__tab .pb {
  display: grid; place-items: center; width: 40px; height: 26px;
  border-radius: var(--r-md); background: var(--hr-blue); color: var(--hr-text-on-color);
}
.hr-catalog__tab .pb [data-lucide], .hr-catalog__tab .pb svg { width: 14px; height: 14px; fill: currentColor; }
.hr-catalog__tab[disabled] { opacity: .4; cursor: not-allowed; }
.hr-catalog__tab:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); border-radius: var(--r-md); }
.hr-catalog__tab .hr-catalog__cartcount {
  position: absolute; top: 3px; left: 50%; margin-left: 5px;
  min-width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--hr-surface);
}

/* ---------- Browse sheet (phone) ----------
   Every service and its categories, then the presenting switch. A sheet from
   the foot of the screen, over the scrim, like the other two panels. */
.hr-catalog__browse {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh;
  background: var(--hr-surface); box-shadow: var(--shadow-xl);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.hr-catalog__grab {
  flex: none; width: 40px; height: 5px; margin: var(--sp-2) auto 0;
  border-radius: var(--r-pill); background: var(--hr-border-strong);
}
/* The same handle over the product panel and the estimate, which are only
   sheets on a phone. */
.hr-catalog__grab--over { display: none; }
@keyframes hrc-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes hrc-scrim-in { from { opacity: 0; } }
.hr-catalog__browse-head {
  flex: none; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-1) var(--sp-5);
}
.hr-catalog__browse-head h3 {
  flex: 1 1 auto; margin: 0; font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold); color: var(--hr-text-strong);
}
.hr-catalog__browse-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--sp-3); }
.hr-catalog__blab {
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__brow {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: 48px; padding: 0 var(--sp-5); cursor: pointer; text-align: left;
  border: 0; background: none;
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--hr-body);
}
.hr-catalog__brow [data-lucide], .hr-catalog__brow svg { width: 18px; height: 18px; flex: none; color: var(--hr-blue-700); visibility: hidden; }
.hr-catalog__brow .n { margin-left: auto; font-size: var(--fs-small); color: var(--hr-text-subtle); }
.hr-catalog__brow.is-all { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--hr-navy); }
.hr-catalog__brow[aria-current="true"] { background: var(--hr-blue-50); color: var(--hr-blue-700); font-weight: var(--fw-semibold); }
.hr-catalog__brow[aria-current="true"] [data-lucide],
.hr-catalog__brow[aria-current="true"] svg { visibility: visible; }
.hr-catalog__brow[aria-current="true"] .n { color: var(--hr-blue-700); }
.hr-catalog__brow:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }
.hr-catalog__browse-foot { flex: none; padding: var(--sp-1) var(--sp-5) var(--sp-3); border-top: 1px solid var(--hr-divider); }
.hr-catalog__mode--row { width: 100%; min-height: 60px; gap: var(--sp-3); padding: 0; font-size: var(--fs-body); }
.hr-catalog__mode--row .lbl { flex: 1 1 auto; text-align: left; }
.hr-catalog__mode--row [data-lucide], .hr-catalog__mode--row svg { width: 20px; height: 20px; flex: none; }

/* ---------- Present: the sideways slide ----------
   User, 2026-09-21, option B of the redesign. The whole photo, never cropped,
   as big as the screen allows, on navy, with the colours in a strip beside it
   rather than on top of it. module.js picks one of three shapes from the
   screen: side by side (a computer, or anything held sideways), stacked (a
   tablet held upright), or turned (a phone held upright: the same side by side
   slide a quarter turned, so it fills the screen once the phone is turned,
   with rotation lock on or off). */
.hr-catalog__show {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  background: var(--hr-navy); color: var(--hr-text-on-color);
  overscroll-behavior: none;
}
.hr-catalog__show-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; }
.hr-catalog__show.is-turned .hr-catalog__show-frame {
  left: 100%; width: var(--hrc-sh, 100vh); height: var(--hrc-sw, 100vw);
  transform-origin: 0 0; transform: rotate(90deg);
}
.hr-catalog__show.is-stacked .hr-catalog__show-frame { flex-direction: column; }

/* The swipe belongs to the photo: no scroll, no zoom, no pull to refresh. */
.hr-catalog__show-stage { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; touch-action: none; }
.hr-catalog__show-main {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* THE PHOTO FILLS ITS SIDE OF THE SLIDE, edge to edge, whatever size the file
   is (user, 2026-09-21: "touching the edges of the screen"). Sized by its own
   pixels it could not: a 1200px colour preview drew at three quarters of the
   size of a 1600px photo and sat in the middle of the navy, and on a sharp
   phone screen every photo did, because the browser divides a photo's pixels
   by the screen's density. The box is the whole stage now and contain fits the
   picture inside it, never cropped. module.js sizes the strip beside it so the
   stage comes out close to the photos' own 4:3, which leaves little or no navy
   around them. No rounded corners and no shadow: they would draw around the
   box, not around the picture. */
.hr-catalog__show-main img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
/* On the navy stage the tag turns light, at the top left of the photo area. */
.hr-catalog__show-main .hr-catalog__preview-tag {
  top: var(--sp-3); left: var(--sp-3); bottom: auto;
  background: var(--hr-surface); color: var(--hr-navy);
}
.hr-catalog__show-none { color: var(--hr-blue-100); font-size: var(--fs-small); }
/* A colour with no top-down sample photo of its own opens on its colour
   block, filling the stage the way a photograph does. */
.hr-catalog__show-swatch { display: block; width: 100%; height: 100%; }

.hr-catalog__show-side {
  flex: none; width: var(--hrc-side, 360px); min-height: 0;
  display: flex; flex-direction: column;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-5);
  overflow-y: auto; overscroll-behavior: contain;
}
.hr-catalog__show.is-stacked .hr-catalog__show-side {
  width: auto; height: var(--hrc-side-h, 46%); padding: var(--sp-4) var(--sp-6) var(--sp-5);
}
.hr-catalog__show.is-compact .hr-catalog__show-side {
  padding: var(--sp-3) var(--sp-4);
  padding-right: max(var(--sp-4), env(safe-area-inset-right, 0px));
}
.hr-catalog__show-top { display: flex; align-items: center; gap: var(--sp-3); }
.hr-catalog__show-count { font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--hr-blue-100); }
.hr-catalog__show .hr-catalog__close { color: var(--hr-blue-100); }
.hr-catalog__show .hr-catalog__close:hover { color: var(--hr-text-on-color); }
.hr-catalog__show-brand {
  display: block; margin-top: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-blue-100);
}
.hr-catalog__show-side h3 {
  margin: 6px 0 0; font-family: var(--font-display); font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold); line-height: var(--lh-tight); color: var(--hr-text-on-color);
}
.hr-catalog__show-lab {
  margin: var(--sp-6) 0 var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-blue-100);
}
.hr-catalog__show-lab .cn { display: none; }

/* A row per colour: the stone itself, then its name. */
.hr-catalog__show-colours { display: flex; flex-direction: column; gap: 2px; }
.hr-catalog__show-col {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: 6px var(--sp-2); cursor: pointer; text-align: left;
  border: 0; border-radius: var(--r-md); background: none; color: var(--hr-blue-100);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hr-catalog__show-col .dot { display: none; }
.hr-catalog__show-col .im {
  flex: none; width: 52px; height: 39px; overflow: hidden;
  border-radius: var(--r-sm); background: var(--c);
}
.hr-catalog__show-col .im img, .hr-catalog__show-col .im .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__show-col:hover { background: var(--hr-navy-700); color: var(--hr-text-on-color); }
.hr-catalog__show-col.is-active { background: var(--hr-navy-700); color: var(--hr-text-on-color); font-weight: var(--fw-extrabold); }
.hr-catalog__show-col.is-active .im { box-shadow: 0 0 0 2px var(--hr-navy-700), 0 0 0 4px var(--hr-text-on-color); }
.hr-catalog__show-col:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Paint only: the search over the whole palette, set in the slide's navy.
   Prefixed with the slide, because the general search field rules come later
   in this file and would otherwise win: their flex basis of 260px, in this
   column, is 260px of height. */
.hr-catalog__show .hr-catalog__show-palq { flex: none; margin: 0 0 var(--sp-2); }
.hr-catalog__show .hr-catalog__show-palq[hidden] { display: none; }
.hr-catalog__show .hr-catalog__show-palq input {
  min-height: 44px; background: var(--hr-navy-700); border-color: var(--hr-navy-700);
  color: var(--hr-text-on-color);
}
.hr-catalog__show .hr-catalog__show-palq input::placeholder { color: var(--hr-blue-100); opacity: 1; }
.hr-catalog__show .hr-catalog__show-palq [data-lucide],
.hr-catalog__show .hr-catalog__show-palq svg { color: var(--hr-blue-100); }
.hr-catalog__show .hr-catalog__palnote--show { margin: var(--sp-2) 0 0; color: var(--hr-blue-100); }

.hr-catalog__show-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.hr-catalog__show-thumb {
  display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--r-sm); background: none; opacity: .6;
  transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.hr-catalog__show-thumb img, .hr-catalog__show-thumb .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__show-thumb:hover { opacity: 1; }
.hr-catalog__show-thumb.is-active { border-color: var(--hr-text-on-color); opacity: 1; }
.hr-catalog__show-thumb:focus-visible { outline: none; box-shadow: var(--shadow-focus); opacity: 1; }

.hr-catalog__show-price { margin-top: var(--sp-5); }
.hr-catalog__show-price .v {
  font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold); color: var(--hr-text-on-color);
}
.hr-catalog__show-price .u { font-family: var(--font-display); font-size: var(--fs-small); color: var(--hr-blue-100); }
.hr-catalog__show-price .n { display: block; font-size: var(--fs-micro); color: var(--hr-blue-100); margin-top: 2px; }

/* The neighbouring products, by name. */
.hr-catalog__show-nav { margin-top: auto; padding-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); }
.hr-catalog__show-pn {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-3); cursor: pointer;
  border: 1px solid var(--hr-blue-700); border-radius: var(--r-md); background: none;
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  color: var(--hr-text-on-color);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__show-pn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-catalog__show-pn--next { justify-content: flex-end; text-align: right; }
.hr-catalog__show-pn [data-lucide], .hr-catalog__show-pn svg { width: 18px; height: 18px; flex: none; }
.hr-catalog__show-pn:hover { background: var(--hr-blue-700); }
.hr-catalog__show-pn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__show-hint { display: none; }

/* A phone held sideways, or turned: a narrow strip. The colours become dots
   with the chosen one named above them, and the product buttons lose their
   names to a line saying the photo swipes. */
.hr-catalog__show.is-compact .hr-catalog__show-brand { margin-top: 0; }
.hr-catalog__show.is-compact .hr-catalog__show-side h3 { font-size: var(--fs-h5); margin-top: 3px; }
.hr-catalog__show.is-compact .hr-catalog__show-lab { margin: var(--sp-3) 0 var(--sp-1); }
.hr-catalog__show.is-compact .hr-catalog__show-lab .cn {
  display: inline; margin-left: var(--sp-2);
  letter-spacing: 0; text-transform: none; font-weight: var(--fw-semibold); color: var(--hr-text-on-color);
}
.hr-catalog__show.is-compact .hr-catalog__show-colours { flex-direction: row; flex-wrap: wrap; gap: 0; margin-left: -8px; }
.hr-catalog__show.is-compact .hr-catalog__show-col {
  width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%;
}
.hr-catalog__show.is-compact .hr-catalog__show-col .im,
.hr-catalog__show.is-compact .hr-catalog__show-col .nm { display: none; }
.hr-catalog__show.is-compact .hr-catalog__show-col .dot {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 1px var(--hr-blue-700);
}
.hr-catalog__show.is-compact .hr-catalog__show-col:hover,
.hr-catalog__show.is-compact .hr-catalog__show-col.is-active { background: none; }
.hr-catalog__show.is-compact .hr-catalog__show-col.is-active .dot {
  box-shadow: inset 0 0 0 1px var(--hr-blue-700), 0 0 0 2px var(--hr-navy), 0 0 0 4px var(--hr-text-on-color);
}
.hr-catalog__show.is-compact .hr-catalog__show-thumbs { gap: 5px; }
.hr-catalog__show.is-compact .hr-catalog__show-price { margin-top: var(--sp-3); }
.hr-catalog__show.is-compact .hr-catalog__show-price .v { font-size: var(--fs-small); }
.hr-catalog__show.is-compact .hr-catalog__show-price .n { display: none; }
.hr-catalog__show.is-compact .hr-catalog__show-nav { padding-top: var(--sp-3); }
.hr-catalog__show.is-compact .hr-catalog__show-pn {
  flex: none; width: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%;
}
.hr-catalog__show.is-compact .hr-catalog__show-pn span { display: none; }
.hr-catalog__show.is-compact .hr-catalog__show-hint {
  display: block; flex: 1 1 auto; order: -1; font-size: var(--fs-micro); color: var(--hr-blue-100);
}

/* The first time the slide opens turned, an upright note says why, then fades. */
.hr-catalog__show-turn {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-6); text-align: center;
  background: color-mix(in srgb, var(--hr-navy) 84%, transparent);
  animation: hrc-fade var(--dur-slow) var(--ease-out);
}
.hr-catalog__show-turn .ic {
  display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: var(--sp-3);
  border-radius: 50%; background: var(--hr-navy-700);
}
.hr-catalog__show-turn .ic [data-lucide], .hr-catalog__show-turn .ic svg {
  width: 36px; height: 36px; animation: hrc-turn 1.6s var(--ease-in-out) infinite;
}
.hr-catalog__show-turn b { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-extrabold); }
.hr-catalog__show-turn span:last-child { font-size: var(--fs-small); color: var(--hr-blue-100); }
@keyframes hrc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hrc-turn { 0%, 20% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }

.hr-catalog__search {
  position: relative; flex: 1 1 260px; min-width: 0;
  display: flex; align-items: center;
}
.hr-catalog__search [data-lucide] {
  position: absolute; left: var(--sp-3); width: 17px; height: 17px;
  color: var(--hr-text-subtle); pointer-events: none;
}
.hr-catalog__search input {
  width: 100%; min-height: 48px; padding: 10px var(--sp-4) 10px var(--sp-8);
  /* 16px minimum or iOS zooms the whole page on focus */
  font-size: 16px; font-family: var(--font-sans); color: var(--hr-text);
  border: 1px solid var(--hr-border); border-radius: var(--r-md);
  background: var(--hr-surface);
}
.hr-catalog__search input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--hr-blue); }

/* ---------- Category header ---------- */
.hr-catalog__head { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.hr-catalog__eyebrow {
  display: block; font-family: var(--font-display); font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--hr-blue); margin-bottom: var(--sp-2);
}
.hr-catalog__titlerow { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.hr-catalog__titlerow h2 {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold); line-height: var(--lh-snug); color: var(--hr-text-strong);
}
.hr-catalog__unit {
  font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--hr-text-muted);
  background: var(--hr-surface-alt); border: 1px solid var(--hr-border);
  border-radius: var(--r-pill); padding: 3px 10px;
}
.hr-catalog__note {
  margin: var(--sp-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-relaxed);
  color: var(--hr-text-muted); max-width: 68ch;
}
.hr-catalog__note b { color: var(--hr-text-strong); font-weight: var(--fw-bold); }
/* A category shows no note now, so the empty line takes no room under the title. */
.hr-catalog__note:empty { display: none; }

/* ---------- Card grid ---------- */
.hr-catalog__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  padding: 0 var(--sp-5) var(--sp-6);
}
/* A REAL BORDER, and the photo clipped by its own wrapper rather than by the
   card. The overlay ring this replaces was even, but it drew across the top of
   the photograph, and a grey line curving over a dark image at the two top
   corners is exactly the artefact it was meant to remove. Nothing crosses the
   photo now: the border sits outside the padding box where the image cannot
   reach it, and the image rounds its own top corners to match. */
.hr-catalog__card {
  position: relative;
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 0; min-width: 0;
  transition: border-color var(--dur) var(--ease-out);
}
/* THE HOVER STROKE IS AN OVERLAY, THE RESTING ONE IS A REAL BORDER, and it
   has to be both because the two states fail in opposite directions.

   A real border sits outside the padding box, so at rest it never crosses the
   photograph and reads clean. But the photo is clipped to the padding box,
   and along the two top curves its antialiased edge blends into the inside of
   the stroke, eating a fraction of it: the border looks thinner at the top
   corners than the bottom ones, where it meets the card's white background
   instead.

   An overlay drawn on top is perfectly even, but in grey at rest it becomes a
   line curving over the photograph, which is its own artefact.

   So: the resting border stays a real border, and the hover ring is an
   overlay that is transparent until it is wanted. inset:-1px puts it exactly
   on the border box rather than just inside it, so the two coincide instead
   of stacking into a 2px stroke. */
.hr-catalog__card::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border: 1px solid transparent; border-radius: inherit;
  transition: border-color var(--dur) var(--ease-out);
}
/* No lift and no drop shadow on hover. The photograph zooms instead, which
   keeps the card where the cursor left it: a card that rises moves its own
   target out from under the pointer, and in a grid it shadows its neighbour. */
.hr-catalog__card:hover { border-color: var(--hr-blue); }
.hr-catalog__card:hover::after { border-color: var(--hr-blue); }
.hr-catalog__card:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--hr-blue); }
.hr-catalog__card:focus-visible::after { border-color: var(--hr-blue); }

/* 4:3 fixed, so the grid holds its shape before any photograph lands and
   the row does not reflow underneath a thumb mid-scroll. */
/* Rounds its own top corners, one pixel tighter than the card's radius to sit
   inside the border rather than under it. */
.hr-catalog__im {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  background: var(--hr-surface-alt); overflow: hidden;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.hr-catalog__im img, .hr-catalog__im .ph {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 480ms var(--ease-out);
}
.hr-catalog__im .ph { position: absolute; inset: 0; }
/* Contained by the frame's own overflow:hidden, so it grows into the card
   rather than past it. */
.hr-catalog__card:hover .hr-catalog__im img,
.hr-catalog__card:hover .hr-catalog__im .ph,
.hr-catalog__card:focus-visible .hr-catalog__im img,
.hr-catalog__card:focus-visible .hr-catalog__im .ph { transform: scale(1.06); }
.hr-catalog__badges {
  position: absolute; left: var(--sp-2); top: var(--sp-2);
  display: flex; gap: 5px; flex-wrap: wrap;
}
.hr-catalog__tag {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--hr-surface); border: 1px solid var(--hr-border); color: var(--hr-navy);
}
.hr-catalog__tag--cool { background: var(--hr-green-50); border-color: var(--hr-green); color: var(--hr-green-700); }

.hr-catalog__cardin { display: flex; flex-direction: column; gap: 5px; padding: 15px; min-width: 0; }
.hr-catalog__br, .hr-catalog__where {
  font-size: var(--fs-micro); color: var(--hr-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-catalog__cardnm {
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--hr-text-strong); line-height: var(--lh-snug);
}
.hr-catalog__cchips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hr-catalog__cchips i {
  width: 14px; height: 14px; border-radius: 50%; display: block;
  background: var(--c); border: 1px solid var(--hr-border);
}
/* No marker ring on the card dots. A row of colours reads as a row of
   colours; a coded ring on two of them is a legend the card never prints. */
/* Only ever rendered when a product carries more colours than fit as dots. */
.hr-catalog__cchips u { text-decoration: none; font-size: var(--fs-micro); color: var(--hr-text-subtle); }
.hr-catalog__ft { margin-top: auto; padding-top: var(--sp-2); }
.hr-catalog__price {
  font-family: var(--font-display); font-size: var(--fs-small);
  font-weight: var(--fw-extrabold); color: var(--hr-blue-700);
}
.hr-catalog__price .u { font-weight: var(--fw-regular); color: var(--hr-text-muted); }

.hr-catalog__diag {
  margin: var(--sp-4); padding: var(--sp-4);
  /* Navy on the alt surface, not amber. This box only ever appears when the
     catalog is broken, but amber has exactly two jobs in this module and a
     third one would blunt both. */
  background: var(--hr-surface-alt); border: 1px solid var(--hr-navy);
  border-radius: var(--r-md); font-size: var(--fs-small); color: var(--hr-navy);
}
.hr-catalog__diag b { display: block; font-family: var(--font-display); margin-bottom: var(--sp-2); }
.hr-catalog__diag ul { margin: 0 0 var(--sp-3); padding-left: 1.2em; }
.hr-catalog__diag li { margin-bottom: 4px; }
.hr-catalog__diag p { margin: 0; color: var(--hr-text-muted); }

.hr-catalog__empty {
  padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--hr-text-muted);
  font-size: var(--fs-small);
}
.hr-catalog__empty b {
  display: block; font-family: var(--font-display); font-size: var(--fs-h5);
  color: var(--hr-text-strong); margin-bottom: var(--sp-2);
}

/* ---------- Panels ---------- */
.hr-catalog__scrim {
  position: fixed; inset: 0; background: var(--hr-navy); opacity: .45; z-index: 60;
}
.hr-catalog__drawer, .hr-catalog__cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  display: flex; flex-direction: column;
  background: var(--hr-surface); box-shadow: var(--shadow-xl);
}
/* A FIXED WIDTH, not a share of the viewport. min(540px, 96vw) held at 540
   down to a 563px window and then started shrinking with it, so the panel
   moved under the cursor while the window was being dragged. It is 540 now
   and stays 540. Below the phone breakpoint it is a full width sheet
   instead, which is a different layout rather than the same panel resized. */
.hr-catalog__drawer { width: 540px; }
/* The estimate's cards sit on the page grey, so each reads as a thing of its
   own rather than a row in a table. */
.hr-catalog__cart { width: 600px; background: var(--hr-bg); }

.hr-catalog__drawer-head, .hr-catalog__cart-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5); border-bottom: 1px solid var(--hr-divider);
  background: var(--hr-surface);
}
/* White now, like the product panel (user, 2026-09-21, option C). The navy
   moved to the total bar at the foot, where the figure that matters is. */
.hr-catalog__cart-head { align-items: center; padding-right: var(--sp-3); }
.hr-catalog__cart-head h3, .hr-catalog__drawer-head h3 {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold); color: var(--hr-text-strong); line-height: var(--lh-snug);
}
.hr-catalog__cart-count { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--hr-text-muted); }
.hr-catalog__cart-count:empty { display: none; }
/* Nothing on the estimate means no total to discount. */
.hr-catalog__cart.is-empty .hr-catalog__more { display: none; }
.hr-catalog__drawer-title { flex: 1 1 auto; min-width: 0; }
.hr-catalog__drawer-brand {
  display: block; font-family: var(--font-display); font-size: var(--fs-micro);
  font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--hr-green-700); margin-bottom: 6px;
}
.hr-catalog__dname { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
/* The same tag the product's card carries, outlined rather than filled so it
   stays quieter than the name beside it. */
.hr-catalog__tier {
  flex: none; padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--hr-border); background: var(--hr-surface);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  line-height: 1; color: var(--hr-navy);
}
/* No box. It is an X, which needs no chrome to be read as a close, and a
   bordered button beside a product name competes with the panel's own
   content. The 44px target stays; only the paint goes. */
.hr-catalog__close {
  margin-left: auto; flex: none; width: 44px; height: 44px;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--hr-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.hr-catalog__close:hover { color: var(--hr-navy); background: none; }
/* THE TITLE TAKES THE FREE SPACE, so the X always sits at the far right, with
   the ellipsis beside it when that shows. The auto margin used to sit on the
   ellipsis, with a + rule taking it off the X. The client view hides the
   ellipsis, and a + rule cannot tell a hidden sibling from a shown one, so
   the X was left with no margin at all, right next to the title (user,
   2026-09-18). */
.hr-catalog__cart-title { flex: 1 1 auto; min-width: 0; }
.hr-catalog__cart-head .hr-catalog__more,
.hr-catalog__cart-head .hr-catalog__close { margin-left: 0; }
/* Focus still draws a ring. Hover is colour alone, which a keyboard cannot
   produce, so removing the box cannot cost the focus indicator. */
.hr-catalog__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__close [data-lucide],
.hr-catalog__close svg { width: 20px; height: 20px; }

.hr-catalog__drawer-body, .hr-catalog__cart-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5);
  /* Reaching the end of the panel must not start scrolling the page behind
     it. The page is locked while a panel is open as well, but this stops the
     chaining at the source rather than relying on the lock alone. */
  overscroll-behavior: contain;
}
.hr-catalog__cart-body { padding: var(--sp-4); }
.hr-catalog__drawer-foot {
  flex: none; padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--hr-divider); background: var(--hr-surface);
  display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap;
}

.hr-catalog__hero {
  position: relative;
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md);
  background: var(--hr-surface-alt); overflow: hidden; margin-bottom: var(--sp-4);
}
/* On a recoloured top-down (a real photo of the same paver in another colour,
   recoloured): says so, small, in the corner, so it is never taken for a
   photograph of this colour. */
.hr-catalog__preview-tag {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--hr-navy); color: var(--hr-text-on-color);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; line-height: 1.4;
  pointer-events: none;
}
.hr-catalog__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__hero .ph { display: block; width: 100%; height: 100%; }

/* FIVE COLUMNS ALWAYS, whatever the count. Five thumbnails and their four
   gaps then measure exactly the width of the hero above them, and with fewer
   than five each one keeps that same width and sits in the same place rather
   than stretching to fill the row. More than five wraps to a second row of
   five, still in line. */
.hr-catalog__dshots {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2); margin: 0 0 var(--sp-4);
}
.hr-catalog__dshot {
  width: 100%; aspect-ratio: 4 / 3; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid var(--hr-border); border-radius: var(--r-sm); background: var(--hr-surface-alt);
  transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  opacity: .7;
}
.hr-catalog__dshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-catalog__dshot .ph { display: block; width: 100%; height: 100%; }
.hr-catalog__dshot:hover { opacity: 1; }
/* Blue, matching every other selected thing in the module, so the current
   shot reads as chosen rather than merely hovered. */
.hr-catalog__dshot.is-active { border-color: var(--hr-blue); opacity: 1; }
.hr-catalog__dshot:focus-visible { outline: none; box-shadow: var(--shadow-focus); opacity: 1; }

.hr-catalog__blurb { font-size: var(--fs-small); line-height: var(--lh-relaxed); margin: 0 0 var(--sp-4); }

.hr-catalog__feats { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.hr-catalog__feats li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-small); color: var(--hr-body);
}
.hr-catalog__feats [data-lucide] { width: 17px; height: 17px; flex: none; color: var(--hr-green-700); margin-top: 2px; }

/* A small caps label over each part of the product panel: Color, About,
   Details. The Color one carries the chosen colour's name after it. */
.hr-catalog__sect {
  margin: var(--sp-6) 0 var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; line-height: 1.4;
  color: var(--hr-text-muted);
}
.hr-catalog__sect b {
  margin-left: var(--sp-2); letter-spacing: 0; text-transform: none;
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong);
}

/* Label and value in two columns, the labels one width so the values line up. */
.hr-catalog__meta { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.hr-catalog__meta > div {
  display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--sp-3);
  align-items: baseline; font-size: var(--fs-small);
}
.hr-catalog__meta dt, .hr-catalog__meta .k {
  font-size: var(--fs-micro); color: var(--hr-text-subtle); text-transform: uppercase; line-height: 1.5;
  letter-spacing: var(--tracking-eyebrow); font-family: var(--font-display); font-weight: var(--fw-extrabold);
}
.hr-catalog__meta .v { color: var(--hr-body); min-width: 0; }
/* The codes are buttons, which sit on a centre line of their own. */
.hr-catalog__meta > div[data-hrc-codes-row] { align-items: center; }
.hr-catalog__costv { color: var(--hr-warm-600); font-weight: var(--fw-semibold); }

/* ---------- Resource codes ----------
   Always inside a data-internal wrapper, so the client view switch hides them
   along with the costs. Each code is a button that copies itself; the label
   names the shape when one colour orders under several codes. */
.hr-catalog__codes { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.hr-catalog__code {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 32px; padding: 4px var(--sp-2);
  font: inherit; color: var(--hr-text); text-align: left; cursor: pointer;
  background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__code .c {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: 0.02em; color: var(--hr-text-strong);
  font-variant-numeric: tabular-nums; user-select: all;
}
.hr-catalog__code .l { min-width: 0; font-size: var(--fs-micro); color: var(--hr-text-muted); }
.hr-catalog__code .i-copy,
.hr-catalog__code .i-done { display: inline-flex; flex: none; color: var(--hr-text-subtle); }
.hr-catalog__code .i-done { display: none; color: var(--hr-green-700); }
.hr-catalog__code svg { width: 14px; height: 14px; stroke-width: 1.75; }
.hr-catalog__code:hover { background: var(--hr-blue-50); border-color: var(--hr-blue); }
.hr-catalog__code:focus-visible { outline: none; border-color: var(--hr-blue); box-shadow: var(--shadow-focus); }
.hr-catalog__code.is-copied { background: var(--hr-green-50); border-color: var(--hr-green); }
.hr-catalog__code.is-copied .i-copy { display: none; }
.hr-catalog__code.is-copied .i-done { display: inline-flex; }
/* A fingertip on the tablet needs the full 44px. A mouse on a laptop does not. */
@media (pointer: coarse) {
  .hr-catalog__code { min-height: 44px; }
}
.hr-catalog__line-codes { margin-top: 6px; }

/* The colour's name rides on the Color label above the row (.hr-catalog__sect
   b) and follows the cursor. The row pulls left by the 8px of tap target
   around the first dot, so the dot itself lines up with the text above. */
.hr-catalog__swatches { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: 0 0 var(--sp-2) -8px; }
/* THE DOT IS THE WHOLE CONTROL. The button carries no border, no background
   and no radius of its own: it is 44px of tap target around the colour and
   nothing else. Leaving the old pill styling on it drew a second circle
   around every swatch, which is what it looked like. */
.hr-catalog__sw {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none;
}
.hr-catalog__sw .dot {
  width: 28px; height: 28px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px var(--hr-border);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
/* The width-reservation trick that used to live here went with the labels.
   A swatch with no text in it cannot change width when it is selected. */
/* Blue for selected, and nothing else. No amber or green ring: the price
   effect belongs under the price, in the block below, not scattered around
   the swatches as a code the reader has to learn. */
.hr-catalog__sw:hover .dot { box-shadow: inset 0 0 0 1px var(--hr-border), 0 0 0 2px var(--hr-blue-100); }
.hr-catalog__sw:focus-visible { outline: none; }
.hr-catalog__sw:focus-visible .dot { box-shadow: inset 0 0 0 1px var(--hr-border), var(--shadow-focus); }
.hr-catalog__sw[aria-pressed="true"] .dot {
  box-shadow: inset 0 0 0 1px var(--hr-border), 0 0 0 2px var(--hr-surface), 0 0 0 4px var(--hr-blue);
}

/* ---------- Paint: the whole palette ----------
   Under a coating's popular row, a ghost pill opens every colour the coating
   comes in: a search field, the families as chips, and each colour as a
   named chip in a list that scrolls inside the panel, so 661 colours never
   push the price and the details a screen away. */
.hr-catalog__palbtn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4); margin: var(--sp-1) 0 var(--sp-3);
  cursor: pointer; border: 1.5px solid var(--hr-blue); border-radius: var(--r-pill);
  background: var(--hr-surface); color: var(--hr-blue-700);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__palbtn [data-lucide], .hr-catalog__palbtn svg { width: 17px; height: 17px; flex: none; }
.hr-catalog__palbtn .chev { transition: transform var(--dur) var(--ease-out); }
.hr-catalog__palbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hr-catalog__palbtn:hover { background: var(--hr-blue-50); }
.hr-catalog__palbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.hr-catalog__palpick {
  margin: 0 0 var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--hr-border); border-radius: var(--r-md); background: var(--hr-surface-alt);
}
.hr-catalog__palpick[hidden] { display: none; }
.hr-catalog__palpick .hr-catalog__palq { width: 100%; }
.hr-catalog__palfam { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
/* "Peaches, pinks, and yellows" is most of a 320px phone, so these may wrap. */
.hr-catalog__palfam .hr-catalog__chip { max-width: 100%; white-space: normal; text-align: left; }
.hr-catalog__palcount { margin: 0 0 var(--sp-2); font-size: var(--fs-micro); color: var(--hr-text-muted); }
/* Two or three named chips a row on a computer, one or two on a phone. */
.hr-catalog__pallist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 2px var(--sp-2);
  max-height: min(360px, 48vh); overflow-y: auto; overscroll-behavior: contain;
}
.hr-catalog__pallist[hidden] { display: none; }
.hr-catalog__palc {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
  min-height: 44px; padding: 4px var(--sp-2); cursor: pointer; text-align: left;
  border: 0; border-radius: var(--r-sm); background: none;
  font-family: var(--font-sans); font-size: var(--fs-small); color: var(--hr-text);
}
.hr-catalog__palc .chip {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hr-border);
}
.hr-catalog__palc .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-catalog__palc .cd {
  flex: none; font-size: var(--fs-micro); color: var(--hr-text-subtle); font-variant-numeric: tabular-nums;
}
.hr-catalog__palc:hover { background: var(--hr-surface); }
.hr-catalog__palc:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Chosen: the same blue ring the dots on the row wear. */
.hr-catalog__palc[aria-pressed="true"] { background: var(--hr-blue-50); color: var(--hr-text-strong); font-weight: var(--fw-semibold); }
.hr-catalog__palc[aria-pressed="true"] .chip {
  box-shadow: inset 0 0 0 1px var(--hr-border), 0 0 0 2px var(--hr-surface), 0 0 0 4px var(--hr-blue);
}
.hr-catalog__palnote { margin: 0 0 var(--sp-2); font-size: var(--fs-micro); line-height: 1.5; color: var(--hr-text-muted); }
.hr-catalog__palnote[hidden] { display: none; }

/* A coating with no photograph yet: twelve of its colours as tiles, with a
   hairline of card between them. */
.hr-catalog__im .hr-catalog__mosaic {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 2px; background: var(--hr-surface);
}
.hr-catalog__mosaic i { display: block; }

/* Half the row each. Both blocks are short, and stacked they wasted the
   panel's width and pushed the supplier and warranty below the fold. */
/* 60/40, not half and half. The price side carries a sentence, "Champagne
   Bronze is +$68 / sq", while the field side carries a number and a unit. An
   even split had the longer colour names running to the edge of the block.
   3fr and 2fr rather than percentages, so the gap comes out of the row rather
   than out of the columns. */
/* With the price block gone in the client view there is one child left. It
   keeps half the row rather than taking all of it: a number field that runs
   the full width of the panel reads as a place to write a sentence, and the
   answer is rarely more than four digits.

   Two equal columns rather than a max-width, so the field lines up with the
   left edge of everything above it and the empty half is just empty.

   Above the phone only. Half of a 320px screen is not a field. */
@media (min-width: 768px) {
  .hr-catalog.is-client .hr-catalog__pricerow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hr-catalog__pricerow {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: var(--sp-3); align-items: stretch; margin: var(--sp-6) 0 var(--sp-2);
}
/* When the price block is the taller of the two (a product whose colours
   move the price, below), the field sits at the foot of the row so the two
   bottom edges still line up. */
.hr-catalog__sizes { align-content: end; }
.hr-catalog__pricerow > * { min-width: 0; }
/* NO HEIGHT OF ITS OWN. The row stretches both halves to match, so the field
   beside it sets the height and this block simply fills it and centres what
   is inside. One line lands dead centre, two straddle the same centre, and
   neither can resize the row.

   That only works while its natural height stays under the field's. The field
   is a 14px label, a 5px gap and a 48px input: 67px. Two lines of price plus
   8px of padding either side is 66. So the block never wins, whichever colour
   is selected, and a pinned number that would drift the first time the type
   scale moved is not needed. */
.hr-catalog__priceblock {
  background: var(--hr-blue-50); border: 1px solid var(--hr-blue-100);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-4); margin-bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.hr-catalog__priceblock .big {
  font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold); color: var(--hr-blue-700);
  line-height: var(--lh-snug);
}
.hr-catalog__priceblock .per {
  display: block; margin-top: 2px; font-size: var(--fs-micro); line-height: 1.4; color: var(--hr-text-muted);
}
/* The block's height is what is fixed, not the note's, so an empty note takes
   no room and the lines above it centre. :empty removes the margin too, which
   a zero height element would otherwise keep. One line always: it leads with
   the figure, so a long colour name is what gets cut, never the price. */
.hr-catalog__priceblock .adj {
  display: block; font-size: var(--fs-micro); color: var(--hr-text-muted);
  margin-top: 3px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-catalog__priceblock .adj:empty { display: none; }
/* A product with a colour that moves the price keeps room for that note on
   every colour, the three lines worked out from the same tokens they are set
   in, so clicking from a base colour to an adjusted one cannot grow the row.
   A product with no adjustments never has a third line and does not pay for
   one. */
.hr-catalog__priceblock.has-adj {
  min-height: calc(var(--fs-h4) * var(--lh-snug) + var(--fs-micro) * 2.8 + 5px + var(--sp-2) * 2 + 2px);
}

/* One field, laid out as a grid so a second could join it without the row
   having to be rebuilt. */
.hr-catalog__sizes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin-bottom: 0; }
.hr-catalog__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hr-catalog__field label {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__field input {
  min-height: 48px; padding: 10px var(--sp-3);
  font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-semibold);
  color: var(--hr-text-strong);
  border: 1px solid var(--hr-border); border-radius: var(--r-md); background: var(--hr-surface);
  width: 100%;
}
.hr-catalog__field input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--hr-blue); }

.hr-catalog__linetotal { flex: 1 1 auto; min-width: 0; }
.hr-catalog__linetotal .lbl {
  display: block; font-size: var(--fs-micro); color: var(--hr-text-muted); line-height: 1.4;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
}
.hr-catalog__linetotal .val {
  display: block; margin-top: 3px;
  font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--lh-snug);
  font-weight: var(--fw-extrabold); color: var(--hr-blue-700);
}
.hr-catalog__linetotal .cost {
  display: block; margin-top: 2px; font-size: var(--fs-micro); color: var(--hr-warm-600); font-weight: var(--fw-semibold);
}

/* To the right of the line total, and on its own it stays there: with the
   figures hidden there is nothing to its left. */
.hr-catalog__add {
  flex: none; margin-left: auto; min-height: 48px; padding: 12px var(--sp-6); cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  border: 1px solid var(--hr-green); border-radius: var(--r-pill);
  background: var(--hr-green); color: var(--hr-navy);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hr-catalog__add:hover, .hr-catalog__add:focus { background: var(--hr-green-600); border-color: var(--hr-green-600); }
.hr-catalog__add:focus-visible { outline: none; box-shadow: var(--shadow-focus-green); }
.hr-catalog__add:link, .hr-catalog__add:visited, .hr-catalog__add:hover,
.hr-catalog__add:focus, .hr-catalog__add:active { text-decoration: none; }
/* Confirmed and spent. It keeps the green so the eye reads it as the same
   control having succeeded rather than as a new disabled one, but it stops
   inviting a second press. Reopening the product is what clears it. */
.hr-catalog__add.is-added,
.hr-catalog__add.is-added:hover,
.hr-catalog__add.is-added:focus {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--hr-green-50); border-color: var(--hr-green);
  color: var(--hr-green-700); cursor: default;
}
.hr-catalog__add.is-added [data-lucide] { width: 17px; height: 17px; flex: none; }
.hr-catalog__add[disabled] { opacity: 1; }

/* Client view. A class on the section, nothing more.

   data-cost is a figure the homeowner must not read: the material cost.
   data-internal is anything else that is ours rather than theirs, which is
   the supplier, the lead time, the installed cost and every total derived
   from it. Two names because they are two different reasons, and the next
   thing to hide will be one or the other. */
.hr-catalog.is-client [data-cost],
.hr-catalog.is-client [data-internal] { display: none !important; }


/* ---------- Estimate lines ----------
   User, 2026-09-21, option C of the panel redesign ("Cards + total bar"): a
   white card per line on the panel's grey, the quantity between a minus and
   a plus, and a service heading only when the estimate spans more than one. */
.hr-catalog__lines { display: grid; gap: var(--sp-5); }
.hr-catalog__group { display: grid; gap: var(--sp-3); }
.hr-catalog__group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 0 var(--sp-1);
}
.hr-catalog__group-head .s {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-blue);
}
.hr-catalog__group-head .t {
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--hr-text-strong); white-space: nowrap;
}
/* The photo takes both rows on a computer, the details and the quantity
   stacked beside it. On a phone the quantity row drops under the photo and
   takes the card's full width (the phone block below). */
.hr-catalog__line {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--sp-3);
  align-items: start; padding: var(--sp-3);
  background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--r-lg);
}
.hr-catalog__line-im {
  grid-row: 1 / span 2; display: block;
  width: 78px; height: 78px; border-radius: var(--r-md); overflow: hidden;
  background: var(--hr-surface-alt);
}
.hr-catalog__line-im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__line-im .ph { display: block; width: 100%; height: 100%; }
.hr-catalog__line-main { grid-column: 2; min-width: 0; }
.hr-catalog__line-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.hr-catalog__line-id { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.hr-catalog__line-nm {
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-bold);
  line-height: var(--lh-snug); color: var(--hr-text-strong);
}
.hr-catalog__line-sub { font-size: var(--fs-micro); color: var(--hr-text-muted); margin-top: 2px; }
/* Its own row, not an inline run after the category. Inline, the name and the
   category rendered as one word: "LandmarkAsphalt Shingles". */
.hr-catalog__line-colour {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-micro); color: var(--hr-body); margin-top: 4px;
}
.hr-catalog__line-colour em {
  font-style: normal; font-family: var(--font-display);
  font-weight: var(--fw-semibold); color: var(--hr-text-muted);
}
.hr-catalog__line-colour i {
  width: 11px; height: 11px; border-radius: 50%; background: var(--c);
  border: 1px solid var(--hr-border); flex: none;
}
.hr-catalog__line-bot {
  grid-column: 2; min-width: 0;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Right aligned, and still right aligned when a narrow card pushes it onto
   a row of its own under the quantity. */
.hr-catalog__line-amt { margin-left: auto; text-align: right; min-width: 0; }
.hr-catalog__line-price {
  font-family: var(--font-display); font-size: var(--fs-small);
  font-weight: var(--fw-extrabold); color: var(--hr-blue-700); white-space: nowrap;
}
.hr-catalog__line-cost {
  margin-top: 2px; font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  color: var(--hr-warm-600); white-space: nowrap;
}

/* The quantity in one pill: minus, the field, its unit, plus. The field
   still takes typing; the buttons move it a whole step (module.js). */
.hr-catalog__stepper {
  display: inline-flex; align-items: stretch; flex: none; height: 44px;
  border: 1px solid var(--hr-border); border-radius: var(--r-pill);
  background: var(--hr-surface); overflow: hidden;
}
.hr-catalog__step {
  flex: none; width: 44px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 0; background: var(--hr-surface-alt); color: var(--hr-navy);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__step:hover { background: var(--hr-blue-50); }
/* Inset, because the pill clips anything drawn outside its buttons. */
.hr-catalog__step:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--hr-blue); }
.hr-catalog__step [data-lucide], .hr-catalog__step svg { width: 16px; height: 16px; display: block; }
.hr-catalog__stepper input {
  width: 60px; min-width: 0; margin: 0; padding: 0 var(--sp-1) 0 6px;
  border: 0; border-radius: 0; background: none; box-shadow: none; text-align: right;
  font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-bold);
  color: var(--hr-text-strong);
  -moz-appearance: textfield; appearance: textfield;
}
.hr-catalog__stepper input::-webkit-outer-spin-button,
.hr-catalog__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hr-catalog__stepper input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--hr-blue); }
.hr-catalog__stepper .u {
  display: flex; align-items: center; padding: 0 10px 0 2px;
  font-size: var(--fs-micro); color: var(--hr-text-muted); white-space: nowrap;
}

/* trash-2, never an X. The X closes a panel and these two actions must not
   look alike: one is reversible, the other closes the thing you were reading. */
/* No box, matching the close X. It sits in the card's top right corner, pulled
   into the padding so the icon lines up with the card's edge. */
.hr-catalog__rm {
  flex: none; width: 40px; height: 40px; margin: -6px -6px 0 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--hr-text-subtle);
  transition: color var(--dur-fast) var(--ease-out);
}
/* Navy on hover, not amber. Amber has exactly two jobs in this module, an
   internal cost figure and a colour that costs more, and spending it on a
   destructive control as well would cost the consultant the one signal that
   means "this number is not for the homeowner". */
.hr-catalog__rm:hover { color: var(--hr-navy); }
.hr-catalog__rm:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__rm [data-lucide], .hr-catalog__rm svg { width: 18px; height: 18px; }
@media (pointer: coarse) {
  .hr-catalog__rm { width: 44px; height: 44px; margin: -8px -8px 0 0; }
}

.hr-catalog__cart-empty { margin: 0; text-align: center; color: var(--hr-text-muted); font-size: var(--fs-small); padding: var(--sp-8) var(--sp-4); }

/* ---------- Finish card ----------
   After the lines: the discount (behind the ellipsis), the homeowner's email,
   the fine print, and Clear. */
.hr-catalog__finish {
  display: grid; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--r-lg);
}
.hr-catalog__discount {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.hr-catalog__discount > span:first-child {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__discount .in { position: relative; display: inline-flex; align-items: center; }
.hr-catalog__discount input {
  width: 104px; min-height: 48px; padding: 10px 30px 10px var(--sp-3);
  font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-semibold);
  color: var(--hr-text-strong); text-align: right;
  border: 1px solid var(--hr-border); border-radius: var(--r-md); background: var(--hr-surface);
}
.hr-catalog__discount input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--hr-blue); }
.hr-catalog__discount .in i {
  position: absolute; right: 12px; font-style: normal; pointer-events: none;
  font-family: var(--font-display); font-size: var(--fs-small); color: var(--hr-text-muted);
}

.hr-catalog__breakdown div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-micro); color: var(--hr-text-muted); padding: 2px 0;
}
/* Green, because it is money coming off for the homeowner. Not amber: amber
   means a figure they are not meant to read, and this one is entirely for
   them. */
.hr-catalog__breakdown .off { color: var(--hr-green-700); font-weight: var(--fw-semibold); }

.hr-catalog__email { display: flex; flex-direction: column; gap: 6px; }
.hr-catalog__email span {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__email input {
  min-height: 48px; padding: 10px var(--sp-3); font-size: 16px;
  border: 1px solid var(--hr-border); border-radius: var(--r-md); background: var(--hr-surface);
  font-family: var(--font-sans); color: var(--hr-text);
}
.hr-catalog__email input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--hr-blue); }
/* Close under the field it explains. */
.hr-catalog__sendhelp { margin: calc(var(--sp-1) * -1) 0 0; font-size: var(--fs-micro); color: var(--hr-text-subtle); }
.hr-catalog__disclaimer, .hr-catalog__disclaimer p {
  margin: 0; font-size: var(--fs-micro);
  line-height: var(--lh-relaxed); color: var(--hr-text-muted);
}
.hr-catalog__disclaimer p + p { margin-top: var(--sp-2); }
.hr-catalog__clear {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 10px var(--sp-4); cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  border: 1px solid var(--hr-border); border-radius: var(--r-pill);
  background: var(--hr-surface); color: var(--hr-navy);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__clear:hover { background: var(--hr-surface-alt); }
.hr-catalog__clear:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__clear [data-lucide], .hr-catalog__clear svg { width: 16px; height: 16px; flex: none; color: var(--hr-text-muted); }

/* ---------- Total bar ----------
   Pinned under the lines, navy, and never scrolls away: the total on the
   left, Send on the right. The figures are ours and hide with the switch;
   the count and Send stay. */
.hr-catalog__totalbar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: var(--hr-navy); color: var(--hr-text-on-color);
}
.hr-catalog__totalbar-l { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hr-catalog__totalbar .k { font-size: var(--fs-micro); line-height: 1.4; color: var(--hr-blue-100); }
.hr-catalog__totalbar strong {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug); color: var(--hr-text-on-color); white-space: nowrap;
}
/* "Material cost", never "margin". The total above it is installed cost,
   material plus subcontractor labour, so the gap between the two is labour,
   not profit. Full amber here: the darker shade used on white is too dim on
   navy. */
.hr-catalog__totalbar .c { font-size: var(--fs-micro); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--hr-warm); }
.hr-catalog__send {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 12px var(--sp-6); cursor: pointer; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  border: 1px solid var(--hr-green); border-radius: var(--r-pill);
  background: var(--hr-green); color: var(--hr-navy);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hr-catalog__send:hover, .hr-catalog__send:focus { background: var(--hr-green-600); border-color: var(--hr-green-600); }
.hr-catalog__send:focus-visible { outline: none; box-shadow: var(--shadow-focus-green); }
.hr-catalog__send[disabled] { opacity: .55; cursor: not-allowed; }
.hr-catalog__send [data-lucide], .hr-catalog__send svg { width: 18px; height: 18px; flex: none; }
.hr-catalog__send .sm { display: none; }

/* ---------- Price sheet ---------- */
.hr-catalog__pick { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.hr-catalog__pick > span {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__pick .sel { position: relative; display: inline-flex; align-items: center; }
.hr-catalog__pick select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  min-height: 48px;
  /* 40px of right padding: 16 of edge, 16 of chevron, 8 of gap. The text can
     never run into the arrow and the arrow never sits on the border. */
  padding: 10px 40px 10px var(--sp-4);
  font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-semibold);
  color: var(--hr-navy); background: var(--hr-surface);
  border: 1px solid var(--hr-border); border-radius: var(--r-md);
  max-width: 280px; cursor: pointer;
}
.hr-catalog__pick select:hover { border-color: var(--hr-blue); }
.hr-catalog__pick select:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--hr-blue); }
/* BOTH i AND svg. Lucide does not decorate the <i>, it REPLACES it with an
   <svg>, so a rule written against `i` stops matching the moment the icons
   hydrate. The absolute positioning went with it and the chevron dropped back
   to being an ordinary flex item sitting after the select, which is how it
   ended up outside the box rather than inside it. */
.hr-catalog__pick .sel i,
.hr-catalog__pick .sel svg {
  position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; display: block;
  pointer-events: none; color: var(--hr-text-muted);
}
.hr-catalog__tablewrap { overflow-x: auto; padding: 0 var(--sp-5) var(--sp-6); }
.hr-catalog__table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.hr-catalog__table th, .hr-catalog__table td {
  text-align: left; padding: 11px var(--sp-3); border-bottom: 1px solid var(--hr-divider);
  vertical-align: middle; white-space: nowrap;
}
.hr-catalog__table th { position: sticky; top: 0; background: var(--hr-surface); z-index: 1; }
/* A column is never wider than its cap (user, 2026-10-05): longer text ends in "...", and the whole of it shows on hover
   (module.js paintSheet). The product name gets the most room. The caps grow with the screen, so all eight columns fit a
   1440 px laptop and a wide screen shows more of each. */
.hr-catalog__table td .cl { display: block; max-width: clamp(110px, 9.5vw, 220px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-catalog__table td.nm .cl { max-width: clamp(170px, 15.5vw, 320px); }
/* A little less space between columns on a smaller laptop, so all eight still fit at 1280 px. */
@media (max-width: 1400px) {
  .hr-catalog__table th, .hr-catalog__table td { padding-left: 9px; padding-right: 9px; }
}
.hr-catalog__table th button {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 0; background: none; padding: 6px 0; min-height: 44px;
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__table th button:hover { color: var(--hr-navy); }
.hr-catalog__table th button:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
.hr-catalog__table th [data-lucide] { width: 13px; height: 13px; }
.hr-catalog__table th[aria-sort] button { color: var(--hr-blue-700); }
.hr-catalog__table tbody tr { cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.hr-catalog__table tbody tr:hover { background: var(--hr-blue-50); }
.hr-catalog__table .nm { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--hr-text-strong); }
.hr-catalog__table .rng { font-family: var(--font-display); font-weight: var(--fw-extrabold); color: var(--hr-blue-700); }
.hr-catalog__table .cst { color: var(--hr-warm-600); font-family: var(--font-display); font-weight: var(--fw-bold); }

/* ---------- Responsive ---------- */
/* THE RAIL HOLDS 268px ALL THE WAY DOWN TO THE PHONE. It used to stop being
   a left column at 1023 and lie down as a full width strip above the grid,
   which is the width change that was visible while dragging a window narrow.

   Only the grid between them gives up space now. It has 268px less to work
   with here, so the card minimum comes down to keep two columns rather than
   dropping to one wide one: 460px of grid at a 768px window is two 200px
   cards, and 715px at 1023 is three. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hr-catalog { --card-min: 200px; }
}

/* ---------- Phone ----------
   User, 2026-09-21, option A of the redesign ("Tab bar"). The top keeps the
   title and the magnifier and nothing else. The rail becomes the Browse
   sheet, the categories a row of chips over the cards, and Catalog, Price
   sheet, Present and Estimate a tab bar fixed to the foot of the screen, each
   with its word under it. The panels go full width. */
@media (max-width: 767px) {
  /* Room at the foot for the tab bar, so the last row of cards clears it. */
  .hr-catalog { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  /* clip, not hidden. hidden makes the shell a scroll container of its own,
     and a sticky row inside one sticks to the shell, which never scrolls,
     instead of to the page. A browser without clip keeps hidden: the row
     still works there, it just does not freeze. */
  .hr-catalog__shell { overflow: hidden; overflow: clip; }
  .hr-catalog__body { flex-direction: column; min-height: 0; }
  .hr-catalog__side, .hr-catalog__views, .hr-catalog__acts { display: none; }

  .hr-catalog__topbar {
    position: -webkit-sticky; position: sticky; top: 0; z-index: 30;
    min-height: 64px; gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  }
  .hr-catalog__bar, .hr-catalog__sheet-tools { gap: var(--sp-2); }
  .hr-catalog__titlebtn {
    display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 5px;
    min-height: 48px; padding: 0; cursor: pointer; text-align: left;
    border: 0; border-radius: var(--r-sm); background: none;
  }
  .hr-catalog__titlebtn .eb {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1;
    font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-blue);
  }
  .hr-catalog__titlebtn .tt { display: flex; align-items: center; gap: 6px; max-width: 100%; }
  .hr-catalog__titlebtn .t {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1;
    font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-extrabold);
    color: var(--hr-text-strong);
  }
  .hr-catalog__titlebtn .tt [data-lucide], .hr-catalog__titlebtn .tt svg { width: 20px; height: 20px; flex: none; color: var(--hr-blue); }
  .hr-catalog__titlebtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .hr-catalog__iconbtn {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px;
    margin-left: auto; padding: 0; cursor: pointer;
    border: 0; border-radius: var(--r-md); background: none; color: var(--hr-navy);
  }
  .hr-catalog__iconbtn [data-lucide], .hr-catalog__iconbtn svg { width: 22px; height: 22px; display: block; }
  .hr-catalog__iconbtn .i-close { display: none; }
  .hr-catalog__iconbtn[aria-expanded="true"] .i-open { display: none; }
  .hr-catalog__iconbtn[aria-expanded="true"] .i-close { display: block; }
  .hr-catalog__iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  /* Search is a tap away rather than a row of its own: the magnifier opens it
     over the title, and the X closes it and clears it. */
  .hr-catalog__bar .hr-catalog__search,
  .hr-catalog__sheet-tools .hr-catalog__search { display: none; }
  .hr-catalog__bar.is-searching .hr-catalog__search,
  .hr-catalog__sheet-tools.is-searching .hr-catalog__search { display: flex; flex: 1 1 auto; max-width: none; }
  .hr-catalog__bar.is-searching .hr-catalog__titlebtn,
  .hr-catalog__sheet-tools.is-searching .hr-catalog__pick { display: none; }
  /* Price sheet: the service picker takes the title's place. Its "Service"
     caption goes, the select's own aria-label already names it. */
  .hr-catalog__pick { flex: 1 1 auto; min-width: 0; }
  .hr-catalog__pick > span:not(.sel) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .hr-catalog__pick .sel { flex: 1 1 auto; min-width: 0; }
  .hr-catalog__pick select { width: 100%; min-width: 0; max-width: none; padding-left: var(--sp-3); padding-right: 36px; }
  .hr-catalog__pick .sel i, .hr-catalog__pick .sel svg { right: var(--sp-3); }

  /* The title at the top already says where the cards are from, so the
     heading only comes back for a search, to say how many matched. */
  .hr-catalog:not(.is-q) .hr-catalog__head { display: none; }
  .hr-catalog__chips {
    display: flex; gap: var(--sp-2); overflow-x: auto;
    padding: var(--sp-3) var(--sp-4) var(--sp-1); margin-bottom: var(--sp-3);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hr-catalog__chips::-webkit-scrollbar { display: none; }

  .hr-catalog__tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
    background: var(--hr-surface); border-top: 1px solid var(--hr-divider);
  }

  /* 100%, not 100vw: for a fixed element the percentage resolves against the
     viewport without counting the scrollbar, so it cannot overhang the edge
     and add a horizontal scroll of its own. */
  /* ALL THREE PANELS ARE SHEETS ON A PHONE (user, 2026-09-21, on the Browse
     sheet: "I like the way that looks"). The product panel, the estimate and
     Browse each rise from the foot of the screen with a handle on top, stop
     short of the top so the page behind shows they are a layer, and swipe back
     down to close (module.js). A short estimate makes a short sheet. */
  .hr-catalog__drawer, .hr-catalog__cart {
    top: auto; left: 0; right: 0; width: 100%;
    max-height: 92vh; max-height: 92dvh; overflow: hidden;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .hr-catalog__grab--over {
    display: block; position: absolute; top: var(--sp-2); left: 50%; z-index: 2;
    margin: 0 0 0 -20px;
  }
  .hr-catalog__drawer-head, .hr-catalog__cart-head { padding-top: var(--sp-6); }
  .hr-catalog__drawer:not([hidden]), .hr-catalog__cart:not([hidden]), .hr-catalog__browse:not([hidden]) {
    animation: hrc-sheet-up var(--dur-slow) var(--ease-out);
  }
  .hr-catalog__scrim:not([hidden]) { animation: hrc-scrim-in var(--dur) var(--ease-out); }

  .hr-catalog { --card-min: 150px; }
  .hr-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-5); }
  .hr-catalog__head { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .hr-catalog__tablewrap { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .hr-catalog__titlerow h2 { font-size: var(--fs-h4); }
  /* One column on a phone: 60% of a 320px screen is not a price block. */
  .hr-catalog__pricerow { grid-template-columns: minmax(0, 1fr); }
  .hr-catalog__meta > div { grid-template-columns: 108px minmax(0, 1fr); }
  /* The line total and Add share a row while they fit, and Add drops to a
     full width row of its own when they do not. Alone (the figures hidden),
     it takes the whole row. */
  .hr-catalog__drawer-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); gap: var(--sp-3); }
  .hr-catalog__linetotal .val { white-space: nowrap; }
  .hr-catalog__add { flex: 1 1 auto; margin-left: 0; padding-left: var(--sp-4); padding-right: var(--sp-4); }

  /* The estimate: smaller photo, and the quantity row goes under it at the
     card's full width, so the minus, the field, the plus and the price fit
     side by side on a 390px phone. */
  .hr-catalog__cart-body { padding: var(--sp-3); }
  .hr-catalog__line { grid-template-columns: 64px minmax(0, 1fr); }
  .hr-catalog__line-im { grid-row: auto; width: 64px; height: 64px; }
  .hr-catalog__line-bot { grid-column: 1 / -1; }
  /* The navy bar runs to the foot of the screen, under the home indicator,
     rather than stopping above a pale strip. So the sheet drops its own
     bottom padding and the bar carries it. An empty estimate has no bar,
     and its list takes the padding instead. */
  .hr-catalog__cart { padding-bottom: 0; }
  .hr-catalog__totalbar { padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); gap: var(--sp-3); }
  .hr-catalog__cart.is-empty .hr-catalog__cart-body { padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  /* Send fills what the total leaves, and the whole row when it wraps. The
     total a size down and the button's short words keep the two on one row
     from a 360px phone up, so the bar stays one row tall. */
  .hr-catalog__totalbar-l { flex: 0 1 auto; }
  .hr-catalog__totalbar strong { font-size: var(--fs-h5); }
  .hr-catalog__send { flex: 1 0 auto; padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .hr-catalog__send .lg { display: none; }
  .hr-catalog__send .sm { display: inline; }
}

/* The narrowest phones (320px). At full size the estimate's title wrapped to
   two lines and the bar to two rows, which left a 568px screen about 250px
   for the lines themselves. A size down on both keeps each to one. */
@media (max-width: 359px) {
  .hr-catalog__cart-head h3 { font-size: var(--fs-h5); }
  .hr-catalog__totalbar { gap: var(--sp-2); }
  .hr-catalog__totalbar strong { font-size: var(--fs-body); }
  .hr-catalog__send { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  .hr-catalog *, .hr-catalog *::before, .hr-catalog *::after {
    transition: none !important; animation: none !important;
  }
  /* The accordion's height transition is REMOVED, not shortened, and the JS
     checks the same query so it never measures scrollHeight at all. */
  .hr-catalog__sub { transition: none !important; }
  .hr-catalog__svc > button [data-lucide] { transition: none !important; }
  .hr-catalog__card:hover .hr-catalog__im img,
  .hr-catalog__card:hover .hr-catalog__im .ph { transform: none; }
}

/* ============================================================
   Room preview
   ------------------------------------------------------------
   User, 2026-09-29, the design in hubspot-preview/room-preview-design.html:
   a blue button left of Send, and its own full-screen window. A navy stage
   holds the photo, a white panel holds the step; on a phone they stack.
   The before and after wears the house style from the ads: navy BEFORE and
   AFTER pills in the bottom corners and a white seam.
   ============================================================ */
.hr-catalog__rpbtn {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; min-width: 48px; padding: 12px var(--sp-5); cursor: pointer; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  border: 1px solid var(--hr-blue); border-radius: var(--r-pill);
  background: var(--hr-blue); color: var(--hr-text-on-color);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hr-catalog__rpbtn:hover { background: var(--hr-blue-700); border-color: var(--hr-blue-700); }
.hr-catalog__rpbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hr-blue-100); }
.hr-catalog__rpbtn [data-lucide], .hr-catalog__rpbtn svg { width: 18px; height: 18px; flex: none; }
.hr-catalog__rpbtn + .hr-catalog__send { margin-left: 0; }
/* User, 2026-09-29, second pass: "on mobile view, so basically anything that's
   mostly a vertical view, I just want the icon." Held upright, phone or tablet,
   the button is the round sparkles icon alone; "Room preview" stays its
   accessible name. The words show only on a screen wider than it is tall. Two
   classes, so no later single-class rule gives the circle its padding back. */
@media (orientation: portrait) {
  .hr-catalog__totalbar .hr-catalog__rpbtn { width: 48px; height: 48px; padding: 0; border-radius: 50%; }
  .hr-catalog__totalbar .hr-catalog__rpbtn .lbl { display: none; }
}

.hr-catalog__rp {
  /* The pen's drawing colors that have no brand token (user, 2026-10-02: blue, red, green, yellow). */
  --hrc-pen-red: #E03131; --hrc-pen-yellow: #FFD43B;
  position: fixed; inset: 0; z-index: 72;
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: 64px minmax(0, 1fr);
  background: var(--hr-navy); overscroll-behavior: none;
  font-family: var(--font-sans); color: var(--hr-body);
}
.hr-catalog__rp-top {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-4) 0 var(--sp-5);
  background: var(--hr-surface); border-bottom: 1px solid var(--hr-divider);
}
.hr-catalog__rp-tile {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--hr-blue); color: var(--hr-text-on-color); display: grid; place-items: center;
}
.hr-catalog__rp-tile [data-lucide], .hr-catalog__rp-tile svg { width: 19px; height: 19px; }
.hr-catalog__rp-top h3 {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-extrabold);
  color: var(--hr-text-strong); white-space: nowrap;
}
.hr-catalog__rp-steps { list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: var(--sp-3); }
.hr-catalog__rp-steps li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--hr-text-subtle); white-space: nowrap;
}
.hr-catalog__rp-steps li + li::before {
  content: ""; width: 26px; height: 2px; border-radius: 1px; background: var(--hr-border); margin-right: var(--sp-1);
}
.hr-catalog__rp-steps b {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--hr-border-strong); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
}
.hr-catalog__rp-steps b svg { width: 14px; height: 14px; stroke-width: 3; }
.hr-catalog__rp-steps li.is-done { color: var(--hr-navy); }
.hr-catalog__rp-steps li.is-done b { background: var(--hr-navy); border-color: var(--hr-navy); color: var(--hr-text-on-color); }
.hr-catalog__rp-steps li.is-on { color: var(--hr-blue-700); }
.hr-catalog__rp-steps li.is-on b { background: var(--hr-blue); border-color: var(--hr-blue); color: var(--hr-text-on-color); }
.hr-catalog__rp-dots { display: none; }
.hr-catalog__rp-back {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--hr-border); border-radius: var(--r-pill);
  background: var(--hr-surface); color: var(--hr-navy);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
}
.hr-catalog__rp-back [data-lucide], .hr-catalog__rp-back svg { width: 16px; height: 16px; }
.hr-catalog__rp-back:hover { background: var(--hr-surface-alt); }

/* ---------- the stage ---------- */
.hr-catalog__rp-stage {
  grid-row: 2; grid-column: 1; position: relative; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-6);
}
.hr-catalog__rp[data-step="4"] .hr-catalog__rp-stage { justify-content: flex-start; padding-top: var(--sp-5); }
.hr-catalog__rp-pic {
  position: relative; flex: none; width: 100%; max-width: 100%;
  border-radius: var(--r-lg); overflow: hidden; background: var(--hr-navy);
  --x: 50%;
}
.hr-catalog__rp-pic img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.hr-catalog__rp-pic.is-ba { cursor: ew-resize; touch-action: none; }
.hr-catalog__rp-pic .bf { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.hr-catalog__rp-pic .fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--hr-navy) 50%, transparent), transparent);
}
.hr-catalog__rp-pic .seam {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; pointer-events: none;
  background: var(--hr-surface); box-shadow: 0 0 12px color-mix(in srgb, var(--hr-navy) 60%, transparent);
}
.hr-catalog__rp-pic .knob {
  position: absolute; top: 50%; left: var(--x); width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0;
  border: 0; border-radius: 50%; background: var(--hr-surface); color: var(--hr-navy);
  display: grid; place-items: center; box-shadow: var(--shadow-md); cursor: ew-resize;
}
.hr-catalog__rp-pic .knob svg { width: 22px; height: 22px; stroke-width: 2.25; }
.hr-catalog__rp-pill {
  position: absolute; bottom: var(--sp-4); padding: 10px 17px; border-radius: var(--r-pill); pointer-events: none;
  background: color-mix(in srgb, var(--hr-navy) 92%, transparent); color: var(--hr-text-on-color);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.hr-catalog__rp-pill.is-l { left: var(--sp-4); }
.hr-catalog__rp-pill.is-r { right: var(--sp-4); }
/* Before / Compare / After (2026-09-30): the slider, or one picture whole. */
.hr-catalog__rp-view {
  position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 2; display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--hr-navy) 90%, transparent); box-shadow: var(--shadow-sm);
}
.hr-catalog__rp-view button {
  min-height: 38px; min-width: 44px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent; color: var(--hr-text-on-color);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hr-catalog__rp-view button:hover { background: color-mix(in srgb, var(--hr-surface) 16%, transparent); }
.hr-catalog__rp-view button[aria-pressed="true"] { background: var(--hr-surface); color: var(--hr-navy); }
.hr-catalog__rp-view button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__rp-pic.is-one img { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hr-catalog__rp-view button { transition: none; }
}
.hr-catalog__rp-ai, .hr-catalog__rp-chip {
  position: absolute; top: var(--sp-4); display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: var(--r-pill); pointer-events: none;
  background: var(--hr-surface); color: var(--hr-navy); box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap;
}
.hr-catalog__rp-ai { right: var(--sp-4); }
.hr-catalog__rp-chip { left: var(--sp-4); }
.hr-catalog__rp-ai svg, .hr-catalog__rp-chip svg { width: 15px; height: 15px; color: var(--hr-blue); }
.hr-catalog__rp-pic .veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--hr-navy) 62%, transparent); }

/* ---------- the pen (2026-10-02) ----------
   User: "a normal pen icon, and when you press it, you're able to draw on the outdated image". The drawings sit on a
   see-through layer over the photo, never on the photo; drawing happens on a screen of its own (.hr-catalog__rpd). */
/* The highlighter is drawn see-through and the pen solid (module.js), so the layer itself is not faded. */
.hr-catalog__rp-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hr-catalog__rp-penbtn {
  position: absolute; z-index: 3; top: var(--sp-4); right: var(--sp-4); min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-3);
  border: 0; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--hr-surface); color: var(--hr-navy); box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap;
}
.hr-catalog__rp-penbtn svg { width: 18px; height: 18px; color: var(--hr-blue); }
.hr-catalog__rp-penbtn:hover { background: var(--hr-blue-50); }
/* A saved drawing's name tag, over its top (on the questions step's photo and on the drawing screen). */
.hr-catalog__rp-tag {
  position: absolute; z-index: 2; transform: translate(-50%, -100%); max-width: 70%;
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill);
  background: var(--hr-surface); color: var(--hr-navy); box-shadow: var(--shadow-md); pointer-events: none;
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-catalog__rp-tag i { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--hr-border-strong); }
/* In the panel: the way in, then the drawings with a small picture of them. */
.hr-catalog__rp-pens { margin-top: var(--sp-3); }
.hr-catalog__rp-penask {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3);
  border: 1px dashed var(--hr-border-strong); border-radius: var(--r-md); background: var(--hr-surface);
  color: var(--hr-navy); text-align: left; cursor: pointer;
}
.hr-catalog__rp-penask:hover { border-color: var(--hr-blue); background: var(--hr-blue-50); }
.hr-catalog__rp-penask > svg { flex: none; width: 20px; height: 20px; color: var(--hr-blue); }
.hr-catalog__rp-penask b { display: block; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong); }
.hr-catalog__rp-penask small { display: block; margin-top: 2px; font-size: var(--fs-micro); line-height: 1.4; color: var(--hr-text-muted); }
.hr-catalog__rp-opt.is-wrap { max-width: 100%; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; white-space: normal; text-align: left; }
.hr-catalog__rp-opt svg { flex: none; width: 15px; height: 15px; }
.hr-catalog__rp-opt .sw { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hr-border-strong); }
.hr-catalog__rp-drw { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.hr-catalog__rp-drw .th {
  position: relative; width: 76px; margin-top: 6px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  background: var(--hr-navy);
}
.hr-catalog__rp-drw .th img, .hr-catalog__rp-drw .th canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__rp-drw .hr-catalog__rp-mks { margin-top: 0; }
.hr-catalog__rp-mks { display: grid; margin-top: var(--sp-3); }
.hr-catalog__rp-mk { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 2px 0; border-bottom: 1px solid var(--hr-divider); }
.hr-catalog__rp-mk:last-child { border-bottom: 0; }
.hr-catalog__rp-mk .sw { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hr-border-strong); }
.hr-catalog__rp-mk > span { flex: 1 1 auto; min-width: 0; }
.hr-catalog__rp-mk b {
  display: block; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--hr-text-strong); overflow-wrap: anywhere;
}
.hr-catalog__rp-mk.is-open b { color: var(--hr-blue-700); }
.hr-catalog__rp-mk small { display: block; font-size: var(--fs-micro); color: var(--hr-text-muted); }
.hr-catalog__rp-mk .hr-catalog__rp-link { flex: none; min-height: 44px; }
.hr-catalog__rp-mkx {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--hr-text-subtle);
}
.hr-catalog__rp-mkx:hover { color: var(--hr-navy); }
.hr-catalog__rp-mkx svg { width: 18px; height: 18px; }

/* ---------- the drawing screen (2026-10-02, design B) ----------
   The photo as big as the screen allows, the tools under it, "What is it?" as a sheet from the foot; on a wide
   screen held sideways the sheet is a column on the right. Laid out by module.js (rpdFit). */
.hr-catalog__rpd {
  position: fixed; inset: 0; z-index: 30; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--hr-navy); color: var(--hr-text-on-color); font-family: var(--font-sans); overscroll-behavior: none;
}
.hr-catalog__rpd .tp {
  grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: var(--sp-2);
  min-height: 60px; padding: calc(var(--sp-2) + env(safe-area-inset-top, 0px)) var(--sp-3) var(--sp-2) var(--sp-4);
}
.hr-catalog__rpd .cur { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
.hr-catalog__rpd .cur > i { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--hr-surface); }
.hr-catalog__rpd .cur b { display: block; font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.2; }
.hr-catalog__rpd .cur small { display: block; font-size: var(--fs-micro); line-height: 1.35; color: var(--hr-blue-100); }
.hr-catalog__rpd .ib {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--hr-surface) 12%, transparent); color: var(--hr-text-on-color);
}
.hr-catalog__rpd .ib svg { width: 20px; height: 20px; }
.hr-catalog__rpd .done {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-5); cursor: pointer;
  border: 0; border-radius: var(--r-pill); background: var(--hr-surface); color: var(--hr-navy);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
}
.hr-catalog__rpd .done svg { width: 18px; height: 18px; }
.hr-catalog__rpd .st { grid-row: 2; grid-column: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.hr-catalog__rpd[data-sheet="on"][data-wide="0"] .st { align-items: flex-start; padding-top: var(--sp-2); }
.hr-catalog__rpd .box { position: relative; flex: none; overflow: hidden; background: color-mix(in srgb, var(--hr-navy) 70%, black); }
.hr-catalog__rpd .zm { position: absolute; inset: 0; transform-origin: 0 0; }
.hr-catalog__rpd .zm img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.hr-catalog__rpd canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hr-catalog__rpd .ink { pointer-events: none; }
.hr-catalog__rpd .live { touch-action: none; cursor: crosshair; }
.hr-catalog__rpd .tags { position: absolute; inset: 0; pointer-events: none; }
.hr-catalog__rpd .tb { grid-row: 3; grid-column: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) 0; }
.hr-catalog__rpd .seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 14px; background: color-mix(in srgb, var(--hr-surface) 10%, transparent); }
.hr-catalog__rpd .tool {
  min-width: 76px; height: 54px; padding: 0 var(--sp-2); border: 0; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center; align-content: center; gap: 3px; background: transparent; color: var(--hr-text-on-color);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1;
}
.hr-catalog__rpd .tool svg { width: 20px; height: 20px; }
.hr-catalog__rpd .tool .tip { display: block; width: 18px; height: 3px; border-radius: 2px; background: transparent; }
.hr-catalog__rpd .tool[aria-pressed="true"] { background: var(--hr-surface); color: var(--hr-navy); }
.hr-catalog__rpd .tool[aria-pressed="true"] .tip { background: var(--c); }
.hr-catalog__rpd .tb2 {
  flex: none; width: 50px; height: 54px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 12px; background: color-mix(in srgb, var(--hr-surface) 10%, transparent); color: var(--hr-text-on-color);
}
.hr-catalog__rpd .tb2 svg { width: 20px; height: 20px; }
.hr-catalog__rpd .tb2[disabled] { opacity: .4; cursor: default; }
.hr-catalog__rpd .ask {
  flex: 1 1 auto; min-width: 0; max-width: 280px; height: 54px; padding: 0 var(--sp-4); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 0; border-radius: var(--r-pill); background: var(--hr-blue); color: var(--hr-text-on-color);
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-bold); white-space: nowrap;
}
.hr-catalog__rpd .ask span { overflow: hidden; text-overflow: ellipsis; }
.hr-catalog__rpd .ask svg { flex: none; width: 18px; height: 18px; }
.hr-catalog__rpd .ask:hover:not([disabled]) { background: var(--hr-blue-700); }
.hr-catalog__rpd .ask[disabled] { background: color-mix(in srgb, var(--hr-surface) 12%, transparent); color: var(--hr-blue-100); cursor: default; }
.hr-catalog__rpd .hint {
  grid-row: 4; grid-column: 1; margin: 0; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: var(--fs-small); line-height: 1.45; color: var(--hr-blue-100);
}
.hr-catalog__rpd .hint b { color: var(--hr-text-on-color); }
.hr-catalog__rpd .tp button:focus-visible, .hr-catalog__rpd .tb button:focus-visible { box-shadow: 0 0 0 3px var(--hr-blue-100); }
.hr-catalog__rpd .shh { display: contents; }
.hr-catalog__rpd .sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; max-height: 64%;
  background: var(--hr-surface); color: var(--hr-body); border-radius: var(--r-2xl) var(--r-2xl) 0 0; box-shadow: var(--shadow-xl);
}
.hr-catalog__rpd .sheet .grab { flex: none; display: block; width: 40px; height: 5px; margin: 10px auto 4px; border-radius: 3px; background: var(--hr-border-strong); }
.hr-catalog__rpd .sb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-1) var(--sp-4) var(--sp-4); }
.hr-catalog__rpd .sh { display: flex; align-items: center; gap: var(--sp-3); margin: 0; }
.hr-catalog__rpd .sh i { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px var(--hr-border-strong); }
.hr-catalog__rpd .sh b { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-extrabold); color: var(--hr-text-strong); }
.hr-catalog__rpd .sl {
  margin: var(--sp-4) 0 0; font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__rpd .opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.hr-catalog__rpd .opts.is-end { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--hr-divider); }
.hr-catalog__rpd .seen { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--hr-blue-50); }
.hr-catalog__rpd .seen p {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--hr-navy);
}
.hr-catalog__rpd .seen p svg { flex: none; width: 17px; height: 17px; color: var(--hr-blue); }
.hr-catalog__rpd .seen.is-wait p { color: var(--hr-blue-700); }
.hr-catalog__rpd .seen .hr-catalog__rp-opt { border-color: var(--hr-blue-100); }
.hr-catalog__rpd .seen .hr-catalog__rp-opt.is-on { border-color: var(--hr-navy); }
.hr-catalog__rpd .seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: var(--sp-2); padding: 3px; border-radius: 14px; background: var(--hr-surface-alt); }
.hr-catalog__rpd .seg3 button {
  min-height: 54px; padding: 4px 6px; border: 0; border-radius: 11px; cursor: pointer; background: transparent; color: var(--hr-navy);
  display: grid; place-items: center; align-content: center; gap: 3px;
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1.15; text-align: center;
}
.hr-catalog__rpd .seg3 button svg { width: 18px; height: 18px; }
.hr-catalog__rpd .seg3 button[aria-pressed="true"] { background: var(--hr-surface); box-shadow: var(--shadow-sm); }
/* A window drawing's opening: two choices (2026-10-04), and how many windows the drawing holds under them. */
.hr-catalog__rpd .seg3.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hr-catalog__rpd .wn { margin: var(--sp-2) 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--hr-text-muted); }
.hr-catalog__rpd .sf {
  flex: none; display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hr-divider);
}
.hr-catalog__rpd .sf .hr-catalog__rp-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--sp-3); }
.hr-catalog__rpd[data-wide="1"][data-sheet="on"] { grid-template-columns: minmax(0, 1fr) 400px; }
.hr-catalog__rpd[data-wide="1"] .sheet { position: relative; grid-column: 2; grid-row: 1 / -1; max-height: none; border-radius: 0; box-shadow: none; }
.hr-catalog__rpd[data-wide="1"] .sheet .grab { display: none; }
.hr-catalog__rpd[data-wide="1"] .sb { padding-top: var(--sp-5); }
@media (max-width: 359px) {
  .hr-catalog__rpd .tool { min-width: 60px; }
  .hr-catalog__rpd .tb2 { width: 44px; }
  .hr-catalog__rpd .ask { padding: 0 var(--sp-3); font-size: var(--fs-small); }
}
.hr-catalog__rp-busy {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: 0 var(--sp-6); text-align: center; color: var(--hr-text-on-color);
}
.hr-catalog__rp-busy b { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-extrabold); }
.hr-catalog__rp-busy > span:not(.hr-catalog__rp-spin) { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--hr-blue-100); }
.hr-catalog__rp-busy .bar {
  display: block; width: 240px; max-width: 70%; height: 6px; margin-top: var(--sp-2); border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--hr-surface) 22%, transparent);
}
.hr-catalog__rp-busy .bar u { display: block; height: 100%; background: var(--hr-surface); text-decoration: none; transition: width 1s linear; }
.hr-catalog__rp-busy .hr-catalog__rp-btn { margin-top: var(--sp-3); }
.hr-catalog__rp-spin {
  display: block; flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--hr-surface) 25%, transparent); border-top-color: var(--hr-surface);
  animation: hrc-rp-spin 1.1s linear infinite;
}
.hr-catalog__rp-spin.is-sm { width: 18px; height: 18px; border-width: 3px; }
.hr-catalog__rp-chip .hr-catalog__rp-spin { border-color: var(--hr-blue-100); border-top-color: var(--hr-blue); }
@keyframes hrc-rp-spin { to { transform: rotate(360deg); } }

.hr-catalog__rp-strip { flex: none; width: 100%; display: flex; align-items: center; gap: var(--sp-3); min-height: 72px; }
.hr-catalog__rp-strip .lb {
  flex: none; font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-blue-100);
}
.hr-catalog__rp-strip .slots { display: flex; gap: var(--sp-3); min-width: 0; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.hr-catalog__rp-slot {
  position: relative; flex: none; width: 96px; height: 72px; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
  display: grid; place-items: center; cursor: pointer; color: var(--hr-text-on-color);
  background: color-mix(in srgb, var(--hr-surface) 10%, transparent);
}
.hr-catalog__rp-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__rp-slot .no {
  position: absolute; left: 6px; top: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--hr-navy) 86%, transparent);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold); line-height: 20px; text-align: center;
}
.hr-catalog__rp-slot.is-on { box-shadow: 0 0 0 3px var(--hr-surface); }
.hr-catalog__rp-slot.is-wait { cursor: default; }
.hr-catalog__rp-slot.is-fail svg { width: 20px; height: 20px; }
.hr-catalog__rp-strip > .hr-catalog__rp-btn { margin-left: auto; }
/* A finished version is two buttons: the picture shows it, the tick in the
   corner picks it for the estimate. The tick is a 44px target around a 26px
   ring: empty on a navy wash, filled blue with a white check once picked. */
.hr-catalog__rp-slot .view {
  position: absolute; inset: 0; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer;
}
.hr-catalog__rp-slot .pick {
  position: absolute; z-index: 1; top: 0; right: 0; width: 44px; height: 44px; padding: 5px;
  border: 0; background: none; cursor: pointer; display: grid; justify-items: end; align-items: start;
}
.hr-catalog__rp-slot .pick span {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--hr-surface); background: color-mix(in srgb, var(--hr-navy) 45%, transparent);
  color: var(--hr-text-on-color);
}
.hr-catalog__rp-slot .pick svg { width: 15px; height: 15px; stroke-width: 3; opacity: 0; }
.hr-catalog__rp-slot.is-picked .pick span { background: var(--hr-blue); }
.hr-catalog__rp-slot.is-picked .pick svg { opacity: 1; }
.hr-catalog__rp .hr-catalog__rp-slot .pick:focus-visible { box-shadow: none; }
.hr-catalog__rp .hr-catalog__rp-slot .pick:focus-visible span { box-shadow: 0 0 0 3px var(--hr-blue-100); }
.hr-catalog__rp-strip .lb .cnt {
  display: inline-block; margin-left: var(--sp-2); padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--hr-blue); color: var(--hr-text-on-color); letter-spacing: 0; text-transform: none;
}
/* The foot's toggle for the version on screen. Picked, it turns to the
   green of a done thing and still takes a tap to take it off. */
.hr-catalog__rp-btn.is-picked { background: var(--hr-green-50); border-color: var(--hr-green); color: var(--hr-green-700); }
.hr-catalog__rp-btn.is-picked:hover { background: var(--hr-green-50); border-color: var(--hr-green-700); }
.hr-catalog__rp-picks {
  display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-3) 0 0; padding: var(--sp-3);
  border-radius: var(--r-md); background: var(--hr-surface-alt); font-size: var(--fs-small); line-height: 1.45; color: var(--hr-body);
}
.hr-catalog__rp-picks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--hr-text-subtle); }
.hr-catalog__rp-picks.is-some { background: var(--hr-green-50); color: var(--hr-navy); }
.hr-catalog__rp-picks.is-some svg { color: var(--hr-green-700); }

/* ---------- the picks in the Working Estimate ---------- */
.hr-catalog__pics { display: grid; gap: var(--sp-2); }
.hr-catalog__pics-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.hr-catalog__pics-head .k {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__pics-head .n { font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong); }
.hr-catalog__pics-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hr-catalog__pic {
  position: relative; flex: none; width: 88px; height: 66px; border-radius: var(--r-md); overflow: hidden;
  background: var(--hr-surface-alt);
}
.hr-catalog__pic .open { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.hr-catalog__pic .open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__pic .rm {
  position: absolute; z-index: 1; top: 0; right: 0; width: 44px; height: 44px; padding: 5px;
  border: 0; background: none; cursor: pointer; display: grid; justify-items: end; align-items: start;
}
.hr-catalog__pic .rm span {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hr-navy) 86%, transparent); color: var(--hr-text-on-color);
}
.hr-catalog__pic .rm [data-lucide], .hr-catalog__pic .rm svg { width: 14px; height: 14px; stroke-width: 2.5; }
.hr-catalog__pic .open:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--hr-blue); }
.hr-catalog__pic .rm:focus-visible { outline: none; }
.hr-catalog__pic .rm:focus-visible span { box-shadow: 0 0 0 3px var(--hr-blue-100); }
.hr-catalog__pics-note { margin: 0; font-size: var(--fs-micro); line-height: 1.45; color: var(--hr-text-muted); }

.hr-catalog__rp-drop {
  width: 100%; max-width: 760px; aspect-ratio: 4 / 3; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-6); text-align: center; color: var(--hr-text-on-color);
  border: 2px dashed color-mix(in srgb, var(--hr-surface) 35%, transparent); border-radius: var(--r-xl);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.hr-catalog__rp-drop.is-over { border-color: var(--hr-surface); background: color-mix(in srgb, var(--hr-surface) 8%, transparent); }
.hr-catalog__rp-drop .big {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hr-surface) 10%, transparent);
}
.hr-catalog__rp-drop .big svg { width: 34px; height: 34px; }
.hr-catalog__rp-drop b { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-extrabold); }
.hr-catalog__rp-drop .or { font-size: var(--fs-small); color: var(--hr-blue-100); }

/* ---------- the panel ---------- */
.hr-catalog__rp-panel { grid-row: 2; grid-column: 2; min-height: 0; display: flex; flex-direction: column; background: var(--hr-surface); }
.hr-catalog__rp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5) var(--sp-6) var(--sp-5); }
.hr-catalog__rp-foot { flex: none; display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6) var(--sp-4); border-top: 1px solid var(--hr-divider); }
.hr-catalog__rp-foot .hr-catalog__rp-btn { flex: 1 1 0; }
.hr-catalog__rp-h {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug); color: var(--hr-text-strong);
}
.hr-catalog__rp-h.is-big { font-size: var(--fs-h4); }
.hr-catalog__rp-h:focus, .hr-catalog__rp-lab:focus { outline: none; }
.hr-catalog__rp-p { margin: 5px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--hr-body); }
.hr-catalog__rp-meta { margin: 5px 0 0; font-size: var(--fs-small); color: var(--hr-text-muted); }
.hr-catalog__rp-err {
  margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--hr-blue-50); color: var(--hr-navy); font-size: var(--fs-small); line-height: 1.45;
}
.hr-catalog__rp-lab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__rp-lab b {
  letter-spacing: 0; text-transform: none; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong);
}
.hr-catalog__rp-rule { height: 1px; margin: var(--sp-4) 0 0; background: var(--hr-divider); }
.hr-catalog__rp-none { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--hr-text-muted); }
.hr-catalog__rp-rooms { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.hr-catalog__rp-room, .hr-catalog__rp-opt {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--hr-border); border-radius: var(--r-pill); background: var(--hr-surface); color: var(--hr-navy);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer;
}
.hr-catalog__rp-room svg { width: 15px; height: 15px; }
.hr-catalog__rp-room:hover, .hr-catalog__rp-opt:hover { border-color: var(--hr-navy); }
.hr-catalog__rp-room.is-on, .hr-catalog__rp-opt.is-on { background: var(--hr-navy); border-color: var(--hr-navy); color: var(--hr-text-on-color); }
.hr-catalog__rp-row, .hr-catalog__rp-used {
  display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
  min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--hr-divider);
}
.hr-catalog__rp-row { cursor: pointer; }
.hr-catalog__rp-used { grid-template-columns: 40px minmax(0, 1fr); }
.hr-catalog__rp-row:last-child, .hr-catalog__rp-used:last-child { border-bottom: 0; }
.hr-catalog__rp-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--hr-blue); cursor: pointer; }
.hr-catalog__rp-row .im, .hr-catalog__rp-used .im {
  width: 40px; height: 40px; border-radius: var(--r-sm); overflow: hidden; background: var(--hr-surface-alt);
}
.hr-catalog__rp-row .im img, .hr-catalog__rp-used .im img,
.hr-catalog__rp-row .im .sq, .hr-catalog__rp-used .im .sq { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__rp-row .tx, .hr-catalog__rp-used .tx { min-width: 0; }
.hr-catalog__rp-row b, .hr-catalog__rp-used b {
  display: block; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--hr-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-catalog__rp-row small, .hr-catalog__rp-used small {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: var(--fs-micro); line-height: 1.35; color: var(--hr-body); white-space: nowrap; overflow: hidden;
}
.hr-catalog__rp-row small i, .hr-catalog__rp-used small i {
  flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hr-border-strong);
}
.hr-catalog__rp-svc {
  flex: none; padding: 5px 8px; border-radius: var(--r-pill); background: var(--hr-surface-alt);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--hr-text-muted); white-space: nowrap;
}
.hr-catalog__rp-svc.is-other { background: var(--hr-blue-50); color: var(--hr-blue-700); }
.hr-catalog__rp-left { margin-top: var(--sp-3); padding: 0 var(--sp-3) var(--sp-2); border-radius: var(--r-md); background: var(--hr-surface-alt); }
.hr-catalog__rp-left .hr-catalog__rp-lab { margin-top: var(--sp-3); }
.hr-catalog__rp-row.is-left { grid-template-columns: 22px 40px minmax(0, 1fr); border-bottom-color: var(--hr-border); }
.hr-catalog__rp-row.is-left .im { opacity: .7; }
.hr-catalog__rp-row.is-left b { color: var(--hr-text-muted); }
.hr-catalog__rp-row.is-left small { white-space: normal; color: var(--hr-text-muted); }
.hr-catalog__rp-row.is-never { cursor: default; }
.hr-catalog__rp-row.is-never input { cursor: not-allowed; opacity: .45; }
.hr-catalog__rp-q { display: block; margin-top: var(--sp-4); }
.hr-catalog__rp-q .ql {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong);
}
.hr-catalog__rp-q .ql small { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--hr-text-muted); }
.hr-catalog__rp-q .opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
/* Follow-up questions from what the photo shows (2026-10-01): the question in words, a paint's swatch. */
.hr-catalog__rp-q .qa { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--hr-body); }
.hr-catalog__rp-q .ql .sw {
  flex: none; align-self: center; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hr-border-strong);
}
/* What the AI read in the photo. */
.hr-catalog__rp-sees {
  display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-3) 0 0; padding: var(--sp-3);
  border-radius: var(--r-md); background: var(--hr-blue-50); color: var(--hr-navy); font-size: var(--fs-small); line-height: 1.45;
}
.hr-catalog__rp-sees svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--hr-blue); }
.hr-catalog__rp-sees.is-wait { align-items: center; background: var(--hr-surface-alt); color: var(--hr-text-muted); }
/* What's changing: one toggle per part of the photo. Blue when on, so it
   never reads as one of the navy single answers below it. */
.hr-catalog__rp-parts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hr-catalog__rp-part {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-3);
  border: 1px solid var(--hr-border); border-radius: var(--r-pill); background: var(--hr-surface); color: var(--hr-navy);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer;
}
.hr-catalog__rp-part svg { flex: none; width: 15px; height: 15px; }
.hr-catalog__rp-part:hover { border-color: var(--hr-blue); }
.hr-catalog__rp-part:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__rp-part.is-on { background: var(--hr-blue); border-color: var(--hr-blue); color: var(--hr-text-on-color); }
.hr-catalog__rp-part.is-locked { cursor: default; background: var(--hr-blue-50); border-color: var(--hr-blue-100); color: var(--hr-blue-700); }
.hr-catalog__rp-part small { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.hr-catalog__rp-hint { margin: var(--sp-2) 0 0; font-size: var(--fs-micro); line-height: 1.4; color: var(--hr-text-muted); }
@media (prefers-reduced-motion: reduce) { .hr-catalog__rp-part { transition: none; } }
.hr-catalog .hr-catalog__rp-note {
  display: block; width: 100%; min-height: 48px; margin-top: var(--sp-2); padding: 0 var(--sp-3);
  border: 1px solid var(--hr-border); border-radius: var(--r-md); background: var(--hr-surface);
  /* 16px minimum or iOS zooms the whole page on focus */
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--hr-text-strong);
}
.hr-catalog .hr-catalog__rp-note:focus { outline: none; border-color: var(--hr-blue); box-shadow: var(--shadow-focus); }
.hr-catalog__rp-get { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.hr-catalog__rp-get .hr-catalog__rp-btn { flex: 1 1 180px; }
.hr-catalog__rp-tips { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.hr-catalog__rp-tips li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); line-height: 1.45; color: var(--hr-body); }
.hr-catalog__rp-tips .ti {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--hr-blue-50); color: var(--hr-blue);
}
.hr-catalog__rp-tips .ti svg { width: 18px; height: 18px; }
.hr-catalog__rp-tips b { display: block; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong); }
.hr-catalog__rp-saved { margin-top: var(--sp-5); }
.hr-catalog__rp-sv { display: flex; align-items: center; gap: var(--sp-2); padding: 2px 0; }
.hr-catalog__rp-svopen {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: 4px; border: 0; border-radius: var(--r-md); background: none; text-align: left; cursor: pointer;
}
.hr-catalog__rp-svopen:hover { background: var(--hr-surface-alt); }
.hr-catalog__rp-svopen img { flex: none; width: 64px; height: 48px; border-radius: var(--r-sm); object-fit: cover; }
.hr-catalog__rp-svopen b { display: block; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong); }
.hr-catalog__rp-svopen small { display: block; margin-top: 2px; font-size: var(--fs-micro); color: var(--hr-text-muted); }
.hr-catalog__rp-svdel {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--hr-text-subtle);
}
.hr-catalog__rp-svdel:hover { color: var(--hr-navy); }
.hr-catalog__rp-svdel svg { width: 18px; height: 18px; }
.hr-catalog__rp-ans { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-catalog__rp-ans span {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--hr-surface-alt); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--hr-navy);
}
.hr-catalog__rp-lout { margin: var(--sp-2) 0 0; font-size: var(--fs-micro); line-height: 1.45; color: var(--hr-text-muted); }
.hr-catalog__rp-fine {
  display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-4) 0 0;
  font-size: var(--fs-micro); line-height: 1.45; color: var(--hr-text-muted);
}
.hr-catalog__rp-fine svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--hr-text-subtle); }
.hr-catalog__rp-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-blue-700);
  letter-spacing: 0; text-transform: none;
}
.hr-catalog__rp-link.is-start { min-height: 44px; margin-top: var(--sp-3); }
.hr-catalog__rp-link svg { width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.hr-catalog__rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5); cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hr-catalog__rp-btn svg { width: 18px; height: 18px; flex: none; }
.hr-catalog__rp-btn.is-blue { background: var(--hr-blue); border-color: var(--hr-blue); color: var(--hr-text-on-color); }
.hr-catalog__rp-btn.is-blue:hover { background: var(--hr-blue-700); border-color: var(--hr-blue-700); }
.hr-catalog__rp-btn.is-ghost { background: var(--hr-surface); border-color: var(--hr-border); color: var(--hr-navy); }
.hr-catalog__rp-btn.is-ghost:hover { background: var(--hr-surface-alt); }
.hr-catalog__rp-btn.is-white { background: var(--hr-surface); color: var(--hr-navy); }
.hr-catalog__rp-btn.is-glass { background: color-mix(in srgb, var(--hr-surface) 14%, transparent); color: var(--hr-text-on-color); }
.hr-catalog__rp-btn.is-glass:hover { background: color-mix(in srgb, var(--hr-surface) 22%, transparent); }
.hr-catalog__rp-btn.is-sm { min-height: 44px; padding: 0 var(--sp-4); }
.hr-catalog__rp-btn[disabled] { opacity: .5; cursor: not-allowed; }
.hr-catalog__rp-btn.is-done[disabled] { opacity: 1; background: var(--hr-green-50); border-color: var(--hr-green-50); color: var(--hr-green-700); cursor: default; }
/* Focus draws a ring on every control in the window. On the photo the ring
   is solid blue, since the soft focus shadow disappears against a picture. */
.hr-catalog__rp button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__rp .hr-catalog__rp-pic .knob:focus-visible { box-shadow: var(--shadow-md), 0 0 0 4px var(--hr-blue); }
.hr-catalog__rp .hr-catalog__rp-slot:focus-visible { box-shadow: 0 0 0 3px var(--hr-surface), 0 0 0 6px var(--hr-blue); }

/* ---------- the camera ---------- */
.hr-catalog__rp-cam { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: var(--hr-navy); }
.hr-catalog__rp-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-catalog__rp-thirds i { position: absolute; display: block; background: color-mix(in srgb, var(--hr-surface) 32%, transparent); }
.hr-catalog__rp-thirds i:nth-child(1) { left: 33.33%; top: 0; bottom: 0; width: 1px; }
.hr-catalog__rp-thirds i:nth-child(2) { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.hr-catalog__rp-thirds i:nth-child(3) { top: 33.33%; left: 0; right: 0; height: 1px; }
.hr-catalog__rp-thirds i:nth-child(4) { top: 66.66%; left: 0; right: 0; height: 1px; }
.hr-catalog__rp-camtip {
  position: absolute; top: calc(var(--sp-4) + env(safe-area-inset-top, 0px)); left: var(--sp-4); right: var(--sp-4);
  max-width: 520px; margin: 0 auto; display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--hr-navy) 86%, transparent); color: var(--hr-text-on-color);
}
.hr-catalog__rp-camtip svg { flex: none; width: 22px; height: 22px; color: var(--hr-blue-100); }
.hr-catalog__rp-camtip b { display: block; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.hr-catalog__rp-camtip span { display: block; margin-top: 3px; font-size: var(--fs-micro); line-height: 1.45; color: var(--hr-blue-100); }
.hr-catalog__rp-camfoot {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-8) var(--sp-8) calc(var(--sp-10) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, color-mix(in srgb, var(--hr-navy) 94%, transparent) 55%, transparent);
}
.hr-catalog__rp-camx {
  min-width: 64px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--hr-text-on-color);
}
.hr-catalog__rp-shutter {
  width: 78px; height: 78px; padding: 0; border-radius: 50%; border: 4px solid var(--hr-surface); background: none;
  display: grid; place-items: center; cursor: pointer;
}
.hr-catalog__rp-shutter i { display: block; width: 62px; height: 62px; border-radius: 50%; background: var(--hr-surface); }
.hr-catalog__rp-camlib {
  width: 64px; height: 52px; border-radius: var(--r-md); border: 2px solid var(--hr-surface); cursor: pointer;
  background: color-mix(in srgb, var(--hr-surface) 12%, transparent); color: var(--hr-text-on-color); display: grid; place-items: center;
}
.hr-catalog__rp-camnote {
  position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  margin: 0; display: flex; justify-content: center; align-items: center; gap: 7px;
  font-size: var(--fs-micro); color: var(--hr-blue-100);
}
.hr-catalog__rp-camnote svg { width: 15px; height: 15px; }

@media (min-width: 768px) {
  /* The drop area on the stage has its own Choose a photo. */
  .hr-catalog__rp-get .is-choose { display: none; }
}

/* ---------- phone ----------
   One column: the top bar, the photo, then the step. The room step shows the
   photo as a banner; the questions have no photo at all, so the answers get
   the screen. */
@media (max-width: 767px) {
  .hr-catalog__rpbtn { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .hr-catalog__totalbar.is-rp-tight .hr-catalog__rpbtn { width: 48px; padding: 0; border-radius: 50%; }
  .hr-catalog__totalbar.is-rp-tight .hr-catalog__rpbtn .lbl { display: none; }

  .hr-catalog__rp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); background: var(--hr-surface); }
  .hr-catalog__rp-top { gap: var(--sp-2); min-height: 56px; padding: env(safe-area-inset-top, 0px) var(--sp-1) 0 var(--sp-4); }
  .hr-catalog__rp-tile { width: 32px; height: 32px; }
  .hr-catalog__rp-top h3 { font-size: var(--fs-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hr-catalog__rp-steps { display: none; }
  .hr-catalog__rp-dots { display: flex; gap: 5px; align-items: center; margin-left: auto; }
  .hr-catalog__rp-dots i { display: block; width: 7px; height: 7px; border-radius: 4px; background: var(--hr-border-strong); }
  .hr-catalog__rp-dots i.is-done { background: var(--hr-navy); }
  .hr-catalog__rp-dots i.is-on { width: 20px; background: var(--hr-blue); }
  .hr-catalog__rp-back { width: 44px; padding: 0; border: 0; justify-content: center; }
  .hr-catalog__rp-back span { display: none; }
  .hr-catalog__rp-stage { grid-row: 2; grid-column: 1; padding: 0; gap: 0; background: var(--hr-navy); }
  .hr-catalog__rp[data-step="1"] .hr-catalog__rp-stage,
  .hr-catalog__rp[data-step="3"] .hr-catalog__rp-stage { display: none; }
  .hr-catalog__rp[data-step="4"] .hr-catalog__rp-stage { padding-top: 0; }
  .hr-catalog__rp-panel { grid-row: 3; grid-column: 1; }
  .hr-catalog__rp-body { padding: var(--sp-4); }
  .hr-catalog__rp-foot { padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  .hr-catalog__rp-pic { border-radius: 0; }
  .hr-catalog__rp-pic.is-banner { width: 100%; height: 30vh; max-height: 220px; }
  .hr-catalog__rp-strip { min-height: 0; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
  .hr-catalog__rp-strip .lb { width: 100%; }
  .hr-catalog__rp-slot { width: 84px; height: 63px; }
  .hr-catalog__rp-pill { bottom: var(--sp-3); padding: 7px 12px; font-size: var(--fs-micro); }
  .hr-catalog__rp-pill.is-l { left: var(--sp-3); }
  .hr-catalog__rp-pill.is-r { right: var(--sp-3); }
  .hr-catalog__rp-ai, .hr-catalog__rp-chip { top: var(--sp-3); height: 28px; padding: 0 10px; }
  .hr-catalog__rp-ai { right: var(--sp-3); }
  .hr-catalog__rp-chip { left: var(--sp-3); }
  .hr-catalog__rp-view { top: var(--sp-3); left: var(--sp-3); }
  .hr-catalog__rp-view button { min-height: 40px; padding: 0 10px; }
  .hr-catalog__rp-pic .knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .hr-catalog__rp-rooms {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-right: calc(var(--sp-4) * -1); padding-right: var(--sp-4);
  }
  .hr-catalog__rp-get .hr-catalog__rp-btn { flex: 1 1 100%; }
  .hr-catalog__rp-drop { display: none; }
}

/* ---------- Send: the homeowner, the check, and the answer ----------
   User, 2026-09-29: first and last name, phone and email in the Finish card;
   Send checks HubSpot first and says where the PDF will be filed, then sends. */
.hr-catalog__who { display: grid; gap: var(--sp-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.hr-catalog__who legend {
  padding: 0; margin: 0 0 var(--sp-1);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong);
}
.hr-catalog__who-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.hr-catalog__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hr-catalog__field[hidden] { display: none; }
.hr-catalog__field span {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__field input {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px var(--sp-3); font-size: 16px;
  border: 1px solid var(--hr-border); border-radius: var(--r-md); background: var(--hr-surface);
  font-family: var(--font-sans); color: var(--hr-text);
}
.hr-catalog__field input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--hr-blue); }
.hr-catalog__signed { margin: 0; font-size: var(--fs-micro); color: var(--hr-text-muted); }
.hr-catalog__signed b { color: var(--hr-text-strong); font-weight: var(--fw-semibold); }
.hr-catalog__signed[hidden] { display: none; }
.hr-catalog__linkbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-1); margin: -12px 0;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: inherit; font-weight: var(--fw-semibold);
  color: var(--hr-blue); text-decoration: underline; text-underline-offset: 3px;
}
.hr-catalog__linkbtn:hover { color: var(--hr-blue-700); }
.hr-catalog__linkbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }

.hr-catalog__confirm {
  display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--hr-blue-50); border: 1px solid var(--hr-blue-100); border-radius: var(--r-md);
}
.hr-catalog__confirm[hidden] { display: none; }
.hr-catalog__confirm .hd { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.hr-catalog__confirm .hd svg { width: 20px; height: 20px; flex: none; color: var(--hr-blue); }
.hr-catalog__confirm .hd b {
  flex: 1; min-width: 0; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong);
}
.hr-catalog__confirm .hd b:focus { outline: none; }
.hr-catalog__confirm .hd b:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
.hr-catalog__confirm .r { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; }
.hr-catalog__confirm .k {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__confirm .v { min-width: 0; font-size: var(--fs-small); color: var(--hr-body); overflow-wrap: anywhere; }
.hr-catalog__confirm .v b { display: block; font-weight: var(--fw-semibold); color: var(--hr-text-strong); }
.hr-catalog__confirm .t { margin: 0; font-size: var(--fs-small); color: var(--hr-body); overflow-wrap: anywhere; }
.hr-catalog__confirm .t b { color: var(--hr-text-strong); }
.hr-catalog__confirm .w {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-1) 0 0;
  font-size: var(--fs-small); line-height: var(--lh-base); color: var(--hr-text);
}
.hr-catalog__confirm .w svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--hr-blue); }
.hr-catalog__confirm.is-sent { background: var(--hr-green-50); border-color: var(--hr-green-100); }
.hr-catalog__confirm.is-sent .hd svg { color: var(--hr-green-700); }
.hr-catalog__sendhelp.is-err { color: var(--hr-error); font-weight: var(--fw-semibold); }
.hr-catalog__sendhelp.is-ok { color: var(--hr-green-700); font-weight: var(--fw-semibold); }
.hr-catalog__send.is-busy svg { animation: hrc-rp-spin 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .hr-catalog__send.is-busy svg { animation: none; }
}
/* The narrowest phones: one name per row. */
@media (max-width: 379px) {
  .hr-catalog__who-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Sign-in ----------
   User, 2026-09-29: sales reps only, each with their own code, and a device
   stays signed in until the rep is removed. The builder stays hidden until
   module.js has checked this device (is-locked comes from module.html). */
.hr-catalog.is-locked > :not(.hr-catalog__lock) { display: none !important; }
.hr-catalog__lock {
  display: grid; place-items: center; min-height: 70vh;
  padding: var(--sp-8) var(--container-pad); background: var(--hr-bg);
}
.hr-catalog__lock[hidden] { display: none; }
.hr-catalog__lock-card {
  width: 100%; max-width: 420px; display: grid; gap: var(--sp-3); padding: var(--sp-6);
  background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
.hr-catalog__lock-ico {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: var(--hr-blue-50); color: var(--hr-blue);
}
.hr-catalog__lock-ico svg { width: 22px; height: 22px; }
.hr-catalog__lock-h {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold); color: var(--hr-text-strong);
}
.hr-catalog__lock-h:focus { outline: none; }
.hr-catalog__lock-p, .hr-catalog__lock-wait { margin: 0; font-size: var(--fs-small); line-height: var(--lh-base); color: var(--hr-body); }
.hr-catalog__lock-help { margin: 0; font-size: var(--fs-micro); color: var(--hr-text-muted); }
.hr-catalog__lock-form { display: grid; gap: var(--sp-3); }
.hr-catalog__lock-err { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--hr-error); }
.hr-catalog__lock-err:empty { display: none; }
.hr-catalog__lock-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 12px var(--sp-6); cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  border: 1px solid var(--hr-blue); border-radius: var(--r-pill);
  background: var(--hr-blue); color: var(--hr-text-on-color);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hr-catalog__lock-btn:hover { background: var(--hr-blue-700); border-color: var(--hr-blue-700); }
.hr-catalog__lock-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__lock-btn[disabled] { opacity: .6; cursor: progress; }
.hr-catalog__lock-btn svg { width: 18px; height: 18px; flex: none; }
/* checking: the first paint, while a signed-in device is being confirmed. */
.hr-catalog__lock[data-state="checking"] .hr-catalog__lock-form { display: none; }
.hr-catalog__lock:not([data-state="checking"]) .hr-catalog__lock-wait { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hr-catalog__lock-btn { transition: none; }
}

/* ============================================================
   Room preview results: cards (user, 2026-10-01, layout C of
   hubspot-preview/room-preview-results/). Step 4 takes the whole
   window: a top bar with the room and Another photo, a feed of
   the design choices and one card per version, and a foot with
   what goes with the estimate and Back to estimate.
   ============================================================ */
.hr-catalog__rp[data-step="4"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); background: var(--hr-bg); }
.hr-catalog__rp[data-step="4"] .hr-catalog__rp-top,
.hr-catalog__rp[data-step="4"] .hr-catalog__rp-panel { display: none; }
.hr-catalog__rp[data-step="4"] .hr-catalog__rp-stage {
  grid-row: 1; grid-column: 1; display: block; padding: 0; overflow: hidden; background: var(--hr-bg);
}
.hr-catalog__rpc { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--hr-bg); color: var(--hr-body); font-family: var(--font-sans); }

/* the top bar */
.hr-catalog__rpc-top {
  flex: none; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 64px; padding: env(safe-area-inset-top, 0px) var(--sp-4) 0 var(--sp-5);
  background: var(--hr-surface); border-bottom: 1px solid var(--hr-divider);
}
.hr-catalog__rpc-top .tt { flex: 1; min-width: 0; }
.hr-catalog__rpc-top h4 {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-extrabold); line-height: 1.2;
  color: var(--hr-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-catalog__rpc-top h4:focus { outline: none; }
.hr-catalog__rpc-top small {
  display: block; margin-top: 2px; font-size: var(--fs-micro); line-height: 1.35; color: var(--hr-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-catalog__rpc-ap {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-3); cursor: pointer;
  border: 1px solid var(--hr-border); border-radius: var(--r-pill); background: var(--hr-surface); color: var(--hr-navy);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out);
}
.hr-catalog__rpc-ap svg { width: 18px; height: 18px; flex: none; color: var(--hr-blue); }
.hr-catalog__rpc-ap:hover { background: var(--hr-surface-alt); }
.hr-catalog__rpc-ap:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__rpc-ap[disabled] { opacity: .5; cursor: not-allowed; }

/* the feed */
.hr-catalog__rpc-feed {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-6);
}
.hr-catalog__rpc-feed > * { flex: none; }
.hr-catalog__rpc-feed .hr-catalog__rp-err,
.hr-catalog__rpc-feed .hr-catalog__rp-fine { margin: 0; }

/* the photos of this session */
.hr-catalog__rpc-photos { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: -4px; padding: 4px; }
.hr-catalog__rpc-photos .ph {
  flex: none; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 5px var(--sp-4) 5px 5px; cursor: pointer; text-align: left;
  border: 1px solid var(--hr-border); border-radius: var(--r-lg); background: var(--hr-surface); color: var(--hr-navy); font-family: var(--font-sans);
}
.hr-catalog__rpc-photos .ph img { flex: none; width: 60px; height: 45px; border-radius: var(--r-sm); object-fit: cover; background: var(--hr-surface-alt); }
.hr-catalog__rpc-photos .ph b { display: block; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--hr-text-strong); }
.hr-catalog__rpc-photos .ph small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--fs-micro); color: var(--hr-text-muted); white-space: nowrap; }
.hr-catalog__rpc-photos .ph small svg { width: 13px; height: 13px; flex: none; }
.hr-catalog__rpc-photos .ph small.on { color: var(--hr-green-700); font-weight: var(--fw-semibold); }
.hr-catalog__rpc-photos .ph[aria-pressed="true"] { border-color: var(--hr-blue); box-shadow: 0 0 0 1px var(--hr-blue); }
.hr-catalog__rpc-photos .ph[disabled] { opacity: .5; cursor: not-allowed; }
.hr-catalog__rpc-photos .ph:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* making, or nothing came back */
.hr-catalog__rpc-busy, .hr-catalog__rpc-fail {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg); background: var(--hr-blue-50); color: var(--hr-navy);
}
.hr-catalog__rpc-fail { background: color-mix(in srgb, var(--hr-error) 8%, var(--hr-surface)); }
.hr-catalog__rpc-busy .tx, .hr-catalog__rpc-fail .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hr-catalog__rpc-busy b, .hr-catalog__rpc-fail b { font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-extrabold); }
.hr-catalog__rpc-busy small, .hr-catalog__rpc-fail small { font-size: var(--fs-micro); color: var(--hr-text-muted); }
.hr-catalog__rpc-busy .bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--hr-blue-100); overflow: hidden; }
.hr-catalog__rpc-busy .bar u { display: block; height: 100%; background: var(--hr-blue); text-decoration: none; transition: width 1s linear; }
.hr-catalog__rpc-busy .hr-catalog__rp-spin { flex: none; border-color: var(--hr-blue-100); border-top-color: var(--hr-blue); }
.hr-catalog__rpc-busy .hr-catalog__rp-btn, .hr-catalog__rpc-fail .hr-catalog__rp-btn { flex: none; }

/* the design choices */
.hr-catalog__rpc-sum { padding: var(--sp-2) var(--sp-4) var(--sp-4); background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--r-lg); }
.hr-catalog__rpc-sum .hd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hr-catalog__rpc-sum .hd b {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--hr-text-muted);
}
.hr-catalog__rpc-sum .hd .hr-catalog__rp-link { min-height: 44px; }
.hr-catalog__rpc-sum .pcs { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.hr-catalog__rpc-sum .pc {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 3px var(--sp-3) 3px 3px;
  border-radius: var(--r-pill); background: var(--hr-surface-alt); color: var(--hr-navy);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semibold); white-space: nowrap;
}
.hr-catalog__rpc-sum .pc img, .hr-catalog__rpc-sum .pc .sq { display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.hr-catalog__rpc-sum .line { margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--hr-body); }
.hr-catalog__rpc-sum .line b { color: var(--hr-text-strong); }
.hr-catalog__rpc-sum .all { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hr-divider); }
.hr-catalog__rpc-sum .all .hr-catalog__rp-sees { margin-top: var(--sp-3); }

/* the cards */
.hr-catalog__rpc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.hr-catalog__rpc-card {
  display: block; min-width: 0; overflow: hidden;
  background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.hr-catalog__rpc-card.is-picked { border-color: var(--hr-green); box-shadow: 0 0 0 2px var(--hr-green); }
.hr-catalog__rpc-card .hd { display: flex; align-items: center; gap: var(--sp-2); min-height: 52px; padding: 4px 4px 4px var(--sp-4); }
.hr-catalog__rpc-card .hd b { font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-extrabold); color: var(--hr-text-strong); }
.hr-catalog__rpc-card .ok {
  display: none; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--hr-green-50); color: var(--hr-green-700); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
}
.hr-catalog__rpc-card .ok svg { width: 13px; height: 13px; }
.hr-catalog__rpc-card.is-picked .ok { display: inline-flex; }
.hr-catalog__rpc-card .fsb {
  flex: none; margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--r-md); background: none; color: var(--hr-navy);
}
.hr-catalog__rpc-card .fsb svg { width: 20px; height: 20px; }
.hr-catalog__rpc-card .fsb:hover { background: var(--hr-surface-alt); }
.hr-catalog__rpc-card .fsb:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__rpc-card .ctl { display: grid; gap: var(--sp-3); padding: var(--sp-3); }
.hr-catalog__rpc-card .ctl .hr-catalog__rp-btn { width: 100%; }
/* Add to estimate and 3 more like this share a row; they stack when the card is too narrow for both. */
.hr-catalog__rpc-card .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
.hr-catalog__rpc-card .two .hr-catalog__rp-btn { min-width: 0; padding: 0 var(--sp-3); }
.hr-catalog__rp-btn.is-more3 { background: var(--hr-blue-50); border-color: var(--hr-blue); color: var(--hr-blue-700); }
.hr-catalog__rp-btn.is-more3:hover:not([disabled]) { background: var(--hr-blue-100); }
.hr-catalog__rpc-card .hd { flex-wrap: wrap; row-gap: 2px; }
.hr-catalog__rpc-card .from {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--hr-blue-50); color: var(--hr-blue-700); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold);
}
.hr-catalog__rpc-card .from svg { width: 13px; height: 13px; }
.hr-catalog__rpc-card.is-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: 180px; padding: var(--sp-5); cursor: pointer; text-align: center;
  border: 2px dashed var(--hr-border-strong); background: transparent; box-shadow: none; color: var(--hr-navy); font-family: var(--font-sans);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hr-catalog__rpc-card.is-more svg { width: 24px; height: 24px; color: var(--hr-blue); }
.hr-catalog__rpc-card.is-more b { font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-extrabold); }
.hr-catalog__rpc-card.is-more span { max-width: 30ch; font-size: var(--fs-small); line-height: 1.45; color: var(--hr-text-muted); }
.hr-catalog__rpc-card.is-more:hover { border-color: var(--hr-blue); background: var(--hr-blue-50); }
.hr-catalog__rpc-card.is-more:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* one picture: Before, Compare or After */
.hr-catalog__rpc-pic { width: 100%; aspect-ratio: var(--ar, 1.3333); border-radius: 0; }
.hr-catalog__rpc-pic[data-view="ba"] { cursor: ew-resize; touch-action: none; }
.hr-catalog__rpc-pic[data-view="after"] .bf, .hr-catalog__rpc-pic[data-view="before"] .af { display: none; }
.hr-catalog__rpc-pic[data-view="before"] .bf { clip-path: none; }
.hr-catalog__rpc-pic:not([data-view="ba"]) .seam, .hr-catalog__rpc-pic:not([data-view="ba"]) .knob { display: none; }
.hr-catalog__rpc-pic[data-view="after"] .hr-catalog__rp-pill.is-l,
.hr-catalog__rpc-pic[data-view="before"] .hr-catalog__rp-pill.is-r { display: none; }
.hr-catalog__rpc-pic .hr-catalog__rp-pill { bottom: var(--sp-3); padding: 7px 11px; font-size: var(--fs-micro); }
.hr-catalog__rpc-pic .hr-catalog__rp-pill.is-l { left: var(--sp-3); }
.hr-catalog__rpc-pic .hr-catalog__rp-pill.is-r { right: var(--sp-3); }
.hr-catalog__rpc-pic .mk {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4); text-align: center; color: var(--hr-text-on-color);
}
.hr-catalog__rpc-pic .mk b { font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.hr-catalog__rpc-pic .mk small { font-size: var(--fs-micro); color: var(--hr-blue-100); }
.hr-catalog__rpc-pic .mk svg { width: 26px; height: 26px; }

/* Before / Compare / After */
.hr-catalog__rpc-modes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border-radius: var(--r-pill); background: var(--hr-surface-alt);
}
.hr-catalog__rpc-modes button {
  min-height: 44px; padding: 0 6px; border: 0; border-radius: var(--r-pill); cursor: pointer; background: transparent; color: var(--hr-navy);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hr-catalog__rpc-modes button[aria-pressed="true"] { background: var(--hr-navy); color: var(--hr-text-on-color); box-shadow: var(--shadow-sm); }
.hr-catalog__rpc-modes button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hr-catalog__rpc-modes.is-dark { background: color-mix(in srgb, var(--hr-surface) 14%, transparent); }
.hr-catalog__rpc-modes.is-dark button { color: var(--hr-text-on-color); }
.hr-catalog__rpc-modes.is-dark button[aria-pressed="true"] { background: var(--hr-surface); color: var(--hr-navy); }

/* the foot */
.hr-catalog__rpc-bar {
  flex: none; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)) var(--sp-5);
  background: var(--hr-surface); border-top: 1px solid var(--hr-divider);
}
.hr-catalog__rpc-bar .st { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); line-height: 1.35; color: var(--hr-body); }
.hr-catalog__rpc-bar .st svg { flex: none; width: 20px; height: 20px; color: var(--hr-text-subtle); }
.hr-catalog__rpc-bar .st.is-on svg { color: var(--hr-green-700); }
.hr-catalog__rpc-bar .st b { color: var(--hr-text-strong); }
.hr-catalog__rpc-bar .hr-catalog__rp-btn { flex: none; }
.hr-catalog__rpc-toast {
  position: absolute; left: 50%; bottom: 96px; z-index: 5; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: 10px 14px; border-radius: var(--r-md); background: var(--hr-navy); color: var(--hr-text-on-color);
  font-size: var(--fs-small); line-height: 1.4; text-align: center; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out);
}
.hr-catalog__rpc-toast.is-on { opacity: 1; }

/* Another photo: a sheet from the foot, a box in the middle on a wider or sideways screen */
.hr-catalog__rpc-ov {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--hr-navy) 50%, transparent);
}
.hr-catalog__rpc-ov[hidden] { display: none; }
.hr-catalog__rpc-sheet {
  width: 100%; max-width: 560px; display: grid; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--hr-surface); border-radius: var(--r-2xl) var(--r-2xl) 0 0; box-shadow: var(--shadow-lg);
}
.hr-catalog__rpc-sheet .grab { display: block; width: 40px; height: 5px; margin: 0 auto 2px; border-radius: 3px; background: var(--hr-border-strong); }
.hr-catalog__rpc-sheet h5 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-extrabold); color: var(--hr-text-strong); }
.hr-catalog__rpc-sheet p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--hr-body); }
.hr-catalog__rpc-sheet .row { display: grid; gap: var(--sp-2); }
.hr-catalog__rpc-sheet .row .hr-catalog__rp-btn { width: 100%; }
.hr-catalog__rpc-sheet > .hr-catalog__rp-link { justify-self: center; min-height: 44px; padding: 0 var(--sp-4); }
/* 3 more like this (2026-10-02): what to fix in a version. A taller sheet whose middle scrolls. */
.hr-catalog__rpc-sheet.is-fix { display: flex; flex-direction: column; gap: 0; max-width: 600px; max-height: calc(100% - var(--sp-6)); padding: 0; }
.hr-catalog__rpc-sheet.is-fix .grab { flex: none; margin: 10px auto 4px; }
.hr-catalog__rpc-sheet.is-fix .sb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-5) var(--sp-4); }
/* The middle's scroll bar stays inside the rounded sheet (user, 2026-10-04: "the scroll bar is kind of going out of the
   window"): the sheet clips to its corners, and a slim bar starts below the top corner's curve and ends above the
   buttons. Firefox, which has no ::-webkit-scrollbar, gets its own thin bar. */
.hr-catalog__rpc-sheet.is-fix { overflow: hidden; }
.hr-catalog__rpc-sheet.is-fix .sb::-webkit-scrollbar { width: 12px; }
.hr-catalog__rpc-sheet.is-fix .sb::-webkit-scrollbar-track { background: transparent; margin: var(--r-2xl) 0 var(--sp-2); }
.hr-catalog__rpc-sheet.is-fix .sb::-webkit-scrollbar-thumb {
  border: 4px solid transparent; border-radius: var(--r-pill); background: var(--hr-border-strong); background-clip: padding-box;
}
@supports not selector(::-webkit-scrollbar) {
  .hr-catalog__rpc-sheet.is-fix .sb { scrollbar-width: thin; scrollbar-color: var(--hr-border-strong) transparent; }
}
.hr-catalog__rpc-sheet.is-fix .sf {
  flex: none; display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hr-divider);
}
.hr-catalog__rpc-sheet.is-fix .sf .hr-catalog__rp-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--sp-3); }
.hr-catalog__rpc-sheet.is-fix .hr-catalog__rp-penask { margin-top: var(--sp-4); }
.hr-catalog__rpf-v { display: flex; align-items: center; gap: var(--sp-3); }
.hr-catalog__rpf-v img { flex: none; width: 76px; height: 57px; border-radius: var(--r-sm); object-fit: cover; background: var(--hr-navy); }
.hr-catalog__rpf-v b {
  display: block; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-extrabold); line-height: 1.2; color: var(--hr-text-strong);
}
.hr-catalog__rpf-v b:focus { outline: none; }
.hr-catalog__rpf-v small { display: block; margin-top: 3px; font-size: var(--fs-micro); line-height: 1.4; color: var(--hr-text-muted); }
.hr-catalog__rpf-ntc {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); background: var(--hr-blue-50); color: var(--hr-navy);
}
.hr-catalog__rpf-ntc > svg { flex: none; width: 17px; height: 17px; color: var(--hr-blue); }
.hr-catalog__rpc-sheet .hr-catalog__rpf-ntc p { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-small); line-height: 1.4; color: var(--hr-navy); }
.hr-catalog__rpf-ntc .fx {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 var(--sp-3); cursor: pointer;
  border: 1px solid var(--hr-blue-100); border-radius: var(--r-pill); background: var(--hr-surface); color: var(--hr-navy);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap;
}
.hr-catalog__rpf-ntc .fx svg { width: 14px; height: 14px; }
.hr-catalog__rpf-ntc .fx.is-on { background: var(--hr-navy); border-color: var(--hr-navy); color: var(--hr-text-on-color); }
/* .hr-catalog__rpc-sheet p would win over a lone class. */
.hr-catalog__rpc-sheet .hr-catalog__rpf-q {
  display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-4) 0 0;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.35; color: var(--hr-text-strong);
}
.hr-catalog__rpc-sheet .hr-catalog__rp-err { margin-top: var(--sp-3); }
.hr-catalog__rpf-q small { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--hr-text-muted); }
.hr-catalog__rpf-opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.hr-catalog__rp-link.is-back { min-height: 44px; margin: calc(-1 * var(--sp-2)) 0 var(--sp-2); }

/* full screen */
.hr-catalog__rpfs {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  background: color-mix(in srgb, var(--hr-navy) 30%, black); color: var(--hr-text-on-color); font-family: var(--font-sans);
}
.hr-catalog__rpfs .in { position: absolute; inset: 0; }
.hr-catalog__rpfs[data-turned="1"] .in { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.hr-catalog__rpfs .st { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Sized by module.js (rpfsFit): the whole picture, or wider than the screen when it fills it. */
.hr-catalog__rpfs .hr-catalog__rpc-pic { flex: none; max-width: none; touch-action: none; }
.hr-catalog__rpfs .hr-catalog__rp-pill { bottom: auto; top: calc(50% + 34px); }
.hr-catalog__rpfs .tp, .hr-catalog__rpfs .bt {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: var(--sp-3);
  transition: opacity var(--dur) var(--ease-out);
}
.hr-catalog__rpfs .tp {
  top: 0; padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--sp-4) var(--sp-8);
  background: linear-gradient(color-mix(in srgb, var(--hr-navy) 80%, transparent), transparent);
}
.hr-catalog__rpfs .tp .hr-catalog__rpc-modes { flex: 0 1 360px; margin: 0 auto; }
.hr-catalog__rpfs .bt {
  bottom: 0; padding: var(--sp-8) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, color-mix(in srgb, var(--hr-navy) 80%, transparent));
}
.hr-catalog__rpfs .b {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-3); cursor: pointer;
  border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--hr-surface) 16%, transparent); color: var(--hr-text-on-color);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap;
}
.hr-catalog__rpfs .b svg { width: 18px; height: 18px; flex: none; }
.hr-catalog__rpfs.is-tight .b { width: 44px; padding: 0; justify-content: center; }
.hr-catalog__rpfs.is-tight .b span { display: none; }
.hr-catalog__rpfs .r {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--hr-surface) 16%, transparent); color: var(--hr-text-on-color);
}
.hr-catalog__rpfs .r svg { width: 22px; height: 22px; }
.hr-catalog__rpfs .r[hidden] { display: none; }
.hr-catalog__rpfs .b:focus-visible, .hr-catalog__rpfs .r:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hr-blue-100); }
.hr-catalog__rpfs .nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
.hr-catalog__rpfs .n { margin: 0; min-width: 0; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap; }
.hr-catalog__rpfs .n small { display: block; font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-regular); color: var(--hr-blue-100); }
.hr-catalog__rpfs .bt .hr-catalog__rp-btn { flex: none; min-height: 44px; }
.hr-catalog__rpfs[data-ui="off"] .tp, .hr-catalog__rpfs[data-ui="off"] .bt { opacity: 0; pointer-events: none; }
.hr-catalog__rpfs .note {
  position: absolute; left: 50%; top: 84px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0;
  padding: 10px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--hr-navy) 92%, transparent); color: var(--hr-text-on-color);
  font-size: var(--fs-small); line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out);
}
.hr-catalog__rpfs .note.is-on { opacity: 1; }

/* two cards across on a tablet held upright, three on a sideways tablet or a computer */
@media (min-width: 640px) {
  .hr-catalog__rpc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .hr-catalog__rpc-top { padding-left: var(--sp-6); padding-right: var(--sp-5); }
  .hr-catalog__rpc-feed { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
  .hr-catalog__rpc-bar { padding-left: var(--sp-6); padding-right: var(--sp-5); }
  .hr-catalog__rpc-sum .all { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); }
}
@media (min-width: 1024px) {
  .hr-catalog__rpc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .hr-catalog__rpc-feed {
    padding-left: max(var(--sp-6), calc((100% - 1320px) / 2));
    padding-right: max(var(--sp-6), calc((100% - 1320px) / 2));
  }
}
@media (min-width: 768px), (orientation: landscape) {
  .hr-catalog__rpc-ov { align-items: center; }
  .hr-catalog__rpc-sheet { max-width: 480px; border-radius: var(--r-2xl); padding: var(--sp-5) var(--sp-6) var(--sp-3); }
  .hr-catalog__rpc-sheet .grab { display: none; }
  .hr-catalog__rpc-sheet .row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
/* A phone held sideways: the cards swipe left and right. */
@media (orientation: landscape) and (max-height: 520px) {
  .hr-catalog__rpc-top { min-height: 52px; }
  .hr-catalog__rpc-feed { padding: var(--sp-3); gap: var(--sp-3); }
  .hr-catalog__rpc-cards {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62%, 420px);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
  }
  .hr-catalog__rpc-card { scroll-snap-align: start; }
  .hr-catalog__rpc-bar { padding-top: var(--sp-2); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 379px) {
  .hr-catalog__rpc-ap { width: 44px; padding: 0; justify-content: center; }
  .hr-catalog__rpc-ap span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-catalog__rpc-ap, .hr-catalog__rpc-card.is-more, .hr-catalog__rpc-modes button, .hr-catalog__rpc-toast,
  .hr-catalog__rpfs .tp, .hr-catalog__rpfs .bt, .hr-catalog__rpfs .note, .hr-catalog__rpc-busy .bar u { transition: none; }
}