/*
 * "Find your cooler" — the homepage's map of where SPICEUP is sold (2026-10-01).
 *
 * The export has no such section; coolerMap() in home.js builds it as plain markup after
 * the export's "Where to find us" (#stockists) and this sheet draws it. Carried into the
 * page inside the bridge's single <script>, like the other sheets (lib/design-page.ts).
 *
 * The licence, the same shape as the hero layer's:
 *
 *   1. Every rule is scoped under `html[data-su-coolers]`, which coolerMap() sets only
 *      after the section is in the page. Nothing in the export is restyled or hidden.
 *   2. The palette, faces, radii and easing are the brand's, declared once below and
 *      taken from the export's own "Where to find us": its cream, forest, leaf and gold,
 *      Lilita One over Karla, the 100px pills, cubic-bezier(.2,.8,.2,1).
 *   3. Motion that runs unasked (the active pin's pulse) stops under
 *      prefers-reduced-motion; so do the transitions. The map's flights are home.js's,
 *      and it jumps instead of flying there too.
 */

html[data-su-coolers] {
  --su-gold: #FFB81C;
  --su-leaf: #007A33;
  --su-forest: #16321C;
  --su-ink: #2D2926;
  --su-cream: #F7F3E8;
  --su-ease: cubic-bezier(.2, .8, .2, 1);
}

/* One screen (asked for on 2026-10-01): the top padding clears the fixed header
   (--su-cool-top, measured by cooler-map.js), the map fills what is left and the list
   scrolls inside its own column. Below 900px it stacks instead.
   The bottom padding MATCHES the top (2026-10-02, client request): it used to be ~44px
   under a ~150px top, so scrolled past rather than snapped to, the section read as all
   air above and none below. The content takes the screen less both paddings, never less
   than 460px — on a short screen the section grows past one screen instead of
   squeezing the map. */
html[data-su-coolers] [data-su-coolers] {
  --su-cool-pad: calc(var(--su-cool-top, 120px) + clamp(14px, 3vh, 36px));
  position: relative;
  box-sizing: border-box;
  background: var(--su-cream);
  color: var(--su-ink);
  padding: var(--su-cool-pad) var(--gut, clamp(20px, 5vw, 72px));
  font-family: Karla, sans-serif;
  overflow: clip;
}

html[data-su-coolers] .su-cool-in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  /* The words and the finder sit centred against the map: two flexible spacers around
     them take the slack. The finder's track can shrink (minmax(0, auto)) once a long list
     would overflow the screen — the list then scrolls inside it instead. */
  grid-template-areas: ". map" "head map" "find map" ". map";
  grid-template-rows: 1fr auto minmax(0, auto) 1fr;
  column-gap: clamp(32px, 5vw, 90px);
  row-gap: clamp(14px, 2.6vh, 28px);
  height: max(460px, calc(100vh - 2 * var(--su-cool-pad)));
  height: max(460px, calc(100svh - 2 * var(--su-cool-pad)));
  max-width: 1440px;
  margin: 0 auto;
}
html[data-su-coolers] .su-cool-head { grid-area: head; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 22px); }
html[data-su-coolers] .su-cool-map { grid-area: map; }
html[data-su-coolers] .su-cool-find { grid-area: find; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); min-width: 0; min-height: 0; }

/* ---- words ---- */

html[data-su-coolers] .su-cool-kick {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px Karla, sans-serif; letter-spacing: 2.5px; color: var(--su-leaf);
}
html[data-su-coolers] .su-cool-kick span { width: 26px; height: 1px; background: currentColor; }
html[data-su-coolers] .su-cool-kick b { font-weight: 700; }
html[data-su-coolers] [data-su-coolers] h2 {
  font-family: 'Lilita One', sans-serif; font-weight: 400;
  font-size: clamp(34px, min(5.4vw, 8.2vh), 90px); line-height: .9; letter-spacing: -.6px;
  margin: 0; color: var(--su-forest);
}
html[data-su-coolers] [data-su-coolers] h2 .o { color: transparent; -webkit-text-stroke: 2px var(--su-leaf); }
html[data-su-coolers] .su-cool-intro {
  font-size: clamp(14px, 1.9vh, 15px); line-height: 1.6; margin: 0; max-width: 54ch; text-wrap: pretty;
  color: color-mix(in srgb, var(--su-ink) 78%, var(--su-cream));
}

