/*!
Theme Name: mrn-base-stack (Child)
Theme URI: https://mrndev.io/
Author: MRN Web Designs
Author URI: https://mrndev.io/
Description: Rollout child theme scaffold for mrn-base-stack. Inherits parent shell, gutters, spacing, breadcrumbs, and shared rendering contracts while allowing site-specific overrides.
Version: 1.0.349
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Template: mrn-base-stack
Text Domain: mrn-base-stack-child
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*
 * Parent theme styles and tokens are loaded first via this child theme's
 * functions.php. Keep overrides additive and contract-safe.
 */

/**
 * Child-theme layout contracts
 *
 * Site-specific sections must consume these variables instead of repeating
 * Figma measurements. This keeps section gutters and feature-card spacing
 * consistent when developers theme or extend the site.
 */
:root {
	/*
	 * Brand-blue tint used by the Figma menu hover pill. There is no site color
	 * variable for it yet; move this to Site Styles when one is published.
	 */
	--gloves-color-menu-hover-bg: #ebebff;
	/* Figma mega-menu active item and split-panel surface contracts. */
	--gloves-color-menu-active-bg: #d8d8fc;
	--gloves-color-menu-surface: #fdfeff;
	/*
	 * Figma "Light Blue", the flat surface behind the utility bar's Help panel.
	 * Close to the hover tint above but a distinct value in the design, so it is
	 * published separately rather than folded into it.
	 */
	--gloves-color-menu-panel-bg: #eef3ff;
	--gloves-menu-shadow: 0 8px 14px -10px rgba(20, 23, 24, 0.32);
	/* Figma hover surface for the light/white button variant. */
	--gloves-color-button-light-hover-bg: #dfe9ff;
	/* Figma Neutral/04, used for muted UI such as struck prices and slider dots. */
	--gloves-color-neutral-04: #6c7275;
	/* Figma Neutral/07, the body-copy ink used by the B1 text style. */
	--gloves-color-neutral-07: #141718;
	/* Figma Neutral/01, the off-white used for copy on dark surfaces. */
	--gloves-color-neutral-01: #fefefe;
	/* Figma Neutral/03, the copyright ink on the footer's brand-blue bar. */
	--gloves-color-neutral-03: #e8ecef;
	/* Figma Neutral/06, the filled star on the product-card rating. */
	--gloves-color-neutral-06: #343839;
	/*
	 * One vertical step between mobile sections. Applied as row padding with the
	 * inner shell zeroed, so adjacent sections read as 2x this value and nothing
	 * doubles up.
	 */
	--gloves-mobile-section-space: 24px;
	/* One page edge on mobile: every section's left and right inset. */
	--gloves-mobile-gutter: 15px;
	/*
	 * Validation text on the dark-blue newsletter band. WPForms' stock #d63638
	 * only reaches about 2:1 against that surface; this tint clears 4.5:1.
	 */
	--gloves-color-newsletter-error: #ffc2c2;
	/* Product-card price colours from the Figma Product Card component. */
	--gloves-color-price-sale: #d12023;
	--gloves-color-price-was: var(--gloves-color-neutral-04);
	/*
	 * Review stars. The earned colour is the gold already running on the site —
	 * it was written as the bare `orange` keyword, and this token carries that
	 * exact value so nothing the client has already signed off on shifts.
	 *
	 * The unearned colour used to be Neutral/06, a near-black that made an
	 * unrated product — most of this imported catalog — render five black
	 * stars. It is now a tint of the same gold, so a rating always reads as
	 * gold and a partial one still separates earned from unearned.
	 *
	 * Move both to Site Styles once a star colour is published there.
	 */
	--gloves-color-star: #ffa500;
	--gloves-color-star-empty: #ffd280;
	/*
	 * The site radius scale.
	 *
	 * 8px is the Figma button radius — "Button - Regular", "Button, Long", the
	 * hero and Shop-All buttons, the catalog card's add-to-cart, the info-box
	 * links and the cart/checkout buttons all draw it. Buttons read from this
	 * token rather than restating a number, so the next one cannot drift to its
	 * own value the way several had.
	 *
	 * The single product page is the deliberate exception: its qty box,
	 * add-to-cart, Share/Ask pair and review submit are all square, per Figma.
	 * They are set to 0 at their own rules, not from here.
	 *
	 * Text inputs, selects and textareas keep the tighter 4px; a field is not a
	 * button and the two were never meant to share a corner.
	 */
	--gloves-radius-button: 8px;
	--gloves-radius-field: 4px;
	/*
	 * The wishlist heart, in its two states.
	 *
	 * Published here because the glyph was written out four separate times —
	 * outline and solid, once baked with a grey/red `fill` for the card tiles'
	 * `background-image` and again with a neutral fill for the product page's
	 * `mask`. The two outline copies had already drifted: the card's carried
	 * `9.60924` where the curve's middle control point should be `9.37917`,
	 * which pulled the notch between the heart's lobes off centre.
	 *
	 * Both are consumed as masks now, so the `fill` in the data URI is inert
	 * and the colour is the consumer's own `background` — grey at rest, the
	 * sale red once added. That is what keeps the added state a *filled* heart
	 * everywhere instead of a red outline on the product page.
	 */
	--gloves-heart-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='15' viewBox='0 0 19 15'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M9.83807 3.29585C9.51251 3.60827 8.99846 3.60827 8.67289 3.29585L8.0903 2.73676C7.4084 2.08238 6.4872 1.68282 5.46915 1.68282C3.37801 1.68282 1.68282 3.37801 1.68282 5.46915C1.68282 7.47391 2.76805 9.12932 4.33473 10.4895C5.90274 11.8508 7.77747 12.7536 8.89759 13.2144C9.13179 13.3107 9.37917 13.3107 9.61338 13.2144C10.7335 12.7536 12.6082 11.8508 14.1762 10.4895C15.7429 9.12931 16.8282 7.47391 16.8282 5.46915C16.8282 3.37801 15.133 1.68282 13.0418 1.68282C12.0238 1.68282 11.1026 2.08238 10.4207 2.73676L9.83807 3.29585ZM9.25548 1.52259C8.27281 0.579565 6.93866 0 5.46915 0C2.44862 0 0 2.44862 0 5.46915C0 10.8275 5.8649 13.7865 8.2574 14.7706C8.90173 15.0357 9.60924 15.0357 10.2536 14.7706C12.6461 13.7865 18.511 10.8274 18.511 5.46915C18.511 2.44862 16.0623 0 13.0418 0C11.5723 0 10.2382 0.579565 9.25548 1.52259Z'/%3E%3C/svg%3E");
	--gloves-heart-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='15' viewBox='0 0 19 15'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M9.25548 1.52259C8.27281 0.579565 6.93866 0 5.46915 0C2.44862 0 0 2.44862 0 5.46915C0 10.8275 5.8649 13.7865 8.2574 14.7706C8.90173 15.0357 9.60924 15.0357 10.2536 14.7706C12.6461 13.7865 18.511 10.8274 18.511 5.46915C18.511 2.44862 16.0623 0 13.0418 0C11.5723 0 10.2382 0.579565 9.25548 1.52259Z'/%3E%3C/svg%3E");
	/*
	 * The Figma dropdown caret, 12x6, used beside a menu item that opens a
	 * panel. Consumed as a mask like the two hearts above, so the `fill` in the
	 * data URI is inert and the colour comes from the consumer's own
	 * `background` — the source SVG is white, and a mask lets the same glyph
	 * follow the link colour wherever it is reused.
	 */
	--gloves-menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath fill='%23000' d='M0.999935 2.38419e-05L0 0.999959L4.99967 5.99963L9.99935 0.999959L8.99941 2.38419e-05L4.99967 3.98191L0.999935 2.38419e-05Z'/%3E%3C/svg%3E");
	/*
	 * The heavier of the site's two hairlines, used where a panel needs a visible
	 * edge rather than an internal divider: the FAQ rows, the blog sidebar's
	 * widgets, and the cart's tables and fields.
	 *
	 * Published here because it was being re-typed per section — `#b5b5b5` appeared
	 * as `--gloves-cart-border`, again as `--gloves-faq-border`, and was about to be
	 * written a third time for the sidebar. Those two now point at this, so the value
	 * lives in one place; the cart keeps its own name because its rules are written
	 * against it, but it resolves from here.
	 */
	--gloves-border-strong: #b5b5b5;
	/*
	 * The distance from the breadcrumb to the page's first heading.
	 *
	 * It used to be whatever each page's first block happened to set: measured at
	 * 65px on a category, 48px on the cart and the wishlist, 8px on a post and 0
	 * on a product — five values across six pages. 48px is the one the parent's
	 * own page shell already produces, so it is the site's number rather than a
	 * new one, and every page is brought onto it below.
	 */
	--gloves-page-heading-space: 48px;
	--gloves-contract-content-max: 1234px;
	--gloves-contract-feature-card-height: 404px;
	--gloves-contract-feature-inset-block: 56px;
	--gloves-contract-feature-inset-start: 55px;
	--gloves-contract-feature-inset-end: 76px;
	--gloves-contract-feature-column-gap: 146px;
	--gloves-contract-feature-copy-width: 452px;
}

/**
 * Links
 *
 * The parent theme sets `#4169e1` for links, `#800080` for visited and
 * `#191970` for hover — none of which belong to this palette, and the visited
 * purple in particular reads as an unstyled browser default. Rebound to the
 * brand colours here.
 *
 * Declared early and at the same weight as the parent's rules so component
 * styles further down — nav links, buttons, product titles, breadcrumbs —
 * continue to win on their own selectors. The `:visited` pair is required:
 * the parent's `a:visited` is (0,1,1) and would otherwise keep beating a plain
 * `a` rule for any link the visitor has already opened.
 */
a {
	color: var(--site-color-brand-blue);
}

a:visited {
	color: var(--site-color-brand-blue);
}

a:hover,
a:focus,
a:active {
	color: var(--site-color-dark-blue);
}

/**
 * Figma header and utility bar
 */
.gloves-utility-bar {
	background: var(--site-color-brand-blue);
	color: var(--site-color-white);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	min-height: 34px;
}

.gloves-utility-bar__inner {
	align-items: center;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	margin: 0 auto;
	max-width: 1240px;
	min-height: 34px;
	padding: 0;
	width: calc(100% - 48px);
}

.gloves-utility-bar a {
	color: inherit;
	text-decoration: none;
}

.gloves-utility-bar a:hover,
.gloves-utility-bar a:focus-visible {
	color: inherit;
	text-decoration: none;
}

.gloves-utility-bar__link-label,
.gloves-utility-bar .mrn-site-header__utility-message-link-label {
	text-decoration: none;
}

.gloves-utility-bar a:hover .gloves-utility-bar__link-label,
.gloves-utility-bar a:focus-visible .gloves-utility-bar__link-label,
.gloves-utility-bar .mrn-site-header__utility-message-link:hover .mrn-site-header__utility-message-link-label,
.gloves-utility-bar .mrn-site-header__utility-message-link:focus-visible .mrn-site-header__utility-message-link-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gloves-utility-bar__phone,
.gloves-utility-bar__menu a {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	width: max-content;
}

.gloves-utility-bar__phone .dashicons {
	font-size: 14px;
	height: 14px;
	line-height: 14px;
	width: 14px;
}

.gloves-utility-bar__message {
	color: #f1f1f1;
	margin: 0;
	text-align: center;
}

.gloves-utility-bar__menu-nav {
	justify-self: end;
}

.gloves-utility-bar__menu {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Header Secondary supports nested menu items in the utility bar. */
.gloves-utility-bar__menu > .menu-item {
	position: relative;
}

/*
 * `gap: 0` because `.gloves-utility-bar__menu a` above already sets 8px, and
 * the caret below carries its own `margin-left`. Left inherited, the label and
 * the caret sat 16px apart — the gap and the margin both applying.
 */
.gloves-utility-bar__menu > .menu-item-has-children > a {
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	font-weight: inherit;
	gap: 0;
	line-height: 22px;
	min-height: 34px;
	padding: 6px 28px;
}

/*
 * The dropdown caret, to the right of the label.
 *
 * Drawn as a masked pseudo-element rather than markup, so it needs no change to
 * the menu item in the admin and it inherits the bar's own colour instead of
 * pinning the white from the source SVG. Only items that actually open a panel
 * get one — the selector is scoped to `.menu-item-has-children`.
 */
.gloves-utility-bar__menu > .menu-item-has-children > a::after {
	background: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 6px;
	margin-left: 8px;
	-webkit-mask: var(--gloves-menu-chevron) no-repeat center / 12px 6px;
	mask: var(--gloves-menu-chevron) no-repeat center / 12px 6px;
	transition: transform 0.15s ease;
	width: 12px;
}

/* Points up while the panel is open, so the control states which way it goes. */
.gloves-utility-bar__menu > .menu-item-has-children:hover > a::after,
.gloves-utility-bar__menu > .menu-item-has-children:focus-within > a::after,
.gloves-utility-bar__menu > .menu-item-has-children.is-open > a::after {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.gloves-utility-bar__menu > .menu-item-has-children > a::after {
		transition: none;
	}
}

/*
 * The Help panel, from the Figma "Help Menu" frame.
 *
 * A flat 162px card on Light Blue with a 24px inset — no border and no shadow,
 * which is what the previous white-with-hairline treatment got wrong. The 24px
 * padding leaves the 114px measure the design gives its labels.
 *
 * Height is deliberately not fixed. Figma states 184px, but that is 24 + 136 +
 * 24 for exactly four items, and the padding and gap below reproduce it without
 * pinning the box — so a fifth item added in the admin lengthens the panel
 * rather than being clipped by it.
 */
.gloves-utility-bar__menu .sub-menu {
	background: var(--gloves-color-menu-panel-bg);
	border: 0;
	box-shadow: none;
	display: none;
	flex-direction: column;
	/* Figma: 16px between items. */
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 24px;
	position: absolute;
	right: 0;
	top: 100%;
	width: 162px;
	z-index: 50;
}

.gloves-utility-bar__menu .menu-item:hover > .sub-menu,
.gloves-utility-bar__menu .menu-item:focus-within > .sub-menu,
.gloves-utility-bar__menu .menu-item.is-open > .sub-menu {
	display: flex;
}

/*
 * Each row takes the panel's full 114px measure, so the link inside it starts
 * at the same left edge whatever the label's length.
 */
.gloves-utility-bar__menu .sub-menu li {
	margin: 0;
	padding: 0;
	width: 100%;
}

/*
 * Figma "Button" text style: Inter Medium 14/22 at -2% tracking, in Brand Blue.
 *
 * `display: block` and the zeroed padding are stated because the bar's own
 * `.gloves-utility-bar__menu a` rule makes every link an `inline-flex` box at
 * `width: max-content`, which is right for the bar itself and wrong inside this
 * panel — the gap above is the only rhythm the list needs.
 */
.gloves-utility-bar__menu .sub-menu a {
	color: var(--site-color-brand-blue, #3333cc);
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 22px;
	padding: 0;
	text-decoration: none;
	width: auto;
}

/* The design underlines the item under the cursor; nothing else moves. */
.gloves-utility-bar__menu .sub-menu a:hover,
.gloves-utility-bar__menu .sub-menu a:focus-visible {
	background: none;
	color: var(--site-color-brand-blue, #3333cc);
	text-decoration: underline;
	text-underline-offset: 3px;
}

#masthead.site-header {
	--mrn-hf-layout-columns: minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	max-width: none;
	min-height: 136px;
	padding: 13px max(24px, calc((100vw - 1240px) / 2));
	width: 100%;
}

#masthead .mrn-site-header__main {
	grid-column: 1 !important;
	grid-row: 1 !important;
	justify-content: flex-start;
	margin: 0;
	max-width: none;
}

#masthead .site-branding {
	align-items: center;
	display: grid;
	gap: 4px 32px;
	grid-template-columns: 110px minmax(0, auto);
	margin: 0;
}

#masthead .custom-logo-link {
	grid-row: 1 / span 2;
}

#masthead .custom-logo {
	display: block;
	height: 110px;
	max-height: none;
	max-width: none;
	object-fit: contain;
	width: 110px;
}

#masthead .site-description {
	align-self: center;
	color: var(--site-color-brand-blue);
	font-family: Inter, Arial, sans-serif;
	font-size: 17.44px;
	font-weight: 500;
	grid-column: 2;
	/* Span the same rows as the logo so `align-self` centers against its full height. */
	grid-row: 1 / span 2;
	line-height: 1.25;
	margin: 0;
	white-space: nowrap;
}

#masthead .site-description::before {
	content: "GO Gloves-Online ©";
	display: block;
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 32.56px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.05;
	margin-bottom: 5px;
}

#masthead .mrn-theme-hf-layout-grid__item--search {
	grid-column: 2 !important;
	grid-row: 1 !important;
}

#masthead .mrn-site-header__search--icon-only {
	height: 44px;
	min-width: 44px;
	width: 44px;
}

#masthead .mrn-site-search__toggle {
	background: transparent;
	border: 0;
	color: var(--site-color-dark-charcoal);
	height: 44px;
	min-height: 44px;
	min-width: 44px;
	padding: 10px;
	width: 44px;
}

/**
 * Header action group (search, wishlist, account, cart)
 *
 * Rendered by the child header override. The cart badge count is kept in sync
 * with AJAX add-to-cart through a WooCommerce cart fragment.
 *
 * Every icon shares `.gloves-header__action`, so the wishlist heart inherits
 * the group's sizing, hit area and hover colour without a rule of its own.
 */
#masthead .gloves-header__actions {
	align-items: center;
	display: flex;
	gap: 28px;
	grid-column: 3 !important;
	grid-row: 1 !important;
	position: relative;
}

#masthead .gloves-header__action {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--site-color-dark-charcoal, #1f1f1f);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	line-height: 0;
	min-height: 24px;
	min-width: 24px;
	padding: 0;
	position: relative;
	text-decoration: none;
}

#masthead .gloves-header__action:hover,
#masthead .gloves-header__action:focus-visible {
	color: var(--site-color-brand-blue);
}

#masthead .gloves-header__icon {
	display: block;
	height: auto;
	width: auto;
}

#masthead .gloves-header__cart-count,
#masthead .gloves-header__wishlist-count {
	align-items: center;
	background: #e02020;
	border-radius: 50%;
	color: var(--site-color-white);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	height: 18px;
	justify-content: center;
	line-height: 1;
	min-width: 18px;
	padding: 0 4px;
	position: absolute;
	right: -9px;
	top: -8px;
}

#masthead .gloves-header__cart-count--empty,
#masthead .gloves-header__wishlist-count--empty {
	display: none;
}

#masthead .gloves-header__search-panel {
	background: var(--site-color-white);
	border: 1px solid #d8dce3;
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(31, 31, 31, 0.12);
	padding: 16px;
	position: absolute;
	right: 0;
	top: calc(100% + 14px);
	width: min(360px, calc(100vw - 48px));
	z-index: 20;
}

#masthead .gloves-header__search-panel[hidden] {
	display: none;
}

/*
 * `#masthead` is a stacking context of its own (position:relative, z-index:20)
 * and `#site-navigation`, which follows it in the markup, sits at z-index:40.
 * The panel therefore paints behind the blue nav band whatever z-index it
 * carries itself, because the cap is on its ancestor, not on it. Lift the
 * header above the nav — but only while the panel is open (class set by
 * assets/js/header.js), so the nav keeps its normal precedence, and its mega
 * menu panels keep dropping over the header, the rest of the time.
 */
#masthead.site-header.gloves-header--search-open {
	z-index: 60;
}

/*
 * The panel renders WordPress's default search form, whose input and submit are
 * otherwise browser-styled. These bring it onto the site's own control styling:
 * a 42px field beside the brand-blue button used elsewhere in the header.
 */
#masthead .gloves-header__search-panel .search-form {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0;
}

#masthead .gloves-header__search-panel .search-form label {
	display: block;
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

#masthead .gloves-header__search-panel .search-field {
	background: var(--site-color-white);
	border: 1px solid #d8dce3;
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	height: 42px;
	letter-spacing: -0.32px;
	line-height: 40px;
	padding: 0 12px;
	width: 100%;
}

#masthead .gloves-header__search-panel .search-field::placeholder {
	color: var(--gloves-color-neutral-04);
	opacity: 1;
}

#masthead .gloves-header__search-panel .search-field:focus {
	border-color: var(--site-color-brand-blue);
	outline: 2px solid transparent;
}

#masthead .gloves-header__search-panel .search-submit {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 8px;
	color: var(--site-color-white);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	height: 42px;
	letter-spacing: -0.32px;
	padding: 0 20px;
}

#masthead .gloves-header__search-panel .search-submit:hover,
#masthead .gloves-header__search-panel .search-submit:focus-visible {
	background: var(--site-color-dark-blue);
}

#masthead .mrn-theme-hf-layout-grid__item--header-tertiary-menu {
	grid-column: 4 !important;
	grid-row: 1 !important;
	margin: 0;
	max-width: none;
	width: auto;
}

#masthead .mrn-site-header__menu-nav--tertiary .menu {
	gap: 0;
}

#masthead .mrn-site-header__menu-nav--tertiary a {
	background: var(--site-color-brand-blue);
	border-radius: 6px;
	color: var(--site-color-white);
	display: inline-flex;
	font-size: 14.74px;
	font-weight: 500;
	letter-spacing: -0.3px;
	line-height: 23px;
	padding: 10px 24px;
	text-decoration: none;
}

#masthead .mrn-site-header__menu-nav--tertiary a:hover,
#masthead .mrn-site-header__menu-nav--tertiary a:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

.main-navigation.mrn-site-primary-navigation {
	--mrn-theme-hf-bg-color: var(--site-color-brand-blue);
	--mrn-theme-hf-font-color: var(--site-color-white);
	--mrn-theme-hf-link-color: var(--site-color-white);
	/* Figma hover pill inverts the bar: brand-blue label on a tinted surface. */
	--mrn-theme-hf-link-hover-color: var(--site-color-brand-blue);
	background: var(--site-color-brand-blue);
	color: var(--site-color-white);
	margin: 0;
	max-width: none;
	min-height: 52px;
	padding: 0 max(24px, calc((100vw - 1240px) / 2));
	width: 100%;
	/* Keep open navigation panels above catalog controls such as wishlist
	   buttons, whose plugin stylesheet uses z-index: 20. */
	position: relative;
	z-index: 40;
}

@media screen and (min-width: 37.5em) {

	/*
	 * The item gap is carried by the link padding instead of the flex gap so the
	 * hover surface keeps clearance either side of the label. `space-between`
	 * then distributes whatever measure is left over.
	 */
	.main-navigation.mrn-site-primary-navigation>.menu,
	.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu {
		gap: 0;
		justify-content: space-between;
		margin: 0 auto;
		max-width: 1240px;
		min-height: 52px;
		width: 100%;
	}

	.main-navigation.mrn-site-primary-navigation--center-canvas {
		padding-left: 24px;
		padding-right: 24px;
	}

	.main-navigation.mrn-site-primary-navigation--center-canvas>.menu,
	.main-navigation.mrn-site-primary-navigation--center-canvas:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu {
		justify-content: center;
		max-width: none;
	}

	/* The 52px bar height sits on the item so the hover pill can stay 30px tall. */
	.main-navigation.mrn-site-primary-navigation>.menu>li,
	.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu>li {
		align-items: center;
		display: flex;
		min-height: 52px;
	}

	.main-navigation.mrn-site-primary-navigation>.menu>li>a,
	.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu>li>a {
		border-radius: 4px;
		color: var(--site-color-white);
		font-family: Inter, Arial, sans-serif;
		font-size: 14px;
		font-weight: 500;
		/* Figma: -2% tracking at 14px. */
		letter-spacing: -0.28px;
		line-height: 22px;
		min-height: 0;
		padding: 4px 13px;
	}

	.main-navigation.mrn-site-primary-navigation>.menu>li>a:hover,
	.main-navigation.mrn-site-primary-navigation>.menu>li>a:focus-visible,
	.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu>li>a:hover,
	.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu>li>a:focus-visible {
		background: var(--gloves-color-menu-hover-bg);
		color: var(--site-color-brand-blue);
		text-decoration: none;
	}
}

@media (max-width: 960px) {
	#masthead .site-description::before {
		font-size: 26px;
	}

	#masthead .site-description {
		font-size: 14px;
	}
}

@media (max-width: 782px) {
	.gloves-utility-bar__inner {
		grid-template-columns: 1fr auto;
		width: calc(100% - 32px);
	}

	.gloves-utility-bar__message {
		display: none;
	}

	#masthead.site-header {
		grid-template-columns: minmax(0, 1fr) auto auto !important;
		min-height: 88px;
		padding: 12px 16px;
	}

	#masthead .site-branding {
		gap: 0 14px;
		grid-template-columns: 64px minmax(0, auto);
	}

	#masthead .custom-logo {
		height: 64px;
		width: 64px;
	}

	#masthead .site-description {
		font-size: 11px;
		margin: 0;
		white-space: normal;
	}

	#masthead .site-description::before {
		font-size: 19px;
		letter-spacing: -0.5px;
		margin-bottom: 3px;
	}

	#masthead .mrn-theme-hf-layout-grid__item--header-tertiary-menu {
		display: none;
	}

	#masthead .mrn-theme-hf-layout-grid__item--search {
		grid-column: 2 !important;
	}

	#masthead .gloves-header__actions {
		gap: 20px;
		grid-column: 3 !important;
	}

	.main-navigation.mrn-site-primary-navigation {
		min-height: 0;
		padding: 0 16px;
	}
}

/*
 * The open navigation drawer is near-opaque white.
 *
 * The parent builds this background from two custom properties it sets inline on
 * the nav — a `#fff` base mixed to `85%` — and at that value the page underneath
 * reads straight through the menu: on Glove Gurus the heading, the body copy and
 * a second copy of the logo all showed between the menu items. The 16px
 * `backdrop-filter` blur behind it does not help, because the text it is blurring
 * is high-contrast and directly behind the labels.
 *
 * Set on the panel rather than by overriding the opacity property, which is the
 * other way to do this: that property is inline, so changing it would need
 * `!important`, and the nav band consumes the same value — this way the change
 * lands only on the surface that needed it.
 *
 * Not inside a media query on purpose. The drawer is what the primary nav
 * collapses to at tablet widths as well, so it has to be opaque wherever
 * `data-mrn-mobile-active` is set, not only on phones.
 */
#site-navigation.mrn-site-primary-navigation[data-mrn-mobile-active="true"] .mrn-mobile-navigation__panel {
	background: color-mix(in srgb, var(--site-color-white, #fff) 95%, transparent);
}

/* At tablet widths the collapsed navigation toggle sits on the brand-blue
   primary-nav bar. Keep it white there without changing the dark link colour
   used inside the mobile drawer or the small-screen toggle on its white row. */
@media (min-width: 783px) {
	.main-navigation.mrn-site-primary-navigation[data-mrn-mobile-active="true"]:not(.is-open)>.menu-toggle {
		color: var(--gloves-color-neutral-01);
	}
}

@media (max-width: 560px) {
	#masthead .site-description::before {
		font-size: 17px;
	}

	#masthead .site-description {
		font-size: 10px;
	}

	#masthead .gloves-header__actions {
		gap: 16px;
	}
}

/*!
Mega menu (mrn-mega-menu plugin) overrides for the Gloves Online child theme.

The plugin owns all markup; this file only layers Figma-specific styling on
top of its `.mrn-mega-menu*` classes and `[data-mrn-mega-menu-trigger]`
attribute. No plugin or parent-theme files are touched.

Two panel shapes exist per Figma: a compact dropdown (e.g. "Catering") and a
full-width mega menu with an off-white intro zone plus pale-indigo links zone
(e.g. "General Purpose & Work"). The plugin's `mrn-mega-menu--full` layout
class is the durable presentation contract; `data-columns` is used only to
size the content tracks inside that selected layout.
*/

/* Panel positioning
--------------------------------------------- */
/* The plugin forces every .mrn-has-mega-menu to position:static and centers
   every panel (left:50%; transform:translateX(-50%)) on the same distant
   positioned ancestor, so every dropdown lands in the same spot regardless of
   which trigger opened it.

   Anchoring each panel to its OWN trigger (an earlier version of this rule)
   isn't right either: a wide panel still overflows the viewport for any
   trigger that isn't near the nav's own center, AND it means each panel's
   left edge lands at a different x position depending on which item opened
   it, instead of lining up with the page's own content column.

   The nav's own <ul class="menu"> is already the same 1240px, centered box
   the rest of the page content (breadcrumbs, catalog body, etc.) uses. Make
   IT the positioning context instead of the individual trigger, so every
   panel's left/right edge lines up with that shared content column no matter
   which item opened it — consistent alignment AND guaranteed no overflow,
   since nothing here is ever wider than that box. */
@media (min-width: 901px) {

	.main-navigation.mrn-site-primary-navigation>.menu,
	.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu {
		position: relative;
	}

	.main-navigation.mrn-site-primary-navigation>.menu>.mrn-has-mega-menu:nth-child(-n+5)>.mrn-mega-menu,
	.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu>.mrn-has-mega-menu:nth-child(-n+5)>.mrn-mega-menu {
		left: 0;
		transform: none;
	}

	.main-navigation.mrn-site-primary-navigation>.menu>.mrn-has-mega-menu:nth-child(n+6)>.mrn-mega-menu,
	.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu>.mrn-has-mega-menu:nth-child(n+6)>.mrn-mega-menu {
		left: auto;
		right: 0;
		transform: none;
	}

}

/* Nav trigger hover/active pill
--------------------------------------------- */
/* Sizing (padding/line-height/font-weight) is applied at ALL times, not just
   on hover/active — if only the active state got this box size, the trigger
   would grow when a background/bold-weight appears and push every item after
   it sideways ("menu shifting on hover"). Keeping the box constant and only
   toggling background/color below means nothing ever reflows.
   align-self: center also has to apply always: the plugin stretches the
   trigger to the full nav-row height (align-self: stretch) for a bigger hit
   target, which is fine while the background is transparent, but would make
   an active pill span the whole bar instead of Figma's compact 38px pill. */
.mrn-has-mega-menu>a[data-mrn-mega-menu-trigger] {
	align-self: center;
	font-weight: 600 !important;
	letter-spacing: -0.28px;
	line-height: 30px !important;
	padding: 4px 13px;
}

/* Extra breathing room so two adjacent pills (e.g. the current-page item next
   to whichever item is being hovered) read as separate shapes instead of
   touching/merging. The menu uses justify-content: space-between for its
   overall distribution (see the existing rule above), so this adds a margin
   rather than a gap to avoid disturbing that. */
.main-navigation.mrn-site-primary-navigation>.menu>.mrn-has-mega-menu+.mrn-has-mega-menu,
.main-navigation.mrn-site-primary-navigation:not([data-mrn-mobile-active="true"])>.mrn-mobile-navigation__panel>.menu>.mrn-has-mega-menu+.mrn-has-mega-menu {
	margin-left: 4px;
}

/* The parent theme's own primary-nav link-color rule keeps winning here even
   after matching its selector's element/class count, so color is pinned with
   !important rather than chasing cascade order further. "Active" covers three
   states Figma treats identically: hovering, the dropdown being open, and
   sitting on that item's own category page (current-menu-item). */
.mrn-has-mega-menu>a[data-mrn-mega-menu-trigger]:hover,
.mrn-has-mega-menu.is-mega-menu-open>a[data-mrn-mega-menu-trigger],
.mrn-has-mega-menu.current-menu-item>a[data-mrn-mega-menu-trigger],
.mrn-has-mega-menu.current-menu-ancestor>a[data-mrn-mega-menu-trigger] {
	background: var(--gloves-color-menu-hover-bg);
	border-radius: 4px;
	box-shadow: none !important;
	color: var(--site-color-brand-blue) !important;
}

/* Figma's nav has no dropdown-open indicator; the plugin's default CSS draws
   one via ::after on every trigger. */
.mrn-has-mega-menu>[data-mrn-mega-menu-trigger]::after {
	display: none;
}

/* The plugin emits an unclassed arrow as a leaf-link fallback even when the
   editor has intentionally left both the item and arrow icon pickers empty.
   Custom picker icons carry a class, so this removes only that fallback. */
.mrn-mega-menu__native-menu a>span[aria-hidden="true"]:not([class]),
.mrn-mega-menu__categories a>span[aria-hidden="true"]:not([class]) {
	display: none;
}

/*
 * The left column's title carried both a trailing arrow and a rule beneath it,
 * neither of which is in the design. The arrow is the fallback glyph hidden
 * above; the rule is the plugin's own
 * `.mrn-mega-menu__categories > li { border-bottom: … !important }`. The two
 * sibling lists were already zeroed further down — this list was missed, so it
 * was the only one still drawing a divider.
 */
.mrn-mega-menu__categories>li {
	border-bottom: 0 !important;
}

/*
 * The left column's title is a heading, not a menu row.
 *
 * It renders through the categories block, so it had been folded into the
 * shared 14px link rule below — which gave it the link zone's type and, more
 * visibly, that rule's 8px inset. The CTA pair underneath carries no padding,
 * so the title sat 8px right of the copy it is supposed to head and the column
 * read as ragged down its left edge. Zeroed here so both start on the column.
 *
 * Type is Figma's intro heading, matching the reusable-block heading further
 * down to the value — same 24/32 Libre Caslon at 700, so the two ways this
 * column can be authored cannot drift apart.
 *
 * The hover needs `!important` to land: the plugin ships
 * `.mrn-mega-menu__categories a:hover { color: #135e96 !important }`, a
 * WordPress admin blue that has nothing to do with this palette, and it was
 * what the title actually turned on hover.
 */
.mrn-mega-menu__categories a {
	color: var(--gloves-color-neutral-07);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 24px;
	font-weight: 700;
	justify-content: flex-start;
	letter-spacing: normal;
	line-height: 32px;
	min-height: 0;
	padding: 0 !important;
	text-decoration: none;
	text-transform: none;
}

.mrn-mega-menu__categories a:hover,
.mrn-mega-menu__categories a:focus-visible {
	background: transparent !important;
	color: var(--site-color-brand-blue) !important;
	text-decoration: none !important;
}

/* Shared link typography
--------------------------------------------- */
/*
 * The plugin's own ink, rebound to ours.
 *
 * `mega-menu.css` publishes `--mrn-mega-link: #26384a` on the panel root and
 * then paints every link with `color: var(--mrn-mega-link) !important`. The
 * rule below states `#141718` without a bang, so the plugin was winning and
 * the whole menu rendered on a blue-grey ink that is nowhere in this palette
 * — measured at rgb(38, 56, 74) against Figma's near-black.
 *
 * Rebinding the variable is the fix rather than escalating to `!important`
 * here: the plugin keeps painting, it just paints the right colour, and the
 * category links and headings that this file never selected are corrected by
 * the same declaration.
 */
.mrn-mega-menu {
	--mrn-mega-link: var(--gloves-color-neutral-07);
}

/*
 * The link zone's rows. `.mrn-mega-menu__categories` is deliberately absent —
 * it draws the left column's heading and is styled as one above.
 */
.mrn-mega-menu__native-menu a,
.mrn-mega-menu__links a {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0;
	min-height: 32px;
	padding: 8px !important;
}

/*
 * The pill is the link zone's affordance, so the left column's title is
 * deliberately not in this list — it takes the shared type above but stays
 * plain, matching the design's treatment of that column as a heading rather
 * than one more menu row.
 */
.mrn-mega-menu__native-menu a:hover,
.mrn-mega-menu__native-menu a:focus-visible,
.mrn-mega-menu__links a:hover,
.mrn-mega-menu__links a:focus-visible {
	background: var(--gloves-color-menu-active-bg) !important;
	border-radius: 8px;
	color: var(--gloves-color-neutral-07) !important;
	text-decoration: underline;
}

.mrn-mega-menu__native-menu--direct-children,
.mrn-mega-menu__links {
	column-gap: 50px !important;
	row-gap: 1px !important;
}

.mrn-mega-menu__native-menu--direct-children>li,
.mrn-mega-menu__links>li {
	border-bottom: 0 !important;
}

/*
 * The parent mobile-navigation contract defaults its hover colour to
 * `currentColor`. This navigation is white on brand blue at desktop, so that
 * value resolves to white inside the pale mobile submenu and fails text
 * contrast. Keep the mobile drawer's interactive states dark, and use the
 * stronger Figma indigo tint plus a visible brand-blue focus ring.
 */
.mrn-mobile-navigation[data-mrn-mobile-active="true"] {
	--mrn-mobile-menu-link-hover: var(--gloves-color-neutral-07);
}

.mrn-mobile-navigation[data-mrn-mobile-active="true"] .sub-menu a:hover,
.mrn-mobile-navigation[data-mrn-mobile-active="true"] .sub-menu a:focus-visible {
	background: var(--gloves-color-menu-active-bg);
	border-radius: 8px;
	color: var(--gloves-color-neutral-07) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mrn-mobile-navigation[data-mrn-mobile-active="true"] .sub-menu a:focus-visible {
	outline: 2px solid var(--site-color-brand-blue);
	outline-offset: 2px;
}

/*
 * The mobile drawer enters from the left.
 *
 * The parent parks the panel at `translateX(100%)` — off the right edge — so it
 * travelled right-to-left, away from the hamburger that opens it and against
 * the reading direction. Only the resting position moves to the other side;
 * the open state is already `translateX(0)`, so the easing, duration and
 * full-width panel all stay the parent's.
 *
 * Equal specificity to the parent rule it replaces, which is enough because
 * `mrn-base-stack-child-style` is enqueued after `mrn-base-stack-mobile-
 * navigation` — no `!important` needed.
 *
 * Outside a media query on purpose, matching the parent: the drawer is also
 * what the primary nav collapses to at tablet widths.
 */
.mrn-mobile-navigation[data-mrn-mobile-active="true"] .mrn-mobile-navigation__panel {
	transform: translateX(-100%);
}

.mrn-mega-menu__category-description,
.mrn-mega-menu__category--description-only .mrn-mega-menu__category-description {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	margin: 0;
	padding: 0;
}

/* Shared callout links rendered from reusable blocks inside a mega menu.
   Figma node 9412:12165 uses a compact horizontal pair beneath the intro:
   14/16 Libre Franklin Bold, a 19px gap, and a trailing arrow on each link.
   Scope this to the mega-menu reusable-block slot instead of a block slug so
   editors can replace or reuse the block without losing the presentation. */
.mrn-mega-menu__block--reusable .mrn-reusable-block {
	margin-top: 24px;
}

.mrn-mega-menu__block--reusable .mrn-reusable-block .mrn-reusable-block__content,
.mrn-mega-menu__block--reusable .mrn-reusable-block .mrn-ui__text {
	margin: 0;
	padding: 0;
}

.mrn-mega-menu__block--reusable .mrn-reusable-block .mrn-ui__heading {
	border: 0;
	color: var(--gloves-color-neutral-07);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 32px;
	margin: 0;
	padding: 0;
	text-transform: none;
}

/* The Figma mega-menu intro has no bottom-accent divider. Keep the reusable
   block's UI option available elsewhere, but suppress it inside this slot. */
.mrn-mega-menu__block--reusable .mrn-reusable-block.has-bottom-accent[data-bottom-accent] {
	margin-bottom: 0;
}

.mrn-mega-menu__block--reusable .mrn-reusable-block.has-bottom-accent[data-bottom-accent]::after {
	display: none;
}

.mrn-mega-menu__block--reusable .mrn-reusable-block .mrn-ui__text>p {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 19px;
	margin: 0;
}

.mrn-mega-menu__block--reusable .mrn-reusable-block .mrn-ui__text a {
	color: var(--gloves-color-neutral-07);
	display: inline;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
	text-decoration: none;
	white-space: nowrap;
	width: auto;
}

.mrn-mega-menu__block--reusable .mrn-reusable-block .mrn-ui__text a::after {
	content: " \2192";
}

.mrn-mega-menu__block--reusable .mrn-reusable-block .mrn-ui__text a:hover,
.mrn-mega-menu__block--reusable .mrn-reusable-block .mrn-ui__text a:focus-visible {
	color: var(--wp--preset--color--brand-blue, #3333cc);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Compact/large column shapes only make sense at the plugin's own desktop
   breakpoint (901px, see assets/css/mega-menu.css). Below that the plugin
   collapses every panel to a single stacked column itself; without this
   guard the fixed widths/gaps here would fight that collapse instead of
   letting it work, which is what caused the mobile "no left/right space"
   bug — the panel content overflowing edge to edge. */
@media (min-width: 901px) {

	/* Desktop mega menus are content-sized overlays. Do not inherit the
	   plugin's viewport cap or internal scroller: every configured item remains
	   inside the surface, and wrapped labels determine their own row height. */
	.mrn-mega-menu .mrn-mega-menu__surface {
		box-shadow: var(--gloves-menu-shadow) !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.mrn-mega-menu .mrn-mega-menu__native-menu a,
	.mrn-mega-menu .mrn-mega-menu__links a {
		height: auto !important;
		white-space: normal;
	}

	/* Full mega menu: Figma uses an off-white 438/1440 intro zone and a pale
	   indigo link zone. The top-level plugin columns stay intact; the wider
	   first grid track creates the designed 100px intro inset and 60px link
	   inset without adding presentation markup. */
	.mrn-mega-menu--full .mrn-mega-menu__surface {
		background: var(--gloves-color-menu-hover-bg);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}

	/*
	 * The band is full bleed; its CONTENTS sit on the page's own column.
	 *
	 * Figma's 438px split and 100px inset were transcribed as absolutes, which
	 * silently encoded the 1440px frame into the stylesheet. They only line up
	 * at exactly 1440: measured at 1920 the split fell at 22.8% of the band
	 * instead of the designed 30.4%, and the copy sat 100px off the viewport
	 * edge while the header above it stayed centred — the menu read as shoved
	 * to the left on any wide screen.
	 *
	 * Read the frame back instead: 1440 - (2 x 100) = 1240, which is the shell
	 * width the header and every page already use. So the inset is not a
	 * measurement at all — it is the page column centring itself, and the split
	 * is simply where the 338px first track ends. Both are expressed that way
	 * below, so they resolve to Figma's exact numbers at 1440 and stay on the
	 * design's proportions at every other width.
	 *
	 * The gutter is a literal here rather than `--mrn-shell-gutter`: that token
	 * is a `clamp()`, and multiplying it for the two sides made the whole
	 * `min()` invalid at computed-value time. An invalid value is dropped
	 * silently, so the column simply stayed full width with nothing to show
	 * that the rule had failed.
	 */
	.mrn-mega-menu--full .mrn-mega-menu__surface {
		--gloves-menu-col: min(var(--mrn-shell-wide-width, 1240px), 100% - 48px);
		/* Where the first track ends: the column's left edge plus its 338px. */
		--gloves-menu-split: calc(50% - (var(--gloves-menu-col) / 2) + 338px);
	}

	.mrn-mega-menu--full:has(.mrn-mega-menu__columns[data-columns="2"], .mrn-mega-menu__columns[data-columns="5"]) .mrn-mega-menu__surface {
		background: linear-gradient(to right,
				var(--gloves-color-menu-surface) 0 var(--gloves-menu-split),
				var(--gloves-color-menu-hover-bg) var(--gloves-menu-split) 100%);
	}

	/*
	 * The class is tripled to outweigh an INLINE rule, not a stylesheet one.
	 * `mrn-mega-menu`'s stack integration prints
	 * `.mrn-mega-menu--stack.mrn-mega-menu--full .mrn-mega-menu__columns
	 * { max-width: none }` into the head from PHP. At 0-3-0 that beat the plain
	 * 0-2-0 selector here outright, so the column silently stayed full width —
	 * which is why the content still hugged the left edge after the centring
	 * was added. Repeating the modifier takes this to 0-4-0.
	 */
	.mrn-mega-menu--full.mrn-mega-menu--full.mrn-mega-menu--full .mrn-mega-menu__columns {
		column-gap: 64px;
		margin-inline: auto;
		max-width: var(--gloves-menu-col, min(1240px, 100% - 48px));
		padding: 52px 0 48px;
	}

	.mrn-mega-menu--full .mrn-mega-menu__columns[data-columns="2"] {
		column-gap: 60px;
		grid-template-columns: 338px minmax(0, 1fr);
	}

	.mrn-mega-menu--full .mrn-mega-menu__columns[data-columns="5"] {
		grid-template-columns: 334px repeat(4, minmax(0, 166px));
	}

	.mrn-mega-menu--full .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__column:first-child>*,
	.mrn-mega-menu--full .mrn-mega-menu__columns[data-columns="5"] .mrn-mega-menu__column:first-child>* {
		max-width: 223px;
	}

	/* Figma node 9412:12165 uses four independent 166px vertical stacks with
	   50px gutters. Multi-column layout preserves that contract: a wrapped
	   label grows only inside its own column instead of increasing a shared
	   CSS-grid row. */
	.mrn-mega-menu--full .mrn-mega-menu__columns:is([data-columns="1"], [data-columns="2"]) .mrn-mega-menu__native-menu--direct-children:not(.mrn-mega-menu__native-menu--columns-2):not(.mrn-mega-menu__native-menu--columns-3):not(.mrn-mega-menu__native-menu--columns-4):not(.mrn-mega-menu__native-menu--columns-5):not(.mrn-mega-menu__native-menu--columns-6) {
		column-count: 4;
		column-fill: balance;
		column-gap: 50px !important;
		display: block !important;
		margin-inline: auto;
		max-width: 814px !important;
		width: 814px !important;
	}

	.mrn-mega-menu--full .mrn-mega-menu__columns:is([data-columns="1"], [data-columns="2"]) .mrn-mega-menu__native-menu--direct-children:not(.mrn-mega-menu__native-menu--columns-2):not(.mrn-mega-menu__native-menu--columns-3):not(.mrn-mega-menu__native-menu--columns-4):not(.mrn-mega-menu__native-menu--columns-5):not(.mrn-mega-menu__native-menu--columns-6)>li {
		break-inside: avoid;
		padding-bottom: 1px !important;
		width: 166px !important;
	}

	.mrn-mega-menu--full .mrn-mega-menu__columns:is([data-columns="1"], [data-columns="2"]) .mrn-mega-menu__native-menu--direct-children:not(.mrn-mega-menu__native-menu--columns-2):not(.mrn-mega-menu__native-menu--columns-3):not(.mrn-mega-menu__native-menu--columns-4):not(.mrn-mega-menu__native-menu--columns-5):not(.mrn-mega-menu__native-menu--columns-6) a {
		min-height: 32px;
		width: 166px !important;
	}

	/* Compact small dropdown (Catering-shaped: 2 columns)
	--------------------------------------------- */
	.mrn-mega-menu--dropdown {
		box-sizing: border-box;
		max-width: min(90vw, 760px);
		width: max-content;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__surface,
	.mrn-mega-menu--dropdown .mrn-mega-menu__columns {
		box-sizing: border-box;
		max-width: 100%;
		width: max-content;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] {
		gap: 0;
		grid-template-columns: 338px max-content;
		max-width: none;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__surface {
		background: linear-gradient(
			to right,
			var(--site-color-white) 0 362px,
			var(--gloves-color-menu-hover-bg) 362px 100%
		);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 24px;
		width: max-content;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__column {
		min-width: 0;
		width: auto;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__column:first-child > * {
		max-width: 223px;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__column:last-child,
	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__links a,
	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__native-menu a {
		white-space: nowrap;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__column:last-child {
		padding-left: 24px;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__native-menu--direct-children {
		grid-template-columns: max-content;
		width: max-content !important;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__native-menu--direct-children > li,
	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__native-menu a {
		width: max-content !important;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__links a,
	.mrn-mega-menu--dropdown .mrn-mega-menu__columns[data-columns="2"] .mrn-mega-menu__native-menu a {
		padding-inline: 16px !important;
	}

	/* Explicit dropdown columns must override the legacy max-content layout. */
	.mrn-mega-menu--dropdown:has(.mrn-mega-menu__native-menu--columns-2) {
		max-width: min(90vw, 960px);
		width: max-content;
	}

	.mrn-mega-menu--dropdown:has(.mrn-mega-menu__native-menu--columns-2) .mrn-mega-menu__surface,
	.mrn-mega-menu--dropdown:has(.mrn-mega-menu__native-menu--columns-2) .mrn-mega-menu__columns {
		box-sizing: border-box;
		margin-inline: 0 !important;
		max-width: min(90vw, 960px);
		min-width: 0;
		width: max-content;
	}

	.mrn-mega-menu--dropdown:has(.mrn-mega-menu__native-menu--columns-2) .mrn-mega-menu__columns[data-columns="2"] {
		grid-template-columns: 338px max-content;
		max-width: none;
	}

	.mrn-mega-menu--dropdown:has(.mrn-mega-menu__native-menu--columns-2) .mrn-mega-menu__native-menu--columns-2,
	.mrn-mega-menu--dropdown:has(.mrn-mega-menu__native-menu--columns-2) .mrn-mega-menu__native-menu--columns-2 > li,
	.mrn-mega-menu--dropdown:has(.mrn-mega-menu__native-menu--columns-2) .mrn-mega-menu__native-menu--columns-2 a {
		box-sizing: border-box;
		min-width: 0 !important;
		max-width: none !important;
		width: max-content !important;
	}

	.mrn-mega-menu--dropdown:has(.mrn-mega-menu__native-menu--columns-2) .mrn-mega-menu__native-menu--columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.mrn-mega-menu--dropdown .mrn-mega-menu__category-name:is(h2, h3, h4, h5, h6) {
		color: var(--gloves-color-neutral-07);
		font-family: "Libre Caslon Text", Georgia, serif;
		font-size: 40px;
		font-weight: 700;
		letter-spacing: normal;
		line-height: 44px;
		margin: 0;
		text-transform: none;
	}

	/* Large mega menu with fixed-width intro column (5 columns)
	--------------------------------------------- */
	.mrn-mega-menu:not(.mrn-mega-menu--full) .mrn-mega-menu__columns[data-columns="5"] {
		gap: 64px;
	}

	.mrn-mega-menu__columns[data-columns="5"] .mrn-mega-menu__column:first-child {
		flex: 0 0 223px;
		gap: 24px;
	}

	.mrn-mega-menu__columns[data-columns="5"] .mrn-mega-menu__column:first-child .mrn-mega-menu__heading {
		color: var(--site-color-dark-charcoal, #141718);
		font-family: "Libre Caslon Text", Georgia, serif;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: normal;
		line-height: 32px;
		margin: 0;
		text-transform: none;
	}

	.mrn-mega-menu__columns[data-columns="5"] .mrn-mega-menu__column:first-child .mrn-mega-menu__promo-text {
		color: var(--gloves-color-neutral-04);
		font-family: Inter, Arial, sans-serif;
		font-size: 14px;
		line-height: 1.5714;
	}

	.mrn-mega-menu__columns[data-columns="5"] .mrn-mega-menu__column:first-child .mrn-mega-menu__links a {
		color: var(--site-color-brand-blue);
		font-family: Inter, Arial, sans-serif;
		font-weight: 500;
		text-align: left;
	}
}

/* Mobile panel: the plugin's own default padding (12px 8px 20px) is thinner
   than the site's standard mobile gutter used everywhere else, which read as
   the panel content running edge to edge. */
@media (max-width: 900px) {
	.mrn-mega-menu__surface {
		padding: 12px var(--gloves-mobile-gutter) 20px !important;
	}

	.mrn-mega-menu__mobile-header {
		padding-left: var(--gloves-mobile-gutter) !important;
		padding-right: var(--gloves-mobile-gutter) !important;
	}
}

/**
 * Homepage hero
 *
 * The content remains an MRN Two Column Split hero. These rules only provide
 * the Gloves-specific art direction from Figma: a 629/811 split at 1440px,
 * edge-to-edge media, and the site's type and color tokens.
 */
#homepage-hero+.mrn-content-builder__row--two-column-split {
	color: var(--site-color-off-white);
}

#homepage-hero+.mrn-content-builder__row--two-column-split>.mrn-layout-section,
#homepage-hero+.mrn-content-builder__row--two-column-split>.mrn-layout-section>.mrn-layout-container {
	max-width: none;
	padding: 0;
	width: 100%;
}

#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
	align-items: stretch;
	gap: 0;
	grid-template-columns: minmax(0, 43.68fr) minmax(0, 56.32fr);
	height: 671px;
}

#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--split-shell,
#hero-copy+.mrn-content-builder__row--basic,
#hero-copy+.mrn-content-builder__row--basic>.mrn-layout-section,
#hero-copy+.mrn-content-builder__row--basic .mrn-layout-container,
#hero-copy+.mrn-content-builder__row--basic .mrn-layout-grid--basic {
	gap: 0;
	height: 100%;
}

#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--split-shell {
	align-content: stretch;
	align-items: stretch;
	grid-template-rows: 0 minmax(0, 1fr);
}

#hero-copy+.mrn-content-builder__row--basic,
#hero-copy+.mrn-content-builder__row--basic>.mrn-layout-section {
	padding: 0;
}

#hero-copy+.mrn-content-builder__row--basic .mrn-layout-container {
	max-width: none;
	padding: 0;
	width: 100%;
}

#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__inner {
	display: flex;
	padding: 0;
}

/*
 * Figma places the 429x358 copy block at a 100px inset and centres it in the
 * 671px column (156.5px clearance above and below).
 */
#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap {
	align-content: center;
	align-self: stretch;
	gap: 0;
	max-width: 100%;
	padding: 48px 48px 48px max(32px, calc((100vw - 1240px) / 2));
	width: 100%;
}

#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap>* {
	max-width: 429px;
}

#hero-copy+.mrn-content-builder__row--basic .mrn-ui__head {
	margin: 0;
}

#hero-copy+.mrn-content-builder__row--basic .mrn-ui__heading {
	color: var(--site-color-off-white);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 72px;
	font-weight: 500;
	letter-spacing: -2px;
	line-height: 1.1667;
	margin: 0;
}

/* Figma: 8px between the 168px heading block and the 96px paragraph. */
#hero-copy+.mrn-content-builder__row--basic .mrn-ui__text {
	margin-top: 8px;
	max-width: 424px;
}

#hero-copy+.mrn-content-builder__row--basic .mrn-ui__text p {
	color: var(--site-color-off-white);
	font-family: Inter, Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.25px;
	line-height: 1.6;
	margin: 0;
}

/* Figma: 32px between the 272px text block and the 54px button. */
#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap {
	margin-top: 32px;
}

#hero-copy+.mrn-content-builder__row--basic .gloves-hero__cta {
	background: var(--site-color-off-white);
	border: 0;
	border-radius: 8px;
	color: var(--site-color-neutral-07);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	justify-content: center;
	letter-spacing: -0.32px;
	line-height: 1.5;
	/* Figma button is 172x54: 24px line box + 30px block padding. */
	padding: 15px 48px;
	text-decoration: none;
}

/* Figma keeps the label colour fixed across both states; only the surface moves. */
#hero-copy+.mrn-content-builder__row--basic .gloves-hero__cta:hover,
#hero-copy+.mrn-content-builder__row--basic .gloves-hero__cta:focus-visible {
	background: var(--gloves-color-button-light-hover-bg);
	color: var(--site-color-neutral-07);
}

#hero-image+.mrn-content-builder__row--image-content,
#hero-image+.mrn-content-builder__row--image-content>.mrn-layout-section,
#hero-image+.mrn-content-builder__row--image-content .mrn-layout-container,
#hero-image+.mrn-content-builder__row--image-content .mrn-image-content-row__inner,
#hero-image+.mrn-content-builder__row--image-content .mrn-image-content-row__media,
#hero-image+.mrn-content-builder__row--image-content figure {
	height: 100%;
}

#hero-image+.mrn-content-builder__row--image-content,
#hero-image+.mrn-content-builder__row--image-content>.mrn-layout-section {
	padding: 0;
}

#hero-image+.mrn-content-builder__row--image-content .mrn-layout-container {
	max-width: none;
	padding: 0;
	width: 100%;
}

#hero-image+.mrn-content-builder__row--image-content .mrn-image-content-row__content {
	display: none;
}

#hero-image+.mrn-content-builder__row--image-content .mrn-image-content-row__inner {
	padding: 0;
}

#hero-image+.mrn-content-builder__row--image-content .mrn-image-content-row__media,
#hero-image+.mrn-content-builder__row--image-content figure {
	margin: 0;
	width: 100%;
}

#hero-image+.mrn-content-builder__row--image-content img {
	display: block;
	height: 100%;
	max-height: none;
	max-width: none;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 960px) {

	/*
	 * `minmax(0, 1fr)`, not `1fr`: a bare `1fr` track keeps an automatic
	 * content-based minimum, and the hero image contributes its full intrinsic
	 * width to that. The track then blows out past the viewport, the row's
	 * `overflow: hidden` crops the copy mid-word, and the whole page grows wide
	 * enough to push the header actions off-screen.
	 */
	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
		min-height: 0 !important;
	}

	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column {
		min-width: 0;
	}

	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--split-shell {
		grid-template-rows: 0 auto;
	}

	#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap {
		padding: 64px 32px;
	}

	#hero-copy+.mrn-content-builder__row--basic .mrn-ui__heading {
		font-size: 48px;
		letter-spacing: -1px;
		line-height: 1.1667;
	}

	#hero-copy+.mrn-content-builder__row--basic .mrn-ui__text {
		margin-top: 20px;
	}

	#hero-copy+.mrn-content-builder__row--basic .mrn-ui__text p {
		font-size: 18px;
		line-height: 1.5556;
	}

	#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap {
		margin-top: 28px;
	}

	#hero-image+.mrn-content-builder__row--image-content .mrn-image-content-row__media {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 480px) {
	#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap {
		padding: 48px 24px;
	}

	#hero-copy+.mrn-content-builder__row--basic .gloves-hero__cta {
		width: 100%;
	}
}

/**
 * Homepage editorial and trust sections
 *
 * Content, images, links, and the newsletter form are managed through the
 * MRN page builder and WPForms. These rules provide the Figma art direction.
 */
#glove-guru+.mrn-content-builder__row--two-column-split {
	--mrn-layout-full-inset: 0px;
	--mrn-shell-gutter: 0px;
	--mrn-shell-wide-width: var(--gloves-contract-content-max);
	--mrn-space-stack-lg: var(--gloves-contract-feature-column-gap);
}

#glove-guru+.mrn-content-builder__row--two-column-split>.mrn-layout-section>.mrn-layout-container {
	background: #f3f5f7;
	height: var(--gloves-contract-feature-card-height);
	padding: 0 var(--gloves-contract-feature-inset-end) 0 var(--gloves-contract-feature-inset-start);
}

/*
 * Figma splits the 1103px card interior 505 / 146 / 452. The stack's ratio
 * control only offers 50/50, 60/40, 40/60, 67/33 and 33/67, so the row stays on
 * its saved 50/50 setting and the exact measure is supplied here. Drop this rule
 * if a matching ratio preset is added upstream.
 */
#glove-guru+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
	align-items: center;
	grid-template-columns: minmax(0, 505fr) minmax(0, 452fr);
	height: 100%;
}

#glove-guru+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--split-shell {
	gap: 0;
}

/*
 * The base basic-row media stack has no no-image modifier yet. Collapse this
 * nested copy-only row until that structural contract is supplied upstream.
 */
#glove-guru+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right .mrn-basic-row__inner {
	grid-template-columns: minmax(0, 1fr);
}

#glove-guru+.mrn-content-builder__row--two-column-split .mrn-image-content-row__content {
	display: none;
}

#glove-guru+.mrn-content-builder__row--two-column-split .mrn-image-content-row__media,
#glove-guru+.mrn-content-builder__row--two-column-split figure {
	height: 292px;
	margin: 0;
	width: 100%;
}

#glove-guru+.mrn-content-builder__row--two-column-split img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*
 * The copy rhythm is carried entirely by the element margins below. The parent
 * stacks its own row gaps on top of those margins, so they are zeroed here;
 * otherwise every gap renders as margin + grid gap.
 */
#glove-guru+.mrn-content-builder__row--two-column-split .mrn-basic-row__content-wrap,
#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__head {
	row-gap: 0;
}

#glove-guru+.mrn-content-builder__row--two-column-split .mrn-basic-row__content-wrap {
	max-width: var(--gloves-contract-feature-copy-width);
}

#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__label,
#global-leaders+.mrn-content-builder__row--two-column-split .mrn-ui__label {
	color: var(--site-color-brand-blue);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	margin: 0 0 16px;
	text-transform: uppercase;
}

#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
#popular-brands+.mrn-content-builder__row--logos .mrn-ui__heading,
#trusted-clients+.mrn-content-builder__row--logos .mrn-ui__heading,
#global-leaders+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
#newsletter+.mrn-content-builder__row--wpforms .mrn-ui__heading {
	/* Figma H2: Libre Caslon Text Medium 40/44, -0.4px tracking, #000. */
	color: #000;
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0;
}

/* Figma feature rhythm: 16px label-to-heading, 16px heading-to-body, 24px to button. */
#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__text {
	margin-top: 16px;
}

#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__text p,
#global-leaders+.mrn-content-builder__row--two-column-split .mrn-ui__text p,
#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__text p {
	font-family: Inter, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.6;
	margin: 0;
}

#glove-guru+.mrn-content-builder__row--two-column-split .mrn-basic-row__link-wrap,
#global-leaders+.mrn-content-builder__row--two-column-split .mrn-basic-row__link-wrap {
	margin-top: 24px;
}

/**
 * Why the doubled class, here and on the carousel wrappers below.
 *
 * These rules used to be written `.home .gloves-home__button`, and every
 * front-page section was scoped the same way. That made the sections
 * unusable anywhere else: drop the same builder row or shortcode on another
 * page and the styling simply did not apply, because the body no longer
 * carried `home`.
 *
 * The `.home` could not just be deleted, though. On the shortcode carousels it
 * was also load bearing in the cascade — the shared product-card base further
 * down this file (`.product-card`, `.rating`, `.price`, `.cart-btn`, which the
 * catalog and the product page use too) targets the same elements with one
 * class, and the front-page rules only won because `.home` gave them a second.
 * Removing it silently handed those elements back to the base: the New Arrivals
 * heading jumped to the legacy 48px and the section grew 77px.
 *
 * Repeating the class restores exactly the weight `.home` was contributing
 * without tying anything to a page. Sections keyed on a row anchor need none of
 * this — an id already outranks the base — so those are plain now.
 */

/*
 * Figma "Button - Regular": hug 160x42, radius 8, padding 6/40, Brand Blue fill,
 * no stroke. min-height holds the 42px box because the component's label
 * line-height is taller than the 1.5 used here.
 */
.gloves-home__button.gloves-home__button {
	align-items: center;
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 8px;
	color: var(--site-color-white);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	justify-content: center;
	line-height: 1.5;
	min-height: 42px;
	padding: 6px 40px;
	text-decoration: none;
}

.gloves-home__button.gloves-home__button:hover,
.gloves-home__button.gloves-home__button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/**
 * Figma logo bands: "Shop Popular Brands" and "Trusted by Clients"
 *
 * Both frames are identical in Figma (1440x366, centred 44px title at y=42, a
 * 1228px seven-up grid at y=134 of 159x120 tiles), so they share one ruleset.
 * The tile artwork differs in aspect between the two bands, so the logo is
 * contained inside the padded tile rather than given a fixed height.
 */
#popular-brands+.mrn-content-builder__row--logos,
#trusted-clients+.mrn-content-builder__row--logos {
	padding: 42px 24px 112px;
}

#popular-brands+.mrn-content-builder__row--logos .mrn-layout-section,
#popular-brands+.mrn-content-builder__row--logos .mrn-layout-container,
#trusted-clients+.mrn-content-builder__row--logos .mrn-layout-section,
#trusted-clients+.mrn-content-builder__row--logos .mrn-layout-container {
	max-width: none;
	padding: 0;
	width: 100%;
}

#popular-brands+.mrn-content-builder__row--logos .mrn-layout-container,
#trusted-clients+.mrn-content-builder__row--logos .mrn-layout-container {
	margin: 0 auto;
	max-width: var(--gloves-contract-content-max);
}

/* Zeroed so the header margin below is the only title-to-grid gap. */
#popular-brands+.mrn-content-builder__row--logos .mrn-layout-grid--logos,
#trusted-clients+.mrn-content-builder__row--logos .mrn-layout-grid--logos {
	row-gap: 0;
}

#popular-brands+.mrn-content-builder__row--logos .mrn-logos-row__header,
#trusted-clients+.mrn-content-builder__row--logos .mrn-logos-row__header {
	margin: 0 0 48px;
	text-align: center;
}

/* Figma tile-to-gap ratio is 159.35 : 18.81, which is 19px across this measure. */
#popular-brands+.mrn-content-builder__row--logos .mrn-logos-row__grid,
#trusted-clients+.mrn-content-builder__row--logos .mrn-logos-row__grid {
	display: grid;
	gap: 19px;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Padding leaves the 116x103 logo well Figma centres inside each 159x120 tile. */
#popular-brands+.mrn-content-builder__row--logos .mrn-logos-row__item,
#trusted-clients+.mrn-content-builder__row--logos .mrn-logos-row__item {
	align-items: center;
	background: var(--site-color-display-grey);
	display: flex;
	height: 120px;
	justify-content: center;
	padding: 9px 22px;
}

#popular-brands+.mrn-content-builder__row--logos .mrn-logos-row__item img,
#trusted-clients+.mrn-content-builder__row--logos .mrn-logos-row__item img {
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

#global-leaders+.mrn-content-builder__row--two-column-split>.mrn-layout-section,
#global-leaders+.mrn-content-builder__row--two-column-split>.mrn-layout-section>.mrn-layout-container {
	max-width: none;
	padding: 0;
	width: 100%;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
	align-items: stretch;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	height: 532px;
	min-height: 0;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--left {
	align-items: center;
	background: #f3f5f7;
	display: flex;
	gap: 0;
	height: 100%;
	min-height: 0;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--left>.mrn-content-builder__row {
	width: 100%;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right {
	display: block;
	height: 100%;
	min-height: 0;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-content-builder__row,
#global-leaders+.mrn-content-builder__row--two-column-split .mrn-layout-section,
#global-leaders+.mrn-content-builder__row--two-column-split .mrn-layout-container,
#global-leaders+.mrn-content-builder__row--two-column-split .mrn-layout-grid:not(.mrn-layout-grid--two-column-split) {
	gap: 0;
	height: 100%;
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--left .mrn-basic-row__inner {
	grid-template-columns: minmax(0, 1fr);
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-basic-row__content-wrap {
	box-sizing: border-box;
	max-width: 620px;
	padding: 76px max(48px, calc((100vw - 1240px) / 2));
	width: 100%;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-ui__text {
	margin-top: 24px;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-image-content-row__content {
	display: none;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-image-content-row__inner {
	display: block;
}

#global-leaders+.mrn-content-builder__row--two-column-split .mrn-image-content-row__media,
#global-leaders+.mrn-content-builder__row--two-column-split figure {
	height: 100%;
	margin: 0;
	width: 100%;
}

#global-leaders+.mrn-content-builder__row--two-column-split img {
	display: block;
	height: 100%;
	max-height: none;
	object-fit: cover;
	width: 100%;
}

#learn-more+.mrn-content-builder__row--two-column-split {
	padding: 124px 24px;
}

#learn-more+.mrn-content-builder__row--two-column-split>.mrn-layout-section,
#learn-more+.mrn-content-builder__row--two-column-split>.mrn-layout-section>.mrn-layout-container {
	max-width: none;
	padding: 0;
	width: 100%;
}

#learn-more+.mrn-content-builder__row--two-column-split>.mrn-layout-section>.mrn-layout-container {
	margin: 0 auto;
	max-width: 1240px;
}

/*
 * Figma splits the 1240px measure 816 / 160 / 264. The copy block and the
 * button stack are both 124px and 108px tall respectively, so the row centres
 * them against each other. The ratio is written as fr units of the Figma
 * measurements so the columns keep their proportion as the shell narrows.
 */
#learn-more+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
	align-items: center;
	gap: 160px;
	/* The button track never drops below the widest button, so the stack cannot
	   spill out of its column between the desktop and mobile breakpoints. */
	grid-template-columns: minmax(0, 816fr) minmax(max-content, 264fr);
}

/*
 * Each column holds its row plus the builder's zero-height anchor div, so the
 * column's own gap lands between them and pads the block by one gap step.
 * Zero it and let the row be the column's full height, as the Glove Guru row
 * already does.
 */
#learn-more+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--split-shell {
	gap: 0;
}

/*
 * Neutralise the nested rows' own shell so the split grid above is the only
 * thing positioning the two columns. The outer split grid is excluded: it
 * matches `.mrn-layout-grid` at the same specificity as the rule above and
 * would otherwise flatten its own 160px gutter back to zero.
 */
#learn-more+.mrn-content-builder__row--two-column-split .mrn-content-builder__row,
#learn-more+.mrn-content-builder__row--two-column-split .mrn-layout-section,
#learn-more+.mrn-content-builder__row--two-column-split .mrn-layout-container,
#learn-more+.mrn-content-builder__row--two-column-split .mrn-layout-grid:not(.mrn-layout-grid--two-column-split) {
	gap: 0;
	margin: 0;
	max-width: none;
	padding: 0;
}

/*
 * The copy rhythm is carried by the margin below, but the parent stacks its own
 * row gap on top of it, so the 16px Figma gap renders as 44px. Zero the row gap
 * and let the margin be the only spacing, as the Glove Guru row already does.
 */
#learn-more+.mrn-content-builder__row--two-column-split .mrn-basic-row__content-wrap,
#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__head {
	row-gap: 0;
}

/*
 * Both nested rows here are copy-only, and the base media-stack grid still
 * splits into an image/text pair with no no-image modifier. Left as-is it
 * squeezes the copy and the buttons into 1.15fr and leaves a phantom empty
 * column beside them. Collapse to a single column, as the Glove Guru and
 * Global Leaders rows already do. Remove when the parent supplies the contract.
 */
#learn-more+.mrn-content-builder__row--two-column-split .mrn-basic-row__inner {
	grid-template-columns: minmax(0, 1fr);
}

/* Figma stacks the 44px heading and the 64px paragraph on a 16px gap. */
#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__text {
	margin-top: 16px;
	max-width: 816px;
}

/* Figma B1: Inter Regular 20/32, -0.25px tracking, Neutral/07. */
#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__text p {
	color: var(--gloves-color-neutral-07);
	letter-spacing: -0.25px;
	line-height: 32px;
}

/*
 * Figma stacks the two 231px buttons on a 24px gap, so the group hugs them
 * rather than filling the column. `fit-content` keeps the stack that width and
 * leaves it flush to the column's start edge.
 */
#learn-more+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right .mrn-basic-row__link-wrap {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* The parent's default lead-in above a link wrap would push the stack off
	   the row's centre line; here the buttons are the column's only content. */
	margin: 0;
	width: fit-content;
}

/*
 * Figma "Button, Long": fixed 231x42, radius 8, padding 6/40. Label is the
 * "Button - Large" style, Inter Medium 16/30 at -2% tracking.
 *
 * The 42px height is exactly the 30px label line plus the 6px padding pair, and
 * the 151px label box is exactly 231 less the 40px padding pair. Both only hold
 * because the secondary's outline is drawn as an inset shadow rather than a
 * border: Figma strokes are excluded from auto-layout sizing, so a real border
 * would add 2px to each axis and push the longest label onto a second line.
 */
.gloves-home__resource-button.gloves-home__resource-button {
	align-items: center;
	border: 0;
	border-radius: 8px;
	display: flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	justify-content: center;
	letter-spacing: -0.32px;
	line-height: 30px;
	max-width: 100%;
	min-height: 42px;
	padding: 6px 40px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	width: 231px;
}

.gloves-home__resource-button--primary.gloves-home__resource-button--primary {
	background: var(--site-color-brand-blue);
	color: var(--site-color-white);
}

.gloves-home__resource-button--secondary.gloves-home__resource-button--secondary {
	background: var(--site-color-white);
	box-shadow: inset 0 0 0 1px var(--site-color-brand-blue);
	color: var(--site-color-brand-blue);
}

.gloves-home__resource-button.gloves-home__resource-button:hover,
.gloves-home__resource-button.gloves-home__resource-button:focus-visible {
	background: var(--site-color-dark-blue);
	box-shadow: inset 0 0 0 1px var(--site-color-dark-blue);
	color: var(--site-color-white);
}

#newsletter+.mrn-content-builder__row--wpforms {
	color: var(--site-color-white);
	min-height: 360px;
	overflow: hidden;
	position: relative;
}

#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section {
	background: var(--site-color-dark-blue);
	min-height: 360px;
	overflow: hidden;
	position: relative;
}

#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section::before,
#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section::after {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section::before {
	background-image: url("assets/images/homepage/newsletter-glove-left.png");
	bottom: -98px;
	height: 390px;
	left: -64px;
	width: 390px;
}

/*
 * The right-hand pair is pinned to the band's bottom-right corner. Anchoring on
 * `bottom`/`right` rather than `top` keeps it seated on the lower edge whatever
 * height the band grows to, and keeps the fingertips clear of the top edge,
 * where the section's own `overflow: hidden` used to slice them off.
 */
#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section::after {
	background-image: url("assets/images/homepage/newsletter-glove-right.png");
	/*
	 * The asset is 461x360 with its artwork already flush to the bottom-right
	 * corner, so the box has to carry that aspect. A square box made `contain`
	 * fit by width and then centre the result vertically, which is what lifted
	 * the gloves off the band's lower edge. Driving height from the ratio keeps
	 * the fit exact, so only the width is a design decision.
	 */
	aspect-ratio: 461 / 360;
	background-position: right bottom;
	bottom: 0;
	right: 0;
	width: 360px;
}

#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-container {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-width: none;
	min-height: 360px;
	padding: 80px 24px;
	position: relative;
	width: 100%;
	z-index: 1;
}

/*
 * Figma centres one 540px column: an 88px header over the 52px form field on a
 * 32px gap, 172px in total. The row's saved layout is the parent's `stacked`
 * mode, whose grid is already a single column, so only the measure is set here.
 */
#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-grid--wpforms {
	gap: 32px;
	margin: 0 auto;
	max-width: 540px;
	width: 100%;
}

#newsletter+.mrn-content-builder__row--wpforms .mrn-ui__head {
	row-gap: 0;
	text-align: center;
}

#newsletter+.mrn-content-builder__row--wpforms .mrn-ui__heading,
#newsletter+.mrn-content-builder__row--wpforms .mrn-ui__sub {
	/* Figma Neutral/01, a shade off pure white. */
	color: var(--gloves-color-neutral-01);
}

/* Figma B1: Inter Regular 20/32, -0.25px, 12px below the 44px heading. */
#newsletter+.mrn-content-builder__row--wpforms .mrn-ui__sub {
	font-family: Inter, Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.25px;
	line-height: 32px;
	margin: 12px 0 0;
}

/*
 * Figma "Form Input": a fixed 488x52 box centred in the 540px column, so 26px
 * clear of it on each side. Inside, one 30px row tracks 24 / 396 / 52 on 8px
 * gaps, sitting 8px above the 1px rule that closes the box.
 *
 * WPForms emits the field and the submit button as sibling blocks, so the form
 * element itself is the flex row that puts them on one line.
 */
#newsletter+.mrn-content-builder__row--wpforms .wpforms-container {
	margin: 0 auto;
	max-width: 488px;
	width: 100%;
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-form {
	align-items: flex-end;
	border-bottom: 1px solid var(--gloves-color-neutral-01);
	box-sizing: border-box;
	display: flex;
	gap: 8px;
	/* min-height, not height: the box measures 52px in its resting state but
	   still has to grow when WPForms injects a validation message. */
	min-height: 52px;
	padding-bottom: 8px;
	/* Containing block for the validation message lifted out of flow below. */
	position: relative;
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-field-container {
	flex: 1 1 auto;
	min-width: 0;
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-field {
	margin: 0;
	padding: 0;
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-field-label {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * Validation messages are injected as siblings inside the row, so in normal
 * flow they grow the field column and drag the bottom-aligned Signup button
 * down with them. Lifting them out of flow keeps the 488x52 box intact and
 * drops the message just below the rule. WPForms' own red fails contrast on
 * the dark band, so the message is re-tinted rather than left unreadable.
 *
 * Matched by tag: WPForms also puts `.wpforms-error` on the input itself, and
 * a bare class selector would take the field out of flow along with the text.
 * The message is a <label> in the classic render and an <em> in the modern one.
 */
#newsletter+.mrn-content-builder__row--wpforms label.wpforms-error,
#newsletter+.mrn-content-builder__row--wpforms em.wpforms-error,
#newsletter+.mrn-content-builder__row--wpforms .wpforms-error-container {
	color: var(--gloves-color-newsletter-error);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	left: 0;
	line-height: 20px;
	margin: 0;
	position: absolute;
	top: calc(100% + 13px);
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-error-container {
	top: calc(100% + 4px);
}

/* Keep the field's own colours in the error state; the message does the work. */
#newsletter+.mrn-content-builder__row--wpforms input[type="email"].wpforms-error {
	background: transparent;
	border: 0;
	box-shadow: none;
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-field-email {
	position: relative;
}

/* The 24px mail glyph, with the 8px gap carried by the field's own indent. */
#newsletter+.mrn-content-builder__row--wpforms .wpforms-field-email {
	padding-left: 32px;
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-field-email::before {
	background: url("assets/images/homepage/newsletter-email-icon.svg") center / contain no-repeat;
	content: "";
	height: 24px;
	left: 0;
	position: absolute;
	top: 3px;
	width: 24px;
	z-index: 1;
}

/* Figma "Button - Large": Inter Medium 16/30 at -2% tracking, on the 30px row. */
#newsletter+.mrn-content-builder__row--wpforms input[type="email"] {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	color: var(--gloves-color-neutral-01);
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	height: 30px;
	letter-spacing: -0.32px;
	line-height: 30px;
	max-width: none;
	padding: 0;
	width: 100%;
}

#newsletter+.mrn-content-builder__row--wpforms input[type="email"]::placeholder {
	color: var(--gloves-color-neutral-01);
	opacity: 1;
}

/*
 * The field is a rule, not a box, so a focus ring would draw a rectangle right
 * across the design. The rule carries the state instead: a shadow doubles its
 * weight, which reads clearly without shifting the 52px box by a pixel.
 */
#newsletter+.mrn-content-builder__row--wpforms input[type="email"]:focus {
	box-shadow: none;
	outline: none;
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-form:focus-within {
	box-shadow: 0 1px 0 var(--gloves-color-neutral-01);
}

#newsletter+.mrn-content-builder__row--wpforms .wpforms-submit-container {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/* Figma "Signup" is a 52x30 text button sharing the field's rule, not a filled pill. */
#newsletter+.mrn-content-builder__row--wpforms button[type="submit"] {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--gloves-color-neutral-01);
	cursor: pointer;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	height: 30px;
	letter-spacing: -0.32px;
	line-height: 30px;
	padding: 0;
	white-space: nowrap;
}

#newsletter+.mrn-content-builder__row--wpforms button[type="submit"]:hover,
#newsletter+.mrn-content-builder__row--wpforms button[type="submit"]:focus-visible {
	background: transparent;
	color: var(--gloves-color-neutral-01);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/**
 * Summer Sale banner
 *
 * A Basic row nested in the right column of a Two Column Split, with the media
 * row on the left. The parent split still carries the `#global-leaders` anchor,
 * so these rules are keyed on the nested `#summer-sale` row and must stay after
 * the Global Leaders block to win on source order.
 *
 * Figma: 1440x532 band split 705/735, a 452x222 copy block inset 136px from the
 * column edge and centred vertically (155px clearance), on brand blue.
 */
.mrn-content-builder__row--two-column-split:has(#summer-sale) .mrn-layout-grid--two-column-split {
	grid-template-columns: minmax(0, 705fr) minmax(0, 735fr);
}

/*
 * The base media-stack grid still reserves a media column on this copy-only
 * row, which squeezes the text. Collapse it to a single column until the
 * parent supplies a no-image modifier, as with the Glove Guru row.
 */
#summer-sale+.mrn-content-builder__row--basic .mrn-basic-row__inner {
	grid-template-columns: minmax(0, 1fr);
}

/* Parent row gaps are zeroed so the margins below are the only rhythm. */
#summer-sale+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap,
#summer-sale+.mrn-content-builder__row--basic .mrn-ui__head {
	row-gap: 0;
}

#summer-sale+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap {
	align-content: center;
	box-sizing: border-box;
	max-width: none;
	padding: 48px 147px 48px 136px;
	width: 100%;
}

#summer-sale+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap>* {
	max-width: 452px;
}

#summer-sale+.mrn-content-builder__row--basic .mrn-ui__label {
	color: var(--site-color-white);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	margin: 0 0 16px;
	text-transform: uppercase;
}

#summer-sale+.mrn-content-builder__row--basic .mrn-ui__heading {
	color: var(--site-color-white);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0;
}

#summer-sale+.mrn-content-builder__row--basic .mrn-ui__text {
	margin-top: 16px;
}

#summer-sale+.mrn-content-builder__row--basic .mrn-ui__text p {
	color: var(--site-color-white);
	font-family: Inter, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.6;
	margin: 0;
}

#summer-sale+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap {
	margin-top: 24px;
}

/*
 * White button variant, as used by the hero, sitting on the blue surface.
 *
 * Matched on any link in this row rather than `.mrn-ui__link--button`, because
 * Figma always shows a button here regardless of the row's Link Display
 * setting. Setting that control to Button in the UI is still the tidier switch.
 */
#summer-sale+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap .mrn-ui__link {
	align-items: center;
	background: var(--site-color-white);
	border: 0;
	border-radius: var(--gloves-radius-button);
	/*
	 * Figma sets this label in brand blue, not the near-black the hero's white
	 * CTA carries. `--site-color-brand-blue` is the published Site Styles token
	 * and already holds #3333CC, so the value is read from there rather than
	 * restated here.
	 */
	color: var(--site-color-brand-blue, #3333cc);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	justify-content: center;
	/* Figma's -2% tracking at 16px, in px to match the hero CTA's own value. */
	letter-spacing: -0.32px;
	/*
	 * The 30px line box plus the 12px block padding is the button's 42px height,
	 * so `min-height` is now what the content measures rather than a floor it
	 * has to be stretched to.
	 */
	line-height: 30px;
	min-height: 42px;
	padding: 6px 40px;
	text-align: center;
	text-decoration: none;
}

/* Figma keeps the label colour fixed across both states; only the surface moves. */
#summer-sale+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap .mrn-ui__link:hover,
#summer-sale+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap .mrn-ui__link:focus-visible {
	background: var(--gloves-color-button-light-hover-bg);
	color: var(--site-color-brand-blue, #3333cc);
	text-decoration: none;
}

/**
 * International / Global Leaders banner
 *
 * Mirror of the Summer Sale row: copy on the left, media on the right, on the
 * default surface. Figma: 1440x532 split 720/720, a 452x220 copy block inset
 * 100px and centred vertically (123px clearance), same 16/16/24 rhythm.
 */
/* The row renders in the contained shell; the banner is edge to edge. */
.mrn-content-builder__row--two-column-split:has(#international-copy)>.mrn-layout-section,
.mrn-content-builder__row--two-column-split:has(#international-copy)>.mrn-layout-section>.mrn-layout-container {
	max-width: none;
	padding: 0;
	width: 100%;
}

.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-layout-grid--two-column-split {
	align-items: stretch;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	height: 532px;
	max-width: none;
	min-height: 0;
	width: 100%;
}

.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-two-column-split__column {
	height: 100%;
	min-height: 0;
}

/* Media column bleeds to the edge and fills the band height. */
.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-two-column-split__column--right .mrn-content-builder__row,
.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-two-column-split__column--right .mrn-layout-section,
.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-two-column-split__column--right .mrn-layout-container,
.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-two-column-split__column--right .mrn-layout-grid,
.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-image-content-row__inner {
	gap: 0;
	height: 100%;
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-image-content-row__content {
	display: none;
}

.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-image-content-row__media,
.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-image-content-row__media figure {
	height: 100%;
	margin: 0;
	width: 100%;
}

.mrn-content-builder__row--two-column-split:has(#international-copy) .mrn-image-content-row__media img {
	display: block;
	height: 100%;
	max-height: none;
	object-fit: cover;
	width: 100%;
}

/*
 * The nested row keeps its own shell gutters, which would stack on top of the
 * inset below. Clear them so the copy measures from the column edge.
 */
#international-copy+.mrn-content-builder__row--basic,
#international-copy+.mrn-content-builder__row--basic>.mrn-layout-section,
#international-copy+.mrn-content-builder__row--basic>.mrn-layout-section>.mrn-layout-container,
#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__inner {
	max-width: none;
	padding: 0;
	width: 100%;
}

/*
 * Copy-only row: collapse the media-stack grid and the stacked row gaps. The
 * content wrap is a grid too, so it needs the single column as well or its
 * track sizes to the longest word rather than the 452px measure.
 */
#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__inner,
#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap {
	grid-template-columns: minmax(0, 1fr);
}

#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap,
#international-copy+.mrn-content-builder__row--basic .mrn-ui__head {
	row-gap: 0;
}

#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap {
	align-content: center;
	box-sizing: border-box;
	max-width: none;
	padding: 48px 168px 48px max(24px, calc((100vw - 1240px) / 2));
	width: 100%;
}

#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap>* {
	max-width: 452px;
}

#international-copy+.mrn-content-builder__row--basic .mrn-ui__label {
	color: var(--site-color-brand-blue);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	margin: 0 0 16px;
	text-transform: uppercase;
}

#international-copy+.mrn-content-builder__row--basic .mrn-ui__heading {
	color: #000;
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0;
}

#international-copy+.mrn-content-builder__row--basic .mrn-ui__text {
	margin-top: 16px;
}

#international-copy+.mrn-content-builder__row--basic .mrn-ui__text p {
	font-family: Inter, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.6;
	margin: 0;
}

#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap {
	margin-top: 24px;
}

#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap .mrn-ui__link {
	align-items: center;
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 8px;
	color: var(--site-color-white);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	justify-content: center;
	line-height: 1.5;
	min-height: 42px;
	padding: 6px 40px;
	text-decoration: none;
}

#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap .mrn-ui__link:hover,
#international-copy+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap .mrn-ui__link:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
	text-decoration: none;
}

/**
 * Featured product carousel
 *
 * Rendered by the `[featured_products_carousel]` shortcode inside a Body Text
 * row, so the section frame is built here rather than by a builder layout.
 *
 * Figma: 1440x637 band, 48px above and below, a 44px title line with the
 * pagination flush right, and 48px to the cards. The card gutter is set to
 * 30px in the Splide config rather than Figma's 23.28px, per site-owner
 * direction.
 */
.featured-products-wrapper.featured-products-wrapper {
	margin: 0 auto;
	max-width: var(--gloves-contract-content-max);
	/* padding: 48px 0; */
	width: 100%;
}

.featured-header.featured-header {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin: 0 0 48px;
	min-height: 44px;
}

.featured-title.featured-title {
	color: #000;
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0;
}

.featured-header.featured-header .slider-pagination {
	flex: 0 0 auto;
}

/* Splide absolutely positions its pagination; the header slot needs it in flow. */
.featured-products-wrapper.featured-products-wrapper .splide__pagination {
	align-items: center;
	bottom: auto;
	display: flex;
	gap: 12px;
	inset: auto;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	position: static;
}

.featured-products-wrapper.featured-products-wrapper .splide__pagination li {
	line-height: 0;
	margin: 0;
}

.featured-products-wrapper.featured-products-wrapper .splide__pagination__page {
	background: var(--gloves-color-neutral-04);
	border: 0;
	border-radius: 50%;
	height: 8px;
	margin: 0;
	opacity: 1;
	padding: 0;
	transform: none;
	width: 8px;
}

/*
 * The active dot keeps the 8px core and carries its ring as a box-shadow, so
 * the outer diameter is 16px — matching the 16px height of the Figma
 * "Navigation Dots" frame — without the ring taking layout space.
 */
.featured-products-wrapper.featured-products-wrapper .splide__pagination__page.is-active {
	background: var(--site-color-brand-blue);
	box-shadow: 0 0 0 2px var(--site-color-white), 0 0 0 4px var(--site-color-brand-blue);
	transform: none;
}

/**
 * Featured product card
 *
 * Values come from the Figma "Product Card 1" component. That instance is
 * scaled to 292.81px from a 290px base, so the reported sizes carry a ~1%
 * multiplier (16.16 / 26.25 / 14.14 / 22.21 / 8.08); the base values are used
 * here. Scoped to the Featured carousel because New Arrivals uses a wider card.
 */
.featured-products-wrapper.featured-products-wrapper .product-card {
	display: flex;
	flex-direction: column;
}

.featured-products-wrapper.featured-products-wrapper .product-image {
	aspect-ratio: 292 / 312;
	background: var(--site-color-display-grey);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.featured-products-wrapper.featured-products-wrapper .product-image>a {
	display: block;
	height: 100%;
	width: 100%;
}

/*
 * The stack gives product thumbnails 20px of padding on an #F5F5F5 background,
 * which reads as a white frame inside the grey tile. Both are cleared so the
 * tile colour is the only backdrop.
 *
 * The product JPEGs still carry a baked-in white background, so `multiply`
 * drops that white into the tile. Replace this with transparent PNG artwork
 * when it is available and the blend mode can go.
 */
.featured-products-wrapper.featured-products-wrapper .product-image img {
	background: transparent;
	display: block;
	height: 100%;
	mix-blend-mode: multiply;
	object-fit: contain;
	padding: 0;
	width: 100%;
}

/* Wishlist and add-to-cart are hover affordances over the image tile. */
.featured-products-wrapper.featured-products-wrapper .yith-wcwl-add-to-wishlist {
	margin: 0;
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 2;
}

.featured-products-wrapper.featured-products-wrapper .yith-wcwl-add-to-wishlist a {
	align-items: center;
	background: var(--site-color-white);
	border-radius: 50%;
	display: flex;
	height: 36px;
	justify-content: center;
	width: 36px;
}

/* Figma: 257.05x40.99 at left 17.88, top 255.74 inside the 292.81x312.7 tile. */
.featured-products-wrapper.featured-products-wrapper .cart-btn {
	bottom: 16px;
	left: 18px;
	opacity: 0;
	position: absolute;
	right: 18px;
	transition: opacity 0.15s ease;
	z-index: 2;
}

.featured-products-wrapper.featured-products-wrapper .product-card:hover .cart-btn,
.featured-products-wrapper.featured-products-wrapper .product-card:focus-within .cart-btn {
	opacity: 1;
}

.featured-products-wrapper.featured-products-wrapper .cart-btn .button {
	align-items: center;
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.0364);
	color: var(--site-color-neutral-01);
	display: flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	gap: 4px;
	height: 41px;
	justify-content: center;
	letter-spacing: -0.4px;
	line-height: 28px;
	margin: 0;
	padding: 8px 24px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.featured-products-wrapper.featured-products-wrapper .cart-btn .button:hover,
.featured-products-wrapper.featured-products-wrapper .cart-btn .button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/* Star glyphs rendered by gloves_online_star_rating_html(), independent of the
   WooCommerce star webfont. The fill layer is clipped to the rating percentage
   so partial ratings read correctly. */
/*
 * The track is every star, earned or not, with the fill layer clipped over the
 * earned portion. It carries the pale gold so an unrated product reads as an
 * empty gold rating rather than the five black stars it used to draw.
 */
/*
 * Stars and the "Based on N ratings." line read as one row, not a stack.
 *
 * `wp_autop` wraps the count span in a `<p>` on the shortcode-rendered
 * carousels (the catalog grid gets the helper's markup untouched), and that
 * paragraph's default 1em margins were what pushed the text onto its own line
 * and opened a gap beneath it. Zeroed below so both markup shapes lay out the
 * same. The wrap keeps the count under the stars on a narrow card rather than
 * letting it overflow the tile.
 */
.gloves-star-rating-wrapper {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.gloves-star-rating-wrapper p {
	margin: 0;
}

.gloves-star-rating__count {
	color: #6c7275;
	font-family: Inter, Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
}

.gloves-star-rating {
	color: var(--gloves-color-star-empty);
	display: inline-block;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
}

/* The earned stars, clipped to the rating percentage over the track above. */
.gloves-star-rating__fill {
	color: var(--gloves-color-star);
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	white-space: nowrap;
}

.featured-products-wrapper.featured-products-wrapper .rating {
	margin-top: 8px;
}

.featured-products-wrapper.featured-products-wrapper .rating .gloves-star-rating {
	font-size: 16px;
	margin: 0;
}

.featured-products-wrapper.featured-products-wrapper .product-title {
	color: var(--site-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 8px 0 0;
}

.featured-products-wrapper.featured-products-wrapper .product-title a {
	color: inherit;
	text-decoration: none;
}

.featured-products-wrapper.featured-products-wrapper .price {
	align-items: baseline;
	color: var(--gloves-color-price-sale);
	display: flex;
	flex-wrap: wrap;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	gap: 12px;
	letter-spacing: 0;
	line-height: 22px;
	margin-top: 8px;
}

/* WooCommerce emits <del> before <ins>; Figma leads with the sale price. */
.featured-products-wrapper.featured-products-wrapper .price ins {
	background: none;
	color: var(--gloves-color-price-sale);
	font-weight: 600;
	letter-spacing: 0;
	order: 1;
	text-decoration: none;
}

.featured-products-wrapper.featured-products-wrapper .price del {
	color: var(--gloves-color-price-was);
	font-weight: 500;
	/* Figma: -2% tracking at 14px. */
	letter-spacing: -0.28px;
	opacity: 1;
	order: 2;
	text-decoration: line-through;
}

/**
 * New Arrivals carousel
 *
 * Same band and card treatment as Featured, but Figma uses the wider "Product
 * Card 2" component: three 391.85px cards on a 32.23px gutter, 102px above the
 * title and 64px below the Shop All button.
 */
.new-arrivals-wrapper.new-arrivals-wrapper {
	margin: 0 auto;
	max-width: var(--gloves-contract-content-max);
	/* padding: 102px 0 64px; */
	width: 100%;
}

.new-arrivals-header.new-arrivals-header {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin: 0 0 48px;
	min-height: 44px;
}

.new-arrivals-title.new-arrivals-title {
	color: #000;
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0;
}

.new-arrivals-header.new-arrivals-header .new-arrivals-pagination {
	flex: 0 0 auto;
}

.new-arrivals-wrapper.new-arrivals-wrapper .splide__pagination {
	align-items: center;
	bottom: auto;
	display: flex;
	gap: 12px;
	inset: auto;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	position: static;
}

.new-arrivals-wrapper.new-arrivals-wrapper .splide__pagination li {
	line-height: 0;
	margin: 0;
}

.new-arrivals-wrapper.new-arrivals-wrapper .splide__pagination__page {
	background: var(--gloves-color-neutral-04);
	border: 0;
	border-radius: 50%;
	height: 8px;
	margin: 0;
	opacity: 1;
	padding: 0;
	transform: none;
	width: 8px;
}

.new-arrivals-wrapper.new-arrivals-wrapper .splide__pagination__page.is-active {
	background: var(--site-color-brand-blue);
	box-shadow: 0 0 0 2px var(--site-color-white), 0 0 0 4px var(--site-color-brand-blue);
	transform: none;
}

/* Card interior matches the Featured card; only the measure differs. */
.new-arrivals-wrapper.new-arrivals-wrapper .product-card {
	display: flex;
	flex-direction: column;
}

.new-arrivals-wrapper.new-arrivals-wrapper .product-image {
	aspect-ratio: 392 / 312;
	background: var(--site-color-display-grey);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.new-arrivals-wrapper.new-arrivals-wrapper .product-image>a {
	display: block;
	height: 100%;
	width: 100%;
}

.new-arrivals-wrapper.new-arrivals-wrapper .product-image img {
	background: transparent;
	display: block;
	height: 100%;
	mix-blend-mode: multiply;
	object-fit: contain;
	padding: 0;
	width: 100%;
}

.new-arrivals-wrapper.new-arrivals-wrapper .yith-wcwl-add-to-wishlist {
	margin: 0;
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 2;
}

.new-arrivals-wrapper.new-arrivals-wrapper .yith-wcwl-add-to-wishlist a {
	align-items: center;
	background: var(--site-color-white);
	border-radius: 50%;
	display: flex;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.new-arrivals-wrapper.new-arrivals-wrapper .cart-btn {
	bottom: 16px;
	left: 18px;
	opacity: 0;
	position: absolute;
	right: 18px;
	transition: opacity 0.15s ease;
	z-index: 2;
}

.new-arrivals-wrapper.new-arrivals-wrapper .product-card:hover .cart-btn,
.new-arrivals-wrapper.new-arrivals-wrapper .product-card:focus-within .cart-btn {
	opacity: 1;
}

.new-arrivals-wrapper.new-arrivals-wrapper .cart-btn .button {
	align-items: center;
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.0364);
	color: var(--site-color-neutral-01);
	display: flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	gap: 4px;
	height: 41px;
	justify-content: center;
	letter-spacing: -0.4px;
	line-height: 28px;
	margin: 0;
	padding: 8px 24px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.new-arrivals-wrapper.new-arrivals-wrapper .cart-btn .button:hover,
.new-arrivals-wrapper.new-arrivals-wrapper .cart-btn .button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

.new-arrivals-wrapper.new-arrivals-wrapper .rating {
	margin-top: 8px;
}

.new-arrivals-wrapper.new-arrivals-wrapper .rating .gloves-star-rating {
	font-size: 16px;
	margin: 0;
}

.new-arrivals-wrapper.new-arrivals-wrapper .product-title {
	color: var(--site-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 8px 0 0;
}

.new-arrivals-wrapper.new-arrivals-wrapper .product-title a {
	color: inherit;
	text-decoration: none;
}

.new-arrivals-wrapper.new-arrivals-wrapper .price {
	align-items: baseline;
	color: var(--gloves-color-price-sale);
	display: flex;
	flex-wrap: wrap;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	gap: 12px;
	letter-spacing: 0;
	line-height: 22px;
	margin-top: 8px;
}

.new-arrivals-wrapper.new-arrivals-wrapper .price ins {
	background: none;
	color: var(--gloves-color-price-sale);
	font-weight: 600;
	letter-spacing: 0;
	order: 1;
	text-decoration: none;
}

.new-arrivals-wrapper.new-arrivals-wrapper .price del {
	color: var(--gloves-color-price-was);
	font-weight: 500;
	letter-spacing: -0.28px;
	opacity: 1;
	order: 2;
	text-decoration: line-through;
}

.shop-all-button.shop-all-button {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

@media (max-width: 1024px) {
	#glove-guru+.mrn-content-builder__row--two-column-split>.mrn-layout-section>.mrn-layout-container {
		height: auto;
		padding-block: var(--gloves-contract-feature-inset-block);
	}

	#popular-brands+.mrn-content-builder__row--logos .mrn-logos-row__grid,
	#trusted-clients+.mrn-content-builder__row--logos .mrn-logos-row__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * The 160px Figma gutter is measured at the full 1240px shell. Below it the
	 * fixed gap starves the button column, so it steps down while the row is
	 * still two columns.
	 */
	#learn-more+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
		gap: 64px;
	}

	#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section::before {
		left: -140px;
	}
}

@media (max-width: 960px) {
	#glove-guru+.mrn-content-builder__row--two-column-split {
		--mrn-space-stack-lg: var(--mrn-space-stack-xl);
	}
}

@media (max-width: 767px) {

	#popular-brands+.mrn-content-builder__row--logos,
	#learn-more+.mrn-content-builder__row--two-column-split {
		padding: 64px 24px;
	}

	/*
	 * Split from the shared 64px/64px rule above.
	 *
	 * Only the heading-to-grid gap is set here. The row's own top padding is
	 * NOT touched in this block — a later, page-wide rule
	 * (`padding-block: var(--gloves-mobile-section-space)`, search this file
	 * for "One vertical rhythm for every section") re-sets every homepage
	 * row's top/bottom padding after this point, so a `padding-top` declared
	 * here would just be silently discarded. That later rule's version note
	 * has the actual fix for the gap above this row.
	 */
	#trusted-clients+.mrn-content-builder__row--logos .mrn-logos-row__header {
		margin-bottom: 24px;
	}

	#glove-guru+.mrn-content-builder__row--two-column-split>.mrn-layout-section>.mrn-layout-container {
		padding: 24px;
	}

	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split,
	#learn-more+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split,
	#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-grid--wpforms {
		gap: 40px;
		grid-template-columns: 1fr;
	}

	#glove-guru+.mrn-content-builder__row--two-column-split .mrn-image-content-row__media,
	#glove-guru+.mrn-content-builder__row--two-column-split figure {
		height: auto;
	}

	#glove-guru+.mrn-content-builder__row--two-column-split img {
		aspect-ratio: 16 / 10;
	}

	#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
	#popular-brands+.mrn-content-builder__row--logos .mrn-ui__heading,
	#trusted-clients+.mrn-content-builder__row--logos .mrn-ui__heading,
	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
	#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
	#newsletter+.mrn-content-builder__row--wpforms .mrn-ui__heading {
		font-size: 34px;
	}

	#popular-brands+.mrn-content-builder__row--logos .mrn-logos-row__grid,
	#trusted-clients+.mrn-content-builder__row--logos .mrn-logos-row__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--left,
	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right {
		height: auto;
		min-height: 0;
	}

	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
		height: auto;
	}

	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-basic-row__content-wrap {
		padding: 64px 24px;
	}

	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-image-content-row__media {
		aspect-ratio: 4 / 3;
	}

	#learn-more+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right .mrn-basic-row__link-wrap {
		gap: 16px;
	}

	#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-container {
		padding: 64px 24px;
	}

	#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section::before {
		bottom: -110px;
		height: 280px;
		left: -120px;
		opacity: 0.35;
		width: 280px;
	}

	/*
	 * Width only: the base `aspect-ratio` keeps the height in step, and a `top`
	 * here would over-constrain the `bottom` anchor and win, lifting the pair
	 * off the band's lower edge.
	 */
	#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section::after {
		opacity: 0.35;
		right: 0;
		width: 180px;
	}
}


/**
 * Shop by Categories
 *
 * Rendered by the `[shop_categories_grid]` shortcode inside a Body Text row.
 *
 * Figma: 1440x773 band with 48px above and below, a centred 44px title, 48px to
 * a six-up grid of 195.7x169.39 tiles on a 13.16px gutter and 52px rows, then
 * 48px to the centred Shop All button.
 */
.scg-wrapper {
	margin: 0 auto;
	max-width: var(--gloves-contract-content-max);
	/* padding: 48px 0; */
	width: 100%;
}

.scg-title {
	color: #23262f;
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0 0 48px;
	text-align: center;
}

.scg-grid {
	column-gap: 13.16px;
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: 52px;
}

.scg-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scg-item a {
	color: inherit;
	display: block;
	text-align: center;
	text-decoration: none;
}

.scg-image {
	aspect-ratio: 195.7 / 169.39;
	background: var(--site-color-display-grey);
	overflow: hidden;
	padding: 0;
}

/*
 * As on the product cards, the stack pads thumbnails on an #F5F5F5 background
 * and the source JPEGs carry a baked-in white. Both are cleared so the tile
 * colour shows; drop the blend mode once transparent artwork is available.
 */
.scg-image img {
	background: transparent;
	display: block;
	height: 100%;
	mix-blend-mode: multiply;
	object-fit: contain;
	padding: 0;
	width: 100%;
}

/* Figma centres a 140.34px label well inside the 195.7px tile. */
.scg-name {
	color: var(--site-color-neutral-07);
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
	margin: 13.16px auto 0;
	max-width: 140.34px;
	transition: color 0.2s ease;
}

/*
 * The label carries its own colour, so hovering the anchor does not reach it
 * through inheritance — it has to be named. Keyed on the anchor rather than the
 * list item so the keyboard focus state gets the same treatment as the pointer
 * one, and the tile's image zoom below stays on `.scg-item`.
 */
.scg-item a:hover .scg-name,
.scg-item a:focus-visible .scg-name {
	color: var(--site-color-brand-blue);
}

.scg-item:hover img {
	transform: scale(1.05);
	transition: 0.3s;
}

/*
 * The label line-box adds 1.5em of leading below the last grid row, so the
 * margin is reduced by that much to land on Figma's 48px optical gap.
 */
.scg-actions {
	display: flex;
	justify-content: center;
	margin-top: calc(48px - 1.5em);
}

@media (max-width: 1200px) {
	.scg-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 992px) {
	.scg-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.scg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}

	.scg-title {
		font-size: 34px;
		line-height: 1.1;
	}
}

@media (max-width: 480px) {
	.scg-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}





/* carousel */

.featured-products-wrapper {
	margin: 60px auto;
}

.featured-header {

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 35px;

}

.featured-title {

	font-size: 52px;

	font-weight: 700;

	line-height: 1;

	margin: 0;

}

.slider-pagination {

	display: flex;

	align-items: center;

}

.slider-pagination .splide__pagination {

	position: static;

	display: flex;

	gap: 8px;

	padding: 0;

}

.slider-pagination .splide__pagination__page {

	width: 9px;

	height: 9px;

	background: #8c8c8c;

	opacity: 1;

	margin: 0;

	border-radius: 50%;

}

.slider-pagination .splide__pagination__page.is-active {

	background: #4F46E5;

	transform: scale(1.2);

}

.product-card img {

	width: 100%;

	background: #f5f5f5;

	padding: 20px;

	transition: .3s;

}

.product-card img:hover {

	transform: scale(1.03);

}

.rating:empty {
	display: none;
}

.rating {

	margin-top: 15px;

}

.product-id-label {
	color: #6c7275;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	margin-top: 12px;
	margin-bottom: 0;
	padding: 0;
	line-height: 1.3;
}

.product-title {

	margin: 12px 0;

	font-size: 18px;

	line-height: 1.5;

}

.product-title a {

	color: #222;

	text-decoration: none;

}

.price {

	font-size: 18px;

	margin-bottom: 15px;

}

.price del {

	color: #999;

}

.price ins {

	color: #e63946;

	text-decoration: none;

}

.cart-btn .button {

	width: 100%;

	text-align: center;

	background: #4F46E5;

	color: #fff;

	border-radius: 8px;

	padding: 12px;

}

.cart-btn .button:hover {

	background: #3730A3;

}


.product-image {
	position: relative;
	overflow: hidden;
}

/*
 * Wishlist control.
 *
 * Figma puts it in the card's top-right corner: a 32px white disc inset 16px,
 * carrying the heart glyph in Neutral/04.
 *
 * Current YITH ships a block-based markup — `.yith-add-to-wishlist-button-block`
 * wrapping `.yith-wcwl-add-to-wishlist-button` — which is not what the older
 * `.yith-wcwl-add-to-wishlist` selectors match, so both generations are covered
 * here. The plugin's own rules set `width: max-content` and `margin: 7px auto`
 * on the wrapper, which is why it sat in flow under the image.
 */
.product-image .yith-wcwl-add-to-wishlist,
.product-image .yith-add-to-wishlist-button-block,
.gloves-catalog .product-image .yith-wcwl-add-to-wishlist,
.gloves-catalog .product-image .yith-add-to-wishlist-button-block {
	position: absolute;
	top: 16px;
	right: 16px;
	bottom: auto;
	left: auto;
	margin: 0;
	width: auto;
	z-index: 20;
	opacity: 1;
}

.product-image img {
	display: block;
}

.yith-wcwl-add-to-wishlist .feedback,
.yith-wcwl-add-to-wishlist .yith-wcwl-add-button span,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse span,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse span,
.product-image .yith-wcwl-add-to-wishlist-button__label,
.product-image .yith-add-to-wishlist-button-block .feedback {
	display: none !important;
}

/* Figma: 32.31px disc, drop shadow Y 8.08 / blur 16.16 / spread -8.08 at 12%. */
.product-image .yith-wcwl-add-to-wishlist a,
.product-image .yith-wcwl-add-to-wishlist button,
.product-image .yith-wcwl-add-to-wishlist .add_to_wishlist,
.product-image .yith-wcwl-add-to-wishlist-button,
.gloves-catalog .product-image .yith-wcwl-add-to-wishlist a,
.gloves-catalog .product-image .yith-wcwl-add-to-wishlist button,
.gloves-catalog .product-image .yith-wcwl-add-to-wishlist .add_to_wishlist {
	width: 32px;
	height: 32px;
	min-width: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	background: var(--site-color-white);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 8px 16px -8px rgba(15, 15, 15, .12);
	text-decoration: none;
	position: relative;
	cursor: pointer;
}

/*
 * The supplied Figma heart replaces whatever glyph YITH ships, so the icon is
 * independent of the plugin's own SVG set and stroke styling.
 */
.product-image .yith-wcwl-add-to-wishlist a::before,
.product-image .yith-wcwl-add-to-wishlist button::before,
.product-image .yith-wcwl-add-to-wishlist .add_to_wishlist::before,
.product-image .yith-wcwl-add-to-wishlist-button::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 19px !important;
	height: 15px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--gloves-color-neutral-04) !important;
	-webkit-mask: var(--gloves-heart-outline) center / 19px 15px no-repeat !important;
	mask: var(--gloves-heart-outline) center / 19px 15px no-repeat !important;
}

/* The added state keeps the same disc; only the heart fills with red. */
.product-image .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--added::before,
.product-image .yith-wcwl-add-to-wishlist-button.exists::before,
.product-image .yith-wcwl-add-to-wishlist a.added::before,
.product-image .yith-wcwl-add-to-wishlist a.exists::before,
.product-image .yith-wcwl-add-to-wishlist button.added::before,
.product-image .yith-wcwl-add-to-wishlist button.exists::before,
.product-image .yith-wcwl-add-to-wishlist .add_to_wishlist.added::before,
.product-image .yith-wcwl-add-to-wishlist .add_to_wishlist.exists::before,
.product-image .yith-wcwl-wishlistaddedbrowse a::before,
.product-image .yith-wcwl-wishlistexistsbrowse a::before,
.product-image .yith-wcwl-wishlistaddedbrowse button::before,
.product-image .yith-wcwl-wishlistexistsbrowse button::before {
	background: var(--gloves-color-price-sale) !important;
	-webkit-mask-image: var(--gloves-heart-solid) !important;
	mask-image: var(--gloves-heart-solid) !important;
}

/* Hide the plugin's own glyph and label so only the Figma heart shows. */
.product-image .yith-wcwl-add-to-wishlist a i,
.product-image .yith-wcwl-add-to-wishlist a svg,
.product-image .yith-wcwl-add-to-wishlist a img,
.product-image .yith-wcwl-add-to-wishlist button i,
.product-image .yith-wcwl-add-to-wishlist button svg,
.product-image .yith-wcwl-add-to-wishlist button img,
.product-image .yith-wcwl-add-to-wishlist-button-icon,
.product-image .yith-wcwl-add-to-wishlist-button__label {
	display: none;
}



/* new arrivals */

.new-arrivals-wrapper {
	margin: 70px auto;
}

.new-arrivals-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 35px;
}

.new-arrivals-title {
	font-size: 48px;
	font-weight: 700;
	margin: 0;
}

.new-arrivals-pagination .splide__pagination {
	position: static;
	display: flex;
	gap: 8px;
}

.new-arrivals-pagination .splide__pagination__page {
	width: 8px;
	height: 8px;
	background: #999;
	opacity: 1;
}

.new-arrivals-pagination .splide__pagination__page.is-active {
	background: #4338ca;
	transform: scale(1.2);
}

.shop-all-button {
	text-align: center;
	margin-top: 40px;
}

.shop-all-btn {
	display: inline-block;
	padding: 14px 40px;
	background: #4338ca;
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	transition: .3s;
}

.shop-all-btn:hover {
	background: #312e81;
	color: #fff;
}

/*
 * Keep "Select Options" on one line once the cards go two-up.
 *
 * The desktop button is 16px type on a 24px horizontal inset, which needs
 * about 106px of measure. Two cards across a 390px phone leave the button
 * 138px wide, so only 90px of that is text and the label broke after
 * "Select" — and because the button is pinned to 41px while its line-height
 * is 28px, the second line overflowed the box rather than growing it.
 *
 * The type and the inset are both brought in so the label fits at 360px, the
 * narrowest phone worth supporting, and `nowrap` holds that: a longer label
 * from a translation or a different product type now runs past the button's
 * padding, which is visible in review, instead of silently re-breaking the
 * card. Scoped to 480px because that is where Splide tightens this carousel
 * to a 12px gap; above it the cards are wide enough for the desktop values.
 */
@media (max-width: 480px) {
	.new-arrivals-wrapper.new-arrivals-wrapper .cart-btn .button {
		font-size: 14px;
		line-height: 24px;
		padding: 8px 12px;
		white-space: nowrap;
	}
}

/**
 * Figma footer
 *
 * Frame 841 is a 1240px row, 336px tall, laid out space-between inside the
 * 1440 frame, so 100px clear of each edge, with 80px above it and 164px below.
 * The rendered structure comes from the child `footer.php` override; the
 * colours and the surrounding row spacing still come from Site Styles.
 */
/*
 * WordPress puts `page` on the body element as well as on the article, so the
 * parent's `.post, .page { margin: 0 0 1.5em }` — written for the article —
 * also lands on body and leaves a strip of page background below the
 * full-bleed copyright bar. A bare `body` selector carries no specificity and
 * loses to that class; the attribute selector matches it and wins on order.
 */
body[class] {
	margin-bottom: 0;
}

/*
 * The shell leaves trailing space below the article — 96px of padding on the
 * main element and a 24px article margin — which shows as a band of page
 * background between the last full-bleed row and the footer. Figma runs the
 * footer straight on from the row above it. Scoped to the front-page shell so
 * interior templates keep their own rhythm until they are designed.
 */
.site-main--front-page {
	padding-bottom: 0;
}

.site-main--front-page>article {
	margin-bottom: 0;
}

/*
 * The parent hangs the footer surface and link colours off
 * `.mrn-theme-hf-layout-grid`, but that class also carries its positioned grid.
 * This footer supplies its own layout, so the class is left off and the same
 * Site Styles variables are consumed here instead. The options screen stays
 * authoritative for colour; only the arrangement is owned by the child.
 */
.gloves-footer {
	background-color: var(--mrn-theme-hf-bg-color, transparent);
	color: var(--mrn-theme-hf-font-color, inherit);
	display: block;
	/*
	 * The parent pushes the footer down with a section-sized top margin, which
	 * shows as a band of page background above the grey surface. Figma runs the
	 * footer straight on from the row above it, so the outer spacing is zeroed
	 * and the 80/164 clearance inside `__inner` is the only spacing here.
	 */
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

.gloves-footer a {
	color: var(--mrn-theme-hf-link-color, currentColor);
}

.gloves-footer a:hover,
.gloves-footer a:focus-visible {
	color: var(--mrn-theme-hf-link-hover-color, var(--mrn-theme-hf-link-color, currentColor));
}

/*
 * Figma sets the columns explicitly rather than distributing them: a 343px
 * brand block, 99px of clearance, then the menu group on a 32px rhythm with the
 * contact column fixed at 197px. `space-between` was spreading the leftover
 * measure into the gaps instead, which is why they read unevenly.
 *
 * The 99px is carried as the 32px track gap plus a 67px margin, so a single
 * `gap` still governs the rhythm between the menu columns.
 */
.gloves-footer__inner {
	box-sizing: border-box;
	display: flex;
	gap: 32px;
	justify-content: flex-start;
	margin: 0 auto;
	max-width: calc(1240px + 200px);
	padding: 80px 100px 164px;
	width: 100%;
}

.gloves-footer__column {
	min-width: 0;
}

/* Figma: the 130px mark sits 33px above the 343px profile measure. */
.gloves-footer__column--brand {
	flex: 0 0 343px;
	margin-right: 67px;
}

.gloves-footer__column--contact {
	flex: 0 0 197px;
}

/*
 * Figma runs the menu group out to the right edge of the 1240 measure. Figma
 * states a width only for the contact column, so rather than pinning numbers
 * the file does not give, the three menu columns share whatever is left after
 * the 343px brand block, the 99px lead-in and the 32px gaps. That keeps the
 * stated gaps exact while the last column finishes flush right.
 */
.gloves-footer__column--menu {
	flex: 1 1 auto;
}

.gloves-footer__logo {
	display: block;
	width: 130px;
}

.gloves-footer__logo img {
	display: block;
	height: auto;
	width: 100%;
}

.gloves-footer__profile {
	margin: 33px 0 0;
	max-width: 343px;
}

/*
 * The heading is a button so the column can collapse on mobile. Above the
 * breakpoint it is stripped back to plain text and disabled by the script, so
 * desktop behaves exactly as before.
 */
.gloves-footer__toggle {
	all: unset;
	color: inherit;
	display: block;
	font: inherit;
	width: 100%;
}

.gloves-footer__chevron {
	display: none;
}

/* Figma B2: Inter Semi Bold 16/26, -0.1px, 24px above the first row. */
.gloves-footer__heading {
	color: inherit;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 0 0 24px;
}

.gloves-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Figma B3: Inter Regular 14/175%, on a 16px rhythm between rows. */
.gloves-footer__profile,
.gloves-footer__list,
.gloves-footer__list a,
.gloves-footer__address {
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.75;
}

.gloves-footer__list li+li {
	margin-top: 16px;
}

.gloves-footer__list a {
	text-decoration: none;
}

.gloves-footer__list a:not(.gloves-footer__list--contact a):hover,
.gloves-footer__list a:not(.gloves-footer__list--contact a):focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * The contact rows lead with a glyph. `align-items: start` keeps the icon on
 * the first line when the address wraps to several lines rather than centring
 * it against the whole block.
 */
.gloves-footer__list--contact .gloves-footer__item {
	align-items: flex-start;
	display: flex;
	gap: 12px;
}

.gloves-footer__list--contact .gloves-footer__item>a {
	align-items: flex-start;
	display: flex;
	gap: 12px;
}

/*
 * Each glyph sits inside its row's anchor and paints with `currentColor`, so
 * the address and phone icons pick up the link hover exactly as the social one
 * does rather than staying fixed on the brand blue.
 */
.gloves-footer__icon {
	color: inherit;
	flex: 0 0 auto;
	/* Optically centre the glyph on the 24.5px first line of B3 copy. */
	margin-top: 2px;
	transition: color 0.15s ease;
}

.gloves-footer__list--contact a {
	color: var(--mrn-theme-hf-link-color, currentColor);
	text-decoration: none;
}

.gloves-footer__list--contact a:hover,
.gloves-footer__list--contact a:focus-visible {
	color: var(--mrn-theme-hf-link-hover-color, var(--mrn-theme-hf-link-color, currentColor));
}

/* Underline only the label, never the glyph beside it. */
.gloves-footer__list--contact a:hover .gloves-footer__address,
.gloves-footer__list--contact a:hover>span,
.gloves-footer__list--contact a:focus-visible .gloves-footer__address,
.gloves-footer__list--contact a:focus-visible>span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * `<address>` carries a default block margin, which stacks on top of the 16px
 * row rhythm and opens an oversized gap before the phone row.
 */
.gloves-footer__address {
	margin-bottom: 0;
}

.gloves-footer__address span {
	display: block;
}

/*
 * Figma closes the footer with a full-bleed brand-blue bar. It sits outside the
 * padded content block, so its own inner element carries the same 1240px
 * measure to keep the copyright flush with the logo above it.
 */
.gloves-footer__bar {
	background: var(--site-color-brand-blue);
	color: var(--gloves-color-neutral-03);
	width: 100%;
}

/*
 * Figma runs a fixed 1120px row here, space-between, on 32px of clearance above
 * and below. It shares the 100px left gutter with the columns above rather than
 * being centred, which is what leaves the 120px of slack on the right: the row
 * stops at 1220 inside the 1240 measure. The asymmetric padding reproduces that
 * exactly, and the breakpoint below returns it to even gutters.
 */
.gloves-footer__bar-inner {
	align-items: center;
	box-sizing: border-box;
	column-gap: 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	max-width: calc(1240px + 200px);
	padding: 32px 220px 32px 100px;
	row-gap: 8px;
	width: 100%;
}

/*
 * The copyright and the links are one group on the left of the space-between
 * row, separated by a rule. Figma sets 16px each side of that rule, which is
 * the 32px it marks between the end of the copyright and "Privacy Policy".
 */
.gloves-footer__bar-copy {
	align-items: center;
	column-gap: 16px;
	display: flex;
	flex-wrap: wrap;
	row-gap: 8px;
}

.gloves-footer__bar-links {
	border-left: 1px solid currentColor;
	line-height: 1;
	padding-left: 16px;
}

/* Figma B3 on the bar: Inter Regular 14/175%, Neutral/03. */
.gloves-footer__copyright,
.gloves-footer__legal-text {
	color: inherit;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.75;
	margin: 0;
}

.gloves-footer__bar-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The bar links use Figma's Grey, a shade lighter than the copyright line. */
.gloves-footer__bar a {
	color: var(--site-color-grey);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
	text-decoration: none;
}

.gloves-footer__bar a.gloves-footer__credit {
	color: var(--gloves-color-neutral-03);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gloves-footer__bar a:hover,
.gloves-footer__bar a:focus-visible {
	color: var(--site-color-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 1240px) {

	/* Tablet keeps a roomier edge; the 15px page gutter starts at the mobile
	   breakpoint below. */
	.gloves-footer__inner {
		column-gap: 32px;
		flex-wrap: wrap;
		padding-inline: 24px;
	}

	.gloves-footer__inner>.gloves-footer__column {
		flex: 1 1 200px;
	}

	/* Below the design width the fixed tracks and the 99px lead-in are dropped
	   so the columns can wrap and share the space evenly. */
	.gloves-footer__column--brand {
		flex-basis: 100%;
		margin-right: 0;
	}

	/* Below the design width the 120px of right-hand slack stops earning its
	   keep, so the bar returns to even gutters. */
	.gloves-footer__bar-inner {
		padding-inline: 24px;
	}
}

@media (max-width: 767px) {

	.gloves-footer__inner,
	.gloves-footer__bar-inner {
		padding-inline: var(--gloves-mobile-gutter);
	}

	.gloves-footer__inner {
		flex-direction: column;
		gap: 40px;
		padding-block: 48px 64px;
	}

	.gloves-footer__inner>.gloves-footer__column {
		flex: 0 0 auto;
	}
}


/*
 * Logo marquee — Popular Brands and Trusted Clients.
 *
 * Both bands run as one scrolling line at every width. They used to convert
 * below 782px only and sit as a static wall above it; the parent's wrapping
 * grid is now replaced on all screens.
 *
 * The tiles are repeated in script until one half of the track covers the
 * window, so translating by exactly half (-50%) loops seamlessly with no gap at
 * the wrap. The gutter is carried as margin on each tile rather than `gap`, or
 * -50% would land half a gutter out of step.
 *
 * The duration below is a floor only — the script overwrites it inline with a
 * value derived from the finished track length, so both bands travel at the
 * same pixels-per-second however many logos each one holds.
 */
@keyframes gloves-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.gloves-marquee-window {
	overflow: hidden;
	width: 100%;
}

/*
 * Scoped to match the existing per-row grid rules, which carry an id and three
 * classes; a bare `.gloves-marquee` would lose to them and the band would stay
 * a two-column grid.
 */
#popular-brands+.mrn-content-builder__row--logos .mrn-logos-row__grid.gloves-marquee,
#trusted-clients+.mrn-content-builder__row--logos .mrn-logos-row__grid.gloves-marquee {
	animation: gloves-marquee-scroll 26s linear infinite;
	display: flex;
	gap: 0;
	grid-template-columns: none;
	transform: translateX(0);
	width: max-content;
}

#popular-brands+.mrn-content-builder__row--logos .gloves-marquee>*,
#trusted-clients+.mrn-content-builder__row--logos .gloves-marquee>* {
	flex: 0 0 auto;
	margin-right: 16px;
	width: 163px;
}

.gloves-marquee-window:hover .gloves-marquee,
.gloves-marquee-window:focus-within .gloves-marquee {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.gloves-marquee {
		animation: none;
	}
}





/*!
Catalog page styles for the Gloves Online child theme.

Covers the WooCommerce product archive: breadcrumbs, the category header band
and info box, the filter rail, the product grid and cards, the loading state,
and pagination.

Loaded only on the shop and product taxonomy archives, by
gloves_online_catalog_enqueue_assets() in inc/catalog-filters.php.

Product cards deliberately reuse the `.product-card` / `.product-image` /
`.rating` / `.product-title` / `.price` class names already styled for the home
page carousels in style.css. Only the catalog-specific differences live here.
*/
.gloves-catalog {
	color: var(--site-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
}

/* Breadcrumbs
--------------------------------------------- */
.gloves-catalog__breadcrumbs,
.gloves-search__breadcrumbs {
	padding: 24px 0;
}

.gloves-breadcrumbs,
.mrn-breadcrumbs__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 16px;
	line-height: 1.75;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gloves-breadcrumbs__item,
.mrn-breadcrumbs__item {
	align-items: center;
	display: inline-flex;
	gap: 10px;
}

/* The `:visited` pairs are load bearing: the parent theme's global
   `a:visited` rule (0,1,1) outranks a plain class selector and turned
   visited crumbs purple. */
.gloves-breadcrumbs__link,
.gloves-breadcrumbs__link:visited,
.mrn-breadcrumbs__link,
.mrn-breadcrumbs__link:visited {
	align-items: center;
	color: #737373;
	display: inline-flex;
	text-decoration: none;
}

.gloves-breadcrumbs__link:hover,
.gloves-breadcrumbs__link:focus-visible,
.mrn-breadcrumbs__link:hover,
.mrn-breadcrumbs__link:focus-visible {
	color: var(--site-color-brand-blue);
	text-decoration: none;
}

/* Figma's B3 crumb tone; #737373 has no matching neutral token to reuse. */
.gloves-breadcrumbs__current,
.mrn-breadcrumbs__current {
	color: #737373;
	font-weight: 400;
}

.gloves-breadcrumbs__separator,
.mrn-breadcrumbs__separator {
	color: #737373;
	display: inline-flex;
}

.mrn-breadcrumbs__item:first-child .mrn-breadcrumbs__link {
	font-size: 0;
	height: 16px;
	width: 16px;
}

/*
 * Breadcrumbs on a phone.
 *
 * The trail is a wrapping flex row, and on a product page it can run to five
 * crumbs — Home, Shop, a category, a sub-category, then the product name. At
 * phone width every one of them wrapped onto its own line, so the trail read as
 * a stacked menu and pushed the product itself most of a screen down.
 *
 * It stays a trail here: one line that scrolls sideways, which is the pattern
 * shoppers already know from other stores. Nothing is hidden — the deepest
 * crumbs are the ones off-screen, and they are the ones a visitor is least
 * likely to want. The current page is allowed to ellipsis rather than drag the
 * row out to the length of a long product name; it is the page heading
 * immediately below, so it is not the crumb anyone reads.
 */
@media (max-width: 782px) {

	.gloves-breadcrumbs,
	.mrn-breadcrumbs__list {
		flex-wrap: nowrap;
		font-size: 13px;
		gap: 8px;
		overflow-x: auto;
		/* Trackpads and touch surfaces scroll it; the bar itself is noise. */
		scrollbar-width: none;
	}

	.gloves-breadcrumbs::-webkit-scrollbar,
	.mrn-breadcrumbs__list::-webkit-scrollbar {
		display: none;
	}

	/*
	 * The trail wraps onto a second line rather than running off the side.
	 *
	 * The list is `nowrap` at every width, which on a phone is 542px of crumbs
	 * inside a 360px measure: Home, the two category steps and their chevrons
	 * used the whole line, so the current item began past the right edge and was
	 * cut off entirely — the ellipsis below never got the chance to do its job
	 * because the element it truncates was already off-screen.
	 *
	 * Wrapping is the fix rather than a horizontal scroller: the trail is four
	 * short items, so it costs one extra line, and a crumb a shopper has to
	 * swipe sideways to find is barely better than one they cannot see.
	 */
	.gloves-breadcrumbs,
	.mrn-breadcrumbs__list {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.gloves-breadcrumbs__item,
	.mrn-breadcrumbs__item {
		flex: 0 0 auto;
		gap: 6px;
	}

	.gloves-breadcrumbs__link,
	.mrn-breadcrumbs__link {
		white-space: nowrap;
	}

	/*
	 * The product name is the one item that can be longer than the whole line on
	 * its own, so it keeps the ellipsis. The cap is raised now that it starts at
	 * the beginning of its own line instead of wherever the row left off.
	 */
	.gloves-breadcrumbs__current,
	.mrn-breadcrumbs__current {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The chevrons are drawn at 24px, which is oversized beside 13px text. */
	.gloves-breadcrumbs__separator svg,
	.mrn-breadcrumbs__separator svg {
		height: 16px;
		width: 16px;
	}

	.gloves-catalog__breadcrumbs,
	.gloves-search__breadcrumbs,
	.gloves-page__breadcrumbs,
	.single-product .gloves-product__breadcrumbs {
		padding: 16px 0;
	}
}

.mrn-breadcrumbs__item:first-child .mrn-breadcrumbs__link::before {
	background: currentColor;
	content: "";
	height: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 6.5 8 1.5l6.5 5V14a.5.5 0 0 1-.5.5h-3.5V10h-3v4.5H2a.5.5 0 0 1-.5-.5V6.5Z' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 6.5 8 1.5l6.5 5V14a.5.5 0 0 1-.5.5h-3.5V10h-3v4.5H2a.5.5 0 0 1-.5-.5V6.5Z' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 16px;
}

/* Category header band
--------------------------------------------- */
.gloves-catalog__header {
	background: var(--site-color-display-grey, #f5f5f5);
	padding: 80px 0;
}

/*
 * `start`, not `center`. On a category that also has an info card the card is
 * the taller cell, and centring pushed the copy — and with it the page title —
 * down to sit 57px below the breadcrumb instead of 48. Categories without a
 * card were unaffected, so the distance moved about the site depending on the
 * category. Both cells now begin at the top of the row.
 */
.gloves-catalog__header-inner {
	align-items: start;
	display: grid;
	gap: 60px;
	grid-template-columns: minmax(0, 1fr);
}

/* Figma pairs a fixed 814px copy column with the info card, splitting the
   remaining 1240px row width to the card. The card only exists when the
   category actually has info-box content. */
.gloves-catalog__header--with-info .gloves-catalog__header-inner {
	grid-template-columns: 814px minmax(0, 1fr);
}

.gloves-catalog__title {
	color: var(--site-color-dark-charcoal, #141718);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0 0 12px;
}

.gloves-catalog__description {
	color: #000;
	font-size: 16px;
	line-height: 2;
}

.gloves-catalog__description p {
	margin: 0 0 20px;
}

.gloves-catalog__description p:last-child {
	margin-bottom: 0;
}

.gloves-catalog__description strong {
	font-weight: 700;
}

.gloves-catalog__info {
	background: var(--site-color-white, #fff);
	padding: 48px;
}

.gloves-catalog__info-text {
	color: var(--site-color-dark-charcoal, #141718);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 0;
}

/*
 * The buttons wrap, at every width.
 *
 * These labels are term fields, so their length is whatever the site owner
 * types — "See this link for useful information on Parade Gloves" is a real
 * one. The row was `nowrap` with `flex-shrink: 0` on the button and
 * `white-space: nowrap` on its label, which is three separate refusals to
 * yield: the row would not break, the button would not narrow, and the text
 * would not wrap, so a long label ran straight out through the side of the
 * white card. That happened on desktop as well as on a phone — the info card
 * is only about 380px wide there too.
 *
 * Letting the row wrap and the label break keeps the button inside the card at
 * any label length. `max-width` is the backstop for a single unbroken word,
 * which would otherwise still push past the edge.
 */
.gloves-catalog__info-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.gloves-catalog__info-link,
.gloves-catalog__info-link:visited {
	background: var(--site-color-brand-blue);
	border-radius: 8px;
	color: var(--site-color-white, #fff);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	justify-content: center;
	line-height: 22px;
	max-width: 100%;
	padding: 9px 16px;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease;
}

.gloves-catalog__info-link:hover,
.gloves-catalog__info-link:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white, #fff);
}

/* Rail and results
--------------------------------------------- */
.gloves-catalog__body {
	align-items: start;
	display: grid;
	gap: 61px;
	grid-template-columns: 260px minmax(0, 1fr);
	padding: 56px 0;
}

/*
 * The rail renders nothing at all when an archive has neither subcategories nor
 * brands to offer. Without this the grid auto-places the results into the 260px
 * rail track and the products render into a sliver of the page.
 */
.gloves-catalog__body>.gloves-catalog__results:first-child {
	grid-column: 1 / -1;
}

/* The parent shell adds its own generic bottom spacer to every page's <main>
   (--mrn-shell-section-space, currently 96px), which stacks on top of the
   catalog's own 56px bottom padding above. Zeroing it out here, scoped to
   only pages containing the catalog, keeps the total gap to pagination the
   intended 56px without touching the parent theme. */
main.site-main:has(.gloves-catalog) {
	--mrn-shell-section-space: 0px;
}

/* Filter rail
--------------------------------------------- */
.gloves-catalog__selected:empty {
	display: none;
}

.gloves-selected {
	margin-bottom: 32px;
}

.gloves-selected__head {
	align-items: center;
	border-bottom: 0.5px solid #b5b5b5;
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
}

/* h3 gets a global serif font from the site's typography settings; this is a
   sans-serif label per Figma, so font-family has to be set directly here
   rather than relying on inheritance from .gloves-catalog, since an element
   selector like `h3` always beats an inherited value regardless of specificity. */
.gloves-selected__title {
	color: #000;
	font-family: Inter, Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.54px;
	line-height: 24px;
	margin: 0;
}

.gloves-selected__clear,
.gloves-selected__clear:visited {
	color: #000;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.28px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gloves-selected__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.gloves-selected__chip,
.gloves-selected__chip:visited {
	align-items: center;
	background: #f3f3f3;
	border-radius: 4px;
	color: #000;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	line-height: 1.75;
	padding: 7px 12px;
	text-decoration: none;
	transition: background 0.2s ease;
	width: max-content;
}

.gloves-selected__chip:hover,
.gloves-selected__chip:focus-visible {
	background: #e6e6e6;
	color: #000;
}

.gloves-selected__chip-remove {
	color: #000;
	display: inline-flex;
}

/* The 24px gap between one section's content and the next section's heading
   lives entirely here, on the trailing edge, so it never has to be split
   between two elements (which is what caused the uneven above/below gap
   around a section previously). */
.gloves-filter {
	padding-bottom: 24px;
}

.gloves-filter__summary {
	align-items: center;
	border-bottom: 0.5px solid #b5b5b5;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding-bottom: 12px;
	padding-top: 12px;
}

/* Only the first section needs its own top inset; every later section's
   spacing already comes from the section before it via .gloves-filter's
   trailing padding-bottom, so adding this again would double it up. */
.gloves-filter+.gloves-filter .gloves-filter__summary {
	padding-top: 0;
}

/* Safari still paints the default disclosure triangle without this. */
.gloves-filter__summary::-webkit-details-marker {
	display: none;
}

.gloves-filter__title {
	color: var(--site-color-dark-charcoal, #141718);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
}

.gloves-filter__chevron {
	color: var(--site-color-dark-charcoal, #141718);
	display: inline-flex;
	transition: transform 0.2s ease;
}

/* The chevron points up while open, matching the Figma accordion states. */
.gloves-filter:not([open]) .gloves-filter__chevron {
	transform: rotate(180deg);
}

.gloves-filter__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.gloves-filter__item {
	align-items: center;
	display: flex;
	gap: 10px;
}

/* Chrome ignores author border/background on a native checkbox unless the
   default widget paint is removed first; appearance:none also means the
   checked glyph has to be drawn by hand instead of via accent-color. */
.gloves-filter__checkbox {
	appearance: none;
	background: var(--site-color-white, #fff);
	block-size: 16px;
	border: 0.5px solid #d3d3d3;
	border-radius: 3px;
	flex: 0 0 auto;
	inline-size: 16px;
	margin: 0;
	position: relative;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.gloves-filter__checkbox:checked {
	background: var(--site-color-brand-blue);
	border-color: var(--site-color-brand-blue);
}

.gloves-filter__checkbox:checked::after {
	block-size: 9px;
	border: solid var(--site-color-white, #fff);
	border-width: 0 1.5px 1.5px 0;
	content: "";
	inline-size: 5px;
	inset-block-start: 1px;
	inset-inline-start: 4px;
	position: absolute;
	transform: rotate(45deg);
}

.gloves-filter__label,
a.gloves-filter__label,
a.gloves-filter__label:visited {
	align-items: baseline;
	color: #000;
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 500;
	gap: 6px;
	line-height: 24px;
	text-decoration: none;
	transition: color 0.15s ease;
}

a.gloves-filter__label:hover,
a.gloves-filter__label:focus-visible {
	color: var(--site-color-brand-blue, #3333cc);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gloves-filter__item.is-active .gloves-filter__label,
a.gloves-filter__label.is-active,
.gloves-filter__item.is-active .gloves-filter__name,
a.gloves-filter__label.is-active .gloves-filter__name {
	font-weight: 700 !important;
	color: #000 !important;
}

.gloves-filter__count {
	color: #666666;
	font-size: 12px;
	line-height: 18px;
}

/* "See More" toggle
   -------------------
   Underlined text link rather than a filled control: it reveals more of the
   list the shopper is already reading, it does not apply anything. Hidden
   above the mobile breakpoint, where the rail has room for the full list, and
   hidden without JavaScript too (the `hidden` attribute stays on the button)
   since nothing is collapsed in that case. */
.gloves-filter__more {
	align-items: center;
	background: none;
	border: 0;
	color: #000;
	cursor: pointer;
	display: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	letter-spacing: -0.28px;
	line-height: 24px;
	margin-top: 16px;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}

.gloves-filter__more:hover,
.gloves-filter__more:focus-visible {
	color: var(--site-color-brand-blue, #3333cc);
}

.gloves-filter__more-arrow {
	display: inline-flex;
	transition: transform 0.2s ease;
}

/* Points back the way it came once the list is open, matching the chevron
   convention the section summaries already use. */
.gloves-filter__more.is-expanded .gloves-filter__more-arrow {
	transform: rotate(180deg);
}

.gloves-filter__submit {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 8px;
	color: var(--site-color-white, #fff);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	margin-top: 24px;
	padding: 11px 24px;
	width: 100%;
}

/* Scripted filtering submits on change, so the fallback button is redundant. */
.gloves-catalog--enhanced .gloves-filter__submit {
	display: none;
}

/* Product grid
--------------------------------------------- */
.gloves-catalog__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Loading state
--------------------------------------------- */
.gloves-catalog__results {
	position: relative;
}

.gloves-catalog.is-loading .gloves-catalog__products {
	pointer-events: none;
}

/* A veil over the whole results column, so the stale grid reads as inactive
   without the layout collapsing and jumping while the new page arrives. */
.gloves-catalog__loader {
	background: rgba(255, 255, 255, 0.72);
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
	z-index: 4;
}

.gloves-catalog__loader[hidden] {
	display: none;
}

/*
 * The results column is taller than the viewport, so a centred spinner would
 * often sit off-screen. Sticky keeps it in view for as long as any part of the
 * grid it covers is visible.
 */
.gloves-catalog__spinner {
	align-self: flex-start;
	animation: gloves-catalog-spin 0.7s linear infinite;
	block-size: 38px;
	border: 3px solid #dcdcdc;
	border-radius: 50%;
	border-top-color: var(--site-color-brand-blue);
	inline-size: 38px;
	margin-top: 64px;
	position: sticky;
	top: 45vh;
}

@keyframes gloves-catalog-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gloves-catalog__spinner {
		animation-duration: 2s;
	}
}

.gloves-catalog__item {
	margin: 0;
}

.gloves-catalog .product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.gloves-catalog .product-image {
	aspect-ratio: 283 / 308;
	background: var(--site-color-display-grey, #f5f5f5);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.gloves-catalog .product-image>a {
	display: block;
	height: 100%;
	width: 100%;
}

/*
 * The shared `.product-card img` rule frames thumbnails on their own grey
 * background; inside the tile that reads as a box within a box, so both are
 * cleared. `multiply` drops the white baked into the product JPEGs, matching
 * the treatment used by the home page carousels.
 */
.gloves-catalog .product-image img {
	background: transparent;
	display: block;
	height: 100%;
	mix-blend-mode: multiply;
	object-fit: contain;
	padding: 0;
	width: 100%;
}

.gloves-catalog .product-image img:hover {
	transform: none;
}

.gloves-product-badge {
	background: var(--site-color-white, #fff);
	color: #121212;
	font-size: 16px;
	font-weight: 700;
	left: 16px;
	letter-spacing: 0;
	line-height: 16px;
	padding: 4px 14px;
	position: absolute;
	text-transform: uppercase;
	top: 16px;
	z-index: 2;
}

/*
 * Figma puts the wishlist heart top-right on the catalog card, opposite the
 * shared rule used elsewhere.
 *
 * Shown at rest. It used to fade in on card hover, which left it invisible
 * until the shopper happened to point at the tile, and permanently invisible on
 * touch, where there is no hover at all — reported as the icon "not showing".
 * Add-to-cart below stays a hover affordance; the heart matches the home
 * carousels, where it has always been visible.
 */
.gloves-catalog .product-image .yith-wcwl-add-to-wishlist {
	left: auto;
	margin: 0;
	opacity: 1;
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 3;
}

.gloves-catalog .product-image .yith-wcwl-add-to-wishlist a {
	height: 32px;
	width: 32px;
}

/*
 * The catalog's real wishlist control.
 *
 * Two different YITH renderings reach a product card, and the catalog gets the
 * one the rest of the site does not:
 *
 * - The home carousels print `[yith_wcwl_add_to_wishlist]`, which hydrates into
 *   `a.yith-wcwl-add-to-wishlist-button` inside the block wrapper. The rules
 *   above and the shared `.product-image` block dress that into the Figma disc.
 * - A WooCommerce loop item also gets YITH's own "show on product image"
 *   button, injected at the end of the tile as
 *   `button.yith-wcwl-add-to-wishlist-button-over-image`. On this catalog the
 *   shortcode's wrapper hydrates *empty* and this injected button is the only
 *   heart that renders — positioned top-left by the plugin's own
 *   `--top-left` modifier, with no disc, showing YITH's outline glyph. That is
 *   the mismatch against New Arrivals.
 *
 * So the injected button is dressed to the same 32px white disc, moved to the
 * top-right corner the rest of the site uses, and its own glyph is dropped in
 * favour of the Figma heart that the shared `::before` already draws for
 * anything carrying `.yith-wcwl-add-to-wishlist-button`.
 *
 * The `left`/`margin` resets are load-bearing: the plugin sets `left: 0` and a
 * blanket `margin: 10px`, both of which survive `right`/`top` alone. The
 * background is restated because YITH's
 * `.yith-wcwl-add-to-wishlist-button--icon-button:is(button)` forces
 * `background: none` at a weight the shared `.product-image` rule cannot beat.
 */
.product-image .yith-wcwl-add-to-wishlist-button-over-image,
.product-image .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--icon-button {
	align-items: center;
	background: var(--site-color-white, #ffffff) !important;
	border: 0 !important;
	border-radius: 50% !important;
	bottom: auto !important;
	box-shadow: 0 8px 16px -8px rgba(15, 15, 15, 0.12);
	cursor: pointer;
	display: flex;
	gap: 0;
	height: 32px !important;
	justify-content: center;
	left: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	right: 16px !important;
	top: 16px !important;
	width: 32px !important;
	z-index: 20;
}

.product-image .yith-wcwl-add-to-wishlist-button-over-image .yith-wcwl-add-to-wishlist-button-icon,
.product-image .yith-wcwl-add-to-wishlist-button-over-image .yith-wcwl-add-to-wishlist-button__label,
.product-image .yith-wcwl-add-to-wishlist-button .yith-wcwl-add-to-wishlist-button-icon,
.product-image .yith-wcwl-add-to-wishlist-button .yith-wcwl-add-to-wishlist-button__label {
	display: none !important;
}

/*
 * The disc has to be restated for hover, for the same reason the resting state
 * does and one step further. YITH ships
 * `…--icon-button:is(button):hover { background: none }`, which is a class and
 * an element weightier than the theme's resting rule — so the white circle
 * vanished the moment the pointer touched it and the heart was left floating
 * on the product photo. A plain `:hover` on the theme's own selector only ties
 * with the plugin's, so the second class is what actually settles it.
 *
 * The shadow deepens instead, which gives the hover something to say now that
 * the background no longer changes.
 */
.product-image .yith-wcwl-add-to-wishlist-button-over-image:hover,
.product-image .yith-wcwl-add-to-wishlist-button-over-image:focus-visible,
.product-image .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--icon-button:hover,
.product-image .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--icon-button:focus-visible {
	background: var(--site-color-white, #ffffff) !important;
	box-shadow: 0 10px 20px -8px rgba(15, 15, 15, 0.2);
}

/*
 * The shortcode wrapper hydrates to an empty div here. It is absolutely
 * positioned in the same corner, so leaving it in place puts a dead 0x0 box
 * over the live button's top-right edge.
 */
.product-image .yith-add-to-wishlist-button-block:empty {
	display: none !important;
}

.gloves-catalog .cart-btn {
	bottom: 16px;
	left: 16px;
	opacity: 0;
	position: absolute;
	right: 16px;
	transition: opacity 0.15s ease;
	z-index: 2;
}

.gloves-catalog .product-card:hover .cart-btn,
.gloves-catalog .product-card:focus-within .cart-btn {
	opacity: 1;
}

.gloves-catalog .cart-btn .button {
	align-items: center;
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.0364);
	color: var(--site-color-white, #fff);
	display: flex;
	font-size: 16px;
	font-weight: 500;
	height: 41px;
	justify-content: center;
	letter-spacing: -0.4px;
	line-height: 28px;
	margin: 0;
	padding: 8px 24px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.gloves-catalog .cart-btn .button:hover,
.gloves-catalog .cart-btn .button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white, #fff);
}

/* WooCommerce drops a "View cart" link in after an AJAX add; the tile has no
   room for it and the header badge already reports the change. */
.gloves-catalog .cart-btn .added_to_cart {
	display: none;
}

.gloves-catalog .rating {
	margin-top: 8px;
}

.gloves-catalog .gloves-star-rating {
	font-size: 18px;
}

/* The shared .product-title rule uses the site's serif display font for the
   home page carousels; Figma's catalog card titles are Inter (sans-serif). */
.gloves-catalog .product-title {
	color: var(--site-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 8px 0 0;
}

.gloves-catalog .product-title a {
	color: inherit;
	text-decoration: none;
}

.gloves-catalog .product-title a:hover,
.gloves-catalog .product-title a:focus-visible {
	color: var(--site-color-brand-blue);
}

.gloves-catalog .product-short-description,
.product-short-description {
	color: var(--site-color-neutral-04, #545454);
	font-size: 13px;
	line-height: 1.45;
	margin: 6px 0 0;
}

.gloves-catalog .product-short-description p,
.product-short-description p {
	margin: 0;
}

.gloves-catalog .price {
	align-items: baseline;
	color: #121212;
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 700;
	gap: 12px;
	line-height: 1.75;
	margin: 8px 0 0;
}

/* WooCommerce emits <del> before <ins>; Figma leads with the sale price. */
.gloves-catalog .price ins {
	background: none;
	color: var(--gloves-color-price-sale);
	order: 1;
	text-decoration: none;
}

.gloves-catalog .price del {
	color: var(--gloves-color-price-was);
	font-weight: 500;
	letter-spacing: -0.28px;
	line-height: 22px;
	opacity: 1;
	order: 2;
	text-decoration: line-through;
}

.gloves-catalog__empty {
	padding: 40px 0;
}

.gloves-catalog__empty-title {
	color: var(--site-color-dark-charcoal, #141718);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
}

.gloves-catalog__empty-text,
.gloves-catalog__error {
	color: var(--gloves-color-neutral-04);
	font-size: 15px;
	margin: 0;
}

/* Pagination
--------------------------------------------- */
.gloves-catalog__pagination {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 48px;
}

.gloves-catalog__page,
.gloves-catalog__page:visited {
	align-items: center;
	background: #f6f6f6;
	border-radius: 5px;
	color: var(--site-color-dark-charcoal, #141718);
	display: inline-flex;
	font-size: 16px;
	font-weight: 500;
	height: 32px;
	justify-content: center;
	letter-spacing: 0.48px;
	line-height: 24px;
	min-width: 32px;
	padding: 4px 12px;
	text-decoration: none;
	transition: background 0.2s ease;
}

a.gloves-catalog__page:hover,
a.gloves-catalog__page:focus-visible {
	background: var(--gloves-color-menu-hover-bg);
	color: var(--site-color-dark-charcoal, #141718);
}

.gloves-catalog__page.is-current {
	background: var(--site-color-brand-blue);
	color: var(--site-color-white, #fff);
}

.gloves-catalog__page--arrow,
.gloves-catalog__page--arrow:visited {
	background: none;
	color: #000;
	padding: 4px;
}

.gloves-catalog__page--gap,
.gloves-catalog__page--arrow.is-disabled {
	background: none;
	color: #c4c4c4;
}

/* Responsive
--------------------------------------------- */
@media (max-width: 1024px) {
	.gloves-catalog__header--with-info .gloves-catalog__header-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gloves-catalog__header-inner {
		gap: 32px;
	}

	.gloves-catalog__body {
		gap: 40px;
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.gloves-catalog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	/* .mrn-shell-container--wide (which breadcrumbs/header-inner/body all rely
	   on for horizontal centering) never carries its own padding at any
	   breakpoint — desktop only looks right because its 1240px max-width sits
	   inside the wider page gutter. Below that width it becomes 100% wide with
	   zero inset, so the catalog content was running edge to edge on mobile. */
	.gloves-catalog__breadcrumbs,
	.gloves-search__breadcrumbs,
	.gloves-catalog__header-inner,
	.gloves-catalog__body {
		padding-inline: var(--gloves-mobile-gutter);
	}

	.gloves-catalog__header {
		padding: 32px 0 36px;
	}

	.gloves-catalog__title {
		font-size: 30px;
	}

	.gloves-catalog__info {
		padding: 24px;
	}

	.gloves-catalog__body {
		gap: 32px;
		grid-template-columns: minmax(0, 1fr);
		padding-block: 32px 56px;
	}

	/*
	 * Add to cart is a desktop hover affordance and comes off the tile here.
	 *
	 * It used to be forced visible instead, on the reasoning that hover is
	 * unreachable on touch — but that put a permanent button over every card in
	 * a single-column grid, which is not what the tile is meant to look like on
	 * a phone. Shoppers add to cart from the product page on mobile.
	 *
	 * `display: none` rather than `opacity: 0`, so it also stops swallowing
	 * taps meant for the product image underneath it. The wishlist heart is a
	 * separate control and stays visible at every width.
	 *
	 * The related-products slider on a product page prints the same card, so it
	 * is hidden from the same rule rather than from that section's own
	 * breakpoint further down — one behaviour, one place. There it was worse
	 * than redundant: a phone-width slide is narrow enough that "Select
	 * Options" wrapped to two lines inside the button's fixed 41px height and
	 * was clipped mid-word over the photo.
	 */
	.gloves-catalog .cart-btn,
	.single-product .gloves-product__related-grid .cart-btn {
		display: none;
	}

	/*
	 * The rail stacks above the grid here, so a full-length Types list buries
	 * the products. Only the first few rows stay; the script adds
	 * `--truncated`/`is-collapsed` and reveals the button that toggles them, so
	 * the cut only ever exists when there is a working control to undo it.
	 */
	.gloves-filter__list--truncated.is-collapsed .gloves-filter__item--overflow {
		display: none;
	}

	.gloves-filter__more {
		display: inline-flex;
	}
}

@media (max-width: 520px) {

	/*
	 * One card per row, so nothing but whitespace separates one product from
	 * the next. The card ends on a run of text — ID, rating, title, short
	 * description, price — and at the old 28px that trailing block sat closer
	 * to the following image than to the image it belongs to, which made it
	 * read as a caption for the wrong product. The row gap is now wider than
	 * any gap inside the card so the grouping is unambiguous; the column gap is
	 * kept for the two-column layouts above this breakpoint.
	 */
	.gloves-catalog__grid {
		gap: 56px 16px;
		grid-template-columns: minmax(0, 1fr);
	}
}








/**
 * Mobile: Figma 390px frame
 *
 * Values are read off the supplied 2x export (halved), so the structural calls
 * — what shows, what stacks, what order — are exact, while the spacing is
 * measured rather than taken from the file's own panels.
 */
@media (max-width: 782px) {

	/* The mobile frame has no utility bar above the header. */
	.gloves-utility-bar {
		display: none;
	}

	#page.site {
		position: relative;
	}

	/**
	 * One header row, per the supplied 390px frame.
	 *
	 * The frame is a single white bar: menu and account on the left, the logo
	 * centred, search and cart on the right. There is no blue navigation band
	 * under it and no wishlist heart in it. This replaces the earlier
	 * two-row arrangement, which kept the tablet header's shape — logo left,
	 * four icons right, hamburger alone on a blue bar beneath.
	 *
	 * Three things make that layout reachable from CSS alone:
	 *
	 * 1. `display: contents` on the action group. The four icons are wrapped in
	 *    one div, so as long as that div is the grid item they can only ever sit
	 *    together on one side of the logo. Dropping the box promotes the icons
	 *    themselves to header grid items, which is what lets account go left of
	 *    the logo while search and cart stay right of it.
	 * 2. Explicit `grid-column` on each icon rather than `order`. The brand item
	 *    carries an inline `grid-column: 1 / span 2; grid-row: 3` from the
	 *    parent's layout-grid helper, so auto-placement is not predictable here
	 *    and the inline values have to be answered with `!important`.
	 * 3. The hamburger is absolutely positioned. It lives in `<nav>`, a sibling
	 *    of `<header>`, so no amount of grid on the header can pull it inside;
	 *    it is placed against `#page.site` instead (positioned just above) and
	 *    the header reserves room for it with `padding-left`.
	 *
	 * Remove all of this if the parent ever grows a header slot for the mobile
	 * menu toggle — the first two points become unnecessary the moment the
	 * toggle and the icons are siblings.
	 */
	#masthead.site-header {
		align-items: center;
		gap: 12px;
		/* account | logo | search | cart */
		grid-template-columns: auto minmax(0, 1fr) auto auto !important;
		min-height: 64px;
		/* Left inset clears the absolutely placed toggle: gutter + 24px + gap. */
		padding: 8px var(--gloves-mobile-gutter) 8px calc(var(--gloves-mobile-gutter) + 36px);
	}

	#masthead .gloves-header__actions {
		display: contents;
	}

	#masthead .gloves-header__action--account {
		grid-column: 1;
		grid-row: 1;
	}

	/*
	 * `justify-content`, not `justify-self`: the parent gives every layout-grid
	 * item `width: 100%`, so the item already fills its column and cannot be
	 * shrunk to its content — the logo has to be centred inside it instead.
	 */
	#masthead .mrn-theme-hf-layout-grid__item--header-brand {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-content: center;
	}

	#masthead .gloves-header__action--search {
		grid-column: 3;
		grid-row: 1;
	}

	#masthead .gloves-header__action--cart {
		grid-column: 4;
		grid-row: 1;
		position: relative;
	}

	/* Not in the mobile frame. */
	#masthead .gloves-header__action--wishlist {
		display: none;
	}

	/*
	 * The navigation band is only a container for the toggle down here — the
	 * drawer panel is `position: fixed` and full screen, so collapsing the band
	 * costs it nothing. Height rather than `display: none`, which would take the
	 * toggle and the panel with it.
	 */
	#site-navigation.mrn-site-primary-navigation[data-mrn-mobile-active="true"] {
		background: transparent;
		min-height: 0;
		padding: 0;
	}

	/*
	 * `position: static` is what lets the toggle below reach the header. The
	 * parent makes the nav `position: relative`, which would otherwise be the
	 * toggle's containing block and pin it to the collapsed band at y=64 —
	 * leaving the hamburger floating over the hero. Taking the nav out of the
	 * positioning chain hands that job to `#page.site` above.
	 *
	 * Only while closed: the parent re-pins the open drawer's toggle to the
	 * viewport with `position: fixed`, which needs no positioned ancestor.
	 */
	#site-navigation.mrn-site-primary-navigation[data-mrn-mobile-active="true"]:not(.is-open) {
		height: 0;
		position: static;
	}

	/*
	 * Pinned to the header's left edge. The utility bar is hidden above, so the
	 * header starts at the top of `#page` and the toggle centres on its 64px.
	 * Kept out of the `.is-open` state, which the parent re-pins to the viewport
	 * as a close button.
	 */
	#site-navigation.mrn-site-primary-navigation[data-mrn-mobile-active="true"]:not(.is-open)>.menu-toggle {
		color: var(--gloves-color-neutral-07);
		height: 24px;
		left: var(--gloves-mobile-gutter);
		margin: 0;
		padding: 0;
		position: absolute;
		top: 20px;
		width: 24px;
		z-index: 3;
	}

	/*
	 * The search field spans the screen.
	 *
	 * It used to be a 358px card floating under the icons, which on a 390px
	 * screen is a panel with a sliver of page either side of it and the
	 * breadcrumb showing through underneath. Full bleed under the header reads
	 * as part of the header instead of as something dropped on top of it.
	 */
	#masthead .gloves-header__search-panel {
		/* Edge to edge: only the bottom edge is left to divide it from the page. */
		border-radius: 0;
		border-width: 0 0 1px;
		left: 0;
		padding: 12px var(--gloves-mobile-gutter);
		right: 0;
		top: 100%;
		width: auto;
	}

	/*
	 * The submit label is what has to give when the row is this narrow — the
	 * field is the control being used, so it keeps the space.
	 */
	#masthead .gloves-header__search-panel .search-submit {
		padding: 0 16px;
	}

	#masthead .site-branding {
		gap: 0 10px;
		grid-template-columns: 38px minmax(0, auto);
	}

	#masthead .custom-logo {
		height: 38px;
		width: 38px;
	}

	#masthead .site-description {
		font-size: 9px;
		line-height: 1.2;
	}

	#masthead .site-description::before {
		font-size: 15px;
		letter-spacing: -0.4px;
		margin-bottom: 2px;
	}

	#masthead .gloves-header__actions {
		gap: 16px;
	}

	/*
	 * Figma stacks the hero image above the copy. The builder emits the copy
	 * column first, so the order is swapped here rather than in the row's
	 * saved settings, which still drive the desktop 44/56 split.
	 */
	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--left {
		order: 2;
	}

	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right {
		order: 1;
	}

	/* Measured off the export: a 394px band of media over the copy block. The
	   height goes on the media wrapper too, or the column keeps its own and
	   crops the picture. */
	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right,
	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right .mrn-image-content-row__media,
	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right figure {
		height: 394px;
	}

	#homepage-hero+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right img {
		height: 394px;
		object-fit: cover;
		width: 100%;
	}

	#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__content-wrap {
		padding: 40px var(--gloves-mobile-gutter) 48px;
	}

	/* Figma mobile H1: Libre Caslon Text Medium 32/42, -1px. */
	#hero-copy+.mrn-content-builder__row--basic .mrn-ui__heading {
		font-size: 32px;
		letter-spacing: -1px;
		line-height: 42px;
	}

	#hero-copy+.mrn-content-builder__row--basic .mrn-ui__text {
		margin-top: 12px;
	}

	/* Figma mobile body: Inter Regular 14/22, -0.1px, across the 342px measure. */
	#hero-copy+.mrn-content-builder__row--basic .mrn-ui__text p {
		font-size: 14px;
		letter-spacing: -0.1px;
		line-height: 22px;
	}

	#hero-copy+.mrn-content-builder__row--basic .mrn-basic-row__link-wrap {
		margin-top: 24px;
	}

	#hero-copy+.mrn-content-builder__row--basic .gloves-hero__cta {
		min-height: 40px;
		padding: 8px 24px;
		width: auto;
	}

	/*
	 * The carousels and the category grid render inside Body Text rows, whose
	 * content block is a grid item with an automatic (content-based) minimum.
	 * Splide measures that block on mount and writes slide widths back into it,
	 * so the item's min-content grows and the row blows out past the viewport —
	 * 549px for Featured, 978px for New Arrivals. Zeroing the minimum breaks
	 * the cycle, and Splide then measures the real 358px.
	 */
	/*
	 * The product carousels need their containers' automatic minimum removed:
	 * Splide writes slide widths back into the block it measured, and one
	 * unconstrained track propagates its min-content all the way up and
	 * stretches the whole builder to the desktop measure.
	 */
	/*
	 * These five keep `.home` on purpose, unlike the rest of this file. They
	 * name parent-theme classes that every page's builder rows carry, so
	 * unscoping them would apply front-page mobile sizing to every layout grid,
	 * body-text row and slider on the site. The page really is the scope here.
	 */
	.home .mrn-layout-grid,
	.home .mrn-layout-content,
	.home .mrn-ui__text,
	.home .splide,
	.home .splide__track,
	.featured-products-wrapper.featured-products-wrapper,
	.new-arrivals-wrapper.new-arrivals-wrapper,
	.scg-wrapper.scg-wrapper {
		max-width: 100%;
		min-width: 0;
	}

	.home .splide__track {
		overflow: hidden;
	}

	/*
	 * Twelve full-width tiles ran to 4382px. Two columns is the obvious mobile
	 * reading, but no mobile frame was supplied for this section, so treat the
	 * count as provisional.
	 */
	.scg-grid.scg-grid {
		gap: 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Figma mobile section heading, read off the "Featured" node: Libre Caslon
	 * Text Medium 24px, -0.4px. Applied to every section title so the page
	 * keeps one scale rather than the 34px font-size carried over from the old
	 * rules (unrelated to the line-height below, despite the matching number).
	 *
	 * Line-height brought down from the original 44px, in two passes (44 to 38,
	 * then 38 to 34): at 24px text, 44px of line-height was roughly 15px of
	 * slack above and below the glyphs — the phantom space behind the "title
	 * sits too far from its body" fix elsewhere in this file. 34px is close to
	 * the glyphs' own natural line height at this size, leaving little slack.
	 */
	.scg-title.scg-title,
	.featured-title.featured-title,
	.new-arrivals-title.new-arrivals-title,
	#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
	#popular-brands+.mrn-content-builder__row--logos .mrn-ui__heading,
	#trusted-clients+.mrn-content-builder__row--logos .mrn-ui__heading,
	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
	#international+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
	#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__heading,
	#newsletter+.mrn-content-builder__row--wpforms .mrn-ui__heading {
		font-size: 24px;
		letter-spacing: -0.4px;
		line-height: 34px;
	}

	/* Body copy steps down with the headings. */
	#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__text p,
	#international+.mrn-content-builder__row--two-column-split .mrn-ui__text p,
	#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__text p,
	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-ui__text p,
	#newsletter+.mrn-content-builder__row--wpforms .mrn-ui__sub {
		font-size: 14px;
		letter-spacing: -0.1px;
		line-height: 22px;
	}

	/*
	 * The 16px heading-to-body margin above is the desktop figure, tuned
	 * against the desktop heading's 40/44 type (4px of line-height slack below
	 * the glyphs). The heading rule above drops these same titles to 24/44 on
	 * mobile — the site's shared type scale — which is roughly 8px of slack,
	 * double the desktop amount. Stacked on the unchanged 16px margin, the
	 * title and body read as sitting noticeably further apart on a phone than
	 * on desktop, even though the coded margin never moved.
	 *
	 * Halving the margin here brings the *visible* gap (phantom line-height
	 * space plus margin) back down near the original 16px feel, without
	 * touching the 24/44 heading scale itself — that scale is shared by every
	 * section title on the page, not just these sections.
	 *
	 * Every row sharing this exact heading/body structure and desktop 16px
	 * margin is listed here, not only the two first reported — leaving the
	 * others at the old figure would have fixed the complaint in two spots and
	 * left it standing, at the same size, one section down. `#international`
	 * (used by "Global Leaders", per the anchor-naming note further down this
	 * file) and `#learn-more` are the same `two-column-split` structure as
	 * Glove Guru; `#international-copy` is a different, nested-row pattern and
	 * is deliberately not included here.
	 */
	#glove-guru+.mrn-content-builder__row--two-column-split .mrn-ui__text,
	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-ui__text,
	#international+.mrn-content-builder__row--two-column-split .mrn-ui__text,
	#learn-more+.mrn-content-builder__row--two-column-split .mrn-ui__text,
	#summer-sale+.mrn-content-builder__row--basic .mrn-ui__text {
		margin-top: 8px;
	}

	/*
	 * "Global Leaders" sits on the `international` anchor, not `global-leaders`
	 * — that one is the Summer Sale row. Nothing was collapsing it, so it kept
	 * two 195px columns and broke to one word per line.
	 */
	#international+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
		gap: 0;
		grid-template-columns: minmax(0, 1fr);
		height: auto;
		min-height: 0;
	}

	#international+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column {
		height: auto;
		min-height: 0;
		min-width: 0;
	}

	#international+.mrn-content-builder__row--two-column-split .mrn-basic-row__content-wrap {
		max-width: none;
		padding: 40px var(--gloves-mobile-gutter);
	}

	#international+.mrn-content-builder__row--two-column-split .mrn-image-content-row__media,
	#international+.mrn-content-builder__row--two-column-split figure {
		aspect-ratio: 4 / 3;
		height: auto;
	}

	/*
	 * Summer Sale is a full-bleed band: media above, blue copy below. It shares
	 * the 40px stacking gap written for the copy-led rows, which shows here as a
	 * strip of page background between the image and the colour block.
	 */
	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
		gap: 0;
	}

	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-image-content-row__media img,
	#global-leaders+.mrn-content-builder__row--two-column-split figure img {
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	/* Matches the copy inset used by the other banded rows. */
	#global-leaders+.mrn-content-builder__row--two-column-split .mrn-basic-row__content-wrap {
		padding: 40px var(--gloves-mobile-gutter);
	}

	/*
	 * One vertical rhythm for every section. The rows carried a mix of their own
	 * paddings and shortcode margins, so the gaps between sections read
	 * unevenly; this sets a single step and zeroes the inner spacing that would
	 * otherwise stack on top of it. The full-bleed banded rows (hero, Summer
	 * Sale, newsletter) are excluded — their padding is inside the colour block.
	 */
	#featured-products+.mrn-content-builder__row,
	#shop-by-categories+.mrn-content-builder__row,
	#glove-guru+.mrn-content-builder__row,
	#popular-brands+.mrn-content-builder__row,
	#global-leaders+.mrn-content-builder__row,
	#new-arrivals+.mrn-content-builder__row,
	#trusted-clients+.mrn-content-builder__row,
	#international+.mrn-content-builder__row,
	#learn-more+.mrn-content-builder__row {
		padding-block: var(--gloves-mobile-section-space);
		padding-inline: 0;
	}

	#popular-brands+.mrn-content-builder__row--logos,
	#trusted-clients+.mrn-content-builder__row--logos,
	#learn-more+.mrn-content-builder__row--two-column-split {
		padding-inline: var(--gloves-mobile-gutter);
	}

	/*
	 * Trusted by Clients steps out of the shared rhythm above it, on purpose.
	 *
	 * At the shared `--gloves-mobile-section-space` (24px) this row's own top
	 * padding matched New Arrivals' unrelated bottom padding almost exactly
	 * (24px + 24px = 48px total), while its own heading sat only 24px above its
	 * logo grid — so the boundary between two unrelated sections read as
	 * tighter than the space inside this row's own group. Growing just this
	 * row's top step (New Arrivals' bottom is untouched, and unique to this one
	 * junction) fixes the imbalance without reopening the uneven-gaps problem
	 * the rhythm rule above was written to solve everywhere else.
	 */
	#trusted-clients+.mrn-content-builder__row--logos {
		padding-top: 56px;
	}

	/*
	 * Stray row margins were opening a 51px gap after the Summer Sale band that
	 * no padding accounted for. The row padding is the only spacing here.
	 */
	.home .mrn-content-builder__row {
		margin-block: 0;
	}

	/*
	 * The newsletter band carries desktop-sized inner padding, which read as a
	 * 119px gap after Learn More. Brought in line with the other banded rows.
	 */
	#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-container {
		min-height: 0;
		padding: 40px var(--gloves-mobile-gutter);
	}

	#newsletter+.mrn-content-builder__row--wpforms,
	#newsletter+.mrn-content-builder__row--wpforms .mrn-layout-section {
		min-height: 0;
	}

	/*
	 * The shell inside each row carries its own vertical padding, which stacked
	 * on the row padding above and made the Body Text rows lead in at 80px
	 * against the logo rows' 48px — the uneven, doubled gaps. The row padding is
	 * the only vertical spacing from here on.
	 *
	 * Glove Guru is excluded: its container *is* the grey card, so zeroing it
	 * pushes the artwork against the card edge.
	 */
	/*
	 * The shell also carries `--mrn-shell-gutter` (16px here) as inline padding,
	 * which stacked on the wrapper's own gutter and pushed these three rows in
	 * to 31px. The row padding is the only inset from here on, in both axes.
	 */
	#featured-products+.mrn-content-builder__row .mrn-layout-section,
	#featured-products+.mrn-content-builder__row .mrn-layout-container,
	#shop-by-categories+.mrn-content-builder__row .mrn-layout-section,
	#shop-by-categories+.mrn-content-builder__row .mrn-layout-container,
	#new-arrivals+.mrn-content-builder__row .mrn-layout-section,
	#new-arrivals+.mrn-content-builder__row .mrn-layout-container {
		padding: 0;
	}

	#popular-brands+.mrn-content-builder__row .mrn-layout-section,
	#popular-brands+.mrn-content-builder__row .mrn-layout-container,
	#trusted-clients+.mrn-content-builder__row .mrn-layout-section,
	#trusted-clients+.mrn-content-builder__row .mrn-layout-container,
	#learn-more+.mrn-content-builder__row .mrn-layout-section,
	#learn-more+.mrn-content-builder__row .mrn-layout-container,
	#popular-brands+.mrn-content-builder__row .mrn-layout-section,
	#popular-brands+.mrn-content-builder__row .mrn-layout-container,
	#trusted-clients+.mrn-content-builder__row .mrn-layout-section,
	#trusted-clients+.mrn-content-builder__row .mrn-layout-container,
	#learn-more+.mrn-content-builder__row .mrn-layout-section,
	#learn-more+.mrn-content-builder__row .mrn-layout-container,
	#glove-guru+.mrn-content-builder__row>.mrn-layout-section {
		padding-block: 0;
	}

	/*
	 * Trailing space inside the shortcode wrappers also lands between sections,
	 * so it is normalised to the same step rather than each block bringing its
	 * own margin.
	 */
	.shop-all-button.shop-all-button,
	.scg-actions.scg-actions {
		margin-top: var(--gloves-mobile-section-space);
	}

	/* The categories title takes the same lead-out as the carousel headers. */
	.featured-header.featured-header,
	.new-arrivals-header.new-arrivals-header,
	.scg-title.scg-title {
		margin-bottom: var(--gloves-mobile-section-space);
	}

	/*
	 * The newsletter band is full bleed with no row padding, so Learn More had
	 * 48px of white above it but only 24px below — the band butted straight up
	 * against the buttons. A top step evens the section out. No bottom step:
	 * the band still has to meet the footer flush.
	 */
	#newsletter+.mrn-content-builder__row--wpforms {
		padding-top: var(--gloves-mobile-section-space);
	}

	.home .mrn-logos-row__header {
		margin-bottom: var(--gloves-mobile-section-space);
	}

	/*
	 * These shortcode sections used their own gutter, so the page edge stepped
	 * in and out down the scroll. They sit on the shared inset now; the
	 * carousels re-measure off the new width, so the cards resize with it
	 * rather than overhanging.
	 */
	.featured-products-wrapper.featured-products-wrapper,
	.new-arrivals-wrapper.new-arrivals-wrapper,
	.scg-wrapper.scg-wrapper {
		margin-block: 0;
		padding-inline: var(--gloves-mobile-gutter);
	}

	.featured-header.featured-header,
	.new-arrivals-header.new-arrivals-header,
	.scg-title.scg-title {
		margin-top: 0;
	}

	/* The grey card is full bleed, so its own inset is the page gutter. */
	#glove-guru+.mrn-content-builder__row--two-column-split>.mrn-layout-section>.mrn-layout-container {
		padding: 24px var(--gloves-mobile-gutter);
	}

	/* Figma stacks the media above the copy in this section. */
	#international+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--left {
		order: 2;
	}

	#international+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column--right {
		order: 1;
	}

	.home .mrn-ui__head {
		row-gap: 8px;
	}

	/*
	 * Footer menu columns collapse to accordions. Each heading becomes a full
	 * width tap target with a chevron, and the rule between rows makes the
	 * stack read as a list rather than three floating headings.
	 */
	.gloves-footer__column--menu {
		border-top: 1px solid rgba(51, 51, 204, 0.18);
		padding-block: 4px;
	}

	.gloves-footer__column--menu .gloves-footer__heading {
		margin: 0;
	}

	.gloves-footer__toggle {
		align-items: center;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		min-height: 48px;
	}

	.gloves-footer__chevron {
		border-bottom: 2px solid currentColor;
		border-right: 2px solid currentColor;
		display: inline-block;
		flex: 0 0 auto;
		height: 8px;
		margin-right: 4px;
		transform: rotate(45deg);
		transition: transform 160ms ease;
		width: 8px;
	}

	.gloves-footer__toggle[aria-expanded="true"] .gloves-footer__chevron {
		transform: rotate(-135deg);
	}

	.gloves-footer__panel {
		padding-bottom: 16px;
	}

	.gloves-footer__panel[hidden] {
		display: none;
	}

	/*
	 * The column stack carries a 40px gap for the brand and contact blocks,
	 * which landed under every accordion row too and left more space below each
	 * heading than above it. The gap is dropped and re-applied as margin on the
	 * two blocks that actually need it, so the accordion rows sit flush and read
	 * as one list.
	 */
	.gloves-footer__inner {
		gap: 0;
	}

	.gloves-footer__column--brand,
	.gloves-footer__column--contact {
		margin-bottom: 40px;
	}

	/*
	 * The rule between the copyright and the links is a left border. Once the
	 * bar wraps to two lines it lands at the start of the second line as a
	 * floating pipe, so it is dropped at this width.
	 */
	.gloves-footer__bar-links {
		border-left: 0;
		padding-left: 0;
	}

	/*
	 * Glove Guru keeps its desktop 505/452 split down to here, which at 390px
	 * leaves the heading breaking one word per line and the button wrapping.
	 * The neighbouring split rows already collapse; this one was missed.
	 */
	#glove-guru+.mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
		gap: 24px;
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	#glove-guru+.mrn-content-builder__row--two-column-split .mrn-two-column-split__column {
		min-width: 0;
	}

	#glove-guru+.mrn-content-builder__row--two-column-split .mrn-basic-row__content-wrap {
		max-width: none;
	}
}

/**
 * Mobile: 360px and below
 *
 * The header runs out of room first: the left cluster reserves room before the
 * mark, and at 360 the wordmark can no longer sit on one line beside it. The
 * type steps down and the clusters tighten rather than letting the row grow
 * into two ragged lines. The page gutter itself stays at 15px.
 */
@media (max-width: 400px) {
	#masthead.site-header {
		gap: 6px;
	}

	#masthead .site-branding {
		gap: 0 8px;
		grid-template-columns: 34px minmax(0, auto);
	}

	#masthead .custom-logo {
		height: 34px;
		width: 34px;
	}

	#masthead .site-description::before {
		font-size: 13px;
		letter-spacing: -0.3px;
		margin-bottom: 1px;
	}

	#masthead .site-description {
		font-size: 8px;
		line-height: 1.15;
	}

	#masthead .gloves-header__actions {
		gap: 12px;
	}

	#masthead .gloves-header__icon--search,
	#masthead .gloves-header__icon--cart {
		height: 20px;
		width: 20px;
	}
}


/**
 * Figma product page: size guide, share, and question dialogs
 *
 * Triggers live in the product summary; the dialogs themselves are printed at
 * the end of the document by inc/product-modals.php.
 */

/* The size guide sits on the rule above the variation table, right aligned. */
.gloves-product-size-guide {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px;
}

.gloves-product-size-guide__link {
	background: none;
	border: 0;
	color: var(--gloves-color-neutral-07);
	cursor: pointer;
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gloves-product-size-guide__link:hover,
.gloves-product-size-guide__link:focus-visible {
	color: var(--site-color-brand-blue);
}

/* Figma "Button - Small", outline variant, under the SKU and category line. */
.gloves-product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

/* Figma: 46px tall, 1px brand-blue outline, 12px/24px padding, 10px gap. */
.gloves-product-actions__button {
	background: var(--site-color-white);
	border: 1px solid var(--site-color-brand-blue);
	border-radius: 0;
	color: var(--site-color-brand-blue);
	cursor: pointer;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.28px;
	line-height: 20px;
	padding: 12px 24px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Hover fills with the brand blue; the label flips to white to stay readable. */
.gloves-product-actions__button:hover {
	background: var(--site-color-brand-blue);
	border-color: var(--site-color-brand-blue);
	color: var(--site-color-white);
}

/*
 * Focus takes the same fill as hover and adds a ring. The two used to share one
 * rule with no ring, which left a keyboard user unable to tell the focused
 * button from one the pointer happened to be over — and on a control that opens
 * a dialog, that is the state that most needs to be obvious. The ring is offset
 * outside the button so it reads against the white page rather than against the
 * blue fill.
 */
.gloves-product-actions__button:focus-visible {
	background: var(--site-color-brand-blue);
	border-color: var(--site-color-brand-blue);
	color: var(--site-color-white);
	outline: 2px solid var(--site-color-dark-blue);
	outline-offset: 2px;
}

/* Pressed goes a step darker, so the click still registers against the hover. */
.gloves-product-actions__button:active {
	background: var(--site-color-dark-blue);
	border-color: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/*
 * Overlay and panel. The whole dialog is one fixed flex container so the panel
 * centres without a transform: a transformed ancestor would become the
 * containing block for WPForms' own absolutely positioned error messages and
 * date pickers, and they would land in the wrong place.
 */
.gloves-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 24px;
	position: fixed;
	z-index: 10000;
}

.gloves-modal[hidden] {
	display: none;
}

.gloves-modal__backdrop {
	background: rgba(20, 23, 24, 0.6);
	inset: 0;
	position: absolute;
}

.gloves-modal__dialog {
	background: var(--site-color-white);
	border-radius: 8px;
	box-shadow: 0 24px 48px rgba(20, 23, 24, 0.24);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 48px);
	position: relative;
	width: 100%;
}

.gloves-modal--form .gloves-modal__dialog {
	max-width: 560px;
}

.gloves-modal--media .gloves-modal__dialog {
	max-width: 960px;
}

.gloves-modal__head {
	align-items: flex-start;
	border-bottom: 1px solid var(--gloves-color-neutral-03);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 20px 24px;
}

.gloves-modal__title {
	color: var(--gloves-color-neutral-07);
	font-size: 22px;
	font-weight: 600;
	line-height: 30px;
	margin: 0;
}

.gloves-modal__close {
	background: none;
	border: 0;
	color: var(--gloves-color-neutral-04);
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	padding: 0 4px;
}

.gloves-modal__close:hover,
.gloves-modal__close:focus-visible {
	color: var(--gloves-color-neutral-07);
}

/* Long forms and tall charts scroll inside the panel, not the page behind it. */
.gloves-modal__body {
	overflow-y: auto;
	padding: 24px;
}

.gloves-modal__image {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

/* Hold the page still while a dialog is open. */
.gloves-modal-is-open,
.gloves-modal-is-open body {
	overflow: hidden;
}

/*
 * WPForms' modern markup is driven entirely by custom properties it publishes
 * on :root. Re-declaring them on the dialog re-skins the form to the site
 * palette by inheritance, which is both less code and more robust than trying
 * to out-specify selectors like `.wp-core-ui div.wpforms-container-full
 * button[type="submit"]`.
 */
.gloves-modal {
	/* Drives both the message text and the warning glyph it draws. */
	--wpforms-label-error-color: var(--gloves-color-price-sale);
	--wpforms-button-background-color: var(--site-color-brand-blue);
	/*
	 * Both brand blue, and `-alt` is the one that decides the resting colour:
	 * the plugin paints the button with
	 * `var(--wpforms-button-background-color-alt, var(--wpforms-button-background-color))`,
	 * so `-alt` wins whenever it is set and the base is only a fallback. With
	 * the site's dark blue here the button sat on the hover colour permanently.
	 * Hover is handled by its own rule further down instead.
	 */
	--wpforms-button-background-color-alt: var(--site-color-brand-blue);
	--wpforms-button-border-color: var(--site-color-brand-blue);
	--wpforms-button-border-radius: 4px;
	--wpforms-button-text-color: var(--site-color-white);
	--wpforms-button-text-color-alt: var(--site-color-white);
	--wpforms-field-border-radius: 4px;
	--wpforms-field-border-color: var(--gloves-color-neutral-03);
	--wpforms-field-border-color-spare: var(--gloves-color-neutral-03);
	--wpforms-field-text-color: var(--gloves-color-neutral-07);
	--wpforms-label-color: var(--gloves-color-neutral-07);
	--wpforms-label-sublabel-color: var(--gloves-color-neutral-04);
	/*
	 * Sizing, on the same principle as the palette above. The plugin's defaults
	 * are its own (43px fields, a 41px button, 17px button text), which read as
	 * a third-party form dropped into the page rather than part of it.
	 */
	--wpforms-field-size-input-height: 48px;
	--wpforms-field-size-input-spacing: 20px;
	--wpforms-field-size-padding-h: 16px;
	--wpforms-label-size-font-size: 14px;
	--wpforms-label-size-line-height: 20px;
	--wpforms-button-size-font-size: 16px;
	--wpforms-button-size-height: 50px;
	--wpforms-button-size-margin-top: 8px;
}

/*
 * The container's stock `margin: 24px auto` would break the panel's own 24px
 * padding — the side margin narrows the form inside it, and the top margin
 * pushed the first field a further 24px below the dialog head.
 *
 * `div…:not(:empty)` is carried here to match the shape of the plugin's own
 * selector. Without it this rule is a plain two-class selector against their
 * one-class-plus-pseudo one, which is the more specific of the two, and the
 * margin stayed put.
 */
.gloves-modal .wpforms-container,
.gloves-modal .wpforms-container-full,
.gloves-modal div.wpforms-container-full:not(:empty) {
	margin: 0;
}

.gloves-modal .wpforms-form .wpforms-field {
	padding: 0 0 16px;
}

.gloves-modal .wpforms-form .wpforms-field-label {
	font-family: Inter, Arial, sans-serif;
	font-weight: 500;
}

.gloves-modal .wpforms-form .wpforms-submit-container {
	padding: 0;
}

/*
 * The plugin sets its own `-apple-system` stack on the controls, so the fields
 * and the button came out in the system UI face while every label around them
 * was Inter — the clearest tell that the form was not part of the page. There
 * is no WPForms variable for the family, so it is set directly.
 */
.gloves-modal .wpforms-form input[type="text"],
.gloves-modal .wpforms-form input[type="email"],
.gloves-modal .wpforms-form input[type="tel"],
.gloves-modal .wpforms-form input[type="url"],
.gloves-modal .wpforms-form input[type="number"],
.gloves-modal .wpforms-form select,
.gloves-modal .wpforms-form textarea,
.gloves-modal .wpforms-form button[type="submit"] {
	font-family: Inter, Arial, sans-serif;
}

.gloves-modal .wpforms-form textarea {
	min-height: 120px;
	padding: 12px 16px;
}

/*
 * Every control fills the dialog.
 *
 * WPForms sizes fields by a class rather than by their container — `-small` is
 * 25%, `-medium` 60%, `-large` 100% — so the four text inputs came out at 60%
 * while the message textarea, set to large, ran the full width. In a 560px
 * dialog that read as a mistake rather than a size choice.
 *
 * `div.wpforms-container-full` is carried in the selector to clear the
 * plugin's own rule, which is otherwise one element more specific than
 * anything scoped to the dialog alone.
 */
.gloves-modal div.wpforms-container-full .wpforms-form input:is(.wpforms-field-small, .wpforms-field-medium, .wpforms-field-large),
.gloves-modal div.wpforms-container-full .wpforms-form select:is(.wpforms-field-small, .wpforms-field-medium, .wpforms-field-large),
.gloves-modal div.wpforms-container-full .wpforms-form textarea:is(.wpforms-field-small, .wpforms-field-medium, .wpforms-field-large),
.gloves-modal div.wpforms-container-full .wpforms-form .wpforms-field-row {
	max-width: 100%;
	width: 100%;
}

/*
 * Focus is the plugin's default otherwise — a faint grey that is hard to see
 * against the field's own border. Brand blue plus a soft ring reads at a
 * glance and matches the header search field's focus treatment.
 */
.gloves-modal div.wpforms-container-full .wpforms-form input:focus,
.gloves-modal div.wpforms-container-full .wpforms-form select:focus,
.gloves-modal div.wpforms-container-full .wpforms-form textarea:focus {
	border-color: var(--site-color-brand-blue);
	box-shadow: 0 0 0 3px rgba(51, 51, 204, 0.12);
	outline: none;
}

/*
 * The submit matches the product page's own primary button — brand blue, 50px,
 * square. Square is deliberate and not an oversight: the single product page's
 * controls are all square per Figma (see the radius token's note), and these
 * two dialogs open from that page's Share/Ask pair.
 *
 * The resting colour comes from `--wpforms-button-background-color-alt` above,
 * not from here: the plugin's own `:not(:hover):not(:active)` rule is a element
 * more specific than this one and would win a `background-color` declared here.
 * Everything else below it does not set, so these land normally.
 */
.gloves-modal .wpforms-form button[type="submit"] {
	border: 0;
	border-radius: 0;
	color: var(--site-color-white);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.32px;
	transition: background-color 160ms ease;
	width: 100%;
}

.gloves-modal .wpforms-form button[type="submit"]:hover,
.gloves-modal .wpforms-form button[type="submit"]:focus-visible {
	background-color: var(--site-color-dark-blue);
}

/*
 * Title and close button.
 *
 * The serif at 600 was heavier than any other heading on the site — the
 * display face is used at 500 throughout — and the close control was a 27px
 * glyph with no hit area to speak of. 44px is the minimum comfortable touch
 * target, and the surface only appears on hover so the head stays quiet.
 */
.gloves-modal__title {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
}

.gloves-modal__close {
	align-items: center;
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 auto;
	height: 44px;
	justify-content: center;
	margin: -8px -8px 0 0;
	padding: 0;
	transition: background-color 160ms ease, color 160ms ease;
	width: 44px;
}

.gloves-modal__close:hover,
.gloves-modal__close:focus-visible {
	background: var(--site-color-grey);
}

/* Lifts the panel off the page behind it without hiding it completely. */
.gloves-modal__backdrop {
	backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {

	.gloves-modal .wpforms-form button[type="submit"],
	.gloves-modal__close {
		transition: none;
	}
}

@media (max-width: 782px) {
	.gloves-modal {
		padding: var(--gloves-mobile-gutter);
	}

	.gloves-modal__dialog {
		max-height: calc(100vh - (var(--gloves-mobile-gutter) * 2));
	}

	.gloves-modal__head,
	.gloves-modal__body {
		padding: 16px;
	}

	.gloves-modal__title {
		font-size: 18px;
		line-height: 26px;
	}

	.gloves-product-actions__button {
		flex: 1 1 auto;
	}
}

/**
 * Figma single product page
 *
 * Layout, selectors, data tabs, and the "Recommended For You" row. Scoped to
 * `.single-product` throughout; several rules also carry `.woocommerce`,
 * because WooCommerce's own stylesheet is loaded and styles the same elements
 * at `.woocommerce div.product ...`.
 */
:root {
	/* Figma: 739px media column + 109px gap + 384px summary = the 1232 shell. */
	--gloves-pdp-gallery-col: 739fr;
	--gloves-pdp-summary-col: 384fr;
	--gloves-pdp-column-gap: 109px;
	--gloves-pdp-shell-max: 1232px;
	/* Hairline used by every framed surface on this page: image tiles and tabs. */
	--gloves-pdp-border: #e8ecef;
	/* Figma's own hairline for the gallery frames and the variation selects. */
	--gloves-pdp-hairline: #6c7275;
}

/* Page shell
--------------------------------------------- */
/*
 * The 1,234px contract is a CONTENT width, so the gutter has to sit outside
 * it. Capping the box itself at the contract and then padding inwards left
 * the product only 1,186px wide — 48px narrower than every other page on the
 * site, which is why the gallery/summary pair read as inset against the
 * catalog pages.
 */
.single-product .site-main {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: calc(var(--gloves-pdp-shell-max) + 48px);
	/* Figma clears 64px between the last row and the footer. */
	padding: 0 24px 64px;
	width: 100%;
}

/*
 * Matched to the catalog breadcrumb: same markup, icons, type, and rhythm.
 *
 * The width reset is the part that was missing. This element is the stack
 * breadcrumb runtime's own wrapper, and the runtime gives it the stack shell —
 * `max-width: 1200px` with auto margins. Inside the product page's 1232px shell
 * that centred it independently, so the trail started 16px to the right of the
 * gallery below it and 20px right of where the catalog puts its own trail. It
 * now fills the shell it sits in, which lines it up with `div.product` beneath
 * it and with the category page's trail.
 *
 * The 24px symmetric padding is the catalog's, replacing the 20/28 split.
 */
.single-product .gloves-product__breadcrumbs {
	margin-inline: 0;
	max-width: none;
	padding: 24px 0;
	width: 100%;
}

/*
 * Two columns, with the gallery holding the left one for both summary rows.
 * The wishlist button is its own child of `div.product`, so it is pinned to the
 * summary column rather than left to auto-place into the media column.
 */
.single-product div.product {
	align-items: start;
	column-gap: var(--gloves-pdp-column-gap);
	display: grid;
	grid-template-columns: minmax(0, var(--gloves-pdp-gallery-col)) minmax(0, var(--gloves-pdp-summary-col));
	margin: 0;
	/* Same distance below the breadcrumb as every other page. */
	padding-top: var(--gloves-page-heading-space);
}

/*
 * The `.woocommerce` qualifier is load-bearing, not decoration. WooCommerce
 * floats these two into a 48/48 pair from `.woocommerce div.product div.images`
 * and `... div.summary`, both (0,3,2); without the extra class these rules tie
 * at best and the columns keep collapsing to 48% of their own grid track.
 */
.single-product.woocommerce div.product>div.woocommerce-product-gallery {
	float: none;
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
	width: 100%;
}

.single-product.woocommerce div.product>div.summary {
	grid-column: 2;
}

/*
 * Wishlist heart, laid over the product image's top-right corner.
 *
 * Placed into the gallery's own grid cell rather than positioned inside the
 * gallery. Anything absolutely positioned in there anchors to the slide list,
 * which the carousel stretches to the combined width of every slide and then
 * translates — the heart ended up 2100px off-screen on any product with more
 * than one image. Sharing the grid cell sidesteps the slider entirely.
 */
.single-product.woocommerce div.product>.yith-add-to-wishlist-button-block {
	align-self: start;
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	line-height: 0;
	margin: 16px;
	z-index: 4;
}

.single-product.woocommerce div.product>div.summary {
	float: none;
	margin: 0;
	width: 100%;
}

.single-product div.product>.woocommerce-tabs,
.single-product div.product>.related {
	grid-column: 1 / -1;
}

/*
 * WooCommerce clears its floated layouts with `::before`/`::after` on these
 * containers. Once the container is a grid those pseudo-elements stop being
 * clearfixes and become real grid items: they claim the first cell, which is
 * what pushed the quantity box into the Add to Cart column and left the first
 * recommended card slot empty. They have no job left here, so they are removed.
 */
.single-product.woocommerce div.product::before,
.single-product.woocommerce div.product::after,
.single-product.woocommerce div.product form.cart::before,
.single-product.woocommerce div.product form.cart::after,
.single-product.woocommerce div.product .woocommerce-variation-add-to-cart::before,
.single-product.woocommerce div.product .woocommerce-variation-add-to-cart::after,
.single-product.woocommerce ul.gloves-product__related-grid::before,
.single-product.woocommerce ul.gloves-product__related-grid::after {
	display: none;
}

/* Gallery
--------------------------------------------- */

/*
 * The heart anchors to the gallery, never to the slide strip. Splide sizes
 * `.splide__list` to the combined width of every slide and translates it, so
 * anything positioned against that box is dragged off-screen with the carousel.
 */
.single-product .woocommerce-product-gallery {
	position: relative;
}

/*
 * The Splide root for the main image. No frame here: this box wraps the track
 * and the arrows, and the arrows sit outside the framed area. The frame is on
 * `.splide__track`, which is the element that stays put while the slides move.
 */
.single-product .woocommerce-product-gallery__wrapper {
	border: 0;
	border-radius: 0;
	margin: 0;
}

/*
 * The chip itself. YITH prints an empty `.yith-add-to-wishlist-button-block`
 * mount point and React fills in this anchor on load, so the placement above
 * targets the container and the styling here targets the hydrated anchor.
 */
.single-product div.product .yith-wcwl-add-to-wishlist-button {
	align-items: center;
	background: var(--site-color-white);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 8px 16px -8px rgba(20, 23, 24, 0.12);
	box-sizing: border-box;
	color: var(--gloves-color-neutral-07);
	cursor: pointer;
	display: flex;
	gap: 0;
	height: 36px;
	justify-content: center;
	min-width: 0;
	padding: 0;
	text-decoration: none;
	width: 36px;
}

.single-product div.product .yith-wcwl-add-to-wishlist-button:hover,
.single-product div.product .yith-wcwl-add-to-wishlist-button:focus-visible {
	color: var(--site-color-brand-blue);
}

/*
 * Same heart as the product cards.
 *
 * YITH ships its own thin outline heart on a 24 viewBox, which is a different
 * glyph from the Figma heart the catalog and carousel tiles draw. The plugin's
 * SVG is dropped here and the card heart is drawn in its place, so every
 * wishlist control on the site is the one icon.
 *
 * Drawn as a mask rather than the cards' background-image so the glyph paints
 * with `currentColor` and the chip's existing hover — grey at rest, brand blue
 * on hover — keeps working. A background-image would bake the fill in and the
 * hover would do nothing. The rest colour is the cards' own #6C7275.
 */
.single-product div.product .yith-wcwl-add-to-wishlist-button {
	color: var(--gloves-color-neutral-04);
}

.single-product div.product .yith-wcwl-add-to-wishlist-button-icon {
	display: none;
}

.single-product div.product .yith-wcwl-add-to-wishlist-button::before {
	background: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 15px;
	-webkit-mask: var(--gloves-heart-outline) center / 19px 15px no-repeat;
	mask: var(--gloves-heart-outline) center / 19px 15px no-repeat;
	width: 19px;
}

/*
 * The added state, which this page was missing entirely.
 *
 * Every other wishlist control swaps to the solid heart in the sale red once
 * the product is on the list; here the outline glyph was the only one ever
 * drawn, so a product page heart stayed hollow after a click. The `background`
 * is stated rather than left on `currentColor` so the chip's brand-blue hover
 * cannot pull an added heart back off the red.
 */
.single-product div.product .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--added::before,
.single-product div.product .yith-wcwl-add-to-wishlist-button.exists::before,
.single-product div.product .yith-wcwl-wishlistaddedbrowse a::before,
.single-product div.product .yith-wcwl-wishlistexistsbrowse a::before {
	background: var(--gloves-color-price-sale);
	-webkit-mask-image: var(--gloves-heart-solid);
	mask-image: var(--gloves-heart-solid);
}

/* The single-product variant ships a text label; the image tile has no room. */
.single-product div.product .yith-wcwl-add-to-wishlist-button__label,
.single-product div.product .yith-wcwl-add-to-wishlist-button-label {
	display: none;
}

/*
 * Figma: 739 x 745 frame, 4px radius, 0.5px #6C7275 hairline. Expressed as a
 * ratio rather than a fixed 745px height so it still resolves to 745px at the
 * design's 739px column but scales down instead of leaving a tall empty box
 * once the gallery goes full-width on a phone.
 *
 * The frame is drawn once, on the carousel track. Drawing it on each slide
 * would repeat it across the strip: the track clips at its own edge, so the
 * neighbouring slide's border shows as a stray line the moment a drag starts.
 */
.single-product .gloves-gallery__main .splide__track {
	border: 0.5px solid var(--gloves-pdp-hairline);
	border-radius: 4px;
	box-sizing: border-box;
}

.single-product .woocommerce-product-gallery__image {
	aspect-ratio: 739 / 745;
	background: var(--site-color-white);
	box-sizing: border-box;
}

.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery__image img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/*
 * The product photography is shot on white, so a `multiply` blend drops the
 * baked-in background and leaves the glove sitting on the tile. Same treatment
 * as the catalog cards.
 */
.single-product .woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
	padding: 24px;
}

/*
 * Figma's gallery has no zoom affordance on the main image, and the zoom theme
 * support that would print this trigger is switched off in inc/product-page.php.
 * The rule stays as a belt on the braces: WooCommerce pins the trigger with
 * `.woocommerce div.product div.images .woocommerce-product-gallery__trigger`,
 * so a plugin re-enabling zoom needs this selector to be beaten, not a shorter
 * one.
 */
.single-product.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: none;
}

/* Gallery carousel
--------------------------------------------- */

/*
 * Splide hides its root until it has mounted, so that a page never flashes the
 * whole slide strip before the library lays it out. That is the right default
 * and the wrong failure mode for a product image: if the script never runs the
 * gallery is simply invisible. These two rules make the un-mounted state render
 * as the first image on its own, which is what the page looked like before the
 * carousel existed.
 */
.single-product .gloves-gallery .splide:not(.is-initialized) {
	visibility: visible;
}

.single-product .gloves-gallery .splide:not(.is-initialized) .splide__slide+.splide__slide {
	display: none;
}

/* Figma: the thumbnail strip sits 8px under the image frame. */
.single-product .gloves-gallery__thumbs {
	margin-top: 8px;
}

.single-product .gloves-gallery__thumb img {
	/* Figma: 242 x 187.81, 2.26px radius, 0.5px #6C7275. */
	aspect-ratio: 242 / 187.81;
	background: var(--site-color-white);
	border: 0.5px solid var(--gloves-pdp-hairline);
	border-radius: 2.26px;
	box-sizing: border-box;
	display: block;
	height: auto;
	mix-blend-mode: multiply;
	object-fit: contain;
	padding: 10px;
	width: 100%;
}

/*
 * `isNavigation` makes each thumbnail the control for its slide, and Splide's
 * own stylesheet gives those a 3px transparent border that turns solid black on
 * the active one. Both are cleared: the hairline above is the frame Figma
 * draws, and the border swap would shift every thumbnail by 3px as the carousel
 * moved. The active thumbnail is marked with opacity instead, which changes
 * nothing about the layout.
 */
.single-product .gloves-gallery__thumbs .splide__track--nav>.splide__list>.splide__slide,
.single-product .gloves-gallery__thumbs .splide__track--nav>.splide__list>.splide__slide.is-active {
	border: 0;
}

/*
 * A deliberate departure from Figma, which draws every thumbnail identically
 * and gives the selected one no treatment of its own. That reads fine as a
 * static strip of three; as the control surface for a carousel it leaves no way
 * to tell which image is on screen. Dimming the inactive thumbnails is the
 * lightest affordance that answers it, and it costs no layout — a border or a
 * scale would nudge the whole strip on every slide change.
 */
.single-product .gloves-gallery__thumb {
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.single-product .gloves-gallery__thumb.is-active,
.single-product .gloves-gallery__thumb:hover,
.single-product .gloves-gallery__thumb:focus-visible {
	opacity: 1;
}

/*
 * Arrows over the image, in the site's chip treatment rather than Splide's grey
 * pill. They are only rendered when the product has more than one image.
 */
.single-product .gloves-gallery__main .splide__arrow {
	background: var(--site-color-white);
	border-radius: 50%;
	box-shadow: 0 8px 16px -8px rgba(20, 23, 24, 0.24);
	height: 36px;
	opacity: 1;
	transition: background 0.2s ease, opacity 0.2s ease;
	width: 36px;
}

.single-product .gloves-gallery__main .splide__arrow svg {
	fill: var(--gloves-color-neutral-07);
	height: 16px;
	width: 16px;
}

.single-product .gloves-gallery__main .splide__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.single-product .gloves-gallery__main .splide__arrow--prev {
	left: 16px;
}

.single-product .gloves-gallery__main .splide__arrow--next {
	right: 16px;
}


/* Summary column
--------------------------------------------- */
/* Figma: Libre Caslon Text Medium 36/150%, -1px tracking, pure black. */
.single-product div.product .product_title {
	color: #000;
	font-size: 36px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.5;
	margin: 0 0 10px;
	padding: 0;
}

/* Figma "B1": Inter Regular 20/32, -0.25px tracking, pure black. */
.single-product div.product .summary>.price {
	color: #000;
	display: flex;
	flex-wrap: wrap;
	font-family: Inter, Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	gap: 12px;
	letter-spacing: -0.25px;
	line-height: 32px;
	margin: 0 0 4px;
}

/* WooCommerce emits <del> before <ins>; Figma leads with the price being charged. */
.single-product div.product .summary>.price ins {
	background: none;
	color: var(--gloves-color-price-sale);
	order: 1;
	text-decoration: none;
}

.single-product div.product .summary>.price del {
	color: var(--gloves-color-price-was);
	font-weight: 500;
	opacity: 1;
	order: 2;
}

.single-product div.product .woocommerce-product-rating {
	margin: 0;
	position: relative;
}

/* Figma "B3": Inter Regular 14/175%, #737373 for both score and count. */
.gloves-product__rating {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	gap: 8px;
	line-height: 1.75;
}

.gloves-product__rating-score {
	color: #737373;
	font-weight: 400;
}

.gloves-product__rating-count {
	color: #737373;
	text-decoration: none;
}

.gloves-product__rating-count:hover,
.gloves-product__rating-count:focus-visible {
	color: var(--site-color-brand-blue);
	text-decoration: underline;
}

/*
 * rating.php prints its own "(1 customer review)" link next to the stars. The
 * replacement rating block already carries that count in the Figma wording, so
 * the stock link would say the same thing twice on the same line.
 */
.single-product div.product .woocommerce-product-rating .woocommerce-review-link {
	display: none;
}

/* "Size" label and the size guide link
--------------------------------------------- */
/* Figma rules the options block off from the price/rating above it, the same
   hairline the meta block below the cart already uses. */
/* Figma rules the options block off from the rating above it, then sets the
   header row 18px under that rule and 10px above the first variation row. */
.gloves-product-options-head {
	align-items: baseline;
	border-top: 1px solid #5e5e5e;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 10px;
	margin-top: 18px;
	min-height: 26px;
	padding-top: 18px;
}

/* Figma "B2": Inter Semi Bold 16/26, -0.1px tracking, pure black. */
.gloves-product-options-head__label {
	color: #000;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
}

/* Pushed right on its own when the product has no attribute rows to label. */
/* Figma "Text/200 underline": 12/16, 0.2px tracking, #262626. (Figma names
   the face Maison Neue, which this site does not license; Inter carries the
   same metrics and is the family used everywhere else on the page.) */
.gloves-product-options-head__guide {
	background: none;
	border: 0;
	color: #262626;
	cursor: pointer;
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 0.2px;
	line-height: 16px;
	margin-left: auto;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gloves-product-options-head__guide:hover,
.gloves-product-options-head__guide:focus-visible {
	color: var(--site-color-brand-blue);
}

/* Variation selectors
--------------------------------------------- */

/*
 * WooCommerce renders the attribute chooser as a table. Figma wants a label
 * beside a select on each row, so the table parts are re-declared as grid rows.
 * Rebuilding the markup instead would mean overriding variable.php and keeping
 * it in step with WooCommerce's own updates for no design gain.
 */
.single-product div.product table.variations {
	border: 0;
	display: block;
	margin: 0 0 20px;
	width: 100%;
}

/* Figma: rows are 34px tall with a 10px gap between them. */
.single-product div.product table.variations tbody {
	display: grid;
	gap: 10px;
}

/* Figma: each row fills the 384px column, label left, 234px select right. */
.single-product div.product table.variations tr {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) 234px;
	min-height: 34px;
}

.single-product div.product table.variations th,
.single-product div.product table.variations td {
	border: 0;
	display: block;
	padding: 0;
}

/* Figma: Inter Bold 12/22, #1C222B, hard left against the summary column. */
.single-product div.product table.variations th.label {
	text-align: left;
}

.single-product div.product table.variations th.label label {
	color: #1c222b;
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	margin: 0;
	text-align: left;
}

.single-product div.product table.variations td.value {
	position: relative;
}

/* Figma: 234 x 34, 4px radius, 0.5px #6C7275, 6px/12px padding,
   Inter Semi Bold 12/22 in pure black. */
.single-product div.product table.variations select {
	appearance: none;
	background: var(--site-color-white);
	/* The stack paints its own chevron as a background SVG on the right, which
	   doubled up with Figma's single left chevron (drawn by the cell's
	   ::after). Declared after the shorthand so it is not reset by it. */
	background-image: none !important;
	border: 0.5px solid var(--gloves-pdp-hairline);
	border-radius: 4px;
	box-sizing: border-box;
	color: #000;
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	height: 34px;
	line-height: 22px;
	margin: 0;
	/* Room for the chevron drawn by the cell's ::after. */
	padding: 6px 12px 6px 31px;
	width: 100%;
}

.single-product div.product table.variations td.value::after {
	border-bottom: 1.5px solid var(--gloves-color-neutral-07);
	border-right: 1.5px solid var(--gloves-color-neutral-07);
	content: "";
	height: 7px;
	left: 12px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-70%) rotate(45deg);
	width: 7px;
}

.single-product div.product table.variations select:focus-visible {
	border-color: var(--site-color-brand-blue);
	outline: none;
}

/*
 * WooCommerce keeps the "Clear" link in the document at `visibility: hidden`
 * until a variation is picked, so in normal flow it adds a permanent 32px to
 * the last attribute cell and knocks that row's label out of alignment. Taking
 * it out of flow lets it appear under the row without moving anything.
 */
.single-product div.product .reset_variations {
	color: var(--gloves-color-neutral-04);
	font-size: 12px;
	line-height: 20px;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
}

.single-product div.product .woocommerce-variation-price {
	margin-bottom: 12px;
}

/* Quantity and Add to Cart
--------------------------------------------- */
/* Figma: 54px qty + 10px gap + 320px button = the 384px summary column. */
.single-product div.product form.cart {
	display: grid;
	gap: 10px;
	grid-template-columns: 54px minmax(0, 1fr);
	margin: 0 0 24px;
}

/*
 * On a variable product the qty box and button are nested inside
 * `.single_variation_wrap`, which is itself a grid item. Left to auto-place it
 * lands in the 60px quantity column and squeezes the whole control down to a
 * clipped "Add" button, so it is spanned across both tracks and re-grids below.
 */
.single-product div.product form.cart .variations,
.single-product div.product form.cart .single_variation_wrap,
.single-product div.product form.cart .woocommerce-variation,
.single-product div.product form.cart .reset_variations_alert {
	grid-column: 1 / -1;
}

/* WooCommerce pads this wrapper, which shrank the 54px Figma box to 50px. */
.single-product div.product form.cart .quantity {
	float: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/*
 * Figma: 54 x 48 box with a 0.5px black hairline and square corners.
 *
 * The product page is the square-cornered surface: the qty box, the add-to-cart
 * button beside it and the Share/Ask pair below all sit at 0. The 8px button
 * radius still applies everywhere else — catalog cards, the home rows, cart and
 * checkout. Change all four of those product-page controls together if the page
 * is ever brought onto the rounded scale.
 */
.single-product div.product form.cart .quantity input.qty {
	border: 0.5px solid #000;
	border-radius: 0;
	box-sizing: border-box;
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	height: 48px;
	padding: 0 4px;
	text-align: center;
	width: 100%;
}

/* WooCommerce dims this to 50% opacity (.disabled.wc-variation-selection-needed)
   before a variation is chosen — real, correct brand-blue underneath, just
   faded. Figma shows the button at full color unconditionally, so opacity is
   pinned to 1 regardless of that state. */
/* Figma: 50px tall, brand blue, Inter Medium 16/30 at -2% tracking, square
   corners (the Figma button carries no radius). See the qty note above. */
.single-product div.product form.cart button.single_add_to_cart_button {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 0;
	color: var(--site-color-white);
	cursor: pointer;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	height: 50px;
	letter-spacing: -0.32px;
	line-height: 30px;
	margin: 0;
	opacity: 1 !important;
	padding: 10px 24px;
	width: 100%;
}

.single-product div.product form.cart button.single_add_to_cart_button:hover,
.single-product div.product form.cart button.single_add_to_cart_button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/*
 * On a variable product the add-to-cart controls live in their own wrapper
 * inside the form, so the grid is re-established there instead.
 */
/* Same 54 + 10 + 320 split as the simple-product form above; a variable
   product nests the qty and button in here instead. */
.single-product div.product form.cart .woocommerce-variation-add-to-cart {
	display: grid;
	gap: 10px;
	grid-column: 1 / -1;
	grid-template-columns: 54px minmax(0, 1fr);
}

/* Product meta
--------------------------------------------- */
/* Figma: one line — "SKU: MC-561 Category: White & Black" — Inter Regular
   16/24 at -0.31px tracking. */
.single-product div.product .product_meta {
	border-top: 1px solid #5e5e5e;
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	letter-spacing: -0.31px;
	line-height: 24px;
	padding-top: 20px;
}

.single-product div.product .product_meta>span {
	display: block;
	margin-bottom: 6px;
}

.single-product div.product .product_meta>span:last-of-type {
	margin-bottom: 0;
}

/*
 * WooCommerce Brands appends its own `.posted_in` span on the
 * `woocommerce_product_meta_end` hook. Figma's meta block is SKU + category
 * only, and that hook has to stay (the Share/Ask buttons render on it), so the
 * brand line is hidden here rather than by unhooking the plugin.
 */
.single-product div.product .product_meta>.posted_in:not(.gloves-product__category) {
	display: none;
}

.single-product div.product .product_meta a {
	color: var(--site-color-brand-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Data tabs
--------------------------------------------- */

/*
 * Figma note: "These jut out slightly, but they should be in one contained
 * shape with rounded corners." So the tab row and the panel share one bordered,
 * rounded box, with the active tab reading as the open face of that box.
 */
/*
 * No box here. Figma gives each tab its own capped outline and the panel its
 * own full border, so a wrapper frame would draw a third, full-width line
 * across the top of the strip.
 */
.single-product div.product .woocommerce-tabs {
	border: 0;
	border-radius: 0;
	margin: 72px 0 0;
	overflow: visible;
	position: relative;
}

/* Figma: no rule across the strip — the caps carry their own outline — and
   the first cap starts 11px in from the panel's left edge. */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
	background: transparent;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0 0 0 11px;
	position: relative;
	z-index: 2;
}

/* WooCommerce draws the tab shoulders and the strip's own rule with these. */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

/* Figma: 42px caps outlined 1px #CFC8D8 on their top and sides only, 4px top
   corners, white while inactive. */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--site-color-white);
	border: 1px solid #cfc8d8;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	box-shadow: none;
	box-sizing: border-box;
	display: block;
	margin: 0;
	min-height: 42px;
	padding: 0;
}

/* Figma: Inter Bold 16/24, #515151, 17px either side. Centred with flex
   rather than split padding so the label sits on the cap's optical middle. */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	align-items: center;
	color: #515151;
	display: flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	justify-content: center;
	line-height: 24px;
	/* 42px cap less the 1px top border it sits under. */
	min-height: 41px;
	padding: 0 17px;
	text-decoration: none;
}

/* Pulled down over the panel's own top edge so the active cap runs straight
   into it with no line between the two greys. */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--site-color-display-grey, #f5f5f5);
	margin-bottom: -1px;
	position: relative;
	z-index: 3;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: #515151;
}

/*
 * The panel also carries `.entry-content`, which the stack caps at a reading
 * measure. That cap is right for an article and wrong here: it left the grey
 * panel ending partway across its own bordered box.
 */
/* Figma: 0.5px #6C7275 outline on all four sides, 4px corners, an even 48px
   inset, body copy Inter Regular 14/22 in #1C222B with a 16px block rhythm. */
.single-product div.product .woocommerce-tabs .panel {
	background: var(--site-color-display-grey, #f5f5f5);
	border: 0.5px solid var(--gloves-pdp-hairline);
	border-radius: 4px;
	box-sizing: border-box;
	color: #1c222b;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	line-height: 22px;
	margin: 0;
	max-width: none;
	padding: 48px;
	position: relative;
	z-index: 1;
}

.single-product div.product .woocommerce-tabs .panel>* {
	margin-block: 0 16px;
}

/* The tabs carry the section labels; a second heading inside repeats them. */
.single-product div.product .woocommerce-tabs .panel>h2:first-child {
	display: none;
}

.single-product div.product .woocommerce-tabs .panel p {
	margin: 0 0 14px;
}

.single-product div.product .woocommerce-tabs .panel p:last-child {
	margin-bottom: 0;
}

/* Recommended For You
--------------------------------------------- */
/* Figma: 64px clear above the section. */
.single-product div.product .gloves-product__related {
	margin-top: 64px;
}

/* Figma "H2": Libre Caslon Text Medium 40/44, -0.4px tracking, pure black,
   with the card row 48px beneath it. */
.single-product div.product .gloves-product__related-title {
	color: #000;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0 0 48px;
}

.single-product .gloves-product__related-slider {
	position: relative;
	width: 100%;
}

.single-product .gloves-product__related-slider:not(.is-initialized) .gloves-product__related-grid {
	display: flex;
	gap: 24px;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.single-product .gloves-product__related-slider:not(.is-initialized) .gloves-product__related-grid li.gloves-catalog__item {
	flex: 0 0 calc(25% - 18px);
	min-width: calc(25% - 18px);
	max-width: calc(25% - 18px);
	box-sizing: border-box;
}

.single-product .gloves-product__related-slider.is-initialized .gloves-product__related-grid {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Beats `.woocommerce ul.products li.product`, which floats each card to 22%. */
.single-product.woocommerce ul.gloves-product__related-grid li.gloves-catalog__item {
	float: none;
	margin: 0;
	flex-shrink: 0;
	box-sizing: border-box;
}

.single-product .gloves-product__related-slider .splide__arrow {
	background: var(--site-color-white, #ffffff);
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	color: #000;
	height: 40px;
	width: 40px;
	opacity: 1;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 10;
	cursor: pointer;
}

.single-product .gloves-product__related-slider .splide__arrow svg {
	fill: #000000;
	height: 14px;
	width: 14px;
}

.single-product .gloves-product__related-slider .splide__arrow--prev {
	left: -20px;
}

.single-product .gloves-product__related-slider .splide__arrow--next {
	right: -20px;
}

.single-product .gloves-product__related-slider .splide__arrow:hover:not(:disabled) {
	background: var(--site-color-brand-blue, #0056b3);
	border-color: var(--site-color-brand-blue, #0056b3);
}

.single-product .gloves-product__related-slider .splide__arrow:hover:not(:disabled) svg {
	fill: #ffffff;
}

.single-product .gloves-product__related-slider .splide__arrow:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

.single-product .gloves-product__related-slider .splide__pagination {
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 32px !important;
	padding: 0;
	list-style: none;
	z-index: 5;
}

.single-product .gloves-product__related-slider .splide__pagination__page {
	background: #cbd5e1;
	border: none;
	border-radius: 50%;
	height: 8px;
	width: 8px;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
	cursor: pointer;
}

.single-product .gloves-product__related-slider .splide__pagination__page.is-active {
	background: var(--site-color-brand-blue, #000000);
	transform: scale(1.25);
}

@media (max-width: 1240px) {
	.single-product .gloves-product__related-slider .splide__arrow--prev {
		left: 4px;
	}

	.single-product .gloves-product__related-slider .splide__arrow--next {
		right: 4px;
	}
}

.single-product .gloves-product__related-grid .product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Same tile ratio the catalog grid uses, so a card reads identically on both. */
.single-product .gloves-product__related-grid .product-image {
	aspect-ratio: 283 / 308;
	background: var(--site-color-display-grey, #f5f5f5);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.single-product .gloves-product__related-grid .product-image>a {
	display: block;
	height: 100%;
	width: 100%;
}

.single-product .gloves-product__related-grid .product-image img {
	background: transparent;
	display: block;
	height: 100%;
	mix-blend-mode: multiply;
	object-fit: contain;
	padding: 0;
	width: 100%;
}

/* Shown at rest, for the same reason as the catalog heart above. */
.single-product .gloves-product__related-grid .yith-wcwl-add-to-wishlist {
	left: auto;
	margin: 0;
	opacity: 1;
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 3;
}

.single-product .gloves-product__related-grid .cart-btn {
	bottom: 16px;
	left: 16px;
	opacity: 0;
	position: absolute;
	right: 16px;
	transition: opacity 0.15s ease;
	z-index: 2;
}

.single-product .gloves-product__related-grid .product-card:hover .cart-btn,
.single-product .gloves-product__related-grid .product-card:focus-within .cart-btn {
	opacity: 1;
}

/* Matches the catalog card's add-to-cart exactly (16px type, 24px inset and
   the same lift), so the two grids share one button. */
.single-product .gloves-product__related-grid .cart-btn .button {
	align-items: center;
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.0364);
	color: var(--site-color-white);
	display: flex;
	font-size: 16px;
	font-weight: 500;
	height: 41px;
	justify-content: center;
	letter-spacing: -0.4px;
	line-height: 28px;
	margin: 0;
	padding: 8px 24px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.single-product .gloves-product__related-grid .cart-btn .added_to_cart {
	display: none;
}

/* Card rhythm, star size, title face and price colour all mirror the catalog
   grid — the same component, so it must not drift between the two pages. */
.single-product .gloves-product__related-grid .rating {
	margin-top: 8px;
}

.single-product .gloves-product__related-grid .gloves-star-rating {
	font-size: 18px;
}

.single-product .gloves-product__related-grid .product-title {
	color: var(--site-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 8px 0 0;
}

.single-product .gloves-product__related-grid .product-title a {
	color: inherit;
	text-decoration: none;
}

.single-product .gloves-product__related-grid .product-title a:hover,
.single-product .gloves-product__related-grid .product-title a:focus-visible {
	color: var(--site-color-brand-blue);
}

/*
 * Fully qualified because WooCommerce styles this at
 * `.woocommerce ul.products li.product .price` — (0,4,2) — and the related
 * grid carries the `products` class its own template adds, so a shorter
 * selector lost and the price fell back to WooCommerce's 0.857em olive text.
 * The catalog grid has no `products` class, which is why it was never hit.
 */
.single-product.woocommerce div.product ul.gloves-product__related-grid li.product .price {
	align-items: baseline;
	color: #121212;
	display: flex;
	flex-wrap: wrap;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	gap: 12px;
	line-height: 1.75;
	margin: 8px 0 0;
}

.single-product.woocommerce div.product ul.gloves-product__related-grid li.product .price ins {
	background: none;
	color: var(--gloves-color-price-sale);
	font-weight: 700;
	order: 1;
	text-decoration: none;
}

.single-product.woocommerce div.product ul.gloves-product__related-grid li.product .price del {
	color: var(--gloves-color-price-was);
	font-weight: 500;
	letter-spacing: -0.28px;
	opacity: 1;
	order: 2;
	text-decoration: line-through;
}

/* Tablet and mobile
--------------------------------------------- */
@media (max-width: 1024px) {
	.single-product div.product {
		column-gap: 48px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	}

	.single-product div.product .product_title,
	.single-product div.product .gloves-product__related-title {
		font-size: 32px;
		line-height: 40px;
	}

	.single-product .gloves-product__related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.single-product .site-main {
		padding: 0 var(--gloves-mobile-gutter) 56px;
	}

	/*
	 * One column below the breakpoint. Grid placement no longer applies, so the
	 * heart is positioned against `div.product` instead — the gallery is the
	 * first thing in it, so its top-right corner is the image's top-right corner.
	 *
	 * `padding-top` is dropped: the desktop 48px is the gap between the trail and
	 * the page heading, and on a phone the breadcrumb's own 16px block padding is
	 * already the whole separation the design shows. Keeping both pushed the
	 * gallery most of an inch down the first screen.
	 */
	.single-product div.product {
		display: block;
		padding-top: 0;
		position: relative;
	}

	/*
	 * Variation rows stack, and the control fills the line.
	 *
	 * The desktop row is Figma's `1fr | 234px` pair, which on a 360px measure
	 * leaves the select pinned to the right edge with 12px type in it — small
	 * enough that iOS zooms the whole page when it takes focus, which is the
	 * "unresponsive" part: the viewport jumps and does not come back. Label over
	 * control gives the select the full width, 16px holds the zoom off, and 44px
	 * is a real touch target rather than a 34px desktop one.
	 */
	.single-product div.product table.variations tr {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.single-product div.product table.variations select {
		font-size: 16px;
		height: 44px;
		width: 100%;
	}

	/* Re-centred on the taller control. */
	.single-product div.product table.variations td.value::after {
		transform: translateY(-50%) rotate(45deg);
	}

	.single-product.woocommerce div.product>.yith-add-to-wishlist-button-block {
		margin: 0;
		position: absolute;
		right: 16px;
		top: 16px;
	}

	/* Qualified to (0,3,2) so it clears the desktop `margin: 0` reset above,
	   which otherwise left the title sitting flush against the thumbnails. */
	.single-product.woocommerce div.product>div.summary {
		margin-top: 24px;
	}

	.single-product div.product .product_title,
	.single-product div.product .gloves-product__related-title {
		font-size: 26px;
		line-height: 34px;
	}

	.single-product div.product .summary>.price {
		font-size: 22px;
		line-height: 30px;
	}

	.single-product div.product .woocommerce-tabs {
		margin-top: 40px;
	}

	.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 12px 16px;
	}

	.single-product div.product .woocommerce-tabs .panel {
		padding: 20px 16px 24px;
	}

	.single-product div.product .gloves-product__related {
		margin-top: 48px;
	}

	/*
	 * Related products: the arrows move above the cards.
	 *
	 * Down here the two cards fill the whole 360px measure, so the pair had
	 * nowhere to sit — at `left/right: 4px` (the ≤1240px rule above) each 40px
	 * disc covered a quarter of the product it was sitting on. A band above the
	 * track gives them their own room, which is where the home-page carousels
	 * put their controls too, so the row reads the same way.
	 *
	 * The band is padding on the Splide root rather than a margin on the track:
	 * Splide measures slide widths from the track, and padding on the root
	 * leaves that measurement alone.
	 */
	.single-product .gloves-product__related-slider {
		padding-top: 52px;
	}

	.single-product .gloves-product__related-slider .splide__arrow {
		height: 36px;
		top: 0;
		transform: none;
		width: 36px;
	}

	.single-product .gloves-product__related-slider .splide__arrow--prev {
		left: auto;
		right: 44px;
	}

	.single-product .gloves-product__related-slider .splide__arrow--next {
		right: 0;
	}
}

/* Reviews tab
--------------------------------------------- */

/* Summary column beside the review list, per the Figma reviews panel. */
.gloves-reviews__body {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}

/* Without a summary column the list should still fill the panel. */
.gloves-reviews__body>.gloves-reviews__list:first-child {
	grid-column: 1 / -1;
}

.gloves-reviews__average {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	margin: 0 0 10px;
}

.gloves-reviews__summary .gloves-star-rating {
	font-size: 20px;
	margin-bottom: 12px;
}

/*
 * The reviews panel used to override the shared star fill back to the neutral
 * ink, which made this the one place on the site drawing black stars. Removed:
 * the client asked for gold everywhere, so the panel now inherits the shared
 * `--gloves-color-star` like the carousels and the catalog grid.
 */

.gloves-reviews__bars {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gloves-reviews__bar-row {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: auto minmax(0, 1fr) 18px;
	margin: 0;
}

.gloves-reviews__bar-label {
	align-items: center;
	color: var(--gloves-color-neutral-04);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	gap: 3px;
	line-height: 18px;
}

/* The single glyph beside each "5", "4"… row label in the distribution. */
.gloves-reviews__bar-star {
	color: var(--gloves-color-star);
	font-size: 13px;
}

.gloves-reviews__bar-track {
	background: #dfe3e6;
	border-radius: 999px;
	display: block;
	height: 6px;
	overflow: hidden;
}

.gloves-reviews__bar-fill {
	background: var(--gloves-color-neutral-06);
	border-radius: 999px;
	display: block;
	height: 100%;
}

.gloves-reviews__bar-count {
	color: var(--gloves-color-neutral-04);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	line-height: 18px;
	text-align: right;
}

/* Review list
--------------------------------------------- */
#reviews #comments ol.commentlist {
	display: grid;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Every review closes with its own rule, rather than the previous approach of
 * drawing one only between items. The 30px sits on both sides of that line —
 * the list gap above the next review, the padding below this one — so the
 * divider is centred in the space instead of hugging the review under it.
 *
 * Written through the two IDs on purpose. WooCommerce ships
 * `#reviews #comments ol.commentlist li { padding: 0; margin: 0 0 20px;
 * border: 0 }`, and two IDs outrank any number of classes — the class-only
 * version of this rule lost its border and padding outright, which is why the
 * dividers never appeared. Matching the same IDs takes this to 2-2-2 and wins
 * on specificity rather than on `!important`.
 */
#reviews #comments ol.commentlist li.gloves-review {
	background: none;
	border: 0;
	border-bottom: 1px solid #dddbdc;
	margin: 0;
	padding: 0 0 30px;
}

.gloves-review__inner {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 175px) minmax(0, 1fr);
}

.gloves-review__pending {
	grid-column: 1 / -1;
	margin: 0;
}

.gloves-review__author {
	font-family: Inter, Arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
}

.gloves-review__name {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 0 0 8px;
}

.gloves-review__verified {
	align-items: center;
	color: var(--gloves-color-neutral-07);
	display: flex;
	gap: 6px;
	margin: 0 0 12px;
}

.gloves-review__verified-icon {
	color: var(--gloves-color-neutral-06);
	flex: 0 0 auto;
}

.gloves-review__head {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 10px;
}

/*
 * 18px stars on a 6px gap. The glyphs are text, so the size is the font size
 * and the gap is tracking — overriding the 2px the shared star rule carries.
 * Both the track and the clipped fill layer inherit it, so a partial rating
 * still lines up over its own track.
 */
.gloves-review__head .gloves-star-rating {
	font-size: 18px;
	letter-spacing: 6px;
}

.gloves-review__date {
	color: var(--gloves-color-neutral-04);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
}

.gloves-review__title {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 175%;
	margin: 0 0 8px;
}

.gloves-review__text {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 175%;
}

.gloves-review__text p {
	margin: 0 0 10px;
}

.gloves-review__text p:last-child {
	margin-bottom: 0;
}

/* Review form
--------------------------------------------- */
/*
 * No top rule here any more. Now that every review closes with its own
 * divider, the last one already separates the list from this form — keeping
 * this border as well drew a second line a little over 60px below the first.
 */
.gloves-reviews__form {
	margin-top: 36px;
	padding-top: 28px;
}

.gloves-reviews__form label {
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 4px;
}

.gloves-reviews__form input[type="text"],
.gloves-reviews__form input[type="email"],
.gloves-reviews__form select,
.gloves-reviews__form textarea {
	border: 1px solid var(--gloves-pdp-border);
	border-radius: 4px;
	box-sizing: border-box;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	max-width: 420px;
	padding: 9px 12px;
	width: 100%;
}

.gloves-reviews__form textarea {
	max-width: none;
}

/* Square, like every other button on the product page. It was the lone 4px. */
.single-product.woocommerce div.product .gloves-reviews__form input[type="submit"] {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: 0;
	color: var(--site-color-white);
	cursor: pointer;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	padding: 13px 32px;
}

.single-product.woocommerce div.product .gloves-reviews__form input[type="submit"]:hover,
.single-product.woocommerce div.product .gloves-reviews__form input[type="submit"]:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

@media (max-width: 1024px) {
	.gloves-reviews__body {
		gap: 28px;
		grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	}

	.gloves-review__inner {
		grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	}
}

@media (max-width: 782px) {

	.gloves-reviews__body,
	.gloves-review__inner {
		display: block;
	}

	.gloves-reviews__summary {
		border-bottom: 1px solid #dfe3e6;
		margin-bottom: 24px;
		padding-bottom: 24px;
	}

	.gloves-review__author {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 16px;
		margin-bottom: 12px;
	}

	.gloves-review__name,
	.gloves-review__verified {
		margin-bottom: 0;
	}
}

/**
 * Cart and Checkout
 *
 * Both pages render the classic WooCommerce shortcode templates (see
 * inc/woocommerce-pages.php for why), so what lands on the page is stock
 * WooCommerce markup carrying stock WooCommerce styling — the purple buttons
 * and floated collaterals that ship with the plugin. These rules re-skin that
 * markup onto the site's own tokens: brand blue actions, Inter body copy,
 * Libre Caslon section headings, and the neutral-03 hairline used across the
 * product pages.
 *
 * Scoped to the `woocommerce-cart` / `woocommerce-checkout` body classes so
 * nothing here reaches the shop, catalog, or product templates, which already
 * have their own Figma treatments further up this stylesheet.
 */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
	--gloves-cart-shell-max: 1232px;
	--gloves-cart-border: var(--gloves-border-strong);
	/* Fields share the table/totals border colour. */
	--gloves-field-border: #b5b5b5;
	--gloves-field-height: 48px;
	--gloves-cart-ink: var(--gloves-color-neutral-07);
	--gloves-cart-muted: var(--gloves-color-neutral-04);
	--gloves-cart-surface: var(--site-color-grey);
	/* Kept as names the cart rules already use; the values are the site scale. */
	--gloves-cart-radius: var(--gloves-radius-button);
	--gloves-cart-field-radius: var(--gloves-radius-field);
	--gloves-cart-gap: 32px;
}

/* Shell
--------------------------------------------- */
/* The shortcode output is a bare `.woocommerce` div dropped straight into the
   builder's grid container, so it carries no gutter or measure of its own.
   Measured with `--mrn-shell-wide-width` (1240px), the token behind
   `.mrn-shell-container--wide` — what the catalog header, the catalog
   breadcrumbs and now the page breadcrumb trail all size to. The hero's own
   78rem is 8px wider, so the hero is pulled down to this measure too (below)
   rather than the cart being widened to meet it; matching the catalog is what
   keeps the two page types consistent. */
.woocommerce-cart .entry-content--builder>.woocommerce,
.woocommerce-checkout .entry-content--builder>.woocommerce,
.woocommerce-account .entry-content--builder>.woocommerce {
	box-sizing: border-box;
	color: var(--gloves-cart-ink);
	font-family: Inter, Arial, sans-serif;
	margin-inline: auto;
	max-width: min(var(--mrn-shell-wide-width), calc(100% - (2 * var(--mrn-shell-gutter))));
	/* `.entry-content--builder` is a grid, so this is a grid item and inherits
	   `min-width: auto` — it refuses to shrink below the cart table's
	   min-content width and pushes the whole page into a horizontal scroll on
	   a phone. Zeroing the automatic minimum lets the max-width above win. */
	min-width: 0;
	width: 100%;
}

/* 64px of clearance to the footer, measured from the content rather than added
   as padding inside the shell. The parent stacks its own margins on the entry
   wrapper and the article below it, which put the real gap at 366px on the
   desktop cart and 24px on mobile — so those are zeroed and one fixed value is
   set on the main column. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-cart .mrn-singular-shell,
.woocommerce-checkout .mrn-singular-shell,
.woocommerce-cart article.page,
.woocommerce-checkout article.page {
	margin-bottom: 0;
}

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
	padding-bottom: 64px;
}

/* Named individually rather than as a blanket `h2`. The product tiles use `h2`
   for their titles, so a descendant selector here reaches into the cross-sell
   cards and replaces the catalog's 16px Inter title with this 32px serif — the
   tiles then stop matching the catalog they are meant to mirror. */
.woocommerce-cart .cart_totals>h2,
.woocommerce-cart .gloves-cross-sells__title,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields>h3,
.woocommerce-checkout .woocommerce-shipping-fields>h3,
.woocommerce-checkout .woocommerce-additional-fields>h3 {
	color: var(--gloves-cart-ink);
	font-family: var(--mrn-font-heading);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 20px;
}

/* The hero measures itself at 78rem (1248px) while everything else on the page
   sizes to `--mrn-shell-wide-width` (1240px), leaving the page title 4px proud
   of the breadcrumb and the content beneath it. Pulled into line here.

   Keyed off the page-title modifier rather than the three WooCommerce body
   classes this started as: every page-level hero has the same 4px problem, and
   the CMS pages built on the same row hit it too. The account page was already
   a no-op in the old list — it renders no hero at all. */
.mrn-hero:has(.mrn-hero__page-title) .mrn-hero__inner {
	max-width: min(var(--mrn-shell-wide-width), calc(100% - (2 * var(--mrn-shell-gutter))));
}

.woocommerce-account .site-main {
	padding-bottom: 64px;
}

.woocommerce-account .entry-content,
.woocommerce-account .mrn-singular-shell,
.woocommerce-account article.page {
	margin-bottom: 0;
}

/* Page breadcrumbs
--------------------------------------------- */
/* `.mrn-shell-container--wide` is a bare `max-width` with no gutter, so below
   1240px the trail ran edge to edge while the title and cart beside it kept
   their inset — measured at [0..1009] against a [31..978] shell. Sized with the
   same expression as the cart shell instead, so the two track each other at
   every width rather than only agreeing above 1240px. */
.gloves-page__breadcrumbs {
	margin-inline: auto;
	max-width: min(var(--mrn-shell-wide-width), calc(100% - (2 * var(--mrn-shell-gutter))));
	padding: 24px 0;
	width: 100%;
}

/* Notices
--------------------------------------------- */
/*
 * WooCommerce's stock notice is a grey bar with a coloured rule; this keeps the
 * shape but swaps the palette onto the site's tokens.
 *
 * Unscoped on purpose. These rules used to name the cart, checkout and account
 * body classes, which left the same notice unstyled everywhere else — the
 * "added to your cart" bar on a product page kept the plugin's blue outline and
 * its grey default button. The values still read from the cart tokens where
 * those are defined, with the site palette behind them for every other page.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	align-items: center;
	background: var(--gloves-cart-surface, var(--site-color-grey));
	border: 0;
	border-radius: var(--gloves-cart-radius, var(--gloves-radius-button));
	box-shadow: none;
	color: var(--gloves-cart-ink, var(--gloves-color-neutral-07));
	display: flex;
	flex-wrap: wrap;
	font-size: 15px;
	gap: 12px;
	line-height: 1.5;
	margin: 0 0 28px;
	outline: 0;
	padding: 16px 20px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

/*
 * The notice's action — "View cart", "Browse products" — on the site's own
 * button treatment rather than WooCommerce's grey pill. WooCommerce floats it,
 * which drops it out of the flex row and off the text's baseline, so the float
 * is cleared and `margin-left: auto` parks it at the end of the row instead.
 */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-white);
	float: none;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	margin-left: auto;
	padding: 10px 24px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.woocommerce-message .button:hover,
.woocommerce-message .button:focus-visible,
.woocommerce-info .button:hover,
.woocommerce-info .button:focus-visible,
.woocommerce-error .button:hover,
.woocommerce-error .button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/* The product page is the square-cornered surface; its notice follows suit. */
.single-product .woocommerce-message .button,
.single-product .woocommerce-info .button,
.single-product .woocommerce-error .button {
	border-radius: 0;
}

/* Cart table
--------------------------------------------- */
/* `table.shop_table` rather than `.shop_table`: WooCommerce sets the border with
   `.woocommerce table.shop_table`, which outranks a two-class selector, so the
   plugin's translucent black kept winning over the border colour set above. */
.woocommerce-cart .woocommerce table.shop_table {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-cart-border);
	border-collapse: collapse;
	border-radius: var(--gloves-cart-radius);
	margin: 0;
	overflow: hidden;
	width: 100%;
}

/* Column headings are stated explicitly so every `th` on the cart and checkout
   — this table, the totals panel, the order review — shares one face. */
.woocommerce-cart .woocommerce table.shop_table th {
	background: var(--gloves-cart-surface);
	border: 0;
	color: var(--gloves-cart-ink);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 16px 20px;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.woocommerce-cart .woocommerce table.shop_table td {
	border: 0;
	border-top: 1px solid var(--gloves-cart-border);
	font-size: 15px;
	padding: 20px;
	vertical-align: middle;
}

/* Explicit widths for the fixed columns so the product name absorbs whatever
   measure is left. Auto table layout otherwise hands the two empty headers
   (remove, thumbnail) a large share of the row and strands the name column. */
.woocommerce-cart .shop_table .product-remove {
	width: 56px;
}

.woocommerce-cart .shop_table .product-thumbnail {
	width: 104px;
}

.woocommerce-cart .shop_table .product-price,
.woocommerce-cart .shop_table .product-quantity,
.woocommerce-cart .shop_table .product-subtotal {
	width: 130px;
}

.woocommerce-cart .shop_table .product-thumbnail img {
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-field-radius);
	display: block;
	height: auto;
	width: 72px;
}

.woocommerce-cart .shop_table .product-name a {
	color: var(--gloves-cart-ink);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-cart .shop_table .product-name a:hover,
.woocommerce-cart .shop_table .product-name a:focus-visible {
	color: var(--site-color-brand-blue);
}

/* Variation and item meta
--------------------------------------------- */
/* WooCommerce lays these out with `float: left; clear: both` on the `dt`, which
   collapses to a ragged overlap inside a padded cell and stacks badly once the
   row becomes a block on mobile. A two-column grid gives a clean label/value
   pair at every width.
   Note these only render when the attributes are *not* already part of the
   variation title — WooCommerce omits the list when the title carries them, as
   it does for this store's variable products. */
.woocommerce-cart .shop_table .product-name dl.variation,
.woocommerce-cart .shop_table .product-name .wc-item-meta {
	column-gap: 8px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	list-style: none outside;
	margin: 8px 0 0;
	padding: 0;
	row-gap: 4px;
}

/*
 * The variation rows carry the interface font explicitly. Without it they
 * inherit the site's display serif from the page, so "Size:" and "Quantity:"
 * were set in a different face from the PRICE / QUANTITY / SUBTOTAL labels
 * beside them — most obvious on mobile, where the two sit in the same card.
 */
.woocommerce-cart .shop_table .product-name dl.variation dt,
.woocommerce-cart .shop_table .product-name dl.variation dd,
.woocommerce-cart .shop_table .product-name .wc-item-meta .wc-item-meta-label,
.woocommerce-cart .shop_table .product-name .wc-item-meta dd {
	font-family: Inter, Arial, sans-serif;
}

.woocommerce-cart .shop_table .product-name dl.variation dt,
.woocommerce-cart .shop_table .product-name .wc-item-meta .wc-item-meta-label {
	clear: none;
	color: var(--gloves-cart-muted);
	float: none;
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}

.woocommerce-cart .shop_table .product-name dl.variation dd,
.woocommerce-cart .shop_table .product-name .wc-item-meta dd {
	color: var(--gloves-cart-ink);
	font-size: 13px;
	margin: 0;
}

.woocommerce-cart .shop_table .product-name dl.variation dd p,
.woocommerce-cart .shop_table .product-name .wc-item-meta dd p {
	margin: 0;
}

.woocommerce-cart .shop_table .product-price,
.woocommerce-cart .shop_table .product-subtotal {
	white-space: nowrap;
}

.woocommerce-cart .shop_table .product-subtotal {
	font-weight: 500;
}

/* The remove control ships with `!important` colours from WooCommerce, so the
   override has to match that weight to land. */
.woocommerce-cart .shop_table a.remove {
	background: transparent;
	border-radius: 50%;
	color: var(--gloves-cart-muted) !important;
	font-size: 22px;
	height: 28px;
	line-height: 26px;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
	width: 28px;
}

.woocommerce-cart .shop_table a.remove:hover,
.woocommerce-cart .shop_table a.remove:focus-visible {
	background: var(--site-color-brand-blue) !important;
	color: var(--site-color-white) !important;
}

.woocommerce-cart .shop_table .quantity .qty {
	appearance: textfield;
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-field-radius);
	color: var(--gloves-cart-ink);
	font-family: inherit;
	font-size: 15px;
	height: 44px;
	padding: 0 6px;
	text-align: center;
	width: 72px;
}

/* Coupon / update row
--------------------------------------------- */
/* This cell carries `colspan="6"`. Giving it `display: flex` drops it out of
   the table layout entirely, which collapses the row to the width of its own
   content instead of spanning the table — so it stays a table-cell and the
   Update button is floated rather than pushed with `justify-content`. */
.woocommerce-cart .shop_table td.actions {
	background: var(--gloves-cart-surface);
	overflow: hidden;
	padding: 20px;
}

.woocommerce-cart .shop_table td.actions .coupon {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	vertical-align: middle;
}

.woocommerce-cart .shop_table td.actions button[name="update_cart"] {
	float: right;
}

.woocommerce-cart .shop_table td.actions .coupon label {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.woocommerce-cart .shop_table td.actions #coupon_code {
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-field-radius);
	font-family: inherit;
	font-size: 15px;
	height: 48px;
	min-width: 200px;
	padding: 0 14px;
	width: auto;
}

.woocommerce-cart .shop_table td.actions #coupon_code:focus-visible {
	border-color: var(--site-color-brand-blue);
	outline: 2px solid var(--gloves-color-button-light-hover-bg);
	outline-offset: 1px;
}

/* Collaterals: cross-sells beside the totals panel
--------------------------------------------- */
/* WooCommerce floats these two at 48% each. The floats are cleared so the pair
   can be a grid, which keeps the totals panel aligned to the table edge. */
/* Stacked, not side by side. WooCommerce puts cross-sells and the totals in one
   row, which squeezes the product tiles into half the page while the totals
   panel leaves a tall empty column beside them. Ordering them into a column
   gives the totals the right-hand alignment it needs and hands the full measure
   to the recommendations underneath, where a product grid belongs. */
.woocommerce-cart .cart-collaterals {
	display: flex;
	flex-direction: column;
	gap: var(--mrn-shell-section-space-tight);
	margin-top: 40px;
	width: 100%;
}

/* Flex items carry a `min-width: auto` floor; without this the product grid
   inside refuses to shrink on small screens. */
.woocommerce-cart .cart-collaterals .cross-sells {
	float: none;
	min-width: 0;
	order: 2;
	width: 100%;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	align-self: flex-end;
	float: none;
	max-width: 400px;
	min-width: 0;
	order: 1;
	width: 100%;
}

/*
 * Totals beside the table rather than under it, once there is room for both.
 *
 * The form and `.cart-collaterals` are siblings inside `.woocommerce`, so that
 * is the element that becomes the grid. `.cart-collaterals` itself is set to
 * `display: contents` so its two children join that grid directly: the totals
 * take the right-hand column beside the table, and cross-sells — which belong
 * under both, at full measure — can still span the whole row. Putting the
 * collaterals box itself in the right column would have trapped a product grid
 * inside a 380px column.
 *
 * Two columns from 1200px up. Below that the table is left the full measure and
 * the totals drop underneath it: at 1199px the table keeps only about 780px
 * once the panel and the gap are taken out, which is where its five columns
 * start to crowd.
 */
@media (min-width: 1200px) {
	.woocommerce-cart .entry-content--builder>.woocommerce {
		align-items: start;
		column-gap: var(--gloves-cart-gap);
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
	}

	/*
	 * Same trap as the single product page: WooCommerce clears its floated
	 * layouts with `::before`/`::after` on `.woocommerce`, and in a grid those
	 * stop being clearfixes and become real items claiming the first cell —
	 * which would push the cart table into the totals column.
	 */
	.woocommerce-cart .entry-content--builder>.woocommerce::before,
	.woocommerce-cart .entry-content--builder>.woocommerce::after {
		display: none;
	}

	/* Notices belong above both columns, not beside one. */
	.woocommerce-cart .entry-content--builder>.woocommerce>.woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .entry-content--builder>.woocommerce>.woocommerce-cart-form {
		grid-column: 1;
	}

	.woocommerce-cart .cart-collaterals {
		display: contents;
	}

	/* Beside the table, so the stacked layout's top margin and cap come off. */
	.woocommerce-cart .cart-collaterals .cart_totals {
		align-self: start;
		grid-column: 2;
		margin-top: 0;
		max-width: none;
	}

	.woocommerce-cart .cart-collaterals .cross-sells {
		grid-column: 1 / -1;
		margin-top: var(--mrn-shell-section-space-tight);
	}
}

.woocommerce-cart .cart_totals {
	background: var(--gloves-cart-surface);
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	padding: 24px;
}

/* Laid out as flex rows rather than as a table. A `tr` given `display: flex`
   inside a table that is still `display: table` drops out of table layout and
   stops filling its parent — the amounts then sat mid-panel instead of against
   the right edge (measured: table [41..374], amount right edge 166). Making the
   table and its body blocks too keeps every row full width, so `space-between`
   puts the label left and the amount hard right at every screen size. */
/* `border-collapse: collapse` is inherited from the line-items table rule and
   swallows a border set on a `tr`, so the separator measured 0px wide. The
   totals table is display:block here, so collapsing buys nothing anyway. */
.woocommerce-cart .cart_totals table.shop_table {
	/* The white fill set on `table.shop_table` for the line-items table also
	   matched this one and painted over the panel's surface. The totals table
	   is a bare list inside the panel, so it stays transparent. */
	background: transparent;
	border: 0;
	border-collapse: separate;
	border-radius: 0;
	border-spacing: 0;
	display: block;
	width: 100%;
}

.woocommerce-cart .cart_totals table.shop_table tbody {
	display: block;
	width: 100%;
}

/* The separator belongs to the row, not to the cells. On `th`/`td` it drew two
   segments with the flex gap showing through the middle instead of one rule
   across the panel. */
.woocommerce-cart .cart_totals table.shop_table tr {
	align-items: baseline;
	border-top: 1px solid var(--gloves-cart-border);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	width: 100%;
}

.woocommerce-cart .cart_totals table.shop_table tr:first-child {
	border-top: 0;
}

.woocommerce-cart .woocommerce .cart_totals table.shop_table th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table td {
	background: transparent;
	border: 0;
	font-size: 15px;
	letter-spacing: normal;
	padding: 14px 0;
	text-transform: none;
	white-space: normal;
}


/* No percentage width: the rows are flex now, so the label takes only the room
   its text needs and the amount is pushed to the far edge. */
.woocommerce-cart .cart_totals table.shop_table th {
	display: block;
	width: auto;
}

/*
 * Every label in the totals panel — Subtotal, Shipping, Total — takes the same
 * table-header face used by the line-items table, the order review, the receipt
 * and the wishlist. Stated at the same weight as the shared `th, td` rule above
 * and after it, so it overrides that rule's 15px, normal spacing and no
 * uppercase for the labels while the amounts keep them.
 */
.woocommerce-cart .woocommerce .cart_totals table.shop_table th {
	color: var(--gloves-cart-ink);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce-cart .cart_totals table.shop_table td {
	display: block;
	text-align: right;
	width: auto;
}

/*
 * The amount only. The Total's label is a header like every other label in the
 * panel, so the emphasis sits on the figure beside it rather than on both.
 *
 * Matched against the shared `.woocommerce .cart_totals table.shop_table td`
 * rule class for class — written shorter it lost to that rule's 15px, and the
 * panel's most important figure rendered at the same size as the rest.
 */
.woocommerce-cart .woocommerce .cart_totals table.shop_table .order-total td {
	color: var(--gloves-cart-ink);
	font-size: 18px;
	font-weight: 600;
}

/* Shipping row
--------------------------------------------- */
/* Only present once shipping is available for the cart's contents, so it never
   appeared on the test products used while building this. It holds a method
   list, a destination line and the shipping calculator, all of which arrive
   unstyled from WooCommerce. */
.woocommerce-cart .cart_totals .woocommerce-shipping-totals td {
	text-align: left;
}

.woocommerce-cart .cart_totals #shipping_method {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.woocommerce-cart .cart_totals #shipping_method li {
	align-items: baseline;
	display: flex;
	gap: 8px;
	margin: 0;
}

.woocommerce-cart .cart_totals #shipping_method label {
	color: var(--gloves-cart-ink);
	cursor: pointer;
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
}

.woocommerce-cart .cart_totals #shipping_method input[type="radio"] {
	accent-color: var(--site-color-brand-blue);
	margin: 0;
}

.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	color: var(--gloves-cart-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 10px 0 0;
	text-align: left;
}

.woocommerce-cart .cart_totals .shipping-calculator-button {
	color: var(--site-color-brand-blue);
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	margin-top: 8px;
	text-decoration: underline;
}

.woocommerce-cart .cart_totals .shipping-calculator-button:hover,
.woocommerce-cart .cart_totals .shipping-calculator-button:focus-visible {
	color: var(--site-color-dark-blue);
}

.woocommerce-cart .cart_totals .shipping-calculator-form {
	margin-top: 12px;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .form-row {
	margin: 0 0 10px;
}

.woocommerce-cart .cart_totals .shipping-calculator-form input.input-text,
.woocommerce-cart .cart_totals .shipping-calculator-form select,
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container .select2-selection--single {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-field-radius);
	box-sizing: border-box;
	font-family: inherit;
	font-size: 15px;
	min-height: 44px;
	padding: 10px 12px;
	width: 100%;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .button {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: var(--gloves-cart-radius);
	color: var(--site-color-white);
	cursor: pointer;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	min-height: 44px;
	padding: 10px 20px;
	width: 100%;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .button:hover,
.woocommerce-cart .cart_totals .shipping-calculator-form .button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 20px 0 0;
}

/* The PayPal gateway injects its express buttons after the checkout link, so
   the gap belongs between them rather than as padding on the panel. */
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper {
	margin-top: 14px;
}

/* PayPal renders each button into an iframe. When the SDK cannot render — no
   credentials configured, or the script blocked — the containers stay in the
   layout at ~45px and leave an empty band under "Proceed to checkout". Keyed on
   the iframe rather than on emptiness, because the containers keep their child
   divs and hidden nonce inputs either way. Once the gateway renders for real,
   the iframe appears and the buttons show. */
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper:not(:has(iframe)) {
	display: none;
}

/* Older engines without `:has()` at least collapse the empty placeholders. */
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper>div:empty {
	display: none;
}

.woocommerce-cart .cart_totals>*:last-child {
	margin-bottom: 0;
}

/* Cross-sells
--------------------------------------------- */
/* The tiles are the catalog's own `product-card` part (see
   woocommerce/cart/cross-sells.php), rendered inside a `.gloves-catalog`
   wrapper so every catalog card rule — image well, blend mode, title, price
   ordering, hover-revealed button — applies unchanged. Only the section
   framing and the column count are set here. */
.woocommerce-cart .gloves-cross-sells {
	width: 100%;
}

/* Stated rather than inherited: this heading sits inside `.gloves-catalog`,
   which sets Inter for the card text, so without this it would drift away from
   "Cart totals" and the page title beside it. Every heading on these two pages
   uses the site heading face. */
.woocommerce-cart .gloves-cross-sells__title {
	font-family: var(--mrn-font-heading);
	margin-bottom: 24px;
}

/* The catalog runs three across beside its filter rail; the cart has the full
   measure and no rail, so a fourth column fits without shrinking the tiles.
   The catalog's own breakpoints key off `.gloves-catalog__grid`, and this rule
   outranks them at every width, so the column counts are restated here — the
   grid otherwise stayed four across all the way down to a 360px phone. */
.woocommerce-cart .gloves-cross-sells__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.woocommerce-cart .gloves-cross-sells__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.woocommerce-cart .gloves-cross-sells__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.woocommerce-cart .gloves-cross-sells__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Checkout layout
--------------------------------------------- */
/* Billing and shipping sit side by side, then the order review spans the full
   measure beneath them. WooCommerce floats col-1/col-2, so both are reset. */
.woocommerce-checkout .col2-set {
	display: grid;
	gap: var(--gloves-cart-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
}

/* WooCommerce clears its own floats with `::before`/`::after` on both of these
   containers. Those pseudo-elements become real grid and flex items the moment
   the container stops being a block, so the `::before` was taking the first
   grid cell and shunting Billing details into the right-hand column. Nothing
   floats inside them any more, so the clearfix is simply removed. */
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after,
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after {
	content: none;
	display: none;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

/* Coupon toggle and form
--------------------------------------------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon {
	margin-bottom: 28px;
}

/* A one-line prompt, not a panel. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	font-size: 15px;
	margin: 0;
	padding: 14px 18px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
	color: var(--site-color-brand-blue);
	font-weight: 500;
	text-decoration: underline;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:hover,
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:focus-visible {
	color: var(--site-color-dark-blue);
}

.woocommerce-checkout .checkout_coupon {
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	padding: 20px;
}

/* The field and button belong on one line. Each sits in its own `p.form-row`,
   and the checkout rule above makes every form-row a full-width flex column —
   which is what stretched the Apply button across the whole panel. */
.woocommerce-checkout form.checkout_coupon {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.woocommerce-checkout form.checkout_coupon .form-row {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
}

/* The intro line takes its own row above the controls. */
.woocommerce-checkout form.checkout_coupon>p:not(.form-row) {
	flex: 1 1 100%;
	font-size: 14px;
	margin: 0;
}

.woocommerce-checkout form.checkout_coupon .form-row-first {
	flex: 1 1 220px;
	min-width: 0;
}

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

.woocommerce-checkout form.checkout_coupon #coupon_code {
	height: var(--gloves-field-height);
	width: 100%;
}

/* Sized to its label and matched to the field height beside it. */
.woocommerce-checkout form.checkout_coupon .button {
	height: var(--gloves-field-height);
	min-height: 0;
	padding: 0 28px;
	white-space: nowrap;
	width: auto;
}

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

/* Once the pair wraps there is no reason for a narrow button sitting alone. */
@media (max-width: 560px) {
	.woocommerce-checkout form.checkout_coupon .form-row-last {
		flex: 1 1 100%;
	}

	.woocommerce-checkout form.checkout_coupon .button {
		width: 100%;
	}
}

/* Checkout form fields
--------------------------------------------- */
.woocommerce-checkout .form-row,
.woocommerce-account .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
	width: 100%;
}

.woocommerce-checkout .form-row label,
.woocommerce-account .form-row label {
	color: var(--gloves-cart-ink);
	font-size: 14px;
	font-weight: 500;
}

.woocommerce-checkout .form-row .required,
.woocommerce-account .form-row .required {
	color: var(--gloves-color-price-sale);
	text-decoration: none;
}

/* Checkbox rows read as a single line, not a stacked label above a control. */
.woocommerce-account .form-row label.woocommerce-form__label-for-checkbox {
	align-items: center;
	display: flex;
	flex-direction: row;
	font-weight: 400;
	gap: 8px;
}

.woocommerce-account .form-row input[type="checkbox"] {
	accent-color: var(--site-color-brand-blue);
	margin: 0;
}

/* One height for every control. `min-height` alone is not enough: a `select`
   sizes from its own font metrics and a Select2 box from its inner span, so the
   three sat at different heights side by side. Height is pinned and the inner
   Select2 parts are matched to it below. */
/* `form` in the selector: WooCommerce styles these as `.woocommerce form
   .form-row textarea`, and that extra element qualifier outranked a
   class-only rule — the textarea kept the plugin's dark border colour. */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row .select2-container .select2-selection--single,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-container .select2-selection--single,
.woocommerce-checkout .form-row select,
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row input[type="password"],
.woocommerce-account form .form-row input[type="email"],
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row .select2-container .select2-selection--single,
.woocommerce-account form .form-row select {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-field-border);
	border-radius: var(--gloves-cart-field-radius);
	box-sizing: border-box;
	color: var(--gloves-cart-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	padding: 12px 14px;
	width: 100%;
}

/* Single-line controls only — the order-notes textarea keeps its own height. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row .select2-container .select2-selection--single,
.woocommerce-checkout .form-row select,
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row input[type="password"],
.woocommerce-account .form-row input[type="email"],
.woocommerce-account .form-row .select2-container .select2-selection--single,
.woocommerce-account .form-row select {
	height: var(--gloves-field-height);
	min-height: var(--gloves-field-height);
}

/* Select2 renders its own inner span and arrow, which ignore the box height.
   Centred with flex rather than a line-height matched to the control, so the
   text keeps a normal line box and a wrapped value still reads correctly. */
.woocommerce-checkout .form-row .select2-container .select2-selection--single {
	align-items: center;
	display: flex;
}

.woocommerce-checkout .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--gloves-cart-ink);
	line-height: normal;
	padding: 0;
	width: 100%;
}

.woocommerce-checkout .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: calc(var(--gloves-field-height) - 2px);
}

.woocommerce-checkout .form-row textarea {
	height: auto;
	min-height: 110px;
	resize: vertical;
}

/* Last word on the field border. The textarea and the plain selects kept
   resolving to WooCommerce's `--wc-form-border-color` and the theme's own dark
   rule respectively, both of which match at the same weight as the block above.
   `form.checkout` adds the extra class needed to settle it. */
.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout .form-row .select2-container .select2-selection--single {
	border: 1px solid var(--gloves-field-border);
	border-radius: var(--gloves-cart-field-radius);
}

.woocommerce-checkout .form-row input.input-text:focus-visible,
.woocommerce-checkout .form-row textarea:focus-visible,
.woocommerce-checkout .form-row select:focus-visible {
	border-color: var(--site-color-brand-blue);
	outline: 2px solid var(--gloves-color-button-light-hover-bg);
	outline-offset: 1px;
}

/* `form-row-first` / `form-row-last` keep WooCommerce's own 47% float pairing,
   which puts first and last name side by side inside each column — the layout
   we want. Overriding it from here would need to beat `.woocommerce form
   .form-row-first`, so leaving it alone is both simpler and correct. */

/* Order review and payment
--------------------------------------------- */
.woocommerce-checkout #order_review_heading {
	margin-top: 40px;
}

.woocommerce-checkout #order_review {
	background: var(--gloves-cart-surface);
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	padding: 24px;
	width: 100%;
}

/*
 * The review table is white, matching the cart's line-item table and the order
 * details table on the receipt — both of which already set it. `#order_review`
 * around it stays the grey panel, so the table reads as a card inside it.
 *
 * Written against `table.shop_table` to meet WooCommerce's own
 * `.woocommerce table.shop_table`; at equal specificity this sheet loads later
 * and wins. Both forms are listed because the body carries `woocommerce-checkout`
 * and `woocommerce` on the same element, so a descendant combinator between the
 * two matches nothing on its own — it only lands via the `.woocommerce` wrapper
 * WooCommerce prints inside. The cells keep their transparent fill, so the white
 * shows through them; the receipt's tables set their own white and are unchanged
 * by this.
 */
.woocommerce-checkout table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table {
	background: var(--site-color-white);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	border: 0;
	border-radius: var(--gloves-cart-radius);
	margin-bottom: 20px;
	/* Clips the white fill to the rounded corners inside the grey panel. */
	overflow: hidden;
	width: 100%;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--gloves-cart-border);
	font-size: 15px;
	padding: 14px 0;
	text-align: left;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	border-top: 0;
	color: var(--gloves-cart-ink);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Row labels in the totals block — Subtotal, Shipping, Total — read as headings
   too, so they carry the same weight as the column headers above them. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
	color: var(--gloves-cart-ink);
	font-weight: 700;
}

/* Variation and item meta under each line item. WooCommerce floats the `dt`,
   which overlaps the value in a narrow review column. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation,
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .wc-item-meta {
	column-gap: 8px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	list-style: none outside;
	margin: 6px 0 0;
	padding: 0;
	row-gap: 4px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation dt,
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .wc-item-meta .wc-item-meta-label {
	clear: none;
	color: var(--gloves-cart-muted);
	float: none;
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation dd,
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .wc-item-meta dd {
	color: var(--gloves-cart-ink);
	font-size: 13px;
	margin: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation dd p,
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .wc-item-meta dd p {
	margin: 0;
}

/* The quantity WooCommerce appends after the name ("x 2"). */
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--gloves-cart-muted);
	font-weight: 500;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	color: var(--gloves-cart-ink);
	font-size: 18px;
	font-weight: 600;
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--gloves-cart-border);
	list-style: none;
	margin: 0 0 20px;
	padding: 0 0 20px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 12px;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	color: var(--gloves-cart-ink);
	display: inline;
	font-weight: 500;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-field-radius);
	color: var(--gloves-cart-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 12px 0 0;
	padding: 14px 16px;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

/* The box's own padding provides the spacing; the paragraph's default top
   margin only pushes the text off-centre. */
.woocommerce-checkout #payment div.payment_box p {
	margin-top: 0;
}

.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* This wrapper also carries the `form-row` class, so the rule above makes it a
   flex column — which stretches the button to the full panel width and leaves
   `text-align: right` with nothing to act on. Aligning the items to the end is
   what actually shrinks the button and moves it right. */
/* `div.place-order` rather than `.place-order`: WooCommerce pads this with
   `#payment div.form-row { padding: 1em }`, and that extra element qualifier
   outranks a class-only selector — leaving the button inset 16px from the panel
   edge instead of flush with it. */
.woocommerce-checkout #payment div.place-order {
	align-items: flex-end;
	margin: 0;
	padding: 0;
	width: 100%;
}

.woocommerce-checkout #payment .place-order>*:last-child {
	margin-bottom: 0;
}

/* Full-width children opt back out of that end alignment. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	align-self: stretch;
	margin-bottom: 16px;
	text-align: left;
}

/* WooCommerce pads the payment block below the button. */
.woocommerce-checkout #payment {
	padding-bottom: 0;
}

/* Visited links in the store views
--------------------------------------------- */
/* The parent theme sets a global `a:visited { color: #800080 }`. At (0,1,1)
   that outranks a one-class link rule, so anything styled with a single class
   turned purple as soon as the visitor had been to that URL — and it is
   invisible to `getComputedStyle`, which reports the unvisited colour for
   privacy, so it never shows up in a computed-style check.
   Body-copy links take the brand colour; links that carry their own colour are
   restated below so they keep it. */
.woocommerce-cart .woocommerce a:visited,
.woocommerce-checkout .woocommerce a:visited,
.woocommerce-account .woocommerce a:visited,
.woocommerce-order-received .woocommerce a:visited {
	color: var(--site-color-brand-blue);
}

/* Product titles read as headings, not links. */
.woocommerce-cart .shop_table .product-name a:visited,
.woocommerce-order-received table.shop_table .product-name a:visited,
.woocommerce-cart .cross-sells .product-title a:visited {
	color: var(--gloves-cart-ink);
}

/* Account sidebar: dark on the surface, white on the active item. */
.woocommerce-account .woocommerce-MyAccount-navigation-link a:visited {
	color: var(--gloves-cart-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a:visited {
	color: var(--site-color-white);
}

/* Anything drawn as a button keeps its label colour. */
.woocommerce-cart a.button:visited,
.woocommerce-checkout a.button:visited,
.woocommerce-account a.button:visited,
.woocommerce-order-received a.button:visited,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:visited,
.woocommerce-cart .cross-sells .button:visited {
	color: var(--site-color-white);
}

/* Breadcrumb trail keeps its muted grey. */
.gloves-page__breadcrumbs .gloves-breadcrumbs__link:visited {
	color: #737373;
}

/* My Account
--------------------------------------------- */
/* WooCommerce floats the nav at 30% and the panel at 68%. Grid instead, so the
   two columns share a baseline and the sidebar can hold a surface without the
   float dictating its height. */
.woocommerce-account .entry-content--builder>.woocommerce {
	display: grid;
	gap: var(--gloves-cart-gap);
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
}

/* An empty `.woocommerce-notices-wrapper` sits before the nav and, as a grid
   item, was taking the first cell — which pushed the nav into the wide column
   and dropped the content panel into the 240px one on the row below. Anything
   that is not one of the two columns spans the full width instead. */
.woocommerce-account .entry-content--builder>.woocommerce>*:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
	grid-column: 1 / -1;
	grid-row: 1;
}

/* Logged out there is no sidebar — the login form should not sit in a 240px
   column with dead space beside it. */
.woocommerce-account.woocommerce-no-nav .entry-content--builder>.woocommerce,
.woocommerce-account:not(.logged-in) .entry-content--builder>.woocommerce {
	display: block;
}

/* Placed explicitly rather than left to auto-flow. Measured with auto
   placement, the nav (first child, `order: 0`, `grid-column: auto`) still
   landed in the second track and the panel in the first — so the columns are
   pinned instead of relying on source order. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link {
	border-bottom: 1px solid var(--gloves-cart-border);
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	color: var(--gloves-cart-ink);
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	padding: 14px 18px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation-link a:focus-visible {
	background: var(--gloves-cart-surface);
	color: var(--site-color-brand-blue);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--site-color-brand-blue);
	color: var(--site-color-white);
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-content>p:first-child {
	margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content mark {
	background: transparent;
	color: var(--gloves-cart-ink);
	font-weight: 600;
}

/* Account headings and forms
--------------------------------------------- */
.woocommerce-account .entry-content--builder>.woocommerce h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account legend {
	color: var(--gloves-cart-ink);
	font-family: var(--mrn-font-heading);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 16px;
}

.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.edit-account,
.woocommerce-account form.woocommerce-address-fields {
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	margin: 0;
	padding: 24px;
}

/* Logged out there is no sidebar, so the sign-in form would otherwise stretch
   the full 1240px measure for two short fields. */
.woocommerce-account:not(.logged-in) form.login,
.woocommerce-account:not(.logged-in) form.register {
	margin-inline: auto;
	max-width: 480px;
}

.woocommerce-account:not(.logged-in) .entry-content--builder>.woocommerce>h2 {
	margin-inline: auto;
	max-width: 480px;
}

/* Submit buttons are flex items inside a `p.form-row` column, so they stretch
   to the form width unless told to size to their label. */
.woocommerce-account form .form-row button.button,
.woocommerce-account form .form-row input.button,
.woocommerce-account form .form-row .woocommerce-Button {
	align-self: flex-start;
	width: auto;
}

.woocommerce-account fieldset {
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	margin: 24px 0 0;
	padding: 20px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	margin: 0;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 12px 0 0;
}

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-privacy-policy-link {
	color: var(--site-color-brand-blue);
	text-decoration: underline;
}

.woocommerce-account .woocommerce-LostPassword a:hover,
.woocommerce-account .woocommerce-LostPassword a:focus-visible {
	color: var(--site-color-dark-blue);
}

/* Buttons across the account area. */
/* `line-height: normal` with the label centred by the box rather than by a
   fixed line box — with `min-height` on an inline-block the text would sit
   above centre once the line box no longer fills the button. */
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account a.button {
	align-items: center;
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: var(--gloves-cart-radius);
	color: var(--site-color-white);
	cursor: pointer;
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	justify-content: center;
	line-height: normal;
	min-height: var(--gloves-field-height);
	padding: 13px 28px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
	width: auto;
}

.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account .woocommerce-Button:focus-visible,
.woocommerce-account button.button:focus-visible,
.woocommerce-account a.button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/* Login and Register
--------------------------------------------- */

/*
 * The signed-out account page.
 *
 * WooCommerce floats these two columns at 47% either side of a clearfix, which
 * on a wide screen left a dead gutter between two cards of unequal height, each
 * with its heading stranded outside the panel it titles.
 *
 * Rebuilt as a grid on a capped measure. The column itself becomes the card, so
 * the heading sits inside the surface it belongs to, and the two panels share a
 * baseline and a height. The card is the Contact form's panel — white, a
 * Neutral/03 hairline, the soft lift, at the button radius — so signing in looks
 * like the same site as getting in touch.
 *
 * Fields are not restated here: `.woocommerce-account form .form-row
 * input.input-text` already dresses them further up this file, and this section
 * only adds the focus ring and the room the password toggle needs.
 */
#customer_login {
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 auto;
	max-width: 520px;
}

/*
 * Two panels only when registration is switched on, and the pair then takes the
 * container's full width rather than a measure of its own — the section is as
 * wide as every other row on the page, and the shell already caps it.
 *
 * With registration off WooCommerce emits the login column alone, which keeps
 * the 520px above: one short form has no business spanning the full shell.
 * Browsers without `:has()` fall back to that same single column.
 */
#customer_login:has(> .u-column2) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: none;
	width: 100%;
}

/*
 * WooCommerce clears the floats with `::before`/`::after` on this wrapper. As
 * grid items those pseudo-elements take the first cell and push both columns
 * along by one.
 */
#customer_login::before,
#customer_login::after {
	content: none;
}

#customer_login > .u-column1,
#customer_login > .u-column2 {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-color-neutral-03);
	border-radius: var(--gloves-radius-button);
	box-shadow: 0 2px 10px -6px rgba(20, 23, 24, 0.18);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	float: none;
	margin: 0;
	padding: 32px;
	width: auto;
}

/* The heading, now the card's header, ruled off from the form beneath it. */
#customer_login > .u-column1 > h2,
#customer_login > .u-column2 > h2 {
	border-bottom: 1px solid var(--gloves-color-neutral-03);
	color: var(--site-color-dark-charcoal, #141718);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.3px;
	line-height: 1.2;
	margin: 0 0 24px;
	padding: 0 0 16px;
}

/*
 * The card is the surface, so the form draws nothing of its own. The ID beats
 * the `max-width: 480px` set on these forms further up, which was there to stop
 * a lone sign-in form spanning the full 1240px measure — the grid now handles
 * that.
 */
#customer_login form.login,
#customer_login form.register {
	border: 0;
	border-radius: 0;
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	max-width: none;
	padding: 0;
}

#customer_login .form-row {
	margin: 0 0 20px;
	padding: 0;
}

#customer_login label:not(.woocommerce-form__label-for-checkbox) {
	color: var(--gloves-color-neutral-07);
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 8px;
}

/* The required marker is a warning, so it takes the sale red, not brand blue. */
#customer_login .required {
	border: 0;
	color: var(--gloves-color-price-sale);
	text-decoration: none;
}

#customer_login .form-row input:focus,
#customer_login .form-row input:focus-visible {
	border-color: var(--site-color-brand-blue);
	outline: 2px solid var(--site-color-brand-blue);
	outline-offset: 1px;
}

/*
 * Room for the reveal toggle WooCommerce absolutely positions inside the
 * password field, so a long password does not run underneath the eye.
 */
#customer_login .woocommerce-password-input,
#customer_login .password-input {
	display: block;
	position: relative;
}

#customer_login .woocommerce-password-input input,
#customer_login .password-input input {
	padding-right: 46px;
}

#customer_login .show-password-input {
	color: var(--gloves-color-neutral-04);
}

#customer_login .show-password-input:hover,
#customer_login .show-password-input:focus-visible {
	color: var(--gloves-color-neutral-07);
}

/* "Remember me" reads as one line, not a stacked label above a control. */
#customer_login .woocommerce-form-login__rememberme {
	align-items: center;
	color: var(--gloves-color-neutral-07);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 400;
	gap: 8px;
	margin: 0 0 20px;
}

#customer_login .woocommerce-form-login__rememberme input {
	flex: 0 0 auto;
	margin: 0;
}

/*
 * "Lost your password?" sits on the right of "Remember me".
 *
 * WooCommerce puts the checkbox and the submit button inside a single
 * `p.form-row`, then the lost-password link in a `p` of its own after it. The
 * three are therefore not siblings, and no amount of reordering alone will put
 * the link on the checkbox's line.
 *
 * That row is flattened with `display: contents`, which drops its box and
 * promotes the checkbox and the button to items of the form's own grid. The
 * three can then be placed directly: checkbox left, link right on the same
 * line, submit spanning the row beneath.
 *
 * The `:has()` also keeps this safe if the template differs — where the
 * checkbox is already a direct child of the form, the flattening rule simply
 * does not match and the placement below still applies. The hidden login nonce
 * is not affected either way: `input[type="hidden"]` is `display: none`, so it
 * never becomes a grid item.
 */
#customer_login form.login {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

#customer_login form.login > .form-row:has(.woocommerce-form-login__rememberme) {
	display: contents;
}

/* Every ordinary row still takes the full width. */
#customer_login form.login > .form-row {
	grid-column: 1 / -1;
}

#customer_login form.login .woocommerce-form-login__rememberme {
	align-self: center;
	grid-column: 1;
	margin: 0 0 20px;
	order: 1;
}

#customer_login form.login > .woocommerce-LostPassword {
	align-self: center;
	grid-column: 2;
	justify-self: end;
	margin: 0 0 20px;
	order: 2;
	padding-left: 16px;
}

#customer_login form.login .woocommerce-form-login__submit {
	grid-column: 1 / -1;
	order: 3;
}

/*
 * The register card's copy is shorter than the login card's field list, so its
 * button would otherwise float well above the other. `margin-top: auto` drops
 * whichever submit is higher to the foot of its card, and the two line up.
 */
#customer_login form .form-row:has(button),
#customer_login form .form-row:has(input[type="submit"]) {
	margin-block: auto 0;
}

/*
 * Full measure inside the card. These are each panel's single action, and a
 * short pill against 450px of white reads as an afterthought.
 */
#customer_login form .form-row button.button,
#customer_login form .form-row input.button,
#customer_login form .form-row .woocommerce-Button {
	align-self: stretch;
	width: 100%;
}

/* Supporting copy under the register field, set down from the body ink. */
#customer_login form.register > p:not(.form-row),
#customer_login .woocommerce-privacy-policy-text p {
	color: var(--gloves-color-neutral-04);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
}

#customer_login .woocommerce-privacy-policy-text p:last-child {
	margin-bottom: 0;
}

/*
 * Matched to the checkbox it now sits beside, rather than to body copy — the
 * two read as one line of form furniture above the button.
 */
#customer_login .woocommerce-LostPassword {
	font-size: 14px;
	margin: 0;
}

#customer_login .woocommerce-LostPassword a {
	font-size: 14px;
	white-space: nowrap;
}

/* Login and Register — mobile */
@media (max-width: 782px) {
	#customer_login,
	#customer_login:has(> .u-column2) {
		gap: 20px;
		grid-template-columns: minmax(0, 1fr);
		max-width: 520px;
	}

	#customer_login > .u-column1,
	#customer_login > .u-column2 {
		padding: 24px 20px;
	}

	#customer_login > .u-column1 > h2,
	#customer_login > .u-column2 > h2 {
		font-size: 24px;
		margin-bottom: 20px;
		padding-bottom: 14px;
	}

	/*
	 * Stacked, the cards are no longer a matched pair, so the submit returns to
	 * sitting directly under the copy above it.
	 */
	#customer_login form .form-row:has(button),
	#customer_login form .form-row:has(input[type="submit"]) {
		margin-block: 0;
	}
}

/*
 * On the narrowest phones the checkbox and the link no longer fit on one line
 * without one of them wrapping mid-phrase, so the pair stacks instead.
 */
@media (max-width: 380px) {
	#customer_login form.login {
		grid-template-columns: minmax(0, 1fr);
	}

	#customer_login form.login .woocommerce-form-login__rememberme {
		margin-bottom: 12px;
	}

	#customer_login form.login > .woocommerce-LostPassword {
		justify-self: start;
		margin-bottom: 20px;
		padding-left: 0;
	}
}

/* Orders table
--------------------------------------------- */
.woocommerce-account table.shop_table {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-cart-border);
	border-collapse: collapse;
	border-radius: var(--gloves-cart-radius);
	margin: 0;
	overflow: hidden;
	width: 100%;
}

/*
 * `thead th`, not `th`. WooCommerce renders the order-number cell of every body
 * row as `<th scope="row">`, so an unscoped `th` rule handed that cell the
 * column-header treatment — the grey fill, plus 12px uppercase bold — and the
 * order number sat in a grey block down the first column of an otherwise white
 * table.
 */
.woocommerce-account table.shop_table thead th {
	background: var(--gloves-cart-surface);
	border: 0;
	color: var(--gloves-cart-ink);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 14px 18px;
	text-align: left;
	text-transform: uppercase;
}

/* The row-header cell is a body cell in every way except its tag name. */
.woocommerce-account table.shop_table td,
.woocommerce-account table.shop_table tbody th {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--gloves-cart-border);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	padding: 16px 18px;
	text-align: left;
	text-transform: none;
	vertical-align: middle;
}

.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions .button {
	font-size: 14px;
	min-height: 0;
	padding: 9px 18px;
}

/* Addresses
--------------------------------------------- */
/* `.col2-set` again, with the same clearfix that becomes a grid item. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	gap: var(--gloves-cart-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	content: none;
	display: none;
}

/* `.col-1` / `.col-2` in the selector: WooCommerce sizes these with
   `.woocommerce .col2-set .col-1 { float: left; width: 48% }`, a three-class
   rule that outranked a plain `.woocommerce-Address` reset — so each address
   stayed a floated 48% block inside its own grid cell. */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
	float: none;
	min-width: 0;
	width: auto;
}

/* WooCommerce clears floats here with
   `.woocommerce-account .addresses .title::before/::after`. As flex items those
   two took the outer positions and `space-between` pushed *them* to the edges,
   bunching the heading and Edit link in the middle — which is why the earlier
   attempt at this looked wrong. With the clearfix gone, `space-between` puts
   the heading left and the Edit link hard right, as intended. */
.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after,
.woocommerce-account .addresses .title::before,
.woocommerce-account .addresses .title::after {
	content: none;
	display: none;
}

.woocommerce-account .woocommerce-Address-title {
	align-items: baseline;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
}

.woocommerce-account .woocommerce-Address-title .edit {
	color: var(--site-color-brand-blue);
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	white-space: nowrap;
}

/* Same 20px as the order page's customer-details block — both are the same
   address panel component. */
.woocommerce-account .woocommerce-Address address {
	background: var(--gloves-cart-surface);
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	font-size: 15px;
	font-style: normal;
	line-height: 1.7;
	padding: 20px;
}

/* My Account — responsive
--------------------------------------------- */
@media (max-width: 900px) {
	.woocommerce-account .entry-content--builder>.woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The explicit columns above have to be released too — a `grid-column: 2`
	   against a single-track template just creates an implicit second column,
	   which kept the two panels side by side on a phone. */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: 3;
	}

	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 782px) {

	/* The orders table collapses to label/value rows like the cart's. */
	.woocommerce-account table.shop_table,
	.woocommerce-account table.shop_table tbody,
	.woocommerce-account table.shop_table tr,
	.woocommerce-account table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce-account table.shop_table thead {
		display: none;
	}

	.woocommerce-account table.shop_table tr {
		border-top: 1px solid var(--gloves-cart-border);
		padding: 8px 0;
	}

	.woocommerce-account table.shop_table tr:first-child {
		border-top: 0;
	}

	.woocommerce-account table.shop_table td {
		border: 0;
		display: flex;
		gap: 16px;
		justify-content: space-between;
		padding: 6px 18px;
		text-align: right;
	}

	.woocommerce-account table.shop_table td::before {
		color: var(--gloves-cart-muted);
		content: attr(data-title);
		float: none;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-align: left;
		text-transform: uppercase;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link a {
		padding: 13px 16px;
	}
}

/* Order received
--------------------------------------------- */
/* The thank-you page runs through the checkout shortcode, so it carries the
   `woocommerce-checkout` body class and inherits the shell, headings and
   notice styling above. Only the pieces unique to this endpoint are set here:
   the order summary list, the order table and the address block. */
.woocommerce-order-received .woocommerce-order {
	display: flex;
	flex-direction: column;
	gap: var(--mrn-shell-section-space-tight);
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
	background: var(--gloves-color-button-light-hover-bg);
	border-radius: var(--gloves-cart-radius);
	color: var(--gloves-cart-ink);
	font-family: var(--mrn-font-heading);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.35;
	margin: 0;
	padding: 20px 24px;
	text-align: center;
}

/* Order summary strip
--------------------------------------------- */
/* WooCommerce floats these as a row of dashed-separated items at 0.715em, which
   is close to unreadable. They become cards instead. */
.woocommerce-order-received ul.order_details {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The float clearfix would become a grid item and take the first cell. */
.woocommerce-order-received ul.order_details::before,
.woocommerce-order-received ul.order_details::after {
	content: none;
	display: none;
}

.woocommerce-order-received ul.order_details li {
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	color: var(--gloves-cart-muted);
	float: none;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0;
	/* Grid items floor at `min-width: auto`, so an unbreakable value widens the
	   track instead of wrapping inside the card. */
	min-width: 0;
	padding: 16px 18px;
	text-transform: uppercase;
}

/*
 * The last card keeps its border like the rest. WooCommerce strips it with
 * `.woocommerce ul.order_details li:last-of-type { border: none }`, which is
 * meant for its own stacked list; here the items are separate cards, so the
 * final one came out with three sides missing. This matches that selector's
 * weight and, loading later, wins.
 */
.woocommerce-order-received ul.order_details li:last-of-type {
	border: 1px solid var(--gloves-cart-border);
}

/* An email address has no natural break point, so it ran straight out of the
   card. `anywhere` lets it wrap mid-string rather than push the box wider. */
.woocommerce-order-received ul.order_details li strong {
	color: var(--gloves-cart-ink);
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: normal;
	margin-top: 6px;
	overflow-wrap: anywhere;
	text-transform: none;
	word-break: break-word;
}

/* Order details table
--------------------------------------------- */
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
	color: var(--gloves-cart-ink);
	font-family: var(--mrn-font-heading);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 400;
	margin: 0 0 16px;
}

.woocommerce-order-received table.shop_table {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-cart-border);
	border-collapse: collapse;
	border-radius: var(--gloves-cart-radius);
	margin: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce-order-received table.shop_table th {
	background: var(--gloves-cart-surface);
	border: 0;
	color: var(--gloves-cart-ink);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 14px 20px;
	text-align: left;
	text-transform: uppercase;
}

.woocommerce-order-received table.shop_table td {
	border: 0;
	border-top: 1px solid var(--gloves-cart-border);
	font-size: 15px;
	padding: 16px 20px;
	vertical-align: top;
}

.woocommerce-order-received table.shop_table td.product-total,
.woocommerce-order-received table.shop_table th.product-total,
.woocommerce-order-received table.shop_table tfoot td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-order-received table.shop_table .product-name a {
	color: var(--gloves-cart-ink);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-order-received table.shop_table .product-name a:hover,
.woocommerce-order-received table.shop_table .product-name a:focus-visible {
	color: var(--site-color-brand-blue);
}

.woocommerce-order-received table.shop_table .product-quantity {
	color: var(--gloves-cart-muted);
	font-weight: 500;
}

.woocommerce-order-received table.shop_table tfoot th {
	background: transparent;
	border-top: 1px solid var(--gloves-cart-border);
	font-size: 13px;
	text-align: left;
}

.woocommerce-order-received table.shop_table tfoot tr:last-child th,
.woocommerce-order-received table.shop_table tfoot tr:last-child td {
	color: var(--gloves-cart-ink);
	font-size: 18px;
	font-weight: 700;
}

/* Item meta under each line, same treatment as the cart. */
.woocommerce-order-received table.shop_table .wc-item-meta {
	column-gap: 8px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	list-style: none outside;
	margin: 8px 0 0;
	padding: 0;
	row-gap: 4px;
}

.woocommerce-order-received table.shop_table .wc-item-meta li {
	display: contents;
}

.woocommerce-order-received table.shop_table .wc-item-meta-label {
	color: var(--gloves-cart-muted);
	float: none;
	font-size: 13px;
	font-weight: 500;
}

.woocommerce-order-received table.shop_table .wc-item-meta p {
	color: var(--gloves-cart-ink);
	font-size: 13px;
	margin: 0;
}

@media (max-width: 782px) {

	/*
	 * Each meta reads as one line — "Size: 3-5 Year Old" — instead of a
	 * label/value pair in two columns. The receipt's product column is narrow on
	 * a phone, and the value column it left was narrower still, so a value like
	 * "3 Pair Pack ($12.95/Pair)" broke across several lines. Dropping the grid
	 * and letting the value sit inline after its label gives it the full width.
	 */
	.woocommerce-order-received table.shop_table .wc-item-meta {
		display: block;
	}

	.woocommerce-order-received table.shop_table .wc-item-meta li {
		display: block;
		margin-bottom: 4px;
	}

	.woocommerce-order-received table.shop_table .wc-item-meta p {
		display: inline;
	}

	/*
	 * The totals label drops to the size of the rows above it. At 18px it was
	 * competing with its own amount for room on a phone; the emphasis stays on
	 * the figure, which keeps the larger size.
	 */
	.woocommerce-order-received table.shop_table tfoot tr:last-child th {
		font-size: 13px;
	}
}

/* Customer details
--------------------------------------------- */
.woocommerce .woocommerce-customer-details address,
.woocommerce-order-received .woocommerce-customer-details address {
	background: var(--gloves-cart-surface);
	border: 1px solid var(--gloves-cart-border);
	border-radius: var(--gloves-cart-radius);
	border-width: 1px;
	font-size: 15px;
	font-style: normal;
	line-height: 1.7;
	padding: 20px;
}

.woocommerce-order-received .woocommerce-customer-details--phone,
.woocommerce-order-received .woocommerce-customer-details--email {
	color: var(--gloves-cart-muted);
	font-size: 15px;
	margin: 8px 0 0;
}

@media (max-width: 480px) {
	.woocommerce-order-received ul.order_details {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Buttons
--------------------------------------------- */
/* Primary actions: the two that commit the order. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: var(--gloves-cart-radius);
	color: var(--site-color-white);
	cursor: pointer;
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.32px;
	line-height: 30px;
	margin: 0;
	padding: 12px 24px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
	width: 100%;
}

/* Place order sizes to its label and sits at the end of the row, unlike the
   cart's checkout button which spans its panel. Two IDs in the selector: the
   single-ID form still measured 1158px wide, so something in the payment block
   was outranking it. */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout .place-order #place_order {
	display: inline-block;
	float: none;
	min-width: 220px;
	padding-inline: 40px;
	width: auto;
}

/* The PayPal express containers below the submit button reserve ~55px each and
   render nothing on this install, leaving a deep empty band. Removed at your
   request — note this also removes the PayPal / Google Pay / Apple Pay express
   buttons from below "Place order" if the gateway is ever configured to draw
   them there. The gateway's entry in the payment method list above is
   untouched, so PayPal remains selectable as a payment method. */
.woocommerce-checkout #payment .ppc-button-wrapper,
.woocommerce-checkout #payment .ppcp-button-apm,
.woocommerce-checkout #order_review .ppc-button-wrapper,
.woocommerce-checkout #order_review .ppcp-button-apm {
	display: none;
}

/* The gateway's own row in the payment method list keeps its markup, so PayPal
   stays selectable — only the express buttons under the submit are removed. */
.woocommerce-checkout #payment ul.payment_methods .ppc-button-wrapper,
.woocommerce-checkout #payment ul.payment_methods .ppcp-button-apm {
	display: block;
}

/* On the cart the same containers do render, so they are only collapsed when
   they have nothing in them. */
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper,
.woocommerce-cart .wc-proceed-to-checkout .ppcp-button-apm {
	min-height: 0;
}

.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper>div:empty {
	display: none;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible,
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/* Secondary actions: coupon and cart maintenance sit beside the primary CTA,
   so they are outlined rather than filled to keep one clear call to action. */
.woocommerce-cart .shop_table td.actions .button,
.woocommerce-checkout .checkout_coupon .button,
.woocommerce-cart .woocommerce-message .button,
.woocommerce-checkout .woocommerce-message .button {
	background: transparent;
	border: 1px solid var(--site-color-brand-blue);
	border-radius: var(--gloves-cart-radius);
	color: var(--site-color-brand-blue);
	cursor: pointer;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	min-height: 48px;
	padding: 12px 24px;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.woocommerce-cart .shop_table td.actions .button:hover,
.woocommerce-cart .shop_table td.actions .button:focus-visible,
.woocommerce-checkout .checkout_coupon .button:hover,
.woocommerce-checkout .checkout_coupon .button:focus-visible,
.woocommerce-cart .woocommerce-message .button:hover,
.woocommerce-cart .woocommerce-message .button:focus-visible,
.woocommerce-checkout .woocommerce-message .button:hover,
.woocommerce-checkout .woocommerce-message .button:focus-visible {
	background: var(--site-color-brand-blue);
	color: var(--site-color-white);
}

/* "Update cart" stays disabled until a quantity changes; WooCommerce only sets
   the attribute, leaving it looking identical to the live coupon button. */
.woocommerce-cart .shop_table td.actions .button:disabled,
.woocommerce-cart .shop_table td.actions .button[disabled] {
	border-color: var(--gloves-cart-border);
	color: var(--gloves-cart-muted);
	cursor: not-allowed;
	opacity: 1;
}

.woocommerce-cart .shop_table td.actions .button:disabled:hover,
.woocommerce-cart .shop_table td.actions .button[disabled]:hover {
	background: transparent;
	color: var(--gloves-cart-muted);
}

/* Empty cart
--------------------------------------------- */
.woocommerce-cart .cart-empty {
	font-size: 18px;
	margin-bottom: 20px;
}

.woocommerce-cart .return-to-shop {
	margin-bottom: 40px;
}

.woocommerce-cart .return-to-shop .button {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: var(--gloves-cart-radius);
	color: var(--site-color-white);
	display: inline-block;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	padding: 12px 28px;
	text-decoration: none;
}

.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-cart .return-to-shop .button:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/* Cart and Checkout — tablet
--------------------------------------------- */
/* A 400px panel floated right reads as an afterthought once the page is this
   narrow, so the summary takes the full measure from here down. Kept on its own
   query rather than in the 1024px block below, because it has to start where the
   two-column cart layout stops — at 1199px — and the checkout rules in that
   block are on their own breakpoint. */
@media (max-width: 1199px) {
	.woocommerce-cart .cart-collaterals .cart_totals {
		align-self: stretch;
		max-width: none;
	}
}

@media (max-width: 1024px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Cart and Checkout — mobile
--------------------------------------------- */
/* WooCommerce's `shop_table_responsive` collapses each row to a block and
   exposes the column name through `td::before`, so the table becomes a stack
   of label/value pairs rather than a scrolling grid. */
@media (max-width: 782px) {

	/* The table itself has to stop being a table, not just its rows. Left as
	   `display: table` it keeps sizing columns from the desktop widths set
	   above (56 + 104 + 3 x 130 plus the product name), which is wider than a
	   phone viewport and pushes the whole page into a horizontal scroll. */
	.woocommerce-cart .shop_table,
	.woocommerce-cart .shop_table tbody,
	.woocommerce-cart .shop_table tr,
	.woocommerce-cart .shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce-cart .shop_table thead {
		display: none;
	}

	.woocommerce-cart .shop_table .product-remove,
	.woocommerce-cart .shop_table .product-thumbnail,
	.woocommerce-cart .shop_table .product-price,
	.woocommerce-cart .shop_table .product-quantity,
	.woocommerce-cart .shop_table .product-subtotal {
		width: 100%;
	}

	/* Each item is a card, with the remove control on its top-right corner
	   rather than taking a full row of its own. */
	.woocommerce-cart .shop_table tr.cart_item {
		border-top: 1px solid var(--gloves-cart-border);
		display: block;
		padding: 16px;
		position: relative;
	}

	.woocommerce-cart .shop_table tr.cart_item td.product-remove {
		padding: 0;
		position: absolute;
		right: 12px;
		top: 12px;
		width: auto;
	}

	.woocommerce-cart .shop_table tr.cart_item td.product-thumbnail {
		padding: 0 0 12px;
	}

	.woocommerce-cart .shop_table tr.cart_item td.product-thumbnail img {
		width: 96px;
	}

	.woocommerce-cart .shop_table tr.cart_item td {
		align-items: center;
		border: 0;
		display: flex;
		gap: 16px;
		justify-content: space-between;
		padding: 6px 0;
		text-align: right;
	}

	/*
	 * WooCommerce's own label is `attr(data-title) ": "` floated left and bold.
	 * Float does nothing in a flex row, so the content is restated and the
	 * float cleared.
	 *
	 * Set to match the variation labels — "Size:", "Quantity:" — that sit in the
	 * same card a few lines above. These used to carry the desktop header's
	 * uppercase, 12px, letter-spaced treatment, which reads as a table heading;
	 * beside sentence-case variation labels in a card it was simply a second
	 * label style doing the same job.
	 */
	.woocommerce-cart .shop_table tr.cart_item td::before {
		color: var(--gloves-cart-muted);
		content: attr(data-title);
		flex: 0 0 auto;
		float: none;
		font-family: Inter, Arial, sans-serif;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0;
		text-align: left;
		text-transform: none;
	}

	/*
	 * The product cell stops being a label/value row and becomes a block.
	 *
	 * As a flex row it held three things — the "PRODUCT" label, the name, and
	 * the variation list — and the variation list was the one that lost. Squeezed
	 * into whatever the first two left behind, "Size: 3-5 Year Old" broke to one
	 * word per line and the cell grew to five times its own height. Stacked, the
	 * name runs the full width of the card and the variations sit under it,
	 * which is also the order they read in.
	 *
	 * The label goes with it: in a card whose first line is the product name,
	 * "PRODUCT:" is captioning the obvious.
	 */
	.woocommerce-cart .shop_table tr.cart_item td.product-name {
		display: block;
		padding-bottom: 10px;
		text-align: left;
	}

	.woocommerce-cart .shop_table tr.cart_item td.product-name::before {
		content: none;
	}

	.woocommerce-cart .shop_table tr.cart_item td.product-name a {
		display: block;
		font-size: 16px;
		font-weight: 500;
		text-align: left;
	}

	/* Two tight columns — label, value — rather than the desktop's wider pair. */
	.woocommerce-cart .shop_table tr.cart_item td.product-name dl.variation,
	.woocommerce-cart .shop_table tr.cart_item td.product-name .wc-item-meta {
		gap: 2px 8px;
		grid-template-columns: auto minmax(0, 1fr);
		margin: 8px 0 0;
	}

	/* Both halves read left. The cell's `text-align: right` is inherited by the
	   grid items, which put "Size:" and its value on opposite edges of a narrow
	   card with a gap of dead space between them. */
	.woocommerce-cart .shop_table tr.cart_item td.product-name dl.variation dt,
	.woocommerce-cart .shop_table tr.cart_item td.product-name dl.variation dd,
	.woocommerce-cart .shop_table tr.cart_item td.product-name .wc-item-meta .wc-item-meta-label,
	.woocommerce-cart .shop_table tr.cart_item td.product-name .wc-item-meta dd {
		text-align: left;
	}

	/* The quantity box is a fixed control, not text — it must not stretch with
	   the cell or inherit the cell's right alignment. */
	.woocommerce-cart .shop_table tr.cart_item td.product-quantity .quantity {
		flex: 0 0 auto;
		margin: 0;
	}

	.woocommerce-cart .shop_table tr.cart_item td.product-quantity .qty {
		text-align: center;
		width: 72px;
	}

	.woocommerce-cart .shop_table tr.cart_item td.product-remove::before,
	.woocommerce-cart .shop_table tr.cart_item td.product-thumbnail::before {
		content: none;
	}

	.woocommerce-cart .shop_table tr.cart_item td.product-thumbnail {
		justify-content: flex-start;
	}

	/* The float has nowhere useful to sit once the controls go full width; the
	   flex column below owns the spacing between the two rows. */
	.woocommerce-cart .shop_table td.actions button[name="update_cart"] {
		float: none;
	}

	/*
	 * The actions cell drives the alignment for both of its rows.
	 *
	 * As a block, the coupon group and the Update cart button sized themselves
	 * independently and the coupon row came out wider than the button beneath
	 * it — visibly unaligned on both edges. A flex column gives them one shared
	 * measure, and `border-box` keeps the coupon's own width honest so it cannot
	 * push past the cell's padding.
	 */
	.woocommerce-cart .shop_table td.actions {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;
	}

	/*
	 * The coupon field and its button stay on one line. Both used to be given
	 * `width: 100%`, which in a flex row meant each claimed the full width and
	 * the button wrapped underneath. The field takes the room that is left and
	 * the button hugs its label instead.
	 */
	/*
	 * `padding: 0` is the one that matters. WooCommerce's own
	 * `woocommerce-smallscreen.css` pads this wrapper, which inset the field and
	 * its button 8px inside the Update cart button below them — the edges did
	 * not line up on either side. The margin reset on the field goes with it:
	 * the plugin adds `margin-right: 4px`, which stacked on the flex gap.
	 */
	/*
	 * `gap: 0` is deliberate, and it is what makes the edges line up.
	 *
	 * Three things ride inside this wrapper besides the field and the button:
	 * WooCommerce's clearfix `::before` and `::after`, and a visually hidden
	 * `<label for="coupon_code">`. All three are zero-width, but in a flex row
	 * they are still flex items, so with a gap set each one claimed a gap of its
	 * own — one before the field and one after the button. Measured, that put
	 * the field 8px inside the Update cart button below it and left the Apply
	 * button 8px short of its right edge.
	 *
	 * Overriding the pseudo-elements directly was tried first and does not hold:
	 * WooCommerce declares them at a higher specificity than a child-theme rule
	 * can reach without an arms race. With no gap there is nothing for a phantom
	 * item to consume, and the real spacing is carried by the field's own margin
	 * instead — which no invisible sibling can take.
	 */
	.woocommerce-cart .shop_table td.actions .coupon {
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	/* Out of the flex flow entirely; it stays in the accessibility tree. */
	.woocommerce-cart .shop_table td.actions .coupon>label.screen-reader-text {
		position: absolute;
	}

	.woocommerce-cart .shop_table td.actions #coupon_code {
		flex: 1 1 auto;
		margin: 0 8px 0 0;
		min-width: 0;
		width: auto;
	}

	.woocommerce-cart .shop_table td.actions .coupon .button {
		flex: 0 0 auto;
		margin: 0;
		white-space: nowrap;
		width: auto;
	}

	/* Update cart is the row's own action and still spans the width. The margin
	   reset matters: the flex column owns the spacing now. */
	.woocommerce-cart .shop_table td.actions>.button,
	.woocommerce-cart .shop_table td.actions button[name="update_cart"] {
		box-sizing: border-box;
		margin: 0;
		width: 100%;
	}

	/* The 200px desktop floor is wider than the padded column on a small phone. */
	.woocommerce-cart .shop_table td.actions #coupon_code {
		min-width: 0;
	}

	/* The totals table also carries `shop_table_responsive`, so WooCommerce's
	   small-screen sheet hides the `th` and injects the label through
	   `td::before` instead. This design keeps the real `th`, so both appeared
	   and every row read "Subtotal Subtotal: $39.90". The injected copy goes. */
	.woocommerce-cart .cart_totals table.shop_table tr td::before {
		content: none;
	}

	/* WooCommerce forces `text-align: right !important` on every responsive
	   cell, which drags the label over with the value. */
	.woocommerce-cart .cart_totals table.shop_table th {
		text-align: left;
	}

	/* The shipping cell holds a method list and the calculator form, which have
	   no room beside their own label once the row is only a phone wide. */
	.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}

	.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
		text-align: left;
	}
}

@media (max-width: 480px) {
	.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/**
 * Wishlist page
 *
 * `[yith_wcwl_wishlist]`, placed in a builder Shortcode/Embed row on the
 * Wishlist page. YITH ships the table as a WooCommerce `shop_table cart`, the
 * same shape the cart uses, so the cart's own treatment is carried over here
 * rather than a second table style being invented: white panel, hairline
 * border, uppercase column headings on the grey surface, and a rule between
 * rows.
 *
 * The cart tokens themselves cannot be reused — they are scoped to the
 * `.woocommerce-cart`, `.woocommerce-checkout` and `.woocommerce-account` body
 * classes, and the wishlist is an ordinary page — so the same values are bound
 * to wishlist names on the form.
 *
 * Scoped to `.yith-wcwl-form` rather than a body class so the shortcode is
 * styled wherever an editor places it.
 */
.yith-wcwl-form {
	--gloves-wishlist-border: #b5b5b5;
	--gloves-wishlist-ink: var(--gloves-color-neutral-07);
	--gloves-wishlist-muted: var(--gloves-color-neutral-04);
	--gloves-wishlist-surface: var(--site-color-grey);
	color: var(--gloves-wishlist-ink);
	font-family: Inter, Arial, sans-serif;
}

/*
 * The shell, applied only when the shortcode is the store-UI fallback.
 *
 * That path echoes the form straight into `.entry-content--builder`, which is
 * not a shell container, so the table and its title ran the full width of the
 * viewport while the breadcrumb above them kept the page gutter. The same
 * 1,232px measure the cart and the product page use brings it into line.
 *
 * Deliberately keyed on the direct-child relationship: when an editor puts the
 * shortcode in a Shortcode/Embed row instead, that row supplies its own shell
 * and a second measure here would inset it twice.
 */
.entry-content--builder>.yith-wcwl-form {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: min(1232px, calc(100% - (2 * var(--mrn-shell-gutter))));
	width: 100%;
}

/*
 * The PHP filter stops wpautop breaking the table apart, but two wrappers
 * survive it: one around YITH's `<!-- WISHLIST TABLE -->` comment and one
 * around the trailing hidden inputs. Both render nothing yet still carry a
 * paragraph's margin, which opens a gap above the table and below it. The form
 * has no paragraph content of its own, so zeroing all of them is safe, and a
 * genuinely empty one is dropped outright.
 */
.yith-wcwl-form>p {
	margin: 0;
}

.yith-wcwl-form>p:empty {
	display: none;
}

/*
 * Title block.
 *
 * The measured gap between the heading and the table was 148px against a 24px
 * margin. The rest came from what YITH puts between them — the title container,
 * the wpautop leftovers, and the inline rename form it prints for the list's
 * owner. Every one of those is flattened here so the only thing setting the
 * distance is the heading's own margin.
 */
.yith-wcwl-form .wishlist-title-container,
.yith-wcwl-form .wishlist-title {
	margin: 0;
	padding: 0;
}

.yith-wcwl-form p {
	margin: 0;
}

.yith-wcwl-form .wishlist-title h2 {
	color: var(--gloves-wishlist-ink);
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.25;
	margin: 0 0 16px;
}

/*
 * When the shortcode sits in a builder row, that row's own Heading field is the
 * page's title and YITH's built-in "My wishlist" heading is a second one
 * directly beneath it. The plugin's is dropped in that case only — scoped to
 * `.mrn-content-builder__row`, so the store-UI fallback, which prints the form
 * straight into the entry content with no row and therefore no heading of its
 * own, keeps YITH's title and does not end up untitled.
 */
.mrn-content-builder__row .yith-wcwl-form .wishlist-title-container {
	display: none;
}

/*
 * The owner's inline rename form. It only renders for whoever owns the list, so
 * it is easy to miss while styling, and left alone it sits between the heading
 * and the table as a raw input with two unstyled icon buttons.
 */
.yith-wcwl-form .hidden-title-form {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0 0 16px;
}

.yith-wcwl-form .hidden-title-form input[type="text"] {
	border: 1px solid var(--gloves-wishlist-border);
	border-radius: var(--gloves-radius-field);
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	max-width: 320px;
	padding: 8px 12px;
}

.yith-wcwl-form table.wishlist_table {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-wishlist-border);
	/*
	 * `separate`, not `collapse`. A collapsed table merges its own border into
	 * the edge cells' borders, and a merged border cannot follow a radius — the
	 * outline came out broken, drawn down one side and along part of another.
	 * With the borders kept separate the panel border is the table's alone, the
	 * radius clips it cleanly, and zero spacing keeps the rows flush so the
	 * `border-top` on each cell is still the only rule between rows.
	 */
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--gloves-radius-button);
	font-size: 15px;
	margin: 0;
	/* Clips the header's grey fill to the panel's rounded corners. */
	overflow: hidden;
	width: 100%;
}

/*
 * Every heading shares one face. The colour is restated at the end because the
 * column rules further down are keyed on the shared `product-*` classes, which
 * WooCommerce puts on the `th` as well as the `td` — "Unit price" was picking
 * up the price cell's ink and rendering a shade darker than its neighbours.
 * Those rules are now scoped to `td`; this stays as the single declaration that
 * decides what a heading looks like.
 */
/*
 * `--gloves-wishlist-ink`, not `--gloves-cart-ink`: the cart tokens are scoped
 * to the cart, checkout and account body classes, and the wishlist is an
 * ordinary page, so that variable resolves to nothing here. Both are defined as
 * `--gloves-color-neutral-07`, so this is the same ink the other tables use.
 */
.yith-wcwl-form table.wishlist_table th {
	background: var(--gloves-wishlist-surface);
	border: 0;
	color: var(--gloves-wishlist-ink);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 16px 20px;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.yith-wcwl-form table.wishlist_table td {
	border: 0;
	border-top: 1px solid var(--gloves-wishlist-border);
	padding: 20px;
	vertical-align: middle;
}

/* The first row sits directly under the header fill, which already reads as a
   divider. */
.yith-wcwl-form table.wishlist_table tbody tr:first-child td {
	border-top: 0;
}

/*
 * Fixed widths for the narrow columns so the product name absorbs the rest.
 * Auto layout otherwise hands the two empty headers — remove and thumbnail —
 * a large share of the row and strands the name.
 */
.yith-wcwl-form table.wishlist_table .product-remove {
	width: 56px;
}

.yith-wcwl-form table.wishlist_table .product-thumbnail {
	width: 104px;
}

/* Wide enough for a two-amount range — "$13.50 – $38.85" — on one line. */
.yith-wcwl-form table.wishlist_table .product-price {
	width: 190px;
}

.yith-wcwl-form table.wishlist_table .product-stock-status {
	width: 140px;
}

.yith-wcwl-form table.wishlist_table .product-add-to-cart {
	width: 190px;
}

.yith-wcwl-form table.wishlist_table .product-thumbnail img {
	border: 1px solid var(--gloves-wishlist-border);
	border-radius: var(--gloves-radius-field);
	display: block;
	height: auto;
	width: 72px;
}

.yith-wcwl-form table.wishlist_table .product-name a {
	color: var(--gloves-wishlist-ink);
	font-weight: 500;
	text-decoration: none;
}

.yith-wcwl-form table.wishlist_table .product-name a:hover,
.yith-wcwl-form table.wishlist_table .product-name a:focus-visible {
	color: var(--site-color-brand-blue);
}

/*
 * The price column is centred, heading included — a centred value under a
 * left-aligned heading reads as a column that has slipped out of alignment.
 */
.yith-wcwl-form table.wishlist_table th.product-price,
.yith-wcwl-form table.wishlist_table td.product-price {
	text-align: center;
}

.yith-wcwl-form table.wishlist_table td.product-price {
	color: var(--gloves-wishlist-ink);
	font-weight: 500;
}

/*
 * A sale price arrives as `<del>` old over `<ins>` new. Left alone the `<ins>`
 * takes the browser's underline and, on this build, a highlight fill — the
 * yellow band the price column was rendering. Matched to the product cards
 * instead: the old price struck through in the muted grey, the new one in the
 * sale red, neither underlined.
 */
.yith-wcwl-form table.wishlist_table .product-price del {
	color: var(--gloves-color-price-was);
	font-weight: 400;
	margin-right: 6px;
	opacity: 1;
	text-decoration: line-through;
}

.yith-wcwl-form table.wishlist_table .product-price ins {
	background: transparent;
	color: var(--gloves-color-price-sale);
	text-decoration: none;
}

/* A price range should break between the two amounts, never inside one. */
.yith-wcwl-form table.wishlist_table .product-price .amount {
	white-space: nowrap;
}

/* YITH's own stock classes — `wishlist-in-stock`, not WooCommerce's `in-stock`. */
.yith-wcwl-form table.wishlist_table .wishlist-in-stock {
	color: #1f7a44;
	font-weight: 500;
}

.yith-wcwl-form table.wishlist_table .wishlist-out-of-stock {
	color: var(--gloves-color-price-sale);
	font-weight: 500;
}

/*
 * The add-to-cart control takes the site button treatment; the wishlist is not
 * the product page, so it keeps the 8px scale.
 *
 * Matched on the cell's link rather than on `.button`: YITH renders this as
 * `a.add_to_cart_button.add_to_cart.alt` with no `.button` class, so a
 * `.button` selector never landed and it drew as a bare blue underlined link.
 */
.yith-wcwl-form table.wishlist_table .product-add-to-cart a {
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-white);
	cursor: pointer;
	/*
	 * `display` and `margin` carry `!important` to beat the plugin's own
	 * `.wishlist_table .product-add-to-cart a { display: table !important;
	 * margin: 0 auto 5px !important }`. That is not cosmetic: as a table box the
	 * link shrink-wrapped to the width of its text — measured at 73x21 with the
	 * 10px/24px padding declared but not drawn — so the button rendered as a
	 * tight blue chip with the label touching its edges. Same weight-matching
	 * the remove control below already needs.
	 */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 !important;
	padding: 10px 24px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
	white-space: nowrap;
}

.yith-wcwl-form table.wishlist_table .product-add-to-cart a:hover,
.yith-wcwl-form table.wishlist_table .product-add-to-cart a:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/* Added-to-cart confirmation link WooCommerce appends after an AJAX add. */
.yith-wcwl-form table.wishlist_table .product-add-to-cart a.added_to_cart {
	background: transparent;
	color: var(--site-color-brand-blue);
	display: inline-block;
	font-size: 13px;
	margin-top: 8px;
	padding: 0;
	text-decoration: underline;
}

/* YITH ships this control with `!important` colours, so the override has to
   match that weight to land — as the cart's own remove button does. */
/*
 * The glyph is a text "×", so a line box decides where it sits and it rode a
 * couple of pixels high inside the round hover fill. `line-height: 0` drops the
 * line box out of the equation and lets the flex centring place the glyph on
 * the box's own centre. The wrapper `div` YITH prints around the link is made a
 * centring flex box too, so the disc sits in the middle of its column.
 */
.yith-wcwl-form table.wishlist_table td.product-remove {
	text-align: center;
}

.yith-wcwl-form table.wishlist_table td.product-remove>div {
	align-items: center;
	display: flex;
	justify-content: center;
}

.yith-wcwl-form table.wishlist_table a.remove,
.yith-wcwl-form table.wishlist_table .remove_from_wishlist {
	background: transparent;
	border-radius: 50%;
	color: var(--gloves-wishlist-muted) !important;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	font-size: 22px;
	height: 28px;
	justify-content: center;
	line-height: 0;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	width: 28px;
}

.yith-wcwl-form table.wishlist_table a.remove:hover,
.yith-wcwl-form table.wishlist_table a.remove:focus-visible,
.yith-wcwl-form table.wishlist_table .remove_from_wishlist:hover,
.yith-wcwl-form table.wishlist_table .remove_from_wishlist:focus-visible {
	background: var(--site-color-brand-blue) !important;
	color: var(--site-color-white) !important;
}

/* Empty state. Centred across the full row rather than left in the first cell. */
.yith-wcwl-form table.wishlist_table td.wishlist-empty {
	color: var(--gloves-wishlist-muted);
	font-size: 16px;
	padding: 56px 20px;
	text-align: center;
}

.yith-wcwl-form .yith_wcwl_wishlist_footer:empty {
	display: none;
}

/*
 * 64px between the table and the footer.
 *
 * The default was 120px, and it came from two places rather than one: 96px of
 * `padding-bottom` on `main.site-main` and 24px of `margin-bottom` on the page
 * article inside it. The article margin is zeroed so a single declaration
 * carries the whole distance and the number below is the number on screen.
 */
.gloves-wishlist .site-main {
	padding-bottom: 64px;
}

.gloves-wishlist .site-main>article {
	margin-bottom: 0;
}

/*
 * Once the shortcode moved into a builder row, that row's own section spacing
 * — 48px of bottom padding — stacked on the 64px above and the gap measured
 * 112px. The row is the last thing on the page, so its trailing space is
 * redundant with the shell's; zeroed here so the declaration above remains the
 * single number that sets the distance.
 *
 * This is the one spacing value on the page not coming from the row's own
 * Spacing tab. Setting that preset to none in the admin would do the same job
 * and would be the tidier home for it.
 */
.gloves-wishlist .site-main .mrn-content-builder__row:last-child .mrn-layout-container {
	padding-bottom: 0;
}

@media (max-width: 782px) {
	.yith-wcwl-form .wishlist-title h2 {
		font-size: 26px;
		margin-bottom: 16px;
	}

	/*
	 * The row becomes a stack: the header is dropped and each cell takes the
	 * full width, which keeps the six columns from crushing the name and the
	 * button into unreadable slivers on a phone.
	 */
	.yith-wcwl-form table.wishlist_table thead {
		display: none;
	}

	.yith-wcwl-form table.wishlist_table,
	.yith-wcwl-form table.wishlist_table tbody,
	.yith-wcwl-form table.wishlist_table tr,
	.yith-wcwl-form table.wishlist_table td {
		display: block;
		width: auto;
	}

	/*
	 * The desktop column widths have to be released by name. They are set on the
	 * shared `product-*` classes, which outweigh the `td` rule above, so without
	 * this the 190px price and add-to-cart columns survive the switch to blocks
	 * and push the card past the viewport — the product name was being clipped
	 * at the right edge with the card's border off-screen.
	 */
	.yith-wcwl-form table.wishlist_table td.product-remove,
	.yith-wcwl-form table.wishlist_table td.product-thumbnail,
	.yith-wcwl-form table.wishlist_table td.product-price,
	.yith-wcwl-form table.wishlist_table td.product-stock-status,
	.yith-wcwl-form table.wishlist_table td.product-add-to-cart {
		width: auto;
	}

	/*
	 * Stacked, every line reads as one left-aligned card. The price loses its
	 * centred column treatment, and the cells YITH centres by default — stock
	 * status and the button cell — are brought back into line with the name
	 * above them, which the plugin already left-aligns.
	 */
	.yith-wcwl-form table.wishlist_table td,
	.yith-wcwl-form table.wishlist_table td.product-price,
	.yith-wcwl-form table.wishlist_table td.product-stock-status,
	.yith-wcwl-form table.wishlist_table td.product-add-to-cart {
		text-align: left;
	}

	.yith-wcwl-form table.wishlist_table tr {
		border-top: 1px solid var(--gloves-wishlist-border);
		box-sizing: border-box;
		padding: 16px 16px 20px;
		position: relative;
	}

	.yith-wcwl-form table.wishlist_table tbody tr:first-child {
		border-top: 0;
	}

	.yith-wcwl-form table.wishlist_table td {
		border-top: 0;
		padding: 4px 0;
	}

	/* The remove control rides the top-right corner of the stacked card. */
	.yith-wcwl-form table.wishlist_table td.product-remove {
		position: absolute;
		right: 12px;
		top: 12px;
	}

	.yith-wcwl-form table.wishlist_table td.product-thumbnail {
		padding-bottom: 12px;
	}

	/*
	 * The thumbnail is sized on its link, not its image: YITH caps
	 * `td.product-thumbnail a` at `max-width: 80px` and stretches the image to
	 * 100% of it, so setting a width on the image alone did nothing.
	 */
	.yith-wcwl-form table.wishlist_table td.product-thumbnail a {
		max-width: 96px;
	}

	.yith-wcwl-form table.wishlist_table td.product-thumbnail img {
		width: 100%;
	}

	.yith-wcwl-form table.wishlist_table td.product-add-to-cart {
		padding-top: 14px;
	}

	/*
	 * Full width. `display` carries `!important` for the same reason it does at
	 * desktop — it has to beat the plugin's `display: table !important` — and
	 * the selector is the cell's link, since YITH gives it no `.button` class.
	 */
	.yith-wcwl-form table.wishlist_table td.product-add-to-cart a {
		display: flex !important;
		width: 100%;
	}

	.yith-wcwl-form table.wishlist_table td.wishlist-empty {
		padding: 40px 16px;
	}
}

/**
 * Blog: the Glove Guru listing, category archives, and post detail
 *
 * Built on the site's existing language rather than a design of its own — the
 * catalog's header band, the product card's frame and hover, the shared
 * breadcrumb, Inter for interface text and the display serif for headings.
 *
 * The imported posts carry no featured images: their artwork sits inside the
 * content. The card and the detail header both treat an image as optional and
 * close up when there is none, so the listing does not read as a row of empty
 * frames.
 */
.gloves-blog {
	--gloves-blog-border: #e1e4e8;
	--gloves-blog-ink: var(--gloves-color-neutral-07);
	--gloves-blog-muted: var(--gloves-color-neutral-04);
	color: var(--gloves-blog-ink);
}

/*
 * The trail carries the site's standard 24px above and below, the same as the
 * catalog, the content pages and the product page.
 */
.gloves-blog__breadcrumbs {
	padding: 24px 0;
}

/*
 * No surface behind the title. The catalog fills its header band because it is
 * a landing page with a description and an info card in it; the blog title is
 * just a page title, and every other page on the site sets one on the plain
 * background.
 */
.gloves-blog__header {
	background: transparent;
	padding: var(--gloves-page-heading-space) 0 8px;
}

/*
 * Title row: the wand-and-hand mark sits beside the title on the blog index
 * only (`.gloves-blog__title-mark` is only ever rendered there — see
 * `is_home()` in template-parts/blog-archive.php). On every other listing
 * that uses this same shared header, the row holds just the `<h1>` and the
 * flex layout has nothing else to place, so it costs nothing there either.
 */
.gloves-blog__title-row {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.gloves-blog__title {
	color: var(--gloves-blog-ink);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.15;
	margin: 0;
}

/*
 * Height-capped, not width-capped, at 80% of the original clamp so the mark
 * reads as an accent beside the title rather than competing with it. The row
 * above bottom-aligns the two, so the mark's baseline sits on the title's
 * rather than floating at its vertical centre.
 */
.gloves-blog__title-mark {
	block-size: clamp(51px, 7.2vw, 80px);
	flex: 0 0 auto;
	inline-size: auto;
	max-inline-size: 45vw;
}

.gloves-blog__description {
	color: var(--gloves-blog-muted);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	margin-top: 16px;
	max-width: 68ch;
}

/*
 * The bottom padding is the whole distance from the pagination to the footer —
 * `.site-main--blog` below gives up its own so this stays the single number.
 */
.gloves-blog__body {
	padding-block: 32px 64px;
}

.site-main--blog {
	padding-bottom: 0;
}

/* Three across at the shell's full width. */
.gloves-blog__grid {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Card
--------------------------------------------- */
/*
 * The card sits on the site's light grey, the same surface the catalog header
 * and the product tiles use. With no border against it — the fill is what marks
 * the card out now, and an outline around a tinted panel reads as two edges.
 */
.gloves-post-card {
	background: var(--site-color-display-grey);
	border: 0;
	border-radius: var(--gloves-radius-button);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.gloves-post-card:hover,
.gloves-post-card:focus-within {
	box-shadow: 0 12px 28px -18px rgba(15, 15, 15, 0.35);
}

/* White behind the photograph, so a transparent PNG has something to sit on
   rather than blending into the card's own grey. */
.gloves-post-card__media {
	aspect-ratio: 16 / 10;
	background: var(--site-color-white);
	display: block;
	overflow: hidden;
}

.gloves-post-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	width: 100%;
}

.gloves-post-card:hover .gloves-post-card__media img {
	transform: scale(1.04);
}

/* The body takes the remaining height so every "Read more" in a row lines up. */
.gloves-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 24px;
}

.gloves-post-card__meta {
	align-items: center;
	color: var(--gloves-blog-muted);
	display: flex;
	flex-wrap: wrap;
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	gap: 8px 12px;
	justify-content: space-between;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * The date sits on the right of the row. `margin-left: auto` rather than relying
 * on `space-between` alone, so it still parks at the right edge on a card whose
 * post has no category and the date is the only thing in the row.
 */
.gloves-post-card__date {
	margin-left: auto;
	text-align: right;
}

/* Plain text now, not a link — no hover or underline to carry. */
.gloves-post-card__category {
	color: var(--site-color-brand-blue);
	font-weight: 600;
}

.gloves-post-card__title {
	font-size: 22px;
	line-height: 1.3;
	margin: 12px 0 0;
}

.gloves-post-card__title a,
.gloves-post-card__title a:visited {
	color: var(--gloves-blog-ink);
	text-decoration: none;
}

.gloves-post-card__title a:hover,
.gloves-post-card__title a:focus-visible {
	color: var(--site-color-brand-blue);
}

/* The bottom margin is the floor under the copy: the button's `margin-top: auto`
   swallows any slack in a tall card, so without it a short card would have its
   button pressed against the last line. */
.gloves-post-card__excerpt {
	color: var(--gloves-blog-muted);
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	margin: 12px 0 20px;
}

/*
 * The site's standard button — brand blue on the 8px radius, the same control
 * the catalog cards, the info box and the Load more button use.
 *
 * `margin-top: auto` holds it to the bottom of the card, so every button in a
 * row lines up however much copy sits above it; `align-self: start` keeps it
 * hugging its label rather than stretching the width of the card.
 */
.gloves-post-card__more,
.gloves-post-card__more:visited {
	align-items: center;
	align-self: start;
	background: var(--site-color-brand-blue);
	border: 0;
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-white);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	justify-content: center;
	margin-top: auto;
	padding: 10px 24px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.gloves-post-card__more:hover,
.gloves-post-card__more:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

/* Load more — the site's outlined button, centred under the grid. */
.gloves-blog__more {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.gloves-blog__more-button,
.gloves-blog__more-button:visited {
	align-items: center;
	background: transparent;
	border: 1px solid var(--site-color-brand-blue);
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-brand-blue);
	cursor: pointer;
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	justify-content: center;
	min-height: 48px;
	min-width: 200px;
	padding: 12px 32px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gloves-blog__more-button:hover,
.gloves-blog__more-button:focus-visible {
	background: var(--site-color-brand-blue);
	color: var(--site-color-white);
}

.gloves-blog__more-button[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

/* Pagination — kept for any archive that still renders links. */
.gloves-blog__pagination {
	margin-top: 48px;
}

.gloves-blog__pagination ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gloves-blog__pagination a,
.gloves-blog__pagination span {
	align-items: center;
	border: 1px solid var(--gloves-blog-border);
	border-radius: var(--gloves-radius-button);
	color: var(--gloves-blog-ink);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	padding: 0 12px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gloves-blog__pagination a:hover,
.gloves-blog__pagination a:focus-visible {
	border-color: var(--site-color-brand-blue);
	color: var(--site-color-brand-blue);
}

.gloves-blog__pagination .current {
	background: var(--site-color-brand-blue);
	border-color: var(--site-color-brand-blue);
	color: var(--site-color-white);
}

.gloves-blog__empty {
	padding: 64px 0;
	text-align: center;
}

.gloves-blog__empty-title {
	font-size: 20px;
	margin: 0 0 8px;
}

.gloves-blog__empty-text {
	color: var(--gloves-color-neutral-04);
	font-family: Inter, Arial, sans-serif;
	margin: 0;
}

/* Post detail
--------------------------------------------- */
.gloves-post {
	--gloves-blog-border: #e1e4e8;
	--gloves-blog-ink: var(--gloves-color-neutral-07);
	--gloves-blog-muted: var(--gloves-color-neutral-04);
}

/*
 * The article runs the full shell width, like every other page on the site, so
 * the trail, the header, the artwork and the copy all share one left edge.
 *
 * The one thing that does not simply stretch is the running copy: a 1,240px
 * line of prose is hard to track back from. Rather than centring a narrow
 * column and leaving the page looking half empty, the paragraphs take a measure
 * inside the full-width column further down, and the header, media and
 * furniture use the whole width.
 */
.gloves-post__header {
	border-bottom: 1px solid var(--gloves-blog-border);
	padding: var(--gloves-page-heading-space) 0 28px;
}

/* Under the title, not above it. */
.gloves-post__meta {
	align-items: center;
	color: var(--gloves-blog-muted);
	display: flex;
	flex-wrap: wrap;
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	gap: 8px 12px;
	letter-spacing: 0.06em;
	margin-top: 16px;
	text-transform: uppercase;
}

.gloves-post__category,
.gloves-post__category:visited {
	color: var(--site-color-brand-blue);
	font-weight: 600;
	text-decoration: none;
}

.gloves-post__category:hover,
.gloves-post__category:focus-visible {
	color: var(--site-color-dark-blue);
	text-decoration: underline;
}

/* Full width — the title is the page's headline, not a column of copy. */
.gloves-post__title {
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	margin: 0;
	max-width: none;
}

/*
 * `auto` on the sides, not `0`. The figure is a `.mrn-shell-container`, which
 * centres itself on automatic side margins; the shorthand here set them to
 * zero, so the image sat hard against the left of the viewport while the title
 * and the copy — same container, same 1240px measure — stayed on the content
 * column 93px in. Only the top margin was ever meant to be set.
 */
.gloves-post__media {
	margin: 32px auto 0;
}

/*
 * Capped in height. At the full shell width a portrait photograph would stand
 * taller than the viewport and push the article off the first screen; `cover`
 * crops it to a bander instead.
 */
.gloves-post__media img {
	border-radius: var(--gloves-radius-button);
	display: block;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	width: 100%;
}

/* Content
--------------------------------------------- */
.gloves-post__content {
	color: var(--gloves-blog-ink);
	font-family: Inter, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.8;
	padding-block: 36px 8px;
}

/*
 * The measure sits on the text, not on the column. Paragraphs, headings and
 * lists stop at a readable line length while images, figures and tables keep
 * the full width — so the page reads as full width without the copy running to
 * 140 characters a line.
 */
.gloves-post__content>p,
.gloves-post__content>h2,
.gloves-post__content>h3,
.gloves-post__content>h4,
.gloves-post__content>ul,
.gloves-post__content>ol,
.gloves-post__content>blockquote {
	max-width: 78ch;
}

.gloves-post__content>*+* {
	margin-top: 1.25em;
}

.gloves-post__content h2,
.gloves-post__content h3,
.gloves-post__content h4 {
	color: var(--gloves-blog-ink);
	font-family: var(--mrn-font-heading);
	line-height: 1.25;
	margin-top: 1.8em;
}

.gloves-post__content h2 {
	font-size: 28px;
}

.gloves-post__content h3 {
	font-size: 22px;
}

.gloves-post__content h4 {
	font-size: 19px;
}

.gloves-post__content a {
	color: var(--site-color-brand-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gloves-post__content a:hover,
.gloves-post__content a:focus-visible {
	color: var(--site-color-dark-blue);
}

/*
 * The imported posts carry inline artwork at whatever width it was uploaded at,
 * some of it wider than this measure. Capping the width keeps a large image
 * from breaking the column.
 */
.gloves-post__content img {
	border-radius: var(--gloves-radius-field);
	display: block;
	height: auto;
	max-width: 100%;
}

.gloves-post__content figure {
	margin-inline: 0;
}

/*
 * Inline artwork sits on the same left edge as the copy.
 *
 * The imported posts carry `aligncenter` on their images — 53 of the 262 do,
 * against none with `alignleft` — so it reads as something the old editor
 * applied by default rather than a decision made per picture. The parent's
 * `.aligncenter` centres on automatic side margins, which left every one of
 * those images floating mid-column while the paragraph beside it started at
 * the left. Only the side margins are reset, so the class keeps its vertical
 * spacing, and `alignright` — genuinely used, once — still works.
 */
.gloves-post__content .aligncenter {
	margin-inline: 0;
}

/*
 * A run of neighbouring images, laid out as a row rather than a stack. The
 * count comes from PHP, which is the only place that can know how many images
 * sat next to each other — CSS can style a group but cannot form one.
 *
 * One image keeps the full width and never reaches this rule; two take half
 * each; three take a third. Four or more are capped at three across and wrap,
 * which keeps any single picture from dropping below a usable size.
 */
.gloves-post__gallery {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(var(--gloves-gallery-columns, 1), minmax(0, 1fr));
}

.gloves-post__gallery[data-count="2"] {
	--gloves-gallery-columns: 2;
}

/*
 * Three images read as one lead picture over a pair, not as three equal
 * thirds — at a third of the measure each, none of them is big enough to
 * carry the post. The first spans the row; the other two take half each.
 */
.gloves-post__gallery[data-count="3"] {
	--gloves-gallery-columns: 2;
}

.gloves-post__gallery[data-count="3"]> :first-child {
	grid-column: 1 / -1;
}

/* The lead picture is wider than it is tall; the pair below stay on 4:3. */
.gloves-post__gallery[data-count="3"]> :first-child img {
	aspect-ratio: 16 / 9;
}

.gloves-post__gallery figure,
.gloves-post__gallery p {
	margin: 0;
}

/*
 * Every tile the same height whatever the source aspect — these posts mix
 * landscape and portrait, and left alone a row of them steps up and down.
 */
.gloves-post__gallery img {
	aspect-ratio: 4 / 3;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.gloves-post__content figcaption {
	color: var(--gloves-blog-muted);
	font-size: 14px;
	margin-top: 8px;
}

.gloves-post__content ul,
.gloves-post__content ol {
	padding-left: 1.35em;
}

.gloves-post__content li+li {
	margin-top: 0.5em;
}

.gloves-post__content blockquote {
	border-left: 3px solid var(--site-color-brand-blue);
	color: var(--gloves-blog-muted);
	font-size: 19px;
	margin-inline: 0;
	padding: 4px 0 4px 20px;
}

/* Previous / next
--------------------------------------------- */
/*
 * Two buttons, one at each end. `space-between` rather than a two-column grid,
 * so a post with only a next link keeps it on the right and one with only a
 * previous keeps it on the left, without a rule per case.
 */
.gloves-post__nav {
	border-top: 1px solid var(--gloves-blog-border);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-top: 40px;
	padding-top: 32px;
}

.gloves-post__nav-link--next:only-child {
	margin-left: auto;
}

.gloves-post__nav-link,
.gloves-post__nav-link:visited {
	align-items: center;
	border: 1px solid var(--site-color-brand-blue);
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-brand-blue);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gloves-post__nav-link:hover,
.gloves-post__nav-link:focus-visible {
	background: var(--site-color-brand-blue);
	color: var(--site-color-white);
}

@media (max-width: 1024px) {
	.gloves-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.gloves-blog__header {
		padding: 32px 0;
	}

	.gloves-blog__body {
		padding-block: 32px 48px;
	}

	.gloves-blog__grid {
		gap: 24px;
		grid-template-columns: minmax(0, 1fr);
	}

	.gloves-post-card__body {
		padding: 20px;
	}

	.gloves-post__content {
		font-size: 16px;
	}

	/* Stacked, the second link keeps its own row rather than the right column. */
	.gloves-post__nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.gloves-post__nav-link--next,
	.gloves-post__nav-link--next:only-child {
		grid-column: auto;
		text-align: left;
	}
}

/**
 * Mobile page edge
 *
 * `--gloves-mobile-gutter` is the site's page edge on a phone, and most
 * sections already sit on it. Three places were missing it, measured at 393px:
 * the blog listing and the post ran their text to 0 on both sides, hard against
 * the screen edge, and the catalog's breadcrumb sat at 0 while the title
 * beneath it sat at 15 — two insets on one page.
 *
 * The wishlist is brought over from the parent's own 16px gutter to the site's
 * 15px at the same time. One pixel, but it was the only page not on the token.
 */
@media (max-width: 782px) {

	.gloves-blog__breadcrumbs,
	.gloves-catalog__breadcrumbs,
	.gloves-blog__header-inner,
	.gloves-blog__body,
	.gloves-post__header,
	.gloves-post__media,
	.gloves-post__content,
	.gloves-post__nav {
		padding-left: var(--gloves-mobile-gutter);
		padding-right: var(--gloves-mobile-gutter);
	}

	.entry-content--builder>.yith-wcwl-form {
		max-width: calc(100% - (2 * var(--gloves-mobile-gutter)));
	}
}

/**
 * Builder page title (a hero row on a CMS page)
 *
 * The hero's own heading size is tuned for a display hero — an image band with
 * a short line over it, like the homepage. On a plain CMS page it landed at
 * 32px, which read as a subheading: smaller than every other page title on the
 * site (blog 48px, category 40px) and, before the body was rebuilt as a grid,
 * smaller than the section headings underneath it.
 *
 * The blog listing is the closest thing this theme has to a standard interior
 * page — breadcrumb, title, copy, no background band — so its title is the one
 * to match. `clamp()` carries it down to 32px on a phone without a second
 * breakpoint, and `--gloves-color-neutral-07` is what `--gloves-blog-ink`
 * resolves to; that token is scoped to `.gloves-blog`, so it can't be borrowed
 * by name from out here.
 *
 * Scoped to the page-title modifier, which only a page-level hero heading
 * carries. The homepage hero heading is `.mrn-ui__heading` and keeps its 72px.
 */
.mrn-hero__page-title {
	color: var(--gloves-color-neutral-07);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.15;
	/*
	 * The parent caps a hero heading at `max-width: 14ch`, which suits the short
	 * marketing headline that rule was written for but not a page title. At 48px
	 * that measure is about 380px, so "Frequently Asked Questions" wrapped to two
	 * lines while "Get in touch" and "Customer Service" did not — leaving the FAQ
	 * hero 55px taller than every other page's and its content starting lower.
	 *
	 * 30ch holds the longest title this site has on one line and still stops a
	 * very long one running the full width of the shell.
	 */
	max-width: 30ch;
}

/*
 * Same rule, both classes, because load order is against us here.
 *
 * `css/layouts/hero.css` carries the parent's `.mrn-hero__heading { max-width:
 * 14ch }` and is enqueued at priority 21 — after this stylesheet at 20 — so a
 * single-class selector here ties on specificity and loses on order. The element
 * carries both classes, so naming both wins outright without `!important`.
 */
.mrn-hero__heading.mrn-hero__page-title {
	max-width: 30ch;
}

/*
 * The intro copy beneath such a title is the page's description, so it takes
 * the same treatment as the blog listing's: 16px Inter rather than the hero's
 * 14px, and a measure that keeps it readable instead of running the full
 * column width.
 */
.mrn-hero:has(.mrn-hero__page-title) .mrn-hero__text,
.mrn-hero:has(.mrn-hero__page-title) .mrn-hero__text p {
	color: var(--gloves-color-neutral-04);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.mrn-hero:has(.mrn-hero__page-title) .mrn-hero__text {
	max-width: 68ch;
}

/**
 * Content Grid: the clickable card
 *
 * Scoped to `--full-link`, the variant the builder adds when a grid item is set
 * to "Make Entire Grid Item Clickable". A card you can click should look like a
 * card and answer the pointer; a plain grid item that is only text still gets
 * no surface, so this cannot flatten a grid that was not built as a set of
 * links.
 *
 * The surface is set through the parent's own `--mrn-ui-panel-*` tokens rather
 * than by declaring `background`/`padding`/`border-radius` here. Those three
 * properties are already claimed by
 *
 *     .mrn-content-builder__row .mrn-ui__item { background: var(--mrn-ui-panel-bg); … }
 *
 * which is two classes to this rule's one, so declaring them directly loses and
 * would have needed `!important` to win. Feeding the tokens instead lets the
 * parent's rule paint the panel, which is what that indirection is there for —
 * no specificity fight, and the values stay inside this card variant.
 *
 * `:focus-within` carries the same treatment as `:hover`, so tabbing through
 * the cards shows the same state a mouse does — the overlay anchor is the only
 * focusable thing inside, and without this the keyboard path was invisible.
 */
.mrn-content-grid__item--full-link {
	--mrn-ui-panel-bg: var(--site-color-grey);
	--mrn-ui-panel-radius: var(--gloves-radius-button);
	transition: background-color 160ms ease, color 160ms ease;
}

/*
 * The inset goes on the body rather than through `--mrn-ui-panel-padding`.
 * That token feeds a `padding` shorthand on the panel, but the parent also
 * carries a `padding-top: 0` on `…__item--collection-shell` behind an
 * eight-class selector, so the shorthand's top was overridden and the card came
 * out with three even sides and a flush top. The body fills the panel, so
 * padding it produces the same inset with nothing to out-specify.
 */
.mrn-content-grid__item--full-link .mrn-content-grid__item-body {
	padding: 28px;
}

/*
 * The label is a `<p>`, so it arrives with the browser's own 1em top margin —
 * 14px at the label's size. That sat on top of the body's 28px inset and put
 * the first line 42px down while the other three sides stayed at 28, so the
 * card's contents read low in the box. Only the top is zeroed; the label's own
 * 0.5rem bottom margin still separates it from the heading.
 */
/*
 * The eyebrow carries the brand blue at rest and flips to white with the rest
 * of the card on hover — the hover rule above is one class more specific, so it
 * wins without this needing to restate the state.
 */
.mrn-content-grid__item--full-link .mrn-ui__label {
	color: var(--site-color-brand-blue);
	margin-top: 0;
}

/**
 * Glove University section pages
 *
 * Scoped on the `gloves-university` body class from functions.php rather than
 * the Body Text row type: the homepage builds its copy from the same row and
 * has nine `h3`s inside it, so keying on the row would have re-spaced those too.
 */

/*
 * The glossary entries are `h3` + one paragraph, repeated. The heading arrives
 * with the browser's 1em block margin — 32px at its size — top and bottom, so
 * each term sat as far from its own definition as from the next entry and the
 * pairing was lost. Halving the bottom binds the definition to its term; the
 * top is left alone, and it is what still separates one entry from the next.
 *
 * Set on the heading rather than the paragraph because the two margins collapse
 * — the larger wins, so lowering the paragraph's 14px would have changed
 * nothing.
 */
.gloves-university .mrn-content-builder__row--body-text h3,
.gloves-university .mrn-content-builder__row--body-text h4 {
	margin-bottom: 16px;
}

/*
 * The one bulleted list in this set sat 88px right of the copy it belongs to:
 * 48px of margin and 40px of padding, both inherited defaults. Zeroing them
 * puts the item on the same left edge as the paragraphs, and the marker moves
 * inside so it cannot hang out into the gutter where nothing else sits.
 */
.gloves-university .mrn-content-builder__row--body-text ul,
.gloves-university .mrn-content-builder__row--body-text ol {
	list-style-position: inside;
	margin-left: 0;
	padding-left: 0;
}

/**
 * CMS page shell
 *
 * These are the page-level rules, not Glove University's — anything built from
 * the page builder gets them.
 */

/*
 * The hero reads as a page header band rather than loose text at the top of the
 * page. It is why the row is set to Full Width in the builder: with no colour
 * behind it, full width and contained looked identical.
 *
 * Keyed on the page-title modifier, so it lands on the CMS pages and leaves the
 * homepage's own hero — which carries its own artwork — alone.
 */
.mrn-hero:has(.mrn-hero__page-title) {
	background: var(--site-color-grey);
	/*
	 * The band ends exactly where the content shell begins, so the first row
	 * sat against it — on Glove University the cards touched the grey with no
	 * separation at all. This is the gap after the band itself, not spacing
	 * added to whatever row happens to come next, so it holds whether that row
	 * brings its own top padding (the Body Text pages) or none (the grids).
	 */
	margin-bottom: 64px;
}

@media (max-width: 782px) {
	.mrn-hero:has(.mrn-hero__page-title) {
		margin-bottom: 32px;
	}
}

/*
 * …and the band's own height, which was landing on three different values
 * because it was never CSS in the first place.
 *
 * The parent draws this padding from `--mrn-row-padding-*-desktop`, which the
 * builder writes inline per row from whatever spacing each page happens to
 * have saved. Three settings had accumulated across the CMS pages:
 *
 *   32px  FAQ, Contact, Customer Service, Glove Gurus
 *         (`padding-top-extra-small_padding-bottom-extra-small`)
 *   48px  Glove University, Types of Gloves, Technical Data, OSHA Codes,
 *         Glove Problems, Technical Terms, Cart, Wishlist (`defaults`)
 *   none  The Glove Guru, Order Status, Checkout — no `data-mrn-row-spacing`
 *         attribute at all, so the parent's `.mrn-hero[data-mrn-row-spacing]`
 *         rule never matches and the grey band collapses onto the title.
 *
 * Pinned here rather than corrected page by page in the builder: the same
 * header band on every page is a design contract, not an editorial choice, and
 * fixing the saved values would leave the next page to inherit whatever the
 * editor picks. 48px is the majority and matches the shell's own
 * `--gloves-page-heading-space`, so the eight pages already on it do not move.
 *
 * The class is repeated to carry weight. The parent's rule is `.mrn-hero
 * [data-mrn-row-spacing]` at 0-2-0 and `:has()` takes its argument's
 * specificity, so the plain selector ties at 0-2-0 — and `hero.css` is
 * enqueued after this stylesheet, so a tie loses. The doubled class breaks it
 * without an `!important`, and drops the attribute so the three pages that
 * never had one are covered by the same rule.
 */
.mrn-hero.mrn-hero:has(.mrn-hero__page-title) {
	padding-bottom: var(--gloves-page-heading-space);
	padding-top: var(--gloves-page-heading-space);
}

@media (max-width: 782px) {
	.mrn-hero.mrn-hero:has(.mrn-hero__page-title) {
		padding-bottom: 32px;
		padding-top: 32px;
	}
}

/*
 * …and that margin is the whole gap, so the number above is the number on
 * screen. The Body Text pages were measuring 113px to their first heading
 * because three things stacked up: this margin, 48px of container padding on
 * the first row, and the heading's own 33px top margin. The grid pages had
 * none of the latter two, so the same page type was landing at two different
 * distances. Both are zeroed on the first row only — every row after it keeps
 * its normal rhythm.
 */
.gloves-university .entry-content--builder .mrn-content-builder__row:first-of-type .mrn-layout-container {
	padding-top: 0;
}

.gloves-university .entry-content--builder .mrn-content-builder__row:first-of-type .mrn-ui__text> :first-child {
	margin-top: 0;
}

/*
 * 64px from the last row to the footer, as one number on the main column.
 * It was 120px: 96px of padding there plus the article's own 24px margin
 * underneath it. Zeroing that margin keeps the distance readable as a single
 * value instead of two that have to be added up.
 *
 * The front page is deliberately excluded — `.site-main--front-page` sets 0 so
 * the footer runs straight on from the newsletter band, per Figma. A blanket
 * `.page .site-main` would out-specify that rule and put a 64px strip of page
 * background under the band.
 */
.page .site-main:not(.site-main--front-page) {
	padding-bottom: 64px;
}

.page .site-main:not(.site-main--front-page)>article {
	margin-bottom: 0;
}

.mrn-content-grid__item--full-link:hover,
.mrn-content-grid__item--full-link:focus-within {
	--mrn-ui-panel-bg: var(--site-color-brand-blue);
}

.mrn-content-grid__item--full-link:hover .mrn-ui__label,
.mrn-content-grid__item--full-link:hover .mrn-ui__heading,
.mrn-content-grid__item--full-link:hover .mrn-ui__text,
.mrn-content-grid__item--full-link:focus-within .mrn-ui__label,
.mrn-content-grid__item--full-link:focus-within .mrn-ui__heading,
.mrn-content-grid__item--full-link:focus-within .mrn-ui__text {
	color: var(--site-color-white);
}

/*
 * The document icon ahead of each heading.
 *
 * Drawn as a mask filled with `currentColor` rather than set as a background
 * image, so it inherits the heading's colour and turns white with the text on
 * hover. This replaces the 📄 emoji the content used to carry: an emoji is a
 * colour glyph, so it ignores `color` and would have stayed dark on the blue.
 *
 * Sized in `em` so it tracks the heading's own clamp down to mobile.
 */
/*
 * Flex, so the icon is its own column and the text is a second one. As an
 * inline `::before` the icon sat in the text flow, so a title that wrapped —
 * "A practical guide to hand protection" — put its second line back at the
 * heading's left edge, underneath the icon. Two columns give the text block a
 * single left edge to wrap against.
 */
.mrn-content-grid__item--full-link .mrn-ui__heading {
	align-items: flex-start;
	display: flex;
	/*
	 * A quarter down from the component's own 1.5rem/1.25rem. At full size the
	 * longer data-sheet names ran to three and four lines in a card that only
	 * carries a label and a title, which read as headings rather than as items
	 * in a set. Both breakpoints are restated so the ratio holds on a phone —
	 * the child sheet loads after the parent, so a single unscoped value here
	 * would have overridden the parent's mobile step as well.
	 *
	 * The icon is sized in `em`, so it comes down with the text on its own.
	 */
	font-size: 1.125rem;
	gap: 10px;
	/*
	 * Up from the component's 1.08, which was set for one-line headings and
	 * crowded the two-line data-sheet names to the point of nearly touching.
	 */
	line-height: 1.3;
}

/* Stray empty/whitespace paragraph tag cleanup on checkout & cart pages */
.woocommerce-checkout p:empty,
.woocommerce-cart p:empty,
.woocommerce-checkout .woocommerce-billing-fields>p:not(.form-row):not(.form-row-wide):not(.form-row-first):not(.form-row-last),
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper>p:not(.form-row):not(.form-row-wide):not(.form-row-first):not(.form-row-last),
.woocommerce-checkout .woocommerce-shipping-fields>p:not(.form-row):not(.form-row-wide):not(.form-row-first):not(.form-row-last),
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper>p:not(.form-row):not(.form-row-wide):not(.form-row-first):not(.form-row-last),
.woocommerce-checkout .woocommerce-additional-fields>p:not(.form-row):not(.form-row-wide):not(.form-row-first):not(.form-row-last),
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper>p:not(.form-row):not(.form-row-wide):not(.form-row-first):not(.form-row-last),
.woocommerce-checkout .col2-set>p:not(.col-1):not(.col-2):not(.form-row),
.woocommerce-checkout form.checkout>p:empty {
	display: none !important;
	height: 0 !important;
	line-height: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
}

@media (max-width: 782px) {
	.mrn-content-grid__item--full-link .mrn-ui__heading {
		font-size: 0.9375rem;
	}
}

.mrn-content-grid__item--full-link .mrn-ui__heading::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	/* Does not shrink when the title beside it is long. */
	flex: 0 0 auto;
	/* 0.85em up 30%. Still in `em`, so it tracks the title at both sizes. */
	height: 1.105em;
	/*
	 * Nudged onto the first line's cap height rather than its box top. Smaller
	 * than before: the taller glyph already fills more of the line box, so the
	 * offset that centred the old one would now push this past the baseline.
	 */
	margin-top: 0.06em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-.5 1.9L18.1 8.5H13.5V3.9zM8 12.5h8V14H8v-1.5zm0 3.5h8v1.5H8V16zm0-7h3.5v1.5H8V9z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-.5 1.9L18.1 8.5H13.5V3.9zM8 12.5h8V14H8v-1.5zm0 3.5h8v1.5H8V16zm0-7h3.5v1.5H8V9z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 1.105em;
}

@media (prefers-reduced-motion: reduce) {
	.mrn-content-grid__item--full-link {
		transition: none;
	}
}

/**
 * About GO Gloves
 *
 * Layout, spacing and width for this page are set in the admin, on the rows
 * themselves — the Spacing tab's padding and margin presets, Section Width, and
 * Column Ratio. Nothing that the builder can express is duplicated here.
 *
 * What remains is the two categories the builder has no field for: typography,
 * and two structural gaps the stack does not expose. Each is scoped to
 * `.gloves-about`, so the same rows keep their own settings everywhere else.
 *
 * Set in the admin, deliberately NOT here:
 *   - Row padding / margin ............ Spacing tab, `0px` and `Extra Small` presets
 *   - "Meet The Founder" full width ... Section Width
 *   - Column split .................... Column Ratio (50-50)
 *   - Gap under the page title ........ hero row Padding Bottom = Extra Small
 */

/*
 * Shell gutter on rows nested inside a column.
 *
 * The row's own padding is already `0px` from the Spacing tab, but the
 * container adds the page's edge inset on top of it:
 *
 *     padding-inline: calc(var(--mrn-shell-gutter) + var(--mrn-row-padding-*))
 *
 * so zeroing the row padding still leaves the 32px shell gutter, and the copy
 * sat 32px right of the heading above it. The builder has no per-row field for
 * the gutter — `compensate_shell` exists only as a global Site Styles value —
 * so this is the one spacing rule that cannot move to the admin.
 */
.gloves-about .mrn-two-column-split__column .mrn-layout-container {
	padding-inline: 0;
}

/*
 * Gap between the row heading and the columns beneath it.
 *
 * The Two Column Split puts its heading in the grid's first row and the columns
 * in the second, separated by the grid's own 43.2px row gap. There is no gap
 * field on the row — the builder exposes background, column ratio, width and
 * spacing, but not this — so it is set here.
 */
.gloves-about .mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
	row-gap: 16px;
}

/*
 * The first block in a column starts flush with the heading above it.
 *
 * The grid gap above already separates the heading from the columns, and the
 * first paragraph then added its own top margin on top of that — the last of the
 * stacked gaps under "Glove Gurus". Zeroing it closes that space without
 * touching the rhythm between paragraphs.
 */
.gloves-about .mrn-two-column-split__column .mrn-ui__text> :first-child {
	margin-top: 0;
}

/*
 * No reading-measure cap on this page.
 *
 * A cap was tried here and removed: "Meet The Founder" is set to the Wide
 * container in the admin precisely so the copy fills that measure, and capping
 * the text column inside it left the section ending halfway across with dead
 * space to its right. The row's Section Width is the single place this is
 * decided, which is where it belongs.
 */

/*
 * Body copy.
 *
 * Body Text rows render prose at 14px/22px site-wide, which suits the homepage's
 * short blurbs but is below the 16px the site sets on `body` and too small to
 * read at length. Returned to the site's own baseline, with the looser leading
 * long-form copy wants.
 */
.gloves-about .mrn-content-builder__row--body-text p {
	font-size: 16px;
	line-height: 1.7;
}

/*
 * Eyebrow label.
 *
 * The text comes from each row's own `label` field, so it stays editable beside
 * the heading it belongs to. Only its appearance is here: uppercased and tracked
 * out so it reads as a category marker rather than a sentence, and on brand blue
 * so the start of a section is findable at a glance.
 */
.gloves-about .mrn-content-builder__row .mrn-ui__label {
	color: var(--wp--preset--color--brand-blue, #3333cc);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

/* Holds the heading to its eyebrow, so the pair reads as one unit. */
.gloves-about .mrn-content-builder__row--two-column-split .mrn-ui__heading,
.gloves-about .mrn-content-builder__row--two-column-split h2,
.gloves-about .mrn-content-builder__row--body-text .mrn-ui__heading,
.gloves-about .mrn-content-builder__row--body-text h2 {
	margin-bottom: 20px;
}

/*
 * Section separation.
 *
 * A hairline between top-level sections. The row's `bottom_accent` field draws
 * an accent under a row, but it is styled as a decorative bar rather than a
 * rule, so the divider is drawn here from the same Neutral/03 the footnote card
 * uses, keeping one vocabulary on the page.
 *
 * The general sibling combinator is doing real work here. `:not(:first-child)`
 * was tried and drew a line above the first section as well, because the builder
 * emits an anchor div ahead of every row — so the first row is never actually
 * `:first-child`. `row ~ row` instead means "a row with a row somewhere before
 * it", which is the actual condition: between sections, never above the first,
 * and unaffected by the anchor divs in between.
 */
.gloves-about .mrn-content-builder__row~.mrn-content-builder__row--body-text {
	border-top: 1px solid var(--gloves-color-neutral-03);
}

/*
 * Trademark block as a footnote card.
 *
 * Registration numbers are reference material, not argument. On the site's own
 * grey preset with the button radius they read as a block to consult rather than
 * prose to read. This is inline content inside a Body Text field rather than a
 * row, so the row-level Background Color field cannot reach it.
 */
.gloves-about .mrn-content-builder__row--body-text p.gloves-about__trademarks {
	background: var(--wp--preset--color--grey, #f3f5f7);
	border-radius: var(--gloves-radius-button);
	color: var(--gloves-color-neutral-04);
	font-size: 14px;
	line-height: 1.75;
	margin-top: 32px;
	padding: 24px 28px;
}

/*
 * Storefront photo: corner and aspect ratio.
 *
 * The radius is the site's button token, the only radius the design system
 * publishes at this scale.
 *
 * The height is a bug workaround, not a spacing choice. The parent sets
 * `height: 100%` on an image in a contained image-content section and the
 * media-stack grid hands the figure a height, so the image fills whatever the
 * grid resolves to — measured at a 390px viewport the grid produced
 * `grid-template-rows: 1500px` and the 1024x477 photo rendered 358x1500, a
 * nine-fold stretch. Desktop happened to resolve correctly, which is why it
 * only showed on small screens. The same behaviour exists on the homepage's
 * Glove Guru row, where `object-fit: cover` crops it out of sight.
 *
 * Releasing the height chain and pinning the ratio makes the geometry come from
 * the photo. No builder field governs this.
 */
.gloves-about .mrn-two-column-split__column--right img {
	border-radius: var(--gloves-radius-button);
	display: block;
}

.gloves-about .mrn-two-column-split__column--right .mrn-image-content-row__media,
.gloves-about .mrn-two-column-split__column--right .mrn-image-content-row__figure {
	align-self: start;
	height: auto;
	min-height: 0;
}

.gloves-about .mrn-two-column-split__column--right .mrn-image-content-row__figure img {
	/* The storefront photo's own ratio, 1024x477. */
	aspect-ratio: 1024 / 477;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/**
 * Contact
 *
 * Same division of labour as the About page: spacing, width and the column
 * split are row settings in the admin; only typography, colour and the two gaps
 * the builder has no field for are here. Scoped to `.gloves-contact`.
 *
 * The design reuses the About page's vocabulary — brand-blue eyebrow, grey
 * surface with the button radius, Neutral/03 hairline — rather than inventing a
 * second language, so the two pages read as one site.
 *
 * Set in the admin, deliberately NOT here:
 *   - Row padding / margin ..... Spacing tab presets (`0px`, `Extra Small`)
 *   - Section widths ........... Section Width = Wide on all three rows
 *   - Details / form split ..... Column Ratio 50-50
 *   - Hero wording ............. hero Heading + Custom Title mode
 */

/*
 * Shell gutter and heading gap: same two gaps the builder cannot express.
 *
 * The margin reset matters for the panel pair: without it one nested row kept a
 * margin the other did not, and the two panels started 8px apart even with their
 * bottoms flush. The panels are the sections themselves, so any margin above one
 * of them shows up as a misalignment.
 */
.gloves-contact .mrn-two-column-split__column .mrn-content-builder__row,
.gloves-contact .mrn-two-column-split__column .mrn-layout-container,
.gloves-contact .mrn-two-column-split__column .mrn-layout-section {
	margin-block: 0;
}

.gloves-contact .mrn-two-column-split__column .mrn-layout-container {
	padding-inline: 0;
}

/*
 * The invisible anchor above each nested row takes no space.
 *
 * The builder emits an `aria-hidden` anchor div ahead of every row as a scroll
 * target. Measured inside these columns, the one in the left column came out 8px
 * tall while the right column's measured 0 — and since the column is a grid, that
 * 8px pushed the left panel down by exactly that much, which is why the two
 * panels sat 8px apart at the top while their bottoms were flush.
 *
 * The element has no visible content, so collapsing it costs nothing and it stays
 * a working scroll target.
 */
.gloves-contact .mrn-two-column-split__column>.mrn-content-builder__anchor {
	height: 0;
	margin: 0;
	overflow: hidden;
}

.gloves-contact .mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
	row-gap: 16px;
}

.gloves-contact .mrn-two-column-split__column .mrn-ui__text> :first-child {
	margin-top: 0;
}

/* Prose at the site's own 16px baseline rather than the row's 14px. */
.gloves-contact .mrn-content-builder__row--body-text p,
.gloves-contact .mrn-wpforms-row__intro p {
	font-size: 16px;
	line-height: 1.7;
}

/*
 * No reading-measure cap here either, for the same reason as the About page:
 * the row's Section Width decides the measure in the admin, and a cap on the
 * text column inside it only leaves dead space to the right of the copy.
 */

/* Eyebrow, matching About. */
.gloves-contact .mrn-content-builder__row .mrn-ui__label {
	color: var(--wp--preset--color--brand-blue, #3333cc);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.gloves-contact .mrn-content-builder__row .mrn-ui__heading,
.gloves-contact .mrn-content-builder__row h2 {
	margin-bottom: 20px;
}

/*
 * Contact details as label/value pairs.
 *
 * The live page sets the address and phone in monospace boxes, which reads as
 * pasted terminal output rather than a designed address block. These are the
 * same values as label/value pairs: the label small, tracked and muted so it
 * classifies without competing, the value at reading size.
 *
 * `.gloves-contact__value + .gloves-contact__label` carries the separation, so
 * spacing comes from the relationship between pairs rather than a margin on
 * every element that would also apply to the first one.
 */
.gloves-contact .gloves-contact__label {
	color: var(--gloves-color-neutral-04);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.gloves-contact .gloves-contact__value {
	color: var(--gloves-color-neutral-07);
	font-size: 16px;
	line-height: 1.65;
	margin-bottom: 0;
}

.gloves-contact .gloves-contact__value+.gloves-contact__label {
	margin-top: 28px;
}

/*
 * Each column is one panel, label and heading included.
 *
 * The panels first wrapped only the copy and the form, leaving each column's
 * label and heading outside and above them. Because the two columns' headings
 * are different heights — the form's carries an intro sentence the details do
 * not — the panels then started at different heights, measured 94px apart, and
 * no amount of stretching fixed it: they were being pushed down by content above
 * them, not sized wrongly.
 *
 * Wrapping the whole block instead means both panels begin at the top of their
 * column, so their top edges align by construction rather than by correction.
 * It also reads better: each column becomes one object rather than a floating
 * heading with a box under it.
 *
 * Applied to the nested row's section, which is the one element both a Body Text
 * and a WPForms row have in common.
 */
.gloves-contact .mrn-two-column-split__column .mrn-layout-section {
	border-radius: var(--gloves-radius-button);
	padding: 30px 32px;
}

/* Details: the site's grey preset with brand blue on the leading edge. */
.gloves-contact .mrn-two-column-split__column--left .mrn-layout-section {
	background: var(--wp--preset--color--grey, #f3f5f7);
	border-left: 3px solid var(--wp--preset--color--brand-blue, #3333cc);
	border-radius: 0 var(--gloves-radius-button) var(--gloves-radius-button) 0;
}

/* Form: white with a hairline and a soft lift, so it reads as the active panel. */
.gloves-contact .mrn-two-column-split__column--right .mrn-layout-section {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--gloves-color-neutral-03);
	box-shadow: 0 2px 10px -6px rgba(20, 23, 24, 0.18);
}

/* The phone number is the one actionable value in the block. */
.gloves-contact .gloves-contact__value a {
	color: var(--wp--preset--color--brand-blue, #3333cc);
	font-weight: 600;
	text-decoration: none;
}

.gloves-contact .gloves-contact__value a:hover,
.gloves-contact .gloves-contact__value a:focus-visible {
	text-decoration: underline;
}

/*
 * The panel is now the column's section, above, so the form's own wrappers carry
 * no surface of their own — a second card inside the first would draw twice.
 */
.gloves-contact .mrn-two-column-split__column--right .mrn-wpforms-row__form,
.gloves-contact .mrn-two-column-split__column--right .wpforms-container {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Nested containers must not repeat the card, or it draws twice. */
.gloves-contact .mrn-two-column-split__column--right .mrn-wpforms-row__form .wpforms-container {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/*
 * Fields.
 *
 * WPForms' own stylesheet is loaded, and it targets
 * `div.wpforms-container-full input[type="text"]` — three class-level selectors
 * and two elements — so a plainer selector here silently loses. Each rule below
 * is written to clear that specificity rather than reaching for `!important`.
 */
.gloves-contact div.wpforms-container-full input[type="text"],
.gloves-contact div.wpforms-container-full input[type="email"],
.gloves-contact div.wpforms-container-full textarea {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--gloves-color-neutral-03);
	border-radius: var(--gloves-radius-field);
	box-shadow: none;
	color: var(--gloves-color-neutral-07);
	font-size: 16px;
	line-height: 1.5;
	padding: 13px 15px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.gloves-contact div.wpforms-container-full input[type="text"]:hover,
.gloves-contact div.wpforms-container-full input[type="email"]:hover,
.gloves-contact div.wpforms-container-full textarea:hover {
	border-color: var(--gloves-color-neutral-04);
}

/*
 * Focus ring in brand blue, on top of the border colour change, so the active
 * field is obvious to a keyboard user rather than only slightly darker.
 */
.gloves-contact div.wpforms-container-full input[type="text"]:focus,
.gloves-contact div.wpforms-container-full input[type="email"]:focus,
.gloves-contact div.wpforms-container-full textarea:focus {
	border-color: var(--site-color-brand-blue, #3333cc);
	outline: 2px solid var(--site-color-brand-blue, #3333cc);
	outline-offset: 1px;
}

/*
 * Field widths.
 *
 * WPForms sizes a "medium" field with
 * `.wp-core-ui div.wpforms-container input.wpforms-field-medium { max-width: 60% }`,
 * which is why the name and email inputs sat at roughly two-thirds of their
 * column while the boxes around them were full width. The size is a form setting
 * rather than a design one here — the field's width should be its column — so the
 * cap is lifted at the same specificity and the inputs fill the space they are
 * given.
 */
.gloves-contact div.wpforms-container-full input.wpforms-field-medium,
.gloves-contact div.wpforms-container-full textarea.wpforms-field-medium,
.gloves-contact div.wpforms-container-full input.wpforms-field-large,
.gloves-contact div.wpforms-container-full textarea.wpforms-field-large,
.gloves-contact div.wpforms-container-full .wpforms-field-row.wpforms-field-medium {
	max-width: 100%;
	min-width: 100%;
	width: 100%;
}

.gloves-contact div.wpforms-container-full .wpforms-field {
	padding: 0 0 20px;
}

.gloves-contact div.wpforms-container-full .wpforms-field-label {
	color: var(--gloves-color-neutral-07);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}

/* The required marker is a warning, so it takes the sale red, not brand blue. */
.gloves-contact div.wpforms-container-full .wpforms-required-label {
	color: var(--gloves-color-price-sale);
}

.gloves-contact div.wpforms-container-full textarea {
	min-height: 170px;
	resize: vertical;
}

/*
 * Submit button.
 *
 * WPForms styles its button through
 * `div.wpforms-container-full button[type="submit"]:not(:hover):not(:active)`,
 * which is why the earlier rule here had no effect — it was outranked, not
 * wrong. Matching that shape puts the button on brand blue at the site's button
 * radius, the same as the hero and Shop All buttons, and the hover rule is
 * written separately because the base rule excludes `:hover`.
 */
.gloves-contact div.wpforms-container-full button[type="submit"],
.gloves-contact div.wpforms-container-full button[type="submit"]:not(:hover):not(:active) {
	background: var(--wp--preset--color--brand-blue, #3333cc);
	border: 0;
	border-radius: var(--gloves-radius-button);
	color: var(--wp--preset--color--white, #fff);
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 15px 40px;
	transition: background-color 0.2s ease;
	width: auto;
}

.gloves-contact div.wpforms-container-full button[type="submit"]:hover,
.gloves-contact div.wpforms-container-full button[type="submit"]:active,
.gloves-contact div.wpforms-container-full button[type="submit"]:focus-visible {
	background: var(--wp--preset--color--dark-blue, #0a0a91);
	color: var(--wp--preset--color--white, #fff);
}

/*
 * Hover is a colour change only.
 *
 * A 1px lift was tried and removed: on a button this size the shift is the thing
 * you notice rather than the colour, and a control that moves under the cursor
 * reads as unstable — the pointer can end up outside it mid-click.
 */

/*
 * The button's focus ring is the site's two-step shadow, not a plain outline: a
 * brand-blue outline on a brand-blue button is invisible. The white step gives it
 * a gap to read against, which is the pattern already used elsewhere on the site.
 */
.gloves-contact div.wpforms-container-full button[type="submit"]:focus-visible {
	box-shadow: 0 0 0 2px var(--site-color-white, #fff), 0 0 0 4px var(--site-color-brand-blue, #3333cc);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {

	.gloves-contact div.wpforms-container-full input[type="text"],
	.gloves-contact div.wpforms-container-full input[type="email"],
	.gloves-contact div.wpforms-container-full textarea,
	.gloves-contact div.wpforms-container-full button[type="submit"] {
		transition: none;
	}
}

/*
 * Location map, edge to edge.
 *
 * The row is set to Full Width with zero bottom padding in the admin, so the
 * embed meets the footer directly. The frame and radius the earlier rule added
 * are dropped: a bleed map has no edges to soften, and a rounded corner against
 * the window edge reads as a mistake. The container's shell gutter is removed
 * here because no row field governs it.
 */
.gloves-contact .mrn-content-builder__row--external-widget .mrn-layout-container {
	padding-inline: 0;
}

.gloves-contact .mrn-content-builder__row--external-widget iframe {
	border: 0;
	display: block;
	margin-bottom: 0;
	width: 100%;
}

@media (max-width: 782px) {
	.gloves-contact .mrn-two-column-split__column--right {
		margin-top: var(--gloves-mobile-section-space);
	}

	.gloves-contact .mrn-two-column-split__column--right .wpforms-container {
		padding: 24px;
	}

	.gloves-contact div.wpforms-container-full button[type="submit"] {
		width: 100%;
	}
}

/**
 * Customer Service
 *
 * A long reference page: people arrive looking for one answer, not to read it
 * through. So the work here is making the structure scannable — sections that
 * announce themselves, subheadings that stand off the copy, and the carrier
 * transit times as a real table instead of line-broken text.
 *
 * Same division of labour as About and Contact: Section Width and the spacing
 * presets are row settings in the admin. Only typography, colour and the table
 * are here, scoped to `.gloves-service`.
 *
 * Set in the admin, deliberately NOT here:
 *   - Row padding / margin ..... Spacing tab presets
 *   - Section widths ........... Section Width = Wide on all three rows
 *   - Section anchors .......... row Anchor (#shipping, #returns, #privacy)
 *   - Hero spacing ............. hero Padding Bottom = Extra Small
 */

/* Prose at the site's 16px baseline rather than the row's 14px. */
.gloves-service .mrn-content-builder__row--body-text p {
	font-size: 16px;
	line-height: 1.7;
}

/* Eyebrow, matching About and Contact. */
.gloves-service .mrn-content-builder__row .mrn-ui__label {
	color: var(--wp--preset--color--brand-blue, #3333cc);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.gloves-service .mrn-content-builder__row .mrn-ui__heading,
.gloves-service .mrn-content-builder__row>* h2 {
	margin-bottom: 20px;
}

/*
 * Subheadings.
 *
 * Eight of them run down the shipping section, so they carry most of the
 * scanning load. Given clear air above and a tighter gap below, each one binds
 * to the paragraph it introduces rather than floating between two — which is
 * how the live page reads, where the spacing above and below is equal.
 */
.gloves-service .mrn-content-builder__row--body-text h3 {
	font-size: 22px;
	line-height: 1.3;
	margin-bottom: 8px;
	margin-top: 40px;
}

.gloves-service .mrn-content-builder__row--body-text h3:first-child {
	margin-top: 0;
}

/*
 * Section divider.
 *
 * Same hairline the About page uses between its sections, on the same
 * Neutral/03, so a reader crossing from Shipping into Returns gets the same
 * signal they get elsewhere on the site.
 */
.gloves-service .mrn-content-builder__row~.mrn-content-builder__row--body-text {
	border-top: 1px solid var(--gloves-color-neutral-03);
}

/*
 * Carrier transit table.
 *
 * The live page sets these as line-broken paragraphs, which hides the fact that
 * they are three columns of like values compared across — the reader is scanning
 * for one row. A real table gets the row and column headers a screen reader
 * needs, and `overflow-x` on the wrapper keeps a narrow phone scrolling the
 * table rather than the page.
 *
 * `tabular-nums` so the day counts line up in their column.
 */
.gloves-service .gloves-service__table {
	border: 1px solid var(--gloves-color-neutral-03);
	border-collapse: separate;
	border-radius: var(--gloves-radius-button);
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
	margin: 24px 0 0;
	overflow: hidden;
	width: 100%;
}

.gloves-service .gloves-service__table th,
.gloves-service .gloves-service__table td {
	font-size: 15px;
	padding: 14px 20px;
	text-align: left;
	vertical-align: middle;
}

/*
 * Header band.
 *
 * `border-collapse: separate` above so the table's radius actually clips its
 * corners — with `collapse` the cell borders paint over them. That means row
 * lines have to be drawn per cell rather than by the table, which the rules
 * below do on `td`/`th` bottoms.
 */
/*
 * Header type matches the cart table.
 *
 * The cart's `table.shop_table th` is the site's existing table header — Inter
 * 12/700 on Neutral/07 at 0.08em, uppercase — so this table borrows it verbatim
 * rather than carrying a near-miss of its own. Two tables on one site should not
 * disagree about what a column header looks like.
 */
.gloves-service .gloves-service__table thead th {
	background: var(--wp--preset--color--grey, #f3f5f7);
	border-bottom: 2px solid var(--site-color-brand-blue, #3333cc);
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gloves-service .gloves-service__table tbody th,
.gloves-service .gloves-service__table tbody td {
	border-bottom: 1px solid var(--gloves-color-neutral-03);
}

/* No line under the final row: the table's own border closes it. */
.gloves-service .gloves-service__table tbody tr:last-child th,
.gloves-service .gloves-service__table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * The carrier name spans its services, so it reads as the group's label — and
 * because it spans, the cell needs a rule on its trailing edge to separate one
 * carrier's block from the next rather than a line per service row.
 */
.gloves-service .gloves-service__table tbody th {
	background: var(--wp--preset--color--grey, #f3f5f7);
	border-right: 1px solid var(--gloves-color-neutral-03);
	color: var(--gloves-color-neutral-07);
	font-weight: 600;
	white-space: nowrap;
}

/* The transit column is the answer people came for, so it carries the emphasis. */
.gloves-service .gloves-service__table tbody td:last-child {
	color: var(--gloves-color-neutral-07);
	font-weight: 600;
	white-space: nowrap;
}

.gloves-service .gloves-service__table tbody tr:hover td {
	background: var(--wp--preset--color--off-white, #fdfeff);
}

/* Footnote to the table above it, so it is set down rather than as body copy. */
.gloves-service .gloves-service__note {
	color: var(--gloves-color-neutral-04);
	font-size: 14px;
	margin-top: 16px;
}

/*
 * The restocking charge.
 *
 * The one line on this page that costs the reader money if they miss it, and on
 * the live page it is a bold sentence in a wall of prose. Given the grey surface
 * and a brand-blue leading edge — the same treatment the Contact details use — so
 * it reads as a condition rather than another paragraph.
 */
.gloves-service .gloves-service__callout {
	background: var(--wp--preset--color--grey, #f3f5f7);
	border-left: 3px solid var(--wp--preset--color--brand-blue, #3333cc);
	border-radius: 0 var(--gloves-radius-button) var(--gloves-radius-button) 0;
	margin: 28px 0;
	padding: 18px 24px;
}

.gloves-service .gloves-service__callout strong {
	color: var(--gloves-color-neutral-07);
}

/* Return address, as the label/value pair the Contact page uses. */
.gloves-service .gloves-service__label {
	color: var(--gloves-color-neutral-04);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.gloves-service .gloves-service__value {
	background: var(--wp--preset--color--grey, #f3f5f7);
	border-radius: var(--gloves-radius-button);
	color: var(--gloves-color-neutral-07);
	line-height: 1.65;
	padding: 20px 24px;
}

@media (max-width: 782px) {

	/*
	 * Let the text column shrink, so the table below can actually scroll.
	 *
	 * `.mrn-ui__head` and `.mrn-ui__text` are grid items, and a grid item's
	 * default `min-width: auto` refuses to go below its min-content width. The
	 * table's `white-space: nowrap` makes that min-content 546px, so the item —
	 * and with it the whole grid track — was forced to 546px inside a 343px
	 * column. Every paragraph and heading in the column inherited that width and
	 * ran off the screen, while `#page` clips horizontally, so there was nothing
	 * to scroll to: the page just looked cut off and frozen.
	 *
	 * With the item free to be 343px, the table's own `width: 100%` resolves to
	 * the column instead of the content and `overflow-x: auto` below has an
	 * overflow to scroll.
	 */
	.gloves-service .mrn-ui__head,
	.gloves-service .mrn-ui__text {
		min-width: 0;
	}

	/*
	 * Three columns of transit times do not fit a phone, so the table scrolls
	 * inside its own box rather than forcing the page sideways.
	 *
	 * `display: block` is what makes a table scrollable, but it also drops the
	 * table's own box — taking the border and the clipped corners with it. So the
	 * frame moves to the cells' shared edges instead: the header keeps its band,
	 * every row keeps its rule, and the radius is dropped rather than left
	 * half-drawn.
	 */
	.gloves-service .gloves-service__table {
		border: 0;
		border-radius: 0;
		border-top: 1px solid var(--gloves-color-neutral-03);
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.gloves-service .gloves-service__table th,
	.gloves-service .gloves-service__table td {
		padding: 12px 16px;
	}

	.gloves-service .gloves-service__table tbody tr:last-child th,
	.gloves-service .gloves-service__table tbody tr:last-child td {
		border-bottom: 1px solid var(--gloves-color-neutral-03);
	}

	.gloves-service .mrn-content-builder__row--body-text h3 {
		font-size: 20px;
		margin-top: 32px;
	}
}

/**
 * Shared rhythm for the CMS pages: label, heading, copy
 *
 * The stack builds each row's text block as nested grids —
 * `.mrn-ui__body` holds `.mrn-ui__head` (label + heading) and `.mrn-ui__text` —
 * so the vertical spacing comes from grid `row-gap`, not from margins. Setting
 * margins on the label and heading as well left every section with a different
 * rhythm depending on whether it had a heading, a label, or both.
 *
 * The FAQ page was added to these selectors after the fact, which is worth
 * recording: while it was missing, its label kept the default top margin the
 * others had zeroed, and the page's first eyebrow sat 12px lower than every
 * other page's. Any new CMS page needs adding here too, or it will drift the
 * same way.
 *
 * So the gaps are declared once here, on the grids that own them, and the
 * element margins are zeroed so nothing stacks on top:
 *
 *   label  -> heading   8px   (.mrn-ui__head row-gap)
 *   heading -> copy    20px   (.mrn-ui__body row-gap)
 *
 * Applied to all three pages so a reader moving between them gets one rhythm.
 */
.gloves-about .mrn-content-builder__row .mrn-ui__head,
.gloves-faq .mrn-content-builder__row .mrn-ui__head,
.gloves-contact .mrn-content-builder__row .mrn-ui__head,
.gloves-service .mrn-content-builder__row .mrn-ui__head {
	row-gap: 8px;
}

.gloves-about .mrn-content-builder__row .mrn-ui__body,
.gloves-faq .mrn-content-builder__row .mrn-ui__body,
.gloves-contact .mrn-content-builder__row .mrn-ui__body,
.gloves-service .mrn-content-builder__row .mrn-ui__body {
	row-gap: 20px;
}

/* The grids above own the spacing now, so the elements carry none. */
.gloves-about .mrn-content-builder__row .mrn-ui__label,
.gloves-faq .mrn-content-builder__row .mrn-ui__label,
.gloves-contact .mrn-content-builder__row .mrn-ui__label,
.gloves-service .mrn-content-builder__row .mrn-ui__label,
.gloves-about .mrn-content-builder__row .mrn-ui__heading,
.gloves-faq .mrn-content-builder__row .mrn-ui__heading,
.gloves-contact .mrn-content-builder__row .mrn-ui__heading,
.gloves-service .mrn-content-builder__row .mrn-ui__heading {
	margin-bottom: 0;
	margin-top: 0;
}

/* First and last block in a text body sit flush to the gap above and below. */
.gloves-about .mrn-content-builder__row .mrn-ui__text> :first-child,
.gloves-faq .mrn-content-builder__row .mrn-ui__text> :first-child,
.gloves-contact .mrn-content-builder__row .mrn-ui__text> :first-child,
.gloves-service .mrn-content-builder__row .mrn-ui__text> :first-child,
.gloves-contact .mrn-wpforms-row__intro> :first-child {
	margin-top: 0;
}

.gloves-about .mrn-content-builder__row .mrn-ui__text> :last-child,
.gloves-faq .mrn-content-builder__row .mrn-ui__text> :last-child,
.gloves-contact .mrn-content-builder__row .mrn-ui__text> :last-child,
.gloves-service .mrn-content-builder__row .mrn-ui__text> :last-child {
	margin-bottom: 0;
}

/**
 * Contact: equal-height columns, and a bleed map
 */

/*
 * The details panel and the form card match height.
 *
 * The two columns are already equal — they are grid items, which stretch by
 * default — but the panel inside each one was only as tall as its own content,
 * so the shorter of the two stopped early and the pair read as misaligned. The
 * wrappers between the column and the panel are handed the full height so the
 * panel can fill it.
 *
 * Desktop only: once the columns stack there is no second column to match, and
 * a stretched panel would just add empty space at the bottom of each.
 */
@media (min-width: 783px) {
	.gloves-contact .mrn-content-builder__row--two-column-split .mrn-layout-grid--two-column-split {
		align-items: stretch;
	}

	/*
	 * The panel is the section itself now, so only the two boxes between the
	 * column and the panel need the full height for the pair to match. The
	 * earlier version chained `height: 100%` down to the copy and the form and
	 * reshaped the inner grid to make a smaller panel stretch — none of which is
	 * needed once the panel is the outer box.
	 */
	/*
	 * The column is a grid of [anchor, row] with content-sized tracks, so
	 * `height: 100%` on the row resolved against a track that was itself sized by
	 * the row — circular, and it settled on the content height. The shorter
	 * column then left 8px unfilled at the bottom while the taller one did not,
	 * which is where the last of the misalignment came from.
	 *
	 * Naming the tracks breaks the circularity: the anchor keeps its (zero)
	 * height and the row takes whatever is left, so both panels resolve to the
	 * same height and `height: 100%` below has something real to measure.
	 */
	.gloves-contact .mrn-two-column-split__column {
		grid-template-rows: auto 1fr;
	}

	.gloves-contact .mrn-two-column-split__column>.mrn-content-builder__row,
	.gloves-contact .mrn-two-column-split__column .mrn-layout-section {
		height: 100%;
	}
}

/*
 * Map, genuinely edge to edge.
 *
 * Section Width `full-width` puts `--full` on the section but the External
 * Widget template still renders its container as `--wide`, which carries
 * `max-width: 1304px`. Zeroing the gutter alone therefore left the map capped at
 * the content width — the cap, not the padding, was holding it in. Both are
 * released here; no row field reaches the container.
 */
.gloves-contact .mrn-content-builder__row--external-widget .mrn-layout-container {
	max-width: none;
	padding-inline: 0;
	width: 100%;
}

.gloves-contact .mrn-content-builder__row--external-widget .mrn-layout-grid,
.gloves-contact .mrn-content-builder__row--external-widget .mrn-layout-content {
	max-width: none;
}

/*
 * No gap between the map and the footer.
 *
 * The row's own Padding Bottom is already `0px` from the admin. What remains is
 * the shell's 64px under the article, which every other page wants — so it is
 * removed for this page only, where the map is meant to run straight into the
 * footer.
 *
 * The `:not(.site-main--front-page)` is not decoration: the rule it has to beat
 * is `.page .site-main:not(.site-main--front-page)` further up this file, and a
 * two-class selector loses to it outright. Matching its shape wins on order
 * instead of reaching for `!important`.
 */
.gloves-contact .site-main:not(.site-main--front-page) {
	padding-bottom: 0;
}

/*
 * Form card top edge aligns with the details panel.
 *
 * WPForms gives its container a top and bottom margin of its own, which pushed
 * the card down relative to the grey panel opposite and left the two columns
 * starting at different heights. The card's spacing above it is already set by
 * the row's own rhythm, so the container's margin is removed rather than
 * competing with it — the panel is what should meet the top of the column.
 */
.gloves-contact .mrn-two-column-split__column--right .mrn-wpforms-row__form,
.gloves-contact .mrn-two-column-split__column--right div.wpforms-container,
.gloves-contact .mrn-two-column-split__column--right div.wpforms-container-full {
	margin-block: 0;
	margin-top: 0;
}

/* Last field sits flush to the card's own padding, not on its own margin. */
.gloves-contact div.wpforms-container-full .wpforms-submit-container {
	padding-bottom: 0;
}

.gloves-contact div.wpforms-container-full .wpforms-field:last-of-type {
	padding-bottom: 0;
}

/*
 * Submit label centred in the button.
 *
 * WPForms appends a spinner as an `::after` on the button, which sits in the
 * text flow and drags the label off centre. Laying the button out as a centred
 * flex line puts the label back on the vertical middle and keeps it there when
 * the spinner appears on submit, rather than shifting at the moment of feedback.
 */
.gloves-contact div.wpforms-container-full button[type="submit"],
.gloves-contact div.wpforms-container-full button[type="submit"]:not(:hover):not(:active) {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	min-height: 52px;
	padding-block: 0;
	text-align: center;
}

/*
 * Name and email share a row.
 *
 * The pairing itself is set on the fields in WPForms (`wpforms-one-half` /
 * `wpforms-first`), so it stays visible to whoever edits the form. These two
 * rules only supply the gutter between the pair and drop it back to one column
 * on a phone, where two half-width fields would be too narrow to type in.
 */
.gloves-contact div.wpforms-container-full .wpforms-one-half {
	width: calc(50% - 10px);
}

.gloves-contact div.wpforms-container-full .wpforms-one-half.wpforms-first {
	margin-left: 0;
	margin-right: 20px;
}

@media (max-width: 620px) {

	.gloves-contact div.wpforms-container-full .wpforms-one-half,
	.gloves-contact div.wpforms-container-full .wpforms-one-half.wpforms-first {
		margin-right: 0;
		width: 100%;
	}
}

/*
 * Name and email share a row.
 *
 * The form renders in WPForms' "modern" mode, where the legacy
 * `wpforms-one-half` float classes are no longer laid out by its stylesheet —
 * the fields stayed stacked 90px apart despite carrying the classes. The field
 * container is made a wrap-flex row instead, which honours the same classes
 * without depending on floats, so the pairing set on the fields in the form
 * builder is still what decides it.
 */
.gloves-contact div.wpforms-container-full .wpforms-field-container {
	column-gap: 20px;
	display: flex;
	flex-wrap: wrap;
	row-gap: 0;
}

.gloves-contact div.wpforms-container-full .wpforms-field-container>.wpforms-field {
	flex: 1 1 100%;
}

.gloves-contact div.wpforms-container-full .wpforms-field-container>.wpforms-field.wpforms-one-half {
	flex: 0 0 calc(50% - 10px);
	margin-inline: 0;
	max-width: calc(50% - 10px);
	width: auto;
}

/* Two half-width fields are too narrow to type in on a phone. */
@media (max-width: 620px) {
	.gloves-contact div.wpforms-container-full .wpforms-field-container>.wpforms-field.wpforms-one-half {
		flex: 1 1 100%;
		max-width: none;
	}
}

/*
 * The form description sits inside the card, above the fields.
 *
 * It is WPForms' own Description field, which is why it renders here rather than
 * above the card — that placement is what lets this panel and the details panel
 * opposite start at the same height.
 */
.gloves-contact div.wpforms-container-full .wpforms-description {
	color: var(--gloves-color-neutral-04);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 24px;
}

/*
 * About: a taller storefront photo.
 *
 * The source is 1024x477, an unusually wide crop, so at the column's width it
 * rendered only 279px tall against 529px of copy beside it and read as a strip
 * rather than a photograph. Taking the frame to 16:10 gains about a third more
 * height; `object-fit: cover` centres the building and trims the empty tarmac at
 * the sides rather than distorting it.
 */
.gloves-about .mrn-two-column-split__column--right .mrn-image-content-row__figure img {
	aspect-ratio: 16 / 10;
}

/**
 * FAQ
 *
 * The accordion is the stack's own "Page Specific FAQ/Accordion" row, built on
 * native `<details>`/`<summary>` — so it opens and closes without JavaScript and
 * is keyboard operable before any styling is applied. Questions and answers are
 * a repeater on the row, editable in the admin; nothing here touches content.
 *
 * Same division as the other CMS pages: Section Width and the spacing presets
 * are row settings; this is typography, colour and the accordion's surface.
 *
 * Set in the admin, deliberately NOT here:
 *   - Questions and answers ...... the row's FAQ Items repeater
 *   - Section widths ............. Section Width = Wide on both rows
 *   - Row padding ................ Spacing tab presets
 *   - Hero wording ............... hero Heading + Custom Title mode
 */

/*
 * Border colour, matching the cart's tables and fields.
 *
 * `--gloves-cart-border` is the value asked for, but it is declared on
 * `.woocommerce-cart, .woocommerce-checkout, .woocommerce-account` — so calling it
 * by name out here resolves to nothing and the border disappears. It is mirrored
 * under this page's own name instead, which is the same approach the hero rules
 * take with `--gloves-blog-ink`.
 *
 * If this grey is ever promoted to a site-wide token, both should point at it.
 */
.gloves-faq {
	--gloves-faq-border: var(--gloves-border-strong);
}

/* Prose at the site's 16px baseline rather than the row's 14px. */
.gloves-faq .mrn-content-builder__row--body-text p,
.gloves-faq .mrn-faq__answer p {
	font-size: 16px;
	line-height: 1.7;
}

/*
 * Eyebrow, matching About, Contact and Customer Service.
 *
 * No `margin-bottom` here on purpose. This block sits after the shared rhythm
 * rules, so a margin declared here would win on order and stack on top of the
 * grid gap that already separates the label — measured, that put the FAQ label
 * 28px above its copy where every other page sits at 20px. The grid owns the
 * spacing; this rule owns only the appearance.
 */
.gloves-faq .mrn-content-builder__row .mrn-ui__label {
	color: var(--site-color-brand-blue, #3333cc);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/*
 * The opening line is a lead, set larger than the copy under it.
 *
 * It is a single sentence summarising the page, which is what a lead does — but
 * it is not a heading, so it is sized rather than promoted. Making it an h2 would
 * have put a heading under the h1 that says roughly the same thing.
 */
.gloves-faq .mrn-content-builder__row--body-text p.gloves-faq__lead {
	color: var(--gloves-color-neutral-07);
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 16px;
}

/*
 * Accordion items as a stack of cards.
 *
 * Each question is its own surface with the site's hairline and button radius,
 * so a closed list reads as a set of things to open rather than a wall of rules.
 * The gap between them is what makes the boundaries legible, so there is no need
 * for a divider as well.
 */
.gloves-faq .mrn-faq__items {
	display: grid;
	gap: 12px;
}

.gloves-faq .mrn-faq__item {
	background: var(--site-color-white, #fff);
	border: 1px solid var(--gloves-faq-border);
	border-radius: var(--gloves-radius-button);
	transition: border-color 0.2s ease;
	/*
	 * No `overflow` here: the parent already sets `overflow: hidden` on this
	 * element, which is what clips the answer while its height animates. Restating
	 * it added nothing and read as if this page owned the clipping.
	 */
}

/*
 * The open item.
 *
 * A brand-blue border plus an inset blue bar was tried here and taken out: two
 * markers for one state, and the bar sat inside the rounded corner where it read
 * as a rendering fault rather than an accent.
 *
 * The open state is already unmistakable from the answer being visible and the
 * chevron having turned, so all this adds is a slightly firmer edge — enough to
 * pick the open row out of the stack, without a second colour competing with the
 * question text that also turns blue.
 */
.gloves-faq .mrn-faq__item[open] {
	border-color: var(--gloves-color-neutral-04);
}

/*
 * The question row.
 *
 * `list-style: none` plus the `::-webkit-details-marker` reset removes the
 * browser's default triangle — Safari needs the second one — so the chevron
 * below is the only marker and it can sit where the design wants it.
 */
.gloves-faq .mrn-faq__question {
	align-items: center;
	color: var(--gloves-color-neutral-07);
	cursor: pointer;
	display: flex;
	/*
	 * A question is a heading, so it takes the site's heading face. `<summary>`
	 * does not inherit heading styling the way an `h3` would — it was rendering in
	 * the body sans while every other heading on the site is Libre Caslon, which is
	 * what made the accordion read as a different component from the page around
	 * it. The stack is written out rather than tokenised because that is how the
	 * rest of this stylesheet declares it.
	 */
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 20px;
	font-weight: 500;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.35;
	list-style: none;
	padding: 20px 24px;
	transition: color 0.15s ease;
}

.gloves-faq .mrn-faq__question::-webkit-details-marker {
	display: none;
}

.gloves-faq .mrn-faq__question:hover,
.gloves-faq .mrn-faq__item[open] .mrn-faq__question {
	color: var(--site-color-brand-blue, #3333cc);
}

/*
 * Chevron, drawn from a border rather than an icon font or an SVG file: it is two
 * lines, it inherits `currentColor` so it follows the question's hover and open
 * states for free, and it costs no extra request.
 */
.gloves-faq .mrn-faq__question::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	flex: 0 0 auto;
	height: 9px;
	margin-top: -4px;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	width: 9px;
}

.gloves-faq .mrn-faq__item[open] .mrn-faq__question::after {
	margin-top: 2px;
	transform: rotate(-135deg);
}

/* Keyboard focus has to be visible on the summary — it is the control here. */
.gloves-faq .mrn-faq__question:focus-visible {
	outline: 2px solid var(--site-color-brand-blue, #3333cc);
	outline-offset: -2px;
}

/*
 * The answer is indented to the question's text, not the card edge, so the two
/*
 * The answer reads as body copy.
 *
 * It was set on Neutral/04, the muted tone, which made the answers lighter than
 * every other paragraph on the site — the opposite of what an answer wants, since
 * it is the content the reader opened the row for. `inherit` takes whatever
 * colour the page's copy is using, so the two can never drift apart again.
 *
 * Padding is not set here: it is driven by `--mrn-faq-answer-padding` further
 * down, because a rule at this weight cannot reach an open answer.
 */
.gloves-faq .mrn-faq__answer {
	color: inherit;
}

.gloves-faq .mrn-faq__answer> :first-child {
	margin-top: 0;
}

.gloves-faq .mrn-faq__answer> :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {

	.gloves-faq .mrn-faq__question,
	.gloves-faq .mrn-faq__question::after {
		transition: none;
	}
}

@media (max-width: 782px) {
	.gloves-faq .gloves-faq__lead {
		font-size: 18px;
	}

	/* Tracks the 20px desktop size down a step, not back to body size. */
	.gloves-faq .mrn-faq__question {
		font-size: 18px;
		padding: 16px 18px;
	}

	.gloves-faq .mrn-faq__answer {
		padding: 0 18px 18px;
	}
}

/*
 * Wishlist heart, centred in its disc.
 *
 * The disc is 32px and the Figma heart is 19x15, so flex centring placed the
 * icon box at 6.5px from the left and 8.5px from the top — both half-pixels. The
 * box edges then round differently on different displays and zoom levels, which
 * is what makes the heart look a fraction off centre rather than truly centred.
 *
 * Letting the pseudo-element fill the disc and centring the artwork as a
 * background instead keeps every box edge on an integer: the element is exactly
 * 32x32, and the image is placed by the background painter, which centres
 * sub-pixel artwork cleanly. `line-height: 0` removes the inline box the glyph
 * would otherwise sit in.
 *
 * Covers both renderings a card can get — the shortcode's anchor/button and
 * YITH's injected over-image button — since the disc rules above already do.
 */
.product-image .yith-wcwl-add-to-wishlist a,
.product-image .yith-wcwl-add-to-wishlist-button,
.gloves-catalog .product-image .yith-wcwl-add-to-wishlist-button-over-image {
	line-height: 0;
	overflow: hidden;
	position: relative;
}

.product-image .yith-wcwl-add-to-wishlist a::before,
.product-image .yith-wcwl-add-to-wishlist-button::before,
.gloves-catalog .product-image .yith-wcwl-add-to-wishlist-button-over-image::before {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 19px 15px;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

/*
 * FAQ intro: the lead sits tight under its label.
 *
 * On the other pages the eyebrow is followed by an h2 and the pair is 8px apart.
 * This row has no heading — the lead sentence plays that part — so it takes the
 * same 8px rather than the 20px gap the shared rhythm gives a label followed by
 * body copy. Scoped to the Body Text row so the accordion row below keeps the
 * shared spacing.
 */
.gloves-faq .mrn-content-builder__row--body-text .mrn-ui__body {
	row-gap: 8px;
}

/*
 * Accordion answer: aligned to the question, even padding at the foot.
 *
 * Set through the parent's own custom property, which is the only thing that
 * actually reaches an open answer. The parent styles it as:
 *
 *     .mrn-faq__item[open] .mrn-faq__answer {
 *         padding: var(--mrn-faq-answer-padding, 0);
 *     }
 *
 * — three classes plus an attribute, which outranks a `.gloves-faq
 * .mrn-faq__answer` rule outright. So the padding applied while the row was
 * closed and collapsed to 0 the moment it opened: the answer sat flush to the
 * card edge, 24px left of the question above it, with nothing at the foot.
 *
 * Feeding the variable means the parent's own rule computes the right value,
 * for both states, without a specificity contest.
 *
 * No top padding: the question's 20px bottom padding already separates them.
 */
.gloves-faq {
	--mrn-faq-answer-padding: 0 24px 24px;
}

/*
 * Smooth open and close.
 *
 * The parent animates the answer with `transition: height 0.32s` from `height: 0`
 * to `height: auto` — and `auto` is not an interpolable value, so the height does
 * not animate at all. It snaps to full size instantly while the opacity and
 * padding on the same element do animate over 0.32s. That mismatch is the jerk:
 * the answer pops open, then fades in behind itself.
 *
 * A grid track can be interpolated where `auto` cannot, so the row itself is
 * animated instead. The `<details>` becomes a two-row grid — summary, then answer
 * — and the answer's track goes from `0fr` to `1fr`. The element's own height is
 * released to `auto` so the track is what decides its size, and its height
 * transition is dropped so the two cannot fight.
 *
 * Padding is deliberately left to the parent's own rules, which already fade it
 * in on open via the variable above; an earlier attempt to restate it here was
 * more specific than the parent's closed rule and left the padding applied while
 * the row was shut.
 */

/*
 * The open/close animation belongs to the parent. Nothing here touches height.
 *
 * `mrn-base-stack/js/front-end-slider.js` runs `initAnimatedFaqs()`: it takes over
 * the summary's click with `preventDefault()`, measures the answer, and animates
 * an inline `style="height"` from 0 to the measured value and back, flagging
 * `data-mrn-faq-animating` while it runs. It also has its own
 * `prefers-reduced-motion` branch.
 *
 * Three attempts were made here to animate the open state in CSS — a grid row,
 * then `max-height`, and a `height: auto` override — and all three were the cause
 * of the jerk rather than a cure for it. An inline style wins over any stylesheet,
 * so the JS was setting the height while `max-height: 0` from here clamped it, and
 * the two fought for the same property mid-animation.
 *
 * So height, max-height and overflow are all left alone; this page only supplies
 * appearance. If the animation ever needs changing, it changes in that script.
 */

/*
 * Padding must not animate, or re-opening a row jerks.
 *
 * The parent's `initAnimatedFaqs()` sizes each animation by reading
 * `answer.scrollHeight` and then transitioning the inline height to that value.
 * `scrollHeight` includes padding — and the parent also has `padding` in the
 * answer's transition list:
 *
 *     transition: height 0.32s ease, opacity 0.24s ease, padding 0.32s ease;
 *
 * So on a re-open the padding is still mid-transition when the measurement is
 * taken, and the JS gets the content height without it. Measured here: 109px
 * with the padding animating, against a true 133px once it had settled. The row
 * animates to the short value and then snaps to `auto` at `transitionend` — which
 * is the jerk, and it only shows from the second open onwards because the first
 * one has no transition already in flight.
 *
 * Dropping `padding` from the list makes it apply instantly, so `scrollHeight` is
 * always read with the final padding and every open animates to the right height.
 * Height and opacity keep their own durations from the parent's shorthand, and the
 * height animation stays entirely the JS's to drive.
 */
.gloves-faq .mrn-faq__answer {
	transition-property: height, opacity;
}

/**
 * Blog sidebar
 *
 * The column only exists when the Blog Sidebar widget area has something in it —
 * `blog-archive.php` adds `--has-sidebar` on that condition — so everything here
 * is scoped to that modifier and the listing keeps its original full-width grid
 * until a widget is added.
 *
 * Widget content is managed in Appearance → Widgets. Nothing below assumes which
 * widgets are used; the rules cover the shapes core widgets actually produce
 * (titles, link lists, a search form) so a new widget inherits the treatment
 * rather than needing its own.
 */
.gloves-blog__body--has-sidebar {
	/*
	 * `align-items: start` so the sidebar sits at the top of the row instead of
	 * stretching to the height of a long post list — a stretched column would
	 * leave its last widget floating in the middle of empty space.
	 */
	align-items: start;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 1fr) 300px;
}

/*
 * Three cards no longer fit once 300px and a 48px gutter come out of the row, so
 * the listing steps down to two. This is why the modifier exists: the same grid
 * keeps three across when there is no sidebar.
 */
.gloves-blog__body--has-sidebar .gloves-blog__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Each widget is a panel, in the vocabulary the FAQ and Contact panels use.
 *
 * The outer edge takes the same hairline as the FAQ rows. The dividers *inside* a
 * widget stay on the lighter `--gloves-blog-border`: putting the heavier line on
 * both would give a five-widget column dozens of equally strong rules and lose the
 * distinction between where a panel ends and where a row inside it does.
 */
.gloves-blog__sidebar .gloves-blog__widget {
	background: var(--site-color-white, #fff);
	border: 1px solid var(--gloves-border-strong);
	border-radius: var(--gloves-radius-button);
	padding: 22px 24px;
}

.gloves-blog__sidebar .gloves-blog__widget+.gloves-blog__widget {
	margin-top: 24px;
}

/*
 * Widget titles take the site's heading face, like every other heading — a
 * sidebar rendered in the body sans is the tell of a bolted-on widget area. The
 * hairline under it does the separating, so the title carries no bottom margin of
 * its own beyond the rule's padding.
 */
.gloves-blog__sidebar .gloves-blog__widget-title {
	border-bottom: 1px solid var(--gloves-blog-border);
	color: var(--gloves-blog-ink);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 16px;
	padding-bottom: 12px;
}

/*
 * Link lists.
 *
 * Core's category, archive, recent-posts and page widgets all render a `ul` of
 * links, so they are styled once here by shape rather than per widget. The
 * markers go because the hairlines already separate the rows.
 */
.gloves-blog__sidebar .gloves-blog__widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The row owns the padding, not the link.
 *
 * With `padding` on the anchor, anything the widget prints *after* it fell outside
 * the padded area — so Recent Posts had its date sitting hard against the next
 * row's hairline with no space under it, while the title above had 10px. Moving the
 * padding to the `li` puts every part of the row inside the same box, so the space
 * above and below a row is equal whatever the widget puts in it.
 */
.gloves-blog__sidebar .gloves-blog__widget li {
	margin: 0;
	padding: 10px 0;
}

.gloves-blog__sidebar .gloves-blog__widget li+li {
	border-top: 1px solid var(--gloves-blog-border);
}

/*
 * `display: inline`, deliberately.
 *
 * Core's category widget prints the count as a bare text node after the link —
 * `<a>About the Glove Guru</a> (2)` — so a block-level anchor pushed every count
 * onto its own line. Inline keeps the name and its number on one line, which is
 * also how the archive and tag widgets render their counts.
 */
.gloves-blog__sidebar .gloves-blog__widget li a {
	color: var(--gloves-blog-ink);
	display: inline;
	font-size: 15px;
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.15s ease;
}

/*
 * Recent Posts prints `<span class="post-date">` after the title, so it goes on
 * its own line under it — inside the row's padding now — and takes the muted tone
 * so the title stays the thing being scanned.
 */
.gloves-blog__sidebar .widget_recent_entries .post-date {
	color: var(--gloves-blog-muted);
	display: block;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 4px;
}

.gloves-blog__sidebar .gloves-blog__widget li a:hover,
.gloves-blog__sidebar .gloves-blog__widget li a:focus-visible {
	color: var(--site-color-brand-blue, #3333cc);
}

/*
 * The count core appends to a category row is secondary to the name.
 *
 * Set on the row rather than a class, because the count is a bare text node with
 * nothing to hook — the link above restates its own colour and size, so only the
 * loose text picks this up.
 */
.gloves-blog__sidebar .gloves-blog__widget li {
	color: var(--gloves-blog-muted);
	font-size: 13px;
}

/* Nested lists keep the rhythm but step in, so hierarchy still reads. */
.gloves-blog__sidebar .gloves-blog__widget li ul {
	border-top: 1px solid var(--gloves-blog-border);
	padding-left: 16px;
}

/*
 * Search field, matching the contact form's inputs so the site has one field
 * treatment rather than two.
 */
.gloves-blog__sidebar .gloves-blog__widget input[type="search"],
.gloves-blog__sidebar .gloves-blog__widget input[type="text"] {
	background: var(--site-color-white, #fff);
	border: 1px solid var(--gloves-blog-border);
	border-radius: var(--gloves-radius-field);
	color: var(--gloves-blog-ink);
	font-size: 15px;
	padding: 11px 13px;
	width: 100%;
}

.gloves-blog__sidebar .gloves-blog__widget input[type="search"]:focus,
.gloves-blog__sidebar .gloves-blog__widget input[type="text"]:focus {
	border-color: var(--site-color-brand-blue, #3333cc);
	outline: 2px solid var(--site-color-brand-blue, #3333cc);
	outline-offset: 1px;
}

.gloves-blog__sidebar .gloves-blog__widget button,
.gloves-blog__sidebar .gloves-blog__widget input[type="submit"] {
	background: var(--site-color-brand-blue, #3333cc);
	border: 0;
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-white, #fff);
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	margin-top: 10px;
	padding: 11px 22px;
	transition: background-color 0.2s ease;
}

.gloves-blog__sidebar .gloves-blog__widget button:hover,
.gloves-blog__sidebar .gloves-blog__widget input[type="submit"]:hover {
	background: var(--site-color-dark-blue, #0a0a91);
}

/* Prose widgets (text/HTML) read as body copy, not as sidebar furniture. */
.gloves-blog__sidebar .gloves-blog__widget p {
	color: var(--gloves-blog-ink);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 12px;
}

.gloves-blog__sidebar .gloves-blog__widget p:last-child {
	margin-bottom: 0;
}

/*
 * Below the shell's own two-column step the sidebar goes under the posts rather
 * than being squeezed: at that width a 300px column leaves the cards too narrow
 * to hold a title and an excerpt. The listing then returns to its own responsive
 * rules, which already handle two across and then one.
 */
@media (max-width: 1024px) {
	.gloves-blog__body--has-sidebar {
		gap: 40px;
		grid-template-columns: minmax(0, 1fr);
	}

	.gloves-blog__body--has-sidebar .gloves-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.gloves-blog__body--has-sidebar .gloves-blog__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {

	.gloves-blog__sidebar .gloves-blog__widget li a,
	.gloves-blog__sidebar .gloves-blog__widget button,
	.gloves-blog__sidebar .gloves-blog__widget input[type="submit"] {
		transition: none;
	}
}

/*
 * Shop Now button — the site's primary button, restated.
 *
 * The theme's filled button is `.home .gloves-home__button`: Figma "Button -
 * Regular", brand blue, 8px radius, Inter 16/600, 42px min-height. It is scoped to
 * the front page, so using that class here styled nothing — the button rendered
 * transparent with square corners, which is what showed in the sidebar.
 *
 * The blog's own `.gloves-blog__more-button` was the other candidate and is wrong
 * for this: it is the outline/secondary treatment, and "Shop Now" is the primary
 * action in this column.
 *
 * So the primary spec is mirrored here, matching those values rather than
 * inventing new ones. It should be replaced with the shared class the day that rule
 * is unscoped from `.home`.
 *
 * Full width because a 300px column has no reason to leave a short button floating
 * at one edge.
 */
.gloves-blog__sidebar .gloves-blog__widget-button {
	align-items: center;
	background: var(--site-color-brand-blue, #3333cc);
	border: 0;
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-white, #fff);
	display: flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	justify-content: center;
	line-height: 1.5;
	min-height: 42px;
	padding: 6px 20px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
	width: 100%;
}

.gloves-blog__sidebar .gloves-blog__widget-button:hover,
.gloves-blog__sidebar .gloves-blog__widget-button:focus-visible {
	background: var(--site-color-dark-blue, #0a0a91);
	color: var(--site-color-white, #fff);
}

@media (prefers-reduced-motion: reduce) {
	.gloves-blog__sidebar .gloves-blog__widget-button {
		transition: none;
	}
}

/*
 * Newsletter form in the sidebar.
 *
 * WPForms renders on its own stylesheet, which puts a rounded grey field and its
 * own blue button in a column styled by none of the site's tokens. These rules
 * bring it onto the same field and button treatment as the contact form, so the two
 * forms on the site match. Written against `div.wpforms-container-full` for the
 * same reason as on the contact page — that is the weight WPForms' own rules carry.
 */
.gloves-blog__sidebar div.wpforms-container-full {
	margin: 0;
}

.gloves-blog__sidebar div.wpforms-container-full .wpforms-field {
	padding: 0 0 12px;
}

.gloves-blog__sidebar div.wpforms-container-full .wpforms-field-label {
	color: var(--gloves-blog-ink);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.gloves-blog__sidebar div.wpforms-container-full input[type="email"],
.gloves-blog__sidebar div.wpforms-container-full input[type="text"] {
	background: var(--site-color-white, #fff);
	border: 1px solid var(--gloves-blog-border);
	border-radius: var(--gloves-radius-field);
	box-shadow: none;
	color: var(--gloves-blog-ink);
	font-size: 15px;
	max-width: 100%;
	padding: 11px 13px;
	width: 100%;
}

.gloves-blog__sidebar div.wpforms-container-full input[type="email"]:focus,
.gloves-blog__sidebar div.wpforms-container-full input[type="text"]:focus {
	border-color: var(--site-color-brand-blue, #3333cc);
	outline: 2px solid var(--site-color-brand-blue, #3333cc);
	outline-offset: 1px;
}

.gloves-blog__sidebar div.wpforms-container-full button[type="submit"],
.gloves-blog__sidebar div.wpforms-container-full button[type="submit"]:not(:hover):not(:active) {
	align-items: center;
	background: var(--site-color-brand-blue, #3333cc);
	border: 0;
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-white, #fff);
	cursor: pointer;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
	line-height: 1.2;
	margin: 4px 0 0;
	min-height: 46px;
	padding: 0 20px;
	transition: background-color 0.2s ease;
	width: 100%;
}

.gloves-blog__sidebar div.wpforms-container-full button[type="submit"]:hover,
.gloves-blog__sidebar div.wpforms-container-full button[type="submit"]:active,
.gloves-blog__sidebar div.wpforms-container-full button[type="submit"]:focus-visible {
	background: var(--site-color-dark-blue, #0a0a91);
	color: var(--site-color-white, #fff);
}

.gloves-blog__sidebar div.wpforms-container-full .wpforms-required-label {
	color: var(--gloves-color-price-sale);
}

/**
 * Single post: the same sidebar beside the article body
 *
 * The header, meta and featured image stay full width above this; only the body
 * runs in two columns. Same widget area and the same `--has-sidebar` gate as the
 * listing, so a post falls back to one column if the widgets are removed.
 */
.gloves-post__body--has-sidebar {
	align-items: start;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 1fr) 300px;
}

@media (max-width: 1024px) {
	.gloves-post__body--has-sidebar {
		gap: 40px;
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gloves-blog__sidebar div.wpforms-container-full button[type="submit"] {
		transition: none;
	}
}

/*
 * Single post: the sidebar starts level with the title.
 *
 * `align-items: start` is what holds the first widget at the top of the row — a
 * stretched column would centre its contents against a long article and leave the
 * widgets floating beside the middle of the text.
 *
 * The header, featured image, body and post navigation are all inside the left
 * column now, so their own container classes were removed in the template; the
 * measure comes from this wrapper instead.
 */
.gloves-post__body--has-sidebar>.gloves-post__main {
	min-width: 0;
}

/*
 * The sidebar takes the header's own top offset, so the first widget starts level
 * with the title.
 *
 * `.gloves-post__header` carries `padding-top: var(--gloves-page-heading-space)` —
 * the site's breadcrumb-to-heading distance, 48px — which pushed the title down
 * while the sidebar began at the top of the row. Measured, the first widget sat
 * 48px above the title.
 *
 * The offset is copied rather than the header's removed: that 48px is the spacing
 * every page on the site uses under its breadcrumb, and it reads from the same
 * token, so the two stay level if it is ever changed.
 *
 * Desktop only. Once the columns stack the sidebar follows the article, where a
 * 48px inset would just be a gap.
 */
@media (min-width: 1025px) {
	.gloves-post__body--has-sidebar>.gloves-post__sidebar {
		padding-top: var(--gloves-page-heading-space);
	}
}

/*
 * The featured image is inside the column now, so it fills the column rather than
 * the old full-width band. Without this the large source overflows a 892px column.
 */
.gloves-post__body--has-sidebar .gloves-post__media img {
	height: auto;
	max-width: 100%;
	width: 100%;
}

/*
 * Shop Now banner.
 *
 * The Image widget prints the picture at its own dimensions, so a 400px source in a
 * 300px column would overflow. It fills the column instead and keeps its ratio, with
 * the panel's radius so it sits inside the widget's corner rather than squaring it
 * off.
 *
 * The widget's padding is removed for this one: the banner is artwork with its own
 * margins baked in, and a 24px inset around it reads as a frame the design does not
 * have. `overflow: hidden` clips the image to the panel's radius, which the image
 * cannot do on its own once it is edge to edge.
 */
.gloves-blog__sidebar .widget_media_image {
	overflow: hidden;
	padding: 0;
}

/*
 * The title still needs its own inset, since the panel no longer has any. It keeps
 * the hairline as a divider between the label and the artwork under it.
 */
.gloves-blog__sidebar .widget_media_image .gloves-blog__widget-title {
	margin: 0;
	padding: 22px 24px 12px;
}

.gloves-blog__sidebar .gloves-blog__widget-image-link {
	display: block;
	line-height: 0;
}

.gloves-blog__sidebar .gloves-blog__widget img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

/*
 * With a sidebar, the column is the measure — the 78ch cap comes off.
 *
 * `.gloves-post__content > p` and friends are capped at 78ch further up, which was
 * right while a post ran the full 1240px shell: without it the copy reached about
 * 140 characters a line. Now the article sits in an 892px column beside the widgets,
 * and that column already holds the line length to a readable length — so the cap
 * only stops the text short of its own column and leaves a ragged gap down the right
 * of every paragraph.
 *
 * Scoped to `--has-sidebar` rather than deleted, so the cap still protects the
 * layout if the widget area is ever emptied and posts return to full width.
 */
.gloves-post__body--has-sidebar .gloves-post__content>p,
.gloves-post__body--has-sidebar .gloves-post__content>h2,
.gloves-post__body--has-sidebar .gloves-post__content>h3,
.gloves-post__body--has-sidebar .gloves-post__content>h4,
.gloves-post__body--has-sidebar .gloves-post__content>ul,
.gloves-post__body--has-sidebar .gloves-post__content>ol,
.gloves-post__body--has-sidebar .gloves-post__content>blockquote {
	max-width: none;
}
/* Search results
--------------------------------------------- */
/*
 * The page reuses `.gloves-catalog` for its card, grid and pager styling, so
 * only what differs from a category archive is stated here: the results have
 * no filter rail, so the body is a single column rather than the catalog's
 * rail-plus-results pair.
 */
.gloves-search__body {
	display: block;
	padding-bottom: 64px;
}

.gloves-search__title {
	margin-bottom: 8px;
}

/* The term is the part the shopper scans for, so it carries the brand colour. */
.gloves-search__term {
	color: var(--site-color-brand-blue);
}

.gloves-search__count {
	color: var(--gloves-color-neutral-04);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	line-height: 175%;
	margin: 0;
}

.gloves-search__section + .gloves-search__section {
	border-top: 1px solid var(--gloves-border-strong);
	margin-top: 48px;
	padding-top: 48px;
}

.gloves-search__section-title {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 0 0 24px;
}

/* Secondary results: pages and articles
--------------------------------------------- */
/*
 * Tiles rather than a bordered list. These results have no imagery to lead
 * with — no page on the site carries a featured image and only a third of
 * posts do — so the card is built from what every result does have: what kind
 * of thing it is, its title, and a trimmed excerpt.
 */
.gloves-search__cards {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.gloves-search__card {
	background: var(--site-color-white);
	border: 1px solid #dddbdc;
	border-radius: var(--gloves-radius-button);
	display: flex;
	flex-direction: column;
	padding: 24px;
	position: relative;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gloves-search__card:hover,
.gloves-search__card:focus-within {
	border-color: var(--site-color-brand-blue);
	box-shadow: 0 8px 16px -10px rgba(20, 23, 24, 0.24);
}

/* The kind of result, stated quietly so the title stays the loudest thing. */
.gloves-search__card-type {
	align-self: flex-start;
	background: var(--site-color-grey);
	border-radius: var(--gloves-radius-field);
	color: var(--gloves-color-neutral-04);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 18px;
	margin-bottom: 12px;
	padding: 2px 8px;
	text-transform: uppercase;
}

.gloves-search__card-title {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 0;
}

.gloves-search__card-link {
	color: inherit;
	text-decoration: none;
}

/*
 * The tile is the hit area, but only the title carries the link — so the
 * pointer target covers the card while the accessible name stays the title
 * alone, rather than the type chip and excerpt being read into it.
 */
.gloves-search__card-link::after {
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
}

.gloves-search__card:hover .gloves-search__card-link,
.gloves-search__card-link:focus-visible {
	color: var(--site-color-brand-blue);
}

.gloves-search__card-link:focus-visible {
	outline: 2px solid var(--site-color-brand-blue);
	outline-offset: 4px;
}

/*
 * Clamped to three lines. These excerpts are auto-trimmed from page content of
 * wildly different lengths, and without a cap one long tile stretched its whole
 * grid row.
 */
.gloves-search__card-excerpt {
	-webkit-box-orient: vertical;
	color: var(--gloves-color-neutral-04);
	display: -webkit-box;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	line-height: 175%;
	margin: 8px 0 0;
	overflow: hidden;
}

/* Pinned to the bottom so the affordance lines up across a row of tiles. */
.gloves-search__card-more {
	align-items: center;
	color: var(--site-color-brand-blue);
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	gap: 4px;
	line-height: 24px;
	margin-top: auto;
	padding-top: 16px;
}

/*
 * The chevron is centred optically rather than geometrically.
 *
 * `align-items: center` on the row already puts the glyph centre on the centre
 * of the 24px line box, which is where the cap height centres too. But the
 * label is "Read more" — ascenders and no descenders — so its visual mass sits
 * about a pixel below that, and a box-centred chevron reads high beside it.
 * The nudge is what closes that gap; it travels with the hover shift below.
 */
.gloves-search__card-more svg {
	flex: 0 0 auto;
	transform: translateY(1px);
	transition: transform 0.2s ease;
}

.gloves-search__card:hover .gloves-search__card-more svg {
	/* Both axes together: a bare translateX here would drop the 1px above. */
	transform: translate(3px, 1px);
}

@media (prefers-reduced-motion: reduce) {

	.gloves-search__card,
	.gloves-search__card-more svg {
		transition: none;
	}

	/* Drops the hover travel, keeps the optical nudge. */
	.gloves-search__card:hover .gloves-search__card-more svg {
		transform: translateY(1px);
	}
}

@media (max-width: 1024px) {

	.gloves-search__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {

	.gloves-search__cards {
		gap: 16px;
		grid-template-columns: minmax(0, 1fr);
	}

	.gloves-search__card {
		padding: 20px;
	}
}

/* Empty state
--------------------------------------------- */
.gloves-search__empty {
	padding: 8px 0 16px;
}

.gloves-search__empty-title {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: 26px;
	margin: 0 0 4px;
}

.gloves-search__empty-text {
	color: var(--gloves-color-neutral-04);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	line-height: 175%;
	margin: 0 0 24px;
}

.gloves-search__empty-link {
	background: var(--site-color-brand-blue);
	border-radius: var(--gloves-radius-button);
	color: var(--site-color-white);
	display: inline-block;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	padding: 8px 24px;
	text-decoration: none;
}

.gloves-search__empty-link:hover,
.gloves-search__empty-link:focus-visible {
	background: var(--site-color-dark-blue);
	color: var(--site-color-white);
}

@media (max-width: 782px) {
	.gloves-search__body {
		padding-bottom: 32px;
	}

	.gloves-search__section + .gloves-search__section {
		margin-top: 32px;
		padding-top: 32px;
	}
}

/* Blog sidebar: the category list
--------------------------------------------- */
/*
 * Capped and scrollable. This widget lists all 155 categories, which measured
 * 6,625px tall — it ran roughly 2,400px past the Load more button at the foot
 * of the post grid, so the sidebar dragged the page long on its own.
 *
 * A fixed cap rather than one matched to the button's position: that position
 * moves every time Load more appends a page of posts, so pinning to it would
 * need JS and would still leave a scroller thousands of pixels tall. This
 * height shows about a dozen categories, which is what the column can carry
 * without dominating the page.
 */
.gloves-blog__sidebar .gloves-blog__widget.widget_categories ul {
	max-height: min(480px, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 8px;
	scroll-behavior: smooth;
	/* Firefox and the standard property. */
	scrollbar-color: var(--gloves-border-strong) var(--site-color-grey);
	scrollbar-width: thin;
}

/* WebKit and Blink need their own pseudo-elements for the same treatment. */
.gloves-blog__sidebar .gloves-blog__widget.widget_categories ul::-webkit-scrollbar {
	width: 6px;
}

.gloves-blog__sidebar .gloves-blog__widget.widget_categories ul::-webkit-scrollbar-track {
	background: var(--site-color-grey);
	border-radius: 100px;
}

.gloves-blog__sidebar .gloves-blog__widget.widget_categories ul::-webkit-scrollbar-thumb {
	background: var(--gloves-border-strong);
	border-radius: 100px;
}

.gloves-blog__sidebar .gloves-blog__widget.widget_categories ul::-webkit-scrollbar-thumb:hover {
	background: var(--site-color-brand-blue);
}

@media (prefers-reduced-motion: reduce) {

	.gloves-blog__sidebar .gloves-blog__widget.widget_categories ul {
		scroll-behavior: auto;
	}
}

/* Dialog forms: validation and confirmation messages
--------------------------------------------- */
/*
 * WPForms ships its error text on a 20px top margin — measured on the Share
 * With A Friend dialog — which reads as a gap belonging to the next field
 * rather than a message belonging to the one above it, and pushed the dialog
 * tall enough to start scrolling as soon as more than one field failed.
 *
 * Matched by tag: the plugin also puts `.wpforms-error` on the input itself,
 * and a bare class selector would restyle the field along with the text. The
 * message is a <label> in the classic render and an <em> in the modern one.
 */
/*
 * Written through `div.wpforms-container-full` to match the shape of the
 * plugin's own rule. WPForms styles this text at
 * `div.wpforms-container-full .wpforms-form em.wpforms-error` — one element
 * more specific than anything scoped to the dialog alone, so the plain version
 * of this rule lost and the 20px margin stayed.
 *
 * The colour is set as the plugin's own custom property instead, because the
 * warning glyph it draws in `::before` is painted from that same variable —
 * setting `color` here would have left a red icon beside re-coloured text.
 */
.gloves-modal div.wpforms-container-full .wpforms-form label.wpforms-error,
.gloves-modal div.wpforms-container-full .wpforms-form em.wpforms-error {
	font-family: Inter, Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	margin-top: 6px;
}
.gloves-modal .wpforms-form .wpforms-field.wpforms-has-error {
	padding-bottom: 10px;
}

/* The submitted-state message, sized to the dialog rather than the page. */
.gloves-modal .wpforms-confirmation-container,
.gloves-modal .wpforms-confirmation-container-full,
.gloves-modal div.wpforms-container .wpforms-confirmation-container-full {
	background: var(--site-color-grey);
	border: 0;
	border-radius: var(--gloves-radius-field);
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	line-height: 175%;
	margin: 0;
	padding: 16px 20px;
}

.gloves-modal .wpforms-confirmation-container p:last-child,
.gloves-modal .wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}

#newsletter + .mrn-content-builder__row--wpforms .mrn-layout-section::after {
  background-image: url("assets/images/homepage/newsletter-glove-right.png");
  aspect-ratio: 461 / 360;
  background-position: right bottom;
  bottom: 0;
  right: 0;
  width: 360px;
}

/*
 * Dropped on mobile.
 *
 * Placed after the rule above rather than folded into the existing mobile
 * block near the top of the file (which only resizes this element to 180px):
 * this is the last declaration of `::after` for this row in the file, so
 * `display: none` here is guaranteed to win rather than risk landing before
 * some later, still-undiscovered rule and getting silently overridden again.
 */
@media (max-width: 767px) {
	#newsletter + .mrn-content-builder__row--wpforms .mrn-layout-section::after {
		display: none;
	}
}

/* Product Card Short Description */
.gloves-catalog .product-short-description,
.product-card .product-short-description {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: #666666;
	margin-top: 4px;
	margin-bottom: 8px;
}

.product-short-description p {
	margin: 0 0 4px 0;
}

.product-short-description p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------
 * Gift Card Form (.gcwoo-fields-form) & Title Design
 * --------------------------------------------- */

/* Single Product Page Title Styling */
.single-product div.product .product_title {
	color: #000;
	font-size: 36px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.5;
	margin: 0 0 10px;
	padding: 0;
}

/*
 * Gift certificate purchase form.
 *
 * The plugin ships this form unstyled, and the rules that were here dressed it
 * in a palette borrowed from a CSS framework's defaults — a #175199 blue,
 * #e2e8f0 hairlines, #cbd5e0 fields and an #e53e3e asterisk. Not one of those
 * values appears anywhere else on this site, which is what made the page read
 * as something bolted on beside the store rather than part of it.
 *
 * Rebuilt on the contract the Contact page's form already uses, so the two are
 * the same component with different fields: the site's card (white, a Neutral/03
 * hairline and the soft lift, at the button radius), 4px fields that darken on
 * hover and take a brand-blue ring on focus, and the brand-blue button at the
 * site's own button radius.
 */

/*
 * The page heading, set as a heading rather than as a boxed callout.
 *
 * It used to be a tinted, bordered panel with its own left accent — furniture no
 * other title on this site carries. Catalog, search and blog titles are all the
 * same Figma H2, Libre Caslon Text Medium 40/44 at -0.4px, so this one joins
 * them and the form below is left as the only surface on the page.
 */
.gcwoo-shortcode-title,
.gcwoo-title,
.product-type-gift_card h1.product_title {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--site-color-dark-charcoal, #141718);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.4px;
	line-height: 44px;
	margin: 0 auto 24px !important;
	max-width: 700px;
	padding: 0;
	text-align: center;
}

/* The card: the Contact page's panel, same hairline and same soft lift. */
.cart.gcwoo-fields-form,
.gcwoo-fields-form,
.single-product form.cart.gcwoo-fields-form {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--gloves-color-neutral-03);
	border-radius: var(--gloves-radius-button);
	box-shadow: 0 2px 10px -6px rgba(20, 23, 24, 0.18);
	margin: 0 auto 48px !important;
	max-width: 700px;
	padding: 32px;
}

/*
 * Stray line breaks and empty paragraphs.
 *
 * `gloves_online_normalize_store_shortcodes()` strips these server side, so this
 * is the guard for markup that reaches the page by another route — a gift-card
 * form rendered outside that filter still lands here.
 */
button br,
.button br,
.gcwoo-submit br,
.gcwoo-fields-form br,
.gcwoo-fields br,
.gcwoo-input-wrap br,
.gcwoo-row br,
.ywgc-gift-card-form br,
.single-product form.cart br,
form.cart button br {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gcwoo-fields-form p:empty,
.gcwoo-fields p:empty,
.cart p:empty,
form.cart p:empty,
form.cart + p:empty,
div.product p:empty {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gcwoo-fields-form > p,
.single-product form.cart > p {
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Two columns.
 *
 * Six stacked fields made this a long scroll for what is a short form, and the
 * pairs are already obvious in the labels: To sits beside From, and the address
 * beside its confirmation, which also puts the two emails side by side where a
 * mismatch is easiest to spot.
 *
 * 20px is the same step the Contact form puts under each of its fields, carried
 * here as the grid gap so the rows themselves need no margin.
 */
.gcwoo-fields {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
}

/*
 * The amount, the message and anything the plugin adds that is not a field row
 * take the full measure. Everything else pairs in source order, so a field added
 * later joins the grid rather than breaking it.
 */
.gcwoo-fields > .gcwoo-row:first-child,
.gcwoo-fields > .gcwoo-row-message,
.gcwoo-fields > .gcwoo-error,
.gcwoo-fields > p:not(.gcwoo-row) {
	grid-column: 1 / -1;
}

.gcwoo-row,
p.form-row.gcwoo-row,
.form-row.gcwoo-row {
	clear: both;
	display: flex;
	flex-direction: column;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

.gcwoo-row label,
.form-row.gcwoo-row label,
.gcwoo-fields .gcwoo-row label {
	color: var(--gloves-color-neutral-07);
	display: block !important;
	flex: 0 0 auto !important;
	flex-basis: auto !important;
	float: none !important;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	height: auto !important;
	line-height: 1.4;
	margin: 0 0 8px !important;
	min-height: 0 !important;
	padding: 0 !important;
}

/* The required marker is a warning, so it takes the sale red, not brand blue. */
.gcwoo-row label .required {
	color: var(--gloves-color-price-sale);
	font-weight: 600;
	margin-left: 2px;
	text-decoration: none;
}

.gcwoo-input-wrap {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	width: 100%;
}

/*
 * Fields at the site's 4px field radius, not the 8px button radius. A field is
 * not a button, and the two were never meant to share a corner.
 */
.gcwoo-input,
.gcwoo-fields input[type="text"],
.gcwoo-fields input[type="number"],
.gcwoo-fields input[type="email"],
.gcwoo-fields textarea {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--gloves-color-neutral-03);
	border-radius: var(--gloves-radius-field);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	margin: 0 !important;
	outline: none;
	padding: 13px 15px;
	transition: border-color 0.15s ease;
	width: 100%;
}

.gcwoo-input:hover,
.gcwoo-fields input[type="text"]:hover,
.gcwoo-fields input[type="number"]:hover,
.gcwoo-fields input[type="email"]:hover,
.gcwoo-fields textarea:hover {
	border-color: var(--gloves-color-neutral-04);
}

/*
 * Brand-blue ring on top of the border change, so the active field is obvious to
 * a keyboard user rather than only slightly darker — the same focus treatment
 * the Contact form's fields carry.
 */
.gcwoo-input:focus,
.gcwoo-fields input[type="text"]:focus,
.gcwoo-fields input[type="number"]:focus,
.gcwoo-fields input[type="email"]:focus,
.gcwoo-fields textarea:focus {
	border-color: var(--site-color-brand-blue, #3333cc);
	outline: 2px solid var(--site-color-brand-blue, #3333cc);
	outline-offset: 1px;
}

.gcwoo-fields input::placeholder,
.gcwoo-fields textarea::placeholder {
	color: var(--gloves-color-neutral-04);
	opacity: 1;
}

/*
 * The amount field's native spinner.
 *
 * The input is stepped at 0.01 across a 5-100000 range, so the arrows would take
 * a shopper thousands of clicks to reach a useful figure — the value is typed,
 * not stepped. They also render as a raised grey chip sitting inside the field's
 * own border, fighting it.
 */
.gcwoo-fields input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

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

/* The currency mark sits on the field's own 15px inset. */
.gcwoo-currency {
	color: var(--gloves-color-neutral-04);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	left: 15px;
	line-height: 1;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

/* Clears the mark above, which the value would otherwise run underneath. */
.gcwoo-input-wrap .gcwoo-amount {
	padding-left: 32px !important;
}

.gcwoo-textarea,
.gcwoo-fields textarea {
	display: block;
	min-height: 120px;
	resize: vertical;
}

/*
 * Validation, on the site's warning colour rather than the browser's red. No
 * margin: it is a grid item now, so the field gap already spaces it.
 */
.gcwoo-error {
	color: var(--gloves-color-price-sale);
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

/*
 * The one action on the page, so it takes the card's full measure rather than
 * sitting as a short pill against 650px of white. Brand blue at the site's
 * button radius, matching the hero and Shop All buttons.
 *
 * The plugin emits this as `class="button alt gcwoo-submit"`, so WooCommerce's
 * own `.woocommerce button.button.alt` — (0,2,1) — outranked the plain
 * `button.gcwoo-submit` pair that used to be here. That is why the button
 * rendered brand blue rather than the #175199 the old rule asked for: it was
 * outranked, not wrong. The last two selectors clear that specificity rather
 * than reaching for `!important`, the same way the Contact form's button does.
 */
.gcwoo-submit,
button.gcwoo-submit,
button.button.alt.gcwoo-submit,
.woocommerce button.button.alt.gcwoo-submit {
	align-items: center;
	background: var(--wp--preset--color--brand-blue, #3333cc);
	border: 0;
	border-radius: var(--gloves-radius-button);
	color: var(--wp--preset--color--white, #fff);
	cursor: pointer;
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	justify-content: center;
	letter-spacing: 0.01em;
	margin: 28px 0 0 !important;
	min-height: 52px;
	padding: 15px 40px;
	text-align: center;
	transition: background-color 0.2s ease;
	width: 100%;
}

.gcwoo-submit:hover,
button.gcwoo-submit:hover,
button.button.alt.gcwoo-submit:hover,
.woocommerce button.button.alt.gcwoo-submit:hover,
.gcwoo-submit:focus-visible,
button.gcwoo-submit:focus-visible,
button.button.alt.gcwoo-submit:focus-visible,
.woocommerce button.button.alt.gcwoo-submit:focus-visible {
	background: var(--site-color-dark-blue, #191970);
	color: var(--wp--preset--color--white, #fff);
}

.gcwoo-submit:focus-visible,
button.gcwoo-submit:focus-visible {
	outline: 2px solid var(--site-color-dark-blue, #191970);
	outline-offset: 2px;
}

/* Gift certificate form — mobile */
@media (max-width: 620px) {
	/* One column: a paired field at this width is narrower than its own label. */
	.gcwoo-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	.gcwoo-shortcode-title,
	.gcwoo-title,
	.product-type-gift_card h1.product_title {
		font-size: 30px;
		letter-spacing: -0.3px;
		line-height: 36px;
		margin-bottom: 20px !important;
	}

	.cart.gcwoo-fields-form,
	.gcwoo-fields-form,
	.single-product form.cart.gcwoo-fields-form {
		border-radius: var(--gloves-radius-field);
		margin-bottom: 32px !important;
		padding: 24px 20px;
	}
}

/* ---------------------------------------------
 * Remove Gift Certificate / Gift Card Code Fields on Cart & Checkout
 * --------------------------------------------- */
.woocommerce-cart .ywgc_enter_code,
.woocommerce-cart .ywgc_cart_form,
.woocommerce-cart .ywgc-have-a-gift-card,
.woocommerce-cart .gcwoo-coupon-box,
.woocommerce-cart .gcwoo-cart-coupon,
.woocommerce-cart .gcwoo-form:not(.gcwoo-fields-form),
.woocommerce-cart .gcwoo-checkout-coupon,
.woocommerce-cart .pwgc-gift-card-form,
.woocommerce-checkout .ywgc_enter_code,
.woocommerce-checkout .ywgc_cart_form,
.woocommerce-checkout .ywgc-have-a-gift-card,
.woocommerce-checkout .gcwoo-coupon-box,
.woocommerce-checkout .gcwoo-cart-coupon,
.woocommerce-checkout .gcwoo-form:not(.gcwoo-fields-form),
.woocommerce-checkout .gcwoo-checkout-coupon,
.woocommerce-checkout .pwgc-gift-card-form,
.woocommerce-checkout .gcwoo-coupon-form,
.woocommerce-checkout .gcwoo-checkout-form,
.woocommerce-checkout div[class*="gcwoo"],
.woocommerce-checkout form[class*="gcwoo"],
.woocommerce-checkout p[class*="gcwoo"],
.woocommerce-checkout div[class*="ywgc"],
.woocommerce-checkout form[class*="ywgc"],
.woocommerce-checkout .checkout_coupon:not(.woocommerce-form-coupon),
#ywgc_enter_code,
.ywgc_checkout_form,
.gcwoo-coupon-box,
.gcwoo-checkout-coupon,
.gcwoo-checkout-form,
.cart_totals .gcwoo-form,
.cart_totals .gcwoo-coupon-box,
.cart_totals div[class*="gcwoo"] {
	display: none !important;
}

.gcwoo-shortcode-box {
	margin: 0 auto;
}

/* Display Shipping Information Title in Shipping Tab */
.woocommerce-Tabs-panel--shipping h2,
.woocommerce-Tabs-panel h2.gloves-shipping-tab-title,
.woocommerce-tabs .panel h2.gloves-shipping-tab-title,
.wc-tab h2.gloves-shipping-tab-title,
.gloves-shipping-tab-title {
	display: block !important;
	font-family: Inter, Arial, sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #141718;
	margin-top: 0;
	margin-bottom: 16px;
}

/* Hide disabled variation options in product attribute dropdowns */
.single-product div.product table.variations select option.gloves-option-disabled,
.single-product div.product table.variations select option:disabled {
	display: none !important;
}

/* Order & Carrier Tracking Page
--------------------------------------------- */

/*
 * One stylesheet for all three tabs.
 *
 * This page used to be styled twice. A block here carried the site tokens, and
 * the shortcode in inc/woocommerce-pages.php printed an inline <style> whose
 * every declaration was flagged `!important` — so the inline copy always won and
 * this block never applied. That is why the page looked untethered from the rest
 * of the site while apparently already being themed: the themed rules were
 * present and losing.
 *
 * Three variables here were also broken. `--gloves-color-neutral-05`,
 * `--gloves-color-neutral-02` and `--mrn-font-heading` are referenced but never
 * declared, and a `var()` that resolves to nothing takes its whole declaration
 * with it — so the tab colour, the strip's rule and the heading face were all
 * falling back to whatever they inherited. Each is replaced below by a token
 * that exists.
 *
 * The inline block is gone; this is the only place the page is styled.
 *
 * The three panels do not share markup. Order Status renders WooCommerce's
 * `.track_order` form, while UPS and USPS render the theme's own
 * `.gloves-carrier-form`. Fields, labels and buttons are therefore selected from
 * `.gloves-tracking-panel` rather than per form, so one rule dresses all three
 * and the tabs cannot drift apart again.
 *
 * `!important` survives only where a rule has to beat WooCommerce's own
 * stylesheet, which reaches these controls at a higher specificity than this
 * file can from outside `.woocommerce`.
 */
/*
 * The row heading on Tracking and Order Status renders as a real `<h1>`,
 * unlike most other content-builder row titles on the site (which render as
 * `<h2>` and never hit this). WordPress's own Global Styles inject a single,
 * un-scoped `h1, .mrn-type-h1 { letter-spacing: -2px; }` rule sized for the
 * homepage hero's ~72px heading, where -2px is a normal, subtle tightening
 * (-0.028em). Applied to this row's 32px heading — the exact same -2px in raw
 * pixels — it becomes -0.0625em, well over double, and visibly crushes the
 * letters together. Scoped to the External Widget row wrapper both of these
 * pages share, not to `h1` generally, so the actual hero heading elsewhere on
 * the site is untouched. -0.4px matches the tracking/letter-spacing value
 * already used for similarly-sized headings throughout this file.
 */
.mrn-external-widget-row__intro .mrn-ui__heading {
	letter-spacing: -0.4px;
}

/*
 * Full width of the content container, not a fixed fraction of it.
 *
 * The 60% cap (744px inside a 1240px container) left roughly 500px of empty
 * grey down the right side of every panel, and inside that 60% the form was
 * capped again at 540px by its own inputs' widths reading against a narrow
 * column — so the page read as unfinished rather than deliberately narrow.
 * `float: left` is dropped with it: nothing was ever meant to sit beside this
 * block, so the float bought clearing rules and no layout benefit.
 */
.gloves-tracking-container {
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	margin: 0 0 48px;
	width: 100%;
	max-width: 100%;
	text-align: left;
}

.gloves-tracking-panel,
.gloves-tracking-content,
.woocommerce-form-track-order,
.track_order,
.gloves-carrier-form {
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left !important;
}

/*
 * Status box and form side by side on the carrier panels, so the full width
 * gained above is used rather than left blank next to a still-narrow column.
 *
 * The header banner and, on UPS, the fixed-position license modal are the only
 * other flow children — the header spans both tracks; the modal is `position:
 * fixed` and takes no part in a grid regardless of where it sits in the source.
 *
 * The grid itself is declared further down, on the panel's other `.active`
 * rule (the one that also paints its grey surface) rather than here: that
 * rule sets `display: block` and, appearing later in the file, would win the
 * cascade over a second declaration at this same specificity and silently
 * flatten the layout back to one column.
 */
.ups-tools-header,
.usps-tools-header {
	grid-column: 1 / -1;
}

.ups-status-results-box,
.usps-status-results-box {
	grid-column: 1;
}

.gloves-carrier-form {
	grid-column: 2;
}

/*
 * The Order Status panel has no second control to sit beside — WooCommerce's
 * `[woocommerce_order_tracking]` renders one `.woocommerce` wrapper as the
 * panel's only direct child. Left unplaced, grid auto-flow would drop it into
 * column 1 alone, at 782px, and leave the 360px second column sitting empty
 * next to it — the same left-over-space problem the grid exists to fix, just
 * narrower. Spanning both tracks gives it the full width instead.
 */
.gloves-tracking-panel.active > .woocommerce {
	grid-column: 1 / -1;
}

.gloves-tracking-header {
	margin-bottom: 28px;
	color: var(--site-color-dark-charcoal, #141718) !important;
	font-family: "Libre Caslon Text", Georgia, serif !important;
	font-size: 36px !important;
	font-weight: 600 !important;
	letter-spacing: -0.4px !important;
	line-height: 1.25 !important;
}

/* The site's page heading: Libre Caslon Text Medium, as on every other title. */
.gloves-tracking-container .gloves-tracking-header h2,
.gloves-tracking-header h2,
.gloves-tracking-header .gloves-tracking-header-title {
	color: var(--site-color-dark-charcoal, #141718) !important;
	font-family: "Libre Caslon Text", Georgia, serif !important;
	font-size: 36px !important;
	font-weight: 600 !important;
	letter-spacing: -0.4px !important;
	line-height: 1.25 !important;
	margin: 0 0 12px 0 !important;
	display: block !important;
}

.gloves-tracking-header p {
	color: var(--gloves-color-neutral-04, #666666) !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	margin: 12px 0 0 0 !important;
	display: block !important;
}

/*
 * Tab strip.
 *
 * The product page's data tabs, reused rather than reinvented: no rule across
 * the strip, because each cap carries its own outline, and the first cap starts
 * 11px in from the panel's left edge.
 */
.gloves-tracking-tabs {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 0 0 11px;
	position: relative;
	z-index: 2;
}

/*
 * 42px caps outlined 1px #cfc8d8 on their top and sides only, 4px top corners.
 *
 * Grey at rest, not white: the active cap below is white, matching the panel
 * it sits on, so the merged white shape reads as "open" and the grey resting
 * state reads as "closed" by itself — without that, a grey active cap next to
 * a white inactive one looked backwards, since white is the brighter, more
 * "selected-looking" surface regardless of which one actually connects to the
 * panel underneath.
 */
.gloves-tracking-tab {
	align-items: center;
	background: var(--site-color-display-grey, #f5f5f5);
	border: 1px solid #cfc8d8;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	box-shadow: none;
	box-sizing: border-box;
	color: #515151;
	cursor: pointer;
	display: flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	justify-content: center;
	line-height: 24px;
	margin: 0;
	min-height: 42px;
	padding: 0 17px;
	transition: background-color 0.15s ease;
}

/* Hints at the white the tab would take on if clicked. */
.gloves-tracking-tab:hover {
	background: var(--site-color-white);
	color: #515151;
}

/*
 * The active cap is pulled a pixel down over the panel's own top edge so the two
 * run together with no line between them, exactly as the product tabs do —
 * now in the same white as the panel, so that connection is a same-colour
 * shape, not just an overlap between two different-coloured surfaces.
 */
.gloves-tracking-tab.active {
	background: var(--site-color-white);
	color: #515151;
	margin-bottom: -1px;
	position: relative;
	z-index: 3;
}

.gloves-tracking-tab:focus-visible {
	outline: 2px solid var(--site-color-brand-blue);
	outline-offset: -2px;
}

.gloves-tracking-panel {
	display: none;
}

/*
 * The panel the caps open onto: white, matching the active cap above it (see
 * `.gloves-tracking-tab.active`) so the two merge into one shape with no
 * seam — the grey product-tab surface this used to copy read as "unselected"
 * once it was the active tab wearing it, which was the actual complaint.
 * Plus the status-box/form grid described above the `.ups-tools-header` rule.
 * `display: grid` lives here rather than there because this is the rule that
 * actually wins the cascade for this selector.
 */
.gloves-tracking-panel.active {
	background: var(--site-color-white);
	border: 0.5px solid var(--gloves-color-neutral-04);
	border-radius: 4px;
	box-sizing: border-box;
	display: grid;
	gap: 24px 32px;
	grid-template-columns: minmax(0, 1fr) 360px;
	padding: 32px;
	position: relative;
	z-index: 1;
}

.gloves-tracking-panel h2,
.gloves-tracking-panel h3,
.gloves-tracking-panel-title {
	color: var(--site-color-dark-charcoal, #141718);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.2px;
	line-height: 1.3;
	margin: 0 0 10px;
}

.gloves-tracking-panel p {
	color: var(--gloves-color-neutral-07);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 20px;
}

/*
 * WooCommerce native track-order form, on the Order Status tab.
 *
 * Laid out as a grid rather than a flex row. The template is built for floats —
 * `form-row-first` and `form-row-last` at 47% either side of a
 * `<div class="clear">` — and flexing it left three problems:
 *
 * - The submit sits in a plain `p.form-row`, so it picked up the same flex basis
 *   as the fields and could settle onto the same line as one, which put the
 *   Track button over the Order ID input.
 * - A percentage width on a flex item fights its own flex-basis, so the two
 *   fields resolved wider than the column and overhung the panel.
 * - The float clearer, and the paragraph `wpautop` wraps around the nonce, both
 *   became flex items and each claimed a gap.
 *
 * Grid settles all three by placing every row explicitly. `minmax(0, 1fr)` is
 * what actually stops the overflow: a bare `1fr` floors at the content's
 * min-width, and a text input's default size is 20 characters.
 */
.gloves-tracking-panel .track_order {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 20px;
}

/* The submit row takes the full width. */
.gloves-tracking-panel .track_order .form-row:not(.form-row-first):not(.form-row-last) {
	grid-column: 1 / -1;
}

/* The float clearer has no job in a grid and would only claim a gap. */
.gloves-tracking-panel .track_order .clear {
	display: none;
}

/*
 * Hide non-form-row paragraphs inside track_order (including WooCommerce default intro text
 * and nonce wrapper, as the custom panel description above the form is used).
 */
.gloves-tracking-panel .track_order > p:not(.form-row) {
	display: none;
}

.gloves-tracking-panel .track_order .form-row {
	box-sizing: border-box;
	float: none !important;
	margin: 0 !important;
	max-width: 100%;
	padding: 0 !important;
	width: auto !important;
}

/*
 * The theme's own carrier forms, on the UPS and USPS tabs.
 *
 * Different markup from the WooCommerce form above, but the same design: the
 * field, label and button rules below are written against the panel, not against
 * either form, so all three tabs stay identical.
 */
.gloves-carrier-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
	max-width: 540px;
}

.gloves-form-group {
	display: flex;
	flex-direction: column;
}

/* Labels, matching the Contact form: Neutral/07 at 14/600 on an 8px gap. */
.gloves-tracking-panel label,
.gloves-form-group label {
	color: var(--gloves-color-neutral-07);
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 8px;
}

/*
 * The required marker is a warning, so it takes the sale red the Contact form
 * and the product cards already use. It was an inline `#e11d48` on the two
 * carrier labels, which put a colour decision in the markup and picked a rose
 * that appears nowhere else on the site.
 */
.gloves-tracking-required {
	color: var(--gloves-color-price-sale);
	font-weight: 600;
	margin-left: 2px;
}

/*
 * Fields at the site's 4px field radius on a Neutral/03 hairline. A field is not
 * a button, so it does not take the 8px button corner.
 *
 * `!important` here beats `.woocommerce form .form-row input.input-text`, which
 * WooCommerce reaches the Order Status inputs with.
 */
.gloves-tracking-panel input[type="text"],
.gloves-tracking-panel input[type="email"],
.gloves-tracking-panel select {
	background: var(--site-color-white) !important;
	border: 1px solid var(--gloves-color-neutral-03) !important;
	border-radius: var(--gloves-radius-field) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--gloves-color-neutral-07) !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 16px !important;
	height: 48px !important;
	line-height: 1.5 !important;
	max-width: 100% !important;
	padding: 0 15px !important;
	transition: border-color 0.15s ease !important;
	width: 100% !important;
}

.gloves-tracking-panel input[type="text"]:hover,
.gloves-tracking-panel input[type="email"]:hover,
.gloves-tracking-panel select:hover {
	border-color: var(--gloves-color-neutral-04) !important;
}

/* Brand-blue ring, so the active field is obvious to a keyboard user. */
.gloves-tracking-panel input[type="text"]:focus,
.gloves-tracking-panel input[type="email"]:focus,
.gloves-tracking-panel select:focus {
	border-color: var(--site-color-brand-blue) !important;
	outline: 2px solid var(--site-color-brand-blue) !important;
	outline-offset: 1px !important;
}

.gloves-tracking-panel input::placeholder {
	color: var(--gloves-color-neutral-04);
	opacity: 1;
}

/*
 * The UPS terms checkbox reads as one line with its label, so it opts out of the
 * stacked label rule above.
 */
.gloves-checkbox-group label {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-weight: 400;
	gap: 10px;
	margin-bottom: 0;
}

.gloves-checkbox-group input[type="checkbox"] {
	accent-color: var(--site-color-brand-blue);
	flex: 0 0 auto;
	height: 16px;
	/* Sits on the first line of a label that wraps to two. */
	margin-top: 3px;
	width: 16px;
}

/*
 * Buttons.
 *
 * Brand blue at the site's button radius, the same control the hero, Shop All
 * and the Contact form's submit all draw.
 */
.gloves-tracking-panel button[type="submit"],
.gloves-tracking-panel input[type="submit"],
.gloves-form-actions button {
	background: var(--site-color-brand-blue) !important;
	border: 0 !important;
	border-radius: var(--gloves-radius-button) !important;
	box-shadow: none !important;
	color: var(--site-color-white) !important;
	cursor: pointer !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	padding: 15px 40px !important;
	transition: background-color 0.2s ease !important;
	width: auto !important;
}

.gloves-tracking-panel button[type="submit"]:hover,
.gloves-tracking-panel input[type="submit"]:hover,
.gloves-form-actions button:hover,
.gloves-tracking-panel button[type="submit"]:focus-visible,
.gloves-form-actions button:focus-visible {
	background: var(--site-color-dark-blue) !important;
	color: var(--site-color-white) !important;
}

/*
 * Order tracking — mobile.
 *
 * This has to come after the base `.gloves-tracking-panel.active` rule above
 * (the one painting the grey surface): both declare `display`, and a media
 * query adds no specificity of its own, so whichever of the two is later in
 * the file wins regardless of viewport width. Placed earlier, this collapse
 * was silently overridden at every width, mobile included.
 */
@media (max-width: 900px) {
	.gloves-tracking-panel.active {
		display: block;
	}

	.ups-status-results-box,
	.usps-status-results-box,
	.gloves-carrier-form {
		grid-column: auto;
	}
}

@media (max-width: 640px) {
	.gloves-tracking-panel .track_order {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	.gloves-tracking-header h2 {
		font-size: 28px;
	}

	.gloves-tracking-panel.active {
		padding: 24px 20px;
	}

	.gloves-tracking-tab {
		flex: 1 1 auto;
		font-size: 14px;
		padding: 0 12px;
	}

	.gloves-tracking-panel button[type="submit"],
	.gloves-form-actions button {
		width: 100% !important;
	}
}

/* Order status result
--------------------------------------------- */

/*
 * What the Order Status Lookup tab returns once a shopper submits the form.
 *
 * WooCommerce answers with the same markup the thank-you page uses — a status
 * line, the order table, then the customer's addresses. All of that is already
 * styled in this file, but every one of those rules is scoped to
 * `.woocommerce-order-received`, the body class the thank-you page carries. The
 * tracking page is an ordinary page rendering a shortcode, so it carries no such
 * class and the result came back completely unstyled: a bare table with browser
 * borders sitting inside an otherwise themed panel.
 *
 * Rather than widen forty selectors upstream, the result is dressed here against
 * the panel it appears in. Values follow the thank-you page's, so the two views
 * of the same order read alike.
 */
.gloves-tracking-panel .woocommerce-order {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/*
 * The status line, as a callout. It is the answer the shopper came for, so it
 * takes a white surface against the panel's grey and a brand-blue leading edge
 * rather than sitting as another paragraph.
 */
.gloves-tracking-panel p.woocommerce-thankyou-order-received,
.gloves-tracking-panel .woocommerce-thankyou-order-received {
	background: var(--site-color-white);
	border-left: 3px solid var(--site-color-brand-blue);
	border-radius: 0 var(--gloves-radius-field) var(--gloves-radius-field) 0;
	color: var(--gloves-color-neutral-07);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 20px;
	line-height: 1.45;
	margin: 0;
	padding: 18px 22px;
}

/* The status word itself, which WooCommerce emits as a `mark`. */
.gloves-tracking-panel .woocommerce-thankyou-order-received mark,
.gloves-tracking-panel mark.order-status {
	background: none;
	color: var(--site-color-brand-blue);
	font-weight: 600;
}

.gloves-tracking-panel .woocommerce-order-details__title,
.gloves-tracking-panel .woocommerce-column__title {
	color: var(--site-color-dark-charcoal, #141718);
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.2px;
	line-height: 1.3;
	margin: 0 0 14px;
}

/*
 * The order summary strip. WooCommerce floats these as dashed-separated items at
 * 0.715em, which is close to unreadable; they become cards, as on the thank-you
 * page.
 */
.gloves-tracking-panel ul.order_details {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The float clearfix would become a grid item and take the first cell. */
.gloves-tracking-panel ul.order_details::before,
.gloves-tracking-panel ul.order_details::after {
	content: none;
}

.gloves-tracking-panel ul.order_details li {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-color-neutral-03);
	border-radius: var(--gloves-radius-field);
	color: var(--gloves-color-neutral-04);
	float: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 14px 16px;
	text-transform: uppercase;
}

.gloves-tracking-panel ul.order_details li strong {
	color: var(--gloves-color-neutral-07);
	display: block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	margin-top: 6px;
	text-transform: none;
}

/* A long table scrolls inside its own box rather than widening the panel. */
.gloves-tracking-panel .woocommerce-order-details,
.gloves-tracking-panel .woocommerce-customer-details {
	margin: 0;
	max-width: 100%;
	overflow-x: auto;
}

.gloves-tracking-panel table.shop_table {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-color-neutral-03);
	border-collapse: collapse;
	border-radius: var(--gloves-radius-field);
	margin: 0;
	overflow: hidden;
	width: 100%;
}

.gloves-tracking-panel table.shop_table th {
	background: var(--site-color-display-grey, #f5f5f5);
	border: 0;
	color: var(--gloves-color-neutral-07);
	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 14px 20px;
	text-align: left;
	text-transform: uppercase;
}

.gloves-tracking-panel table.shop_table td {
	border: 0;
	border-top: 1px solid var(--gloves-color-neutral-03);
	color: var(--gloves-color-neutral-07);
	font-size: 15px;
	padding: 16px 20px;
	vertical-align: top;
}

.gloves-tracking-panel table.shop_table td.product-total,
.gloves-tracking-panel table.shop_table th.product-total,
.gloves-tracking-panel table.shop_table tfoot td,
.gloves-tracking-panel table.shop_table tfoot th {
	text-align: right;
	white-space: nowrap;
}

.gloves-tracking-panel table.shop_table tfoot th {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}

/* The final row is the amount charged, so it carries the emphasis. */
.gloves-tracking-panel table.shop_table tfoot tr:last-child th,
.gloves-tracking-panel table.shop_table tfoot tr:last-child td {
	font-size: 16px;
	font-weight: 700;
}

.gloves-tracking-panel table.shop_table .product-name a {
	color: var(--gloves-color-neutral-07);
	font-weight: 500;
	text-decoration: none;
}

.gloves-tracking-panel table.shop_table .product-name a:hover,
.gloves-tracking-panel table.shop_table .product-name a:focus-visible {
	color: var(--site-color-brand-blue);
	text-decoration: underline;
}

.gloves-tracking-panel table.shop_table .product-quantity {
	color: var(--gloves-color-neutral-04);
	font-weight: 500;
}

/*
 * Item meta under each line. WooCommerce floats the `dt`, which stacks the pair
 * into two ragged columns; they read as one line each instead.
 */
.gloves-tracking-panel .wc-item-meta {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.gloves-tracking-panel .wc-item-meta li {
	color: var(--gloves-color-neutral-04);
	font-size: 14px;
	margin: 0;
}

.gloves-tracking-panel .wc-item-meta strong {
	color: var(--gloves-color-neutral-04);
	display: inline;
	float: none;
	font-weight: 600;
	margin-right: 4px;
}

.gloves-tracking-panel .wc-item-meta p {
	display: inline;
	font-size: 14px;
	margin: 0;
}

/*
 * Customer details. WooCommerce clears its own floats here with
 * `::before`/`::after`, which would each take a grid cell.
 */
.gloves-tracking-panel .woocommerce-columns--addresses {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.gloves-tracking-panel .woocommerce-columns--addresses::before,
.gloves-tracking-panel .woocommerce-columns--addresses::after {
	content: none;
}

.gloves-tracking-panel .woocommerce-columns--addresses .woocommerce-column {
	background: var(--site-color-white);
	border: 1px solid var(--gloves-color-neutral-03);
	border-radius: var(--gloves-radius-field);
	float: none;
	padding: 20px 22px;
	width: auto;
}

.gloves-tracking-panel address {
	border: 0;
	color: var(--gloves-color-neutral-07);
	font-size: 15px;
	font-style: normal;
	line-height: 1.7;
	margin: 0;
	padding: 0;
}

/* Order status result — mobile */
@media (max-width: 640px) {
	.gloves-tracking-panel p.woocommerce-thankyou-order-received,
	.gloves-tracking-panel .woocommerce-thankyou-order-received {
		font-size: 18px;
		padding: 16px 18px;
	}

	.gloves-tracking-panel table.shop_table th,
	.gloves-tracking-panel table.shop_table td {
		padding: 12px 14px;
	}
}

/*
 * Single Post Comment Section & Comment Form
 *
 * Scoped strictly under `.gloves-post` (single-post.php) so that these styles
 * do not affect WooCommerce product reviews or any other pages on the site.
 */
.gloves-post .comments-area {
	border-top: 1px solid var(--gloves-color-neutral-03, #e8ecef);
	margin-top: 48px;
	padding-top: 40px;
}

.gloves-post .comments-area .comments-title,
.gloves-post .comments-area .comment-reply-title {
	color: var(--gloves-color-neutral-07, #141718);
	font-family: Inter, Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.3;
	margin: 0 0 16px 0;
}

.gloves-post .comments-area .comment-reply-title small {
	font-size: 14px;
	font-weight: 400;
	margin-left: 12px;
}

.gloves-post .comments-area #cancel-comment-reply-link {
	color: var(--gloves-color-price-sale, #d12023);
	text-decoration: underline;
}

.gloves-post .comments-area #cancel-comment-reply-link:hover,
.gloves-post .comments-area #cancel-comment-reply-link:focus-visible {
	color: var(--site-color-dark-blue, #003d80);
}

/* Comment Form Notes */
.gloves-post .comments-area .comment-notes {
	color: var(--gloves-color-neutral-04, #6c7275);
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 24px;
}

.gloves-post .comments-area .required {
	color: var(--gloves-color-price-sale, #d12023);
}

/* Comment Form Layout & Grid */
.gloves-post .comments-area .comment-form {
	display: grid;
	gap: 16px 20px;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 16px;
}

.gloves-post .comments-area .comment-form .comment-notes,
.gloves-post .comments-area .comment-form .comment-form-comment,
.gloves-post .comments-area .comment-form .comment-form-url,
.gloves-post .comments-area .comment-form .comment-form-cookies-consent,
.gloves-post .comments-area .comment-form .form-submit,
.gloves-post .comments-area .comment-form .logged-in-as {
	grid-column: 1 / -1;
}

.gloves-post .comments-area .comment-form .comment-form-author,
.gloves-post .comments-area .comment-form .comment-form-email {
	grid-column: span 1;
}

.gloves-post .comments-area .comment-form p {
	margin: 0;
}

.gloves-post .comments-area .comment-form label {
	color: var(--gloves-color-neutral-07, #141718);
	display: block;
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.gloves-post .comments-area .comment-form input[type="text"],
.gloves-post .comments-area .comment-form input[type="email"],
.gloves-post .comments-area .comment-form input[type="url"],
.gloves-post .comments-area .comment-form textarea {
	background-color: var(--site-color-white, #ffffff);
	border: 1px solid var(--gloves-border-strong, #b5b5b5);
	border-radius: var(--gloves-radius-field, 4px);
	box-sizing: border-box;
	color: var(--gloves-color-neutral-07, #141718);
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	padding: 10px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.gloves-post .comments-area .comment-form input[type="text"]:focus,
.gloves-post .comments-area .comment-form input[type="email"]:focus,
.gloves-post .comments-area .comment-form input[type="url"]:focus,
.gloves-post .comments-area .comment-form textarea:focus {
	border-color: var(--site-color-brand-blue, #0056b3);
	box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
	outline: none;
}

.gloves-post .comments-area .comment-form textarea {
	min-height: 130px;
	resize: vertical;
}

/* Cookies Consent Checkbox */
.gloves-post .comments-area .comment-form-cookies-consent {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.gloves-post .comments-area .comment-form-cookies-consent input[type="checkbox"] {
	accent-color: var(--site-color-brand-blue, #0056b3);
	cursor: pointer;
	flex-shrink: 0;
	height: 18px;
	margin-top: 2px;
	width: 18px;
}

.gloves-post .comments-area .comment-form-cookies-consent label {
	color: var(--gloves-color-neutral-04, #6c7275);
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin-bottom: 0;
}

/* Submit Button */
.gloves-post .comments-area .form-submit {
	margin-top: 8px;
}

.gloves-post .comments-area .comment-form input[type="submit"],
.gloves-post .comments-area .comment-form .submit {
	background-color: var(--site-color-brand-blue, #141718);
	border: 0;
	border-radius: var(--gloves-radius-button, 8px);
	color: var(--site-color-white, #ffffff);
	cursor: pointer;
	display: inline-flex;
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
	line-height: 1;
	padding: 13px 28px;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.gloves-post .comments-area .comment-form input[type="submit"]:hover,
.gloves-post .comments-area .comment-form input[type="submit"]:focus-visible,
.gloves-post .comments-area .comment-form .submit:hover,
.gloves-post .comments-area .comment-form .submit:focus-visible {
	background-color: var(--site-color-dark-blue, #003d80);
	color: var(--site-color-white, #ffffff);
}

/* Comments List Styling */
.gloves-post .comments-area .comment-list {
	list-style: none;
	margin: 0 0 36px 0;
	padding: 0;
}

.gloves-post .comments-area .comment-list .comment {
	border-bottom: 1px solid var(--gloves-color-neutral-03, #e8ecef);
	padding: 20px 0;
}

.gloves-post .comments-area .comment-list .comment-body {
	position: relative;
}

.gloves-post .comments-area .comment-list .comment-meta {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}

.gloves-post .comments-area .comment-list .avatar {
	border-radius: 50%;
	height: 40px;
	width: 40px;
}

.gloves-post .comments-area .comment-list .fn {
	color: var(--gloves-color-neutral-07, #141718);
	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
}

.gloves-post .comments-area .comment-list .comment-metadata {
	color: var(--gloves-color-neutral-04, #6c7275);
	font-size: 13px;
}

.gloves-post .comments-area .comment-list .comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.gloves-post .comments-area .comment-list .comment-metadata a:hover {
	text-decoration: underline;
}

.gloves-post .comments-area .comment-list .comment-content {
	color: var(--gloves-color-neutral-07, #141718);
	font-size: 15px;
	line-height: 1.6;
}

.gloves-post .comments-area .comment-list .reply a {
	color: var(--site-color-brand-blue, #0056b3);
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	margin-top: 8px;
	text-decoration: none;
}

.gloves-post .comments-area .comment-list .reply a:hover {
	text-decoration: underline;
}

.gloves-post .comments-area .comment-list .children {
	border-left: 2px solid var(--gloves-color-neutral-03, #e8ecef);
	list-style: none;
	margin-left: 24px;
	padding-left: 16px;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
	.gloves-post .comments-area .comment-form {
		grid-template-columns: 1fr;
	}

	.gloves-post .comments-area .comment-form .comment-form-author,
	.gloves-post .comments-area .comment-form .comment-form-email {
		grid-column: 1 / -1;
	}

	.gloves-post .comments-area .comment-form input[type="submit"],
	.gloves-post .comments-area .comment-form .submit {
		width: 100%;
	}
}