/* ==================================================================
L-CLUB — overzicht en categorie (views/lclub/index.php, shop-preview.php), shoppagina (view.php + parts/header,
popular, news), aanbod (products.php), "Word lid" (join.php) en L-club aanmelden (shop/request/index.php, prefix lcj-). Prefix lc-; hero, chips, paginering en links komen
uit blog.css (bl-, gedeeld met de inspiratiepagina). Enkel tokens. docs/ui/
Laadt vóór lt.css en lijstjestijd.css: regels die daar iets overschrijven beginnen met .bl / .lc.
================================================================== */
.lc-subs { display: flex; gap: 8px; overflow-x: auto; margin: -36px -4px 0; padding: 4px; scrollbar-width: none; }
.lc-subs::-webkit-scrollbar { display: none; }
.bl .lc-sub { flex: none; height: 34px; padding: 0 14px; border-radius: var(--lt-radius-pill); background: var(--lt-surface); color: #33475B; font-size: .875rem; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
.bl .lc-sub:hover { color: var(--lt-navy); background: var(--lt-line); }
.bl .lc-sub.is-active { background: var(--lt-blue-soft); color: var(--lt-blue); }
.bl-hero__text .bl-link { font-size: .9375rem; }

/* kaart van een shop (lclub/shop-preview.php) */
.lc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.lc-tile { text-decoration: none; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 22px; background: var(--lt-white); box-shadow: 0 10px 24px rgba(12, 35, 62, .10); transition: transform .25s ease; }
.lc-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lc-tile--logo { border: 1px solid var(--lt-line); }
.lc-tile--logo img { object-fit: contain; padding: 14%; box-sizing: border-box; }
.lc-tile.is-broken { display: flex; align-items: center; justify-content: center; background: var(--lt-blue-soft); }
.lc-tile.is-broken::after { content: attr(data-initial); font-size: 3rem; font-weight: 800; color: var(--lt-blue); }
.bl-card:hover .lc-tile { transform: rotate(-1deg) scale(1.02); }
.bl .lc-name { margin: 0; font-size: 1.125rem; line-height: 1.25; font-weight: 700; transition: color .15s ease; }
.bl-card:hover .lc-name { color: var(--lt-blue); }
.lc-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.lc-featured .lc-tile { aspect-ratio: 4 / 3; }
.bl .lc-featured .lc-name { font-size: 1.375rem; font-weight: 800; }

/* shoppagina: omslag, logo dat de onderrand overlapt, naam, knoppen */
.lc-shophead { padding: 20px 0 130px; }
.lc-shophead--plain { padding: 20px 0 28px; }
.lc-cover { margin-top: -110px; }
.lc-cover img { display: block; width: 100%; aspect-ratio: 16 / 5; object-fit: cover; border-radius: 32px; box-shadow: 0 18px 44px rgba(12, 35, 62, .16); }
.lc-id { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 28px; margin-top: 20px; padding-left: 36px; }
.lc-id--plain { padding-left: 0; margin-top: 0; align-items: center; }
.lc-logo { position: relative; z-index: 2; flex: none; width: 140px; height: 140px; margin-top: -92px; overflow: hidden; border: 4px solid var(--lt-white); border-radius: 24px; background: var(--lt-white); box-shadow: 0 10px 28px rgba(12, 35, 62, .16); }
.lc-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lc-id--plain .lc-logo { width: 88px; height: 88px; margin-top: 0; }
.lc-id__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.lc-id--plain .lc-id__text { padding-top: 0; }
.lc-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.bl .lc-cats a { height: 30px; padding: 0 12px; border-radius: var(--lt-radius-pill); background: var(--lt-blue-soft); color: var(--lt-blue); font-size: .8125rem; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none; }
.bl .lc-cats a:hover { background: var(--lt-blue); color: var(--lt-white); }
.bl .lc-title { margin: 0; font-size: 3.25rem; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.lc-actions { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.lc-id--plain .lc-actions { padding-top: 0; }
.bl .lc-visit { height: 48px; padding: 0 22px; font-size: .9375rem; box-shadow: 0 8px 20px rgba(64, 82, 237, .25); }
.bl .lc-social { width: 48px; height: 48px; border-radius: 50%; background: var(--lt-surface); color: var(--lt-navy); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none; }
.bl .lc-social:hover { background: var(--lt-blue-soft); color: var(--lt-blue); }
.lc-desc { max-width: 760px; margin: 28px 0 0 204px; font-size: 1.125rem; line-height: 1.65; color: #23384D; }
.lc-id--plain + .lc-desc { margin-left: 116px; }
.lc-feedinfo.d-none { display: none; }
.lc-section { margin-top: 64px; display: flex; flex-direction: column; gap: 22px; }

/* producten (populair + aanbod) */
.lc-products { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.lc-products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lc-product { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lc-product .lc-tile { border: 1px solid var(--lt-line); }
.lc-product .lc-tile img { object-fit: contain; padding: 14px; box-sizing: border-box; }
.bl .lc-product__title { color: var(--lt-navy); font-size: 1rem; font-weight: 700; line-height: 1.3; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl a.lc-product__title:hover { color: var(--lt-blue); }
.lc-product__price { font-size: .9375rem; font-weight: 700; }
.lc-product__price.d-none { display: none; }
/* "Op mijn lijstje": rond + rechtsboven op de foto (label als title / aria-label) */
.lc-product__media { position: relative; }
.bl .lc-pin { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--lt-white); color: var(--lt-navy); box-shadow: var(--lt-shadow-sm); font-size: 1rem; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s var(--lt-ease-out); }
.bl .lc-pin:hover, .bl .lc-pin:focus-visible { background: var(--lt-blue); color: var(--lt-white); transform: scale(1.08); }
.bl .lc-pin:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--lt-blue-glow); }

/* nieuws van de shop: beeld + tekst, los */
.lc-news { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.lc-news + .lc-news { margin-top: 48px; }
.lc-news:nth-of-type(even) { flex-direction: row-reverse; }
.lc-news__img { flex: 1 1 420px; min-width: 0; }
.lc-news__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.lc-news__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bl .lc-news__text h2 { margin: 0; font-size: 2.125rem; line-height: 1.15; font-weight: 800; }
.lc-news__text p { margin: 0; font-size: 1rem; line-height: 1.6; color: #33475B; }

/* aanbod: zoeken + sorteren */
.lc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.bl .lc-tools h2 { margin: 0 auto 0 0; font-size: 2.125rem; font-weight: 800; }
.lc-search { flex: 0 1 340px; min-width: 220px; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 16px; border: 1.5px solid var(--lt-border); border-radius: var(--lt-radius-pill); background: var(--lt-white); }
.lc-search:focus-within { border-color: var(--lt-blue); box-shadow: 0 0 0 4px var(--lt-blue-glow); }
.lc-search > i { color: var(--lt-faint); }
.lc-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: .9375rem; color: var(--lt-navy); }
.lc-search button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--lt-muted); }
.lc-search button:hover { background: var(--lt-surface); color: var(--lt-navy); }
.bl .lc-sort { height: 48px; padding: 0 18px; font-size: .9375rem; }
.lc-sort > .fa-angle-down { color: var(--lt-muted); }
.lc-tools .lt-menu__item input:checked + span { font-weight: 700; color: var(--lt-blue); }
.lc-feedinfo { margin: 0; text-align: center; font-size: .875rem; color: var(--lt-muted); }

/* word lid: licht vak, zoals de afsluiter op de blog */
.lc-join { margin: 24px 0 72px; padding: 28px 36px; border: 1px solid var(--lt-line); border-radius: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; background: linear-gradient(90deg, rgba(241, 255, 223, .6) 0%, rgba(255, 227, 191, .6) 49%, rgba(254, 235, 238, .6) 100%), var(--lt-white); }
.lc-join__text { flex: 1 1 360px; display: flex; flex-direction: column; gap: 6px; }
.lc-join__text strong { font-size: 1.5rem; line-height: 1.2; font-weight: 700; }
.lc-join__text span { font-size: .9375rem; line-height: 1.5; color: #33475B; }
.bl .lc-join .lt-btn { height: 52px; padding: 0 24px; font-size: 1rem; box-shadow: 0 8px 20px rgba(64, 82, 237, .25); }

@media (max-width: 991.98px) {
    .lc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lc-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lc-desc { margin-left: 0; }
}
@media (max-width: 767.98px) {
    .lc-subs { margin-top: -24px; }
    .lc-grid, .lc-products, .lc-products--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
    .lc-featured { grid-template-columns: minmax(0, 1fr); }
    .lc-shophead { padding: 12px 0 76px; }
    .lc-shophead--plain { padding: 12px 0 20px; }
    .lc-id--plain + .lc-desc { margin-left: 0; }
    .lc-cover { margin-top: -58px; }
    .lc-cover img { aspect-ratio: 16 / 10; border-radius: 20px; }
    .lc-id { padding-left: 12px; }
    .lc-logo { width: 96px; height: 96px; margin-top: -64px; }
    .lc-id__text { padding-top: 0; }
    .lc-actions { padding-top: 0; }
    .bl .lc-title { font-size: 2.25rem; }
    .lc-desc { font-size: 1rem; }
    .lc-section, .lc-news { margin-top: 40px; }
    .bl .lc-news__text h2, .bl .lc-tools h2 { font-size: 1.625rem; }
    .lc-join { padding: 24px 20px; margin-bottom: 48px; }
}

/* ==================================================================
L-CLUB AANMELDEN (shop/request/index.php): hero, wat is de L-club, voordelen + voorbeeldshop, stappen + formulier
================================================================== */
.lcj-hero .bl-hero__text { gap: 20px; }
.lcj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.bl .lcj-actions .lt-btn { height: 54px; padding: 0 26px; font-size: 1rem; box-shadow: 0 8px 20px rgba(64, 82, 237, .25); }
.lcj-facts { list-style: none; margin: 4px 0 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9375rem; font-weight: 600; }
.lcj-facts li { display: flex; align-items: center; gap: 8px; }
.lcj-facts i { width: 24px; height: 24px; border-radius: 50%; background: var(--lt-white); color: var(--lt-blue); display: flex; align-items: center; justify-content: center; font-size: .75rem; }

.lcj-body { display: flex; flex-direction: column; gap: 96px; padding: 80px 0 0; }
.lcj-eyebrow { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lt-blue); }
.lcj-intro { flex: 1 1 280px; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
.bl.lcj h2 { margin: 0; font-size: 2.00rem; line-height: 1.1; font-weight: 700; }
.lcj-what { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 56px; }
.lcj-what__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.lcj-lead { margin: 0; font-size: 1.25rem; line-height: 1.55; }
.lcj-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.lcj-cols > div { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--lt-line); }
.bl .lcj-cols h3 { margin: 0; font-size: 1.1875rem; font-weight: 700; }
.lcj-cols p { margin: 0; font-size: 1rem; line-height: 1.6; color: #33475B; }

.lcj-perks { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; }
.lcj-perks__list { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bl .lcj-perks__list h2 { margin-bottom: 8px; }
.lcj-perk { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid var(--lt-line); }
.lcj-perk__icon { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--lt-blue-soft); color: var(--lt-blue); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.lcj-perk__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lcj-perk__text strong { font-size: 1.1875rem; line-height: 1.25; font-weight: 700; }
.lcj-perk__text span { font-size: 1rem; line-height: 1.55; color: #33475B; }

/* voorbeeld: een echte shoppagina, licht gekanteld */
.lcj-example { flex: 1 1 380px; min-width: 0; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.bl .lcj-example__card { display: block; border-radius: 28px; background: var(--lt-white); box-shadow: 0 18px 44px rgba(12, 35, 62, .14); overflow: hidden; color: var(--lt-navy); text-decoration: none; transform: rotate(1.5deg); transition: transform .25s var(--lt-ease-out); }
.bl .lcj-example__card:hover { transform: rotate(0); color: var(--lt-navy); }
.lcj-example__cover { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; background: var(--lt-surface); }
.lcj-example__cover.is-missing { visibility: hidden; }
.lcj-example__body { padding: 0 24px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lcj-example__logo { width: 84px; height: 84px; margin-top: -42px; border: 4px solid var(--lt-white); border-radius: 22px; background: var(--lt-white); box-shadow: 0 10px 28px rgba(12, 35, 62, .16); overflow: hidden; position: relative; }
.lcj-example__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lcj-example__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.lcj-example__cats span { height: 28px; padding: 0 12px; border-radius: var(--lt-radius-pill); background: var(--lt-subtle); font-size: .8125rem; font-weight: 600; display: inline-flex; align-items: center; }
.lcj-example__body strong { font-size: 1.5rem; line-height: 1.15; font-weight: 700; }
.lcj-example__text { font-size: .9375rem; line-height: 1.5; color: #33475B; }
.lcj-example__btn { height: 44px; padding: 0 18px; border-radius: var(--lt-radius-pill); background: var(--lt-navy); color: var(--lt-white); font-size: .9375rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.lcj-example figcaption { font-size: .875rem; color: var(--lt-muted); text-align: center; }

/* stappen + formulier op het verloop */
.lcj-join { margin: 96px 0 80px; scroll-margin-top: 16px; }
.lcj-join__inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; padding: 72px 0; }
.lcj-join .lcj-intro { flex-basis: 300px; }
.bl .lcj-join .lcj-intro h2 { margin-bottom: 12px; }
.lcj-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.lcj-step { display: flex; align-items: flex-start; gap: 14px; }
.lcj-step__nr { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lt-white); color: var(--lt-navy); font-size: .9375rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lcj-step--1 .lcj-step__nr { background: var(--lt-navy); color: var(--lt-white); }
.lcj-step__nr i { display: none; }
.lcj-step__text { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }
.lcj-step__text strong { font-size: 1.0625rem; font-weight: 700; }
.lcj-step__text span { font-size: .9375rem; line-height: 1.5; color: #33475B; }
/* aanvraag verstuurd (na herladen .is-sent, na ajax het getoonde #responseform): stap 1 afgevinkt, stap 2 is aan de beurt */
:is(.lcj-join.is-sent, .lcj-join:has(#responseform:not(.d-none))) .lcj-step--1 .lcj-step__nr { background: var(--lt-mint); color: var(--lt-green-ink); }
:is(.lcj-join.is-sent, .lcj-join:has(#responseform:not(.d-none))) .lcj-step--1 .lcj-step__nr span { display: none; }
:is(.lcj-join.is-sent, .lcj-join:has(#responseform:not(.d-none))) .lcj-step--1 .lcj-step__nr i { display: inline; }
:is(.lcj-join.is-sent, .lcj-join:has(#responseform:not(.d-none))) .lcj-step--2 .lcj-step__nr { background: var(--lt-navy); color: var(--lt-white); }

.lcj-card { flex: 999 1 560px; min-width: 0; padding: 36px 40px; border-radius: 28px; background: var(--lt-white); box-shadow: 0 18px 44px rgba(12, 35, 62, .10); }
.lcj-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.lcj-form__head { display: flex; flex-direction: column; gap: 6px; }
.bl .lcj-card h2 { font-size: 1.75rem; line-height: 1.15; }
.lcj-form__head p, .lcj-done p { margin: 0; font-size: 1rem; line-height: 1.6; color: #33475B; }
.lcj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.lcj-form .lt-field { margin: 0; }
.lcj-agree { display: flex; flex-direction: column; gap: 12px; }
.lcj-agree__line { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: .9375rem; line-height: 1.5; color: #33475B; cursor: pointer; }
.lcj-agree__line .lt-check { margin: -6px; padding: 6px; flex: none; }
.bl .lcj-submit { align-self: flex-start; height: 54px; padding: 0 28px; font-size: 1rem; box-shadow: 0 8px 20px rgba(64, 82, 237, .25); }
.lcj-done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 0; }
.lcj-done.d-none { display: none; }
.lcj-done__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--lt-mint); color: var(--lt-green-ink); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.lcj-done .bl-link { margin-top: 6px; }

@media (max-width: 991.98px) {
    .lcj-intro { max-width: none; }
    .lcj-example__card { transform: none; }
}
@media (max-width: 767.98px) {
    .lcj .bl-hero__img { display: none; }
    .lcj-body { gap: 56px; padding-top: 40px; }
    .bl.lcj h2 { font-size: 1.75rem; }
    .lcj-lead { font-size: 1.0625rem; }
    .lcj-cols, .lcj-grid { grid-template-columns: minmax(0, 1fr); }
    .lcj-join { margin: 56px 0 48px; }
    .lcj-join__inner { padding: 40px 0; }
    .lcj-card { padding: 24px 20px; }
}