/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ============================================
   bathhere.com — Frontend Design Tokens
   Source: work/bathhere/assets/css/variables.css
   ============================================ */

:root {
	/* ── Brand colors ── */
	--mzr-color-gold:        #B8952A;
	--mzr-color-gold-mid:    #D4B475;
	--mzr-color-gold-dark:   #7A5F28;
	--mzr-color-navy:        #0F1E2E;
	--mzr-color-cream:       #FAF5EC;
	--mzr-color-sand:        #F0E4C8;
	--mzr-color-espresso:    #3D2E12;
	--mzr-color-text:        #2A1F0E;
	--mzr-color-white:       #FFFFFF;
	--mzr-color-black:       #000000;
	--mzr-color-border:      #E0D0A8;

	/* ── Accent — Teal / Petrol (badge, info alert, eco vurgu) ── */
	--mzr-color-accent:      #1E5F5E;
	--mzr-color-accent-soft: #4D8B89;
	--mzr-color-accent-dark: #11383A;

	/* ── Semantic color aliases ── */
	--mzr-primary-color:     var(--mzr-color-gold);
	--mzr-primary-hover:     var(--mzr-color-gold-dark);
	--mzr-secondary-color:   var(--mzr-color-navy);
	--mzr-accent-color:      var(--mzr-color-accent);
	--mzr-accent-soft-color: var(--mzr-color-accent-soft);
	--mzr-accent-dark-color: var(--mzr-color-accent-dark);
	--mzr-bg-color:          var(--mzr-color-cream);
	--mzr-surface-color:     var(--mzr-color-white);
	--mzr-surface-alt-color: var(--mzr-color-sand);
	--mzr-text-color:        var(--mzr-color-text);
	--mzr-text-muted-color:  var(--mzr-color-espresso);
	--mzr-text-on-primary:   var(--mzr-color-white);
	--mzr-text-on-dark:      var(--mzr-color-cream);
	--mzr-border-color:      var(--mzr-color-border);
	--mzr-link-color:        var(--mzr-color-gold);
	--mzr-link-hover-color:  var(--mzr-color-gold-dark);

	/* ── Overlays & shadows ── */
	--mzr-overlay-dark:      rgba(15, 30, 46, 0.65);
	--mzr-overlay-light:     rgba(15, 30, 46, 0.35);
	--mzr-shadow-card:       0 4px 24px rgba(15, 30, 46, 0.08);
	--mzr-shadow-card-hover: 0 8px 40px rgba(15, 30, 46, 0.14);
	--mzr-shadow-btn:        0 2px 12px rgba(184, 149, 42, 0.25);

	/* ── Typography ── */
	--mzr-font-heading:      'Space Grotesk', sans-serif;
	--mzr-font-body:         'Inter', sans-serif;

	--mzr-h1-size:           48px;
	--mzr-h1-weight:         600;
	--mzr-h2-size:           30px;
	--mzr-h2-weight:         600;
	--mzr-h3-size:           20px;
	--mzr-h3-weight:         600;
	--mzr-h4-size:           17px;
	--mzr-h4-weight:         600;

	--mzr-body-size:         15px;
	--mzr-body-weight:       400;
	--mzr-body-line-height:  1.7;

	--mzr-label-size:        10px;
	--mzr-label-weight:      500;
	--mzr-label-spacing:     0.14em;

	/* ── Border radius ── */
	--mzr-radius-btn:        50px;
	--mzr-radius-card:       20px;
	--mzr-radius-card-sm:    12px;
	--mzr-radius-img:        16px;
	--mzr-radius-input:      8px;

	/* ── Spacing scale ── */
	--mzr-space-xs:          8px;
	--mzr-space-sm:          16px;
	--mzr-space-md:          24px;
	--mzr-space-lg:          40px;
	--mzr-space-xl:          64px;
	--mzr-space-2xl:         100px;
	--mzr-space-3xl:         140px;

	/* ── Layout ── */
	--mzr-container-max:     1640px;
	--mzr-container-padding: 24px;

	/* ── Transitions ── */
	--mzr-transition-fast:   0.2s ease;
	--mzr-transition-base:   0.3s ease;
	--mzr-transition-slow:   0.5s ease;

	/* ── Patterns (SVG background tiles) ── */
	--mzr-pattern-dark-1:    url('assets/img/patterns/dark-pattern-1.svg');
	--mzr-pattern-dark-2:    url('assets/img/patterns/dark-pattern-2.svg');
	--mzr-pattern-section-1: url('assets/img/patterns/section-pattern-1.svg');
	--mzr-pattern-section-2: url('assets/img/patterns/section-pattern-2.svg');
	--mzr-pattern-footer:    url('assets/img/patterns/footer-pattern.svg');
}

/* ── Pattern utility classes ──
   Apply the pattern as a tiled background image. Combine with a base
   color (e.g. the navy/cream variables) to compose dark or light sections.

   Example:
       <section class="mzr-bg-pattern-dark-1" style="background-color:var(--mzr-color-navy)">
*/
.mzr-bg-pattern-dark-1    { background-image: var(--mzr-pattern-dark-1);    background-repeat: repeat; }
.mzr-bg-pattern-dark-2    { background-image: var(--mzr-pattern-dark-2);    background-repeat: repeat; }
.mzr-bg-pattern-section-1 { background-image: var(--mzr-pattern-section-1); background-repeat: repeat; }
.mzr-bg-pattern-section-2 { background-image: var(--mzr-pattern-section-2); background-repeat: repeat; }
.mzr-bg-pattern-footer    { background-image: var(--mzr-pattern-footer);    background-repeat: repeat; }



/* ============================================
   BUTTONS — Tilux Split-Pill System
   Source: work/bathhere/assets/css/components.css
   ============================================ */
.bh-btn {
	display:         inline-flex;
	align-items:     center;
	border-radius:   100px;
	padding:         6px 6px 6px 25px;
	font-family:     var(--mzr-font-heading);
	font-size:       16px;
	font-weight:     600;
	text-decoration: none;
	transition:      all 0.4s ease-in-out;
	cursor:          pointer;
	border:          none;
	white-space:     nowrap;
	position:        relative;
	overflow:        hidden;
	z-index:         1;
}

.bh-btn__text {
	padding-right: 16px;
}

