/*
Theme Name:   Fluxmart Child
Theme URI:    https://welflowsolutions.com/fluxmart
Description:  Child theme for Fluxmart
Author:       Welflow Solutions
Author URI:   https://welflowsolutions.com/
Template:     fluxmart
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fluxmart-child
*/

/* =============================================================
   Dirttrapper legacy parent contract
   These classes existed in the old parent theme and the child
   templates depend on them. Keep them in the child so parent
   updates cannot remove the page design.
============================================================= */
:root {
	--dt-shell: var(--fm-shell, 1200px);
	--dt-shell-gutter: var(--fm-container-gutter, 32px);
	--dt-shell-gutter-mobile: var(--fm-container-gutter-mobile, 16px);
	--dt-radius-sm: var(--fm-radius-sm, var(--fm-radius, 8px));
	--dt-panel-shadow: var(--fm-shadow-soft, var(--fm-shadow-md, none));
	--dt-color-on-dark: var(--fm-white, var(--fm-color-surface, Canvas));
	--dt-color-on-dark-soft: color-mix(in srgb, var(--dt-color-on-dark) 86%, transparent);
	--dt-color-on-dark-muted: color-mix(in srgb, var(--dt-color-on-dark) 66%, transparent);
	--dt-color-on-dark-subtle: color-mix(in srgb, var(--dt-color-on-dark) 46%, transparent);
	--dt-color-on-dark-line: color-mix(in srgb, var(--dt-color-on-dark) 12%, transparent);
	--dt-color-on-dark-surface: color-mix(in srgb, var(--dt-color-on-dark) 8%, transparent);
	--dt-color-on-dark-pattern: color-mix(in srgb, var(--dt-color-on-dark) 2%, transparent);
	--dt-color-success: var(--fm-color-success, var(--fm-color-accent-strong));
	--dt-color-success-soft: color-mix(in srgb, var(--dt-color-success) 10%, var(--fm-color-surface));
	--dt-color-success-line: color-mix(in srgb, var(--dt-color-success) 34%, var(--fm-color-line));
	--dt-color-danger: var(--fm-color-danger, var(--fm-color-primary-strong));
	--dt-color-danger-soft: color-mix(in srgb, var(--dt-color-danger) 10%, var(--fm-color-surface));
	--dt-color-danger-line: color-mix(in srgb, var(--dt-color-danger) 30%, var(--fm-color-line));
	--dt-intro-measure: calc(var(--dt-shell) * 0.56);
	--dt-intro-gap: calc(var(--fm-form-gap) + (var(--fm-card-padding-sm) * 0.5));
	--dt-intro-copy-leading: calc(var(--fm-leading-body) + 0.12);
	--dt-section-space: calc(var(--fm-section-space) + var(--fm-card-padding));
	--dt-section-space-mobile: calc(var(--fm-section-space-mobile) + var(--fm-card-padding-sm));
	--dt-section-head-gap: calc(var(--fm-form-gap) * 0.85);
	--dt-section-head-offset: calc(var(--fm-section-space) * 0.86);
	--dt-section-head-offset-lg: calc(var(--fm-section-space) + (var(--fm-card-padding-sm) * 0.7));
	--dt-section-head-offset-mobile: calc(var(--fm-section-space-mobile) * 0.65);
	--dt-section-head-narrow: calc(var(--dt-shell) * 0.47);
	--dt-section-head-medium: calc(var(--dt-shell) * 0.5);
	--dt-section-head-wide: calc(var(--dt-shell) * 0.54);
	--dt-card-gap: calc(var(--fm-form-gap) + var(--fm-card-padding-sm));
	--dt-card-padding: calc(var(--fm-card-padding) + var(--fm-card-padding-sm));
	--dt-card-padding-lg: calc(var(--fm-card-padding) * 2);
	--dt-row-padding: calc(var(--fm-form-gap) + (var(--fm-card-padding-sm) * 0.35));
	--dt-layout-gap: calc(var(--fm-section-space) + var(--fm-form-gap));
	--dt-layout-gap-mobile: calc(var(--fm-section-space-mobile) + var(--fm-card-padding-sm));
	--dt-type-hero: var(--fm-type-display);
	--dt-type-page-title: var(--fm-type-h1);
	--dt-type-section-title: var(--fm-type-h2);
	--dt-type-content-title: var(--fm-type-h3);
	--dt-type-card-title: var(--fm-type-h4);
	--dt-type-small-title: var(--fm-type-h5);
	--dt-type-kicker: var(--fm-type-overline);
	--dt-type-lead: var(--fm-type-body-lg);
	--dt-type-copy: var(--fm-type-body);
	--dt-type-copy-sm: var(--fm-type-body-sm);
	--dt-type-meta: var(--fm-type-caption);
	--dt-type-stat-sm: calc(var(--dt-type-hero) * 0.75);
	--dt-type-stat-md: calc(var(--dt-type-hero) * 0.95);
	--dt-type-stat-lg: calc(var(--dt-type-hero) * 1.33);
	--dt-type-stat-xl: calc(var(--dt-type-hero) * 2.66);
}

