/* =============================================================================
   52-shop-toolbar.css — the shop's control layer: toolbar, switch, pagination
   -----------------------------------------------------------------------------
   The catalogue's chrome was the last stock thing on the page: a strip of
   admin-UI parts (a well-shaped select, two floating circles, a row of ringed
   page numbers) that answered to nothing above them. This file rebuilds that
   layer as a LEDGER, in the hero's own vocabulary and nothing else:

     ONE LINE.     A single hairline is ruled across the whole shop body at
                   the container's left edge — x = the hero's axis — and the
                   sidebar's index and the toolbar both hang beneath it. The
                   56px gutter that used to break that line in two is filled.

     ONE LOCKUP.   Every label in the layer is the journey kicker: a 34x1px
                   rule, then 0.7rem / 0.17em uppercase. The result count now
                   opens with the same lockup the page banner opens with, on
                   the content column's axis, so the toolbar reads as the next
                   line of the page header rather than as a widget.

     ONE FIGURE.   Numbers — the range, the total, the page — are Fraunces 300
                   with tabular figures. Nowhere else in this layer is type
                   allowed to be anything but 0.7rem HUD.

     ONE CORNER.   Round, and only round. The sort control is the hero's
                   `ELEVATION · 1,400 M` capsule; the view switch is the same
                   capsule cut in two; the pagination steps are its circles.
                   Everything else is type sitting on a rule with no box at
                   all. The four unrelated radii are gone because three of the
                   four boxes are gone.

     ONE ACCENT.   None. The whole layer is paper at four alphas, and one
                   value above them — a cream hairline at 78% — which is
                   reserved for a single meaning: the one you are standing
                   ON. The current page wears it, the current view wears it,
                   and nothing else in the layer is allowed to.

   §7 turns the list toggle into a real second reading of the catalogue — an
   indexed ruled ledger with the full product name, the price and a standing
   call to action — instead of a one-column version of the grid.

   Loads last, so it carries its own media queries.
   ========================================================================== */

:root {
  /* Paper at four alphas. Every value below is one of these. */
  --tb-rule:     color-mix(in srgb, var(--paper) 10%, transparent);
  --tb-hair:     color-mix(in srgb, var(--paper) 17%, transparent);
  --tb-hair-lit: color-mix(in srgb, var(--paper) 30%, transparent);
  --tb-wash:     color-mix(in srgb, var(--paper) 5%,  transparent);
  --tb-wash-2:   color-mix(in srgb, var(--paper) 9%,  transparent);
  --tb-wash-3:   color-mix(in srgb, var(--paper) 13%, transparent);

  /* THE LIVE EDGE. One value, shared by the two things on this page that can
     be "the one you are on": the current page's circle and the current
     view's half of the switch. */
  --tb-live:     color-mix(in srgb, var(--paper) 78%, transparent);

  --tb-hud:      color-mix(in srgb, var(--paper) 46%, transparent);
  --tb-hud-lit:  color-mix(in srgb, var(--paper) 72%, transparent);
  --tb-ink:      color-mix(in srgb, var(--paper) 92%, transparent);

  /* The kicker, to the pixel: 34x1px rule, 16px of air, 11.2px at 0.17em. */
  --tb-kick-w:    34px;
  --tb-kick-gap:  16px;
  --tb-kick-size: 0.7rem;
  --tb-kick-track: 0.17em;

  /* The row. One height for the sort capsule and the view switch. */
  --tb-row: 40px;

  /* The shop's own gutter, mirrored from 25-controls so the rule can cross
     it. Kept as a token so one edit moves both halves of the line. */
  --tb-gutter: clamp(40px, 4vw, 56px);

  /* From the content column back to the page's own left margin: the 236px
     sidebar track plus that gutter. Every rule in this layer that has to
     reach l=101 reaches it with this one number. */
  --tb-rail-left: calc(236px + var(--tb-gutter));

  /* How far through the catalogue this page is, 0 at the first page and 1 at
     the last. The template writes it; 0 is the honest default, because a
     document with no pagination has not moved. */
  --pag-progress: 0;

  --tb-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --tb-move: color 0.35s var(--tb-ease), background-color 0.35s var(--tb-ease),
             border-color 0.35s var(--tb-ease), opacity 0.35s var(--tb-ease),
             transform 0.4s var(--tb-ease);
}


/* =============================================================================
   1. THE LINE — one rule across the whole shop body
   -----------------------------------------------------------------------------
   The sidebar's first widget and the toolbar are already ruled on the same
   y. What kept them from reading as ONE line was the 56px column gap between
   them. Filling it puts the toolbar's rule on the container's left edge —
   the same axis as the page banner's kicker and the hero's headline — which
   is the alignment the whole control layer was missing.
   ========================================================================== */

