/* ═══════════════════════════════════════════════════════
   JAN SPEK ROZEN — V2 PREMIUM DARK THEME (Shared)
   ═══════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════
   Custom scrollbar — gilded, premium, matches navy/gold palette.
   Firefox uses scrollbar-color (track + thumb); Chrome/Safari/Edge
   use the webkit pseudo-elements. Both routes are styled so the
   site reads boutique on every modern browser. Internal scrollers
   (filter rails, modal lists, search results) inherit the same
   look without needing to redeclare per surface.
   ═══════════════════════════════════════════════════════ */
html {
    scrollbar-width: thin;
    scrollbar-color: #eebd5b rgba(1, 21, 50, 0.35);
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: rgba(1, 21, 50, 0.25);
    border-left: 1px solid rgba(200, 169, 110, 0.12);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #eebd5b 0%, #b88a3a 100%);
    border: 2px solid #011532;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(238, 189, 91, 0.45);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f5d27a 0%, #d4a04a 100%);
}
::-webkit-scrollbar-thumb:active {
    background: #eebd5b;
}
::-webkit-scrollbar-corner { background: transparent; }
html[data-theme="light"] {
    scrollbar-color: #b88a3a rgba(212, 175, 110, 0.18);
}
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(212, 175, 110, 0.12);
    border-left-color: rgba(212, 175, 110, 0.28);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c8a04a 0%, #8a6a2c 100%);
    border-color: #faf6ef;
    box-shadow: inset 0 0 0 1px rgba(184, 138, 58, 0.4);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d4af6e 0%, #a08040 100%);
}

:root {
    --black: #011532;
    --dark: #011532;
    --dark-surface: #0e1a2e;
    --dark-card: #111f35;
    --dark-border: #1a2d4a;
    --navy: #07254B;
    --navy-deep: #011532;
    /* Strong, saturated gold for navy backgrounds. Earlier values
       (#d4af6e / #f3e7c3) read almost white on the dark surfaces;
       the client wanted unmistakable gold, not cream. Light-theme
       golds are redefined further down with the darker on-cream
       values; only dark-theme is affected here. */
    --gold: #eebd5b;
    --gold-light: #f5d27a;
    --gold-dark: #b88a3a;
    /* Italic-accent: rustige champagne (warmer, minder geel-verzadigd).
       Past beter bij de cursieve serif-titels — laat ze parelend
       lezen ipv 'highlighter-marker' geel. */
    --gold-italic: #c9a572;
    --white: #ffffff;
    --text: #e8e8e8;
    --text-muted: #888888;
    --text-dim: #555555;
    --green-accent: #2d5f3f;
    --serif: 'ITC Berkeley Oldstyle', 'Libre Baskerville', Georgia, serif;
    --sans: 'Montserrat', -apple-system, sans-serif;
    --nav-bg: rgba(10, 10, 10, 0.85);
    --nav-bg-solid: #011532;
    --dropdown-bg: rgba(22, 22, 22, 0.98);
    --mobile-menu-bg: rgba(10, 10, 10, 0.98);
    --overlay-gradient: none;
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    --card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    --logo-filter: brightness(0) invert(1);
    --nav-link-color: rgba(255,255,255,0.96);
    --btn-outline-border: rgba(255,255,255,0.25);
    --rose-overlay: linear-gradient(0deg, rgba(10,10,10,0.85) 0%, transparent 50%);
    --rose-overlay-hover: linear-gradient(0deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.2) 100%);
    --splash-bg: #011532;
    --splash-logo-filter: brightness(0) invert(1) drop-shadow(0 0 60px rgba(200, 169, 110, 0.3));
}

/* Dark mode only — light mode CSS removed */

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--black);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */
.v2-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0 48px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s ease;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--dark-border);
}

.v2-nav.scrolled {
    background: var(--nav-bg-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--dark-border);
    height: 64px;
}

.v2-nav.v2-nav-solid {
    background: var(--nav-bg-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--dark-border);
}

.v2-nav-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.v2-nav-logo img {
    height: 36px;
    width: auto;
    display: block;
    transition: all 0.3s ease;
}
.v2-nav-logo .logo-base {
    filter: var(--logo-filter) drop-shadow(0 0 14px rgba(200, 169, 110, 0.4)) drop-shadow(0 0 2px rgba(223, 194, 152, 0.5));
}
.v2-nav-logo:hover .logo-base {
    filter: var(--logo-filter) drop-shadow(0 0 22px rgba(200, 169, 110, 0.6)) drop-shadow(0 0 4px rgba(223, 194, 152, 0.7));
}
/* Gold rings overlay — only top portion of logo (the 4 circles) tinted gold.
   Hidden in light mode (logo is navy blue there). */
.v2-nav-logo .logo-rings-gold {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    clip-path: inset(0 0 68% 0);
    -webkit-clip-path: inset(0 0 68% 0);
    filter: brightness(0) saturate(100%) invert(72%) sepia(15%) saturate(880%) hue-rotate(2deg) brightness(95%) contrast(88%);
}


.v2-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.v2-nav-links li {
    display: flex;
    align-items: center;
}

.v2-nav-links a {
    color: var(--nav-link-color);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.3s ease;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.v2-nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.3s ease;
}

.v2-nav-links a:hover {
    color: var(--gold);
}

.v2-nav-links a:hover::after {
    width: 100%;
}

/* Active nav highlighting */
.v2-nav-links > li.v2-nav-active > a,
.v2-nav-links > li.v2-nav-active > a.v2-dropdown-toggle {
    color: var(--gold);
}
.v2-nav-links > li.v2-nav-active > a::after,
.v2-nav-links > li.v2-nav-active > a.v2-dropdown-toggle::after {
    width: 100%;
    height: 2px;
    bottom: -6px;
}

/* Mobile active nav highlighting */
.mnav-link.v2-nav-active {
    color: var(--gold-light, #dfc298) !important;
    padding-left: 34px;
    background: linear-gradient(90deg, rgba(200,169,110,0.06), transparent);
}
.mnav-link.v2-nav-active::before {
    transform: scaleY(1);
}
.mnav-group.v2-nav-active > .mnav-trigger {
    color: var(--gold-light, #dfc298);
    padding-left: 34px;
    background: linear-gradient(90deg, rgba(200,169,110,0.06), transparent);
}
.mnav-group.v2-nav-active > .mnav-trigger::before {
    transform: scaleY(1);
}

/* Dropdown */
.v2-dropdown {
    position: relative;
}

.v2-dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.v2-dropdown-toggle svg {
    width: 10px;
    height: 10px;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.v2-dropdown:hover .v2-dropdown-toggle svg {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--gold, #c8a96e);
}

/* Dropdown — premium geanimeerd "glas-navy" paneel. Vervangt de oude platte
   witte lijst: donkerblauw glaspaneel dat aansluit op de navy nav-balk, met
   gouden hairline, staggered items, gouden hover-indicator + pijl. Zelfde
   luxe look in light & dark. */
.v2-dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    min-width: 258px;
    padding: 12px;
    margin: 0;
    list-style: none;
    background: linear-gradient(180deg, #01193c 0%, #011532 55%, #010e24 100%);
    border: 1px solid rgba(200, 169, 110, 0.55);
    border-radius: 16px;
    box-shadow:
        0 30px 70px -18px rgba(1, 10, 30, 0.65),
        0 8px 22px rgba(1, 10, 30, 0.4),
        0 0 0 1px rgba(200, 169, 110, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px) scale(0.97);
    transform-origin: top center;
    transition:
        opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.46s;
    z-index: 250;
}
/* Gouden hairline bovenin het paneel — helder goud met zachte glow */
.v2-dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0; left: 14px; right: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #e8c987 20%, #f0d9a0 50%, #e8c987 80%, transparent);
    box-shadow: 0 0 10px rgba(200, 169, 110, 0.45);
}
/* Onzichtbare brug over de gap zodat hover niet wegvalt */
.v2-dropdown-menu::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -18px;
    height: 18px;
    background: transparent;
}

.v2-dropdown:hover .v2-dropdown-menu,
.v2-dropdown:focus-within .v2-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    transition:
        opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s;
}

.v2-dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(9px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.v2-dropdown:hover .v2-dropdown-menu li,
.v2-dropdown:focus-within .v2-dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}
/* Staggered reveal — items schuiven één voor één omhoog */
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(1) { transition-delay: 0.03s; }
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(2) { transition-delay: 0.06s; }
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(3) { transition-delay: 0.09s; }
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(4) { transition-delay: 0.12s; }
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(5) { transition-delay: 0.15s; }
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(6) { transition-delay: 0.18s; }
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(7) { transition-delay: 0.21s; }
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(8) { transition-delay: 0.24s; }
.v2-dropdown:hover .v2-dropdown-menu li:nth-child(9) { transition-delay: 0.27s; }

.v2-dropdown-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    margin: 1px 0;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    transition: color 0.3s ease, background 0.3s ease, padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Gouden schuif-indicator links — helder goud met glow */
.v2-dropdown-menu a::before {
    content: '';
    position: absolute;
    left: 6px; top: 50%;
    width: 3.5px; height: 0;
    background: linear-gradient(180deg, #f0d9a0, #c8a96e);
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(200, 169, 110, 0.5);
    transform: translateY(-50%);
    transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Pijl die inschuift bij hover */
.v2-dropdown-menu a::after {
    content: '\2192' !important;
    display: inline-block !important;
    margin-left: auto;
    padding-left: 12px;
    color: #f0d9a0;
    font-size: 0.95em;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: auto !important;
    height: auto !important;
    background: none !important;
}
.v2-dropdown-menu a:hover {
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(200, 169, 110, 0.24), rgba(200, 169, 110, 0.04));
    padding-left: 22px;
}
.v2-dropdown-menu a:hover::before { height: 62%; }
.v2-dropdown-menu a:hover::after { opacity: 1; transform: translateX(0); }

/* "View All …" = helder-gouden eyebrow-kop met gouden scheidingslijn */
.v2-dropdown-menu li:first-child a {
    color: #f2dca4 !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 8px 16px 13px;
    margin-bottom: 7px;
    border-radius: 0;
    border-bottom: 1px solid rgba(200, 169, 110, 0.38);
}
.v2-dropdown-menu li:first-child a strong { font-weight: 700; }
.v2-dropdown-menu li:first-child a:hover {
    background: transparent;
    padding-left: 16px;
    color: #f8ecc8 !important;
}
.v2-dropdown-menu li:first-child a:hover::before { height: 0; }
.v2-dropdown-menu li:first-child a::after { content: '' !important; padding-left: 0; }

/* Nested dropdown */
.v2-dropdown-nested {
    position: relative;
}

.v2-dropdown-nested .v2-dropdown-menu {
    top: -8px;
    left: 100%;
    transform: translateX(0) translateY(0);
}

.v2-dropdown-nested:hover > .v2-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(0);
}

/* Mobile nav toggle */
.v2-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
}

.v2-nav-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--text);
    transition: all 0.3s ease;
}

/* Search trigger (desktop) */
.v2-search-trigger {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    transition: color 0.3s;
    margin-left: 16px;
}
.v2-search-trigger:hover { color: var(--gold-light); }
.v2-search-trigger svg { width: 18px; height: 18px; }

/* Language switcher (desktop) */
.v2-lang { position: relative; margin-left: 14px; }
.v2-lang-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(200,169,110,0.25);
    color: #fff; cursor: pointer;
    font-family: inherit; font-size: 0.7rem; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    transition: all 0.3s; border-radius: 9999px;
}
.v2-lang-btn:hover {
    background: rgba(200,169,110,0.1);
    border-color: rgba(200,169,110,0.5);
    color: var(--gold-light);
}
.v2-lang-btn svg { opacity: 0.7; transition: transform 0.3s; }
.v2-lang.open .v2-lang-btn svg:last-child { transform: rotate(180deg); }
.v2-lang-menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 200px; max-height: min(70vh, 560px); overflow-y: auto;
    list-style: none; margin: 0; padding: 8px 0;
    background: rgba(7,14,30,0.96);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(200,169,110,0.25);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all 0.3s; z-index: 1001;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.v2-lang.open .v2-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.v2-lang-menu li {
    padding: 11px 22px; font-size: 0.78rem;
    color: rgba(255,255,255,0.7); cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 12px;
}
.v2-lang-menu li::before {
    content: attr(data-lang);
    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em;
    color: var(--gold); min-width: 24px;
}
.v2-lang-menu li:hover { background: rgba(200,169,110,0.08); color: #fff; }
.v2-lang-menu li.active { color: var(--gold-light); }

/* ── Taalkiezer: altijd leesbaar ─────────────────────────────────────────────
   Het menu heeft in beide thema's een donkere achtergrond (het hangt onder de
   navy navigatiebalk). De lichte-thema-regels maakten de tekst donkerblauw,
   waardoor de talen onleesbaar werden (donker op donker). Hieronder staan de
   kleuren expliciet vast, ongeacht thema. */
.v2-lang-menu li,
html[data-theme="light"] .v2-lang-menu li {
    color: rgba(255,255,255,0.72);
    border-radius: 6px;
    margin: 0 6px;
    padding: 10px 14px;
}
.v2-lang-menu li::before,
html[data-theme="light"] .v2-lang-menu li::before {
    color: rgba(200,169,110,0.85);
}
.v2-lang-menu li:hover,
html[data-theme="light"] .v2-lang-menu li:hover {
    background: rgba(200,169,110,0.12);
    color: #fff;
}
.v2-lang-menu li.active,
html[data-theme="light"] .v2-lang-menu li.active {
    color: var(--gold-light);
    background: rgba(200,169,110,0.10);
}
.v2-lang-menu li.active::before,
html[data-theme="light"] .v2-lang-menu li.active::before { color: var(--gold-light); }
/* Nette smalle scrollbar: met 12 talen loopt de lijst over. */
.v2-lang-menu { scrollbar-width: thin; scrollbar-color: rgba(200,169,110,0.35) transparent; border-radius: 10px; }
.v2-lang-menu::-webkit-scrollbar { width: 6px; }
.v2-lang-menu::-webkit-scrollbar-track { background: transparent; }
.v2-lang-menu::-webkit-scrollbar-thumb { background: rgba(200,169,110,0.35); border-radius: 3px; }
.v2-lang-menu::-webkit-scrollbar-thumb:hover { background: rgba(200,169,110,0.55); }

/* Hide desktop search + lang when mobile nav takes over */
@media (max-width: 1100px) {
    .v2-search-trigger, .v2-lang { display: none; }
}

/* ═══════════════════════════════════════════════════════
   COMMON SECTIONS
   ═══════════════════════════════════════════════════════ */
.v2-section {
    padding: 120px 48px;
    position: relative;
}

.v2-container {
    max-width: 1240px;
    margin: 0 auto;
}

.v2-section-label {
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.v2-section-label::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}


.v2-section-title {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 20px;
}

.v2-section-subtitle {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 550px;
    line-height: 1.8;
}

/* Reveal animations */
.v2-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.v2-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */
.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
}

.v2-btn-primary {
    background: var(--gold);
    color: var(--black);
}

.v2-btn-primary:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(200, 169, 110, 0.3);
}

.v2-btn-outline {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--btn-outline-border);
}

.v2-btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
}

.v2-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

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

/* ═══════════════════════════════════════════════════════
   PAGE HERO (for subpages) — Boutique style
   ═══════════════════════════════════════════════════════ */
.v2-page-hero {
    position: relative;
    min-height: 52vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: var(--navy-deep);
}
.v2-page-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 10%, rgba(200,169,110,0.6) 50%, transparent 90%);
    z-index: 3;
}

.v2-page-hero-bg {
    position: absolute;
    inset: 0;
}

.v2-page-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
    filter: brightness(0.95);
    will-change: transform;
    animation: heroZoom 12s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
@keyframes heroZoom {
    0%   { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.v2-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-gradient);
}

.v2-page-hero-content {
    position: relative;
    padding: 0 48px 56px;
    max-width: 960px;
}

.v2-page-hero-content .v2-section-label {
    opacity: 0;
    animation: revealUp 0.8s ease 0.2s forwards;
    color: #d4af6e;
}

.v2-page-hero-content .v2-section-label::before {
    background: #d4af6e;
}

.v2-page-hero-content h1 {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 300;
    color: #ffffff;
    line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 0 40px rgba(0,0,0,0.3);
    opacity: 0;
    animation: revealUp 0.8s ease 0.4s forwards;
}

.v2-page-hero-content h1 em {
    font-style: italic;
    color: var(--gold-italic);
}

.v2-page-hero-content p {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 12px rgba(0,0,0,0.5);
    max-width: 520px;
    line-height: 1.8;
    margin-top: 16px;
    opacity: 0;
    animation: revealUp 0.8s ease 0.6s forwards;
}

/* ═══════════════════════════════════════════════════════
   CONTENT SECTIONS (for text pages)
   ═══════════════════════════════════════════════════════ */
.v2-content-section {
    background:
        radial-gradient(ellipse 1100px 480px at 50% 0%,
            rgba(200,169,110,0.06) 0%, transparent 70%),
        var(--dark);
    position: relative;
}
.v2-content-section::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 60%;
    max-width: 480px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.55) 50%, transparent 100%);
}

.v2-content-section p {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 2;
    margin-bottom: 24px;
}

.v2-content-section p.lead {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════
   TIMELINE (for history page)
   ═══════════════════════════════════════════════════════ */
.v2-timeline-nav {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 80px;
    position: relative;
    padding: 0 20px;
}

.v2-timeline-nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    background: var(--dark-border);
    transform: translateY(-50%);
}

.v2-timeline-period {
    position: relative;
    cursor: pointer;
    padding: 20px 16px;
    text-align: center;
    flex: 1;
    transition: all 0.3s ease;
}

