/* Overlay Styles - Premium Glassmorphism
   The blurred background lives on ::before (position: fixed) instead of on
   .content-overlay itself. backdrop-filter on a scroll container creates a
   containing block for fixed-position descendants, which would cause the
   .overlay-close button to scroll with the overlay's content. Moving the
   blur to a fixed pseudo-element lets the close button truly pin to the
   viewport. */
.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    overflow-y: auto;
    padding-top: 140px;
    background: transparent;
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
    pointer-events: auto;
    isolation: isolate;
}

.content-overlay::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--theme-overlay-bg);
    backdrop-filter: var(--theme-overlay-blur);
    -webkit-backdrop-filter: var(--theme-overlay-blur);
    z-index: -1;
    pointer-events: none;
}

.content-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 6rem;
    position: relative;
}

/* Specific wider container for Shop */
.page-container.shop-container {
    max-width: 1200px;
    padding: 0 2rem 4rem;
}

.page-container.shop-container .page-header,
#overlay-about .page-container .page-header,
#overlay-favorites .page-header {
    margin-bottom: 3rem;
    padding-top: 2rem;
    text-align: left;
}

.page-container.shop-container .page-title,
#overlay-about .page-container .page-title,
#overlay-favorites .page-title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
    /* Override the hero text-shadow + heavy weight from the base .page-title */
    text-shadow: none;
}

.page-container.shop-container .page-subtitle,
#overlay-about .page-container .page-subtitle,
#overlay-favorites .page-subtitle {
    font-size: 1rem;
    color: var(--earth-ink-2);
    margin: 0;
    max-width: none;
}

/* Affiliate/curation trust line under the shop subtitle. */
.shop-trust-line {
    margin: 0.5rem 0 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--earth-ink-2);
    max-width: 46ch;
}

/* Empty result state (lives outside the grid so it doesn't trip the observer). */
.shop-empty-state {
    margin: var(--sp-6) 0;
    color: var(--earth-ink-2);
    font-size: 0.95rem;
}

/* Unified close affordance for every .content-overlay (shop, contact,
   my-account, my-gear, favorites, product-detail, …). White pill so the
   "×" reads as a real button instead of a stray glyph drifting into the
   nav row. position: fixed keeps it pinned while the page scrolls. */
.overlay-close {
    position: fixed;
    top: 5.5rem;
    right: 4rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45) !important;
    border: none !important;
    border-radius: 999px !important;
    color: var(--theme-close-btn) !important;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    z-index: 100;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.overlay-close:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--theme-close-btn-hover) !important;
    transform: scale(1.06);
}

.overlay-close:focus {
    outline: none;
    color: var(--theme-close-btn) !important;
}

.overlay-close:focus-visible {
    outline: 2px solid var(--earth-terracotta, #b85c3c) !important;
    outline-offset: 2px;
}

.overlay-close:active {
    color: var(--theme-close-btn-hover) !important;
    background: #fff !important;
}

.page-header {
    margin-bottom: 4rem;
    padding-top: 3rem;
    text-align: center;
    position: relative;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--theme-page-title);
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: color 0.3s ease;
}

.page-subtitle {
    font-size: 1.2rem;
    color: var(--theme-page-subtitle);
    max-width: 600px;
    margin: 0 auto;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Premium Card Style */
.card {
    background: linear-gradient(145deg, var(--theme-card-bg-start) 0%, var(--theme-card-bg-end) 100%);
    border: 1px solid var(--theme-card-border);
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--theme-card-shadow);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0.5;
}

.card:hover {
    transform: translateY(-4px);
    background: linear-gradient(145deg, var(--theme-card-hover-bg-start) 0%, var(--theme-card-hover-bg-end) 100%);
    border-color: var(--theme-card-hover-border);
    box-shadow: var(--theme-card-hover-shadow);
}

.card-title {
    font-size: 1.5rem;
    color: var(--theme-text-primary);
    margin-bottom: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.card-content {
    color: var(--theme-text-secondary);
    line-height: 1.7;
    transition: color 0.3s ease;
}

/* Modern Form Styles */
.form-group {
    margin-bottom: 1.75rem;
}

.form-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 1.25rem 0;
    letter-spacing: 0.01em;
}

.form-label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--theme-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--theme-form-bg);
    border: 1px solid var(--theme-form-border);
    border-radius: 12px;
    color: var(--theme-input-text);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-color, #1a73e8);
    background: var(--theme-form-focus-bg);
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--theme-form-placeholder);
}

/* Premium Button */
.content-overlay .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 2.5rem;
    background: white;
    color: black;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    width: 100%;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.content-overlay .btn-primary:hover,
.content-overlay .btn-primary:focus {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
    outline: none;
}

.content-overlay .btn-primary:active {
    transform: translateY(0);
}


/* --- Modern Shop Layout (Grid + Sidebar) --- */
/* Shop is a single column now: a horizontal filter-pill bar sits above the
   grid (the old 180px sticky sidebar is gone). The markup keeps the
   .shop-sidebar / .shop-filters-vertical / .filter-link-vertical class names
   so shop.js (which queries .filter-link-vertical) is untouched. */
.shop-layout {
    display: block;
}

.shop-sidebar {
    position: static;
    margin-bottom: var(--sp-5);
    background: transparent;
    padding: 0;
    border: none;
}