.shop-page .shop-toolbar,
.search-results-page .shop-toolbar {
  position: relative;
}

.shop-page .shop-toolbar::before,
.search-results-page .shop-toolbar::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 100%;
  width: calc(var(--tb-gutter) + 1px);
  height: 1px;
  background: var(--tb-rule);
  pointer-events: none;
}


/* =============================================================================
   2. THE TOOLBAR — a header band, not a strip
   ========================================================================== */

.shop-page .shop-toolbar,
.blog-page .shop-toolbar,
.search-results-page .shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px clamp(24px, 3vw, 48px);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--tb-rule);
  border-radius: 0;
  padding: 15px 0 0;
  min-height: 0;
}
/* If the line ever runs out of room, the controls drop below the count and
   stay hard against the right edge rather than being clipped by the column. */
.shop-page .shop-toolbar-right,
.blog-page .shop-toolbar-right,
.search-results-page .shop-toolbar-right { margin-left: auto; }

/* --- The count, set as a ledger line ------------------------------------
   `Showing 1–12 of 581 results` is one inline flow, so the kicker rule is
   drawn by the element itself and the figures are lifted out of the HUD by
   the <strong>s the template already writes. */
.shop-page .shop-results,
.blog-page .shop-results,
.search-results-page .shop-results {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--tb-kick-size);
  font-weight: 500;
  letter-spacing: var(--tb-kick-track);
  text-transform: uppercase;
  color: var(--tb-hud);
  white-space: nowrap;
  /* ONE BASELINE. The count and the sort capsule are the two halves of a
     single line, so the count is given the row's own strut: an 11.2px label
     leaded to 40px lands its baseline at the identical y as the same label
     centred inside the 40px capsule beside it. Nothing is nudged, and the
     Fraunces figures below are caged so they cannot lift the line box off
     that strut and take the baseline with it. */
  height: var(--tb-row);
  line-height: var(--tb-row);
}

.shop-page .shop-results::before,
.blog-page .shop-results::before,
.search-results-page .shop-results::before {
  content: "";
  display: inline-block;
  width: var(--tb-kick-w);
  height: 1px;
  margin-right: var(--tb-kick-gap);
  vertical-align: 0.34em;
  background: var(--tb-hair-lit);
}

.shop-page .shop-results strong,
.blog-page .shop-results strong,
.search-results-page .shop-results strong {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--tb-ink);
  font-variant-numeric: tabular-nums lining-nums;
  padding: 0 0.05em;
  /* A 17.6px inline box inside an 11.2px line, sitting on the line's
     baseline and contributing no leading of its own. */
  line-height: 1;
  vertical-align: baseline;
}

/* --- The right-hand cluster --------------------------------------------- */
.shop-page .shop-toolbar-right,
.blog-page .shop-toolbar-right,
.search-results-page .shop-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

/* Every string in the band is leaded to the row, never to itself. Four HUD
   labels, one 40px strut, one box top, one font: the baselines cannot drift
   apart because nothing is positioning them independently. */
.shop-page .shop-toolbar-label,
.blog-page .shop-toolbar-label,
.search-results-page .shop-toolbar-label {
  font-family: var(--font-primary);
  font-size: var(--tb-kick-size);
  font-weight: 500;
  line-height: var(--tb-row);
  letter-spacing: var(--tb-kick-track);
  text-transform: uppercase;
  color: var(--tb-hud);
  margin: 0;
}


/* =============================================================================
   3. THE SORT CONTROL — the hero's capsule, doing a job
   -----------------------------------------------------------------------------
   It was a dark well with a 2px corner: a form input, sitting in a band that
   contains no form. It is now the same hairline capsule the hero draws
   `ELEVATION · 1,400 M` in, with the value set as HUD text, so the one
   control on the band belongs to the photograph above it.
   ========================================================================== */

.shop-page .shop-sort-custom,
.blog-page .shop-sort-custom,
.search-results-page .shop-sort-custom { position: relative; }

.shop-page .shop-sort-trigger,
.blog-page .shop-sort-trigger,
.search-results-page .shop-sort-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--tb-row);
  height: var(--tb-row);
  padding: 0 16px 0 20px;
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--tb-hair);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: var(--tb-kick-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tb-hud-lit);
  cursor: pointer;
  transition: var(--tb-move);
}

.shop-page .shop-sort-trigger:hover,
.blog-page .shop-sort-trigger:hover,
.search-results-page .shop-sort-trigger:hover {
  background-color: var(--tb-wash-2);
  border-color: var(--tb-hair-lit);
  color: var(--tb-ink);
}