.v2-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dark-card);
    border: 2px solid var(--dark-border);
    margin: 0 auto 10px;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.v2-timeline-period:hover .v2-timeline-dot,
.v2-timeline-period.active .v2-timeline-dot {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(200, 169, 110, 0.4);
}

.v2-timeline-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    transition: color 0.3s ease;
}

.v2-timeline-period:hover .v2-timeline-label,
.v2-timeline-period.active .v2-timeline-label {
    color: var(--gold);
}

/* Timeline items */
.v2-timeline-item {
    display: none;
    animation: fadeInUp 0.6s ease forwards;
}

.v2-timeline-item.active {
    display: block;
}

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

.v2-timeline-year {
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--gold);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--dark-border);
}

.v2-timeline-chapter {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

.v2-timeline-chapter.text-only {
    grid-template-columns: 1fr;
}

.v2-chapter-images {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.v2-chapter-img {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.v2-chapter-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.v2-chapter-img:hover img {
    transform: scale(1.03);
}

.v2-chapter-text p {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 2;
    margin-bottom: 20px;
}

/* Timeline navigation buttons */
.v2-period-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--dark-border);
}

.v2-period-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--dark-border);
    cursor: pointer;
    transition: all 0.3s ease;
}

.v2-period-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════
   CARDS GRID (for breeders, growers, roses)
   ═══════════════════════════════════════════════════════ */
.v2-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 60px;
}

.v2-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    padding: 40px 36px;
    transition: all 0.4s ease;
    position: relative;
}

.v2-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.5s ease;
}

.v2-card:hover {
    border-color: rgba(200, 169, 110, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
}

.v2-card:hover::before {
    width: 100%;
}

.v2-card h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 8px;
}

.v2-card .card-type {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}

.v2-card .card-separator {
    width: 40px;
    height: 1px;
    background: var(--dark-border);
    margin-bottom: 16px;
}

.v2-card p {
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 16px;
}

.v2-card .card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    transition: all 0.3s ease;
}

.v2-card .card-link:hover {
    color: var(--gold-light);
}

.v2-card .card-link svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.v2-card .card-link:hover svg {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIAL CARDS
   ═══════════════════════════════════════════════════════ */
.v2-testimonial-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    padding: 40px 36px;
    transition: all 0.4s ease;
    position: relative;
}

.v2-testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 20px;
    right: 28px;
    font-family: var(--serif);
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.15;
    line-height: 1;
}

.v2-testimonial-card:hover {
    border-color: rgba(200, 169, 110, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
}

.v2-testimonial-card h3 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 4px;
}

.v2-testimonial-card .location {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}

.v2-testimonial-card blockquote {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.8;
    border: none;
    padding: 0;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════
   ROSE GRID (for category/all roses pages)
   ═══════════════════════════════════════════════════════ */
.v2-rose-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.v2-filter-btn {
    padding: 10px 24px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--dark-border);
    cursor: pointer;
    transition: all 0.3s ease;
}

.v2-filter-btn:hover,
.v2-filter-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(200, 169, 110, 0.08);
}

.v2-rose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.v2-rose-card {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
}

.v2-rose-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
    filter: brightness(0.9);
}

.v2-rose-card img[src$="-transparent.png"] {
    object-fit: contain;
    padding: 16px;
}

.v2-rose-card:hover img {
    transform: scale(1.05);
    filter: brightness(0.8);
}

.v2-rose-card-overlay {
    position: absolute;
    inset: 0;
    background: var(--rose-overlay);
    transition: background 0.4s ease;
}

.v2-rose-card:hover .v2-rose-card-overlay {
    background: var(--rose-overlay-hover);
}

.v2-rose-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
}

.v2-rose-card-content h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 4px;
}

.v2-rose-card-content p {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.05em;
}

/* Rose count badge */
.v2-rose-count {
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--text-dim);
    margin-bottom: 40px;
}

.v2-rose-count span {
    color: var(--gold);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   ROSE DETAIL PAGE
   ═══════════════════════════════════════════════════════ */
.v2-rose-detail {
    background: var(--dark);
}

.v2-rose-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.v2-rose-detail-image {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid var(--dark-border);
}

.v2-rose-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-rose-detail-info h1 {
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 8px;
}

.v2-rose-detail-info .rose-category {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
}

.v2-rose-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
    margin-bottom: 24px;
}

.v2-rose-meta-item label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 4px;
}

.v2-rose-meta-item span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text);
}

.v2-rose-detail-info .rose-description {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 2;
}

/* ═══════════════════════════════════════════════════════
   SIGNATURE BLOCK
   ═══════════════════════════════════════════════════════ */
.v2-signature {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--dark-border);
}

.v2-signature .sig-name {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 4px;
}

.v2-signature .sig-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════
   PAGE NAVIGATION
   ═══════════════════════════════════════════════════════ */
.v2-page-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--dark-border);
}

.v2-page-nav a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--dark-border);
    transition: all 0.3s ease;
}

.v2-page-nav a:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.v2-footer {
    background: var(--black);
    border-top: 1px solid var(--dark-border);
    padding: 80px 48px 40px;
}

.v2-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    max-width: 1240px;
    margin: 0 auto;
}

.v2-footer-brand img {
    height: 32px;
    filter: var(--logo-filter);
    opacity: 0.6;
    margin-bottom: 20px;
}

.v2-footer-brand p {
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--text-dim);
    line-height: 1.8;
    max-width: 300px;
}

.v2-footer-col h4 {
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}

.v2-footer-col ul {
    list-style: none;
}

.v2-footer-col li {
    margin-bottom: 10px;
}

.v2-footer-col a {
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.3s ease;
}

.v2-footer-col a:hover {
    color: var(--gold);
}

.v2-footer-bottom {
    max-width: 1240px;
    margin: 60px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--dark-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.v2-footer-bottom p {
    font-size: 0.72rem;
    color: var(--text-dim);
}

.v2-social-links {
    display: flex;
    gap: 16px;
}

.v2-social-links a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dark-border);
    border-radius: 50%;
    color: var(--text-dim);
    transition: all 0.3s ease;
    text-decoration: none;
}

.v2-social-links a:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.v2-social-links svg {
    width: 14px;
    height: 14px;
}

/* ═══════════════════════════════════════════════════════
   DYNAMIC ROSE GRIDS (used by roses-dynamic.js)
   ═══════════════════════════════════════════════════════ */

/* Category page grid — auto-fill so orphan cards don't stretch on the
   last row; keeps tidy alignment at every viewport width. */
.roses-grid-dynamic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    padding: 0;
}

/* All roses gallery grid */
.roses-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    margin-top: 2rem;
}

/* Rose card link wrapper */
.rose-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.35s ease,
                scale 0.35s ease;
}

.rose-card-link:hover {
    transform: translateY(-6px);
}

/* Filter animation states */
.rose-card-link.card-hiding {
    opacity: 0;
    scale: 0.92;
    pointer-events: none;
}

.rose-card-link.card-showing {
    opacity: 0;
    scale: 0.92;
}

.rose-card-link.card-visible {
    opacity: 1;
    scale: 1;
}