/* Heading is redundant next to self-explanatory pills. */
.filter-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.shop-filters-vertical {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.filter-link-vertical {
    background: var(--earth-paper-2);
    border: 1px solid var(--earth-rule);
    color: var(--earth-ink-2);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    min-height: 40px;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
}

.filter-link-vertical:hover {
    color: var(--earth-ink);
    border-color: var(--earth-rule-strong);
    background: var(--earth-paper-2);
}

.filter-link-vertical.active,
.filter-link-vertical[aria-current="true"] {
    color: var(--earth-ink);
    font-weight: 600;
    background: var(--earth-terracotta-soft);
    border-color: var(--earth-rule-strong);
}

.filter-link-vertical:focus-visible {
    outline: 2px solid var(--earth-terracotta);
    outline-offset: 2px;
}

/* Per-category count appended by shop.js (e.g. "Apparel (4)"). */
.filter-link-vertical .filter-count {
    color: var(--earth-ink-3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* --- Modern Shop Grid --- */
/* auto-fit (not auto-fill) collapses empty tracks so a small curated catalog
   doesn't strand phantom columns; min() guards against overflow on narrow
   viewports; max-width stops 2 cards from stretching absurdly wide. */
.modern-shop-grid {
    display: grid;
    gap: var(--sp-6) var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    max-width: 1100px;
}

/* Hide unedited CMS placeholder products on the public-facing view.
   shop-details.js flags them via [data-draft]; admins still see them
   in edit mode so they can fill in the content. */
body:not(.cms-edit-mode) .modern-shop-grid [data-draft] {
    display: none !important;
}
body.cms-edit-mode .modern-shop-grid [data-draft] {
    outline: 1px dashed var(--earth-terracotta, #b85c3c);
    outline-offset: -1px;
    position: relative;
}
body.cms-edit-mode .modern-shop-grid [data-draft]::after {
    content: 'Draft';
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--earth-terracotta, #b85c3c);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
}

/* Card surface — real paper cards (not transparent) so they read as tappable.
   Covers both .shop-card-modern and CMS-loaded legacy .card elements. */
.modern-shop-grid > *,
.modern-shop-grid .shop-card-modern,
.modern-shop-grid .card,
.shop-grid > *,
.shop-grid .shop-card-modern,
.shop-grid .card,
[data-cms-container="shop-grid"] > * {
    background: var(--earth-paper-2) !important;
    border: 1px solid var(--earth-rule) !important;
    border-radius: 10px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: var(--sp-4) !important;
    cursor: pointer;
    box-shadow: none !important;
    position: relative;
}

.modern-shop-grid > *:hover,
.modern-shop-grid .shop-card-modern:hover,
.modern-shop-grid .card:hover,
.modern-shop-grid > *:focus-within,
.modern-shop-grid .shop-card-modern:focus-within,
.shop-grid > *:hover,
.shop-grid .shop-card-modern:hover,
.shop-grid .card:hover,
[data-cms-container="shop-grid"] > *:hover,
[data-cms-container="shop-grid"] > *:focus-within {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(45, 38, 32, 0.10) !important;
    border-color: var(--earth-rule-strong) !important;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .modern-shop-grid > *,
    [data-cms-container="shop-grid"] > * {
        transition: none !important;
    }
    .modern-shop-grid > *:hover,
    [data-cms-container="shop-grid"] > *:hover {
        transform: none !important;
    }
}

/* Remove the ::before pseudo-element from cards in shop */
.modern-shop-grid > *::before,
.modern-shop-grid .card::before,
.shop-grid > *::before,
.shop-grid .card::before,
[data-cms-container="shop-grid"] > *::before {
    display: none !important;
}

/* Style old .card-title and .card-content in shop grid to match new design */
[data-cms-container="shop-grid"] .card-title,
.modern-shop-grid .card-title,
.shop-grid .card-title {
    font-size: 0.95rem !important;
    color: var(--earth-ink) !important;
    font-weight: 600 !important;
    margin: 0 0 0.35rem 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    padding: 0 !important;
}

[data-cms-container="shop-grid"] .card-content,
.modern-shop-grid .card-content,
.shop-grid .card-content {
    font-size: 0.8rem !important;
    color: var(--earth-ink-2) !important;
    margin: 0 !important;
    line-height: 1.45 !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Style image containers in old .card structure */
[data-cms-container="shop-grid"] .card > div:first-child,
.modern-shop-grid .card > div:first-child {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 0.75rem;
}

[data-cms-container="shop-grid"] .card img,
.modern-shop-grid .card img,
.shop-grid .card img {
    width: 32% !important;
    height: 32% !important;
    max-width: 32% !important;
    max-height: 32% !important;
    object-fit: contain !important;
    opacity: 0.3 !important;
    filter: brightness(0) invert(1) !important;
}

/* Hide any old-style Add to Cart buttons that might be in the card */
.shop-card-modern .btn-primary,
.shop-card-modern a.btn-primary,
.modern-shop-grid .btn-primary,
.modern-shop-grid a.btn-primary,
.shop-grid .btn-primary,
.shop-grid a.btn-primary,
.modern-shop-grid .card .btn-primary,
.modern-shop-grid .card a.btn-primary {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

.modern-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: none;
}

.modern-card-image img {
    width: 32%;
    height: 32%;
    object-fit: contain;
    opacity: 0.3;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.shop-card-modern:hover .modern-card-image img {
    transform: scale(1.08);
    opacity: 0.45;
}

/* Full-bleed product photo (overrides icon-placeholder styling above). */
.modern-card-image--has-photo {
    background: transparent !important;
}
.modern-card-image .modern-card-photo,
.modern-card-image--has-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    filter: none !important;
}
.shop-card-modern:hover .modern-card-photo {
    transform: scale(1.04) !important;
    opacity: 1 !important;
}

.modern-card-info {
    padding: var(--sp-3) 0 0 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Header used to hold title + price on one row; now the title sits alone and
   price moves to the footer. Kept as a thin wrapper for back-compat. */
.modern-card-header {
    display: block;
    margin: 0;
}

.modern-card-title {
    font-size: 1.0625rem;
    color: var(--earth-ink);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
    min-width: 0;
}

/* The title is the keyboard-focusable opener (a real <button>, styled as
   text). Its stretched ::after makes the whole card a click target for mouse
   users; the outbound CTA sits above it at a higher z-index. We avoid a fake
   <a href> because there is no URL route to open the overlay (header.js opens
   overlays via JS only). */
.modern-card-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.modern-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

.modern-card-link:focus-visible {
    outline: 2px solid var(--earth-terracotta);
    outline-offset: 3px;
    border-radius: 4px;
}

.modern-card-desc {
    font-size: 0.8125rem;
    color: var(--earth-ink-2);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Retailer + price row, pushed to the bottom of the card. */
.modern-card-footer {
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--earth-rule);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.modern-card-retailer {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--earth-ink-2);
}

.modern-card-price {
    color: var(--earth-ink);
    font-weight: 700;
    font-size: 1.0625rem;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    border: none;
    flex-shrink: 0;
}

/* On-card outbound affiliate CTA — the one-interaction revenue action. */
.shop-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    position: relative;
    z-index: 2;
    margin-top: var(--sp-1);
    background: var(--earth-terracotta);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: var(--sp-2) var(--sp-4);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    text-align: center;
    transition: background 0.18s ease;
}

.shop-card-cta:hover {
    background: var(--earth-terracotta-hover);
    color: #fff !important;
}

.shop-card-cta:focus-visible {
    outline: 2px solid var(--earth-terracotta);
    outline-offset: 2px;
}

.modern-card-disclosure {
    margin: 0;
    font-size: 0.75rem;
    color: var(--earth-ink-2);
    text-align: center;
}

/* Sparse editorial badge — rendered only when the card has data-badge.
   An empty badge (e.g. an unfilled CMS field) collapses to nothing. */
.modern-card-badge:empty {
    display: none;
}
.modern-card-badge {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 1;
    background: var(--earth-terracotta-soft);
    color: var(--earth-ink);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

/* --- Product Detail Page --- */
.product-detail-container {
    max-width: 1040px;
    padding-top: 4rem;
}

/* Gallery-dominant 58/42 so the written verdict (our differentiator) isn't
   buried while photography still leads. */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-8);
    align-items: start;
}

.product-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-detail-image {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    background: var(--earth-paper-3);
    border: 1px solid var(--earth-rule);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    cursor: zoom-in;
}

.product-detail-image:focus-visible {
    outline: 2px solid var(--earth-terracotta);
    outline-offset: 2px;
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

/* Signpost that the image zooms (the plan's "no auto-rotate, signpost" rule). */
.product-zoom-hint {
    position: absolute;
    bottom: var(--sp-2);
    right: var(--sp-2);
    background: rgba(45, 38, 32, 0.72);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    pointer-events: none;
}
/* Hide the hint over a placeholder icon (nothing to zoom into). */
.product-detail-image img[src*="icons/"] ~ .product-zoom-hint {
    display: none;
}

/* When image is a placeholder icon */
.product-detail-image img[src*="icons/"] {
    width: 40%;
    height: 40%;
    object-fit: contain;
    opacity: 0.3;
    filter: brightness(0) invert(1);
}

.product-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-start;
}

.product-thumbnail {
    width: 56px;
    height: 56px;
    background: var(--earth-paper-3);
    border: 1px solid var(--earth-rule);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.18s ease, border-color 0.18s ease;
}

.product-thumbnail:hover,
.product-thumbnail.active {
    opacity: 1;
    border-color: var(--earth-rule-strong);
}

.product-thumbnail.active {
    border-color: var(--earth-terracotta);
}

.product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-thumbnail img[src*="icons/"] {
    width: 50%;
    height: 50%;
    object-fit: contain;
    opacity: 0.4;
    filter: brightness(0) invert(1);
}

.product-detail-info {
    padding-top: 0;
}

.product-detail-header {
    margin-bottom: var(--sp-4);
}

.product-detail-badge {
    display: inline-block;
    margin-bottom: var(--sp-2);
    background: var(--earth-terracotta-soft);
    color: var(--earth-ink);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.product-detail-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--earth-ink);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* --- Buy-box: bordered purchase module (desktop) / fixed bar (mobile) --- */
.product-buybox {
    background: var(--earth-paper-2);
    border: 1px solid var(--earth-rule);
    border-radius: 12px;
    padding: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.product-buybox-info {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.product-detail-price {
    font-size: 1.5rem;
    color: var(--earth-ink);
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.product-detail-retailer {
    font-size: 0.8125rem;
    color: var(--earth-ink-2);
}

.product-detail-divider {
    height: 1px;
    background: var(--earth-rule);
    margin: 1.5rem 0;
}

/* --- Editorial sections (why / highlights / specs) --- */
.product-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--earth-ink-3);
    margin: 0 0 var(--sp-2) 0;
}

.product-why {
    margin-bottom: var(--sp-6);
}

.product-why-verdict {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--earth-ink);
    line-height: 1.45;
    margin: 0 0 var(--sp-3) 0;
}

.product-detail-desc {
    font-size: 0.9rem;
    color: var(--earth-ink-2);
    line-height: 1.6;
    margin: 0;
}

.product-highlights {
    margin-bottom: var(--sp-6);
}

.product-highlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.product-highlights-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.875rem;
    color: var(--earth-ink-2);
    line-height: 1.5;
}

.product-highlights-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--earth-sage-dark);
}

.product-keyspecs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
}

