/* =============================================================================
   54 — THE FILTER RAIL
   -----------------------------------------------------------------------------
   Owner: shop sidebar & filter rail.  Loads after main.css, woocommerce.css and
   every other part file, so it carries its own media queries.

   WHAT WAS WRONG
   The rail was a stack of widget panels — a fill, a 1px frame, a tinted title
   bar, a body — repeated twice, with the category counts set as pill chips and
   the popular products as a stock "tiny thumb + bold sans name + green price"
   widget.  Round one (25-controls) already pulled the fills and the frames off;
   what was left was still a *list of widgets*, not a designed column, and it
   quit 460px short of the product grid, leaving a 236 x 460 dead pocket in the
   bottom-left corner of the page.

   WHAT THIS IS NOW
   A ruled ledger, drawn on the page's own ground, with three ideas:

   ONE LINE ACROSS THE PAGE
     The rail's top rule already shared a line with the toolbar's at y=773.
     Now the first ledger row's hairline lands on the product card's top rule
     too, so a single hairline crosses all five columns of the page.  The 129px
     head band that buys that alignment is not padding — it is the negative
     space the hero spends above its kicker, and the rail is the only place in
     the control layer that gets to spend it.

   COUNTS ARE FIGURES, NOT BADGES
     Tabular lining figures, right-aligned in a fixed 2.6em well, muted.  511
     and 1 sit in the same column and the eye reads the magnitude down the page
     instead of decoding eleven identical pills.

   THE RAIL ENDS ON A PHOTOGRAPH
     The most popular product is promoted out of the thumb list into a full
     236px plate under a graded scrim, with its name in Fraunces over the
     image — the same device the page banner already uses top-right.  The other
     three stay as ledger lines.  Below them the rail closes on a stem and the
     34 x 1px mark it opened with, which is what finally resolves the corner.

   The markup is a shared template this file does not own and it carries inline
   styles on every row, thumb, name and price.  Inline styles beat a stylesheet
   at any specificity, so the handful of `!important`s below are not a shortcut
   past a cascade problem — they are the only route to those declarations.  Each
   one is marked INLINE.
   ========================================================================== */

.shop-page .shop-sidebar,
.shop-page .shop-sidebar-overlay,
.search-results-page .shop-sidebar {
  /* Paper at low alpha, the way the hero draws its own chrome over the
     photograph — never the cold grey --color-border. */
  --rail-rule:   color-mix(in srgb, var(--paper) 10%, transparent);
  --rail-rule-2: color-mix(in srgb, var(--paper) 17%, transparent);
  --rail-rule-3: color-mix(in srgb, var(--paper) 34%, transparent);
  --rail-ink:    color-mix(in srgb, var(--paper) 90%, transparent);
  --rail-ink-2:  color-mix(in srgb, var(--paper) 62%, transparent);
  --rail-ink-3:  color-mix(in srgb, var(--paper) 42%, transparent);
  --rail-accent: var(--color-accent);
  --rail-ease:   cubic-bezier(0.2, 0.75, 0.2, 1);

  /* The rhythm, declared once so the head band and the ledger cannot drift
     apart:  38 (kicker row) + 82 (air) = 120 = the distance from the rule the
     rail shares with the toolbar down to the product grid's first card rule.
     Change --rail-head alone if the card's own top padding ever moves. */
  --rail-kicker-h: 38px;
  --rail-head:     81px;
  --rail-row:      19px;   /* the ledger row's line box */
  --rail-row-pad:  9px;
}


/* =============================================================================
   1. THE COLUMN
   -----------------------------------------------------------------------------
   main.css sticks the rail at top:120px.  That was survivable while the rail
   was 1040px of unresolved column; now that it is composed to nearly the height
   of the grid it is taller than the viewport, and a sticky element taller than
   its viewport strands its own foot — you can never scroll to the bottom of it.
   The rail scrolls with the page instead.  No max-height, no inner scroller,
   no scrollbar inside a 236px column.
   ========================================================================== */

.shop-page .shop-sidebar,
.search-results-page .shop-sidebar {
  counter-reset: rail;
}

@media (min-width: 992px) {
  .shop-page .shop-sidebar,
  .search-results-page .shop-sidebar {
    position: relative;
    top: auto;

    /* THE RAIL MEASURES THE GRID INSTEAD OF GUESSING AT IT.
       .shop-layout aligns its items to `start`, so the rail used to be exactly
       as tall as its own content and the distance from its foot to the
       products' last rule was a magic number, retuned by hand at every
       breakpoint and wrong at all the others.  Overriding align-self on this
       item alone stretches the rail to the grid row — which is the height of
       the product column — and making it a flex column lets §5's terminal take
       `flex: 1` and absorb whatever is left over.  The tail is now measured,
       not declared: the corner cannot open again at a width nobody captured. */
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
}


/* =============================================================================
   2. THE PANEL, UNMADE
   ========================================================================== */

.shop-page .shop-sidebar .sidebar-widget,
.search-results-page .shop-sidebar .sidebar-widget {
  counter-increment: rail;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rail-rule);
  border-radius: 0;
  overflow: visible;
  margin: 0 0 34px;
  padding: 0;
}

