/*
 Theme Name:   GMB Bricks Child
 Theme URI:    https://gmb.digital/
 Description:  Used to extend the Bricks theme.
 Author:       The Team @ Grow My Business
 Author URI:   https://gmb.digital/about
 Template:     bricks
 Version:      1.1
 Text Domain:  gmb
*/


/*
 * Prevent Horizontal Overflow
 */

html {
	height: 100%;
}

body {
	min-height: 100%;
	overflow-x: hidden;
}

section.brxe-section {
    overflow-x: clip;
}

/*
 * Set Bold font weight to Semi-Bold
 */
strong {
	font-weight: 600;
}

/*
 * Prevent content of elements with ratio class from stretching (e.g. images)
 */
[class*="ratio-"] {
    object-fit: cover;
    object-position: center;
}

/*
 * Prevent buttons inner text and the nav menu items from wrapping
 */
.brxe-button,
.nav-menu {
    white-space: nowrap;
}

/*
 * Set 'scroll to' offset for elements with ids (for in-page linking)
 */
[id] {
    scroll-margin-top: calc(var(--spacing-lrg) * 1.5);
}

/*
 * Set content within .has-bg-image elements to z-index 2
 */
.has-bg-image > *:not(.bg-image) {
    z-index: 2;
}

/*
 * List Styles
 */
.brxe-text ul {
    padding-left: 2em;
}

.brxe-text ul li:not(:last-child) {
    margin-bottom: 0.3em;
}

/*
 * Enable overflow for shadows on table of contents
 */
.brxe-post-toc {
  overflow: visible;
}

/*
 * Gravity Forms Styles
 */

.gform_wrapper form {
    --btn-bg-color: var(--color-secondary);
    --btn-text-color: var(--color-light);
    --text-color: hsla(0, 0%, 100%, 0.6);
    --border-color: hsla(0, 0%, 100%, 0.3);
    --field-bg-color: hsla(0, 0%, 100%, 0.1);
    --border-radius: var(--border-radius-lrg);
    --border-width: 0.1rem;
}

.gform_wrapper  form.light,
.light-form .gform_wrapper form {
    --btn-bg-color: var(--color-secondary);
    --btn-text-color: var(--color-light);
    --text-color: var(--color-dark);
    --border-color: var(--border-colour);
    --field-bg-color: transparent;
}

/* All Inputs, Textareas (Paragraphs) and Dropdowns (Selects) */
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select {
    background: var(--field-bg-color);
    color: #fff;
    border: var(--border-width) solid var(--border-color);
    padding: 1.2rem 1.6rem !important;
    border-radius: var(--border-radius);
    color: var(--text-color);
    line-height: 2rem;
	font-size: 0.9em !important;
	font-weight: 500;
}

/* Form Labels */
.gform_wrapper.gravity-theme label.gfield_label {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: 0.4rem;
}
/* Dropdown (Select) Arrow */
.gform_wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-size: 1rem auto;
    background-position: right 1rem top 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xOTVfMTczOCkiPgo8cGF0aCBkPSJNMSAxLjVMNiA2LjVMMTEgMS41IiBzdHJva2U9IiMyMTIxMjEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTk1XzE3MzgiPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
}

/* Dropdown (Select) Arrow for Light Forms */
.gform_wrapper  form.light select,
.light-form .gform_wrapper form select {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xOTVfMTczOCkiPgo8cGF0aCBkPSJNMSAxLjVMNiA2LjVMMTEgMS41IiBzdHJva2U9IiMyMTIxMjEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTk1XzE3MzgiPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
}

/* Submit Button Width */
.gform_wrapper input[type="submit"] {
	width: 100%;
}