.fluxmart-main,
.site-main {
	flex: 1 1 0%;
}

.fluxmart-main button,
.fluxmart-main input,
.fluxmart-main select,
.fluxmart-main textarea {
	font: inherit;
}

.fluxmart-main .fm-woo-shell,
.fluxmart-main .fm-product-container {
	box-sizing: border-box;
	margin-inline: auto;
	width: 100%;
	max-width: var(--dt-shell);
	padding-inline: var(--dt-shell-gutter-mobile);
}

@media (min-width: 768px) {
	.fluxmart-main .fm-woo-shell,
	.fluxmart-main .fm-product-container {
		padding-inline: var(--dt-shell-gutter);
	}
}

.fluxmart-main .fm-woo-panel,
.fluxmart-main .fm-woo-card-section {
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--fm-color-line) 86%, var(--fm-white) 14%);
	border-radius: var(--fm-radius-lg);
	background: var(--fm-white);
	box-shadow: var(--dt-panel-shadow);
}

.fluxmart-main .fm-woo-card-section--accent {
	border-top: 3px solid var(--fm-primary);
}

.fluxmart-main :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fm-font-heading);
	color: var(--fm-color-text);
	letter-spacing: 0;
	text-wrap: balance;
}

.fluxmart-main .fm-page-hero__title {
	color: var(--dt-color-on-dark);
}

.fluxmart-main .fm-page-hero__breadcrumb {
	color: var(--dt-color-on-dark-muted);
}

.fluxmart-main .fm-page-hero__breadcrumb a {
	color: inherit;
}

.fluxmart-main .fm-page-hero__sep {
	color: var(--dt-color-on-dark-subtle);
}

.fluxmart-main .fm-woo-section-head {
	margin-inline: auto;
	display: grid;
	row-gap: var(--dt-section-head-gap);
	max-width: min(100%, 44rem);
	margin-bottom: var(--dt-section-head-offset);
	text-align: center;
}

.fluxmart-main .dt-section-head--narrow {
	max-width: min(100%, var(--dt-section-head-narrow));
}

.fluxmart-main .dt-section-head--medium {
	max-width: min(100%, var(--dt-section-head-medium));
}

.fluxmart-main .dt-section-head--wide {
	max-width: min(100%, var(--dt-section-head-wide));
}

.fluxmart-main .dt-section-head--spacious {
	margin-bottom: var(--dt-section-head-offset-lg);
}

.fluxmart-main .fm-woo-section-head__eyebrow {
	margin: 0;
	font-size: var(--dt-type-kicker);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fm-primary-dark);
}

.fluxmart-main .fm-woo-section-head__title {
	margin: 0;
	font-family: var(--fm-font-heading);
	font-size: var(--dt-type-section-title);
	line-height: var(--fm-leading-h2);
	color: var(--fm-text);
}

.fluxmart-main .fm-woo-section-head__copy {
	margin: 0;
	font-size: var(--fm-type-body);
	line-height: 1.7;
	color: var(--fm-muted);
}

.fluxmart-main .dt-page-intro {
	margin-inline: auto;
	display: grid;
	row-gap: var(--dt-intro-gap);
	max-width: min(100%, var(--dt-intro-measure));
	padding-block: var(--fm-card-padding-sm);
	text-align: center;
}

.fluxmart-main .dt-page-intro.fm-woo-section-head {
	margin-bottom: 0;
}

.fluxmart-main .dt-page-intro .fm-woo-section-head__title {
	font-size: var(--dt-type-page-title);
	line-height: var(--fm-leading-h1);
}

.fluxmart-main .dt-page-intro .fm-woo-section-head__copy {
	font-size: var(--fm-type-body-lg);
	line-height: var(--dt-intro-copy-leading);
}

