/* ============================================================
   STORE — Variant A: "Index"
   Numbered grid in small Helvetica; optional catalogue index on the left.
   Everything that isn't a [caption] is set in the site's Helvetica.
   Tweakable values live on .store-a and are overridden inline on <body> by tweaks.js;
   on/off switches are attributes on <html>.
   ============================================================ */

.store-a {
  --a-cols: 3;
  --a-gap: 34px;
  --a-img-gap: 14px;        /* space between an item's text and its picture */
  --a-img: 100%;            /* picture size, share of the cell width (product shots are square) */
  --a-img-scale: 1;

  --a-index-w: 22%;         /* width of the left index column (when shown) */
  --a-list-size: var(--text-s);  /* index type size */
  --a-list-lh: 1.35;
  --a-list-opacity: 0.55;   /* resting opacity of index lines */

  --a-text: var(--text-s);  /* grid metadata size */
  --a-track: 0.08em;        /* tracking for all Helvetica text */
  --a-muted: 1;             /* opacity of secondary lines (format) */

  --a-zone: 26px;           /* gallery zone square size */
  --a-zone-gap: 10px;
  --a-dim: 0.84;            /* opacity of non-hovered grid images, when dimming is on */
  --a-follow: 440px;        /* cursor-follow image width */
  --a-follow-x: -9999px;
  --a-follow-y: -9999px;
}

.a {
  padding: 0 var(--margin) 8rem;
  color: var(--primary);
  font-family: helvetica-neue-lt-pro, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--a-text);
  letter-spacing: var(--a-track);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* ---- Layout ---------------------------------------------------------- */
.a-layout {
  position: relative;
  z-index: 1;                       /* keeps the page above the follow image */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: calc(var(--margin) * 2);
  align-items: start;
}
.a-index { display: none; }
html[data-index] .a-layout { grid-template-columns: minmax(180px, var(--a-index-w)) minmax(0, 1fr); }
html[data-index] .a-index { display: block; }