/* Button Styles */
.gform_wrapper input[type="submit"],
.gform_wrapper input[type="button"] {
    background: var(--btn-bg-color);
    color: var(--btn-text-color);
    border: none;
    
    text-align: center;
    padding: 0.8em 1.2em !important;
    
    cursor: pointer;
    transition: background 200ms ease;
	
	font-size: 1.7rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input[type="button"]:hover {
    background: color-mix(in srgb, var(--btn-bg-color), var(--color-dark) 10%);
}

.ginput_complex span {
    display: block !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder,
.gform_wrapper select:not(:focus) {
    color: color-mix(in srgb, var(--text-color), transparent 40%);
}

body .gform_wrapper input:not([type="submit"]):not([type="button"]):focus,
body .gform_wrapper textarea:focus {
    border-color: var(--text-color) !important;
	color: var(--text-color) !important;
    outline: none;
}

.gform_required_legend,
.gform_wrapper .gform_heading {
	display: none;
}

.gform_wrapper .gform_footer {
    padding: 0 !important;
}

.gform_wrapper .gform_footer input {
    margin-bottom: 0 !important;
}

.gform_wrapper .gfield--type-html {
    font-size: 0.85em;
}

.gform_ajax_spinner {
    margin-left: 2rem;
}

.gfield_validation_message {
    display: none;
}

select.light option,
.light-form select option {
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
}

/*
 * Radio button styles
 */

.gchoice {
    display: flex;
    align-items: center;
    grid-gap: 0.8rem;
}

.gchoice label {
	color: var(--color-dark) !important;
}

input[type="radio"]:not([data-mode="button"] input[type="radio"]):checked,
input[type="checkbox"]:not([data-mode="button"] input[type="checkbox"]):checked {
  color: var(--color-primary) !important;
}

input[type="radio"]:not(ul[data-mode="button"] input[type="radio"]),
input[type="checkbox"]:not(ul[data-mode="button"] input[type="checkbox"]) {
    appearance: none !important;
    background-color: #fff !important;
    margin: 0 !important;
    font: inherit !important;
    color: var(--color-dark) !important;
    width: 1.6rem !important;
    height: 1.6rem !important;
    border: 0.1rem solid currentColor !important;
    border-radius: 10rem !important;
    transform: translateY(-0.05em) !important;
    display: grid !important;
    place-content: center !important;
    padding: 0 !important;
}

input[type="radio"]:not(ul[data-mode="button"] input[type="radio"])::before,
input[type="checkbox"]:not(ul[data-mode="button"] input[type="checkbox"])::before {
  content: "" !important;
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 10rem; !important;
  opacity: 0 !important;
  transition: 120ms opacity ease-in-out !important;
  box-shadow: inset 1em 1em currentColor !important;
}

input[type="radio"]:not(ul[data-mode="button"] input[type="radio"]):checked::before,
input[type="checkbox"]:not(ul[data-mode="button"] input[type="checkbox"]):checked::before {
  opacity: 1 !important;
}

.gform_wrapper .ginput_container_date input {
    width: 100% !important;
}

/*
 * Radio button styles
 */

input[type="radio"]:not([data-mode="button"] input[type="radio"]):checked,
input[type="checkbox"]:not([data-mode="button"] input[type="checkbox"]):checked {
  color: var(--color-primary) !important;
}

input[type="radio"]:not(ul[data-mode="button"] input[type="radio"]),
input[type="checkbox"]:not(ul[data-mode="button"] input[type="checkbox"]) {
    appearance: none !important;
    background-color: #fff !important;
    margin: 0 !important;
    font: inherit !important;
    color: var(--color-grey) !important;
    width: 1.6rem !important;
    height: 1.6rem !important;
    border: 0.1rem solid currentColor !important;
    border-radius: 0.6rem !important;
    transform: translateY(-0.05em) !important;
    display: grid !important;
    place-content: center !important;
    padding: 0 !important;
}

input[type="radio"]:not(ul[data-mode="button"] input[type="radio"])::before,
input[type="checkbox"]:not(ul[data-mode="button"] input[type="checkbox"])::before {
  content: "" !important;
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 0.3rem; !important;
  opacity: 0 !important;
  transition: 120ms opacity ease-in-out !important;
  box-shadow: inset 1em 1em currentColor !important;
}

input[type="radio"]:not(ul[data-mode="button"] input[type="radio"]):checked::before,
input[type="checkbox"]:not(ul[data-mode="button"] input[type="checkbox"]):checked::before {
  opacity: 1 !important;
}

.gchoice {
    display: flex;
    align-items: center;
    grid-gap: 0.8rem;
}

.gfield_radio {
    display: flex;
    grid-gap: 2rem;
    flex-wrap: wrap;
}

.gfield_radio label,
.gfield_checkbox label {
  font-size: var(--font-size-sml) !important;
  font-weight: 500;
}


/* Custom Field Styling */
.wcpa_field_label {
	color: #fff !important;
	font-size: 18px !important;
}

.wcpa_field {
	background-color: rgba(0,0,0,0) !important;
	border-radius: 0px !important;
	border: 1px solid #fff !important;
	color: #fff !important;
	font-size: 18px !important;
}

.wcpa_file_style .awpca_custom_file {
	background-color: rgba(0,0,0,0) !important;
	border: 0px !important;
}

.wcpa_file_style .wcpa_choose_button {
	background-color: rgba(0,0,0,0) !important;
}


/* ==========================================================================
 * WooCommerce Cart & Checkout Fields
 * Matched to the Gravity Forms (contact form) field styling:
 * 0.1rem #B8C0D1 border | 0.8rem radius | transparent bg | 1.2rem 1.6rem pad
 * ========================================================================== */

:root {
	--woo-field-border-width: 0.1rem;
	--woo-field-border-color: var(--border-colour);
	--woo-field-radius: var(--border-radius-lrg);
	--woo-field-bg: transparent;
	--woo-field-color: var(--color-dark);
	--woo-field-padding: 1.2rem 1.6rem;
	--woo-field-height: 4.6rem;
}

/* Text inputs, tel, email, textareas & native selects
   -------------------------------------------------------------------------- */
.woocommerce-cart .input-text:not(.qty),
.woocommerce-checkout .input-text:not(.qty),
.woocommerce-cart .woocommerce select:not(.select2-hidden-accessible),
.woocommerce-checkout .woocommerce select:not(.select2-hidden-accessible),
.woocommerce-checkout form.checkout select:not(.select2-hidden-accessible) {
	background: var(--woo-field-bg);
	border: var(--woo-field-border-width) solid var(--woo-field-border-color);
	border-radius: var(--woo-field-radius);
	box-shadow: none;
	color: var(--woo-field-color);
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 2rem;
	padding: var(--woo-field-padding);
	height: auto;
	min-height: var(--woo-field-height);
	transition: all 0.2s;
}

/* Order notes textarea */
body.woocommerce-checkout textarea.input-text:not(.qty) {
	line-height: 1.5;
	min-height: 12rem;
	resize: vertical;
}

/* Placeholders */
.woocommerce-cart .input-text::placeholder,
.woocommerce-checkout .input-text::placeholder {
	color: color-mix(in srgb, var(--woo-field-color), transparent 40%);
	font-weight: 500;
}

/* Focus state */
body.woocommerce-cart .input-text:not(.qty):focus,
body.woocommerce-checkout .input-text:not(.qty):focus,
body.woocommerce-cart .woocommerce select:focus,
body.woocommerce-checkout .woocommerce select:focus {
	border-color: var(--woo-field-color);
	color: var(--woo-field-color);
	outline: none;
}

/* Native select chevron */
.woocommerce-cart .woocommerce select:not(.select2-hidden-accessible),
.woocommerce-checkout .woocommerce select:not(.select2-hidden-accessible) {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23222633' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: right 1.6rem top 50%;
	background-repeat: no-repeat;
	background-size: 1rem;
	padding-right: 4rem;
}

/* Field labels */
.woocommerce-cart .woocommerce .form-row > label,
.woocommerce-checkout .woocommerce .form-row > label {
	color: var(--woo-field-color);
	font-size: 0.9em;
	font-weight: 500;
	margin-bottom: 0.4rem;
}

/* Select2 fields (Country / Region, State)
   -------------------------------------------------------------------------- */
.woocommerce-cart .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single {
	background: var(--woo-field-bg);
	border: var(--woo-field-border-width) solid var(--woo-field-border-color);
	border-radius: var(--woo-field-radius);
	height: var(--woo-field-height);
	transition: all 0.2s;
}

.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--woo-field-color);
	font-size: 0.9em;
	font-weight: 500;
	line-height: 2rem;
	padding: 1.2rem 4rem 1.2rem 1.6rem;
}

