/* ===================================================================
   Ferðafelag Islands -- Volcanic Editorial
   =================================================================== */

:root {
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --basalt: #1a1c1e;
  --obsidian: #0d0e10;
  --pumice: #f4f1ec;
  --ash: #b8b2a8;
  --moss: #2d6b4f;
  --moss-light: #3a8963;
  --glacier: #7cb8c9;
  --lava: #c4553a;
  --steam: rgba(255,255,255,0.07);

  --gap: clamp(1rem, 4vw, 2.5rem);
  --max-w: 1320px;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--pumice);
  color: var(--basalt);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

/* -- Utilities -- */

.contain {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* -- Grain overlay -- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ====================
   Navigation
   ==================== */

nav[aria-label="Main"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;

  &.scrolled {
    background: rgba(13,14,16,0.85);
    backdrop-filter: blur(12px);
  }

  & .logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & span {
      font-size: 0.65rem;
      font-family: var(--font-body);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      opacity: 0.6;
      display: block;
      margin-top: 2px;
    }
  }

  & ul {
    display: flex;
    gap: 2rem;
    list-style: none;

    & a {
      color: rgba(255,255,255,0.9);
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      transition: color 0.2s;
      position: relative;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);

      &:hover { color: white; }

      &::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--moss-light);
        transition: width 0.3s ease;
      }

      &:hover::after { width: 100%; }
    }

    & a.nav-active {
      color: white;
    }

    & a.nav-active::after {
      width: 100%;
      background: var(--moss);
    }

    & .has-dropdown {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: -1rem;
        right: -1rem;
        height: 20px;
      }

      & .dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: -0.75rem;
        min-width: 200px;
        background: rgba(13,14,16,0.92);
        backdrop-filter: blur(16px);
        border-radius: 4px;
        padding: 0.5rem 0;
        flex-direction: column;
        gap: 0;
        box-shadow: 0 12px 40px rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.06);

        & a {
          display: block;
          padding: 0.5rem 1rem;
          font-size: 0.78rem;
          color: rgba(255,255,255,0.75);
          text-shadow: none;
          white-space: nowrap;
          transition: background 0.15s, color 0.15s;

          &:hover {
            background: rgba(255,255,255,0.06);
            color: white;
          }

          &::after { display: none; }
        }
      }

      &:hover > .dropdown { display: flex; }
    }
  }

  & .nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  & .nav-cart {
    position: relative;
    color: rgba(255,255,255,0.85);
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;

    &:hover { color: white; }

    & svg { display: block; }
  }

  & .nav-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    background: var(--lava);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
  }

  & .nav-cta {
    background: var(--moss);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 2px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.2s;

    &:hover { background: var(--moss-light); }
  }

  & .nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;

    & span {
      display: block;
      width: 22px;
      height: 2px;
      background: white;
      border-radius: 1px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
  }

  & .nav-mobile {
    display: none;
  }
}

@media (max-width: 768px) {
  nav[aria-label="Main"] {
    flex-wrap: wrap;

    & ul { display: none; }

    & .nav-cta { display: none; }

    & .nav-hamburger { display: flex; }

    & .nav-mobile {
      display: block;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.3s ease;
      opacity: 0;

      &.open {
        max-height: 400px;
        opacity: 1;
      }

      & ul {
        list-style: none;
        padding: 1rem 0 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0;

        & li {
          border-top: 1px solid rgba(255,255,255,0.08);
        }

        & a {
          display: block;
          padding: 0.75rem 0;
          color: rgba(255,255,255,0.85);
          font-size: 0.95rem;
          font-weight: 500;
          transition: color 0.2s;

          &:hover { color: white; }
        }

        & a.nav-active { color: white; }
      }
    }

    & .nav-mobile-cta {
      display: block;
      background: var(--moss);
      color: white;
      text-align: center;
      padding: 0.75rem;
      border-radius: 2px;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin: 0.5rem 0 1rem;
      transition: background 0.2s;

      &:hover { background: var(--moss-light); }
    }
  }

  /* Hamburger open animation */
  nav[aria-label="Main"]:has(.nav-mobile.open) .nav-hamburger {
    & span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    & span:nth-child(2) { opacity: 0; }
    & span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  }
}

/* ====================
   Hero
   ==================== */

.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;

  & .hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          to bottom,
          rgba(13,14,16,0.6) 0%,
          rgba(13,14,16,0.15) 15%,
          transparent 30%
        ),
        linear-gradient(
          to top,
          rgba(13,14,16,0.85) 0%,
          rgba(13,14,16,0.4) 35%,
          rgba(13,14,16,0.1) 60%,
          transparent 100%
        );
    }
  }

  & .hero-content {
    position: relative;
    z-index: 1;
    padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 8vh, 6rem);
    max-width: var(--max-w);
    margin-inline: auto;
    width: 100%;
    animation: hero-enter 1.2s cubic-bezier(0.16,1,0.3,1) both;
  }

  & .hero-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--moss-light);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;

    &::before {
      content: "";
      width: 32px;
      height: 1px;
      background: var(--moss-light);
    }
  }

  & h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1.08;
    color: white;
    max-width: 700px;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;

    & em {
      font-style: italic;
      color: var(--glacier);
    }
  }

  & .hero-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    max-width: 480px;
    line-height: 1.7;
    margin-bottom: 2rem;
  }

  & .hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;

    & a {
      padding: 0.75rem 2rem;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 2px;
      transition: all 0.25s ease;
    }

    & .primary {
      background: var(--moss);
      color: white;
      &:hover { background: var(--moss-light); transform: translateY(-1px); }
    }

    & .secondary {
      background: transparent;
      color: white;
      border: 1px solid rgba(255,255,255,0.25);
      &:hover { border-color: white; }
    }
  }

  & .scroll-hint {
    position: absolute;
    bottom: 2rem;
    right: var(--gap);
    z-index: 1;
    writing-mode: vertical-rl;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    gap: 0.75rem;

    &::after {
      content: "";
      width: 1px;
      height: 48px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
      animation: scroll-pulse 2s ease infinite;
    }
  }
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ====================
   Section Headings
   ==================== */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  gap: 1rem;
  flex-wrap: wrap;

  & h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  & .section-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--moss);
    margin-bottom: 0.5rem;
    display: block;
  }

  & .section-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--moss);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.2s;

    &:hover { gap: 0.7rem; }
    &::after { content: "\2192"; }
  }
}

/* ====================
   Trips Section
   ==================== */

section.trips {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.trip-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  }

  & .trip-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    & .trip-type {
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      background: var(--obsidian);
      color: white;
      font-size: 0.6rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 0.3rem 0.6rem;
      border-radius: 2px;
    }

    & .trip-difficulty {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      color: white;
      font-size: 0.55rem;
      letter-spacing: 3px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      opacity: 0.8;
    }

    & .trip-free-badge {
      position: absolute;
      bottom: 0.75rem;
      left: 0.75rem;
      background: var(--glacier);
      color: white;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.3rem 0.75rem;
      border-radius: 2px;
    }
  }

  &:hover .trip-img img { transform: scale(1.04); }

  & .trip-body {
    padding: 1.25rem;

    & h3 {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      line-height: 1.25;
    }

    & .trip-meta {
      display: flex;
      gap: 0.4rem;
      font-size: 0.75rem;
      color: var(--ash);
      margin-bottom: 0.75rem;

      & span {
        display: flex;
        align-items: center;
      }

      & span + span::before {
        content: "\00B7";
        margin-right: 0.4rem;
      }
    }

    & .trip-tags {
      display: flex;
      gap: 0.35rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }

    & .trip-tag {
      font-size: 0.55rem;
      font-weight: 600;
      color: var(--moss);
      background: rgba(45,107,79,0.06);
      padding: 0.15rem 0.45rem;
      border-radius: 2px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    & .trip-price {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;

      & .member {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--moss);
      }

      & .member.free-label {
        color: var(--glacier);
      }

      & .general {
        font-size: 0.8rem;
        color: var(--ash);
        text-decoration: line-through;
      }

      & .label {
        font-size: 0.65rem;
        color: var(--ash);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    }
  }
}

/* ====================
   Huts Section
   ==================== */

section.huts {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--basalt);
  color: var(--pumice);

  & .section-head .section-link { color: var(--glacier); }

  & .hut-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  & .hut-card {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    &:hover img { transform: scale(1.05); }

    & .hut-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.5rem;
    }

    & h3 {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 600;
      color: white;
      margin-bottom: 0.3rem;
    }

    & .hut-meta {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.6);
      display: flex;
      gap: 1rem;
    }
  }

  & .hut-stat-bar {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: clamp(2rem, 6vw, 5rem);
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);

    & .stat {
      text-align: center;

      & .stat-num {
        font-family: var(--font-display);
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--glacier);
        line-height: 1;
        margin-bottom: 0.3rem;
      }

      & .stat-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: rgba(255,255,255,0.4);
      }
    }
  }
}

@media (max-width: 768px) {
  section.huts .hut-grid { grid-template-columns: 1fr; }
}

/* ====================
   Trails Section
   ==================== */

section.trails {
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;

  & .trail-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
  }

  & .trail-img {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .trail-content {
    padding: 2rem 0;

    & h3 {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 400;
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    & p {
      color: #6b6860;
      margin-bottom: 1.5rem;
      line-height: 1.8;
    }

    & .trail-stats {
      display: flex;
      gap: 2rem;
      margin-bottom: 2rem;

      & .t-stat {
        & .t-val {
          font-family: var(--font-display);
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--moss);
          line-height: 1;
        }

        & .t-lbl {
          font-size: 0.65rem;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: var(--ash);
          margin-top: 0.2rem;
        }
      }
    }

    & .trail-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--moss);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      transition: gap 0.2s;

      &:hover { gap: 0.8rem; }
      &::after { content: "\2192"; }
    }
  }
}

@media (max-width: 768px) {
  section.trails .trail-feature { grid-template-columns: 1fr; }
}

/* ====================
   News Section
   ==================== */

section.news {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: #eae6df;
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}

.news-card {
  & .news-img {
    aspect-ratio: 3/2;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
  }

  &:hover .news-img img { transform: scale(1.03); }

  & .news-date {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ash);
    margin-bottom: 0.5rem;
  }

  & h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }

  & p {
    font-size: 0.85rem;
    color: #6b6860;
    line-height: 1.6;
  }
}

@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ====================
   Membership CTA
   ==================== */

