/* ===========================================================
   CATEGORY / SHOP ARCHIVE
   Loaded after home.css. Shares .hh-card with the homepage rails.
   =========================================================== */

/* --- masthead --------------------------------------------- */
.hh-cat__head { padding-block: var(--hh-s6) var(--hh-s6); }   /* 32 above the h1 */
.hh-cat__title {
  font-family: var(--hh-font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 500; line-height: 1.04; letter-spacing: var(--hh-ls-display);
  margin: 0 0 var(--hh-s4);
}
.hh-cat__intro { max-width: 60ch; color: var(--hh-ink-600); margin: 0; }

/* --- collections ------------------------------------------ */
/* The subcategories a filter cannot reproduce. Everything derivable from an
   attribute lives in the rail instead, which is why strength and smoke time
   are absent here despite having category pages on the live site. */
.hh-cat__collections { padding-bottom: var(--hh-s6); }
/* One line at every width, scrolling sideways — some categories carry a lot
   of these. Two overrides on the rail track: the columns are sized by their
   own content rather than the rail's 240px card width, and snapping is off
   because chips are not slides and stopping mid-word helps nobody. */
.hh-collections {
  list-style: none; margin: 0; padding: 0;
  grid-auto-columns: max-content;
  scroll-snap-type: none;
  padding-bottom: 0;
}
.hh-cat__collections .hh-rail__progress { margin-top: var(--hh-s4); }
.hh-collections > li { scroll-snap-align: none; }
/* The track is focusable, so give it a ring — arrow keys scroll it once it
   has focus, which is the keyboard route to the same thing the buttons do. */
.hh-collections:focus-visible { outline: 2px solid var(--hh-gold-750); outline-offset: -2px; }

/* The chip itself. Restored after a block replacement above swallowed it —
   these rules sat between the track and the buttons in source order. */
.hh-collection {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--hh-s2);
  padding: 9px var(--hh-s4);
  border: 1px solid var(--hh-line);
  text-decoration: none; color: var(--hh-ink);
  font-size: var(--hh-t-sm);
  transition: border-color var(--hh-fast) var(--hh-ease),
              background var(--hh-fast) var(--hh-ease);
}
.hh-collection:hover { border-color: var(--hh-ink); background: var(--hh-surface-3); }
.hh-collection .hh-icon { color: var(--hh-ink-500); }
.hh-collection:hover .hh-icon { color: var(--hh-ink); }

/* --- the scroll buttons ------------------------------------
   A pair at the right-hand end, which is where every other rail on the site
   puts them. Splitting them to opposite ends read well until the left one
   went away at rest: hiding it kept its 52px of reserved space, so the first
   chip started 52px in from the gutter while the heading above started on
   it. Dropping the space instead would drag the whole row sideways the first
   time you scrolled.

   Together on the right, neither problem exists. The list starts flush on
   the gutter and stays there, and an unneeded button can leave the flow
   entirely without moving anything.

   The height is not a number. The row stretches and the track's own height —
   one chip — defines it, so the buttons match the chips exactly whatever the
   chip padding becomes later.

   Pointer-gated: a touch device swipes and does not want two controls eating
   the row's width. `is-static` already removes them when there is nothing to
   scroll, and the rail's JS disables each at its end. */
.hh-rail__row { display: flex; align-items: stretch; gap: var(--hh-card-gap); }
.hh-rail__row .hh-rail__track { flex: 1 1 auto; min-width: 0; }
.hh-rail--edge .hh-rail__nav { display: none; flex: 0 0 auto; align-items: stretch; }

@media (hover: hover) and (pointer: fine) {
  .hh-rail--edge .hh-rail__nav { display: flex; }
  .hh-rail--edge .hh-railbtn {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px; height: auto;
    border-radius: 0;
    /* No background declared. `background: #fff` here was (0,2,0), exactly
       the same specificity as `.hh-railbtn:hover`, and this file loads after
       components.css — so it won, the hover background never arrived, and
       the hover's `color: #fff` painted white text on white. */
  }

  /* Hovers like the chips it sits beside, not like the round rail buttons
     elsewhere on the site. It is part of this row, so it takes this row's
     behaviour. */
  .hh-rail--edge .hh-railbtn:hover:not([disabled]) {
    background: var(--hh-surface-3);
    border-color: var(--hh-ink);
    color: var(--hh-ink);
  }

  /* Nothing that way, no box at all. `visibility` was the right answer while
     the buttons sat at opposite ends — hiding the left one there had to keep
     its space or the track's left edge moved and every chip went with it.
     Side by side on the right, only the track's WIDTH changes: its left edge
     stays on the gutter and `scrollLeft` is untouched, so no chip moves and
     the row simply shows a little more of itself. Reserving the space now
     would just leave a hole beside the button that remains. */
  .hh-rail--edge .hh-railbtn[disabled] { display: none; }
}