.shop-page .shop-sidebar .sidebar-widget:last-of-type,
.search-results-page .shop-sidebar .sidebar-widget:last-of-type {
  margin-bottom: 0;
}


/* --- The kicker ------------------------------------------------------------
   The hero's lockup, to the pixel: a 34 x 1px rule, a two-digit index, then the
   label at 0.7rem / 0.17em.  The index comes from a counter so a widget dropped
   into the sidebar from the widget screen joins the sequence without markup.
   The chevron stays — main.js binds the collapse to this row — but it drops to
   a 9px hairline glyph at the far right instead of a 14px icon in the flow.
   -------------------------------------------------------------------------- */

.shop-page .shop-sidebar .sidebar-widget-title,
.search-results-page .shop-sidebar .sidebar-widget-title {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: var(--rail-kicker-h);
  padding: 25px 0 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;          /* 11.2px — the journey kicker */
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rail-ink-2);
  cursor: pointer;
  transition: color 0.35s var(--rail-ease);
}

.shop-page .shop-sidebar .sidebar-widget-title::before,
.search-results-page .shop-sidebar .sidebar-widget-title::before {
  /* No leading 34px mark here: the widget's own border-top is drawn one line
     above this row, so a second rule inside it would be the same gesture twice
     — and 34px + a gap is a sixth of a 236px rail the label needs. */
  content: counter(rail, decimal-leading-zero);
  flex: none;
  font-size: 0.7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.12em;
  color: var(--rail-ink-3);
  transition: color 0.35s var(--rail-ease);
}

.shop-page .shop-sidebar .sidebar-widget-title:hover,
.search-results-page .shop-sidebar .sidebar-widget-title:hover {
  color: var(--rail-ink);
}
.shop-page .shop-sidebar .sidebar-widget-title:hover::before {
  color: var(--rail-accent);
}

.shop-page .shop-sidebar .sidebar-widget-title svg,
.search-results-page .shop-sidebar .sidebar-widget-title svg {
  width: 9px;
  height: 9px;
  flex: none;
  margin-left: auto;
  opacity: 0.32;
  stroke-width: 2.4;
  transition: opacity 0.35s var(--rail-ease), transform 0.45s var(--rail-ease);
}
.shop-page .shop-sidebar .sidebar-widget-title:hover svg { opacity: 0.7; }


/* --- The head band ---------------------------------------------------------
   91px under the first kicker puts the ledger's first hairline on the product
   card's top rule.  Every widget after it opens on a normal 32px step; the tall
   band is the rail's head, not a repeating gap.

   The body stays `display: block`: main.js collapses a widget by writing
   `style="display:block|none"` onto this element, so anything laid out here
   with flex or grid would survive exactly one click.  Layout lives on the
   children.
   -------------------------------------------------------------------------- */

.shop-page .shop-sidebar .sidebar-widget-body,
.search-results-page .shop-sidebar .sidebar-widget-body {
  display: block;
  padding: 32px 0 0;
}

@media (min-width: 992px) {
  .shop-page .shop-sidebar .sidebar-widget:first-of-type .sidebar-widget-body,
  .search-results-page .shop-sidebar .sidebar-widget:first-of-type .sidebar-widget-body {
    padding-top: var(--rail-head);
  }
}


/* =============================================================================
   3. THE LEDGER — categories, brands, any counted facet
   ========================================================================== */

.shop-page .shop-sidebar .filter-list,
.search-results-page .shop-sidebar .filter-list {
  display: block;
  list-style: none;
  gap: 0;
  margin: 0;
  padding: 0;
}

.shop-page .shop-sidebar .filter-item,
.search-results-page .shop-sidebar .filter-item {
  display: block;
  position: relative;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--rail-rule);
  transition: border-color 0.35s var(--rail-ease);
}

/* INLINE — the template writes display/align/justify/width/font-size onto every
   one of these anchors, so the row's own type has to be reclaimed here. */
.shop-page .shop-sidebar .filter-item > a,
.search-results-page .shop-sidebar .filter-item > a {
  position: relative;
  gap: 14px;
  padding: var(--rail-row-pad) 0;
  font-family: var(--font-primary);
  font-size: 0.8125rem !important;   /* INLINE: 0.875rem */
  font-weight: 400;
  line-height: var(--rail-row);
  letter-spacing: 0.005em;
  color: var(--rail-ink-2);
  text-decoration: none;
  transition: color 0.3s var(--rail-ease);
}