section.membership {
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: var(--moss);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
  }

  & h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 1rem;
    position: relative;

    & em {
      font-style: italic;
      color: var(--glacier);
    }
  }

  & p {
    font-size: 1rem;
    opacity: 0.75;
    max-width: 560px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
  }

  & .price-row {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;

    & .price-tier {
      background: rgba(255,255,255,0.08);
      padding: 1.5rem 2rem;
      border-radius: var(--radius);
      min-width: 160px;
      border: 1px solid rgba(255,255,255,0.1);

      & .tier-name {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        opacity: 0.6;
        margin-bottom: 0.4rem;
      }

      & .tier-price {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 700;
      }

      & .tier-unit {
        font-size: 0.75rem;
        opacity: 0.5;
      }
    }
  }

  & .cta-btn {
    display: inline-block;
    background: white;
    color: var(--moss);
    padding: 0.85rem 2.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: transform 0.2s, box-shadow 0.2s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
  }
}

/* ── CMS Page Renderer ── */

.cms-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.cms-block { margin-bottom: 2.5rem; }

.cms-richtext h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 1rem; }
.cms-richtext h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; }
.cms-richtext p { margin-bottom: 1rem; line-height: 1.7; color: #3a3832; }
.cms-richtext ul, .cms-richtext ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.cms-richtext li { margin-bottom: 0.4rem; line-height: 1.6; }
.cms-richtext table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.85rem; }
.cms-richtext th { text-align: left; padding: 0.6rem 0.75rem; background: var(--basalt); color: white; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cms-richtext td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
.cms-richtext tr:last-child td { border-bottom: none; }

.cms-hero-inner { background: var(--basalt); color: white; padding: 2.5rem; border-radius: var(--radius); }
.cms-hero-inner h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 0.75rem; }
.cms-hero-inner p { opacity: 0.8; line-height: 1.6; }

.cms-image { margin: 0; }
.cms-image img { width: 100%; border-radius: var(--radius); }
.cms-image figcaption { font-size: 0.75rem; color: var(--ash); margin-top: 0.5rem; text-align: center; }

.cms-quote {
  border-left: 3px solid var(--moss);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  background: rgba(45,107,79,0.03);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.cms-quote p { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; margin: 0; line-height: 1.5; }
.cms-quote footer { margin-top: 0.75rem; font-size: 0.8rem; color: var(--ash); font-style: normal; }

.cms-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.cms-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.cms-card img { width: 100%; height: 140px; object-fit: cover; }
.cms-card h3 { font-size: 0.9rem; padding: 0.75rem 1rem 0.25rem; }
.cms-card p { font-size: 0.8rem; padding: 0 1rem 0.75rem; color: #5a564e; line-height: 1.5; }

.cms-divider { border: none; border-top: 1px solid rgba(0,0,0,0.06); margin: 2.5rem 0; }

/* ====================
   Footer
   ==================== */

footer[role="contentinfo"] {
  background: var(--obsidian);
  color: rgba(255,255,255,0.5);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;

  & .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
  }

  & .footer-brand {
    & h3 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      margin-bottom: 0.75rem;
    }

    & p {
      font-size: 0.85rem;
      line-height: 1.7;
      margin-bottom: 1rem;
    }

    & .footer-contact {
      font-size: 0.8rem;
      line-height: 2;

      & strong { color: rgba(255,255,255,0.7); }
    }
  }

  & .footer-col {
    & h4 {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.3);
      margin-bottom: 1rem;
    }

    & ul {
      list-style: none;

      & li {
        margin-bottom: 0.5rem;
      }

      & a {
        font-size: 0.85rem;
        color: rgba(255,255,255,0.5);
        transition: color 0.2s;

        &:hover { color: white; }
      }
    }
  }

  & .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
  }

  & .footer-social {
    display: flex;
    gap: 1.25rem;

    & a {
      color: rgba(255,255,255,0.35);
      transition: color 0.2s;
      &:hover { color: white; }
    }
  }
}

@media (max-width: 768px) {
  footer[role="contentinfo"] .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ====================
   Scroll animation
   ==================== */

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: reveal-up 0.8s cubic-bezier(0.16,1,0.3,1) both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@supports not (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================
   Motion -- Staggered Hero
   ==================== */

.hero-content > * {
  animation: hero-stagger 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.3s + var(--stagger, 0) * 0.15s);
}

@keyframes hero-stagger {
  from {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Hero image slow zoom */
.hero .hero-img img {
  animation: hero-zoom 20s ease-out both;
}

@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* ====================
   Motion -- Card Hovers
   ==================== */

.trip-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  }

  & .trip-img img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  &:hover .trip-img img {
    transform: scale(1.06);
  }
}

.hut-card {
  & img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  &:hover img {
    transform: scale(1.07);
  }

  & .hut-overlay {
    transition: padding-bottom 0.4s ease;
  }

  &:hover .hut-overlay {
    padding-bottom: 2rem;
  }
}

.news-card .news-img img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:hover .news-img img {
  transform: scale(1.05);
}

/* ====================
   Motion -- Buttons
   ==================== */

.hero-actions a {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.hero-actions .primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 107, 79, 0.3);
}

.hero-actions .secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.6);
}

.nav-cta {
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(45, 107, 79, 0.3);
}

/* ====================
   Motion -- Section Links
   ==================== */

.section-link {
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.section-link:hover {
  color: var(--moss-light);
}

.trail-link {
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.trail-link:hover {
  color: var(--moss-light);
}

/* ====================
   Motion -- Staggered Card Reveals
   Modern: each card animates via its own scroll timeline.
   Fallback: cards cascade when parent .reveal gets .visible.
   ==================== */

.reveal .trip-card,
.reveal .hut-card,
.reveal .news-card,
.reveal .hut-stat-bar .stat {
  animation: reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@supports not (animation-timeline: view()) {
  .reveal .trip-card,
  .reveal .hut-card,
  .reveal .news-card,
  .reveal .hut-stat-bar .stat {
    animation: none;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal.visible .trip-card,
  .reveal.visible .hut-card,
  .reveal.visible .news-card,
  .reveal.visible .hut-stat-bar .stat {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal .trip-grid > :nth-child(2),
  .reveal .hut-grid > :nth-child(2),
  .reveal .news-grid > :nth-child(2),
  .reveal .hut-stat-bar > :nth-child(2) { transition-delay: 0.12s; }

  .reveal .trip-grid > :nth-child(3),
  .reveal .hut-grid > :nth-child(3),
  .reveal .news-grid > :nth-child(3),
  .reveal .hut-stat-bar > :nth-child(3) { transition-delay: 0.24s; }

  .reveal .trip-grid > :nth-child(4) { transition-delay: 0.36s; }
}

/* ====================
   Reduced motion
   ==================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================
   Trips Catalog Page
   ==================== */

.page-header {
  padding-top: 8rem;
  padding-bottom: 3rem;
  background: var(--basalt);
  color: white;

  & h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
  }

  & .page-stats {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
  }
}

.filter-bar {
  background: white;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  margin-top: -2.5rem;
  margin-bottom: 2.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: flex-end;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  position: relative;
  z-index: 10;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 150px;
}

.filter-group.filter-search { flex: 1; min-width: 180px; }

.filter-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ash);
}

.filter-bar select,
.filter-bar input[type="search"] {
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  background: white;
  color: var(--basalt);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-bar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b8b2a8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.filter-bar input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23b8b2a8' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='5'/%3E%3Cline x1='10' y1='10' x2='13' y2='13'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.filter-bar select:focus,
.filter-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(45,107,79,0.08);
}

.filter-bar select:hover,
.filter-bar input[type="search"]:hover {
  border-color: rgba(0,0,0,0.2);
}

.trip-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.trip-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ash);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.trip-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
}

.trip-empty p { color: var(--ash); }
.trip-empty-hint { font-size: 0.85rem; margin-top: 0.5rem; }

.filter-checkbox {
  min-width: auto !important;
  align-self: flex-end;
  padding-bottom: 0.1rem;
}

.filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #5a564e;
  cursor: pointer;
  white-space: nowrap;
}

.filter-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--moss);
  cursor: pointer;
}

.load-more-sentinel {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 0;
}

.load-more-text {
  font-size: 0.8rem;
  color: var(--ash);
  letter-spacing: 0.02em;
}

@media (max-width: 700px) {
  .filter-group { min-width: calc(50% - 0.5rem); }
  .filter-group.filter-search { min-width: 100%; }
  .filter-checkbox { min-width: 100% !important; }
}

.trip-results {
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* ====================
   Page Hero (compact, trip catalog)
   ==================== */

.page-hero {
  position: relative;
  padding: clamp(8rem, 16vh, 12rem) 0 clamp(4rem, 7vh, 6rem);
  background: var(--basalt);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(45,107,79,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(124,184,201,0.08) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero .page-hero-content {
  position: relative;
  z-index: 1;
}

.page-hero .page-hero-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--moss-light);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-hero .page-hero-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--moss-light);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.1;
  color: white;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.page-hero .page-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  max-width: 480px;
  line-height: 1.7;
}

.page-hero .page-hero-stats {
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}

.page-hero .ph-stat .ph-val {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--glacier);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.page-hero .ph-stat .ph-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
}

/* ── Trip Catalog Grid (standalone) ── */

.catalog {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem);
}

/* Standalone trip grid (catalog page) */
.catalog .trip-grid,
.related-trips .trip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .catalog .trip-grid,
  .related-trips .trip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .catalog .trip-grid,
  .related-trips .trip-grid { grid-template-columns: 1fr; }
}

/* Trip type badge color variants */
.trip-type--gonguferð { background: var(--moss) !important; }
.trip-type--joklaferð { background: #2a6a8a !important; }
.trip-type--skidaferð { background: #6b4fa0 !important; }
.trip-type--dagsferð { background: #8a6b2a !important; }
.trip-type--namskeid  { background: var(--lava) !important; }

/* ── Past Trips Toggle ── */

.past-toggle {
  display: flex;
  justify-content: center;
  padding-block: 1.5rem 0;
}

.past-toggle label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--ash);
  cursor: pointer;
  transition: color 0.2s;
}

.past-toggle label:hover { color: var(--basalt); }

/* ====================
   Trip Detail Page
   ==================== */

.breadcrumb {
  padding: 5.5rem 0 1rem;
  background: var(--obsidian);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

.breadcrumb li + li::before {
  content: "\203A";
  margin-right: 0.5rem;
  opacity: 0.4;
}

.breadcrumb a {
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}

.breadcrumb a:hover { color: white; }

.breadcrumb .current {
  color: rgba(255,255,255,0.8);
}

/* Breadcrumb inside hero — transparent, inline */
.hut-hero .breadcrumb,
.trip-hero .breadcrumb {
  background: none;
  padding: 0;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

.hut-hero .breadcrumb a,
.trip-hero .breadcrumb a {
  color: rgba(255,255,255,0.5);
}

.hut-hero .breadcrumb span,
.trip-hero .breadcrumb span {
  color: rgba(255,255,255,0.3);
}

.trip-hero {
  position: relative;
  height: clamp(280px, 35vh, 400px);
  overflow: hidden;
}

.trip-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trip-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,14,16,0.2) 0%, transparent 50%),
    linear-gradient(to top, rgba(26,28,30,0.85) 0%, rgba(26,28,30,0.3) 50%, transparent 80%);
}

