/* Rose Finder — het zoekscherm dat de hele pagina vult.
   Hoort bij rose-finder.js en find.html.

   De rest van de site werkt met diep marineblauw, een gouden haarlijn en grote
   serif-koppen op fotografie. Dat is hier aangehouden: het keuzescherm is een
   donker paneel met een gouden kader, de vragen staan op crème, en de
   resultaten hangen onder een donkere balk zodat de rozen zelf oplichten.

   Alles staat onder #roseFinder, zodat deze stijlen nooit de rest raken. */

#roseFinder {
    --rf-cream:  #faf7f2;
    --rf-paper:  #ffffff;
    --rf-navy:   #011532;
    --rf-navy-2: #07254B;
    --rf-navy-3: #0e2b52;
    --rf-gold:   #b0883a;
    --rf-gold-2: #c8a96e;
    --rf-gold-3: #e3c68d;
    --rf-line:   #e7dfd0;
    --rf-ink-2:  #5a6472;

    background: var(--rf-cream);
    color: var(--rf-navy);
    min-height: 100vh;
}

#roseFinder *,
#roseFinder *::before,
#roseFinder *::after { box-sizing: border-box; }

@keyframes rfRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes rfFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Gemeenschappelijk ─────────────────────────────────────────────────── */

/* Kopje met een streepje ernaast, zoals boven de secties op de homepage. */
#roseFinder .rf-eyebrow {
    display: inline-flex; align-items: center; gap: 16px;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .6rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
    color: var(--rf-gold); margin: 0 0 22px;
}
#roseFinder .rf-eyebrow::before,
#roseFinder .rf-eyebrow::after {
    content: ''; width: 44px; height: 1px; background: currentColor; opacity: .55;
}

#roseFinder .rf-title {
    font-family: var(--serif, Georgia, serif);
    /* Regelhoogte iets ruimer dan 1: bij een kop van twee regels raakte de
       staart van een y de stok van een k op de regel eronder. */
    font-weight: 300; font-size: clamp(2.9rem, 7vw, 5.2rem); line-height: 1.12;
    margin: 0 0 20px; letter-spacing: .01em;
}
/* Scherm 2 is een tussenvraag, geen titelpagina: die kop mag kleiner. */
#roseFinder .rf-title em {
    font-style: italic; font-weight: 300;
    background: linear-gradient(180deg, var(--rf-gold-3), var(--rf-gold-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Scherm 1: de twee ingangen ────────────────────────────────────────── */

#roseFinder .rf-choose {
    position: relative; isolation: isolate;
    min-height: calc(100vh - 88px);
    display: flex; align-items: center; justify-content: center;
    padding: 120px 40px 90px;
    background: var(--rf-navy);
    color: #fff;
    overflow: hidden;
}
/* Het schilderij van de homepage, ver weggedraaid: dat bindt deze pagina aan
   de rest van de site zonder de tekst in de weg te zitten. */
#roseFinder .rf-choose::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: url('images/hero-painting.jpg') center/cover no-repeat;
    opacity: .2; filter: saturate(.8);
    animation: rfFade 1.6s ease both;
}
#roseFinder .rf-choose::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(14, 43, 82, .55) 0%, rgba(1, 21, 50, .92) 62%),
        linear-gradient(180deg, rgba(1, 21, 50, .6), rgba(1, 21, 50, .96));
}
/* De gouden haarlijn om het paneel, net als om de hero op de homepage. */
#roseFinder .rf-frame {
    position: absolute; inset: 26px; pointer-events: none;
    border: 1px solid rgba(200, 169, 110, .38);
}
#roseFinder .rf-frame::before,
#roseFinder .rf-frame::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 90px; height: 1px; background: var(--rf-gold-2);
}
#roseFinder .rf-frame::before { top: -1px; }
#roseFinder .rf-frame::after { bottom: -1px; }

#roseFinder .rf-choose-in {
    position: relative; width: 100%; max-width: 1080px; text-align: center;
    animation: rfRise .8s cubic-bezier(.22, .61, .36, 1) both;
}
#roseFinder .rf-choose .rf-title { color: #fff; margin-bottom: 52px; }