/* --- the two columns -------------------------------------- */
.hh-cat__inner {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(var(--hh-s6), 3vw, var(--hh-s8));
  align-items: start;
  padding-bottom: var(--hh-s9);
}

/* --- filter rail ------------------------------------------ */
.hh-cat__rail { position: sticky; top: var(--hh-s5); }
.hh-cat__railhead,
.hh-cat__railfoot { display: none; }

.hh-facet { border-bottom: 1px solid var(--hh-line); }
.hh-facet:first-of-type { border-top: 1px solid var(--hh-line); }
.hh-facet > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hh-s3); padding: var(--hh-s4) 0;
  cursor: pointer; list-style: none;
  font-weight: 500; font-size: var(--hh-t-sm);
}
.hh-facet > summary::-webkit-details-marker { display: none; }
.hh-facet > summary:focus-visible { outline: 2px solid var(--hh-gold-750); outline-offset: 2px; }
.hh-facet[open] > summary .hh-icon { transform: rotate(180deg); }
.hh-facet .hh-icon { transition: transform var(--hh-fast) var(--hh-ease); }
.hh-facet__body { padding-bottom: var(--hh-s4); }
.hh-facet__list { list-style: none; margin: 0; padding: 0; }

.hh-facet__opt {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center; gap: var(--hh-s3);
  padding: 5px 0; cursor: pointer;
  font-size: var(--hh-t-sm);
}
.hh-facet__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.hh-facet__box {
  width: 18px; height: 18px;
  border: 1px solid var(--hh-line-2, #cfcdc7);
  display: grid; place-items: center;
  background: #fff;
}
.hh-facet__box .hh-icon { width: 12px; height: 12px; color: #fff; opacity: 0; }
.hh-facet__opt input:checked + .hh-facet__box {
  background: var(--hh-ink); border-color: var(--hh-ink);
}
.hh-facet__opt input:checked + .hh-facet__box .hh-icon { opacity: 1; }
/* The input is invisible, so focus has to be drawn on the box that stands
   in for it — the same problem the product page's format cards have. */
.hh-facet__opt input:focus-visible + .hh-facet__box {
  outline: 2px solid var(--hh-gold-750); outline-offset: 2px;
}
.hh-facet__name { color: var(--hh-ink-700); }
.hh-facet__count {
  color: var(--hh-ink-500); font-size: var(--hh-t-xs);
  font-variant-numeric: tabular-nums;
}
.hh-facet__opt:hover .hh-facet__name { color: var(--hh-ink); }

.hh-facet__search {
  width: 100%; padding: 8px var(--hh-s3); margin-bottom: var(--hh-s3);
  border: 1px solid var(--hh-line); background: #fff;
  font: inherit; font-size: var(--hh-t-sm);
}
.hh-facet__more {
  font-size: var(--hh-t-xxs); color: var(--hh-ink-500);
  margin: var(--hh-s3) 0 0;
}

/* --- toolbar ---------------------------------------------- */
.hh-cat__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hh-s4); flex-wrap: wrap;
  padding-bottom: var(--hh-s4); border-bottom: 1px solid var(--hh-line);
  margin-bottom: var(--hh-s5);
}
.hh-cat__count { margin: 0; font-size: var(--hh-t-sm); color: var(--hh-ink-600); }
.hh-cat__count [data-count] { color: var(--hh-ink); font-weight: 500;
                              font-variant-numeric: tabular-nums; }
.hh-cat__of { color: var(--hh-ink-500); }
.hh-cat__tools { display: flex; align-items: center; gap: var(--hh-card-gap); }
.hh-cat__sort {
  font: inherit; font-size: var(--hh-t-sm);
  padding: 9px var(--hh-s4); border: 1px solid var(--hh-line);
  background: #fff; color: var(--hh-ink); cursor: pointer;
}
.hh-cat__filterbtn { display: none; align-items: center; gap: var(--hh-s2); }
.hh-cat__badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--hh-ink); color: #fff; border-radius: var(--hh-r-full);
  font-size: 10px; line-height: 18px; text-align: center;
}

