/* ==========================================================================
   SHOP ARRAN — "Island Modern" Design System
   Built to map cleanly onto YOOtheme Pro / UIkit 3
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ------------------------------------------------------------------
     Brand palette — sampled from the "Christmas Shop Arran Weekend 2026"
     promotional poster (deep navy ground, gold, coral-red, teal).

     Every colour below was measured off the artwork, then contrast-tested
     against the combinations the site actually uses. If you want to shift
     the whole site, change these values and nothing else.
     ------------------------------------------------------------------ */

  /* Ground — replaces the old granite near-black (#14181A).
     This is the poster's background navy. Used for the header, footer,
     hero overlays, the mobile menu and all "dark section" bands. */
  --sa-ink:        #042A47;   /* poster navy — primary text / dark sections */
  --sa-ink-soft:   #0B3A5C;   /* lifted navy — borders + panels on dark */

  --sa-paper:      #FAF6EC;   /* warm off-white, pulled toward the poster's snow */
  --sa-paper-2:    #F2EBDC;   /* alt band */
  --sa-line:       #E2D8C6;   /* hairlines */

  /* Accents — the poster's coral-red and gold.
     --sa-accent    fills and buttons (white label clears AA at 4.57:1)
     --sa-accent-dk link + small text on paper (6.12:1) and button hover
     --sa-gold      gold for fills that carry a dark label, and text on navy
     --sa-gold-lt   the bright poster gold; on-navy only (8.26:1)
     --sa-gold-dk   text-safe gold for small text on paper (4.90:1) */
  --sa-accent:     #C2542A;   /* poster coral-red — CTAs, tags, pins */
  --sa-accent-dk:  #9E3F1C;   /* deeper red — links on paper, button hover */
  --sa-gold:       #C79A4B;   /* poster gold — chips, rules, dark-label fills */
  --sa-gold-lt:    #E6BC6F;   /* bright gold — headings/rules on navy */
  --sa-gold-dk:    #8A6524;   /* text-safe gold on paper */

  --sa-sea:        #124A5C;   /* poster teal, deepened — secondary dark band */
  --sa-sea-lt:     #236373;   /* poster teal — village tile hover */
  --sa-sand:       #D8BE8C;   /* warm gold sand — eyebrows, hero emphasis */

  --sa-muted:      #5E6E7C;   /* navy-tinted grey — meta text (4.87:1 on paper) */

  /* Translucent forms of the above, so scrims and tints follow the palette
     instead of keeping the old black/cream baked into them. */
  --sa-ink-rgb:    4, 42, 71;
  --sa-paper-rgb:  250, 246, 236;
  --sa-accent-rgb: 194, 84, 42;

  /* Type */
  --sa-font-display: "Bricolage Grotesque", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sa-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale */
  --sa-h0: clamp(2.75rem, 7.2vw, 7rem);
  --sa-h1: clamp(2.25rem, 4.6vw, 4.25rem);
  --sa-h2: clamp(1.75rem, 3.1vw, 2.9rem);
  --sa-h3: clamp(1.15rem, 1.6vw, 1.5rem);
  --sa-body: clamp(1rem, 1.05vw, 1.125rem);
  --sa-small: 0.8125rem;

  /* Spacing */
  --sa-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --sa-section: clamp(4rem, 8vw, 8rem);
  --sa-max: 1440px;

  /* Radius + shadow */
  --sa-r: 4px;
  --sa-r-lg: 10px;
  --sa-shadow: 0 2px 8px rgba(var(--sa-ink-rgb),.07);
  --sa-shadow-lg: 0 22px 50px -20px rgba(var(--sa-ink-rgb),.34);

  --sa-ease: cubic-bezier(.22,.61,.36,1);
  --sa-header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--sa-header-h) + 20px); }
