/* The equipment store: a collection, and one item's page. */
.gear-page > h1 {
  margin-bottom: 8px;
  text-align: left;
}

.gear-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin: 22px 0 0;
}

/* ── filters ─────────────────────────────────────────────────────────────── */

.gear-side {
  position: sticky;
  top: 20px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}
.gear-side > h2 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.gear-group {
  border-top: 1px solid var(--line);
  padding: 12px 0 4px;
}
.gear-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.gear-group > summary::-webkit-details-marker {
  display: none;
}
.gear-group > summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 400;
}
.gear-group[open] > summary::after {
  content: "–";
}
.gear-group ul {
  margin: 10px 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
}
.gear-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.gear-opt input {
  accent-color: var(--gold);
}
.gear-opt .n {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.gear-money {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
}
.gear-money input {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.gear-money span {
  color: var(--muted);
  font-size: 14px;
}
#gear-clear {
  margin: 14px 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gold);
  font: inherit;
  cursor: pointer;
}

/* ── toolbar ─────────────────────────────────────────────────────────────── */

.gear-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.gear-tools .count {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.gear-tools .spacer {
  flex: 1 1 auto;
}
.gear-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}
.gear-field select {
  padding: 8px 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font: inherit;
}
.gear-field select:focus-visible,
.gear-money input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* ── the grid ────────────────────────────────────────────────────────────── */

/* Four to a row beside the filter rail, stepping down as the screen narrows. */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.gear-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}
.gear-card:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}
.gear-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.gear-frame {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: #ffffff;
  border-radius: var(--radius-control);
  overflow: hidden;
}
.gear-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.gear-flags {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.gear-flag {
  padding: 4px 9px;
  border-radius: 0 0 4px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: #7b7e70;
}
.gear-flag.sale {
  background: #c0392b;
}
.gear-flag.used {
  background: #2f6f8f;
}
.gear-flag.gone {
  background: #4a4d45;
}
.gear-vendor {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.gear-card h2 {
  margin: 5px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.4em);
}
.gear-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 9px;
  margin: 10px 0 0;
  font-variant-numeric: tabular-nums;
}
.gear-price {
  font-size: 17px;
  font-weight: 700;
}
.gear-price.cut {
  color: #e8705f;
}
.gear-was {
  color: var(--muted);
  font-size: 14px;
}
.gear-stock {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  min-height: 1.2em;
}
.gear-stock.low {
  color: var(--gold);
}
.gear-act {
  margin-top: auto;
  padding-top: 12px;
}
.gear-act .button {
  display: block;
  width: 100%;
  text-align: center;
}
.gear-act .button[disabled],
.gear-act .button.off {
  opacity: 0.5;
  pointer-events: none;
}
.gear-empty {
  margin: 28px 0;
  color: var(--muted);
}

@media (max-width: 1240px) {
  .gear-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .gear-layout {
    grid-template-columns: 1fr;
  }
  .gear-side {
    position: static;
  }
  .gear-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .gear-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .gear-grid {
    grid-template-columns: 1fr;
  }
}

/* ── one item ────────────────────────────────────────────────────────────── */