.shop-page .shop-sidebar .filter-item > a:hover,
.search-results-page .shop-sidebar .filter-item > a:hover {
  color: var(--rail-ink);
}
.shop-page .shop-sidebar .filter-item:hover,
.search-results-page .shop-sidebar .filter-item:hover {
  border-top-color: var(--rail-rule-2);
}

/* Counts: lining tabular figures in a fixed well, so 1 and 511 share a column
   and the ledger reads as a table rather than eleven badges. */
.shop-page .shop-sidebar .filter-item .count,
.shop-page .shop-sidebar li .count,
.search-results-page .shop-sidebar .filter-item .count {
  flex: none;
  min-width: 2.6em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.02em;
  line-height: var(--rail-row);
  text-transform: none;
  text-align: right;
  color: var(--rail-ink-3);
  transition: color 0.3s var(--rail-ease);
}
.shop-page .shop-sidebar .filter-item > a:hover .count {
  color: var(--rail-ink-2);
}

/* --- The current facet -----------------------------------------------------
   The template marks the active term by writing `color:var(--color-primary)`
   inline — the FILL green, which is a 4.6:1 swatch meant to carry paper text,
   not a text colour for a night ground.  The attribute selector catches exactly
   that string and hands the row the accent instead, plus a lit rule.
   -------------------------------------------------------------------------- */

.shop-page .shop-sidebar .filter-item > a[style*="color:var(--color-primary)"],
.search-results-page .shop-sidebar .filter-item > a[style*="color:var(--color-primary)"] {
  color: var(--rail-accent) !important;   /* INLINE: --color-primary */
  font-weight: 500 !important;            /* INLINE: 700 */
}
.shop-page .shop-sidebar .filter-item > a[style*="color:var(--color-primary)"] .count {
  color: var(--rail-accent);
}
.shop-page .shop-sidebar .filter-item:has(> a[style*="color:var(--color-primary)"]) {
  border-top-color: color-mix(in srgb, var(--color-accent) 46%, transparent);
}


/* =============================================================================
   4. POPULAR PRODUCTS — one plate, three lines
   -----------------------------------------------------------------------------
   `div[style]` is the template's own signature: the popular rows are the only
   direct children of a widget body that carry an inline style, which makes it a
   stable hook for a block this file cannot add a class to.
   ========================================================================== */

.shop-page .shop-sidebar .sidebar-widget-body > div[style],
.search-results-page .shop-sidebar .sidebar-widget-body > div[style] {
  border-bottom: 0 !important;   /* INLINE: 1px solid var(--color-border) */
}

/* --- 4a. The plate ---------------------------------------------------------
   The first row stops being a row.  Image full-bleed to the rail, graded to a
   common key (the catalogue's exposure is all over the place), a four-stop
   scrim, and the name in Fraunces standing on it.
   -------------------------------------------------------------------------- */

.shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type,
.search-results-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type {
  display: block !important;     /* INLINE: flex */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 !important;         /* INLINE: 8px 0 */
  margin: 0 0 30px;
  border-radius: var(--radius-sm, 2px);
  box-shadow: inset 0 0 0 1px var(--rail-rule);
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type > a:first-child {
  display: block;
  line-height: 0;
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type img {
  width: 100% !important;        /* INLINE: 55px */
  height: 246px !important;      /* INLINE: 55px */
  border: 0 !important;          /* INLINE: 1px solid var(--color-border) */
  border-radius: 0 !important;   /* INLINE: 4px */
  object-fit: cover;
  filter: saturate(0.9) brightness(0.94) contrast(1.05);
  transform: scale(1.001);
  transition: transform 0.9s var(--rail-ease), filter 0.6s var(--rail-ease);
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--night-2) 95%, transparent) 0%,
    color-mix(in srgb, var(--night-2) 78%, transparent) 30%,
    color-mix(in srgb, var(--night-2) 26%, transparent) 62%,
    color-mix(in srgb, var(--night-2) 6%, transparent) 100%
  );
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type > div {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 14px 13px;
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type:hover img {
  transform: scale(1.045);
  filter: saturate(0.95) brightness(0.98) contrast(1.04);
}

/* --- 4b. The three lines under it ------------------------------------------ */

.shop-page .shop-sidebar .sidebar-widget-body > div[style] ~ div[style],
.search-results-page .shop-sidebar .sidebar-widget-body > div[style] ~ div[style] {
  display: flex !important;
  gap: 14px !important;          /* INLINE: 10px */
  align-items: flex-start !important;   /* INLINE: center */
  padding: 17px 0 !important;    /* INLINE: 8px 0 */
  border-top: 1px solid var(--rail-rule);
  transition: border-color 0.35s var(--rail-ease);
}
.shop-page .shop-sidebar .sidebar-widget-body > div[style] ~ div[style]:hover {
  border-top-color: var(--rail-rule-2);
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style] ~ div[style] > a:first-child {
  display: block;
  line-height: 0;
  overflow: hidden;
  border-radius: var(--radius-sm, 2px);
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style] ~ div[style] img {
  width: 52px !important;        /* INLINE: 55px */
  height: 52px !important;
  border: 0 !important;          /* INLINE: 1px solid var(--color-border) */
  border-radius: 0 !important;   /* INLINE: 4px */
  object-fit: cover;
  /* The catalogue's small shots are printed dark on a dark ground and two of
     them were reading as one grey rectangle.  Lifted above the page's own
     value so each thumb separates from the rail. */
  filter: saturate(0.95) brightness(1.06) contrast(1.02);
  box-shadow: inset 0 0 0 1px var(--rail-rule-2);
  transition: transform 0.7s var(--rail-ease), filter 0.5s var(--rail-ease);
}
.shop-page .shop-sidebar .sidebar-widget-body > div[style] ~ div[style]:hover img {
  transform: scale(1.06);
  filter: saturate(1) brightness(1.14) contrast(1.02);
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style] > div {
  min-width: 0;
  flex: 1 1 auto;
}

/* --- 4c. Name and price ----------------------------------------------------
   Product names are set in Fraunces everywhere else in the theme; a name in the
   body sans is the single most-cited inconsistency in review.  The price loses
   the fill green and becomes a quiet tabular figure — price ranges are two
   numbers and an en dash, and they have to line up down the column.
   -------------------------------------------------------------------------- */

.shop-page .shop-sidebar .sidebar-widget-body > div[style] > div > a,
.search-results-page .shop-sidebar .sidebar-widget-body > div[style] > div > a {
  display: -webkit-box !important;   /* INLINE: block — needed for the clamp */
  -webkit-box-orient: vertical;
  /* Three lines, not two.  The two Yixing gift sets share their first six
     words and differ only in the bracketed name at the end; clamped at two
     they printed as two identical rows. */
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0 0 6px !important;        /* INLINE: 0 0 3px */
  font-family: var(--font-heading) !important;
  font-optical-sizing: auto;
  font-size: 0.9rem !important;      /* INLINE: 0.82rem */
  font-weight: 400 !important;       /* INLINE: 600 */
  font-style: normal;
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--rail-ink) !important; /* INLINE: var(--color-dark) */
  text-decoration: none;
  transition: color 0.3s var(--rail-ease);
}
.shop-page .shop-sidebar .sidebar-widget-body > div[style] > div > a:hover {
  color: var(--rail-accent) !important;
}

.shop-page .shop-sidebar .sidebar-widget-body > div[style] > div > span,
.search-results-page .shop-sidebar .sidebar-widget-body > div[style] > div > span {
  display: block;
  font-family: var(--font-primary) !important;
  font-size: 0.72rem !important;     /* INLINE: 0.85rem */
  font-weight: 400 !important;       /* INLINE: 700 */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: color-mix(in srgb, var(--paper) 52%, transparent) !important;  /* INLINE: var(--color-primary) */
}
.shop-page .shop-sidebar .sidebar-widget-body > div[style] > div > span .amount,
.shop-page .shop-sidebar .sidebar-widget-body > div[style] > div > span bdi {
  color: inherit;
  font-weight: inherit;
}

/* The plate's own name gets the display size it earned by being the plate. */
.shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type > div > a {
  /* The plate has to outrank the 0.9rem rows under it by more than 0.12rem,
     or the promotion reads as a rendering accident. */
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 1.2rem !important;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin-bottom: 6px !important;
  color: var(--ink) !important;
}
.shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type > div > span {
  color: var(--rail-ink-2) !important;
}


@media (min-width: 992px) and (max-width: 1179px) {
  .shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type img {
    height: 200px !important;
  }
}