/* ---- the map ---- */

html[data-su-coolers] .su-cool-map {
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 70% 85%, rgba(255, 184, 28, .14), transparent 60%),
    radial-gradient(90% 70% at 20% 10%, rgba(0, 122, 51, .35), transparent 65%),
    var(--su-forest);
  overflow: hidden;
  isolation: isolate;
  color: var(--su-cream);
}
html[data-su-coolers] .su-cool-map.is-failed .su-cool-svg { display: none; }
html[data-su-coolers] .su-cool-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .9s var(--su-ease);
  touch-action: pan-y; cursor: default;
  -webkit-user-select: none; user-select: none;
}
html[data-su-coolers] .su-cool-map.is-ready .su-cool-svg { opacity: 1; }
html[data-su-coolers] .su-cool-map.is-zoomed .su-cool-svg { touch-action: none; cursor: grab; }
html[data-su-coolers] .su-cool-map.is-dragging .su-cool-svg { cursor: grabbing; }

html[data-su-coolers] .su-cool-d {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  transition: fill .35s ease, fill-opacity .35s ease, stroke .35s ease;
}
html[data-su-coolers] .su-cool-d.off { fill: var(--su-cream); fill-opacity: .07; stroke: var(--su-cream); stroke-opacity: .18; stroke-width: 1; }
html[data-su-coolers] .su-cool-d.now { fill: var(--su-gold); stroke: var(--su-forest); stroke-width: 1.5; cursor: pointer; }
html[data-su-coolers] .su-cool-d.now:hover { fill: color-mix(in srgb, var(--su-gold) 80%, var(--su-cream)); }
html[data-su-coolers] .su-cool-d.now.dim { fill-opacity: .4; }
html[data-su-coolers] .su-cool-d.soon { fill: var(--su-gold); fill-opacity: .16; stroke: var(--su-gold); stroke-width: 1.4; stroke-dasharray: 5 4; }
html[data-su-coolers] .su-cool-d:focus { outline: none; }
html[data-su-coolers] .su-cool-d.now:focus-visible { stroke: var(--su-cream); stroke-width: 3; }

/* Labels and pins are scaled by --pz (map units per screen pixel, set by home.js on every
   zoom), so they keep their size on screen while the island grows under them. */
html[data-su-coolers] .su-cool-lbl {
  font: 800 11px Karla, sans-serif; letter-spacing: .2em;
  fill: var(--su-forest); pointer-events: none;
  transform: scale(var(--pz, 1));
}
html[data-su-coolers] .su-cool-pin { cursor: pointer; outline: none; }
html[data-su-coolers] .su-cool-pin .s {
  transform: scale(var(--pz, 1));
  transition: opacity .35s ease;
}
html[data-su-coolers] .su-cool-pin path { fill: var(--su-forest); stroke: var(--su-cream); stroke-width: 2; transition: fill .25s ease; }
html[data-su-coolers] .su-cool-pin .dot { fill: var(--su-gold); }
html[data-su-coolers] .su-cool-pin .halo { fill: var(--su-cream); opacity: 0; transform-origin: 0 -18px; }
html[data-su-coolers] .su-cool-pin:hover path,
html[data-su-coolers] .su-cool-pin:focus-visible path,
html[data-su-coolers] .su-cool-pin.on path { fill: var(--su-leaf); }
html[data-su-coolers] .su-cool-pin:focus-visible .halo { opacity: .45; }
html[data-su-coolers] .su-cool-pin.on .halo { animation: su-cool-pulse 1.8s var(--su-ease) infinite; }
html[data-su-coolers] .su-cool-pin.dim .s { opacity: .3; }
@keyframes su-cool-pulse {
  0% { opacity: .55; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.9); }
}