#roseFinder .rf-doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

#roseFinder .rf-door {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    min-height: 320px; padding: 40px 40px 34px; text-align: left; cursor: pointer;
    background: none; border: 1px solid rgba(200, 169, 110, .3); border-radius: 2px;
    color: #fff;
    animation: rfRise .9s cubic-bezier(.22, .61, .36, 1) both;
    transition: border-color .45s ease, transform .45s ease;
}
#roseFinder .rf-door:nth-child(1) { animation-delay: .1s; }
#roseFinder .rf-door:nth-child(2) { animation-delay: .2s; }
#roseFinder .rf-door::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-position: center;
    transform: scale(1.04); transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
#roseFinder .rf-door::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(1, 21, 50, .58) 0%, rgba(1, 21, 50, .88) 100%);
    transition: background .45s ease;
}
/* Kas: een gesneden bloem uit de kas. Tuin: rozen in de volle grond. */
#roseFinder .rf-door[data-tak2="kasrozen"]::before  { background-image: url('images/roses/DSC03546.jpg'); }
#roseFinder .rf-door[data-tak2="tuinrozen"]::before { background-image: url('images/roses/DSC03002.jpg'); }
/* Scherm 2 krijgt ook foto's, anders staat het er kaal bij: bloemen van
   dichtbij voor zelf zoeken, een gang door de kas voor de rondleiding. */
#roseFinder .rf-door[data-go="search"]::before { background-image: url('images/roses/DSC03453.jpg'); }
#roseFinder .rf-door[data-go="guide"]::before  { background-image: url('images/roses/DSC03560.jpg'); }
#roseFinder .rf-door:hover { border-color: var(--rf-gold-2); transform: translateY(-3px); }
#roseFinder .rf-door:hover::before { transform: scale(1.11); }
#roseFinder .rf-door:hover::after {
    background: linear-gradient(180deg, rgba(1, 21, 50, .42) 0%, rgba(1, 21, 50, .82) 100%);
}

#roseFinder .rf-door-ic {
    position: absolute; top: 32px; left: 40px;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(200, 169, 110, .5); color: var(--rf-gold-3);
    transition: background .4s ease, color .4s ease;
}
#roseFinder .rf-door:hover .rf-door-ic { background: var(--rf-gold-2); color: var(--rf-navy); }
#roseFinder .rf-door-ic svg { width: 19px; height: 19px; }

#roseFinder .rf-door-t {
    font-family: var(--serif, Georgia, serif); font-size: 1.75rem; font-weight: 400;
    line-height: 1.2; margin-bottom: 8px;
}
#roseFinder .rf-door-d {
    font-size: .88rem; line-height: 1.7; color: rgba(255, 255, 255, .7); max-width: 34ch;
}
#roseFinder .rf-door-go {
    margin-top: 20px; padding-top: 16px; width: 100%;
    border-top: 1px solid rgba(200, 169, 110, .32);
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--rf-gold-3);
    transition: letter-spacing .4s ease;
}
#roseFinder .rf-door:hover .rf-door-go { letter-spacing: .3em; }

/* Regel onder de twee deuren: alles tegelijk bekijken. */
#roseFinder .rf-alles {
    display: inline-block; margin: 26px auto 0; cursor: pointer;
    background: none; border: none; padding: 8px 2px;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--rf-gold-3); border-bottom: 1px solid rgba(200, 169, 110, .4);
    transition: border-color .3s, color .3s;
    animation: rfRise 1s cubic-bezier(.22, .61, .36, 1) .25s both;
}
#roseFinder .rf-alles b { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: .95rem; }
#roseFinder .rf-alles:hover { color: #fff; border-color: var(--rf-gold-2); }

/* Regel met de cijfers onder de deuren. */
#roseFinder .rf-facts {
    display: flex; align-items: center; justify-content: center; gap: 34px;
    margin-top: 44px; flex-wrap: wrap;
    animation: rfRise 1s cubic-bezier(.22, .61, .36, 1) .3s both;
}
#roseFinder .rf-fact {
    display: inline-flex; align-items: baseline; gap: 9px;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .58rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