/* =============================================================================
   5. THE COLOPHON — how the rail ends
   -----------------------------------------------------------------------------
   The rail used to stop 460px above the pagination and leave a dead pocket in
   the corner of the page.  The first fix ran a bare 1px stem down into that
   pocket and let it fade out, which traded a 460px hole for a 370px one with a
   line in it — the hero's own vertical spine with every piece of content
   stripped off.  The hero's spine is not a line.  It is a lockup: a filled
   accent node, a 0.7rem / 0.17em label beside it, a run of quiet nodes down
   the stem, and a mark that closes it.  This is that lockup, at the rail's
   scale and on the rail's axis.

   HOW IT IS DRAWN
   The whole terminal is nine background layers and one `content` string on a
   single pseudo-element, so it costs no markup in a template this file does
   not own:

     1   head node    filled --rail-accent, 9px, seated ON the closing rule
     2   foot node    a hollow 9px ring — the mark the spine closes on
     3-7 the run      five 5px nodes spaced down the stem, --rail-rule-3
     8   stem         1px, solid head to foot, never fading out into nothing
     9   closing rule the ledger's last hairline, the full 236px

   GEOMETRY
   The box is pulled 6px left and 6px up of where the tail begins and made 6px
   wider, so the nodes can be drawn CENTRED on the rail's axis instead of
   tangent to it — a node sitting beside the stem reads as a bullet, a node
   centred on it reads as a junction.  `background-origin: border-box` keeps
   every layer measured from that same origin, so the padding that positions
   the label cannot drag the drawing with it.  The box grows to the right only
   as far as the rail itself, so nothing here can widen the page.
   ========================================================================== */

.shop-page .shop-sidebar,
.search-results-page .shop-sidebar {
  --rail-node-box: 12px;    /* the tile every node is drawn in */
  /* Where the run of quiet nodes sits on the stem.  Parked off the top of the
     box by default: a terminal only tall enough for the lockup and the mark
     has no room to space a run out, and five dots crowding a 90px stem would
     read as a dotted line, not as a spine.  The tall breakpoints redefine it
     below — one custom property instead of five repeated position lists. */
  --rail-ticks: 0 -200px, 0 -200px, 0 -200px, 0 -200px, 0 -200px;
}

.shop-page .shop-sidebar::after,
.search-results-page .shop-sidebar::after {
  /* The copy the page banner already carries: "581 PIECES · 14 CATEGORIES".
     Escaped so the middle dot survives a stylesheet served without a charset. */
  content: "581 PIECES \00B7  14 CATEGORIES";
  display: block;
  box-sizing: border-box;

  width: calc(100% + 6px);
  /* 14px of bottom margin is what seats the closing mark on the centre line of
     the pagination keypad — the axis the toolbar's own progress rail is drawn
     on.  Rail and grid then finish on ONE horizontal line: the hollow node at
     the page's left margin, the catalogue's progress scale running out of the
     keypad to the right of it.  Measured at 1440 and at 1280, where the
     terminal flexes to fill and the two land on the same pixel. */
  margin: -6px 0 14px -6px;
  padding: 24px 4px 0 22px;

  /* The terminal is the rail's spare room, so it takes the leftover height of
     the stretched column: `flex: 1` where the products run longer than the
     ledger, the floor below where they do not. */
  flex: 1 1 auto;
  min-height: 84px;

  font-family: var(--font-primary);
  font-size: 0.7rem;            /* 11.2px — the journey kicker, to the pixel */
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--rail-ink-2);

  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  background-image:
    /* 1 — the head node: the rail's one accent mark, at rest */
    radial-gradient(circle at 6px 6px,
      var(--rail-accent) 0 4.5px, transparent 5px),
    /* 2 — the foot node: hollow, so the spine closes instead of stopping */
    radial-gradient(circle at 6px 6px,
      transparent 0 2.9px,
      color-mix(in srgb, var(--paper) 40%, transparent) 3.3px 4.3px,
      transparent 4.8px),
    /* 3 — five quiet nodes down the stem */
    radial-gradient(circle at 6px 6px, var(--rail-rule-3) 0 2.3px, transparent 3.1px),
    radial-gradient(circle at 6px 6px, var(--rail-rule-3) 0 2.3px, transparent 3.1px),
    radial-gradient(circle at 6px 6px, var(--rail-rule-3) 0 2.3px, transparent 3.1px),
    radial-gradient(circle at 6px 6px, var(--rail-rule-3) 0 2.3px, transparent 3.1px),
    radial-gradient(circle at 6px 6px, var(--rail-rule-3) 0 2.3px, transparent 3.1px),
    /* 4 — the stem, solid end to end */
    linear-gradient(var(--rail-rule-2), var(--rail-rule-2)),
    /* 5 — the ledger's closing hairline */
    linear-gradient(var(--rail-rule), var(--rail-rule));
  background-size:
    var(--rail-node-box) var(--rail-node-box),
    var(--rail-node-box) var(--rail-node-box),
    var(--rail-node-box) var(--rail-node-box),
    var(--rail-node-box) var(--rail-node-box),
    var(--rail-node-box) var(--rail-node-box),
    var(--rail-node-box) var(--rail-node-box),
    var(--rail-node-box) var(--rail-node-box),
    1px calc(100% - 24px),
    calc(100% - 6px) 1px;
  background-position:
    0 0,            /* head node, centred on the closing rule */
    0 100%,         /* foot node */
    var(--rail-ticks),
    6px 12px,       /* stem: from under the head node to over the foot node */
    6px 6px;        /* closing rule */
}