/* Rose card display */
/* Rose card — rozen.com style: landscape photo, name below in caps */
.rose-card-display {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Dezelfde zoom als op de collectiepagina's (.rose-card-link:hover verderop):
   5,5% bovenop de stand die foto-kader.js of de beheeromgeving heeft gezet.
   Een kale scale(1.05) gooide die stand weg, waardoor een verkleinde roos bij
   hover naar volle grootte sprong (fotocontrole, 14-10-2026). */
.rose-card-display:hover .rose-card-img {
    transform: translate(var(--jsr-x, 0%), var(--jsr-y, 0%)) scale(calc(var(--jsr-zoom, 1) * 1.055)) !important;
}

.rose-card-image-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    background: var(--dark-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Garden Special collection: roses are photographed head-on at
   square crops, so the cards look better as 1:1 squares than as
   3:4 portraits with white space top/bottom. */
body[data-collection="garden-special"] .rose-card-image-wrapper,
body[data-page="garden-special"] .rose-card-image-wrapper {
    aspect-ratio: 1 / 1;
}

/* Cutout-photo fallback: when we only have a transparent PNG the JS
   sets a soft gradient (rose colour → dark) inline so the card still
   reads as part of the grid. */
.rose-card-image-wrapper--cutout {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rose-card-cat-dot {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: contain;
    z-index: 2;
    opacity: 0.92;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}

.rose-card-color {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

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

.rose-card-image-wrapper--cutout .rose-card-img,
.rose-card-img[src*="-transparent."] {
    object-fit: contain;
    padding: 9px;
}

/* Rose card info — "Navy split-label" (roosweergave-optie 19): navy bar in
   twee delen — links de naam in wit, een gouden scheidingslijntje, rechts de
   collectie in fijne goud-kapitalen. Zelfde behandeling in beide thema's. */
.rose-card-info {
    background: #011532;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.rose-card-name {
    flex: 1;
    order: 1;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rose-card-name .reg {
    font-size: 0.5em;
    vertical-align: 0.55em;
    font-weight: 400;
    margin-left: 0.04em;
    color: #c8a96e;
    text-transform: none;
}

/* Gouden scheidingslijntje tussen naam en collectie */
.rose-card-gl {
    order: 2;
    flex: 0 0 auto;
    width: 1px;
    height: 24px;
    background: #c8a96e;
}

.rose-card-type {
    order: 3;
    max-width: 42%;
    text-align: right;
    font-family: var(--sans);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #c8a96e;
    margin: 0;
}

/* Region filter buttons */
.region-filters-text .filter-btn {
    background: transparent;
    border: 1px solid var(--dark-border);
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.region-filters-text .filter-btn:hover,
.region-filters-text .filter-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(200, 169, 110, 0.08);
}

/* Dynamic filter bar (generated by roses-dynamic.js) */
.rose-filter-bar {
    margin-bottom: 32px;
}

.rose-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.rose-filter-row-label {
    font-family: var(--sans);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    min-width: 56px;
    flex-shrink: 0;
}

.rose-filter-bar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.rose-filter-pill {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--dark-border);
    color: var(--text-muted);
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rose-filter-pill:hover,
.rose-filter-pill.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(200, 169, 110, 0.08);
}

/* Color filter — swatch dots removed per client feedback (some
   raw color values clashed too brightly with the boutique
   palette). The filter still works via text labels. */
.rose-filter-color {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
}
.rose-filter-swatch {
    display: none;
}

.rose-filter-search {
    max-width: 320px;
}

.rose-filter-search-input {
    width: 100%;
    padding: 10px 20px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 100px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.rose-filter-search-input::placeholder {
    color: var(--text-dim);
}

.rose-filter-search-input:focus {
    border-color: var(--gold);
}

.no-roses-message {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 1rem;
}

/* Category rose count */
.category-rose-count {
    color: var(--text-dim);
}

/* ── Skeleton loading cards ──
   Shown inside .roses-grid-dynamic until JS populates real cards.
   Same 4:3 ratio as real cards so the grid doesn't reflow when data arrives. */
.rose-skeleton {
    aspect-ratio: 4 / 3;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: roseSkeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes roseSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rose-skeleton { animation: none; background: rgba(255,255,255,0.04); }
}

/* ── Empty state — "No roses match your filters" ── */
.roses-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 100px 24px;
    color: var(--text-muted);
}
.roses-empty svg {
    color: var(--gold);
    opacity: 0.5;
    margin-bottom: 20px;
}
.roses-empty h3 {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--text);
    margin: 0 0 10px;
}
.roses-empty p {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin: 0 0 28px;
}
.roses-empty-actions {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}
.roses-empty-btn {
    display: inline-block;
    text-decoration: none;
    padding: 12px 28px;
    background: var(--gold);
    color: #011532;
    border: none;
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}
.roses-empty-btn:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(200,169,110,0.25);
}
.roses-empty-link {
    color: var(--gold);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(200,169,110,0.3);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
.roses-empty-link:hover {
    color: var(--gold-light);
    border-color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════
   THEME TOGGLE — all styles applied via JS (theme.js)
   ═══════════════════════════════════════════════════════ */

/* Theme transition on all elements */
body, body * {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

/* Exclude elements that need their own transition timing */
.v2-reveal, img, video {
    transition: revert;
}
/* Toggle transition handled entirely by inline JS styles */

/* ═══════════════════════════════════════════════════════
   FILTER ANIMATIONS (for rose cards)
   ═══════════════════════════════════════════════════════ */
.v2-rose-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.35s ease,
                scale 0.35s ease;
}

.v2-rose-card.card-hiding {
    opacity: 0;
    scale: 0.92;
    pointer-events: none;
}

.v2-rose-card.card-showing {
    opacity: 0;
    scale: 0.92;
}

.v2-rose-card.card-visible {
    opacity: 1;
    scale: 1;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .v2-timeline-chapter {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .v2-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    .v2-rose-detail-grid {
        grid-template-columns: 1fr;
    }
    .v2-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .roses-grid-dynamic,
    .roses-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
}

/* Legacy markup safety — hide any stray old mobile elements */
.v2-mobile-head, .v2-mobile-foot { display: none !important; }

/* ═══════════════════════════════════════════════════════
   ROYAL MOBILE NAVIGATION (mnav-*)
   Completely separate from desktop <nav>. Slide-in panel with
   <button> accordion triggers so no accidental link navigation.
   ═══════════════════════════════════════════════════════ */

/* Hamburger toggle (only visible on mobile) */
.mnav-toggle {
    display: none;
    position: relative;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
    padding: 0; margin-left: 8px;
    z-index: 10001;
}
.mnav-toggle span {
    display: block;
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 24px; height: 1.2px;
    background: var(--gold-light, #dfc298);
    transition: all 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.mnav-toggle span:nth-child(1) { top: 16px; }
.mnav-toggle span:nth-child(2) { top: 22px; width: 16px; }
.mnav-toggle span:nth-child(3) { top: 28px; }
.mnav-toggle.is-open span:nth-child(1) {
    top: 22px; transform: translateX(-50%) rotate(45deg);
}
.mnav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mnav-toggle.is-open span:nth-child(3) {
    top: 22px; transform: translateX(-50%) rotate(-45deg);
}

/* Slide-in panel */
.mnav-panel {
    display: none;
    position: fixed;
    top: 0; right: -100%;
    width: min(85vw, 420px);
    height: 100vh; height: 100dvh;
    background:
        radial-gradient(ellipse 600px 200px at 100% 0%, rgba(200,169,110,0.08) 0%, transparent 70%),
        linear-gradient(180deg, #011532 0%, #020b1e 60%, #050914 100%);
    z-index: 10000;
    flex-direction: column;
    transition: right 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    overflow: hidden;
    box-shadow: -30px 0 80px rgba(0,0,0,0.5);
}
.mnav-panel.open { right: 0; }
.mnav-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.6) 50%, transparent);
}

.mnav-scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(3,8,18,0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
}
.mnav-scrim.open { opacity: 1; pointer-events: auto; }

.mnav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(200,169,110,0.18);
    flex-shrink: 0;
    position: relative;
}
.mnav-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 1px;
    background: var(--gold, #d4af6e);
    opacity: 0.5;
}
.mnav-logo-link img {
    height: 32px; width: auto; display: block;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.mnav-close {
    width: 40px; height: 40px;
    background: rgba(200,169,110,0.04);
    border: 1px solid rgba(200,169,110,0.3);
    border-radius: 50%;
    color: var(--gold-light, #dfc298);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.mnav-close:hover {
    background: rgba(200,169,110,0.12);
    border-color: var(--gold, #d4af6e);
    transform: rotate(90deg);
}
.mnav-close svg { width: 14px; height: 14px; }

.mnav-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 32px;
}

.mnav-section-label {
    font-family: var(--sans);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold, #d4af6e);
    padding: 28px 28px 14px;
    position: relative;
    display: flex; align-items: center; gap: 14px;
}
.mnav-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(200,169,110,0.3), transparent);
}

/* Top-level link + dropdown trigger */
.mnav-link,
.mnav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 28px;
    background: none;
    border: none;
    text-decoration: none;
    color: rgba(255,255,255,0.92);
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 300;
    letter-spacing: 0.005em;
    border-bottom: 1px solid rgba(200,169,110,0.08);
    cursor: pointer;
    transition: color 0.3s ease, padding-left 0.3s ease, background 0.3s ease;
    position: relative;
    text-align: left;
    font-family: 'ITC Berkeley Oldstyle', 'Libre Baskerville', Georgia, serif;
}
.mnav-link::before,
.mnav-trigger::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 2px;
    background: var(--gold, #d4af6e);
    transform: scaleY(0);
    transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
    transform-origin: center;
}
.mnav-link:active::before,
.mnav-link:focus::before,
.mnav-trigger:active::before,
.mnav-group.open .mnav-trigger::before {
    transform: scaleY(1);
}
.mnav-link:active,
.mnav-link:focus,
.mnav-trigger:active,
.mnav-group.open .mnav-trigger {
    color: var(--gold-light, #dfc298);
    padding-left: 34px;
    background: linear-gradient(90deg, rgba(200,169,110,0.06), transparent);
}

.mnav-chev {
    width: 14px; height: 14px;
    color: var(--gold, #d4af6e);
    opacity: 0.8;
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
    flex-shrink: 0;
    margin-left: 14px;
}
.mnav-group.open .mnav-chev { transform: rotate(180deg); }

/* Accordion submenu */
.mnav-sub {
    max-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(200,169,110,0.03) 100%);
    transition: max-height 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.mnav-group.open .mnav-sub {
    max-height: 700px;
    border-bottom: 1px solid rgba(200,169,110,0.12);
}
.mnav-sub-link {
    display: block;
    padding: 14px 28px 14px 48px;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.68);
    text-decoration: none;
    border-bottom: 1px solid rgba(200,169,110,0.06);
    transition: color 0.25s ease, padding-left 0.25s ease, background 0.25s ease;
    position: relative;
}
.mnav-sub-link::before {
    content: '';
    position: absolute;
    left: 28px; top: 50%;
    width: 8px; height: 1px;
    background: rgba(200,169,110,0.3);
    transform: translateY(-50%);
    transition: width 0.25s ease;
}
.mnav-sub-link:active::before { width: 14px; background: var(--gold, #d4af6e); }
.mnav-sub-link:last-child { border-bottom: none; }
.mnav-sub-link:active {
    color: var(--gold-light, #dfc298);
    background: rgba(200,169,110,0.06);
    padding-left: 56px;
}
.mnav-sub-all {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--gold, #d4af6e);
    letter-spacing: 0.22em;
    font-size: 0.66rem;
    padding-top: 16px;
    padding-bottom: 16px;
    background: rgba(200,169,110,0.05);
}
.mnav-sub-all::before { background: var(--gold, #d4af6e); width: 14px; }

/* Search button (premium style) */
.mnav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: calc(100% - 56px);
    margin: 30px 28px 8px;
    padding: 16px 20px;
    background: rgba(200,169,110,0.06);
    border: 1px solid rgba(200,169,110,0.3);
    color: rgba(255,255,255,0.9);
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}
.mnav-search-btn:active {
    background: rgba(200,169,110,0.15);
    border-color: var(--gold, #d4af6e);
    color: var(--gold-light, #dfc298);
}
.mnav-search-btn svg { width: 16px; height: 16px; color: var(--gold, #d4af6e); }

/* Language grid */
.mnav-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 28px 36px;
}
.mnav-lang-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(200,169,110,0.15);
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    font-family: var(--sans);
    transition: all 0.25s ease;
    text-align: left;
}
.mnav-lang-chip:active {
    background: rgba(200,169,110,0.1);
    border-color: rgba(200,169,110,0.45);
    color: var(--gold-light, #dfc298);
}
.mnav-lang-chip.active {
    background: rgba(200,169,110,0.14);
    border-color: var(--gold, #d4af6e);
    color: var(--gold-light, #dfc298);
}
.mnav-lang-code {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--gold, #d4af6e);
    min-width: 22px;
}
.mnav-lang-name {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* ── Viewport rules ──
   Hamburger kicks in at ≤1100px. The desktop nav has 7 items +
   dropdown markers + search/lang/theme chrome and stops fitting
   cleanly below ~1100px (Cut Roses + Garden Roses + About each
   need ~110-130px including the chevron). Below that we bail
   straight to the hamburger panel rather than letting items
   collide. */
@media (max-width: 1100px) {
    .mnav-toggle { display: flex; }
    .mnav-panel { display: flex; }
    .mnav-scrim { display: block; }
    /* Force old desktop items off on mobile (belt & suspenders) */
    .v2-nav-links { display: none !important; }
    .v2-search-trigger { display: none !important; }
    .v2-lang { display: none !important; }
    .v2-nav { padding: 0 20px !important; background: rgba(5,10,20,0.95) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    html[data-theme="light"] .v2-nav { background: rgba(250,246,239,0.98) !important; }
    html[data-theme="light"] .mnav-toggle span { background: #011532 !important; }
    html[data-theme="light"] .mnav-sub {
        background: rgba(255,255,255,0.95) !important;
    }
    html[data-theme="light"] .mnav-group.open .mnav-sub {
        border-bottom-color: rgba(1,21,50,0.08) !important;
    }
    html[data-theme="light"] .mnav-sub-link {
        color: #011532 !important;
        border-bottom-color: rgba(1,21,50,0.05) !important;
    }
    html[data-theme="light"] .mnav-sub-link::before {
        background: rgba(1,21,50,0.2) !important;
    }
    html[data-theme="light"] .mnav-sub-link:active {
        color: #8a6a2c !important;
        background: rgba(200,169,110,0.08) !important;
    }
    html[data-theme="light"] .mnav-close {
        background: rgba(1, 21, 50, 0.08) !important;
        border-color: rgba(1, 21, 50, 0.2) !important;
        color: #011532 !important;
    }
    html[data-theme="light"] .mnav-close svg {
        stroke: #011532 !important;
    }
    html[data-theme="light"] .mnav-panel {
        background: linear-gradient(180deg, #ffffff 0%, #faf6ef 60%, #f3ece0 100%) !important;
    }
    html[data-theme="light"] .mnav-link,
    html[data-theme="light"] .mnav-trigger {
        color: #011532 !important;
    }
    html[data-theme="light"] .mnav-trigger .mnav-chev {
        stroke: #011532 !important;
    }
    html[data-theme="light"] .mnav-section-label {
        color: rgba(1, 21, 50, 0.4) !important;
    }
    html[data-theme="light"] .mnav-logo-link img {
        filter: none !important;
    }
    .v2-nav-toggle { display: none !important; }
}

@media (max-width: 768px) {
    .v2-section { padding: 80px 24px; }
    .v2-page-hero-content { padding: 0 24px 40px; }
    /* Het gouden streepje voor het bovenschrift ("CUT ROSES") duwde de tekst
       op de telefoon zo'n 56 pixels naar rechts, waardoor hij naast de titel
       kwam te hangen in plaats van eronder. Op een klein scherm gaat het
       streepje eruit en staat het bovenschrift gewoon links, gelijk met de
       titel. Op de laptop blijft het streepje staan. */
    .v2-page-hero-content .v2-section-label { gap: 0; }
    .v2-page-hero-content .v2-section-label::before { display: none; }

    .v2-timeline-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px 8px;
        padding: 0;
        margin-bottom: 48px;
        justify-content: stretch;
    }
    .v2-timeline-nav::before { display: none; }
    .v2-timeline-period {
        flex: none;
        padding: 12px 8px;
        border: 1px solid var(--dark-border);
        border-radius: 999px;
        background: var(--dark-card);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        transition: all 0.3s ease;
    }
    .v2-timeline-period.active,
    .v2-timeline-period:hover {
        border-color: var(--gold);
        background: rgba(200, 169, 110, 0.08);
    }
    .v2-timeline-dot {
        width: 8px;
        height: 8px;
        margin: 0;
        flex-shrink: 0;
    }
    .v2-timeline-label {
        font-size: 0.68rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }
    .v2-timeline-year {
        font-size: 1.8rem;
        margin-bottom: 28px;
        padding-bottom: 16px;
    }

    .v2-timeline-chapter {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .v2-cards-grid {
        grid-template-columns: 1fr;
    }

    .v2-rose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-rose-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .v2-footer { padding: 60px 24px 30px; }
    .v2-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .v2-footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .v2-page-nav {
        flex-direction: column;
        gap: 16px;
    }

    .v2-page-nav a {
        width: 100%;
        justify-content: center;
    }

    .roses-grid-dynamic,
    .roses-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .v2-rose-grid {
        grid-template-columns: 1fr;
    }
    .v2-page-hero {
        min-height: 40vh;
    }
    .v2-rose-detail-info h1 {
        font-size: 1.8rem;
    }
    .v2-rose-detail-meta {
        grid-template-columns: 1fr;
    }
    .roses-grid-dynamic,
    .roses-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .rose-card-name {
        font-size: 1rem;
    }
    .v2-about-stats {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .v2-stat-number {
        font-size: 2rem;
    }
    .v2-stat-label {
        font-size: 0.75rem;
    }
    .v2-tagline h2 {
        font-size: 0.9rem;
    }
    .v2-tagline-sub span {
        font-size: 0.6rem;
    }
}

/* ═══════════════════════════════════════════════════════
   LIGHT THEME — temporary overrides (toggleable via nav)
   Activates on <html data-theme="light">. Flips the CSS
   variables to cream/navy; preserves gold brand accents.
   ═══════════════════════════════════════════════════════ */
html[data-theme="light"] {
    --black: #faf6ef;
    --dark: #ffffff;
    --dark-surface: #f3ece0;
    --dark-card: #ffffff;
    --dark-border: #d9c9a9;
    --text: #011532;
    --text-muted: #4a5a74;
    --text-dim: #8999ad;
    /* Remap gold tones so color:var(--gold*) references stay readable
       on cream. Brand gold (#d4af6e) is still used for backgrounds
       and borders via literal hex in targeted overrides below. */
    --gold: #8a6a2c;
    --gold-light: #6d5320;
    --gold-dark: #4d3a13;
    --nav-bg: rgba(250, 246, 239, 0.9);
    --nav-bg-solid: #faf6ef;
    --dropdown-bg: rgba(255, 255, 255, 0.98);
    --mobile-menu-bg: rgba(250, 246, 239, 0.98);
    --overlay-gradient: none;
    --card-shadow: 0 2px 12px rgba(1, 21, 50, 0.08);
    --card-hover-shadow: 0 16px 48px rgba(1, 21, 50, 0.18);
    --logo-filter: brightness(1);
    --nav-link-color: rgba(1, 21, 50, 0.8);
    --btn-outline-border: rgba(1, 21, 50, 0.3);
    --rose-overlay: linear-gradient(0deg, rgba(250,246,239,0.85) 0%, transparent 50%);
    --rose-overlay-hover: linear-gradient(0deg, rgba(250,246,239,0.95) 0%, rgba(250,246,239,0.2) 100%);
    --splash-bg: #faf6ef;
    --splash-logo-filter: drop-shadow(0 0 40px rgba(200, 169, 110, 0.35));
    background: var(--black);
    color: var(--text);
}

html[data-theme="light"] body {
    background: var(--black);
    color: var(--text);
}

/* Nav + dropdowns pick up the vars, but a few spots use hardcoded
   rgba/black values — override them here. */
html[data-theme="light"] .v2-nav {
    border-bottom: 1px solid rgba(1, 21, 50, 0.08);
}
html[data-theme="light"] .v2-nav.scrolled,
html[data-theme="light"] .v2-nav.v2-nav-solid {
    border-bottom: 1px solid rgba(1, 21, 50, 0.1);
    box-shadow: 0 1px 24px rgba(1, 21, 50, 0.06);
}

/* Desktop dropdown blijft in light mode óók het premium navy glaspaneel
   (zie basisregels hierboven) — bewust GEEN witte override meer. */
html[data-theme="light"] .mnav-panel {
    background: #ffffff;
    border: 1px solid rgba(1, 21, 50, 0.08);
    box-shadow: 0 10px 40px rgba(1, 21, 50, 0.12);
}

html[data-theme="light"] .mnav-panel {
    background:
        radial-gradient(ellipse 600px 200px at 100% 0%, rgba(200,169,110,0.12) 0%, transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #faf6ef 60%, #f3ece0 100%);
}

/* Navy-on-white text for the MOBILE panel links in light mode.
   (Desktop .v2-dropdown-menu is nu een navy glaspaneel → links blijven licht,
   gestyled door de basisregels; niet hier overschrijven.) */
html[data-theme="light"] .mnav-sub-link,
html[data-theme="light"] .mnav-trigger {
    color: var(--text);
}

/* Buttons that used white text on dark need navy text on light */
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .v2-btn-outline {
    color: var(--text);
    border-color: var(--btn-outline-border);
}

/* Rose cards / dot-circles backgrounds */
html[data-theme="light"] .rose-card,
html[data-theme="light"] .v2-rose-card,
html[data-theme="light"] .roses-gallery-card {
    background: var(--dark-card);
    box-shadow: var(--card-shadow);
}
html[data-theme="light"] .rose-card:hover,
html[data-theme="light"] .v2-rose-card:hover {
    box-shadow: var(--card-hover-shadow);
}

/* .v2-page-hero stays dark in light mode: it has a photo + dark
   overlay, and white text rides over. Do not flip to cream. */

/* Footer (if footer uses dark bg) */
html[data-theme="light"] footer,
html[data-theme="light"] .v2-footer {
    background: var(--dark-surface);
    color: var(--text);
    border-top: 1px solid rgba(1, 21, 50, 0.08);
}

/* Theme toggle pill in nav */
.v2-tp {
    display: none !important;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--btn-outline-border);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--nav-link-color);
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.05em;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-left: 12px;
}
.v2-tp:hover { background: rgba(200, 169, 110, 0.12); color: var(--gold-light); border-color: var(--gold); }
.v2-tp svg { width: 14px; height: 14px; }
html[data-theme="light"] .v2-tp:hover { color: var(--gold-dark); }

@media (max-width: 768px) {
    .v2-tp { display: none; }
}

/* === AUTO-GENERATED LIGHT OVERRIDES (gen-light-overrides.py) === */
/* Regenerated by scripts/gen-light-overrides.py.
   Do not edit by hand — rerun the script to refresh. */

html[data-theme="light"] .agent-card .agent-info-item,
html[data-theme="light"] .agent-card h3,
html[data-theme="light"] .agents-header p,
html[data-theme="light"] .contact-block a,
html[data-theme="light"] .contact-block p,
html[data-theme="light"] .contact-form-wrap > p,
html[data-theme="light"] .contact-form-wrap h3,
html[data-theme="light"] .contact-hero h1,
html[data-theme="light"] .contact-hero p,
html[data-theme="light"] .contact-info > p,
html[data-theme="light"] .contact-info h2,
html[data-theme="light"] .country-select,
html[data-theme="light"] .country-select optgroup,
html[data-theme="light"] .country-select option,
html[data-theme="light"] .form-consent,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group select option,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .gallery-hero-content h1,
html[data-theme="light"] .gallery-hero-content p,
html[data-theme="light"] .gallery-row-header h2,
html[data-theme="light"] .jsr-mob-card-name,
html[data-theme="light"] .jsr-stage-cta:hover,
html[data-theme="light"] .jsr-stage-name,
html[data-theme="light"] .login-card-header h2,
html[data-theme="light"] .login-demo code,
html[data-theme="light"] .marquee-card-info h3,
html[data-theme="light"] .mnav-lang-chip,
html[data-theme="light"] .mnav-link,
html[data-theme="light"] .mnav-search-btn,
html[data-theme="light"] .mnav-trigger,
html[data-theme="light"] .news-card h3,
html[data-theme="light"] .news-card p,
html[data-theme="light"] .news-external h3,
html[data-theme="light"] .news-external p,
html[data-theme="light"] .news-hero h1,
html[data-theme="light"] .news-hero p,
html[data-theme="light"] .nf-btn--ghost:hover,
html[data-theme="light"] .nf-title,
html[data-theme="light"] .nx-about-stat-txt,
html[data-theme="light"] .nx-btn-ghost,
html[data-theme="light"] .nx-catalogue-title,
html[data-theme="light"] .nx-col-card-content h3,
html[data-theme="light"] .nx-editorial-content p,
html[data-theme="light"] .nx-footer,
html[data-theme="light"] .nx-footer-bottom p,
html[data-theme="light"] .nx-footer-brand p,
html[data-theme="light"] .nx-footer-col a,
html[data-theme="light"] .nx-footer-col a:hover,
html[data-theme="light"] .nx-footer-col h4,
html[data-theme="light"] .nx-footer-col p,
html[data-theme="light"] .nx-heading,
html[data-theme="light"] .nx-hero h1,
html[data-theme="light"] .nx-insta-tile-overlay,
html[data-theme="light"] .nx-marquee-track span,
html[data-theme="light"] .nx-news-card-body h3,
html[data-theme="light"] .nx-testimonial-quote,
html[data-theme="light"] .nx-testimonial-role,
html[data-theme="light"] .nx-video-cover,
html[data-theme="light"] .nx-video-notice,
html[data-theme="light"] .portal-contact-name,
html[data-theme="light"] .portal-dl-name,
html[data-theme="light"] .portal-footer p,
html[data-theme="light"] .portal-section-title,
html[data-theme="light"] .portal-title,
html[data-theme="light"] .rd-btn-outline,
html[data-theme="light"] .rd-btn-outline:hover,
html[data-theme="light"] .rd-contact-box a,
html[data-theme="light"] .rd-contact-box p,
html[data-theme="light"] .rd-continent-badge,
html[data-theme="light"] .rd-note,
html[data-theme="light"] .rd-spec-value,
html[data-theme="light"] .rd-specs-card h3,
html[data-theme="light"] .rd-title,
html[data-theme="light"] .rd-wrapper,
html[data-theme="light"] .rose-card-name,
html[data-theme="light"] .rose-category-badge,
html[data-theme="light"] .sr-card-name,
html[data-theme="light"] .sr-filter-tag-remove,
html[data-theme="light"] .sr-filter-tag-remove:hover,
html[data-theme="light"] .sr-recent-item,
html[data-theme="light"] .sr-recent-item:hover,
html[data-theme="light"] .sr-title,
html[data-theme="light"] .tp-clear,
html[data-theme="light"] .tp-clear:hover,
html[data-theme="light"] .tp-name,
html[data-theme="light"] .tp-sel,
html[data-theme="light"] .tp-title,
html[data-theme="light"] .v2-btn-outline,
html[data-theme="light"] .v2-card h3,
html[data-theme="light"] .v2-collection-card-content h3,
html[data-theme="light"] .v2-collection-card-content p,
html[data-theme="light"] .v2-featured-text h3,
html[data-theme="light"] .v2-featured-text p,
html[data-theme="light"] .v2-lang-btn,
html[data-theme="light"] .v2-nav-logo-text,
html[data-theme="light"] .v2-nav.mobile-open .v2-dropdown-menu a,
html[data-theme="light"] .v2-nav.mobile-open .v2-dropdown-toggle,
html[data-theme="light"] .v2-nav.mobile-open .v2-nav-links > li > a,
html[data-theme="light"] .v2-review-quote,
html[data-theme="light"] .v2-review-role,
html[data-theme="light"] .v2-rose-card-content h3,
html[data-theme="light"] .v2-rose-card-content p,
html[data-theme="light"] .v2-rose-detail-info h1,
html[data-theme="light"] .v2-scroll-indicator span,
html[data-theme="light"] .v2-search-trigger,
html[data-theme="light"] .v2-section-title,
html[data-theme="light"] .v2-signature .sig-name,
html[data-theme="light"] .v2-tagline h2,
html[data-theme="light"] .v2-testimonial-card h3,
html[data-theme="light"] .v2-tp-icon--moon,
html[data-theme="light"] .view-btn.active {
    color: #011532;
}

html[data-theme="light"] .about-page .about-lead,
html[data-theme="light"] .about-page h1,
html[data-theme="light"] .about-page h2,
html[data-theme="light"] .agent-placeholder,
html[data-theme="light"] .cat-dot-label,
html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder,
html[data-theme="light"] .jsr-stage-pill-label,
html[data-theme="light"] .jsr-stage-pill.is-active .jsr-stage-pill-label,
html[data-theme="light"] .jsr-stage-pill:hover .jsr-stage-pill-label,
html[data-theme="light"] .legal-page h1,
html[data-theme="light"] .legal-page h2,
html[data-theme="light"] .legal-page h3,
html[data-theme="light"] .legal-page strong,
html[data-theme="light"] .mnav-sub-link,
html[data-theme="light"] .nf-btn--primary:hover,
html[data-theme="light"] .rd-crumb a,
html[data-theme="light"] .rd-crumb a:hover,
html[data-theme="light"] .rd-description,
html[data-theme="light"] .rd-pn-name,
html[data-theme="light"] .rd-spec-label,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .tp-sub,
html[data-theme="light"] .v2-page-hero-content h1,
html[data-theme="light"] .v2-page-hero-content p {
    color: #4a5a74;
}

/* === END AUTO-GENERATED LIGHT OVERRIDES === */

/* Rose detail breadcrumb sits on the navy hero — override the
   auto-generated dark colour back to light so it stays readable. */
html[data-theme="light"] .rd-crumb,
html[data-theme="light"] .rd-crumb a {
    color: rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="light"] .rd-crumb a:hover { color: #dfc298 !important; }

/* Breathing room between every page-hero and the filter / region bar
   directly beneath it. Without this the cream filter strip sits flush
   against the dark hero, which reads as cramped. */
.rose-filter-bar,
.region-filters-text {
    margin-top: 28px;
}
@media (max-width: 700px) {
    .rose-filter-bar,
    .region-filters-text { margin-top: 18px; }
}

/* ── Manual light-mode overrides (backgrounds + filters) ── */

/* Flip any element using the brightness(0) invert(1) hack to show
   its original colors in light mode. Covers both CSS rules and
   inline style attributes across the whole site. */
html[data-theme="light"] .mnav-logo-link img,
html[data-theme="light"] .navbar.admin-nav .nav-logo-img,
html[data-theme="light"] img[style*="invert(1)"] {
    filter: none !important;
}
html[data-theme="light"] .v2-nav-logo .logo-base {
    filter: drop-shadow(0 0 8px rgba(200, 169, 110, 0.3)) !important;
}

/* Hardcoded dark backgrounds that appear behind user text anywhere —
   flip to cream/white so text is readable. Targeted at the most
   common surface utility classes. */
html[data-theme="light"] .v2-rose-detail,
html[data-theme="light"] .v2-rose-detail-info,
html[data-theme="light"] .v2-rose-card,
html[data-theme="light"] .v2-collection-card,
html[data-theme="light"] .v2-featured,
html[data-theme="light"] .v2-featured-text,
html[data-theme="light"] .v2-review,
html[data-theme="light"] .v2-specs,
html[data-theme="light"] .nx-editorial,
html[data-theme="light"] .nx-testimonial,
html[data-theme="light"] .nx-about,
html[data-theme="light"] .nx-marquee,
html[data-theme="light"] .news-card,
html[data-theme="light"] .news-external,
html[data-theme="light"] .agent-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .contact-block,
html[data-theme="light"] .contact-form-wrap,
html[data-theme="light"] .portal-section,
html[data-theme="light"] .tp-sel,
html[data-theme="light"] .stat-card {
    background: #ffffff !important;
    color: var(--text);
}

/* Footer — keep navy in light mode (brand consistency) */
html[data-theme="light"] .nx-footer,
html[data-theme="light"] footer.nx-footer {
    background: linear-gradient(180deg, #011532 0%, #07254B 100%) !important;
    color: rgba(255,255,255,0.8);
    border-top: 1px solid rgba(200, 169, 110, 0.2);
}
html[data-theme="light"] .nx-footer * { color: rgba(255,255,255,0.8) !important; }
html[data-theme="light"] .nx-footer h4 { color: #ffffff !important; }
html[data-theme="light"] .nx-footer a { color: rgba(255,255,255,0.7) !important; }
html[data-theme="light"] .nx-footer a:hover { color: #d4af6e !important; }
html[data-theme="light"] .nx-footer-brand img { filter: brightness(0) invert(1) !important; }
html[data-theme="light"] .nx-footer-bottom p { color: rgba(255,255,255,0.5) !important; }

/* Login / portal / 404 full-page dark backgrounds */
html[data-theme="light"] .login-body,
html[data-theme="light"] .portal-body,
html[data-theme="light"] .nf-page {
    background: #faf6ef !important;
    color: var(--text);
}

/* Form inputs */
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea {
    background: #ffffff !important;
    color: var(--text) !important;
    border-color: rgba(1, 21, 50, 0.18) !important;
}
html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder {
    color: rgba(1, 21, 50, 0.4) !important;
}

/* Gold-on-dark buttons become dark-gold-on-cream — ensure contrast */
html[data-theme="light"] .v2-btn-primary,
html[data-theme="light"] .rd-btn-primary,
html[data-theme="light"] .nf-btn--primary,
html[data-theme="light"] .roses-empty-btn,
html[data-theme="light"] .v2-hero-btn--primary {
    /* Zelfde goud met donkerblauwe tekst als Explore Collection, Download PDF
       en Find your agent (15-10-2026). Was donkerbrons met witte tekst, en
       naast de gouden knoppen zag dat er rommelig uit, vooral op mobiel. */
    background: #c8a96e !important;
    border-color: #c8a96e !important;
    color: #011532 !important;
}
html[data-theme="light"] .v2-btn-primary:hover,
html[data-theme="light"] .rd-btn-primary:hover,
html[data-theme="light"] .nf-btn--primary:hover,
html[data-theme="light"] .v2-hero-btn--primary:hover {
    background: #dfc298 !important;
    border-color: #dfc298 !important;
    color: #011532 !important;
}

/* ═══════════════════════════════════════════════════════
   Section-level dark background flips (light mode)
   ═══════════════════════════════════════════════════════ */

/* Collection/gallery pages (garden-roses.html, cut-roses.html, etc.) */
html[data-theme="light"] .gallery-section {
    background: #faf6ef !important;
}
html[data-theme="light"] .cat-dots {
    background: #faf6ef !important;
    border-bottom-color: rgba(1, 21, 50, 0.08) !important;
}
html[data-theme="light"] .cat-dot-img {
    background: none !important;
    border-color: transparent !important;
}
html[data-theme="light"] .marquee-card {
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(1, 21, 50, 0.08);
}
html[data-theme="light"] .marquee-card img { filter: none !important; }
html[data-theme="light"] .marquee-card-info {
    background: linear-gradient(transparent, rgba(250,246,239,0.95)) !important;
}
html[data-theme="light"] .marquee-card-info h3 { color: #011532 !important; }
html[data-theme="light"] .gallery-row-header h2 { color: #011532 !important; }
html[data-theme="light"] .gallery-row-header span { color: #4a5a74 !important; }

/* News page — keep the boutique navy world in both themes
   (same approach as /contact). */
html[data-theme="light"] .news-section {
    background: #011532 !important;
}
html[data-theme="light"] .news-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(200, 169, 110, 0.22) !important;
}
html[data-theme="light"] .news-card h3,
html[data-theme="light"] .news-card-body h3,
html[data-theme="light"] .news-external h3 { color: #ffffff !important; }
html[data-theme="light"] .news-card p,
html[data-theme="light"] .news-card-body p,
html[data-theme="light"] .news-external p { color: rgba(255, 255, 255, 0.78) !important; }
html[data-theme="light"] .news-card .meta,
html[data-theme="light"] .news-card-body .meta,
html[data-theme="light"] .news-external .meta { color: rgba(255, 255, 255, 0.55) !important; }
html[data-theme="light"] .news-external {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(200, 169, 110, 0.22) !important;
}

/* Contact page */
html[data-theme="light"] .contact-section,
html[data-theme="light"] .contact-info,
html[data-theme="light"] .contact-block,
html[data-theme="light"] .contact-form-wrap {
    background: #ffffff !important;
    color: #011532 !important;
}
html[data-theme="light"] .contact-info h2,
html[data-theme="light"] .contact-info h1,
html[data-theme="light"] .contact-info > p,
html[data-theme="light"] .contact-block h3,
html[data-theme="light"] .contact-block p,
html[data-theme="light"] .contact-block a,
html[data-theme="light"] .contact-form-wrap h3,
html[data-theme="light"] .contact-form-wrap > p,
html[data-theme="light"] .section-title,
html[data-theme="light"] .contact-text { color: #011532 !important; }

/* About page */
html[data-theme="light"] .about-page {
    background: #faf6ef !important;
    color: #011532 !important;
}
html[data-theme="light"] .about-page h1,
html[data-theme="light"] .about-page h2,
html[data-theme="light"] .about-page p,
html[data-theme="light"] .about-page .about-lead { color: #011532 !important; }

/* Landing page: cream sections */
html[data-theme="light"] .v2-collections,
html[data-theme="light"] .v2-about,
html[data-theme="light"] .v2-news,
html[data-theme="light"] .v2-featured,
html[data-theme="light"] .nx-insta {
    background: #faf6ef !important;
    color: #011532 !important;
}
html[data-theme="light"] .v2-section-title,
html[data-theme="light"] .nx-heading { color: #011532 !important; }

/* Landing page: NAVY accent sections (brand contrast blocks) */
html[data-theme="light"] .v2-tagline {
    background: radial-gradient(ellipse at center, #07254B 0%, #011532 100%) !important;
    color: #ffffff !important;
    border-color: rgba(200, 169, 110, 0.25) !important;
}
html[data-theme="light"] .v2-tagline h2 { color: #ffffff !important; }
html[data-theme="light"] .v2-tagline-sub span { color: #d4af6e !important; }

html[data-theme="light"] .v2-reviews {
    background: linear-gradient(180deg, #011532 0%, #07254B 100%) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .v2-review-quote { color: #ffffff !important; }
html[data-theme="light"] .v2-review-role { color: rgba(255,255,255,0.6) !important; }

html[data-theme="light"] .v2-catalogue,
html[data-theme="light"] .nx-catalogue {
    background: linear-gradient(135deg, #011532 0%, #08203f 100%) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .nx-catalogue-title,
html[data-theme="light"] .v2-catalogue-title { color: #ffffff !important; }
html[data-theme="light"] .nx-catalogue-title em,
html[data-theme="light"] .v2-catalogue-title em { color: var(--gold-italic) !important; }
html[data-theme="light"] .nx-catalogue-eyebrow { color: #dfc298 !important; }
html[data-theme="light"] .nx-catalogue-desc { color: #ffffff !important; }
html[data-theme="light"] .nx-catalogue .nx-btn-gold,
html[data-theme="light"] .v2-catalogue .nx-btn-gold {
    background: #d4af6e !important;
    color: #011532 !important;
}

html[data-theme="light"] .nx-marquee {
    background: #07254B !important;
}
html[data-theme="light"] .nx-marquee-track span { color: rgba(255,255,255,0.85) !important; }

/* Legal pages */
html[data-theme="light"] .legal-page {
    background: #faf6ef !important;
    color: #011532 !important;
}

/* Agent directory cards */
html[data-theme="light"] .agent-card h3,
html[data-theme="light"] .agent-card .agent-info-item { color: #011532 !important; }

/* ═══════════════════════════════════════════════════════
   Hero sections: PRESERVE white text in light mode.
   Each hero page-level CSS already stacks a dark gradient
   over the photo, so we only need to force text colors.
   Do NOT override `background` here — that would hide the
   image behind a flat gradient.
   ═══════════════════════════════════════════════════════ */
html[data-theme="light"] .gallery-hero-content h1,
html[data-theme="light"] .gallery-hero-content p,
html[data-theme="light"] .news-hero h1,
html[data-theme="light"] .news-hero p,
html[data-theme="light"] .contact-hero h1,
html[data-theme="light"] .contact-hero p,
html[data-theme="light"] .nx-hero h1,
html[data-theme="light"] .nx-hero p,
html[data-theme="light"] .v2-hero h1,
html[data-theme="light"] .v2-hero p,
html[data-theme="light"] .v2-page-hero-content h1,
html[data-theme="light"] .v2-page-hero-content p,
html[data-theme="light"] .v2-page-hero-content .v2-section-label { color: #ffffff !important; }
html[data-theme="light"] .news-hero p,
html[data-theme="light"] .contact-hero p,
html[data-theme="light"] .gallery-hero-content p,
html[data-theme="light"] .v2-page-hero-content p { color: rgba(255,255,255,0.78) !important; }

/* Landing hero scroll indicator / tagline extras */
html[data-theme="light"] .v2-scroll-indicator span { color: rgba(255,255,255,0.8) !important; }

/* ═══════════════════════════════════════════════════════
   Nav bar: top nav is now navy in BOTH themes, so the
   search icon, language switcher, theme toggle and mobile
   triggers must always render in white — earlier rules
   forced them navy in light theme, which left them
   invisible on the navy nav strip (blue-on-blue).
   ═══════════════════════════════════════════════════════ */
.v2-search-trigger,
html[data-theme="light"] .v2-search-trigger,
.v2-lang-btn,
html[data-theme="light"] .v2-lang-btn,
.v2-tp,
html[data-theme="light"] .v2-tp,
.mnav-search-btn,
html[data-theme="light"] .mnav-search-btn,
.mnav-lang-chip,
html[data-theme="light"] .mnav-lang-chip,
.mnav-trigger,
html[data-theme="light"] .mnav-trigger {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(212, 175, 110, 0.32) !important;
}
.v2-search-trigger svg,
html[data-theme="light"] .v2-search-trigger svg,
.v2-lang-btn svg,
html[data-theme="light"] .v2-lang-btn svg,
.v2-tp svg,
html[data-theme="light"] .v2-tp svg,
.mnav-search-btn svg,
html[data-theme="light"] .mnav-search-btn svg,
.mnav-trigger svg,
html[data-theme="light"] .mnav-trigger svg {
    color: rgba(255, 255, 255, 0.85) !important;
    stroke: rgba(255, 255, 255, 0.9) !important;
    fill: none !important;
    opacity: 1 !important;
}
.v2-search-trigger:hover,
html[data-theme="light"] .v2-search-trigger:hover,
.v2-lang-btn:hover,
html[data-theme="light"] .v2-lang-btn:hover,
.v2-tp:hover,
html[data-theme="light"] .v2-tp:hover {
    color: #eebd5b !important;
    border-color: rgba(212, 175, 110, 0.6) !important;
    background: rgba(212, 175, 110, 0.1) !important;
}
.v2-search-trigger:hover svg,
html[data-theme="light"] .v2-search-trigger:hover svg,
.v2-lang-btn:hover svg,
html[data-theme="light"] .v2-lang-btn:hover svg,
.v2-tp:hover svg,
html[data-theme="light"] .v2-tp:hover svg {
    color: #eebd5b !important;
    stroke: #eebd5b !important;
}
/* Theme-pill icons: sun-icon solid fill vs moon outline */
html[data-theme="light"] .v2-tp-icon--sun,
html[data-theme="light"] .v2-tp-icon--moon { color: #011532 !important; }

/* Download/catalogue section text — solid white over the navy
   download block; .nx-catalogue-desc kept above as plain white. */
html[data-theme="light"] .nx-catalogue-eyebrow,
html[data-theme="light"] .v2-catalogue-desc { color: #4a5a74 !important; }

/* Download brochure card used in cut-roses.html — inline style overrides
   with specific selector targeting the hardcoded dark section */
html[data-theme="light"] .download-section,
html[data-theme="light"] .v2-brochure {
    background: #faf6ef !important;
    color: #011532 !important;
}
html[data-theme="light"] .download-section h3,
html[data-theme="light"] .download-section p { color: #011532 !important; }

/* Stat float card ("136 Years · Since 1890") — hardcoded navy-deep bg
   stays dark in light mode, making the auto-generated muted-navy text
   unreadable. Flip box to white with gold accent. */
html[data-theme="light"] .nx-about-stat-float {
    background: #011532 !important;
    border-color: rgba(200, 169, 110, 0.35) !important;
    box-shadow: 0 8px 24px rgba(1, 21, 50, 0.15);
}
html[data-theme="light"] .nx-about-stat-num { color: #d4af6e !important; }
html[data-theme="light"] .nx-about-stat-txt { color: rgba(255,255,255,0.7) !important; }

/* Mini stats row (if any) */
html[data-theme="light"] .nx-mini-stat-num { color: #8a6a2c !important; }
html[data-theme="light"] .nx-mini-stat-label { color: #4a5a74 !important; }

/* ═══════════════════════════════════════════════════════
   Navy micro-accents (badges, pills, labels, borders)
   ═══════════════════════════════════════════════════════ */

/* Rose category badge on detail page */
html[data-theme="light"] .rose-category-badge {
    background: #011532 !important;
    color: #ffffff !important;
    padding: 5px 14px;
    border-radius: 3px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
}

/* Video cover — keep white text on dark thumbnail */
html[data-theme="light"] .nx-video-cover { color: #ffffff !important; }
html[data-theme="light"] .nx-video-notice { color: rgba(255,255,255,0.8) !important; }
html[data-theme="light"] .nx-video-notice a { color: #d4af6e !important; }

/* Rose card info — zelfde navy split-label in light mode zodat de foto /
   label-grens een strakke harde rand is, geen cream-on-cream fade. */
html[data-theme="light"] .rose-card-info {
    background: #011532 !important;
}
html[data-theme="light"] .rose-card-name { color: #ffffff !important; }
html[data-theme="light"] .rose-card-type { color: #c8a96e !important; }

/* Active filter pills on category pages */
html[data-theme="light"] .rose-filter-pill.active,
html[data-theme="light"] .sr-filter-tag {
    background: #011532 !important;
    color: #ffffff !important;
    border-color: #011532 !important;
}

/* News card date/tag badges */
html[data-theme="light"] .news-tag,
html[data-theme="light"] .nx-news-tag {
    background: #011532 !important;
    color: rgba(255,255,255,0.85) !important;
    padding: 4px 12px;
    border-radius: 2px;
}

/* Eyebrow labels — navy pill style */
html[data-theme="light"] .nx-eyebrow,
html[data-theme="light"] .v2-section-label {
    color: #011532 !important;
}
html[data-theme="light"] .nx-eyebrow::before,
html[data-theme="light"] .v2-section-label::before {
    background: #011532 !important;
}

/* Rose detail specs card — navy header */
html[data-theme="light"] .rd-specs-card h3 {
    color: #011532 !important;
    border-bottom: 2px solid #011532;
    padding-bottom: 8px;
}

/* Rose detail contact box — navy accent */
html[data-theme="light"] .rd-contact-box {
    background: #011532 !important;
    color: #ffffff !important;
    border-color: rgba(200, 169, 110, 0.2) !important;
}
html[data-theme="light"] .rd-contact-box p { color: rgba(255,255,255,0.8) !important; }
html[data-theme="light"] .rd-contact-box a { color: #d4af6e !important; }

/* Rose detail prev/next nav cards */
html[data-theme="light"] .rd-pn-card {
    background: #011532 !important;
    border-color: rgba(200, 169, 110, 0.15) !important;
}
html[data-theme="light"] .rd-pn-name { color: #8a6a2c !important; }
html[data-theme="light"] .rd-pn-direction { color: #b08f4a !important; }
html[data-theme="light"] .rd-pn:hover .rd-pn-name { color: #011532 !important; }
html[data-theme="light"] .rd-pn:hover .rd-pn-direction { color: #d4af6e !important; }
html[data-theme="light"] .rd-pn-label { color: rgba(1,21,50,0.5) !important; }

/* Search results card image bg */
html[data-theme="light"] .sr-card-img { background: #011532 !important; }

/* Collection cards (landing page) — navy overlay */
html[data-theme="light"] .v2-collection-card {
    border: 1px solid rgba(1, 21, 50, 0.1) !important;
}

/* About page stat borders */
html[data-theme="light"] .v2-about-stats .v2-stat-number,
html[data-theme="light"] .nx-mini-stat-num {
    color: #011532 !important;
    border-bottom: 2px solid #011532;
    padding-bottom: 8px;
    display: inline-block;
}

html[data-theme="light"] .v2-hero-btn--ghost {
    color: #ffffff !important;
    border-color: rgba(200, 169, 110, 0.85) !important;
}
html[data-theme="light"] .v2-hero-btn--ghost:hover {
    color: #011532 !important;
}

/* Brochure download section (cut-roses.html) — inline dark gradient bg.
   Keep dark in light mode so white text stays readable. */
html[data-theme="light"] .brochure-section {
    background: linear-gradient(180deg, #011532 0%, #07254B 100%) !important;
}

/* Dots-banner (injected by dots-banner.js) on all category pages */
html[data-theme="light"] .dots-banner-wrap {
    background: #faf6ef !important;
    border-color: rgba(1, 21, 50, 0.08) !important;
}
html[data-theme="light"] .dots-banner-wrap .cat-dot-label { color: #4a5a74 !important; }
html[data-theme="light"] .dots-banner-wrap .cat-dot-img {
    background: linear-gradient(145deg, #ffffff 0%, #f3ece0 100%) !important;
    border-color: rgba(1, 21, 50, 0.12) !important;
}
html[data-theme="light"] .dots-banner-dot,
html[data-theme="light"] .dots-banner-dot.is-active { opacity: 1 !important; }

/* Select <option> elements in forms */
html[data-theme="light"] .form-group select option,
html[data-theme="light"] .country-select option,
html[data-theme="light"] .country-select optgroup {
    background: #ffffff !important;
    color: #011532 !important;
}

/* Agent-login page */
html[data-theme="light"] .login-page {
    background: #faf6ef !important;
}
html[data-theme="light"] .login-card {
    background: #ffffff !important;
    border-color: rgba(1, 21, 50, 0.08) !important;
    box-shadow: 0 8px 32px rgba(1, 21, 50, 0.08);
}
html[data-theme="light"] .login-card-header h2 { color: #011532 !important; }
html[data-theme="light"] .login-card-header p { color: #4a5a74 !important; }
html[data-theme="light"] .login-form input {
    background: #ffffff !important;
    color: #011532 !important;
    border-color: rgba(1, 21, 50, 0.15) !important;
}
html[data-theme="light"] .login-form input::placeholder { color: rgba(1, 21, 50, 0.35) !important; }

/* Category page section backgrounds (inline var(--dark)) */
html[data-theme="light"] .v2-section[style*="var(--dark)"] {
    background: #faf6ef !important;
}

/* Rose card name — white on navy card info bar (set in navy accents block above) */
html[data-theme="light"] .category-rose-count { color: #4a5a74 !important; }

/* Agent network section (contact.html) — navy accent */
html[data-theme="light"] .agents-section {
    background: linear-gradient(180deg, #011532 0%, #07254B 100%) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .agents-header h2 { color: #ffffff !important; }
html[data-theme="light"] .agents-header p { color: rgba(255,255,255,0.7) !important; }
html[data-theme="light"] .agents-header .eyebrow { color: #d4af6e !important; }
html[data-theme="light"] .country-select-wrap .country-select {
    background: #ffffff !important;
    color: #011532 !important;
    border-color: rgba(1, 21, 50, 0.15) !important;
}
html[data-theme="light"] .agent-card {
    background: #ffffff !important;
    border-color: rgba(1, 21, 50, 0.08) !important;
}
html[data-theme="light"] .agent-card h3 { color: #011532 !important; }
html[data-theme="light"] .agent-card .agent-info-item { color: #4a5a74 !important; }
html[data-theme="light"] .agent-card .agent-info-item strong { color: #011532 !important; }
html[data-theme="light"] .agent-placeholder { color: #4a5a74 !important; }

/* ═══════════════════════════════════════════════════════
   BOUTIQUE LOOK — warm the inner pages
   "Apothekers-look" → "Boutique-look" (koninklijk en rustig)
   ═══════════════════════════════════════════════════════ */

/* Subtle warm gradient on all inner page section backgrounds —
   except sections that opt-out by carrying an inline navy bg
   (the rose-category collection sections live in dark navy in
   both themes for visual continuity with the page hero), and
   except .v2-content-section / .v2-section-white-collection which
   define their own theme-aware backgrounds further below. */
html[data-theme="light"] .v2-section:not(.v2-content-section):not(.v2-section-white-collection):not([style*="#011532"]):not([style*="#02152e"]):not([style*="#08203f"]) {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(200,169,110,0.06) 0%, transparent 50%),
        linear-gradient(180deg, #faf6ef 0%, #ffffff 50%, #faf6ef 100%) !important;
}

/* Sections that explicitly opt into navy via inline style keep
   their light-on-dark hierarchy in light theme too. */
.v2-section[style*="#011532"],
html[data-theme="light"] .v2-section[style*="#011532"] {
    background: #011532 !important;
    color: #e8e8e8 !important;
}
html[data-theme="light"] .v2-section[style*="#011532"] h1,
html[data-theme="light"] .v2-section[style*="#011532"] h2,
html[data-theme="light"] .v2-section[style*="#011532"] h3,
html[data-theme="light"] .v2-section[style*="#011532"] h4 {
    color: #ffffff !important;
}
html[data-theme="light"] .v2-section[style*="#011532"] h2 em,
html[data-theme="light"] .v2-section[style*="#011532"] h3 em {
    color: var(--gold-italic) !important;
}
html[data-theme="light"] .v2-section[style*="#011532"] p,
html[data-theme="light"] .v2-section[style*="#011532"] li {
    color: rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="light"] .v2-section[style*="#011532"] .category-rose-count {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Rose cards: warm shadow + gold accent on hover */
html[data-theme="light"] .rose-card-display {
    background: #ffffff;
    border: 1px solid rgba(200,169,110,0.08);
    transition: all 0.4s ease;
    border-radius: 2px;
    overflow: hidden;
}
html[data-theme="light"] .rose-card-link:hover .rose-card-display {
    border-color: rgba(200,169,110,0.35);
    box-shadow: 0 16px 48px rgba(200,169,110,0.12), 0 4px 12px rgba(1,21,50,0.04);
}

/* Rose card image: flat warm cream (gradient removed — seam too
   visible on the cream theme). */
html[data-theme="light"] .rose-card-image-wrapper {
    background: #faf6ef !important;
}

/* Rose filter bar: warm styling */
html[data-theme="light"] .rose-filter-bar {
    background: #ffffff;
    border: 1px solid rgba(200,169,110,0.12);
    padding: 20px 24px;
    margin-bottom: 32px;
}
html[data-theme="light"] .rose-filter-row-label {
    color: #011532 !important;
}
html[data-theme="light"] .rose-filter-pill {
    background: #faf6ef;
    border-color: rgba(200,169,110,0.15);
    color: #4a5a74;
}
html[data-theme="light"] .rose-filter-pill:hover {
    background: rgba(200,169,110,0.08);
    border-color: rgba(200,169,110,0.4);
    color: #011532;
}
html[data-theme="light"] .rose-filter-pill.active {
    background: #011532 !important;
    color: #ffffff !important;
    border-color: #011532 !important;
}
html[data-theme="light"] .rose-filter-search-input {
    background: #faf6ef !important;
    border-color: rgba(200,169,110,0.2) !important;
    color: #011532 !important;
}

/* Gold decorative divider between page hero and content */
html[data-theme="light"] .v2-page-hero::after {
    background: linear-gradient(90deg, transparent 5%, #d4af6e 30%, #dfc298 50%, #d4af6e 70%, transparent 95%);
    height: 2px;
}

/* Collection heading with gold accent line */
html[data-theme="light"] .roses-grid-dynamic {
    position: relative;
}

/* Dots banner: warm cream bg with gold borders */
html[data-theme="light"] .dots-banner-wrap {
    background: linear-gradient(180deg, #faf6ef 0%, #f3ece0 100%) !important;
}
html[data-theme="light"] .dots-banner-wrap::before,
html[data-theme="light"] .dots-banner-wrap::after {
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.35), transparent) !important;
}

/* Gallery cards on overview pages (cut-roses, garden-roses) */
html[data-theme="light"] .gallery-section {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(200,169,110,0.05) 0%, transparent 40%),
        #faf6ef !important;
}
html[data-theme="light"] .gallery-card-img {
    background: linear-gradient(135deg, #ffffff 0%, #f3ece0 100%) !important;
    border: 1px solid rgba(200,169,110,0.1);
}
html[data-theme="light"] .gallery-card:hover .gallery-card-img {
    border-color: rgba(200,169,110,0.4);
    box-shadow: 0 12px 32px rgba(200,169,110,0.1);
}
html[data-theme="light"] .gallery-card-name {
    color: #011532 !important;
}

/* News cards: warm borders */
html[data-theme="light"] .news-card {
    border-color: rgba(200,169,110,0.12) !important;
}
html[data-theme="light"] .news-card:hover {
    border-color: rgba(200,169,110,0.4) !important;
    box-shadow: 0 20px 48px rgba(200,169,110,0.1) !important;
}

/* About page: warm radial accent */
html[data-theme="light"] .about-page {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(200,169,110,0.06) 0%, transparent 50%),
        #faf6ef !important;
}

/* Search results: warm card borders */
html[data-theme="light"] .sr-card {
    border-color: rgba(200,169,110,0.1) !important;
}
html[data-theme="light"] .sr-card:hover {
    border-color: rgba(200,169,110,0.4) !important;
    box-shadow: 0 12px 32px rgba(200,169,110,0.08) !important;
}

/* Contact blocks: gold left border warmth */
html[data-theme="light"] .contact-block {
    border-left-color: #d4af6e !important;
}

/* Cat dots on overview pages: warm bg */
html[data-theme="light"] .cat-dots {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(200,169,110,0.06) 0%, transparent 60%),
        #faf6ef !important;
}
html[data-theme="light"] .cat-dot-img {
    background: linear-gradient(145deg, #f3ece0 0%, #e8dcc4 100%) !important;
    border-color: rgba(1,21,50,0.12) !important;
}

/* Inline var(--dark) sections on category pages */
html[data-theme="light"] [style*="background:var(--dark)"],
html[data-theme="light"] [style*="background: var(--dark)"] {
    background: #faf6ef !important;
}

/* 404 page */
html[data-theme="light"] .nf-page {
    background: #faf6ef !important;
}
html[data-theme="light"] .nf-title { color: #011532 !important; }
html[data-theme="light"] .nf-message { color: #4a5a74 !important; }
html[data-theme="light"] .nf-code { color: #d4af6e !important; }

/* Gallery hero (cut-roses, garden-roses, all-roses): keep dark */
html[data-theme="light"] .gallery-hero { background: #011532 !important; }
html[data-theme="light"] .gallery-hero-content h1 { color: #ffffff !important; }
html[data-theme="light"] .gallery-hero-content p { color: rgba(255,255,255,0.8) !important; }

/* Agent login — full light mode support */
html[data-theme="light"] .login-page {
    background: #faf6ef !important;
}
html[data-theme="light"] .login-card {
    background: #ffffff !important;
    border-color: rgba(200,169,110,0.15) !important;
    box-shadow: 0 8px 32px rgba(1,21,50,0.06);
}
html[data-theme="light"] .login-card-header h2 { color: #011532 !important; }
html[data-theme="light"] .login-card-header p { color: #4a5a74 !important; }
html[data-theme="light"] .login-form input {
    background: #faf6ef !important;
    color: #011532 !important;
    border-color: rgba(200,169,110,0.2) !important;
}
html[data-theme="light"] .login-form input::placeholder { color: rgba(1,21,50,0.35) !important; }
html[data-theme="light"] .login-form button {
    background: #d4af6e !important;
    color: #ffffff !important;
}
html[data-theme="light"] .login-demo { color: #4a5a74 !important; }
html[data-theme="light"] .login-demo code {
    background: #f3ece0 !important;
    color: #8a6a2c !important;
}

/* ── Boutique refinements (works in both modes) ── */

/* Centered gold divider before collection grid (mirrors splash-divider) */
.v2-section[style*="var(--dark)"]::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    margin: 0 auto 36px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Collection h2 — gold eyebrow line before the title */
.v2-section[style*="var(--dark)"] .v2-container > div:first-child h2 {
    padding-left: 56px;
    position: relative;
}
.v2-section[style*="var(--dark)"] .v2-container > div:first-child h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 1px;
    background: var(--gold);
}

/* Rose card info bar — navy split-label onder de foto. No top border: the
   photo edge meets the bar cleanly. */
.rose-card-info {
    background: #011532;
    padding: 13px 16px !important;
    border-top: 0;
}
.rose-card-info .rose-card-name {
    color: #ffffff;
}
.rose-card-info .rose-card-type {
    color: #c8a96e;
    opacity: 1;
}

/* Rose image wrapper: flat, no gradient. */
.rose-card-image-wrapper {
    background: var(--dark-surface);
}

/* Category rose count: refined uppercase gold label */
.category-rose-count {
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.62rem !important;
    color: var(--gold-dark) !important;
}

/* Mobile: reduce eyebrow padding so it doesn't overflow */
@media (max-width: 640px) {
    .v2-section[style*="var(--dark)"] .v2-container > div:first-child h2 {
        padding-left: 0;
    }
    .v2-section[style*="var(--dark)"] .v2-container > div:first-child h2::before {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════
   NAV — always dark navy (#011532) regardless of theme.
   Boutique-look directive: top bar must read as koninklijk,
   not as a white "apothekers" strip.
   ═══════════════════════════════════════════════════════ */
.v2-nav,
html[data-theme="light"] .v2-nav {
    background: rgba(1, 21, 50, 0.92) !important;
    border-bottom: 1px solid rgba(200, 169, 110, 0.18) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.v2-nav.scrolled,
.v2-nav.v2-nav-solid,
html[data-theme="light"] .v2-nav.scrolled,
html[data-theme="light"] .v2-nav.v2-nav-solid {
    background: #011532 !important;
    border-bottom: 1px solid rgba(200, 169, 110, 0.22) !important;
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.35) !important;
}
/* Top-level nav links only (not items inside dropdown menus). */
.v2-nav .v2-nav-links > li > a,
html[data-theme="light"] .v2-nav .v2-nav-links > li > a,
.v2-nav .v2-dropdown-toggle,
html[data-theme="light"] .v2-nav .v2-dropdown-toggle {
    color: rgba(255, 255, 255, 0.82) !important;
}
.v2-nav .v2-nav-links > li > a:hover,
html[data-theme="light"] .v2-nav .v2-nav-links > li > a:hover {
    color: var(--gold-light) !important;
}
.v2-nav .v2-search-trigger,
.v2-nav .v2-tp,
.v2-nav .v2-lang-btn,
.v2-nav .mnav-toggle span,
html[data-theme="light"] .v2-nav .v2-search-trigger,
html[data-theme="light"] .v2-nav .v2-tp,
html[data-theme="light"] .v2-nav .v2-lang-btn {
    color: rgba(255, 255, 255, 0.82) !important;
}
html[data-theme="light"] .v2-nav .mnav-toggle span {
    background: #ffffff !important;
}
.v2-nav .v2-nav-logo .logo-base,
html[data-theme="light"] .v2-nav .v2-nav-logo .logo-base {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 14px rgba(200, 169, 110, 0.4))
            drop-shadow(0 0 2px rgba(223, 194, 152, 0.5)) !important;
}

@media (max-width: 900px) {
    .v2-nav,
    html[data-theme="light"] .v2-nav {
        background: rgba(1, 21, 50, 0.96) !important;
    }
}

/* ═══════════════════════════════════════════════════════
   READABILITY GUARANTEE — every page hero gets a strong
   navy-bottom gradient behind text so titles stay legible
   over any photograph, in any theme. Style is preserved;
   we only darken the area where text sits.
   ═══════════════════════════════════════════════════════ */

/* Subpage page-hero (.v2-page-hero) used by history,
   royal-since-1990, breeders-representation, etc. — heights
   halved per client direction. */
.v2-page-hero {
    min-height: 38vh !important;
}
@media (max-width: 768px) {
    /* padding-top: de vaste menubalk mag niet over het labeltje vallen
       als de tekst langer is dan de kop hoog is. */
    .v2-page-hero { min-height: 32vh !important; padding-top: 88px; box-sizing: border-box; }
}

/* Subpage page-hero (.v2-page-hero) used by history,
   royal-since-1990, breeders-representation, etc. */
.v2-page-hero-bg img,
html[data-theme="light"] .v2-page-hero-bg img {
    opacity: 0.78;
    filter: brightness(0.7) saturate(0.95) !important;
}
.v2-page-hero-overlay,
html[data-theme="light"] .v2-page-hero-overlay {
    background: linear-gradient(180deg,
        rgba(1, 21, 50, 0.25)  0%,
        rgba(1, 21, 50, 0.35) 35%,
        rgba(1, 21, 50, 0.85) 100%) !important;
}
.v2-page-hero-content h1,
html[data-theme="light"] .v2-page-hero-content h1 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7),
                 0 0 40px rgba(0, 0, 0, 0.5),
                 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
.v2-page-hero-content h1 em,
html[data-theme="light"] .v2-page-hero-content h1 em {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75),
                 0 0 40px rgba(0, 0, 0, 0.5),
                 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
.v2-page-hero-content p,
html[data-theme="light"] .v2-page-hero-content p {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7),
                 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
.v2-page-hero-content .v2-section-label,
html[data-theme="light"] .v2-page-hero-content .v2-section-label {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Catalog gallery heroes (cut-roses, garden-roses, all-roses). */
.gallery-hero img {
    filter: brightness(0.7) saturate(0.95) !important;
    opacity: 0.78 !important;
}
.gallery-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(1, 21, 50, 0.25)  0%,
        rgba(1, 21, 50, 0.35) 35%,
        rgba(1, 21, 50, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
}
.gallery-hero-content,
.gallery-hero-inner { position: relative; z-index: 2; }
.gallery-hero h1,
.gallery-hero-content h1 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7),
                 0 0 40px rgba(0, 0, 0, 0.5),
                 0 1px 2px rgba(0, 0, 0, 0.6);
}
.gallery-hero h1 em,
.gallery-hero-content h1 em {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75),
                 0 1px 2px rgba(0, 0, 0, 0.7);
}
.gallery-hero p,
.gallery-hero-content p {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7),
                 0 1px 2px rgba(0, 0, 0, 0.6);
}
.gallery-hero .eyebrow {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════
   CONTENT-SECTION navy lock — pages like
   /breeders-representation use .v2-content-section, which
   resolves to var(--dark) = #ffffff in light theme. Force
   navy in both themes with white-on-navy hierarchy so the
   "Bred by the world's most trusted rose families" header
   and similar are always readable.
   ═══════════════════════════════════════════════════════ */
.v2-content-section,
.v2-section.v2-content-section,
html[data-theme="light"] .v2-content-section,
html[data-theme="light"] .v2-section.v2-content-section {
    background:
        radial-gradient(ellipse 1100px 480px at 50% 0%,
            rgba(200,169,110,0.06) 0%, transparent 70%),
        #011532 !important;
    color: #e8e8e8 !important;
}
html[data-theme="light"] .v2-content-section h1,
html[data-theme="light"] .v2-content-section h2,
html[data-theme="light"] .v2-content-section h3,
html[data-theme="light"] .v2-content-section h4 {
    color: #ffffff !important;
}
html[data-theme="light"] .v2-content-section h2 em,
html[data-theme="light"] .v2-content-section h3 em,
html[data-theme="light"] .v2-content-section h1 em {
    color: var(--gold-italic) !important;
}
html[data-theme="light"] .v2-content-section p,
html[data-theme="light"] .v2-content-section li {
    color: rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="light"] .v2-content-section .v2-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(200, 169, 110, 0.22) !important;
}
html[data-theme="light"] .v2-content-section .v2-card h3 {
    color: #ffffff !important;
}
html[data-theme="light"] .v2-content-section .v2-card p {
    color: rgba(255, 255, 255, 0.7) !important;
}
html[data-theme="light"] .v2-content-section .v2-card .card-type {
    color: #d4af6e !important;
}
html[data-theme="light"] .v2-content-section .v2-card .card-link {
    color: #dfc298 !important;
}
html[data-theme="light"] .v2-content-section .v2-timeline-period .v2-timeline-label {
    color: rgba(255, 255, 255, 0.65) !important;
}
html[data-theme="light"] .v2-content-section .v2-page-nav a {
    color: #ffffff !important;
}
html[data-theme="light"] .v2-content-section .v2-signature .sig-name {
    color: #eebd5b !important;
}
html[data-theme="light"] .v2-content-section .v2-signature .sig-title {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════
   BOUTIQUE LAYER — foundational polish that elevates every
   subpage to match the new /about.html reference.
   ═══════════════════════════════════════════════════════ */

/* Drop-cap on the first text paragraph of long content sections.
   Makes editorial pages (history, royal-since, breeders) feel
   like a printed boutique catalogue. We target .lead first, then
   the very first paragraph as fallback. */
.v2-content-section .lead::first-letter,
.v2-content-section .v2-container > .v2-reveal p.lead:first-of-type::first-letter {
    font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
    font-size: 4em;
    font-weight: 400;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.16em -0.05em 0;
    color: var(--gold);
}

/* Editorial pull-quote utility (used on long-form pages). */
.v2-pullquote {
    font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.45;
    color: var(--gold-light);
    text-align: center;
    max-width: 760px;
    margin: 56px auto;
    padding: 32px 24px;
    position: relative;
}
.v2-pullquote::before,
.v2-pullquote::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.55) 50%, transparent 100%);
}
.v2-pullquote::before { top: 0; }
.v2-pullquote::after  { bottom: 0; }

/* Ornamental gold rule between major sections. */
.v2-rule {
    width: 60%;
    max-width: 320px;
    height: 1px;
    margin: 56px auto;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.5) 50%, transparent 100%);
    border: 0;
}

/* Gold diamond divider — trinket between content blocks. */
.v2-diamond {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 64px auto;
    color: rgba(200, 169, 110, 0.6);
}
.v2-diamond::before,
.v2-diamond::after {
    content: '';
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.5) 50%, rgba(200,169,110,0.5) 50%, transparent 100%);
}
.v2-diamond span {
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
}

/* Body links inside content-sections: animated gold underline. */
.v2-content-section a:not(.v2-page-nav a):not(.about-cta):not(.btn):not(.v2-btn),
.v2-content-section p a {
    color: var(--gold-light);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}
.v2-content-section a:not(.v2-page-nav a):not(.about-cta):not(.btn):not(.v2-btn):hover,
.v2-content-section p a:hover {
    color: var(--gold);
    background-size: 100% 1px;
}

/* History timeline image polish — gold border on hover, subtle scale. */
.v2-chapter-img {
    border: 1px solid rgba(200, 169, 110, 0.12);
    transition: border-color 0.35s ease, transform 0.45s ease, box-shadow 0.45s ease;
}
.v2-chapter-img:hover {
    border-color: rgba(200, 169, 110, 0.55);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.v2-chapter-img img {
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.v2-chapter-img:hover img {
    transform: scale(1.04) !important;
}

/* Page nav links (e.g. royal-since-1990 → history): arrow drift on hover. */
.v2-page-nav a {
    transition: color 0.3s ease, gap 0.3s ease;
    gap: 12px;
}
.v2-page-nav a:hover {
    color: var(--gold-light);
    gap: 18px;
}
.v2-page-nav a svg {
    transition: transform 0.4s ease;
}
.v2-page-nav a:hover svg {
    transform: translateX(4px);
}

/* Signature block — italic signature with gold underline. */
.v2-signature .sig-name {
    font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--gold-light);
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}
.v2-signature .sig-name::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60%;
    height: 1px;
    background: var(--gold);
}

/* Boutique form inputs: gold focus with soft glow.
   Targets generic inputs across contact + future forms. */
.v2-form input:not([type="checkbox"]):not([type="radio"]),
.v2-form select,
.v2-form textarea,
.contact-page input:not([type="checkbox"]):not([type="radio"]),
.contact-page select,
.contact-page textarea,
form.boutique-form input:not([type="checkbox"]):not([type="radio"]),
form.boutique-form select,
form.boutique-form textarea {
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.v2-form input:not([type="checkbox"]):not([type="radio"]):focus,
.v2-form select:focus,
.v2-form textarea:focus,
.contact-page input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-page select:focus,
.contact-page textarea:focus,
form.boutique-form input:not([type="checkbox"]):not([type="radio"]):focus,
form.boutique-form select:focus,
form.boutique-form textarea:focus {
    outline: none;
    border-color: var(--gold) !important;
    background-color: rgba(200, 169, 110, 0.04) !important;
    box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.12), 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Form labels — boutique eyebrow style. */
.contact-page label,
.v2-form label,
form.boutique-form label {
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
    display: block;
}

/* Custom checkbox — gold accent. */
.contact-page input[type="checkbox"],
.v2-form input[type="checkbox"],
form.boutique-form input[type="checkbox"] {
    accent-color: var(--gold);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Universal CTA polish: every solid-gold button gets a soft
   gold glow + subtle lift on hover. */
.v2-btn-primary,
.about-cta,
.nx-btn-gold,
.nx-catalogue-btn,
.rd-btn-primary,
.ab-cta-btn,
button[type="submit"]:not(.v2-search-trigger):not(.mnav-toggle):not(.v2-tp):not(.v2-lang-btn) {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.5s ease !important;
}
.v2-btn-primary:hover,
.about-cta:hover,
.nx-btn-gold:hover,
.nx-catalogue-btn:hover,
.rd-btn-primary:hover,
.ab-cta-btn:hover,
button[type="submit"]:not(.v2-search-trigger):not(.mnav-toggle):not(.v2-tp):not(.v2-lang-btn):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 40px rgba(200, 169, 110, 0.32),
                0 0 0 1px rgba(200, 169, 110, 0.55) inset !important;
}

/* Filter pill (cut-roses / garden-roses / all-roses) hover bg. */
.gallery-pill:hover {
    background: rgba(200, 169, 110, 0.08) !important;
}

/* Shine sweep on the brand-gold buttons (Discover Collections,
   Download PDF, About hub CTA, etc). Light streak crosses the
   button on hover. */
/* De lijst staat op elke gouden knop met een gevuld vlak, zodat het effect
   overal op de site hetzelfde is en niet alleen op de startpagina. Knoppen met
   alleen een gouden randje doen niet mee: daar is geen vlak om overheen te
   vegen en dan ziet een streep er raar uit. Heeft een nieuwe knop het ook
   nodig, geef hem dan de klasse jsr-glans mee.
   Uitgebreid op 15-10-2026 (Paul: elke knop dat effect): Explore Collection
   en de catalogusknop (.jsr-stage-cta), de gouden formulierknoppen
   (.nx-btn-gold), Get In Touch (vult zich bij hover goud), de About-knop en
   de knop op de agent-login. */
.v2-hero-btn--primary,
.nx-catalogue-btn,
.ab-cta-btn,
.b-btn--primary,
.v2-btn-primary,
.rd-btn-primary,
.nf-btn--primary,
.c-submit,
.rs-history-btn,
.roses-empty-btn,
.jsr-stage-cta,
.nx-btn-gold,
.about-cta,
.v2-hero-btn--ghost,
.login-btn,
.jsr-glans {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.v2-hero-btn--primary::before,
.nx-catalogue-btn::before,
.ab-cta-btn::before,
.b-btn--primary::before,
.v2-btn-primary::before,
.rd-btn-primary::before,
.nf-btn--primary::before,
.c-submit::before,
.rs-history-btn::before,
.roses-empty-btn::before,
.jsr-stage-cta::before,
.nx-btn-gold::before,
.about-cta::before,
.v2-hero-btn--ghost::before,
.login-btn::before,
.jsr-glans::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -120%;
    width: 60%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}
.v2-hero-btn--primary:hover::before,
.nx-catalogue-btn:hover::before,
.ab-cta-btn:hover::before,
.b-btn--primary:hover::before,
.v2-btn-primary:hover::before,
.rd-btn-primary:hover::before,
.nf-btn--primary:hover::before,
.c-submit:hover::before,
.rs-history-btn:hover::before,
.roses-empty-btn:hover::before,
.jsr-stage-cta:hover::before,
.nx-btn-gold:hover::before,
.about-cta:hover::before,
.v2-hero-btn--ghost:hover::before,
.login-btn:hover::before,
.jsr-glans:hover::before,
.v2-hero-btn--primary:focus-visible::before,
.nx-catalogue-btn:focus-visible::before,
.ab-cta-btn:focus-visible::before,
.b-btn--primary:focus-visible::before,
.v2-btn-primary:focus-visible::before,
.rd-btn-primary:focus-visible::before,
.nf-btn--primary:focus-visible::before,
.c-submit:focus-visible::before,
.rs-history-btn:focus-visible::before,
.roses-empty-btn:focus-visible::before,
.jsr-stage-cta:focus-visible::before,
.nx-btn-gold:focus-visible::before,
.about-cta:focus-visible::before,
.v2-hero-btn--ghost:focus-visible::before,
.login-btn:focus-visible::before,
.jsr-glans:focus-visible::before {
    left: 140%;
}
/* Wie in zijn systeem heeft staan dat hij geen beweging wil, krijgt de veeg
   niet te zien. De knop blijft verder gewoon werken. */
@media (prefers-reduced-motion: reduce) {
    .v2-hero-btn--primary::before,
    .nx-catalogue-btn::before,
    .ab-cta-btn::before,
    .b-btn--primary::before,
    .v2-btn-primary::before,
    .rd-btn-primary::before,
    .nf-btn--primary::before,
    .c-submit::before,
    .rs-history-btn::before,
    .roses-empty-btn::before,
    .jsr-stage-cta::before,
    .nx-btn-gold::before,
    .about-cta::before,
    .v2-hero-btn--ghost::before,
    .login-btn::before,
    .jsr-glans::before { display: none; }
}
.v2-hero-btn--primary > *,
.nx-catalogue-btn > *,
.ab-cta-btn > *,
.b-btn--primary > *,
.v2-btn-primary > *,
.rd-btn-primary > *,
.nf-btn--primary > *,
.c-submit > *,
.rs-history-btn > *,
.roses-empty-btn > *,
.jsr-stage-cta,
.nx-btn-gold,
.about-cta,
.v2-hero-btn--ghost,
.login-btn,
.jsr-glans > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════
   FONT NORMALIZATION — pull every hero lead and subtitle
   into the same boutique italic Cormorant treatment used
   by /breeding's .b-hero-lead, with consistent weight and
   colour. Stylistic alignment across all subpages.
   ═══════════════════════════════════════════════════════ */
.v2-page-hero-content p,
.gallery-hero-content p,
.gallery-hero p,
.contact-hero p,
.news-hero p,
.ab-hero p,
.c-hero-inner p,
.c-hero p {
    font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif !important;
    font-weight: 300 !important;
    font-style: italic !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.75 !important;
    font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
}

/* Section heading italic em — always Cormorant cream-gold. The
   Cormorant italic has a noticeably smaller x-height than Libre
   Baskerville / Berkeley, so bump italic em's by ~6% so they
   visually match the upright text around them. */
.v2-page-hero-content h1 em,
.gallery-hero-content h1 em,
.gallery-hero h1 em,
.contact-hero h1 em,
.news-hero h1 em,
.ab-hero h1 em,
.c-hero h1 em,
.b-hero h1 em,
.nx-heading em,
.nx-catalogue-title em,
.v2-card h3 em,
.rd-title em,
.ab-card h3 em,
.ab-cta-section h3 em,
.ab-cards-header h2 em,
.b-panel-copy h3 em,
.b-crit h3 em,
.b-cta h2 em,
.c-form-header h2 em,
.c-visit-title em,
.c-agents-header h2 em,
.c-agent-card .c-agent-region em,
.br-cards-header h2 em {
    font-family: var(--serif) !important;
    font-style: italic;
    font-weight: 300;
    font-size: 1.1em;
    color: var(--gold-italic) !important;
    letter-spacing: 0;
}

/* Italic body emphasis inside long-form content sections — same
   x-height correction so the italic doesn't read as 'smaller'. */
.v2-content-section em,
.b-panel-copy p em,
.ab-card p em,
.b-hero-lead em,
.c-hero p em,
.ab-hero p em {
    font-size: 1.06em;
    font-style: italic;
}

/* Section title gold underline accent. */
.v2-section-title-underline {
    display: inline-block;
    position: relative;
    padding-bottom: 18px;
}
.v2-section-title-underline::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: var(--gold);
}

/* ═══════════════════════════════════════════════════════
   DOTS-BANNER — prevent vertical wheel hijack.
   ═══════════════════════════════════════════════════════ */
.dots-banner {
    overflow-y: hidden !important;
    overscroll-behavior-y: auto;
}

/* ═══════════════════════════════════════════════════════
   MOBILE MENU — locked to navy + white on every page,
   every theme. Earlier light-theme rules around line 2056+
   and 2289+ flipped the panel cream and the links navy,
   producing a stark cream menu against the rest of the
   boutique navy world. This block wins on specificity
   (uses html[data-theme] prefix) AND order, and adds
   !important to defeat any leftover rule.
   ═══════════════════════════════════════════════════════ */
.mnav-panel,
html[data-theme="light"] .mnav-panel,
html[data-theme="dark"]  .mnav-panel {
    background:
        radial-gradient(ellipse 700px 240px at 100% 0%,
            rgba(212, 175, 110, 0.10) 0%, transparent 70%),
        linear-gradient(180deg,
            #011532 0%, #02152e 55%, #011532 100%) !important;
    color: #ffffff !important;
}

/* Brand crest at the top + close button stay readable. */
html[data-theme="light"] .mnav-close,
html[data-theme="dark"]  .mnav-close,
.mnav-close {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 110, 0.3) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .mnav-close svg,
html[data-theme="dark"]  .mnav-close svg,
.mnav-close svg { stroke: #ffffff !important; }
html[data-theme="light"] .mnav-logo-link img,
.mnav-logo-link img {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 12px rgba(212, 175, 110, 0.35)) !important;
}

/* Section labels (Browse / Language) gold + small caps. */
.mnav-section-label,
html[data-theme="light"] .mnav-section-label,
html[data-theme="dark"]  .mnav-section-label {
    color: rgba(212, 175, 110, 0.7) !important;
}

/* Top-level links + dropdown triggers white, gold on hover. */
.mnav-link,
.mnav-trigger,
html[data-theme="light"] .mnav-link,
html[data-theme="light"] .mnav-trigger,
html[data-theme="dark"]  .mnav-link,
html[data-theme="dark"]  .mnav-trigger {
    color: #ffffff !important;
    background: transparent !important;
    border-bottom-color: rgba(212, 175, 110, 0.12) !important;
}
.mnav-link:hover,
.mnav-trigger:hover,
.mnav-link:active,
.mnav-trigger:active,
.mnav-link:focus,
.mnav-trigger:focus,
.mnav-group.open > .mnav-trigger,
html[data-theme="light"] .mnav-link:active,
html[data-theme="light"] .mnav-link:focus,
html[data-theme="light"] .mnav-trigger:active,
html[data-theme="light"] .mnav-trigger:focus,
html[data-theme="light"] .mnav-group.open > .mnav-trigger {
    color: #eebd5b !important;
    background: rgba(212, 175, 110, 0.05) !important;
}
.mnav-trigger .mnav-chev,
html[data-theme="light"] .mnav-trigger .mnav-chev,
html[data-theme="dark"]  .mnav-trigger .mnav-chev {
    stroke: rgba(255, 255, 255, 0.6) !important;
}

/* Submenu (under Cut Roses / Garden Roses / About). */
.mnav-sub,
html[data-theme="light"] .mnav-sub,
html[data-theme="light"] .mnav-group.open .mnav-sub,
html[data-theme="dark"]  .mnav-sub {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(212, 175, 110, 0.12) !important;
}
.mnav-sub-link,
html[data-theme="light"] .mnav-sub-link,
html[data-theme="dark"]  .mnav-sub-link {
    color: rgba(255, 255, 255, 0.78) !important;
    border-bottom-color: rgba(212, 175, 110, 0.08) !important;
    background: transparent !important;
}
.mnav-sub-link::before,
html[data-theme="light"] .mnav-sub-link::before {
    background: rgba(212, 175, 110, 0.4) !important;
}
.mnav-sub-link:active,
.mnav-sub-link:focus,
.mnav-sub-link:hover,
html[data-theme="light"] .mnav-sub-link:active,
html[data-theme="light"] .mnav-sub-link:hover {
    color: #eebd5b !important;
    background: rgba(212, 175, 110, 0.06) !important;
}

/* Search shortcut + language chips. */
.mnav-search-btn,
html[data-theme="light"] .mnav-search-btn {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(212, 175, 110, 0.32) !important;
}
.mnav-search-btn svg,
html[data-theme="light"] .mnav-search-btn svg {
    color: #d4af6e !important;
    stroke: #d4af6e !important;
}
.mnav-search-btn:hover,
html[data-theme="light"] .mnav-search-btn:hover {
    color: #eebd5b !important;
    border-color: rgba(212, 175, 110, 0.6) !important;
    background: rgba(212, 175, 110, 0.1) !important;
}

.mnav-lang-chip,
html[data-theme="light"] .mnav-lang-chip {
    color: rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(212, 175, 110, 0.18) !important;
}
.mnav-lang-chip.active,
html[data-theme="light"] .mnav-lang-chip.active {
    color: #eebd5b !important;
    background: rgba(212, 175, 110, 0.12) !important;
    border-color: rgba(212, 175, 110, 0.55) !important;
}
.mnav-lang-chip:hover,
html[data-theme="light"] .mnav-lang-chip:hover {
    color: #eebd5b !important;
    border-color: rgba(212, 175, 110, 0.45) !important;
}

/* Hamburger toggle bars white in both themes (nav itself is
   permanent navy now). */
.mnav-toggle span,
html[data-theme="light"] .mnav-toggle span {
    background: #ffffff !important;
}

/* Collection-listing sections that opted into a white background
   (Cut Roses + Garden Roses sub-pages). The section-level styling is
   white in both themes — dark theme still gets dark navigation/hero,
   only the rose-grid section is light. */
.v2-section-white-collection,
html[data-theme="light"] .v2-section-white-collection {
    background: #ffffff !important;
    color: #011532 !important;
}
.v2-section-white-collection h1,
.v2-section-white-collection h2,
.v2-section-white-collection h3,
.v2-section-white-collection h4,
html[data-theme="light"] .v2-section-white-collection h1,
html[data-theme="light"] .v2-section-white-collection h2,
html[data-theme="light"] .v2-section-white-collection h3,
html[data-theme="light"] .v2-section-white-collection h4 {
    color: #011532 !important;
}
.v2-section-white-collection .category-rose-count,
html[data-theme="light"] .v2-section-white-collection .category-rose-count {
    color: #4a5a74 !important;
}
/* Filter bar inside a white collection section: keep a subtle warm
   surface so the strip doesn't disappear into the page bg. */
.v2-section-white-collection .rose-filter-bar,
html[data-theme="light"] .v2-section-white-collection .rose-filter-bar {
    background: #faf6ef !important;
    border: 1px solid rgba(200,169,110,0.18) !important;
    padding: 20px 24px !important;
    margin-bottom: 32px !important;
}
.v2-section-white-collection .rose-filter-row-label {
    color: #011532 !important;
}
.v2-section-white-collection .rose-filter-pill {
    background: #ffffff !important;
    border: 1px solid rgba(200,169,110,0.22) !important;
    color: #4a5a74 !important;
}
.v2-section-white-collection .rose-filter-pill:hover {
    background: rgba(200,169,110,0.08) !important;
    border-color: rgba(200,169,110,0.5) !important;
    color: #011532 !important;
}
.v2-section-white-collection .rose-filter-pill.active {
    background: #011532 !important;
    color: #ffffff !important;
    border-color: #011532 !important;
}
.v2-section-white-collection .rose-filter-search-input {
    background: #ffffff !important;
    border: 1px solid rgba(200,169,110,0.22) !important;
    color: #011532 !important;
}
.v2-section-white-collection .rose-filter-search-input::placeholder {
    color: rgba(1,21,50,0.45) !important;
}
.v2-section-white-collection .rose-filter-search-input:focus {
    border-color: var(--gold) !important;
}
/* Rose cards on a white section: keep the warm shadow + gold border
   so the cards don't visually merge with the page background. */
.v2-section-white-collection .rose-card-display,
html[data-theme="light"] .v2-section-white-collection .rose-card-display {
    background: #ffffff !important;
    border: 1px solid rgba(200,169,110,0.22) !important;
}
/* Names stay white because the info bar underneath is navy. NOTE: the
   white-collection section also forces every h1–h4 to navy (headings read on
   white), and .rose-card-name is an <h3> sitting inside the *navy* info bar —
   so without enough specificity it would turn navy-on-navy (invisible). The
   extra .rose-card-info class lifts this above that heading rule (0,2,2). */
.v2-section-white-collection .rose-card-info .rose-card-name,
html[data-theme="light"] .v2-section-white-collection .rose-card-info .rose-card-name {
    color: #ffffff !important;
}
/* On a single-collection page every card's collection label is identical
   ("GARDEN SPECIAL" everywhere), so it's redundant noise — hide it. The bar is
   a clean navy/blue banner with just the white rose name. The full gallery
   (all-roses) keeps the label because there roses span collections. */
.v2-section-white-collection .rose-card-type,
.v2-section-white-collection .rose-card-gl {
    display: none !important;
}
.v2-section-white-collection .rose-card-info {
    padding: 12px 16px !important;
    background: #011532 !important;
}
.v2-section-white-collection .rose-card-info .rose-card-name {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Global text-reveal: word-by-word fade-up + rotateX on hero
   headings, driven by text-reveal.js. The script splits the
   heading into per-word .tr-word spans and toggles .tr-revealed
   on the parent so the staggered transition plays.
   ───────────────────────────────────────────────────────────── */
[data-text-reveal-applied="1"] .tr-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px) rotateX(20deg);
    transform-origin: 50% 100%;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
[data-text-reveal-applied="1"].tr-revealed .tr-word {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}
/* Some hero headings are themselves animated by the page (opacity
   keyframe etc.) which would hide the parent and therefore the
   word spans. Once we've taken over the reveal, kill the parent
   animation/opacity so the word stagger is the only show. */
[data-text-reveal-applied="1"] {
    animation: none !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ROOSWEERGAVE — OPTIE 18 "Navy magazine-overlay"
   Naam groot ín de foto (linksonder), donkerblauwe sluier, gouden
   collectie-eyebrow + goudlijntje. Overal waar rozekaarten staan.
   Staat achteraan het bestand zodat het de oude balk-regels overschrijft.
   ══════════════════════════════════════════════════════════════════════ */
.rose-card-display {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.rose-card-image-wrapper {
    position: relative !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    border-radius: 3px;
    background: #ece4d6;
}
.rose-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}
/* !important zodat de hover-zoom altijd animeert, óók als een roos een
   ingebakken framing-transform (object-position/scale) op de foto heeft. */
.rose-card-link:hover .rose-card-img { transform: translate(var(--jsr-x, 0%), var(--jsr-y, 0%)) scale(calc(var(--jsr-zoom, 1) * 1.055)) !important; }
/* Transparante uitknip-foto's (bestandsnaam eindigt op -transparent.png):
   toon de hele roos met ademruimte en een subtiele, natuurlijke slagschaduw
   i.p.v. een cover-crop met ingebakken lelijke schaduw. */
.rose-card-image-wrapper--cutout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}
.rose-card-image-wrapper--cutout .rose-card-img,
.rose-card-img[src*="-transparent."] {
    object-fit: contain !important;
    padding: 9px !important;
}
/* Oude balk onder de foto volledig uit */
.rose-card-info { display: none !important; }
/* Bijschrift onder de foto: naam in serif, collectie in goud eronder.
   Stond eerst als witte tekst ín de foto, op een navy verloop. Dat legde een
   grijze band over elke roos; de foto blijft nu schoon. */
.rose-card-ov {
    position: static;
    display: block;
    padding: 16px 12px 18px;
    text-align: center;
    pointer-events: none;
    background: none;
}
.rose-card-ov .rose-card-name,
html[data-theme="light"] .rose-card-ov .rose-card-name {
    font-family: var(--serif, 'Cormorant Garamond', Georgia, serif) !important;
    font-size: 1.18rem !important;
    font-weight: 400 !important;
    color: #011532 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    text-align: center !important;
    margin: 0 !important;
}
.rose-card-ov .rose-card-name::after { content: none; }
.rose-card-ov .rose-card-name .reg {
    font-size: 0.5em;
    vertical-align: 0.55em;
    color: #b0883a;
    margin-left: 0.04em;
    -webkit-text-fill-color: #b0883a;
}
.rose-card-ov .rose-card-cat {
    display: block;
    margin: 10px 0 0;
    font-family: var(--sans);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b0883a;
}

/* De kaart zelf: witte tegel met het bijschrift eronder. */
.rose-card-display {
    background: #ffffff;
    padding-bottom: 22px;
    overflow: hidden;
    position: relative;
}

/* Elke foto op dezelfde manier: witte tegel, hele roos in beeld, overal
   evenveel lucht. Uitgesneden PNG's stonden al zo, maar een gewone foto werd
   bijgesneden en vulde het vak; daardoor stond die roos groter en lager dan de
   rest. Nu liggen ze allemaal gelijk. */
.rose-card-image-wrapper,
html[data-theme="light"] .rose-card-image-wrapper { background: #ffffff !important; }
/* Een gewone foto vult de tegel: bij een liggende foto (zoals een bannercrop
   van 780 bij 300) stond er anders een grote witte lap omheen. Een uitsnede
   staat juist helemaal in beeld met wat lucht eromheen — die mag niet worden
   bijgesneden, want dan loopt de schaduw langs een rechte kant. Deze twee
   regels staan met opzet in deze volgorde: de uitsnede-regel komt later en
   wint dus van de algemene. */
.rose-card-image-wrapper .rose-card-img {
    object-fit: cover !important;
}
.rose-card-image-wrapper--cutout .rose-card-img,
.rose-card-img[src*="-transparent."],
.rose-card-img[src*="/uitsnede-"] {
    object-fit: contain !important;
    /* Lucht om de bloem. Dit stond op 9 pixels, en dat was jarenlang genoeg
       omdat de oude foto's zelf een lichte plaat om de bloem hadden: die duwde
       hem naar binnen. Die plaat is eraf (hij werd zichtbaar als een vierkant
       op de cremekleur), en daarmee raakte de bloem ineens de rand van de
       tegel. De lucht komt nu uit de opmaak in plaats van uit het bestand, dus
       hij is overal gelijk en met een getal aan te passen. In procenten, zodat
       het op elk formaat tegel klopt. */
    padding: 7.5% !important;
    box-sizing: border-box !important;
}
/* Uitknip-foto's (transparante achtergrond) krijgen hun schaduw van de site,
   zodat die overal hetzelfde is en niemand hem in Photoshop hoeft te tekenen.
   Twee lagen: een brede zachte voor de diepte en een korte donkere vlak onder
   de bloem, zoals daglicht dat doet. Bij foto's met een echte achtergrond kan
   dit niet: daar zou de schaduw om het hele rechthoekje vallen. */
.rose-card-image-wrapper--cutout .rose-card-img,
.rose-card-img[src*="-transparent."],
.rose-card-img[src*="/uitsnede-"] {
    filter: drop-shadow(0 8px 12px rgba(1, 21, 50, .09)) drop-shadow(0 2px 3px rgba(1, 21, 50, .06)) !important;
}
/* Heeft iemand de foto in de fotostudio verschoven of ingezoomd, dan hoort hij
   de tegel te vullen — ook als het een uitsnede is. Dat is precies wat je in de
   beheeromgeving ziet als je aan de schuif draait: de roos wordt groter tot hij
   in het kader past. Dan geen lucht eromheen en geen schaduw, want de foto
   loopt tot de rand. */
.rose-card-img.jsr-kader {
    object-fit: cover !important;
    padding: 0 !important;
    filter: none !important;
}
/* Foto's die hun schaduw al meebrengen (zie foto-schaduw.js) krijgen er geen
   tweede: die stapelden zichtbaar, vooral op lichte rozen. */
.rose-card-img.jsr-geen-schaduw,
img.jsr-geen-schaduw {
    filter: none !important;
}
.rose-card-img { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.rose-card-link:hover .rose-card-img { transform: translate(var(--jsr-x, 0%), var(--jsr-y, 0%)) scale(calc(var(--jsr-zoom, 1) * 1.05)); }
/* Gouden haarlijn die bij hover uit de hoek groeit, zoals in de zoekfunctie. */
/* Gouden haarlijn bij hover. Hij hing eerst vast aan de onderkant van de
   kaart; in een rij waarin geen enkele naam afbrak stond de naam zelf op die
   plek en liep de streep dwars door de tekst. Nu hangt hij aan het bijschrift,
   dus altijd eronder — of de naam nu op een of twee regels staat. */
.rose-card-ov::after {
    content: '';
    display: block;
    height: 1px;
    margin: 13px auto 0;
    background: #c8a96e;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.rose-card-link:hover .rose-card-ov::after { transform: scaleX(1); }

@media (max-width: 600px) {
    .rose-card-ov { padding: 12px 8px 15px; }
    .rose-card-ov .rose-card-name { font-size: 1.04rem !important; }
    .rose-card-display { padding-bottom: 18px; }
}

/* Instagram-tegels met video (echte berichten via instagram-feed.js). */
.nx-insta-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nx-insta-tile.is-video::after {
    content: '';
    position: absolute;
    top: 10px; right: 10px;
    width: 0; height: 0;
    border-left: 9px solid rgba(255,255,255,.9);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    pointer-events: none;
}



/* ══════════════════════════════════════════════════════════════════════
   Het kaartje met kader — op elke rozenlijst
   ─────────────────────────────────────────────────────────────────────
   Een foto mét achtergrond werd bijgesneden om de tegel te vullen. Daardoor
   viel er van de ene roos een stuk af (bij Eye of the tiger en Eye to eye
   stond de pot half buiten beeld) terwijl een uitgesneden foto er wél
   helemaal op stond. Elke kaart krijgt nu dezelfde behandeling als de rij
   "Discover more from ... collection" onderaan een roospagina: een wit
   kaartje met een dun kader en de hele foto erin.

   Dit geldt overal waar rozenkaarten staan: de collectiepagina's van de
   snij- én tuinrozen, het overzicht op Garden Roses, de favorieten. "Laten
   we dan maar kader doen overal" (Gijs, Erik en Jennifer, 19/20-08-2026).

   De vorm van het vak blijft per pagina zoals hij was: vierkant op de
   snijrozen-collecties, staand bij de tuinrozen. Alleen wat er in het vak
   gebeurt is gelijkgetrokken.
   ══════════════════════════════════════════════════════════════════════ */
/* De tweede regel is er voor het lichte thema: daar staat verderop een eigen
   kaderkleur met !important, en die zou anders winnen op zwaarte. Zo houdt het
   kaartje in beide thema's hetzelfde kader. */
.rose-card-display,
html[data-theme="light"] .rose-card-display,
.v2-section-white-collection .rose-card-display,
html[data-theme="light"] .v2-section-white-collection .rose-card-display {
    background: #ffffff !important;
    border: 1px solid #efe7d6 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    transition: box-shadow .3s ease, transform .3s ease;
}
.rose-card-link:hover .rose-card-display {
    box-shadow: 0 16px 40px -26px rgba(80, 60, 20, .55) !important;
    transform: translateY(-3px);
}
/* Vierkant vak op de snijrozen-collecties, zoals het kaartje dat als
   voorbeeld gold. De tuinrozen houden hun staande vak: die foto's zijn bijna
   allemaal staand (366 van de 375), dus daar past de roos zo het grootst. */
body[data-tak="kasrozen"] .rose-card-image-wrapper {
    aspect-ratio: 1 / 1 !important;
}
.rose-card-image-wrapper {
    background: #ffffff !important;
    border-radius: 0 !important;
}
/* De hele foto in beeld, niets eraf. mix-blend-mode laat het wit van de foto
   opgaan in het wit van het kaartje, zodat er geen grijzig blok omheen staat. */
.rose-card-image-wrapper .rose-card-img {
    object-fit: contain !important;
    mix-blend-mode: multiply;
    padding: 0 !important;
}
/* Een uitsnede houdt zijn ademruimte: die raakt anders de rand van het vak. */
.rose-card-image-wrapper--cutout .rose-card-img,
.rose-card-img[src*="-transparent."],
.rose-card-img[src*="/uitsnede-"] {
    padding: 7.5% !important;
    mix-blend-mode: normal;
}
.rose-card-ov {
    padding: 13px 10px 16px !important;
}

/* ── Het vinkje "Wit kadertje" uit de beheeromgeving ───────────────────────
   Jennifer wilde nieuwe rozen net zo op de kaart hebben als de oude, met wat
   lucht om de bloem. Die lucht zat nooit in de oude bestanden: die foto's zijn
   1000 bij 1350 en lopen aan alle kanten van het beeld af. Het witte randje op
   de tegel komt doordat de foto op de hoogte past en er links en rechts ruimte
   overblijft. Bij een uitsnede is dat niet zo, dus die krijgt de lucht van de
   site. Met dit vinkje kan Jennifer het per roos zelf zetten.

   `jsr-kadertje` wint bewust van de uitsnede-regels hierboven: het vinkje is
   een uitgesproken keuze en die hoort boven de automatische herkenning te
   gaan. `jsr-geen-kadertje` doet niets uit zichzelf, want dan geldt gewoon wat
   de site zelf al zag; alleen bij een uitsnede haalt hij de lucht weg.

   Het randje zit op een vakje om de foto (.jsr-kaderveld) en niet als padding
   op de foto zelf. Padding schaalt namelijk mee met de zoom, en dan at het
   uitvergroten het randje op. Nu staat het vakje vast en beweegt de roos
   erbinnen; wat buiten het vakje valt wordt afgesneden. De marge is in
   procenten van de breedte, aan alle vier de kanten evenveel pixels. */
.jsr-kaderveld {
    position: absolute;
    inset: 0;
    margin: 7.5%;
    overflow: hidden;
}
/* De schaduw van een uitsnede hoort op het vakje: op de foto zou hij tegen de
   snijrand van het vakje ophouden. Op het vakje valt hij netjes in het randje. */
.jsr-kaderveld--schaduw {
    filter: drop-shadow(0 8px 12px rgba(1, 21, 50, .09)) drop-shadow(0 2px 3px rgba(1, 21, 50, .06));
}
.rose-card-img.jsr-kadertje {
    object-fit: contain !important;
    padding: 0 !important;
    filter: none !important;
    box-sizing: border-box !important;
}
.rose-card-image-wrapper--cutout .rose-card-img.jsr-geen-kadertje,
.rose-card-img.jsr-geen-kadertje[src*="-transparent."],
.rose-card-img.jsr-geen-kadertje[src*="/uitsnede-"] {
    padding: 0 !important;
}
/* Een gewone foto met kadertje staat op wit, dus de blend die hem in de
   cremekleur liet opgaan mag eraf: die maakt de rand van de foto zichtbaar. */
.rose-card-img.jsr-kadertje { mix-blend-mode: normal !important; }

/* ═══════════════════════════════════════════════════════
   Rustig laden van de rozenfoto's
   Zie foto-laden.js. Het vakje krijgt eerst een zachte glans in de cremekleur
   van de site, en de foto vervaagt daar overheen zodra hij binnen is. Alles
   hangt aan de klasse jsr-smooth op <html>, die het script zelf zet. Zonder
   dat script gebeurt er niets en blijft de site zoals hij was.
   ═══════════════════════════════════════════════════════ */
@keyframes jsr-glans-loop {
    0%   { background-position: 140% 0; }
    100% { background-position: -40% 0; }
}
html.jsr-smooth .rose-card-image-wrapper::before,
html.jsr-smooth .rd2-dcimg::before,
html.jsr-smooth .rd2-stagebox::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-color: #f8f4ec;
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0) 70%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: jsr-glans-loop 1.6s ease-in-out infinite;
    opacity: 1;
    transition: opacity 0.45s ease;
}
/* Foto binnen: de glans verdwijnt en het beeld komt op. De animatie stopt ook,
   zodat er niets blijft draaien op een pagina met honderd kaartjes. */
html.jsr-smooth .rose-card-image-wrapper.jsr-foto-klaar::before,
html.jsr-smooth .rd2-dcimg.jsr-foto-klaar::before,
html.jsr-smooth .rd2-stagebox.jsr-foto-klaar::before {
    opacity: 0;
    animation: none;
}
html.jsr-smooth .rose-card-img,
html.jsr-smooth .rd2-dcimg img,
html.jsr-smooth #rd2-stage {
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.jsr-smooth .jsr-foto-klaar .rose-card-img,
html.jsr-smooth .rd2-dcimg.jsr-foto-klaar img,
html.jsr-smooth .rd2-stagebox.jsr-foto-klaar #rd2-stage {
    opacity: 1;
}
/* De vakjes moeten wel een houvast hebben voor het glansvlak. */
html.jsr-smooth .rd2-dcimg,
html.jsr-smooth .rd2-stagebox { position: relative; }
/* Wie geen beweging wil, krijgt geen glans maar wel de rustige overgang. */
@media (prefers-reduced-motion: reduce) {
    html.jsr-smooth .rose-card-image-wrapper::before,
    html.jsr-smooth .rd2-dcimg::before,
    html.jsr-smooth .rd2-stagebox::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   Het witte randje om de roos in de lijsten
   Jennifer wil lucht alleen links en rechts, zodat je een rechthoekig
   labeltje krijgt. De foto's zijn staand (1000 bij 1350) en passen in de
   tegel op de hoogte, dus wat er in de breedte overblijft is het randje.
   Boven en onder komt er niets bij.

   De tegel staat op 25:27. Dat is precies 10% wit aan elke kant:
       (25/27 - 20/27) / (2 * 25/27) = 0,10
   Wil je het randje breder of smaller, verander dan alleen dit getal. Een
   hogere verhouding geeft meer wit, een lagere minder; op 20:27 raakt de foto
   de rand.

   Garden Special blijft met opzet vierkant, dat is daar de huisstijl.
   ═══════════════════════════════════════════════════════ */
body:not([data-page="garden-special"]) .rose-card-image-wrapper {
    aspect-ratio: 25 / 27 !important;
}
body:not([data-page="garden-special"]) .rose-card-image-wrapper .rose-card-img {
    object-fit: contain !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   Rozenfoto's niet zomaar meenemen
   Rechtermuisknop, slepen naar het bureaublad en het lang indrukken op een
   telefoon zijn uitgezet op de rozenfoto's. Dat houdt het gewone meenemen
   tegen. Wie het echt wil kan nog steeds een schermafdruk maken of in de
   ontwikkelaarsgereedschappen kijken; dat is met geen enkele website te
   voorkomen. Zie foto-beveiligen.js.
   ═══════════════════════════════════════════════════════ */
.rose-card-img,
#rd2-stage,
.rd2-dcimg img,
.rd2-thumbs img,
.jsr-lightbox img,
.jsr-foto-beschermd {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ═══════════════════════════════════════════════════════
   De kop van een collectiepagina altijd zichtbaar
   Het label, de titel en de ondertitel stonden op opacity 0 en werden alleen
   zichtbaar doordat er een animatie overheen liep. Loopt die animatie niet,
   dan blijft de tekst dus onzichtbaar of half zichtbaar. Dat gebeurt onder
   andere als iemand in zijn systeem heeft staan dat hij geen beweging wil, of
   in een browser die animaties niet afspeelt.

   Nu is de tekst standaard gewoon zichtbaar en is de animatie alleen nog een
   extraatje: met vulling "both" geldt de beginstand tijdens de wachttijd, dus
   het invaren ziet er precies zo uit als eerst. Speelt de animatie niet af,
   dan staat de tekst er gewoon.
   ═══════════════════════════════════════════════════════ */
.v2-page-hero-content .v2-section-label,
.v2-page-hero-content h1,
.v2-page-hero-content p {
    opacity: 1;
}
.v2-page-hero-content .v2-section-label { animation: revealUp 0.8s ease 0.2s both; }
.v2-page-hero-content h1                { animation: revealUp 0.8s ease 0.4s both; }
.v2-page-hero-content p                 { animation: revealUp 0.8s ease 0.6s both; }

@media (prefers-reduced-motion: reduce) {
    .v2-page-hero-content .v2-section-label,
    .v2-page-hero-content h1,
    .v2-page-hero-content p {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════
   Geselecteerde tekst in de huisstijl
   Zonder deze regel gebruikt de browser zijn eigen blauw. Op de donkere kop
   van een collectiepagina valt de witte titel daar tegen weg, en dan lijkt het
   alsof er tekst mist. Nu blijft alles leesbaar, waar je ook selecteert.
   ═══════════════════════════════════════════════════════ */
::selection {
    background: rgba(200, 169, 110, 0.55);
    color: #ffffff;
    text-shadow: none;
}
::-moz-selection {
    background: rgba(200, 169, 110, 0.55);
    color: #ffffff;
    text-shadow: none;
}
html[data-theme="light"] ::selection {
    background: rgba(176, 136, 58, 0.32);
    color: #011532;
    text-shadow: none;
}

/* De foto die door foto-kader.js passend is gezet. De verschuiving en de
   grootte staan als eigen waarden op de foto zelf, zodat de zweefbeweging bij
   hover er gewoon overheen kan blijven werken. */
.rose-card-img.jsr-passend {
    transform: translate(var(--jsr-x, 0%), var(--jsr-y, 0%)) scale(var(--jsr-zoom, 1));
}

/* De kop komt woord voor woord in beeld (text-reveal.js). Wie in zijn systeem
   heeft staan dat hij geen beweging wil, krijgt de kop meteen heel te zien in
   plaats van een animatie die woorden een voor een laat verschijnen. */
@media (prefers-reduced-motion: reduce) {
    [data-text-reveal-applied="1"] .tr-word {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Roos zonder foto: een gravure van een roos in goud op ivoor, met de
   dubbele lijst van de hero en de vier cirkels uit het logo. De gravure is
   gemaakt van een eigen rozenfoto (images/roses/DSC03105.jpg) en staat los
   (images/placeholder/rose-gravure.webp), zodat lijst en tekst op elk
   formaat kaartje passen. Opmaak: jsrGeenFoto() in roses-dynamic.js en
   rose-finder.js.
   ═══════════════════════════════════════════════════════════════════════ */
.jsr-geen-foto {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 70% at 50% 40%, #fdfbf6 0%, #f8f2e7 55%, #efe5d2 100%);
    container-type: inline-size;
}
/* dubbele haarlijn, zoals om het schilderij in de hero */
.jsr-geen-foto::before,
.jsr-geen-foto::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(200, 169, 110, 0.5);
}
.jsr-geen-foto::before { inset: 9px; }
.jsr-geen-foto::after  { inset: 13px; border-color: rgba(200, 169, 110, 0.24); }
.jsr-geen-foto-roos {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 64%;
    max-width: 420px;
    transform: translate(-50%, -50%);
    opacity: 0.95;
    mix-blend-mode: multiply;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
a:hover .jsr-geen-foto-roos { transform: translate(-50%, -50%) scale(1.04); }
.jsr-geen-foto-voet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}
.jsr-geen-foto-merk { display: flex; gap: 3px; align-items: center; }
.jsr-geen-foto-merk i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(176, 138, 74, 0.75);
}
.jsr-geen-foto-merk::before,
.jsr-geen-foto-merk::after {
    content: '';
    width: 18px;
    height: 1px;
    margin: 0 6px;
    background: rgba(176, 138, 74, 0.5);
}
.jsr-geen-foto-tekst {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #a88444;
    text-align: center;
    padding: 0 12px;
}
/* groot, op de detailpagina */
.jsr-geen-foto--groot .jsr-geen-foto-roos { width: 58%; max-width: 520px; }
.jsr-geen-foto--groot .jsr-geen-foto-tekst { font-size: 0.66rem; }
.jsr-geen-foto--groot::before { inset: 14px; }
.jsr-geen-foto--groot::after  { inset: 20px; }
/* Kleine kaartjes (telefoon, twee naast elkaar): roos iets hoger en kleiner,
   tekst op één regel. */
@container (max-width: 230px) {
    .jsr-geen-foto-tekst { font-size: 0.44rem; letter-spacing: 0.2em; white-space: nowrap; padding: 0; }
    .jsr-geen-foto-merk i { width: 5px; height: 5px; }
    .jsr-geen-foto-merk::before, .jsr-geen-foto-merk::after { width: 10px; margin: 0 4px; }
    .jsr-geen-foto-voet { bottom: 8%; gap: 6px; }
    .jsr-geen-foto::before { inset: 6px; }
    .jsr-geen-foto::after { inset: 9px; }
}
/* De algemene regels voor kaartfoto's (100% breedte en hoogte, binnenruimte,
   schaduw) mogen de gravure niet raken. */
.jsr-geen-foto img.jsr-geen-foto-roos {
    position: absolute !important;
    width: 64% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    filter: none !important;
    box-shadow: none !important;
    opacity: 0.95 !important;
}
.jsr-geen-foto--groot img.jsr-geen-foto-roos { width: 58% !important; }
@container (max-width: 230px) {
    .jsr-geen-foto img.jsr-geen-foto-roos { width: 54% !important; top: 40%; }
}
html[data-theme="dark"] .jsr-geen-foto { filter: none; }

/* "Wit kadertje" uit de beheeromgeving (roses-dynamic.js, renderRoseCard):
   de foto staat in een vakje met 10% wit links, rechts en boven, hetzelfde randje als de
   andere rozen. Zoom en verschuiving gelden binnen dat vakje en wat erbuiten
   valt wordt afgesneden. De schaduw van een uitsnede komt op het vakje, niet
   op de foto, anders houdt hij op tegen de rand van het vakje. */
.rose-card-image-wrapper .jsr-kaderveld {
    position: absolute;
    inset: 0;
    /* Wit links, rechts en boven; de onderkant blijft open, zodat de roos
       daar tot de rand van het kaartje mag lopen (Paul, 14-10-2026). */
    margin: 10% 10% 0;
    overflow: hidden;
    display: block;
}
.rose-card-image-wrapper .jsr-kaderveld .rose-card-img {
    padding: 0 !important;
    object-fit: contain !important;
    filter: none !important;
}
.rose-card-image-wrapper .jsr-kaderveld--uitsnede {
    filter: drop-shadow(0 8px 12px rgba(1, 21, 50, .09)) drop-shadow(0 2px 3px rgba(1, 21, 50, .06));
}

/* Footer: links onderaan nooit midden in een woord laten breken (mobiel). */
.nx-footer-legal a { white-space: nowrap; display: inline-block; }
@media (max-width: 600px) {
  .nx-footer-legal { line-height: 2.2; }
  .nx-footer-legal a { margin: 0 10px !important; }
  .nx-footer-legal span { display: none; }
}

/* Collectiepagina's, mobiel: "4 varieties" onder de titel in plaats van er
   krap naast. De kop staat inline als flex-rij met space-between. */
@media (max-width: 600px) {
  div:has(> .category-rose-count) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px;
  }
  div:has(> .category-rose-count) > h2 { font-size: 1.6rem !important; }
}