.gear-crumbs {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.gear-crumbs a {
  color: inherit;
}

/* The name belongs above everything, the way it does in a catalogue — not tucked inside the box
   that sells it. */
.equipment-head {
  /* The name heads the buy box rather than a band of its own above the picture, where it left the
     width beside it empty. */
  margin: 0 0 16px;
  text-align: left;
}
.equipment-head h1 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.22;
  text-align: left;
}
.equipment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.equipment-meta span + span {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.equipment {
  display: grid;
  /* The picture leads and the buy box is narrower than it: a price and one button stretched to
     half the page is mostly empty panel. The picture takes the slack rather than leaving a hole
     between the two — the shops this copies run the photograph to within a gutter of the box. */
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 30px 40px;
  align-items: stretch;
  margin: 22px 0 0;
  text-align: left;
}

/* Thumbnails stand beside the picture, not under it: a dozen of them below the image push the
   price and the button off the screen. They carry no frame of their own — six framed squares in a
   column read as a ladder of rules drawn down the side of the photograph. */
.equipment-gallery {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}
.equipment-main {
  /* 4:3 at least, and as tall as the buy box beside it when that is taller, so neither column ends
     above the other. What the picture does not cover is painted in its own edge colours. */
  aspect-ratio: 4 / 3;
  /* The column's width, always. Stretched to a tall buy box, a frame that keeps its ratio would
     otherwise widen to match its new height and spill over the buy box. */
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.equipment-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.equipment-thumbs {
  display: grid;
  /* Rows of a known height, so the strip ends on a whole picture rather than slicing one. */
  grid-auto-rows: 56px;
  gap: 8px;
  min-width: 0;
  /* Six tiles and a clean edge: a strip cut mid-picture looks like a rendering fault rather than
     an invitation to scroll. */
  max-height: 440px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}
.equipment-thumbs button {
  /* Exactly the row's square. Sized by its aspect ratio instead, a tile grows to its picture's own
     height, the strip runs taller than its rows, and the arrows claim there is more to see. */
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  background: #ffffff;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
  opacity: 0.72;
}
.equipment-thumbs button:hover {
  opacity: 1;
}
.equipment-thumbs button[aria-current="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--gold);
}
.equipment-thumbs img {
  /* Not inline: a picture on a line of text leaves the line's descender below it, which pokes out
     of the tile and makes the strip scroll by a few pixels. */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.equipment-buy {
  min-width: 0;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  text-align: left;
}
.equipment-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin: 0;
  font-size: 29px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.equipment-price s {
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
}
.equipment-price .gear-save {
  color: var(--gold);
  font-size: 14px;
  font-weight: 500;
}
.equipment-stock {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
  min-height: 1.2em;
}
.equipment-stock.in {
  color: #8ec99a;
}
.equipment-stock.low {
  color: var(--gold);
}
.equipment-stock.gone {
  color: var(--error);
}
.equipment-options {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}
.equipment-options label {
  display: block;
}
.equipment-options span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.equipment-options select {
  width: 100%;
  padding: 10px 11px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font: inherit;
}
.equipment-options select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.equipment-order {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
}
.equipment-qty {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.equipment-qty button {
  width: 34px;
  background: var(--bg);
  color: var(--text);
  border: 0;
  font-size: 17px;
  cursor: pointer;
}
.equipment-qty input {
  width: 46px;
  padding: 9px 0;
  background: var(--bg);
  color: var(--text);
  border: 0;
  text-align: center;
  font: inherit;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.equipment-qty input::-webkit-outer-spin-button,
.equipment-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#equipment-buy {
  flex: 1 1 auto;
}
#equipment-buy[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.equipment-assure {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}

.equipment-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.45fr);
  gap: 30px 40px;
  align-items: start;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
/* With nothing to suggest alongside, the description takes the whole width rather than leaving an
   empty column where the related products would be. */
.equipment-lower:has(> .equipment-related[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.equipment-about {
  min-width: 0;
  text-align: left;
}
.equipment-about h2 {
  margin: 0 0 12px;
  font-size: 19px;
  text-align: left;
}
.equipment-description {
  /* The description runs the width of its column. Held to a reading measure it left a hand's
     width of nothing between the text and the related rail. */
  line-height: 1.62;
}
.equipment-description h2,
.equipment-description h3,
.equipment-description strong {
  color: var(--text);
}
.equipment-description h3 {
  margin: 22px 0 8px;
  font-size: 16px;
}
.equipment-description ul {
  padding-left: 20px;
}
.equipment-description li {
  margin: 4px 0;
}
.equipment-description hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.equipment-description img {
  max-width: 100%;
  height: auto;
}
.equipment-description table {
  width: 100%;
  border-collapse: collapse;
}
.equipment-description td,
.equipment-description th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}


/* The toolbar's middle earns its place: searching 54 items by name beats a gap. */
.gear-search {
  flex: 1 1 220px;
  min-width: 0;
}
.gear-search input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font: inherit;
}
.gear-search input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* What has been filtered out, said plainly and undoable one at a time. */
.gear-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.gear-chips:empty {
  display: none;
}
.gear-chips button {
  padding: 5px 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.gear-chips button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Where the parcel comes from and what is added at checkout, stated once, next to the button. */
.equipment-ship {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.equipment-ship li {
  display: flex;
  gap: 10px;
}
.equipment-ship-mark {
  flex: none;
  width: 1em;
  text-align: center;
}
.equipment-ship a {
  color: var(--gold);
}
.equipment-ship-mark {
  color: var(--gold);
}
.equipment-ship strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}

/* A specification sheet folded on the edge of a paragraph or a list — measured when it is drawn,
   because only the content knows where its blocks end. No fade: half a greyed-out sentence reads
   as a rendering fault, and the button below already says there is more. */
.equipment-longer.folded {
  max-height: var(--fold, 380px);
  overflow: hidden;
}
.equipment-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  background: none;
  color: var(--gold);
  border: 0;
  font: inherit;
  cursor: pointer;
}
.equipment-more::after {
  content: "▾";
  font-size: 12px;
}
.equipment-more[aria-expanded="true"]::after {
  content: "▴";
}
.equipment-more:hover {
  text-decoration: underline;
}

/* Below the buy box the page keeps its two columns: what the item is on the left, what goes with
   it on the right — a list of rows, each one buyable where it stands. */
.equipment-related {
  /* A long spec sheet scrolls for pages; what goes with the thing should still be on screen when
     the reader reaches the bottom of it. */
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  text-align: left;
}
.equipment-related h2 {
  margin: 0 0 6px;
  font-size: 17px;
  text-align: left;
}
.related-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.related-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.related-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.related-shot {
  display: block;
  aspect-ratio: 1;
  background: #ffffff;
  border-radius: var(--radius-control);
  overflow: hidden;
}
.related-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}
.related-name {
  display: -webkit-box;
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-name:hover {
  color: var(--gold);
}
.related-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.related-price s {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
.related-price .cut {
  color: #e8705f;
}
.related-act .button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.related-act .button.off {
  opacity: 0.55;
  pointer-events: none;
}

/* Description, what is in the box, free gifts — one page, one at a time. */
.equipment-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.equipment-tabs button {
  padding: 9px 16px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.equipment-tabs button[aria-selected="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #1d1f1c;
}
.equipment-tabs button:hover[aria-selected="false"] {
  color: var(--text);
  border-color: var(--muted);
}

/* The shop's own words on the corner of a picture. */
.gear-flag.ribbon {
  background: var(--gold);
  color: #1d1f1c;
}
.equipment-main {
  position: relative;
}
.equipment-main .gear-flags {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* The few lines a shopper reads before deciding to read on. They head the description rather than
   sit in the buy box, which would then outgrow the picture beside it. Two columns, so six points
   take three lines. */
.equipment-features {
  margin: 0 0 26px;
}
.equipment-features h2 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.equipment-features-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  align-items: start;
}
.equipment-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.equipment-features li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 14px;
  line-height: 1.45;
}
.equipment-features li::before {
  content: "✓";
  position: absolute;
  top: 5px;
  left: 0;
  color: var(--gold);
}

/* The strip of pictures points past its end while there is more of it. The arrows sit over the
   strip's own ends, so they cost the picture no room. */
.equipment-strip {
  position: relative;
  min-width: 0;
  align-self: start;
}
.strip-step {
  display: none;
  position: absolute;
  z-index: 1;
  place-items: center;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
  opacity: 0.92;
}
.strip-step:hover {
  opacity: 1;
  border-color: var(--muted);
}
.strip-step::before {
  content: "";
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
}
.equipment-strip[data-more~="start"] .strip-step.back,
.equipment-strip[data-more~="end"] .strip-step.next {
  display: grid;
}
.equipment-strip[data-axis="y"] .strip-step {
  left: 0;
  right: 0;
  height: 24px;
}
.equipment-strip[data-axis="y"] .back { top: 0; }
.equipment-strip[data-axis="y"] .next { bottom: 0; }
.equipment-strip[data-axis="y"] .back::before { transform: translateY(2px) rotate(-135deg); }
.equipment-strip[data-axis="y"] .next::before { transform: translateY(-2px) rotate(45deg); }
.equipment-strip[data-axis="x"] .strip-step {
  top: 0;
  bottom: 0;
  width: 28px;
}
.equipment-strip[data-axis="x"] .back { left: 0; }
.equipment-strip[data-axis="x"] .next { right: 0; }
.equipment-strip[data-axis="x"] .back::before { transform: translateX(2px) rotate(135deg); }
.equipment-strip[data-axis="x"] .next::before { transform: translateX(-2px) rotate(-45deg); }

/* A row of tabs cut off by the screen fades out on the side where more of it is waiting. */
.equipment-tabs-edge[data-more="end"] .equipment-tabs {
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.equipment-tabs-edge[data-more="start"] .equipment-tabs {
  mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}
.equipment-tabs-edge[data-more="start end"] .equipment-tabs {
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* ── narrow screens ──────────────────────────────────────────────────────── */
/* Last in the file on purpose: these override the rules above, and they lose to anything that
   comes after them at the same specificity. */
@media (max-width: 860px) {
  .equipment,
  .equipment-lower {
    grid-template-columns: 1fr;
  }
  .equipment-gallery {
    grid-template-columns: 1fr;
  }
  .equipment-thumbs {
    grid-auto-flow: column;
    grid-auto-columns: 70px;
    grid-auto-rows: 70px;
    overflow-x: auto;
    max-height: none;
  }
  .equipment-features-tables {
    grid-template-columns: 1fr;
  }
  .equipment-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .equipment-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .equipment-buy,
  .equipment-related {
    position: static;
    max-height: none;
  }
}