/** Shopify CDN: Minification failed

Line 639:0 Unexpected "}"

**/
/**
 * Couor map — cartographic ink matches map/render.py's palette exactly
 * (ABYSS/WATER/LAND/OUT/ICE constants), independent of the swappable UI
 * color schemes. The map is maximalist; the chrome around it is not.
 */
.couor-map-section {
  margin: 0;
  padding: 0;
}

.couor-map-section__viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

couor-map {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #070c12;
  opacity: 0;
  transition: opacity 0.6s ease;
}

couor-map.is-loaded {
  opacity: 1;
}

.couor-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  /* The camera animates as a compositor transform on this element (see
     couor-map.js) — origin must be the top-left corner for the painted-vs-
     camera math, and will-change keeps the raster on its own GPU layer so
     moves never repaint the artwork. */
  transform-origin: 0 0;
  will-change: transform;
}

.couor-map__svg:active {
  cursor: grabbing;
}

/* Two-layer camera (see couor-map.js): the base copy is painted at the
   world view forever and only ever moves by transform; the sharp copy
   repaints hidden and fades in once actually painted. The stale state
   must hide INSTANTLY (no transition) — it exists precisely so a freshly
   re-viewBoxed raster is never visible before its paint lands. */
.couor-map__svg--sharp {
  transition: opacity 100ms linear;
}

.couor-map__svg--sharp.is-stale {
  opacity: 0;
  transition: none;
}

/* Place names on the chart. Self-hosted rather than pulled from Google
   Fonts (which is what the generated section does) — the build plan rules
   out hotlinking, and it's an extra round trip on the one page that is
   entirely this map. Pinyon Script is OFL, so self-hosting is fine;
   Snell Roundhand stays a local-only fallback and is never embedded. */