/* The run needs a stem long enough to space itself out, so the number of
   nodes is a function of how much stem there is.  Between 992 and 1180 the
   grid is four short columns and the LEDGER is the taller of the two — there
   is no leftover height to take, so the run stays parked and the terminal
   keeps only its lockup and its closing mark.  Past 1180 the products always
   run longer than the ledger and the terminal is handed real height: three
   nodes on a 182px stem there, and the hero's full six-mark spine — head,
   five, close — on the 330px one the 1400px grid leaves. */
@media (min-width: 1180px) {
  .shop-page .shop-sidebar,
  .search-results-page .shop-sidebar {
    --rail-ticks: 0 40%, 0 60%, 0 80%, 0 -200px, 0 -200px;
  }
  .shop-page .shop-sidebar::after,
  .search-results-page .shop-sidebar::after { min-height: 182px; }
}

@media (min-width: 1400px) {
  .shop-page .shop-sidebar,
  .search-results-page .shop-sidebar {
    /* 30 -> 86% of the stem in four equal steps: the gap the label leaves
       above the run and the gap the run leaves above the closing mark come
       out the same 43px, so the descent has one rhythm and not three. */
    --rail-ticks: 0 30%, 0 44%, 0 58%, 0 72%, 0 86%;
  }
  .shop-page .shop-sidebar::after,
  .search-results-page .shop-sidebar::after { min-height: 250px; }
}

/* Under 992px the rail is a 330px drawer that scrolls its own content.  It is
   laid out as a block there, so the terminal cannot flex: it takes a fixed
   height, and the five-node run — which has no room to space itself out — is
   parked off the top of the box.  What is left is the lockup and the mark that
   closes it, which is all a 330px drawer needs to end on. */
@media (max-width: 991px) {
  .shop-page .shop-sidebar::after,
  .search-results-page .shop-sidebar::after {
    height: 104px;
    min-height: 0;
    margin-bottom: 0;
    padding-top: 23px;
  }
}


/* =============================================================================
   6. WIDGETS DROPPED IN FROM THE WIDGET SCREEN
   -----------------------------------------------------------------------------
   The shop-sidebar area is registered and empty today, so a price filter, a
   rating filter or a layered nav can appear here at any time.  They arrive as
   WooCommerce's own markup with WooCommerce's own defaults — a 4px grey track,
   a blue-grey handle, a 48px paper button — and would land in the rail as the
   only box left on the page.  They are drawn into the ledger here instead.
   ========================================================================== */

/* --- Block-widget chrome, flattened onto the rail's axis -------------------- */
.shop-page .shop-sidebar .sidebar-widget > .wp-block-group,
.shop-page .shop-sidebar .sidebar-widget > form,
.shop-page .shop-sidebar .sidebar-widget > .wp-block-heading,
.shop-page .shop-sidebar .sidebar-widget > ul,
.shop-page .shop-sidebar .sidebar-widget > ol,
.shop-page .shop-sidebar .sidebar-widget > p,
.shop-page .shop-sidebar .sidebar-widget > .wp-block-categories,
.shop-page .shop-sidebar .sidebar-widget > .wp-block-archives {
  padding-left: 0;
  padding-right: 0;
}

.shop-page .shop-sidebar .sidebar-widget .wp-block-heading,
.shop-page .shop-sidebar .sidebar-widget .wp-block-search__label,
.shop-page .shop-sidebar .widget > h2,
.shop-page .shop-sidebar .widget > h3,
.shop-page .shop-sidebar .widgettitle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 26px;
  margin: 0;
  border: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--rail-ink-2);
}
.shop-page .shop-sidebar .widget > h2::before,
.shop-page .shop-sidebar .widget > h3::before,
.shop-page .shop-sidebar .widgettitle::before {
  content: "";
  flex: none;
  width: 34px;
  height: 1px;
  background: var(--rail-rule-3);
}