/* Block variant: text on left, icon on right */
.bh-btn[style*="width:100%"],
.bh-btn[style*="width: 100%"],
.bh-btn--block,
.bh-btn--full {
	width:           100%;
	justify-content: space-between;
}

.bh-btn__icon {
	width:           30px;
	height:          30px;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	transition:      all 0.4s ease-in-out;
}

.bh-btn__icon svg {
	width:      16px;
	height:     16px;
	transition: transform 0.4s ease-in-out;
}

.bh-btn:hover .bh-btn__icon svg {
	transform: rotate(45deg);
}

/* Hover fill animation (left-to-right wash) */
.bh-btn::before {
	content:    '';
	position:   absolute;
	top:        0;
	right:      0;
	bottom:     0;
	width:      0;
	height:     100%;
	z-index:    -1;
	transition: all 0.4s ease-in-out;
}

.bh-btn:hover::before {
	width: 100%;
	right: auto;
	left:  0;
}

/* Primary — navy bg + gold icon (light sections) */
.bh-btn--primary               { background: var(--mzr-color-navy); }
.bh-btn--primary .bh-btn__text { color:      var(--mzr-color-cream); }
.bh-btn--primary .bh-btn__icon { background: var(--mzr-color-gold); }
.bh-btn--primary .bh-btn__icon svg {
	fill:   var(--mzr-color-white);
	stroke: var(--mzr-color-white);
}
.bh-btn--primary::before { background: var(--mzr-color-gold); }

/* Secondary — gold bg + navy icon (dark sections) */
.bh-btn--secondary               { background: var(--mzr-color-gold); }
.bh-btn--secondary .bh-btn__text { color:      var(--mzr-color-cream); }
.bh-btn--secondary .bh-btn__icon { background: var(--mzr-color-navy); }
.bh-btn--secondary .bh-btn__icon svg {
	fill:   var(--mzr-color-cream);
	stroke: var(--mzr-color-cream);
}
.bh-btn--secondary::before { background: var(--mzr-color-navy); }

/* Light — cream bg + gold icon (light secondary) */
.bh-btn--light {
	background: var(--mzr-color-cream);
	border:     1px solid var(--mzr-color-border);
}
.bh-btn--light .bh-btn__text { color:      var(--mzr-color-navy); }
.bh-btn--light .bh-btn__icon { background: var(--mzr-color-gold); }
.bh-btn--light .bh-btn__icon svg {
	fill:   var(--mzr-color-white);
	stroke: var(--mzr-color-white);
}

/* Ghost — transparent + gold-mid border (dark secondary) */
.bh-btn--ghost {
	background: transparent;
	border:     1px solid var(--mzr-color-gold-mid);
}
.bh-btn--ghost .bh-btn__text { color:      var(--mzr-color-cream); }
.bh-btn--ghost .bh-btn__icon { background: var(--mzr-color-gold); }
.bh-btn--ghost .bh-btn__icon svg {
	fill:   var(--mzr-color-white);
	stroke: var(--mzr-color-white);
}

/* Large variant — applies to all bh-btn variants */
.bh-btn--lg {
	padding:   10px 10px 10px 32px;
	font-size: 18px;
}
.bh-btn--lg .bh-btn__icon {
	width:  48px;
	height: 48px;
}
.bh-btn--lg .bh-btn__icon svg {
	width:  18px;
	height: 18px;
}

/* Disabled state */
.bh-btn:disabled,
.bh-btn[disabled],
.bh-btn--disabled {
	opacity:        0.45;
	cursor:         not-allowed;
	pointer-events: none;
}

/* Inline gold text link (alternative CTA) */
.bh-link {
	font-family:  var(--mzr-font-heading);
	font-size:    14px;
	font-weight:  600;
	color:        var(--mzr-color-gold);
	display:      inline-flex;
	align-items:  center;
	gap:          8px;
	transition:   gap var(--mzr-transition-fast);
}

.bh-link:hover {
	gap: 12px;
}

.bh-link svg {
	width:        14px;
	height:       14px;
	stroke:       var(--mzr-color-gold);
	fill:         none;
	stroke-width: 2;
}


/* ============================================
   FORM FIELDS
   ============================================ */
.bh-form-group {
	margin-bottom: var(--mzr-space-md);
}

.bh-label {
	display:       block;
	font-family:   var(--mzr-font-body);
	font-size:     13px;
	font-weight:   500;
	color:         var(--mzr-color-text);
	margin-bottom: 8px;
}

.bh-label--required::after {
	content:     ' *';
	color:       var(--mzr-color-gold);
	font-weight: 600;
}

/* Text inputs (text, email, password, tel, number, url, search, date) */
.bh-input,
.bh-textarea,
.bh-select {
	width:         100%;
	padding:       14px 18px;
	border:        1px solid var(--mzr-color-border);
	border-radius: var(--mzr-radius-input);
	font-family:   var(--mzr-font-body);
	font-size:     15px;
	color:         var(--mzr-color-text);
	background:    var(--mzr-color-cream);
	transition:    border-color var(--mzr-transition-fast),
				   box-shadow   var(--mzr-transition-fast);
	outline:       none;
	box-sizing:    border-box;
}

.bh-input:focus,
.bh-textarea:focus,
.bh-select:focus {
	border-color: var(--mzr-color-gold);
	box-shadow:   0 0 0 3px rgba(184, 149, 42, 0.15);
}

.bh-input::placeholder,
.bh-textarea::placeholder {
	color:   rgba(42, 31, 14, 0.35);
	opacity: 1;
}

.bh-input:disabled,
.bh-textarea:disabled,
.bh-select:disabled {
	opacity:    0.6;
	cursor:     not-allowed;
	background: var(--mzr-color-sand);
}

/* Textarea */
.bh-textarea {
	min-height: 120px;
	resize:     vertical;
	line-height: 1.6;
}

/* Select — custom chevron */
.bh-select {
	appearance:          none;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	background-image:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B8952A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat:   no-repeat;
	background-position: right 18px center;
	padding-right:       44px;
	cursor:              pointer;
}

/* Size variants */
.bh-input--sm,
.bh-textarea--sm,
.bh-select--sm {
	padding:   10px 14px;
	font-size: 14px;
}

.bh-input--lg,
.bh-textarea--lg,
.bh-select--lg {
	padding:   18px 22px;
	font-size: 16px;
}

/* Pill-shaped input (matches navbar / footer newsletter style) */
.bh-input--pill {
	border-radius: 100px;
	padding-inline: 22px;
}

