/* ========================================================================= Mimoda — Shop / categorie-archief. Stylet de core .sellabees-shop*-markup + de eigen .mimoda-product-kaart. 1:1 op Figma "Categoriepagina" (192:250). ========================================================================= */ /* --- Banner (volle breedte, 400px) ---------------------------------- */ .mimoda-shop-banner { position: relative; width: 100%; height: clamp(240px, 20.8vw, 400px); overflow: hidden; } .mimoda-shop-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Sale-promo-overlay "Tot wel 50% korting" (Figma 252:2822 / 409:5051): wit, links- uitgelijnd op de content-marge, verticaal gecentreerd. "50%" in de serif-display (Abril Fatface), "Tot wel" + "korting" in Kumbh Sans ExtraBold uppercase. Zachte schaduw voor leesbaarheid op de lichte collage-banner (deviatie t.o.v. het platte wit in Figma). */ .mimoda-shop-banner__promo { display: none; } .mimoda-shop-banner--sale .mimoda-shop-banner__promo { display: block; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); max-width: calc(1640px + 48px); margin-inline: auto; padding-inline: clamp(24px, 4vw, 88px); color: #fff; pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); } .mimoda-shop-banner__promo-kicker, .mimoda-shop-banner__promo-amount { display: block; font-family: var(--mimoda-font); font-weight: 800; font-size: clamp(16px, 2.1vw, 30px); line-height: 1.05; text-transform: uppercase; } .mimoda-shop-banner__promo-amount { line-height: 1; } .mimoda-shop-banner__promo-num { font-family: var(--mimoda-display); font-weight: 400; font-size: clamp(60px, 6.6vw, 96px); line-height: 1; text-transform: none; margin-right: 8px; vertical-align: baseline; } /* --- Shop-container -------------------------------------------------- */ /* Breedte volgt de ontwerp-verhouding (1640px op 1920 = 85,417vw), afgetopt op de ontwerpbreedte, net als .mimoda-container in style.css. Zo schaalt de shop met het venster mee i.p.v. bijna schermvullend op een laptop; op ≥1920px is het resultaat 1:1 gelijk aan voorheen (1640px content). De 317px filter-inset op __head is container-relatief en blijft dus vast. */ .sellabees-shop { width: min(85.417vw, 1640px); max-width: 100%; margin-inline: auto; padding: 48px 0 72px; } .sellabees-shop__head { padding-left: 317px; margin-bottom: 8px; } /* Shop-titel (New, categorie én sale): 40px, huisstijl-accent #e598e5 — 1:1 Figma (252:2156/252:2671 e.d.: text-[#e598e5]). Gold ook op categorie-/sale-archief, niet enkel op de shop-pagina. */ .sellabees-shop__title { font-family: var(--mimoda-display); font-weight: 400; font-size: 40px; color: var(--mimoda-accent); margin: 0; } .sellabees-shop__body { display: flex; gap: 76px; align-items: flex-start; } .sellabees-shop__sidebar { flex: 0 0 241px; } .sellabees-shop__main { flex: 1 1 auto; min-width: 0; } /* --- Filter-sidebar -------------------------------------------------- */ .sellabees-filter__form > .sellabees-filter__group:first-child { margin-top: 0; } .sellabees-filter { font-family: var(--mimoda-font); } /* Kop "Filter" — Kumbh Sans ExtraBold, uppercase (Figma 147:1564), niet de serif-display. */ .sellabees-filter::before { content: "Filter"; display: block; font-family: var(--mimoda-font); font-weight: 800; font-size: 20px; text-transform: uppercase; margin-bottom: 20px; } .sellabees-filter__group { padding: 22px 0; border-top: 1px solid #eadfe0; } .sellabees-filter__group:first-of-type { border-top: none; padding-top: 0; } /* Facet-koppen (Categorieën/Maat/Kleur/Prijs) — Kumbh Sans ExtraBold, uppercase (Figma 147:1567). Zonder font-family pakken ze de globale h3-regel (Abril Fatface serif). */ .sellabees-filter__title { font-family: var(--mimoda-font); font-size: 16px; font-weight: 800; text-transform: uppercase; margin: 0 0 14px; } .sellabees-filter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .sellabees-filter__list.is-scrollable { max-height: 220px; overflow-y: auto; } .sellabees-filter__check { position: relative; cursor: pointer; } .sellabees-filter__check input { position: absolute; opacity: 0; width: 0; height: 0; } .sellabees-filter__check span { display: inline-flex; align-items: center; justify-content: center; min-width: 33px; height: 33px; padding: 0 8px; background: var(--mimoda-pink-soft); color: var(--mimoda-pink); /* maat-facet tekst #ff8cbe (design 252) */ font-size: 12px; border-radius: 3px; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; } /* Geselecteerd = gevuld #ff8cbe met witte tekst (klantwens 27-07: geselecteerde filteritems in --mimoda-pink). Kleur- en categorie-facet overriden hieronder. */ .sellabees-filter__check input:checked + span { background: var(--mimoda-pink); border-color: var(--mimoda-pink); color: #fff; } /* Hover = lichte tint van het kaart-roze #fec2dc (geen zalm #ffe0de — viel uit het palet). Enkel op hover-apparaten: op touch bleef de hoverkleur anders "plakken" na deselecteren. */ @media (hover: hover) { .sellabees-filter__check:hover span { background: #ffe1ee; } } /* MAAT: geselecteerde maat in de paarse accent i.p.v. roze (klantwens: maat-selectie = paars, overal). Specifieker dan de generieke regel hierboven → wint op desktop; de mobiele drawer-regel is gelijkgetrokken. */ .sellabees-filter__group--maat .sellabees-filter__check input:checked + span { background: var(--mimoda-accent); border-color: var(--mimoda-accent); color: #fff; } /* Kleur-facet → kleurstalen (JS zet .mimoda-filter--kleur + --sw per optie) */ .mimoda-filter--kleur .sellabees-filter__check span { min-width: 0; width: 27px; height: 27px; padding: 0; border-radius: 50%; background: var(--sw, #ddd); color: transparent; border: 1px solid rgba(0,0,0,.12); overflow: hidden; text-indent: -999px; } .mimoda-filter--kleur .sellabees-filter__check input:checked + span { outline: 2px solid var(--mimoda-pink); /* #ff8cbe — geselecteerd-kleur filtermenu */ outline-offset: 0px; border-color: transparent; /* De staal blijft zijn eigen kleur tonen (de generieke checked-vulling hierboven mag de swatch niet roze maken). */ background: var(--sw, #ddd); color: transparent; } /* Categorie-facet → verticale tekstlijst (Figma 147:1566): Kumbh Sans Regular 16px, regelhoogte 35px, geen pill-achtergrond. */ .sellabees-filter__group--categorie .sellabees-filter__list { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; } .sellabees-filter__group--categorie .sellabees-filter__check span { min-width: 0; height: auto; padding: 0; background: none; border: none; border-radius: 0; color: var(--mimoda-ink); font-size: 16px; font-weight: 400; line-height: 35px; text-transform: none; } .sellabees-filter__group--categorie .sellabees-filter__check:hover span { background: none; text-decoration: underline; } .sellabees-filter__group--categorie .sellabees-filter__check input:checked + span { border: none; background: none; /* tekstlijst houdt geen pill-vulling (zie generieke checked-regel) */ font-weight: 700; color: var(--mimoda-pink); /* #ff8cbe — geselecteerd-kleur filtermenu */ } /* --- Prijs-slider ---------------------------------------------------- */ .sellabees-price { position: relative; padding-top: 6px; } .sellabees-price__track { position: relative; height: 3px; background: #e7d7d7; border-radius: 3px; margin: 18px 6px 0; } .sellabees-price__fill { position: absolute; top: 0; height: 100%; background: #fec2dc; border-radius: 3px; } /* design 252:2377 — roze */ /* Verticale centrering op de lijn: top = lijn-midden (6px padding + 18px marge + 1.5px = halve lijndikte); het input-blok (18px hoog) wordt met translateY(-50%) op dat midden gecentreerd, zodat de thumb (= het bolletje) exact op het midden van de lijn valt — geen fragiele margin-top-hack meer. */ .sellabees-price__range { position: absolute; left: 0; right: 0; top: 25.5px; transform: translateY(-50%); width: 100%; height: 18px; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .sellabees-price__range::-webkit-slider-runnable-track { -webkit-appearance: none; height: 18px; background: transparent; border: 0; } .sellabees-price__range::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #fec2dc; cursor: pointer; margin-top: 0; } .sellabees-price__range::-moz-range-track { height: 18px; background: transparent; border: 0; } .sellabees-price__range::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #fec2dc; cursor: pointer; } .sellabees-price__labels { display: flex; justify-content: space-between; margin-top: 22px; font-size: 14px; } .sellabees-filter__actions { margin-top: 18px; } .sellabees-filter__reset { font-size: 13px; color: var(--mimoda-coral-ink); text-decoration: underline; } /* --- Reset-knop ("Filters wissen") ----------------------------------- */ /* shop-filter.js zet hem bovenin het paneel en geeft hem .is-visible zodra er een keuze actief is (facet of versmalde prijs). Desktop: rechts op de "FILTER"-kopregel (die kop is de ::before van .sellabees-filter, vandaar het absolute anker). */ .sellabees-filter { position: relative; } .mimoda-filter-reset { display: none; align-items: center; gap: 6px; position: absolute; top: 0; right: 0; /* Even hoog als de regelbox van de "FILTER"-kop (20px × 1.5 = 30px) en met align-items:center → de knop staat exact op het midden van die tekstregel. */ height: 30px; padding: 0; border: 0; background: none; font-family: var(--mimoda-font); font-size: 13px; font-weight: 700; line-height: 1; color: var(--mimoda-pink); /* #ff8cbe — zelfde signaalkleur als de gekozen filters */ text-decoration: none; cursor: pointer; } .mimoda-filter-reset.is-visible { display: inline-flex; } .mimoda-filter-reset:hover { color: var(--mimoda-accent); text-decoration: underline; } .mimoda-filter-reset svg { flex: none; width: 14px; height: 14px; } /* --- Sorteerbalk ----------------------------------------------------- */ .sellabees-shop__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--mimoda-ink); } .woocommerce-ordering select { font-family: var(--mimoda-font); font-size: 12px; padding: 5px 30px 5px 14px; border: 1px solid #e0cfcf; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; cursor: pointer; } /* --- Productraster --------------------------------------------------- */ .sellabees-shop__main ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 22px; margin: 0; padding: 0; list-style: none; } /* WooCommerce clearfix-pseudo's nemen anders een grid-cel (kolom-offset). */ .sellabees-shop__main ul.products::before, .sellabees-shop__main ul.products::after { content: none; display: none; } @media (max-width: 1200px) { .sellabees-shop__main ul.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 780px) { .sellabees-shop__main ul.products { grid-template-columns: repeat(2, 1fr); } } /* --- Productkaart ---------------------------------------------------- */ .mimoda-product { margin: 0 !important; width: auto !important; float: none !important; } .mimoda-product__media { position: relative; aspect-ratio: 314 / 475; overflow: hidden; border-radius: 2px; background: #f2e9e9; } .mimoda-product__link, .mimoda-product__media img { display: block; width: 100%; height: 100%; } .mimoda-product__media img { object-fit: cover; } /* WooCommerce's eigen `.woocommerce ul.products li.product img { height:auto }` is specifieker dan de regel hierboven, waardoor kortere/bredere productfoto's (bv. accessoires zoals sjaaltjes, 600×800) de box niet vulden → gat onderaan. Deze specifiekere regel dwingt volledige cover-vulling af; `center top` houdt bij hoge modelfoto's het hoofd in beeld (crop onderaan). */ .woocommerce ul.products li.product .mimoda-product__media img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center top; } /* Tweede foto bij hover (klantwens 27-07): de eerste galerijfoto van het product (content-product.php) ligt onzichtbaar over de hoofdfoto en fade't in zodra de bezoeker over de kaart-media hovert. Producten zonder galerijfoto: geen effect. */ .mimoda-product__img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .mimoda-product__media:hover .mimoda-product__img-hover { opacity: 1; } .mimoda-product__badge { position: absolute; top: 0; left: 0; background: var(--mimoda-accent); color: #fff; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; padding: 9px 20px; border-radius: 0 0 8px 0; } .mimoda-product__name { display: block; font-weight: 700; font-size: 16px; margin: 12px 0 0; color: var(--mimoda-ink); } .mimoda-product__price { margin: 6px 0 0; font-size: 14px; color: var(--mimoda-ink); } .mimoda-product__price del { color: var(--mimoda-coral-ink); font-size: 11px; margin-right: 4px; } .mimoda-product__price ins { text-decoration: none; } .mimoda-product__price .woocommerce-Price-amount { font-weight: inherit; } .mimoda-product__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .mimoda-product__swatches { display: flex; align-items: center; gap: 6px; margin-top: 10px; } /* Kleurstalen onder de kaart: rond (Figma), niet vierkant. */ .mimoda-product__swatches .mimoda-swatch { width: 27px; height: 27px; border-radius: 50%; } /* Uitverkochte maat/kleur op de kaart doorstrepen (variabel product). De chip blijft hier op de soft-tint: beschikbaar = gevuld roze, uitverkocht = licht + doorgestreept (grijze tekst op de roze vulling zou onleesbaar zijn). De streep is SCHUIN (klantwens 06-08), stijgend van linksonder naar rechtsboven zoals op de productpagina. Getekend als meeschalend SVG-lijntje (non-scaling-stroke = altijd 2px dik, elke chipbreedte hoek-tot-hoek) — een gradient-streep gaf rode restjes in de vrije hoeken (Chrome). Kleur = --mimoda-coral-ink #ec827e (hardcoded: CSS-variabelen werken niet in een data-URI); zelfde koraal als de swatch-streep hieronder. */ .mimoda-product__sizes .mimoda-chip.is-unavailable { background-color: var(--mimoda-pink-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cline x1='0' y1='10' x2='10' y2='0' stroke='%23ec827e' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; color: rgba(0,0,0,.35); } .mimoda-product__swatches .mimoda-swatch.is-unavailable { position: relative; opacity: .85; } .mimoda-product__swatches .mimoda-swatch.is-unavailable::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; height: 2px; background: var(--mimoda-coral-ink); transform: translate(-50%, -50%) rotate(-45deg); border-radius: 2px; pointer-events: none; } /* Verlanglijst-hartje (core) rechtsboven op de kaart — massief hartje, direct op de foto (geen wit cirkeltje). Klantwens 27-07: standaard WIT, en pas ROOD (design-koraal #D2544F, Figma 252:2624) zodra het item op de verlanglijst staat (core zet .is-active na succesvol toevoegen). De zachte drop-shadow houdt het witte hart zichtbaar op lichte productfoto's. */ .mimoda-product__media .sellabees-wish-btn { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: #fff; cursor: pointer; padding: 0; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); transition: color .15s, transform .15s; } .mimoda-product__media .sellabees-wish-btn:hover { transform: scale(1.08); } .mimoda-product__media .sellabees-wish-btn.is-active { color: #d2544f; } .mimoda-product__media .sellabees-wish-btn.is-active:hover { color: #b8433e; } .mimoda-product__media .sellabees-wish-btn__icon { width: 26px; height: 22px; } /* --- Paginatie ------------------------------------------------------- */ .woocommerce-pagination { margin-top: 40px; text-align: center; } .woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; margin: 0; padding: 0; } .woocommerce-pagination a, .woocommerce-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 4px; border: 1px solid #e0cfcf; color: var(--mimoda-ink); font-size: 14px; } .woocommerce-pagination .current { background: var(--mimoda-accent); color: #fff; border-color: var(--mimoda-accent); } /* --- "Laad meer" + resultaat-teller (Figma 153:96/153:97), gecentreerd onder het raster ----------------------------------------------------------- */ .sellabees-shop__main.is-loading { opacity: .6; transition: opacity .2s ease; } /* AJAX-verversing: soepele, GETRAPTE fade-up (opacity + zachte opwaartse beweging met ease-out), i.p.v. de trage scroll-onthul én i.p.v. een harde gelijktijdige opacity-flip. De per-kaart vertraging (stagger) zet de JS via --i, zodat de kaarten als een golf binnenkomen i.p.v. schokkerig ineens. */ @media (prefers-reduced-motion: no-preference) { .mimoda-anim .sellabees-shop__main.is-ajaxed ul.products > li[data-anim] { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--i, 0) * 55ms); will-change: opacity, transform; } .mimoda-anim .sellabees-shop__main.is-ajaxed ul.products > li[data-anim].is-inview { opacity: 1; transform: none; } } .sellabees-loadmore { margin-top: 40px; text-align: center; } .sellabees-loadmore__count { margin: 0; font-size: 14px; color: var(--mimoda-ink); } .sellabees-loadmore__btn { display: inline-block; margin-top: 10px; font-family: var(--mimoda-font); font-weight: 800; font-size: 16px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: #212121; cursor: pointer; } .sellabees-loadmore__btn:hover { color: var(--mimoda-accent); } /* --- Lege staat: geen filterresultaten ------------------------------ */ /* shop-filter.js waardeert de kale roze WC-melding op tot een verzorgd blok (.mimoda-shop-empty). Fallback (mocht de JS niet draaien): neutraliseer de roze .woocommerce-info + checkbox-glyph binnen de shop, zodat er nooit een lelijk vak staat. */ .sellabees-shop__main .woocommerce-info { max-width: 460px; margin: 8px auto 0; padding: clamp(28px, 5vw, 48px) 20px; text-align: center; background: none; border: 0; border-radius: 0; color: var(--mimoda-ink); font-family: var(--mimoda-font); font-size: 16px; line-height: 26px; } .sellabees-shop__main .woocommerce-info::before { content: none; } .sellabees-shop__main .woocommerce-info .button { display: none; } .mimoda-shop-empty { max-width: 480px; margin: 8px auto 0; padding: clamp(28px, 5vw, 56px) 20px; text-align: center; } .mimoda-shop-empty__title { font-family: var(--mimoda-display); font-weight: 400; font-size: clamp(26px, 4vw, 34px); color: var(--mimoda-ink); margin: 0 0 14px; } .mimoda-shop-empty__text { max-width: 40ch; margin: 0 auto 26px; font-size: 16px; line-height: 26px; color: var(--mimoda-ink); } .mimoda-shop-empty__btn { height: 50px; min-width: 240px; background: #fec2dc; /* zachte roze CTA, net als search-lege-staat / 404 */ } /* --- SEO-tekstblok (Figma: volle-breedte grijs blok, 158:103) -------- */ .mimoda-shop-seo { background: var(--mimoda-gray); padding: 48px 0 52px; } .mimoda-shop-seo__title { font-family: var(--mimoda-display); font-size: 34px; margin: 0 0 18px; } .mimoda-shop-seo__text { font-size: 14px; line-height: 24px; max-width: 1316px; position: relative; } .mimoda-shop-seo__text p { margin: 0 0 14px; } .mimoda-shop-seo__text p:last-child { margin-bottom: 0; } /* Tussenkop binnen de SEO-tekst: 1:1 design (252:2291) — Abril Fatface 20px op de 26px-regelhoogte van de body, één lege regel erboven en geen ruimte eronder (de 14px alinea-marge hierboven + 12px = de lege regel uit het ontwerp). Familie/gewicht komen uit de globale h1–h4-regel in style.css. */ .mimoda-shop-seo__subtitle, .mimoda-shop-seo__text h2, .mimoda-shop-seo__text h3 { font-size: 20px; line-height: 26px; margin: 12px 0 0; } /* Ingeklapt: toon een paar regels + fade; "lees meer" klapt uit (Figma 153:101). */ .mimoda-shop-seo__text.is-clamped { max-height: 96px; overflow: hidden; } .mimoda-shop-seo__text.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(to bottom, rgba(245,245,245,0), var(--mimoda-gray)); } .mimoda-shop-seo__more { display: inline-block; margin-top: 12px; padding: 0; background: none; border: none; font-family: var(--mimoda-font); font-weight: 700; font-size: 14px; line-height: 26px; color: var(--mimoda-ink); cursor: pointer; } .mimoda-shop-seo__more:hover { text-decoration: underline; } /* "Stay up to date"-band op de shop-/categorie-archieven: wit (Figma), i.t.t. de grijze band op home/info-pagina's. */ .mimoda-shop-archive .mimoda-stay { background: var(--mimoda-white); } /* --- Mobiel-scaffolding (basis, geen layout-impact op desktop) ------- */ /* De "Filteren"-knop is op desktop verborgen; op mobiel wordt hij het filter-icoon. De drawer-wrapper (JS, shop-filter.js) is op desktop `display:contents` → geen box, dus de filter-sidebar staat gewoon in de flow. Scrim + sluitknop enkel op mobiel. */ .sellabees-filter-toggle { display: none; } .sellabees-filter-drawer { display: contents; } .sellabees-filter-drawer__scrim { display: none; } .sellabees-filter__close { display: none; } /* Sorteer-keuze in het filterpaneel: alleen mobiel — op desktop staat de echte WooCommerce-select in de balk boven het raster (shop-filter.js kloont hem hierheen). */ .mimoda-filter-sort { display: none; } /* ========================================================================= MOBIEL (≤981px) — 1:1 op Figma "New/Categoriepagina/Sale" (406:4753 e.a.) + de filter-drawer "Filter" (406:5573). Breakpoint-systeem = Sjon/Fleur. ========================================================================= */ @media (max-width: 981px) { /* --- Banner: lager op mobiel (Figma 402×145, direct onder de header) --- */ .mimoda-shop-banner { height: clamp(130px, 36vw, 240px); } /* Sale-promo links op de content-marge (12.5% ≈ x=46 in het ontwerp). */ .mimoda-shop-banner--sale .mimoda-shop-banner__promo { padding-inline: 12.5%; } /* --- Shop-container: eigen inset (geen .mimoda-container), 12.5% = design-marge --- Breedte terug naar 100% (de desktop-proportie min(85.417vw,1640px) geldt hier niet; de mobiele goot komt uit de 12.5% padding hieronder). */ .sellabees-shop { position: relative; width: 100%; padding: 16px 12.5% 48px; } /* --- Kop: titel links (40px, accent), filter-icoon rechts op dezelfde regel --- */ .sellabees-shop__head { padding-left: 0; margin-bottom: 0; } .sellabees-shop__title { font-size: 40px; } /* De balk boven het raster blijft óók op mobiel staan, maar alléén met de resultaat-teller ("12 van 12 producten") — links onder de titel. De sorteer- dropdown verhuist naar het filter-drawer (klantwens 12-08-2026; het ontwerp toont beide niet op mobiel). De marge naar het raster komt van de 14px grid-margin-top hieronder (marges klappen samen), vandaar 18px hier. */ .sellabees-shop__bar { margin: 12px 0 18px; } .sellabees-shop__bar .woocommerce-ordering { display: none; } /* Filter-trigger = icoon rechtsboven op de titelregel (Figma 22×22 @ x=334). */ .sellabees-filter-toggle { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 24px; right: 12.5%; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--mimoda-ink); font-size: 0; /* verbergt het "Filteren"-label, laat enkel het icoon zien */ cursor: pointer; z-index: 3; } .sellabees-filter-toggle svg { width: 22px; height: 22px; } /* --- Body stapelt (raster vol-breed) --- */ .sellabees-shop__body { display: block; } .sellabees-shop__sidebar { margin: 0; } /* --- Productraster: 2 kolommen over de hele ≤981-range (override 781–981 = 3) --- Het raster breekt uit de 12.5%-goot zodat de foto's groter staan (klantwens 05-08-2026); de buitenmarge wordt gelijk aan de kolom-goot. De 100%/6 = de 12.5%-containergoot uitgedrukt in het 75% brede contentvak (0.125/0.75). */ .sellabees-shop__main ul.products { /* minmax(0,…): borgt dat kaart-content (bv. een lange productnaam) de smalle tracks nooit voorbij hun 1fr-deel kan duwen. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: 14px; margin-inline: calc(16px - 100% / 6); } /* ===================================================================== FILTER-DRAWER — links inschuivend paneel + scrim (net als het menu-drawer) ===================================================================== */ .sellabees-filter-drawer { display: block; position: fixed; inset: 0; z-index: 1000; visibility: hidden; transition: visibility 0s linear .34s; } .sellabees-filter-drawer.is-open { visibility: visible; transition: visibility 0s; } .sellabees-filter-drawer__scrim { display: block; position: absolute; inset: 0; background: rgba(17, 17, 17, .38); opacity: 0; transition: opacity .34s ease; } .sellabees-filter-drawer.is-open .sellabees-filter-drawer__scrim { opacity: 1; } /* Het paneel = de core .sellabees-filter