.trip-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(1.5rem, 3vh, 2.5rem);
  max-width: var(--max-w);
  margin-inline: auto;
}

.trip-hero-content .breadcrumb {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.trip-hero-content .breadcrumb a {
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}

.trip-hero-content .breadcrumb a:hover { color: white; }

.trip-hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: white;
  letter-spacing: -0.02em;
}

.trip-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 960px) {
  .trip-layout { grid-template-columns: 1fr; }
}

.trip-main h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  margin-top: 0;
}

.trip-main p {
  color: #4a4740;
  line-height: 1.85;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.trip-main .lead-text {
  font-size: 1.05rem;
  color: var(--basalt);
  line-height: 1.8;
  font-weight: 400;
  max-width: 60ch;
  margin-bottom: 2rem;
}

/* ── Trip Meta ── */

.trip-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ash);
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.trip-meta span + span::before {
  content: "\00b7";
  margin-right: 0.5rem;
  opacity: 0.4;
}

.trip-meta-type {
  font-weight: 600;
  color: var(--moss);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

/* ── Accordion ── */

.accordion { margin-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.08); }
.accordion-item { border-bottom: 1px solid rgba(0,0,0,0.08); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--basalt);
  text-align: left;
  transition: color 0.2s;
}

.accordion-trigger:hover { color: var(--moss); }

.accordion-trigger .acc-icon {
  font-size: 0.75rem;
  opacity: 0.4;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.accordion-item.open .accordion-trigger .acc-icon { transform: rotate(180deg); }

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s ease;
}

.accordion-item.open .accordion-panel {
  max-height: 500px;
  padding-bottom: 1.25rem;
}

.accordion-panel ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.5rem;
}

.accordion-panel li {
  font-size: 0.85rem;
  color: #5a564e;
  padding-left: 1rem;
  position: relative;
  line-height: 1.7;
}

.accordion-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--moss);
  opacity: 0.5;
}

/* ── Preparation Tips ── */

/* ── Preparation Tips ── */

.prep-tips {
  border-left: 2px solid var(--moss);
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}

.prep-tip + .prep-tip {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.prep-tip h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
  color: var(--basalt);
}

.prep-tip p {
  font-size: 0.85rem;
  color: #6b6860;
  line-height: 1.65;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .accordion-panel ul { grid-template-columns: 1fr; }
}

/* ── Booking Sidebar ── */

.trip-sidebar { position: sticky; top: 5.5rem; }

.booking-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.booking-card-header {
  background: var(--basalt);
  padding: 1.75rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.booking-card-header::before {
  content: "";
  position: absolute;
  inset: -20px;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle%3Ecircle%7Bfill:none;stroke:%23fff;stroke-width:.5%7D%3C/style%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='25'/%3E%3Ccircle cx='100' cy='100' r='50'/%3E%3Ccircle cx='100' cy='100' r='75'/%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3Ccircle cx='100' cy='100' r='130'/%3E%3C/svg%3E");
  pointer-events: none;
}

.booking-card-body { padding: 1.5rem; }

.spots-section { margin-bottom: 1.5rem; }

.spots-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.spots-label { font-size: 0.75rem; font-weight: 500; color: #5a564e; }
.spots-count { font-size: 0.75rem; color: var(--moss); font-weight: 600; }

.spots-bar {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.spots-bar-fill {
  height: 100%;
  background: var(--moss);
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.16,1,0.3,1);
}

.book-btn {
  display: block;
  width: 100%;
  padding: 0.9rem;
  background: var(--moss);
  color: white;
  border: none;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.book-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.book-btn:hover {
  background: var(--moss-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(45,107,79,0.25);
}

.book-btn:hover::after { transform: translateX(100%); }

.book-btn.secondary { background: transparent; color: var(--basalt); border: 1px solid rgba(0,0,0,0.15); }
.book-btn.secondary:hover { border-color: var(--basalt); background: transparent; box-shadow: none; }
.book-btn.secondary::after { display: none; }

.booking-card-body label {
  display: block;
  margin-bottom: 0.5rem;
}

.booking-card-body input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 2px;
  background: var(--pumice);
}

.booking-card-body input:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(45,107,79,0.1);
}

.book-error {
  font-size: 0.75rem;
  color: var(--lava);
  margin-bottom: 0.5rem;
}

.book-success p {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--moss);
  text-align: center;
  padding: 1rem 0;
}

.book-full {
  font-size: 0.85rem;
  color: var(--ash);
  text-align: center;
  padding: 0.5rem 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.booking-card + .booking-card {
  margin-top: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* ── Pricing Table ── */

.pricing-table {
  margin-bottom: 1rem;
}

.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pricing-row:last-child { border-bottom: none; }

.pricing-audience {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  font-weight: 500;
}

.pricing-amount {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

.booking-card-header .spots-section {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.booking-card-header .spots-label,
.booking-card-header .spots-count {
  color: rgba(255,255,255,0.6);
}

.booking-card-header .spots-bar {
  background: rgba(255,255,255,0.1);
}

/* ── Session Selector ── */

.session-selector {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.session-legend {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ash);
  margin-bottom: 0.6rem;
  padding: 0;
}

.session-pill {
  display: block;
  position: relative;
  padding: 0;
  margin-top: -1px;
  cursor: pointer;
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.session-pill:first-of-type { margin-top: 0; border-radius: 3px 3px 0 0; }
.session-pill:last-of-type { border-radius: 0 0 3px 3px; }
.session-pill:only-of-type { border-radius: 3px; }

.session-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.session-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, padding-left 0.2s ease;
}

.session-pill:hover:not(.disabled) { background: rgba(0,0,0,0.015); }

.session-pill:has(input:checked) {
  border-color: rgba(0,0,0,0.08);
  z-index: 1;
  position: relative;
  background: white;
}

.session-pill:has(input:checked) .session-content {
  border-left-color: var(--moss);
}

.session-pill:has(input:checked) .session-dates {
  color: var(--basalt);
}

.session-pill.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.session-dates {
  font-size: 0.82rem;
  font-weight: 500;
  color: #5a564e;
  transition: color 0.2s ease;
}

.session-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--moss);
  background: rgba(45,107,79,0.07);
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.session-badge-full {
  color: var(--ash);
  background: rgba(0,0,0,0.04);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,0.2);
}

.session-full-msg {
  font-size: 0.75rem;
  color: var(--ash);
  text-align: center;
  padding: 0.25rem 0;
}

#session-spots-info .spots-section { margin-top: 0.75rem; margin-bottom: 0; }

.trip-guests-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.trip-guests-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ash);
}

.trip-price-summary {
  padding: 0.75rem 0;
  margin-bottom: 0.25rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.trip-price-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.trip-price-desc {
  font-size: 0.78rem;
  color: #5a564e;
}

.trip-price-total {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--basalt);
}

/* ── Trip Multi-Dates Label ── */

.trip-multi-dates {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--moss);
  background: rgba(45,107,79,0.06);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-details { list-style: none; }

.sidebar-detail {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(0,0,0,0.05);
  gap: 1rem;
}

.sidebar-detail:first-child { border-top: none; padding-top: 0; }
.sd-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); font-weight: 500; flex-shrink: 0; }
.sd-value { font-size: 0.85rem; font-weight: 500; color: var(--basalt); text-align: right; }
.sd-value.deadline { color: var(--lava); font-weight: 600; }

.sidebar-note {
  margin-top: 1.25rem;
  padding: 1rem;
  background: rgba(45,107,79,0.05);
  border-radius: var(--radius);
  border-left: 3px solid var(--moss);
}

.sidebar-note p { font-size: 0.8rem; color: #4a4740; line-height: 1.6; margin: 0; }
.sidebar-note strong { font-weight: 600; color: var(--basalt); }

.sidebar-contact {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.05);
  text-align: center;
}

.sidebar-contact p { font-size: 0.75rem; color: var(--ash); margin: 0; }
.sidebar-contact a { color: var(--moss); font-weight: 500; transition: color 0.2s; }
.sidebar-contact a:hover { color: var(--moss-light); }

.related-trips {
  padding: clamp(4rem, 8vw, 6rem) 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* ====================
   Huts Map Page
   ==================== */

.huts-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  flex-wrap: wrap;
}

.view-toggle {
  display: flex;
  gap: 0.25rem;
  background: white;
  border-radius: var(--radius);
  padding: 0.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ash);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.view-toggle-btn:hover { color: var(--basalt); }
.view-toggle-btn.active { background: var(--basalt); color: white; }

.huts-filters select {
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.6rem 2rem 0.6rem 1rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  background: white;
  color: var(--basalt);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1c1e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color 0.2s;
}

.huts-filters select:hover { border-color: var(--moss); }
.huts-filters select:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(45,107,79,0.1); }

.split-layout {
  display: flex;
  height: calc(100vh - 60px);
  position: relative;
}

.hut-panel {
  width: 40%;
  overflow-y: auto;
  background: var(--pumice);
  display: flex;
  flex-direction: column;
}

.map-panel {
  width: 60%;
  position: sticky;
  top: 0;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

.hut-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hut-list-card {
  display: flex;
  gap: 1rem;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

.hut-list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.hut-list-card.active {
  border-color: var(--moss);
  box-shadow: 0 8px 24px rgba(45, 107, 79, 0.12);
}

.hut-list-card .hut-thumb {
  width: 140px;
  min-height: 120px;
  flex-shrink: 0;
  overflow: hidden;
}

.hut-list-card .hut-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hut-list-card:hover .hut-thumb img { transform: scale(1.06); }

.hut-list-card .hut-info {
  padding: 1rem 1rem 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.hut-list-card .hut-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.35rem;
  color: var(--basalt);
}

.hut-list-card .hut-details {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--ash);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.hut-list-card .hut-details span { display: flex; align-items: center; }
.hut-list-card .hut-details span + span::before { content: "\00b7"; margin-right: 0.5rem; }

.hut-list-card .hut-amenities {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.hut-list-card .hut-amenities span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--pumice);
  border-radius: var(--radius);
  font-size: 0.85rem;
  transition: background 0.2s;
}

.hut-list-card:hover .hut-amenities span { background: rgba(45, 107, 79, 0.08); }

.list-stat-bar {
  padding: 1.25rem 1.5rem;
  background: var(--basalt);
  color: var(--pumice);
  display: flex;
  justify-content: space-around;
  flex-shrink: 0;
}

.list-stat-bar .stat { text-align: center; }

.list-stat-bar .stat-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--glacier);
  line-height: 1;
  margin-bottom: 0.15rem;
}

.list-stat-bar .stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
}

