/* House of Bubbles — WooCommerce brand styling (cart / checkout / account) */ .woocommerce, .woocommerce-page { color: var(--hob-text); } /* Buttons */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .wc-block-components-button { background: #5e6040 !important; color: var(--hob-ivory) !important; border-radius: 999px !important; border: 0 !important; font-family: var(--hob-font-body) !important; font-weight: var(--hob-fw-bold) !important; padding: .95rem 1.8rem !important; transition: background var(--hob-ease) !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .wc-block-components-button:hover { background: #4f512f !important; } /* Prices + headings */ .woocommerce .price, .woocommerce-Price-amount { color: var(--hob-espresso); font-weight: 700; } .woocommerce h1, .woocommerce h2, .woocommerce h3 { font-family: var(--hob-font-head); } /* Form fields */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce .select2-container .select2-selection, .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout select, .woocommerce-checkout textarea { border: 1.5px solid var(--hob-border); border-radius: var(--hob-radius); padding: .7rem .9rem; background: var(--hob-surface); } .woocommerce form .form-row input.input-text:focus, .woocommerce-checkout input:focus, .woocommerce-checkout select:focus { border-color: var(--hob-olive); outline: none; } /* Tables (cart / order) */ .woocommerce table.shop_table th { color: var(--hob-espresso); } /* Notices */ .woocommerce-message, .woocommerce-info { border-top-color: var(--hob-olive); } .woocommerce-message::before, .woocommerce-info::before { color: var(--hob-olive); } /* Account navigation */ .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--hob-border); } .woocommerce-MyAccount-navigation li a { display: block; padding: .7rem .25rem; color: var(--hob-espresso); } .woocommerce-MyAccount-navigation li.is-active a { color: var(--hob-olive); font-weight: 700; } /* ============================================================ LAYOUT — cart + checkout in de 1200-container, 2-koloms (.woocommerce stond full-width direct in main.hob-main) ============================================================ */ .hob-main > .woocommerce { max-width: var(--hob-container); margin-inline: auto; padding: clamp(2rem,4vw,3.25rem) var(--hob-gutter) clamp(3rem,6vw,5rem); } /* Single product: .woocommerce zit hier dieper genest, dus de regel hierboven pakt niet. Onder de fixed header (126px sinds groter logo, 2026-07-06) starten + in de container. */ .single-product .hob-main { padding-top: clamp(8.5rem,11vh,9.5rem); padding-bottom: clamp(3rem,6vw,5rem); } .single-product .hob-main .woocommerce { max-width: var(--hob-container); margin-inline: auto; padding-inline: var(--hob-gutter); } .woocommerce h1, .woocommerce h2 { color: var(--hob-espresso); } /* ---- CART: items links, totalen rechts (sticky) ---- */ @media (min-width: 900px) { .woocommerce-cart .hob-main > .woocommerce { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(2rem,4vw,3rem); align-items: start; } .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart form.woocommerce-cart-form { grid-column: 1; margin: 0; } .woocommerce-cart .cart-collaterals { grid-column: 2; } } .woocommerce-cart .cart-collaterals, .woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; } .woocommerce .cart-collaterals { background: var(--hob-surface); border: 1px solid var(--hob-border); border-radius: var(--hob-radius-card); padding: 1.5rem 1.5rem .75rem; position: sticky; top: 100px; } .woocommerce .cart-collaterals h2 { margin-top: 0; font-size: 1.3rem; } .woocommerce .cart-collaterals .checkout-button { width: 100%; text-align: center; } .woocommerce-cart .wc-proceed-to-checkout { padding: 0; } /* ---- CHECKOUT: formulier links, overzicht rechts (sticky) ---- */ @media (min-width: 900px) { form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: clamp(2rem,4vw,3.5rem); align-items: start; } form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; min-width: 0; } form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 1rem; } form.checkout #order_review { grid-column: 2; grid-row: 2; } } .woocommerce-checkout .col2-set { display: block; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100% !important; max-width: none; float: none; } .woocommerce-checkout #customer_details .col-2 { margin-top: 1.75rem; } .woocommerce-checkout #order_review { /* Klantvraag 2026-07-06: bestellingsoverzicht (rechts) in dezelfde stijl als de factuurgegevens (links) — dus geen los "kaartje", gewoon op de paginakleur, met de eigen tabelrand voor structuur (zie hieronder). */ position: sticky; top: 100px; } .woocommerce-checkout #order_review_heading { font-size: 1.3rem; } .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { padding: .8rem 1rem; } /* ---- Formulier-rijen ---- */ .woocommerce form .form-row { margin: 0 0 1.1rem; padding: 0; } .woocommerce form .form-row label { display: block; font-weight: 600; font-size: .9rem; color: var(--hob-espresso); margin-bottom: .35rem; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { height: auto; border: 1.5px solid var(--hob-border) !important; border-radius: var(--hob-radius) !important; padding: .35rem .4rem; background: var(--hob-surface); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.8; padding: 0 .5rem; } /* ---- Tabellen (cart + order review) ---- */ /* Klantvraag 2026-07-06: geen randen/kaartje meer - de tabel valt volledig weg tegen de paginakleur (transparant), alleen nog wat leesruimte tussen rijen via padding. */ .woocommerce table.shop_table { border: 0; border-collapse: separate; border-spacing: 0; background: transparent; margin: 0 0 1.25rem; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: .9rem 1rem; border: 0; } .woocommerce table.shop_table thead th { background: transparent; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hob-text-muted); } /* Klantvraag 2026-07-06: tabel op de winkelmandpagina oogde als een kaal spreadsheet-grid — verticale randen weg, alleen zachte horizontale rij-scheiding, net als het "Besteloverzicht"-paneel ernaast. */ .woocommerce-cart table.cart { width: 100%; font-size: .92rem; table-layout: fixed; } .woocommerce-cart table.cart th, .woocommerce-cart table.cart td { padding: 1.1rem .9rem; vertical-align: middle; border-left: 0; border-right: 0; } .woocommerce-cart table.cart .product-remove { width: 40px; text-align: center; padding-inline: .3rem; } .woocommerce-cart table.cart .product-remove a.remove { font-size: 1.1rem; } .woocommerce-cart table.cart .product-thumbnail { width: 72px; } .woocommerce-cart table.cart .product-price { width: 92px; text-align: right; } .woocommerce-cart table.cart .product-quantity { width: 110px; } .woocommerce-cart table.cart .product-subtotal { width: 96px; text-align: right; white-space: nowrap; font-weight: var(--hob-fw-bold); } /* product-name (geen breedte) krijgt de resterende ruimte */ .woocommerce-cart table.cart img { width: 52px; height: auto; border-radius: var(--hob-radius); } .woocommerce-cart table.cart .quantity .qty { width: 64px; } .woocommerce-cart .product-remove a.remove { color: var(--hob-secondary-text) !important; border: 0 !important; } .woocommerce-checkout #order_review .order-total .amount { color: var(--hob-espresso); font-size: 1.2rem; } .woocommerce .quantity .qty { width: 56px; border: 1.5px solid var(--hob-border); border-radius: var(--hob-radius); padding: .45rem; background: var(--hob-surface); } /* ---- Coupon + actions ---- */ .woocommerce-cart .actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; } .woocommerce .coupon { display: flex; gap: .5rem; flex-wrap: wrap; } .woocommerce .coupon .input-text { width: auto !important; min-width: 180px; } /* ---- Winkelmand op mobiel (klantvraag ronde 3, 31-7: "ziet er niet uit") ---- Root cause: table.cart heeft table-layout:fixed met vaste pixel-breedtes per kolom (product-price 92px, product-quantity 110px, product-subtotal 96px). WooCommerce's eigen mobiele fallback zet cellen om naar losse blokken (elke td een eigen "rij", data-title als label), maar die vaste breedtes bleven staan - vandaar de ongelijke, afgeknotte grijze blokken per rij. De coupon- knop had bovendien geen flex-wrap, waardoor de tekst over de rand liep en de pagina zelf horizontaal ging scrollen. */ @media (max-width: 600px) { .woocommerce-cart table.cart thead { display: none; } .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody { display: block; width: 100%; } /* Elk product als eigen kaartje i.p.v. losse rijen met kale scheidingslijn - oogde eerst als een kaal spreadsheet met te veel lucht tussen label/waarde. */ .woocommerce-cart table.cart tr { display: block; width: 100%; box-sizing: border-box; background: var(--hob-surface); border: 1px solid var(--hob-border); border-radius: var(--hob-radius-card); padding: .25rem 1.1rem; margin-bottom: 1rem; } .woocommerce-cart table.cart td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100% !important; max-width: 100%; box-sizing: border-box; padding: .75rem 0 !important; text-align: right; border-bottom: 1px solid var(--hob-border); } .woocommerce-cart table.cart td:last-child { border-bottom: 0; } .woocommerce-cart table.cart td::before { content: attr(data-title); font-weight: var(--hob-fw-bold); color: var(--hob-espresso); text-align: left; } .woocommerce-cart table.cart td.product-remove { justify-content: flex-end; border-bottom: 0; padding-bottom: .35rem !important; } .woocommerce-cart table.cart td.product-remove::before { content: none; } .woocommerce-cart table.cart td.product-thumbnail { display: none; } /* thumbnail heeft geen label - los tonen oogt op mobiel rommelig, productnaam staat er al naast */ .woocommerce-cart table.cart td.product-name { text-align: right; font-weight: var(--hob-fw-bold); color: var(--hob-espresso); } .woocommerce-cart table.cart td.product-subtotal { font-size: 1.05rem; } /* Waardebon + bijwerken: duidelijkere groepering, iets meer lucht tussen de twee actiegroepen i.p.v. knoppen die strak op elkaar plakken. */ .woocommerce-cart .coupon { margin-bottom: .9rem; } .woocommerce-cart button[name="update_cart"] { margin-top: .25rem; } /* "Waardebon toepassen"-knop stond naast het invoerveld (flex-wrap), met nog maar een fractie van de rijbreedte over - de pil-knop was daardoor te smal voor zijn eigen tekst. Onder elkaar op volle breedte i.p.v. naast elkaar knijpen. WooCommerce's eigen woocommerce-smallscreen.css (media="max-width:768px", dus altijd actief op mobiel) zet zelf ook width:48% op .coupon .button - vandaar hier !important nodig. */ .woocommerce .coupon { flex-direction: column; align-items: stretch; } .woocommerce .coupon .input-text { width: 100% !important; } .woocommerce .coupon .button { width: 100% !important; text-align: center; } } /* Winkelmand-FAB is overbodig (en overlapt de "Bijwerken"-knop/besteloverzicht) op de winkelmandpagina zelf - daar kijkt de klant al naar de winkelmand. */ .woocommerce-cart .hob-cart-fab { display: none; } /* ---- Payment ---- */ .woocommerce-checkout #order_review #payment { background: transparent; padding: 1rem 0 0; } .woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 1rem; } .woocommerce-checkout #payment ul.payment_methods li { border: 1px solid var(--hob-border); border-radius: var(--hob-radius); padding: .8rem 1rem; margin: 0 0 .6rem; background: #fff; list-style: none; } .woocommerce-checkout #payment div.payment_box { background: var(--hob-bg-soft); margin: .75rem 0 0; } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--hob-bg-soft); } .woocommerce-checkout #payment .place-order { padding: 0; } .woocommerce #place_order, .woocommerce-checkout button#place_order { width: 100%; } /* ---- Terug-naar-winkelmand + akkoordvinkjes ---- */ .hob-checkout__back { margin: 0 0 1.25rem; } .hob-checkout__back a { color: var(--hob-text-muted); text-decoration: none; } .hob-checkout__back a:hover { color: var(--hob-olive); } .hob-checkout__consent label { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; line-height: 1.5; cursor: pointer; } .hob-checkout__consent input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; accent-color: var(--hob-olive); } .hob-checkout__consent a { color: var(--hob-olive); } .hob-checkout__incasso-note { font-size: .88rem; line-height: 1.5; color: var(--hob-text-muted); margin: 0 0 1rem; } .hob-checkout__incasso-note a { color: var(--hob-olive); } /* Slimme adres-invuller (postcode+huisnummer -> straat+plaats) */ .hob-address-hint { display: block; font-size: .8rem; color: var(--hob-text-muted); margin-top: .3rem; } /* We bezorgen alleen in Nederland: land/regio-veld (een