/** Shopify CDN: Minification failed

Line 436:49 Unexpected "*"
Line 438:98 Unterminated string token

**/
/* Speyside distillery pin map - sections/speyside-distillery-map.liquid,
   assets/section-speyside-pin-map.js. Root .islay-map-section already hides this whole feature
   below 989px (see section-islay-distillery-map.css), so no separate mobile handling is needed
   here. */

.speyside-map-columns {
  display: grid;
  /* minmax(0, 1fr) - not plain 1fr - on both tracks: an unconstrained 1fr track can still grow
     past its proportional share to fit a descendant's intrinsic content width. Confirmed directly
     as the cause of a real width bug: Macallan's info-box column measured ~755px against every
     other distillery's ~618px, traced to one of its Featured Bottles titles (long enough to be
     the widest across all distilleries) - .islay-featured-bottle__title uses -webkit-line-clamp
     for its 2-line truncation, and -webkit-line-clamp elements are known to report their full,
     un-wrapped text width for a grid/flex ancestor's intrinsic (min-content) sizing purposes,
     even though the clamp itself renders fine once a width is actually assigned. minmax(0, 1fr)
     caps each track at its fr share regardless of what any descendant, clamped or not, asks for. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Icon above the Area/Distinctive Character column titles in the collapsed summary bar (see
   sections/speyside-distillery-map.liquid) - sized/spaced to line up with the "52" distillery
   count (.islay-collapsible__count) in the column to their left. New class, only ever used in
   this Speyside-only markup, so no extra scoping needed. */
.islay-collapsible__col-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 0.4rem;
}

/* .islay-collapsible__summary is align-items: center (see section-islay-distillery-map.css), so
   each column centers vertically according to its OWN content height by default - since the
   count/icon columns aren't all the same height, that leaves "52" and the two icons at different
   vertical positions. Forcing these three columns to the top of the row instead makes their
   first element (count or icon) start at the same y position. New class, only used on Speyside's
   count/icon columns, so Islay's own box (which doesn't use it) is unaffected. */
.islay-collapsible__col--top {
  align-self: flex-start;
}

/* Background colour intentionally left unset here - it now matches Islay's own .islay-region-info
   background (#fdfcfa) exactly rather than diverging to a separate cream tone. Applies on both
   placements of this snippet (the collection page and distillery-map-explorer.liquid alike):

   1. Padding on the box itself, applying to all three inner views alike (default facts, cluster
      list, and each rich distillery panel) rather than patching each one separately. Left/right:
      .islay-region-info__row's own -1.5rem negative-margin/reach-through trick (below) was
      written assuming the box had 1.5rem side padding, which it did until Islay's own version of
      this box later moved its padding onto its *children* instead (see .islay-region-info__stage
      etc. in section-islay-distillery-map.css) - that quietly left this override pulling 1.5rem
      past an edge with no padding left to reach through, flush against the border. Top: matches
      Islay's own .islay-distillery-panel padding-top (1.25rem) exactly, so e.g. the "Back" button
      has the same generous gap above it as it does on Islay's page. Also removes the need for
      .speyside-distillery-detail's own padding, which would otherwise double up with this.
   2. Shows the card in full height instead of capping/scrolling it to the map's height
      (section-speyside-pin-map.js's syncInfoBoxHeight is now a permanent no-op - see there - so
      no inline max-height ever gets set here to begin with; this just also drops the now-
      pointless scroll affordance that height-capping used to need). */
.speyside-map-columns .islay-region-info {
  padding: 1.25rem 1.5rem 0.25rem;
  overflow-y: visible;
}

/* Icon + label grouped together on the left of each row, so justify-content: space-between (see
   .islay-region-info__row in section-islay-distillery-map.css) still puts the value on the
   right against just two flex children. */