.shop-page .shop-sort-custom.open .shop-sort-trigger,
.blog-page .shop-sort-custom.open .shop-sort-trigger,
.search-results-page .shop-sort-custom.open .shop-sort-trigger {
  background-color: var(--tb-wash-2);
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
  color: var(--paper);
  box-shadow: none;
}

.shop-page .shop-sort-trigger .shop-sort-label,
.blog-page .shop-sort-trigger .shop-sort-label,
.search-results-page .shop-sort-trigger .shop-sort-label {
  display: block;
  line-height: var(--tb-row);
}

.shop-page .shop-sort-trigger svg,
.blog-page .shop-sort-trigger svg,
.search-results-page .shop-sort-trigger svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  opacity: 0.62;
  transition: transform 0.4s var(--tb-ease), opacity 0.35s var(--tb-ease);
}
.shop-page .shop-sort-trigger:hover svg,
.shop-page .shop-sort-custom.open .shop-sort-trigger svg { opacity: 1; }
.shop-page .shop-sort-custom.open .shop-sort-trigger svg,
.blog-page .shop-sort-custom.open .shop-sort-trigger svg,
.search-results-page .shop-sort-custom.open .shop-sort-trigger svg {
  transform: rotate(180deg);
}

/* --- The list it opens ---------------------------------------------------
   A floating surface, so it is the one thing here allowed a cast shadow, and
   the one square corner: a panel is not a control. */
.shop-page .shop-sort-dropdown,
.blog-page .shop-sort-dropdown,
.search-results-page .shop-sort-dropdown {
  top: calc(100% + 10px);
  right: 0;
  min-width: 246px;
  padding: 8px 0;
  background-color: color-mix(in srgb, var(--night-2) 96%, var(--paper));
  border: 1px solid var(--tb-hair);
  border-radius: 3px;
  box-shadow: 0 34px 70px -28px rgb(0 0 0 / 1);
  overflow: hidden;
}

.shop-page .shop-sort-option,
.blog-page .shop-sort-option,
.search-results-page .shop-sort-option {
  position: relative;
  padding: 12px 22px 12px 34px;
  font-family: var(--font-primary);
  font-size: var(--tb-kick-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tb-hud-lit);
  background: transparent;
  transition: var(--tb-move);
}

/* The marker rail: a 12px hairline that lights and grows on the live row. */
.shop-page .shop-sort-option::before,
.blog-page .shop-sort-option::before,
.search-results-page .shop-sort-option::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--tb-hair);
  transform: scaleX(0.45);
  transform-origin: left center;
  transition: transform 0.35s var(--tb-ease), background-color 0.35s var(--tb-ease);
}

.shop-page .shop-sort-option:hover,
.blog-page .shop-sort-option:hover,
.search-results-page .shop-sort-option:hover {
  background: var(--tb-wash);
  color: var(--tb-ink);
}
.shop-page .shop-sort-option:hover::before,
.blog-page .shop-sort-option:hover::before,
.search-results-page .shop-sort-option:hover::before {
  transform: scaleX(1);
  background: var(--tb-hair-lit);
}

.shop-page .shop-sort-option.active,
.blog-page .shop-sort-option.active,
.search-results-page .shop-sort-option.active {
  color: var(--paper);
  font-weight: 500;
  background: transparent;
}
.shop-page .shop-sort-option.active::before,
.blog-page .shop-sort-option.active::before,
.search-results-page .shop-sort-option.active::before {
  transform: scaleX(1);
  background: var(--paper);
}


/* =============================================================================
   4. THE VIEW SWITCH — one capsule, cut in two
   -----------------------------------------------------------------------------
   Two free-floating 32px circles read as two unrelated buttons; a switch has
   to show that the two states are the same choice. Same height and same
   corner as the sort capsule beside it, and the live half marked the way the
   live page is marked at the foot of the grid: one cream hairline at 78%,
   the layer's single reserved value.
   ========================================================================== */

.shop-page .shop-view-toggle,
.blog-page .shop-view-toggle,
.search-results-page .shop-view-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  height: var(--tb-row);
  padding: 3px;
  border: 1px solid var(--tb-hair);
  border-radius: 999px;
  background: transparent;
}

.shop-page .shop-view-toggle .view-toggle-btn,
.blog-page .shop-view-toggle .view-toggle-btn,
.search-results-page .shop-view-toggle .view-toggle-btn {
  position: relative;
  width: 42px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--tb-hud);
  transform: none;
  transition: var(--tb-move);
}