/* Error / success states */
.bh-input--error,
.bh-textarea--error,
.bh-select--error,
.bh-form-group--error .bh-input,
.bh-form-group--error .bh-textarea,
.bh-form-group--error .bh-select {
	border-color: #c0392b;
}

.bh-input--error:focus,
.bh-textarea--error:focus,
.bh-select--error:focus,
.bh-form-group--error .bh-input:focus,
.bh-form-group--error .bh-textarea:focus,
.bh-form-group--error .bh-select:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

.bh-help {
	display:      block;
	margin-top:   6px;
	font-size:    12px;
	color:        var(--mzr-color-text);
	opacity:      0.7;
	line-height:  1.5;
}

.bh-error-message {
	display:     block;
	margin-top:  6px;
	font-size:   12px;
	font-weight: 500;
	color:       #c0392b;
}

/* Checkbox & radio — custom styled */
.bh-checkbox,
.bh-radio {
	display:        inline-flex;
	align-items:    center;
	gap:            10px;
	font-family:    var(--mzr-font-body);
	font-size:      14px;
	color:          var(--mzr-color-text);
	cursor:         pointer;
	user-select:    none;
}

.bh-checkbox input[type="checkbox"],
.bh-radio    input[type="radio"] {
	appearance:         none;
	-webkit-appearance: none;
	-moz-appearance:    none;
	width:              18px;
	height:             18px;
	margin:             0;
	border:             2px solid var(--mzr-color-border);
	background:         var(--mzr-color-white);
	cursor:             pointer;
	display:            inline-flex;
	align-items:        center;
	justify-content:    center;
	flex-shrink:        0;
	transition:         border-color var(--mzr-transition-fast),
						background    var(--mzr-transition-fast);
}

.bh-checkbox input[type="checkbox"] { border-radius: 4px; }
.bh-radio    input[type="radio"]    { border-radius: 50%; }

.bh-checkbox input[type="checkbox"]:checked,
.bh-radio    input[type="radio"]:checked {
	border-color: var(--mzr-color-gold);
	background:   var(--mzr-color-gold);
}

.bh-checkbox input[type="checkbox"]:checked::after {
	content:      '';
	width:        10px;
	height:       6px;
	border-left:  2px solid var(--mzr-color-white);
	border-bottom: 2px solid var(--mzr-color-white);
	transform:    rotate(-45deg) translate(1px, -1px);
}

.bh-radio input[type="radio"]:checked::after {
	content:       '';
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--mzr-color-white);
}

.bh-checkbox input[type="checkbox"]:focus-visible,
.bh-radio    input[type="radio"]:focus-visible {
	box-shadow: 0 0 0 3px rgba(184, 149, 42, 0.20);
}

.bh-checkbox input[type="checkbox"]:disabled,
.bh-radio    input[type="radio"]:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}

/* Inline group of fields */
.bh-form-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:     var(--mzr-space-sm);
}

@media (max-width: 576px) {
	.bh-form-row {
		grid-template-columns: 1fr;
	}
}

/* ── SweetAlert2 dialogs ──
   The site form standard for every SweetAlert2 popup on theme pages (the
   mzr-quotes cart and editor dialogs, the Product QR download dialog and
   any later popup): the .bh- form spec above at dialog size. Text controls
   are 42px tall like .bh-btn, text is 15px (16px on phones, so iOS Safari
   does not zoom in on focus), focus is the gold ring, and every checkbox
   and radio is an Apple-style switch (44x24, the MZR admin switch size).

   SweetAlert2 11 injects its stylesheet after this one but wraps its
   selectors in :where(), so `body .swal2-container .swal2-popup` wins
   without !important. Never set `display` on these controls or on the
   .swal2-checkbox / .swal2-radio wrappers: SweetAlert2 shows the active
   input slot with an inline display style and keeps the others hidden.

   Pages that do not load this theme (the stand-alone buyer quote view and
   wp-admin) get the same values from mzr-quotes/assets/css/swal-overrides.css;
   keep the two in sync. */

body .swal2-container .swal2-popup :where(.swal2-input, .swal2-select, .swal2-textarea, .swal2-html-container :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], select, textarea)) {
	box-sizing:    border-box;
	height:        42px;
	padding:       0 14px;
	border:        1px solid var(--mzr-color-border);
	border-radius: var(--mzr-radius-input);
	background:    var(--mzr-color-cream);
	box-shadow:    none;
	font-family:   var(--mzr-font-body);
	font-size:     15px;
	font-weight:   400;
	line-height:   1.4;
	color:         var(--mzr-color-text);
	transition:    border-color var(--mzr-transition-fast),
				   box-shadow   var(--mzr-transition-fast);
}

body .swal2-container .swal2-popup :where(.swal2-textarea, .swal2-html-container textarea) {
	height:      auto;
	min-height:  120px;
	padding:     12px 14px;
	line-height: 1.6;
	resize:      vertical;
}

body .swal2-container .swal2-popup :where(.swal2-select, .swal2-html-container select) {
	appearance:          none;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	padding-right:       40px;
	background-image:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B8952A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat:   no-repeat;
	background-position: right 14px center;
	background-size:     14px 14px;
	cursor:              pointer;
}

body .swal2-container .swal2-popup :where(.swal2-input, .swal2-select, .swal2-textarea, .swal2-html-container :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], select, textarea)):focus {
	border-color: var(--mzr-color-gold);
	outline:      none;
	box-shadow:   0 0 0 3px rgba(184, 149, 42, 0.15);
}

body .swal2-container .swal2-popup :where(.swal2-input, .swal2-textarea, .swal2-html-container :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], textarea))::placeholder {
	color:   rgba(42, 31, 14, 0.35);
	opacity: 1;
}

body .swal2-container .swal2-popup :where(.swal2-input, .swal2-select, .swal2-textarea, .swal2-html-container :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], select, textarea)):disabled {
	opacity:          0.6;
	cursor:           not-allowed;
	background-color: var(--mzr-color-sand);
}

/* SweetAlert2 marks an invalid field with !important; only !important beats it. */
body .swal2-container .swal2-popup .swal2-inputerror {
	border-color: #c0392b !important;
	box-shadow:   0 0 0 3px rgba(192, 57, 43, 0.18) !important;
}

body .swal2-container .swal2-popup .swal2-input-label {
	font-family: var(--mzr-font-body);
	font-size:   13px;
	font-weight: 500;
	color:       var(--mzr-color-text);
}

