/* eb-listing.css: the storefront's own product listing (templates/listing/, app/listing.py)
   on the line pages and the /parts pages (parts.html: the shop page, search, the category pages,
   whose heading, count and subcategory strip are at the end). Built from the
   tokens in eb-site.css and design.md: the rail a plain list with eyebrow titles and square
   red-accent boxes, a white sort bar, the cards as the design's Apparel Item (a centred
   column, the photo on white inside a fog square, price at 24px), outline pill pager.
   The rail sits at the left from 1260px; under it a Filters disclosure above the list.
   Cards: 3 to a row from 1260px, 2 from 768px, 1 under 768px. */

.eb-ls { margin-top: var(--spacing-24); padding-bottom: var(--section-gap); color: var(--color-charcoal); }
.eb-ls__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-24); }
.eb-ls-main { min-width: 0; }

/* ---- the rail ---- */
.eb-ls-rail { min-width: 0; }
.eb-ls-rail__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8);
  min-height: 44px; padding: 0 var(--spacing-16); border: 1px solid var(--color-charcoal); border-radius: var(--radius-buttons);
  font: var(--font-weight-bold) var(--text-nav) / 1 var(--font-sans); letter-spacing: var(--tracking-base); text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.eb-ls-rail__toggle::-webkit-details-marker { display: none; }
.eb-ls-rail__toggle::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid var(--color-charcoal); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s ease; }
.eb-ls-rail[open] > .eb-ls-rail__toggle::after { margin-top: 4px; transform: rotate(-135deg); }
.eb-ls-rail__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-24); padding: var(--spacing-24) 0 var(--spacing-8); }
.eb-ls-rail__clear { grid-column: 1 / -1; margin: 0; font-size: var(--text-nav); }
.eb-ls-rail__clear a { color: var(--color-eibach-red); }
.eb-ls-rail__clear a:hover { text-decoration: underline; }

