/* =============================================================== lc-gear.css ==
   The shelf, shared by /surfing/ and /kiteboarding/.

   WHY IT IS A SHELF AND NOT A CARD GRID. The catalog behind it is boutiques, not
   a surf shop, and the honest framing is "here is what the local shops actually
   carry for somebody heading for the water". A grid of bordered, shadowed boxes
   would make that read as a store, which it is not, and would put six identical
   containers on a page whose whole discipline is that different content gets
   different shapes.

   So: no box, no border, no shadow, no rounded corner. The pictures sit on one
   hairline — the shelf edge — with the need above the title and the shop under
   it. On a phone the shelf keeps going sideways, which is what a shelf does, and
   costs no vertical space on a page that already has plenty.

   Tokens are the theme's own, read through literal fallbacks so this file stands
   up on either page without depending on the other one's stylesheet.
   ========================================================================== */

[data-gear] {
  --g-ink:    var(--gd-ink,    #2d2e33);
  --g-muted:  var(--gd-muted,  #6c6d74);
  --g-line:   var(--gd-line,   #e5e5e7);
  --g-accent: var(--gd-accent, #e44e56);
  --g-paper:  var(--gd-paper,  #f7f6f4);
  --g-serif:  'Playfair Display', 'PT Serif', Georgia, serif;
  --g-sans:   'Montserrat', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--g-ink);
}

/* Dropped into the middle of body copy, the shelf has no section wrapper around it
   and arrives with half the air every other department on the page gets: measured
   at 20px above its rule where the article's own headings take 40. It is the same
   kind of thing as those headings and has to sit on the same rhythm, or a reader
   takes it as an interruption of the paragraph above rather than as a new part of
   the piece. The conditions pages keep their own wrappers and are untouched.

   The number is the WHOLE gap, not an addition to one: this margin collapses with
   the trailing margin of the paragraph above, so the result is max(20, this) and
   not the sum. Setting 20 here changed nothing at all, which is the sort of edit
   that looks applied and is not. */
.lcg-inflow { margin: 40px 0 0; }

/* The same department rule the guide fronts and the two conditions pages set, so
   the shelf arrives as a section of the magazine rather than as a widget. */
.lcg-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--g-line);
}
.lcg-head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--g-accent);
}
.lcg-head__t {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--g-serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--g-ink);
}
.lcg-head__m {
  flex: 0 1 auto;
  max-width: 44%;
  text-align: right;
  font: 500 11px/1.55 var(--g-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-muted);
  text-wrap: balance;
}
/* With no heading beside it the slot list is the only thing on the rule, and the
   pair of rules that made it sit opposite a heading — right-aligned inside 44% —
   left it stranded in the middle of the column instead. On its own it reads as a
   label for the hairline, so it starts where the hairline starts. */
.lcg-head__m:only-child {
  max-width: 100%;
  text-align: left;
}

/* Filter by team. Sits under the standfirst and above the row, because it changes what
   the row contains and a control below its own effect is a control nobody finds.

   Deliberately quiet: these are a way through the shelf, not the point of it, and the
   photographs have to stay the loudest thing on the screen. */
.lcg-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
}
.lcg-chip {
  appearance: none;
  border: 1px solid var(--g-line);
  background: transparent;
  border-radius: 2px;
  padding: 7px 13px;
  font: 500 10px/1 var(--g-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lcg-chip:hover { border-color: var(--g-ink); color: var(--g-ink); }
.lcg-chip[aria-pressed="true"] {
  background: var(--g-ink);
  border-color: var(--g-ink);
  color: #fff;
}
.lcg-chip:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
/* A hidden card must leave the grid, not sit in it as a gap. `hidden` alone loses to
   the grid display rule, which is the oldest trap in this file. */
.lcg-shelf > .lcg-item[hidden] { display: none; }

/* The endpoint's own sentence about what this is. It leads, at reading size,
   because the shelf's honesty is the part that has to land before the pictures
   do — and the pointer to the actual board shops sits beside it rather than
   underneath, so nobody scrolls past the caveat to reach the buying. */
.lcg-honest {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--g-ink);
}
.lcg-point {
  display: inline-block;
  margin: 12px 0 0;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--g-line);
  font: 500 10.5px/1.5 var(--g-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-muted);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.lcg-point::after { content: ' ↓'; }
.lcg-point:hover { color: var(--g-accent); border-bottom-color: var(--g-accent); }

/* ------------------------------------------------------------------ shelf ==*/
.lcg-shelf {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px 26px;
  margin: 30px 0 0;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--g-line);
}
.lcg-item { display: flex; flex-direction: column; min-width: 0; margin: 0; }
/* The whole object stands on the plate. `cover` was cropping the catalogue
   against a square — sunglasses lost both arms, a long sleeve lost its cuffs —
   and twelve products shot at twelve aspect ratios arrived as twelve different
   crops, which reads as a scrape rather than a selection.
   `contain` fixes that, and it makes the plate colour load-bearing: these shops
   photograph on white, so a tinted plate turns every packshot into a visible
   white rectangle inside a beige one. The plate is therefore the page, and the
   products stand on it directly. Where a shop shoots on its own tone that tone
   still shows, which is the truth about the picture and not a fault. */
