/** * WP WOO Toolkit — Catalogus. * * Alle maten hangen aan variabelen die de module in de zet, zodat * kolommen, ronding, beeldverhouding en accentkleur instelbaar blijven * zonder dat dit bestand aangepast hoeft te worden. */ .wwt-catalog { --wwt-cat-gap: 20px; --wwt-cat-line: #e6e8e6; --wwt-cat-ink: #16211a; --wwt-cat-muted: #6b7a70; --wwt-cat-card-bg: #fff; --wwt-cat-shadow: 0 1px 2px rgba(16, 32, 22, .05), 0 8px 24px -16px rgba(16, 32, 22, .35); --wwt-cat-shadow-hover: 0 2px 4px rgba(16, 32, 22, .06), 0 20px 40px -20px rgba(16, 32, 22, .45); box-sizing: border-box; color: var(--wwt-cat-ink); font-size: 15px; line-height: 1.45; } .wwt-catalog *, .wwt-catalog *::before, .wwt-catalog *::after, .wwt-cat-modal *, .wwt-cat-modal *::before, .wwt-cat-modal *::after { box-sizing: border-box; } .wwt-catalog button { font: inherit; cursor: pointer; } /* De chips en tellers hebben een eigen display-waarde; zonder deze regel negeren ze het hidden-attribuut. */ .wwt-catalog .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wwt-catalog [hidden], .wwt-cat-drawer [hidden], .wwt-cat-modal [hidden] { display: none !important; } /* ── Toolbar ─────────────────────────────────────────────────────────── */ .wwt-cat-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; } .wwt-cat-toolbar__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wwt-cat-search { position: relative; flex: 1 1 240px; min-width: 200px; display: flex; align-items: center; } .wwt-cat-search svg { position: absolute; left: 14px; width: 18px; height: 18px; fill: var(--wwt-cat-muted); pointer-events: none; } .wwt-cat-search input { width: 100%; height: 46px; padding: 0 40px 0 42px; border: 1px solid var(--wwt-cat-line); border-radius: 999px; background: #fff; font-size: 15px; color: inherit; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .wwt-cat-search input:focus { border-color: var(--wwt-cat-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wwt-cat-accent) 22%, transparent); } .wwt-cat-search__clear { position: absolute; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #eef1ef; color: var(--wwt-cat-muted); font-size: 18px; line-height: 1; } .wwt-cat-sort select, .wwt-cat-chip--select select { height: 46px; padding: 0 34px 0 14px; border: 1px solid var(--wwt-cat-line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7a70'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center / 18px; font-size: 15px; color: inherit; appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 100%; } .wwt-cat-views { display: inline-flex; padding: 3px; border: 1px solid var(--wwt-cat-line); border-radius: 999px; background: #fff; margin-left: auto; } .wwt-cat-view { display: grid; place-items: center; width: 40px; height: 38px; border: 0; border-radius: 999px; background: none; color: var(--wwt-cat-muted); transition: background .15s ease, color .15s ease; } .wwt-cat-view svg { width: 18px; height: 18px; fill: currentColor; } .wwt-cat-view.is-active { background: var(--wwt-cat-accent); color: var(--wwt-cat-on-accent); } .wwt-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .wwt-cat-chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--wwt-cat-line); border-radius: 999px; background: #fff; color: var(--wwt-cat-ink); font-size: 14px; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; } .wwt-cat-chip--select { padding: 0 0 0 14px; gap: 2px; } .wwt-cat-chip--select span { color: var(--wwt-cat-muted); font-size: 13px; } .wwt-cat-chip--select select { height: 36px; border: 0; background-color: transparent; padding-left: 6px; font-size: 14px; } .wwt-cat-chip--toggle.is-active, .wwt-cat-chip--select.is-active { border-color: var(--wwt-cat-accent); background: color-mix(in srgb, var(--wwt-cat-accent) 12%, #fff); color: color-mix(in srgb, var(--wwt-cat-accent) 70%, #14251a); } .wwt-cat-chip--reset { border-style: dashed; color: var(--wwt-cat-muted); } .wwt-cat-count { margin: 0; color: var(--wwt-cat-muted); font-size: 13px; } /* ── Grid ────────────────────────────────────────────────────────────── */ .wwt-cat-results { display: grid; gap: var(--wwt-cat-gap); grid-template-columns: repeat(var(--wwt-cat-cols-s, 2), minmax(0, 1fr)); } @media (min-width: 640px) { .wwt-cat-results { grid-template-columns: repeat(var(--wwt-cat-cols-m, 3), minmax(0, 1fr)); } } @media (min-width: 1024px) { .wwt-cat-results { grid-template-columns: repeat(var(--wwt-cat-cols-l, 4), minmax(0, 1fr)); } } .wwt-catalog--list .wwt-cat-results { grid-template-columns: minmax(0, 1fr); gap: 14px; } .wwt-cat-empty { grid-column: 1 / -1; margin: 32px 0; text-align: center; color: var(--wwt-cat-muted); } /* ── Kaart ───────────────────────────────────────────────────────────── */ .wwt-cat-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--wwt-cat-card-bg); border: 1px solid var(--wwt-cat-line); border-radius: var(--wwt-cat-radius, 16px); box-shadow: var(--wwt-cat-shadow); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } @media (hover: hover) and (pointer: fine) { .wwt-cat-card:hover { transform: translateY(-3px); box-shadow: var(--wwt-cat-shadow-hover); border-color: color-mix(in srgb, var(--wwt-cat-accent) 35%, var(--wwt-cat-line)); } } .wwt-cat-card.is-out { opacity: .82; } .wwt-cat-card__media { position: relative; width: 100%; /* Zonder deze twee neemt een grid-item de intrinsieke breedte van de foto als minimum, en duwt een 600px-brede productfoto de tekstkolom weg. */ min-width: 0; max-width: 100%; aspect-ratio: var(--wwt-cat-ratio, 1 / 1); background: var(--wwt-cat-img-bg, #f7f8f7); overflow: hidden; } .wwt-cat-card__link { display: block; width: 100%; height: 100%; line-height: 0; } .wwt-cat-card__media img { width: 100%; height: 100%; display: block; transition: opacity .3s ease, transform .5s ease; } .wwt-cat-card__media--contain img { object-fit: contain; padding: 10px; } .wwt-cat-card__media--cover img { object-fit: cover; } .wwt-cat-card__img--alt { position: absolute; inset: 0; opacity: 0; } @media (hover: hover) and (pointer: fine) { .wwt-cat-card:hover .wwt-cat-card__img--alt { opacity: 1; } .wwt-cat-card:hover .wwt-cat-card__media img { transform: scale(1.03); } } /* Aanraakscherm: de tweede foto bestaat daar niet. */ @media (pointer: coarse) { .wwt-cat-card__img--alt { display: none !important; } } /* Een foto die niet geladen kon worden mag de eerste niet afdekken. */ .wwt-cat-card__img.is-broken { display: none; } /* Blijft er helemaal niets over, dan een rustig vlak met een fototeken in plaats van een leeg wit gat. */ .wwt-cat-card__media.is-empty::after { content: ""; position: absolute; inset: 0; background: var(--wwt-cat-img-bg, #f7f8f7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c3ccc6'%3E%3Cpath d='M21 5H3a1 1 0 00-1 1v12a1 1 0 001 1h18a1 1 0 001-1V6a1 1 0 00-1-1zm-1 11.6l-4.3-4.3-3 3-2.2-2.2L4 20h16zM8.5 11a1.8 1.8 0 110-3.5 1.8 1.8 0 010 3.5z'/%3E%3C/svg%3E") no-repeat center / 34px; } .wwt-cat-card__badges { display: flex; align-items: flex-start; gap: 6px; } /* In het grid zweven ze over de foto; de kaart is het ankerpunt, niet het fotovak — dat vak knipt namelijk alles af wat erbuiten valt. */ .wwt-catalog--grid .wwt-cat-card__badges { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; justify-content: space-between; pointer-events: none; } /* Zonder badges mag de lege regel geen ruimte innemen. */ .wwt-cat-card__badges:empty { display: none; } .wwt-cat-badge { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.1; letter-spacing: .01em; color: #fff; background: var(--wwt-cat-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); max-width: 62%; } .wwt-cat-badge--var { margin-left: auto; background: rgba(22, 33, 26, .78); backdrop-filter: blur(4px); font-weight: 600; } .wwt-cat-badge--out { margin-left: auto; background: #b3261e; } .wwt-cat-card__quick { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 38px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); color: var(--wwt-cat-ink); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; box-shadow: 0 4px 14px rgba(16, 32, 22, .18); } @media (hover: hover) and (pointer: fine) { .wwt-cat-card:hover .wwt-cat-card__quick, .wwt-cat-card__quick:focus-visible { opacity: 1; transform: translateY(0); } } @media (hover: none), (pointer: coarse) { .wwt-cat-card__quick { position: static; opacity: 1; transform: none; display: none; } } .wwt-cat-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; padding: 12px 14px 14px; min-width: 0; } .wwt-cat-card__kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--wwt-cat-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wwt-cat-card__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; /* Standaard staat de naam er helemaal: kaarten in dezelfde rij zijn toch even hoog, en de prijs blijft door margin-top:auto onderaan uitlijnen. */ overflow-wrap: anywhere; } /* Alleen wanneer de instelling om afkappen vraagt. */ .wwt-cat-card__name--clamp { min-height: calc(1.3em * var(--wwt-cat-name-lines, 2)); display: -webkit-box; -webkit-line-clamp: var(--wwt-cat-name-lines, 2); line-clamp: var(--wwt-cat-name-lines, 2); -webkit-box-orient: vertical; overflow: hidden; } .wwt-cat-card__name a { color: inherit; text-decoration: none; } .wwt-cat-card__name a:hover { color: var(--wwt-cat-accent); } /* Alleen in lijstvorm zichtbaar; in het raster is er geen plaats voor. */ .wwt-catalog:not(.wwt-catalog--list) .wwt-cat-card__excerpt { display: none; } .wwt-cat-card__excerpt { margin: 0; color: var(--wwt-cat-muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* De hele kaart opent de popup, dus hij wijst zichzelf aan. Alleen een echte link naar de productpagina en de knoppen houden hun eigen aanwijzer. */ body.wwt-cat-cardquick .wwt-cat-card, body.wwt-cat-cardquick .wwt-cat-card__link { cursor: pointer; } .wwt-cat-card__swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .wwt-cat-swatch { padding: 3px 9px; border: 1px solid var(--wwt-cat-line); border-radius: 999px; background: #fff; font-size: 12px; color: var(--wwt-cat-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease; } .wwt-cat-swatch:hover { border-color: var(--wwt-cat-accent); color: var(--wwt-cat-accent); background: color-mix(in srgb, var(--wwt-cat-accent) 8%, #fff); } /* Staat er een kleur of een variantfoto bij de eigenschap, dan is de knop het staaltje zelf: geen randje, geen witte achtergrond eromheen. */ .wwt-cat-swatch--visual { padding: 0; border: 0; border-radius: 50%; background: none; line-height: 0; overflow: visible; } .wwt-cat-swatch--visual:hover { background: none; } .wwt-cat-swatch--visual .wwt-swatch__box, .wwt-cat-swatch--visual .wwt-swatch__color { width: var(--wwt-cat-swatch-size, 38px); height: var(--wwt-cat-swatch-size, 38px); border-radius: inherit; } .wwt-cat-swatch--visual .wwt-swatch__caption { font-size: 10px; padding: 1px 2px 2px; } @media (hover: hover) and (pointer: fine) { .wwt-cat-swatch--visual:hover .wwt-swatch__box, .wwt-cat-swatch--visual:hover .wwt-swatch__color { box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--wwt-cat-accent); } } .wwt-cat-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; /* Duwt prijs en knop naar de onderkant: op elke kaart dezelfde lijn. */ margin-top: auto; padding-top: 8px; min-width: 0; /* Vaste hoogte voor het prijsblok, zodat een aanbieding met doorgestreepte prijs de knoprij niet omhoog duwt ten opzichte van de buurkaart. */ min-height: 58px; } .wwt-cat-card__price { min-width: 0; line-height: 1.25; } .wwt-cat-price__now { font-size: 17px; font-weight: 700; white-space: nowrap; } .wwt-cat-price__was { color: var(--wwt-cat-muted); font-size: 13px; text-decoration: line-through; white-space: nowrap; } .wwt-cat-price__from, .wwt-cat-price__suffix { display: inline-block; color: var(--wwt-cat-muted); font-size: 12px; font-weight: 500; } .wwt-cat-price__suffix { display: block; } .wwt-cat-price__ask { font-size: 14px; font-weight: 600; color: var(--wwt-cat-muted); } /* De knop rechtsonder. */ .wwt-cat-buy { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--wwt-cat-accent); border-radius: 999px; background: var(--wwt-cat-accent); color: var(--wwt-cat-on-accent); font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1; transition: filter .15s ease, transform .15s ease; } .wwt-cat-buy svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; } .wwt-cat-buy:hover { filter: brightness(.94); color: var(--wwt-cat-on-accent); } .wwt-cat-buy:active { transform: scale(.97); } .wwt-cat-buy[disabled] { opacity: .5; cursor: not-allowed; } .wwt-cat-buy--ghost { background: #fff; border-color: var(--wwt-cat-line); color: var(--wwt-cat-muted); } .wwt-cat-buy.is-done { background: #14251a; border-color: #14251a; color: #fff; } /* Op een telefoon schuiven de filterchips opzij in plaats van door te lopen over drie regels — zoals in een app. */ @media (max-width: 720px) { .wwt-cat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px; } .wwt-cat-chips::-webkit-scrollbar { display: none; } .wwt-cat-chip { flex: 0 0 auto; } .wwt-cat-badge { font-size: 11px; padding: 4px 8px; max-width: 76%; } } /* Smalle schermen: prijs boven de knop, knop over de volle kaartbreedte. Naast elkaar wordt de knop anders afgesneden zodra de prijs breed is. */ @media (max-width: 560px) { .wwt-catalog--grid .wwt-cat-card__foot { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; } .wwt-catalog--grid .wwt-cat-buy { width: 100%; } .wwt-catalog--grid .wwt-cat-card__body { padding: 12px 12px 13px; } .wwt-cat-price__suffix { display: inline-block; } .wwt-catalog--list .wwt-cat-card__foot { flex-wrap: wrap; } .wwt-catalog--list .wwt-cat-buy { flex: 1 1 100%; } } /* ── Lijstweergave ───────────────────────────────────────────────────── */ .wwt-catalog--list .wwt-cat-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: stretch; } /* Het fotovak is hier te smal voor een badge over de foto; die zou worden afgesneden. In de lijst staan ze daarom in de tekstkolom, boven de naam. */ .wwt-catalog--list .wwt-cat-card__badges { position: static; justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; pointer-events: auto; } .wwt-catalog--list .wwt-cat-badge { max-width: none; margin: 0; } .wwt-catalog--list .wwt-cat-card__media { aspect-ratio: auto; border-right: 1px solid var(--wwt-cat-line); /* Het vak vult de hele regelhoogte, maar de foto blijft een vierkant in het midden — anders wordt hij piepklein zodra een regel hoog uitvalt. */ display: flex; align-items: center; justify-content: center; } .wwt-catalog--list .wwt-cat-card__link { height: auto; max-height: 100%; aspect-ratio: 1 / 1; } /* Ook bij een hele korte regel blijft er een fatsoenlijk fotovlak over. */ .wwt-catalog--list .wwt-cat-card__media { min-height: 104px; } .wwt-catalog--list .wwt-cat-card__quick { display: none; } .wwt-catalog--list .wwt-cat-card__name { min-height: 0; font-size: 16px; } .wwt-catalog--list .wwt-cat-card__name--clamp { -webkit-line-clamp: 3; line-clamp: 3; } .wwt-catalog--list .wwt-cat-card__body { padding: 14px 16px; justify-content: center; } .wwt-catalog--list .wwt-cat-card__foot { min-height: 0; margin-top: 6px; } @media (min-width: 720px) { .wwt-catalog--list .wwt-cat-card { grid-template-columns: 160px minmax(0, 1fr); } .wwt-catalog--list .wwt-cat-card__foot { align-items: center; } .wwt-catalog--list .wwt-cat-price__suffix { display: inline-block; } } /* ── Voettekst ───────────────────────────────────────────────────────── */ .wwt-cat-footer { display: flex; justify-content: center; margin-top: 26px; } .wwt-cat-more { min-height: 46px; padding: 0 26px; border: 1px solid var(--wwt-cat-line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: var(--wwt-cat-ink); transition: border-color .15s ease, color .15s ease; } .wwt-cat-more:hover { border-color: var(--wwt-cat-accent); color: var(--wwt-cat-accent); } .wwt-cat-more.is-busy { opacity: .6; pointer-events: none; } .wwt-cat-pages { display: flex; flex-wrap: wrap; gap: 6px; } .wwt-cat-page { min-width: 40px; height: 40px; border: 1px solid var(--wwt-cat-line); border-radius: 999px; background: #fff; font-weight: 600; } .wwt-cat-page.is-active { background: var(--wwt-cat-accent); border-color: var(--wwt-cat-accent); color: var(--wwt-cat-on-accent); } /* ── Laadstand ───────────────────────────────────────────────────────── */ .wwt-catalog.is-loading .wwt-cat-results { opacity: .45; pointer-events: none; transition: opacity .15s ease; } .wwt-cat-skeleton { border-radius: var(--wwt-cat-radius, 16px); background: linear-gradient(100deg, #eef1ef 30%, #f7f9f7 50%, #eef1ef 70%); background-size: 240% 100%; animation: wwt-cat-shimmer 1.2s infinite linear; aspect-ratio: 3 / 4; } @keyframes wwt-cat-shimmer { to { background-position: -240% 0; } } /* ── Quick view ──────────────────────────────────────────────────────── */ .wwt-cat-modal { position: fixed; inset: 0; /* Hoog genoeg om ook boven een vast menu of hamburgerknop van het thema te komen; Divi zit rond de 100.000. */ z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; } .wwt-cat-modal[hidden] { display: none; } .wwt-cat-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 20, 15, .55); backdrop-filter: blur(3px); animation: wwt-cat-fade .2s ease; } .wwt-cat-modal__dialog { position: relative; width: min(920px, 100%); max-height: min(88vh, 760px); overflow: auto; background: #fff; border-radius: 20px; box-shadow: 0 24px 70px rgba(10, 20, 14, .35); animation: wwt-cat-pop .22s cubic-bezier(.2, .8, .3, 1); -webkit-overflow-scrolling: touch; } @keyframes wwt-cat-fade { from { opacity: 0; } } @keyframes wwt-cat-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } } .wwt-cat-modal__close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); font-size: 24px; line-height: 1; color: #16211a; cursor: pointer; } /* Op een telefoon blijft de sluitknop rechtsboven staan; de popup zelf schuift onder een vaste kopbalk door. Wel wat groter, zodat hij met een duim goed te raken is. */ @media (max-width: 781px) { .wwt-cat-modal__close { width: 44px; height: 44px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); } } .wwt-cat-qv { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 780px) { .wwt-cat-qv { grid-template-columns: 46% minmax(0, 1fr); } /* Ruimte voor de sluitknop rechtsboven. */ .wwt-cat-qv__title, .wwt-cat-qv__kicker { padding-right: 46px; } } .wwt-cat-qv__media { background: var(--wwt-cat-img-bg, #f7f8f7); padding: 16px; } .wwt-cat-qv__stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: #fff; touch-action: pan-y; } .wwt-cat-qv__slide { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.02); transition: opacity .28s ease, transform .28s ease; pointer-events: none; } .wwt-cat-qv__slide.is-active { opacity: 1; transform: none; pointer-events: auto; } .wwt-cat-qv__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .wwt-cat-qv__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 10px rgba(0, 0, 0, .16); font-size: 22px; line-height: 1; color: #16211a; } .wwt-cat-qv__nav--prev { left: 8px; } .wwt-cat-qv__nav--next { right: 8px; } .wwt-cat-qv__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .wwt-cat-qv__thumb { flex: 0 0 auto; width: 58px; height: 58px; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: #fff; } .wwt-cat-qv__thumb img { width: 100%; height: 100%; object-fit: contain; } .wwt-cat-qv__thumb.is-active { border-color: var(--wwt-cat-accent); } .wwt-cat-qv__info { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; } .wwt-cat-qv__kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--wwt-cat-muted, #6b7a70); } .wwt-cat-qv__title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: #16211a; } .wwt-cat-qv__price .wwt-cat-price__now { font-size: 22px; } .wwt-cat-qv__text { margin: 0; color: #4a5a50; font-size: 14px; } .wwt-cat-qv__text p { margin: 0 0 8px; } .wwt-cat-qv__variant { margin-top: 6px; } .wwt-cat-qv__variant-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wwt-cat-muted, #6b7a70); } .wwt-cat-qv__options { display: flex; flex-wrap: wrap; gap: 8px; } .wwt-cat-option { min-height: 40px; padding: 0 14px; border: 1px solid #e6e8e6; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 500; color: #16211a; transition: border-color .15s ease, background .15s ease, color .15s ease; } .wwt-cat-option:hover { border-color: var(--wwt-cat-accent); } .wwt-cat-option.is-active { border-color: var(--wwt-cat-accent); background: var(--wwt-cat-accent); color: var(--wwt-cat-on-accent); } .wwt-cat-option.is-disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; } /* Bestaat wel, maar is op: gedempt, met het woord erbij. */ .wwt-cat-option.is-soldout { position: relative; opacity: .55; } .wwt-cat-option.is-soldout:not(.wwt-cat-option--swatch) { text-decoration: line-through; } /* Het woord bij een gewone tekstknop. */ .wwt-cat-option__soldout { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.6; text-decoration: none; white-space: nowrap; pointer-events: none; vertical-align: middle; } /* Een stalletje is te klein voor tekst: daar gaat er een streep doorheen. Het woord zelf staat in de tooltip en in het aria-label. */ .wwt-cat-option--swatch.is-soldout .wwt-swatch__color { position: relative; } .wwt-cat-option--swatch.is-soldout .wwt-swatch__box::before, .wwt-cat-option--swatch.is-soldout .wwt-swatch__color::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 4; width: 132%; height: 2px; background: #b3261e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; } /* Een uitverkochte knop blijft leesbaar, maar nodigt niet uit. De accentkleur wordt met een eigen regel gezet; die moet hier overstemd worden. */ #wwt-catalog-modal .wwt-cat-buy.is-soldout, .wwt-catalog .wwt-cat-buy.is-soldout, .wwt-cat-buy.is-soldout { background: #eceeed; border-color: #d6dad8; color: #6b7a70; cursor: not-allowed; } .wwt-cat-qv__stock { margin: 0; font-size: 13px; font-weight: 600; color: var(--wwt-cat-accent); } .wwt-cat-qv__stock.is-out { color: #b3261e; } .wwt-cat-qv__actions { display: flex; gap: 10px; align-items: stretch; margin-top: 6px; } .wwt-cat-qty { display: inline-flex; align-items: center; border: 1px solid #e6e8e6; border-radius: 999px; overflow: hidden; flex: 0 0 auto; } .wwt-cat-qty button { width: 42px; height: 46px; border: 0; background: #fff; font-size: 18px; color: #16211a; } .wwt-cat-qty button:hover { background: #f2f5f2; } .wwt-cat-qty input { width: 46px; height: 46px; border: 0; text-align: center; font-size: 15px; font-weight: 600; background: #fff; color: #16211a; -moz-appearance: textfield; } .wwt-cat-qty input::-webkit-outer-spin-button, .wwt-cat-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wwt-cat-buy--wide { flex: 1 1 auto; min-height: 46px; font-size: 15px; } .wwt-cat-qv__link { margin: 4px 0 0; font-size: 13px; } .wwt-cat-qv__link a { color: var(--wwt-cat-muted, #6b7a70); } .wwt-cat-qv__error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #92231c; font-size: 13px; } .wwt-cat-modal__loading { display: grid; place-items: center; min-height: 260px; color: var(--wwt-cat-muted, #6b7a70); font-size: 14px; } body.wwt-cat-modal-open { overflow: hidden; } /* ── Filterpanelen en prijsschuif ────────────────────────────────────── */ .wwt-cat-chip--panel { position: relative; padding: 0; overflow: visible; } .wwt-cat-chip__button { display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 36px; padding: 0 10px 0 14px; border: 0; border-radius: 999px; background: none; color: inherit; font-size: 14px; white-space: nowrap; } .wwt-cat-chip__button svg { width: 16px; height: 16px; fill: currentColor; opacity: .6; transition: transform .15s ease; } .wwt-cat-chip.is-open .wwt-cat-chip__button svg { transform: rotate(180deg); } .wwt-cat-chip__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--wwt-cat-accent); color: var(--wwt-cat-on-accent); font-size: 11px; font-style: normal; font-weight: 700; } .wwt-cat-chip__count--price { min-width: 10px; padding: 0; width: 10px; height: 10px; font-size: 0; } .wwt-cat-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: max-content; min-width: 220px; max-width: min(320px, 86vw); padding: 12px; border: 1px solid var(--wwt-cat-line); border-radius: 14px; background: #fff; box-shadow: 0 12px 34px rgba(16, 32, 22, .18); white-space: normal; animation: wwt-cat-drop .14s ease; } @keyframes wwt-cat-drop { from { opacity: 0; transform: translateY(-4px); } } .wwt-cat-panel[hidden] { display: none; } .wwt-cat-panel__list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; } .wwt-cat-check { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; font-size: 14px; line-height: 1.25; cursor: pointer; } .wwt-cat-check:hover { background: #f3f6f3; } .wwt-cat-check input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--wwt-cat-accent); } .wwt-cat-panel__clear { width: 100%; margin-top: 10px; padding: 8px; border: 1px dashed var(--wwt-cat-line); border-radius: 9px; background: none; color: var(--wwt-cat-muted); font-size: 13px; } .wwt-cat-panel__clear:hover { border-color: var(--wwt-cat-accent); color: var(--wwt-cat-accent); } /* Prijs */ .wwt-cat-panel--price { min-width: 260px; } .wwt-cat-range__value { margin: 0 0 14px; font-size: 15px; font-weight: 600; text-align: center; } .wwt-cat-range { position: relative; height: 26px; margin: 0 8px; } .wwt-cat-range__track { position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 999px; background: #e6e8e6; } .wwt-cat-range__fill { position: absolute; top: 0; bottom: 0; background: var(--wwt-cat-accent); border-radius: 999px; } /* Twee schuiven over elkaar: alleen de duimen vangen muis en vinger. */ .wwt-cat-range input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0; background: none; appearance: none; -webkit-appearance: none; pointer-events: none; } .wwt-cat-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 2px solid var(--wwt-cat-accent); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(16, 32, 22, .25); cursor: grab; } .wwt-cat-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 2px solid var(--wwt-cat-accent); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(16, 32, 22, .25); cursor: grab; } .wwt-cat-range input[type="range"]::-moz-range-track { background: none; border: 0; } /* Op een telefoon schuiven de chips opzij; een paneel dat aan de rechterkant opent zou dan half buiten beeld vallen. */ @media (max-width: 720px) { .wwt-cat-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 70vh; overflow-y: auto; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(16, 32, 22, .25); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); } .wwt-cat-panel__list { max-height: 46vh; } .wwt-cat-check { padding: 11px 8px; font-size: 15px; } } /* ── Uitschuifpaneel met de filters ──────────────────────────────────── */ .wwt-cat-filters-open { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 42px; padding: 0 16px; border: 1px solid var(--wwt-cat-line); border-radius: 999px; background: #fff; color: var(--wwt-cat-ink); font-size: 14px; font-weight: 600; transition: border-color .15s ease, color .15s ease; } .wwt-cat-filters-open:hover { border-color: var(--wwt-cat-accent); color: var(--wwt-cat-accent); } .wwt-cat-filters-open svg { width: 18px; height: 18px; fill: currentColor; } .wwt-cat-filters-open__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--wwt-cat-accent); color: var(--wwt-cat-on-accent); font-size: 11px; font-style: normal; font-weight: 700; } .wwt-cat-drawer__backdrop { position: fixed; inset: 0; /* Zelfde reden als bij de popup: boven een vast menu van het thema. */ z-index: 999990; background: rgba(12, 20, 15, .5); backdrop-filter: blur(2px); animation: wwt-cat-fade .2s ease; } .wwt-cat-drawer__backdrop[hidden] { display: none; } .wwt-cat-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 999991; display: flex; flex-direction: column; width: min(360px, 88vw); background: #fff; box-shadow: 8px 0 40px rgba(12, 20, 15, .22); animation: wwt-cat-slide .22s cubic-bezier(.2, .8, .3, 1); } .wwt-cat-drawer[hidden] { display: none; } @keyframes wwt-cat-slide { from { transform: translateX(-100%); } } .wwt-cat-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--wwt-cat-line); font-size: 17px; } .wwt-cat-drawer__close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f2f5f2; font-size: 24px; line-height: 1; color: var(--wwt-cat-ink); } .wwt-cat-drawer .wwt-cat-chips { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; margin: 0; } .wwt-cat-drawer__foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--wwt-cat-line); } body.wwt-cat-drawer-open { overflow: hidden; } /* In het paneel staan de filters onder elkaar, en klapt een lijst open op zijn plek in plaats van als zwevend menu. */ .wwt-cat-chips--stacked { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; overflow: visible; } .wwt-cat-chips--stacked .wwt-cat-chip { width: 100%; height: auto; min-height: 46px; border-radius: 12px; white-space: normal; } .wwt-cat-chips--stacked .wwt-cat-chip--panel { flex-direction: column; align-items: stretch; padding: 0; } .wwt-cat-chips--stacked .wwt-cat-chip__button { width: 100%; height: auto; justify-content: flex-start; min-height: 46px; padding: 0 14px; font-size: 15px; font-weight: 600; } .wwt-cat-chips--stacked .wwt-cat-chip__button svg { margin-left: auto; } .wwt-cat-chips--stacked .wwt-cat-panel { position: static; width: auto; min-width: 0; max-width: none; max-height: none; padding: 0 10px 12px; border: 0; border-radius: 0; box-shadow: none; animation: none; } .wwt-cat-chips--stacked .wwt-cat-panel__list { max-height: 240px; } .wwt-cat-chips--stacked .wwt-cat-chip--toggle, .wwt-cat-chips--stacked .wwt-cat-chip--reset { justify-content: flex-start; padding: 0 14px; font-size: 15px; } .wwt-cat-chips--stacked .wwt-cat-chip--select { padding: 0 0 0 14px; } @media (max-width: 720px) { .wwt-cat-chips--stacked { margin: 0; padding: 12px 16px; } } /* ── Blok op een pagina (homepage) ───────────────────────────────────── */ .wwt-cat-section { margin: 0 0 40px; } .wwt-cat-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .wwt-cat-section__title { margin: 0; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.2; font-weight: 700; color: var(--wwt-cat-ink); } .wwt-cat-section__link { flex: 0 0 auto; margin-left: auto; font-size: 14px; font-weight: 600; color: var(--wwt-cat-accent); text-decoration: none; white-space: nowrap; } .wwt-cat-section__link::after { content: " →"; } .wwt-cat-section__link:hover { text-decoration: underline; } .wwt-cat-badge--new { background: var(--wwt-cat-accent); } /* Zijwaarts schuivende rij in plaats van een raster. */ .wwt-catalog--scroll .wwt-cat-results { display: flex; gap: var(--wwt-cat-gap, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; } .wwt-catalog--scroll .wwt-cat-card { flex: 0 0 auto; width: clamp(150px, 44vw, 230px); scroll-snap-align: start; } @media (min-width: 900px) { .wwt-catalog--scroll .wwt-cat-results { margin: 0; padding-left: 0; padding-right: 0; } .wwt-catalog--scroll .wwt-cat-card { width: clamp(200px, 22vw, 280px); } } /* ── Swatches in de quick view ───────────────────────────────────────── */ .wwt-cat-option--swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 4px; border-radius: 12px; background: none; border-color: transparent; } .wwt-cat-option--swatch .wwt-swatch__box { position: relative; width: var(--wwt-swatch-size, 48px); height: var(--wwt-swatch-size, 48px); border-radius: var(--wwt-swatch-radius, 50%); border: 1px solid rgba(20, 37, 26, .16); /* De streep bij "uitverkocht" blijft zo binnen het rondje. */ overflow: hidden; } .wwt-cat-option--swatch.is-active .wwt-swatch__box { border-color: var(--wwt-cat-accent); box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--wwt-cat-accent); } .wwt-cat-option--swatch.is-disabled .wwt-swatch__box { opacity: .35; } .wwt-cat-option--swatch img, .wwt-cat-option--swatch .wwt-swatch__color { display: block; width: var(--wwt-swatch-size, 44px); height: var(--wwt-swatch-size, 44px); margin: 0; border-radius: var(--wwt-swatch-radius, 50%); border: 1px solid rgba(20, 37, 26, .16); object-fit: cover; transition: box-shadow .15s ease, border-color .15s ease; } .wwt-cat-option--swatch .wwt-cat-option__name { font-size: 11px; color: var(--wwt-cat-muted, #6b7a70); max-width: calc(var(--wwt-swatch-size, 44px) + 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wwt-cat-option--swatch:hover img, .wwt-cat-option--swatch:hover .wwt-swatch__color { border-color: var(--wwt-cat-accent); } .wwt-cat-option--swatch.is-active { background: none; border-color: transparent; color: inherit; } .wwt-cat-option--swatch.is-active img, .wwt-cat-option--swatch.is-active .wwt-swatch__color { border-color: var(--wwt-cat-accent); box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--wwt-cat-accent); } .wwt-cat-option--swatch.is-active .wwt-cat-option__name { color: var(--wwt-cat-ink); font-weight: 600; } .wwt-cat-option--swatch.is-disabled { text-decoration: none; } .wwt-cat-option--swatch.is-disabled img, .wwt-cat-option--swatch.is-disabled .wwt-swatch__color { opacity: .35; } /* ── Toegankelijkheid en rustige weergave ────────────────────────────── */ .wwt-catalog :focus-visible, .wwt-cat-modal :focus-visible { outline: 3px solid color-mix(in srgb, var(--wwt-cat-accent) 55%, transparent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .wwt-catalog *, .wwt-cat-modal * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── Foto vergroot ───────────────────────────────────────────────────── */ .wwt-cat-light { position: fixed; inset: 0; /* Boven de popup, en dus ook boven een vast menu van het thema. */ z-index: 1000000; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; overscroll-behavior: contain; } .wwt-cat-light[hidden] { display: none; } .wwt-cat-light__backdrop { position: absolute; inset: 0; background: rgba(8, 12, 10, .94); animation: wwt-cat-fade .2s ease; } .wwt-cat-light__track { box-sizing: border-box; position: relative; display: flex; width: 100%; height: 100%; transition: transform .25s cubic-bezier(.2, .8, .3, 1); touch-action: none; cursor: grab; } .wwt-cat-light__slide { box-sizing: border-box; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 16px; } .wwt-cat-light__slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-drag: none; will-change: transform; } .wwt-cat-light__slide.is-zoomed { cursor: move; } .wwt-cat-light__close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); font-size: 27px; line-height: 1; color: #16211a; cursor: pointer; } .wwt-cat-light__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #16211a; font-size: 26px; line-height: 1; cursor: pointer; } .wwt-cat-light__nav--prev { left: 12px; } .wwt-cat-light__nav--next { right: 12px; } /* Op een aanraakscherm veeg je; dan zijn de pijlen alleen in de weg. */ @media (hover: none), (pointer: coarse) { .wwt-cat-light__nav { display: none; } } .wwt-cat-light__count { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; } .wwt-cat-light__count[hidden] { display: none; } /* De pagina eronder mag niet meescrollen. */ body.wwt-cat-light-open { overflow: hidden; } /* De foto in de popup nodigt uit tot aanklikken. */ .wwt-cat-qv__slide img { cursor: zoom-in; } @media (prefers-reduced-motion: reduce) { .wwt-cat-light__track, .wwt-cat-light__slide img { transition: none !important; } }