body .swal2-container .swal2-popup .swal2-validation-message {
	border-radius: var(--mzr-radius-input);
	background:    var(--mzr-color-cream);
	font-family:   var(--mzr-font-body);
	font-size:     13px;
	color:         #c0392b;
}

/* Checkbox and radio: Apple-style switch. In a radio group one switch is on. */
body .swal2-container .swal2-popup input:where([type="checkbox"], [type="radio"]) {
	appearance:         none;
	-webkit-appearance: none;
	-moz-appearance:    none;
	position:           relative;
	box-sizing:         border-box;
	flex-shrink:        0;
	width:              44px;
	min-width:          44px;
	height:             24px;
	margin:             0;
	padding:            0;
	border:             0;
	border-radius:      24px;
	background:         rgba(15, 30, 46, 0.2); /* navy tint: the neutral "off" track */
	box-shadow:         none;
	vertical-align:     middle;
	cursor:             pointer;
	transition:         background-color var(--mzr-transition-fast),
						box-shadow       var(--mzr-transition-fast);
}

body .swal2-container .swal2-popup input:where([type="checkbox"], [type="radio"])::before {
	content:       '';
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         18px;
	height:        18px;
	margin:        0;
	border-radius: 50%;
	background:    var(--mzr-color-white);
	box-shadow:    0 1px 3px rgba(15, 30, 46, 0.25);
	transition:    transform var(--mzr-transition-fast);
}

body .swal2-container .swal2-popup input:where([type="checkbox"], [type="radio"]):checked {
	background: var(--mzr-color-gold);
}

body .swal2-container .swal2-popup input:where([type="checkbox"], [type="radio"]):checked::before {
	transform: translateX(20px);
}

body .swal2-container .swal2-popup input:where([type="checkbox"], [type="radio"]):focus {
	outline:    none;
	box-shadow: none;
}

body .swal2-container .swal2-popup input:where([type="checkbox"], [type="radio"]):focus-visible {
	box-shadow: 0 0 0 3px rgba(184, 149, 42, 0.25);
}

body .swal2-container .swal2-popup input:where([type="checkbox"], [type="radio"]):disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}

/* Texts of SweetAlert2's own checkbox and radio slots. */
body .swal2-container .swal2-popup :where(.swal2-checkbox, .swal2-radio label) {
	font-family: var(--mzr-font-body);
	font-size:   15px;
	color:       var(--mzr-color-text);
}

body .swal2-container .swal2-popup .swal2-radio label {
	display:     inline-flex;
	align-items: center;
}

body .swal2-container .swal2-popup :where(.swal2-checkbox, .swal2-radio) .swal2-label {
	margin-left: 10px;
}

/* Close button (x): a 36px circle with a thin navy-tint border, so it reads
   as a round button at rest; filled navy on hover. WoodMart gives every
   <button> a 42px min-height, padding and its button type, which turned it
   into an oval; they are reset here. No `display`: SweetAlert2 shows and
   hides the button with an inline style. */
body .swal2-container .swal2-popup .swal2-close {
	box-sizing:     border-box;
	width:          36px;
	height:         36px;
	min-width:      0;
	min-height:     0;
	margin:         0 0 -36px;
	padding:        0;
	border:         1px solid rgba(15, 30, 46, 0.25);
	border-radius:  50%;
	background:     transparent;
	box-shadow:     none;
	color:          var(--mzr-color-navy);
	font-family:    var(--mzr-font-body);
	font-size:      26px;
	font-weight:    400;
	line-height:    1;
	letter-spacing: 0;
	text-transform: none;
	transition:     background-color var(--mzr-transition-fast),
	                color            var(--mzr-transition-fast);
}

body .swal2-container .swal2-popup .swal2-close:hover {
	border-color: var(--mzr-color-navy);
	background:   var(--mzr-color-navy);
	color:        var(--mzr-color-cream);
}

body .swal2-container .swal2-popup .swal2-close:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(184, 149, 42, 0.35);
}

@media (max-width: 768px) {
	body .swal2-container .swal2-popup :where(.swal2-input, .swal2-select, .swal2-textarea, .swal2-html-container :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], select, textarea)) {
		font-size: 16px;
	}
}

/* ── Responsive overrides ── */
@media (max-width: 768px) {
	:root {
		--mzr-h1-size:           32px;
		--mzr-h2-size:           24px;
		--mzr-h3-size:           18px;
		--mzr-space-2xl:         64px;
		--mzr-space-3xl:         80px;
		--mzr-container-padding: 16px;
	}
}

@media (max-width: 480px) {
	:root {
		--mzr-h1-size:   28px;
		--mzr-h2-size:   22px;
		--mzr-space-2xl: 48px;
		--mzr-space-3xl: 64px;
	}
}


/* ============================================================
   ============================================================
   WOODMART OVERRIDES
   All rules below re-skin parent-theme WoodMart components.
   New WoodMart-specific overrides should be appended here.
   ============================================================
   ============================================================ */


/* ============================================
   WOODMART BUTTON OVERRIDES
   Re-skin the WoodMart .btn taxonomy with the bathhere Tilux Split-Pill
   identity by piggybacking on WoodMart's own --btn-* variable layer.
   No markup changes — Elementor / Gutenberg / WC buttons all inherit
   the brand pill automatically.

   Internal CSS variables (set on .btn / modifiers, consumed by .wd-btn-icon):
     --mzr-btn-wash         — colour the ::before wash fills with on hover
     --mzr-circle-size      — diameter of the .wd-btn-icon circle
     --mzr-circle-icon-size — width/height of the inner SVG glyph
     --mzr-circle-bg        — circle background at rest
     --mzr-circle-bg-hover  — circle background on button hover (inverts so the
                              circle stays visible against the wash)
     --mzr-circle-fg        — glyph colour inside the circle
   ============================================ */

