/* ==========================================================================
   storefront-pages.css — Categories · Subcategories · Archive
   MEASURED off 15583:8788 · 15592:6216 · 17292:23330 · 17353:25410
   ========================================================================== */

/* ---------- Web/Subpage Hero (1920x184) ---------------------------------- */
.shero {
  position: relative; height: 184px; background: var(--dark-strong);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px var(--web-pad); overflow: hidden;
}
.shero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.shero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.80) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.02) 100%);
}
.shero__in { position: relative; display: flex; flex-direction: column; gap: 20px; }
.shero__t { font-size: 36px; font-weight: 400; line-height: 1.28; color: #fff; }
.crumbs { display: flex; align-items: center; gap: 8px; }
.crumbs__c { font-size: 16px; font-weight: 400; line-height: 1.28; color: rgba(255,255,255,.75); }
.crumbs__c:hover { color: #fff; text-decoration: underline; }
.crumbs__c.is-now { color: #fff; }
.crumbs__s { color: rgba(255,255,255,.75); flex: none; }

/* ---------- page body ---------------------------------------------------- */
/* Figma's Content is pad 48/0/64 and its grid is 1546 at x187 — not the
   shell's 1551/185. Reproduced exactly. */
.cpage { padding: 48px 0 64px; }
.cpage__grid {
  width: 100%;
  display: flex; align-items: flex-start; gap: 32px;
}

/* Category Index — 272 wide, rows 20 tall on a 4px stack */
.cidx { flex: 0 0 272px; display: flex; flex-direction: column; gap: 4px; }
.cidx__h {
  height: 36px; font-size: 16px; font-weight: 600; line-height: 1.28; color: var(--text-dark);
}
.cidx__i { font-size: 16px; font-weight: 400; line-height: 1.28; color: var(--text-dark); }
.cidx__i:hover { color: var(--wrc-green); }
.cidx__i.is-active { font-weight: 600; color: var(--wrc-green-dark); }
.cidx__i.is-here { font-weight: 600; color: var(--wrc-green); }
.cidx__subs { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }

/* Web/Category Card — 236 wide, image object-fit CONTAIN on white */
.ccards {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap;
  column-gap: 32px; row-gap: 32px; align-content: flex-start;
}
.ccards--sub { column-gap: 15px; row-gap: 16px; }
.ccard {
  flex: 0 0 236px; width: 236px; display: flex; flex-direction: column;
  align-items: center; gap: 14px; padding-bottom: 20px;
  background: var(--white); border: 1px solid var(--black-7);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
/* Figma's card art is a cut-out on white, so the frame uses scaleMode FIT.
   The mockup ships photographs, where FIT leaves a white band above and
   below — the user asked for none, so these fill the box. */
.ccard__img {
  display: block; width: 100%; aspect-ratio: 244 / 191.84;
  background: var(--white) center/cover no-repeat;
}
.ccard__l {
  padding: 0 12px; font-size: 18px; font-weight: 500; color: var(--text-medium);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ccard:hover { border-color: var(--black-15); box-shadow: 0 6px 24px -4px rgba(0,0,0,.16); }
.ccard:hover .ccard__l { color: var(--wrc-green); }

/* ---------- archive ------------------------------------------------------ */
.arch {
  width: 100%;
  display: flex; align-items: flex-start; gap: 32px;
}
.arch__list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.arch__rows { display: flex; flex-direction: column; gap: 12px; }
/* Grid items default to `min-width: auto`, so a card whose content cannot
   shrink — the long title, the location chips, the Add To Cart row — forces
   its 1fr track wider than the column and the whole grid bleeds past the
   wrapper. `min-width: 0` lets the tracks actually be 1fr. */
.arch__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.arch__grid > * { min-width: 0; }
.arch__empty { padding: 48px; text-align: center; color: var(--text-light); font-size: 14px; }
.arch__more {
  align-self: center; width: 180px; height: 48px; margin-top: 12px;
  border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--black-15);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--text-medium); cursor: pointer;
}
.arch__more:hover { border-color: var(--wrc-green); color: var(--wrc-green); }

/* filter rail — 364 r12, header 58 on #364153 */
.frail {
  flex: 0 0 364px; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--white); border: 1px solid var(--black-15);
}
.frail__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 58px; padding: 0 28px; background: var(--text-medium);
}
.frail__hd h3 { font-size: 18px; font-weight: 600; color: #fff; }
.frail__clear { background: none; border: 0; font: inherit; font-size: 14px; font-weight: 500; color: #fff; cursor: pointer; }
.frail__clear:hover { text-decoration: underline; }
.frail__g { padding: 14px 24px; display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--black-15); }
.frail__g:last-child { border-bottom: 0; }
.frail__gh {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 24px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  font-size: 16px; font-weight: 500; color: var(--text-medium);
}
/* Expanded = minus, collapsed = plus */
.frail__tog { position: relative; width: 20px; height: 20px; flex: none; }
.frail__tog::before, .frail__tog::after {
  content: ""; position: absolute; background: var(--text-medium); border-radius: 1px;
}
.frail__tog::before { left: 4px; top: 9px; width: 12px; height: 2px; }
.frail__tog::after { left: 9px; top: 4px; width: 2px; height: 12px; opacity: 0; }
.frail__tog.is-plus::after { opacity: 1; }
.frail__opts { display: flex; flex-direction: column; gap: 6px; }

.fopt {
  display: flex; align-items: center; gap: 10px; min-height: 34px;
  padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer;
}
.fopt.is-on { background: var(--wrc-green-7); }
.fopt input { position: absolute; opacity: 0; pointer-events: none; }
.fopt__box {
  width: 18px; height: 18px; flex: none; border-radius: var(--radius-xs);
  background: var(--white); border: 1.5px solid var(--grey-medium-blue);
  display: grid; place-items: center; color: transparent;
}
.fopt.is-on .fopt__box { background: var(--wrc-green); border-color: var(--wrc-green); color: #fff; }
.fopt__l { flex: 1 1 auto; font-size: 14px; font-weight: 400; color: var(--text-medium); }
.fopt.is-on .fopt__l { font-weight: 500; color: var(--text-dark); }
.fopt__n { font-size: 14px; color: var(--text-light); }

.frng { display: flex; flex-direction: column; gap: 12px; }
.frng__vals { position: relative; height: 27px; }
.frng__b {
  position: absolute; top: 0; transform: translateX(-50%); padding: 5px 12px;
  border-radius: var(--radius-sm); background: var(--wrc-green-dark);
  font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap;
}
.frng__track { position: relative; height: 22px; display: flex; align-items: center; }
.frng__rail { position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--grey-medium-blue); }
.frng__fill { position: absolute; height: 6px; border-radius: 3px; background: var(--wrc-green); }
.frng__h {
  position: absolute; left: 0; width: 100%; margin: 0; height: 22px;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.frng__h::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--wrc-green); cursor: pointer;
}
.frng__ins { display: flex; gap: 12px; }
.frng__in {
  flex: 1 1 0; display: flex; align-items: center; height: 37px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--grey-medium-blue); overflow: hidden;
}
.frng__u { flex: none; padding: 0 8px 0 14px; font-size: 14px; font-weight: 500; color: var(--text-light); }
.frng__in input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none;
  padding: 0 14px 0 2px; font: inherit; font-size: 14px; color: var(--text-dark);
}