/* A class-level display (flex/inline-block) overrides the UA [hidden] rule, so
   toggled-empty sections would otherwise keep their margins and leave a
   phantom gap. Restore the hide. */
.product-keyspecs[hidden],
.product-thumbnails[hidden],
.product-detail-badge[hidden] {
    display: none;
}

.product-keyspec {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    background: var(--earth-paper-3);
    border-radius: 8px;
    padding: var(--sp-2) var(--sp-3);
}

.product-keyspec-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--earth-ink-3);
    font-weight: 600;
}

.product-keyspec-value {
    font-size: 0.9rem;
    color: var(--earth-ink);
    font-weight: 600;
}

.product-specs-section {
    margin-bottom: var(--sp-6);
}

/* (Cart-era .product-detail-actions / .product-quantity / .quantity-* /
   .product-add-btn styles removed — the shop is affiliate-only, no cart.) */

.product-detail-meta {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.product-detail-meta p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.6;
    margin: 0;
}

/* --- Product specs (striped table) --- */
.product-detail-specs {
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid var(--earth-rule);
    border-radius: 8px;
    overflow: hidden;
}

.product-spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.product-spec:nth-child(odd) {
    background: var(--earth-paper-3);
}

.product-spec-label {
    color: var(--earth-ink-2);
    font-weight: 500;
}

.product-spec-value {
    color: var(--earth-ink);
    font-weight: 600;
    text-align: right;
}

/* --- Affiliate CTA (lives inside the buy-box) --- */
.product-detail-cta {
    margin: 0;
}

.product-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: var(--earth-terracotta, #b85c3c);
    /* !important beats theme-earthy's broad `.content-overlay a { color: ink }`
       sweep — without it the white label turns ink on the terracotta fill. */
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 0.95rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.15s ease;
    font-family: inherit;
}

