/* ============================================================
   Knooz — site-wide dark surface
   Page backgrounds + the footer texture, lifted to the whole site.
   The header is deliberately left light.
   ============================================================ */

:root {
	--knz-dark: #10231a;
	--knz-line: rgba(255, 255, 255, 0.1);
}

body,
.xts-site-background,
.page-content .wd-page-content,
.wd-shop-content,
.wd-single-product,
.wd-shop-tools,
.woocommerce-page .wd-container,
.xts-shop-archive,
.wd-page-content,
.single-post .entry-content,
.xts-blog-listing,
.woocommerce-cart .wd-cart-content,
.woocommerce-checkout .wd-checkout-content,
.woocommerce-account .wd-account-content {
	background-color: var(--knz-dark) !important;
	background-image:
		radial-gradient(1100px 520px at 78% -8%, rgba(131, 183, 53, 0.16), transparent 62%),
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(180deg, #12281d, #0d1f17) !important;
	background-size: auto, 48px 48px, 48px 48px, auto !important;
	background-position: center !important;
	background-repeat: no-repeat, repeat, repeat, no-repeat !important;
	background-attachment: fixed, scroll, scroll, scroll !important;
}

/* ---------- content surfaces: lift cards off the dark page ---------- */
.wd-product,
.wd-product-grid .wd-product,
.woocommerce-page .wd-product,
.shop_grid .wd-product,
.wd-shop-content .wd-product {
	background: #f6f8f4;
	border-radius: 10px;
}

/* ---------- text on the dark page ---------- */
.xts-site-content,
.xts-page-content,
.wd-page-content,
.wd-shop-content,
.wd-single-product-wrap,
.entry-content,
.woocommerce-page,
.xts-shop-archive {
	color: rgba(255, 255, 255, 0.82);
}

.wd-page-title .page-title,
.xts-shop-archive .wd-shop-title,
.wd-shop-content .wd-archive-title {
	color: #fff;
}

/* section titles / headings inside dark pages */
.xts-page-content h2,
.xts-page-content h3,
.wd-shop-content h2,
.entry-content h2,
.entry-content h3 {
	color: #fff;
}

/* ---------- keep the header light ---------- */
.wd-header,
.wd-header-desktop,
.header-main,
.site-header,
.wd-header-bottom,
.wd-mobile-header,
.header-sidebar,
.wd-nav-main,
.sticky-header,
.wd-header-sticky,
.header-cart,
.wd-header-search-form,
[class*="color-scheme-light"]:is(.wd-header, .site-header) {
	background-color: #fff !important;
	color: var(--knz-ink, #1b2a20) !important;
}

.wd-header a,
.wd-header button,
.wd-header .menu-item > a,
.wd-header .wd-menu-item > a {
	color: #1b2a20 !important;
}

.wd-header .wd-header-search-form input,
.wd-header .wd-header-search-form button,
.wd-header .wd-mobile-menu-icon,
.wd-header .wd-header-cart .wd-icon,
.wd-header .wd-nav-account a {
	color: #1b2a20 !important;
	fill: #1b2a20 !important;
}

/* ---------- shop tools / filters / breadcrumbs on dark ---------- */
.wd-shop-tools,
.wd-toolbar,
.woocommerce-ordering,
.wd-breadcrumbs,
.woocommerce-breadcrumb,
.wd-shop-archive .wd-shop-header {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.75) !important;
	border-color: var(--knz-line) !important;
}

.wd-breadcrumbs a,
.woocommerce-breadcrumb a,
.wd-toolbar a {
	color: rgba(255, 255, 255, 0.75) !important;
}

.wd-breadcrumbs .separator,
.woocommerce-breadcrumb .separator {
	color: rgba(255, 255, 255, 0.45) !important;
}

/* ---------- sidebar / filters panel ---------- */
.woocommerce-sidebar,
.wd-sidebar,
.wd-shop-sidebar {
	background: rgba(255, 255, 255, 0.04) !important;
	color: rgba(255, 255, 255, 0.82) !important;
	border-color: var(--knz-line) !important;
}

.woocommerce-sidebar a,
.wd-sidebar a,
.woocommerce-widget-list .widget-title,
.woocommerce-sidebar .widget-title {
	color: rgba(255, 255, 255, 0.82) !important;
}

/* ---------- forms / inputs on dark ---------- */
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="url"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="search"],
.woocommerce-page input[type="password"],
.woocommerce-page textarea,
.woocommerce-page select,
.xts-page-content input[type="text"],
.xts-page-content input[type="email"],
.xts-page-content input[type="tel"],
.xts-page-content input[type="url"],
.xts-page-content input[type="number"],
.xts-page-content input[type="search"],
.xts-page-content textarea,
.xts-page-content select {
	background: rgba(255, 255, 255, 0.05) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

.woocommerce-page input::placeholder,
.xts-page-content input::placeholder,
.xts-page-content textarea::placeholder,
.woocommerce-page textarea::placeholder {
	color: rgba(255, 255, 255, 0.42) !important;
}

.woocommerce-page select option {
	background: #10231a;
	color: #fff;
}

/* ---------- notices / messages ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice-wrapper .woocommerce-message,
.wd-form .wd-alert {
	background: rgba(255, 255, 255, 0.06) !important;
	color: rgba(255, 255, 255, 0.85) !important;
	border-color: var(--knz-line) !important;
}

/* ============================================================
   PRODUCT CARDS
   The cards are light surfaces sitting on the dark page, so they
   need dark ink and a real border. Without this, the title/category
   text stays white-on-white and the theme's white card border shows.
   Placed last so it wins over the dark text layer above.
   ============================================================ */
.wd-product,
.woocommerce-page .wd-product,
.shop_grid .wd-product,
.wd-shop-content .wd-product,
.xts-shop-archive .wd-product,
.wd-products-grid .wd-product {
	background: #f6f8f4 !important;
	color: #1b2a20 !important;
	border: 1px solid rgba(27, 42, 32, 0.14) !important;
	border-radius: 12px;
	/* NO overflow:hidden here on purpose.
	   WoodMart puts .wd-product-card-hover at top:100% (below the card box) and
	   .wd-product-card-bg at inset:-10px, so clipping the card hides the
	   add-to-cart / wishlist / quick-view panel on hover. The rounded top is
	   done on the image instead, see below. */
}

/* round only the image, so the hover panel can still escape the card box */
.wd-product .wd-product-thumb,
.wd-product .wd-product-thumb .wd-product-img-link,
.wd-product .wd-product-thumb img {
	border-radius: 11px 11px 0 0;
}

.wd-product .wd-product-thumb img {
	background: #fff;
}

/* the theme paints the card through this empty layer */
.wd-product .wd-product-card-bg,
.wd-product .wd-product-wrapper,
.wd-product .product-element-bottom,
.wd-product .product-information,
.wd-product .product-rating-price,
.wd-product .wrapp-product-price {
	background: transparent !important;
	color: #1b2a20 !important;
}

/* title */
.wd-product .wd-entities-title,
.wd-product .wd-entities-title a,
.wd-product h2 a,
.wd-product h3 a,
.wd-product .woocommerce-loop-product__title,
.wd-product .woocommerce-loop-product__title a {
	color: #1b2a20 !important;
}

.wd-product .wd-entities-title a:hover,
.wd-product h3 a:hover {
	color: #5e8f24 !important;
}

/* category line */
.wd-product .wd-product-cats,
.wd-product .wd-product-cats a,
.wd-product .wd-product-cats span {
	color: #6b7a70 !important;
}

.wd-product .wd-product-cats a:hover {
	color: #5e8f24 !important;
}

/* price — dark green, readable on the light card */
.wd-product .price,
.wd-product .price ins,
.wd-product .price del,
.wd-product .woocommerce-Price-amount,
.wd-product .wrapp-product-price .price {
	color: #3f6b16 !important;
	font-weight: 700;
}

.wd-product .price del,
.wd-product .price del .woocommerce-Price-amount {
	color: #9aa69e !important;
	font-weight: 400;
}

.wd-product .price ins {
	text-decoration: none;
}

/* stock / labels */
.wd-product .wd-product__status,
.wd-product .wd-stock,
.wd-product .wd-action-text {
	color: #1b2a20 !important;
}

/* hover overlay + excerpt */
.wd-product .wd-product-card-hover,
.wd-product .hover-content,
.wd-product .hover-content-inner,
.wd-product .wd-more-desc,
.wd-product .wd-more-desc p,
.wd-product .wd-more-desc span {
	background: #f6f8f4 !important;
	color: rgba(27, 42, 32, 0.78) !important;
}

.wd-product .wd-more-desc-btn {
	background: rgba(27, 42, 32, 0.08) !important;
}

/* wishlist / compare / quick-view icons: dark ink on the light card.
   WoodMart draws these with an icon font (content: var(--wd-btn-icon)),
   NOT inline SVG, so the color has to come through these CSS vars. */
.wd-product .wd-action-btn,
.wd-product .wd-wishlist-btn,
.wd-product .wd-compare-btn,
.wd-product .wd-quick-view-btn {
	--wd-action-color: #1b2a20 !important;
	--wd-action-icon-color: #1b2a20 !important;
	--wd-action-color-hover: #5e8f24 !important;
	--wd-action-icon-color-hover: #5e8f24 !important;
}

.wd-product .wd-action-btn a,
.wd-product .wd-action-icon,
.wd-product .wd-action-text,
.wd-product .wd-wishlist-btn a,
.wd-product .wd-compare-btn a,
.wd-product .wd-quick-view-btn a,
.wd-product .wd-action-icon svg,
.wd-product .wd-action-icon svg path,
.wd-product .wd-action-icon svg circle,
.wd-product .wd-check-icon {
	color: #1b2a20 !important;
	fill: #1b2a20 !important;
	stroke: #1b2a20 !important;
}

.wd-product .wd-action-btn a:hover,
.wd-product .wd-wishlist-btn a:hover,
.wd-product .wd-compare-btn a:hover {
	color: #5e8f24 !important;
	fill: #5e8f24 !important;
}

/* add to cart / quick shop on the card.
   The theme paints this with high-specificity vars on .wd-bottom-actions,
   so pin them instead of relying on plain color. */
.wd-product .wd-add-btn,
.wd-product .wd-atc-btn {
	--wd-action-color: #10231a !important;
	--wd-action-icon-color: #10231a !important;
	--wd-action-color-hover: #10231a !important;
	--wd-action-icon-color-hover: #10231a !important;
}

.wd-product .button,
.wd-product .wd-product-btn,
.wd-product .wd-quick-shop-btn,
.wd-product .wd-atc-btn a,
.wd-product .wd-bottom-actions .wd-add-btn > a {
	background: #83b735 !important;
	background-color: #83b735 !important;
	color: #10231a !important;
	border-color: #83b735 !important;
	font-weight: 700;
}

.wd-product .button:hover,
.wd-product .wd-product-btn:hover,
.wd-product .wd-quick-shop-btn:hover,
.wd-product .wd-atc-btn a:hover,
.wd-product .wd-bottom-actions .wd-add-btn > a:hover {
	background: #74a52c !important;
	background-color: #74a52c !important;
	border-color: #74a52c !important;
}

/* star ratings stay gold on the light card */
.wd-product .star-rating,
.wd-product .star-rating::before {
	color: #e8a300 !important;
}

/* ---------- tables (cart / checkout / my account) ---------- */
.woocommerce table,
.woocommerce .shop_table,
.woocommerce-checkout .shop_table,
.woocommerce-account table,
.woocommerce td,
.woocommerce th,
.wd-table {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.82) !important;
	border-color: var(--knz-line) !important;
}