/* ── Leaflet Overrides ── */

.leaflet-popup-content-wrapper {
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
  font-family: var(--font-body) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  min-width: 200px !important;
}

.leaflet-popup-tip {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.popup-inner { padding: 1rem 1.25rem; }
.popup-inner .popup-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--basalt); margin-bottom: 0.4rem; line-height: 1.3; }
.popup-inner .popup-meta { font-size: 0.75rem; color: var(--ash); display: flex; gap: 0.75rem; margin-bottom: 0.4rem; }
.popup-inner .popup-amenities { font-size: 0.85rem; letter-spacing: 0.15em; }
.popup-inner .popup-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; font-size: 0.7rem; font-weight: 600; color: var(--moss); text-transform: uppercase; letter-spacing: 0.06em; }
.popup-inner .popup-link::after { content: "\2192"; }

@media (max-width: 900px) {
  .split-layout { flex-direction: column-reverse; height: auto; }
  .hut-panel { width: 100%; height: auto; max-height: none; overflow-y: visible; }
  .map-panel { width: 100%; height: 50vh; min-height: 350px; position: relative; }
  .hut-list-card .hut-thumb { width: 110px; min-height: 100px; }
}

@media (max-width: 480px) {
  .hut-list-card .hut-name { font-size: 1rem; }
  .hut-list-card .hut-thumb { width: 90px; min-height: 90px; }
}

/* ====================
   Huts Grid View
   ==================== */

.huts-grid {
  padding-block: 0 clamp(4rem, 8vw, 7rem);
}

.huts-grid .hut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.huts-grid-stats {
  text-align: center;
  padding-top: 2rem;
  font-size: 0.8rem;
  color: var(--ash);
}

.hut-card-link {
  display: block;
  height: 100%;
}

.huts-grid .hut-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.huts-grid .hut-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.hut-card-photo {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.hut-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.huts-grid .hut-card:hover .hut-card-photo img { transform: scale(1.06); }

.hut-card-body {
  padding: 1.25rem;
}

.hut-card-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.hut-card-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--ash);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.hut-card-meta span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.hut-card-meta svg { opacity: 0.5; }

.hut-card-amenities {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.hut-card-amenities span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--pumice);
  border-radius: var(--radius);
}

.hut-card-pricing {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.hut-card-price {
  font-size: 0.8rem;
  color: var(--basalt);
}

.hut-card-price strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--moss);
}

.hut-card-price small {
  font-size: 0.65rem;
  color: var(--ash);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.25rem;
}

.hut-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--moss);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: gap 0.2s;
}

.hut-card:hover .hut-card-action { gap: 0.6rem; }

.huts-empty {
  text-align: center;
  padding: 3rem;
  color: var(--ash);
}

/* ====================
   Hut Detail Page
   ==================== */

.hut-hero {
  position: relative;
  height: clamp(280px, 35vh, 400px);
  overflow: hidden;
}

.hut-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hut-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,14,16,0.4) 0%, transparent 40%),
    linear-gradient(to top, rgba(13,14,16,0.7) 0%, transparent 60%);
}

.hut-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(1.5rem, 3vh, 2.5rem);
  max-width: var(--max-w);
  margin-inline: auto;
}

.hut-hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hut-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ash);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.hut-meta span + span::before {
  content: "\00b7";
  margin-right: 0.5rem;
}

.hut-detail {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 900px) {
  .hut-detail { grid-template-columns: 1fr; }
}

.hut-main h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hut-main p {
  color: #4a4740;
  line-height: 1.85;
  margin-bottom: 1.5rem;
}

.hut-main .lead-text {
  font-size: 1.05rem;
  color: var(--basalt);
  line-height: 1.85;
  margin-bottom: 2.5rem;
}

.hut-main h2 + .hut-amenities-list,
.hut-main h2 + .hut-info-list {
  margin-top: 0.25rem;
}

.hut-amenities-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 2.5rem;
}

.hut-amenities-list > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.hut-amenities-list dt {
  font-size: 1.1rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.hut-amenities-list dd {
  font-size: 0.85rem;
  color: var(--basalt);
}

.hut-info-list {
  margin-bottom: 2.5rem;
}

.hut-info-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.hut-info-list > div:last-child { border-bottom: none; }

.hut-info-list dt {
  font-size: 0.8rem;
  color: var(--ash);
  font-weight: 500;
}

.hut-info-list dd {
  font-size: 0.85rem;
  color: var(--basalt);
  font-weight: 500;
}

.hut-sidebar { position: sticky; top: 5.5rem; align-self: start; }

.hut-booking-card {
  border-top: 3px solid var(--moss);
}

.booking-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
  color: var(--basalt);
}

.info-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.info-card h4 {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ash);
  margin-bottom: 1rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.info-row:last-child { border-bottom: none; }
.info-row .info-label { color: #6b6860; }
.info-row .info-value { font-weight: 500; }

.info-card + .info-card { margin-top: 1.25rem; }

.sidebar-cta {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  background: var(--moss);
  color: white;
  padding: 0.85rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.sidebar-cta:hover {
  background: var(--moss-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(45, 107, 79, 0.25);
}

.hut-map { margin-top: 2.5rem; }
.hut-map h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; margin-bottom: 1rem; }

.nearby-trails { margin-top: 2.5rem; }
.nearby-trails h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; margin-bottom: 1.25rem; }

.trail-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.trail-card-sm {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trail-card-sm:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.trail-card-sm .tc-img { aspect-ratio: 16/9; overflow: hidden; }
.trail-card-sm .tc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.trail-card-sm:hover .tc-img img { transform: scale(1.05); }
.trail-card-sm .tc-body { padding: 1rem 1.25rem; }
.trail-card-sm .tc-body h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.3rem; }
.trail-card-sm .tc-body .tc-meta { font-size: 0.75rem; color: var(--ash); display: flex; gap: 0.75rem; }

/* ====================
   Trails Page (Gönguleiðir)
   ==================== */

.filters {
  display: flex;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.filters select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.6rem 2rem 0.6rem 1rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 2px;
  background: white;
  color: var(--basalt);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a1c1e' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color 0.2s;
}

.filters select:hover { border-color: var(--moss); }
.filters select:focus { outline: 2px solid var(--moss); outline-offset: 1px; }

.featured-trail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  transition: box-shadow 0.3s ease;
}

.featured-trail:hover { box-shadow: 0 16px 50px rgba(0,0,0,0.08); }

.featured-trail .ft-img { aspect-ratio: 4/3; overflow: hidden; }
.featured-trail .ft-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.featured-trail:hover .ft-img img { transform: scale(1.04); }

.featured-trail .ft-content { padding: 2.5rem 2.5rem 2.5rem 0; }

.featured-trail .ft-badge {
  display: inline-block;
  background: var(--moss);
  color: white;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
  margin-bottom: 1rem;
}

.featured-trail .ft-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.featured-trail .ft-content p {
  color: #6b6860;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.trail-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.t-stat .t-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--moss);
  line-height: 1;
}

.t-stat .t-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ash);
  margin-top: 0.2rem;
}

.trail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--moss);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: gap 0.2s, color 0.2s;
}

.trail-link:hover { gap: 0.8rem; color: var(--moss-light); }
.trail-link::after { content: "\2192"; }

@media (max-width: 768px) {
  .featured-trail { grid-template-columns: 1fr; }
  .featured-trail .ft-content { padding: 1.5rem; }
}

.trail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding-bottom: clamp(4rem, 8vw, 7rem);
  max-width: 900px;
}

.trail-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
  cursor: pointer;
}

.trail-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.trail-card .tc-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}

.trail-card .tc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.trail-card:hover .tc-img img { transform: scale(1.06); }

.trail-card .tc-difficulty {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--obsidian);
  color: white;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
}

.trail-card .tc-region {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--obsidian);
  color: white;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
}

.trail-card .tc-body { padding: 1.25rem; }

.trail-card .tc-body h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.trail-card .tc-meta {
  display: flex;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--ash);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.trail-card .tc-meta span { display: flex; align-items: center; }
.trail-card .tc-meta span + span::before { content: "\00B7"; margin-right: 0.4rem; }

.trail-card .tc-huts {
  font-size: 0.75rem;
  color: var(--moss);
  font-weight: 500;
}

/* ====================
   Detail Hero (shared: trails, articles)
   ==================== */

.detail-hero {
  position: relative;
  height: clamp(280px, 35vh, 400px);
  overflow: hidden;
}

.detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero-overlay,
.article-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(to bottom, rgba(13,14,16,0.15) 0%, transparent 40%),
    linear-gradient(to top, rgba(26,28,30,0.85) 0%, rgba(26,28,30,0.3) 50%, transparent 80%);
}

.detail-hero-overlay h1,
.article-hero-overlay h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.detail-hero-overlay .breadcrumb,
.article-hero-overlay .breadcrumb {
  background: none;
  padding: 0;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.detail-hero-overlay .breadcrumb a,
.article-hero-overlay .breadcrumb a {
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}

.detail-hero-overlay .breadcrumb a:hover,
.article-hero-overlay .breadcrumb a:hover { color: white; }

.detail-meta {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.meta-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.1);
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
}

.article-hero-date {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
}

/* ── Detail Content Layout (trails, articles) ── */

.detail-content {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .detail-content { grid-template-columns: 1fr; }
}

.detail-main h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.detail-main p {
  color: #4a4740;
  line-height: 1.85;
  font-size: 0.95rem;
}

/* Admin detail cards, dl.admin-dl, .edit-form, .form-row, .edit-actions
   are defined in adminkit/static/admin.css */

.detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.stat-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--moss);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.stat-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ash);
}

.linked-huts {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.linked-hut-card {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  background: white;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.linked-hut-card:hover {
  border-color: var(--moss);
  box-shadow: 0 4px 12px rgba(45,107,79,0.1);
}

.gps-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  background: var(--basalt);
  color: white;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}

.gps-download:hover { background: var(--moss); }

.detail-sidebar { position: sticky; top: 5.5rem; }

.sidebar-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.sidebar-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.info-list {
  list-style: none;
}

.info-list dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash);
  font-weight: 500;
  margin-top: 0.75rem;
}

.info-list dt:first-child { margin-top: 0; }

.info-list dd {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--basalt);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* ====================
   News Page (Fréttir)
   ==================== */

.news-hero {
  display: block;
  position: relative;
  height: clamp(350px, 50vh, 500px);
  overflow: hidden;
}

.news-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-hero:hover img { transform: scale(1.03); }

.news-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(to top, rgba(26,28,30,0.9) 0%, rgba(26,28,30,0.4) 40%, transparent 70%);
}

.news-hero-content .contain { padding-bottom: clamp(2rem, 4vh, 3rem); }

.news-hero-date {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--glacier);
  margin-bottom: 0.75rem;
  display: block;
}