body {
  margin: 0;
  background: var(--sa-paper);
  color: var(--sa-ink);
  font-family: var(--sa-font-body);
  font-size: var(--sa-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1,h2,h3,h4,h5 {
  font-family: var(--sa-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1.1em; }
::selection { background: var(--sa-accent); color: #fff; }

.sa-wrap { max-width: var(--sa-max); margin-inline: auto; padding-inline: var(--sa-gutter); }
.sa-section { padding-block: var(--sa-section); }

/* Break out of narrow theme containers.
   Several themes (and the WordPress block editor's "constrained" layout) wrap
   page content in a ~650px column. Our bands are designed to be full-bleed, so
   they escape the wrapper here. Harmless when the container is already
   full-width, which is the normal case in YOOtheme. */
.sa-hero, .sa-marquee, .sa-tiles, .sa-section, .sa-footer, .sa-utility {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Guard against a horizontal scrollbar appearing from the 100vw above. */
html, body { overflow-x: hidden; }

/* Block themes (Twenty Twenty-Four/Five and friends) apply a max-width to
   every direct child of .entry-content via their "constrained layout" rules.
   That clamps our grids to ~650px even after the full-bleed fix above. Reset
   it for our own sections only, so the theme's handling of ordinary content
   is left completely alone. */
.entry-content > .sa-hero,
.entry-content > .sa-marquee,
.entry-content > .sa-tiles,
.entry-content > .sa-section,
.entry-content > .sa-footer,
.entry-content > .sa-utility,
.entry-content > .sa-directory { max-width: 100vw !important; }

/* Block themes also clamp *unclassed* wrappers inside .entry-content, which
   catches our section containers. Nothing of ours should ever be narrowed. */
.entry-content .sa-directory,
.entry-content .sa-wrap,
.entry-content .sa-grid,
.entry-content .sa-split,
.entry-content .sa-tiles,
.entry-content .sa-villages,
.entry-content .sa-news,
.entry-content .sa-steps { max-width: none !important; }

.sa-wrap > *, .sa-section > *, .sa-hero__in > * { max-width: none; }
.sa-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
.sa-eyebrow {
  font-family: var(--sa-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  /* Deeper red for the text (small caps at .72rem needs the extra contrast);
     the 2px rule beside it is decorative, so it keeps the brighter coral. */
  color: var(--sa-accent-dk);
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.1rem;
}
.sa-eyebrow::before { content:""; width:34px; height:2px; background: var(--sa-accent); flex:none; }
.sa-eyebrow--center { justify-content: center; }
.sa-eyebrow--light { color: var(--sa-sand); }
.sa-eyebrow--light::before { background: var(--sa-sand); }

.sa-h0 { font-size: var(--sa-h0); }
.sa-h1 { font-size: var(--sa-h1); }
.sa-h2 { font-size: var(--sa-h2); }
.sa-h3 { font-size: var(--sa-h3); letter-spacing:-.02em; }
.sa-lead { font-size: clamp(1.05rem,1.35vw,1.3rem); color: var(--sa-ink-soft); line-height:1.6; max-width: 62ch; }
.sa-muted { color: var(--sa-muted); }
.sa-center { text-align: center; }
.sa-center .sa-lead { margin-inline: auto; }

/* Section head */
.sa-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom: clamp(2rem,4vw,3.5rem); flex-wrap: wrap; }
/* Used when heading="no": the page hero above already carries the headline,
   so only the action button remains and it sits to the right. */
.sa-head--bare { justify-content:flex-end; margin-bottom: clamp(1.2rem,2.5vw,2rem); }
.sa-section--tight { padding-top: clamp(2.5rem,5vw,4rem); }
.sa-head__t { max-width: 60ch; }
.sa-head__t p { margin:0; color: var(--sa-muted); }

/* Buttons */
.sa-btn {
  display:inline-flex; align-items:center; gap:.65rem;
  padding: 1rem 1.9rem;
  font-family: var(--sa-font-body);
  font-weight:600; font-size:.875rem; letter-spacing:.05em; text-transform:uppercase;
  border-radius: 999px;
  transition: all .35s var(--sa-ease);
  position:relative; overflow:hidden; white-space:nowrap;
}
.sa-btn svg { transition: transform .35s var(--sa-ease); flex:none; }
.sa-btn:hover svg { transform: translateX(5px); }
.sa-btn--primary { background: var(--sa-accent); color:#fff; }
.sa-btn--primary:hover { background: var(--sa-accent-dk); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(var(--sa-accent-rgb),.7); }
.sa-btn--dark { background: var(--sa-ink); color: var(--sa-paper); }
.sa-btn--dark:hover { background: var(--sa-sea); transform: translateY(-2px); }
.sa-btn--ghost { border:1.5px solid rgba(255,255,255,.5); color:#fff; backdrop-filter: blur(8px); background: rgba(255,255,255,.08); }
.sa-btn--ghost:hover { background:#fff; color: var(--sa-ink); border-color:#fff; }
.sa-btn--outline { border:1.5px solid var(--sa-ink); color: var(--sa-ink); }
.sa-btn--outline:hover { background: var(--sa-ink); color: var(--sa-paper); }
.sa-btn--sm { padding:.7rem 1.35rem; font-size:.78rem; }

.sa-link {
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1.5px solid currentColor; padding-bottom:3px;
  transition: gap .3s var(--sa-ease), color .3s;
}
.sa-link:hover { gap:.9rem; color: var(--sa-accent-dk); }

/* Tag / pill */
.sa-tag {
  display:inline-block; padding:.36rem .8rem; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  background: var(--sa-paper-2); color: var(--sa-ink-soft);
}
.sa-tag--accent { background: var(--sa-accent); color:#fff; }
.sa-tag--sea { background: var(--sa-sea); color:#fff; }
/* Gold chip carries a dark label — gold is too light for white text. */
.sa-tag--gold { background: var(--sa-gold); color: var(--sa-ink); }

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.sa-utility {
  background: var(--sa-ink); color: rgba(var(--sa-paper-rgb),.82);
  font-size: var(--sa-small); letter-spacing:.02em;
  position:relative; z-index:60;
}
.sa-utility__in { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:40px; }
.sa-utility__l, .sa-utility__r { display:flex; align-items:center; gap:1.6rem; }
.sa-utility i { display:inline-flex; margin-right:.45rem; }
.sa-utility a:hover { color:#fff; }
/* "Open" status dot. Kept green (it signals live/open, so a red or gold
   dot would read as a warning), but warmed slightly to sit with the gold. */
.sa-utility__dot { width:7px; height:7px; border-radius:50%; background:#6FBF87; display:inline-block; margin-right:.5rem; box-shadow:0 0 0 3px rgba(111,191,135,.24); }
.sa-utility__socials { display:flex; gap:1rem; }
.sa-utility__socials svg { width:15px; height:15px; opacity:.75; transition:opacity .3s; }
.sa-utility__socials a:hover svg { opacity:1; }

.sa-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--sa-paper-rgb),.86);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--sa-ease), border-color .4s, box-shadow .4s;
}
.sa-header.is-stuck { background: rgba(var(--sa-paper-rgb),.97); border-bottom-color: var(--sa-line); box-shadow: 0 4px 22px -12px rgba(var(--sa-ink-rgb),.25); }
.sa-header__in { display:flex; align-items:center; justify-content:space-between; gap:2rem; height: var(--sa-header-h); }

.sa-logo { display:flex; align-items:center; gap:.7rem; flex:none; }
.sa-logo__mark { width:38px; height:38px; flex:none; }
.sa-logo__txt { font-family: var(--sa-font-display); font-weight:800; font-size:1.16rem; letter-spacing:-.04em; line-height:1; }
.sa-logo__txt span { display:block; font-family: var(--sa-font-body); font-size:.56rem; font-weight:600; letter-spacing:.29em; text-transform:uppercase; color: var(--sa-muted); margin-top:4px; }

.sa-nav { display:flex; align-items:center; gap: clamp(1rem, 2.2vw, 2.3rem); }
.sa-nav > li { position: relative; list-style: none; }
.sa-nav ul { list-style:none; margin:0; padding:0; }
.sa-nav__link {
  display:flex; align-items:center; gap:.35rem;
  font-size:.84rem; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  padding: .6rem 0; position:relative; white-space:nowrap;
}
.sa-nav__link::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--sa-accent);
  transition: width .35s var(--sa-ease);
}
.sa-nav > li:hover .sa-nav__link::after, .sa-nav__link.is-active::after { width:100%; }
.sa-nav__link svg { width:10px; height:10px; transition: transform .3s; }
.sa-nav > li:hover .sa-nav__link svg { transform: rotate(180deg); }

/* Mega menu */
.sa-mega {
  position:absolute; top: calc(100% + 12px); left:50%; transform: translate(-50%, 12px);
  width: min(760px, 88vw);
  background:#fff; border:1px solid var(--sa-line); border-radius: var(--sa-r-lg);
  box-shadow: var(--sa-shadow-lg);
  padding: 2rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: all .35s var(--sa-ease);
}
.sa-nav > li:hover .sa-mega { opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%,0); }
.sa-mega__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:.2rem 2rem; }
.sa-mega__h { grid-column:1/-1; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--sa-muted); margin-bottom:.7rem; }
.sa-mega__grid a { display:block; padding:.42rem 0; font-size:.9rem; font-weight:500; border-bottom:1px solid transparent; transition: color .25s, padding-left .25s; }
.sa-mega__grid a:hover { color: var(--sa-accent-dk); padding-left:6px; }
.sa-mega__foot { margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--sa-line); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }

.sa-header__act { display:flex; align-items:center; gap:.6rem; flex:none; }
.sa-iconbtn { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--sa-line); transition: all .3s var(--sa-ease); }
.sa-iconbtn:hover { background: var(--sa-ink); color: var(--sa-paper); border-color: var(--sa-ink); }
.sa-burger { display:none; }

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.sa-hero { position:relative; min-height: clamp(560px, 88vh, 900px); display:flex; align-items:flex-end; overflow:hidden; background: var(--sa-ink); }
.sa-hero__media { position:absolute; inset:0; }
.sa-hero__media img { width:100%; height:100%; object-fit:cover; transform: scale(1.06); animation: saKen 18s var(--sa-ease) forwards; }
@keyframes saKen { to { transform: scale(1); } }
.sa-hero__media::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(var(--sa-ink-rgb),.55) 0%, rgba(var(--sa-ink-rgb),.12) 34%, rgba(var(--sa-ink-rgb),.72) 78%, rgba(var(--sa-ink-rgb),.94) 100%);
}
.sa-hero__in { position:relative; z-index:2; width:100%; padding-block: clamp(3rem,7vw,6rem); color:#fff; }
.sa-hero__grid { display:grid; grid-template-columns: 1.35fr .85fr; gap: clamp(2rem,5vw,5rem); align-items:end; }
.sa-hero h1 { font-size: var(--sa-h0); color:#fff; margin-bottom:1.2rem; letter-spacing:-.045em; }
.sa-hero h1 em { font-style:normal; color: var(--sa-sand); display:block; }
.sa-hero p { color: rgba(255,255,255,.9); font-size: clamp(1rem,1.28vw,1.24rem); max-width:52ch; margin-bottom:2rem; }
.sa-hero__btns { display:flex; gap:.85rem; flex-wrap:wrap; }

/* Inner-page hero: shorter than the home hero, single column, no date card.
   Used by [sa_page_hero] on Weekend / Visit / Villages / Join / Contact. */
.sa-hero--page { min-height: clamp(340px, 46vh, 520px); }
.sa-hero--page h1 { font-size: clamp(2.1rem, 5vw, 3.9rem); margin-bottom:.9rem; }
.sa-hero--page p { margin-bottom:0; }
.sa-hero__grid--single { grid-template-columns: 1fr; max-width: 68ch; }

/* Event date card */
.sa-datecard {
  background: rgba(255,255,255,.1); backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.26); border-radius: var(--sa-r-lg);
  padding: 1.7rem;
}
.sa-datecard__lbl { font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--sa-sand); margin-bottom:.9rem; }
.sa-datecard__d { font-family: var(--sa-font-display); font-size: clamp(1.7rem,2.5vw,2.4rem); line-height:1.02; letter-spacing:-.035em; margin-bottom:.35rem; }
.sa-datecard__s { font-size:.9rem; color: rgba(255,255,255,.75); margin-bottom:1.3rem; }
.sa-countdown { display:grid; grid-template-columns: repeat(4,1fr); gap:.5rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.2); }
.sa-countdown div { text-align:center; }
.sa-countdown b { display:block; font-family: var(--sa-font-display); font-size:1.5rem; line-height:1; letter-spacing:-.03em; }
.sa-countdown span { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.6); }