.speyside-map-columns .islay-region-info__label-group {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.speyside-map-columns .islay-region-info__row-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Wine accent on the first five rows (Country/Distilleries/First Distilled/Area/Character) -
   scoped the same way, so Islay's own info box is untouched. The negative margin/extra width
   pulls the row out through .islay-region-info's own 1.5rem side padding so the accent sits
   flush against the panel's border rather than starting 1.5rem in from it; padding-left restores
   the label's original text position plus a gap after the bar. */
.speyside-map-columns .islay-region-info__row {
  width: calc(100% + 1.5rem);
  margin-left: -1.5rem;
  padding-left: 2rem;
  border-left: 3px solid #6d2331;
}

/* Flavour Profile accordion - native <details>/<summary>, no JS needed. When the region has
   real "characteristics" data, the body shows the same icon+label list used in the "Known For"
   column of distillery-map-explorer.liquid's 3-column header (snippets/region-known-for-
   list.liquid); otherwise it falls back to the plain flavour_profile setting text. */
.islay-region-info__flavour-accordion {
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
}

.islay-region-info__flavour-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  padding: 1rem 0;
}

.islay-region-info__flavour-summary::-webkit-details-marker {
  display: none;
}

.islay-region-info__flavour-summary::marker {
  content: '';
}

.islay-region-info__flavour-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #c08e61;
  transition: transform 0.2s ease;
}

.islay-region-info__flavour-accordion[open] .islay-region-info__flavour-arrow {
  transform: rotate(180deg);
}

.islay-region-info__flavour-body {
  padding-bottom: 1.25rem;
}

.islay-region-info__flavour-fallback {
  margin: 0;
  color: rgba(var(--color-foreground), 0.75);
}

/* Copied from section-distillery-map-explorer.css's own .distillery-explorer__region-
   characteristic* rules (not shared via that file directly - it's not loaded on the Speyside
   collection page, only on distillery-map-explorer.liquid, and this snippet renders on both). */
.distillery-explorer__region-characteristics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-items: center;
}

.distillery-explorer__region-characteristic {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.distillery-explorer__region-characteristic-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.distillery-explorer__region-characteristic-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
}

.speyside-pin-map {
  position: relative;
  border: 1px solid rgba(var(--color-foreground), 0.12);
  border-radius: var(--card-corner-radius, 8px);
  background: #f7f2ec;
  overflow: hidden;
}

/* Google-Maps-style click-and-drag panning, only meaningful once zoomed into a cluster (see
   assets/section-speyside-pin-map.js) - at the default scale the whole map already fits, so
   there's nothing extra for a drag to reveal. */
.speyside-pin-map.is-zoomed {
  cursor: grab;
}

.speyside-pin-map.is-dragging {
  cursor: grabbing;
}

.speyside-pin-map__inner {
  position: relative;
  /* Matches the real map image's proportions so the box reserves the right amount of space
     before the image finishes loading, avoiding a layout jump. */
  aspect-ratio: 940 / 725;
  transform-origin: 50% 50%;
  transition: transform 0.45s ease;
}

/* No transition while actively dragging - the 0.45s ease used for the zoom-in animation would
   otherwise make every mousemove feel laggy/delayed instead of tracking the pointer 1:1. */
.speyside-pin-map.is-dragging .speyside-pin-map__inner {
  transition: none;
}

.speyside-pin-map__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .speyside-pin-map__inner {
    transition: none;
  }
}

/* ---- pins & clusters (built entirely by JS - see section-speyside-pin-map.js) ---- */

.speyside-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c08e61;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  padding: 0;
  appearance: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 1;
}

.speyside-pin:hover,
.speyside-pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.speyside-pin:focus-visible {
  outline: 2px solid #6d2331;
  outline-offset: 2px;
}

.speyside-pin.is-active {
  background: #6d2331;
}

.speyside-pin--cluster {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #6d2331;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  padding: 0;
  transition: transform 0.15s ease;
  z-index: 2;
}

.speyside-pin--cluster:hover,
.speyside-pin--cluster:focus-visible {
  transform: translate(-50%, -50%) scale(1.1);
}

.speyside-pin--cluster:focus-visible {
  outline: 2px solid #c08e61;
  outline-offset: 2px;
}