html[data-su-coolers] .su-cool-tag {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 100px;
  background: var(--su-gold); color: var(--su-forest);
  font: 800 10px Karla, sans-serif; letter-spacing: .2em; white-space: nowrap;
  max-width: calc(100% - 100px); overflow: hidden; text-overflow: ellipsis;
}
html[data-su-coolers] .su-cool-zoom {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
}
html[data-su-coolers] .su-cool-zoom button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(247, 243, 232, .22); background: rgba(247, 243, 232, .08);
  color: var(--su-cream); font: 700 20px/1 Karla, sans-serif;
  display: grid; place-items: center; cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .35s var(--su-ease);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-su-coolers] .su-cool-zoom button:hover { background: var(--su-gold); color: var(--su-forest); transform: translateY(-2px); }
html[data-su-coolers] .su-cool-legend {
  position: absolute; left: 20px; bottom: 18px; z-index: 2;
  display: flex; gap: 16px; flex-wrap: wrap;
  font: 700 10px Karla, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 243, 232, .78);
}
html[data-su-coolers] .su-cool-legend span { display: inline-flex; align-items: center; gap: 8px; }
html[data-su-coolers] .su-cool-legend span[hidden] { display: none; }
html[data-su-coolers] .su-cool-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--su-gold); }
html[data-su-coolers] .su-cool-legend i.soon { background: rgba(255, 184, 28, .16); border: 1.4px dashed var(--su-gold); }
html[data-su-coolers] .su-cool-credit {
  position: absolute; right: 16px; bottom: 14px; z-index: 2;
  font: 500 10px Karla, sans-serif; color: rgba(247, 243, 232, .5);
}
html[data-su-coolers] .su-cool-pop {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(-50%, calc(-100% - 40px));
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 10px 16px; border-radius: 14px; max-width: 240px; text-align: center;
  background: var(--su-cream); color: var(--su-forest);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}
html[data-su-coolers] .su-cool-pop[hidden] { display: none; }
html[data-su-coolers] .su-cool-pop b { font: 400 18px/1.05 'Lilita One', sans-serif; }
html[data-su-coolers] .su-cool-pop span { font: 700 10px Karla, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--su-leaf); }
html[data-su-coolers] .su-cool-pop::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px;
  background: var(--su-cream); transform: translateX(-50%) rotate(45deg);
}

/* ---- the finder ---- */

html[data-su-coolers] .su-cool-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html[data-su-coolers] .su-cool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-su-coolers] .su-cool-chips button,
html[data-su-coolers] .su-cool-chips .soon {
  height: 38px; padding: 0 16px; border-radius: 100px;
  border: 1.5px solid rgba(22, 50, 28, .22); background: transparent; color: var(--su-forest);
  font: 700 11px Karla, sans-serif; letter-spacing: .16em;
  display: inline-flex; align-items: center; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
html[data-su-coolers] .su-cool-chips button:hover { border-color: var(--su-forest); }
html[data-su-coolers] .su-cool-chips button[aria-pressed="true"] { background: var(--su-forest); border-color: var(--su-forest); color: var(--su-cream); }
html[data-su-coolers] .su-cool-chips .soon { border-style: dashed; cursor: default; color: color-mix(in srgb, var(--su-forest) 70%, var(--su-cream)); }
html[data-su-coolers] .su-cool-status { min-height: 1.4em; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--su-leaf); }