#roseFinder .rf-fact b {
    font-family: var(--serif, Georgia, serif); font-size: 1.35rem; font-weight: 400;
    letter-spacing: 0; color: var(--rf-gold-3);
}
#roseFinder .rf-facts span[aria-hidden] { color: rgba(200, 169, 110, .45); }

/* ── Scherm 3: de resultaten ───────────────────────────────────────────── */

/* De donkere balk begint direct onder de menubalk: geen reepje ertussen.
   De menubalk staat vast en is 72px hoog, dus precies zoveel ruimte erboven. */
#roseFinder .rf-res { padding-top: 72px; }

/* Donkere balk boven de wand: de rozen eronder lichten daardoor op. */
/* Blijft plakken onder de vaste menubalk, niet erachter: bij scrollen
   verdween het zoekveld anders onder het menu. Tijdens scrollen is die balk
   64px hoog. */
#roseFinder .rf-bar {
    position: sticky; top: 64px; z-index: 20;
    background: var(--rf-navy);
    border-bottom: 1px solid rgba(200, 169, 110, .28);
    padding: 20px 40px 16px;
}
#roseFinder .rf-bar-in {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    max-width: 1500px; margin: 0 auto;
}
#roseFinder .rf-search {
    flex: 1 1 300px; display: flex; align-items: center; gap: 14px;
    background: none; border: none; border-bottom: 1px solid rgba(200, 169, 110, .35);
    padding: 0 2px; transition: border-color .3s;
}
#roseFinder .rf-search:focus-within { border-color: var(--rf-gold-2); }
#roseFinder .rf-search svg { width: 17px; height: 17px; color: var(--rf-gold-2); flex: none; }
#roseFinder .rf-search input {
    flex: 1; border: none; outline: none; background: none;
    padding: 13px 0; font-family: var(--serif, Georgia, serif);
    font-size: 1.08rem; color: #fff;
}
#roseFinder .rf-search input::placeholder { color: rgba(255, 255, 255, .42); }

#roseFinder .rf-bar-r { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
#roseFinder .rf-count {
    display: inline-flex; align-items: baseline; gap: 8px;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .58rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
#roseFinder .rf-count strong {
    font-family: var(--serif, Georgia, serif); font-size: 1.35rem; font-weight: 400;
    letter-spacing: 0; color: var(--rf-gold-3);
}
#roseFinder .rf-ghost {
    background: none; border: none; cursor: pointer; padding: 8px 0;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--rf-gold-3); border-bottom: 1px solid transparent; transition: border-color .25s;
}
#roseFinder .rf-ghost:hover { border-color: var(--rf-gold-2); }

/* Filterknop: rondje in het merkblauw met een gouden rand en wit icoon. */
#roseFinder .rf-filterbtn {
    width: 42px; height: 42px; flex: none; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rf-navy-2); color: #fff;
    border: 1px solid rgba(200, 169, 110, .45);
    transition: background .3s, border-color .3s, transform .25s;
}
#roseFinder .rf-filterbtn:hover {
    background: var(--rf-navy-3); border-color: var(--rf-gold-2); transform: translateY(-1px);
}
#roseFinder .rf-filterbtn svg { width: 19px; height: 19px; }

/* Kas / tuin, direct boven de wand. Drie knoppen naast elkaar met hun aantal;
   de gekozen knop staat in goud zodat je in één oogopslag ziet welke lijst je
   voor je hebt. */
#roseFinder .rf-seg {
    display: flex; flex-wrap: wrap; gap: 8px;
    max-width: 1500px; margin: 16px auto 0;
}
#roseFinder .rf-seg-b {
    cursor: pointer; padding: 10px 20px; border-radius: 100px;
    background: none; border: 1px solid rgba(200, 169, 110, .32); color: rgba(255, 255, 255, .82);
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    transition: background .3s, border-color .3s, color .3s;
}
#roseFinder .rf-seg-b em {
    font-style: normal; letter-spacing: .1em; margin-left: 7px; opacity: .6;
}
#roseFinder .rf-seg-b:hover { border-color: var(--rf-gold-2); color: #fff; }
#roseFinder .rf-seg-b.on {
    background: var(--rf-gold-2); border-color: var(--rf-gold-2); color: #fff;
}
#roseFinder .rf-seg-b.on em { opacity: .82; }

