/* Uitgelichte producten (slider), samengevoegde werkwijze, vinkje in het dashboard. */
.feat{padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(44px,6vw,80px)}
.feat-head{margin-bottom:34px}
.feat-head h2{font-size:clamp(2rem,4vw,3.2rem);margin-top:10px}
.feat-view{overflow:hidden}
.feat-track{display:flex;will-change:transform}
.fslide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:center}
.fl{min-width:0;display:flex;flex-direction:column;gap:14px}
.fmain{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface)}
.fthumbs{display:flex;gap:10px;flex-wrap:wrap}
.fthumbs button{width:72px;height:72px;padding:0;border:1px solid var(--line);background:none;opacity:.6;cursor:pointer;transition:opacity .2s,border-color .2s}
.fthumbs button:hover{opacity:1}
.fthumbs button[aria-current="true"]{border-color:var(--gold);opacity:1}
.fthumbs img{display:block;width:100%;height:100%;object-fit:cover}
.fr{min-width:0;display:flex;flex-direction:column;gap:18px}
.fr h3{font-size:clamp(1.9rem,3.4vw,2.9rem);text-wrap:balance}
.fr .desc{margin:0;color:var(--muted);font-weight:300;white-space:pre-line}
.fr .big{font-size:1.6rem}
.fr .big.req{font-size:1.9rem}
.feat-ctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;padding-top:18px;border-top:1px solid var(--gold)}
.feat-arrow{width:46px;height:46px;border:1px solid var(--gold);background:none;color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.feat-arrow:hover{background:var(--gold);color:#1B1408}
.feat-dots{display:flex;gap:2px}
.feat-dots button{position:relative;width:34px;height:44px;border:0;background:none;cursor:pointer;padding:0}
.feat-dots button::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid var(--gold);transition:background .25s}
.feat-dots button[aria-current="true"]::before{background:var(--gold)}
.work{background:var(--surface);border-block:1px solid var(--gold);padding-block:clamp(48px,7vw,96px)}
.work-title{font-size:clamp(1.55rem,2.9vw,2.4rem);line-height:1.22;font-weight:400;max-width:30ch;margin:18px 0 clamp(32px,5vw,56px);text-wrap:balance}
.work-title em{color:#A8843F}
.work .steps{padding-bottom:0}
.check{display:inline-flex;align-items:center;gap:12px;min-height:46px;cursor:pointer;font-size:.95rem}
.check input{width:20px;height:20px;accent-color:#B08D4A;flex:none}
@media (max-width:860px){.fslide{grid-template-columns:1fr}.fthumbs button{width:64px;height:64px}}

/* Ritme van de voorpagina: elke sectie krijgt boven en onder evenveel witruimte. */
:root{--sec:clamp(56px,7vw,104px);--fg:clamp(28px,5vw,88px)}
.fslide{gap:var(--fg)}
.feat{padding-block:var(--sec)}
.feat-head{margin-bottom:clamp(24px,3vw,36px)}
/* pijltjes en vierkantjes sluiten aan op de foto: zelfde breedte, geen lijn erboven */
.feat-ctrl{border-top:0;padding-top:0;margin-top:14px;width:calc((100% - var(--fg)) / 2)}
.work{padding-block:var(--sec)}
.work-title{margin-bottom:clamp(32px,4.5vw,52px)}
.work .step:last-child{margin-bottom:0}
/* sectie "Uit de collectie": geen lijn bovenaan */
.sec-head{border-top:0!important;padding-top:0!important}
[aria-labelledby="h-uitg"]{padding-block:var(--sec)}
[aria-labelledby="h-uitg"] .sec-head{margin-bottom:22px}
[aria-labelledby="h-uitg"] .chips{margin-bottom:34px}
[aria-labelledby="h-uitg"] .grid{padding-bottom:0!important}
.band-wrap{padding-block:var(--sec)}
.band-photo{margin-block:0}
@media (max-width:860px){.feat-ctrl{width:100%}}

/* Compactere witruimte en een titel van maximaal twee regels. */
:root{--sec:clamp(40px,calc(3.6vw + 19px),71px)}
.feat-head{margin-bottom:clamp(22px,2.6vw,32px)}
.work-title{max-width:28em;font-size:clamp(1.3rem,2.55vw,2.2rem);margin:14px 0 clamp(22px,3vw,34px)}
.work .steps{gap:clamp(20px,3vw,40px)}
.about .wrap{padding-block:var(--sec)}
[aria-labelledby="h-uitg"] .sec-head{margin-bottom:16px}
[aria-labelledby="h-uitg"] .chips{margin-bottom:26px}
.feat-ctrl{margin-top:12px}

/* Drie USP's boven de voet. */
.usp{border-top:1px solid var(--gold);padding-block:var(--sec)}
.usp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px)}
.usp-list li{display:flex;gap:16px;align-items:flex-start;min-width:0}
.usp-ic{flex:none;color:var(--gold);display:block;line-height:0;padding-top:2px}
.usp-list h3{font-size:1.3rem;margin:0 0 4px}
.usp-list p{margin:0;font-size:.78rem;line-height:1.5;color:var(--muted);max-width:34ch}
@media (max-width:760px){.usp-list{grid-template-columns:1fr;gap:22px}}

/* Onze werkwijze: één lijn van 1 naar 2 naar 3, met een bolletje dat er doorheen loopt. */
.work .steps{--sg:clamp(20px,3vw,40px);position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sg)}
.work .step{border-top:0;padding-top:0}
.work .step .n{position:relative;z-index:2}
.steps-track{position:absolute;left:26px;top:26px;width:calc((100% + var(--sg)) * 2 / 3);height:0;z-index:1;pointer-events:none}
.steps-track .sl{position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold);opacity:.4}
.steps-track .sp{position:absolute;left:0;top:-1px;height:2px;width:0;background:linear-gradient(90deg,#DDBE70,#B08D4A);animation:spro 7s ease-in-out infinite}
.steps-track .sdot{position:absolute;top:0;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F6E7B8,#B08D4A 72%);box-shadow:0 0 0 4px rgba(176,141,74,.18),0 0 14px rgba(176,141,74,.7);animation:sdot 7s ease-in-out infinite}
@keyframes sdot{0%{left:0;opacity:0}6%{left:0;opacity:1}38%{left:50%}50%{left:50%}82%{left:100%}94%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes spro{0%{width:0;opacity:1}6%{width:0}38%{width:50%}50%{width:50%}82%{width:100%}94%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.steps-track .sdot{display:none}.steps-track .sp{animation:none;width:100%}}
@media (max-width:760px){
  .work .steps{grid-template-columns:1fr;gap:30px}
  .steps-track{display:none}
  .work .step{position:relative;padding-left:76px;min-height:52px;gap:6px}
  .work .step .n{position:absolute;left:0;top:0;margin:0}
  .work .step:not(:last-child)::before{content:"";position:absolute;left:26px;top:58px;bottom:-26px;width:1px;background:var(--gold);opacity:.5}
}

/* Uitgelicht op de voorpagina: artikelcode en afmetingen naast elkaar, geen lijnen eronder. */
.specs-row{display:flex;flex-wrap:wrap;gap:14px clamp(28px,4vw,56px);border-bottom:0;padding-bottom:0}
.specs-row>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.specs-row dt{align-self:auto}
.fr .note{border-top:0;padding-top:0}

/* Productvenster (Bekijken): geen lijn onder afmetingen en geen lijn onder Reserveren. */
.info .specs{border-bottom:0;padding-bottom:0}
.info .note{border-top:0;padding-top:0}

/* Maak kennis: gouden knop. */
.about .about-cta{margin:18px 0 0}

/* Inlogscherm van het beheer. */
.login{max-width:440px;padding-block:clamp(48px,8vw,110px)}
.login h1{font-size:clamp(2rem,4vw,3rem);margin:10px 0 14px}
.login p{color:var(--muted);font-weight:300;margin:0 0 26px}
.login form{display:flex;flex-direction:column;gap:18px}

/* Verhaal van de verkoper in het productvenster: een uitklapbaar blokje. */
.story-note{margin:2px 0 0;border-block:1px solid var(--gold)}
.story-note summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:10px 0;cursor:pointer;list-style:none;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);transition:color .2s}
.story-note summary::-webkit-details-marker{display:none}
.story-note summary:hover{color:var(--ink)}
.story-note summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s ease}
.story-note[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.story-note p{margin:0;padding:2px 0 16px;font-family:var(--display);font-style:italic;font-size:1.22rem;line-height:1.45;color:var(--ink);white-space:pre-line;text-wrap:pretty;animation:storyin .4s ease}
@keyframes storyin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.story-note p{animation:none}.story-note summary::after{transition:none}}

/* Prive notitie in het beheer. */
.note-field textarea{background:#FBF6E9;border-color:var(--gold)}
.mynote{margin-top:6px;font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60ch}
.mynote b{font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-right:8px}

/* verkocht + volgorde */
.picw{position:relative}
.picw .tag{position:absolute;left:12px;top:12px;background:var(--bg,#fff);color:var(--ink,#111);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px}
.sold-btn{opacity:.55;cursor:default;pointer-events:none}
.sold-note{font-style:italic}
.prow .acts{flex-wrap:wrap}
.prow .mv{display:inline-flex;gap:6px;margin-right:6px}
.prow .mv .btn[disabled]{opacity:.35;cursor:default}

/* beschrijving in/uitklappen */
.desc.clamp:not(.open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.descw .more{background:none;border:0;padding:6px 0 0;margin:0;font:inherit;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold,#B08D4A);cursor:pointer;border-bottom:1px solid currentColor;line-height:1.4}
.descw .more:hover{opacity:.75}
.descw .more:focus-visible{outline:2px solid var(--gold,#B08D4A);outline-offset:3px}

/* gouden verkocht-label */
.tag.sold,.picw .tag.sold{background:linear-gradient(135deg,#C9A45C,#B08D4A 55%,#9A7A3C);color:#fff;border:0;font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pill.sold-pill{background:#B08D4A;color:#fff;border-color:#B08D4A}
.subh{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.35rem;margin:26px 0 10px}

.feat-field .flabel{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.feat-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* kleinere titels: volledige titel blijft zichtbaar */
.card h3{font-size:1.3rem;line-height:1.2;-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible;overflow-wrap:anywhere}
.fr h3{font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.15;overflow-wrap:anywhere}

/* lopende USP-tekst onder de banner (beweegt van links naar rechts) */
.ticker{border-bottom:1px solid rgba(176,141,74,.45);background:#fff;overflow:hidden}
.tk-mask{display:flex;width:max-content;padding-block:clamp(14px,1.5vw,20px);animation:tk 70s linear infinite;-webkit-mask-image:none}
.ticker:hover .tk-mask{animation-play-state:paused}
.tk-track{display:flex;flex:none;list-style:none;margin:0;padding:0}
.tk-track li{display:flex;align-items:center;white-space:nowrap;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1rem,1.25vw,1.2rem);letter-spacing:.04em;color:#6b5428}
.tk-track li::after{content:"";width:6px;height:6px;margin-inline:clamp(22px,3vw,44px);background:var(--gold,#B08D4A);transform:rotate(45deg);flex:none}
@keyframes tk{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ticker{position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:clamp(24px,8vw,120px);z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.ticker::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
@media (prefers-reduced-motion:reduce){.tk-mask{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:6px}.tk-track[aria-hidden]{display:none}.ticker::before,.ticker::after{display:none}}

/* smallere band, niet cursief */
.tk-mask{padding-block:clamp(8px,.9vw,12px)}
.tk-track li{font-style:normal;font-weight:500;letter-spacing:.05em}