.btn {
	/* --- Pill shape, brand padding, brand font --- */
	--btn-padding:       12px 25px;
	--btn-height:        auto;
	--btn-font-size:     16px;
	--btn-font-family:   var(--mzr-font-heading);
	--btn-font-weight:   600;
	--btn-brd-radius:    100px;
	--btn-brd-width:     0;
	--btn-brd-color:     transparent;

	/* --- Default colours = primary (gold) --- */
	--btn-color:         var(--mzr-color-cream);
	--btn-bgcolor:       var(--mzr-color-gold);
	--btn-color-hover:   var(--mzr-color-cream);
	--btn-bgcolor-hover: var(--mzr-color-gold);  /* same as base — wash does the work */

	/* --- Wash target colour (used by ::before) --- */
	--mzr-btn-wash:      var(--mzr-color-navy);

	/* --- Icon circle (size + rest/hover bg + glyph colour) --- */
	--mzr-circle-size:        40px;
	--mzr-circle-icon-size:   16px;
	--mzr-circle-bg:          var(--mzr-color-navy);
	--mzr-circle-bg-hover:    var(--mzr-color-gold);
	--mzr-circle-fg:          var(--mzr-color-cream);

	/* Required for the wash + correct stacking */
	position:        relative;
	overflow:        hidden;
	z-index:         1;
	gap:             16px;
	line-height:     1.2;
	text-decoration: none;
	transition:      color 0.4s ease-in-out,
					 border-color 0.4s ease-in-out;
}

/* When an icon is present, hug the right edge so the circle sits flush */
.btn:has(.wd-btn-icon) {
	--btn-padding: 6px 6px 6px 25px;
}

/* Left-to-right wash on hover — bathhere signature */
.btn::before {
	content:    '';
	position:   absolute;
	top:        0;
	right:      0;
	bottom:     0;
	width:      0;
	height:     100%;
	background: var(--mzr-btn-wash);
	z-index:    -1;
	transition: all 0.4s ease-in-out;
}

.btn:hover::before {
	width: 100%;
	right: auto;
	left:  0;
}

/* Inner spans float above the wash */
.btn .wd-btn-text,
.btn .wd-btn-icon {
	position: relative;
	z-index:  1;
}


/* --- Color modifiers (variable-driven, ordered after base) --- */
.btn-color-primary {
	--btn-bgcolor:         var(--mzr-color-gold);
	--btn-bgcolor-hover:   var(--mzr-color-gold);
	--btn-color:           var(--mzr-color-cream);
	--btn-color-hover:     var(--mzr-color-cream);
	--mzr-btn-wash:        var(--mzr-color-navy);
	--mzr-circle-bg:       var(--mzr-color-navy);
	--mzr-circle-bg-hover: var(--mzr-color-gold);
}

.btn-color-alt,
.btn-color-black {
	--btn-bgcolor:         var(--mzr-color-navy);
	--btn-bgcolor-hover:   var(--mzr-color-navy);
	--btn-color:           var(--mzr-color-cream);
	--btn-color-hover:     var(--mzr-color-cream);
	--mzr-btn-wash:        var(--mzr-color-gold);
	--mzr-circle-bg:       var(--mzr-color-gold);
	--mzr-circle-bg-hover: var(--mzr-color-navy);
}

.btn-color-white {
	--btn-bgcolor:         var(--mzr-color-cream);
	--btn-bgcolor-hover:   var(--mzr-color-cream);
	--btn-color:           var(--mzr-color-navy);
	--btn-color-hover:     var(--mzr-color-cream);
	--btn-brd-width:       1px;
	--btn-brd-color:       var(--mzr-color-border);
	--mzr-btn-wash:        var(--mzr-color-navy);
	--mzr-circle-bg:       var(--mzr-color-gold);
	--mzr-circle-bg-hover: var(--mzr-color-gold);
}

/* btn-color-custom: editor sets --btn-color & --btn-bgcolor inline; do not fight */


/* --- Shape modifiers all force pill --- */
.btn,
.btn-shape-round,
.btn-shape-semi-round {
	--btn-brd-radius: 100px;
}


/* --- Size modifiers (drive padding, font, gap and the icon-circle vars) --- */
.btn-size-extra-small {
	--btn-padding:          8px 14px;
	--btn-height:           auto;
	--btn-font-size:        12px;
	--mzr-circle-size:      24px;
	--mzr-circle-icon-size: 10px;
	gap: 8px;
}
.btn-size-extra-small:has(.wd-btn-icon) {
	--btn-padding: 3px 3px 3px 14px;
}

.btn-size-small {
	--btn-padding:          10px 18px;
	--btn-height:           auto;
	--btn-font-size:        13px;
	--mzr-circle-size:      30px;
	--mzr-circle-icon-size: 12px;
	gap: 12px;
}
.btn-size-small:has(.wd-btn-icon) {
	--btn-padding: 4px 4px 4px 18px;
}

@media (min-width: 1025px) {
	.btn-size-large {
		--btn-padding:          16px 32px;
		--btn-height:           auto;
		--btn-font-size:        18px;
		--mzr-circle-size:      48px;
		--mzr-circle-icon-size: 18px;
		gap: 20px;
	}
	.btn-size-large:has(.wd-btn-icon) {
		--btn-padding: 10px 10px 10px 32px;
	}

	.btn-size-extra-large {
		--btn-padding:          20px 40px;
		--btn-height:           auto;
		--btn-font-size:        20px;
		--mzr-circle-size:      56px;
		--mzr-circle-icon-size: 22px;
		gap: 24px;
	}
	.btn-size-extra-large:has(.wd-btn-icon) {
		--btn-padding: 14px 14px 14px 40px;
	}
}


/* --- Style: bordered (transparent + colour border, fills on hover) --- */
.btn.btn-style-bordered {
	--btn-bgcolor:       transparent;
	--btn-bgcolor-hover: transparent;
	--btn-brd-width:     1px;
}

.btn.btn-style-bordered.btn-color-primary {
	--btn-brd-color:       var(--mzr-color-gold);
	--btn-color:           var(--mzr-color-gold);
	--btn-color-hover:     var(--mzr-color-cream);
	--mzr-btn-wash:        var(--mzr-color-gold);
	--mzr-circle-bg:       var(--mzr-color-gold);
	--mzr-circle-bg-hover: var(--mzr-color-navy);
}

.btn.btn-style-bordered.btn-color-alt,
.btn.btn-style-bordered.btn-color-black {
	--btn-brd-color:       var(--mzr-color-navy);
	--btn-color:           var(--mzr-color-navy);
	--btn-color-hover:     var(--mzr-color-cream);
	--mzr-btn-wash:        var(--mzr-color-navy);
	--mzr-circle-bg:       var(--mzr-color-navy);
	--mzr-circle-bg-hover: var(--mzr-color-gold);
}