@font-face {
  font-family: 'Pinyon Script';
  src: url('pinyon-script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   Map artwork styling — ported from couor-map_1.html's <style>.
   Every selector is scoped under `couor-map` on purpose: an SVG's own
   <style> is NOT scoped, so injecting the artwork with its stylesheet
   intact would leak rules like `text{fill:...}` onto the product and
   collection content rendered in the panel above it.
   --------------------------------------------------------------- */
couor-map {
  --abyss: #080c11;
  --ink: #2a2114;
  --ink-soft: #5a4c33;
  --sea-in: #b7c7c6;
  --sea-out: #7d9299;
  --land: #dccfa8;
  --coast: #4b3f28;
  --outer: #c6b691;
  --outer-coast: #584d33;
  --ice: #dde9ed;
  --ice-edge: #7f9aa6;
  --rust: #8a4a26;
  --brass: #9c7b39;
  --glass: #6fd6d1;
}

couor-map .coast { stroke: var(--coast); stroke-width: 1.15; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
couor-map .landf { fill: var(--land); }
couor-map .lakef { fill: var(--sea-in); stroke: var(--coast); stroke-width: .8; vector-effect: non-scaling-stroke; }
couor-map .icef { fill: var(--ice); fill-rule: evenodd; stroke: var(--ice-edge); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
couor-map .wall { fill: none; stroke: #eaf5f8; stroke-width: 3.4; opacity: .85; vector-effect: non-scaling-stroke; }
couor-map .wall2 { fill: none; stroke: #5d7d8b; stroke-width: 1.2; opacity: .55; vector-effect: non-scaling-stroke; }
couor-map .outerf { fill: var(--outer); stroke: var(--outer-coast); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
couor-map .isle { fill: var(--outer); stroke: var(--outer-coast); stroke-width: .8; vector-effect: non-scaling-stroke; }
couor-map .mount { fill: #9d9789; stroke: #544e42; stroke-width: .9; vector-effect: non-scaling-stroke; opacity: .9; }

couor-map .grat line,
couor-map .grat circle { fill: none; stroke: var(--brass); stroke-width: .8; stroke-dasharray: 2 8; opacity: .40; vector-effect: non-scaling-stroke; }
couor-map .rhumb line { stroke: var(--rust); stroke-width: .7; stroke-dasharray: 1 7; opacity: .30; vector-effect: non-scaling-stroke; }
couor-map .tropic { fill: none; stroke: var(--rust); stroke-width: 1.5; opacity: .5; vector-effect: non-scaling-stroke; }
couor-map .equator { fill: none; stroke: var(--rust); stroke-width: 2.2; stroke-dasharray: 14 7; opacity: .6; vector-effect: non-scaling-stroke; }
couor-map .rim { fill: none; stroke: var(--rust); stroke-width: 2; stroke-dasharray: 11 7; opacity: .62; vector-effect: non-scaling-stroke; }

couor-map text { fill: var(--ink); }
couor-map .maj { font-size: 104px; letter-spacing: 66px; opacity: .52; }
couor-map .mid { font-size: 56px; letter-spacing: 36px; opacity: .55; }
couor-map .min { font-size: 32px; letter-spacing: 20px; opacity: .48; }
couor-map .icelab { fill: #4a6673; opacity: .75; }
couor-map .hbm { font-size: 15px; letter-spacing: 5.5px; fill: var(--ink); opacity: .5; }
couor-map .sealab { font-style: italic; fill: #2f4a52; opacity: .55; letter-spacing: 16px; font-size: 46px; }
couor-map .place { font-family: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive; font-size: 21px; fill: var(--ink); opacity: .9; }
couor-map .lab-ghost text { fill: #20303a !important; opacity: .22 !important; }
couor-map .lab-ghost .sealab { fill: #1d3138 !important; }
couor-map .mon-b { fill: var(--sea-in); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
couor-map .mon-d { fill: none; stroke: var(--ink); stroke-width: 1.0; stroke-linecap: round; vector-effect: non-scaling-stroke; }
couor-map .mon-e { fill: var(--ink); }
couor-map .cre { mix-blend-mode: multiply; }
couor-map .wav path { fill: none; stroke: #33484e; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* The artwork ships its own "Home"/"Bermuda" pins and charted-triangle
   wash. Our interactive markers replace them, so hide the static pair
   rather than doubling up. */
couor-map #cm-charted circle,
couor-map #cm-charted text { display: none; }
/* Region markers — positioned in map-space via --map-x/--map-y set by couor-map.js,
   then translated to pixels each render. Sea-glass only appears here: it's the one
   living color, reserved for things you can actually touch. */
couor-map-region {
  position: absolute;
  /* Anchored at the host origin; couor-map.js moves markers purely by
     transform (translate to pixel position + centring shift), so marker
     motion never invalidates layout. */
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 5;
  will-change: transform;
}

couor-map-region:not(.is-placed) {
  display: none;
}

.couor-map-region__marker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body-family);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* Markers stay off the map until their region has actually been visited
   (menu click, or arriving with the matching #region- hash) — nothing to
   see here until you've been here. */
couor-map-region.is-revealed .couor-map-region__marker {
  opacity: 1;
  pointer-events: auto;
}

.couor-map-region__dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: rgba(var(--color-bone), 0.35);
  border: 0.1rem solid rgba(var(--color-bone), 0.6);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

couor-map-region[data-state='charted'] .couor-map-region__dot {
  background: rgb(var(--color-sea-glass));
  border-color: rgb(var(--color-sea-glass));
  box-shadow: 0 0 0.8rem rgba(var(--color-sea-glass), 0.7);
}

couor-map-region[data-state='locked'] .couor-map-region__dot {
  background: rgba(var(--color-rust), 0.5);
  border-color: rgb(var(--color-rust));
}

/* The name now lives above the menu (.couor-map__active-location), not
   pinned to the map coordinate where it used to collide with the menu
   stack — just the dot marks the spot now. */
.couor-map-region__label {
  display: none;
}

/* Controls */
.couor-map__controls {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 6;
  display: flex;
  gap: 0.8rem;
}

.couor-map__controls button {
  background: rgba(var(--color-abyss), 0.65);
  border: 0.1rem solid rgba(var(--color-bone), 0.3);
  color: rgb(var(--color-bone));
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  backdrop-filter: blur(0.4rem);
}

.couor-map__controls button:hover {
  border-color: rgb(var(--color-sea-glass));
  color: rgb(var(--color-sea-glass));
}

/* The panel's grid mode is transparent so the map shows through it — which
   means anything else underneath (the menu, the controls) would otherwise
   bleed through the gaps too. Hide them outright while a panel is open. */
body.couor-nav-open .couor-map__menu,
body.couor-nav-open .couor-map__controls,
body.couor-nav-open couor-map-region {
  display: none;
}

/* The panel's own close button lives in the same top-right corner as the
   cart icon (and back-to-map link, top-left) — hide both while a panel is
   open so the close (×) isn't sitting on top of the cart button. */
body.couor-nav-open .couor-cart-icon,
body.couor-nav-open .couor-back-to-map {
  display: none;
}

/* Main menu — individual translucent buttons sitting on the map itself,
   visible on landing, no trigger needed. Centered, stacked in the order
   they're defined in Shopify's main menu. */
/* Fixed anchor point, not centered in the viewport — flyTo() biases the
   map crop so a region's pin always lands exactly here (top: 24%), so the
   active-location label sits right at the pin and the buttons stack below
   it, instead of the whole group floating in the dead center where the
   pin would otherwise land. */
/* Centered by default (world view, nothing selected yet). Once a region
   becomes active, .is-active shifts it up to top: 24% — matching where
   flyTo() biases the pin to land, so the label sits right above it. */
.couor-map__menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  pointer-events: none;
  transition: top 0.9s ease, transform 0.9s ease;
}

/* Desktop: the menu never moves and never changes size — dead center of
   the screen regardless of how the map is panned, zoomed, or travelled.
   (It lives in the viewport overlay, not in map space, so map transforms
   can't touch it; flyTo() aims the pin just above the centered stack.)
   Mobile still shifts the stack up on selection so the collection panel
   has room beneath it. */
@media screen and (max-width: 749px) {
  .couor-map__menu.is-active {
    top: 24%;
    transform: translateX(-50%);
  }
}

/* The currently active region's name — sits above the menu stack instead
   of a text label fighting for space at its literal map coordinate. */
.couor-map__active-location {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: rgb(var(--color-sea-glass));
  text-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.8);
}

/* Somar-style plates: no grey fill — a bone outline with the label inside,
   and a thick slab on the left edge that reads as the button's extruded
   side. The map stays visible straight through them. */
.couor-map__menu-item {
  pointer-events: auto;
  background: transparent;
  border: 0.1rem solid rgba(var(--color-bone), 0.9);
  border-left: 0.55rem solid rgba(var(--color-bone), 0.9);
  color: rgb(var(--color-bone));
  text-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.65);
  font-family: var(--font-heading-family);
  font-size: 1.6rem;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
  padding: 1.2rem 3.2rem;
  min-width: 20rem;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, color 0.2s ease;
}

/* Desktop pointer only: the hovered item grows into the focal point (its
   hover also starts the map travelling — see couor-map-menu.js). */
@media (hover: hover) and (pointer: fine) {
  .couor-map__menu-item:hover,
  .couor-map__menu-item:focus-visible {
    transform: scale(1.16);
    z-index: 2;
    border-color: rgb(var(--color-sea-glass));
    color: rgb(var(--color-sea-glass));
  }
}

@media screen and (max-width: 749px) {
  .couor-map__menu-item {
    font-size: 1.2rem;
    padding: 1rem 2.4rem;
    min-width: 16rem;
  }
}

/* Content panel — slides up over the map to show whatever was clicked:
   a collection's products, a page's content, or a locked-region message. */
/* No backdrop-filter anywhere on this panel — see the note on
   .couor-map-panel--product below. The translucency comes from the
   background alpha alone, which composites correctly on every path. */
.couor-map-panel {
  position: absolute;
  inset: 0;
  z-index: 150;
  display: none;
  flex-direction: column;
  background: rgba(var(--color-abyss), 0.94);
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
  overflow: hidden;
}

.couor-map-panel:not([hidden]) {
  display: flex;
}

.couor-map-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Grid mode — just the product cards floating directly on the fully
   visible map. No wash, no prices — image and title only. */
.couor-map-panel--grid {
  background: transparent;
}

/* Page mode (About/Contact and any other plain page) — transparent over
   the map, same treatment as a collection grid. A text shadow carries the
   readability instead of a wash. */
.couor-map-panel--page {
  background: transparent;
}

.couor-map-panel--page .couor-map-panel__body {
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
  text-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.85);
}

.couor-map-panel--page .couor-map-panel__title {
  text-align: center;
  padding: 2.4rem 6rem 1.6rem;
  font-size: 2.8rem;
  text-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.9);
}

/* Product mode — translucent, not transparent: the product needs a
   settled backdrop to read against, but the map should still be
   recognizable behind it.

   Deliberately NOT using backdrop-filter. On a cold load (refresh or a
   direct link) couor-map-bootstrap.js creates this panel before the map
   SVG behind it has been built, and Chrome samples the backdrop once —
   capturing plain black and never re-sampling once the map paints. The
   result was a product page that rendered nearly black on refresh while
   looking correct when opened by clicking. Background alpha alone gives
   the same translucency and composites correctly in both cases. */
.couor-map-panel--product {
  background: rgba(var(--color-abyss), 0.62);
}

.couor-map-panel--product .couor-map-panel__body {
  padding: 1rem 2.4rem 3.2rem;
  max-width: 140rem;
  margin: 0 auto;
  width: 100%;
}

/* The panel already shows the product name as its sticky title — no need
   to repeat it again inside the content itself. */
.couor-map-panel--product .product-info__title-top {
  display: none;
}

.couor-map-panel--grid .couor-map-panel__body {
  padding: 1rem 2rem 3rem;
  max-width: 120rem;
  margin: 0 auto;
  width: 100%;
}

.couor-map-panel--grid .price {
  display: none;
}

.couor-map-panel__close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 2;
  background: none;
  border: none;
  color: rgb(var(--color-bone));
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
}

.couor-map-panel__close:hover {
  color: rgb(var(--color-sea-glass));
}

/* Sticky title — stays put while .couor-map-panel__body scrolls beneath
   it, so you always know what you're looking at. */
.couor-map-panel__title {
  flex-shrink: 0;
  margin: 0;
  padding: 2.4rem 6rem 1.2rem 2.4rem;
  font-family: var(--font-heading-family);
  font-size: 2.2rem;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: rgb(var(--color-bone));
}

.couor-map-panel__title:empty {
  display: none;
}

/* In grid mode the panel is transparent, so the region's name is the only
   thing telling you which territory's products you're looking at. Centre
   it and give it a shadow so it reads as a heading over the map rather
   than a stray label in the corner. Symmetric padding keeps it clear of
   the close button on both sides. */
.couor-map-panel--grid .couor-map-panel__title {
  text-align: center;
  padding: 2.4rem 6rem 1.6rem;
  font-size: 2.8rem;
  text-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.9);
}

.couor-map-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2.4rem 3.2rem;
  color: rgb(var(--color-bone));
}

.couor-map-panel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: rgba(var(--color-bone), 0.6);
}

.couor-map-panel__locked {
  max-width: 44rem;
  margin: 4rem auto 0;
  text-align: center;
}

.couor-map-panel__locked .couor-map-panel__state {
  font-size: 1.1rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: rgb(var(--color-rust));
  margin: 0 0 1.2rem;
}

.couor-map-panel__locked p {
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(var(--color-bone), 0.85);
}

/* ---------------------------------------------------------------
   Mobile performance.
   The artwork's atmosphere layers are per-pixel SVG filters over the
   whole 8400-unit canvas: fractal-noise wisps and a paper-grain pass.
   On phone GPUs they dominate frame time — every camera move repaints
   them — and at phone sizes their contribution is barely visible. The
   cloud layer (the fog that actually means something) stays.
   --------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  couor-map rect[filter='url(#cm-wisp)'] {
    display: none;
  }

  /* Decorative micro-detail that is invisible at phone sizes but still
     costs path setup on every raster of either layer. */
  couor-map .wav,
  couor-map .rhumb {
    display: none;
  }

  /* The grain group's raw content is a solid disc the filter turns into
     sparse paper speckle — it must be dropped whole, never unfiltered
     (filter: none renders the disc and blots out the entire map). */
  couor-map g[filter='url(#cm-grain)'] {
    display: none;
  }

  /* Swap the animated-cost fog for a flat one: hide the full-canvas
     fractal-noise cloud (repainted on every camera frame — the single
     biggest source of mobile jank) and raise the plain fogbase rect in
     its place. Same clearing mask, same meaning, flat texture, cheap. */
  couor-map #cm-fog rect[filter='url(#cm-cloud)'] {
    display: none;
  }

  couor-map #cm-fogbase {
    opacity: 0.5;
  }

  /* Vertical swipes belong to the browser on mobile (the map is menu-only
     there — it never pans by touch), so scrolling feels normal and
     pull-to-refresh works instead of being swallowed by the map. */
  .couor-map__svg {
    touch-action: pan-y;
  }
}

/* Instant-feeling taps: no 300ms double-tap wait, no gray flash. */
.couor-map__menu-item,
.couor-map-region__marker,
.couor-map__controls button,
.couor-map-panel__close {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------
   Fog swirl — cloud circling the clearing (the lit triangle where the
   charted world is). The wrapper is placed by the camera each frame
   (couor-map.js) so it is glued to that spot in the world; the rings
   inside counter-rotate on infinite transforms. Rotation is the whole
   trick: it reads as motion on a completely still screen, where slow
   translation does not. Compositor-only throughout.
   --------------------------------------------------------------- */
.couor-map__fogswirl {
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px;
  height: 1024px;
  transform-origin: 0 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.couor-map__fogswirl .couor-map__fogswirl-ring {
  /* Out-specifies Dawn's `div:empty { display:none }` — these are
     intentionally empty texture layers. */
  display: block;
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  will-change: transform;
}

.couor-map__fogswirl-ring--a {
  opacity: 0.75;
  animation: couor-fog-swirl-a 48s linear infinite;
}

.couor-map__fogswirl-ring--b {
  opacity: 0.6;
  animation: couor-fog-swirl-b 74s linear infinite reverse;
}

@keyframes couor-fog-swirl-a {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.06); }
  to   { transform: rotate(360deg) scale(1); }
}

@keyframes couor-fog-swirl-b {
  from { transform: rotate(0deg) scale(1.05); }
  50%  { transform: rotate(180deg) scale(0.98); }
  to   { transform: rotate(360deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .couor-map__fogswirl-ring {
    animation: none;
  }
}
}