/* =====================================================================
   onwine-categorie.css · VOLLEDIG BESTAND · versie 1 · 5 nov 2026 (zonder filteropmaak)
   Bouwblokken voor alle categoriepagina's (prefix .ocp-).
   Wordt alleen geladen op categoriepagina's (template pages/collection.rain),
   zie de regel in het layoutbestand.
   Eerste gebruiker: Alle wijnen (/nl/wijnen/, /de/weine/, /en/wines/).
   Later: wijnsoort, druif en wijngebied gebruiken dezelfde blokken.
   Let op: Lightspeed stript <span> en <style> uit het inhoudsveld en een
   <a> rond blokelementen. Daarom werken vlaggen, bolletjes en pijlen via
   ::before en ::after, en staat in links alleen <b>, <em> en tekst.
   ===================================================================== */

.ocp { --ocp-ink: #2d2a4e; --ocp-red: #be2f2b; --ocp-muted: #6b6880; --ocp-line: #e7e4ee; --ocp-soft: #f6f4f9; --ocp-txt: #4a4766; color: var(--ocp-ink); }
.ocp *, .ocp *::before, .ocp *::after { box-sizing: border-box; }
.ocp p { margin: 0; }
.ocp a { text-decoration: none !important; }

/* ---------- 0. Thema-onderdelen die het nieuwe ontwerp vervangt ---------- */
/* De oude "Ga direct naar"-knoppen van het thema (subcategorieën) verbergen op pagina's met het nieuwe ontwerp. */
.wb-collection-content:has(.ocp) .custom-subcats { display: none !important; }
.wb-collection-content:has(.ocp) > p:empty { display: none; }

/* ---------- 1. Boven de wijnen ---------- */
.ocp-lead { font-size: 15px; line-height: 1.55; color: var(--ocp-muted); max-width: 680px; margin: 0 0 12px !important; }
.ocp-usp { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px !important; }
.ocp-usp b { font-size: 12px; font-weight: 700; color: var(--ocp-ink); background: var(--ocp-soft); border-radius: 7px; padding: 6px 10px; }
.ocp-usp b::before { content: "\2713\00a0"; color: #2e8b57; }

/* Navigatieblok "Ga naar" (geen filter: elke knop opent een andere pagina) */
.ocp-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; background: var(--ocp-soft); border-radius: 14px; padding: 14px; overflow: hidden; }
.ocp-nav > div { min-width: 0; }
.ocp-navh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 800; color: var(--ocp-ink); margin: 0 0 8px !important; }
.ocp-navh b { font-size: 11px; font-weight: 500; color: var(--ocp-muted); }
.ocp-navh b.ocp-d { display: none; }
.ocp-nbs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 5px; scrollbar-width: none; }
.ocp-nbs::-webkit-scrollbar { display: none; }
.ocp-nb { flex: 0 0 auto; min-width: 140px; scroll-snap-align: start; display: flex !important; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--ocp-ink); border-radius: 10px; padding: 9px 10px; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--ocp-ink) !important; box-shadow: 0 2px 0 var(--ocp-ink); white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease; }
.ocp-nb::after { content: "\2192"; margin-left: auto; padding-left: 8px; color: var(--ocp-red); font-weight: 800; }
.ocp-nb:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--ocp-ink); color: var(--ocp-ink) !important; }
.ocp-nb.is-pp { background: var(--ocp-ink); color: #fff !important; }
.ocp-nb.is-pp::after { color: #ffd6d8; }
.ocp-nb.is-pp:hover { color: #fff !important; }

/* Vlaggen en kleurbolletjes (via ::before op de link) */
.ocp .fl::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.ocp .fl-it::before { background: linear-gradient(90deg,#009246 33.3%,#fff 33.3% 66.6%,#ce2b37 66.6%); }
.ocp .fl-fr::before { background: linear-gradient(90deg,#0055a4 33.3%,#fff 33.3% 66.6%,#ef4135 66.6%); }
.ocp .fl-es::before { background: linear-gradient(#aa151b 25%,#f1bf00 25% 75%,#aa151b 75%); }
.ocp .fl-de::before { background: linear-gradient(#000 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%); }
.ocp .fl-at::before { background: linear-gradient(#ed2939 33.3%,#fff 33.3% 66.6%,#ed2939 66.6%); }
.ocp .fl-nl::before { background: linear-gradient(#ae1c28 33.3%,#fff 33.3% 66.6%,#21468b 66.6%); }
.ocp .dt::before { content: ""; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; }
.ocp .dt-r::before { background: #7a1f33; }
.ocp .dt-w::before { background: #e3c75f; }
.ocp .dt-m::before { background: #fff3cf; box-shadow: inset 0 0 0 2px #d9c27a; }
.ocp .dt-ro::before { background: #f2a7b0; }
.ocp .dt-n::before { background: #8bb174; }

/* Scheidingslijn waar het overzicht (en het Lightspeed-filter) begint */
.ocp-split { display: flex; align-items: center; gap: 12px; margin: 24px 0 4px; scroll-margin-top: 130px; }
.ocp-split p { font-size: 17px; font-weight: 800; color: var(--ocp-ink); white-space: nowrap; }
.ocp-split::after { content: ""; flex: 1; height: 1px; background: var(--ocp-line); }

/* ---------- 2. Onder de wijnen ---------- */
.ocp-bottom { margin-top: 40px; }
.ocp-hub { display: grid; gap: 28px; border-top: 1px solid var(--ocp-line); padding-top: 26px; }
.ocp-h3 { display: inline-block; font-size: 17px !important; font-weight: 800 !important; color: var(--ocp-ink) !important; margin: 0 0 12px !important; padding: 0 0 7px !important; border-bottom: 3px solid var(--ocp-red); line-height: 1.25 !important; }
.ocp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ocp-tile { position: relative; display: flex !important; align-items: flex-end; height: 72px; border-radius: 10px; background: linear-gradient(160deg,#2d2a4e,#5a1f33); color: #fff !important; font-size: 13px; font-weight: 700; padding: 9px 10px; transition: transform .12s ease, box-shadow .12s ease; }
.ocp-tile::before { position: absolute; top: 9px; left: 10px; flex: none !important; width: 18px !important; height: 18px !important; }
.ocp-tile::after { content: "\2192"; position: absolute; right: 10px; bottom: 9px; color: #ffd6d8; font-weight: 800; }
.ocp-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(45,42,78,.2); color: #fff !important; }
.ocp-lbl { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--ocp-muted); margin: 4px 0 7px !important; }
.ocp-lbl::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--ocp-red); }
.ocp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px !important; }
.ocp-chip { display: inline-block; border: 1px solid var(--ocp-line); background: #fff; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--ocp-ink) !important; transition: border-color .12s ease, color .12s ease; }
.ocp-chip:hover { border-color: var(--ocp-red); color: var(--ocp-red) !important; }

.ocp-sec { margin: 38px 0 0; }
.ocp-h2 { font-size: 22px !important; font-weight: 800 !important; color: var(--ocp-ink) !important; margin: 0 0 4px !important; line-height: 1.25 !important; }
.ocp-sub { font-size: 13px; color: var(--ocp-muted); margin: 0 0 14px !important; }

/* Instapkaarten */
.ocp-cards { display: grid; gap: 12px; }
.ocp-card { position: relative; display: block !important; min-height: 88px; padding: 14px 14px 14px 88px; border: 1px solid var(--ocp-line); border-radius: 14px; background: var(--ocp-soft); color: var(--ocp-txt) !important; font-size: 13px; line-height: 1.45; transition: transform .14s ease, box-shadow .14s ease; }
.ocp-card::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 11px; background: linear-gradient(135deg,#7a1f33,#e67276); }
.ocp-card.is-abo::before { background: linear-gradient(135deg,#2d2a4e,#6b5fb5); }
.ocp-card.is-hulp::before { background: linear-gradient(135deg,#9b6a2c,#e3c75f); }
.ocp-card b { display: block; font-size: 15px; color: var(--ocp-ink); margin: 0 0 2px; }
.ocp-card em { display: block; font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--ocp-red); margin-top: 4px; }
.ocp-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(45,42,78,.14); }

/* Gids en FAQ */
.ocp-two { display: grid; gap: 30px; }
.ocp-gids p { font-size: 14px; line-height: 1.65; color: var(--ocp-txt); margin: 0 0 10px !important; }
.ocp-gids h3 { font-size: 15px !important; font-weight: 800 !important; color: var(--ocp-ink) !important; margin: 16px 0 6px !important; }
.ocp-gids a, .ocp-faq a { color: var(--ocp-red) !important; font-weight: 600; }
.ocp-gids details > summary { list-style: none; cursor: pointer; color: var(--ocp-red); font-weight: 700; font-size: 14px; }
.ocp-gids details > summary::-webkit-details-marker { display: none; }
.ocp-gids details > summary::after { content: " \2193"; }
.ocp-gids details[open] > summary { display: none; }
.ocp-faq details { border-top: 1px solid var(--ocp-line); }
.ocp-faq details:last-of-type { border-bottom: 1px solid var(--ocp-line); }
.ocp-faq summary { position: relative; list-style: none; cursor: pointer; padding: 13px 30px 13px 0; font-size: 14px; font-weight: 700; color: var(--ocp-ink); }
.ocp-faq summary::-webkit-details-marker { display: none; }
.ocp-faq summary::after { content: "+"; position: absolute; right: 2px; top: 10px; color: var(--ocp-red); font-size: 20px; font-weight: 700; }
.ocp-faq details[open] summary::after { content: "\2212"; }
.ocp-faq details p { font-size: 13.5px; line-height: 1.6; color: var(--ocp-txt); padding: 0 0 14px; margin: 0 !important; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .ocp-lead { font-size: 15.5px; }
  .ocp-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 26px; padding: 16px 18px 18px; }
  .ocp-navh b.ocp-m { display: none; }
  .ocp-navh b.ocp-d { display: inline; }
  .ocp-nbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; overflow: visible; margin: 0; padding: 0; }
  .ocp-nb { min-width: 0; }
  .ocp-hub { grid-template-columns: 1fr 1.25fr 1.1fr; gap: 34px; }
  .ocp-tiles { grid-template-columns: 1fr 1fr; gap: 9px; }
  .ocp-tile { height: 76px; font-size: 13.5px; }
  .ocp-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ocp-two { grid-template-columns: 1.1fr 1fr; gap: 50px; }
}
/* =================== EINDE onwine-categorie.css v1 =================== */