.product-cta-btn:hover {
    background: var(--earth-terracotta-hover, #9a4a2e);
    transform: translateY(-1px);
}

.product-cta-btn:focus-visible {
    outline: 2px solid var(--earth-terracotta-hover, #9a4a2e);
    outline-offset: 3px;
}

.product-cta-btn[disabled] {
    background: rgba(0, 0, 0, 0.1);
    /* !important so the muted disabled label beats the base color:#fff !important. */
    color: rgba(45, 38, 32, 0.45) !important;
    cursor: not-allowed;
    transform: none;
}

.product-cta-icon {
    flex-shrink: 0;
    opacity: 0.95;
}

/* Ad marking perches on the CTA's top-right corner — the same chip
   treatment as .logi-cta and .poi-popup-book (2026-07-21, owner-picked:
   one Ad-card treatment on every commissioned CTA). Stays a child of the
   anchor (Danish law: marking AT the link); solid paper bg + own ink so
   it reads where it overhangs the terracotta fill onto the buy-box. */
.product-cta-btn { position: relative; }
.product-cta-btn .ad-badge {
    position: absolute;
    top: -7px;
    right: -4px;
    margin: 0;
    padding: 0 4px;
    font-size: 0.5rem;
    line-height: 1.6;
    color: var(--earth-ink-3);
    background: var(--earth-paper);
    border-color: var(--earth-rule-strong, var(--earth-rule));
    opacity: 1;
}

.product-cta-meta {
    margin: 0.6rem 0 0 0;
    font-size: 0.75rem;
    color: var(--earth-ink-2);
    text-align: center;
}

/* Product Detail Mobile */
@media (max-width: 768px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-detail-gallery {
        max-width: none;
        margin: 0;
    }

    .product-thumbnails {
        justify-content: flex-start;
    }

    .product-detail-info {
        padding-top: 0;
    }

    .product-detail-title {
        font-size: 1.4rem;
    }

    /* Buy-box becomes a fixed thumb-reach bottom bar. The overlay's blur lives
       on ::before, so position:fixed pins to the viewport — the same trick the
       .overlay-close button relies on. */
    .product-buybox {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1600;
        margin: 0;
        border: none;
        border-top: 1px solid var(--earth-rule);
        border-radius: 0;
        box-shadow: 0 -4px 16px rgba(45, 38, 32, 0.14);
        padding: var(--sp-3) var(--sp-4);
        padding-bottom: calc(var(--sp-3) + var(--safe-bottom, 0px));
    }

    .product-buybox-info {
        margin-bottom: var(--sp-2);
    }

    .product-cta-meta {
        margin-top: var(--sp-2);
        font-size: 0.6875rem;
    }

    /* Clear the fixed bar so the last spec row isn't hidden behind it. */
    .product-detail-container {
        padding-bottom: 11rem;
    }
}

/* --- Image zoom lightbox (built by shop-details.js) --- */
.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(20, 16, 12, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
    cursor: zoom-out;
}

.product-lightbox[hidden] {
    display: none;
}

.product-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.product-lightbox-close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--earth-ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.product-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Split Layouts (Add Event / About) --- */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Features Column (Add Event) */
.features-column {
    padding-right: 1rem;
}

/* Consistent card spacing in columns */
.features-column .card,
.form-column .card {
    margin-bottom: 1.25rem;
}

.features-column .card:last-child,
.form-column .card:last-child {
    margin-bottom: 0;
}

/* Tighter spacing for race director card specifically */
.race-director-featured-card {
    margin-bottom: 0.6rem !important;
}

/* ===============================================
   LEFT COLUMN - EVENT CARDS STYLES
   =============================================== */

/* Event Description Card */
.event-description-card {
    padding: 1.5rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.event-description-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Event Info Card */
.event-info-card {
    padding: 1.5rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 1.25rem !important;
}

.event-info-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.event-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1.25rem 0;
    letter-spacing: -0.01em;
}

.event-description-text {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

.event-info-card .event-card-title {
    margin-bottom: 1.25rem;
}

/* Stats Grid (Distance & Elevation) */
.event-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.event-stat-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.event-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.event-stat-item:hover .event-stat-icon {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.event-stat-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
}

.event-stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.event-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.event-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
}

/* Event Details List - 2x2 Grid */
.event-details-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

/* Location spans full width */
.event-detail-row.location-row {
    grid-column: 1 / -1;
}

.event-detail-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.event-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.event-detail-row:hover .event-detail-icon {
    color: rgba(255, 255, 255, 0.55);
}

.event-detail-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

.event-detail-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.event-detail-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.event-detail-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Location Link */
.event-location-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.2s ease;
}

.event-location-link:hover {
    color: var(--accent-color, #1a73e8);
}

.event-location-link .location-link-icon {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.event-location-link:hover .location-link-icon {
    opacity: 0.8;
}

/* Export Links */
.export-links {
    display: flex;
    gap: 0.5rem;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.export-btn {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.export-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.export-btn.strava {
    color: #FC4C02;
}

.export-btn.strava:hover {
    background: rgba(252, 76, 2, 0.1);
}

.export-btn.garmin {
    color: #007BC7;
}

.export-btn.garmin:hover {
    background: rgba(0, 123, 199, 0.1);
}

.export-btn.download {
    color: rgba(255, 255, 255, 0.5);
}

.export-btn.download:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   Event Sponsors Section
   ============================================ */

.event-sponsors-card {
    padding: 1.5rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.event-sponsors-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.event-sponsors-card .event-card-title {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.event-sponsors-intro {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: 0 0 1.25rem 0;
    line-height: 1.4;
}

.event-sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.event-sponsor-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease;
}

.event-sponsor-card:hover {
    opacity: 0.7;
    transform: none;
}

/* All tier classes - no visible styling difference */
.event-sponsor-card.sponsor-tier-gold,
.event-sponsor-card.sponsor-tier-silver,
.event-sponsor-card.sponsor-tier-bronze {
    background: transparent;
    border: none;
}

.event-sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-sponsor-logo img {
    height: 32px;
    max-width: 100px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.event-sponsor-card:hover .event-sponsor-logo img {
    opacity: 1;
}

.event-sponsor-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive adjustments for sponsors */
@media (max-width: 768px) {
    .event-sponsors-grid {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .event-sponsors-grid {
        gap: 0.5rem;
    }
    
    .event-sponsor-logo img {
        height: 24px;
        max-width: 70px;
    }
    
    .event-sponsor-name {
        font-size: 0.75rem;
    }
}

.feature-block {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.feature-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--theme-feature-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color, #1a73e8);
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.feature-block h3 {
    color: var(--theme-text-primary);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.feature-block p {
    color: var(--theme-text-tertiary);
    font-size: 0.95rem;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* Steps Visual */
.steps-visual {
    display: flex;
    align-items: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 500;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--theme-step-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--theme-text-primary);
    background: var(--theme-step-bg);
    transition: all 0.3s ease;
}

.step-line {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 1rem;
    margin-bottom: 1.2rem;
    /* Align with circle center approx */
}

.sticky-card {
    position: sticky;
    top: 2rem;
}

/* ===============================================
   ADD EVENT PAGE - MINIMAL STYLING
   =============================================== */

/* Form container - card styling like Secure a Spot */
#overlay-event .event-form-container {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: none;
}

/* Smaller form title */
#overlay-event .card-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
}

/* Align left column with form */
#overlay-event .features-column {
    padding-top: 1rem;
}

/* Simplify feature blocks - remove icon backgrounds */
#overlay-event .feature-icon-wrapper {
    width: 40px;
    height: 40px;
    background: transparent !important;
    border: none;
    color: rgba(255, 255, 255, 0.4);
}

#overlay-event .feature-icon-wrapper svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
}

#overlay-event .feature-block {
    gap: 1rem;
    margin-bottom: 2rem;
}

#overlay-event .feature-block h3 {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: rgba(255, 255, 255, 0.85);
}

#overlay-event .feature-block p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

/* Info note at bottom of features */
#overlay-event .event-info-note {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
}

#overlay-event .event-info-note a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: inherit;
}

#overlay-event .event-info-note a:hover {
    color: rgba(255, 255, 255, 0.65);
}

/* Clean form inputs - minimal style with subtle dark bg */
#overlay-event .form-group {
    margin-bottom: 1.25rem;
}

#overlay-event .form-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

#overlay-event .form-input,
#overlay-event .form-textarea {
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#overlay-event .form-input:focus,
#overlay-event .form-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.25) !important;
}

#overlay-event .form-input::placeholder,
#overlay-event .form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Textarea specific */
#overlay-event .form-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

/* File input - custom styling */
#overlay-event .form-input[type="file"] {
    padding: 0;
    background: transparent !important;
    border: none;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Date input styling */
#overlay-event .form-input[type="date"] {
    color: rgba(255, 255, 255, 0.5);
}

#overlay-event .form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
    cursor: pointer;
}

/* Email input - ensure consistent styling */
#overlay-event .form-input[type="email"],
#overlay-sponsor .form-input[type="email"],
#overlay-about .form-input[type="email"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#overlay-event .form-input[type="file"]::file-selector-button {
    padding: 0.6rem 1rem;
    margin-right: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

#overlay-event .form-input[type="file"]::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

/* Minimal submit button */
#overlay-event .btn-primary {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 0.9rem 2rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 1rem;
    transition: all 0.2s ease;
}

#overlay-event .btn-primary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* ===============================================
   SPONSOR PAGE - MINIMAL STYLING
   =============================================== */

/* Align left column */
#overlay-sponsor .features-column {
    padding-top: 1rem;
}

/* Form container - card styling like Secure a Spot */
#overlay-sponsor .sponsor-form-container {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: none;
}

/* Simplify feature blocks - remove icon backgrounds */
#overlay-sponsor .feature-icon-wrapper {
    width: 40px;
    height: 40px;
    background: transparent !important;
    border: none;
    color: rgba(255, 255, 255, 0.4);
}

#overlay-sponsor .feature-icon-wrapper svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
}

#overlay-sponsor .feature-block {
    gap: 1rem;
    margin-bottom: 2rem;
}

#overlay-sponsor .feature-block h3 {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: rgba(255, 255, 255, 0.85);
}

#overlay-sponsor .feature-block p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

/* Info note at bottom of features */
#overlay-sponsor .sponsor-info-note {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
}

#overlay-sponsor .sponsor-info-note a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: inherit;
}

#overlay-sponsor .sponsor-info-note a:hover {
    color: rgba(255, 255, 255, 0.65);
}

/* Clean form inputs - minimal style with subtle dark bg */
#overlay-sponsor .form-group {
    margin-bottom: 1.25rem;
}

#overlay-sponsor .form-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

#overlay-sponsor .form-input,
#overlay-sponsor .form-textarea {
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#overlay-sponsor .form-input:focus,
#overlay-sponsor .form-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.25) !important;
}

#overlay-sponsor .form-input::placeholder,
#overlay-sponsor .form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Textarea specific */
#overlay-sponsor .form-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

/* Minimal submit button */
#overlay-sponsor .btn-primary {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 0.9rem 2rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 1rem;
    transition: all 0.2s ease;
}