.shop-page .shop-view-toggle .view-toggle-btn:hover,
.blog-page .shop-view-toggle .view-toggle-btn:hover,
.search-results-page .shop-view-toggle .view-toggle-btn:hover {
  background: transparent;
  border-color: transparent;
  color: var(--tb-ink);
  transform: none;
}

/* The live half was a 9% wash sitting inside a 17% hairline — a selected
   state DIMMER than the box it is selected in. The page you are standing on
   is marked with a cream hairline circle at the foot of this page; the view
   you are standing in is marked the same way, at the same weight, so the
   layer has one active language instead of two. */
.shop-page .shop-view-toggle .view-toggle-btn.active,
.blog-page .shop-view-toggle .view-toggle-btn.active,
.search-results-page .shop-view-toggle .view-toggle-btn.active {
  background: var(--tb-wash);
  border: 1px solid var(--tb-live);
  color: var(--paper);
  box-shadow: none;
  transform: none;
}
.shop-page .shop-view-toggle .view-toggle-btn.active:hover,
.blog-page .shop-view-toggle .view-toggle-btn.active:hover,
.search-results-page .shop-view-toggle .view-toggle-btn.active:hover {
  background: var(--tb-wash-3);
  border-color: var(--paper);
  color: var(--paper);
}
/* Four filled squares and three open lines do not weigh the same at the same
   px, so they are not set at the same px. */
.shop-page .shop-view-toggle .view-toggle-btn svg,
.blog-page .shop-view-toggle .view-toggle-btn svg,
.search-results-page .shop-view-toggle .view-toggle-btn svg {
  width: 14px;
  height: 14px;
}
.shop-page .shop-view-toggle .view-toggle-btn[data-view="grid"] svg,
.blog-page .shop-view-toggle .view-toggle-btn[data-view="grid"] svg,
.search-results-page .shop-view-toggle .view-toggle-btn[data-view="grid"] svg {
  width: 11px;
  height: 11px;
}


/* =============================================================================
   5. THE FILTER KEY — the drawer trigger, in the same voice
   -----------------------------------------------------------------------------
   Below 992px the sidebar becomes a drawer and this button becomes the only
   way into it. As a solid green slab it was the loudest thing on the page;
   as the same capsule as the sort control it reads as the band's third
   member, which is what it is.
   ========================================================================== */

.shop-page .shop-filter-btn,
.search-results-page .shop-filter-btn {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tb-row);
  height: var(--tb-row);
  padding: 0 20px;
  background: transparent;
  border: 1px solid var(--tb-hair);
  border-radius: 999px;
  color: var(--tb-hud-lit);
  font-family: var(--font-primary);
  font-size: var(--tb-kick-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  box-shadow: none;
  transition: var(--tb-move);
}
.shop-page .shop-filter-btn:hover,
.search-results-page .shop-filter-btn:hover {
  background: var(--tb-wash-2);
  border-color: var(--tb-hair-lit);
  color: var(--tb-ink);
  transform: none;
}
.shop-page .shop-filter-btn svg,
.search-results-page .shop-filter-btn svg { width: 13px; height: 13px; opacity: 0.7; }


/* =============================================================================
   6. PAGINATION — an index, then a rail
   -----------------------------------------------------------------------------
   Eight identical bordered boxes are a table of contents drawn as a keypad.
   The numbers lose their boxes entirely and become Fraunces figures on the
   ledger; the page you are standing on is the only one circled, and it is
   the only place cream is spent. The two steps keep hairline circles because
   they are the only true buttons in the row.

   The row then runs out to the right edge as the hero's chapter rail — a
   scale ticked at both ends, lit as far as you have come, with the marker
   standing on the page you are on — so the 500px of dead field that used to
   sit to the right of a left-aligned keypad is resolved by the one thing
   that had something left to say.
   ========================================================================== */

.shop-page .shop-pagination,
.search-results-page .shop-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding-top: 26px;
  border-top: 1px solid var(--tb-rule);
}

/* --- The foot of the ledger reaches the page's left margin ---------------
   The toolbar's rule is drawn from l=101 because the sidebar's first widget
   continues it across the gutter. The foot of the grid has no widget under
   it, so it reaches back for the margin itself: the box grows left by the
   sidebar track and the gutter and gives the same distance back as padding,
   which moves the RULE and nothing else — the numbers stay on l=449.

   It only reaches when the column beside it has ended. Three full rows of
   cards put the foot of the grid below the last widget in the sidebar; on a
   short last page — five products, a filtered result — the sidebar is the
   taller column and a rule drawn to l=101 would be struck through its
   copy, so the ledger keeps to its own column instead. A line that would
   cross something is not ruled. */