.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23222633' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1rem;
	height: 100%;
	right: 1.2rem;
	top: 0;
	width: 2rem;
}

.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__arrow b,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.woocommerce-cart .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
	border-color: var(--woo-field-color);
}

.woocommerce-cart .select2-dropdown,
.woocommerce-checkout .select2-dropdown {
	border: var(--woo-field-border-width) solid var(--woo-field-border-color);
	border-radius: var(--woo-field-radius);
	font-size: 0.9em;
	overflow: hidden;
}

.woocommerce-cart .select2-search--dropdown .select2-search__field,
.woocommerce-checkout .select2-search--dropdown .select2-search__field {
	border: var(--woo-field-border-width) solid var(--woo-field-border-color);
	border-radius: 0.4rem;
	color: var(--woo-field-color);
	font-weight: 500;
	padding: 0.8rem 1.2rem;
}

/* Quantity fields
   -------------------------------------------------------------------------- */
.woocommerce-cart .quantity,
.woocommerce-checkout .quantity {
	align-items: stretch;
	background: var(--woo-field-bg);
	border: var(--woo-field-border-width) solid var(--woo-field-border-color);
	border-radius: var(--woo-field-radius);
	min-height: var(--woo-field-height);
	overflow: hidden;
	transition: all 0.2s;
}