#overlay-sponsor .btn-primary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* =========================================================
   CONTACT / ABOUT OVERLAY (#overlay-about) — earthy paper-theme redesign
   Scoped to #overlay-about; earth-* tokens only. These rules replace the
   old dark-theme "ABOUT PAGE - MINIMAL STYLING" block, which rendered the
   form, submit button, feature copy and social links as near-white on the
   cream paper theme (invisible / very low contrast).
   ========================================================= */

/* Align left column with the form, and keep form rows tight */
#overlay-about .features-column {
    padding-top: 1rem;
}
#overlay-about .form-group {
    margin-bottom: 1.25rem;
}

/* ---- Contact form, submit button, features, socials (paper theme) ---- */
#overlay-about .about-form-container {
    background: var(--earth-paper-2) !important;
    border: 1px solid var(--earth-rule) !important;
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 4px 14px rgba(60, 45, 30, 0.06) !important;
}
#overlay-about .form-title {
    color: var(--earth-ink) !important;
    font-weight: 700;
}
#overlay-about .form-subtitle {
    margin: -0.4rem 0 1.4rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--earth-ink-3) !important;
}
#overlay-about .form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--earth-ink-2) !important;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}
#overlay-about .form-input,
#overlay-about .form-textarea {
    padding: 0.85rem 1rem;
    background: var(--earth-paper) !important;
    border: 1px solid var(--earth-rule) !important;
    border-radius: 12px;
    color: var(--earth-ink) !important;
    font-size: 0.95rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#overlay-about .form-input::placeholder,
#overlay-about .form-textarea::placeholder {
    color: var(--earth-ink-3) !important;
}
#overlay-about .form-input:focus,
#overlay-about .form-textarea:focus {
    outline: none;
    background: var(--earth-paper-2) !important;
    border-color: var(--earth-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(184, 92, 60, 0.18) !important;
}
#overlay-about .form-textarea {
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
}
#overlay-about .btn-primary {
    background: var(--earth-terracotta) !important;
    color: #fff !important;
    border: 1px solid var(--earth-terracotta-hover) !important;
    border-radius: 12px !important;
    padding: 1rem 2rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none !important;
    margin-top: 0.5rem;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#overlay-about .btn-primary:hover {
    background: var(--earth-terracotta-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(184, 92, 60, 0.25) !important;
}
#overlay-about .btn-primary:focus-visible {
    outline: 3px solid var(--earth-terracotta);
    outline-offset: 2px;
}
#overlay-about .feature-icon-wrapper {
    width: 44px;
    height: 44px;
    background: var(--earth-terracotta-soft) !important;
    color: var(--earth-terracotta) !important;
    border: none !important;
    border-radius: 12px;
}
#overlay-about .feature-icon-wrapper svg {
    width: 22px;
    height: 22px;
    color: var(--earth-terracotta) !important;
    stroke-width: 2;
}
#overlay-about .feature-block h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--earth-ink) !important;
}
#overlay-about .feature-block p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--earth-ink-2) !important;
}
#overlay-about .about-socials {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--earth-rule) !important;
}
#overlay-about .about-social-link {
    color: var(--earth-ink-3) !important;
    display: inline-flex;
    padding: 4px;
    border-radius: 8px;
}
#overlay-about .about-social-link:hover {
    color: var(--earth-terracotta) !important;
}
#overlay-about .about-social-link:focus-visible {
    outline: 2px solid var(--earth-terracotta);
    outline-offset: 2px;
}
#overlay-about .about-info-note {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--earth-ink-3) !important;
}
#overlay-about .about-info-note a {
    color: var(--earth-terracotta) !important;
}
#overlay-about .about-info-note a:focus-visible {
    outline: 2px solid var(--earth-terracotta);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- MONEY SECTION ---------------------------------------- */
#overlay-about .money-section {
    max-width: none;
    margin: 3rem 0 3.5rem;
    padding: 2.5rem;
    background: var(--earth-paper-2);
    border: 1px solid var(--earth-rule);
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(60, 45, 30, 0.06);
    position: relative;
    overflow: hidden;
}
#overlay-about .money-section::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--earth-sage) 0%, var(--earth-terracotta) 100%);
}
#overlay-about .money-header { max-width: 640px; }
#overlay-about .money-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.65rem !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--earth-sage-dark) !important;
}
#overlay-about .money-eyebrow svg { flex-shrink: 0; }
#overlay-about .money-title {
    margin: 0 0 0.75rem !important;
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--earth-ink) !important;
}
#overlay-about .money-lead {
    margin: 0 !important;
    max-width: 62ch;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    color: var(--earth-ink-2) !important;
}
#overlay-about .money-subhead {
    margin: 0 0 1.1rem !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--earth-ink) !important;
}

/* Stat row */
#overlay-about .money-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}
#overlay-about .money-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    background: var(--earth-sage-soft);
    border: 1px solid var(--earth-rule);
    border-radius: 16px;
}
#overlay-about .money-stat-num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--earth-sage-dark) !important;
}
#overlay-about .money-stat-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--earth-ink-2) !important;
}

/* Comparison table */
#overlay-about .money-compare { margin: 2.5rem 0; }
#overlay-about .money-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--earth-rule);
    border-radius: 16px;
    overflow: hidden;
}
#overlay-about .money-table-subtitle {
    margin: -0.4rem 0 1rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--earth-ink-2) !important;
}
#overlay-about .money-table-note {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--earth-ink-2) !important;
}
#overlay-about .money-table th,
#overlay-about .money-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--earth-rule);
    font-size: 0.92rem;
    vertical-align: middle;
}
#overlay-about .money-table thead th {
    background: var(--earth-paper-3);
    color: var(--earth-ink) !important;
    font-weight: 700;
    font-size: 0.85rem;
}
#overlay-about .money-table tbody th[scope="row"] {
    font-weight: 600;
    color: var(--earth-ink) !important;
}
#overlay-about .money-table tbody tr:last-child th,
#overlay-about .money-table tbody tr:last-child td { border-bottom: none; }
#overlay-about .money-table .money-col-us {
    background: var(--earth-sage-soft);
    box-shadow: inset 2px 0 0 var(--earth-sage), inset -2px 0 0 var(--earth-sage);
}
#overlay-about .money-pill {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
}
#overlay-about .money-pill-yes {
    background: var(--earth-sage-dark);
    color: #fff !important;
}
#overlay-about .money-pill-no {
    background: var(--earth-paper-3);
    color: var(--earth-ink-2) !important;
    border: 1px solid var(--earth-rule-strong);
}

/* 3-step strip */
#overlay-about .money-steps { margin: 2.5rem 0; }
#overlay-about .money-steps-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
#overlay-about .money-step {
    position: relative;
    padding: 1.65rem 1.25rem 1.25rem;
    background: var(--earth-paper);
    border: 1px solid var(--earth-rule);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(60, 45, 30, 0.05);
}
#overlay-about .money-step-num {
    position: absolute;
    top: -14px;
    left: 1.25rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--earth-terracotta);
    color: #fff !important;
    font-size: 0.85rem;
    font-weight: 700;
}
#overlay-about .money-step-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0 0.9rem;
    border-radius: 12px;
    background: var(--earth-terracotta-soft);
    color: var(--earth-terracotta) !important;
}
#overlay-about .money-step-title {
    margin: 0 0 0.4rem !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: var(--earth-ink) !important;
}
#overlay-about .money-step-text {
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    color: var(--earth-ink-2) !important;
}