@media (min-width: 992px) {
  .shop-page .shop-main:has(.products-grid > .product-card:nth-child(9)) .shop-pagination {
    margin-left: calc(-1 * var(--tb-rail-left));
    padding-left: var(--tb-rail-left);
  }
}

/* The kicker rule, so the index opens the way every other block does. */
.shop-page .shop-pagination::before {
  content: "";
  flex: 0 0 auto;
  width: var(--tb-kick-w);
  height: 1px;
  margin-right: calc(var(--tb-kick-gap) + 4px);
  background: var(--tb-hair-lit);
}

/* --- The rail, which is a position and not an ornament -------------------
   It used to end on a dot welded to the right edge: on page 1 of 49 the one
   mark in the row that claims to say where you are said "the end". It is now
   the hero's chapter rail, read the same way — the marker starts at the
   ORIGIN and travels, the ground behind it lights as far as it has come, and
   the faint remainder ahead is the rest of the catalogue. `--pag-progress`
   is (current - 1) / (total - 1), written by the template; with no value the
   marker sits at the origin, which is where an unpaginated document is. */
.shop-page .shop-pagination::after {
  content: "";
  flex: 1 1 auto;
  min-width: 40px;
  height: 7px;
  margin-left: 30px;
  background-image:
    /* the marker: page N, sitting on the scale */
    radial-gradient(circle at center,
      var(--tb-hud-lit) 0 2.5px, transparent 2.6px),
    /* the ground already covered, origin -> marker */
    linear-gradient(90deg, var(--tb-hair-lit), var(--tb-hair-lit)),
    /* the two ends of the scale: page 1 and page 49 */
    linear-gradient(90deg, var(--tb-hair), var(--tb-hair)),
    linear-gradient(90deg, var(--tb-hair), var(--tb-hair)),
    /* the whole catalogue */
    linear-gradient(90deg, var(--tb-rule), var(--tb-rule));
  background-size:
    7px 7px,
    calc(var(--pag-progress, 0) * (100% - 7px) + 1px) 1px,
    1px 7px,
    1px 7px,
    100% 1px;
  /* The marker's percentage IS (100% - 7px) x progress, so the marker, the
     covered ground and the two end ticks are all struck off the same scale
     and land on the same centres at 0 and at 1. */
  background-position:
    calc(var(--pag-progress, 0) * 100%) 50%,
    3px 50%,
    3px 50%,
    calc(100% - 3px) 50%,
    0% 50%;
  background-repeat: no-repeat;
  transition: background-position 0.7s var(--tb-ease),
              background-size 0.7s var(--tb-ease);
}

.shop-page .shop-pagination .page-btn,
.search-results-page .shop-pagination .page-btn {
  position: relative;
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
  color: color-mix(in srgb, var(--paper) 52%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
  transform: none;
  transition: var(--tb-move);
}

/* Hover marks the number with a rule, not a fill. */
.shop-page .shop-pagination .page-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 1px;
  background: var(--tb-hair-lit);
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 0.3s var(--tb-ease), transform 0.35s var(--tb-ease);
}
.shop-page .shop-pagination .page-btn:hover,
.search-results-page .shop-pagination .page-btn:hover {
  background: transparent;
  border-color: transparent;
  color: var(--tb-ink);
  transform: none;
}
.shop-page .shop-pagination .page-btn:hover::after { opacity: 1; transform: scaleX(1); }

/* The page you are on: the one circle, and the one cream. */
.shop-page .shop-pagination .page-btn.active,
.search-results-page .shop-pagination .page-btn.active {
  min-width: 40px;
  background: transparent;
  border-color: var(--tb-live);
  color: var(--paper);
  box-shadow: none;
  transform: none;
}
.shop-page .shop-pagination .page-btn.active::after { display: none; }
.shop-page .shop-pagination .page-btn.active:hover,
.search-results-page .shop-pagination .page-btn.active:hover {
  background: var(--tb-wash);
  border-color: var(--paper);
  color: var(--paper);
}

/* The gap glyph is a mark of omission, not a control. */
.shop-page .shop-pagination .page-btn.disabled,
.shop-page .shop-pagination .page-btn.disabled:hover,
.search-results-page .shop-pagination .page-btn.disabled {
  min-width: 26px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--paper) 26%, transparent);
  cursor: default;
}
.shop-page .shop-pagination .page-btn.disabled::after { display: none; }

/* --- The two steps -------------------------------------------------------
   The template prints the previous chevron first and the next chevron last,
   and neither can ever be the live page, which is exactly what these two
   selectors say. If the row ever holds no chevron, nothing matches and the
   numbers are simply left alone. */