/* --- active filter chips ---------------------------------- */
.hh-cat__chips {
  list-style: none; margin: 0 0 var(--hh-s5); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--hh-s2);
}
.hh-chip {
  display: inline-flex; align-items: center; gap: var(--hh-s2);
  padding: 5px var(--hh-s3); border: 1px solid var(--hh-ink);
  font-size: var(--hh-t-xs); background: none; cursor: pointer;
  color: var(--hh-ink); font-family: inherit;
}
.hh-chip .hh-icon { width: 11px; height: 11px; }
/* In the theme a chip is a link to the URL without that filter. */
a.hh-chip { text-decoration: none; }
.hh-chip:hover { background: var(--hh-ink); color: #fff; }
.hh-chip--clear { border-style: dashed; border-color: var(--hh-ink-400); }

/* --- grid ------------------------------------------------- */
.hh-cat__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--hh-card-gap) var(--hh-card-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hh-cat__grid > .hh-card { height: 100%; }

/* --- load more + pager ------------------------------------ */
.hh-cat__more {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--hh-s4); padding-top: var(--hh-s8);
}
.hh-cat__progress { margin: 0; font-size: var(--hh-t-sm); color: var(--hh-ink-600); }
.hh-cat__progress b { color: var(--hh-ink); font-weight: 500;
                      font-variant-numeric: tabular-nums; }
.hh-pager {
  display: flex; align-items: center; gap: var(--hh-s3);
  font-size: var(--hh-t-sm); font-variant-numeric: tabular-nums;
}
.hh-pager a { color: var(--hh-ink-600); text-decoration: none; }
.hh-pager a:hover { color: var(--hh-ink); text-decoration: underline; }
.hh-pager [aria-current] { color: var(--hh-ink); font-weight: 500; }
.hh-pager__gap { color: var(--hh-ink-400); }

/* --- the prototype note ----------------------------------- */
.hh-cat__finding {
  border-top: 1px solid var(--hh-line);
  padding-block: var(--hh-s7) var(--hh-s9);
}
.hh-cat__finding .hh-label { display: block; margin-bottom: var(--hh-s3);
                             color: var(--hh-gold-750); }
.hh-cat__finding p { max-width: 68ch; color: var(--hh-ink-600); }
.hh-cat__finding b { color: var(--hh-ink); font-weight: 500; }

.hh-cat__scrim { display: none; }

/* ---------------------------------------------------------------
   Below 1100 the rail becomes a sheet.

   250px of rail against a four-column grid is fine at 1440; at 1100 the grid
   is down to three columns and the rail is taking a fifth of the width to
   show eight checkboxes. The sheet is the same markup — only its position
   changes — so nothing is duplicated and nothing can drift.
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hh-cat__inner { grid-template-columns: minmax(0, 1fr); }
  .hh-cat__filterbtn { display: inline-flex; }

  .hh-cat__rail {
    position: fixed; inset: 0 auto 0 0;
    /* 100, not 70. The site already has a stacking order and it is written
       down in site.css: the sticky chrome sits at 80 precisely so the drawer
       (100) and its scrim (90) cover it. This sheet is the same kind of
       object as that drawer — a full-height off-canvas panel that owns the
       screen while it is open — so it takes the same tier rather than a new
       number below the header. At 70 the header painted straight over it. */
    z-index: 100;
    width: min(360px, 88vw);
    background: #fff;
    border-right: 1px solid var(--hh-line);
    padding: 0 var(--hh-s5);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    /* Visibility is stepped, not transitioned, and the step is delayed only
       on the way OUT. Transitioning it made opening unfocusable: for the
       length of the transition the element is not yet focusable, so the
       focus() that should move the keyboard into the sheet silently did
       nothing and left it on the button behind. Delaying the step to the end
       of the close keeps the slide-out visible; opening flips it at once. */
    transition: transform var(--hh-mid, .3s) var(--hh-ease),
                visibility 0s linear var(--hh-mid, .3s);
    display: flex; flex-direction: column;
  }
  .hh-cat__rail.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--hh-mid, .3s) var(--hh-ease), visibility 0s;
  }

  .hh-cat__railhead {
    display: flex; align-items: center; justify-content: space-between;
    padding-block: var(--hh-s5);
    position: sticky; top: 0; background: #fff; z-index: 1;
  }
  .hh-cat__railhead .hh-h4 { margin: 0; }
  .hh-cat__railclose {
    width: 44px; height: 44px; margin-right: -10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; color: var(--hh-ink);
  }
  .hh-cat__railfoot {
    display: block; position: sticky; bottom: 0;
    background: #fff; padding-block: var(--hh-s4);
    border-top: 1px solid var(--hh-line); margin-top: auto;
  }

  .hh-cat__scrim {
    display: block; position: fixed; inset: 0; z-index: 90;   /* the drawer scrim's tier */
    background: rgba(16,16,15,.5);
    opacity: 0; transition: opacity var(--hh-mid, .3s) var(--hh-ease);
  }
  .hh-cat__scrim.is-open { opacity: 1; }

  .hh-cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .hh-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* Full-bleed on a phone, the same technique the homepage rails use — the
     gutter is paid back as padding so the first chip still lines up, and
     items scroll off the screen edge rather than a container edge. On
     desktop the row stays inside the container so it aligns with the grid
     below it. */
  .hh-cat__collections .hh-rail {
    margin-inline: calc(var(--hh-gutter) * -1);
  }
  .hh-collections {
    padding-inline: var(--hh-gutter);
    scroll-padding-inline: var(--hh-gutter);
  }
  .hh-cat__collections .hh-rail__progress { margin-inline: var(--hh-gutter); }
  /* Filter leads on a phone: it is the primary act on a page of 2,240
     products and the rail it opens is off screen. Only the ORDER changes —
     `flex: 1 1 100%` on the tools was a forced wrap that pushed sort onto
     its own line at every width, including the phones where all three had
     been fitting comfortably. Let it wrap when it must and not before. */
  .hh-cat__toolbar { gap: var(--hh-s3) var(--hh-card-gap); }
  .hh-cat__count { order: 2; }
  /* margin-left:auto keeps sort hard right whether it shares the line or
     wraps below. Without it a wrapped sort falls to the start of its own
     line, because space-between has nothing to space it against. */
  .hh-cat__tools { order: 3; margin-left: auto; justify-content: flex-end; }
}