#roseFinder .rf-chips {
    display: flex; gap: 8px; flex-wrap: wrap;
    max-width: 1500px; margin: 14px auto 0;
}
#roseFinder .rf-chip {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 7px 14px; border-radius: 100px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(200, 169, 110, .35);
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .6rem; font-weight: 500; letter-spacing: .12em; color: rgba(255, 255, 255, .9);
    transition: border-color .25s, background .25s;
}
#roseFinder .rf-chip span { color: var(--rf-gold-3); font-size: .82rem; line-height: 1; }
#roseFinder .rf-chip:hover { border-color: var(--rf-gold-2); background: rgba(200, 169, 110, .14); }

#roseFinder .rf-wall {
    display: grid; gap: 1px; padding: 1px;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    background: var(--rf-line);
    max-width: 1700px; margin: 0 auto;
}
#roseFinder .rf-card {
    position: relative; display: block; text-decoration: none; color: inherit;
    background: var(--rf-paper); padding: 0 0 24px; overflow: hidden;
    animation: rfFade .5s ease both;
}
/* Elke foto helemaal in beeld op wit, met dezelfde rand eromheen. Met
   'cover' werd een vierkante close-up bijgesneden tot de rand en stond die
   roos veel groter dan een staande foto ernaast; nu heeft elke bloem
   dezelfde ruimte en staat hij gecentreerd. Zelfde aanpak als op de
   collectiepagina's. */
#roseFinder .rf-card-img {
    display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; isolation: isolate;
    position: relative;
}
#roseFinder .rf-card-img img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    /* Lucht om de bloem, in procenten zodat het op elk formaat klopt. Zie de
       toelichting bij .rose-card-img in style.css. */
    padding: 7.5%; box-sizing: border-box;
    mix-blend-mode: multiply; transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
/* Uitknip-foto's krijgen hun schaduw van de site; bij een foto met echte
   achtergrond kan dat niet, dan zou de schaduw om het rechthoekje vallen. */
/* Een foto die zijn schaduw al meebrengt krijgt er geen tweede (foto-schaduw.js). */
#roseFinder .rf-card-img img.jsr-geen-schaduw { filter: none !important; }
#roseFinder .rf-card-img img[src*="-transparent."],
#roseFinder .rf-card-img img[src*="/uitsnede-"] {
    filter: drop-shadow(0 8px 12px rgba(1, 21, 50, .09)) drop-shadow(0 2px 3px rgba(1, 21, 50, .06));
}
#roseFinder .rf-card:hover .rf-card-img img { transform: translate(var(--jsr-x, 0%), var(--jsr-y, 0%)) scale(calc(var(--jsr-zoom, 1) * 1.05)); }
#roseFinder .rf-card-n {
    display: block; text-align: center; margin-top: 18px; padding: 0 12px;
    font-family: var(--serif, Georgia, serif); font-size: 1.18rem; color: var(--rf-navy);
}
/* Alleen bij namen die twee keer bestaan: kasroos of tuinroos. Stil gezet, in
   het blauw van de naam; het is een verduidelijking, geen tweede kop. */
/* 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 daar zelf en
   liep de streep dwars door de tekst. Nu staat hij onder het bijschrift mee in
   de stroom, dus altijd eronder. */
#roseFinder .rf-card-rule {
    display: block; height: 1px; margin: 14px 16px 0; background: var(--rf-gold-2);
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
#roseFinder .rf-card:hover .rf-card-rule { transform: scaleX(1); }
/* De collectie onder de naam, in goud: net als op de collectiepagina's. */
#roseFinder .rf-card-b {
    display: block; text-align: center; margin-top: 10px; padding: 0 12px;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .55rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--rf-gold);
}