.eb-ls-group__title {
  margin: 0 0 var(--spacing-12); color: var(--color-eibach-red);
  font: var(--font-weight-extrabold) var(--text-eyebrow) / var(--leading-eyebrow) var(--font-sans); letter-spacing: var(--tracking-base); text-transform: uppercase;
}
.eb-ls-fold > summary { position: relative; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.eb-ls-fold > summary::before { content: ""; position: absolute; inset: -14px 0; } /* a 40px touch target around the eyebrow title */
.eb-ls-fold > summary::-webkit-details-marker { display: none; }
.eb-ls-fold > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 0; border: solid var(--color-charcoal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.eb-ls-fold[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.eb-ls-opts, .eb-ls-cats { margin: 0; padding: 0; list-style: none; }
.eb-ls-group--type .eb-ls-opts { max-height: 224px; overflow-y: auto; }
.eb-ls-opt {
  display: flex; align-items: center; gap: var(--spacing-8); min-height: 40px; padding: var(--spacing-4) 0;
  font: var(--font-weight-regular) var(--text-nav) / var(--leading-nav) var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-charcoal);
}
.eb-ls-opt:hover { color: var(--color-eibach-red); }
.eb-ls-box { position: relative; flex: none; width: 16px; height: 16px; border: 1px solid var(--color-charcoal); background: var(--color-snow); }
.eb-ls-opt.is-picked { font-weight: var(--font-weight-bold); }
.eb-ls-opt.is-picked .eb-ls-box { border-color: var(--color-eibach-red); background: var(--color-eibach-red); }
.eb-ls-opt.is-picked .eb-ls-box::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid var(--color-snow); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.eb-ls-cat { display: flex; align-items: center; gap: var(--spacing-8); padding: var(--spacing-8) 0; font: var(--font-weight-regular) var(--text-nav) / var(--leading-nav) var(--font-sans); color: var(--color-charcoal); }
.eb-ls-cat:hover { color: var(--color-eibach-red); }
.eb-ls-cat.is-current { font-weight: var(--font-weight-bold); }
.eb-ls-cat.is-current::after { content: ""; flex: none; width: 24px; height: 2px; background: var(--color-red-rule); }

/* ---- notes on how the words ran ---- */
.eb-ls-note { margin: 0 0 var(--spacing-16); font-size: var(--text-nav); color: var(--color-ash); }
.eb-ls-note strong { color: var(--color-charcoal); }
.eb-ls-note__link { color: var(--color-eibach-red); }
.eb-ls-note__link:hover { text-decoration: underline; }

/* ---- the sort bar: white, square 50px fields, the red-accent checkbox ---- */
.eb-ls-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--spacing-8) var(--spacing-16); margin: 0 0 var(--spacing-24); }
.eb-ls-bar label { font: var(--font-weight-regular) var(--text-nav) / var(--leading-nav) var(--font-sans); letter-spacing: var(--tracking-base); }
.eb-ls-bar__within, .eb-ls-bar select {
  height: var(--select-height); padding: 0 var(--spacing-12); border: 1px solid var(--color-muted); border-radius: var(--radius-inputs); background: var(--color-snow);
  font: var(--font-weight-regular) var(--text-nav) / var(--leading-nav) var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-charcoal);
}
.eb-ls-bar__within { flex: 1 1 200px; min-width: 0; max-width: 320px; margin-right: auto; }
.eb-ls-bar select { padding-right: var(--spacing-32); font-weight: var(--font-weight-black); }
.eb-ls-bar__within:focus-visible, .eb-ls-bar select:focus-visible { outline: 2px solid var(--color-charcoal); outline-offset: 2px; border-color: var(--color-charcoal); }
.eb-ls-bar__stock { display: inline-flex; align-items: center; gap: var(--spacing-8); min-height: 44px; cursor: pointer; } /* a 44px touch target, the row's height beside the fields */
.eb-ls-bar__stock input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-eibach-red); }
.eb-ls-bar__sort { display: inline-flex; align-items: center; gap: var(--spacing-8); }
.eb-ls-bar__apply {
  height: var(--select-height); padding: 0 var(--spacing-16); border: 1px solid var(--color-charcoal); border-radius: var(--radius-buttons); background: transparent;
  font: var(--font-weight-bold) var(--text-nav) / 1 var(--font-sans); letter-spacing: var(--tracking-base); text-transform: uppercase; color: var(--color-charcoal); cursor: pointer;
}
.eb-ls-bar__apply:hover { background: var(--color-charcoal); color: var(--color-snow); }
.eb-ls-bar.is-auto .eb-ls-bar__apply { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* the script submits on change; Enter in the words field still does */

/* ---- the cards: the design's Apparel Item ---- */
.eb-ls-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-48) var(--spacing-24); margin: 0; padding: 0; list-style: none; }
.eb-ls-card { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); min-width: 0; text-align: center; }
.eb-ls-card__media { display: block; width: 100%; padding: var(--spacing-24); background: var(--color-fog); }
.eb-ls-card__img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; aspect-ratio: 1; object-fit: contain; background: var(--color-snow); }
.eb-ls-card__text { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4); width: 100%; }
.eb-ls-card__line { margin: var(--spacing-8) 0 0; color: var(--color-eibach-red); font: var(--font-weight-extrabold) var(--text-eyebrow) / var(--leading-eyebrow) var(--font-sans); letter-spacing: var(--tracking-base); text-transform: uppercase; }
.eb-ls-card__title { margin: 0; font: var(--font-weight-regular) var(--text-body) / var(--leading-body) var(--font-sans); letter-spacing: var(--tracking-base); overflow-wrap: anywhere; }
.eb-ls-card__title a { color: var(--color-charcoal); }
.eb-ls-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.eb-ls-card__height, .eb-ls-card__mfg { margin: 0; font: var(--font-weight-regular) var(--text-caption) / var(--leading-caption) var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-ash); }
.eb-ls-card__mfg span { color: var(--color-charcoal); }
/* a race spring card's spring line (diameter x length, rate): one unit shown, eb-chrome.css's [data-eb-unit] rule */
.eb-ls-card__spring { margin: 0; font: var(--font-weight-semibold) var(--text-caption) / var(--leading-caption) var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-charcoal); text-align: center; }
/* sorted by spring: each run of one type under its name, as eibach.com's grouped tables */
.eb-ls-run { margin: var(--spacing-48) 0 var(--spacing-24); padding-bottom: var(--spacing-8); border-bottom: 1px solid var(--color-menu-line); font: var(--font-weight-extrabold) var(--text-heading-sm) / var(--leading-heading-sm) var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-charcoal); }
.eb-ls-products > .eb-ls-run:first-child { margin-top: var(--spacing-24); }
/* the price-to-button stack sits at the card's foot, so a row's Add to Cart buttons line up */
.eb-ls-card__offer { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4); width: 100%; margin-top: auto; }
.eb-ls-card__price { margin: 0; font: var(--font-weight-bold) var(--text-heading-sm) / var(--leading-heading-sm) var(--font-sans); letter-spacing: var(--tracking-base); }
.eb-ls-card__price.is-sale { color: var(--color-eibach-red); }
.eb-ls-card__list { margin-left: var(--spacing-4); font: var(--font-weight-regular) var(--text-nav) / var(--leading-nav) var(--font-sans); color: var(--color-ash); }
.eb-ls-card__stock, .eb-ls-card__ship, .eb-ls-card__fits, .eb-ls-card__alert { margin: 0; font: var(--font-weight-regular) var(--text-caption) / var(--leading-caption) var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-ash); }
.eb-ls-card__stock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--spacing-4); margin-top: var(--spacing-4); }
.eb-ls-card__stock strong, .eb-ls-card__ship strong { color: var(--color-charcoal); }
.eb-ls-card__fits, .eb-ls-card__alert { display: flex; align-items: flex-start; justify-content: center; gap: var(--spacing-4); margin-top: var(--spacing-4); color: var(--color-charcoal); }
.eb-ls-card__tick { position: relative; flex: none; width: 14px; height: 14px; margin-top: 2px; background: var(--color-eibach-red); }
.eb-ls-card__tick::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--color-snow); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* the availability hint: a "?" button, its tip under it (dark on white) on hover, click or keyboard focus */
.eb-ls-hint { position: relative; display: inline-flex; }
.eb-ls-hint__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; border: 0; border-radius: var(--radius-circle);
  background: var(--color-ash); color: var(--color-snow); font: var(--font-weight-bold) 10px / 1 var(--font-sans); cursor: pointer;
}
.eb-ls-hint__btn::before { content: ""; position: absolute; inset: -15px; } /* a 44px touch target around the 14px dot */
.eb-ls-hint__btn:hover, .eb-ls-hint__btn[aria-expanded="true"] { background: var(--color-charcoal); }
.eb-ls-hint__btn:focus-visible { outline: 2px solid var(--color-charcoal); outline-offset: 2px; }
.eb-ls-hint__tip {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 5; width: max-content; max-width: min(240px, 80vw); padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-charcoal); background: var(--color-snow); color: var(--color-charcoal);
  font: var(--font-weight-regular) var(--text-caption) / var(--leading-caption) var(--font-sans); text-align: left;
  transform: translateX(-50%); display: none; pointer-events: none; /* out of the layout while closed, so a closed tip never widens the page; open, a click goes through it */
}
/* eb-listing.js opens it on keyboard focus and closes it on Escape; without the script, keyboard focus shows it */
.eb-ls-hint__btn:not([data-eb-ls-wired]):focus-visible + .eb-ls-hint__tip, .eb-ls-hint__btn[aria-expanded="true"] + .eb-ls-hint__tip { display: block; }
/* a mouse's hover shows it too; a touch screen has no hover, a tap toggles it */
@media (hover: hover) {
  .eb-ls-hint__btn:hover + .eb-ls-hint__tip { display: block; }
}