.woocommerce table th,
.woocommerce .shop_table th,
.woocommerce-checkout #order_review table th,
.woocommerce-checkout #order_review table td {
	background: rgba(255, 255, 255, 0.04) !important;
}

.woocommerce table td a,
.woocommerce .shop_table td a {
	color: #fff !important;
}

/* ---------- tabs / pagination ---------- */
.woocommerce-tabs,
.woocommerce-tabs .tabs,
.wd-tabs,
.woocommerce-pagination ul.page-numbers li,
.woocommerce nav.woocommerce-pagination {
	color: rgba(255, 255, 255, 0.82) !important;
}

.woocommerce-tabs .tabs li a,
.wd-tabs .tabs li a,
.woocommerce-pagination ul.page-numbers li a {
	color: rgba(255, 255, 255, 0.78) !important;
	border-color: var(--knz-line) !important;
}

.woocommerce-pagination ul.page-numbers li span,
.woocommerce-pagination ul.page-numbers li a:hover {
	background: var(--knz-primary, #83b735) !important;
	color: #0d1f17 !important;
	border-color: var(--knz-primary, #83b735) !important;
}

/* ---------- star ratings / price ---------- */
.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce-page .star-rating,
.woocommerce-page .star-rating::before {
	color: #f5b301 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .woocommerce-Price-amount,
.woocommerce-page .price {
	color: #83b735 !important;
}

/* ============================================================
   Cart totals: cream card with a real shadow
   WoodMart draws this box on .cart-totals-inner (25px padding, a
   3px border, radius from --wd-brd-radius) but never gives it a
   background — so on the dark page the panel just reads as raw
   background. Give it a cream surface plus a lift, and re-point
   the theme's colour variables inside the card so the table,
   heading, inputs and totals all render dark-on-cream.
   Placed last so it wins over both the table rules above and
   WoodMart's deferred cart CSS.
   ============================================================ */
.woocommerce-cart .cart-content-wrapper > .cart_totals .cart-totals-inner,
.woocommerce-cart .cart_totals .cart-totals-inner,
.woocommerce-checkout .cart_totals .cart-totals-inner {
	/* re-point the theme vars the cart CSS actually consumes */
	--wd-text-color: #56655a;
	--wd-title-color: #1b2a20;
	--brdcolor-gray-200: rgba(27, 42, 32, 0.14);
	--brdcolor-gray-300: rgba(27, 42, 32, 0.12);

	background: #f7f8f2 !important;
	color: #1b2a20 !important;
	border: 1px solid rgba(27, 42, 32, 0.13) !important;
	border-radius: 14px !important;
	box-shadow:
		0 18px 38px rgba(0, 0, 0, 0.42),
		0 3px 10px rgba(0, 0, 0, 0.2) !important;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.woocommerce-cart .cart_totals .cart-totals-inner:hover,
.woocommerce-checkout .cart_totals .cart-totals-inner:hover {
	box-shadow:
		0 24px 48px rgba(0, 0, 0, 0.48),
		0 4px 12px rgba(0, 0, 0, 0.24) !important;
}

.cart-totals-inner > h2 {
	color: #1b2a20 !important;
	font-size: 20px;
	line-height: 1.5;
}

/* table body: dark ink on cream, WoodMart's white-ish borders re-tinted */
.cart-totals-inner .shop_table,
.cart-totals-inner .shop_table th,
.cart-totals-inner .shop_table td {
	background: transparent !important;
	border-color: rgba(27, 42, 32, 0.12) !important;
	color: #1b2a20 !important;
}

.cart-totals-inner .shop_table th {
	color: #56655a !important;
	font-weight: 600;
}

.cart-totals-inner .shop_table .cart-subtotal .amount,
.cart-totals-inner .shop_table_responsive td:before {
	color: #56655a !important;
}

/* the grand total is the one number that should dominate */
.cart-totals-inner .shop_table .order-total th,
.cart-totals-inner .shop_table .order-total td,
.cart-totals-inner .shop_table .order-total .woocommerce-Price-amount {
	color: #10231a !important;
	font-weight: 800;
}

/* shipping calculator + any link inside the card */
.cart-totals-inner a {
	color: #4e7c1b !important;
}

.cart-totals-inner label,
.cart-totals-inner .shipping-calculator-button {
	color: #1b2a20 !important;
}

/* inputs sit on cream now, so flip them back to light */
.cart-totals-inner input[type="text"],
.cart-totals-inner input[type="email"],
.cart-totals-inner input[type="tel"],
.cart-totals-inner input[type="postcode"],
.cart-totals-inner input[type="number"],
.cart-totals-inner select,
.cart-totals-inner textarea {
	background: #fff !important;
	color: #1b2a20 !important;
	border-color: rgba(27, 42, 32, 0.18) !important;
}

.cart-totals-inner input::placeholder {
	color: rgba(27, 42, 32, 0.45) !important;
}