/* --- Layered nav / rating filter / any WooCommerce facet list --------------- */
.shop-page .shop-sidebar .woocommerce-widget-layered-nav-list,
.shop-page .shop-sidebar ul.wc-layered-nav-rating,
.shop-page .shop-sidebar ul.product-categories {
  display: block;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The row is the `li`, not the `a`: WooCommerce's layered nav prints the count
   as a SIBLING of the anchor, while the theme's own filter list nests it
   inside.  Making both the list item and the anchor flex rows, and pushing the
   count with `margin-left: auto`, lets one set of rules draw either markup. */
.shop-page .shop-sidebar .woocommerce-widget-layered-nav-list li,
.shop-page .shop-sidebar ul.wc-layered-nav-rating li,
.shop-page .shop-sidebar ul.product-categories li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--rail-row-pad) 0;
  border-top: 1px solid var(--rail-rule);
  font-size: 0.8125rem;
  line-height: var(--rail-row);
  color: var(--rail-ink-3);
  transition: border-color 0.35s var(--rail-ease);
}
.shop-page .shop-sidebar .woocommerce-widget-layered-nav-list li:hover,
.shop-page .shop-sidebar ul.wc-layered-nav-rating li:hover,
.shop-page .shop-sidebar ul.product-categories li:hover {
  border-top-color: var(--rail-rule-2);
}
.shop-page .shop-sidebar .woocommerce-widget-layered-nav-list li > a,
.shop-page .shop-sidebar ul.wc-layered-nav-rating li > a,
.shop-page .shop-sidebar ul.product-categories li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: var(--rail-row);
  color: var(--rail-ink-2);
  text-decoration: none;
  transition: color 0.3s var(--rail-ease);
}
.shop-page .shop-sidebar .woocommerce-widget-layered-nav-list li > a:hover,
.shop-page .shop-sidebar ul.wc-layered-nav-rating li > a:hover,
.shop-page .shop-sidebar ul.product-categories li > a:hover {
  color: var(--rail-ink);
}
.shop-page .shop-sidebar .woocommerce-widget-layered-nav-list li.chosen > a,
.shop-page .shop-sidebar ul.product-categories li.current-cat > a {
  color: var(--rail-accent);
  font-weight: 500;
}
.shop-page .shop-sidebar .woocommerce-widget-layered-nav-list li .count,
.shop-page .shop-sidebar ul.wc-layered-nav-rating li .count,
.shop-page .shop-sidebar ul.product-categories li .count {
  margin-left: auto;
}
.shop-page .shop-sidebar ul.wc-layered-nav-rating .star-rating {
  flex: none;
  width: auto;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--rail-ink-2);
}
/* A nested child-category list stays inside the parent row's measure. */
.shop-page .shop-sidebar ul.product-categories li ul.children {
  flex: 1 0 100%;
  margin: var(--rail-row-pad) 0 0 14px;
  padding: 0;
  list-style: none;
}
.shop-page .shop-sidebar ul.product-categories li ul.children li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* --- The price filter ------------------------------------------------------
   A 2px track on the rail's own hairline, a lit range, and two 11px rings that
   read as the paper chrome the hero draws over the photograph — not as blue
   jQuery UI furniture.
   -------------------------------------------------------------------------- */

.shop-page .shop-sidebar .widget_price_filter form,
.shop-page .shop-sidebar .price_slider_wrapper {
  margin: 0;
  padding: 0;
}

.shop-page .shop-sidebar .price_slider_wrapper .ui-widget-content,
.shop-page .shop-sidebar .ui-slider {
  position: relative;
  height: 2px;
  margin: 6px 6px 30px 0;
  border: 0;
  border-radius: 0;
  background: var(--rail-rule-2);
  text-align: left;
}
.shop-page .shop-sidebar .ui-slider .ui-slider-range {
  position: absolute;
  top: 0;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-accent) 74%, transparent);
  display: block;
}
.shop-page .shop-sidebar .ui-slider .ui-slider-handle {
  position: absolute;
  top: -5px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: var(--night-2);
  box-shadow: none;
  cursor: ew-resize;
  outline: none;
  transition: transform 0.25s var(--rail-ease),
              background-color 0.25s var(--rail-ease);
}
.shop-page .shop-sidebar .ui-slider .ui-slider-handle:hover,
.shop-page .shop-sidebar .ui-slider .ui-slider-handle:focus-visible {
  transform: scale(1.18);
  background: var(--color-accent);
}

.shop-page .shop-sidebar .price_slider_amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.72rem;
}
.shop-page .shop-sidebar .price_slider_amount .price_label {
  order: 1;
  flex: 1 1 auto;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
  color: var(--rail-ink-3);
}
.shop-page .shop-sidebar .price_slider_amount .price_label span {
  color: var(--rail-ink);
}
.shop-page .shop-sidebar .price_slider_amount input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--rail-rule-2);
  border-radius: var(--radius-sm, 2px);
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--rail-ink);
}

/* The commit action is a text link with a rule under it, not a 48px paper pill
   dropped into a 236px column. */
.shop-page .shop-sidebar .widget_price_filter .button,
.shop-page .shop-sidebar .widget_price_filter button[type="submit"] {
  order: 2;
  flex: none;
  min-height: 0;
  height: auto;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--rail-rule-3);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--rail-ink);
  cursor: pointer;
  transition: color 0.3s var(--rail-ease), border-color 0.3s var(--rail-ease);
}
.shop-page .shop-sidebar .widget_price_filter .button:hover,
.shop-page .shop-sidebar .widget_price_filter button[type="submit"]:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  background: transparent;
  transform: none;
}