/* the products a filter, the sort or a page swaps in place (eb-listing.js): dimmed while they
   load, nothing else on the page moves; the region's heading, which takes focus after a page
   change, draws no ring (it is not a control) */
.eb-ls-products[aria-busy="true"] { opacity: .55; transition: opacity .15s ease .1s; }
.eb-ls-region [data-eb-ls-heading]:focus { outline: none; }

/* Qty and Add to Cart */
.eb-ls-buy { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); width: 100%; margin: var(--spacing-8) 0 0; }
.eb-ls-qty { display: inline-flex; align-items: center; gap: var(--spacing-8); }
.eb-ls-qty__label { font: var(--font-weight-regular) var(--text-nav) / var(--leading-nav) var(--font-sans); letter-spacing: var(--tracking-base); }
.eb-ls-qty__label::after { content: ":"; }
.eb-ls-qty__input {
  width: 56px; height: 40px; padding: 0 var(--spacing-4); border: 1px solid var(--color-muted); border-radius: var(--radius-inputs);
  font: var(--font-weight-bold) var(--text-body) / 1 var(--font-sans); text-align: center; color: var(--color-charcoal); -moz-appearance: textfield;
}
.eb-ls-qty__input::-webkit-inner-spin-button, .eb-ls-qty__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.eb-ls-qty__input:focus-visible { outline: 2px solid var(--color-charcoal); outline-offset: 2px; border-color: var(--color-charcoal); }
.eb-ls-qty__step {
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-muted); border-radius: var(--radius-inputs); background: var(--color-fog);
  font: var(--font-weight-bold) 18px / 1 var(--font-sans); color: var(--color-charcoal); cursor: pointer;
}
.eb-ls-qty__step:hover { background: var(--color-silver); }
.eb-ls-qty__step:disabled { color: var(--color-muted); cursor: default; background: var(--color-fog); }
.eb-ls-buy__btn { width: 100%; }

