/**
* Theme Name: Partdo Child
* Description: This is a child theme of Partdo, generated by Merlin WP.
* Author: KlbTheme (Sinan ISIK)
* Template: partdo
* Version: 1.5.40
*/
/* Breadcrumbs — white on dark carbon background */
body.custom-background .woocommerce-breadcrumb,
body.custom-background .site-breadcrumb,
body.custom-background .woocommerce-breadcrumb ul li,
body.custom-background .site-breadcrumb ul li,
body.custom-background .woocommerce-breadcrumb ul li a,
body.custom-background .site-breadcrumb ul li a,
body.custom-background .woocommerce-breadcrumb ul li::after,
body.custom-background .site-breadcrumb ul li::after {
color: #fff !important;
}
body.custom-background .woocommerce-breadcrumb ul li a:hover,
body.custom-background .site-breadcrumb ul li a:hover {
color: rgba(255, 255, 255, 0.75) !important;
}
/* Product grids: keep thumbnail area opaque on dark site background */
body.custom-background .product .thumbnail-wrapper {
background-color: #fff;
}
body.custom-background .product .thumbnail-wrapper img {
opacity: 1 !important;
visibility: visible !important;
}
/* Hover card overlay should stay a readable light surface (desktop hover only) */
body.custom-background .product .product-content-fade {
background-color: #fff;
border-color: #dee2e6;
}
@media screen and (min-width: 992px) {
body.custom-background .product .product-footer .product-footer-inner {
background-color: #fff;
}
/* List view description column: let the carbon background show through */
body.custom-background
.products.large-list
.product
.product-footer
.product-footer-inner {
background-color: transparent !important;
border-top-color: transparent;
}
}
@media screen and (max-width: 991.98px) {
body.custom-background .product .product-footer .product-footer-inner {
background-color: transparent;
border-top: 0;
margin: 0;
padding-left: 0;
padding-right: 0;
}
}
/*
* Product loop hover: white card from theme + white text in Additional CSS = unreadable.
* Force dark text only on standard grids that get a white hover overlay — not kit cards,
* featured/deals boxes, or list-style rows that stay on the dark section background.
*/
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-title,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-title
a,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.price,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.price
ins,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.price
del,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-stock,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-stock
i,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-stock
span,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.rating-count,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.rating-count
.count-text,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.content-wrapper,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.content-wrapper
a,
body.custom-background
.elementor-widget:not(.elementor-widget-partdo-deals-product):not(.elementor-widget-partdo-deals-product2):not(.elementor-widget-partdo-special-product):not(.elementor-widget-partdo-special-product2):not(.elementor-widget-partdo-product-list)
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-title,
body.custom-background
.elementor-widget:not(.elementor-widget-partdo-deals-product):not(.elementor-widget-partdo-deals-product2):not(.elementor-widget-partdo-special-product):not(.elementor-widget-partdo-special-product2):not(.elementor-widget-partdo-product-list)
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-title
a,
body.custom-background
.elementor-widget:not(.elementor-widget-partdo-deals-product):not(.elementor-widget-partdo-deals-product2):not(.elementor-widget-partdo-special-product):not(.elementor-widget-partdo-special-product2):not(.elementor-widget-partdo-product-list)
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.price,
body.custom-background
.elementor-widget:not(.elementor-widget-partdo-deals-product):not(.elementor-widget-partdo-deals-product2):not(.elementor-widget-partdo-special-product):not(.elementor-widget-partdo-special-product2):not(.elementor-widget-partdo-product-list)
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background
.klbth-module
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-title,
body.custom-background
.klbth-module
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-title
a,
body.custom-background
.klbth-module
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.price {
color: #212529 !important;
}
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-footer-details,
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-footer-details
p,
body.custom-background
.elementor-widget:not(.elementor-widget-partdo-deals-product):not(.elementor-widget-partdo-deals-product2):not(.elementor-widget-partdo-special-product):not(.elementor-widget-partdo-special-product2):not(.elementor-widget-partdo-product-list)
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-footer-details {
color: #212529 !important;
}
/* The stock cube is an icon-font ::before glyph; color it explicitly on hover. */
body.custom-background
.products:not(.pk-kit-component-cards):not(.featured-box):not(.list-style):not(.large-list)
.product:hover
.product-stock
.klbth-icon-ecommerce-package-ready::before {
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
}
/*
* Featured / deals / list rows stay on the dark section background —
* soft light gray on hover, not near-black.
*/
body.custom-background .products.featured-box .product:hover .product-title,
body.custom-background .products.featured-box .product:hover .product-title a,
body.custom-background .products.featured-box .product:hover .price,
body.custom-background
.products.featured-box
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background .products.featured-box .product:hover .price ins,
body.custom-background .products.featured-box .product:hover .price del,
body.custom-background .products.featured-box .product:hover .product-stock,
body.custom-background .products.featured-box .product:hover .product-stock i,
body.custom-background
.products.featured-box
.product:hover
.product-stock
span,
body.custom-background .products.featured-box .product:hover .content-wrapper,
body.custom-background .products.featured-box .product:hover .content-wrapper a,
body.custom-background .products.list-style .product:hover .product-title,
body.custom-background .products.list-style .product:hover .product-title a,
body.custom-background .products.list-style .product:hover .price,
body.custom-background
.products.list-style
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background .products.list-style .product:hover .price ins,
body.custom-background .products.list-style .product:hover .price del,
body.custom-background .products.list-style .product:hover .product-stock,
body.custom-background .products.list-style .product:hover .product-stock i,
body.custom-background .products.list-style .product:hover .product-stock span,
body.custom-background .products.list-style .product:hover .content-wrapper,
body.custom-background .products.list-style .product:hover .content-wrapper a,
body.custom-background .products.large-list .product:hover .product-title,
body.custom-background .products.large-list .product:hover .product-title a,
body.custom-background .products.large-list .product:hover .price,
body.custom-background
.products.large-list
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background .products.large-list .product:hover .price ins,
body.custom-background .products.large-list .product:hover .price del,
body.custom-background .products.large-list .product:hover .product-stock,
body.custom-background .products.large-list .product:hover .product-stock i,
body.custom-background .products.large-list .product:hover .product-stock span,
body.custom-background .products.large-list .product:hover .content-wrapper,
body.custom-background .products.large-list .product:hover .content-wrapper a,
body.custom-background
.elementor-widget-partdo-product-list
.product:hover
.product-title,
body.custom-background
.elementor-widget-partdo-product-list
.product:hover
.product-title
a,
body.custom-background
.elementor-widget-partdo-product-list
.product:hover
.price,
body.custom-background
.elementor-widget-partdo-product-list
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background
.elementor-widget-partdo-deals-product
.product:hover
.product-title,
body.custom-background
.elementor-widget-partdo-deals-product
.product:hover
.product-title
a,
body.custom-background
.elementor-widget-partdo-deals-product
.product:hover
.price,
body.custom-background
.elementor-widget-partdo-deals-product
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background
.elementor-widget-partdo-deals-product2
.product:hover
.product-title,
body.custom-background
.elementor-widget-partdo-deals-product2
.product:hover
.product-title
a,
body.custom-background
.elementor-widget-partdo-deals-product2
.product:hover
.price,
body.custom-background
.elementor-widget-partdo-deals-product2
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background
.elementor-widget-partdo-special-product
.product:hover
.product-title,
body.custom-background
.elementor-widget-partdo-special-product
.product:hover
.product-title
a,
body.custom-background
.elementor-widget-partdo-special-product
.product:hover
.price,
body.custom-background
.elementor-widget-partdo-special-product2
.product:hover
.product-title,
body.custom-background
.elementor-widget-partdo-special-product2
.product:hover
.product-title
a,
body.custom-background
.elementor-widget-partdo-special-product2
.product:hover
.price {
color: #ced4da !important;
}
body.custom-background
.products.featured-box
.product:hover
.product-stock
.klbth-icon-ecommerce-package-ready::before,
body.custom-background
.products.list-style
.product:hover
.product-stock
.klbth-icon-ecommerce-package-ready::before,
body.custom-background
.products.large-list
.product
.product-stock
.klbth-icon-ecommerce-package-ready::before,
body.custom-background
.products.large-list
.product:hover
.product-stock
.klbth-icon-ecommerce-package-ready::before {
color: #ced4da !important;
-webkit-text-fill-color: #ced4da !important;
}
/*
* Shop list view (.large-list): title/price/stock sit on the dark carbon
* background (no white fade card). Force light text at rest and on hover.
* Description column matches — transparent panel, white copy above the CTA.
*/
body.custom-background .products.large-list .product .content-wrapper,
body.custom-background .products.large-list .product .content-wrapper a,
body.custom-background .products.large-list .product .product-title,
body.custom-background .products.large-list .product .product-title a,
body.custom-background .products.large-list .product .price,
body.custom-background
.products.large-list
.product
.price
.woocommerce-Price-amount,
body.custom-background .products.large-list .product .price ins,
body.custom-background .products.large-list .product .price del,
body.custom-background .products.large-list .product .product-stock,
body.custom-background .products.large-list .product .product-stock i,
body.custom-background .products.large-list .product .product-stock span,
body.custom-background .products.large-list .product .rating-count,
body.custom-background .products.large-list .product .rating-count .count-text,
body.custom-background .products.large-list .product:hover .content-wrapper,
body.custom-background .products.large-list .product:hover .content-wrapper a,
body.custom-background .products.large-list .product:hover .product-title,
body.custom-background .products.large-list .product:hover .product-title a,
body.custom-background .products.large-list .product:hover .price,
body.custom-background
.products.large-list
.product:hover
.price
.woocommerce-Price-amount,
body.custom-background .products.large-list .product:hover .price ins,
body.custom-background .products.large-list .product:hover .price del,
body.custom-background .products.large-list .product:hover .product-stock,
body.custom-background .products.large-list .product:hover .product-stock i,
body.custom-background .products.large-list .product:hover .product-stock span {
color: #e9ecef !important;
}
body.custom-background .products.large-list .product .product-footer,
body.custom-background .products.large-list .product .product-footer-inner,
body.custom-background .products.large-list .product .product-footer-details,
body.custom-background .products.large-list .product .product-footer-details p,
body.custom-background .products.large-list .product .product-footer-details li,
body.custom-background .products.large-list .product:hover .product-footer,
body.custom-background
.products.large-list
.product:hover
.product-footer-inner,
body.custom-background
.products.large-list
.product:hover
.product-footer-details,
body.custom-background
.products.large-list
.product:hover
.product-footer-details
p,
body.custom-background
.products.large-list
.product:hover
.product-footer-details
li {
background-color: transparent !important;
color: #ffffff !important;
}
body.custom-background .products.large-list .product .product-title a:hover,
body.custom-background
.products.large-list
.product:hover
.product-title
a:hover {
color: #ffffff !important;
}
/*
* List view separators: theme puts border-top on every direct child of each
* product after the first (.product-wrapper AND .wiser_review), which sandwiches
* the stars between two lines. Keep only the product-row separator.
*/
@media screen and (min-width: 768px) {
body.custom-background .products.large-list > * + * > .wiser_review,
body.custom-background
.products.large-list
> *
+ *
> .wiser_review.wsr_rating {
border-top: none !important;
padding-top: 0.5rem !important;
}
}
/*
* Quick-view eye sits on a white pill but inherits white text from the dark
* site body — so the glyph vanishes. Wishlist/compare use ::before + shadow
* and stay visible. Force dark icons (and hover) to match those controls.
*/
body.custom-background .product-buttons > *,
body.custom-background .product-buttons > *.quickview,
body.custom-background .product-buttons > *.quickview i,
body.custom-background .product-buttons > *.quickview i::before,
body.custom-background .product-buttons .klbwl-btn,
body.custom-background .product-buttons .klbwl-btn::before,
body.custom-background .product-buttons .klbcp-btn,
body.custom-background .product-buttons .klbcp-btn::before {
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
}
body.custom-background .product-buttons > *.quickview:hover,
body.custom-background .product-buttons > *.quickview:hover i,
body.custom-background .product-buttons > *.quickview:hover i::before {
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
background-color: #f1f3f5;
border-color: #dee2e6;
}
/*
* Loop product CTAs (Add to cart / Read more / Select options): light pill +
* dark text. Out-of-stock “Read more” is .primary.button without
* .add_to_cart_button — include all footer buttons so they match.
* Kit “Build your package” keeps brand styling via merchandising / RSI CSS.
*/
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.button,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.primary,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer .button,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer .add_to_cart_button,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer .add_to_cart_button.primary,
body.custom-background .product:not(.pk-kit-card-inner) .product-cart-form a.button,
body.custom-background .product:not(.pk-kit-card-inner) .product-cart-form a.button.primary {
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
background-color: #f1f3f5 !important;
border-color: #dee2e6 !important;
background-image: none !important;
}
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.button i,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.button i::before,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.primary i,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.primary i::before,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer .add_to_cart_button i,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer .add_to_cart_button i::before,
body.custom-background .product:not(.pk-kit-card-inner) .product-cart-form a.button i,
body.custom-background .product:not(.pk-kit-card-inner) .product-cart-form a.button i::before,
body.custom-background .product-type-1:not(.pk-kit-card-inner) .product-footer .button i,
body.custom-background .product-type-3:not(.pk-kit-card-inner) .product-footer .button i {
display: inline-block !important;
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
}
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.button:hover,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.primary:hover,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer .button:hover,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer .add_to_cart_button:hover,
body.custom-background
.product:not(.pk-kit-card-inner)
.product-footer
.add_to_cart_button.primary:hover,
body.custom-background .product:not(.pk-kit-card-inner) .product-cart-form a.button:hover,
body.custom-background .product:not(.pk-kit-card-inner) .product-cart-form a.button.primary:hover {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background-color: var(--color-primary, #ef233c) !important;
border-color: var(--color-primary, #ef233c) !important;
}
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.button:hover i,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.button:hover i::before,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.primary:hover i,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer a.primary:hover i::before,
body.custom-background .product:not(.pk-kit-card-inner) .product-footer .add_to_cart_button:hover i,
body.custom-background
.product:not(.pk-kit-card-inner)
.product-footer
.add_to_cart_button:hover
i::before,
body.custom-background .product:not(.pk-kit-card-inner) .product-cart-form a.button:hover i,
body.custom-background .product:not(.pk-kit-card-inner) .product-cart-form a.button:hover i::before {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* Quantity +/- drawn with currentColor — force white on dark desktop PDPs/cart. */
@media screen and (min-width: 992px) {
body.custom-background .quantity .minus,
body.custom-background .quantity .plus,
body.custom-background .quantity .quantity-button.minus,
body.custom-background .quantity .quantity-button.plus {
color: #fff !important;
}
body.custom-background .quantity {
border-color: rgba(255, 255, 255, 0.55);
}
}
/*
* WooCommerce Products Per Page sits beside the shop toolbar via float:right.
* Nudge it down so the shorter select centers against the taller gray bar —
* without flex/order on .primary-column (that reordered the bar under the products).
*/
body.custom-background
.primary-column
> .woocommerce-notices-wrapper
+ .form-wppp-select.products-per-page {
float: right !important;
margin: 0.35rem 0 0.9375rem 0.75rem !important;
}
@media screen and (min-width: 992px) {
body.custom-background
.primary-column
> .woocommerce-notices-wrapper
+ .form-wppp-select.products-per-page {
margin-top: 1.35rem !important;
}
}
body.custom-background .form-wppp-select.products-per-page .wppp-select {
margin: 0;
vertical-align: middle;
}
/*
* Shop “before loop” bar: light pill on dark page — force dark text/icons so
* result count, sort/per-page, and grid/list toggles stay readable.
*/
body.custom-background .before-shop-loop {
background-color: #e9ecef !important;
color: #212529 !important;
}
body.custom-background .before-shop-loop .woocommerce-result-count,
body.custom-background .before-shop-loop .filter-button,
body.custom-background .before-shop-loop .filter-button a,
body.custom-background .before-shop-loop .sorting-products > span,
body.custom-background .before-shop-loop .per-page-products > span,
body.custom-background .before-shop-loop .sorting-products select,
body.custom-background .before-shop-loop .per-page-products select,
body.custom-background
.before-shop-loop
.sorting-products
.select2-selection
.select2-selection__rendered,
body.custom-background
.before-shop-loop
.per-page-products
.select2-selection
.select2-selection__rendered,
body.custom-background .before-shop-loop .product-views-type,
body.custom-background .before-shop-loop .product-views-type span,
body.custom-background .before-shop-loop .product-views-type p {
color: #212529 !important;
}
body.custom-background .before-shop-loop .per-page-products {
border-left-color: #adb5bd !important;
}
body.custom-background .before-shop-loop .product-views-buttons > * {
color: #212529 !important;
background-color: #fff !important;
border-color: #adb5bd !important;
}
body.custom-background .before-shop-loop .product-views-buttons > * i,
body.custom-background .before-shop-loop .product-views-buttons > * i::before {
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
}
body.custom-background .before-shop-loop .product-views-buttons > *:hover,
body.custom-background .before-shop-loop .product-views-buttons > *.active {
color: #212529 !important;
background-color: #dee2e6 !important;
border-color: #868e96 !important;
}
body.custom-background .before-shop-loop .product-views-buttons > *:hover i,
body.custom-background
.before-shop-loop
.product-views-buttons
> *:hover
i::before,
body.custom-background .before-shop-loop .product-views-buttons > *.active i,
body.custom-background
.before-shop-loop
.product-views-buttons
> *.active
i::before {
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
}
/* Header type 2: black bar, white nav text and icons */
.site-header.header-type-2 .header-notify {
background: #000 !important;
background-image: none !important;
-webkit-animation: none !important;
animation: none !important;
background-size: auto !important;
color: #fff !important;
}
.site-header.header-type-2 .header-notify .klbth-countdown-wrapper .count-item {
background-color: rgba(255, 255, 255, 0.15) !important;
}
/* Hide expired/deal countdown timers for now (shows 00:00:00:00) */
.klbth-countdown-wrapper,
.product-detail .klbth-countdown-wrapper,
.klbth-module-header .klbth-countdown-wrapper,
.klbth-module-deals .deal-item .deal-counter .klbth-countdown-wrapper,
.site-header .header-notify .klbth-countdown-wrapper,
.kblth-countdown {
display: none !important;
}
.site-header.header-type-2 .header-topbar,
.site-header.header-type-2
.klbth-menu-wrapper.topbar
.klbth-menu
> li:hover
> a {
background-color: #000 !important;
color: #fff !important;
border-color: #333 !important;
}
.site-header.header-type-2 .header-topbar .header-inner {
border-color: #333 !important;
}
.site-header.header-type-2 .header-topbar .header-notice p span {
color: rgba(255, 255, 255, 0.65) !important;
}
.site-header.header-type-2
.header-topbar
.klbth-menu-wrapper.topbar
.klbth-menu
> li
> a,
.site-header.header-type-2
.header-topbar
.klbth-menu-wrapper.topbar
.klbth-menu
.sub-menu
li
a {
color: #fff !important;
}
.site-header.header-type-2
.klbth-menu-wrapper.topbar
.klbth-menu
> li
> a:hover,
.site-header.header-type-2 .header-topbar .header-notice p a:hover,
.site-header.header-type-2
.klbth-menu-wrapper.topbar
.klbth-menu
.sub-menu
li
a:hover,
.site-header.header-type-2
.klbth-menu-wrapper.topbar
.klbth-menu
> li:hover
> a {
color: rgba(255, 255, 255, 0.75) !important;
}
.site-header.header-type-2 .header-main,
.site-header.header-type-2 .header-nav,
.site-header.header-type-2 .header-mobile {
background-color: #000 !important;
color: #fff !important;
border-color: #333 !important;
}
/*
* Sticky mobile header — theme pins .header-mobile at z-index:9, so scrolled
* page content can cover the cart. Keep cart column visible above content.
* Use a 3-column grid (not absolute logo) so menu / logo / cart stay on one line.
* Drawer/mask must sit ABOVE this header or the logo paints over the sidenav.
*/
@media screen and (max-width: 1199.98px) {
header.site-header.sticky-header .header-mobile {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10050 !important;
overflow: visible !important;
box-sizing: border-box;
padding-left: env(safe-area-inset-left, 0);
padding-right: env(safe-area-inset-right, 0);
}
header.site-header.sticky-header .header-mobile > .container {
padding-left: max(1rem, var(--theme-gutter, 0.9375rem));
padding-right: max(1rem, var(--theme-gutter, 0.9375rem));
box-sizing: border-box;
}
.site-header .header-mobile .header-inner,
header.site-header.sticky-header .header-mobile .header-inner {
position: relative !important;
z-index: 1 !important;
overflow: visible !important;
display: grid !important;
grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
width: 100%;
align-items: center;
justify-content: stretch;
column-gap: 0.35rem;
box-sizing: border-box;
min-height: 3.375rem;
}
.site-header .header-mobile .column.left,
.site-header .header-mobile .column.right {
flex: none !important;
width: auto !important;
max-width: none !important;
position: relative;
z-index: 2;
display: flex !important;
align-items: center;
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-mobile .column.left {
justify-content: flex-start;
grid-column: 1;
}
.site-header .header-mobile .column.right {
justify-content: flex-end;
grid-column: 3;
padding-right: 0.15rem;
}
.site-header .header-mobile .column.center {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
flex: none !important;
width: auto !important;
max-width: 100% !important;
padding: 0 !important;
z-index: 1;
display: flex !important;
align-items: center;
justify-content: center;
grid-column: 2;
pointer-events: auto;
min-width: 0;
}
.site-header .header-mobile .column.center .site-brand,
.site-header .header-mobile .column.center .site-brand a {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.site-header .header-mobile .column.center .site-brand img {
max-width: 100%;
height: auto;
max-height: 36px;
width: auto;
}
.site-header .header-mobile .column.right,
.site-header .header-mobile .cart-button,
header.site-header.sticky-header .header-mobile .column.right,
header.site-header.sticky-header .header-mobile .cart-button {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.site-header .header-mobile .cart-button .count,
header.site-header.sticky-header .header-mobile .cart-button .count {
right: 0.15rem;
}
.site-header.header-type-2 .header-mobile .cart-button .quick-icon,
.site-header.header-type-2 .header-mobile .cart-button .quick-icon i,
.site-header.header-type-2 .header-mobile .cart-button .quick-icon i::before {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* Sidenav + dimmer above sticky mobile header (was 1001 / 999 vs header 10050). */
.site-mask {
z-index: 10060 !important;
}
.site-drawer {
z-index: 10070 !important;
}
}
.site-header.header-type-2 .header-main .site-brand .brand-text {
color: #fff !important;
}
.site-header.header-type-2
.klbth-menu-wrapper.primary
.klbth-menu
> .menu-item
> a,
.site-header.header-type-2 .mega-items .mega-item > a {
color: #fff !important;
}
.site-header.header-type-2
.klbth-menu-wrapper.primary
.klbth-menu
> .menu-item:hover
> a,
.site-header.header-type-2 .mega-items .mega-item:hover > a {
color: rgba(255, 255, 255, 0.75) !important;
}
/* Dropdown / mega panels: keep body readable on typical light surfaces */
.site-header.header-type-2
.klbth-menu-wrapper.primary
.menu-item-has-children
.sub-menu
.menu-item
a {
color: #212529 !important;
}
.site-header.header-type-2
.klbth-menu-wrapper.primary
.menu-item-has-children
.sub-menu
.menu-item:hover
> a {
color: #212529 !important;
}
/*
* Desktop mega menu — column headers, underlines, nested vertical rules
* (matches the cleaner multi-column pattern used on the previous site).
*/
@media screen and (min-width: 1200px) {
.site-header .header-main .header-inner {
position: relative;
z-index: 30;
}
/*
* Top-level nav was wrapping (e.g. Nitrous on a second row) because the
* parent theme allows flex-wrap and the logo is uncapped (height: auto).
*/
.site-header .klbth-menu-wrapper.primary.horizontal .klbth-menu {
flex-wrap: nowrap;
}
.site-header .header-main .site-brand img {
height: 56px;
width: auto;
max-width: 280px;
}
body.storefront-straightline .site-header .header-main .site-brand img {
height: 68px;
width: auto;
max-width: 340px;
}
.site-header .header-main .site-brand + .klbth-menu-wrapper {
margin-left: 1rem;
}
.site-header .klbth-menu-wrapper.primary .klbth-menu > .menu-item > a {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
/*
* Keep mega items position:static (theme default) so the panel’s containing
* block is .header-inner. JS pins left to the trigger and right:0 to the
* header edge — that is what actually stretches the panel full-width.
*/
.site-header .klbth-menu-wrapper.primary .menu-item-has-children.mega-menu {
position: static !important;
}
/*
* Newspaper columns: categories flow top→bottom, then into the next column.
* column-fill must be balance (not auto) or everything stacks in one column.
* Closed panel must stay pointer-events:none (nested lists must not reopen it).
*/
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu {
display: block !important;
box-sizing: border-box;
columns: 5 10rem;
column-gap: 1.5rem;
column-fill: balance;
padding: 1.25rem 1.5rem 1.5rem;
left: 0;
right: 0;
width: auto !important;
max-width: none !important;
overflow: visible;
z-index: 200;
pointer-events: none;
transform: none !important;
will-change: auto !important;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu:hover
> .sub-menu,
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu:focus-within
> .sub-menu {
pointer-events: auto;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu,
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
li,
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
a {
white-space: normal !important;
overflow-wrap: break-word;
word-break: normal;
}
/* Keep each category together; width:100% + inline-block helps column breaks */
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item {
display: inline-block;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
flex: none;
vertical-align: top;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
overflow: visible;
padding: 0 0 1.15rem;
margin: 0;
}
/* Category column headers (only when the item has children) */
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item.menu-item-has-children
> a {
display: block;
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.3;
color: #212529 !important;
pointer-events: auto;
padding: 0 0 0.4rem !important;
margin: 0 0 0.45rem;
border-bottom: 1px solid #d8dde3;
border-radius: 0;
background: transparent !important;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item.menu-item-has-children
> a:hover,
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item.menu-item-has-children:hover
> a {
color: #212529 !important;
background: transparent !important;
}
/* Leaf top-level items (Tools, Merch, etc.) — no underline / no header spacing */
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item:not(.menu-item-has-children) {
padding: 0 0 0.35rem;
margin: 0;
overflow: visible;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item:not(.menu-item-has-children)
> a {
display: block;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.35;
color: #212529 !important;
pointer-events: auto;
padding: 0.2rem 0 !important;
margin: 0;
border-bottom: 0 !important;
border-radius: 0;
background: transparent !important;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item:not(.menu-item-has-children)
> a:hover,
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item:not(.menu-item-has-children):hover
> a {
color: #ef233c !important;
background: transparent !important;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item
> a::after {
display: none !important;
}
/* Second-level links */
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
.sub-menu
> .menu-item {
display: block;
padding: 0;
overflow: visible;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
.sub-menu
> .menu-item
> a {
font-size: 0.875rem;
font-weight: 400;
color: #212529 !important;
padding: 0.18rem 0 !important;
border-radius: 0;
background: transparent !important;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
.sub-menu
> .menu-item
> a:hover,
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
.sub-menu
> .menu-item:hover
> a {
color: #ef233c !important;
background: transparent !important;
}
/* Hide chevrons inside mega panels */
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
.sub-menu
.menu-item-has-children
> a::after {
display: none !important;
}
/* Nested lists stay in document flow (never absolute flyouts inside the mega panel) */
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
.sub-menu
.sub-menu {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
float: none !important;
/* Do not force visible/pointer-events while the mega panel is closed */
opacity: inherit;
visibility: inherit;
pointer-events: inherit;
transform: none !important;
will-change: auto !important;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
box-shadow: none !important;
background: transparent !important;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu:hover
.sub-menu
.sub-menu,
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu:focus-within
.sub-menu
.sub-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Second-level lists sit flush under the header (no vertical rule) */
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item
> .sub-menu {
margin: 0;
padding: 0 !important;
border: 0 !important;
border-radius: 0;
}
/* Nested brand lists (3rd level) — contained vertical rule */
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item
> .sub-menu
.sub-menu {
display: block;
width: auto;
max-width: 100%;
margin: 0.15rem 0 0.55rem 0.15rem;
padding: 0.1rem 0 0.15rem 0.75rem !important;
border: 0 !important;
border-left: 1px solid #cfd5dc !important;
border-radius: 0;
overflow: hidden;
}
.site-header
.klbth-menu-wrapper.primary
.menu-item-has-children.mega-menu
> .sub-menu
> .menu-item
> .sub-menu
.sub-menu
.menu-item
> a {
font-size: 0.8125rem;
font-weight: 400;
padding: 0.2rem 0 !important;
}
}
.site-header.header-type-2 .quick-button > *:not(.header-dropdown-wrapper),
.site-header.header-type-2 .quick-button .quick-icon,
.site-header.header-type-2 .quick-button .quick-text,
.site-header.header-type-2 .quick-button .quick-text .count-text,
.site-header.header-type-2 .quick-button .quick-text .price,
.site-header.header-type-2 .quick-button .arrow,
.site-header.header-type-2 .quick-button a {
color: #fff !important;
}
/*
* WPCE inside Elementor Shortcode widget (.elementor-widget-shortcode → .elementor-shortcode → .wpce-filter-widget-inner).
* Keeps row layout and panel styling when the shortcode is not bare on the page.
*/
.elementor-widget-shortcode:has(.wpce-filter-widget-inner) {
width: 100%;
max-width: 100%;
}
.elementor-widget-shortcode:has(.wpce-filter-widget-inner)
.elementor-widget-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.elementor-widget-shortcode:has(.wpce-filter-widget-inner)
.elementor-shortcode {
display: block;
width: 100%;
min-width: 0;
overflow: visible;
box-sizing: border-box;
}
.elementor-widget-shortcode:has(.wpce-filter-widget-inner)
.wpce-filter-widget-inner {
width: 100%;
box-sizing: border-box;
}
.elementor-column .elementor-widget-shortcode:has(.wpce-filter-widget-inner) {
align-self: stretch;
}
/* WPCE YMM finder ([wpce-filter]) — compact bar + higher contrast */
.wpce-filter-widget-inner {
max-width: 72rem;
margin-left: auto;
margin-right: auto;
padding: 1rem 1.25rem;
background: rgba(0, 0, 0, 0.52);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 14px;
box-shadow: 0 14px 42px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(239, 35, 60, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.wpce-filter-widget-inner .wpce-field label {
color: rgba(255, 255, 255, 0.92);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
margin-bottom: 0.3125rem;
}
.wpce-filter-widget-inner .wpce-field select,
.wpce-filter-widget-inner .wpce-field input[type="text"],
.wpce-filter-widget-inner
.wpce-field
.select2-container
.select2-selection--single {
width: 100% !important;
min-height: 38px !important;
height: auto !important;
line-height: 1.3 !important;
padding: 0.375rem 2rem 0.375rem 0.6875rem !important;
font-size: 0.8125rem !important;
background-color: rgba(255, 255, 255, 0.14) !important;
border: 1px solid rgba(255, 255, 255, 0.42) !important;
border-radius: 8px !important;
color: #fff !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 4px 14px rgba(0, 0, 0, 0.28);
transition: border-color 0.2s ease, background-color 0.2s ease,
box-shadow 0.2s ease;
}
.wpce-filter-widget-inner .wpce-field select:focus,
.wpce-filter-widget-inner .wpce-field input:focus {
outline: none;
border-color: rgba(239, 35, 60, 0.95) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 0 0 2px rgba(239, 35, 60, 0.45), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.wpce-filter-widget-inner
.wpce-field
.select2-container--focus
.select2-selection--single,
.wpce-filter-widget-inner
.wpce-field
.select2-container--open
.select2-selection--single {
border-color: rgba(239, 35, 60, 0.95) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 0 0 2px rgba(239, 35, 60, 0.45), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.wpce-filter-widget-inner .wpce-field select option {
color: #212529;
background-color: #fff;
}
.wpce-filter-widget-inner
.wpce-field
.select2-container
.select2-selection--single
.select2-selection__rendered {
color: #fff !important;
line-height: 34px !important;
padding-left: 0 !important;
font-size: 0.8125rem !important;
}
.wpce-filter-widget-inner
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
height: 36px !important;
right: 5px !important;
}
.wpce-filter-widget-inner
.select2-container--default
.select2-selection--single
.select2-selection__arrow
b {
border-color: #fff transparent transparent transparent !important;
}
.wpce-filter-widget-inner .wpce-field-buttons {
text-align: center;
margin-top: 0;
}
.wpce-filter-widget-inner .wpce-field-buttons input[type="submit"] {
min-height: 38px;
padding: 0 1.35rem !important;
font-size: 0.8125rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
border: none !important;
border-radius: 8px !important;
background: linear-gradient(
180deg,
#ff3b54 0%,
#ef233c 55%,
#c91d32 100%
) !important;
color: #fff !important;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 16px rgba(239, 35, 60, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.wpce-filter-widget-inner .wpce-field-buttons input[type="submit"]:hover {
background: linear-gradient(
180deg,
#ff5269 0%,
#e41f37 55%,
#b8192d 100%
) !important;
transform: translateY(-1px);
box-shadow: 0 7px 22px rgba(239, 35, 60, 0.6);
}
.wpce-filter-widget-inner
.wpce-field-buttons
input[type="button"].wpce-reset-search {
min-height: 38px;
padding: 0 1rem !important;
margin-top: 0.5rem;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.45) !important;
background: rgba(255, 255, 255, 0.06) !important;
color: #fff !important;
font-weight: 600;
font-size: 0.8125rem !important;
}
/* Vertical shortcode default: tidy stack on small screens */
.wpce-filter-widget-inner.wpce-widget-layout-v form {
display: flex;
flex-direction: column;
gap: 0.625rem;
align-items: stretch;
}
.wpce-filter-widget-inner.wpce-widget-layout-v
.wpce-field:not(.wpce-field-buttons) {
margin-bottom: 0 !important;
}
.wpce-filter-widget-inner.wpce-widget-layout-v .wpce-field-buttons {
margin-bottom: 0 !important;
width: 100%;
}
/* Mobile: GO matches full width of the YMM dropdowns */
@media (max-width: 767.98px) {
.wpce-filter-widget-inner .wpce-field-buttons {
width: 100% !important;
text-align: left;
}
.wpce-filter-widget-inner .wpce-field-buttons input[type="submit"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
@media (min-width: 768px) {
.wpce-filter-widget-inner.wpce-widget-layout-v .wpce-field-buttons {
margin-top: 0;
}
.wpce-filter-widget-inner.wpce-widget-layout-v form {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
}
.wpce-filter-widget-inner.wpce-widget-layout-v
.wpce-field:not(.wpce-field-buttons) {
flex: 1 1 9rem;
min-width: 8rem;
width: auto !important;
max-width: 100%;
margin-bottom: 0 !important;
align-self: center;
}
.wpce-filter-widget-inner.wpce-widget-layout-v .wpce-field-buttons {
flex: 0 0 auto;
width: auto !important;
margin-bottom: 0 !important;
text-align: left;
align-self: center;
}
.wpce-filter-widget-inner.wpce-widget-layout-v
.wpce-field-buttons
input[type="button"].wpce-reset-search {
margin-top: 0;
margin-left: 0.375rem;
}
.wpce-filter-widget-inner.wpce-widget-layout-v .wpce-clearfix {
flex-basis: 100%;
width: 100%;
height: 0;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border: 0;
clear: none;
float: none;
}
}
/*
* Sidebar YMM (.widget.wpce): keep Model full-width and stack GO underneath
* at the same width — do not share a row with the Model dropdown.
*/
.widget.wpce .wpce-filter-widget-inner.wpce-widget-layout-v form,
.widget.wpce-widget-filter .wpce-filter-widget-inner.wpce-widget-layout-v form {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 0.625rem !important;
}
.widget.wpce
.wpce-filter-widget-inner.wpce-widget-layout-v
.wpce-field:not(.wpce-field-buttons),
.widget.wpce-widget-filter
.wpce-filter-widget-inner.wpce-widget-layout-v
.wpce-field:not(.wpce-field-buttons),
.widget.wpce .wpce-filter-widget-inner.wpce-widget-layout-v .wpce-field-buttons,
.widget.wpce-widget-filter
.wpce-filter-widget-inner.wpce-widget-layout-v
.wpce-field-buttons {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
align-self: stretch !important;
text-align: left !important;
}
.widget.wpce
.wpce-filter-widget-inner.wpce-widget-layout-v
.wpce-field-buttons
input[type="submit"],
.widget.wpce-widget-filter
.wpce-filter-widget-inner.wpce-widget-layout-v
.wpce-field-buttons
input[type="submit"] {
width: 100% !important;
display: block !important;
box-sizing: border-box;
}
/*
* Hero behind YMM finder: solid red (covers section background image).
* Targets Elementor sections that contain [wpce-filter], or add class ymm-hero-red.
*/
.elementor-section:has(.wpce-filter-widget-inner),
.elementor-section.ymm-hero-red {
background-color: #ef233c !important;
background-image: none !important;
}
.elementor-section:has(.wpce-filter-widget-inner) .elementor-background-overlay,
.elementor-section.ymm-hero-red .elementor-background-overlay {
opacity: 0 !important;
pointer-events: none;
}
.elementor-section:has(.wpce-filter-widget-inner) > .elementor-container,
.elementor-section.ymm-hero-red > .elementor-container {
position: relative;
z-index: 1;
}
/*
* Product tags: keep each tag on one line; wrap whole tags to the next row.
* Fixes squeezed inline-flex layout on PDP meta (regular products + kit pages).
*/
.single-product-wrapper .product-detail .product-meta.bottom > .product-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
width: 100%;
max-width: 100%;
}
.single-product-wrapper
.product-detail
.product-meta.bottom
> .product-tags
> span {
flex: 0 0 auto;
margin-right: 0.25rem;
}
.single-product-wrapper
.product-detail
.product-meta.bottom
> .product-tags
ul {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.single-product-wrapper
.product-detail
.product-meta.bottom
> .product-tags
ul
li {
flex: 0 0 auto;
max-width: 100%;
}
.single-product-wrapper .product-detail .product-meta.bottom > .product-tags a {
display: inline-block;
white-space: nowrap;
vertical-align: top;
}
.single-product-wrapper
.product-detail
.product-meta.bottom
> .product-tags
a
+ a {
margin-left: 0;
}
/*
* Cart page — white text on dark site background.
*/
body.custom-background.woocommerce-cart .woocommerce-cart-form table th,
body.custom-background.woocommerce-cart .woocommerce-cart-form table td,
body.custom-background.woocommerce-cart .woocommerce-cart-form table td a,
body.custom-background.woocommerce-cart .woocommerce-cart-form .product-name,
body.custom-background.woocommerce-cart .woocommerce-cart-form .product-name a,
body.custom-background.woocommerce-cart .woocommerce-cart-form dl.variation,
body.custom-background.woocommerce-cart .woocommerce-cart-form dl.variation dt,
body.custom-background.woocommerce-cart .woocommerce-cart-form dl.variation dd,
body.custom-background.woocommerce-cart .woocommerce-cart-form .amount,
body.custom-background.woocommerce-cart
.woocommerce-cart-form
.woocommerce-Price-amount,
body.custom-background.woocommerce-cart
.woocommerce-cart-form
.actions-wrapper
.coupon
label,
body.custom-background.woocommerce-cart .cart-collaterals,
body.custom-background.woocommerce-cart .cart-collaterals .cart_totals > h2,
body.custom-background.woocommerce-cart .cart-collaterals .shop_table th,
body.custom-background.woocommerce-cart .cart-collaterals .shop_table td,
body.custom-background.woocommerce-cart .cart-collaterals .shop_table .amount,
body.custom-background.woocommerce-cart
.cart-collaterals
.woocommerce-Price-amount,
body.custom-background.woocommerce-cart .cart-collaterals strong,
body.custom-background.woocommerce-cart ul#shipping_method,
body.custom-background.woocommerce-cart ul#shipping_method label,
body.custom-background.woocommerce-cart ul#shipping_method li,
body.custom-background.woocommerce-cart
ul#shipping_method
.woocommerce-Price-amount,
body.custom-background.woocommerce-cart .woocommerce-shipping-destination,
body.custom-background.woocommerce-cart a.shipping-calculator-button,
body.custom-background.woocommerce-cart .woocommerce-shipping-calculator,
body.custom-background.woocommerce-cart .woocommerce-shipping-calculator label,
body.custom-background.woocommerce-cart .woocommerce-info,
body.custom-background.woocommerce-cart .woocommerce-message,
body.custom-background.woocommerce-cart .cross-sells .klb-title .entry-title,
body.custom-background.woocommerce-cart .cross-sells .products .product-title,
body.custom-background.woocommerce-cart .cross-sells .products .product-title a,
body.custom-background.woocommerce-cart .cross-sells .products .price,
body.custom-background.woocommerce-cart
.cross-sells
.products
.price
.woocommerce-Price-amount,
body.custom-background.woocommerce-cart
.cross-sells
.products
.product-stock
span {
color: #fff !important;
}
body.custom-background.woocommerce-cart .woocommerce-cart-form table th,
body.custom-background.woocommerce-cart .woocommerce-cart-form table td,
body.custom-background.woocommerce-cart
.woocommerce-cart-form
.table
> :not(caption)
> *
> *,
body.custom-background.woocommerce-cart
.cart-collaterals
.shop_table
.cart-subtotal
th,
body.custom-background.woocommerce-cart
.cart-collaterals
.shop_table
.cart-subtotal
td,
body.custom-background.woocommerce-cart
.cart-collaterals
.shop_table
.order-total
th,
body.custom-background.woocommerce-cart
.cart-collaterals
.shop_table
.order-total
td,
body.custom-background.woocommerce-cart .woocommerce-shipping-totals th,
body.custom-background.woocommerce-cart .woocommerce-shipping-totals td,
body.custom-background.woocommerce-cart .wc-proceed-to-checkout,
body.custom-background.woocommerce-cart .cart-collaterals .cart_totals > h2 {
border-color: rgba(255, 255, 255, 0.2) !important;
}
body.custom-background.woocommerce-cart
.woocommerce-cart-form
.product-name
a:hover,
body.custom-background.woocommerce-cart a.shipping-calculator-button:hover {
color: #ef233c !important;
}
/* Free-shipping bar + Remove All sit on light panels — keep text dark */
body.custom-background.woocommerce-cart .klbth-free-shipping,
body.custom-background.woocommerce-cart
.klbth-free-shipping
.free-shipping-notice {
color: #212529 !important;
}
body.custom-background.woocommerce-cart
.klbth-free-shipping
.free-shipping-notice
.amount,
body.custom-background.woocommerce-cart
.klbth-free-shipping
.free-shipping-notice
.woocommerce-Price-amount,
body.custom-background.woocommerce-cart
.klbth-free-shipping
.free-shipping-notice
.woocommerce-Price-amount
bdi,
body.custom-background.woocommerce-cart
.woocommerce-cart-form
.klbth-free-shipping
.woocommerce-Price-amount,
body.custom-background.woocommerce-cart
.woocommerce-cart-form
.klbth-free-shipping
.woocommerce-Price-amount
bdi {
color: #000 !important;
font-weight: 700;
}
body.custom-background.woocommerce-cart
.woocommerce-cart-form
.actions-wrapper
a.remove-all,
body.custom-background.woocommerce-cart
.woocommerce-cart-form
.actions-wrapper
a.button.remove-all,
body.custom-background.woocommerce-cart
.woocommerce-cart-form
table
td
a.remove-all,
body.custom-background.woocommerce-cart
.woocommerce-cart-form
table
td
a.button.remove-all {
color: #111 !important;
}
/* Cart totals — stack Shipment heading above methods */
body.custom-background.woocommerce-cart
.cart-collaterals
.shop_table
tr.cf-shipping-row
> td.cf-shipping-cell,
body.custom-background.woocommerce-cart
.cart_totals
table
tr.cf-shipping-row
> td.cf-shipping-cell {
width: 100% !important;
max-width: 100% !important;
display: table-cell !important;
text-align: left !important;
vertical-align: top;
}
body.custom-background.woocommerce-cart .cf-shipping__heading {
color: #fff !important;
text-align: left;
margin: 0 0 0.75rem;
font-weight: 700;
}
body.custom-background.woocommerce-cart .cf-shipping ul#shipping_method,
body.custom-background.woocommerce-cart .cart-collaterals ul#shipping_method {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
}
body.custom-background.woocommerce-cart .cf-shipping ul#shipping_method li,
body.custom-background.woocommerce-cart
.cart-collaterals
ul#shipping_method
li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
width: 100%;
text-align: left !important;
margin: 0;
}
body.custom-background.woocommerce-cart
.cf-shipping
#shipping_method
input.shipping_method,
body.custom-background.woocommerce-cart
.cart-collaterals
#shipping_method
input.shipping_method {
float: none !important;
position: static !important;
margin: 0.2rem 0 0 !important;
top: auto !important;
}
body.custom-background.woocommerce-cart .cf-shipping ul#shipping_method label,
body.custom-background.woocommerce-cart
.cart-collaterals
ul#shipping_method
label {
flex: 1 1 auto;
min-width: 0;
max-width: none;
text-align: left !important;
white-space: normal !important;
line-height: 1.4;
}
body.custom-background.woocommerce-cart
.cf-shipping
.woocommerce-shipping-destination,
body.custom-background.woocommerce-cart
.cf-shipping
a.shipping-calculator-button {
text-align: left !important;
display: block;
}
/* Keep form fields readable on light inputs */
body.custom-background.woocommerce-cart .woocommerce-cart-form #coupon_code,
body.custom-background.woocommerce-cart .woocommerce-shipping-calculator input,
body.custom-background.woocommerce-cart
.woocommerce-shipping-calculator
select {
color: #212529;
}
/*
* Checkout page — white text on dark site background.
*/
body.custom-background.woocommerce-checkout #customer_details h3,
body.custom-background.woocommerce-checkout #order_review_heading,
body.custom-background.woocommerce-checkout .order-review-wrapper h3,
body.custom-background.woocommerce-checkout #customer_details .form-row label,
body.custom-background.woocommerce-checkout #customer_details .optional,
body.custom-background.woocommerce-checkout
#ship-to-different-address
label
span,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
th,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
td,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
.product-name,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
.product-name
a,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
.amount,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
.woocommerce-Price-amount,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
dl.variation,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
dl.variation
dt,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
dl.variation
dd,
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
th,
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
td,
body.custom-background.woocommerce-checkout ul#shipping_method,
body.custom-background.woocommerce-checkout ul#shipping_method label,
body.custom-background.woocommerce-checkout ul#shipping_method li,
body.custom-background.woocommerce-checkout
ul#shipping_method
.woocommerce-Price-amount,
body.custom-background.woocommerce-checkout .woocommerce-shipping-destination,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.woocommerce-checkout-payment
ul.payment_methods
label,
body.custom-background.woocommerce-checkout #payment div.payment_box,
body.custom-background.woocommerce-checkout #payment div.payment_box p,
body.custom-background.woocommerce-checkout #payment div.payment_box label,
body.custom-background.woocommerce-checkout #payment div.payment_box .form-row,
body.custom-background.woocommerce-checkout
#payment
div.payment_box
.form-row
label,
body.custom-background.woocommerce-checkout
#payment
.sv-wc-payment-gateway-payment-form-saved-payment-method,
body.custom-background.woocommerce-checkout
#payment
.sv-wc-payment-gateway-payment-form-saved-payment-method
.title,
body.custom-background.woocommerce-checkout
#payment
.sv-wc-payment-gateway-payment-form-saved-payment-method
.nickname,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.woocommerce-checkout-payment
.woocommerce-privacy-policy-text,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.woocommerce-checkout-payment
.woocommerce-privacy-policy-text
p,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.woocommerce-checkout-payment
.validate-required
.woocommerce-form__label
span,
body.custom-background.woocommerce-checkout .woocommerce-form-login-toggle,
body.custom-background.woocommerce-checkout
.woocommerce-form-login-toggle
.woocommerce-info,
body.custom-background.woocommerce-checkout .woocommerce-info,
body.custom-background.woocommerce-checkout .woocommerce-message,
body.custom-background.woocommerce-checkout .woocommerce-error,
body.custom-background.woocommerce-checkout .woocommerce-error li,
body.custom-background.woocommerce-checkout .woocommerce-NoticeGroup,
body.custom-background.woocommerce-checkout .woocommerce-NoticeGroup-checkout,
body.custom-background.woocommerce-checkout
.woocommerce-NoticeGroup
.woocommerce-error,
body.custom-background.woocommerce-checkout
.woocommerce-NoticeGroup
.woocommerce-error
li,
body.custom-background.woocommerce-checkout #terms_field .woocommerce-error,
body.custom-background.woocommerce-checkout
.woocommerce-invalid-required-field
.woocommerce-error,
body.custom-background.woocommerce-checkout .checkout-inline-error-message,
body.custom-background.woocommerce-checkout #terms_description,
body.custom-background.woocommerce-checkout .coupon-error-notice,
body.custom-background.woocommerce-checkout #coupon-error-notice,
body.custom-background.woocommerce-checkout a.showlogin,
body.custom-background.woocommerce-checkout .storefronts-klaviyo-optin,
body.custom-background.woocommerce-checkout .storefronts-klaviyo-optin label,
body.custom-background.woocommerce-checkout
.storefronts-klaviyo-optin
.woocommerce-form__label-for-checkbox,
body.custom-background.woocommerce-checkout
.storefronts-klaviyo-optin
.woocommerce-form__label-for-checkbox
span,
body.custom-background.woocommerce-checkout
.wc-block-components-checkbox[id*="storefronts-marketing-optin"]
.wc-block-components-checkbox__label,
body.custom-background.woocommerce-checkout
.wc-block-components-checkbox[for*="storefronts/marketing-optin"]
.wc-block-components-checkbox__label,
body.custom-background.woocommerce-checkout
label[for*="storefronts/marketing-optin"],
body.custom-background.woocommerce-checkout
label[for*="storefronts-marketing-optin"] {
color: #fff !important;
}
/* Coupon notice sits on a light panel — keep text dark */
body.custom-background.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.custom-background.woocommerce-checkout
.woocommerce-form-coupon-toggle
.woocommerce-info,
body.custom-background.woocommerce-checkout
.woocommerce-form-coupon-toggle
.woocommerce-info
a,
body.custom-background.woocommerce-checkout a.showcoupon {
color: #111 !important;
}
body.custom-background.woocommerce-checkout #customer_details h3,
body.custom-background.woocommerce-checkout #order_review_heading,
body.custom-background.woocommerce-checkout .order-review-wrapper h3,
body.custom-background.woocommerce-checkout .order-review-wrapper,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
thead
th,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
tfoot
tr
th,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
tfoot
tr
td,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.woocommerce-checkout-payment {
border-color: rgba(255, 255, 255, 0.2) !important;
}
body.custom-background.woocommerce-checkout
.order-review-wrapper
.shop_table
.product-name
a:hover,
body.custom-background.woocommerce-checkout a.showlogin:hover,
body.custom-background.woocommerce-checkout a.showcoupon:hover,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.woocommerce-checkout-payment
.woocommerce-privacy-policy-text
p
a,
body.custom-background.woocommerce-checkout
.order-review-wrapper
.woocommerce-checkout-payment
.validate-required
.woocommerce-form__label
span
a {
color: #ef233c !important;
}
/* Keep billing/shipping fields readable on light inputs */
body.custom-background.woocommerce-checkout #customer_details input,
body.custom-background.woocommerce-checkout #customer_details select,
body.custom-background.woocommerce-checkout #customer_details textarea,
body.custom-background.woocommerce-checkout
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
color: #212529;
}
/* Login/coupon forms sit on light panels */
body.custom-background.woocommerce-checkout .woocommerce-form-login,
body.custom-background.woocommerce-checkout .woocommerce-form-login label,
body.custom-background.woocommerce-checkout .woocommerce-form-login p,
body.custom-background.woocommerce-checkout
.woocommerce-form-login
.woocommerce-form-login__rememberme
span,
body.custom-background.woocommerce-checkout .checkout_coupon,
body.custom-background.woocommerce-checkout .checkout_coupon label,
body.custom-background.woocommerce-checkout .checkout_coupon p {
color: #212529 !important;
}
/* Keep credit card inputs readable on white fields */
body.custom-background.woocommerce-checkout
#payment
div.payment_box
input[type="text"],
body.custom-background.woocommerce-checkout
#payment
div.payment_box
input[type="tel"],
body.custom-background.woocommerce-checkout
#payment
div.payment_box
input[type="password"],
body.custom-background.woocommerce-checkout
#payment
div.payment_box
input.js-sv-wc-payment-gateway-credit-card-form-input,
body.custom-background.woocommerce-checkout
#payment
div.payment_box
input.js-sv-wc-payment-gateway-echeck-form-input {
color: #212529 !important;
}
body.custom-background.woocommerce-checkout
.order-review-wrapper
.woocommerce-checkout-payment
#place_order {
color: #fff !important;
}
/* Checkout totals rows — keep labels/values aligned on dark bg */
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
th,
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
td {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
tfoot
th,
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
tfoot
td {
vertical-align: middle;
}
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
tfoot
tr.woocommerce-shipping-totals
> td.cf-shipping-cell,
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
tfoot
tr.woocommerce-shipping-totals
> td[colspan="2"] {
width: 100% !important;
max-width: 100% !important;
text-align: left !important;
display: table-cell !important;
vertical-align: top;
}
body.custom-background.woocommerce-checkout .cf-shipping__heading {
color: #fff !important;
text-align: left;
}
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
ul#shipping_method {
width: 100%;
max-width: 100%;
align-items: stretch;
}
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
ul#shipping_method
li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
white-space: normal;
text-align: left !important;
}
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
#shipping_method
input.shipping_method {
float: none !important;
position: static !important;
margin: 0.2rem 0 0 !important;
top: auto !important;
}
body.custom-background.woocommerce-checkout
.woocommerce-checkout-review-order-table
ul#shipping_method
label {
flex: 1 1 auto;
min-width: 0;
max-width: none;
white-space: normal !important;
text-align: left !important;
line-height: 1.4;
word-break: normal;
overflow-wrap: break-word;
}
/* Checkout Funnel line items + offers — keep text readable on carbon bg */
body.custom-background.woocommerce-checkout .cf-line,
body.custom-background.woocommerce-checkout .cf-line__name,
body.custom-background.woocommerce-checkout .cf-line__name a,
body.custom-background.woocommerce-checkout .cf-line__price,
body.custom-background.woocommerce-checkout .cf-line__price .amount,
body.custom-background.woocommerce-checkout .cf-qty,
body.custom-background.woocommerce-checkout .cf-qty__value,
body.custom-background.woocommerce-checkout .cf-addons,
body.custom-background.woocommerce-checkout .cf-addons__title,
body.custom-background.woocommerce-checkout .cf-addons__name,
body.custom-background.woocommerce-checkout .cf-addons__price,
body.custom-background.woocommerce-checkout .cf-addons__price .amount,
body.custom-background.woocommerce-checkout
.cf-addons__price
.woocommerce-Price-amount {
color: #fff !important;
}
body.custom-background.woocommerce-checkout .cf-qty__btn {
color: #111 !important;
background: #ced4da !important;
border-color: #adb5bd !important;
}
body.custom-background.woocommerce-checkout .cf-qty__btn:hover {
color: #ef233c !important;
background: #fff !important;
border-color: #ef233c !important;
}
body.custom-background.woocommerce-checkout .cf-addons__btn {
color: #fff !important;
background: rgba(0, 0, 0, 0.35) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
}
body.custom-background.woocommerce-checkout .cf-line__remove {
color: transparent !important;
background: transparent !important;
border-color: rgba(255, 255, 255, 0.55) !important;
}
body.custom-background.woocommerce-checkout .cf-line__remove:hover,
body.custom-background.woocommerce-checkout .cf-line__remove:focus-visible {
color: #fff !important;
background: #ef233c !important;
border-color: #ef233c !important;
}
/*
* Order-pay (post-upsell / pay for order) — match dark checkout readability.
* form-pay.php is not wrapped in .order-review-wrapper, so checkout rules miss it.
*/
body.custom-background.woocommerce-order-pay #order_review,
body.custom-background.woocommerce-order-pay #order_review .shop_table,
body.custom-background.woocommerce-order-pay #order_review .shop_table th,
body.custom-background.woocommerce-order-pay #order_review .shop_table td,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
.product-name,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
.product-name
a,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
.product-quantity,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
.product-total,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
.product-subtotal,
body.custom-background.woocommerce-order-pay #order_review .shop_table .amount,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
.woocommerce-Price-amount,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
.woocommerce-Price-amount
bdi,
body.custom-background.woocommerce-order-pay #payment,
body.custom-background.woocommerce-order-pay #payment ul.payment_methods,
body.custom-background.woocommerce-order-pay #payment ul.payment_methods li,
body.custom-background.woocommerce-order-pay #payment ul.payment_methods label,
body.custom-background.woocommerce-order-pay #payment div.payment_box,
body.custom-background.woocommerce-order-pay #payment div.payment_box p,
body.custom-background.woocommerce-order-pay #payment div.payment_box label,
body.custom-background.woocommerce-order-pay #payment div.payment_box .form-row,
body.custom-background.woocommerce-order-pay
#payment
div.payment_box
.form-row
label,
body.custom-background.woocommerce-order-pay
#payment
.woocommerce-privacy-policy-text,
body.custom-background.woocommerce-order-pay
#payment
.woocommerce-privacy-policy-text
p,
body.custom-background.woocommerce-order-pay
#payment
.woocommerce-terms-and-conditions-wrapper,
body.custom-background.woocommerce-order-pay
#payment
.woocommerce-form__label-for-checkbox
span,
body.custom-background.woocommerce-order-pay
#payment
.sv-wc-payment-gateway-payment-form-managed-payment-methods,
body.custom-background.woocommerce-order-pay
#payment
.sv-wc-payment-gateway-payment-form-saved-payment-method,
body.custom-background.woocommerce-order-pay
#payment
.sv-wc-payment-gateway-payment-form-saved-payment-method
.title,
body.custom-background.woocommerce-order-pay
#payment
.sv-wc-payment-gateway-payment-form-saved-payment-method
.nickname,
body.custom-background.woocommerce-order-pay .woocommerce-info,
body.custom-background.woocommerce-order-pay .woocommerce-message {
color: #fff !important;
}
body.custom-background.woocommerce-order-pay #order_review .shop_table,
body.custom-background.woocommerce-order-pay #order_review .shop_table th,
body.custom-background.woocommerce-order-pay #order_review .shop_table td,
body.custom-background.woocommerce-order-pay #payment,
body.custom-background.woocommerce-order-pay #payment ul.payment_methods,
body.custom-background.woocommerce-order-pay #payment ul.payment_methods li {
border-color: rgba(255, 255, 255, 0.22) !important;
}
body.custom-background.woocommerce-order-pay #order_review .shop_table {
width: 100%;
background: transparent;
}
body.custom-background.woocommerce-order-pay #order_review .shop_table th,
body.custom-background.woocommerce-order-pay #order_review .shop_table td {
padding: 0.75rem 0.85rem !important;
vertical-align: top;
background: transparent !important;
}
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
thead
th {
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.75) !important;
}
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
.product-name {
font-weight: 600;
line-height: 1.4;
}
body.custom-background.woocommerce-order-pay #order_review .shop_table tfoot th,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
tfoot
td {
font-weight: 600;
}
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
tfoot
tr:last-child
th,
body.custom-background.woocommerce-order-pay
#order_review
.shop_table
tfoot
tr:last-child
td {
font-size: 1.05rem;
}
body.custom-background.woocommerce-order-pay #payment {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 0.5rem;
padding: 1.25rem 1.35rem 1.5rem;
margin-top: 1.5rem;
}
body.custom-background.woocommerce-order-pay #payment ul.payment_methods {
list-style: none;
margin: 0 0 1rem;
padding: 0 0 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
body.custom-background.woocommerce-order-pay #payment ul.payment_methods li {
margin: 0 0 0.65rem;
padding: 0;
}
body.custom-background.woocommerce-order-pay #payment ul.payment_methods label {
font-weight: 600;
}
body.custom-background.woocommerce-order-pay #payment div.payment_box {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0.75rem 0 0;
padding: 0.25rem 0 0.5rem;
}
body.custom-background.woocommerce-order-pay #payment div.payment_box::before {
display: none !important;
}
body.custom-background.woocommerce-order-pay
#payment
.woocommerce-privacy-policy-text
a,
body.custom-background.woocommerce-order-pay
#payment
.woocommerce-terms-and-conditions-wrapper
a,
body.custom-background.woocommerce-order-pay
#payment
.woocommerce-form__label-for-checkbox
a {
color: #ef233c !important;
}
body.custom-background.woocommerce-order-pay
#payment
div.payment_box
input[type="text"],
body.custom-background.woocommerce-order-pay
#payment
div.payment_box
input[type="tel"],
body.custom-background.woocommerce-order-pay
#payment
div.payment_box
input[type="password"],
body.custom-background.woocommerce-order-pay
#payment
div.payment_box
input[type="number"],
body.custom-background.woocommerce-order-pay
#payment
div.payment_box
input.js-sv-wc-payment-gateway-credit-card-form-input,
body.custom-background.woocommerce-order-pay
#payment
div.payment_box
input.js-sv-wc-payment-gateway-echeck-form-input {
color: #212529 !important;
background: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
border-radius: 0.35rem;
box-shadow: none !important;
}
body.custom-background.woocommerce-order-pay #payment #place_order {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 0.75rem;
padding: 0.9rem 1.25rem;
border: 0 !important;
border-radius: 0.4rem;
background: #ef233c !important;
color: #fff !important;
font-weight: 700;
letter-spacing: 0.02em;
transition: background 0.15s ease, transform 0.15s ease;
}
body.custom-background.woocommerce-order-pay #payment #place_order:hover,
body.custom-background.woocommerce-order-pay #payment #place_order:focus {
background: #d41d34 !important;
color: #fff !important;
}
/*
* Header cart dropdown — keep panel open while moving onto “View cart”
* (hover-only was closing mid-click and hitting the page underneath).
*/
.site-header .quick-button.cart-button:hover .cart-dropdown,
.site-header .quick-button.cart-button:focus-within .cart-dropdown,
.site-header .quick-button .cart-dropdown:hover,
.site-header .quick-button .cart-dropdown:not(.hide) {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.site-header .quick-button .cart-dropdown::before {
content: "";
position: absolute;
top: -0.75rem;
left: 0;
right: 0;
height: 0.75rem;
}
/* Never show the slide-out cart panel if its markup still exists. */
.cart-widget-side,
.cart-side-overlay {
display: none !important;
}
/*
* Header cart popout + side cart — dark text on white/light panels.
* Overrides site-wide white text rules inside mini-cart UI only.
*/
body.custom-background .site-header .quick-button .cart-dropdown,
body.custom-background .cart-widget-side {
color: #212529;
}
body.custom-background .site-header .quick-button .cart-dropdown .product-title,
body.custom-background
.site-header
.quick-button
.cart-dropdown
.product-title
a,
body.custom-background .site-header .quick-button .cart-dropdown .price,
body.custom-background
.site-header
.quick-button
.cart-dropdown
.price
.woocommerce-Price-amount,
body.custom-background .site-header .quick-button .cart-dropdown .price .amount,
body.custom-background .site-header .quick-button .cart-dropdown dl.variation,
body.custom-background
.site-header
.quick-button
.cart-dropdown
dl.variation
dt,
body.custom-background
.site-header
.quick-button
.cart-dropdown
dl.variation
dd,
body.custom-background
.site-header
.quick-button
.cart-dropdown
.woocommerce-mini-cart__total,
body.custom-background
.site-header
.quick-button
.cart-dropdown
.woocommerce-mini-cart__total
strong,
body.custom-background
.site-header
.quick-button
.cart-dropdown
.woocommerce-mini-cart__total
.amount,
body.custom-background
.site-header
.quick-button
.cart-dropdown
.klbth-free-shipping
.free-shipping-notice,
body.custom-background
.site-header
.quick-button
.cart-dropdown
.klbth-free-shipping
.free-shipping-notice
.woocommerce-Price-amount,
body.custom-background
.site-header
.quick-button
.cart-dropdown
.cart-empty
.empty-text,
body.custom-background .cart-widget-side .cart-side-title,
body.custom-background .cart-widget-side .product-title,
body.custom-background .cart-widget-side .product-title a,
body.custom-background .cart-widget-side .price,
body.custom-background .cart-widget-side .price .woocommerce-Price-amount,
body.custom-background .cart-widget-side .price .amount,
body.custom-background .cart-widget-side dl.variation,
body.custom-background .cart-widget-side dl.variation dt,
body.custom-background .cart-widget-side dl.variation dd,
body.custom-background .cart-widget-side .woocommerce-mini-cart__total,
body.custom-background .cart-widget-side .woocommerce-mini-cart__total strong,
body.custom-background .cart-widget-side .woocommerce-mini-cart__total .amount,
body.custom-background
.cart-widget-side
.klbth-free-shipping
.free-shipping-notice,
body.custom-background
.cart-widget-side
.klbth-free-shipping
.free-shipping-notice
.woocommerce-Price-amount,
body.custom-background .cart-widget-side .cart-empty .empty-text {
color: #212529 !important;
}
body.custom-background
.site-header
.quick-button
.cart-dropdown
.woocommerce-mini-cart__buttons
a.button,
body.custom-background
.cart-widget-side
.woocommerce-mini-cart__buttons
a.button {
color: #212529 !important;
}
body.custom-background
.site-header
.quick-button
.cart-dropdown
.woocommerce-mini-cart__buttons
a.button.checkout,
body.custom-background
.cart-widget-side
.woocommerce-mini-cart__buttons
a.button.checkout {
color: #fff !important;
}
/* Mini-cart remove control — was an empty-looking circle (icon font + light border) */
body.custom-background
.site-header
.quick-button
.cart-dropdown
.remove_from_cart_button,
body.custom-background .cart-widget-side .remove_from_cart_button {
color: #212529 !important;
border-color: #adb5bd !important;
background: #fff !important;
z-index: 2;
}
body.custom-background
.site-header
.quick-button
.cart-dropdown
.remove_from_cart_button:hover,
body.custom-background .cart-widget-side .remove_from_cart_button:hover {
color: #fff !important;
background: #ef233c !important;
border-color: #ef233c !important;
}
body.custom-background
.site-header
.quick-button
.cart-dropdown
.product-title
a:hover,
body.custom-background .cart-widget-side .product-title a:hover {
color: #ef233c !important;
}
/* Single product wishlist heart — white outline, red fill on hover/selected */
body.custom-background
.single-product-wrapper
.product-detail
.product-wishlist
a.klbwl-btn {
color: #fff !important;
border-color: #fff !important;
background: transparent !important;
box-shadow: none;
}
body.custom-background
.single-product-wrapper
.product-detail
.product-wishlist
a.klbwl-btn:before {
color: #fff !important;
}
body.custom-background
.single-product-wrapper
.product-detail
.product-wishlist
a.klbwl-btn:hover,
body.custom-background
.single-product-wrapper
.product-detail
.product-wishlist
a.klbwl-btn.klbwl-product-in-list {
color: #ef233c !important;
border-color: #ef233c !important;
background: transparent !important;
}
body.custom-background
.single-product-wrapper
.product-detail
.product-wishlist
a.klbwl-btn:hover:before,
body.custom-background
.single-product-wrapper
.product-detail
.product-wishlist
a.klbwl-btn.klbwl-product-in-list:before {
color: #ef233c !important;
}
/* Wishlist page (klbwl_list) — readable on carbon background */
body.custom-background .klbwl-list,
body.custom-background .klbwl-list table,
body.custom-background .klbwl-list th,
body.custom-background .klbwl-list td,
body.custom-background .klbwl-list a,
body.custom-background .klbwl-list .product-name a,
body.custom-background .klbwl-list .amount,
body.custom-background .klbwl-list .klbwl-actions,
body.custom-background .klbwl-list .klbwl-actions span,
body.custom-background .klbwl-list .klbwl-no-result,
body.custom-background .klbwl-list .cart-empty-page,
body.custom-background .klbwl-list .cart-empty {
color: #fff !important;
}
body.custom-background .klbwl-list table {
border-color: rgba(255, 255, 255, 0.2) !important;
}
body.custom-background .klbwl-list th,
body.custom-background .klbwl-list td {
border-color: rgba(255, 255, 255, 0.15) !important;
background: transparent !important;
}
/* My Account — white text on dark background */
body.custom-background.woocommerce-account .my-account-wrapper,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-title,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-title
*,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-user
.user-detail,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-user
.user-detail
span,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-user
.user-detail
p,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
p,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
li,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
td,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
th,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
label,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
legend,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
strong,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
em,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
h1,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
h2,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
h3,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
h4,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-content,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-content
p {
color: #fff !important;
}
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-navigation {
border-color: rgba(255, 255, 255, 0.2);
}
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-navigation
.woocommerce-MyAccount-navigation
ul
li
+ li {
border-top-color: rgba(255, 255, 255, 0.2);
}
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-navigation
.woocommerce-MyAccount-navigation
ul
li
a {
color: #fff !important;
}
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-navigation
.woocommerce-MyAccount-navigation
ul
li
a:hover {
color: #ef233c !important;
}
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-navigation
.woocommerce-MyAccount-navigation
ul
li.is-active
a {
color: #fff !important;
}
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
a,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-content
a {
color: #ef233c !important;
}
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content
a:hover,
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-content
a:hover {
color: #ff4d63 !important;
}
body.custom-background.woocommerce-account
.my-account-wrapper
.my-account-title,
body.custom-background.woocommerce-account
.my-account-wrapper
.woocommerce-MyAccount-content,
body.custom-background.woocommerce-account .my-account-wrapper table.shop_table,
body.custom-background.woocommerce-account
.my-account-wrapper
table.shop_table
th,
body.custom-background.woocommerce-account
.my-account-wrapper
table.shop_table
td {
border-color: rgba(255, 255, 255, 0.2) !important;
}
body.custom-background.woocommerce-account .my-account-wrapper input.input-text,
body.custom-background.woocommerce-account .my-account-wrapper textarea,
body.custom-background.woocommerce-account .my-account-wrapper select,
body.custom-background.woocommerce-account
.my-account-wrapper
.select2-selection {
color: #212529 !important;
}
/* Logged-out My Account login — white text on dark background */
body.custom-background.woocommerce-account .site-login,
body.custom-background.woocommerce-account .site-login label,
body.custom-background.woocommerce-account .site-login p,
body.custom-background.woocommerce-account .site-login span,
body.custom-background.woocommerce-account
.site-login
.woocommerce-form__label-for-checkbox
span,
body.custom-background.woocommerce-account .site-login .login-page-tab li a,
body.custom-background.woocommerce-account
.site-login
.login-page-tab
li
a.active,
body.custom-background.woocommerce-account .my-account-page .site-login label,
body.custom-background.woocommerce-account
.my-account-page
.site-login
.woocommerce-form-login__rememberme
span {
color: #fff !important;
}
body.custom-background.woocommerce-account
.site-login
.login-page-tab
li
a:not(.active) {
color: rgba(255, 255, 255, 0.65) !important;
}
body.custom-background.woocommerce-account .site-login .lost_password a,
body.custom-background.woocommerce-account .site-login a.lost-password,
body.custom-background.woocommerce-account
.site-login
.woocommerce-LostPassword
a {
color: #ff6b7a !important;
}
body.custom-background.woocommerce-account .site-login .lost_password a:hover,
body.custom-background.woocommerce-account .site-login a.lost-password:hover,
body.custom-background.woocommerce-account
.site-login
.woocommerce-LostPassword
a:hover {
color: #ff8a96 !important;
}
body.custom-background.woocommerce-account .site-login input.input-text,
body.custom-background.woocommerce-account .site-login .password-input input {
color: #212529 !important;
}
/* Mobile bottom bar sits on white — keep icons/labels black over global white text rules */
.mobile-bottom-menu ul li a,
.mobile-bottom-menu ul li a i,
.mobile-bottom-menu ul li a i::before,
.mobile-bottom-menu ul li a span,
.mobile-bottom-menu ul li a svg {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
}
.mobile-bottom-menu ul li.active > a,
.mobile-bottom-menu ul li.active > a i,
.mobile-bottom-menu ul li.active > a i::before,
.mobile-bottom-menu ul li.active > a span {
color: var(--color-primary, #ef233c) !important;
-webkit-text-fill-color: var(--color-primary, #ef233c) !important;
}
/* Pagination ellipsis (…) — white on dark site at all breakpoints */
body.custom-background .site-pagination .page-numbers.dots,
body.custom-background .woocommerce-pagination .page-numbers.dots,
body.custom-background .site-pagination ul li > *.dots,
body.custom-background .woocommerce-pagination ul li > *.dots {
color: #fff !important;
}
/*
* PDP: compact review row above the product title (mobile + desktop).
* Pattern: stars · 4.8/5 · | · 2,134 Reviews
*/
.single-product-wrapper .product-detail .sl-product-rating-top,
.product-detail .sl-product-rating-top {
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.65rem;
padding: 0;
}
.single-product-wrapper .product-detail .sl-product-rating-top .star-rating,
.product-detail .sl-product-rating-top .star-rating {
font-size: 0.9rem;
width: 5.1rem;
margin: 0;
flex: 0 0 auto;
}
.single-product-wrapper .product-detail .sl-product-rating-top__average,
.product-detail .sl-product-rating-top__average {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
color: #212529;
white-space: nowrap;
}
.single-product-wrapper .product-detail .sl-product-rating-top__sep,
.product-detail .sl-product-rating-top__sep {
display: inline-block;
width: 1px;
height: 0.875rem;
background-color: #ced4da;
flex: 0 0 auto;
}
.single-product-wrapper .product-detail .sl-product-rating-top__count,
.single-product-wrapper
.product-detail
.sl-product-rating-top
a.woocommerce-review-link,
.product-detail .sl-product-rating-top a.woocommerce-review-link {
font-size: 0.8125rem;
font-weight: 500;
line-height: 1;
margin-left: 0 !important;
color: #495057 !important;
text-decoration: none;
white-space: nowrap;
}
.single-product-wrapper
.product-detail
.sl-product-rating-top
a.woocommerce-review-link:hover,
.product-detail .sl-product-rating-top a.woocommerce-review-link:hover {
color: var(--color-primary, #ef233c) !important;
text-decoration: underline;
}
body.custom-background
.single-product-wrapper
.product-detail
.sl-product-rating-top__average,
body.custom-background .product-detail .sl-product-rating-top__average,
body.custom-background
.single-product-wrapper
.product-detail
.sl-product-rating-top
a.woocommerce-review-link,
body.custom-background
.product-detail
.sl-product-rating-top
a.woocommerce-review-link {
color: #fff !important;
}
body.custom-background
.single-product-wrapper
.product-detail
.sl-product-rating-top__sep,
body.custom-background .product-detail .sl-product-rating-top__sep {
background-color: rgba(255, 255, 255, 0.35);
}
body.custom-background
.single-product-wrapper
.product-detail
.sl-product-rating-top
a.woocommerce-review-link:hover,
body.custom-background
.product-detail
.sl-product-rating-top
a.woocommerce-review-link:hover {
color: rgba(255, 255, 255, 0.8) !important;
}
.single-product-wrapper .product-detail .product_title {
margin-top: 0;
}
.single-product-wrapper .product-detail .sl-single-stock {
margin-bottom: 0.75rem;
}
/* WiserReview stars above title — clickable scroll to reviews */
.single-product-wrapper .product-detail .sl-wiser-rating-top,
.product-detail .sl-wiser-rating-top {
margin: 0 0 0.65rem;
}
.single-product-wrapper .product-detail .sl-wiser-rating-link,
.product-detail .sl-wiser-rating-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none !important;
color: inherit !important;
cursor: pointer;
}
.single-product-wrapper .product-detail .sl-wiser-rating-link:hover,
.product-detail .sl-wiser-rating-link:hover {
opacity: 0.85;
}
#sl-wiser-reviews {
scroll-margin-top: 6rem;
}
/*
* WiserReview widgets — dark site readability.
* Carousel/nudges sit on the carbon background with dark default text.
* Main review summary is also on dark; white cards keep dark text.
*/
body.custom-background .wiser_review.wsr_carousel_product,
body.custom-background .wiser_review.wsr_carousel_product *:not(svg):not(path),
body.custom-background .wiser_wall,
body.custom-background .wiser_wall *:not(svg):not(path) {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
body.custom-background .wiser_review.wsr_carousel_product a,
body.custom-background
.wiser_review.wsr_carousel_product
a
*:not(svg):not(path),
body.custom-background .wiser_wall a,
body.custom-background .wiser_wall a *:not(svg):not(path) {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* Main Customer Reviews block (outside white cards) */
body.custom-background #wiser_review_main.wiser_review.wsr_main,
body.custom-background #sl-wiser-reviews .wiser_review.wsr_main {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
body.custom-background
#wiser_review_main.wiser_review.wsr_main
> *:not([class*="card"]):not([class*="Card"]),
body.custom-background #wiser_review_main .Wsrspfapp-review-count,
body.custom-background #wiser_review_main .Wsrspfapp-review-count *,
body.custom-background
#wiser_review_main
[class*="Wsrspfapp-"][class*="header"],
body.custom-background
#wiser_review_main
[class*="Wsrspfapp-"][class*="summary"],
body.custom-background #wiser_review_main [class*="Wsrspfapp-"][class*="title"],
body.custom-background
#wiser_review_main
[class*="Wsrspfapp-"][class*="rating"],
body.custom-background
#wiser_review_main
[class*="Wsrspfapp-"][class*="search"]
input,
body.custom-background
#wiser_review_main
[class*="Wsrspfapp-"][class*="search"]
input::placeholder {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background-color: transparent !important;
}
/* Light review cards — keep dark readable text (override global white rules) */
body.custom-background #wiser_review_main [class*="card"],
body.custom-background #wiser_review_main [class*="Card"],
body.custom-background #wiser_review_main [class*="card"] *:not(svg):not(path),
body.custom-background #wiser_review_main [class*="Card"] *:not(svg):not(path),
body.custom-background #sl-wiser-reviews [class*="card"],
body.custom-background #sl-wiser-reviews [class*="Card"],
body.custom-background #sl-wiser-reviews [class*="card"] *:not(svg):not(path),
body.custom-background #sl-wiser-reviews [class*="Card"] *:not(svg):not(path) {
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
}
body.custom-background #wiser_review_main [class*="card"] a,
body.custom-background #wiser_review_main [class*="Card"] a,
body.custom-background #sl-wiser-reviews [class*="card"] a,
body.custom-background #sl-wiser-reviews [class*="Card"] a {
color: #212529 !important;
-webkit-text-fill-color: #212529 !important;
}
/* Star rating above title stays light on dark */
body.custom-background .wiser_review.wsr_rating,
body.custom-background .wiser_review.wsr_rating *:not(svg):not(path),
body.custom-background .sl-wiser-rating-top,
body.custom-background .sl-wiser-rating-top *:not(svg):not(path) {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/*
* Order tracking form — instructional copy + labels sit on the dark carbon
* background; keep inputs/button as-is (white fields already read well).
*/
body.custom-background .woocommerce-form-track-order,
body.custom-background .woocommerce-form-track-order p,
body.custom-background .woocommerce-form-track-order .form-row label,
body.custom-background .woocommerce form.track_order,
body.custom-background .woocommerce form.track_order p,
body.custom-background .woocommerce form.track_order .form-row label {
color: #e9ecef !important;
}
body.custom-background .woocommerce-order-tracking,
body.custom-background .woocommerce-order-tracking p,
body.custom-background .woocommerce-order-tracking mark,
body.custom-background .woocommerce-customer-details,
body.custom-background .woocommerce-customer-details address,
body.custom-background .woocommerce-order-details,
body.custom-background .woocommerce-order-details th,
body.custom-background .woocommerce-order-details td,
body.custom-background .woocommerce-order-details a,
body.custom-background .woocommerce-order-overview,
body.custom-background .woocommerce-order-overview li,
body.custom-background .woocommerce-order-overview strong {
color: #e9ecef !important;
}
/* Link-style CTAs on dark carbon (e.g. category "Shop More") — anchors only.
* Banner pills are