/* The theme's own hand-rolled range control, held to the same drawing. */
.shop-page .shop-sidebar .price-range-slider {
  height: 2px;
  margin: 6px 0 18px;
  border-radius: 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-accent) 74%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 74%, transparent) 60%,
    var(--rail-rule-2) 60%);
}
.shop-page .shop-sidebar .price-range-slider::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-accent);
  background: var(--night-2);
  box-shadow: none;
}
.shop-page .shop-sidebar .price-range-display {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
  color: var(--rail-ink-2);
}

/* Active-filter chips WooCommerce prints above a layered nav. */
.shop-page .shop-sidebar .woocommerce-widget-layered-nav-dropdown,
.shop-page .shop-sidebar .widget_layered_nav_filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-page .shop-sidebar .widget_layered_nav_filters ul li {
  border: 0;
}
.shop-page .shop-sidebar .widget_layered_nav_filters ul li a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--rail-rule-2);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rail-ink-2);
}
.shop-page .shop-sidebar .widget_layered_nav_filters ul li a:hover {
  color: var(--rail-ink);
  border-color: var(--rail-rule-3);
}


/* =============================================================================
   7. FOCUS — visible, and drawn like the rest of the rail
   ========================================================================== */

.shop-page .shop-sidebar a:focus-visible,
.shop-page .shop-sidebar button:focus-visible,
.search-results-page .shop-sidebar a:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 1px;
}


/* =============================================================================
   8. THE DRAWER — under 992px the rail is a panel that arrives
   -----------------------------------------------------------------------------
   main.css slides a 280px card in from the left on --color-surface with a
   drop shadow.  It is the same ledger; it just needs a ground dark enough to
   separate from the page behind it and a close control that is not a bare
   times glyph in the corner.
   ========================================================================== */

@media (max-width: 991px) {
  .shop-page .shop-sidebar,
  .search-results-page .shop-sidebar {
    position: fixed;
    top: 0;
    left: -360px;
    width: min(86vw, 330px);
    max-width: 330px;
    height: 100%;
    height: 100dvh;
    padding: 74px 24px 40px;
    background: var(--night-2);
    border-right: 1px solid var(--rail-rule-2);
    box-shadow: 40px 0 90px -30px rgba(0, 0, 0, 0.9);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rail-rule-2) transparent;
    transition: left 0.5s var(--rail-ease);
  }
  .shop-page .shop-sidebar.open,
  .search-results-page .shop-sidebar.open { left: 0; }

  /* The head band is a desktop alignment device; in a drawer it is just a hole. */
  .shop-page .shop-sidebar .sidebar-widget:first-of-type .sidebar-widget-body {
    padding-top: 28px;
  }
  .shop-page .shop-sidebar .sidebar-widget-title { padding-top: 22px; }
  .shop-page .shop-sidebar .sidebar-widget:first-of-type { border-top: 0; }
  .shop-page .shop-sidebar .sidebar-widget:first-of-type .sidebar-widget-title {
    padding-top: 0;
    height: 13px;
  }

  /* Bigger targets on touch. */
  .shop-page .shop-sidebar .filter-item > a { padding: 12px 0; }
  .shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type img {
    height: 190px !important;
  }

  .shop-page .shop-sidebar-overlay {
    background: color-mix(in srgb, var(--night-2) 78%, transparent);
    -webkit-backdrop-filter: blur(3px) saturate(0.9);
    backdrop-filter: blur(3px) saturate(0.9);
  }

  .shop-page .shop-sidebar-close,
  .search-results-page .shop-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 22px;
    right: 22px;
    width: 34px;
    height: 34px;
    padding: 0 0 2px;
    border: 1px solid var(--rail-rule-2);
    border-radius: 50%;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--rail-ink-2);
    transition: color 0.3s var(--rail-ease), border-color 0.3s var(--rail-ease);
  }
  .shop-page .shop-sidebar-close:hover {
    color: var(--ink);
    border-color: var(--rail-rule-3);
  }
}

@media (max-width: 600px) {
  .shop-page .shop-sidebar,
  .search-results-page .shop-sidebar {
    width: min(88vw, 320px);
    padding: 70px 20px 36px;
  }
  .shop-page .shop-sidebar .sidebar-widget-body > div[style]:first-of-type img {
    height: 168px !important;
  }
}


/* =============================================================================
   9. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .shop-page .shop-sidebar *,
  .search-results-page .shop-sidebar * {
    transition-duration: 0.01ms !important;
  }
  .shop-page .shop-sidebar .sidebar-widget-body > div[style]:hover img {
    transform: none;
  }
}