.fluxmart-main .dt-page-intro__link {
	color: var(--fm-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fluxmart-main .btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.45em;
	border-radius: var(--fm-radius) !important;
	border: 1px solid transparent;
	min-height: var(--fm-control-height) !important;
	padding: 0 var(--fm-button-padding-x) !important;
	font-family: var(--fm-font-body) !important;
	font-size: var(--fm-type-button) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease !important;
	white-space: nowrap;
}

.fluxmart-main .btn-accent {
	border-color: color-mix(in srgb, var(--fm-color-accent-strong) 36%, var(--fm-color-accent));
	background: linear-gradient(135deg, var(--fm-color-accent), color-mix(in srgb, var(--fm-color-accent) 72%, var(--fm-color-accent-strong) 28%));
	color: var(--fm-white) !important;
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fm-white) 14%, transparent), 0 14px 24px -18px color-mix(in srgb, var(--fm-color-accent) 65%, transparent);
}

.fluxmart-main .btn-accent:hover,
.fluxmart-main .btn-accent:focus-visible {
	border-color: var(--fm-color-accent-strong);
	background: linear-gradient(135deg, var(--fm-color-accent-strong), color-mix(in srgb, var(--fm-color-accent-strong) 82%, var(--fm-color-primary-strong) 18%));
	color: var(--fm-white) !important;
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fm-white) 14%, transparent), 0 18px 28px -18px color-mix(in srgb, var(--fm-color-accent) 72%, transparent);
}

.fluxmart-main .btn-ghost {
	border-color: var(--fm-border);
	background: transparent;
	color: var(--fm-text) !important;
}

.fluxmart-main .btn-ghost:hover,
.fluxmart-main .btn-ghost:focus-visible {
	border-color: var(--fm-color-accent);
	background: var(--fm-color-accent-soft);
	color: var(--fm-color-accent-strong) !important;
}

.fluxmart-main .ui-field {
	width: 100%;
	border-radius: var(--fm-radius);
	border: 1px solid var(--fm-color-line);
	background-color: var(--fm-color-surface);
	font-size: var(--fm-type-input);
	line-height: var(--fm-leading-label);
	color: var(--fm-color-text);
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	min-height: var(--fm-input-height);
	padding-inline: var(--fm-input-padding-x);
}

.fluxmart-main .ui-field:focus {
	border-color: var(--fm-color-accent);
}

.site-footer .footer-bottom__copy .footer-bottom__divider:nth-last-of-type(1) {
	display: none;
}

/* Order details customer — address card label */
.woocommerce-customer-details .fm-address-label {
	font-size: var(--fm-type-label);
	font-weight: 600;
	display: block;
	margin-bottom: 8px;
}

/* Home page section alternating backgrounds */
.dt-home .dt-section--bg    { background: var(--fm-color-accent-soft); }
.dt-home .dt-section--white { background: var(--fm-color-surface); }

/* =============================================================
   Dirttrapper — Global reusable classes (all pages)
============================================================= */

/* Section spacing + divider */
.dt-section { padding: var(--dt-section-space) 0; position: relative; }

.dt-section + .dt-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, transparent 0%, var(--fm-color-line) 20%, var(--fm-color-line) 80%, transparent 100%);
}

/* Section backgrounds — alternating */
.dt-section--bg    { background: var(--fm-color-accent-soft); }
.dt-section--white { background: var(--fm-color-surface); }

/* Buttons */
.dt-btn-lg   { padding: calc(var(--fm-control-height) * 0.24) calc(var(--fm-button-padding-x) * 1.4); font-size: var(--fm-type-button-lg); }
.dt-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Stars */
.dt-stars { color: var(--fm-color-accent); letter-spacing: 2px; }
.dt-stars--featured {
	font-size: var(--fm-type-h4);
	letter-spacing: 3px;
}

/* Stat bar */
.dt-stat-bar {
	display: flex;
	align-items: center;
	gap: var(--fm-form-gap);
	padding: var(--dt-card-padding);
	background: var(--fm-color-accent-soft);
	border-radius: var(--dt-radius-sm);
	border-left: 4px solid var(--fm-color-accent);
}
.dt-stat-bar__number {
	font-size: var(--dt-type-stat-md);
	font-weight: 900;
	color: var(--fm-color-accent);
	line-height: 1;
	flex-shrink: 0;
	letter-spacing: -.03em;
}
.dt-stat-bar__label {
	font-size: var(--dt-type-meta);
	color: var(--fm-color-muted);
	line-height: 1.55;
}

/* CTA section */
.dt-cta {
	padding: var(--dt-section-space) 0;
	background: var(--fm-color-text);
	position: relative;
	overflow: hidden;
}
.dt-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-45deg, var(--dt-color-on-dark-pattern) 0px, var(--dt-color-on-dark-pattern) 1px, transparent 1px, transparent 12px);
	pointer-events: none;
}
.dt-cta__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--dt-layout-gap);
	align-items: center;
	position: relative;
	z-index: 1;
}

