/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ============================================================
   Gravity Forms — Wet Effect brand styling
   The forms render with the legacy "gravity-theme"
   (gform-theme--no-framework), which ships a BLUE multi-step
   progress bar and leaves the Next/Previous/Submit/Upload
   buttons unstyled (grey, 0 padding). Brand rule: black / white
   / neutrals / brand-orange ONLY — no blue. These rules remove
   the GF blue and give the form a proper branded look.
   --primary is the Core Framework token (#F6821F).
   ============================================================ */

/* --- Multi-step progress bar --- */
.gform_wrapper .gf_progressbar {
	background-color: #ececec !important;
	border-radius: 999px !important;
	overflow: hidden !important;
}
.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar_percentage.percentbar_blue {
	background: var(--primary, #F6821F) !important;
}
.gform_wrapper .gf_progressbar_percentage span {
	color: #fff !important;
}
.gform_wrapper .gf_progressbar_title {
	color: var(--secondary, #222) !important;
	font-weight: 600 !important;
}

/* --- Buttons: shared shape --- */
.gform_wrapper .gform-theme-button,
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.75em 1.75em !important;
	border-radius: var(--radius-s, 8px) !important;
	border: 2px solid transparent !important;
	font-weight: 600 !important;
	font-size: var(--text-m, 1rem) !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	cursor: pointer !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}

/* --- Primary: Next & Submit (brand orange) --- */
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button.gform_button {
	background-color: var(--primary, #F6821F) !important;
	border-color: var(--primary, #F6821F) !important;
	color: #fff !important;
}
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper .gform_next_button:focus,
.gform_wrapper .gform_button:focus {
	background-color: #cf6d10 !important;   /* primary shade */
	border-color: #cf6d10 !important;
	color: #fff !important;
}

/* --- Secondary: Previous (outline) --- */
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform-theme-button--secondary {
	background-color: #fff !important;
	border-color: var(--secondary, #222) !important;
	color: var(--secondary, #222) !important;
}
.gform_wrapper .gform_previous_button:hover,
.gform_wrapper .gform_previous_button:focus {
	background-color: var(--secondary, #222) !important;
	border-color: var(--secondary, #222) !important;
	color: #fff !important;
}

/* --- File-upload "Select files" (neutral control) --- */
.gform_wrapper .gform_button_select_files,
.gform_wrapper .gform-theme-button--control {
	background-color: #f2f2f2 !important;
	border-color: #cfcfcf !important;
	color: var(--secondary, #222) !important;
	padding: 0.55em 1.25em !important;
	font-weight: 500 !important;
}
.gform_wrapper .gform_button_select_files:hover,
.gform_wrapper .gform_button_select_files:focus {
	background-color: #e6e6e6 !important;
}

/* --- Field focus: brand orange, not browser blue --- */
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus {
	outline: none !important;
	border-color: var(--primary, #F6821F) !important;
	box-shadow: 0 0 0 2px rgba(246, 130, 31, 0.25) !important;
}

/* --- Required asterisk: brand orange (avoid stray red) --- */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required span {
	color: var(--primary, #F6821F) !important;
}

/* --- Footer: keep buttons on one row, spaced --- */
.gform_wrapper .gform_page_footer,
.gform_wrapper .gform_footer {
	display: flex !important;
	gap: 0.75em !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

/* --- Mobile: stack multi-column complex fields (address, etc.) ---
   The legacy no-framework theme leaves the Address sub-grid
   (street / city / state / zip / country) at a fixed ~551px min
   width, which overflows the viewport on phones. Force single
   column below the mobile-landscape breakpoint. */
@media (max-width: 767px) {
	.gform_wrapper .gform_fields { max-width: 100% !important; }
	.gform_wrapper .ginput_complex.ginput_container {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.gform_wrapper .ginput_complex.ginput_container > span,
	.gform_wrapper .ginput_complex .gform-grid-col {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Two-up rows (First/Last, City/State) also stack cleanly */
	.gform_wrapper .gfield.gfield--width-half,
	.gform_wrapper .ginput_container_name > span,
	.gform_wrapper .ginput_container span[class*="name_"] {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* --- Collapsed grid must actually shrink to fit narrow screens ---
   When the content-16 two-column grid collapses to one column
   (<=991px), the single track is `1fr` = minmax(min-content, 1fr),
   so the embedded Gravity Form's ~540px min-content blows the
   track (and the whole page) past the viewport. minmax(0,1fr) +
   min-width:0 lets the column shrink and the form reflow. */
@media (max-width: 991px) {
	.content-16__container {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.content-16__container > * {
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.gform_wrapper,
	.gform_wrapper form,
	.gform_wrapper .gform_body,
	.gform_wrapper .gform_fields {
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* ============================================================
   Footer (.footer-14) — dark theme
   The footer section background is var(--tertiary-d-4) (#171717),
   but the Bricks template ships the light-mode tokens: headings and
   contact info on var(--dark), body/menu text on var(--text-body)
   (#404040), dividers on var(--dark-10), form borders var(--dark-20)
   and a var(--dark) submit button — i.e. black-on-black.
   These rules invert the footer to light text and give every link
   the brand-orange hover. Scoped to .footer-14 only.
   Brand rule: black / white / neutrals / brand-orange ONLY.
   ============================================================ */

/* --- Base + headings --- */
.footer-14 {
	color: var(--light-80, #ffffffcc);
}
.footer-14 .footer-14__menu-heading,
.footer-14 .footer-14__contact-heading {
	color: var(--light, #fff) !important;
}
.footer-14 .footer-14__contact-info {
	color: var(--light, #fff) !important;
}
.footer-14 .footer-14__description,
.footer-14 .footer-14__description p {
	color: var(--light-70, #ffffffb3) !important;
}
.footer-14 .footer-14__credit-name {
	color: var(--light-60, #ffffff99) !important;
}

/* --- Menu links (Shop / Wholesale / Resources columns) --- */
.footer-14 .footer-14__menu.brxe-nav-menu .bricks-nav-menu > li > a,
.footer-14 .footer-14__menu.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > * {
	color: var(--light-80, #ffffffcc) !important;
	transition: color .15s ease;
}
.footer-14 .footer-14__menu.brxe-nav-menu .bricks-nav-menu > li:hover > a,
.footer-14 .footer-14__menu.brxe-nav-menu .bricks-nav-menu > li:hover > .brx-submenu-toggle > *,
.footer-14 .footer-14__menu.brxe-nav-menu .bricks-nav-menu > li > a:focus-visible {
	color: var(--primary, #F6821F) !important;
}

/* --- Legal links (bottom bar) --- */
.footer-14 .footer-14__legal-links.brxe-nav-menu .bricks-nav-menu > li > a,
.footer-14 .footer-14__legal-links.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > * {
	color: var(--light-70, #ffffffb3) !important;
	transition: color .15s ease;
}
.footer-14 .footer-14__legal-links.brxe-nav-menu .bricks-nav-menu > li:hover > a,
.footer-14 .footer-14__legal-links.brxe-nav-menu .bricks-nav-menu > li:hover > .brx-submenu-toggle > *,
.footer-14 .footer-14__legal-links.brxe-nav-menu .bricks-nav-menu > li > a:focus-visible {
	color: var(--primary, #F6821F) !important;
}

/* --- Social links (icon + label share currentColor) --- */
.footer-14 .footer-14__social-link.brxe-block {
	color: var(--light-80, #ffffffcc) !important;
	transition: color .15s ease;
}
.footer-14 .footer-14__social-link.brxe-block:hover,
.footer-14 .footer-14__social-link.brxe-block:focus-visible {
	color: var(--primary, #F6821F) !important;
	border-color: var(--primary, #F6821F) !important;
}

/* --- Any other link inside the footer --- */
.footer-14 a:not(.bricks-button) {
	color: var(--light-80, #ffffffcc);
	transition: color .15s ease;
}
.footer-14 a:not(.bricks-button):hover,
.footer-14 a:not(.bricks-button):focus-visible {
	color: var(--primary, #F6821F);
}

/* --- Dividers --- */
.footer-14 .footer-14__divider.brxe-divider.horizontal .line {
	border-top-color: var(--light-20, #ffffff33) !important;
}
.footer-14 .footer-14__divider.brxe-divider.vertical .line {
	border-right-color: var(--light-20, #ffffff33) !important;
}
.footer-14 .footer-14__divider.brxe-divider .icon {
	color: var(--light-20, #ffffff33) !important;
}

/* --- Newsletter form --- */
.footer-14 .footer-14__form.brxe-form .form-group input,
.footer-14 .footer-14__form.brxe-form textarea,
.footer-14 .footer-14__form.brxe-form select {
	background-color: var(--light-5, #ffffff0d) !important;
	border-color: var(--light-30, #ffffff4d) !important;
	color: var(--light, #fff) !important;
}
.footer-14 .footer-14__form.brxe-form .form-group input::placeholder,
.footer-14 .footer-14__form.brxe-form textarea::placeholder {
	color: var(--light-50, #ffffff80) !important;
	opacity: 1;
}
.footer-14 .footer-14__form.brxe-form .form-group input:focus,
.footer-14 .footer-14__form.brxe-form textarea:focus,
.footer-14 .footer-14__form.brxe-form select:focus {
	border-color: var(--primary, #F6821F) !important;
	outline: none;
}
/* Chrome autofill paints an opaque near-white box — keep it dark */
.footer-14 .footer-14__form.brxe-form input:-webkit-autofill,
.footer-14 .footer-14__form.brxe-form input:-webkit-autofill:hover,
.footer-14 .footer-14__form.brxe-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--light, #fff) !important;
	-webkit-box-shadow: 0 0 0 1000px #232323 inset !important;
	caret-color: var(--light, #fff);
}
/* Submit: the template's var(--dark) button is invisible on #171717.
   Brand orange + white, matching the Gravity Forms primary above. */
.footer-14 .footer-14__form.brxe-form .bricks-button[type="submit"] {
	background-color: var(--primary, #F6821F) !important;
	border-color: var(--primary, #F6821F) !important;
	color: #fff !important;
	transition: background-color .15s ease, border-color .15s ease;
}
.footer-14 .footer-14__form.brxe-form .bricks-button[type="submit"]:hover,
.footer-14 .footer-14__form.brxe-form .bricks-button[type="submit"]:focus-visible {
	background-color: #cf6d10 !important;
	border-color: #cf6d10 !important;
	color: #fff !important;
}
.footer-14 .footer-14__form.brxe-form .message,
.footer-14 .footer-14__form.brxe-form .bricks-form-message {
	color: var(--light, #fff) !important;
}

/* ============================================================
   Footer (.footer-14) — wave-brush shape divider
   Ported from the live weteffect.com footer, which uses
   Elementor's "wave-brush" shape_divider_top (viewBox
   0 0 283.5 27.8, natural ratio, no fixed height).
   Elementor paints the shape INSIDE the section filled with the
   PAGE colour, so the divider only looks right when the section
   above the footer is that exact colour. Here it is inverted
   instead: an ::before sits directly ABOVE the footer, painted
   in the FOOTER colour and masked to the complement of the same
   nine paths. Identical silhouette, but it works over any
   background (white, --bg-body, a photo) and re-colours itself
   automatically if the footer background changes.
   ============================================================ */

.footer-14 {
	--we-footer-bg: var(--tertiary-d-4, #171717);
	--we-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20283.5%2027.8'%20preserveAspectRatio='none'%3E%3Cmask%20id='w'%3E%3Crect%20width='283.5'%20height='27.8'%20fill='%23fff'/%3E%3Cpath%20fill='%23000'%20d='M283.5,9.7c0,0-7.3,4.3-14,4.6c-6.8,0.3-12.6,0-20.9-1.5c-11.3-2-33.1-10.1-44.7-5.7%20s-12.1,4.6-18,7.4c-6.6,3.2-20,9.6-36.6,9.3C131.6,23.5,99.5,7.2,86.3,8c-1.4,0.1-6.6,0.8-10.5,2c-3.8,1.2-9.4,3.8-17,4.7%20c-3.2,0.4-8.3,1.1-14.2,0.9c-1.5-0.1-6.3-0.4-12-1.6c-5.7-1.2-11-3.1-15.8-3.7C6.5,9.2,0,10.8,0,10.8V0h283.5V9.7z%20M260.8,11.3%20c-0.7-1-2-0.4-4.3-0.4c-2.3,0-6.1-1.2-5.8-1.1c0.3,0.1,3.1,1.5,6,1.9C259.7,12.2,261.4,12.3,260.8,11.3z%20M242.4,8.6%20c0,0-2.4-0.2-5.6-0.9c-3.2-0.8-10.3-2.8-15.1-3.5c-8.2-1.1-15.8,0-15.1,0.1c0.8,0.1,9.6-0.6,17.6,1.1c3.3,0.7,9.3,2.2,12.4,2.7%20C239.9,8.7,242.4,8.6,242.4,8.6z%20M185.2,8.5c1.7-0.7-13.3,4.7-18.5,6.1c-2.1,0.6-6.2,1.6-10,2c-3.9,0.4-8.9,0.4-8.8,0.5%20c0,0.2,5.8,0.8,11.2,0c5.4-0.8,5.2-1.1,7.6-1.6C170.5,14.7,183.5,9.2,185.2,8.5z%20M199.1,6.9c0.2,0-0.8-0.4-4.8,1.1%20c-4,1.5-6.7,3.5-6.9,3.7c-0.2,0.1,3.5-1.8,6.6-3C197,7.5,199,6.9,199.1,6.9z%20M283,6c-0.1,0.1-1.9,1.1-4.8,2.5s-6.9,2.8-6.7,2.7%20c0.2,0,3.5-0.6,7.4-2.5C282.8,6.8,283.1,5.9,283,6z%20M31.3,11.6c0.1-0.2-1.9-0.2-4.5-1.2s-5.4-1.6-7.8-2C15,7.6,7.3,8.5,7.7,8.6%20C8,8.7,15.9,8.3,20.2,9.3c2.2,0.5,2.4,0.5,5.7,1.6S31.2,11.9,31.3,11.6z%20M73,9.2c0.4-0.1,3.5-1.6,8.4-2.6c4.9-1.1,8.9-0.5,8.9-0.8%20c0-0.3-1-0.9-6.2-0.3S72.6,9.3,73,9.2z%20M71.6,6.7C71.8,6.8,75,5.4,77.3,5c2.3-0.3,1.9-0.5,1.9-0.6c0-0.1-1.1-0.2-2.7,0.2%20C74.8,5.1,71.4,6.6,71.6,6.7z%20M93.6,4.4c0.1,0.2,3.5,0.8,5.6,1.8c2.1,1,1.8,0.6,1.9,0.5c0.1-0.1-0.8-0.8-2.4-1.3%20C97.1,4.8,93.5,4.2,93.6,4.4z%20M65.4,11.1c-0.1,0.3,0.3,0.5,1.9-0.2s2.6-1.3,2.2-1.2s-0.9,0.4-2.5,0.8C65.3,10.9,65.5,10.8,65.4,11.1%20z%20M34.5,12.4c-0.2,0,2.1,0.8,3.3,0.9c1.2,0.1,2,0.1,2-0.2c0-0.3-0.1-0.5-1.6-0.4C36.6,12.8,34.7,12.4,34.5,12.4z%20M152.2,21.1%20c-0.1,0.1-2.4-0.3-7.5-0.3c-5,0-13.6-2.4-17.2-3.5c-3.6-1.1,10,3.9,16.5,4.1C150.5,21.6,152.3,21,152.2,21.1z'/%3E%3Cpath%20fill='%23000'%20d='M269.6,18c-0.1-0.1-4.6,0.3-7.2,0c-7.3-0.7-17-3.2-16.6-2.9c0.4,0.3,13.7,3.1,17,3.3%20C267.7,18.8,269.7,18,269.6,18z'/%3E%3Cpath%20fill='%23000'%20d='M227.4,9.8c-0.2-0.1-4.5-1-9.5-1.2c-5-0.2-12.7,0.6-12.3,0.5c0.3-0.1,5.9-1.8,13.3-1.2%20S227.6,9.9,227.4,9.8z'/%3E%3Cpath%20fill='%23000'%20d='M204.5,13.4c-0.1-0.1,2-1,3.2-1.1c1.2-0.1,2,0,2,0.3c0,0.3-0.1,0.5-1.6,0.4%20C206.4,12.9,204.6,13.5,204.5,13.4z'/%3E%3Cpath%20fill='%23000'%20d='M201,10.6c0-0.1-4.4,1.2-6.3,2.2c-1.9,0.9-6.2,3.1-6.1,3.1c0.1,0.1,4.2-1.6,6.3-2.6%20S201,10.7,201,10.6z'/%3E%3Cpath%20fill='%23000'%20d='M154.5,26.7c-0.1-0.1-4.6,0.3-7.2,0c-7.3-0.7-17-3.2-16.6-2.9c0.4,0.3,13.7,3.1,17,3.3%20C152.6,27.5,154.6,26.8,154.5,26.7z'/%3E%3Cpath%20fill='%23000'%20d='M41.9,19.3c0,0,1.2-0.3,2.9-0.1c1.7,0.2,5.8,0.9,8.2,0.7c4.2-0.4,7.4-2.7,7-2.6%20c-0.4,0-4.3,2.2-8.6,1.9c-1.8-0.1-5.1-0.5-6.7-0.4S41.9,19.3,41.9,19.3z'/%3E%3Cpath%20fill='%23000'%20d='M75.5,12.6c0.2,0.1,2-0.8,4.3-1.1c2.3-0.2,2.1-0.3,2.1-0.5c0-0.1-1.8-0.4-3.4,0%20C76.9,11.5,75.3,12.5,75.5,12.6z'/%3E%3Cpath%20fill='%23000'%20d='M15.6,13.2c0-0.1,4.3,0,6.7,0.5c2.4,0.5,5,1.9,5,2c0,0.1-2.7-0.8-5.1-1.4%20C19.9,13.7,15.7,13.3,15.6,13.2z'/%3E%3C/mask%3E%3Crect%20width='283.5'%20height='27.8'%20fill='%23fff'%20mask='url(%23w)'/%3E%3C/svg%3E");
	position: relative;
	/* The wave is the separator now: the old 1em solid rule and the
	   var(--space-xl) top margin both go. The margin in particular left a
	   56px band of bare html background (#F2F2F2) between the last section
	   and the footer, which showed through the lower third of the wave as a
	   second, lighter grey. Flush against the section above = one colour
	   behind the whole shape, on every page. */
	border-top: 0 !important;
	margin-top: 0 !important;
}
.footer-14::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	/* Elementor leaves the shape at its natural 283.5:27.8 ratio, which is
	   ~141px at 1440 and crests into the bottom row of the product grid
	   (that section's bottom padding is 111.9px). Capped instead, so the
	   crest always clears the content above. preserveAspectRatio="none"
	   means the brush squashes rather than crops. */
	height: clamp(40px, 7.5vw, 110px);
	background-color: var(--we-footer-bg);
	-webkit-mask-image: var(--we-wave-mask);
	mask-image: var(--we-wave-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: bottom center;
	mask-position: bottom center;
	pointer-events: none;
}

/* ============================================================
   WooCommerce notices — kill the Bricks info/success colours
   Bricks ships its own status palette in frontend.min.css
   (--bricks-text-info #00b0f4 / --bricks-bg-info #e5f3ff, and
   --bricks-text-success #11b76b / --bricks-bg-success #e6f6ed).
   Woo notices AND the buttons inside them inherit it, so
   /my-account, cart and checkout render bright cyan and green.
   Brand rule: black / white / neutrals / brand-orange ONLY —
   no blue, no green. Remapped to neutrals at the token level so
   the fix lands everywhere, not just on one template.
   `warning` and `danger` are left as Bricks ships them.
   ============================================================ */
:root {
	--bricks-text-info: #222222;
	--bricks-bg-info: #f2f2f2;
	--bricks-text-success: #333335;
	--bricks-bg-success: #f2f2f2;
}
.woocommerce-info,
.woocommerce-message {
	/* read as a card on both the grey page ground and a white one */
	background-color: var(--bg-surface, #fff);
	border: 1px solid var(--dark-10, #0000001a);
	border-left: 3px solid var(--primary, #F6821F);
	border-radius: var(--radius-s, 6px);
	padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
}

/* ============================================================
   My Account (/my-account, all endpoints)
   The layout is the Brixies "dashboard-page-1" block: a Bricks
   `woocommerce-account-page` element that renders the pill nav
   + the endpoint panel. Woo's own form controls inside that
   panel arrive unstyled, so they are branded here.
   ============================================================ */

/* --- Buttons: same shape/colour language as the Gravity Forms primary --- */
.woocommerce-account .woocommerce .button,
.woocommerce-account a.button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary, #F6821F);
	border: 2px solid var(--primary, #F6821F);
	color: #fff;
	padding: 0.7em 1.6em;
	border-radius: 6px;
	font-weight: 600;
	font-size: var(--text-m, 1rem);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-Button:focus-visible {
	background-color: #cf6d10;
	border-color: #cf6d10;
	color: #fff;
}

/* --- Inputs: match the site's field treatment --- */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"] {
	background-color: var(--light, #fff);
	border: 1px solid var(--dark-20, #00000033);
	border-radius: var(--radius-xs, 4px);
	padding: var(--space-xs, .75rem);
	font-size: var(--text-m, 1rem);
	line-height: 1.5;
	width: 100%;
}
.woocommerce-account #customer_login input:focus,
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	border-color: var(--primary, #F6821F);
	outline: none;
}
.woocommerce-account .woocommerce-MyAccount-content label {
	font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content .required {
	color: var(--primary, #F6821F);
	text-decoration: none;
}

/* --- "Password change" fieldset: drop the default browser chrome --- */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--dark-10, #0000001a);
	border-radius: var(--radius-s, 6px);
	padding: var(--space-s, 1rem);
	margin-block: var(--space-s, 1rem);
}
.woocommerce-account .woocommerce-MyAccount-content legend {
	padding-inline: var(--space-2xs, .5rem);
	font-weight: 600;
}

/* --- Order / address tables --- */
.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
	padding: var(--space-xs, .75rem);
	border-bottom: 1px solid var(--dark-10, #0000001a);
	text-align: left;
}

/* --- Addresses endpoint: Woo emits bare <h2> + <address>, which inherit
       the page's display-size h2 and render as huge italic blocks.
       Turn the two columns into proper cards. --- */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-m, 1.5rem);
	margin-top: var(--space-m, 1.5rem);
}
@media (max-width: 767px) {
	.woocommerce-account .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); }
}
.woocommerce-account .woocommerce-Address {
	width: auto;
	float: none;
	background-color: var(--bg-surface, #fff);
	border: 1px solid var(--dark-10, #0000001a);
	border-radius: var(--radius-s, 6px);
	padding: var(--space-m, 1.5rem);
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-xs, .75rem);
	margin-bottom: var(--space-xs, .75rem);
}
.woocommerce-account .woocommerce-Address-title h2 {
	font-size: var(--text-l, 1.25rem);
	line-height: 1.2;
	margin: 0;
}
.woocommerce-account .woocommerce-Address-title a.edit {
	font-size: var(--text-s, .875rem);
	font-weight: 600;
	color: var(--primary, #F6821F);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.woocommerce-account .woocommerce-Address-title a.edit:hover {
	text-decoration: underline;
}
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: var(--text-m, 1rem);
	line-height: 1.6;
	margin: 0;
}

/* --- Logged-out login / register: Woo's float-based `u-columns` with
       bare <h2>s. Same card treatment as the address columns. --- */
.woocommerce-account #customer_login.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-m, 1.5rem);
	align-items: start;
}
@media (max-width: 767px) {
	.woocommerce-account #customer_login.col2-set { grid-template-columns: minmax(0, 1fr); }
}
.woocommerce-account #customer_login > .col-1,
.woocommerce-account #customer_login > .col-2 {
	width: auto;
	float: none;
	background-color: var(--bg-surface, #fff);
	border: 1px solid var(--dark-10, #0000001a);
	border-radius: var(--radius-s, 6px);
	padding: var(--space-m, 1.5rem);
}
.woocommerce-account #customer_login h2 {
	font-size: var(--text-l, 1.25rem);
	line-height: 1.2;
	margin: 0 0 var(--space-s, 1rem);
}
.woocommerce-account #customer_login .form-row { margin-bottom: var(--space-xs, .75rem); }
.woocommerce-account #customer_login label { font-weight: 600; }
.woocommerce-account #customer_login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 400;
	margin-block: var(--space-xs, .75rem);
}
.woocommerce-account #customer_login .woocommerce-LostPassword {
	margin: var(--space-xs, .75rem) 0 0;
}
.woocommerce-account #customer_login .woocommerce-LostPassword a {
	color: var(--primary, #F6821F);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-account #customer_login .woocommerce-LostPassword a:hover { text-decoration: underline; }

/* Logged out, the Bricks account element drops #customer_login straight into
   the flex container, so it sizes to content (772px) instead of stretching.
   Same trap as any Bricks flex parent: the item needs an explicit width. */
.woocommerce-account #customer_login.col2-set { width: 100%; }

/* Woo gives form.login / form.register their own border + 30px padding,
   which nests a second box inside the column card. Drop the inner chrome. */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

/* --- Prose tables (.vfoeyi = the legal/info page content class) ---
   The legal/info pages (disclaimer, size-chart, etc.) render body copy in a
   Bricks text element with the `.vfoeyi` class. Bare <table>s there had no
   styling; give them standard borders/spacing using design tokens + neutrals
   (brand rule: black / white / neutrals / orange only). Scoped to .vfoeyi so
   nothing else is affected. */
.content-72__content table {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--space-m);
	font-size: var(--text-sm);
}
.content-72__content table caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	font-size: var(--text-m);
	color: var(--secondary, #222);
	margin-bottom: var(--space-xs);
}
.content-72__content th,
.content-72__content td {
	border: 1px solid #e0e0e0;
	padding: var(--space-xs) var(--space-s);
	text-align: left;
	vertical-align: middle;
}
.content-72__content thead th {
	background: #f4f4f4;
	font-weight: 600;
	white-space: nowrap;
}
/* keep wide charts usable on narrow columns without breaking table layout */
.content-72__content table + table { margin-top: var(--space-l); }

/* On mobile the prose text element keeps its ~660px desktop measure and
   overflows the viewport (its flex parent uses align-items:flex-start, so it
   sizes to content, not the container). Cap it to the container width below the
   measure so wide tables scroll inside their overflow-x wrapper instead of
   pushing the whole page wide. Desktop measure is untouched. */
@media (max-width: 700px) {
	.content-72__content { max-width: 100% !important; }
}

/* --- Footer wave clearance ---
   The footer's wave-brush shape divider overlaps upward into the page content,
   cutting off the last lines. #brx-content has no bottom padding, so give the
   page content a 4xl bottom pad to reserve space for the wave. */
#brx-content {
	padding-bottom: var(--space-4xl);
}

/* ============================================================
   intro-4 hero scrim
   The Brixies block ships a flat var(--dark-40) overlay. Over a
   bright photo (white rash guards, open sky) that leaves the
   white H1 and lead barely legible. Replaced with a left-weighted
   gradient — dark where the copy sits, clearing toward the right
   so the photograph still reads. Black only, per the brand rule.
   ============================================================ */
.intro-4__overlay {
	background: linear-gradient(
		100deg,
		rgba(0, 0, 0, .78) 0%,
		rgba(0, 0, 0, .62) 38%,
		rgba(0, 0, 0, .34) 68%,
		rgba(0, 0, 0, .22) 100%
	) !important;
}
@media (max-width: 767px) {
	.intro-4__overlay {
		background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 100%) !important;
	}
}

/* --- Header nav "Sale" link: brand orange + tag icon ---
   Scoped to the header nav (.header-11__menu) by href so the footer's
   Sale link is untouched. Icon uses the FA6 Solid family Bricks loads. */
.header-11__menu a[href$="/product-category/sale/"] {
	color: var(--primary, #F6821F) !important;
}
.header-11__menu a[href$="/product-category/sale/"]::before {
	content: "\f02b"; /* fa-tag */
	font-family: "Font Awesome 6 Solid";
	font-weight: 900;
	margin-right: 0.45em;
	display: inline-block;
}

/* ============================================================
   TYPOGRAPHY LOCK — Roboto everywhere
   The brand font is Roboto (matches live weteffect.com).
   It is set in Bricks > Theme Styles (body + headings + button)
   and self-hosted by Core Framework (@font-face from
   /wp-content/uploads/core-framework/fonts/), so no Google
   Fonts request is made (bricks_global_settings.disableGoogleFonts).

   These rules are the SAFETY NET for the three places the theme
   style cannot reach:
     1. <html> — Bricks only sets font-size there, so it kept the
        UA default (Times). Nothing text-bearing lives on <html>
        today, but anything that escapes <body>'s cascade got serif.
     2. Elements whose family is hardcoded by Bricks core or a
        plugin stylesheet (blockquote -> georgia, <code>/<pre> ->
        monospace, wc-partial-shipment/front.css -> system stack).
     3. Form controls, which plugins like to re-declare.

   Icon fonts are deliberately NOT touched: Font Awesome,
   WooCommerce, dashicons etc. are applied via their own classes
   and ::before glyphs, so no `*` selector is used here.
   Verify with the headless audit in Bricks/ before changing this.
   ============================================================ */

:root {
	--we-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Helvetica, Arial, sans-serif;
}

html,
body {
	font-family: var(--we-font);
}

/* Bricks core hardcodes these three — pull them back to the brand font */
blockquote,
blockquote cite,
code,
kbd,
samp,
pre,
tt,
var {
	font-family: var(--we-font);
}

/* Form controls: plugins re-declare a system stack on these
   (e.g. wc-partial-shipment/assets/css/front.css), so force the
   inherit that Bricks intends. */
button,
input,
optgroup,
option,
select,
textarea,
label,
legend,
.button,
[type="button"],
[type="reset"],
[type="submit"] {
	font-family: inherit !important;
}

/* Placeholder text is its own pseudo-element in some UAs */
::placeholder {
	font-family: inherit;
}

/* Third-party wrappers that get appended to <body> (select2 dropdowns,
   Modern Cart, AWS live search, Bricks popups/off-canvas) — anchor them
   to the brand font. Element selectors only: no wildcard descendant reset, so
   icon fonts applied on an element keep working. */
.gform_wrapper,
.woocommerce,
.woocommerce-page,
.select2-container,
.select2-results__option,
.select2-selection__rendered,
.aws-container,
.aws-search-result,
.moderncart,
.mini-cart,
.brx-offcanvas,
.brx-popup,
.wc-block-components-notice-banner,
.woocommerce-store-notice {
	font-family: var(--we-font);
}

/* ============================================================
   All buttons use the --text-m type scale, site-wide.
   Covers Bricks button elements, Woo buttons/add-to-cart, and
   submit controls. (GF buttons already set to --text-m above.)
   ============================================================ */
.brxe-button,
.bricks-button,
.button,
a.button,
button.button,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button,
.add_to_cart_button,
input[type="submit"],
button[type="submit"] {
	font-size: var(--text-m) !important;
}

/* ============================================================
   Image corner radius — site-wide floor of var(--radius-s)
   Most Brixies blocks carry the Core Framework `.radius-s`
   utility (= var(--radius-s), 8px at desktop since html is at
   62.5%), but several images ship square: the home category
   tiles, the markets content-45 photo, and the whole Woo
   product gallery. Everything is brought up to the same floor.

   Written inside :where() so the selector has ZERO specificity:
   any block that already sets a LARGER radius (feature-89__img
   and content-41/content-21 use var(--radius-m) = 12px) keeps
   its own value untouched. Logos are excluded.
   ============================================================ */
:where(
	.brxe-image:not(.brxe-logo),
	.brxe-image:not(.brxe-logo) img,
	.woocommerce-product-gallery__image img,
	.woocommerce-product-gallery img.wp-post-image,
	.flex-control-thumbs img,
	.woocommerce ul.products li.product img,
	.card-product-1__img-wrapper img,
	.woocommerce-MyAccount-content img,
	img.attachment-woocommerce_thumbnail,
	img.zoomImg
):not(.bricks-site-logo):not(.custom-logo) {
	border-radius: var(--radius-s);
}
/* Logos stay square. The footer wordmark is an `img.brxe-image` in its
   own right (no <figure> wrapper), so it has to be named directly. */
.brxe-logo img,
.bricks-site-logo,
img.custom-logo,
#brxe-mqgucn,
.footer-14 img {
	border-radius: 0;
}

/* ============================================================
   Page background = the footer shape-divider light gray.
   The base page (html) rendered rgba(0,0,0,.05) ≈ #f2f2f2, which is
   the light-gray band the footer wave sits on. Set body to that exact
   solid gray so every template/page has a consistent base background
   that matches the divider (no white/gray seam above the footer).
   ============================================================ */
html,
body {
	background-color: #f2f2f2 !important;
}

/* The info-page header (intro-1 already defaults to #f2f2f2, but a stale
   .we-page-header rule forces it white) and the single-product section were
   painting white over the gray page. Use the page background so content flows
   into the footer's light-gray divider band with no white seam. */
.we-page-header.brxe-section,
.single-product-3.brxe-section,
.content-16.brxe-section,
.cart-1.brxe-section {
	background-color: #f2f2f2 !important;
}

/* --- Fields: radius-s on every input, matching the buttons ---
   The legacy "gravity-theme" ships every control with square
   corners. Radios keep their native circle and checkboxes their
   native box — border-radius on an un-restyled checkbox/radio
   does nothing in Chrome anyway. */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield input[type="password"],
.gform_wrapper .gfield input[type="date"],
.gform_wrapper .gfield input[type="time"],
.gform_wrapper .gfield input[type="search"],
.gform_wrapper .gfield input[type="file"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea,
.gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .chosen-container .chosen-single,
.gform_wrapper .chosen-container .chosen-drop,
.gform_wrapper .gform_fileupload_multifile,
.gform_wrapper .gform_drop_area,
.gform_wrapper .ginput_preview_list .ginput_preview {
	border-radius: var(--radius-s, 8px) !important;
}
/* GF's multi-step progress bar already reads as a pill — leave it. */

/* ============================================================
   Wholesale bulk order matrix (plugin: wholesale-ordering)
   Rendered on `woocommerce_before_variations_form` for products
   flagged `is_wholesale_product`, and shown on the wholesale
   product template only to `default_wholesaler` (element
   `wsord1`, which replaces the read-only inventory table).

   The plugin emits a bare table with no scroll container, and it
   is wider (≈814px) than the product template's info column
   (780px), so the last size column was being clipped. Given the
   same treatment the inventory table (.wt-inv) already uses:
   scroll wrapper + sticky colour column, so the two matrices
   read as siblings.
   ============================================================ */
.wholesale-ordering-table-wrapper {
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--dark-10, #0000001a);
	border-radius: var(--radius-s, 8px);
	background: var(--bg-surface, #fff);
}
.wholesale_multiple_data {
	width: max-content;
	min-width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--text-s, 1.4rem);
}
.wholesale_multiple_data th,
.wholesale_multiple_data td {
	padding: .6em .5em;
	border: 0;
	border-bottom: 1px solid var(--dark-10, #0000001a);
	text-align: center;
	white-space: nowrap;
}
.wholesale_multiple_data tbody tr:last-child th,
.wholesale_multiple_data tbody tr:last-child td { border-bottom: 0; }
.wholesale_multiple_data thead th {
	background: #f6f6f6;
	font-size: var(--text-xs, 1.2rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tertiary, #58595B);
}
/* keep the colour name visible while the sizes scroll under it */
.wholesale_multiple_data tr > th:first-child,
.wholesale_multiple_data tr > td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	text-align: left;
	min-width: 132px;
	background: var(--bg-surface, #fff);
	box-shadow: 1px 0 0 var(--dark-10, #0000001a);
}
.wholesale_multiple_data thead tr > th:first-child,
.wholesale_multiple_data thead tr > td:first-child { background: #f6f6f6; }
/* qty inputs: narrower so more sizes fit, and on the site's radius */
.wholesale_multiple_data input.order_quantity {
	width: 58px;
	min-width: 58px;
	padding: .35em .4em;
	text-align: center;
	border: 1px solid var(--dark-20, #00000033);
	border-radius: var(--radius-s, 8px);
	font-variant-numeric: tabular-nums;
}
.wholesale_multiple_data input.order_quantity:focus {
	border-color: var(--primary, #F6821F);
	outline: none;
}
/* the plugin prints remaining stock under each input */
.wholesale_multiple_data .qty_parent { font-size: var(--text-xs, 1.2rem); color: var(--tertiary, #58595B); }

/* Add-to-cart: the plugin's own button, on brand.
   It carries .disabled until a quantity is entered. */
a.globalcartbtn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .75em 1.75em;
	border-radius: var(--radius-s, 8px);
	border: 2px solid var(--primary, #F6821F);
	background-color: var(--primary, #F6821F);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
a.globalcartbtn.button:hover:not(.disabled) {
	background-color: #cf6d10;
	border-color: #cf6d10;
}
a.globalcartbtn.button.disabled {
	background-color: var(--dark-10, #0000001a);
	border-color: transparent;
	color: var(--dark-40, #00000066);
	cursor: not-allowed;
	pointer-events: none;
}
@media (max-width: 767px) {
	.wholesale_multiple_data { font-size: var(--text-xs, 1.2rem); }
	.wholesale_multiple_data tr > th:first-child,
	.wholesale_multiple_data tr > td:first-child { min-width: 112px; }
	.wholesale_multiple_data input.order_quantity { width: 50px; min-width: 50px; }
}

/* ============================================================
   Motion — Ken Burns hero + scroll reveals
   Every rule below is inside a `prefers-reduced-motion: no-preference`
   guard, so a visitor who asks for reduced motion gets the static
   site with no animation and no layout shift.
   The reveal's *hidden* state is applied by JS (it adds .we-reveal),
   never in the base stylesheet — so if the script fails to run, the
   content is simply visible rather than stuck at opacity 0.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

	/* --- Ken Burns on the home hero (Bricks slider-nested / Splide) ---
	   Keyed off .is-active so the drift restarts on each slide. */
	.hero-79__slider .splide__slide { overflow: hidden; }
	/* Batch-4 #3: the 1.06 zoom upscaled a 1440px source into a 1511px box,
	   which is the "zoomed in / resolution" complaint. Held at 1 so the hero
	   renders ~1:1 like the live site. Restore 1.06 to bring the drift back. */
	.hero-79__slider .splide__slide .hero-79__bg-img img {
		transform: scale(1);
		transition: none;
	}
	.hero-79__slider .splide__slide.is-active .hero-79__bg-img img {
		animation: none;
	}
	@keyframes we-kenburns {
		from { transform: scale(1.06) translate3d(0, 0, 0); }
		to   { transform: scale(1.16) translate3d(-1.2%, -1.4%, 0); }
	}

	/* --- Scroll reveal: sections on ordinary pages --- */
	.we-reveal {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
		will-change: opacity, transform;
	}
	.we-reveal.we-in {
		opacity: 1;
		transform: none;
		transition: opacity .55s cubic-bezier(.22,.61,.36,1),
		            transform .55s cubic-bezier(.22,.61,.36,1);
	}

	/* --- Scroll reveal: product cards, gently staggered --- */
	.we-reveal-card {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}
	.we-reveal-card.we-in {
		opacity: 1;
		transform: none;
		transition: opacity .45s ease-out, transform .45s ease-out;
		transition-delay: var(--we-stagger, 0ms);
	}
}

/* ============================================================
   Batch-1 punch list (2026-10-12) - product cards, site-wide
   ============================================================ */

/* #4 Card titles had to wrap: the longest catalogue name
   ("Women's Short Sleeve Rash Guard") measured 261.7px at 17px against a
   259px column, so it alone broke to a second line and the card grid went
   ragged. A 1px step down clears it with headroom at every breakpoint. */
.card-product-1__title,
.card-product-1__title a{ font-size:16px !important; }

/* #11 Colour-swatch scroll arrows on the cards were 14x20 at 17px - too small
   to read as controls. The rule lives in an inline <style> printed by the card
   code element (home + archive both), so it is overridden here in one place. */
.wt-cardsw-wrap .wt-cardsw-nav{
  font-size:26px !important;
  line-height:1 !important;
  width:24px !important;
  min-width:24px !important;
  height:28px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.wt-cardsw-wrap .wt-cardsw-nav:not([disabled]){ cursor:pointer !important; }
.wt-cardsw-wrap .wt-cardsw-nav[disabled]{ opacity:.3; }
/* ============================================================
   Batch-4 (2026-10-12) — hero treatment, matched to weteffect.com
   The live site runs NO text shadow and a flat rgba(0,0,0,.27) scrim.
   Staging had the opposite: no scrim, and a heavy 20px blur shadow
   behind every hero heading. Swapped to the live arrangement.
   ============================================================ */

/* #1 drop the dark text outline */
.hero-79__container-info h1,
.hero-79__container-info h2,
.hero-79__container-info h3,
.hero-79__container-info p,
.hero-79__container-info span,
.hero-79__slide h2, .hero-79__slide p{
  text-shadow:none !important;
}

/* #1 readability comes from a light scrim instead, same value as the live site */
.hero-79__slider .hero-79__overlay{
  background-color:rgba(0,0,0,.27) !important;
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}

/* #3 the live hero stands 700px and shows more of the frame.
   AUDIT FIX: desktop only - unscoped this made the hero 700px at 375px too,
   a 1.87:1 portrait block filling 88% of a phone screen. */
@media (min-width: 992px){
  .hero-79__slider, .hero-79__slider .splide__track,
  .hero-79__slider .splide__slide, .hero-79__container{
    min-height:700px;
  }
}
/* --- Batch-4 customize header (#36b / #38) ---
   Same arrangement as the home hero: no text outline, light scrim for
   readability. The collage is 2000x1000 in a 1425x630 box, so 82px is
   cropped; anchoring to the bottom keeps the navy/white rash-guard panel
   whole and takes the crop off the top instead. */
.intro-4 h1, .intro-4 h2, .intro-4 p, .intro-4 span{ text-shadow:none !important; }
.intro-4{ position:relative; }
.intro-4::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(0,0,0,.27); pointer-events:none;
}
.intro-4 > *:not(.intro-4__bg-img){ position:relative; z-index:1; }
/* AUDIT FIX: this bottom-anchored crop is ONLY correct for the Customize
   collage. .intro-4 is shared by 9 pages (About, Wholesale, 6 markets) and on
   those it cropped up to 702px off the top, decapitating the models. */
body.page-id-37436 .intro-4__bg-img img{ object-position:50% 0% !important; } /* 2026-10-22: top-anchored so heads in the top row are not cut; the bottom crop lands under the navy/white panel */
/* AUDIT: #4 was only fixed on the shop/category cards (.card-product-1__title).
   The HOME featured-products grid is a different component (.brxe-fptitle in
   .brxe-fpcard) and was still wrapping "Men's Short Sleeve Rash Guard" onto a
   second line at 18px in a 246px column. */
.brxe-fpcard .brxe-fptitle,
.brxe-fpcard .brxe-fptitle a{ font-size:16px !important; }
/* AUDIT: #36 asked to BRIGHTEN the Customize header, but the shared .intro-4
   scrim darkened it ~25%. Customize only: lift the collage and cut the scrim
   back, so it reads brighter than it started while the white H1 stays legible.
   The other 8 intro-4 pages keep the full 0.27 scrim. */
body.page-id-37436 .intro-4__bg-img img{ filter:brightness(1.16) saturate(1.04); }
body.page-id-37436 .intro-4::after{ background:rgba(0,0,0,.12) !important; }
/* ============================================================
   BUTTON HOVER - kill Core Framework's semi-transparent hover
   CF ships `:root .bricks-button[class*="primary"]:not(.outline):hover
   { background-color: var(--primary-90) }` - i.e. the brand colour at 90%
   alpha - and the same for secondary / dark / light. On any non-white
   background that reads as the button washing out. Client called this out
   on the wholesale hero buttons; it affected every solid button on the site.
   Replaced with SOLID values, all inside the black/white/neutral/orange
   palette (see memory: brand-color-palette). One value each to retune.
   ============================================================ */
:root .bricks-button[class*="primary"]:not(.outline):hover,
:root .bricks-button[class*="primary"]:not(.outline):focus-visible{
  background-color:#D8721B !important;   /* solid darker brand orange */
}
:root .bricks-button[class*="secondary"]:not(.outline):hover,
:root .bricks-button[class*="secondary"]:not(.outline):focus-visible{
  background-color:#3A3A3A !important;
}
:root .bricks-button[class*="dark"]:not(.outline):hover,
:root .bricks-button[class*="dark"]:not(.outline):focus-visible{
  background-color:#222222 !important;
}
:root .bricks-button[class*="light"]:not(.outline):where(:not(.bricks-lightbox)):hover,
:root .bricks-button[class*="light"]:not(.outline):where(:not(.bricks-lightbox)):focus-visible{
  background-color:#EDEDED !important;
}
/* C76 wholesale grid colour labels - client asked for the product-colour text
   to be darker. The grid rendered them at the default #404040 / 400 weight at
   12.6px, i.e. no darker than body copy. The PDP swatch labels were already
   taken to #222; this matches them. */
.wholesale-ordering-table-wrapper th,
.wholesale-ordering-table-wrapper td,
.wholesale_multiple_data th,
.wholesale_multiple_data td{ color:#222222; }
.wholesale-ordering-table-wrapper tbody th,
.wholesale-ordering-table-wrapper td:first-child,
.wholesale_multiple_data tbody th,
.wholesale_multiple_data td:first-child{ color:#222222; font-weight:600; }
/* C82 cart bulk notice - palette only (neutral + brand orange) */
.wt-cart-bulk{
  border:1px solid #e3e3e3; border-left:3px solid #F6821F; border-radius:var(--radius-s);
  padding:var(--space-xs) var(--space-s); margin-bottom:var(--space-s); background:#fafafa;
}
.wt-cart-bulk__h{ margin:0 0 var(--space-3xs); font-weight:700; color:#222222; }
.wt-cart-bulk ul{ margin:0; padding-left:1.1em; }
.wt-cart-bulk li{ color:#222222; font-size:var(--text-s); margin:0 0 .2em; }
.wt-cart-bulk__next{ color:#F6821F; font-weight:600; }


/* ============================================================
   2026-10-15 client pass - sheet rows 51, 79, 90/106, 114
   ============================================================ */

/* Rows 51 + 79: archive intro copy.
   The Bricks element printed {archive_description} inside a <p>. That tag returns
   its own <p>, and nested <p> is invalid - the browser closed the wrapper early and
   hoisted the real text out as an unstyled sibling at full container width, centred.
   The element tag is now a <div> (tpl 38462, el `dywsbi`); these rules style it. */
.product-1__description.brxe-text-basic{
  text-align:left !important;
  width:auto !important;
  max-width:60% !important;
  margin-left:0 !important;
  margin-right:auto !important;
}
.product-1__description.brxe-text-basic > p,
.product-1__description.brxe-text-basic > p *{ margin:0; text-align:left !important; }
.product-1__description.brxe-text-basic > p + p{ margin-top:.6em; }
@media (max-width:767px){
  .product-1__description.brxe-text-basic{ max-width:100% !important; }
}

/* Rows 90/106: kill the plugin's white tile behind each colour swatch.
   variation-swatches-woo ships
     .cfvsw-swatches-option{ border:1px solid #fff; background:#fff; padding:1px }
   Perfmatters strips that sheet for logged-OUT visitors, so the tile is visible only
   when logged in - which is why an anonymous check kept reading as "already fixed".
   Clear the BORDER as well as the background; selection is marked by an outline. */
.single-product-3__add-cart [swatches-attr="attribute_pa_color"] .cfvsw-swatches-option,
.single-product-3__add-cart [swatches-attr="attribute_pa_color"] .cfvsw-swatches-option:hover{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  box-shadow:none !important;
}

/* Row 114: the label printed TWO colons - our own `label::after` content ":" plus the
   plugin's `.cfvsw-selected-label::before` content " : " -> "COLOR:  : AQUA".
   Drop the plugin's colon and keep the gap the client asked for as a margin. */
.single-product-3__add-cart .variations .label label .cfvsw-selected-label::before{
  content:none !important;
}
.single-product-3__add-cart .variations .label label .cfvsw-selected-label{
  margin-left:.45em !important;
}

/* ==========================================================================
   2026-10-22 client revision sheet (second sheet)
   ========================================================================== */

/* Customize hero: the title block was left-aligned inside a 1200px container,
   so it sat 60px left of centre. Centre it on this page only (intro-4 is shared). */
body.page-id-37436 .intro-4 .brxe-container{ align-items:center !important; }
body.page-id-37436 .intro-4 .brxe-container > .brxe-block{ margin-inline:auto; text-align:center; }

/* Home: less white space between the 3 category tiles and Featured Products */
#brxe-kvzjxo{ padding-bottom:var(--space-s) !important; }
#brxe-fpsec{ padding-top:var(--space-s) !important; }

/* Wholesale order grid: darker size labels in the header and footer rows */
.wt-ordsec thead .wh-text-center span, .wt-ordsec tfoot .wh-text-center span,
table thead th.wh-text-center span, table tfoot th.wh-text-center span{ color:#222 !important; font-weight:600 !important; font-size:13.5px !important; }

/* Back-in-stock ETA box (wholesale grid cells, retail stock line, inventory popup) */
.wt-eta{ display:inline-block; margin-top:3px; padding:2px 6px; border:1px solid var(--primary,#F6821F); border-radius:4px; color:#222; background:#fff; font-size:11.5px; font-weight:600; line-height:1.3; white-space:nowrap; }
.qty_parent .stock.out-of-stock{ line-height:1.3 !important; color:#58595B; font-size:12px; }
.qty_parent .stock.out-of-stock .wt-eta{ display:block; width:max-content; margin:3px auto 0; }

/* Header account menu (logged in) - hover on desktop, tap on touch */
.wt-acct{ position:relative; display:inline-flex; align-items:center; }
.wt-acct-menu{ position:absolute; top:calc(100% + 10px); right:-14px; z-index:1000; min-width:170px; display:flex; flex-direction:column; padding:6px 0; background:#fff; border:1px solid #e3e3e3; border-radius:var(--radius-s,8px); box-shadow:0 10px 28px rgba(0,0,0,.14); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s; }
.wt-acct-menu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.wt-acct:hover .wt-acct-menu, .wt-acct:focus-within .wt-acct-menu, .wt-acct.is-open .wt-acct-menu{ opacity:1; visibility:visible; transform:none; }
.wt-acct-menu a{ padding:9px 18px; color:#222; font-size:15px; font-weight:500; text-decoration:none; white-space:nowrap; }
.wt-acct-menu a:hover, .wt-acct-menu a:focus-visible{ background:#f2f2f2; color:var(--primary,#F6821F); outline:none; }
.wt-acct-menu a:last-child{ border-top:1px solid #eee; margin-top:4px; padding-top:11px; }
@media (hover:none){ .wt-acct:hover .wt-acct-menu{ opacity:0; visibility:hidden; } .wt-acct.is-open .wt-acct-menu{ opacity:1; visibility:visible; } }

/* Wholesale application anchor clears the sticky header */
#application{ scroll-margin-top:140px; }

/* 2026-10-23 client: hero photos anchored TOP CENTRE on every page so heads are never
   cropped on wide/tall monitors (home slider hero-79, intro-4 page heroes incl. all
   /markets/ pages, plus the two portrait people shots further down). Overrides the
   per-element positions (25%/40%/50%...) set in Bricks. */
.hero-79__bg-img.brxe-image img,.hero-79__bg-img img,
.intro-4__bg-img.brxe-image img,.intro-4__bg-img img,
#brxe-vrzuwg img,#brxe-gknzvu img{object-position:50% 0% !important}

/* Resorts market hero: this near-square photo has the people in its lower half, so top
   centre drops them out of frame on wide screens; 25% keeps every head in view 1280-3440. */
body.page-id-38287 .intro-4__bg-img.brxe-image img{object-position:50% 25% !important}

/* 2026-10-23 wholesale order grid on phones/tablets: the grid was table-layout:fixed at
   every width, so 7 size columns were crushed into ~30px and overlapped. Below 992px the
   grid now scrolls sideways at real column widths, photos sit in a 2x2 block, and the
   photo + colour columns stay pinned on the left while the sizes scroll. */
@media (max-width:991px){
 body:has(#brxe-wsordsec) .wholesale-ordering-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
 body:has(#brxe-wsordsec) .wholesale-ordering-table-wrapper table.wholesale_multiple_data{table-layout:auto!important;width:max-content!important;min-width:100%}
 body:has(#brxe-wsordsec) table.wholesale_multiple_data tr>:nth-child(1){position:sticky;left:0;z-index:2;background-color:#fff;width:96px!important;min-width:96px!important;max-width:96px!important;padding:6px 8px!important}
 body:has(#brxe-wsordsec) table.wholesale_multiple_data tr>:nth-child(2){position:sticky;left:96px;z-index:2;background-color:#fff;width:84px!important;min-width:84px!important;max-width:84px!important;box-shadow:6px 0 6px -6px rgba(0,0,0,.3)}
 body:has(#brxe-wsordsec) table.wholesale_multiple_data thead tr>:nth-child(-n+2),body:has(#brxe-wsordsec) table.wholesale_multiple_data tfoot tr>:nth-child(-n+2){background-color:#f5f5f5}
 body:has(#brxe-wsordsec) table.wholesale_multiple_data tr>:nth-child(n+3){min-width:70px}
 body:has(#brxe-wsordsec) .wt-rowimgs__grp{display:grid!important;grid-template-columns:repeat(2,36px);gap:4px;justify-content:start}
 body:has(#brxe-wsordsec) .wt-rowimg{width:36px!important;height:48px!important;flex:none!important}
 body:has(#brxe-wsordsec) table.wholesale_multiple_data input.order_quantity{width:58px!important;min-width:58px!important;margin-inline:auto;display:block}
}

@media (max-width:991px){
 body:has(#brxe-wsordsec) table.wholesale_multiple_data th.wt-imgs-head{white-space:normal;line-height:1.25;overflow:visible}
 body:has(#brxe-wsordsec) .wholesale-ordering-table-wrapper .vartable_gc_wrap{position:sticky;left:0;width:calc(100vw - 38px);box-sizing:border-box;padding-inline:4px}
}

@media (max-width:991px){body:has(#brxe-wsordsec) .vartable_gc_wrap .wt-ordsum{padding-left:8px}}
@media (max-width:767px){body:has(#brxe-wsordsec) .wholesale-ordering-table-wrapper .vartable_gc_wrap{flex-wrap:wrap;justify-content:flex-start;row-gap:10px}body:has(#brxe-wsordsec) .vartable_gc_wrap .wt-ordsum{flex:1 1 100%;justify-content:space-between}body:has(#brxe-wsordsec) .vartable_gc_wrap .globalcartbtn{flex:1 1 100%;max-width:none}}

/* 2026-10-26 full-site audit fixes */
/* Single-photo products (all Overstock Sale items): the thumbnail strip is hidden, which left
   the main photo stuck in the 76px thumbnail column. Collapse to one column instead. */
.wt-pg:has(> .wt-pg__thumbs[hidden]){grid-template-columns:minmax(0,1fr)!important}
/* Phone menu sits off-canvas to the right; its drop shadow bled a grey strip down the right edge
   of every page while closed. Shadow + visibility only while open (also keeps closed links out of tab order). */
body:not(.we-menu-open) .we-mobile-menu{box-shadow:none;visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
body.we-menu-open .we-mobile-menu{visibility:visible;transition:transform .25s ease}
/* Cart: side gutter on phones (coupon row and items ran edge to edge) */
@media (max-width:767px){#brxe-dbmxnb.cart-1{padding-inline:16px}}
/* Empty cart state (rendered by code element wtcartempty on page 5) */
.wt-cart-empty{max-width:640px;margin:8px auto 48px;padding:40px 32px;background:#fff;border-radius:12px;text-align:center}
.wt-cart-empty__h{font-size:28px;font-weight:700;color:#111;margin:0 0 10px}
.wt-cart-empty p{margin:0 0 24px;color:#555}
.wt-cart-empty__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.wt-cart-empty__btns a{display:inline-block;padding:14px 26px;border-radius:6px;font-weight:600;text-decoration:none;background:#F6821F;color:#fff;border:2px solid #F6821F}
.wt-cart-empty__btns a.is-ghost{background:transparent;color:#111;border-color:#111}
@media (max-width:767px){.wt-cart-empty{padding:28px 20px}.wt-cart-empty__btns a{flex:1 1 100%}}
/* Size chart page: tables scroll sideways on phones instead of breaking numbers across lines */
@media (max-width:767px){
 body.page-id-37440 #brx-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
 body.page-id-37440 #brx-content table th,body.page-id-37440 #brx-content table td{white-space:nowrap}
}
/* About Us hero was only 260px tall on phones, crushing title, text and button together */
@media (max-width:767px){body.page-id-37432 #brxe-ksmaes{min-height:460px}}
/* Customize: intro text + checklist before the form on phones (form was first) */
body.page-id-37436 #brxe-gwqoal{order:0}
/* 404: side gutter, readable title and a proper search box */
.bricks-404-wrapper{padding:96px 16px;text-align:center}
.bricks-404-wrapper .title{font-size:clamp(30px,6vw,56px);margin-bottom:24px}
.bricks-404-wrapper .bricks-search-form{max-width:440px;margin-inline:auto}
.bricks-404-wrapper .bricks-search-form input[type=search],.bricks-404-wrapper #search-input{width:100%;height:52px;padding:0 16px;font-size:16px;border:1px solid #ccc;border-radius:6px;background:#fff;text-align:left}

/* "You may also like" Sale chip: the archive card styles it by Bricks element ID, which the related cards don't carry */
.wt-related .card-product-1__img-wrapper{position:relative}
.wt-related .card-product-1__sale{position:absolute;top:13px;left:13px;background:#F6821F;padding:4px 8px;border-radius:4px;z-index:1}
.wt-related .card-product-1__sale-text{margin:0;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;line-height:1.5}

/* Leftover mobile menu from mu-plugin we-fonts.php: it moves its hamburger into .we-header__actions, a header that
   no longer exists, so on phones/tablets the button sat orphaned under the footer (stray grey bar with a hamburger).
   The live header uses the Bricks nav menu. Hide the leftover wherever the old header is absent. */
body:not(:has(.we-header__actions)) .we-mobile-toggle,body:not(:has(.we-header__actions)) .we-mobile-menu,body:not(:has(.we-header__actions)) .we-mobile-scrim{display:none!important}

/* Phone menu: items started at the very top, so the close X (it stays in the header at ~80px) sat on the Board Shorts row */
#brxe-enmyoe .bricks-mobile-menu-wrapper{padding-top:116px}
#brxe-enmyoe.show-mobile-menu .bricks-mobile-menu-toggle .bar-top,#brxe-enmyoe.show-mobile-menu .bricks-mobile-menu-toggle .bar-center,#brxe-enmyoe.show-mobile-menu .bricks-mobile-menu-toggle .bar-bottom{background-color:#fff!important}

/* 2026-10-26 client: more air around the View Current Inventory / View Size Chart row (it is a table row, so pad the cell) */
body.single-product .single-product-3__add-cart table.variations tr.wt-pdp-links > td{padding-top:18px!important;padding-bottom:18px!important}
/* 2026-10-26 client: light grey border on the size swatches (colour swatches untouched) */
.cfvsw-swatches-container:not([swatches-attr="attribute_pa_color"]) .cfvsw-swatches-option{border:1px solid #d6d6d6!important;background-color:#fff}
.cfvsw-swatches-container:not([swatches-attr="attribute_pa_color"]) .cfvsw-swatches-option.cfvsw-selected-swatch{border-color:#333!important}

/* 2026-10-26 client: sticky retail gallery on desktop - the photo column stays in view while the info column scrolls,
   releasing at the end of the product section. we-fonts.php sets html,body{overflow-x:hidden}, which turns body into a
   scroll container and silently disables sticky; 'clip' hides overflow the same way without that side effect. */
@media (min-width:992px){
 html:has(body.single-product),body.single-product{overflow-x:clip!important}
 body.single-product #brxe-ccrfzk.single-product-3__container-gallery{position:sticky;top:24px;align-self:start}
}

/* 2026-10-26: /wholesale/ for approved wholesalers (body class from inc/wt-quickfixes-2026-10-26.php): hide Login/Application + form, show Shop button */
.wt-ws-only{display:none!important}
body.wt-is-wholesaler .wt-ws-only{display:inline-flex!important}
body.wt-is-wholesaler .wt-ws-hide{display:none!important}

/* ===== 2026-10-26 (b) client punch list round 2 ===== */
/* R1 /wholesale/ hero: Login gets the Application button's shape (same radius, same width) */
#brxe-whb1,#brxe-whb2,#brxe-whb3{border-radius:4px!important;min-width:260px;justify-content:center;text-align:center}
/* R7 product photo box takes the photos' own 1617x2560 shape, so no empty bands either side */
@media (min-width:768px){
 body.single-product .wt-pg{grid-template-columns:76px max-content!important;justify-content:center}
 body.single-product .wt-pg:has(> .wt-pg__thumbs[hidden]){grid-template-columns:max-content!important}
 body.single-product .wt-pg__stage{width:auto!important;position:relative}
 body.single-product .wt-pg__frame{width:auto!important;aspect-ratio:1617/2560}
 body.single-product .wt-pg__frame .wt-pg__main{width:100%;height:100%;object-fit:cover}
}
/* R14 product price one step smaller (was clamp(24px,2vw,28px)) */
body.single-product #brxe-kziaxj .price,body.single-product #brxe-kziaxj .price .amount,body.single-product #brxe-kziaxj .price ins .amount{font-size:clamp(20px,1.7vw,24px)!important}
body.single-product #brxe-kziaxj .price del .amount{font-size:16px!important}
/* R16 "In stock: N" sits right under the size buttons: Clear moves to the right of that line */
body.single-product .single-product-3__add-cart table.variations{margin-bottom:0!important}
body.single-product .single-product-3__add-cart table.variations td.value{position:relative}
body.single-product .single-product-3__add-cart table.variations .reset_variations{position:absolute;right:0;bottom:-28px;margin:0!important}
body.single-product .single-product-3__add-cart .wt-stock-line{margin-top:6px!important}
/* R21 Customize hero: overlay .22-.36 (Oct 28 client list; was .30-.44). The small line keeps 4.5:1+ via a soft scrim on its Bricks element (page 37436, urqpij), and tall enough that the collage is not cut at the bottom */
body.page-id-37436 #brxe-hfttok img{filter:none!important}
body.page-id-37436 #brxe-hfttok::after{background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.36))!important}
body.page-id-37436 #brxe-hfttok h1,body.page-id-37436 #brxe-hfttok p{text-shadow:0 2px 8px rgba(0,0,0,.45)}
@media (min-width:768px){body.page-id-37436 #brxe-hfttok{min-height:calc(100vw / 2)!important;height:auto!important}}

/* R8 (2026-10-26): colour, size and Add to cart all above the fold on 1366x768 laptops */
@media (min-width:992px) and (max-height:820px){
 body.single-product .single-product-3__add-cart table.variations tr.wt-pdp-links > td{padding-top:6px!important;padding-bottom:6px!important}
 body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_color"]{row-gap:4px!important}
 body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_color"] .cfvsw-swatch-inner{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
 body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_color"] .cfvsw-swatches-option{min-height:0!important;height:auto!important}
 body.single-product #brxe-kziaxj{margin-top:0!important;margin-bottom:0!important}
 body.single-product .single-product-3__container-info .wt-sku{margin-top:2px!important;margin-bottom:2px!important}
}
body.single-product .single-product-3__add-cart .single_variation_wrap .woocommerce-variation.single_variation{margin-bottom:8px!important}
body.single-product .single-product-3__add-cart .wt-stock-line{margin-bottom:0!important}
@media (min-width:992px) and (max-height:820px){
 body.single-product .single-product-3__container-info .brxe-breadcrumbs, body.single-product .single-product-3__container-info nav{font-size:13px}
}

/* 2026-10-26 (c): "Clear" moves up beside the SIZES label so it can never sit on Add to cart
   (it overlapped the button when the stock line had not appeared yet) */
body.single-product .single-product-3__add-cart table.variations .reset_variations{top:-40px!important;bottom:auto!important;right:0;line-height:23px}
/* 2026-10-26 (d): "Clear" sits directly under the size swatches, left-aligned, in normal flow */
body.single-product .single-product-3__add-cart table.variations .reset_variations{position:static!important;display:inline-block!important;margin:6px 0 0!important;top:auto!important;right:auto!important;bottom:auto!important;line-height:20px}
body.single-product .single-product-3__add-cart table.variations tr:last-child > td,body.single-product .single-product-3__add-cart table.variations tr:last-child > th{padding-bottom:0!important}
body.single-product .single-product-3__add-cart table.variations tr:last-child{margin-bottom:0!important}
body.single-product .single-product-3__add-cart .wt-stock-line{margin-top:6px!important}

/* R14 (2026-10-26, e): the visible price digits live in <bdi>, which a template rule sizes separately
   (42.6px at 1440). One step down the site text scale: --text-xl (32px at 1440). Sale "was" price smaller. */
body.single-product #brxe-kziaxj .price bdi,body.single-product #brxe-kziaxj .price .woocommerce-Price-currencySymbol,body.single-product #brxe-kziaxj .price ins bdi{font-size:var(--text-xl)!important;line-height:1.2!important}
body.single-product #brxe-kziaxj .price del bdi,body.single-product #brxe-kziaxj .price del .woocommerce-Price-currencySymbol{font-size:var(--text-m)!important}

/* R8 (2026-10-26, e): scaled laptops (Windows 125%: 1366x768 -> 1093x614; 1280x720). Colour, size and
   Add to cart stay above the fold. Only applies to short desktop windows. */
@media (min-width:992px) and (max-height:740px){
 body.single-product .single-product-3__container-info{row-gap:4px!important;gap:4px!important;padding-top:0!important;margin-top:-12px}
 body.single-product .single-product-3__container-info > *{margin-top:0!important;margin-bottom:0!important}
 body.single-product .single-product-3__breadcrumbs,body.single-product .single-product-3__breadcrumbs *{font-size:12px!important;white-space:nowrap!important;line-height:1.4!important}
 body.single-product .single-product-3__breadcrumbs{overflow:hidden;text-overflow:ellipsis}
 body.single-product .single-product-3__container-info h1{font-size:24px!important;line-height:1.15!important}
 body.single-product .single-product-3__container-info .wt-sku{font-size:14px!important;margin:0!important}
 body.single-product #brxe-kziaxj .price bdi,body.single-product #brxe-kziaxj .price .woocommerce-Price-currencySymbol{font-size:24px!important}
 body.single-product .single-product-3__add-cart table.variations th,body.single-product .single-product-3__add-cart table.variations td.label{padding-top:2px!important;padding-bottom:4px!important}
 body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_color"] .cfvsw-swatch-inner{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important}
 body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_color"] .cfvsw-swatches-option{font-size:10px!important}
 body.single-product .single-product-3__add-cart table.variations tr.wt-pdp-links > td{padding-top:2px!important;padding-bottom:2px!important}
 body.single-product .single-product-3__add-cart table.variations tr.wt-pdp-links a,body.single-product .single-product-3__add-cart table.variations tr.wt-pdp-links span{font-size:15px!important}
 body.single-product .cfvsw-swatches-container:not([swatches-attr="attribute_pa_color"]) .cfvsw-swatches-option{min-height:32px!important;height:32px!important}
 body.single-product .single-product-3__add-cart table.variations .reset_variations{margin-top:2px!important}
 body.single-product .single-product-3__add-cart .single_add_to_cart_button,body.single-product .single-product-3__add-cart .quantity{height:42px!important;min-height:42px!important}
 body.single-product .single-product-3__add-cart .wt-stock-line{margin-top:2px!important;font-size:15px}
 body.single-product .single-product-3__add-cart .single_variation_wrap .woocommerce-variation.single_variation{margin-bottom:6px!important}
}
@media (min-width:992px) and (max-height:640px){
 body.single-product .single-product-3__breadcrumbs{display:none!important}
 body.single-product .single-product-3__container-info{margin-top:-18px}
 body.single-product .single-product-3__container-info h1{font-size:22px!important}
 body.single-product .single-product-3__add-cart table.variations th,body.single-product .single-product-3__add-cart table.variations td.label{padding-top:0!important;padding-bottom:2px!important}
 body.single-product .cfvsw-swatches-container[swatches-attr="attribute_pa_color"] .cfvsw-swatch-inner{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important}
 body.single-product .cfvsw-swatches-container:not([swatches-attr="attribute_pa_color"]) .cfvsw-swatches-option{min-height:30px!important;height:30px!important}
 body.single-product .single-product-3__add-cart .single_add_to_cart_button,body.single-product .single-product-3__add-cart .quantity{height:40px!important;min-height:40px!important}
}