.lcg-item__ph {
  display: block;
  aspect-ratio: 1 / 1;
  margin: 0 0 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(45,46,51,.06);
  line-height: 0;
}
.lcg-item__ph img {
  width: 100%;
  height: 100%;
  padding: 6%;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
  transition: transform .35s cubic-bezier(.22,.72,0,1);
}
.lcg-item:hover .lcg-item__ph img { transform: scale(1.035); }
/* A product with no picture is a hole in a shelf, so the frame keeps its shape
   and says what it is rather than collapsing the row. */
.lcg-item[data-noimg="true"] .lcg-item__ph { background: var(--g-paper); }
.lcg-item[data-noimg="true"] .lcg-item__ph img { display: none; }
.lcg-item[data-noimg="true"] .lcg-item__ph::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg,
    rgba(45,46,51,.05) 0 6px, transparent 6px 12px);
}

.lcg-item__need {
  display: block;
  margin: 0 0 6px;
  font: 500 9.5px/1.4 var(--g-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g-muted);
}
/* Real catalog titles run to sixty characters — "Hilton Head Fisherman's Guide
   UPF Long Sleeve" is a normal one. Three lines is the ceiling: past that a
   single verbose product sets the height of the whole row. */
/* Real catalog titles run to sixty characters — "Hilton Head Fisherman's Guide
   UPF Long Sleeve" is a normal one — so the title gets a three-line box and
   keeps it whether it needs one line or three. That reserved box is what puts
   every price on the shelf at the same height, which is the difference between a
   shelf and twelve loose captions. */
.lcg-item__t {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3em * 1.28);
  margin: 0;
  font-family: var(--g-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--g-ink);
}
.lcg-item__t a { color: inherit; text-decoration: none; transition: color .2s ease; }
.lcg-item__t a:hover { color: var(--g-accent); }
.lcg-item__f {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  margin: 8px 0 0;
  font: 500 10.5px/1.5 var(--g-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-muted);
}
.lcg-item__f strong {
  flex: 1 0 100%;
  font-family: var(--g-serif);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--g-ink);
}
/* Some of these shops trade as "Hilton Head Shirt Company-Tanger 2 Outlets".
   That is their name and it is not ours to shorten, so it is clamped rather than
   rewritten — two lines, and the rest is on the other end of the link. */
.lcg-item__f span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lcg-note { margin: 14px 0 0; max-width: 70ch; font: 500 11px/1.7 var(--g-sans); color: var(--g-muted); }

/* The shape of the answer while it loads, never a spinner in the middle of it. */
.lcg-item--skel { min-height: 220px; }
.lcg-item--skel::before {
  content: '';
  display: block;
  aspect-ratio: 1 / 1;
  background: linear-gradient(90deg, rgba(45,46,51,.05) 0 30%, rgba(45,46,51,.09) 45%, rgba(45,46,51,.05) 60%);
  background-size: 220% 100%;
  animation: lcg-sweep 1.25s linear infinite;
}
@keyframes lcg-sweep { to { background-position: -120% 0; } }

@media (max-width: 1199px) { .lcg-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 959px)  { .lcg-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; } }

@media (max-width: 767px) {
  /* A shelf keeps going sideways. It is what the object is, it costs no vertical
     space on a long page, and it beats stacking twelve products a reader did not
     come for. Scroll snapping so a flick lands on a product rather than between
     two. */
  .lcg-shelf {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }
  .lcg-shelf > .lcg-item { flex: 0 0 46%; scroll-snap-align: start; }
  .lcg-head__t { font-size: 21px; }
  .lcg-head { flex-wrap: wrap; gap: 4px; }
  .lcg-head__m { max-width: none; text-align: left; }
}
@media (max-width: 479px) { .lcg-shelf > .lcg-item { flex: 0 0 62%; } }

@media (prefers-reduced-motion: reduce) {
  .lcg-item__ph img,
  .lcg-item--skel::before { transition: none !important; animation: none !important; }
  .lcg-item--skel::before { background: rgba(45,46,51,.06); }
}