, niet als een

. De oorspronkelijke regel hieronder mikte op "li.product" en raakte dus helemaal niets — de kaarten bleven op WooCommerce's eigen, nog geladen float-opmaak staan. Nu gericht op ".product" in het algemeen (via het directe kind-selector ul.products > .product), ongeacht of het element een li of een div is. 2) WooCommerce's eigen basisstijl heeft op ul.products een ::before/::after "clearfix" (content:''; display:table) voor de oude float-opmaak. Zodra ul.products zelf een CSS-grid is (zoals hieronder), telt zo'n pseudo-element gewoon mee als grid-item — dat lege ::before-vakje kaapte dan grid-cel 1, waardoor het eerste product een cel opschoof naar plek 2. Hieronder expliciet uitgeschakeld. */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); list-style: none; margin: 0; padding: 0; } @media (max-width: 680px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } } .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none !important; display: none !important; } .woocommerce ul.products > .product, .woocommerce-page ul.products > .product { margin: 0 !important; width: auto !important; float: none !important; clear: none !important; } /* De modelkaart toont sinds thema-versie 1.2.0 de eigen 16:9-sfeerfoto van de productpagina-hero (zie content-product.php), niet meer een willekeurig bijgesneden "Uitgelichte afbeelding" — .model-tile__media staat daarom nu zelf al op aspect-ratio 16:9 (style.css) en object-fit:cover past daar zonder bijsnijden op. De eerdere contain+grijze achtergrond-override hier was nodig toen een WooCommerce-productfoto een andere verhouding kon hebben; die gaf nu juist grijze balken boven/onder bij de nieuwe, wél passende foto's, en is dus verwijderd. */ /* prijs / sale-badge (in de single-productweergave; het overzicht gebruikt de eigen prijsopmaak uit woocommerce/content-product.php) */ .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--fg); font-family: var(--font-display); font-size: 1.6rem; } .woocommerce span.onsale { background: var(--accent); color: var(--amigo-ink, var(--amigo-ink)); font-family: var(--font-display); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; border-radius: 100px; min-height: 0; min-width: 0; padding: 0.4em 0.9em; line-height: 1; top: 16px; left: 16px; } /* -------------------- single product / tabs -------------------- */ .woocommerce div.product .product_title { text-transform: uppercase; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--font-display); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; } .woocommerce table.shop_attributes td, .woocommerce table.shop_attributes th { border-bottom: 1px solid var(--line); color: var(--fg); } /* -------------------- lege winkelwagen -------------------- */ .amigo-cart-empty { text-align: center; max-width: 460px; margin: 0 auto clamp(48px, 6vw, 72px); padding-block: 12px; } .amigo-cart-empty__icon { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: rgba(var(--amigo-mint-rgb),0.14); color: var(--accent); display: flex; align-items: center; justify-content: center; } .amigo-cart-empty__icon svg { width: 28px; height: 28px; } .amigo-cart-empty .lede { margin-inline: auto; } .amigo-cart-empty .btn { margin-top: 26px; } .amigo-cart-empty__suggestions .products { max-width: 720px; margin-inline: auto; } /* -------------------- winkelwagen -------------------- */ .woocommerce table.shop_table { border-color: var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce table.shop_table th { font-family: var(--font-display); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--fg); background: rgba(var(--amigo-mint-rgb),0.14); border-bottom: 1px solid var(--line); } /* Radio's/checkboxes (verzendmethode, betaalmethode, voorwaarden) in mint in plaats van de browserstandaard-blauw. */ .woocommerce input[type="radio"], .woocommerce input[type="checkbox"] { accent-color: var(--accent); } .woocommerce table.shop_table td { border-bottom: 1px solid var(--line); vertical-align: middle; } .woocommerce table.cart img { border-radius: 10px; max-width: 80px; } .woocommerce table.cart td.product-name a { font-family: var(--font-display); text-transform: uppercase; font-size: 0.9rem; } .woocommerce td.product-quantity .quantity input.qty { width: 64px; text-align: center; } .woocommerce table.cart td.actions .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .woocommerce table.cart td.actions .coupon input#coupon_code { max-width: 200px; } .woocommerce .cart-collaterals .cart_totals { background: linear-gradient(180deg, rgba(var(--amigo-mint-rgb),0.16), var(--surface) 140px); border-radius: var(--radius); border-top: 4px solid var(--accent); padding: clamp(20px, 3vw, 30px); float: none; width: 100%; max-width: 420px; margin-left: auto; } .woocommerce .cart-collaterals .cart_totals h2 { font-size: 1.2rem; margin-bottom: 16px; padding-bottom: 10px; position: relative; } .woocommerce .cart-collaterals .cart_totals h2::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: var(--accent); } .woocommerce .cart_totals table.shop_table { border: none; background: transparent; } .woocommerce .cart_totals table.shop_table td, .woocommerce .cart_totals table.shop_table th { background: transparent; border-bottom: 1px solid var(--line); } .woocommerce .cart_totals .order-total .amount { font-family: var(--font-display); font-size: 1.3rem; } .woocommerce-message, .woocommerce-info { border-top-color: var(--accent); border-radius: 8px; background: var(--surface); } .woocommerce-message::before, .woocommerce-info::before { color: var(--accent); } .woocommerce-error { border-top-color: var(--amigo-ink, var(--amigo-ink)); border-radius: 8px; } /* -------------------- formuliervelden (winkelwagen, afrekenen, account) -------------------- */ .woocommerce form .form-row label { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce table.shop_table td input[type="number"], .woocommerce-page form .form-row .select2-selection { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font-family: var(--font-body); padding: 12px 14px; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--amigo-mint-rgb),0.25); outline: none; } .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--amigo-ink, var(--amigo-ink)); } /* Bij Amigo kies je de afhaallocatie al per model op de productpagina zelf (zie de "Afhaallocatie"-regel die WooCommerce automatisch onder dat product in de winkelwagen/het besteloverzicht toont — Pickup_Locations in de configurator-plugin). De verzendmethode-keuze die WooCommerce er bij het afrekenen nog naast zet (vaak één regel per ingestelde verzendzone/afhaallocatie) is dus een verwarrende dubbele keuze, en wordt hier verborgen — de al gekozen locatie blijft gewoon zichtbaar via die regel onder het product. Puur visueel: WooCommerce rekent de bestelling op de achtergrond nog altijd gewoon af met de (automatisch gekozen) verzendmethode. */ .woocommerce-checkout .woocommerce-shipping-totals { display: none; } /* -------------------- afrekenen -------------------- */ .woocommerce-checkout #customer_details { background: var(--bg); } .woocommerce-checkout h3#order_review_heading { margin-top: clamp(32px, 4vw, 48px); font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; position: relative; padding-bottom: 10px; } .woocommerce-checkout h3#order_review_heading::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: var(--accent); } #order_review, .woocommerce-checkout-review-order { background: linear-gradient(180deg, rgba(var(--amigo-mint-rgb),0.16), var(--surface) 140px); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: clamp(16px, 2vw, 24px); } .woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout-review-order-table tfoot td, .woocommerce-checkout-review-order-table tbody th, .woocommerce-checkout-review-order-table tfoot th { background: transparent; border-bottom: 1px solid var(--line); } .woocommerce-checkout-review-order-table .order-total .amount { font-family: var(--font-display); font-size: 1.3rem; } ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; } ul.wc_payment_methods li.wc_payment_method { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; transition: border-color 0.2s ease, background-color 0.2s ease; } ul.wc_payment_methods li.wc_payment_method:has(input:checked) { border-color: var(--accent); background: rgba(var(--amigo-mint-rgb),0.1); } ul.wc_payment_methods li.wc_payment_method label { font-weight: 700; } ul.wc_payment_methods li.wc_payment_method .payment_box { background: var(--bg); border-radius: 8px; margin-top: 10px; padding: 12px 14px; color: var(--muted); } #place_order { --btn-bg: var(--accent); --btn-fg: var(--amigo-ink, var(--amigo-ink)); border-color: var(--accent); width: 100%; margin-top: 10px; padding: 1.1em 1.9em; } /* -------------------- bedankpagina (order-received) -------------------- */ .woocommerce-order-received .woocommerce-thankyou-order-received { font-family: var(--font-display); text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .woocommerce-order-received ul.woocommerce-order-overview { list-style: none; margin: 0 0 24px; padding: 20px; display: flex; flex-wrap: wrap; gap: 20px; background: var(--surface); border-radius: var(--radius); } .woocommerce-order-received ul.woocommerce-order-overview li { font-size: 0.85rem; color: var(--muted); } .woocommerce-order-received ul.woocommerce-order-overview li strong { display: block; color: var(--fg); font-family: var(--font-display); font-size: 1rem; margin-top: 4px; } /* -------------------- mijn account -------------------- */ .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: clamp(20px, 3vw, 32px); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-MyAccount-navigation li a { display: inline-block; padding: 0.55em 1.2em; border: 1px solid var(--line); border-radius: 100px; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; } .woocommerce-MyAccount-navigation li.is-active a { background: var(--fg); color: var(--bg); border-color: var(--fg); } .woocommerce-MyAccount-content table.shop_table th { background: var(--surface); } @media (max-width: 780px) { .woocommerce .cart-collaterals .cart_totals { max-width: none; } }