/* Integrity pledge */
#overlay-about .money-promise {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: 2.5rem;
    padding: 1.85rem;
    background: linear-gradient(135deg, var(--earth-sage-soft) 0%, var(--earth-paper-2) 80%);
    border: 1px solid var(--earth-rule-strong);
    border-left: 4px solid var(--earth-sage);
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(60, 45, 30, 0.06);
}
#overlay-about .money-promise-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--earth-paper-2);
    color: var(--earth-sage-dark) !important;
    border: 1px solid var(--earth-sage);
}
#overlay-about .money-promise-title {
    margin: 0 0 0.75rem !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--earth-ink) !important;
}
#overlay-about .money-promise-list {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
}
#overlay-about .money-promise-list li {
    position: relative;
    padding: 0.32rem 0 0.32rem 1.6rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--earth-ink-2) !important;
}
#overlay-about .money-promise-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--earth-sage);
}
#overlay-about .money-promise-closer {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600;
    font-style: italic;
    line-height: 1.55 !important;
    color: var(--earth-ink-2) !important;
}

/* ---- Responsive: < 900px ---------------------------------- */
@media (max-width: 900px) {
    #overlay-about .money-section { padding: 2rem; }
    #overlay-about .money-title { font-size: 1.6rem !important; }
    #overlay-about .money-lead { font-size: 1rem !important; }
    #overlay-about .money-steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---- Responsive: < 720px ---------------------------------- */
@media (max-width: 720px) {
    #overlay-about .money-section {
        padding: 1.5rem;
        border-radius: 18px;
        margin-top: 3rem;
        margin-bottom: 2.5rem;
    }
    #overlay-about .money-title { font-size: 1.4rem !important; }
    #overlay-about .money-subhead { font-size: 1.05rem !important; }
    #overlay-about .money-stats { grid-template-columns: 1fr; gap: 0.75rem; }
    #overlay-about .money-stat {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 0.85rem;
        padding: 1rem 1.25rem;
    }
    #overlay-about .money-stat-num { font-size: 1.8rem; }

    /* Keep it ONE table on mobile (no card split) — just sized to fit: fixed
       layout with narrow value columns, smaller type, and compact pills that
       wrap inside their cell. The DirtbagMaps column keeps its sage tint +
       inset green edges (from the base rule) so "us" stays highlighted. */
    #overlay-about .money-compare { margin: 1.75rem 0; }
    /* Intro/footnote text: force full-width left-aligned flow so it can't
       collapse to a narrow, one-word-per-line column. */
    #overlay-about .money-table-subtitle,
    #overlay-about .money-table-note {
        width: 100%;
        text-align: left;
        word-break: normal;
        overflow-wrap: break-word;
    }
    #overlay-about .money-table { table-layout: fixed; }
    #overlay-about .money-table thead th:nth-child(1) { width: 38%; }
    #overlay-about .money-table thead th:nth-child(2) { width: 28%; }
    #overlay-about .money-table thead th:nth-child(3) { width: 34%; }
    #overlay-about .money-table th,
    #overlay-about .money-table td {
        padding: 0.5rem;
        font-size: 0.74rem;
        line-height: 1.3;
        vertical-align: middle;
        overflow-wrap: anywhere;
    }
    #overlay-about .money-table thead th {
        font-size: 0.64rem;
        line-height: 1.25;
    }
    #overlay-about .money-table tbody th[scope="row"] { font-size: 0.76rem; }
    /* Uniform, cell-filling chips: both value columns become two tidy aligned
       stacks instead of content-sized stadium pills that wrap unevenly. The
       softer rounded-rect radius (vs the 999px stadium) makes multi-line chips
       read as intentional rather than cramped. */
    #overlay-about .money-pill {
        display: block;
        box-sizing: border-box;
        width: 100%;
        font-size: 0.68rem;
        padding: 0.34rem 0.5rem;
        border-radius: 9px;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: left;
    }
    /* ✓ on the free cells, muted ✕ on the paid ones — the free/paid split
       reads in a glance. */
    #overlay-about .money-table .money-pill-yes::before {
        content: "✓ ";
        font-weight: 800;
    }
    #overlay-about .money-table .money-pill-no::before {
        content: "✕ ";
        font-weight: 800;
        opacity: 0.55;
    }
    /* "On DirtbagMaps" reads as the winning column. */
    #overlay-about .money-table thead th.money-col-us {
        color: var(--earth-sage-dark) !important;
    }

    #overlay-about .money-promise {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
}

/* Respect reduced-motion: drop the only positional hover lift in the overlay */
@media (prefers-reduced-motion: reduce) {
    #overlay-about .btn-primary { transition: background 0.2s ease, box-shadow 0.2s ease; }
    #overlay-about .btn-primary:hover { transform: none; }
}

/* --- Sponsor Page Styles --- */
.hero-banner {
    text-align: center;
    margin-bottom: 4rem;
    padding: 4rem 2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    /* Removed border and radius for transparent feel if requested,
       but kept for now as per previous design unless specifically asked to remove card style.
       Wait, user asked "Why is there a visible card on the become a sponsor page?"
       This refers to this hero banner likely. Making it transparent.
    */
    border-radius: 0;
    border: none;
    background: transparent;
    white-space: nowrap;
}

/* Sponsor Split Layout */
.sponsor-layout {
    grid-template-columns: 1fr 1.2fr;
    /* Slightly wider right column */
    gap: 4rem;
}

.impact-header {
    text-align: left;
    margin-bottom: 2rem;
}

.impact-header h2 {
    color: white !important;
    /* Forced white color override */
    white-space: nowrap;
}

.impact-header p {
    color: white !important;
    /* Forced white color override */
}

/* Causes List (Vertical) */
.causes-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cause-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.cause-icon-wrapper {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-color, #1a73e8);
}

.cause-details h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.cause-details p {
    color: #ccc;
    /* Lighter grey for readability against dark bg */
    font-size: 0.95rem;
    line-height: 1.5;
}

/* New Inquiry Featured Card */
.inquiry-card-featured {
    background: rgba(26, 115, 232, 0.05);
    border: 1px solid rgba(26, 115, 232, 0.2);
    padding: 2.5rem;
}

.inquiry-form-featured .form-group {
    margin-bottom: 1.25rem;
}

/* --- About Page Styles --- */
.about-hero-image-small {
    width: 100%;
    height: 180px;
    background: #1a1a1a;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.about-hero-image-small::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0);
    background-size: 16px 16px;
    opacity: 0.5;
}

.sleek-socials {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sleek-social-link {
    color: #aaa;
    transition: color 0.2s ease;
}

.sleek-social-link:hover {
    color: white;
}

.sleek-contact-text {
    margin-left: auto;
    color: #666;
    font-size: 0.9rem;
}

/* --- Schedule Timeline Styles --- */
.schedule-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schedule-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
}

.schedule-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent-color, #1a73e8);
}