/* Scroll cue */
.sa-scroll { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.7); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; }
.sa-scroll i { width:1px; height:36px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation: saDrop 2.2s infinite; }
@keyframes saDrop { 0%{opacity:0;transform:scaleY(0);transform-origin:top} 45%{opacity:1;transform:scaleY(1);transform-origin:top} 46%{transform-origin:bottom} 100%{opacity:0;transform:scaleY(0);transform-origin:bottom} }

/* --------------------------------------------------------------------------
   6. MARQUEE
   -------------------------------------------------------------------------- */
.sa-marquee { background: var(--sa-sea); color:#fff; padding:.95rem 0; overflow:hidden; white-space:nowrap; }
.sa-marquee__t { display:inline-flex; gap:3rem; align-items:center; animation: saSlide 34s linear infinite; padding-right:3rem; }
.sa-marquee:hover .sa-marquee__t { animation-play-state: paused; }
@keyframes saSlide { to { transform: translateX(-50%); } }
.sa-marquee span { font-family: var(--sa-font-display); font-size:1rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:3rem; }
.sa-marquee span::after { content:"✦"; color: var(--sa-sand); font-size:.75rem; }

/* --------------------------------------------------------------------------
   7. QUICK TILES
   -------------------------------------------------------------------------- */
.sa-tiles { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--sa-line); border-block:1px solid var(--sa-line); }
/* A tile is removed by clearing its title on Shops -> Content & dates. The
   row must then re-flow rather than leaving a gap, so the column count
   follows the number actually rendered. */