.btn.btn-style-bordered.btn-color-white {
	--btn-brd-color:       var(--mzr-color-gold-mid);
	--btn-color:           var(--mzr-color-cream);
	--btn-color-hover:     var(--mzr-color-cream);
	--mzr-btn-wash:        var(--mzr-color-gold);
	--mzr-circle-bg:       var(--mzr-color-gold);
	--mzr-circle-bg-hover: var(--mzr-color-navy);
}


/* --- Style: link (looks like .bh-link, no wash) --- */
.btn.btn-style-link {
	--btn-padding:       0;
	--btn-bgcolor:       transparent;
	--btn-bgcolor-hover: transparent;
	--btn-brd-width:     0;
	--btn-color:         var(--mzr-color-gold);
	--btn-color-hover:   var(--mzr-color-gold-dark);
	--btn-font-size:     14px;
	overflow:            visible;
	gap:                 8px;
	transition:          gap var(--mzr-transition-fast),
						 color var(--mzr-transition-fast);
}

.btn.btn-style-link::before { display: none; }

.btn.btn-style-link:hover { gap: 12px; }

.btn.btn-style-link .wd-btn-icon {
	width:           auto;
	height:          auto;
	min-width:       0;
	background:      transparent;
	border-radius:   0;
	color:           currentColor;
}

.btn.btn-style-link .wd-btn-icon svg {
	width:  14px;
	height: 14px;
	fill:   currentColor;
}

.btn.btn-style-link:hover .wd-btn-icon {
	background: transparent;
}

.btn.btn-style-link:hover .wd-btn-icon svg {
	transform: none;
}


/* --- Style: 3D — drop the depth, behave like default --- */
.btn.btn-style-3d {
	--btn-box-shadow:       unset;
	--btn-box-shadow-hover: unset;
}
.btn.btn-style-3d:active {
	top: 0;
}


/* --- Icon circle (only rendered when WoodMart emits .wd-btn-icon)
       All sizes and colours come from the --mzr-circle-* variables on
       the parent .btn so that size and colour modifiers compose. --- */
.btn .wd-btn-icon {
	width:           var(--mzr-circle-size);
	height:          var(--mzr-circle-size);
	min-width:       var(--mzr-circle-size);
	border-radius:   50%;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	background:      var(--mzr-circle-bg);
	color:           var(--mzr-circle-fg);
	transition:      background 0.4s ease-in-out,
					 color      0.4s ease-in-out;
}

.btn:hover .wd-btn-icon {
	background: var(--mzr-circle-bg-hover);
}

.btn .wd-btn-icon svg {
	width:      var(--mzr-circle-icon-size);
	height:     var(--mzr-circle-icon-size);
	fill:       currentColor;
	transition: transform 0.4s ease-in-out;
}

.btn:hover .wd-btn-icon svg {
	transform: rotate(45deg);
}


/* --- Full-width: text on the left, icon flush right --- */
.btn.btn-full-width {
	width:           100%;
	justify-content: space-between;
}


/* --- Disabled state --- */
.btn:disabled,
.btn[disabled] {
	opacity:        0.45;
	cursor:         not-allowed;
	pointer-events: none;
}

/* ============================================
   WOODMART PAGE TITLE OVERRIDE
   Force the dark pattern overlay on every page title section.
   ============================================ */
.wd-page-title {
	background-image:  var(--mzr-pattern-dark-1) !important;
	background-repeat: repeat                    !important;
}


/* ============================================
   WOODMART PAGE WRAPPER OVERRIDE
   ============================================ */
.wd-page-wrapper {
	background-color: var(--mzr-color-cream);
}


/* ============================================
   WOODMART HEADER OVERRIDE
   Fixed pill-shaped header (matches BRAND.md navbar spec).
   ============================================ */
.whb-general-header {
	border-radius: 100px !important;
}
.whb-general-header .wd-tools-element>a {
	padding-inline: 5px !important;
}
.wd-content-layout {
	padding-block: 90px;
}


/* ============================================
   WOODMART QUANTITY OVERRIDE
   Restyles the native WC/WoodMart qty input to
   match the MZR Products package-calculator qty
   pill exactly: 100px-radius outer wrap, 1px
   divider as the buttons' inner edge, the number
   input loses its own box.
   ============================================ */