.shop-page .shop-pagination > .page-btn:first-child:not(.active),
.shop-page .shop-pagination > .page-btn:last-child:not(.active) {
  width: 40px;
  min-width: 40px;
  padding: 0;
  border-color: var(--tb-hair);
  background: var(--tb-wash);
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--tb-hud-lit);
}
.shop-page .shop-pagination > .page-btn:first-child:not(.active) { margin-right: 12px; }
.shop-page .shop-pagination > .page-btn:last-child:not(.active)  { margin-left: 12px; }
.shop-page .shop-pagination > .page-btn:first-child:not(.active)::after,
.shop-page .shop-pagination > .page-btn:last-child:not(.active)::after { display: none; }
.shop-page .shop-pagination > .page-btn:first-child:not(.active):hover,
.shop-page .shop-pagination > .page-btn:last-child:not(.active):hover {
  background: var(--tb-wash-2);
  border-color: var(--tb-hair-lit);
  color: var(--paper);
}


/* =============================================================================
   7. LIST VIEW — the catalogue read as a ledger
   -----------------------------------------------------------------------------
   The toggle used to produce a one-column grid: the same card, four times
   taller, with the same two-line clamp still cutting the same names in half.
   A list is a different READING of the same 581 objects, so it earns its own
   composition — and the one thing a grid cannot do is put the figures in a
   column you can run your eye down.

     · a quiet index down the left, the way every other repeating set on the
       site is numbered;
     · the plate small and portrait, keeping 50-product-card.css's 4:5 crop
       and its whole hover — the frame, the grade, the second frame;
     · the name off the clamp: in a 490px measure it simply fits;
     · and a right-hand ledger column — price over action, hard against the
       column's right edge — so twelve prices stack into one readable rail
       instead of twelve separate cards.

   Rows are ruled, never boxed, and they rule to exactly the same two x
   values as the toolbar above and the pagination below. `.products-list-view`
   is put on the grid by assets/js/main.js.
   ========================================================================== */

.shop-page .products-grid.products-list-view,
.search-results-page .products-grid.products-list-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: tb-row;
}

.shop-page .products-grid.products-list-view .product-card,
.search-results-page .products-grid.products-list-view .product-card {
  counter-increment: tb-row;
  display: grid;
  grid-template-columns: 46px clamp(92px, 8vw, 114px) minmax(0, 1fr);
  column-gap: clamp(20px, 2.6vw, 34px);
  align-items: center;
  height: auto;
  padding: 19px 0;
  border-top: 1px solid var(--tb-rule);
  background: transparent;
  transition: background-color 0.4s var(--tb-ease), border-color 0.4s var(--tb-ease);
}
.shop-page .products-grid.products-list-view .product-card:hover,
.shop-page .products-grid.products-list-view .product-card:focus-within {
  background: color-mix(in srgb, var(--paper) 3%, transparent);
  border-top-color: var(--tb-hair);
}
/* The row below closes the bracket, so a live row is ruled on both sides. */
.shop-page .products-grid.products-list-view .product-card:hover + .product-card,
.shop-page .products-grid.products-list-view .product-card:focus-within + .product-card {
  border-top-color: var(--tb-hair);
}

/* --- The index ----------------------------------------------------------- */
.shop-page .products-grid.products-list-view .product-card::before,
.search-results-page .products-grid.products-list-view .product-card::before {
  content: counter(tb-row, decimal-leading-zero);
  grid-column: 1;
  align-self: start;
  padding-top: 2px;
  font-family: var(--font-primary);
  font-size: var(--tb-kick-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--paper) 32%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
  transition: color 0.4s var(--tb-ease);
}
.shop-page .products-grid.products-list-view .product-card:hover::before {
  color: var(--tb-hud-lit);
}

/* --- The plate, unchanged but small -------------------------------------- */
.shop-page .products-grid.products-list-view .product-card-image,
.search-results-page .products-grid.products-list-view .product-card-image {
  grid-column: 2;
  width: 100%;
}
/* A 110px plate has no room for a two-word overlay; the name is one column
   away and the whole row is the target. */
.shop-page .products-grid.products-list-view .pc-hud,
.search-results-page .products-grid.products-list-view .pc-hud { display: none; }
.shop-page .products-grid.products-list-view .product-card-badges { font-size: 0.92em; }