.sa-tiles[data-tiles="3"] { grid-template-columns: repeat(3,1fr); }
.sa-tiles[data-tiles="2"] { grid-template-columns: repeat(2,1fr); }
.sa-tiles[data-tiles="1"] { grid-template-columns: 1fr; }
.sa-tile { background: var(--sa-paper); padding: clamp(1.7rem,2.7vw,2.6rem); display:flex; flex-direction:column; gap:.6rem; position:relative; transition: background .4s var(--sa-ease); overflow:hidden; }
.sa-tile::before { content:""; position:absolute; inset:auto 0 0 0; height:3px; background: var(--sa-accent); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--sa-ease); }
.sa-tile:hover { background:#fff; }
.sa-tile:hover::before { transform:scaleX(1); }
.sa-tile__ico { width:44px; height:44px; color: var(--sa-accent); margin-bottom:.4rem; transition: transform .45s var(--sa-ease); }
.sa-tile:hover .sa-tile__ico { transform: translateY(-4px); }
.sa-tile h3 { font-size:1.28rem; margin:0; }
.sa-tile p { font-size:.9rem; color: var(--sa-muted); margin:0; }
.sa-tile__go { margin-top:auto; padding-top:1.1rem; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color: var(--sa-accent); display:flex; align-items:center; gap:.4rem; transition: gap .3s; }
.sa-tile:hover .sa-tile__go { gap:.85rem; }

/* --------------------------------------------------------------------------
   7b. DOWNLOADS BAND  (poster / map / print-at-home)
   -------------------------------------------------------------------------- */
.sa-downloads__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
/* With heading="no" there is only one child, so let it use the full width. */
.sa-downloads__grid > :only-child { grid-column: 1 / -1; max-width: 720px; }

.sa-dl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.sa-dl__item {
  display:flex; align-items:center; gap:1rem;
  padding: 1.05rem 1.3rem;
  background: var(--sa-paper);
  border:1px solid var(--sa-line);
  border-radius: var(--sa-r);
  color: var(--sa-ink);
  transition: border-color .3s var(--sa-ease), transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease), background .3s var(--sa-ease);
}
.sa-dl__item:hover {
  border-color: var(--sa-accent);
  background:#fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(var(--sa-ink-rgb),.45);
}
.sa-dl__ico { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background: rgba(var(--sa-accent-rgb),.1); color: var(--sa-accent); }
.sa-dl__ico .sa-tile__ico { width:22px; height:22px; margin:0; }
.sa-dl__item:hover .sa-dl__ico { background: var(--sa-accent); color:#fff; }
.sa-dl__txt { flex:1; display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.sa-dl__txt b { font-family: var(--sa-font-display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.sa-dl__txt small { font-size:.78rem; color: var(--sa-muted); letter-spacing:.04em; text-transform:uppercase; }
.sa-dl__item > svg { flex:none; color: var(--sa-accent); transition: transform .35s var(--sa-ease); }
.sa-dl__item:hover > svg { transform: translateX(5px); }

/* On the dark variant the cards need to lift off the ink, not sink into it. */
.sa-dark .sa-dl__item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.17); color:#fff; }
.sa-dark .sa-dl__item:hover { background: rgba(255,255,255,.12); border-color: var(--sa-accent); }
.sa-dark .sa-dl__txt small { color: rgba(255,255,255,.62); }

/* --------------------------------------------------------------------------
   8. FEATURE / EDITORIAL SPLIT
   -------------------------------------------------------------------------- */
.sa-split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.sa-split__media { position:relative; }
.sa-split__media img { border-radius: var(--sa-r-lg); aspect-ratio: 4/3; object-fit:cover; width:100%; }
.sa-split__badge {
  position:absolute; bottom:-24px; right:-14px;
  background: var(--sa-accent); color:#fff; border-radius: var(--sa-r-lg);
  padding:1.3rem 1.6rem; box-shadow: var(--sa-shadow-lg); max-width:220px;
}
.sa-split__badge b { display:block; font-family: var(--sa-font-display); font-size:2.5rem; line-height:1; letter-spacing:-.04em; }
.sa-split__badge span { font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; opacity:.9; }
.sa-split--rev .sa-split__media { order:2; }

.sa-facts { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--sa-line); }
/* Big stat figures in gold, echoing the poster's gold numerals. Uses the
   text-safe gold (4.90:1 on paper) rather than the bright poster gold,
   which is far too light to read as text. */
.sa-facts b { display:block; font-family: var(--sa-font-display); font-size:2.1rem; line-height:1; letter-spacing:-.04em; color: var(--sa-gold-dk); }
.sa-facts span { font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color: var(--sa-muted); }

/* --------------------------------------------------------------------------
   9. DIRECTORY / FILTER + CARDS
   -------------------------------------------------------------------------- */
.sa-filterbar { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.sa-filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.sa-filter {
  padding:.62rem 1.15rem; border-radius:999px; border:1px solid var(--sa-line);
  font-size:.8rem; font-weight:600; letter-spacing:.03em;
  transition: all .3s var(--sa-ease); background: transparent;
}
.sa-filter:hover { border-color: var(--sa-ink); }
.sa-filter.is-on { background: var(--sa-ink); color: var(--sa-paper); border-color: var(--sa-ink); }
.sa-search { position:relative; display:flex; align-items:center; }
.sa-search input {
  width:250px; padding:.72rem 1rem .72rem 2.6rem; border-radius:999px;
  border:1px solid var(--sa-line); background:#fff; font-size:.88rem; font-family:inherit;
  transition: border-color .3s, width .35s var(--sa-ease);
}
.sa-search input:focus { outline:none; border-color: var(--sa-accent); width:290px; }
.sa-search svg { position:absolute; left:1rem; width:15px; height:15px; color: var(--sa-muted); pointer-events:none; }

.sa-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: clamp(1.2rem,2vw,2rem); }

.sa-card { position:relative; background:#fff; border-radius: var(--sa-r-lg); overflow:hidden; border:1px solid var(--sa-line); display:flex; flex-direction:column; transition: transform .45s var(--sa-ease), box-shadow .45s var(--sa-ease), border-color .45s; }
.sa-card:hover { transform: translateY(-7px); box-shadow: var(--sa-shadow-lg); border-color: transparent; }
.sa-card__media { position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--sa-paper-2); }
.sa-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--sa-ease); }
.sa-card:hover .sa-card__media img { transform: scale(1.07); }
.sa-card__loc { position:absolute; top:.85rem; left:.85rem; z-index:2; background: rgba(var(--sa-ink-rgb),.72); backdrop-filter: blur(8px); color:#fff; padding:.32rem .75rem; border-radius:999px; font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.sa-card__offer { position:absolute; top:.85rem; right:.85rem; z-index:2; background: var(--sa-accent); color:#fff; padding:.32rem .7rem; border-radius:999px; font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sa-card__body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.sa-card__body h3 { font-size:1.2rem; margin-bottom:.5rem; letter-spacing:-.025em; transition: color .3s; }
.sa-card:hover .sa-card__body h3 { color: var(--sa-accent); }
.sa-card__body p { font-size:.885rem; color: var(--sa-muted); line-height:1.6; margin-bottom:1.2rem;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sa-card__foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid var(--sa-line); }
.sa-card__cat { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--sa-muted); }
.sa-card__arrow { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background: var(--sa-paper-2); transition: all .35s var(--sa-ease); flex:none; }
.sa-card:hover .sa-card__arrow { background: var(--sa-accent); color:#fff; transform: rotate(-45deg); }
.sa-card__link { position:absolute; inset:0; z-index:3; }
/* The village chip links to that village's page. It has to outrank
   .sa-card__link (z-index:3), or the full-card overlay eats the click. */
a.sa-card__loc--link { z-index:4; text-decoration:none; transition: background .2s, color .2s; }
a.sa-card__loc--link:hover,
a.sa-card__loc--link:focus-visible { background: var(--sa-accent); color:#fff; }
a.sa-card__cat--link { position:relative; z-index:4; text-decoration:none; transition: color .2s; }
a.sa-card__cat--link:hover,
a.sa-card__cat--link:focus-visible { color: var(--sa-accent); }
/* Tags on a shop page are now links; keep them looking like tags. */
a.sa-tag { text-decoration:none; transition: background .2s, color .2s, border-color .2s; }
a.sa-tag:hover, a.sa-tag:focus-visible { background: var(--sa-ink); color: var(--sa-paper); border-color: var(--sa-ink); }
a.sa-tag--sea:hover, a.sa-tag--sea:focus-visible { background: var(--sa-accent); color:#fff; border-color: var(--sa-accent); }
.sa-card.is-hidden { display:none; }

/* --------------------------------------------------------------------------
   10. DARK BAND / EVENT
   -------------------------------------------------------------------------- */
.sa-dark { background: var(--sa-ink); color: var(--sa-paper); position:relative; overflow:hidden; }
.sa-dark h2, .sa-dark h3 { color:#fff; }
.sa-dark .sa-lead, .sa-dark p { color: rgba(var(--sa-paper-rgb),.72); }
.sa-dark::before {
  content:""; position:absolute; top:-30%; right:-12%; width:640px; height:640px; border-radius:50%;
  background: radial-gradient(circle, rgba(18,74,92,.62), transparent 68%); pointer-events:none;
}
.sa-sea-band { background: var(--sa-sea); color:#fff; }

.sa-steps { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,3rem); position:relative; z-index:2; }
.sa-step { padding-top:1.6rem; border-top:2px solid rgba(255,255,255,.18); transition: border-color .4s; }
.sa-step:hover { border-top-color: var(--sa-accent); }
.sa-step b { font-family: var(--sa-font-display); font-size:.9rem; letter-spacing:.14em; color: var(--sa-gold-lt); display:block; margin-bottom:.9rem; }
.sa-step h3 { font-size:1.35rem; margin-bottom:.5rem; }
.sa-step p { font-size:.92rem; margin:0; }

/* --------------------------------------------------------------------------
   11. NEWS / EVENTS
   -------------------------------------------------------------------------- */
.sa-news { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.sa-news__item { position:relative; display:flex; flex-direction:column; }
.sa-news__media { aspect-ratio:16/10; border-radius: var(--sa-r-lg); overflow:hidden; margin-bottom:1.2rem; position:relative; }
.sa-news__media img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--sa-ease); }
.sa-news__item:hover .sa-news__media img { transform: scale(1.06); }
.sa-news__date { position:absolute; bottom:.85rem; left:.85rem; background:#fff; border-radius:var(--sa-r); padding:.5rem .8rem; text-align:center; line-height:1; box-shadow: var(--sa-shadow); }
.sa-news__date b { display:block; font-family: var(--sa-font-display); font-size:1.3rem; letter-spacing:-.03em; }
.sa-news__date span { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color: var(--sa-muted); }
.sa-news__item h3 { font-size:1.15rem; margin-bottom:.45rem; transition: color .3s; }
.sa-news__item:hover h3 { color: var(--sa-accent); }
.sa-news__item p { font-size:.875rem; color: var(--sa-muted); margin:0; }

/* --------------------------------------------------------------------------
   12. MAP / VILLAGES
   -------------------------------------------------------------------------- */
.sa-villages { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:1px; background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.15); border-radius: var(--sa-r-lg); overflow:hidden; }
.sa-village { background: var(--sa-sea); padding:1.6rem 1.3rem; transition: background .4s var(--sa-ease); position:relative; }
.sa-village:hover { background: var(--sa-sea-lt); }
.sa-village b { font-family: var(--sa-font-display); font-size:1.2rem; display:block; letter-spacing:-.02em; }
.sa-village span { font-size:.74rem; color: rgba(255,255,255,.62); letter-spacing:.06em; }

/* --------------------------------------------------------------------------
   13. NEWSLETTER
   -------------------------------------------------------------------------- */
.sa-signup { background: var(--sa-accent); color:#fff; border-radius: var(--sa-r-lg); padding: clamp(2.2rem,5vw,4rem); display:grid; grid-template-columns: 1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.sa-signup h2 { color:#fff; margin-bottom:.6rem; }
.sa-signup p { color: rgba(255,255,255,.88); margin:0; }
.sa-form { display:flex; gap:.6rem; flex-wrap:wrap; }
.sa-form input { flex:1; min-width:200px; padding:1rem 1.3rem; border-radius:999px; border:1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.14); color:#fff; font-family:inherit; font-size:.95rem; }
.sa-form input::placeholder { color: rgba(255,255,255,.7); }
.sa-form input:focus { outline:none; border-color:#fff; background: rgba(255,255,255,.22); }
.sa-form button { background:#fff; color: var(--sa-accent); padding:1rem 2rem; border-radius:999px; font-weight:700; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; transition: all .3s var(--sa-ease); }
.sa-form button:hover { background: var(--sa-ink); color:#fff; }
.sa-form small { display:block; width:100%; font-size:.74rem; color: rgba(255,255,255,.75); margin-top:.3rem; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.sa-footer { background: var(--sa-ink); color: rgba(var(--sa-paper-rgb),.7); padding-top: clamp(3.5rem,6vw,6rem); }
.sa-footer h4 { color:#fff; font-family: var(--sa-font-body); font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; margin-bottom:1.3rem; }
.sa-footer a:hover { color: var(--sa-gold-lt); }
.sa-footer__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(2rem,4vw,4rem); padding-bottom:3.5rem; }
.sa-footer__grid ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.62rem; font-size:.9rem; }
.sa-footer .sa-logo__txt { color:#fff; }
.sa-footer .sa-logo__txt span { color: rgba(var(--sa-paper-rgb),.5); }
.sa-footer__bot { border-top:1px solid rgba(var(--sa-paper-rgb),.13); padding-block:1.6rem; display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; font-size:.8rem; }
.sa-footer__bot ul { display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
.sa-soc { display:flex; gap:.6rem; }
.sa-soc a { width:38px; height:38px; border-radius:50%; border:1px solid rgba(var(--sa-paper-rgb),.22); display:grid; place-items:center; transition: all .3s var(--sa-ease); }
.sa-soc a:hover { background: var(--sa-accent); border-color: var(--sa-accent); color:#fff; transform: translateY(-3px); }
.sa-soc svg { width:16px; height:16px; }

/* --------------------------------------------------------------------------
   15. SHOP DETAIL TEMPLATE
   -------------------------------------------------------------------------- */
.sa-shophero { position:relative; min-height: clamp(400px,58vh,620px); display:flex; align-items:flex-end; background: var(--sa-ink); overflow:hidden; }
.sa-shophero__media { position:absolute; inset:0; }
.sa-shophero__media img { width:100%; height:100%; object-fit:cover; }
.sa-shophero__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(var(--sa-ink-rgb),.55), rgba(var(--sa-ink-rgb),.25) 40%, rgba(var(--sa-ink-rgb),.92)); }
.sa-shophero__in { position:relative; z-index:2; color:#fff; padding-block: clamp(2.5rem,5vw,4rem); width:100%; }
.sa-shophero h1 { font-size: var(--sa-h1); color:#fff; margin-bottom:.7rem; }
.sa-shophero__meta { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }

.sa-crumbs { display:flex; gap:.55rem; align-items:center; font-size:.78rem; letter-spacing:.05em; color: rgba(255,255,255,.72); margin-bottom:1.4rem; flex-wrap:wrap; }
.sa-crumbs a:hover { color:#fff; }
.sa-crumbs span { opacity:.5; }

.sa-shop__layout { display:grid; grid-template-columns: 1fr 380px; gap: clamp(2rem,4.5vw,4.5rem); align-items:start; }
.sa-prose h2 { font-size: clamp(1.5rem,2.3vw,2.1rem); margin-top:2.4rem; }
.sa-prose h2:first-child { margin-top:0; }
.sa-prose p { color: var(--sa-ink-soft); }
.sa-prose ul { padding-left:0; list-style:none; display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:.6rem 1.5rem; margin:1.5rem 0; }
.sa-prose ul li { position:relative; padding-left:1.5rem; font-size:.93rem; color: var(--sa-ink-soft); }
.sa-prose ul li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background: var(--sa-accent); }

/* Sticky info panel */
.sa-panel { position: sticky; top: calc(var(--sa-header-h) + 24px); background:#fff; border:1px solid var(--sa-line); border-radius: var(--sa-r-lg); overflow:hidden; box-shadow: var(--sa-shadow); }
.sa-panel__head { background: var(--sa-sea); color:#fff; padding:1.4rem 1.6rem; }
.sa-panel__head b { font-family: var(--sa-font-display); font-size:1.2rem; display:block; }
.sa-panel__head span { font-size:.78rem; color: rgba(255,255,255,.72); }
.sa-panel__body { padding:1.5rem 1.6rem; }
.sa-info { list-style:none; margin:0 0 1.4rem; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.sa-info li { display:flex; gap:.9rem; align-items:flex-start; }
.sa-info svg { width:17px; height:17px; color: var(--sa-accent); flex:none; margin-top:3px; }
.sa-info b { display:block; font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color: var(--sa-muted); margin-bottom:2px; }
.sa-info span, .sa-info a { font-size:.93rem; color: var(--sa-ink); line-height:1.5; }
.sa-info a:hover { color: var(--sa-accent); }
.sa-hours { border-top:1px solid var(--sa-line); padding-top:1.3rem; margin-bottom:1.4rem; }
.sa-hours__row { display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; padding:.42rem 0; }
.sa-hours__row.is-today { font-weight:700; color: var(--sa-accent); }
.sa-hours__row span:first-child { color: var(--sa-muted); }
.sa-hours__row.is-today span:first-child { color: var(--sa-accent); }
.sa-panel .sa-btn { width:100%; justify-content:center; }
.sa-panel__btns { display:flex; flex-direction:column; gap:.6rem; }

/* Gallery */
.sa-gallery { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.sa-gallery a { border-radius: var(--sa-r-lg); overflow:hidden; aspect-ratio:4/3; position:relative; display:block; background: var(--sa-paper-2); }
.sa-gallery img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--sa-ease); }
.sa-gallery a::after { content:""; position:absolute; inset:0; background: rgba(var(--sa-ink-rgb),0); transition: background .4s; }
.sa-gallery a:hover img { transform: scale(1.07); }
.sa-gallery a:hover::after { background: rgba(var(--sa-ink-rgb),.2); }

/* Offer strip */
.sa-offer { background: var(--sa-accent); color:#fff; border-radius: var(--sa-r-lg); padding: clamp(1.6rem,3vw,2.4rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.sa-offer h3 { color:#fff; margin:0 0 .3rem; font-size:1.5rem; }
.sa-offer p { margin:0; color: rgba(255,255,255,.88); font-size:.94rem; }

/* --------------------------------------------------------------------------
   16. REVEAL ANIMATION
   -------------------------------------------------------------------------- */
/* Content is hidden ONLY when JS is confirmed running (html.sa-js). If the
   script is blocked, cached badly or errors, everything stays visible.
   Previously 35 of 39 elements on the live site never got .is-in and the page
   rendered blank — this pattern makes that failure mode impossible. */
html.sa-js [data-reveal] { opacity:0; transform: translateY(26px); transition: opacity .8s var(--sa-ease), transform .8s var(--sa-ease); }
html.sa-js [data-reveal].is-in { opacity:1; transform:none; }

/* Belt and braces: after 3s everything is shown regardless of observer state. */
html.sa-js.sa-reveal-done [data-reveal] { opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html.sa-js [data-reveal] { opacity:1 !important; transform:none !important; }
}

/* --------------------------------------------------------------------------
   16b. YOOTHEME HEADER SKIN
   --------------------------------------------------------------------------
   The theme's own navbar colour is a compiled LESS variable
   (@navbar-background = #253644, a blue-slate) set in the YOOtheme
   Customizer. It clashes with the Island Modern palette, and CSS shipped in
   a child theme cannot change a LESS variable — so we restyle the rendered
   header instead.

   The proper fix is YOOtheme -> Customizer -> Theme -> Colors -> Navbar
   Background = #042A47 (the poster navy). If you do that, this block simply
   agrees with it. To opt out entirely, delete this section.
   -------------------------------------------------------------------------- */
.tm-header .uk-navbar-container:not(.uk-navbar-transparent),
.tm-headerbar-bottom,
.tm-header-mobile .uk-navbar-container {
    background: var(--sa-ink) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Toolbar strip above the navbar (was teal #47A6A9). */
.tm-toolbar { background: var(--sa-ink) !important; }
.tm-toolbar,
.tm-toolbar a { color: rgba(255,255,255,.62) !important; font-size:.72rem; letter-spacing:.08em; }
.tm-toolbar a:hover { color:#fff !important; }

/* Navigation links */
.tm-header .uk-navbar-nav > li > a,
.tm-header .uk-navbar-item,
.tm-header .uk-logo {
    color: #fff !important;
    font-family: var(--sa-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .74rem;
    font-weight: 600;
}
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li.uk-active > a { color: var(--sa-sand) !important; }

/* Active item gets a subtle underline rather than a colour-only change. */
.tm-header .uk-navbar-nav > li.uk-active > a { position:relative; }
.tm-header .uk-navbar-nav > li.uk-active > a::after {
    content:''; position:absolute; left:0; right:0; bottom:22px; height:1px;
    background: var(--sa-sand);
}

/* --------------------------------------------------------------------------
   17. MOBILE MENU
   -------------------------------------------------------------------------- */
.sa-mobile { position:fixed; inset:0; z-index:80; background: var(--sa-ink); color:#fff; padding: 5.5rem var(--sa-gutter) 2.5rem; overflow-y:auto; transform: translateY(-100%); transition: transform .55s var(--sa-ease); visibility:hidden; }
.sa-mobile.is-open { transform:none; visibility:visible; }
.sa-mobile__close { position:absolute; top:1.4rem; right: var(--sa-gutter); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; }
.sa-mobile ul { list-style:none; margin:0 0 2rem; padding:0; }
.sa-mobile > ul > li { border-bottom:1px solid rgba(255,255,255,.13); }
.sa-mobile > ul > li > a { display:block; padding:1.05rem 0; font-family: var(--sa-font-display); font-size:1.65rem; letter-spacing:-.03em; }
.sa-mobile__sub { display:grid; grid-template-columns:1fr 1fr; gap:.4rem 1.5rem; padding:0 0 1.3rem; }
.sa-mobile__sub a { font-size:.9rem; color: rgba(255,255,255,.68); }

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* The [data-tiles] rules above are attribute selectors, so they outrank a
     bare .sa-tiles class. Match their specificity here or a 3-tile row would
     stay 3-across on a tablet. */
  .sa-tiles, .sa-tiles[data-tiles] { grid-template-columns: repeat(2,1fr); }
  .sa-tiles[data-tiles="1"] { grid-template-columns: 1fr; }
  .sa-shop__layout { grid-template-columns: 1fr 330px; }
}
@media (max-width: 1024px) {
  :root { --sa-header-h: 66px; }
  .sa-nav, .sa-header__act .sa-btn { display:none; }
  .sa-burger { display:grid; }
  .sa-hero__grid { grid-template-columns:1fr; gap:2.5rem; }
  .sa-datecard { max-width:420px; }
  .sa-split, .sa-signup, .sa-downloads__grid { grid-template-columns:1fr; }
  .sa-split--rev .sa-split__media { order:0; }
  .sa-split__badge { position:static; margin-top:1rem; max-width:none; display:flex; align-items:center; gap:1rem; }
  .sa-split__badge b { font-size:2rem; }
  .sa-steps { grid-template-columns:1fr; }
  .sa-shop__layout { grid-template-columns:1fr; }
  .sa-panel { position:static; }
  .sa-footer__grid { grid-template-columns:1fr 1fr; }
  .sa-utility__l span.sa-hide-md { display:none; }
}
@media (max-width: 680px) {
  .sa-tiles, .sa-tiles[data-tiles] { grid-template-columns:1fr; }
  .sa-hero { min-height: 78vh; }
  .sa-facts { grid-template-columns:1fr; gap:1.1rem; }
  .sa-filterbar { flex-direction:column; align-items:stretch; }
  .sa-search input, .sa-search input:focus { width:100%; }
  .sa-filters { overflow-x:auto; flex-wrap:nowrap; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; }
  .sa-filter { flex:none; }
  .sa-footer__grid { grid-template-columns:1fr; }
  .sa-utility__r { display:none; }
  .sa-head { flex-direction:column; align-items:flex-start; }
  .sa-mobile__sub { grid-template-columns:1fr; }
  .sa-offer { flex-direction:column; align-items:flex-start; }
  /* The trailing arrow is decorative; on a narrow phone the space is better
     spent on the file name, which can be long. */
  .sa-dl__item { padding:.95rem 1rem; gap:.8rem; }
  .sa-dl__item > svg { display:none; }
}

/* Print */
@media print {
  .sa-header, .sa-utility, .sa-footer, .sa-mobile, .sa-signup, .sa-scroll, .sa-marquee { display:none !important; }
  body { background:#fff; }
  .sa-card { break-inside: avoid; }
}

/* ==========================================================================
   Events (What's On)
   ========================================================================== */
/* Wider minimum than the shop grid (290px): an event card carries a date
   block plus two or three lines of text side by side, and narrower than this
   the title starts wrapping after two words. */
.sa-events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(1.2rem, 2vw, 2rem);
}
@media (max-width: 420px) {
  .sa-events { grid-template-columns: 1fr; }
}

.sa-event-card {
  position: relative;
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  transition: transform .45s var(--sa-ease), box-shadow .45s var(--sa-ease), border-color .45s;
}
.sa-event-card:hover { transform: translateY(-5px); box-shadow: var(--sa-shadow-lg); border-color: transparent; }

/* The date block is the anchor of the card: a visitor scanning the page is
   looking for "when", not "what", so it leads. */
.sa-event-card__date {
  flex: 0 0 auto;
  width: 74px;
  text-align: center;
  border-radius: var(--sa-r);
  /* Navy block with a gold numeral — the poster's own "2026" treatment. */
  background: var(--sa-ink);
  color: #fff;
  padding: .6rem .35rem .7rem;
  align-self: flex-start;
}
.sa-event-card__day {
  display: block;
  font-family: var(--sa-font-display);
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sa-gold-lt);
}
.sa-event-card__mon {
  display: block;
  margin-top: .25rem;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .82;
}

.sa-event-card__body { min-width: 0; }
.sa-event-card__body h3 {
  font-family: var(--sa-font-display);
  font-size: var(--sa-h3);
  line-height: 1.2;
  margin: 0 0 .45rem;
  transition: color .35s;
}
.sa-event-card:hover .sa-event-card__body h3 { color: var(--sa-accent); }

.sa-event-card__when,
.sa-event-card__where {
  display: block;
  font-size: var(--sa-small);
  color: var(--sa-muted);
  line-height: 1.5;
}
.sa-event-card__when { font-weight: 600; color: var(--sa-ink-soft); }
.sa-event-card__text { margin: .6rem 0 0; font-size: .9375rem; line-height: 1.6; color: var(--sa-ink-soft); }

@media (max-width: 480px) {
  .sa-event-card { gap: .9rem; padding: 1rem; }
  .sa-event-card__date { width: 62px; }
  .sa-event-card__day { font-size: 1.5rem; }
}

/* ==========================================================================
   Island map
   ========================================================================== */
/* Arran is roughly 25km tall by 15km wide, so the island is portrait. A
   full-bleed map frame is nearly 2.4:1 landscape, and Leaflet fits the
   tighter dimension -- the island filled the height and the remaining
   two-thirds of the frame was mainland Ayrshire. Capping the width gives a
   frame closer to the island's own shape, so Arran fills it and the ferry
   ports opposite still show for context. */
.sa-map-wrap {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}

/* The map is a narrow centred block, so a full-width left-aligned heading
   above it reads as belonging to something else. Centre the heading with it. */
.sa-map-band .sa-head { justify-content: center; text-align: center; }
.sa-map-band .sa-head__t { margin-inline: auto; }
.sa-map-band .sa-eyebrow { justify-content: center; }

.sa-map {
  width: 100%;
  border-radius: var(--sa-r-lg);
  border: 1px solid var(--sa-line);
  overflow: hidden;
  background: var(--sa-paper-2);
  z-index: 0;                 /* keep Leaflet panes under the sticky header */
}

/* Leaflet ships its own control styling; align it with the site instead of
   letting the default blue-grey chrome sit inside a warm-toned page. */
.sa-map .leaflet-container { font-family: var(--sa-font-body); background: #E7EEF3; }
.sa-map .leaflet-bar a {
  color: var(--sa-ink);
  border-bottom-color: var(--sa-line);
}
.sa-map .leaflet-bar a:hover { background: var(--sa-paper); }
.sa-map .leaflet-control-attribution { font-size: 10px; background: rgba(var(--sa-paper-rgb),.82); }

.sa-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
}
.sa-map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  font-family: var(--sa-font-body);
  font-size: var(--sa-small);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sa-ink);
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--sa-ease);
}
.sa-map-legend__item:hover { transform: translateY(-2px); border-color: var(--sa-ink); }
.sa-map-legend__item.is-on { background: var(--sa-ink); color: #fff; border-color: var(--sa-ink); }

.sa-map-legend__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--sa-accent);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset;
}
.sa-map-legend__n { opacity: .55; font-weight: 500; font-variant-numeric: tabular-nums; }
.sa-map-legend__item.is-on .sa-map-legend__n { opacity: .7; }

.sa-map-note {
  margin: .7rem 0 0;
  font-size: 11px;
  color: var(--sa-muted);
}
.sa-map-note a { color: inherit; text-decoration: underline; }

/* Pins. The palette is indexed, not named, so a new shop category picks up
   the next colour automatically without anyone editing this file. */
.sa-pin {
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sa-accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(var(--sa-ink-rgb),.4);
  transition: transform .2s var(--sa-ease);
}
.sa-pin-wrap:hover .sa-pin { transform: scale(1.28); }

/* Category pin colours, harmonised with the poster palette.
   These eight are checked to stay mutually distinguishable at 14px (the
   closest pair sits well apart) and each keeps enough contrast against
   its 3px white ring to read on a pale map tile. Categories are assigned
   an index in order, so 0-2 (coral / teal / gold) carry the poster's own
   colours and are what most sites will actually show. */
.sa-map-legend__dot[data-ci="0"], .sa-pin[data-ci="0"] { background: #C2542A; } /* coral-red */
.sa-map-legend__dot[data-ci="1"], .sa-pin[data-ci="1"] { background: #0F4C5C; } /* deep teal */
.sa-map-legend__dot[data-ci="2"], .sa-pin[data-ci="2"] { background: #C79A4B; } /* gold */
.sa-map-legend__dot[data-ci="3"], .sa-pin[data-ci="3"] { background: #8E2F2B; } /* brick red */
.sa-map-legend__dot[data-ci="4"], .sa-pin[data-ci="4"] { background: #2E7D6B; } /* sea green */
.sa-map-legend__dot[data-ci="5"], .sa-pin[data-ci="5"] { background: #6B7343; } /* olive */
.sa-map-legend__dot[data-ci="6"], .sa-pin[data-ci="6"] { background: #6E3060; } /* plum */
.sa-map-legend__dot[data-ci="7"], .sa-pin[data-ci="7"] { background: #3A5FA0; } /* slate blue */
.sa-map-legend__dot--all { background: linear-gradient(135deg, #C2542A 0%, #C79A4B 55%, #0F4C5C 100%); }

/* Popups */
.sa-map .leaflet-popup-content-wrapper { border-radius: var(--sa-r-lg); box-shadow: var(--sa-shadow-lg); }
.sa-map .leaflet-popup-content { margin: .85rem 1rem; min-width: 150px; }
.sa-pop__name { display: block; font-family: var(--sa-font-display); font-size: 1.0625rem; line-height: 1.25; color: var(--sa-ink); }
.sa-pop__cat, .sa-pop__village { display: block; font-size: var(--sa-small); color: var(--sa-muted); margin-top: .15rem; }
.sa-pop__link {
  display: inline-block;
  margin-top: .6rem;
  font-size: var(--sa-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sa-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.sa-pop__link:hover { color: var(--sa-accent-dk); }

@media (max-width: 640px) {
  .sa-map-legend { gap: .4rem; }
  .sa-map-legend__item { padding: .42rem .7rem; font-size: .75rem; }
}

/* A printed page cannot show an interactive map, and Leaflet tiles print as
   grey boxes, so hide it rather than waste a page. */
@media print {
  .sa-map-band { display: none; }
}

/* Village filters and category filters live in one row, so a hairline
   separates the two kinds. It is decorative only, and collapses on narrow
   screens where the buttons wrap anyway and a divider mid-row would be
   meaningless. */
.sa-filters__sep {
  width: 1px;
  align-self: stretch;
  min-height: 1.6rem;
  margin: 0 .35rem;
  background: var(--sa-line);
  flex: 0 0 auto;
}
.sa-filter--cat { font-style: normal; }

@media (max-width: 900px) {
  .sa-filters__sep { display: none; }
}