.dt-cta__text {
	display: grid;
	row-gap: var(--fm-form-gap);
}

.dt-cta__label {
	font-size: var(--dt-type-kicker);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--fm-color-accent);
	margin: 0;
	display: block;
}
.dt-cta__heading {
	font-family: var(--fm-font-heading);
	font-size: var(--dt-type-section-title);
	font-weight: 800;
	color: var(--dt-color-on-dark);
	margin: 0;
	line-height: var(--fm-leading-h2);
	letter-spacing: 0;
}
.dt-cta__sub {
	font-size: var(--dt-type-copy);
	color: var(--dt-color-on-dark-muted);
	max-width: 420px;
	margin: 0 0 calc(var(--fm-form-gap) * 0.75);
	line-height: 1.65;
}
.dt-cta__btn { gap: 10px; }
.dt-cta__trust {
	display: flex;
	flex-direction: column;
	gap: var(--dt-card-gap);
	padding-left: var(--dt-section-head-offset);
	border-left: 1px solid var(--dt-color-on-dark-line);
}
.dt-cta__trust-item { display: flex; align-items: center; gap: 16px; }
.dt-cta__trust-icon-wrap {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: var(--dt-radius-sm);
	background: var(--dt-color-on-dark-surface);
	border: 1px solid var(--dt-color-on-dark-line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.dt-cta__trust-icon { width: 20px; height: 20px; color: var(--fm-color-accent); }
.dt-cta__trust-item strong { display: block; font-size: var(--dt-type-small-title); font-weight: 700; color: var(--dt-color-on-dark); line-height: var(--fm-leading-h5); }
.dt-cta__trust-item span  { display: block; font-size: var(--dt-type-meta); color: var(--dt-color-on-dark-muted); line-height: 1.4; }

/* Mobile CTA */
@media (max-width: 1023px) {
	.dt-cta__inner { grid-template-columns: 1fr; gap: var(--dt-layout-gap-mobile); }
	.dt-cta__trust { padding-left: 0; border-left: none; border-top: 1px solid var(--dt-color-on-dark-line); padding-top: 32px; }
}
@media (max-width: 640px) {
	.fluxmart-main .fm-woo-section-head {
		margin-bottom: var(--dt-section-head-offset-mobile);
	}
	.dt-section { padding: var(--dt-section-space-mobile) 0; }
	.dt-cta { padding: var(--dt-section-space-mobile) 0; }
	.dt-cta__text { text-align: center; }
	.dt-cta__sub { max-width: 100%; }
	.dt-cta__heading { font-size: var(--dt-type-section-title); }
	.dt-cta__trust { flex-direction: column; gap: 16px; align-items: center; }
	.dt-cta__trust-item { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
	.dt-cta__btn { width: 100%; justify-content: center; }
}

/* =============================================================
   Dirttrapper — Review card (global — used on home + reviews page)
============================================================= */
.dt-review-card {
	background: var(--fm-color-surface);
	border: 1px solid var(--fm-color-line);
	border-radius: var(--fm-radius-lg);
	padding: var(--dt-card-padding);
	display: flex;
	flex-direction: column;
	gap: var(--fm-form-gap);
	width: 100%;
	transition: box-shadow .2s, transform .2s;
}
.dt-review-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.07); transform: translateY(-2px); }
.dt-review-card__stars { font-size: var(--dt-type-copy); letter-spacing: 2px; line-height: 1; }
.dt-star--full  { color: var(--fm-color-accent); }
.dt-star--half  { color: var(--fm-color-accent); opacity: .5; }
.dt-star--empty { color: var(--fm-color-line); }
.dt-review-card__text { font-size: var(--dt-type-copy-sm); color: var(--fm-color-text); line-height: 1.7; margin: 0; flex: 1; }
.dt-review-card__author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--fm-color-line); }
.dt-review-card__avatar { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; color: var(--dt-color-on-dark); display: flex; align-items: center; justify-content: center; font-size: var(--dt-type-meta); font-weight: 700; line-height: 1; flex-shrink: 0; }
.dt-review-card__meta { display: flex; flex-direction: column; gap: 2px; }
.dt-review-card__name { font-size: var(--dt-type-meta); font-weight: 700; color: var(--fm-color-text); line-height: 1.3; }
.dt-review-card__role { font-size: var(--dt-type-kicker); color: var(--fm-color-muted); line-height: 1.3; }