/* --- The body becomes two columns: the name, and the ledger -------------- */
.shop-page .products-grid.products-list-view .product-card-body,
.search-results-page .products-grid.products-list-view .product-card-body {
  grid-column: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(178px, auto);
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 3.4vw, 56px);
  row-gap: 7px;
  align-items: center;
  flex: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.shop-page .products-grid.products-list-view .product-card-category {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.shop-page .products-grid.products-list-view .product-card-title,
.search-results-page .products-grid.products-list-view .product-card-title {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: block;
  -webkit-line-clamp: none;
  -webkit-box-orient: horizontal;
  overflow: visible;
  min-height: 0;
  max-width: 40ch;
  font-size: clamp(1.06rem, 1.12vw, 1.28rem);
  text-wrap: pretty;
}
/* Empty in this catalogue; it must not open a row of its own. */
.shop-page .products-grid.products-list-view .product-card-rating { display: none; }

/* The ledger closes the row on one line — figure, then action — so twelve
   prices right-align into a rail you can read straight down the page. */
.shop-page .products-grid.products-list-view .pc-ledger,
.search-results-page .products-grid.products-list-view .pc-ledger {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  border-top: 0;
}
.shop-page .products-grid.products-list-view .product-card-price,
.search-results-page .products-grid.products-list-view .product-card-price {
  justify-content: flex-end;
  width: 100%;
  overflow: visible;
  font-variant-numeric: tabular-nums lining-nums;
}
.shop-page .products-grid.products-list-view .product-card-price .price-current {
  font-size: 1.02rem;
}

/* --- Twelve rows, twelve rules, no boxes --------------------------------- */
.shop-page .products-grid.products-list-view + .shop-pagination {
  border-top-color: var(--tb-rule);
}


/* =============================================================================
   8. NARROW
   ========================================================================== */

/* Between the sidebar's own breakpoint and roughly a laptop, the band is
   ~80px short of holding all four parts on one line. The first thing to go
   is the word SORT BY: the capsule beside it already reads as a sort. */
@media (max-width: 1200px) {
  .shop-page .shop-toolbar-label,
  .blog-page .shop-toolbar-label,
  .search-results-page .shop-toolbar-label { display: none; }

  .shop-page .shop-toolbar-right,
  .blog-page .shop-toolbar-right,
  .search-results-page .shop-toolbar-right { gap: 12px; }

  .shop-page .shop-sort-trigger,
  .blog-page .shop-sort-trigger,
  .search-results-page .shop-sort-trigger {
    padding: 0 14px 0 17px;
    gap: 11px;
    letter-spacing: 0.11em;
  }
  .shop-page .shop-view-toggle .view-toggle-btn,
  .blog-page .shop-view-toggle .view-toggle-btn,
  .search-results-page .shop-view-toggle .view-toggle-btn { width: 38px; }
}

/* The index is the first thing to go: it is an ornament, and the measure of
   the name is not. */
@media (max-width: 1080px) {
  .shop-page .products-grid.products-list-view .product-card {
    grid-template-columns: 34px clamp(92px, 10vw, 110px) minmax(0, 1fr);
    column-gap: 22px;
  }
  .shop-page .products-grid.products-list-view .product-card-body {
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
    column-gap: 28px;
  }
}

/* The sidebar column is gone below 992px, so neither rule has anything to
   reach back across: the whole column already starts on the page's margin. */
@media (max-width: 991px) {
  .shop-page .shop-toolbar::before,
  .search-results-page .shop-toolbar::before { display: none; }
}

/* Under 900px the ledger cannot hold a second column: the price drops under
   the name and the action returns to the end of that line, which is the
   card's own reading order anyway. */
@media (max-width: 900px) {
  .shop-page .products-grid.products-list-view .product-card {
    grid-template-columns: clamp(84px, 22vw, 108px) minmax(0, 1fr);
    column-gap: 20px;
    padding: 18px 0;
  }
  .shop-page .products-grid.products-list-view .product-card::before {
    display: none;
  }
  .shop-page .products-grid.products-list-view .product-card-image {
    grid-column: 1;
  }
  .shop-page .products-grid.products-list-view .product-card-body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 9px;
  }
  /* The two-column body above parks these with grid alignments; in a flex
     column `align-self: end` means the RIGHT edge, not the last row. */
  .shop-page .products-grid.products-list-view .product-card-category,
  .shop-page .products-grid.products-list-view .product-card-title {
    align-self: stretch;
  }
  .shop-page .products-grid.products-list-view .product-card-title {
    max-width: none;
    font-size: 1.02rem;
  }
  .shop-page .products-grid.products-list-view .pc-ledger {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding-top: 4px;
  }
  .shop-page .products-grid.products-list-view .product-card-price {
    justify-content: flex-start;
    width: auto;
  }
}