#roseFinder .rf-none {
    grid-column: 1 / -1; text-align: center; padding: 110px 20px; background: var(--rf-paper);
    font-family: var(--serif, Georgia, serif); font-size: 1.15rem; color: var(--rf-ink-2);
}
#roseFinder .rf-more { display: flex; justify-content: center; padding: 54px 20px 100px; }
#roseFinder .rf-load {
    cursor: pointer; padding: 16px 38px; border-radius: 2px;
    background: none; border: 1px solid var(--rf-gold-2); color: var(--rf-gold);
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    transition: background .3s, color .3s, letter-spacing .3s;
}
#roseFinder .rf-load:hover { background: var(--rf-gold-2); color: #fff; letter-spacing: .28em; }
#roseFinder .rf-load em { font-style: normal; opacity: .7; }

/* ── Filtervenster ─────────────────────────────────────────────────────── */

#roseFinder .rf-sheet { position: fixed; inset: 0; z-index: 200; }
#roseFinder .rf-sheet[hidden] { display: none; }
#roseFinder .rf-sheet-bg {
    position: absolute; inset: 0; background: rgba(1, 21, 50, .62); backdrop-filter: blur(3px);
    animation: rfFade .3s ease both;
}
#roseFinder .rf-sheet-in {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(800px, calc(100vw - 40px)); max-height: min(86vh, 800px);
    display: flex; flex-direction: column;
    background: var(--rf-paper); border-radius: 3px;
    box-shadow: 0 50px 100px -40px rgba(1, 10, 30, .7);
    overflow: hidden;
    /* Eigen keyframes: rfRise eindigt op transform:none en zou het venster uit
       het midden trekken, want het centreren gebeurt hier ook met transform. */
    animation: rfSheetIn .4s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes rfSheetIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
#roseFinder .rf-sheet-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 30px; background: var(--rf-navy); color: #fff;
    border-bottom: 1px solid rgba(200, 169, 110, .3);
}
#roseFinder .rf-sheet-top h3 {
    margin: 0; font-family: var(--serif, Georgia, serif); font-weight: 400;
    font-size: 1.5rem; color: #fff;
}
#roseFinder .rf-x {
    background: none; border: none; cursor: pointer; font-size: 1.7rem; line-height: 1;
    color: rgba(255, 255, 255, .6); padding: 0 4px; transition: color .25s;
}
#roseFinder .rf-x:hover { color: var(--rf-gold-3); }

#roseFinder .rf-sheet-body { padding: 10px 30px 26px; overflow-y: auto; }
#roseFinder .rf-fgroup { padding-top: 24px; }
#roseFinder .rf-fgroup h4 {
    display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .58rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
    color: var(--rf-gold);
}
#roseFinder .rf-fgroup h4::after {
    content: ''; flex: 1; height: 1px; background: var(--rf-line);
}
#roseFinder .rf-checks {
    display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
#roseFinder .rf-check {
    display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
    padding: 10px 12px; background: none; border: none; border-radius: 2px;
    transition: background .2s;
}
#roseFinder .rf-check:hover { background: var(--rf-cream); }
#roseFinder .rf-box {
    width: 17px; height: 17px; flex: none; border-radius: 1px;
    border: 1px solid #c3ccd8; background: #fff; position: relative; transition: all .2s;
}
#roseFinder .rf-check.on .rf-box { background: var(--rf-navy-2); border-color: var(--rf-navy-2); }
#roseFinder .rf-check.on .rf-box::after {
    content: ''; position: absolute; left: 5px; top: 1px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#roseFinder .rf-dot {
    width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 1px solid rgba(1, 21, 50, .12);
}
#roseFinder .rf-check-l { flex: 1; font-size: .88rem; color: var(--rf-navy); }
#roseFinder .rf-check.on .rf-check-l { font-weight: 600; }
#roseFinder .rf-check-n {
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .56rem; font-weight: 600; letter-spacing: .12em; color: var(--rf-ink-2);
}