.news-hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color: white;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  max-width: 28ch;
}

.news-hero-content p {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 50ch;
}

/* ── News Feed ── */

.news-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-feed-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.2s;
}

.news-feed-item:first-child { border-top: 1px solid rgba(0,0,0,0.06); }

.news-feed-item:hover { background: rgba(0,0,0,0.015); }

.news-feed-img {
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.news-feed-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-feed-item:hover .news-feed-img img { transform: scale(1.04); }

.news-feed-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-feed-date {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash);
  margin-bottom: 0.4rem;
}

.news-feed-body h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

.news-feed-body p {
  font-size: 0.85rem;
  color: #6b6860;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .news-feed-item { grid-template-columns: 100px 1fr; gap: 1rem; }
  .news-feed-body h3 { font-size: 1.1rem; }
}

/* ── Article Detail ── */

.article-hero {
  position: relative;
  height: clamp(280px, 35vh, 400px);
  overflow: hidden;
}

.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.article-lede {
  font-size: 1.15rem;
  color: var(--basalt);
  line-height: 1.8;
  margin-bottom: 2rem;
  font-weight: 400;
}

.article-body {
  font-size: 0.95rem;
  color: #4a4740;
  line-height: 1.85;
}

.article-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.article-back {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--moss);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.article-back:hover { color: var(--moss-light); }

.section-divider {
  width: 40px;
  height: 2px;
  background: var(--moss);
  margin: 2.5rem 0;
}

/* ====================
   Membership Page (Skráning)
   ==================== */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 768px) {
  .tier-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

.tier-card {
  background: white;
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.06);
}

.tier-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.tier-card.featured { border: 2px solid var(--moss); }

.tier-card.featured::before {
  content: "Vinsaelast";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--moss);
  color: white;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
}

.tier-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.tier-card .tier-price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--moss); line-height: 1; margin-bottom: 0.25rem; }
.tier-card .tier-unit { font-size: 0.8rem; color: var(--ash); margin-bottom: 1.5rem; }

.tier-card .tier-features { list-style: none; text-align: left; margin-bottom: 2rem; }
.tier-card .tier-features li { padding: 0.5rem 0; font-size: 0.85rem; border-bottom: 1px solid rgba(0,0,0,0.04); display: flex; align-items: center; gap: 0.5rem; }
.tier-card .tier-features li:last-child { border-bottom: none; }
.tier-card .tier-features .check { color: var(--moss); font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }

.tier-btn {
  display: block;
  width: 100%;
  padding: 0.85rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.tier-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.tier-btn.primary { background: var(--moss); color: white; }
.tier-btn.primary:hover { background: var(--moss-light); }
.tier-btn.secondary { background: transparent; color: var(--basalt); border: 1px solid rgba(0,0,0,0.15); }
.tier-btn.secondary:hover { border-color: var(--basalt); }

.reg-section {
  background: white;
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.reg-section h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; margin-bottom: 0.5rem; }
.reg-section .reg-sub { font-size: 0.9rem; color: #6b6860; margin-bottom: 2rem; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); margin-bottom: 0.4rem; }

.form-group input,
.form-group select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 2px;
  background: var(--pumice);
  color: var(--basalt);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(45,107,79,0.1);
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a1c1e' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-submit {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.form-submit button {
  background: var(--moss);
  color: white;
  padding: 0.85rem 3rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.3s;
}

.form-submit button:hover {
  background: var(--moss-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45,107,79,0.3);
}

.benefits-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--basalt);
  color: var(--pumice);
}

.benefits-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  text-align: center;
}

.benefits-section h2 em { font-style: italic; color: var(--glacier); }

.benefits-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  max-width: 500px;
  margin: 0 auto 3rem;
  line-height: 1.7;
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.perk {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.perk h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: white; margin-bottom: 0.5rem; }
.perk p { font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.6; }

.discounts-section { margin-top: 2rem; }
.discounts-section h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin-bottom: 1.5rem; text-align: center; color: var(--glacier); }

.discount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.discount-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.discount-item .d-pct { font-weight: 700; color: var(--glacier); font-size: 0.85rem; white-space: nowrap; }

/* ====================
   About Page (Um FÍ)
   ==================== */

.about-section {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.about-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.about-section p {
  color: #6b6860;
  line-height: 1.8;
  margin-bottom: 1rem;
  max-width: 720px;
}

.mission-block {
  background: var(--basalt);
  color: var(--pumice);
  padding: clamp(3rem, 6vw, 5rem) 0;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.mission-block .mission-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.mission-block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.mission-block h2 em { font-style: italic; color: var(--glacier); }

.mission-block p {
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.mission-block .mission-img {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.mission-block .mission-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .mission-block .mission-inner { grid-template-columns: 1fr; }
}

.timeline {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--moss), var(--glacier));
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -3rem;
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--moss);
  border: 2px solid var(--pumice);
}

.timeline-item .tl-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--moss);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.timeline-item .tl-text {
  font-size: 0.9rem;
  color: #6b6860;
  line-height: 1.6;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.staff-card { text-align: center; }

.staff-card .staff-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--ash);
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  font-family: var(--font-display);
  font-weight: 600;
}

.staff-card h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; }
.staff-card .staff-role { font-size: 0.75rem; color: var(--ash); text-transform: uppercase; letter-spacing: 0.06em; }

.chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.chapter-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chapter-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.chapter-card h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.3rem; }
.chapter-card .ch-region { font-size: 0.75rem; color: var(--ash); margin-bottom: 0.5rem; }
.chapter-card p { font-size: 0.85rem; color: #6b6860; line-height: 1.6; }

.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.board-member {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: white;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  border: 1px solid rgba(0,0,0,0.06);
}

.board-member .bm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--moss);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.board-member h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.15rem; }
.board-member .bm-role { font-size: 0.7rem; color: var(--ash); text-transform: uppercase; letter-spacing: 0.05em; }

.contact-card {
  background: white;
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 1.5rem;
}

.contact-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
.contact-card .contact-info { font-size: 0.9rem; line-height: 2; color: #6b6860; }
.contact-card .contact-info strong { color: var(--basalt); }
.contact-card .contact-hours h4 { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ash); margin-bottom: 0.75rem; }
.contact-card .contact-hours .hours-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
.contact-card .contact-hours .hours-row:last-child { border-bottom: none; }
.contact-card .contact-hours .h-day { color: #6b6860; }
.contact-card .contact-hours .h-time { font-weight: 500; }

@media (max-width: 600px) {
  .contact-card { grid-template-columns: 1fr; }
}

.env-banner {
  background: var(--moss);
  color: white;
  padding: clamp(3rem, 5vw, 4rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.env-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.env-banner h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; margin-bottom: 0.75rem; position: relative; }
.env-banner p { font-size: 0.95rem; opacity: 0.75; max-width: 560px; margin: 0 auto; line-height: 1.7; position: relative; }

/* ── Image Carousel ── */

.carousel { position: relative; }

.carousel-main {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--basalt);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.carousel-prev { left: 0.75rem; }
.carousel-next { right: 0.75rem; }
.carousel-prev:hover, .carousel-next:hover { background: rgba(0,0,0,0.6); }

.carousel-counter {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.carousel-thumbs {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.carousel-thumbs::-webkit-scrollbar { display: none; }

.carousel-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  border-radius: 3px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s;
  padding: 0;
  background: none;
}

.carousel-thumb.active {
  opacity: 1;
  border-color: var(--moss);
}

.carousel-thumb:hover { opacity: 0.8; }

.carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trip-carousel-section {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 2rem 3rem;
}

.trip-carousel-section h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* ── Image Gallery ── */

.gallery { padding: 2rem 0 3rem; }
.gallery h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1.25rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}

.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: block;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ====================
   Product Suggestions
   ==================== */

.product-suggestions {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.suggestion-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.suggestion-scroll::-webkit-scrollbar { display: none; }

.suggestion-card {
  flex: 0 0 240px;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.suggestion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.suggestion-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.suggestion-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.suggestion-card:hover .suggestion-img img { transform: scale(1.04); }

.suggestion-body {
  padding: 1rem;
}

.suggestion-body h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  line-height: 1.25;
}

.suggestion-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--moss);
  margin-bottom: 0.75rem;
}

/* ====================
   Shop Page (Vefverslun)
   ==================== */

.shop-categories {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-top: 1rem;
}

.category-tab {
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ash);
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.category-tab:hover { color: var(--basalt); border-color: var(--basalt); }
.category-tab.active { background: var(--basalt); color: white; border-color: var(--basalt); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.product-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.product-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-img img { transform: scale(1.06); }

.product-body {
  padding: 1.25rem;
}

.product-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  line-height: 1.25;
}

.product-desc {
  font-size: 0.8rem;
  color: #6b6860;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.product-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--moss);
  margin-bottom: 0.75rem;
}

.add-to-cart-btn {
  display: block;
  width: 100%;
  padding: 0.65rem;
  background: var(--basalt);
  color: white;
  border: none;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.add-to-cart-btn:hover {
  background: var(--moss);
  transform: translateY(-1px);
}


.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--ash);
  grid-column: 1 / -1;
}

/* ====================
   Page Header — Inner Layout
   ==================== */

.page-header .page-header-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.page-header .page-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--glacier);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-header .page-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--glacier);
}

.page-header .page-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  font-weight: 400;
}

/* ── Page header variant for light bg pages ── */

.page-header--light {
  padding-top: calc(80px + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--pumice);
  color: var(--basalt);
}

.page-header--light .section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--moss);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-header--light .section-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--moss);
}

.page-header--light h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.page-header--light h1 em {
  font-style: italic;
  color: var(--moss);
}

.page-header--light p {
  font-size: 1rem;
  color: #6b6860;
  max-width: 560px;
  line-height: 1.7;
}

/* ── Centered variant (for membership) ── */

.page-header--light.text-center {
  text-align: center;
}

.page-header--light.text-center .section-label {
  justify-content: center;
}

.page-header--light.text-center .section-label::before,
.page-header--light.text-center .section-label::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--moss);
}

.page-header--light.text-center p {
  margin: 0 auto;
}

/* ====================
   Cart Drawer
   ==================== */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  background: white;
  z-index: 151;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.cart-overlay.open .cart-drawer {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-drawer-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
}

.cart-drawer-count {
  font-size: 0.75rem;
  color: var(--ash);
  font-family: var(--font-body);
  font-weight: 400;
}

.cart-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ash);
  transition: color 0.2s;
}

.cart-close:hover { color: var(--basalt); }

.cart-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
  color: var(--ash);
  text-align: center;
}

.cart-empty-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-drawer-items {
  flex: 1;
  overflow-y: auto;
}

.cart-item {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0.85rem;
  align-items: start;
}

.cart-item-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: white;
  flex-shrink: 0;
}

