/* ========================================================================== * Webshop-overzicht en productpagina * * The Fire Station - child theme. Overgezet uit Customizer > Extra CSS * op 2026-09-17. Inhoud van dit bestand: * - Webshop - overzicht, filters en productkaarten (64 regels) * - Productpagina (123 regels) * * LET OP: deze bestanden laden laat in de , op exact de plek waar de * oude "Extra CSS" stond. Ze overschrijven daarom zowel het Total-thema als * style.css en de andere stylesheets van dit child theme. Zet nieuwe regels * bij voorkeur in style.css; gebruik dit bestand alleen om te overschrijven. * ========================================================================== */ /* -------------------------------------------------------------------------- * Webshop - overzicht, filters en productkaarten * -------------------------------------------------------------------------- */ div.br_alabel > span {margin-left: 0px !important; padding-left: 4px !important; padding-right: 4px !important;} .base-models-row ul:not(.products) li {color: #fff;} body:not(.home) .woocommerce-loop-product__title, body:not(.home) .woocommerce-loop-category__title {font-size: 1em !important; color: #a8a8a8 !important;} .woocommerce .woocommerce-result-count, .woocommerce-ordering {display: none !important;} .base-models-row ul:not(.products) { list-style: none !important; margin-left: 0px !important; position: relative; display: block !important; font-family: 'Manufaktur'; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.92em; } .base-models-row ul:not(.products) li {position: relative; padding-left: 25px; padding-bottom: 3px;} .base-models-row ul:not(.products) li:before { content: ''; display: block; width: 15px; height: 2px; background: #a8a8a8; position: absolute; left: 0px; top: 15px; } .base-models-row ul:not(.products) li a {text-decoration: underline !important; color: #CE9B4A !important;} .base-models-row ul:not(.products) ul li {padding-left: 0;} .base-models-row ul:not(.products) ul li:before {display: none;} .gozney-dome ul:not(.products) { list-style: none !important; margin-left: 0px !important; position: relative; display: block !important; font-family: 'Manufaktur'; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.92em; } .gozney-dome ul:not(.products) li { position: relative; padding-left: 25px; display: flex; align-items: center; color: #fff; } .gozney-dome ul:not(.products) li:before { content: ''; display: block; width: 15px; height: 2px; background: #a8a8a8; position: absolute; left: 0px; } .gozney-dome ul:not(.products) li a {text-decoration: underline !important; color: #CE9B4A !important;} .gozney-dome ul:not(.products) ul li {padding-left: 0;} .gozney-dome ul:not(.products) ul li:before {display: none;} .product.outofstock #tm-extra-product-options {display: none;} @media (max-width: 959px) { .accessoires-row .products ul.wpex-grid, .accessoires-row ul.products.wpex-grid {grid-template-columns: repeat(2, 1fr) !important;} } @media only screen and (max-width: 768px) { .woocommerce.mobile-slider ul.products.wpex-grid {display: flex; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;} .woocommerce.mobile-slider .products.wpex-grid .product {flex: 0 0 82%; scroll-snap-align: start;} .woocommerce-ordering {float: left !important; margin-bottom: 24px !important;} div.br_alabel.berocket_alabel_id_53724 > span { font-size: 0.8em !important; padding-left: 6px !important; padding-right: 6px !important; height: 30px !important; } } .entry.product .price>.from {display: none;} .woocommerce-ordering {float: right; margin-block-end: unset;} .shop_table {border: none !important;} .woocommerce .products .product a.button { padding: 20px !important; border-radius: 0px; border: 0; letter-spacing: .12rem; font-size: 0px; visibility: visible !important; } .products .product .button { display: inline-block !important; background: #63b909; position: absolute !important; bottom: 20px; right: 15px; transition: .3s; width: 18%; box-shadow: 0 3px 10px rgba(50, 50, 50, .2); -webkit-box-shadow: 0 3px 10px rgba(50, 50, 50, .2); } .products .product .button:hover { background: #CE9B4A; box-shadow: 0 3px 10px rgba(50, 50, 50, .4); -webkit-box-shadow: 0 3px 10px rgba(50, 50, 50, .4); } /* ** QUICK ADD TO CART BUTTON ** */ .products .product .button:before { content: ''; background: url(/wp-content/uploads/2024/11/cart-white-1.svg) no-repeat; display: block; width: 24px; height: 25px; background-size: 100%; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .wpfFilterWrapper {background-color: #181818;} #wpfBlock_1 {margin-top: 0 !important;} .wpfFilterVerScroll {max-height: unset !important;} .wpfFilterWrapper .wfpTitle, .wpfFilterWrapper .wfpDescription {font-family: 'Manufaktur'; text-transform: uppercase; color: #fff;} .wpfFilterWrapper .wfpTitle {font-size: 24px !important;} .wpfFilterWrapper .wfpDescription {font-size: 22px !important;} .wpfMainWrapper .wpfBlockClear:before {content: '\f2f1' !important; margin-left: 0 !important;} .wpfFilterButton.wpfButton, .wpfClearButton.wpfButton { background: transparent; width: fit-content !important; border: 2px solid #ce9b4a; font-family: 'Manufaktur'; color: #ce9b4a; text-transform: uppercase; font-size: .9em; padding: 0 12px; margin: 0 !important; transition: .3s; } .wpfFilterButton.wpfButton:hover, .wpfClearButton.wpfButton:hover {background: #ce9b4a; border: 2px solid #ce9b4a; color: #fff;} .berocket_better_labels .berocket_better_labels_line .br_alabel {font-family: 'Manufaktur'; text-transform: uppercase; margin-right: 0px; margin-left: 0px;} .prdctfltr-widget {padding: 30px; background: #181818;} .prdctfltr-widget:before { content: "Filter Producten"; font-family: "Manufaktur" !important; font-weight: 600 !important; font-size: 28px !important; text-transform: uppercase !important; color: #FFF; } .prdctfltr_wc_widget.prdctfltr_wc {margin-top: 15px;} .prdctfltr_filter label {font-size: 18px !important; line-height: 40px !important;} .prdctfltr_wc.prdctfltr_checkbox .prdctfltr_filter label>span:before { width: 18px !important; height: 18px !important; border: 1px solid #ccc !important; background-color: transparent !important; } .prdctfltr_filter .widget-title {margin-bottom: 0px;} .prdctfltr_checkboxes {margin-left: 2px;} .prdctfltr_count { height: auto; padding: auto; border: none; background-color: transparent; min-width: inherit; font-size: 16px; } .prdctfltr_count .pf-recount:before {content: "(";} .prdctfltr_count .pf-recount:after {content: ")";} .prdctfltr_wc.prdctfltr_checkbox .prdctfltr_filter label.prdctfltr_active>span:after {left: 2px; line-height: 20px; font-size: 16px;} .load-more-button {display: none;} .woof_products_top_panel {display: none !important;} @media only screen and (min-width: 769px) { .wpfFilterWrapper {padding: 24px !important;} } @media only screen and (max-width: 768px) { .wpfFilterWrapper {padding: 12px !important;} .wpfFilterTitle { margin-bottom: 0 !important; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .wpfCheckboxHier {margin-top: 12px;} .wpfFilterContent:not(.wpfHide) {padding-bottom: 12px !important;} .wpfFilterWrapper .wpfBlockClear {display: unset;} .woof_show_auto_form, .woof_hide_auto_form {display: none !important;} .prdctfltr_wc_widget.prdctfltr_wc .prdctfltr_filter .prdctfltr_add_scroll {height: 150px; max-height: 150px; overflow-y: scroll;} .load-more-button { height: auto; display: block; padding: 10px; padding-left: 0; color: #FFF; } } .products.wpex-grid .price del::after, .wpex-carousel .price del::after {top: 12px !important;} @media only screen and (max-width: 600px) { .accessoires-row .products {grid-template-columns: auto auto !important;} .products {grid-template-columns: auto;} } /* -------------------------------------------------------------------------- * Productpagina * -------------------------------------------------------------------------- */ .woocommerce-tabs {margin-bottom: 50px;} .cwgstock_button:hover {background: #6c6c6c;} .bundled_product:has(.details p.stock.out-of-stock) {opacity: 0.6; pointer-events: none;} .vcex-teaser.preorder .vcex-teaser-media:before { content: 'Pre-order nu'; padding: 6px 15px 6px 15px; background: rgba(252, 114, 45, 0.7); border: 1px solid #fc722d; border-radius: 30px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: block; width: fit-content; height: auto; position: absolute; margin-top: 15px; margin-left: 15px; text-transform: uppercase; line-height: 1; font-size: 1em; z-index: 9999; font-family: 'Manufaktur'; } .vcex-video.preorder:before { content: ' Pre-order nu'; padding: 6px 15px 6px 30px; background: rgba(252, 114, 45, 0.5); border: 1px solid #fc722d; border-radius: 30px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: block; width: fit-content; height: auto; position: absolute; left: 40px; top: 25px; text-transform: uppercase; line-height: 1; font-size: 1.1em; z-index: 9999; font-family: 'Manufaktur'; } .vcex-video.preorder::after { content: ''; width: 8px; height: 8px; background: #fc722d; border-radius: 50%; position: absolute; left: 54px; top: 38.5px; z-index: 10000; animation: pulse-dot 1.5s ease-in-out infinite; box-shadow: 0 0 6px #fc722d; } @media (max-width: 768px) { body.single-product #popup-list-wrap {bottom: 162px !important;} body.single-product #sleak-buttonwrap {bottom: 80px !important;} .vcex-video.preorder:before {left: 8%; top: 8%; font-size: 1em;} .vcex-video.preorder::after {left: 42px; top: 28px;} } .woocommerce-Tabs-panel ul.none li:before {background: #fff !important;} .nooit-meer-leverbaar { background-color: #555555; padding: 15px; margin: 20px 0; border-left: 4px solid #CE9B4A; order: 3; } .alternatief-product-wrapper {display: flex; align-items: center; gap: 15px; margin-top: 10px;} .alternatief-product-image {flex-shrink: 0;} .alternatief-product-image img {max-width: 80px; height: auto;} .alternatief-product-info {flex-grow: 1;} .alternatief-product-info a {text-decoration: none; color: inherit;} .alternatief-product-info a:hover {text-decoration: underline;} body:not(.single-product) .price ins .amount {color: #FFF;} .langere-levertijd {padding: 16px; background: #eb6d00; border-radius: 0px; margin-bottom: 20px;} .langere-levertijd * {color: #fff !important;} .pre-order-gift { padding: 12px; margin-bottom: 12px; font-family: 'Quattrocento Sans'; border: 3px solid #6EB81A; line-height: 1.6em; } .woocommerce-product-gallery .flex-direction-nav a {z-index: 2 !important;} .product span.onsale.on-preorder {display: none;} .product span.onsale.on-preorder {inset-block-start: 10px; inset-inline-start: 592px;} .single-product .woocommerce-tabs .panel ul.voordelen li::before {top: -3px;} .woocommerce-Tabs-panel .vc_col-sm-12 h2 {font-size: 1.8em; line-height: normal; margin: 0 0 10px 0;} .sticky-bar-content {display: flex; justify-content: space-between; align-items: center; gap: 10px;} .sticky-actions {display: flex; align-items: center; gap: 10px;} .sticky-product-image {width: 50px; height: 50px; object-fit: cover; border-radius: 6px;} .sticky-product-title { font-size: 19px; font-weight: bold; color: #181818; font-family: 'Manufaktur'; text-transform: uppercase; line-height: 1.1em; width: 200px; } .sticky-quantity {display: flex; align-items: center;} .sticky-quantity-input { width: 50px; padding: 5px; font-size: 14px; text-align: center; border: 1px solid #ccc; border-radius: 0px; } .pre-order, .later-leverbaar { display: block; order: 2; background: rgba(110, 184, 26, 1); width: fit-content; border: none; padding: 14px; color: #fff; font-size: 1em; margin: 24px 0; font-weight: 600; border-radius: 0px; } .later-leverbaar {font-size: 1.1em; margin-top: 0;} .woocommerce-product-details__short-description:has(.later-leverbaar) .stock {display: none !important;} span.onsale.on-preorder { height: 32px; line-height: 32px; font-size: 18px; padding: 0px 12px !important; font-family: 'Manufaktur'; text-transform: uppercase; } .woocommerce-tabs+.up-sells {display: none;} .woocommerce .product .summary .upsells h2 { margin: 0 0 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; line-height: normal; } .woocommerce .product .summary .upsells h2:after { content: ""; height: 3px; background: #CE9B4A; display: block; flex-grow: 1; } .woocommerce .product .summary .upsells ul.products {grid-template-columns: repeat(3, 1fr); gap: 16px;} .woocommerce .product .summary .upsells ul.products .product { flex-direction: column; padding: 12px; background: #181818; border: 1px solid #fff; height: 120px; transition: .3s; } .woocommerce .product .summary .upsells ul.products .product:hover {border: 1px solid #73b929;} .woocommerce .product .summary .upsells ul.products .product .product-inner {gap: 12px; flex-direction: row; height: 100%;} .woocommerce .product .summary .upsells .berocket_better_labels.berocket_better_labels_image {display: block; width: fit-content;} .woocommerce .product .summary .upsells .berocket_better_labels .berocket_better_labels_line .br_alabel {margin-right: 0;} .woocommerce .product .summary .upsells div.br_alabel.berocket_alabel_id_50456, .woocommerce .product .summary .upsells div.br_alabel.berocket_alabel_id_50464, .woocommerce .product .summary .upsells div.br_alabel.berocket_alabel_id_50463 {display: none !important;} .woocommerce .product .summary .upsells div.br_alabel.berocket_alabel_id_49517 {display: inline-block !important;} .woocommerce .product .summary .upsells div.br_alabel.berocket_alabel_id_49517 > span { background: transparent; color: #73b929; padding: 0 !important; margin: 0 !important; text-align: left; } .woocommerce .product .summary .upsells ul.products .product .product-inner > .outofstock-badge {top: 30%;} .woocommerce .product .summary .upsells ul.products .product .product-inner .wpex-loop-product-images {width: 94px;} .woocommerce .product .summary .upsells ul.products .product .product-inner .wpex-loop-product-images img {height: 100%; object-fit: cover;} .woocommerce .product .summary .upsells ul.products .product .product-inner .product-details {padding-top: 0; display: flex; flex-direction: column; margin-top: 16px;} .woocommerce .product .summary .upsells ul.products .product .product-inner .product-details .price {display: none;} .woocommerce .product .summary .upsells ul.products .product .product-details h2 {display: none;} .woocommerce .product .summary .upsells ul.products .product .product-details:not(a) {font-family: 'Manufaktur'; text-transform: uppercase;} .woocommerce .product .summary .upsells ul.products .product .product-details a {font-family: 'Manufaktur'; text-transform: uppercase;} .woocommerce .product .summary .upsells ul.products .product .product-details:before {color: #CE9B4A; line-height: normal; font-size: 1.1em;} .woocommerce .product .summary .upsells ul.products .product .product-details:after {display: none; color: #73b929; line-height: normal; font-size: 0.9em;} .woocommerce .product .summary .upsells ul.products .product:first-child .product-details:before {content: 'Basic';} .woocommerce .product .summary .upsells ul.products .product:not(:first-child):not(:last-child) .product-details:before {content: 'Compleet';} .woocommerce .product .summary .upsells ul.products .product:last-child .product-details:before {content: 'Deluxe';} .woocommerce .product .summary .upsells ul.products .product:first-child .product-details:after {content: '5 accessoires';} .woocommerce .product .summary .upsells ul.products .product:not(:first-child):not(:last-child) .product-details:after {content: '8 accessoires';} .woocommerce .product .summary .upsells ul.products .product:last-child .product-details:after {content: '11 accessoires';} /* Maak de gehele upsell-container klikbaar */ .woocommerce .product .summary .upsells ul.products .product {position: relative; display: block; text-decoration: none;} /* Zorg ervoor dat de link op de gehele container werkt */ .woocommerce .product .summary .upsells ul.products .product a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: block; height: 100%; } /* Optioneel: Verberg de standaard link tekst */ .woocommerce .product .summary .upsells ul.products .product a .woocommerce-LoopProduct-link {display: none;} .woocommerce .product .summary {display: flex; flex-direction: column;} .woocommerce .product .summary .product_title {order: 1;} .woocommerce .product .summary .price {order: 2;} .woocommerce .product .summary .cwginstock-subscribe-form {order: 3;} .woocommerce .product .summary .woocommerce-product-details__short-description {order: 3;} .woocommerce .product .summary .up-sells {order: 4; display: none; visibility: hidden;} .woocommerce .product .summary .stock {order: 5; width: fit-content;} .woocommerce-product-details__short-description .product-sets-blok h4 {color: #fff;} .woocommerce-product-details__short-description .vcex-feature-box { background: #181818; padding: 12px 12px 4px 12px; border: 1px solid #fff; text-decoration: none !important; gap: 12px; } .woocommerce-product-details__short-description .vcex-feature-box-content h3 {font-family: 'Manufaktur'; font-size: 22px; color: #CE9B4A; margin-bottom: 8px;} .woocommerce-product-details__short-description .vcex-feature-box-content .vcex-feature-box-text {font-family: 'Manufaktur'; text-transform: uppercase; line-height: 1;} .woocommerce-product-details__short-description .vcex-feature-box-content .vcex-feature-box-text p {display: inline-flex; flex-direction: column; gap: 6px;} .woocommerce-product-details__short-description .vcex-feature-box-content .vcex-feature-box-text .acc {color: #D64444; display: none;} .woocommerce-product-details__short-description .vcex-feature-box-content .vcex-feature-box-text .korting {color: #D64444;} .woocommerce-product-details__short-description .vcex-feature-box-content .vcex-feature-box-button {margin-top: 12px;} .woocommerce-product-details__short-description .vcex-feature-box-content .vcex-feature-box-button a { padding: 4px 10px; background: #73b929; color: #fff; letter-spacing: 1px; transition: .3s; } .woocommerce-product-details__short-description .vcex-feature-box-content .vcex-feature-box-button a:hover {background: #CE9B4A;} .woocommerce-product-details__short-description:not(.langere-levertijd) strong {color: #CE9B4A;} @media (max-width: 959px) { .woocommerce-product-details__short-description .vcex-feature-box {flex-direction: row;} .woocommerce-product-details__short-description .vcex-feature-box .vcex-feature-box-media {width: 30%;} .woocommerce-product-details__short-description .vcex-feature-box .vcex-feature-box-content {width: 70%;} .woocommerce .product .summary .upsells ul.products {grid-template-columns: auto;} .woocommerce .product .summary .upsells ul.products .product .product-inner .wpex-loop-product-images {width: 32%;} .woocommerce .product .summary .upsells h2 {font-size: 20px !important;} .woocommerce .product .summary .upsells ul.products .product .product-details:before {font-size: 1.2em;} .woocommerce .product .summary .upsells ul.products .product .product-details:after {font-size: 1em;} } .woocommerce-Tabs-panel#tab-description strong {color: #FFF;} .woocommerce-Tabs-panel h2:not(:first-child) {display: block; margin-bottom: 0;} @media only screen and (min-width: 769px) { .woocommerce .product .summary .upsells .berocket_better_labels.berocket_better_labels_image {top: 44px !important; bottom: unset !important; left: 106px !important; right: unset !important;} } @media only screen and (max-width: 768px) { .langere-levertijd {font-size: 18px;} .sticky-bar-content {gap: 8px;} .sticky-quantity-input {height: 40px;} } .woocommerce .product .summary .quantity {float: left; width: fit-content; margin-right: 12px;} .bundle_form .bundle_wrap {float: left;} .woocommerce .product .summary .offerteknop:hover {background: #73b929; border: 1px solid #fff; color: #fff;} .woocommerce .product p.stock:has(.voorraad-een) .quantity {display: none;} .woocommerce-tabs .wc-tabs::after {display: none;} @media only screen and (min-width: 769px) { .woocommerce-Tabs-panel#tab-description h2 {font-size: 26px; line-height: 1.3em;} .woocommerce-Tabs-panel#tab-description h3 {font-size: 22px;} } @media only screen and (max-width: 768px) { .woocommerce-Tabs-panel#tab-description h2 {font-size: 24px !important; margin-bottom: 6px !important;} .woocommerce .product .summary .upsells .berocket_better_labels.berocket_better_labels_image {top: 44px !important; bottom: unset !important; left: 111px !important; right: unset !important;} .bundle_form .bundle_wrap {width: 100%;} .woocommerce .product.product-type-bundle .summary .bundle_button {align-items: center; flex-wrap: nowrap;} } .cwginstock-subscribe-form {margin-top: 20px; width: 100% !important;} .cwginstock-subscribe-form .panel-primary {border-radius: 0 !important; border-color: #ce9b4a !important;} .cwginstock-subscribe-form .panel-primary>.panel-heading { background-color: transparent !important; border-color: #ce9b4a !important; border: none !important; border-radius: 0 !important; } .cwginstock-panel-body .form-group {margin-bottom: 0 !important;} .cwgstock_button { border-radius: 0px !important; background: #CE9B4A; line-height: normal; font-family: 'Manufaktur'; text-transform: uppercase; padding: 10px; font-size: 0.9em; } .woocommerce .product .summary .price {font-family: "Manufaktur"; font-weight: 600;} .woocommerce del {text-decoration: none !important; font-style: normal !important; position: relative !important;} .single-product del .woocommerce-Price-amount {font-size: 20px;} /* Schuin goud */ .woocommerce del::after { content: ""; width: 100%; height: 2px; background: #ce9b4a; position: absolute; left: 0; top: 4px; transform: rotate(168deg); } .single-product.woocommerce .product p.stock { display: inline-block; font-size: 16px; text-transform: uppercase; color: #fff; letter-spacing: 1px; padding: 3px 10px; margin-bottom: 15px; font-family: 'Manufaktur'; font-weight: 600; } .single-product.woocommerce .product p.out-of-stock { display: inline-block; font-size: 16px; text-transform: uppercase; background: #d64444; color: #fff; letter-spacing: 1px; padding: 3px 10px; margin-bottom: 15px; font-family: 'Manufaktur'; font-weight: 600; } .product-slogan h2 {font-size: 35px !important; line-height: 1 !important;}