.schedule-time {
    color: var(--accent-color, #1a73e8);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
}

.schedule-activity {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

/* --- Event Description Card Styles --- */
.event-description-card p {
    margin: 0;
}

/* --- Race Director Card Styles --- */
.race-director-card a {
    transition: color 0.2s ease;
}

.race-director-card a:hover {
    color: white !important;
    text-decoration: underline;
}

/* --- Emoji Support --- */
/* Force color emoji rendering instead of gray fallback */
.page-title,
.card-title,
#detail-overlay-title,
#detail-overlay-subtitle,
#detail-overlay-location,
.info-card-title,
.schedule-card .card-title,
.race-director-card .card-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* Ensure emojis render as colored emojis, not text */
#detail-overlay-title,
#detail-overlay-subtitle,
.card-title,
.info-card-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Additional Info Section (Schedule & Race Director) --- */
.additional-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}


@media (max-width: 900px) {

    /* ... Existing mobile styles ... */
    .content-overlay {
        padding-top: 60px;
    }

    .overlay-close {
        top: 4.5rem;
        right: 1rem;
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    .page-header {
        padding-top: 6rem !important;
        margin-bottom: 2rem !important;
    }

    .page-title {
        font-size: 1.75rem;
        padding: 0 1rem;
    }

    .page-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .page-container {
        padding: 0 1.5rem 4rem;
        max-width: 100%;
        /* Reset width for mobile */
    }

    /* Make feature blocks smaller on mobile */
    .feature-block {
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .feature-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .feature-block h3 {
        font-size: 1.1rem;
    }

    .feature-block p {
        font-size: 0.9rem;
    }

    /* Steps visual */
    .steps-visual {
        margin-top: 2.5rem;
        padding-top: 1.5rem;
    }

    .step-item {
        font-size: 0.75rem;
    }

    .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    .step-line {
        margin: 0 0.5rem;
    }

    /* Card padding */
    .card {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .card-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    /* Form elements smaller on mobile */
    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    .form-input,
    .form-textarea {
        padding: 0.875rem 1rem;
        /* Never below 16px: iOS Safari zooms the page on focus under that and
           shifts the whole fixed-position UI. (Was 0.95rem.) */
        font-size: 16px;
    }

    /* Button smaller on mobile */
    .content-overlay .btn-primary {
        padding: 1rem 2rem;
        font-size: 0.95rem;
    }

    .page-container.shop-container {
        padding: 0 1rem 4rem;
    }

    .page-container.shop-container .page-header {
        text-align: center;
        padding-top: 4rem;
    }

    /* Force grids to single column */
    .shop-layout,
    .split-layout,
    .sponsor-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .shop-sidebar {
        position: static;
        margin-bottom: 0;
    }

    .filter-heading {
        display: none;
    }

    /* Filter pills inherit the token style from the base rule (works at all
       widths); on mobile we just let them wrap as a scrollable chip strip. */
    .shop-filters-vertical {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--sp-1);
    }
    .shop-filters-vertical::-webkit-scrollbar { display: none; }

    .filter-link-vertical {
        flex: 0 0 auto;
    }

    /* Mobile Shop Grid - 2 cols on mobile */
    .modern-shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--sp-4) var(--sp-3);
        max-width: none;
    }

    .modern-shop-grid > *,
    .modern-shop-grid .shop-card-modern,
    [data-cms-container="shop-grid"] > * {
        padding: var(--sp-3) !important;
    }

    .modern-card-info {
        padding: var(--sp-2) 0 0 0;
        gap: var(--sp-1);
    }

    .modern-card-title {
        font-size: 0.9rem;
    }

    .modern-card-price {
        font-size: 0.9rem;
    }

    /* Verdict line is hidden in the tight 2-up grid; it returns on the PDP. */
    .modern-card-desc {
        display: none;
    }

    .sleek-socials {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sleek-contact-text {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }

    /* Stack additional info section on mobile */
    .additional-info-section {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    /* Remove column padding on mobile */
    .features-column,
    .form-column {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* Ensure cards fill width on mobile */
    .card {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Platform Export Links */
.platform-export-link:hover {
    opacity: 0.7;
}

/* ===============================================
   SECURE YOUR SPOT - REGISTRATION PAGE STYLES
   =============================================== */

/* --- Race Director Featured Card --- */
.race-director-featured-card {
    background: linear-gradient(145deg, rgba(26, 115, 232, 0.08) 0%, rgba(26, 115, 232, 0.02) 100%);
    border: 1px solid rgba(26, 115, 232, 0.2);
    padding: 1.25rem 1.5rem;
}

.race-director-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
    position: relative;
}

.race-director-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.3) 0%, rgba(26, 115, 232, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color, #1a73e8);
    flex-shrink: 0;
    border: 2px solid rgba(26, 115, 232, 0.3);
}

.race-director-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.race-director-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color, #1a73e8);
    font-weight: 600;
    display: block;
    margin-bottom: 0;
}

.race-director-name-featured {
    color: white;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.race-director-title {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.3;
}

.race-director-bio {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.race-director-contact-row {
    display: none;
}

.race-director-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-color, #1a73e8);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    background: rgba(26, 115, 232, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.race-director-contact-link:hover {
    background: rgba(26, 115, 232, 0.2);
    color: white;
}

.race-director-response {
    display: none;
}

/* --- Registration Card --- */
.registration-card {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    overflow: visible;
}

.registration-title {
    margin-bottom: 0.75rem !important;
    text-align: center;
    font-size: 1.8rem !important;
}

/* --- Pricing Section --- */
.pricing-section {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.price-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.price-amount {
    font-size: 1.75rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
}

.price-period {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.price-includes {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.4;
}

.price-includes-label {
    display: none;
}

.price-includes-items {
    font-size: inherit;
    color: inherit;
}

/* --- Spots Badge --- */
.spots-badge {
    position: absolute;
    top: -12px;
    right: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(238, 90, 90, 0.4);
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.spots-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --- Social Proof --- */
.social-proof {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    justify-content: center;
}

.participant-avatars {
    display: flex;
}

.participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    margin-left: -8px;
    border: 2px solid rgba(30, 30, 30, 0.9);
}

.participant-avatar:first-child {
    margin-left: 0;
}

.participant-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Form Progress Indicator --- */
.form-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.progress-step .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.progress-step.active .step-number {
    background: var(--accent-color, #1a73e8);
    border-color: var(--accent-color, #1a73e8);
    color: white;
    box-shadow: 0 0 12px rgba(26, 115, 232, 0.4);
}

.progress-step .step-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.progress-step.active .step-label {
    color: rgba(255, 255, 255, 0.8);
}

.progress-line {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: 1.2rem;
}

/* --- Uniform Input Fields --- */
/* NEW CLEAN REGISTRATION FORM STYLES */
.reg-field {
    margin-bottom: 1.25rem;
}

.reg-label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
}

.reg-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.reg-input:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.reg-input:focus {
    outline: none;
    border-color: var(--accent-color, #1a73e8);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.reg-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.reg-textarea {
    min-height: 100px;
    resize: vertical;
}

.reg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.reg-row .reg-field {
    margin-bottom: 1.25rem;
}

/* Required field indicator */
.required-star {
    color: #ff6b6b;
    font-weight: 500;
}

/* Form row for side-by-side inputs */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row .form-group {
    margin-bottom: 1.5rem;
}

.form-group-half {
    margin-bottom: 0 !important;
}

/* --- Trust Indicators --- */
.trust-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 0.5rem 0 0.25rem 0;
    padding: 0.5rem 0;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.trust-item svg {
    color: #43e97b;
}

/* --- Enhanced Registration Button --- */
.registration-btn {
    width: 100%;
    margin-top: 0.5rem !important;
    padding: 0.9rem 2rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.registration-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: rgba(255, 255, 255, 1) !important;
    transform: none !important;
    box-shadow: none !important;
}

.registration-btn svg {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.registration-btn:hover svg {
    transform: translateX(4px);
}

/* --- Cancellation Note --- */
.cancellation-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    text-align: center;
}

.cancellation-note svg {
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

/* --- Mobile Responsive --- */
@media (max-width: 900px) {
    .race-director-featured-card {
        padding: 1.25rem;
    }

    .race-director-header {
        flex-direction: column;
        text-align: center;
    }

    .race-director-avatar {
        width: 64px;
        height: 64px;
    }

    .race-director-info {
        text-align: center;
        align-items: center;
    }

    .race-director-bio {
        text-align: center;
    }

    .race-director-contact-link {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .reg-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .spots-badge {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 1rem;
        justify-content: center;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .social-proof {
        flex-direction: column;
        gap: 0.5rem;
    }

    .trust-indicators {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-progress {
        gap: 0.25rem;
    }

    .progress-line {
        width: 40px;
    }

    .reg-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
}

/* ===============================================
   TRAIL DETAIL PAGE STYLES
   =============================================== */

/* Trail Detail Container */
.trail-detail-container {
    max-width: 1100px;
}

/* Trail Card Title */
.trail-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1.25rem 0;
    letter-spacing: -0.01em;
}

/* Trail Description Card */
.trail-description-card {
    padding: 1.5rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.trail-description-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.trail-description-text {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

/* Trail Info Card */
.trail-info-card {
    padding: 1.5rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.trail-info-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Trail Stats Grid (2x2) */
.trail-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trail-stat-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.trail-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.trail-stat-item:hover .trail-stat-icon {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.trail-stat-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
}

.trail-stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.trail-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.trail-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
}

/* Difficulty Color Badges */
.trail-stat-value.difficulty-easy {
    color: #4CAF50;
    background: none;
}

.trail-stat-value.difficulty-moderate {
    color: #FF9800;
    background: none;
}

.trail-stat-value.difficulty-hard {
    color: #f44336;
    background: none;
}

.trail-stat-value.difficulty-extreme {
    color: #9C27B0;
    background: none;
}

/* Trail Details List */
.trail-details-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trail-detail-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.trail-detail-row.location-row {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.trail-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.trail-detail-row:hover .trail-detail-icon {
    color: rgba(255, 255, 255, 0.55);
}

.trail-detail-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

.trail-detail-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.trail-detail-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.trail-detail-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Trail Location Link */
.trail-location-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.2s ease;
}

.trail-location-link:hover {
    color: var(--accent-color, #1a73e8);
}

.trail-location-link .location-link-icon {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.trail-location-link:hover .location-link-icon {
    opacity: 0.8;
}

/* Start Point Actions */
.start-point-content {
    flex: 1;
}

.start-point-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.start-point-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.start-point-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

.start-point-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.start-point-btn:hover svg {
    opacity: 1;
}

.start-point-btn.zoom-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

.start-point-btn.coords-btn {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.7rem;
}

.start-point-btn.coords-btn:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.start-point-btn.coords-btn.copied {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
    color: #4ade80;
}

.start-point-btn.maps-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

/* Trail Export Card */
.trail-export-card {
    padding: 1.5rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.trail-export-card:hover {
    transform: none !important;
}

.trail-export-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.trail-export-intro {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: 0 0 1.5rem 0;
    line-height: 1.4;
}

/* Export Links Vertical */
.export-links-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.export-btn-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
}

.export-btn-large:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.export-btn-large.download {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.export-btn-large.download:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.export-btn-large.strava {
    color: #FC4C02;
}

.export-btn-large.strava:hover {
    background: rgba(252, 76, 2, 0.1);
    border-color: rgba(252, 76, 2, 0.3);
}

.export-btn-large.garmin {
    color: #007BC7;
}

.export-btn-large.garmin:hover {
    background: rgba(0, 123, 199, 0.1);
    border-color: rgba(0, 123, 199, 0.3);
}

/* Trail Tips Section */
.trail-tips {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trail-tips-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem 0;
}

.trail-tips-title svg {
    color: rgba(255, 255, 255, 0.5);
}

.trail-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.trail-tips-list li {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    padding-left: 1.25rem;
    position: relative;
}

.trail-tips-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.trail-tips-list li.tip-disclaimer {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.trail-tips-list li.tip-disclaimer::before {
    display: none;
}

/* Trail Detail Mobile Responsive */
@media (max-width: 900px) {
    .trail-detail-container {
        padding: 0 1rem 4rem;
    }

    .trail-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .trail-stat-icon {
        width: 36px;
        height: 36px;
    }

    .trail-stat-value {
        font-size: 1rem;
    }

    .trail-stat-label {
        font-size: 0.6rem;
    }

    .trail-detail-row {
        gap: 0.75rem;
    }

    .trail-detail-icon {
        width: 28px;
        height: 28px;
    }

    .export-btn-large {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .trail-tips-list li {
        font-size: 0.8rem;
    }
}

/* --- Shop sort + count toolbar --- */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--earth-rule);
}

.shop-result-count {
    font-size: 0.85rem;
    color: var(--earth-ink-2);
    font-variant-numeric: tabular-nums;
}

.shop-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.shop-sort-label {
    font-size: 0.75rem;
    color: var(--earth-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.shop-sort-select {
    background: var(--earth-paper-2);
    border: 1px solid var(--earth-rule);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    color: var(--earth-ink);
    cursor: pointer;
    font-family: inherit;
}

.shop-sort-select:focus-visible {
    outline: 2px solid var(--earth-terracotta);
    outline-offset: 2px;
    border-color: var(--earth-rule-strong);
}

@media (max-width: 480px) {
    .trail-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
/* ==========================================================================
   Site footer — operator identity + legal links, rendered at the bottom of
   the trail-detail overlay (→ every prerendered trail page) and the about
   overlay. Statutory content (e-handelsloven), so it must stay visible on
   every theme — dark trail pages override colors in theme-dark-explore.css.
   ========================================================================== */
.site-footer {
    margin-top: 3.5rem;
    padding: 2rem 0 1.25rem;
    border-top: 1px solid var(--earth-rule, rgba(0, 0, 0, 0.12));
    font-size: 0.8rem;
    color: var(--earth-ink-3, #6b6b70);
}
/* Brand block left, legal links right; wraps to a stack on narrow screens. */
.site-footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2.5rem;
    margin-bottom: 1.5rem;
}
.site-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}
.site-footer-logo {
    height: 52px;
    width: auto;
    flex: 0 0 auto;
}
.site-footer-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--earth-ink, #2d2620);
}
.site-footer-tagline {
    display: block;
    margin-top: 3px;
    max-width: 44ch;
    line-height: 1.45;
}
.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.site-footer-links a {
    color: var(--earth-ink-2, #4a463f);
    /* main.css ships a global `a { font-size: 1rem }` — inherit the footer's
       0.8rem instead so links sit on the same scale as the copy around them. */
    font-size: inherit;
    text-decoration: none;
}
.site-footer-links a:hover { text-decoration: underline; }
.site-footer-identity {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--earth-rule, rgba(0, 0, 0, 0.08));
    line-height: 1.6;
    font-size: 0.74rem;
}
.site-footer-identity a { color: inherit; font-size: inherit; }

/* ==========================================================================
   iOS anti-zoom floor for the overlay forms
   ==========================================================================
   iOS Safari zooms the page whenever a focused field computes below 16px, and
   because the app chrome is fixed-position that zoom shifts the entire UI (map,
   drawer, toolbar) out from under the user. main.css ships a global guard
   (`input, select, textarea` at <=768px) but its specificity is (0,0,1), so
   every id-scoped overlay rule below beat it and the fields stayed at
   0.9-0.95rem. Re-assert the floor here at matching specificity. Desktop keeps
   the smaller scale; on phones these fields read slightly larger — that is the
   intended trade. Kept last in the file so nothing can re-lower them. */
@media (max-width: 768px) {
    #overlay-event .form-input,
    #overlay-event .form-textarea,
    #overlay-sponsor .form-input,
    #overlay-sponsor .form-textarea,
    #overlay-about .form-input,
    #overlay-about .form-textarea {
        font-size: 16px;
    }
}