/* ---------------------------------------------------------------
   LONG-FORM CATEGORY COPY

   Below the grid, because a category page's job is to show products. The
   supplied document is four different things and they are laid out as four
   different things — see category.longform() for the reasoning.
   --------------------------------------------------------------- */
.hh-cat__copysample {
  display: block; color: var(--hh-gold-750);
  padding-bottom: var(--hh-s5); margin-bottom: var(--hh-s6);
  border-bottom: 1px solid var(--hh-line);
}

.hh-copy__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(var(--hh-s6), 4vw, var(--hh-s8));
  align-items: start;
}
.hh-copy__body > p { max-width: 68ch; color: var(--hh-ink-700); }
.hh-copy__body .hh-h4 { margin-top: var(--hh-s6); }

.hh-copy__brands {
  display: grid; gap: var(--hh-s5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--hh-s6);
}
.hh-copy__brand h3 { margin: 0 0 var(--hh-s3); }
.hh-copy__brand p { margin: 0; font-size: var(--hh-t-sm); color: var(--hh-ink-600); }

.hh-copy__also {
  list-style: none; margin: var(--hh-s3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--hh-s2);
}
.hh-copy__also li {
  border: 1px solid var(--hh-line); padding: 5px var(--hh-s3);
  font-size: var(--hh-t-xs); color: var(--hh-ink-700);
}

.hh-copy__aside {
  background: #fff; border: 1px solid var(--hh-line); padding: var(--hh-s5);
}
.hh-copy__aside .hh-h4 { margin: 0 0 var(--hh-s3); }
.hh-copy__delivery { list-style: none; margin: 0; padding: 0; }
.hh-copy__delivery li {
  font-size: var(--hh-t-sm); color: var(--hh-ink-600);
  padding-block: var(--hh-s2);
}
.hh-copy__delivery li + li { border-top: 1px solid var(--hh-line); }

/* The buying guides. These are the reason to keep the document at all — a
   customer stuck between a guillotine and a V-cut is stuck while looking at
   this page, so the answer belongs on it and belongs readable. */
.hh-guide { margin-top: var(--hh-s8); }
.hh-guide > .hh-h4 { margin: 0 0 var(--hh-s5); }
.hh-guide__cols {
  display: grid; gap: var(--hh-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hh-guide__col { background: #fff; border: 1px solid var(--hh-line); padding: var(--hh-s5); }
.hh-guide__col h4 {
  margin: 0 0 var(--hh-s4); padding-bottom: var(--hh-s3);
  border-bottom: 1px solid var(--hh-line);
  font-size: var(--hh-t-base); font-weight: 500;
}
.hh-guide__col ul { list-style: none; margin: 0; padding: 0; }
.hh-guide__col li {
  position: relative; padding-left: var(--hh-s5); margin-bottom: var(--hh-s3);
  font-size: var(--hh-t-sm); color: var(--hh-ink-600);
}
.hh-guide__col li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 1px; background: var(--hh-gold-500);
}

@media (max-width: 900px) {
  .hh-copy__grid { grid-template-columns: minmax(0, 1fr); }
}