/* --- The band stacks -----------------------------------------------------
   Below 768px the count owns the first line and the two controls share the
   second, so neither has to shrink below its own measure. main.css hides the
   sort label and the view switch here; the switch has nothing to switch to
   on one column, and the count is the label the sort control needs. */
@media (max-width: 768px) {
  .shop-page .shop-toolbar,
  .blog-page .shop-toolbar,
  .search-results-page .shop-toolbar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18px 14px;
    padding: 15px 0 0;
    flex-wrap: nowrap;
  }
  .shop-page .shop-results,
  .blog-page .shop-results,
  .search-results-page .shop-results {
    grid-column: 1 / -1;
    grid-row: 1;
    order: 0;
    white-space: normal;
    /* Nothing is beside it on this line any more, so the row's strut is
       retired and the count is leaded for two lines instead. */
    height: auto;
    line-height: 1.95;
  }
  .shop-page .shop-filter-btn,
  .search-results-page .shop-filter-btn {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
  }
  .shop-page .shop-toolbar-right,
  .blog-page .shop-toolbar-right,
  .search-results-page .shop-toolbar-right {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-end;
    min-width: 0;
  }
  /* main.css retires the switch here — one column is not two readings — and
     §4 above out-specifies that rule, so it has to be said again. */
  .shop-page .shop-view-toggle,
  .blog-page .shop-view-toggle,
  .search-results-page .shop-view-toggle { display: none; }
  /* If the switch was left on a wider screen, the rows fall back to the
     grid's own one-column stack rather than a list nobody can reach. */
  .shop-page .products-grid.products-list-view .product-card {
    grid-template-columns: clamp(76px, 24vw, 104px) minmax(0, 1fr);
  }
  .shop-page .shop-sort-trigger,
  .blog-page .shop-sort-trigger,
  .search-results-page .shop-sort-trigger {
    font-size: var(--tb-kick-size);
    padding: 0 14px 0 18px;
    max-width: 100%;
  }
  .shop-page .shop-sort-trigger .shop-sort-label,
  .blog-page .shop-sort-trigger .shop-sort-label,
  .search-results-page .shop-sort-trigger .shop-sort-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shop-page .shop-sort-dropdown,
  .blog-page .shop-sort-dropdown,
  .search-results-page .shop-sort-dropdown {
    min-width: 0;
    width: max-content;
    max-width: 78vw;
  }
  .shop-page .shop-sort-option,
  .blog-page .shop-sort-option,
  .search-results-page .shop-sort-option {
    font-size: var(--tb-kick-size);
    padding: 14px 20px 14px 34px;
  }
}

@media (max-width: 560px) {
  :root { --tb-kick-w: 22px; --tb-kick-gap: 12px; }

  .shop-page .shop-results,
  .blog-page .shop-results,
  .search-results-page .shop-results { letter-spacing: 0.13em; }
  .shop-page .shop-results strong,
  .blog-page .shop-results strong,
  .search-results-page .shop-results strong { font-size: 1.02rem; }

  .shop-page .shop-pagination,
  .search-results-page .shop-pagination {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-top: 22px;
  }
  .shop-page .shop-pagination::before { display: none; }
  .shop-page .shop-pagination::after {
    flex-basis: 100%;
    margin: 10px 0 0;
    min-width: 0;
  }
  .shop-page .shop-pagination .page-btn,
  .search-results-page .shop-pagination .page-btn {
    min-width: 36px;
    height: 36px;
  }
  .shop-page .shop-pagination > .page-btn:first-child:not(.active),
  .shop-page .shop-pagination > .page-btn:last-child:not(.active) {
    width: 36px;
    min-width: 36px;
  }
  .shop-page .shop-pagination > .page-btn:first-child:not(.active) { margin-right: 8px; }
  .shop-page .shop-pagination > .page-btn:last-child:not(.active)  { margin-left: 8px; }

  .shop-page .products-grid.products-list-view .product-card {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px 0;
  }
  .shop-page .products-grid.products-list-view .product-card-title { font-size: 0.96rem; }
}

/* Motion is opt-out, everywhere. */
@media (prefers-reduced-motion: reduce) {
  .shop-page .shop-sort-trigger,
  .shop-page .shop-sort-trigger svg,
  .shop-page .shop-sort-option,
  .shop-page .shop-sort-option::before,
  .shop-page .view-toggle-btn,
  .shop-page .shop-filter-btn,
  .shop-page .shop-pagination .page-btn,
  .shop-page .shop-pagination .page-btn::after,
  .shop-page .shop-pagination::after,
  .shop-page .products-grid.products-list-view .product-card,
  .shop-page .products-grid.products-list-view .product-card::before {
    transition: none;
  }
}