/* ---- the foot: count and per page, then the outline pill pager ---- */
.eb-ls-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-16) var(--spacing-24); margin-top: var(--spacing-48); }
.eb-ls-foot__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-24); margin: 0; font: var(--font-weight-regular) var(--text-nav) / var(--leading-nav) var(--font-sans); letter-spacing: var(--tracking-base); }
.eb-ls-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); }
.eb-ls-page {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 var(--spacing-16);
  border: 1px solid var(--color-charcoal); border-radius: var(--radius-buttons); background: transparent;
  font: var(--font-weight-bold) var(--text-nav) / 1 var(--font-sans); letter-spacing: var(--tracking-base); text-transform: uppercase; color: var(--color-charcoal);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.eb-ls-page--prev, .eb-ls-page--next { padding: 0 var(--spacing-24); }
a.eb-ls-page:hover { background: var(--color-charcoal); color: var(--color-snow); text-decoration: none; }
.eb-ls-page.is-current { background: var(--color-charcoal); color: var(--color-snow); }
.eb-ls-page.is-off { border-color: var(--color-silver); color: var(--color-muted); }
.eb-ls-page__gap { padding: 0 var(--spacing-4); color: var(--color-ash); }

/* ---- empty and busy ---- */
.eb-ls-empty { padding: var(--spacing-48) var(--spacing-24); background: var(--color-fog); text-align: center; }
.eb-ls-empty p + p, .eb-ls-empty h2 + p { margin-top: var(--spacing-16); }
.eb-ls-empty__hint { color: var(--color-ash); }
.eb-ls-empty .lead + .eb-ls-empty__hint { margin-top: var(--spacing-8); }

/* ---- widths ---- */
/* a touch screen's size: the words field and the sort at 16px, so iOS does not zoom the page when they take focus */
@media (max-width: 1259.98px) {
  .eb-ls-bar__within, .eb-ls-bar select { font-size: var(--text-body); }
}
@media (max-width: 767.98px) {
  .eb-ls-bar { justify-content: flex-start; }
  .eb-ls-bar__sort, .eb-ls-bar__sort select { flex: 1 1 auto; } /* on a row of its own the sort runs the full width */
  .eb-ls-bar__within { flex-basis: 100%; max-width: none; }
  .eb-ls-foot { flex-direction: column; align-items: flex-start; }
  .eb-ls-page--prev, .eb-ls-page--next { padding: 0 var(--spacing-16); }
  /* the hint's tip centres under the whole availability line, so a "?" near the card's edge
     cannot push it past the screen's */
  .eb-ls-card__stock { position: relative; }
  .eb-ls-hint { position: static; }
}
@media (min-width: 768px) {
  .eb-ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1260px) {
  .eb-ls__layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--spacing-48); }
  .eb-ls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eb-ls-rail__body { display: block; padding: 0; }
  .eb-ls-rail__body > * + * { margin-top: var(--spacing-24); }
  .eb-ls-opt { min-height: 0; }
}
/* from 1260px the rail is always open with no toggle; a browser without ::details-content keeps the toggle */
@supports selector(::details-content) {
  @media (min-width: 1260px) {
    .eb-ls-rail > .eb-ls-rail__toggle { display: none; }
    .eb-ls-rail::details-content { content-visibility: visible; }
  }
}