div.quantity {
	display: inline-flex !important;
	align-items: stretch;
	border: 1px solid var(--mzr-color-border, #E0D0A8);
	border-radius: 100px;
	overflow: hidden;
	background: var(--mzr-color-white, #fff);
	height: 42px;
	width: auto !important;
	max-width: 160px;
	vertical-align: middle;
}

div.quantity input.qty,
div.quantity input[type="number"],
div.quantity input[type="text"] {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	width: 56px !important;
	min-width: 56px;
	max-width: 56px;
	flex: 0 0 56px;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	text-align: center;
	font-size: 0.95rem;
	color: var(--mzr-color-navy, #0F1E2E);
	-moz-appearance: textfield;
}

div.quantity input.qty::-webkit-outer-spin-button,
div.quantity input.qty::-webkit-inner-spin-button,
div.quantity input[type="number"]::-webkit-outer-spin-button,
div.quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

div.quantity input[type="button"],
div.quantity .minus,
div.quantity .plus {
	width: 40px !important;
	min-width: 40px;
	max-width: 40px;
	flex: 0 0 40px;
	height: auto !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: var(--mzr-color-navy, #0F1E2E) !important;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

div.quantity .minus {
	border-right: 1px solid var(--mzr-color-border, #E0D0A8) !important;
}

div.quantity .plus {
	border-left: 1px solid var(--mzr-color-border, #E0D0A8) !important;
}

div.quantity input[type="button"]:hover,
div.quantity .minus:hover,
div.quantity .plus:hover {
	background: var(--mzr-color-cream, #FAF5EC) !important;
	color: var(--mzr-color-navy, #0F1E2E) !important;
	border-color: var(--mzr-color-border, #E0D0A8) !important;
}

/* Keep WoodMart skip links out of the layout; .btn above overrides their position */
.wd-skip-links {
    position: fixed;
}


/* ============================================
   WOODMART MY ACCOUNT OVERRIDE
   The account navigation runs above the content as a row of pills and the
   content takes the full width (WoodMart's default layout splits the page
   3/9 through inline --wd-col-* values). An item with a sub-menu
   (woocommerce/myaccount/navigation.php, e.g. "Quotes" → "All quotes" /
   "Create quote") carries the split-pill circle on its right as the toggle
   (js/mzr.js); hovering opens the sub-menu too.
   Every selector starts with .woocommerce-account: WoodMart prints its
   my-account CSS parts after this stylesheet, so equal specificity loses.
   ============================================ */
.woocommerce-account .wd-builder-off .wd-my-account-sidebar,
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-content {
	grid-column: 1 / -1;
}

.woocommerce-account .wd-builder-off .wd-my-account-sidebar {
	padding-inline-end: 0;
	border-inline-end: 0;
}

/* "My account" as the brand's small-caps section label */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-title {
	margin:         0 0 var(--mzr-space-sm);
	padding:        0;
	border:         0;
	font-family:    var(--mzr-font-body);
	font-size:      var(--mzr-label-size);
	font-weight:    var(--mzr-label-weight);
	letter-spacing: var(--mzr-label-spacing);
	line-height:    1.4;
	text-transform: uppercase;
	color:          var(--mzr-color-gold);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul {
	display:        flex;
	flex-wrap:      wrap;
	align-items:    center;
	gap:            var(--mzr-space-xs);
	padding-bottom: var(--mzr-space-md);
	border-bottom:  1px solid var(--mzr-border-color);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul > li > a {
	--wd-link-color:       var(--mzr-color-navy);
	--wd-link-color-hover: var(--mzr-color-navy);
	min-height:    42px;
	padding:       0 20px;
	border:        1px solid var(--mzr-border-color);
	border-radius: 100px;
	background:    var(--mzr-color-white);
	color:         var(--mzr-color-navy);
	font-family:   var(--mzr-font-heading);
	font-size:     14px;
	font-weight:   600;
	white-space:   nowrap;
	transition:    background-color var(--mzr-transition-fast),
	               border-color     var(--mzr-transition-fast),
	               color            var(--mzr-transition-fast);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul > li > a:hover {
	background:   var(--mzr-color-cream);
	border-color: var(--mzr-color-gold);
}

/* The current page — or, for a parent, the current page in its sub-menu */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul > li:is(.is-active, .meshut-has-active-child) > a {
	--wd-link-color:       var(--mzr-color-cream);
	--wd-link-color-hover: var(--mzr-color-cream);
	background:   var(--mzr-color-navy);
	border-color: var(--mzr-color-navy);
	color:        var(--mzr-color-cream);
}

/* Log out stands apart at the end of the row */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-inline-start: auto;
}

/* --- Full screen: a round icon button right after "Log out" (js/mzr.js).
   Its label is its aria-label, shown on hover and keyboard focus as the
   quote list's navy tipsy-style tooltip, ending at the button's right edge
   so it stays on screen at the end of the row. Pressed, the icon turns
   into × and the button reads like the current page's pill. The selectors
   outrank WoodMart's button rule (:is(.btn, .button, button, …)). --- */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .meshut-account-fullscreen-item {
	position: relative;
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .meshut-account-fullscreen {
	position:        relative;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           42px;
	height:          42px;
	min-width:       0;
	min-height:      0;
	margin:          0;
	padding:         0;
	border:          1px solid var(--mzr-border-color);
	border-radius:   50%;
	background:      var(--mzr-color-white);
	color:           var(--mzr-color-navy);
	box-shadow:      none;
	line-height:     1;
	text-transform:  none;
	cursor:          pointer;
	transition:      background-color var(--mzr-transition-fast),
	                 border-color     var(--mzr-transition-fast),
	                 color            var(--mzr-transition-fast);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .meshut-account-fullscreen:hover {
	background:   var(--mzr-color-cream);
	border-color: var(--mzr-color-gold);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .meshut-account-fullscreen[aria-pressed="true"] {
	background:   var(--mzr-color-navy);
	border-color: var(--mzr-color-navy);
	color:        var(--mzr-color-cream);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .meshut-account-fullscreen[aria-pressed="true"]:hover {
	background:   var(--mzr-color-gold);
	border-color: var(--mzr-color-gold);
}

.woocommerce-account .wd-builder-off .meshut-account-fullscreen:focus-visible {
	outline:        2px solid var(--mzr-color-gold);
	outline-offset: 2px;
}

.woocommerce-account .wd-builder-off .meshut-account-fullscreen__icon {
	display:         block;
	flex:            none;
	width:           18px;
	height:          18px;
	fill:            none;
	stroke:          currentColor;
	stroke-width:    2;
	stroke-linecap:  round;
	stroke-linejoin: round;
	pointer-events:  none;
}

.woocommerce-account .wd-builder-off .meshut-account-fullscreen__icon--close,
.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-pressed="true"] .meshut-account-fullscreen__icon--open {
	display: none;
}

.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-pressed="true"] .meshut-account-fullscreen__icon--close {
	display: block;
}

/* The tooltip (the label) and its arrow, pointing at the button's centre */
.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]::before,
.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]::after {
	position:       absolute;
	z-index:        30;
	visibility:     hidden;
	opacity:        0;
	pointer-events: none;
	transition:     opacity 0.15s ease, visibility 0.15s ease;
}

.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]::after {
	content:        attr(aria-label);
	right:          0;
	bottom:         calc(100% + 8px);
	padding:        5px 9px;
	border-radius:  4px;
	background:     var(--mzr-color-navy);
	color:          var(--mzr-color-cream);
	box-shadow:     0 4px 12px rgba(15, 30, 46, 0.18);
	font-family:    var(--mzr-font-body);
	font-size:      11px;
	font-weight:    500;
	line-height:    1.3;
	letter-spacing: 0.01em;
	white-space:    nowrap;
}

.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]::before {
	content:             '';
	right:               15px;
	bottom:              calc(100% + 3px);
	border:              5px solid transparent;
	border-top-color:    var(--mzr-color-navy);
	border-bottom-width: 0;
}

.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]:hover::before,
.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]:hover::after,
.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]:focus-visible::before,
.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]:focus-visible::after {
	visibility: visible;
	opacity:    1;
}

/* Full screen on (a class on <body>): the header, the page title and the
   footer are hidden, not removed, and #main-content takes the whole width */
.woocommerce-account.meshut-account-fullscreen-on .whb-header,
.woocommerce-account.meshut-account-fullscreen-on .wd-page-title,
.woocommerce-account.meshut-account-fullscreen-on .wd-prefooter,
.woocommerce-account.meshut-account-fullscreen-on .wd-footer {
	display: none;
}

.woocommerce-account.meshut-account-fullscreen-on #main-content {
	width:     100%;
	max-width: 100%;
}

/* A count inside the pill's right end, e.g. the discount requests waiting on
   "Approvals" (meshut_account_menu_badges()): a gold circle like the
   split-pill's, set as far from the edge as from the top and bottom */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .meshut-account-badge {
	display:             inline-flex;
	align-items:         center;
	justify-content:     center;
	box-sizing:          border-box;
	min-width:           24px;
	height:              24px;
	margin-inline-start: 10px;
	margin-inline-end:   -12px;
	padding:             0 7px;
	border-radius:       100px;
	background:          var(--mzr-color-gold);
	color:               var(--mzr-color-white);
	font-family:         var(--mzr-font-body);
	font-size:           12px;
	font-weight:         700;
	line-height:         1;
	font-variant-numeric: tabular-nums;
}

/* In a sub-menu, and before a sub-menu toggle, the badge keeps its own margin */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .sub-menu .meshut-account-badge,
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation li.meshut-has-submenu > a > .meshut-account-badge {
	margin-inline-end: 0;
}

/* --- Item with a sub-menu: the toggle circle sits inside the pill's right end --- */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation li.meshut-has-submenu {
	position: relative;
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul > li.meshut-has-submenu > a {
	padding-inline-end: 44px;
}

/* Keeps the hover alive on the way from the pill down to the sub-menu */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation li.meshut-has-submenu::after {
	content:  '';
	position: absolute;
	top:      100%;
	right:    0;
	left:     0;
	height:   10px;
}

.woocommerce-account .wd-builder-off .meshut-submenu-toggle {
	position:        absolute;
	top:             50%;
	inset-inline-end: 6px;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           30px;
	height:          30px;
	min-height:      0;
	margin:          -15px 0 0;
	padding:         0;
	border:          0;
	border-radius:   50%;
	background:      var(--mzr-color-gold);
	color:           var(--mzr-color-cream);
	box-shadow:      none;
	cursor:          pointer;
	transition:      background-color var(--mzr-transition-fast);
}

.woocommerce-account .wd-builder-off .meshut-submenu-toggle::before {
	content:       '';
	width:         7px;
	height:        7px;
	margin-top:    -3px;
	border-right:  2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform:     rotate(45deg);
	transition:    transform var(--mzr-transition-fast), margin var(--mzr-transition-fast);
}

.woocommerce-account .wd-builder-off .meshut-submenu-toggle:hover {
	background: var(--mzr-color-gold-dark);
}

.woocommerce-account .wd-builder-off .meshut-has-submenu:is(:hover, .is-open) > .meshut-submenu-toggle::before {
	margin-top: 3px;
	transform:  rotate(225deg);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .sub-menu {
	--list-mb:    0;
	--li-mb:      0;
	--li-pl:      0;
	position:     absolute;
	top:          100%;
	inset-inline-start: 0;
	z-index:      30;
	display:      none;
	min-width:    240px;
	margin:       8px 0 0;
	padding:      8px;
	list-style:   none;
	background:   var(--mzr-color-white);
	border:       1px solid var(--mzr-border-color);
	border-radius: var(--mzr-radius-card-sm);
	box-shadow:   var(--mzr-shadow-card-hover);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation li.meshut-has-submenu:is(:hover, .is-open) > .sub-menu {
	display: block;
}

/* Opens to the left of its item where the screen ends (js/mzr.js) */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation li.meshut-submenu-end > .sub-menu {
	inset-inline-start: auto;
	inset-inline-end:   0;
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .sub-menu > li > a {
	--wd-link-color:       var(--mzr-color-navy);
	--wd-link-color-hover: var(--mzr-color-navy);
	display:       flex;
	align-items:   center;
	gap:           10px;
	min-height:    40px;
	padding:       0 14px;
	border-radius: var(--mzr-radius-input);
	color:         var(--mzr-color-navy);
	font-family:   var(--mzr-font-heading);
	font-size:     14px;
	font-weight:   600;
	white-space:   nowrap;
	text-decoration: none;
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .sub-menu > li > a:hover,
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .sub-menu > li.is-active > a {
	background: var(--mzr-color-cream);
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .sub-menu > li.is-active > a {
	--wd-link-color:       var(--mzr-color-gold-dark);
	--wd-link-color-hover: var(--mzr-color-gold-dark);
	color: var(--mzr-color-gold-dark);
}

/* "Create quote" gets the gold circle with a plus, like the toggle */
.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .sub-menu .woocommerce-MyAccount-navigation-link--new-quote > a::before {
	content:         '+';
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex:            0 0 20px;
	width:           20px;
	height:          20px;
	border-radius:   50%;
	background:      var(--mzr-color-gold);
	color:           var(--mzr-color-cream);
	font-size:       15px;
	line-height:     1;
}

.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation a:focus-visible,
.woocommerce-account .wd-builder-off .meshut-submenu-toggle:focus-visible {
	outline:        2px solid var(--mzr-color-gold);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul > li > a {
		min-height: 38px;
		padding:    0 16px;
		font-size:  13px;
	}

	.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul > li.meshut-has-submenu > a {
		padding-inline-end: 40px;
	}

	.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul > li > a > .meshut-account-badge {
		margin-inline-end: -10px;
	}

	.woocommerce-account .wd-builder-off .meshut-submenu-toggle {
		inset-inline-end: 5px;
		width:            26px;
		height:           26px;
		margin-top:       -13px;
	}

	/* The full screen button keeps the pills' height */
	.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .meshut-account-fullscreen {
		width:  38px;
		height: 38px;
	}

	.woocommerce-account .wd-builder-off .meshut-account-fullscreen[aria-label]::before {
		right: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation > ul > li > a,
	.woocommerce-account .wd-builder-off .meshut-submenu-toggle,
	.woocommerce-account .wd-builder-off .meshut-submenu-toggle::before,
	.woocommerce-account .wd-builder-off .woocommerce-MyAccount-navigation .meshut-account-fullscreen,
	.woocommerce-account .wd-builder-off .meshut-account-fullscreen::before,
	.woocommerce-account .wd-builder-off .meshut-account-fullscreen::after {
		transition: none;
	}
}