#roseFinder .rf-sheet-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 30px; border-top: 1px solid var(--rf-line); background: var(--rf-cream);
}
#roseFinder .rf-reset {
    background: none; border: none; cursor: pointer; padding: 10px 0;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--rf-ink-2); border-bottom: 1px solid var(--rf-line); transition: color .25s, border-color .25s;
}
#roseFinder .rf-reset:hover { color: var(--rf-navy); border-color: var(--rf-gold); }
#roseFinder .rf-save {
    cursor: pointer; padding: 16px 34px; border: none; border-radius: 2px;
    background: var(--rf-navy-2); color: #fff;
    font-family: var(--sans, Montserrat, sans-serif);
    font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    transition: background .3s, box-shadow .3s;
}
#roseFinder .rf-save:hover { background: var(--rf-navy); box-shadow: 0 12px 26px -16px rgba(1, 21, 50, .8); }
#roseFinder .rf-save em { font-style: normal; color: var(--rf-gold-3); }

/* ── Telefoon ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    #roseFinder .rf-choose { padding: 100px 20px 70px; }
    #roseFinder .rf-frame { inset: 14px; }
    #roseFinder .rf-doors { grid-template-columns: 1fr; gap: 14px; }
    #roseFinder .rf-door { min-height: 230px; padding: 30px 26px 26px; }
    #roseFinder .rf-door-ic { top: 24px; left: 26px; width: 38px; height: 38px; }
    #roseFinder .rf-door-t { font-size: 1.45rem; }
    #roseFinder .rf-facts { gap: 18px; margin-top: 32px; }
    #roseFinder .rf-eyebrow::before, #roseFinder .rf-eyebrow::after { width: 24px; }

    #roseFinder .rf-res { padding-top: 72px; }
    #roseFinder .rf-bar { padding: 14px 16px 12px; }
    #roseFinder .rf-bar-in { gap: 14px; }
    #roseFinder .rf-wall { grid-template-columns: repeat(2, 1fr); }
    #roseFinder .rf-seg { margin-top: 12px; gap: 6px; }
    #roseFinder .rf-seg-b { padding: 9px 13px; font-size: .52rem; letter-spacing: .14em; }

    /* Op de telefoon vult het venster het scherm; dan hoort er geen
       centrerende transform meer bij, dus ook een andere animatie. */
    #roseFinder .rf-sheet-in { width: 100vw; max-width: none; height: 100vh; max-height: none;
        top: 0; left: 0; transform: none; border-radius: 0;
        animation: rfFade .3s ease both; }
    #roseFinder .rf-sheet-body { padding: 8px 18px 18px; }
    #roseFinder .rf-checks { grid-template-columns: 1fr 1fr; }
    #roseFinder .rf-sheet-foot { padding: 14px 18px; }
    #roseFinder .rf-save { padding: 15px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    #roseFinder *, #roseFinder *::before, #roseFinder *::after {
        animation: none !important; transition: none !important;
    }
}

/* ── Donkere modus ─────────────────────────────────────────────────────── */

html[data-theme="dark"] #roseFinder {
    --rf-cream:  #0b1626;
    --rf-paper:  #111f35;
    --rf-navy:   #eef2f7;
    --rf-line:   #1e3050;
    --rf-ink-2:  #93a1b5;
    --rf-gold:   #eebd5b;
    --rf-gold-2: #c9a572;
}
html[data-theme="dark"] #roseFinder .rf-choose { background: #050e1c; color: #fff; }
html[data-theme="dark"] #roseFinder .rf-choose .rf-title { color: #fff; }
html[data-theme="dark"] #roseFinder .rf-bar { background: #050e1c; }
html[data-theme="dark"] #roseFinder .rf-card-b { color: var(--rf-gold); }
html[data-theme="dark"] #roseFinder .rf-card-img { background: #0f1b2d; }
html[data-theme="dark"] #roseFinder .rf-card-img img { mix-blend-mode: normal; }
html[data-theme="dark"] #roseFinder .rf-sheet-top { background: #050e1c; }
html[data-theme="dark"] #roseFinder .rf-sheet-top h3 { color: #fff; }
html[data-theme="dark"] #roseFinder .rf-search input { color: #fff; }