.woocommerce-cart .quantity input.qty,
.woocommerce-checkout .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--woo-field-color);
	font-size: 0.9em;
	font-weight: 500;
	height: auto;
	line-height: 2rem;
	padding: 1.2rem 0.8rem;
	text-align: center;
}

.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce-cart .quantity .action,
.woocommerce-checkout .quantity .action {
	border: 0;
	color: var(--woo-field-color);
	transition: all 0.2s;
}

/* Dividers between the -/+ steppers and the value */
.woocommerce-cart .quantity .action.minus,
.woocommerce-checkout .quantity .action.minus {
	border-right: var(--woo-field-border-width) solid var(--woo-field-border-color);
}

.woocommerce-cart .quantity .action.plus,
.woocommerce-checkout .quantity .action.plus {
	border-left: var(--woo-field-border-width) solid var(--woo-field-border-color);
}

.woocommerce-cart .quantity .action:hover,
.woocommerce-checkout .quantity .action:hover {
	background: color-mix(in srgb, var(--woo-field-border-color), transparent 70%);
}

.woocommerce-cart .quantity:focus-within,
.woocommerce-checkout .quantity:focus-within {
	border-color: var(--woo-field-color);
}

.woocommerce-cart .quantity input.qty:focus,
.woocommerce-checkout .quantity input.qty:focus {
	outline: none;
}


/* ==========================================================================
 * WooCommerce Cart & Checkout Containers
 * Matched to the contact page cards (.category-card):
 * white background | 0.1rem rgba(100, 110, 135, 0.27) border | 1.2rem radius
 * ========================================================================== */

:root {
	--woo-container-bg: var(--color-light);
	--woo-container-border-color: rgba(100, 110, 135, 0.27);
	--woo-container-border-width: 0.1rem;
	--woo-container-radius: var(--border-radius-xlrg);
}

body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
	background: var(--woo-container-bg);
	border: var(--woo-container-border-width) solid var(--woo-container-border-color);
	border-radius: var(--woo-container-radius);
}

/* The order summary is a <table>, so it needs separated borders before a
   radius will render */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:last-child td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:last-child th {
	border-bottom: 0;
}

body.woocommerce-checkout #payment {
	padding: 2rem;
}

/* Bricks styles these two cart containers with an ID selector, so they need
   !important before they will pick up the card styling above */
body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals {
	background: var(--woo-container-bg) !important;
	border: var(--woo-container-border-width) solid var(--woo-container-border-color) !important;
	border-radius: var(--woo-container-radius) !important;
}

/* Cart table: breathing room either side of the quantity column
   -------------------------------------------------------------------------- */
body.woocommerce-cart .woocommerce-cart-form th.product-quantity,
body.woocommerce-cart .woocommerce-cart-form td.product-quantity {
	padding-left: 2rem;
	padding-right: 2rem;
}

/* Place order box elements
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #payment .woocommerce-info,
body.woocommerce-checkout #payment .payment_box {
	border-radius: var(--border-radius-lrg);
}

body.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 0;
	margin: 0 0 1.6rem;
	padding: 0;
}

body.woocommerce-checkout #payment ul.payment_methods li label {
	color: var(--color-dark);
	font-size: 0.9em;
	font-weight: 500;
}

/* Place order button - same recipe as the contact form submit button */
body.woocommerce-checkout #payment #place_order {
	background: var(--color-secondary);
	border: 0;
	border-radius: var(--border-radius-lrg);
	color: var(--color-light);
	font-family: inherit;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 0.8em 1.2em;
	text-transform: uppercase;
	transition: background 200ms;
	width: 100%;
}

body.woocommerce-checkout #payment #place_order:hover {
	background: color-mix(in srgb, var(--color-secondary), var(--color-dark) 10%);
}


/* ==========================================================================
 * Checkout - billing and shipping details panel
 * Wraps the whole customer details column (billing + shipping + order notes)
 * in the same card as the contact page cards - Billing and shipping details box
 * ========================================================================== */

body.woocommerce-checkout #customer_details {
	background: var(--woo-container-bg);
	border: var(--woo-container-border-width) solid var(--woo-container-border-color);
	border-radius: var(--woo-container-radius);
	padding: 2rem;
}

/* Section headings inside the new panel need a little breathing room */
body.woocommerce-checkout #customer_details h3 {
	margin-top: 0;
}

