/* ==========================================================================
   FitFlex Catalogue Mode
   Matches every page to the homepage palette and removes cart/price UI.
   ========================================================================== */

:root {
	--ff-bg: #0d141a;
	--ff-surface: #131d26;
	--ff-surface-2: #1a252f;
	--ff-text: #fff7ed;
	--ff-heading: #ffffff;
	--ff-muted: rgba(255, 247, 237, 0.72);
	--ff-line: rgba(255, 247, 237, 0.16);
	--ff-accent: #b95b26;
}

/* --------------------------------------------------------------------------
   1. Page canvas — same background everywhere
   -------------------------------------------------------------------------- */
html,
body {
	background-color: var(--ff-bg) !important;
}

body {
	color: var(--ff-text);
}

body .wp-site-blocks,
body .wp-site-blocks > main,
body main.wp-block-group,
body .site-main,
body #content,
body .woocommerce-page > .container {
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   2. Inherit light text on non-Elementor templates (shop, product, archives,
      search, 404). Elementor pages already carry the homepage palette.
   -------------------------------------------------------------------------- */
body:not(.elementor-page) main {
	color: var(--ff-text);
}

body:not(.elementor-page) main :is(h1, h2, h3, h4, h5, h6),
body:not(.elementor-page) main :is(p, li, dd, dt, td, th, label, span, strong, em, small, figcaption, blockquote, address),
body:not(.elementor-page) main .has-text-color {
	color: inherit !important;
}

body:not(.elementor-page) main :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ff-heading) !important;
}

body:not(.elementor-page) main a:not(.wp-element-button):not(.button):not(.wc-block-components-button):not(.wp-block-button__link) {
	color: inherit !important;
	text-decoration-color: var(--ff-line);
}

body:not(.elementor-page) main a:not(.wp-element-button):not(.button):not(.wc-block-components-button):not(.wp-block-button__link):hover,
body:not(.elementor-page) main a:not(.wp-element-button):not(.button):not(.wc-block-components-button):not(.wp-block-button__link):focus {
	color: var(--ff-accent) !important;
}

/* Light preset backgrounds inside the content area would break the dark canvas */
body:not(.elementor-page) main :is(.has-base-background-color, .has-white-background-color) {
	background-color: transparent !important;
}

body:not(.elementor-page) main hr,
body:not(.elementor-page) main .wp-block-separator {
	border-color: var(--ff-line);
	color: var(--ff-line);
}

/* --------------------------------------------------------------------------
   3. Hide every trace of cart, checkout, account and pricing
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart,
.wc-block-mini-cart__button,
.wp-block-woocommerce-customer-account,
.wc-block-customer-account,
.wc-block-customer-account__link,
.wp-block-woocommerce-cart-link,
.wc-block-mini-cart__drawer,
.wc-block-mini-cart__template-part,
.wp-block-woocommerce-mini-cart-contents,
.woocommerce-menu-cart,
.elementor-widget-woocommerce-menu-cart,
.elementor-menu-cart,
.header-cart,
.cart-contents,
.site-header .cart,
li.menu-item a[href*="/cart"],
li.menu-item a[href*="/checkout"],
li.menu-item a[href*="/my-account"] {
	display: none !important;
}

.price,
.amount,
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount,
.wp-block-woocommerce-product-price,
.woocommerce-product-details__short-description .price,
.product .summary .price,
.woocommerce-grouped-product-list-item__price {
	display: none !important;
}

form.cart,
.wp-block-woocommerce-add-to-cart-form,
.wc-block-components-quantity-selector,
.woocommerce-message .button.wc-forward,
.added_to_cart,
.woocommerce-mini-cart,
.widget_shopping_cart {
	display: none !important;
}

/* --------------------------------------------------------------------------
   4. Buttons — pill shape and accent colour, matching the homepage
   -------------------------------------------------------------------------- */
body:not(.elementor-page) main .wp-element-button,
body:not(.elementor-page) main .wp-block-button__link,
body:not(.elementor-page) main a.button,
body:not(.elementor-page) main button.button,
body:not(.elementor-page) main .wc-block-components-button,
body:not(.elementor-page) main input[type="submit"] {
	background-color: var(--ff-accent) !important;
	border: 1px solid var(--ff-accent) !important;
	color: #ffffff !important;
	border-radius: 50px !important;
	padding: 0.7em 1.6em !important;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body:not(.elementor-page) main .wp-element-button:hover,
body:not(.elementor-page) main .wp-block-button__link:hover,
body:not(.elementor-page) main a.button:hover,
body:not(.elementor-page) main button.button:hover,
body:not(.elementor-page) main .wc-block-components-button:hover,
body:not(.elementor-page) main input[type="submit"]:hover {
	background-color: transparent !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   5. WooCommerce chrome — breadcrumbs, counts, sorting, notices
   -------------------------------------------------------------------------- */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs,
.woocommerce-result-count,
.wc-block-product-results-count,
.product_meta,
.posted_in,
.tagged_as,
.sku_wrapper {
	color: var(--ff-muted) !important;
}

.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	color: var(--ff-muted) !important;
}

.woocommerce-ordering select,
select.orderby,
.wc-block-catalog-sorting select,
body select,
body input[type="text"],
body input[type="email"],
body input[type="search"],
body input[type="url"],
body input[type="tel"],
body input[type="number"],
body input[type="password"],
body textarea {
	background-color: var(--ff-surface) !important;
	color: var(--ff-text) !important;
	border: 1px solid var(--ff-line) !important;
	border-radius: 10px;
	padding: 0.6em 0.9em;
}

body select option {
	background-color: var(--ff-surface);
	color: var(--ff-text);
}

body ::placeholder {
	color: rgba(255, 247, 237, 0.45);
	opacity: 1;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner,
.wc-block-store-notices .woocommerce-message {
	background-color: var(--ff-surface) !important;
	color: var(--ff-text) !important;
	border-color: var(--ff-accent) !important;
	border-radius: 12px;
}

.woocommerce-info::before,
.woocommerce-message::before,
.wc-block-components-notice-banner svg {
	color: var(--ff-accent) !important;
	fill: var(--ff-accent) !important;
}

/* --------------------------------------------------------------------------
   6. Product cards and single product page
   -------------------------------------------------------------------------- */
ul.products li.product,
.wc-block-product,
.wp-block-woocommerce-product-template li {
	background-color: transparent;
	color: var(--ff-text);
}

ul.products li.product .woocommerce-loop-product__title,
.wc-block-components-product-title,
.wc-block-grid__product-title,
.wp-block-post-title {
	color: var(--ff-heading) !important;
}

.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--ff-line) !important;
}

.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li.active {
	background-color: var(--ff-surface) !important;
	border-color: var(--ff-line) !important;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--ff-text) !important;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--ff-accent) !important;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	border-color: var(--ff-line) !important;
}

table.shop_attributes,
table.shop_attributes th,
table.shop_attributes td,
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	color: var(--ff-text) !important;
	border-color: var(--ff-line) !important;
	background-color: transparent !important;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span,
.wc-block-pagination-page {
	color: var(--ff-text) !important;
	border-color: var(--ff-line) !important;
}

.woocommerce-pagination .page-numbers li span.current,
.wc-block-pagination-page--active {
	background-color: var(--ff-accent) !important;
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   7. 404 and search results keep the same canvas
   -------------------------------------------------------------------------- */
body.error404 main,
body.search main,
body.archive main,
body.blog main,
body.single main {
	color: var(--ff-text);
}