.cart-item-icon.product { background: var(--basalt); }
.cart-item-icon.trip { background: var(--moss); }
.cart-item-icon.hut { background: var(--glacier); color: var(--basalt); }
.cart-item-icon.membership { background: var(--lava); }

.cart-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-item-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.75rem;
}

.cart-item-info { min-width: 0; }

.cart-item-type {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ash);
  display: block;
  margin-bottom: 0.15rem;
}

a.cart-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--basalt);
  line-height: 1.3;
  display: block;
  transition: color 0.2s;
}

a.cart-item-name:hover { color: var(--moss); }

.cart-item-detail {
  font-size: 0.7rem;
  color: var(--ash);
  margin-top: 0.1rem;
  display: block;
}

.cart-item-pricing {
  text-align: right;
  flex-shrink: 0;
}

.cart-item-total {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--basalt);
  display: block;
}

.cart-item-unit {
  font-size: 0.65rem;
  color: var(--ash);
  display: block;
  margin-top: 0.1rem;
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0,0,0,0.1);
  background: white;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--basalt);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}

.qty-btn:first-child { border-radius: 3px 0 0 3px; }
.qty-btn:last-child { border-radius: 0 3px 3px 0; }

.qty-btn:hover {
  border-color: var(--moss);
  background: rgba(45, 107, 79, 0.04);
}

.qty-btn-delete:hover {
  border-color: var(--lava);
  color: var(--lava);
  background: rgba(196, 85, 58, 0.04);
}

.qty-num {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 2rem;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.cart-item-booking-tag {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--moss);
  background: rgba(45, 107, 79, 0.06);
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
}

.cart-item-remove {
  color: var(--ash);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.25rem;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.cart-item-remove:hover { color: var(--lava); }

.cart-item-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.cart-item-price {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Shipping Progress ── */

.cart-shipping-bar {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  background: rgba(45, 107, 79, 0.03);
}

.shipping-msg {
  font-size: 0.72rem;
  color: #4a4740;
  margin-bottom: 0.4rem;
}

.shipping-msg.shipping-free {
  color: var(--moss);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
}

.shipping-progress {
  height: 3px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.shipping-progress-fill {
  height: 100%;
  background: var(--moss);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ── Cart Footer ── */

.cart-drawer-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: white;
}

.cart-discount {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cart-discount-input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--basalt);
  background: white;
  transition: border-color 0.2s;
}

.cart-discount-input:focus {
  outline: none;
  border-color: var(--moss);
}

.cart-discount-input::placeholder {
  color: var(--ash);
}

.cart-discount-btn {
  padding: 0.55rem 1rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  background: white;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--basalt);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.cart-discount-btn:hover {
  border-color: var(--moss);
  background: rgba(45, 107, 79, 0.04);
}

.cart-summary {
  margin-bottom: 1rem;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--ash);
  padding: 0.2rem 0;
}

.cart-summary-row.total {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--basalt);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.cart-shipping-free-label {
  color: var(--moss);
  font-weight: 600;
}

.cart-checkout-btn {
  display: block;
  width: 100%;
  padding: 0.85rem;
  margin-top: 1rem;
  background: var(--moss);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}

.cart-checkout-btn:hover { background: var(--moss-light); }

.cart-continue {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--ash);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  transition: color 0.2s;
}

.cart-continue:hover { color: var(--basalt); }

/* ====================
   Checkout Page
   ==================== */

.checkout-layout {
  padding-top: 5.5rem;
  min-height: 100vh;
}

.checkout-header {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.checkout-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 400;
}

.checkout-steps {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.checkout-step {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkout-step.active { color: var(--basalt); }
.checkout-step.done { color: var(--moss); }

.step-num {
  width: 24px; height: 24px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

.checkout-step.active .step-num {
  background: var(--basalt);
  color: white;
  border-color: var(--basalt);
}

.checkout-step.done .step-num {
  background: var(--moss);
  color: white;
  border-color: var(--moss);
}

.checkout-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2rem, 5vw, 4rem);
  padding: 2.5rem 0 4rem;
  align-items: start;
}

@media (max-width: 900px) {
  .checkout-body { grid-template-columns: 1fr; }
}

.checkout-section { margin-bottom: 2.5rem; }

.checkout-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash);
  margin-bottom: 0.35rem;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--basalt);
  background: white;
  transition: border-color 0.2s;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--moss);
}

.checkout-error {
  background: rgba(196, 85, 58, 0.08);
  border: 1px solid rgba(196, 85, 58, 0.2);
  color: var(--lava);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  margin-top: 1rem;
}

.checkout-booking-card {
  background: white;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.checkout-booking-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.checkout-booking-type {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.15rem;
}

.checkout-booking-type.type-trip { color: var(--moss); }
.checkout-booking-type.type-hut { color: var(--glacier); }

.checkout-booking-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.checkout-booking-detail {
  font-size: 0.75rem;
  color: var(--ash);
}

.checkout-booking-price {
  font-weight: 600;
  font-size: 0.9rem;
}

/* ── Order Summary ── */

.order-summary {
  background: white;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.06);
  position: sticky;
  top: 6rem;
}

.order-summary-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.order-summary-header h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
}

.order-summary-items { padding: 0; }

.order-item {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.order-item-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--basalt);
  line-height: 1.4;
}

.order-item-meta {
  font-size: 0.7rem;
  color: var(--ash);
}

.order-item-price {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.order-summary-totals {
  padding: 1rem 1.5rem 1.5rem;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ash);
  padding: 0.2rem 0;
}

.summary-line.total {
  font-size: 1rem;
  font-weight: 600;
  color: var(--basalt);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.checkout-pay-btn {
  display: block;
  width: 100%;
  padding: 0.85rem;
  margin-top: 1rem;
  background: var(--moss);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}

.checkout-pay-btn:hover { background: var(--moss-light); }

.checkout-secure {
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.65rem;
  color: var(--ash);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* ── Booking Calendar (kit vars mapped to Volcanic Editorial) ── */

:root {
  --cal-accent: var(--moss);
  --cal-accent-wash: rgba(45, 107, 79, 0.06);
  --cal-border: rgba(0,0,0,0.1);
  --cal-text: var(--basalt);
  --cal-muted: var(--ash);
  --cal-bg: white;
  --cal-radius: var(--radius);
}

.hut-guests-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.hut-guests-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash);
}

.guest-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  overflow: hidden;
}

.guest-stepper button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--basalt);
  cursor: pointer;
  transition: background 0.15s;
}

.guest-stepper button:hover:not([disabled]) {
  background: rgba(0,0,0,0.04);
}

.guest-stepper button[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

.guest-stepper input {
  width: 3rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--basalt);
  border: none;
  border-inline: 1px solid rgba(0,0,0,0.1);
  padding: 0.4rem 0;
  font-family: var(--font-body);
  background: transparent;
  -moz-appearance: textfield;
}

.guest-stepper input::-webkit-outer-spin-button,
.guest-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.guest-stepper input:focus {
  outline: none;
  background: rgba(45,107,79,0.04);
}

/* ── Booking Add-to-Cart Button ── */

.booking-add-to-cart {
  display: flex;
  width: 100%;
  padding: 0.75rem;
  background: var(--moss);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: background 0.2s;
}

.booking-add-to-cart:hover:not([disabled]) { background: var(--moss-light); }

.booking-add-to-cart[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Confirmation Page ── */

.confirmation {
  text-align: center;
  padding: 8rem 2rem 4rem;
  max-width: 600px;
  margin: 0 auto;
}

.confirmation-icon {
  width: 64px; height: 64px;
  background: var(--moss);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.confirmation h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.confirmation p {
  color: var(--ash);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.7;
}

.confirmation-order {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash);
  margin-top: 2rem;
}

.confirmation-order strong {
  color: var(--basalt);
  font-size: 0.9rem;
}

.confirmation-items {
  background: white;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.06);
  margin: 1.5rem auto 0;
  max-width: 440px;
  text-align: left;
}

.confirmation-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.confirmation-item:last-child { border-bottom: none; }

.confirmation-item-name { font-weight: 500; }
.confirmation-item-meta { font-size: 0.75rem; color: var(--ash); }

.confirmation-total {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.confirmation-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-outline {
  padding: 0.65rem 1.5rem;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: white;
  color: var(--basalt);
  transition: border-color 0.2s;
}

.btn-outline:hover { border-color: var(--moss); }

.btn-primary {
  padding: 0.65rem 1.5rem;
  background: var(--moss);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover { background: var(--moss-light); }

/* ====================
   Test Payment Page
   ==================== */

.test-payment {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--obsidian);
}

.test-payment-card {
  width: 100%;
  max-width: 440px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.test-payment-banner {
  background: var(--lava);
  color: white;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 0.5rem;
}

.test-payment-body {
  padding: 2rem;
}

.test-payment-body h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.test-payment-sub {
  font-size: 0.8rem;
  color: var(--ash);
  margin-bottom: 1.5rem;
}

.test-payment-summary {
  background: rgba(0,0,0,0.02);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.test-payment-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.2rem 0;
  color: var(--ash);
}

.test-payment-row.item {
  color: var(--basalt);
  padding: 0.3rem 0;
}

.test-payment-row.total {
  font-weight: 600;
  color: var(--basalt);
  font-size: 0.95rem;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.test-payment-card-input {
  margin-bottom: 1.5rem;
}

.test-payment-card-input label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash);
  margin-bottom: 0.3rem;
  margin-top: 0.75rem;
}

.test-payment-card-input input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ash);
  background: rgba(0,0,0,0.02);
}

.test-payment-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.test-payment-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.test-pay-btn {
  display: block;
  padding: 0.85rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.2s;
}

.test-pay-btn:hover { opacity: 0.9; }

.test-pay-btn.success {
  background: var(--moss);
  color: white;
}

.test-pay-btn.fail {
  background: none;
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--ash);
}


/* ── Hut Type Pills ── */

.hut-type-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hut-pill {
  cursor: pointer;
}

.hut-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hut-pill span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.hut-pill input:checked + span {
  border-color: var(--moss);
  background: rgba(45, 107, 79, 0.04);
}

.hut-pill strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--basalt);
}

.hut-pill small {
  font-size: 0.65rem;
  color: var(--ash);
  margin-top: 0.15rem;
}

.hut-pill input:checked + span strong { color: var(--moss); }

/* ── Calendar Component (bookingkit) ── */

.cal-dates {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--cal-border);
  border-radius: var(--cal-radius);
  margin-bottom: 1rem;
  transition: border-color 0.15s;
}

.cal-date-col {
  flex: 1;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
}

.cal-date-col.active { background: var(--cal-accent-wash); }

.cal-date-divider {
  color: var(--cal-muted);
  display: flex;
  align-items: center;
  padding: 0 0.15rem;
}

