/* ==========================================================================
   Shop single — the product rack (lc-shop-products.php).

   Tokens, faces and button vocabulary come from lc-shops.css rather than being
   restated, so the band restyles with the theme instead of beside it. Every
   class carries the lcsp- prefix: this sheet loads on 994 pages alongside
   lc-shops.css and lc-store.css, and names like .tile or .grid would collide.

   ⚠ --lcsp-muted is one step darker than the shipped --lc-muted (#6b7772).
   Measured on this band's ground that value is 4.34:1, and 4.66:1 on white,
   both under the 4.5:1 floor for the label sizes it carries. The hue is kept;
   only the value moves, and only inside this band. The shared token has the
   same problem everywhere else it carries readable text.
   ========================================================================== */
.lcsp{
  --lcsp-ink:#1d2721; --lcsp-muted:#5b675f; --lcsp-line:#e3e6e3;
  --lcsp-soft:#f6f7f5; --lcsp-accent:#2f6f57; --lcsp-sale:#a33;
  --lcsp-serif:"PT Serif",Georgia,serif;
  --lcsp-label:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --lcsp-ease:cubic-bezier(.16,1,.3,1);
  color:var(--lcsp-ink);
  font-family:var(--lcsp-serif);
}
.lcsp *{box-sizing:border-box}

/* The band's ground reaches both edges because the YooTheme section it sits in is
   already full-bleed; only the container inside it is constrained. No viewport
   units and no negative margins — that arithmetic overflows by the scrollbar
   width and loops against the sticky header. */
.lcsp-section{background:#f6f7f5;border-top:1px solid #e3e6e3}

.lcsp-h{
  font-family:var(--lcsp-serif);font-weight:700;
  font-size:clamp(1.55rem,2.6vw,2.25rem);line-height:1.14;letter-spacing:-.012em;
  text-wrap:balance;margin:0;max-width:24ch;color:var(--lcsp-ink)}
.lcsp-sub{font-size:16px;line-height:1.5;color:var(--lcsp-muted);margin:10px 0 0;max-width:54ch}

/* ---- the shelf ----------------------------------------------------------
   Products carry no card border. Most product photography already arrives on
   white, so a white plate behind each shot merges with it and only shows where
   a shot brought its own ground — which is what keeps 26,000 items of wildly
   inconsistent photography looking like one shelf. */
.lcsp-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);margin-top:clamp(26px,3vw,38px)}
.lcsp-tile{display:block;text-decoration:none;color:inherit}
.lcsp-plate{display:block;background:#fff;border-radius:3px;overflow:hidden;
  aspect-ratio:1/1;padding:11px}
.lcsp-plate img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .35s var(--lcsp-ease)}
/* contain, not cover: a product shot cropped to fill a square loses the toe of
   the shoe, and the shape of the thing is what the tile is for. */
.lcsp-tile:hover .lcsp-plate img{transform:scale(1.035)}
.lcsp-body{display:block;padding:12px 2px 0}
.lcsp-store{display:block;font-family:var(--lcsp-label);text-transform:uppercase;
  letter-spacing:1.4px;font-size:10px;color:var(--lcsp-muted);margin-bottom:4px}
.lcsp-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:15px;line-height:1.34;margin-bottom:5px}
.lcsp-cue{display:inline-block;font-family:var(--lcsp-label);text-transform:uppercase;
  letter-spacing:1.4px;font-size:10px;font-weight:600;color:var(--lcsp-accent);
  margin-top:7px;opacity:0;transform:translateY(3px);
  transition:opacity .18s ease,transform .18s ease}
.lcsp-tile:hover .lcsp-cue,.lcsp-tile:focus-visible .lcsp-cue{opacity:1;transform:none}
/* A touch device never hovers, so a cue that only exists on hover never exists. */
@media(hover:none){.lcsp-cue{opacity:1;transform:none}}
.lcsp-tile:focus-visible{outline:2px solid var(--lcsp-accent);outline-offset:3px}

/* ---- the flagship -------------------------------------------------------
   Two columns wide and two rows tall inside the same grid. Built as a separate
   panel above the shelf it opened a void down the middle of the page at every
   width over 1100px; as a grid member it fills its share and still reads as the
   larger object. */