/* toolbar */
.ltool { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 48px; }
/* The Filters/Sort triggers and their overlays only exist on a phone —
   `Archive - Mobile` 17294:24312. Desktop keeps the rail and the select. */
.ftrig, .fsheet, .ssheet { display: none; }
.ltool__n { font-size: 16px; color: var(--text-medium); }
.ltool__r { display: flex; align-items: center; gap: 16px; }
.ltool__sort { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text-medium); }
.ltool__sort .select { width: 240px; height: 48px; border-radius: var(--radius-lg); font-size: 16px; }
.vtog { display: flex; gap: 4px; }
.vtog__b {
  width: 24px; height: 24px; border-radius: var(--radius-xs); padding: 0;
  background: var(--white); border: 1px solid var(--grey-medium-blue);
  color: var(--text-light); display: grid; place-items: center; cursor: pointer;
}
.vtog__b.is-on { background: var(--wrc-green-7); border-color: var(--wrc-green); color: var(--wrc-green); }

/* ---------- product cards ------------------------------------------------ */
.pcard {
  background: var(--white); border: 1px solid var(--black-15);
  border-radius: var(--radius-xl);
}
.pcard--row { display: flex; align-items: center; gap: 20px; padding: 20px; }
.pcard--row .iimg { width: 260px !important; height: 195px !important; border-radius: var(--radius-md); }
.pcard__body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 40px; }
.pcard__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pcard__buy { flex: 0 0 200px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }

.pcard--tile { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
/* the tile photo is 4:3 at every width — a fixed 180 height went wide and
   flat as soon as the card was not the frame's exact 366 */
.pcard--tile .iimg { width: 100% !important; height: auto !important;
                     aspect-ratio: 4 / 3; border-radius: var(--radius-md); }

.pcard__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcard__chip {
  display: inline-flex; align-items: center; height: 18px; padding: 0 8px;
  border-radius: var(--radius-full); background: var(--grey-strong);
  font-size: 10px; font-weight: 600; color: var(--text-light);
}
.pcard__k { font-size: 10px; font-weight: 500; color: var(--text-light); }
.pcard__v { font-size: 10px; font-weight: 500; color: var(--text-medium); }
.pcard--row .pcard__t { font-size: 18px; font-weight: 600; color: var(--text-dark); line-height: 1.28; }
.pcard--tile .pcard__t {
  font-size: 18px; font-weight: 500; color: var(--text-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard__t:hover { color: var(--wrc-green); }
.pcard--row .pcard__d { font-size: 14px; color: var(--text-light); line-height: 1.28; }
.pcard--tile .pcard__d { font-size: 12px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__price { font-size: 24px; font-weight: 400; color: var(--wrc-orange); }
.pcard__del { display: flex; flex-direction: column; gap: 8px; }
.pcard__locs { display: flex; flex-wrap: wrap; gap: 8px; }
.lochip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: var(--radius-md); border: 1px solid var(--grey-medium-blue);
  background: var(--white); font-size: 13px; color: var(--text-dark);
  font-family: inherit; line-height: 1; cursor: pointer; white-space: nowrap;
}
button.lochip:hover:not(.is-on):not(.is-off) { border-color: var(--wrc-green-dark); color: var(--wrc-green-dark); }
.lochip.is-on { background: var(--wrc-green-dark); border-color: var(--wrc-green-dark); color: #fff; }
.lochip.is-off { color: var(--grey-strong); }
.pcard__qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcard__ib {
  width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--black-15);
  color: var(--text-light); display: grid; place-items: center; cursor: pointer;
}
.pcard__ib:hover { color: var(--wrc-green); border-color: var(--wrc-green); }
.pcard__add { height: 44px; border-radius: var(--radius-lg); font-size: 16px; width: 100%; }
.pcard--row .pcard__add { width: 200px; }

@media (max-width: 1280px) {
  .cpage__grid, .arch { flex-direction: column; }
  .cidx, .frail { flex: 1 1 auto; width: 100%; }
  .arch__grid { grid-template-columns: repeat(2, 1fr); }
  .pcard--row { flex-direction: column; align-items: stretch; }
  .pcard__body { flex-direction: column; align-items: stretch; gap: 16px; }
  .pcard__buy { flex: 1 1 auto; align-items: stretch; }
}

/* wishlist / compare toggles reflect membership */
.pcard__ib.is-on, .icard__ib.is-on {
  background: var(--wrc-green-7); border-color: var(--wrc-green); color: var(--wrc-green);
}

/* ==========================================================================
   Liquidations — Archive 15634:7098 · Detail 15230:4268
   ========================================================================== */

/* ---------- Web/Liquidation Card (244x252) -------------------------------- */
.lcard { display: flex; flex-direction: column; gap: 10px; width: auto;
         padding-bottom: 12px; border-radius: 10px; background: #fff;
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
         text-decoration: none; overflow: hidden; }
.lcard:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
/* 244 x 183 is exactly 4:3 — pin the ratio, not the height, or it distorts
   the moment the card is not the frame's exact width */
.lcard__img { position: relative; display: block; aspect-ratio: 4 / 3; padding: 12px;
              background: #f0f0f0 center/cover no-repeat; }
.lcard__badge { display: inline-flex; align-items: center; padding: 7px 14px;
                border-radius: 999px; background: #e55a33;
                font: 500 10px/12px Inter, sans-serif; color: #fff;
                letter-spacing: .02em; white-space: nowrap; }
.lcard__d { display: flex; flex-direction: column; gap: 8px; padding: 0 12px;
             height: 48px; }
.lcard__t { font: 500 18px/22px Inter, sans-serif; color: #101828;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcard__loc { font: 500 14px/1.28 Inter, sans-serif; color: #656772; }

/* ---------- archive ------------------------------------------------------- */
.lqpage { padding: 48px 0 64px; display: flex; flex-direction: column; gap: 48px; }
/* Six lots to a row on desktop, the same count the home rail uses. A
   wrapping flex of fixed 244s fitted five and left a ragged gap. */
.lqgrid { width: 100%; display: grid; gap: 20px 16px;
          grid-template-columns: repeat(6, 1fr); }
.lqgrid > * { min-width: 0; }

/* ---------- lot detail ---------------------------------------------------- */
.lqdetail { width: 100%;
            padding: 24px 0 48px; display: flex; flex-direction: column; gap: 10px; }
.lqhead { display: flex; flex-direction: column; gap: 24px; }
.lqhead__t { font: 400 36px/1.28 Inter, sans-serif; color: #101828; margin: 0; }

.lqover { display: flex; align-items: stretch; gap: 32px; }
.lqmedia { flex: 1 1 auto; min-width: 0; padding: 24px; border-radius: 10px;
           background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
           display: flex; flex-direction: column; gap: 16px; }
/* the lot hero and its thumbnails are 4:3 like every other product image —
   a min-height/height stretched them as soon as the column was not the
   frame's exact width */
.lqmedia__hero { position: relative; flex: 1 1 auto; aspect-ratio: 4 / 3;
                 border-radius: 8px; background: #f0f0f0 center/cover no-repeat;
                 cursor: zoom-in; padding: 12px; }
.lqmedia__thumbs { display: flex; gap: 16px; }
.lqmedia__thumb { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3; border: 0; border-radius: 8px;
                  background: #f0f0f0 center/cover no-repeat; cursor: pointer;
                  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.lqmedia__thumb:hover { box-shadow: inset 0 0 0 2px #00805f; }

.lqsum { flex: 0 0 364px; width: 364px; padding: 24px; border-radius: 10px;
         background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
         display: flex; flex-direction: column; gap: 25px; }
.lqsum__intro { font: 400 18px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.lqsum__feats { display: flex; flex-direction: column; gap: 14px; }
.lqfeat { display: flex; gap: 10px; }
.lqfeat__i { flex: 0 0 24px; color: #00805f; }
.lqfeat__t { display: flex; flex-direction: column; gap: 4px; }
.lqfeat__t strong { font: 500 18px/1.22 Inter, sans-serif; color: #101828; }
.lqfeat__t span   { font: 400 16px/1.25 Inter, sans-serif; color: #364153; }

.lqrow { display: flex; align-items: flex-start; gap: 32px; }
.lqlist { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Product Section-Heading 1154x61, pad 16/0, rule #000@15% */
.lqsec { padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.lqsec h2 { font: 500 24px/1.22 Inter, sans-serif; color: #101828; margin: 0; }

@media (max-width: 1200px) {
  .lqover, .lqrow { flex-direction: column; }
  .lqsum { flex: 0 0 auto; width: 100%; }
}