body.woocommerce-checkout #customer_details .col-2 h3 {
	margin-top: 2rem;
}


/* ==========================================================================
 * Mobile - the cart table stacks at 768px and below, where the extra side
 * padding on the quantity cell would indent that row out of line with its
 * siblings, so reset it for the stacked cart layout
 * ========================================================================== */

@media (max-width: 768px) {
	body.woocommerce-cart .woocommerce-cart-form th.product-quantity,
	body.woocommerce-cart .woocommerce-cart-form td.product-quantity {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 *
 * Cart icon - red dot when there are items in the cart
 * .cart-has-items is added to <body> by the child theme (functions.php + scripts.js)
 *
 */

#brx-header a[href*="/cart/"] {
	position: relative;
}

#brx-header a[href*="/cart/"]::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--color-secondary, #C2000B);
	border: 2px solid var(--color-light, #FFFFFF);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

body.cart-has-items #brx-header a[href*="/cart/"]::after {
	opacity: 1;
	transform: scale(1);
}


/* ==========================================================================
 * WooCommerce notices ("banners")
 * --------------------------------------------------------------------------
 * Themed to match the cart / checkout / contact cards:
 * white background | 0.1rem rgba(100, 110, 135, 0.27) border | 1.2rem radius
 *
 * Transient notices (anything WooCommerce prints into
 * .woocommerce-notices-wrapper or .woocommerce-NoticeGroup) are lifted out of
 * the page flow by js/scripts.js into the fixed .gmb-notices stack, so they
 * float above the page instead of pushing the layout down, and each one gets
 * a red X to dismiss it. Those floated notices become .gmb-notice cards.
 *
 * Notices that are page furniture rather than a transient message (the coupon
 * and login toggles, the payment box) stay where WooCommerce put them and are
 * simply restyled as the same card.
 * ========================================================================== */

:root {
	--gmb-notice-bg: var(--woo-container-bg, #FFFFFF);
	--gmb-notice-border-color: var(--woo-container-border-color, rgba(100, 110, 135, 0.27));
	--gmb-notice-border-width: var(--woo-container-border-width, 0.1rem);
	--gmb-notice-radius: var(--woo-container-radius, 1.2rem);
	--gmb-notice-shadow: 0 1rem 3rem rgba(34, 38, 51, 0.14);
	--gmb-notice-padding-y: 1.6rem;
	--gmb-notice-padding-x: 1.8rem;
	--gmb-notice-gap: 1.4rem;
	--gmb-notice-icon-size: 2.2rem;
	--gmb-notice-color-info: var(--color-primary, #1C2785);
	--gmb-notice-color-success: #1F9254;
	--gmb-notice-color-error: var(--color-secondary, #C2000B);

	/* Floating stack */
	--gmb-notice-stack-width: 42rem;
	--gmb-notice-stack-offset: 2rem;
	--gmb-header-offset: 0px; /* kept in sync by js/scripts.js */

	/* Icons */
	--gmb-notice-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 4.4a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM13.4 17.6h-2.8v-6.5h2.8z'/%3E%3C/svg%3E");
	--gmb-notice-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm5 8.1-5.9 5.9a1 1 0 01-1.5 0L6.9 13l1.6-1.6 1.9 1.9 5-5z'/%3E%3C/svg%3E");
	--gmb-notice-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1.4 15.6h-2.8v-2.8h2.8zm0-4.4h-2.8V6.4h2.8z'/%3E%3C/svg%3E");
	--gmb-notice-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 7.1 16.9 5.7 12 10.6 7.1 5.7 5.7 7.1 10.6 12l-4.9 4.9 1.4 1.4 4.9-4.9 4.9 4.9 1.4-1.4-4.9-4.9z'/%3E%3C/svg%3E");
}


/* Which accent colour and icon each type gets
   -------------------------------------------------------------------------- */

body .woocommerce-info,
body .woocommerce-noreviews,
.gmb-notice--info {
	--gmb-notice-accent: var(--gmb-notice-color-info);
	--gmb-notice-icon: var(--gmb-notice-icon-info);
}

body .woocommerce-message,
.gmb-notice--success {
	--gmb-notice-accent: var(--gmb-notice-color-success);
	--gmb-notice-icon: var(--gmb-notice-icon-success);
}

body .woocommerce-error,
.gmb-notice--error {
	--gmb-notice-accent: var(--gmb-notice-color-error);
	--gmb-notice-icon: var(--gmb-notice-icon-error);
}


/* The card
   -------------------------------------------------------------------------- */

body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-error,
body .woocommerce-noreviews,
.gmb-notice {
	align-items: flex-start;
	background: var(--gmb-notice-bg) !important;
	border: var(--gmb-notice-border-width) solid var(--gmb-notice-border-color) !important;
	border-radius: var(--gmb-notice-radius) !important;
	box-shadow: none;
	color: var(--color-dark, #222633) !important;
	column-gap: var(--gmb-notice-gap);
	display: flex;
	flex-wrap: wrap;
	font-size: 1.6rem;
	font-weight: 400;
	justify-content: flex-start !important;
	line-height: 1.5;
	list-style: none !important;
	margin: 0 0 2rem;
	padding: var(--gmb-notice-padding-y) var(--gmb-notice-padding-x) var(--gmb-notice-padding-y) calc(var(--gmb-notice-padding-x) + var(--gmb-notice-icon-size) + var(--gmb-notice-gap)) !important;
	position: relative;
	row-gap: 1.2rem;
	text-align: left;
	width: auto;
}

/* The icon is positioned rather than laid out, so a long message in a narrow
   column can never knock it onto a line of its own */
body .woocommerce-info::before,
body .woocommerce-message::before,
body .woocommerce-error::before,
body .woocommerce-noreviews::before,
.gmb-notice::before {
	background-color: var(--gmb-notice-accent, var(--gmb-notice-color-info));
	color: transparent;
	content: "" !important;
	display: block;
	font-size: 0;
	height: var(--gmb-notice-icon-size);
	left: var(--gmb-notice-padding-x);
	margin: 0;
	position: absolute !important;
	top: calc(var(--gmb-notice-padding-y) + 0.2rem);
	width: var(--gmb-notice-icon-size);
	-webkit-mask-image: var(--gmb-notice-icon, var(--gmb-notice-icon-info));
	mask-image: var(--gmb-notice-icon, var(--gmb-notice-icon-info));
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Error notices are a <ul>, so give every message its own line */
body ul.woocommerce-error > li,
.gmb-notice__body > li {
	flex: 0 0 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

body ul.woocommerce-error > li + li,
.gmb-notice__body > li + li {
	margin-top: 0.4rem;
}


/* Links and buttons inside notices
   -------------------------------------------------------------------------- */

body .woocommerce-info a:not(.button),
body .woocommerce-message a:not(.button),
body .woocommerce-error a:not(.button),
.gmb-notice a:not(.button) {
	color: var(--color-primary, #1C2785);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 0.1rem;
	text-underline-offset: 0.3rem;
	transition: color 200ms;
}

body .woocommerce-info a:not(.button):hover,
body .woocommerce-message a:not(.button):hover,
body .woocommerce-error a:not(.button):hover,
.gmb-notice a:not(.button):hover {
	color: var(--color-secondary, #C2000B);
}

/* Buttons - same recipe as the checkout / contact form buttons, and always
   dropped onto their own line underneath the message */
body .woocommerce-info .button,
body .woocommerce-message .button,
body .woocommerce-error .button,
.gmb-notice .button {
	background: var(--color-secondary, #C2000B) !important;
	border: 0 !important;
	border-radius: var(--border-radius-lrg, 0.8rem) !important;
	color: var(--color-light, #FFFFFF) !important;
	display: inline-block;
	flex: 0 0 100%;
	float: none !important;
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	max-width: max-content;
	order: 9;
	padding: 0.7em 1.2em !important;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 200ms;
	white-space: nowrap;
}

body .woocommerce-info .button:hover,
body .woocommerce-message .button:hover,
body .woocommerce-error .button:hover,
.gmb-notice .button:hover {
	background: color-mix(in srgb, var(--color-secondary, #C2000B), var(--color-dark, #222633) 12%) !important;
}


/* Notices that are page furniture rather than transient messages
   -------------------------------------------------------------------------- */

/* Coupon / login toggles: keep the call to action over on the right */
body .woocommerce-form-coupon-toggle .woocommerce-info,
body .woocommerce-form-login-toggle .woocommerce-info {
	align-items: center;
	margin-bottom: 2rem;
}

body .woocommerce-form-coupon-toggle .woocommerce-info a,
body .woocommerce-form-login-toggle .woocommerce-info a {
	margin-left: auto;
}

/* Inside the payment box the notice already sits on a white card */
body.woocommerce-checkout #payment .woocommerce-info {
	margin: 0;
}

/* Empty notice wrappers must not leave a gap behind
   (the JS empties them when it lifts a notice into the floating stack) */
.woocommerce-notices-wrapper:empty,
.woocommerce-NoticeGroup:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* The inline coupon error WooCommerce prints beside the cart coupon field */
body .cart .coupon .coupon-error-notice {
	color: var(--color-secondary, #C2000B);
	flex: 0 0 100%;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0.8rem 0 0;
	text-align: left;
}


/* The floating stack
   -------------------------------------------------------------------------- */

.gmb-notices {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	pointer-events: none;
	position: fixed;
	right: var(--gmb-notice-stack-offset);
	top: calc(var(--gmb-header-offset, 0px) + var(--gmb-notice-stack-offset));
	transition: top 200ms ease;
	width: min(var(--gmb-notice-stack-width), calc(100vw - (var(--gmb-notice-stack-offset) * 2)));
	z-index: 9999;
}

.gmb-notices:empty {
	display: none;
}

.gmb-notices > * {
	pointer-events: auto;
}

.gmb-notice {
	animation: gmb-notice-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
	box-shadow: var(--gmb-notice-shadow);
	flex-wrap: nowrap;
	margin: 0;
}

/* The message itself. The JS strips WooCommerce's own classes off it once it
   has been floated, so that Woo's scripts cannot rip it back out of the card */
.gmb-notice__body {
	background: none;
	border: 0;
	column-gap: var(--gmb-notice-gap);
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
	row-gap: 1.2rem;
}

.gmb-notice.is-leaving {
	animation: gmb-notice-out 240ms ease both;
}

@keyframes gmb-notice-in {
	from {
		opacity: 0;
		transform: translate3d(1.5rem, -0.5rem, 0) scale(0.97);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes gmb-notice-out {
	from {
		max-height: 40rem;
		opacity: 1;
		transform: none;
	}

	to {
		margin-bottom: -1.2rem;
		max-height: 0;
		opacity: 0;
		transform: translate3d(1.5rem, 0, 0);
	}
}


/* Red X dismiss button
   -------------------------------------------------------------------------- */

.gmb-notice__dismiss {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: block;
	flex: 0 0 auto;
	height: 2.6rem;
	margin: -0.2rem -0.4rem 0 0.6rem;
	padding: 0;
	position: relative;
	transition: background 200ms;
	width: 2.6rem;
}

.gmb-notice__dismiss::before {
	background-color: var(--color-secondary, #C2000B);
	content: "";
	height: 1.3rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.3rem;
	-webkit-mask-image: var(--gmb-notice-icon-close);
	mask-image: var(--gmb-notice-icon-close);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.gmb-notice__dismiss:hover,
.gmb-notice__dismiss:focus-visible {
	background: color-mix(in srgb, var(--color-secondary, #C2000B) 12%, transparent);
	outline: none;
}


/* Small screens - full width stack, tucked under the header
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--gmb-notice-stack-offset: 1.2rem;
		--gmb-notice-padding-y: 1.4rem;
		--gmb-notice-padding-x: 1.5rem;
		--gmb-notice-gap: 1.2rem;
	}

	.gmb-notices {
		left: var(--gmb-notice-stack-offset);
		right: var(--gmb-notice-stack-offset);
		width: auto;
	}

	body .woocommerce-info,
	body .woocommerce-message,
	body .woocommerce-error,
	.gmb-notice {
		font-size: 1.5rem;
	}
}


@media (prefers-reduced-motion: reduce) {
	.gmb-notice,
	.gmb-notice.is-leaving {
		animation: none;
	}

	.gmb-notices {
		transition: none;
	}
}


/* ==========================================================================
 * Checkout - strip above the checkout form
 * The coupon / login toggles and the top notices wrapper are rendered outside
 * the Bricks section that paints the page background, so out of the box they
 * sit on the raw white html background and butt straight up against the nav.
 * Paint the page background behind that whole strip and give it some room.
 * ========================================================================== */

body.woocommerce-checkout article > .woocommerce {
	background-color: var(--color-light-grey, #E9ECF6);
}

/* Only add the breathing room when there is actually something in the strip */
body.woocommerce-checkout .brxe-container.before-checkout:has(.woocommerce-info),
body.woocommerce-checkout .brxe-container.before-checkout:has(.woocommerce-message),
body.woocommerce-checkout .brxe-container.before-checkout:has(.woocommerce-error),
body.woocommerce-checkout .brxe-container.before-checkout:has(.gmb-notice),
body.woocommerce-checkout .brxe-container.before-checkout:has(form.checkout_coupon) {
	padding-bottom: 1.2rem;
	padding-top: 2.8rem;
}


/* ==========================================================================
 * Checkout - coupon form (and the login form it sits next to)
 * WooCommerce ships these as flat light grey boxes with default grey submit
 * buttons - restyle them as the same white card as the rest of the store and
 * give the submit buttons the red button recipe
 * ========================================================================== */

body form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login {
	background: var(--woo-container-bg, #FFFFFF);
	border: var(--woo-container-border-width, 0.1rem) solid var(--woo-container-border-color, rgba(100, 110, 135, 0.27));
	border-radius: var(--woo-container-radius, 1.2rem);
	padding: 1.8rem;
}

body form.checkout_coupon {
	align-items: center;
	column-gap: 1.6rem;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	row-gap: 1.4rem;
}

body form.checkout_coupon > p {
	margin: 0;
	padding: 0;
	width: auto;
}

body form.checkout_coupon .form-row-first {
	flex: 1 1 24rem;
	max-width: 34rem;
}

body form.checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

body form.checkout_coupon .input-text {
	width: 100%;
}

body form.checkout_coupon .clear,
body.woocommerce-checkout form.woocommerce-form-login .clear {
	display: none;
}

/* Red submit buttons - same recipe as the place order / notice buttons */
body form.checkout_coupon button.button,
body form.checkout_coupon input[type="submit"],
body.woocommerce-checkout form.woocommerce-form-login button.button,
body.woocommerce-checkout form.woocommerce-form-login button[type="submit"] {
	background: var(--color-secondary, #C2000B) !important;
	border: 0 !important;
	border-radius: var(--border-radius-lrg, 0.8rem) !important;
	box-shadow: none !important;
	color: var(--color-light, #FFFFFF) !important;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	min-height: var(--woo-field-height, 4.6rem);
	padding: 0.7em 1.6em !important;
	text-transform: uppercase;
	transition: background 200ms;
	white-space: nowrap;
}

body form.checkout_coupon button.button:hover,
body form.checkout_coupon input[type="submit"]:hover,
body.woocommerce-checkout form.woocommerce-form-login button.button:hover,
body.woocommerce-checkout form.woocommerce-form-login button[type="submit"]:hover {
	background: color-mix(in srgb, var(--color-secondary, #C2000B), var(--color-dark, #222633) 12%) !important;
}


/* Coupon form stacks on small screens so the button is never squashed */
@media (max-width: 600px) {

	body form.checkout_coupon .form-row-first,
	body form.checkout_coupon .form-row-last {
		flex: 0 0 100%;
		max-width: none;
	}

	body form.checkout_coupon button.button {
		width: 100%;
	}
}


/* Inline coupon error on the checkout coupon form - WooCommerce prints this as
 * a plain span next to the field, so give it the theme error colour and put it
 * on its own line under the input (and top align the row so the button stays
 * level with the field when the message wraps) */

body form.checkout_coupon {
	align-items: flex-start;
}

body form.checkout_coupon .coupon-error-notice {
	color: var(--gmb-notice-color-error, #C2000B);
	display: block;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 0.6rem;
}


/* Quantity field – single product & archive (matches cart/checkout) */
.single-product .quantity,
.woocommerce .products .quantity {
	align-items: stretch;
	background: var(--woo-field-bg);
	border: var(--woo-field-border-width) solid var(--woo-field-border-color);
	border-radius: var(--woo-field-radius);
	min-height: var(--woo-field-height);
	overflow: hidden;
	transition: all 0.2s;
}

.single-product .quantity input.qty,
.woocommerce .products .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--woo-field-color);
	font-size: 0.9em;
	font-weight: 500;
	height: auto;
	line-height: 2rem;
	padding: 1.2rem 0.8rem;
	text-align: center;
}

.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .products .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .products .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product .quantity .action,
.woocommerce .products .quantity .action {
	border: 0;
	color: var(--woo-field-color);
	transition: all 0.2s;
}

.single-product .quantity .action.minus,
.woocommerce .products .quantity .action.minus {
	border-right: var(--woo-field-border-width) solid var(--woo-field-border-color);
}

.single-product .quantity .action.plus,
.woocommerce .products .quantity .action.plus {
	border-left: var(--woo-field-border-width) solid var(--woo-field-border-color);
}

.single-product .quantity .action:hover,
.woocommerce .products .quantity .action:hover {
	background: color-mix(in srgb, var(--woo-field-border-color), transparent 70%);
}

.single-product .quantity:focus-within,
.woocommerce .products .quantity:focus-within {
	border-color: var(--woo-field-color);
}

.single-product .quantity input.qty:focus,
.woocommerce .products .quantity input.qty:focus {
	outline: none;
}