html[data-su-coolers] .su-cool-list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid rgba(22, 50, 28, .16);
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(22, 50, 28, .3) transparent;
}
html[data-su-coolers] .su-cool-list[hidden] { display: none; }
html[data-su-coolers] .su-cool-list > li { border-bottom: 1px solid rgba(22, 50, 28, .16); transition: background .3s ease; }
html[data-su-coolers] .su-cool-list > li.on { background: rgba(255, 184, 28, .18); }
html[data-su-coolers] .su-cool-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px;
  padding: clamp(12px, 2vh, 18px) 14px; border: none; background: none; text-align: left; cursor: pointer; color: inherit;
}
html[data-su-coolers] .su-cool-row .n { font: 400 clamp(20px, 1.8vw, 26px)/1 'Lilita One', sans-serif; color: var(--su-forest); }
html[data-su-coolers] .su-cool-row .m { grid-column: 1; font-size: 13.5px; color: color-mix(in srgb, var(--su-ink) 78%, var(--su-cream)); }
html[data-su-coolers] .su-cool-more { padding: 0 14px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.55; }
html[data-su-coolers] .su-cool-more[hidden] { display: none; }
html[data-su-coolers] .su-cool-more p { margin: 0; }
html[data-su-coolers] .su-cool-more .h { color: color-mix(in srgb, var(--su-ink) 78%, var(--su-cream)); }
html[data-su-coolers] .su-cool-more .act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
html[data-su-coolers] .su-cool-more .act a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 100px;
  font: 600 13.5px Karla, sans-serif; text-decoration: none;
  transition: background .3s ease, color .3s ease, transform .35s var(--su-ease);
}
html[data-su-coolers] .su-cool-more .dir { background: var(--su-forest); color: var(--su-cream); }
html[data-su-coolers] .su-cool-more .dir:hover { background: var(--su-leaf); transform: translateY(-2px); }
html[data-su-coolers] .su-cool-more .call { border: 1.5px solid rgba(22, 50, 28, .3); color: var(--su-forest); }
html[data-su-coolers] .su-cool-more .call:hover { border-color: var(--su-forest); }

/* Keyboard focus, visible everywhere in the section (CLAUDE.md §2.10). */
html[data-su-coolers] [data-su-coolers] :is(button, a):focus-visible {
  outline: 3px solid var(--su-gold); outline-offset: 2px;
}
html[data-su-coolers] .su-cool-pin:focus-visible path { stroke: var(--su-gold); stroke-width: 3; }

/* ---- small screens: the words, the map, then the finder ---- */

@media (max-width: 900px) {
  html[data-su-coolers] [data-su-coolers] { height: auto; min-height: 0; padding-top: clamp(64px, 9vh, 96px); padding-bottom: clamp(64px, 9vh, 96px); }
  html[data-su-coolers] .su-cool-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "map" "find";
    grid-template-rows: auto;
    height: auto;
  }
  /* The map alone fits the screen under the header, so it can be seen whole. */
  html[data-su-coolers] .su-cool-map { height: min(118vw, 600px, calc(100svh - var(--su-cool-top, 100px) - 32px)); min-height: 380px; border-radius: 22px; }
  html[data-su-coolers] .su-cool-list { max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  html[data-su-coolers] .su-cool-tag { top: 14px; left: 14px; height: 26px; padding: 0 11px; font-size: 9px; }
  html[data-su-coolers] .su-cool-zoom { top: 14px; right: 14px; }
  html[data-su-coolers] .su-cool-zoom button { width: 38px; height: 38px; }
  html[data-su-coolers] .su-cool-legend { left: 14px; bottom: 34px; }
  html[data-su-coolers] .su-cool-credit { left: 14px; right: auto; bottom: 12px; }
}

/* ---- phones: clean and minimal (2026-10-14) ----
   Below 900px only, so the desktop composition is untouched. The words clear the fixed
   header; the chips are one row that scrolls sideways under soft edges; the map is about
   square and frames the lit districts (cooler-map.js: home() pads less, declutter() thins
   out labels that would collide); the controls are one small capsule; the legend sits under the
   tag and the OpenStreetMap credit (the licence: it stays visible) alone along the foot. */