/* ---- the /parts pages (parts.html): the shop page's finder band, the heading with the count in ash, the subcategory strip ---- */
.eb-parts .eb-parts__finder { padding: var(--spacing-32) 0; }
.eb-parts__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-8) var(--spacing-16); padding-top: var(--spacing-24); }
.eb-parts__title { margin: 0; font: var(--font-weight-extrabold) var(--text-heading) / var(--leading-heading) var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-charcoal); overflow-wrap: anywhere; }
.eb-parts__count { font-size: var(--text-body); color: var(--color-ash); white-space: nowrap; }
.eb-parts__prompt { margin: var(--spacing-24) 0 var(--section-gap); }
.eb-parts-strip { margin: var(--spacing-24) 0 0; }
.eb-parts-strip__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-24) var(--spacing-16); margin: 0; padding: 0; list-style: none; }
.eb-parts-strip__list > li { display: flex; min-width: 0; }
.eb-parts-strip__tile {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16); min-width: 0;
  padding: var(--spacing-16); background: var(--color-snow); color: var(--color-charcoal);
  font: var(--font-weight-bold) var(--text-nav) / var(--leading-nav) var(--font-sans); letter-spacing: var(--tracking-base); text-transform: uppercase; text-align: center;
  border-bottom: 3px solid transparent; transition: border-color .15s ease-in-out;
}
.eb-parts-strip__tile img { width: 96px; height: 96px; object-fit: contain; transition: transform .5s ease; }
.eb-parts-strip__tile span { overflow-wrap: anywhere; }
.eb-parts-strip__tile:hover { text-decoration: underline; }
.eb-parts-strip__tile:hover img { transform: scale(1.1); }
.eb-parts-strip__tile.is-current { border-bottom-color: var(--color-eibach-red); }
/* a phone: one row of small tiles that scrolls sideways (to the page's edges), so the strip
   takes about 140px above the Filters button whatever the count, and no tile is lost */
@media (max-width: 767.98px) {
  .eb-parts-strip__list {
    display: flex; gap: var(--spacing-8); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--spacing-8);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: thin;
  }
  .eb-parts-strip__list > li { flex: 0 0 96px; scroll-snap-align: start; } /* 3.5 tiles show at 390, so the row reads as one that scrolls */
  .eb-parts-strip__tile { gap: var(--spacing-8); padding: var(--spacing-8); font-size: var(--text-caption); line-height: var(--leading-caption); }
  .eb-parts-strip__tile img { width: 56px; height: 56px; }
}
.eb-parts-strip__tile:focus-visible { outline: 2px solid var(--color-charcoal); outline-offset: -2px; }