.cal-date-col label {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cal-muted);
  margin-bottom: 2px;
  cursor: pointer;
}

.cal-date-col output {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cal-text);
  display: block;
}

.cal-date-col output.empty { color: var(--cal-muted); font-weight: 400; }

.cal-wrapper { margin-bottom: 0.75rem; }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.cal-nav span {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--cal-text);
  text-transform: capitalize;
}

.cal-nav button {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cal-border);
  border-radius: 50%;
  background: var(--cal-bg);
  color: var(--cal-muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.15s;
}

.cal-nav button:hover:not(:disabled) {
  border-color: var(--cal-accent);
  color: var(--cal-accent);
}

.cal-nav button:disabled { opacity: 0.3; cursor: not-allowed; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal-weekday {
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--cal-muted);
  text-transform: uppercase;
  padding: 0 0 0.35rem;
}

.cal-empty { min-height: 44px; }

.cal-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--cal-text);
  cursor: pointer;
  transition: all 0.12s;
  padding: 3px 1px;
  min-height: 44px;
  gap: 1px;
  position: relative;
}

.cal-day-num { font-size: 0.78rem; font-weight: 500; line-height: 1.2; }
.cal-day-price { font-size: 0.52rem; color: var(--cal-muted); line-height: 1; font-weight: 500; }
.cal-day-status { font-size: 0.5rem; color: var(--cal-muted); line-height: 1; }

.cal-day-few {
  position: absolute;
  top: 1px; right: 1px;
  width: 12px; height: 12px;
  background: #e8a838;
  color: white;
  font-size: 0.4rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-grid button:hover:not(:disabled) {
  background: var(--cal-accent-wash);
}

.cal-grid button:hover:not(:disabled) .cal-day-price { color: var(--cal-accent); }

.cal-grid button.today .cal-day-num { font-weight: 700; color: var(--cal-accent); }

.cal-grid button.past { opacity: 0.3; cursor: default; }
.cal-grid button.unavailable { opacity: 0.3; cursor: default; }

.cal-grid button.selected-start,
.cal-grid button.selected-end {
  background: var(--cal-accent);
  color: white;
  border-radius: 4px;
}

.cal-grid button.selected-start .cal-day-num,
.cal-grid button.selected-end .cal-day-num { font-weight: 700; }

.cal-grid button.selected-start .cal-day-price,
.cal-grid button.selected-end .cal-day-price { color: rgba(255,255,255,0.6); }

.cal-grid button.in-range {
  background: var(--cal-accent-wash);
  border-radius: 0;
}

.cal-grid button.in-range .cal-day-num { color: var(--cal-accent); }

.cal-grid button.selected-start { border-radius: 4px 0 0 4px; }
.cal-grid button.selected-end { border-radius: 0 4px 4px 0; }
.cal-grid button.selected-start.selected-end { border-radius: 4px; }

/* Stay summary */
.stay-summary { padding: 0.75rem 0 0; }
.stay-breakdown { margin-bottom: 0.5rem; }

.stay-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--ash);
  padding: 0.15rem 0;
}

.stay-line-amount {
  margin-left: auto;
  color: var(--basalt);
  font-weight: 500;
}

.stay-total {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 600;
  color: var(--basalt);
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
  .cal-day-num { font-size: 0.7rem; }
  .cal-day-price { font-size: 0.48rem; }
  .cal-grid button { min-height: 38px; }
}

/* ====================
   Gönguhópar — Premium Program Page
   ==================== */

/* Hero enhancement */
.gh-hero {
  padding-bottom: clamp(5rem, 10vh, 8rem);
}

.gh-hero-stats {
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}

.gh-stat-val {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--glacier);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.gh-stat-lbl {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
}

/* Intro */
.gh-intro-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.gh-intro {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  & p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(26,28,30,0.75);
  }
}

/* Empty state */
.gh-empty {
  padding-block: 4rem;
  color: var(--ash);
}

/* Season sections */
.gh-season-section {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.gh-season-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  & h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
  }
}

.gh-season-count {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ash);
  font-weight: 600;
}

/* Season accent colours */
.gh-season-header.gh-season-vor {
  & h2 { color: var(--moss); }
}
.gh-season-header.gh-season-haust {
  & h2 { color: #b87333; }
}
.gh-season-header.gh-season-allt-arid {
  & h2 { color: #5b4b8a; }
}

/* Program grid */
.gh-program-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Program card */
.gh-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  display: flex;
  flex-direction: column;
  &:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
    transform: translateY(-2px);
  }
}

.gh-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Card image */
.gh-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
}

.gh-card:hover .gh-card-img img {
  transform: scale(1.04);
}

.gh-card-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Season badges */
.gh-season-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3em 0.7em;
  border-radius: 2px;
  backdrop-filter: blur(6px);
}

.gh-season-badge-vor {
  background: rgba(45,107,79,0.9);
  color: white;
}

.gh-season-badge-haust {
  background: rgba(184,115,51,0.9);
  color: white;
}

.gh-season-badge-allt-arid {
  background: rgba(91,75,138,0.9);
  color: white;
}

/* Waitlist badge */
.gh-bidlisti-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3em 0.7em;
  border-radius: 2px;
  background: rgba(196,85,58,0.95);
  color: white;
  backdrop-filter: blur(6px);
}

/* Card body */
.gh-card-body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  & h3 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--basalt);
  }
}

.gh-card-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(26,28,30,0.65);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card meta row */
.gh-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.gh-meta-leader,
.gh-meta-capacity {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--ash);
  & svg { flex-shrink: 0; }
}

/* Price block */
.gh-card-price {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.gh-price-block {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.gh-price-member {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--basalt);
  line-height: 1;
}

.gh-price-free {
  color: var(--moss);
}

.gh-price-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash);
}

.gh-price-general {
  font-size: 0.8rem;
  color: var(--ash);
  text-decoration: line-through;
}

/* CTA button */
.gh-card-cta {
  margin-top: 0.5rem;
}

.gh-btn {
  display: block;
  text-align: center;
  padding: 0.85rem 1.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.gh-btn-primary {
  background: var(--basalt);
  color: white;
}

.gh-card:hover .gh-btn-primary {
  background: var(--moss);
}

.gh-btn-waitlist {
  background: transparent;
  color: var(--lava);
  border: 1.5px solid var(--lava);
}

.gh-card:hover .gh-btn-waitlist {
  background: var(--lava);
  color: white;
}

/* ===================================================================
   Gönguhópur Detail Page (.ghd-*)
   Trail-marker timeline with topographic editorial feel
   =================================================================== */

/* -- Detail page hero (taller, with gradient overlay) -- */

.ghd-hero {
  position: relative;
  height: clamp(320px, 45vh, 520px);
  overflow: hidden;
}

.ghd-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ghd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,14,16,0.15) 0%, transparent 40%),
    linear-gradient(to top, rgba(26,28,30,0.92) 0%, rgba(26,28,30,0.4) 45%, transparent 75%);
}

.ghd-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vh, 3rem);
  max-width: var(--max-w);
  margin-inline: auto;
}

.ghd-hero-content nav {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  & a {
    color: rgba(255,255,255,0.45);
    transition: color 0.2s;
    &:hover { color: white; }
  }
}

.ghd-hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  color: white;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}

.ghd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  & span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.35em 0.75em;
    border-radius: 2px;
    backdrop-filter: blur(6px);
  }
}

.ghd-badge-difficulty {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}

.ghd-badge-season {
  background: rgba(45,107,79,0.85);
  color: white;
}

.ghd-badge-status {
  background: rgba(196,85,58,0.9);
  color: white;
}

/* -- Detail layout -- */

.ghd-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  align-items: start;
  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.ghd-main {
  min-width: 0;
}

.ghd-sidebar {
  position: sticky;
  top: 5.5rem;
  @media (max-width: 960px) {
    position: static;
  }
}

/* -- Tabs -- */

.ghd-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  margin-bottom: 2rem;
  & button {
    position: relative;
    padding: 0.85rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ash);
    letter-spacing: 0.03em;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    &::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background: transparent;
      transition: background 0.2s;
    }
    &:hover { color: var(--basalt); }
    &.active {
      color: var(--basalt);
      &::after { background: var(--moss); }
    }
  }
}

.ghd-tab-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(45,107,79,0.1);
  color: var(--moss);
  padding: 0.15em 0.5em;
  border-radius: 10px;
  line-height: 1;
}

/* -- Description section -- */

.ghd-description {
  margin-bottom: 3rem;
  & h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
  }
  & p {
    color: #4a4740;
    line-height: 1.85;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    max-width: 65ch;
  }
  & p:first-of-type {
    font-size: 1.05rem;
    color: var(--basalt);
    line-height: 1.8;
  }
}

/* -- Leader cards -- */

.ghd-leaders {
  margin-bottom: 3rem;
  & h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
  }
}

.ghd-leader-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ghd-leader-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.04);
}

.ghd-leader-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--moss);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  & svg { color: white; }
}

.ghd-leader-info {
  & strong {
    display: block;
    font-size: 0.88rem;
    color: var(--basalt);
    line-height: 1.2;
  }
  & span {
    font-size: 0.72rem;
    color: var(--ash);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
}

/* ===================================================================
   Walk Timeline
   =================================================================== */

.ghd-timeline-section {
  margin-bottom: 3rem;
  & h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
  }
}

.ghd-timeline-subtitle {
  font-size: 0.8rem;
  color: var(--ash);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  & span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
}

.ghd-timeline-stat {
  font-weight: 600;
  color: var(--basalt);
}

.ghd-timeline {
  position: relative;
  padding-left: 2.5rem;
  &::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(45,107,79,0.2) 0px,
      rgba(45,107,79,0.2) 6px,
      transparent 6px,
      transparent 10px
    );
  }
}

/* -- Trail marker (dot on the timeline) -- */

.ghd-walk {
  position: relative;
  margin-bottom: 0.5rem;
  animation: ghd-fade-in 0.4s ease both;
  &::before {
    content: "";
    position: absolute;
    left: -2.5rem;
    top: 1.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pumice);
    border: 2.5px solid var(--moss);
    z-index: 1;
    margin-left: 1px;
  }
}

@keyframes ghd-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger animation for visible entries */
.ghd-walk:nth-child(1) { animation-delay: 0s; }
.ghd-walk:nth-child(2) { animation-delay: 0.03s; }
.ghd-walk:nth-child(3) { animation-delay: 0.06s; }
.ghd-walk:nth-child(4) { animation-delay: 0.09s; }
.ghd-walk:nth-child(5) { animation-delay: 0.12s; }
.ghd-walk:nth-child(6) { animation-delay: 0.15s; }
.ghd-walk:nth-child(7) { animation-delay: 0.18s; }
.ghd-walk:nth-child(8) { animation-delay: 0.21s; }
.ghd-walk:nth-child(9) { animation-delay: 0.24s; }
.ghd-walk:nth-child(10) { animation-delay: 0.27s; }