.lcsp-tile--lead{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.lcsp-tile--lead .lcsp-plate{flex:1 1 auto;aspect-ratio:auto;min-height:300px;
  padding:clamp(22px,2.4vw,40px)}
.lcsp-tile--lead .lcsp-body{padding:18px 2px 0}
.lcsp-tile--lead:hover .lcsp-plate img{transform:scale(1.03)}
.lcsp-lead-name{font-family:var(--lcsp-serif);font-weight:700;
  font-size:clamp(1.25rem,1.75vw,1.6rem);line-height:1.16;letter-spacing:-.008em;
  margin:0 0 9px;color:var(--lcsp-ink)}
.lcsp-lead-blurb{font-size:15.5px;line-height:1.6;color:#3c473f;margin:0 0 14px;
  max-width:52ch;text-wrap:pretty}
.lcsp-lead-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0 0 16px}
.lcsp-lead-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.lcsp-sizes{font-family:var(--lcsp-label);text-transform:uppercase;letter-spacing:1.4px;
  font-size:10.5px;color:var(--lcsp-muted)}

/* ---- price, one vocabulary at both scales ---- */
.lcsp-price{display:block;font-family:var(--lcsp-serif);font-size:15px;
  font-variant-numeric:tabular-nums}
.lcsp-price b{font-weight:700}
.lcsp-price s{color:var(--lcsp-muted);font-weight:400;margin-left:7px;
  text-decoration-thickness:1px}
.lcsp-price--lead{font-size:1.55rem;line-height:1.1;flex:0 0 auto}
.lcsp-price--lead s{font-size:1rem}
.lcsp-off{display:block;font-family:var(--lcsp-label);text-transform:uppercase;
  letter-spacing:1.4px;font-size:10px;font-weight:700;color:var(--lcsp-sale);margin-top:5px}
.lcsp-lead-price .lcsp-off{align-self:center;margin-top:0}

/* ---- colour dots — the store's swatch vocabulary at label scale ---- */
.lcsp-swatches{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.lcsp-sw{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.22);
  display:inline-block}
.lcsp-sw-more{font-style:normal;font-family:var(--lcsp-label);font-size:10px;
  letter-spacing:1px;color:var(--lcsp-muted)}

/* ---- the way through ----------------------------------------------------
   A row the width of the shelf rather than a pill: it reads as a door with more
   behind it, where a button reads as one more control. */
.lcsp-door{display:flex;align-items:center;gap:14px;text-decoration:none;
  color:var(--lcsp-ink);margin-top:clamp(30px,3.4vw,46px);padding:20px 2px;
  border-top:1px solid var(--lcsp-line);font-size:clamp(1rem,1.3vw,1.15rem);
  transition:color .2s ease,border-color .2s ease}
.lcsp-door i{font-style:normal;font-size:1.2em;transition:transform .34s var(--lcsp-ease)}
.lcsp-door:hover{color:var(--lcsp-accent);border-top-color:var(--lcsp-accent)}
.lcsp-door:hover i{transform:translateX(7px)}
.lcsp-door:focus-visible{outline:2px solid var(--lcsp-accent);outline-offset:3px}

/* ---- narrower ---- */
@media(max-width:1080px){
  .lcsp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .lcsp-h{max-width:none}
  /* At two columns the flagship takes the full row: a double tile beside a
     single one leaves a stub nothing can fill. */
  .lcsp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lcsp-tile--lead{grid-column:1 / -1;grid-row:auto}
  .lcsp-tile--lead .lcsp-plate{min-height:0;aspect-ratio:1/1;padding:26px}
  .lcsp-lead-foot .lc-shop-btn{width:100%;justify-content:center}
  /* Tighter tracking so a long shop name stays on one line and the product names
     beside each other keep a common baseline. Truncating is not the trade —
     whose shelf an item is on is the whole point of the label. */
  .lcsp-store{letter-spacing:1px}
}

@media(prefers-reduced-motion:reduce){
  .lcsp-plate img,.lcsp-cue,.lcsp-door,.lcsp-door i{transition:none}
  .lcsp-tile:hover .lcsp-plate img{transform:none}
  .lcsp-door:hover i{transform:none}
  .lcsp-cue{opacity:1;transform:none}
}