/** * Altus — opmaak productpagina (Bricks) * * Waarden nagemeten op de live-pagina, zodat de Bricks-versie ermee overeenkomt. * De prijsmarkup komt uit de mu-plugin altus-prijsweergave.php; de klassen * .adviesprijs / .altusprijs / .excluded-vat worden daar gezet. */ :root { --altus-navy: #223a80; --altus-oranje: #ff6a00; --altus-groen: #5ac061; --altus-grijs: #f2f4f8; } /* ---------------------------------------------------------------- titel */ .brxe-product-title { color: var(--altus-navy); font-size: 36px; /* Lokaal zijn enkel Roboto 400 en 500 geladen; bij 600 maakt de browser zelf een vetter gewicht aan, wat logger oogt dan de echte snede. 500 is een bestaande snede en komt daardoor dichter bij live. */ font-weight: 500; line-height: 1; margin: 0; } /* ---------------------------------------------------------------- prijs */ .adviesprijs { color: rgba(36, 52, 122, 0.5); font-size: 16px; } .altusprijs { color: var(--altus-navy); font-size: 16px; font-weight: 600; } /* "Onze prijs" — het bedrag zelf groot en oranje */ .altusprijs ins { color: var(--altus-oranje); font-size: 25px; font-weight: 700; text-decoration: none; } .excluded-vat { font-size: 14px; font-weight: 400; } /* Archiefkaarten (Bricks-productenelement): "excl. BTW" / "incl. BTW" staat altijd op een eigen regel, onder het bedrag — bij zowel de adviesprijs als "Onze prijs". Zo breekt de tekst nooit midden in "excl. | BTW" af en hebben alle kaarten dezelfde opbouw (Sylvie, 08/10/2026). */ .brxe-woocommerce-products .price-category-page .excluded-vat { display: block; } /* Archiefkaarten: de prijzen staan in een rij altijd OP ÉÉN LIJN (Sylvie, 08/10/2026). Sommige kaarten hebben een extra blok onder de titel ("Voordelige Tweedekans", "Met gratis …"), andere niet; daardoor schoof de prijs op die kaarten naar beneden. Opbouw van elke kaart: labels, afbeelding, titel, [extra blok], prijs, koop, (leeg). Elke kaart gebruikt daarom dezelfde 7 rijen van het raster (subgrid): de rij "extra blok" is zo hoog als het hoogste extra blok in die rij van kaarten, ook bij kaarten die er geen hebben. Alleen binnen het Bricks-productenelement (.brxe-woocommerce-products), dus voor elk overzicht-sjabloon maar NIET voor de aanbevolen producten in het winkelwagentje (gewone WooCommerce-kaarten met een andere opbouw). Past een browser geen subgrid toe, dan valt het terug op gewoon onder elkaar. */ /* De afstand tussen twee rijen kaarten (48px, overal gelijk) loopt via de kaart zelf: met een rij-afstand op het raster zou elke gedeelde rij binnen een kaart er extra ruimte bij krijgen. */ .brxe-woocommerce-products ul.products:has(.price-category-page) { row-gap: 0 !important; /* !important: de rij-afstand staat als eigen regel per element in het Bricks-sjabloon */ } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) { display: grid; grid-row: span 7; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; margin-bottom: 48px; row-gap: 0; } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > * { grid-column: 1; } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :nth-child(1) { grid-row: 1; } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :nth-child(2) { grid-row: 2; } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :nth-child(3) { grid-row: 3; } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :nth-child(4):not(:has(.price-category-page)) { grid-row: 4; } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :has(.price-category-page) { grid-row: 5; } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :has(.price-category-page) + * { grid-row: 6; } .brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :has(.price-category-page) + * + * { grid-row: 7; } /* -------------------------------------------------------- winkelwagenknop */ .brxe-product-add-to-cart .single_add_to_cart_button, .altus-onderdelen .single_add_to_cart_button { background-color: var(--altus-groen); color: #fff; font-size: 17px; font-weight: 600; border: 0; border-radius: 6px; padding: 13px 31px; text-transform: capitalize; transition: background-color 0.15s ease; } .brxe-product-add-to-cart .single_add_to_cart_button:hover { background-color: #4aad51; } /* aantal-veld en knop op één regel naast elkaar */ .brxe-product-add-to-cart form.cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* de levertijdmelding van de plugin staat binnen hetzelfde formulier: die krijgt een eigen regel bovenaan in plaats van mee te schuiven */ .brxe-product-add-to-cart form.cart .pi-edd { flex: 1 0 100%; margin: 0 0 10px; order: -1; } /* maat en gewicht gelijk aan live (15.4px / 700) */ .pi-edd, .pi-edd * { font-size: 15.4px; font-weight: 700; line-height: 1.4; } /* Eén omkaderd vakje met afgeronde hoeken — identiek aan het aantalveld bij de cross-sells: minknop 24px, invoer 38px, plusknop 24px, alles 38px hoog, met dunne scheidingslijntjes in plaats van drie losse kadertjes. */ .brxe-product-add-to-cart form.cart .quantity, .altus-onderdelen form.cart .quantity { align-items: center; border: 1px solid #e1e1e1; border-radius: 6px; display: flex; /* Vaste 88px — even breed als het vakje bij de cross-sells. Met een automatische breedte werd het vakje 200px door de eigen maat die de browser aan een getalveld geeft. */ flex: 0 0 88px; /* 51px = de hoogte van de keuzelijst met alternatieven eronder; de winkelwagenknop ernaast en de knoppen in de alternatievenloop staan op dezelfde maat. Bij de cross-sells blijft het vakje 38px, want daar is de knop ook 38px. */ height: 51px; margin: 0; overflow: hidden; width: 88px; } .brxe-product-add-to-cart form.cart .quantity .qty, .altus-onderdelen form.cart .quantity .qty { -moz-appearance: textfield; background: #fff; border: 0; /* De scheidingslijntjes staan op de invoer zelf, zodat ze kloppen ongeacht in welke volgorde de plus- en minknop weergegeven worden. */ border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; color: #222; /* Zonder vaste flex-basis groeit het veld mee met zijn eigen standaardbreedte en werd het vakje 200px breed. */ flex: 0 0 38px; font-size: 14px; height: 100%; padding: 0; text-align: center; width: 38px; } .brxe-product-add-to-cart form.cart .quantity .qty::-webkit-outer-spin-button, .brxe-product-add-to-cart form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .brxe-product-add-to-cart form.cart .quantity .minus, .brxe-product-add-to-cart form.cart .quantity .plus, .brxe-product-add-to-cart form.cart .quantity .action, .altus-onderdelen form.cart .quantity .minus, .altus-onderdelen form.cart .quantity .plus, .altus-onderdelen form.cart .quantity .action { align-items: center; background: #fff; border: 0; color: var(--altus-navy); cursor: pointer; display: flex; height: 100%; justify-content: center; width: 24px; } .brxe-product-add-to-cart form.cart .quantity .minus:hover, .brxe-product-add-to-cart form.cart .quantity .plus:hover, .brxe-product-add-to-cart form.cart .quantity .action:hover { background: #f4f6fb; } /* De tekens zijn hier SVG-lijntjes; op 24px zouden ze het vakje vullen. */ .brxe-product-add-to-cart form.cart .quantity .action svg { height: 12px; width: 12px; } /* Vult de rest van de kolom naast het aantalveld, zodat de knop rechts gelijk uitkomt met de keuzelijst eronder. */ .brxe-product-add-to-cart .single_add_to_cart_button { /* basis 180px zodat hij naast het aantal past; groeit daarna door tot de rand van de kolom. Met een grote basis brak flexbox de regel af. */ flex: 1 1 180px; height: 51px; /* WooCommerce zet hier een marge van 10px boven; die duwde de knop 5px lager dan het aantalveld ernaast. */ margin-top: 0; white-space: nowrap; } /* Iets specifieker: iets anders zette het gewicht terug op 400, waardoor deze knop lichter oogde dan die in de alternatieven-rij. */ .brxe-product-add-to-cart form.cart .single_add_to_cart_button { font-weight: 600; } /* ------------------------------------------------------------ USP-lijst */ .altus-usp ul { list-style: none; margin: 0; padding: 0; } .altus-usp li { color: var(--altus-navy); font-size: 16px; font-weight: 500; line-height: 23px; padding-left: 30px; position: relative; margin-bottom: 5px; } /* Icoontjes exact zoals live: twee vinkjes, een spaarvarken en een blaadje, allemaal in #1EBF27. Font Awesome 6 komt met Bricks mee. */ .altus-usp li::before { /* Bricks noemt de solid-variant "Font Awesome 6 Solid", niet de standaardnaam "Font Awesome 6 Free" — anders krijg je lege blokjes. */ font-family: "Font Awesome 6 Solid"; font-weight: 900; color: #1ebf27; font-size: 18px; position: absolute; left: 0; top: 1px; } .altus-usp li:nth-child(1)::before, .altus-usp li:nth-child(2)::before { content: "\f00c"; } /* fa-check */ .altus-usp li:nth-child(3)::before { content: "\f4d3"; } /* fa-piggy-bank */ .altus-usp li:nth-child(4)::before { content: "\f06c"; } /* fa-leaf */ /* ------------------------------------------------- specificatiekaart ---- */ .altus-speckaart { border: 2px solid var(--altus-navy); border-radius: 8px; padding: 18px 20px 8px; background: #fff; } .altus-speckaart h3 { color: var(--altus-navy); font-size: 17px; font-weight: 500; margin: 0 0 12px; } /* de attributentabel van WooCommerce binnen de kaart */ .altus-speckaart table { width: 100%; border-collapse: collapse; font-size: 15px; } .altus-speckaart th, .altus-speckaart td { border: 0; border-bottom: 1px solid #e3e7f0; padding: 9px 0; text-align: left; vertical-align: top; } /* Label en waarde in hetzelfde lettertype en dezelfde kleur — zoals op live */ .altus-speckaart th, .altus-speckaart td { color: var(--altus-navy); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; } .altus-speckaart th { width: 58%; } .altus-speckaart td { text-align: right; } /* Aanklikbare waarden herkenbaar maken (bv. de rij "Soort") */ .altus-speckaart td a { background: var(--altus-oranje); border-radius: 4px; color: #fff; display: inline-block; font-size: 13px; padding: 3px 9px; text-decoration: none; } .altus-speckaart td a:hover { background: #d15408; } .altus-speckaart tr:last-child th, .altus-speckaart tr:last-child td { border-bottom: 0; } /* --------------------------------------------------------- contactblok */ .altus-contact { background: var(--altus-grijs); border-radius: 8px; padding: 16px 20px; display: flex; gap: 32px; flex-wrap: wrap; } .altus-contact strong { color: var(--altus-navy); display: block; font-weight: 600; } .altus-contact a { color: var(--altus-navy); font-weight: 700; text-decoration: none; } /* ------------------------------------------------------------- galerij Bricks' eigen WooCommerce-CSS (.woocommerce-product-gallery__image img) heeft dezelfde specificiteit als de regel hieronder (1 klasse + 1 tag) én zet ook nog aspect-ratio:1 + object-fit:cover — bij gelijke specificiteit wint de regel die het laatst geladen wordt, wat afhankelijk bleek van de laadvolgorde en de foto daardoor soms op haar volle, ongekrompen formaat toonde i.p.v. netjes te passen in de (door WooCommerce's eigen flexslider-script berekende) breedte van de galerij-slide. !important sluit die twijfel volledig uit. */ .brxe-product-gallery .woocommerce-product-gallery__image img { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; width: 100% !important; } /* ------------------------------------------------------------- upsells */ .altus-upsells h3, .altus-upsells .upsells > h2 { color: var(--altus-navy); font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0 0 16px; } /* -------------------------------------------- "Elders goedkoper gezien?" */ /* Live heeft hier geen kader: enkel een icoontje met tekst in navy 16px/400. Het opengeklapte formulier krijgt wel een kader (zie hieronder). */ .altus-elders { margin-top: 4px; } .altus-elders .accordion-title-wrapper { cursor: pointer; gap: 10px; justify-content: flex-start; padding: 4px 0; } .altus-elders .accordion-title-wrapper h3 { color: var(--altus-navy); font-size: 16px; font-weight: 400; margin: 0; } /* spaarvarken vóór de tekst, zoals live */ .altus-elders .accordion-title-wrapper h3::before { color: var(--altus-navy); content: "\f4d3"; font-family: "Font Awesome 6 Solid"; font-weight: 900; margin-right: 10px; } .altus-elders .accordion-title-wrapper .brxe-icon { color: var(--altus-navy); font-size: 13px; margin-left: auto; } .altus-elders .accordion-content-wrapper { border: 2px solid var(--altus-navy); border-radius: 6px; margin-top: 8px; padding: 16px; } /* --------------------------------------------------------- broodkruimel */ /* Nagemeten op live (.woocommerce-breadcrumb): 11px, gewicht 500, met maar ~3px lucht rond het scheidingsteken. */ .brxe-woocommerce-breadcrumbs, .brxe-woocommerce-breadcrumbs a, .brxe-woocommerce-breadcrumbs .separator { color: var(--altus-navy); font-size: 11px; font-weight: 500; } /* Bricks' eigen separatorGap-instelling kwam op 13px uit; live heeft ~3px. */ .brxe-woocommerce-breadcrumbs .separator { font-size: 8px; font-weight: 400; margin: 0 3px !important; opacity: 0.55; } .brxe-woocommerce-breadcrumbs a:hover { text-decoration: underline; } /* --------------------------------------------- tekening in de speckaart */ .altus-spectekening { margin: 0 0 14px; } .altus-spectekening img { width: 100%; height: auto; } .altus-spectekening figcaption { color: var(--altus-navy); font-size: 11px; font-style: italic; line-height: 1.35; text-align: center; margin-top: 6px; } /* ------------------------------------------------- maatkeuze (Iconic) --- */ /* Waarden nagemeten op live: niet gekozen achtergrond #fafeff, rand 2px rgba(34,58,128,.1) gekozen achtergrond #fbeee6, rand 2px #ff6a00, prijs vet scheidingslijn #e1e1e1 */ /* Raster in plaats van flex: zo blijven alle knoppen even breed en rekt een laatste, alleenstaande knop niet uit over de volle rij. */ .iconic-wlv-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; width: 100%; } /* De omhullende blokken van Iconic beperkten de lijst tot 336px; met de volle kolombreedte passen er twee knoppen naast elkaar. */ .iconic-wlv-variations, .iconic-wlv-variations tbody, .iconic-wlv-variations tr, .iconic-wlv-variations td, .iconic-wlv-attribute { display: block; width: 100%; } .iconic-wlv-terms__term { margin: 0; min-width: 0; } .iconic-wlv-terms__term-content { background: #fafeff; border: 2px solid rgba(34, 58, 128, 0.1); border-radius: 6px; color: var(--altus-navy); display: block; /* 15px i.p.v. de 16px van live: de langste maatnaam is 183px breed en past dan met 8px opvulling op één regel binnen de knop van 197px. */ font-size: 15px; line-height: 1.35; padding: 8px; text-align: center; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; /* Iconic zet hier nowrap; lange maatnamen werden daardoor afgekapt ("3x10 sporten - 6.64 mete"). Laten afbreken over twee regels. */ white-space: normal; overflow-wrap: break-word; } .iconic-wlv-terms__term-content * { white-space: normal; } .iconic-wlv-terms__term-content:hover { border-color: rgba(235, 96, 10, 0.5); } .iconic-wlv-terms__term--current .iconic-wlv-terms__term-content { background: #fbeee6; border-color: var(--altus-oranje); } .iconic-lv-term-button-price-line { border: 0; border-top: 1px solid #e1e1e1; margin: 6px 0; } .iconic-lv-term-button-price { color: var(--altus-navy); font-size: 16px; font-weight: 400; } .iconic-wlv-terms__term--current .iconic-lv-term-button-price { font-weight: 700; } /* --------------------------------------------- alternatieven onderaan --- */ .altus-alternatieven-loop__titel { color: var(--altus-navy); font-size: 24px; font-weight: 500; margin: 0 0 20px; } /* Het SALE-label wordt op de héle site verborgen (afspraak 25-08-2026). De id hieronder is het interne volgnummer van BeRocket in de markup — NIET het post-ID van het label; onder post 61728 staat in de database "Hymer - logo". Wijzigen de labels, controleer dan opnieuw welke klasse de tekst "SALE" draagt. */ .berocket_alabel_id_61728 { display: none !important; } /* Eén rij die horizontaal schuift, met de pijlen ernaast. */ .altus-alternatieven-loop__rij { align-items: center; display: flex; gap: 12px; } .altus-loop-pijl { align-items: center; background: #fff; border: 2px solid var(--altus-oranje); border-radius: 50%; cursor: pointer; display: flex; flex: 0 0 44px; height: 44px; justify-content: center; padding: 0; transition: background-color 0.15s ease, opacity 0.15s ease; width: 44px; } /* Pijlpunt uit twee randen: altijd perfect gecentreerd, ongeacht lettertype. */ .altus-loop-pijl__punt { border-right: 2px solid var(--altus-oranje); border-top: 2px solid var(--altus-oranje); display: block; height: 10px; width: 10px; } .altus-loop-pijl--vorige .altus-loop-pijl__punt { transform: translateX(2px) rotate(-135deg); } .altus-loop-pijl--volgende .altus-loop-pijl__punt { transform: translateX(-2px) rotate(45deg); } .altus-loop-pijl:hover:not(:disabled) { background: #fdf1e9; } .altus-loop-pijl:disabled { cursor: default; opacity: 0.3; } .altus-alternatieven-loop__spoor { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; /* Bewust géén scroll-snap: het klikte elke tussenstap van de animatie terug naar nul, waardoor de pijlen niets leken te doen. */ -webkit-overflow-scrolling: touch; /* Firefox */ scrollbar-color: var(--altus-oranje) rgba(34, 58, 128, 0.15); scrollbar-width: thin; } /* Schuifbalk in de huisstijl: navy baan, oranje greep. */ .altus-alternatieven-loop__spoor::-webkit-scrollbar { height: 10px; } .altus-alternatieven-loop__spoor::-webkit-scrollbar-track { background: rgba(34, 58, 128, 0.12); border-radius: 5px; } .altus-alternatieven-loop__spoor::-webkit-scrollbar-thumb { background: var(--altus-oranje); border-radius: 5px; } .altus-alternatieven-loop__spoor::-webkit-scrollbar-thumb:hover { background: #d15408; } .altus-alternatieven-loop ul.products { align-items: stretch; display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; width: max-content; } .altus-alternatieven-loop ul.products::before, .altus-alternatieven-loop ul.products::after { content: none; } /* De kaarten zijn dezelfde als in het archief (Bricks-element, zie mu-plugins/altus-alternatieven-loop.php); hier de breedte in de rij en de uitlijning: de kaarten zijn even hoog, de titel vult de ruimte op, en prijs, levertermijn en knoppen zakken naar onderen. Zo staan ze bij alle kaarten op dezelfde lijn, ook bij een titel van 2 of 3 regels. */ /* Bricks zet op de kaart height: 100% (wordt hier "auto", dus niet gelijk getrokken) en het productpaginathema flex-wrap: wrap; beide corrigeren. */ .single-product .altus-alternatieven-loop li.product { align-self: stretch; display: flex; flex: 0 0 260px; flex-direction: column; flex-wrap: nowrap; float: none; height: auto; margin: 0; width: 260px; } .altus-alternatieven-loop li.product > h5 { flex: 1 1 auto; } /* Aantal + winkelwagen boven, "Bekijk dit product" eronder. Een uitverkocht product heeft geen aantalveld en winkelwagenknop; die ruimte blijft toch gereserveerd, zodat prijs en knoppen bij alle kaarten gelijk staan. */ .altus-alternatieven-loop .altus-steiger-koop__rij { align-items: flex-start; flex-direction: column; } .altus-alternatieven-loop .altus-steiger-koop__mand { min-height: 38px; } /* Knop van de cross-sells-kaarten in de rechterrail. */ .altus-crosssells li.product .button { background-color: var(--altus-groen); border: 0; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; height: 51px; /* De tekst valt hier vaak over twee regels; met de standaard regelafstand vulde ze de knop helemaal. Krapper zetten geeft lucht boven en onder. */ line-height: 1.15; margin-top: 12px; padding: 0 20px; text-align: center; text-transform: capitalize; transition: background-color 0.15s ease; } .altus-crosssells li.product .button:hover { background-color: #4aad51; } /* In de smalle rechterkolom enkel een winkelwagen-icoon in plaats van de tekst: dezelfde knop, maar compact. De tekst blijft in de HTML staan en wordt met font-size: 0 verborgen, zodat schermlezers ze nog voorlezen. */ .altus-crosssells li.product .button { align-self: flex-start; flex: 0 0 auto; font-size: 0; height: 38px; margin-top: 0; /* Bricks legt op knoppen een min-height van 40px; die zou de knop hoger maken dan het aantalveld ernaast. */ min-height: 38px; padding: 0; width: 38px; } .altus-crosssells li.product .button::before { content: "\f07a"; font-family: "Font Awesome 6 Solid"; font-size: 18px; font-weight: 900; line-height: 1; } /* ----------------------------------------------------- sterbeoordeling --- */ /* Voor het beoordelingselement staat de kleur als instelling op het element. */ .brxe-product-rating { margin: -8px 0 0; } .brxe-product-rating .woocommerce-review-link { color: var(--altus-navy); font-size: 14px; text-decoration: none; } /* De specificatietabel mag niet buiten haar kader lopen bij smalle kolommen. */ .altus-speckaart table { table-layout: fixed; } .altus-speckaart th, .altus-speckaart td { /* break-word i.p.v. anywhere: anders splitste "8711563100954" middenin. */ overflow-wrap: break-word; word-break: normal; } /* De badge bij "Soort" stak buiten het kader; nu breekt hij mee af. */ .altus-speckaart td a { max-width: 100%; white-space: normal; } /* Enkel tussen 992 en 1250px staat de kaart nog in de smalle rechterkolom (~258px) naast de rest; daar past label en waarde niet naast elkaar en zet ik het label erboven. Vanaf 991px naar beneden klapt de pagina naar één kolom en staat de kaart over de volle breedte — op tablet én telefoon passen ze dus gewoon naast elkaar. */ @media (min-width: 992px) and (max-width: 1250px) { .altus-speckaart th, .altus-speckaart td { display: block; width: auto; } .altus-speckaart th { border-bottom: 0; padding-bottom: 0; } .altus-speckaart td { padding-top: 2px; text-align: left; } } /* ------------------------------------------------------ betaalmethodes --- */ .altus-betaalmethodes { align-items: center; border: 1px solid #e3e7f0; border-radius: 6px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 14px 18px; } .altus-betaalmethodes--zonder-kader { border: 0; padding: 0; } .altus-betaalmethodes img { display: block; height: 26px; width: auto; } /* -------------------------------------------------------- cross-sells --- */ .altus-crosssells__titel { color: var(--altus-navy); font-size: 22px; font-weight: 500; line-height: 1.2; margin: 0 0 16px; } .altus-crosssells ul.products { display: grid; /* minmax(0, …) i.p.v. 1fr: anders mag de inhoud breder worden dan de kolom en loopt ze buiten de rail op een smaller scherm. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; list-style: none; margin: 0; padding: 0; } .altus-crosssells ul.products::before, .altus-crosssells ul.products::after { content: none; } .altus-crosssells li.product { display: flex; flex-direction: column; float: none; margin: 0; width: auto; } .altus-crosssells li.product > a.woocommerce-LoopProduct-link { display: flex; flex: 1 1 auto; flex-direction: column; } .altus-crosssells li.product img { height: auto; width: 100%; } .altus-crosssells .woocommerce-loop-product__title { color: var(--altus-navy); font-size: 15px; font-weight: 500; line-height: 1.3; margin: 10px 0 6px; } /* Géén vaste hoogte: bij een lange adviesprijs liep de tekst dan over de titel heen. De knoppen lijnen uit doordat de kaarten in de rij even hoog zijn en de knop met margin-top: auto onderaan de kaart geduwd wordt. */ .altus-crosssells li.product .price { display: flex; flex-direction: column; justify-content: flex-end; margin-top: auto; } /* De link vult de resterende hoogte van de kaart; samen met margin-top: auto op de prijs komen de prijzen van beide kaarten in een rij zo altijd op dezelfde lijn, ongeacht of er sterren staan of hoe lang de titel is. */ .altus-crosssells li.product > a.woocommerce-LoopProduct-link { flex: 1 1 auto; } .altus-crosssells .star-rating { color: #d8dce8; } .altus-crosssells .star-rating span::before { color: var(--altus-oranje); } /* -------------------------------------------------------------- tabs --- */ /* Live: actieve tab oranje met oranje onderlijn, rest navy, dunne lijn onder de hele rij. WooCommerce zet zelf de klasse .active. */ .brxe-product-tabs ul.tabs { border-bottom: 0; display: flex; gap: 28px; list-style: none; margin: 0 0 24px; padding: 0; } .brxe-product-tabs ul.tabs::before, .brxe-product-tabs ul.tabs::after { content: none; } .brxe-product-tabs ul.tabs li { background: none; border: 0; border-bottom: 3px solid transparent; margin: 0; padding: 0 0 10px; } .brxe-product-tabs ul.tabs li a { color: var(--altus-navy); font-size: 16px; font-weight: 500; padding: 0; text-decoration: none; } .brxe-product-tabs ul.tabs li.active { border-bottom-color: var(--altus-oranje); } .brxe-product-tabs ul.tabs li.active a { color: var(--altus-oranje); font-weight: 600; } .brxe-product-tabs ul.tabs li:hover a { color: var(--altus-oranje); } /* Aantalveld naast de winkelwagenknop in het cross-sells-blok. Maten nagemeten op live: minknop 24px, veld 38px, plusknop 24px, alles 38px hoog, met de icoonknop er direct naast. */ .altus-loop-koop { align-items: center; display: flex; gap: 8px; /* Duwt de rij naar de onderkant van de kaart. De kaarten in één rij zijn even hoog, dus staan de knoppen zo naast elkaar op dezelfde lijn. */ margin-top: auto; padding-top: 12px; } .altus-aantal { align-items: center; border: 1px solid #e1e1e1; border-radius: 6px; display: flex; height: 38px; overflow: hidden; } .altus-aantal__knop { align-items: center; background: #fff; border: 0; color: var(--altus-navy); cursor: pointer; /* flex in plaats van de standaard knop-uitlijning: zo staat het teken zowel horizontaal als verticaal precies in het midden. */ display: flex; font-size: 15px; height: 100%; justify-content: center; line-height: 1; padding: 0; width: 24px; } .altus-aantal__knop:hover { background: #f4f6fb; } .altus-aantal__veld { -moz-appearance: textfield; background: #fff; border: 0; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; color: #222; font-size: 14px; height: 100%; padding: 0; text-align: center; width: 38px; } /* De pijltjes van het getalveld weg: we hebben eigen − en + knoppen. */ .altus-aantal__veld::-webkit-outer-spin-button, .altus-aantal__veld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .altus-aantal__veld:focus { outline: 2px solid var(--altus-oranje); outline-offset: -2px; } /* Geen grijze lijnen rond het tabbladenblok: WooCommerce zet standaard een rand boven en onder de hele wrapper. Enkel de oranje streep onder het actieve tabblad blijft staan. */ .brxe-product-tabs .woocommerce-tabs, .brxe-product-tabs .wc-tabs-wrapper { border-bottom: 0; border-top: 0; } /* ------------------------------------------------- mobiel: maatkeuze --- */ /* Op een telefoon paste er maar één maatknop naast elkaar (de knoppen vragen minstens 160px, de kolom is er 303px breed). Met vast twee kolommen en een iets kleinere letter halveert de hoogte van het maatblok. */ @media (max-width: 767px) { .iconic-wlv-terms { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .iconic-wlv-terms__term-content { font-size: 14px; padding: 8px; } .iconic-lv-term-button-price { font-size: 14px; } } /* ------------------------------------------------- mobiel: koopbalk --- */ .altus-koopbalk { align-items: center; background: #fff; border-top: 1px solid #e3e7f0; bottom: 0; box-shadow: 0 -2px 12px rgba(34, 58, 128, 0.12); display: none; gap: 16px; /* Prijs en knop staan samen gecentreerd; het hoekje rechts blijft zo vrij voor de knop "terug naar boven" van Bricks. */ justify-content: center; left: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); position: fixed; right: 0; /* Boven de pagina-inhoud, maar onder eventuele meldingen of pop-ups. */ z-index: 90; } @media (max-width: 767px) { .altus-koopbalk[data-zichtbaar="ja"] { display: flex; } /* Zodat de balk de laatste regels van de pagina niet afdekt. */ body.altus-koopbalk-actief { padding-bottom: 74px; } } /* Bedrag en BTW-label onder elkaar: zo blijft de prijs binnen de linkerhelft en botst ze niet met de knop die midden in de balk staat. */ .altus-koopbalk__prijs { display: flex; flex-direction: column; line-height: 1.15; } .altus-koopbalk__bedrag { color: var(--altus-oranje); font-size: 20px; font-weight: 700; white-space: nowrap; } .altus-koopbalk__btw { color: #6a7290; font-size: 12px; font-weight: 400; } .altus-koopbalk__knop { align-items: center; background: var(--altus-groen); border-radius: 6px; color: #fff; display: flex; flex: 0 1 auto; font-size: 16px; font-weight: 600; height: 46px; justify-content: center; padding: 0 22px; text-decoration: none; white-space: nowrap; } .altus-koopbalk__knop:hover, .altus-koopbalk__knop:focus { background: #4aad51; color: #fff; } /* In de koopbalk is de plaats beperkt: enkel het winkelwagen-icoon in plaats van de tekst. De tekst blijft in de HTML staan (font-size: 0) zodat schermlezers ze nog voorlezen. */ .altus-koopbalk__knop { font-size: 0; padding: 0; width: 56px; } .altus-koopbalk__knop::before { content: "\f07a"; font-family: "Font Awesome 6 Solid"; font-size: 20px; font-weight: 900; line-height: 1; } /* --------------------------------------- mobiel: carrousel + tabtekst --- */ @media (max-width: 767px) { /* De pijlen namen samen met de tussenruimte 112px van de 305px in, waardoor er van een kaart van 260px maar 193px zichtbaar was. Kleinere pijlen, en de kaart precies zo breed als het spoor: één kaart per keer, volledig in beeld. */ .altus-alternatieven-loop__rij { gap: 8px; } .altus-loop-pijl { flex: 0 0 32px; height: 32px; width: 32px; } .altus-alternatieven-loop ul.products { gap: 16px; width: 100%; } .single-product .altus-alternatieven-loop li.product { flex: 0 0 100%; width: 100%; } /* De koppen in de tabbladen komen uit de productomschrijving en stonden op de maat van een breed scherm (34 en 29px). */ .brxe-product-tabs .woocommerce-Tabs-panel h1, .brxe-product-tabs .woocommerce-Tabs-panel h2 { font-size: 22px; line-height: 1.3; } .brxe-product-tabs .woocommerce-Tabs-panel h3, .brxe-product-tabs .woocommerce-Tabs-panel h4 { font-size: 18px; line-height: 1.35; } .brxe-product-tabs .woocommerce-Tabs-panel p, .brxe-product-tabs .woocommerce-Tabs-panel li { font-size: 15px; line-height: 1.6; } } /* Op tablet staat de rechterrail over de volle breedte (713px). Met twee kolommen worden de cross-sell-kaarten dan 349px breed met afbeeldingen van 436px hoog — veel te groot voor een aanvullingsblok. Vier op een rij houdt ze klein. Op een telefoon blijven het er twee. */ @media (min-width: 768px) and (max-width: 991px) { .altus-crosssells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ------------------------------------------------------ gebruiksbadge --- */ /* Naast het merklogo: geeft aan of het product voor particulier of voor professioneel gebruik bedoeld is. Op live is de afbeelding 375×82; hier bewust kleiner getoond (170 px). */ .altus-gebruik-badge img { display: block; height: auto; max-width: 100%; width: 170px; } @media (max-width: 767px) { .altus-gebruik-badge img { width: 150px; } } /* ---------------------------------------------------------- terug-link --- */ /* Rechts op de broodkruimelregel, in dezelfde maat en kleur als de kruimels. Het pijltje links ervan komt uit CSS, zoals het scheidingsteken tussen de kruimels. */ .altus-terug-link { color: var(--altus-navy); flex: 0 0 auto; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; } .altus-terug-link::before { content: "‹"; margin-right: 5px; } .altus-terug-link:hover { color: var(--altus-oranje); } /* De shortcode-houder van Bricks neemt de resterende breedte van de rij in; zonder deze regel plakt de link tegen de broodkruimel in plaats van rechts. */ .altus-terug-houder { text-align: right; } @media (max-width: 767px) { .altus-terug-houder { text-align: left; } } /* De broodkruimel is sinds de terug-link een flex-item in dezelfde rij en kromp daardoor mee, waardoor de kruimels over twee regels vielen terwijl er nog ruimte was. Ze neemt nu de vrije ruimte in; de link houdt zijn eigen breedte en blijft rechts staan. */ #brxe-pbcon1 > .brxe-woocommerce-breadcrumbs { flex: 1 1 auto; min-width: 0; } /* Bricks geeft een shortcode-element `width: 100%`; als flex-item eiste de houder daarmee de hele rij op en bleef er voor de kruimels niets over. */ #brxe-pbcon1 > .altus-terug-houder { flex: 0 0 auto; width: auto; } /* ------------------------------------------ onderdelen (samengesteld) --- */ /* De onderdelenlijst van een samengesteld product, in de rechterrail (330px). Zonder opmaak zette de plugin naam, aantal en prijs naast elkaar: samen 472px in een kolom van 330, dus alles brak af en elk onderdeel werd 260px hoog. Live zet ze onder elkaar; dat doen we hier ook. */ .altus-onderdelen h3 { color: var(--altus-navy); font-size: 18px; font-weight: 500; margin: 0; } .altus-onderdelen .wooco_component { border-bottom: 1px solid #eef0f5; padding: 12px 0; } .altus-onderdelen .wooco_component:last-child { border-bottom: 0; } /* De naam van het ónderdeel ("Opbouwframe 135-28-7 sport RS3") is de interne benaming; live toont enkel de productnaam eronder. */ .altus-onderdelen .wooco_component_name { display: none; } .altus-onderdelen .wooco_component_product { /* align-items: flex-start is hier de kern: de plugin centreert de blokjes, waardoor elk stuk op zijn eigen breedte gecentreerd werd en dus anders insprong — de naam 48px, het aantal 82px, de prijzen 36px. Nu staat alles op één lijn, zoals live. */ align-items: flex-start; display: flex; flex-direction: column; gap: 6px; } .altus-onderdelen .wooco_component_product_name a { color: var(--altus-navy); /* 16px zoals live; 14px oogde te klein in de rail van 330px. */ font-size: 16px; font-weight: 700; line-height: 1.3; text-decoration: none; } .altus-onderdelen .wooco_component_product_name a:hover { color: var(--altus-oranje); } /* Artikelnummer en EAN: enkel zichtbaar voor wie aangemeld is. */ .altus-onderdelen .extra-info { color: var(--altus-oranje); display: block; font-size: 13px; margin-top: 2px; } /* Aantal in dit pakket: label en stepper op één regel. */ .altus-onderdelen .wooco_component_quantity_image_wrapper { align-items: center; display: flex; gap: 10px; } .altus-onderdelen .wooco_component_product_qty { align-items: center; display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px; } /* Live toont geen miniatuur bij de onderdelen. */ .altus-onderdelen .wooco_component_product_image { display: none; } .altus-onderdelen .wooco_component_product_description { font-size: 14px; line-height: 1.4; } .altus-onderdelen .adviesprijs { color: rgba(36, 52, 122, 0.5); font-size: 14px; } /* "Onze prijs" met het bedrag groter, zoals bij de hoofdprijs op de pagina. */ .altus-onderdelen .altusprijs { color: var(--altus-oranje); font-size: 15px; font-weight: 700; } .altus-onderdelen .altusprijs ins { font-size: 19px; text-decoration: none; } /* Het aantalvakje bij een onderdeel in dezelfde stijl als elders op de pagina: één omkaderd geheel, minknop 24px, invoer 38px, plusknop 24px. */ .altus-onderdelen .wooco-qty-label { color: var(--altus-navy); font-size: 14px; } .altus-onderdelen .wooco-qty-input { align-items: center; border: 1px solid #e1e1e1; border-radius: 6px; display: inline-flex; height: 34px; overflow: hidden; } .altus-onderdelen .wooco_component_product_qty_btn { align-items: center; background: #fff; color: var(--altus-navy); cursor: pointer; display: flex; font-size: 14px; height: 100%; justify-content: center; line-height: 1; user-select: none; width: 24px; } .altus-onderdelen .wooco_component_product_qty_btn:hover { background: #f4f6fb; } .altus-onderdelen .wooco_component_product_qty_input { -moz-appearance: textfield; background: #fff; border: 0; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; border-radius: 0; color: #222; /* Zonder vaste basis groeit het veld mee met de eigen maat die de browser aan een getalveld geeft — hetzelfde als bij de andere aantalvakjes. */ flex: 0 0 38px; font-size: 13px; height: 100%; padding: 0; text-align: center; width: 38px; } .altus-onderdelen .wooco_component_product_qty_input::-webkit-outer-spin-button, .altus-onderdelen .wooco_component_product_qty_input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* De plugin zet zelf `flex: 0 0 40px` op de knopjes en een eigen hoogte op het invoerveld; die regels wonnen van de regels hierboven. Vandaar deze specifiekere versie met dezelfde maten als de andere aantalvakjes. */ .altus-onderdelen .wooco-qty-input .wooco_component_product_qty_btn { flex: 0 0 24px; height: 32px; width: 24px; } .altus-onderdelen .wooco-qty-input .wooco_component_product_qty_input { flex: 0 0 38px; height: 32px; padding: 0; width: 38px; } /* --------------------------------- samengesteld: maatkeuze en knoppen --- */ /* Live zet drie maatknoppen naast elkaar bij samengestelde producten (128px per knop). Bij de simpele producten blijven het er twee, want daar zijn de labels veel langer ("3x10 sporten - 6.64 meter"). */ .product-type-composite .iconic-wlv-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* De winkelwagenknop in het onderdelenblok kwam op 46px uit; overal elders op de site is hij 51px. */ .altus-onderdelen .single_add_to_cart_button { height: 51px; min-height: 51px; } /* Het onderdelenblok als omkaderd geheel, zoals live: blauwe rand met de kop erin en de toelichting erboven. */ .altus-onderdelen { border: 1px solid var(--altus-navy); border-radius: 4px; padding: 14px 16px 6px; } .altus-onderdelen__toelichting { color: var(--altus-navy); font-size: 13px; line-height: 1.5; } .altus-onderdelen__toelichting p { margin: 0 0 8px; } .altus-onderdelen__toelichting a { color: var(--altus-oranje); } /* Aantal + winkelwagenknop in de middenkolom van een samengesteld product, in dezelfde maten als bij een gewoon product. */ .altus-composite-koop { align-items: center; display: flex; gap: 14px; } .altus-composite-koop .quantity { align-items: center; border: 1px solid #e1e1e1; border-radius: 6px; display: flex; flex: 0 0 88px; height: 51px; overflow: hidden; width: 88px; } .altus-composite-koop .action { align-items: center; background: #fff; border: 0; color: var(--altus-navy); cursor: pointer; display: flex; flex: 0 0 24px; font-size: 15px; height: 100%; justify-content: center; line-height: 1; padding: 0; width: 24px; } .altus-composite-koop .action:hover { background: #f4f6fb; } .altus-composite-koop .qty { -moz-appearance: textfield; background: #fff; border: 0; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; color: #222; flex: 0 0 38px; font-size: 14px; height: 100%; padding: 0; text-align: center; width: 38px; } .altus-composite-koop .qty::-webkit-outer-spin-button, .altus-composite-koop .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .altus-composite-koop .single_add_to_cart_button { background-color: var(--altus-groen); border: 0; border-radius: 6px; color: #fff; cursor: pointer; flex: 1 1 180px; font-size: 17px; font-weight: 600; height: 51px; min-height: 51px; text-transform: capitalize; transition: background-color 0.15s ease; } .altus-composite-koop .single_add_to_cart_button:hover { background-color: #4aad51; } /* ------------------------------------------------ breedte van de pagina --- */ /* De container stond op 92% breed én kreeg daarbovenop 20px opvulling. Samen gaf dat een strook van 71px links en rechts op een venster van 1285px — ruimte die van de kolommen afging. Nu één vaste marge van 24px op elke schermbreedte; het maximum van 1400px blijft, zodat de regels op een heel breed scherm niet eindeloos lang worden. Geldt voor beide productsjablonen: die gebruiken dezelfde element-ID's. */ #brxe-pbcon1, #brxe-phcon1, #brxe-prcon1 { /* Het maximum stond op 1400px. Op een breed scherm (Sylvie werkt op ±1950px) groeide de marge daardoor mee tot bijna 300px per kant. Met 1680px komt de inhoud tot waar ze gevraagd werd, en blijven de regels in de omschrijving nog leesbaar kort. De container staat gecentreerd, dus links en rechts krijgen automatisch dezelfde ruimte. */ max-width: 1680px; padding-left: 24px; padding-right: 24px; width: 100%; } /* De knop onderaan de onderdelenlijst kreeg een vaste basisbreedte mee en liep daardoor buiten de rechterrail op een smaller scherm. */ .altus-onderdelen form.cart .single_add_to_cart_button { flex: 1 1 auto; max-width: 100%; min-width: 0; } .altus-onderdelen form.cart { flex-wrap: wrap; } /* De linkerzone staat op 71% en de rechterrail op 26%; samen 97%, waardoor er rechts 3% min de tussenruimte overbleef en de rail 8px vóór de containerrand stopte. De rail vult dat restje nu op, zodat links en rechts even breed zijn. Enkel vanaf 992px: daaronder staan de zones onder elkaar op volle breedte. */ /* Op een breed scherm gaat álle extra ruimte naar de productfoto: het koopblok in het midden (460px) en de rechterrail (330px) houden de maat die ze op 1440px hadden. Ze mogen wél krimpen op een smaller scherm — vandaar flex-shrink 1 en geen vaste breedte — maar nooit méér worden. */ @media (min-width: 992px) { /* flex-basis 0 (niet auto): met `auto` bepaalt de inhoud van de galerij de basis, en die is enorm — dan eiste de foto de ruimte op en kromp het koopblok tot 284px. Met basis 0 vragen galerij en linkerzone niets en krijgen ze enkel wat er overblijft. */ #brxe-pzonel { flex: 1 1 0; min-width: 0; width: auto; } #brxe-pzoner { flex: 0 1 330px; width: 330px; } /* De foto en het koopblok houden hun onderlinge verhouding uit het sjabloon (48% / 53%) en verdelen samen wat er overblijft. Eerder liet ik alle extra ruimte naar de foto gaan — die werd dan 778px en dat was te veel — en daarna eiste het koopblok alles op. Dit blijft in verhouding. */ } /* De miniatuur van een onderdeel staat op live wél in beeld, rechts naast het aantal. Ik had ze eerder verborgen; dat was verkeerd. */ .altus-onderdelen .wooco_component_product_image { display: block; flex: 0 0 auto; max-width: 60px; } .altus-onderdelen .wooco_component_product_image img { display: block; height: auto; width: 100%; } /* "Aantal in dit pakket:" staat op live boven de stepper, niet ernaast. */ .altus-onderdelen .wooco_component_product_qty { align-items: flex-start; flex-direction: column; gap: 4px; } .altus-onderdelen .wooco_component_quantity_image_wrapper { /* flex-start, niet flex-end: het aantal werd anders tegen de onderkant van de 88px hoge miniatuur geduwd, met een gat van ~26px boven het label. Op live staan miniatuur en label bovenaan gelijk. */ align-items: flex-start; justify-content: flex-start; gap: 16px; } /* De plugin geeft elk onderdeel zijn eigen inspringing mee: de productnaam sprong 43px in, de prijzen 36px en het aantal zelfs 87px vanaf de rand van het kader. Live lijnt alles op dezelfde lijn uit. */ .altus-onderdelen .wooco_component_product, .altus-onderdelen .wooco_component_product_name, .altus-onderdelen .wooco_component_product_info, .altus-onderdelen .wooco_component_product_description, .altus-onderdelen .wooco_component_quantity_image_wrapper, .altus-onderdelen .wooco_component_product_qty { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* Kleur en maat van de onderdelenprijzen gelijk aan live: "Onze prijs" staat daar in navy met enkel het bedrag in oranje — bij ons was de hele regel oranje. Ook de stepper is er wat forser en de regels staan dichter op elkaar. */ .altus-onderdelen .altusprijs { color: var(--altus-navy); font-size: 15px; font-weight: 700; } .altus-onderdelen .altusprijs ins { color: var(--altus-oranje); font-size: 21px; } .altus-onderdelen .altusprijs .excluded-vat { color: var(--altus-navy); font-size: 14px; font-weight: 400; } .altus-onderdelen .wooco_component_product { gap: 2px; } .altus-onderdelen .wooco_component_quantity_image_wrapper { margin: 4px 0 6px; } .altus-onderdelen .wooco-qty-label { font-size: 15px; } /* Stepper iets forser, zoals live. */ .altus-onderdelen .wooco-qty-input { height: 40px; } .altus-onderdelen .wooco-qty-input .wooco_component_product_qty_btn { flex: 0 0 30px; font-size: 16px; height: 38px; width: 30px; } .altus-onderdelen .wooco-qty-input .wooco_component_product_qty_input { flex: 0 0 44px; font-size: 15px; height: 38px; width: 44px; } /* --------------------------------------------------------------------------- Onderdelen: exact de waarden van live, opgemeten op 27-08 door het dichtgeklapte tabblad daar geforceerd open te zetten. Niet meer op het oog bijstellen — dit zijn de echte cijfers: onderdeel opvulling 10px 0 productnaam 16px / 700 / #24337a / regelafstand 22,86px artikelnummer 16px / 400 / #ff6a00 — inline achter de naam "Aantal in dit pakket" 16px / 400 / #24337a stepper 40px hoog, invoerveld 14px miniatuur 88px hoog adviesprijs 16px / 400 / rgba(36,52,122,.5), 6px eronder "Onze prijs" 16px / 700 / #24337a, regelafstand 16px bedrag 25px / 700 / #ff6a00, regelafstand 25px ------------------------------------------------------------------------- */ .altus-onderdelen .wooco_component { padding: 10px 0; } .altus-onderdelen .wooco_component_product { gap: 0; } .altus-onderdelen .wooco_component_product_name { line-height: 22.86px; } .altus-onderdelen .wooco_component_product_name a { font-size: 16px; font-weight: 700; line-height: 22.86px; } /* Inline achter de naam, niet als eigen regel eronder. */ .altus-onderdelen .extra-info { display: inline; font-size: 16px; font-weight: 400; line-height: 22.86px; margin-top: 0; } .altus-onderdelen .wooco-qty-label { font-size: 16px; font-weight: 400; line-height: 22.86px; } .altus-onderdelen .wooco_component_quantity_image_wrapper { margin: 0; } .altus-onderdelen .wooco-qty-input { height: 40px; } .altus-onderdelen .wooco-qty-input .wooco_component_product_qty_input { font-size: 14px; line-height: 38px; } .altus-onderdelen .wooco_component_product_image { max-width: none; } .altus-onderdelen .wooco_component_product_image img { height: 88px; width: auto; } .altus-onderdelen .wooco_component_product_description { font-size: 16px; line-height: 22.86px; } .altus-onderdelen .adviesprijs { font-size: 16px; font-weight: 400; margin-bottom: 6px; } .altus-onderdelen .altusprijs { font-size: 16px; font-weight: 700; line-height: 16px; } .altus-onderdelen .altusprijs ins { font-size: 25px; line-height: 25px; } .altus-onderdelen .altusprijs .excluded-vat { font-size: 16px; font-weight: 400; } /* ------------------------------------ prijs bij samengestelde producten --- */ /* Bij een samengesteld product schrijft de configurator de totaalprijs in

— dát is het blok dat meebeweegt zodra je de aantallen aanpast. Het statische blok eronder komt uit de prijs-mu-plugin en verandert niet mee, dus dat verdwijnt hier. */ .product-type-composite .brxe-product-price .price-main-product { display: none; } /* De configurator gebruikt onze eigen klassen, maar zet het bedrag in in plaats van — daardoor bleef het oranje en de grote maat achterwege. */ .altusprijs bdi { color: var(--altus-oranje); font-size: 25px; font-weight: 700; text-decoration: none; } /* "(Bespaard 21,59%)" hoort niet in het prijsblok; live toont dat daar niet. */ .brxe-product-price .woocommerce-price-suffix { display: none; } /* De knop onderaan de onderdelen stond op gewicht 400 zonder icoon; live toont hem vet met een winkelwagentje ervoor. */ .altus-onderdelen .single_add_to_cart_button { align-items: center; display: flex; font-weight: 600; gap: 10px; justify-content: center; line-height: 1.2; text-align: center; } .altus-onderdelen .single_add_to_cart_button::before { content: "\f07a"; flex: 0 0 auto; font-family: "Font Awesome 6 Solid"; font-size: 17px; font-weight: 900; line-height: 1; } /* Specifieker: iets anders zette het gewicht terug op 400 — hetzelfde als eerder bij de knop bovenaan de simpele pagina. */ .altus-onderdelen form.cart button.single_add_to_cart_button { font-weight: 600; } /* Zelfde correctie voor de knop in de middenkolom van een samengesteld product: die stond ook nog op gewicht 400 en had geen icoon. */ .altus-composite-koop button.single_add_to_cart_button { align-items: center; display: flex; font-weight: 600; gap: 10px; justify-content: center; line-height: 1.2; } .altus-composite-koop .single_add_to_cart_button::before { content: "\f07a"; flex: 0 0 auto; font-family: "Font Awesome 6 Solid"; font-size: 17px; font-weight: 900; line-height: 1; } /* ------------------------- Aanvullende informatie in het tabblad --------- */ /* Bij samengestelde producten staat deze tabel onderaan in het tabblad (bij simpele producten staat ze in de rechterrail als .altus-speckaart, die apart opgemaakt is). Waarden opgemeten op live: rij 55px hoog, onderlijn 1px #e1e1e1 label (th) 16px / gewicht 400 / navy, links, opvulling 16px 12px 16px 0 waarde (td) 16px / gewicht 400 / navy, rechts, opvulling 16px 0 16px 12px Het label stond bij ons vet en er stonden geen lijnen tussen de rijen. */ .brxe-product-tabs table.woocommerce-product-attributes, .brxe-product-tabs table.shop_attributes { border: 0; border-collapse: collapse; margin: 0; width: 100%; } .brxe-product-tabs table.woocommerce-product-attributes tr, .brxe-product-tabs table.shop_attributes tr { border-bottom: 1px solid #e1e1e1; } .brxe-product-tabs table.woocommerce-product-attributes th, .brxe-product-tabs table.shop_attributes th { border: 0; color: var(--altus-navy); font-size: 16px; font-weight: 400; /* 13,5px i.p.v. 16px: met 16px kwam de rij op 60px uit, live zit op 55px. */ padding: 13.5px 12px 13.5px 0; text-align: left; } .brxe-product-tabs table.woocommerce-product-attributes td, .brxe-product-tabs table.shop_attributes td { border: 0; color: var(--altus-navy); font-size: 16px; font-weight: 400; padding: 13.5px 0 13.5px 12px; text-align: right; } .brxe-product-tabs table.woocommerce-product-attributes td p, .brxe-product-tabs table.shop_attributes td p { margin: 0; } /* Bij samengestelde producten staat het cross-sells-blok in de brede linkerkolom onder de tabbladen (bij simpele producten in de smalle rail). Live toont er daar vier naast elkaar; met de twee kolommen van de rail werden de kaarten 623px breed. */ @media (min-width: 992px) { .product-type-composite .altus-crosssells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* In de rail (330px) pasten het aantalvak (88px) en de knop met tekst (296px) niet samen op één regel, dus viel de knop eronder. Met enkel het winkelwagenicoon past het wel — de tekst blijft in de HTML staan voor schermlezers. */ .altus-onderdelen form.cart { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; } .altus-onderdelen form.cart .pi-edd { flex: 1 0 100%; } .altus-onderdelen form.cart .quantity { flex: 0 0 88px; } .altus-onderdelen form.cart button.single_add_to_cart_button { flex: 0 0 51px; font-size: 0; gap: 0; height: 51px; /* WooCommerce zet hier 10px marge boven; met align-items: center zakte de knop daardoor 5px onder het aantalvak. */ margin-top: 0; min-height: 51px; padding: 0; width: 51px; } .altus-onderdelen form.cart button.single_add_to_cart_button::before { font-size: 20px; } /* WooCommerce zet 19,2px marge onder

; samen met de rijruimte van 14px in de kolom gaf dat 33px tussen "Onze prijs" en de BTW-schakelaar. */ .brxe-product-price p.price { margin-bottom: 0; } /* ------------------------------------------- Iconic-dropdown als tegel --- */ /* Bij attributen die in Iconic op "dropdown" staan rendert de plugin