/* "You clicked this one" active state, for both a single pin and a cluster badge - same visual
   language as Islay's own SVG pin pulse (.islay-pin.is-active in section-islay-distillery-
   map.css): a gold glow plus a pulsing ring, translated from that file's SVG circle/stroke
   properties to a box-shadow + pseudo-element ring, since these are plain HTML <button>s rather
   than SVG shapes. (.speyside-pin.is-active's darker maroon fill already existed; this adds the
   glow/pulse to match Islay's fuller treatment, and extends the same active-state visual to
   cluster badges, which previously got no highlight at all when clicked.) */
.speyside-pin.is-active,
.speyside-pin--cluster.is-active {
  box-shadow: 0 0 4px 2px rgba(192, 142, 97, 0.9), 0 2px 6px rgba(0, 0, 0, 0.35);
  border-color: #f5d9a8;
}

.speyside-pin.is-active::after,
.speyside-pin--cluster.is-active::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid #c08e61;
  animation: speyside-pin-pulse 1.4s ease-out infinite;
  pointer-events: none;
}

@keyframes speyside-pin-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
    border-width: 1.5px;
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
    border-width: 0.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .speyside-pin.is-active::after,
  .speyside-pin--cluster.is-active::after {
    animation: none;
  }
}

/* ---- pin/cluster detail, swapped into the region-info box in place of the default facts
   (Country/Distilleries/etc.) - deliberately NOT an overlay on top of the map, so the map is
   never obstructed by it. See speyside-region-info-default/speyside-pin-detail toggling in
   assets/section-speyside-pin-map.js. ---- */

.speyside-pin-detail[hidden] {
  display: none;
}

.speyside-pin-detail__back {
  appearance: none;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
  margin-bottom: 1rem;
  color: rgba(var(--color-foreground), 0.7);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease;
}

.speyside-pin-detail__back:hover {
  color: #6d2331;
}

.speyside-pin-detail__heading {
  margin: 0 0 1rem;
  font-family: var(--font-heading-family) !important;
  font-size: 1.5rem;
  letter-spacing: normal;
}

.speyside-pin-detail__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.1);
}

.speyside-pin-detail__item:last-child {
  border-bottom: none;
}

.speyside-pin-detail__text {
  min-width: 0;
}

.speyside-pin-detail__name {
  display: block;
  font-weight: 700;
}

.speyside-pin-detail__region {
  display: block;
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.6);
}

.speyside-pin-detail__shop {
  appearance: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.4rem;
  border: 1px solid #6d2331;
  border-radius: var(--buttons-radius, 6px);
  padding: 0.5rem 1rem;
  background: transparent;
  color: #6d2331;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.speyside-pin-detail__shop:hover {
  background: #6d2331;
  color: #fff;
}

.speyside-pin-detail__shop--disabled {
  border-color: rgba(var(--color-foreground), 0.25);
  color: rgba(var(--color-foreground), 0.45);
  cursor: default;
  pointer-events: none;
}

/* ---- rich distillery panel (see snippets/speyside-pin-map.liquid) ----
   Internal layout/typography reuses assets/section-islay-distillery-map.css's
   .islay-distillery-panel__*/.islay-did-you-know*/.islay-featured-* classes verbatim (already
   loaded on this page, and confirmed standalone rather than ancestor-scoped to
   .islay-distillery-panel) - only this wrapper's own show/hide and entrance animation are new. */
.speyside-distillery-detail[hidden] {
  display: none;
}

.speyside-distillery-detail {
  /* All padding now comes from the box itself (.islay-region-info, above), which applies
     uniformly to this and the other two inner views (default facts, cluster list). */
  animation: speyside-distillery-slide-in 0.32s ease;
}

@keyframes speyside-distillery-slide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .speyside-distillery-detail {
    animation: none;
  }
}

/* ---- "back to full map" reset ---- */

.speyside-pin-map__reset[hidden] {
  display: none;
}

.speyside-pin-map__reset {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  background: rgba(253, 252, 250, 0.92);
  color: #1c1a17;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
}

.speyside-pin-map__reset:hover {
  background: #fff;
}