@media (max-width: 899px) {
  html[data-su-coolers] [data-su-coolers] {
    padding-top: calc(var(--su-cool-top, 96px) + 28px);
    padding-bottom: 56px;
  }
  html[data-su-coolers] .su-cool-in { row-gap: 22px; }
  html[data-su-coolers] .su-cool-head { gap: 14px; }
  html[data-su-coolers] .su-cool-intro { font-size: 15px; line-height: 1.5; max-width: 40ch; }

  html[data-su-coolers] .su-cool-tools { display: block; }
  html[data-su-coolers] .su-cool-chips {
    flex-wrap: nowrap; gap: 8px;
    margin: 0 calc(-1 * var(--gut, clamp(20px, 5vw, 72px)));
    padding: 2px var(--gut, clamp(20px, 5vw, 72px));
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gut, clamp(20px, 5vw, 72px));
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  html[data-su-coolers] .su-cool-chips::-webkit-scrollbar { display: none; }
  html[data-su-coolers] .su-cool-chips button,
  html[data-su-coolers] .su-cool-chips .soon {
    flex: none; height: 36px; padding: 0 13px; font-size: 10.5px; letter-spacing: .12em; white-space: nowrap;
  }
  html[data-su-coolers] .su-cool-status:empty { display: none; }

  html[data-su-coolers] .su-cool-lbl { transition: opacity .25s ease; }
  html[data-su-coolers] .su-cool-lbl.is-hid { opacity: 0; }
}
@media (max-width: 560px) {
  html[data-su-coolers] .su-cool-map {
    height: min(94vw, 400px, calc(100svh - var(--su-cool-top, 96px) - 48px));
    min-height: 300px;
    border-radius: 20px;
  }
  html[data-su-coolers] .su-cool-tag {
    top: 12px; left: 12px; height: 24px; padding: 0 10px;
    font-size: 8.5px; letter-spacing: .16em; max-width: calc(100% - 70px);
  }
  /* +, − and the whole-island button as one slim capsule. */
  html[data-su-coolers] .su-cool-zoom {
    top: 12px; right: 12px; gap: 0;
    border-radius: 100px; overflow: hidden;
    border: 1px solid rgba(247, 243, 232, .2); background: rgba(22, 50, 28, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  html[data-su-coolers] .su-cool-zoom button {
    width: 34px; height: 34px; border: none; border-radius: 0; background: transparent;
    font-size: 17px; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-su-coolers] .su-cool-zoom button + button { border-top: 1px solid rgba(247, 243, 232, .14); }
  html[data-su-coolers] .su-cool-zoom button:hover { transform: none; }
  html[data-su-coolers] .su-cool-zoom svg { width: 13px; height: 13px; }
  html[data-su-coolers] .su-cool-lbl { font-size: 9px; letter-spacing: .14em; }
  /* The legend sits under the tag (the context, top left); the credit alone along the
     bottom, right — so neither runs into the other when "Coming soon" joins the key. */
  html[data-su-coolers] .su-cool-legend { left: 14px; top: 46px; bottom: auto; gap: 12px; font-size: 8.5px; letter-spacing: .12em; }
  html[data-su-coolers] .su-cool-legend span { gap: 6px; }
  html[data-su-coolers] .su-cool-legend i { width: 9px; height: 9px; border-radius: 2px; }
  html[data-su-coolers] .su-cool-credit { left: auto; right: 12px; bottom: 10px; font-size: 8.5px; line-height: 1.2; color: rgba(247, 243, 232, .55); }
  html[data-su-coolers] .su-cool-pop { padding: 8px 12px; max-width: 200px; }
  html[data-su-coolers] .su-cool-pop b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-su-coolers] [data-su-coolers] *,
  html[data-su-coolers] [data-su-coolers] *::after { transition: none !important; animation: none !important; }
}