/* ---- Index list (hidden unless `Index column` is on) ------------------ */
.a-index {
  position: sticky;
  top: var(--margin);
}
.a-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.a-name { margin: 0; }
.a-name-link {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto 4px;   /* num | name | price | mark */
  align-items: baseline;
  column-gap: 0.6em;
  padding: 0.18em 0;
  color: var(--primary);
  text-decoration: none;
  font-size: var(--a-list-size);
  line-height: var(--a-list-lh);
  opacity: var(--a-list-opacity);
  transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.a-name-link:hover,
.a-name.is-active .a-name-link,
.a-name.is-inview .a-name-link {
  opacity: 1;
  filter: none;
}
.a-name .a-num {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
}
.a-name-text { overflow-wrap: anywhere; }
.a-name-price {
  text-align: right;
  white-space: nowrap;
}
.a-name.is-soldout .a-name-price {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* square end-mark, lights up with the line */
.a-mark {
  width: 4px;
  height: 4px;
  align-self: center;
  background: currentColor;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.a-name-link:hover .a-mark,
.a-name.is-active .a-mark,
.a-name.is-inview .a-mark { opacity: 1; }

/* dotted leaders (tracklist style), off by default */
.a-leader { display: none; }
html[data-leaders] .a-name-link { grid-template-columns: 2.4em auto minmax(0, 1fr) auto 4px; }
html[data-leaders] .a-leader {
  display: block;
  align-self: end;
  margin-bottom: 0.32em;
  border-bottom: 1px dotted currentColor;
  opacity: 0.45;
  min-width: 1em;
}

/* uppercase mode for names */
html[data-case="upper"] .a-name-text,
html[data-case="upper"] .a-cell-title {
  text-transform: uppercase;
  letter-spacing: calc(var(--a-track) + 0.04em);
}

/* ---- Grid ------------------------------------------------------------ */
.a-grid {
  display: grid;
  grid-template-columns: repeat(var(--a-cols), minmax(0, 1fr));
  gap: var(--a-gap);
}
.a-cell {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;   /* meta | picture | gallery dots (and any spare row height) */
  color: var(--primary);
  text-decoration: none;
  overflow: hidden;
  transition: none;
}
.a-cell:hover { filter: none; }
html[data-hairlines] .a-cell {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}
.a-cell-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 4px;
  line-height: 1.3;
}
.a-cell-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}
.a-cell-price { white-space: nowrap; }
.a-cell-format { opacity: var(--a-muted); font-style: italic; }
/* gallery dots sit under the picture, on the same left edge */
.a-cell-foot {
  display: flex;
  align-items: flex-start;
  min-height: 18px;
  padding: 4px 8px 6px;
}
.a-cell.is-soldout .a-cell-price {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---- Gallery hints (tweak: Gallery hint = zones | counter | dots | none) ---- */
.a-dots, .a-cursor, .a-zones { display: none; }
html[data-hint="dots"]    .a-dots   { display: inline-flex; }
html[data-hint="counter"] .a-dots   { display: inline-flex; }
html[data-hint="counter"] .a-cursor.is-on { display: inline-flex; }
html[data-hint="zones"]   .a-zones  { display: flex; }
html[data-gallery="off"] .a-dots,
html[data-gallery="off"] .a-cursor,
html[data-gallery="off"] .a-zones,
html[data-gallery="interval"] .a-zones { display: none; }

/* dots: one 4px square per image, always visible */
.a-dots { gap: 3px; }
.a-dot {
  display: block;
  width: 4px;
  height: 4px;
  background: currentColor;
  opacity: 0.28;
  transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.a-dot.is-on { opacity: 1; }

/* counter: "← 1 of 3 →" riding just under the cursor while a gallery cell is hovered */
.a-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  pointer-events: none;
  align-items: baseline;
  gap: 0.5em;
  white-space: nowrap;
  color: var(--primary);
  transform: translate(var(--a-cur-x, -9999px), var(--a-cur-y, -9999px)) translate(-50%, calc(-100% - 14px));   /* centred above the pointer */
}
.a-arrow { transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.a-arrow::before { content: "\2190"; }            /* ← */
.a-arrow--next::before { content: "\2192"; }      /* → */
html[data-gallery="scrub-y"] .a-arrow--prev::before { content: "\2191"; }   /* ↑ */
html[data-gallery="scrub-y"] .a-arrow--next::before { content: "\2193"; }   /* ↓ */
html[data-gallery="interval"] .a-arrow { visibility: hidden; }
.a-arrow.is-end { opacity: 0.3; }
.a-count-k {
  display: inline-block;
  min-width: 1ch;
  text-align: right;
}

/* zones: a row of small squares centred over the picture; hovering one shows that image.
   store-a.js sizes the box to the first image's footprint on hover (falls back to the whole figure). */
.a-zones {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  gap: var(--a-zone-gap);
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
  counter-reset: zone;
}
.a-cell:hover .a-zones { opacity: 1; }
html[data-gallery="scrub-y"] .a-zones { flex-direction: column; }
.a-zone {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: var(--a-zone);
  height: var(--a-zone);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px currentColor;
  counter-increment: zone;
  transition:
    background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
    color 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.a-zone::before {
  content: counter(zone);
  font-family: dm, Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
}
.a-zone.is-on { background: currentColor; }   /* filled square… */
.a-zone.is-on::before { color: var(--secondary); }   /* …with the number knocked out */

/* ---- Hint style: how zones + counter sit on the picture
   (tweak: Hint style = difference | halo | blur | shadow | chip) ------------- */

/* difference: white, inverted against whatever is behind it; no box at all */
html[data-hs="difference"] .a-cursor,
html[data-hs="difference"] .a-zone {
  color: #fff;
  mix-blend-mode: difference;
}
html[data-hs="difference"] .a-zone.is-on::before { color: #000; }
/* reveal transforms make each cell its own blend group, so it needs the page colour as a backdrop */
html[data-hs="difference"] .a-cell { background: var(--secondary); }

/* halo: plain type with a soft glow of the page colour behind it */
html[data-hs="halo"] .a-cursor {
  text-shadow:
    0 0 2px var(--secondary),
    0 0 6px var(--secondary),
    0 0 14px var(--secondary);
}
html[data-hs="halo"] .a-zone {
  filter: drop-shadow(0 0 3px var(--secondary)) drop-shadow(0 0 8px var(--secondary));
}

/* blur: frosted, translucent chips */
html[data-hs="blur"] .a-cursor,
html[data-hs="blur"] .a-zone {
  background: color-mix(in srgb, var(--secondary) 45%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
html[data-hs="blur"] .a-cursor { padding: 4px 7px 3px; }
html[data-hs="blur"] .a-zone.is-on { background: color-mix(in srgb, var(--primary) 85%, transparent); }

/* shadow: light type with a soft dark shadow, like a caption printed on the photo */
html[data-hs="shadow"] .a-cursor,
html[data-hs="shadow"] .a-zone { color: var(--secondary); }
html[data-hs="shadow"] .a-cursor {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 10px rgba(0, 0, 0, 0.3);
}
html[data-hs="shadow"] .a-zone {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
}
html[data-hs="shadow"] .a-zone.is-on::before { color: var(--primary); }

/* chip: solid page-colour box with a hairline */
html[data-hs="chip"] .a-cursor {
  padding: 4px 7px 3px;
  background: var(--secondary);
  box-shadow: 0 0 0 1px var(--primary);
}
html[data-hs="chip"] .a-zone { background: var(--secondary); }
html[data-hs="chip"] .a-zone.is-on { background: var(--primary); }

/* Pictures are drawn whole (empty space in a photo stays part of it) and hang a fixed gap
   under the text. The box is as tall as the item's tallest picture (--a-fig, height ÷ width,
   see storeData.js), so flipping the gallery never moves anything. */
.a-cell-fig {
  position: relative;
  box-sizing: content-box;
  aspect-ratio: 1 / var(--a-fig, 1);
  margin: 0;
  padding: var(--a-img-gap) 8px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.a-img { display: none; }
.a-img.is-on { display: block; }
.a-cell img {
  width: auto;
  height: auto;
  max-width: min(100%, calc(var(--a-img) * var(--a-img-scale)));
  max-height: 100%;
  transform-origin: top left;
  transition:
    transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* dimming the other images is opt-in (tweak: Dim others) */
html[data-dim] .a-grid.has-active .a-cell:not(.is-active) img { opacity: var(--a-dim); }
.a-cell.is-active img,
.a-cell:hover img { transform: scale(1.06); }

.a-cell--blank { pointer-events: none; }
.a-cell--blank .square { position: absolute; left: 8px; top: 10px; }

/* ---- Cursor-follow preview (index only; sits BEHIND the page) ------- */
.a-follow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;                      /* behind nav, index and grid; above the page colour */
  width: var(--a-follow);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--a-follow-x), var(--a-follow-y)) translate(-50%, -50%);
  transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.a-follow img {
  display: block;
  width: 100%;
  height: auto;
}
.a-follow.is-on { opacity: 1; }
html[data-follow-front] .a-follow { z-index: 60; }
html[data-follow-blend="multiply"]   .a-follow img { mix-blend-mode: multiply; }
html[data-follow-blend="luminosity"] .a-follow img { mix-blend-mode: luminosity; }
html[data-follow-blend="difference"] .a-follow img { mix-blend-mode: difference; }
html[data-no-follow] .a-follow { display: none; }

/* ---- Responsive ------------------------------------------------------ */
/* Values here sit on .a (not body) so they beat the panel's inline values on phones. */
@media (max-width: 900px) {
  .a { --a-cols: 2; --a-gap: 14px; }
  html[data-index] .a-layout { grid-template-columns: 1fr; row-gap: 3rem; }
  .a-index { position: static; }
  .a-follow { display: none; }
  /* gallery dots always show on small screens: there is no hover to bring up the
     counter, so they are the one sign a cell has several pictures (swipe to flip) */
  .a-dots { display: inline-flex; gap: 4px; }
  .a-dot { width: 5px; height: 5px; opacity: 0.3; }
  .a-cursor, .a-zones { display: none !important; }
}
@media (max-width: 600px) {
  /* phones: one column (tweak: Phone columns), roomier cells, bigger pictures */
  .a { --a-cols: 1; --a-gap: 18px; }
  html[data-mcols="2"] .a { --a-cols: 2; --a-gap: 12px; --a-text: calc(var(--text-s) - 2px); }
  .a { padding-bottom: 5rem; }
  .a-cell-meta { padding: 8px 10px 6px; }
  .a-cell-fig { padding: var(--a-img-gap) 10px 6px; }
  .a-cell-foot { padding: 4px 10px 8px; }
  .a-cell--blank { display: none; }
}
@media (hover: none) {
  .a-follow { display: none; }
  /* no hover on touch: the position dots stay visible and a sideways swipe flips the pictures */
  html[data-hint] .a-dots { display: inline-flex; }
  html[data-gallery="off"] .a-dots,
  .a-cursor, .a-zones { display: none !important; }
  .a-cell:hover img, .a-cell.is-active img { transform: none; }
  .a-cell { touch-action: pan-y; }
}