.ghd-walk-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.05);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  &:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: rgba(45,107,79,0.15);
  }
}

.ghd-walk-date {
  grid-row: 1 / 3;
  text-align: center;
  min-width: 3.5rem;
  padding-right: 1rem;
  border-right: 1px solid rgba(0,0,0,0.06);
  & .ghd-walk-day-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--basalt);
  }
  & .ghd-walk-month {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ash);
    margin-top: 0.15rem;
  }
}

.ghd-walk-location {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--basalt);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.ghd-walk-stats {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  grid-column: 3;
  grid-row: 1;
}

.ghd-walk-pill {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25em 0.6em;
  border-radius: 2px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ghd-pill-km {
  background: rgba(45,107,79,0.08);
  color: var(--moss);
}

.ghd-pill-elev {
  background: rgba(184,115,51,0.08);
  color: #96652e;
}

.ghd-walk-detail {
  font-size: 0.78rem;
  color: var(--ash);
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ghd-walk-detail span + span::before {
  content: "\00b7";
  margin-right: 0.5rem;
  opacity: 0.4;
}

.ghd-walk-note {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--glacier);
  letter-spacing: 0.05em;
}

/* -- Multi-day trip variant -- */

.ghd-walk[data-multiday] {
  &::before {
    width: 12px;
    height: 12px;
    background: var(--moss);
    border-color: var(--moss);
    left: calc(-2.5rem - 1px);
  }
  & .ghd-walk-card {
    border-left: 3px solid var(--moss);
    background: linear-gradient(135deg, white 0%, #f5faf7 100%);
  }
}

/* -- Meeting variant -- */

.ghd-walk[data-meeting] {
  &::before {
    width: 8px;
    height: 8px;
    background: var(--ash);
    border-color: var(--ash);
    top: 1.4rem;
    left: calc(-2.5rem + 1px);
  }
  & .ghd-walk-card {
    background: var(--pumice);
    border-color: transparent;
    box-shadow: none;
    padding: 0.85rem 1.35rem;
  }
  & .ghd-walk-location {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ash);
  }
}

/* -- Peak day variant -- */

.ghd-walk[data-peak] {
  &::before {
    width: 14px;
    height: 14px;
    background: var(--lava);
    border-color: var(--lava);
    left: calc(-2.5rem - 2px);
    top: 1.3rem;
  }
  & .ghd-walk-card {
    border: 1.5px solid rgba(196,85,58,0.2);
    background: linear-gradient(135deg, white 0%, #fdf6f4 100%);
    position: relative;
  }
  & .ghd-walk-location::after {
    content: " \26F0";
    font-size: 0.85em;
    opacity: 0.5;
  }
}

/* -- Break divider -- */

.ghd-break {
  position: relative;
  padding: 1.5rem 0 1.5rem 0;
  margin: 0.5rem 0;
  &::before {
    content: "";
    position: absolute;
    left: calc(-2.5rem + 0.1rem);
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--ash);
    z-index: 1;
  }
}

.ghd-break-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  &::before,
  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      rgba(0,0,0,0.1) 0px,
      rgba(0,0,0,0.1) 4px,
      transparent 4px,
      transparent 8px
    );
  }
}

.ghd-break-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ash);
  white-space: nowrap;
  padding: 0.3em 0.8em;
  background: var(--pumice);
  border-radius: 2px;
}

/* -- Peak days group header -- */

.ghd-peak-header {
  position: relative;
  margin: 1rem 0 0.5rem 0;
  &::before {
    content: "";
    position: absolute;
    left: calc(-2.5rem + 0.1rem);
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--lava);
    z-index: 1;
  }
}

.ghd-peak-header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(196,85,58,0.15);
  & h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--lava);
    white-space: nowrap;
  }
  & p {
    font-size: 0.78rem;
    color: var(--ash);
    line-height: 1.4;
  }
}

/* -- Star legend -- */

.ghd-legend {
  margin-top: 2rem;
  padding: 1.25rem;
  background: rgba(0,0,0,0.02);
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.04);
}

.ghd-legend-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ash);
  margin-bottom: 0.6rem;
}

.ghd-legend dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
}

.ghd-legend dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--glacier);
  text-align: right;
}

.ghd-legend dd {
  font-size: 0.78rem;
  color: #6b6860;
}

/* -- Pricing card (detail page) -- */

.ghd-pricing-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.ghd-pricing-header {
  background: var(--basalt);
  padding: 1.75rem;
  color: white;
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(45,107,79,0.15) 0%, transparent 70%);
    border-radius: 50%;
  }
}

.ghd-pricing-header h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
}

.ghd-price-main {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  & small {
    font-size: 0.45em;
    font-weight: 400;
    opacity: 0.5;
    vertical-align: baseline;
  }
}

.ghd-pricing-body {
  padding: 1.5rem 1.75rem;
}

.ghd-pricing-tiers {
  list-style: none;
  margin-bottom: 1.25rem;
  & li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    font-size: 0.85rem;
    color: #4a4740;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    &:last-child { border-bottom: none; }
  }
  & li strong {
    font-weight: 600;
    color: var(--basalt);
  }
}

.ghd-pricing-note {
  font-size: 0.78rem;
  color: var(--ash);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.ghd-book-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.95rem 1.5rem;
  background: var(--moss);
  color: white;
  border: none;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  &:hover { background: var(--moss-light); }
}

.ghd-book-btn[data-closed] {
  background: var(--ash);
  cursor: not-allowed;
  &:hover { background: var(--ash); }
}

.ghd-waitlist-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.95rem 1.5rem;
  background: transparent;
  color: var(--lava);
  border: 1.5px solid var(--lava);
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  &:hover {
    background: var(--lava);
    color: white;
  }
}

/* -- Cancellation policy -- */

.ghd-policy {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  & summary {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ash);
    cursor: pointer;
    &:hover { color: var(--basalt); }
  }
  & p {
    font-size: 0.78rem;
    color: #6b6860;
    line-height: 1.6;
    margin-top: 0.5rem;
  }
}

/* -- Sidebar contact -- */

.ghd-sidebar-contact {
  margin-top: 1rem;
  padding: 1rem;
  font-size: 0.82rem;
  color: var(--ash);
  text-align: center;
  & a {
    color: var(--moss);
    font-weight: 600;
    &:hover { text-decoration: underline; }
  }
}

/* -- Waitlist form -- */

.ghd-waitlist-desc {
  font-size: 0.82rem;
  color: var(--ash);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.ghd-waitlist-input {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 2px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  &:focus {
    outline: none;
    border-color: var(--moss);
  }
}

.ghd-waitlist-guests {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  & label {
    font-size: 0.82rem;
    color: var(--ash);
    font-weight: 600;
  }
}

.ghd-waitlist-guests-input {
  width: 4rem;
  text-align: center;
}

.ghd-waitlist-btn {
  width: 100%;
  padding: 0.85rem;
  background: var(--lava);
  color: white;
  border: none;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  &:hover { background: #a84530; }
}

.ghd-waitlist-error {
  color: var(--lava);
  font-size: 0.78rem;
  margin-top: 0.5rem;
}

.ghd-waitlist-success {
  padding: 0.85rem;
  background: #f0faf4;
  border-radius: 2px;
  & p {
    font-size: 0.85rem;
    color: var(--moss);
    margin: 0;
  }
}

/* -- Responsive -- */
@media (max-width: 600px) {
  .ghd-timeline { padding-left: 2rem; }
  .ghd-walk-card {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .ghd-walk-date {
    grid-row: auto;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    border-right: none;
    padding-right: 0;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .ghd-walk-stats {
    grid-column: auto;
    grid-row: auto;
  }
  .ghd-walk-detail {
    grid-column: auto;
  }
}

/* --- GPS download button (enhanced) --- */
.gps-section {
  margin: 1rem 0;
}

.gps-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--basalt);
  color: white;
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}

.gps-download-btn:hover {
  background: var(--moss);
}

.gps-hint {
  font-size: 0.78rem;
  color: var(--ash);
  margin-top: 0.5rem;
}

/* --- Waitlist form --- */
.waitlist-section {
  text-align: center;
}

.book-full-label {
  font-size: 0.85rem;
  color: var(--ash);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.waitlist-desc {
  font-size: 0.78rem;
  color: var(--ash);
  margin-bottom: 0.75rem;
}

.waitlist-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 2px;
  font-size: 0.85rem;
}

.waitlist-btn {
  width: 100%;
  padding: 0.6rem;
  background: var(--basalt);
  color: white;
  border: none;
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.waitlist-btn:hover {
  background: var(--moss);
}

.waitlist-error {
  color: #c0392b;
  font-size: 0.78rem;
  margin-top: 0.5rem;
}

.waitlist-success {
  padding: 0.75rem;
  background: #f0faf4;
  border-radius: 2px;
  font-size: 0.85rem;
  color: var(--moss);
}

/* --- Newsletter signup --- */
.newsletter {
  background: var(--basalt);
  color: white;
  padding: 3rem 0;
}

.newsletter-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.newsletter-text {
  flex: 1;
  min-width: 200px;
}

.newsletter-text h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.newsletter-text p {
  font-size: 0.85rem;
  opacity: 0.8;
}

.newsletter-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  flex: 1;
  min-width: 300px;
}

.newsletter-input {
  flex: 1;
  min-width: 200px;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 0.85rem;
}

.newsletter-input::placeholder {
  color: rgba(255,255,255,0.5);
}

.newsletter-btn {
  padding: 0.65rem 1.5rem;
  background: var(--moss);
  color: white;
  border: none;
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.newsletter-btn:hover {
  background: var(--glacier);
}

.newsletter-error {
  color: #ff6b6b;
  font-size: 0.78rem;
  width: 100%;
}

.newsletter-success p {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .newsletter-inner { flex-direction: column; text-align: center; }
  .newsletter-form { width: 100%; flex-direction: column; }
  .newsletter-input { width: 100%; }
  .newsletter-btn { width: 100%; }
}

/* --- Fullscreen map toggle --- */
.map-fullscreen-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1000;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.2s;
}

.map-fullscreen-btn:hover {
  background: var(--pumice);
}

.map-panel {
  position: relative;
}

.split-layout.map-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  height: 100vh;
}

.split-layout.map-fullscreen .hut-panel {
  display: none;
}

.split-layout.map-fullscreen .map-panel {
  width: 100%;
  height: 100%;
}

/* --- Secondary book button for sidebar --- */
.book-btn.secondary {
  background: var(--pumice);
  color: var(--basalt);
}

.book-btn.secondary:hover {
  background: var(--basalt);
  color: white;
}