/*
Theme Name: Out Of Body
Description: Block theme for Out Of Body Jewellery. No jQuery.
Version: 1.0.38
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oob
Update URI: https://github.com/mattdemarillac/oobj-blocks-theme
*/

/* Most styling lives in theme.json. Keep this file for what theme.json can't express. */

/* Header logo (patterns/logo.php) */
.oob-logo {
	display: block;
	width: 400px;
	max-width: 100%;
	margin: 0 auto;
}

.oob-logo img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

/* Header icon row */
.oob-header__actions {
	gap: 0.75rem;
}

.oob-header__actions .wp-block-search__button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
}

/* Category sidebar: nested categories indented, with a "+" marker */
.oob-sidebar .wc-block-product-categories-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.5px;
}

.oob-sidebar .wc-block-product-categories-list .wc-block-product-categories-list {
	padding-left: 1rem;
}

/* A row: marker, then the name. A long name wraps under itself, not under the marker; subcategories
   take the next line. */
.oob-sidebar .wc-block-product-categories-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	padding: 0.2rem 0;
}

.oob-sidebar .wc-block-product-categories-list-item::before {
	content: "+";
	flex: none;
	margin-right: 0.4rem;
}

.oob-sidebar .wc-block-product-categories-list-item > a {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.oob-sidebar .wc-block-product-categories-list-item > .wc-block-product-categories-list {
	flex-basis: 100%;
}

.oob-sidebar .wc-block-product-categories-list-item > a:hover {
	color: var(--wp--preset--color--primary);
}

/* Sidebar headings: a small label, as in the mobile menu (.oob-mobile-menu__heading) */
.oob-sidebar h2 {
	margin: 0 0 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13px;
}

.oob-sidebar * + h2 {
	margin-top: 2rem;
}

/* Outline buttons (the Button block's "Outline" style): the theme's pill, outlined in the text colour and
   filled on hover, like the testimonial form's submit button. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.6rem - 2px) calc(1.6rem - 2px);
	border: 2px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* A pencil before a button's label: add the oob-icon-pen class to the Button block. Painted in the text
   colour, so it follows the button's hover colours. */
.wp-block-button.oob-icon-pen > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wp-block-button.oob-icon-pen > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Footer menus */
.oob-footer .wp-block-navigation {
	--navigation-layout-direction: column;
	font-size: var(--wp--preset--font-size--medium);
}

.oob-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

/* The brand cyan darkened to the closest shade readable on white (4.5:1); the cyan itself is 1.8:1. */
.oob-footer__copyright .cp {
	color: #1a8291;
}

/* Product cards: left-aligned and compact */
.wc-block-product-template .wp-block-post-title {
	margin-top: 0.75rem;
}

.wc-block-product-template .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wc-block-product-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Sticky header. Position support only works on top-level
   template blocks, so the template part's own <header> gets it here. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	/* Stays in place during a page transition (below). */
	view-transition-name: oob-header;
}

/* Page transitions: going to another page of the site crossfades instead of flashing blank, which
   with prerendered pages (OOB_Speculative_Loading) makes it feel instant. Browsers without
   cross-document view transitions load pages as before. */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* The footer is below the fold on every page: the browser skips laying it out and painting it until
   it nears the viewport. The sizes are its measured heights, which keep the scrollbar steady. */
footer.wp-block-template-part {
	content-visibility: auto;
	contain-intrinsic-size: auto 724px;
}

@media (min-width: 782px) {
	footer.wp-block-template-part {
		contain-intrinsic-size: auto 409px;
	}
}

@media (max-width: 781px) {
	.oob-desktop-only {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.oob-mobile-only {
		display: none !important;
	}
}

.oob-sidebar .wc-block-product-categories.is-dropdown {
	margin-bottom: var(--wp--preset--spacing--30);
}

.oob-sidebar .wc-block-product-filters {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Heading style: Divider */
.is-style-oob-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}

.is-style-oob-divider::before,
.is-style-oob-divider::after {
	content: "";
	width: 60px;
	border-top: 2px solid currentColor;
}


/* ---------------------------------------------------------------------------------------------
   Header icons: 18px social, 24px line icons in muted grey, cart count badge
   --------------------------------------------------------------------------------------------- */
/* The header's icons: Pe-icon-7-stroke (search, account, bag), FontAwesome 4.7 (Facebook,
   Instagram) and a three-bar hamburger, without loading either icon font. The blocks draw their
   own SVGs; here their shapes are hidden and the SVG is painted in the text colour through the
   icon as a mask. Blocks outside the header (e.g. the footer's social buttons) keep theirs. */
.oob-header :is(.search-icon, .wc-block-customer-account__account-icon, .wc-block-mini-cart__icon, .wp-social-link svg, .wp-block-navigation__responsive-container-open svg) {
	background: currentColor;
	-webkit-mask: var(--oob-glyph) center / contain no-repeat;
	mask: var(--oob-glyph) center / contain no-repeat;
}

.oob-header :is(.search-icon, .wc-block-customer-account__account-icon, .wc-block-mini-cart__icon, .wp-social-link svg, .wp-block-navigation__responsive-container-open svg) > * {
	display: none;
}

.oob-header .search-icon {
	--oob-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 480)' d='M457.463 43.639l-116.205 116.217c23.358 28.089 37.419 64.167 37.419 103.543 0 89.515-72.554 162.070-162.070 162.070-89.498 0-162.070-72.555-162.070-162.070 0-89.498 72.572-162.070 162.070-162.070 39.385 0 75.454 14.061 103.543 37.419l116.205-116.217 21.108 21.108zM71.597 263.399c0 79.96 65.041 145.010 145.010 145.010 79.953 0 145.010-65.050 145.010-145.010s-65.057-145.010-145.010-145.010c-79.969 0-145.010 65.050-145.010 145.010z'/%3E%3C/svg%3E");
}

.oob-header .wc-block-customer-account__account-icon {
	--oob-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 480)' d='M256 428.722c-113.073 0-204.72-91.647-204.72-204.72s91.647-204.723 204.72-204.723 204.72 91.651 204.72 204.723c0 113.073-91.647 204.72-204.72 204.72zM256 411.662c103.477 0 187.66-84.183 187.66-187.66 0-45.524-16.31-87.307-43.383-119.836-18.71 7.813-62.875 23.141-90.215 31.213-2.332 0.733-2.699 0.85-2.699 10.554 0 8.014 3.299 16.085 6.514 22.916 3.482 7.422 7.613 19.901 9.096 31.096 4.148 4.815 9.796 14.312 13.428 32.412 3.182 15.953 1.699 21.758-0.416 27.206-0.217 0.575-0.45 1.141-0.617 1.708-0.8 3.74 0.299 23.174 3.032 38.252 1.883 10.346-0.484 32.346-14.728 50.546-8.997 11.504-26.207 25.623-57.644 27.589l-17.243-0.016c-30.905-1.95-48.131-16.069-57.128-27.573-14.244-18.2-16.61-40.2-14.727-50.539 2.748-15.085 3.832-34.519 3.049-38.185-0.166-0.641-0.4-1.208-0.633-1.783-2.099-5.448-3.599-11.254-0.4-27.206 3.615-18.101 9.263-27.597 13.428-32.412 1.466-11.196 5.598-23.674 9.096-31.096 2.549-5.431 3.749-12.82 3.749-23.266 0-9.705-0.367-9.821-2.55-10.512-28.272-8.347-73.271-24.607-90.048-31.954-27.604 32.679-44.281 74.862-44.281 120.886 0 103.476 84.183 187.66 187.66 187.66zM124.984 89.817c19.21 7.842 57.511 21.504 82.668 28.935 14.628 4.615 14.628 16.935 14.628 26.831 0 8.205-0.566 20.301-5.365 30.53-3.299 7.006-7.065 19.018-7.897 28.422-0.183 2.199-1.216 4.232-2.882 5.681-2.416 2.116-7.331 9.863-10.463 25.49-2.482 12.37-1.432 15.078-0.416 17.693 0.433 1.117 0.85 2.216 1.183 3.457 2.049 7.488-0.234 32.087-2.716 45.732-1.082 5.931 0.283 22.783 11.379 36.978 9.946 12.72 25.007 19.809 44.216 21.033l16.177 0.017c19.726-1.241 34.786-8.33 44.749-21.050 11.096-14.195 12.445-31.047 11.362-36.985-2.466-13.637-4.765-38.236-2.716-45.716 0.351-1.25 0.75-2.349 1.183-3.466 1.017-2.615 2.066-5.323-0.4-17.693-3.131-15.627-8.063-23.374-10.479-25.49-1.649-1.449-2.682-3.482-2.882-5.681-0.816-9.404-4.581-21.416-7.88-28.422-3.782-8.039-8.13-18.743-8.13-30.18 0-9.897 0-22.216 14.777-26.873 24.074-7.114 62.559-20.334 82.884-28.326-33.936-33.604-80.567-54.396-131.964-54.396-50.93 0-97.162 20.425-131.016 53.479z'/%3E%3C/svg%3E");
}

.oob-header .wc-block-mini-cart__icon {
	--oob-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 480)' d='M51.28 428.72v-409.44h409.44v409.44h-409.44zM443.66 36.34h-375.32v375.32h375.32v-375.32zM145.093 266.65c0-61.251 49.656-110.89 110.899-110.89s110.881 49.639 110.881 110.89v59.71h17.077v17.060h-51.18v-17.060h17.043v-59.71c0-51.738-42.091-93.83-93.821-93.83-51.746 0-93.839 42.092-93.839 93.83v59.71h17.077v17.060h-51.18v-17.060h17.043v-59.71z'/%3E%3C/svg%3E");
}

.oob-header .wp-social-link-facebook svg {
	--oob-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='matrix(1 0 0 -1 0 1536)' d='M1248 1408q119 0 203.5 -84.5t84.5 -203.5v-960q0 -119 -84.5 -203.5t-203.5 -84.5h-188v595h199l30 232h-229v148q0 56 23.5 84t91.5 28l122 1v207q-63 9 -178 9q-136 0 -217.5 -80t-81.5 -226v-171h-200v-232h200v-595h-532q-119 0 -203.5 84.5t-84.5 203.5v960 q0 119 84.5 203.5t203.5 84.5h960z'/%3E%3C/svg%3E");
}

.oob-header .wp-social-link-instagram svg {
	--oob-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='matrix(1 0 0 -1 0 1536)' d='M1024 640q0 106 -75 181t-181 75t-181 -75t-75 -181t75 -181t181 -75t181 75t75 181zM1162 640q0 -164 -115 -279t-279 -115t-279 115t-115 279t115 279t279 115t279 -115t115 -279zM1270 1050q0 -38 -27 -65t-65 -27t-65 27t-27 65t27 65t65 27t65 -27t27 -65zM768 1270 q-7 0 -76.5 0.5t-105.5 0t-96.5 -3t-103 -10t-71.5 -18.5q-50 -20 -88 -58t-58 -88q-11 -29 -18.5 -71.5t-10 -103t-3 -96.5t0 -105.5t0.5 -76.5t-0.5 -76.5t0 -105.5t3 -96.5t10 -103t18.5 -71.5q20 -50 58 -88t88 -58q29 -11 71.5 -18.5t103 -10t96.5 -3t105.5 0t76.5 0.5 t76.5 -0.5t105.5 0t96.5 3t103 10t71.5 18.5q50 20 88 58t58 88q11 29 18.5 71.5t10 103t3 96.5t0 105.5t-0.5 76.5t0.5 76.5t0 105.5t-3 96.5t-10 103t-18.5 71.5q-20 50 -58 88t-88 58q-29 11 -71.5 18.5t-103 10t-96.5 3t-105.5 0t-76.5 -0.5zM1536 640q0 -229 -5 -317 q-10 -208 -124 -322t-322 -124q-88 -5 -317 -5t-317 5q-208 10 -322 124t-124 322q-5 88 -5 317t5 317q10 208 124 322t322 124q88 5 317 5t317 -5q208 -10 322 -124t124 -322q5 -88 5 -317z'/%3E%3C/svg%3E");
}

.oob-header .wp-block-navigation__responsive-container-open svg {
	--oob-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Crect width='20' height='2'/%3E%3Crect y='7' width='30' height='2'/%3E%3Crect y='14' width='25' height='2'/%3E%3C/svg%3E");
}

.oob-header .oob-header__start > .wp-block-social-links {
	font-size: 18px;
}

/* FontAwesome glyphs are 1536 units wide on a 1792 unit em. */
.oob-header .wp-block-social-links .wp-social-link svg {
	width: 0.857em;
	height: 1em;
}

.oob-header__actions {
	gap: 12px;
	align-items: center;
}

.oob-header__actions > *,
.oob-header__actions .wp-block-search__inside-wrapper,
.oob-header__actions .wp-block-search__button,
.oob-header__actions .wc-block-customer-account__link,
.oob-header__actions .wc-block-mini-cart__button {
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	line-height: 1;
}

.oob-header__actions svg {
	fill: currentColor;
	color: var(--wp--preset--color--muted);
}

/* Pe-icon-7-stroke line icons at 24px. */
.oob-header__actions :is(.search-icon, .wc-block-customer-account__account-icon, .wc-block-mini-cart__icon) {
	width: 24px !important;
	height: 24px !important;
}

/* Opened search: a full-width bar under the header with a large search field. The
   ancestors are made static so the field positions against the header itself. */
.oob-header {
	position: relative;
}

.oob-header .wp-block-columns,
.oob-header .wp-block-column,
.oob-header .oob-header__actions,
.oob-header .wp-block-search,
.oob-header .wp-block-search__inside-wrapper {
	position: static;
}

.oob-header .wp-block-search__button-only .wp-block-search__inside-wrapper {
	width: auto !important;
	min-width: 0;
}

.oob-header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	position: absolute;
	z-index: 101;
	top: 100%;
	left: 0;
	right: 0;
	width: 100% !important;
	max-width: none;
	height: 72px;
	margin: 0;
	padding: 0 max(16px, calc((100% - 1170px) / 2));
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 22px;
	opacity: 1;
}

.oob-header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.oob-header .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
}

.oob-header__actions a:hover svg,
.oob-header__actions button:hover svg {
	color: var(--wp--preset--color--primary);
}

.oob-header__actions .wp-block-search__inside-wrapper {
	padding: 0;
	border: 0;
}

.oob-header__actions .wp-block-search__button {
	margin: 0;
	padding: 0;
	min-width: 0;
	height: auto;
	border: 0;
	background: none;
}

.oob-header__actions .wc-block-customer-account__link {
	padding: 0;
}

.oob-header__actions .wc-block-mini-cart__button {
	padding: 0;
}

.oob-header__actions .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
	border: 0;
	min-width: 18px;
	height: 18px;
	font-size: 11px;
	transform: translate(-30%, -40%);
}

/* The closed cart drawer is only slid off the screen, so its buttons and links could still be
   tabbed to. Hidden once it has slid out (0.3s, WooCommerce's transition); shown at once on opening. */
.wc-block-components-drawer__screen-overlay .wc-block-components-drawer {
	transition: transform 0.3s, visibility 0s;
}

.wc-block-components-drawer__screen-overlay--is-hidden .wc-block-components-drawer {
	visibility: hidden;
	transition: transform 0.3s, visibility 0s 0.3s;
}

/* WooCommerce sets the cart title against the top edge (-2px), clipping it; level with the close button. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	margin-top: 12px;
}

/* ---------------------------------------------------------------------------------------------
   Product grids: fixed square image box, so a missing/slow image can't stretch the row
   --------------------------------------------------------------------------------------------- */
.wc-block-product-template .wc-block-components-product-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.wc-block-product-template .wc-block-components-product-image a,
.wc-block-product-template .wc-block-components-product-image img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}

/* ---------------------------------------------------------------------------------------------
   Page head banner: category or featured image, dark overlay, centred title
   --------------------------------------------------------------------------------------------- */
.oob-page-head {
	position: relative;
	isolation: isolate;
	margin-top: 0;
	padding: 50px 15px;
	text-align: center;
	color: #ededed;
	background-color: #555;
}

/* The banner image (render.php), covering the block behind the dark overlay and the title. Two classes
   to beat WooCommerce's `.woocommerce img { height: auto }`. */
.oob-page-head .oob-page-head__image {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oob-page-head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.oob-page-head__inner {
	position: relative;
	max-width: 1170px;
	margin: 0 auto;
}

.oob-page-head__title {
	margin: 0;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.2;
}

.oob-page-head__description,
.oob-page-head__description p {
	margin: 5px 0 0;
	color: #ededed;
}

.oob-page-head a {
	color: #fff;
}

/* ---------------------------------------------------------------------------------------------
   My Account (templates/page-my-account.html): login / register columns, light inputs,
   outlined pill buttons
   --------------------------------------------------------------------------------------------- */
.woocommerce-account main .woocommerce {
	max-width: 1110px;
}

.woocommerce-account #customer_login {
	display: flex;
	gap: 32px;
}

.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	display: none;
}

.woocommerce-account #customer_login > .col-1,
.woocommerce-account #customer_login > .col-2 {
	flex: 1;
	float: none;
	width: auto;
}

.woocommerce-account #customer_login h2 {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce-account .woocommerce form .form-row {
	margin: 0 0 20px;
	padding: 0;
}

.woocommerce-account .woocommerce form .form-row label {
	margin-bottom: 5px;
	color: var(--wp--preset--color--muted);
	line-height: 2;
}

.woocommerce-account .woocommerce form .form-row .required {
	color: #fc655e;
}

.woocommerce-account .woocommerce form .input-text {
	height: 40px;
	padding: 0 15px;
	border: 1px solid #ccc;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-size: 13px;
	box-shadow: none;
}

.woocommerce-account .woocommerce form .input-text:focus {
	border-color: var(--wp--preset--color--contrast);
	outline: 0;
}

/* WooCommerce draws the eye black; a light grey suits the light inputs. The padding takes the 22px
   button to the 24px a touch target needs. */
.woocommerce-account .woocommerce form .show-password-input {
	opacity: 0.3;
	padding: 1px;
}

.woocommerce-account .woocommerce form .show-password-input:hover {
	opacity: 0.6;
}

/* Remember me on the left, Log in on the right. */
.woocommerce-account .woocommerce form.login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	align-items: center;
}

.woocommerce-account .woocommerce form.login .woocommerce-form-login__submit {
	margin-left: auto;
}

.woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.woocommerce-account .woocommerce form .form-row:has(.woocommerce-form-register__submit) {
	text-align: right;
}

/* Form buttons only; the orders table and notices keep WooCommerce's buttons. */
.woocommerce-account .woocommerce form p .button {
	float: none;
	height: 40px;
	margin: 0;
	padding: 0 34px;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 40px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 36px;
}

.woocommerce-account .woocommerce form p .button:hover,
.woocommerce-account .woocommerce form p .button:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.woocommerce-account .woocommerce .lost_password a {
	color: var(--wp--preset--color--contrast);
}

.woocommerce-account .woocommerce-privacy-policy-text p {
	margin: 0 0 20px;
}

@media (max-width: 767px) {
	.woocommerce-account #customer_login {
		flex-direction: column;
		gap: 40px;
	}
}

/* ---------------------------------------------------------------------------------------------
   Cart notification toast (assets/js/cart-notifications.js). Above the cart drawer (z-index 9999),
   bottom left, clear of the drawer. Only shown from 900px wide, where it fits beside the drawer.
   --------------------------------------------------------------------------------------------- */
.oob-toast {
	box-sizing: border-box;
	position: fixed;
	z-index: 100000;
	bottom: 24px;
	left: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(360px, calc(100vw - 32px));
	padding: 12px 40px 12px 12px;
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.oob-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.oob-toast__image {
	display: none;
	flex: none;
	width: 48px;
	height: 48px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.oob-toast.has-image .oob-toast__image {
	display: block;
}

.oob-toast__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oob-toast__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.oob-toast__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.oob-toast__title::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Removed: a grey minus instead of the coloured tick. */
.oob-toast.is-removed {
	border-left-color: var(--wp--preset--color--muted);
}

.oob-toast.is-removed .oob-toast__title::before {
	background: var(--wp--preset--color--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.oob-toast__name {
	overflow: hidden;
	color: var(--wp--preset--color--contrast);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oob-toast__detail {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
}

.oob-toast__name:empty,
.oob-toast__detail:empty {
	display: none;
}

.oob-toast__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.oob-toast__close:hover {
	color: var(--wp--preset--color--contrast);
}

@media (prefers-reduced-motion: reduce) {
	.oob-toast,
	.oob-toast.is-visible {
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------------------------
   Progress toward discounted shipping (assets/js/shipping-progress.js): above the cart and
   checkout, and above the mini cart's subtotal
   --------------------------------------------------------------------------------------------- */
.oob-shipping-progress {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: 14px;
}

.oob-shipping-progress[hidden] {
	display: none;
}

.oob-shipping-progress__message {
	margin: 0 0 10px;
	line-height: 1.4;
}

.oob-shipping-progress__message strong {
	font-weight: 600;
}

.oob-shipping-progress.is-reached .oob-shipping-progress__message::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.oob-shipping-progress__track {
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: #e2e2e6;
}

.oob-shipping-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 3px;
	background: var(--wp--preset--color--primary);
	transition: width 0.4s ease;
}

.oob-shipping-progress--mini-cart {
	margin: 0 16px 16px;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.oob-shipping-progress__fill {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------------------------
   Subcategory tiles: masonry via CSS columns, dark label (site's custom CSS look)
   --------------------------------------------------------------------------------------------- */
.oob-subcategories {
	column-count: 4;
	column-gap: 20px;
	margin-bottom: var(--wp--preset--spacing--50);
}

.oob-subcategory {
	position: relative;
	display: block;
	margin-bottom: 20px;
	overflow: hidden;
	break-inside: avoid;
}

.oob-subcategory img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s;
}

.oob-subcategory:hover img {
	transform: scale(1.1);
}

.oob-subcategory__label {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	min-width: 60%;
	padding: 10px 14px;
	background: #32373c;
	color: #f6f7f7;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.3;
}

.oob-subcategory__label::after {
	content: " ›";
}

@media (max-width: 781px) {
	.oob-subcategories {
		column-count: 2;
	}
}

/* ---------------------------------------------------------------------------------------------
   Category summary: the category's facts, below its products. A shaded card: a line on the range,
   styles, materials and gauges as tags, best sellers as small product cards.
   --------------------------------------------------------------------------------------------- */
.oob-category-summary {
	scroll-margin-top: 80px;
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border-radius: 4px;
}

.oob-category-summary__title {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.oob-category-summary__lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

.oob-category-summary__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.oob-category-summary__label {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.oob-category-summary__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oob-category-summary__tags li {
	padding: 0.3rem 0.75rem;
	background: var(--wp--preset--color--base);
	border-radius: 40px;
	font-size: var(--wp--preset--font-size--small);
}

.oob-category-summary__more {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.oob-category-summary__best {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.oob-category-summary__best a {
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-template-rows: auto auto;
	align-content: center;
	column-gap: 0.75rem;
	height: 100%;
	padding: 0.6rem;
	background: var(--wp--preset--color--base);
	border-radius: 4px;
	color: inherit;
}

.oob-category-summary__best img {
	grid-row: span 2;
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.oob-category-summary__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.oob-category-summary__best a:hover .oob-category-summary__name {
	text-decoration: underline;
}

.oob-category-summary__price {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781px) {
	.oob-category-summary__best {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------------------------
   Shop toolbar + filter panel. The panel is a native <details>; open, it overlays the products
   so a long attribute list can't push the layout around.
   --------------------------------------------------------------------------------------------- */
.oob-shop-toolbar {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--40);
}

.oob-shop-toolbar .wc-block-product-results-count p,
.oob-shop-toolbar .woocommerce-result-count {
	margin: 0;
}

.oob-filter-toggle {
	position: static;
}

.oob-filter-toggle > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.oob-filter-toggle > summary::-webkit-details-marker {
	display: none;
}

.oob-filter-toggle > summary::before {
	content: "";
	width: 18px;
	height: 14px;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 50% / 70% 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 100% / 40% 2px no-repeat;
}

.oob-filter-toggle[open] > .oob-shop-filters {
	position: absolute;
	z-index: 50;
	top: calc(100% + 10px);
	left: 0;
	box-sizing: border-box;
	width: min(420px, calc(100vw - 32px));
	max-height: 70vh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.oob-shop-filters {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}

.oob-shop-filters__field {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.oob-shop-filters label,
.oob-shop-filters legend {
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.oob-shop-filters select,
.oob-shop-filters input[type="number"] {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #999;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.oob-shop-filters__price {
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.oob-shop-filters__price legend {
	margin-bottom: 0.4rem;
}

.oob-shop-filters__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.oob-shop-filters__actions .wp-element-button {
	padding: 0.6rem 1.8rem;
}

.oob-shop-filters__clear {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
}


/* ---------------------------------------------------------------------------------------------
   Product page
   --------------------------------------------------------------------------------------------- */
.oob-breadcrumb-bar {
	margin-top: 0;
}

.oob-breadcrumb-bar .wc-block-breadcrumbs {
	margin: 0;
}

.oob-product-summary .wp-block-post-title {
	font-weight: 600;
	margin-top: 0;
}

.oob-product-summary .wc-block-components-product-price {
	color: var(--wp--preset--color--contrast);
}

/* Attribute name above the dropdown, uppercase */
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute select {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #999;
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.oob-add-to-cart-row {
	gap: 12px;
}

.oob-add-to-cart-row .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 40px;
	overflow: hidden;
}

.oob-add-to-cart-row .wc-block-components-quantity-selector::after {
	display: none;
}

/* Dark text: white on the primary blue is under 2:1. */
.oob-add-to-cart-row .wp-block-button__link,
.oob-add-to-cart-row .wc-block-components-product-button__button {
	border-radius: 40px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	text-transform: uppercase;
	padding: 0.7rem 2rem;
}

.oob-add-to-cart-row .wp-block-button__link:hover,
.oob-add-to-cart-row .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Until a variation is chosen. WooCommerce fades the button to half opacity, which fades the text
   too; a paler blue keeps the text readable. */
.oob-add-to-cart-row .wc-block-components-product-button__button.disabled,
.oob-add-to-cart-row .wc-block-components-product-button__button.disabled:hover,
.wc-block-add-to-cart-with-options.is-invalid .oob-add-to-cart-row .wc-block-components-product-button__button {
	opacity: 1;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
}

/* Description / Additional information tabs: centred pills, panels hidden until chosen */
.woocommerce-tabs {
	margin-top: var(--wp--preset--spacing--50);
}

.woocommerce-tabs ul.wc-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-tabs ul.wc-tabs::before,
.woocommerce-tabs ul.wc-tabs::after,
.woocommerce-tabs ul.wc-tabs li::before,
.woocommerce-tabs ul.wc-tabs li::after {
	display: none !important;
}

.woocommerce-tabs ul.wc-tabs li {
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
}

.woocommerce-tabs ul.wc-tabs li a {
	display: block;
	padding: 0.55rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 40px;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-tabs ul.wc-tabs li.active a {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* Until product-tabs.js runs (or without JavaScript) only the first panel shows. */
.woocommerce-tabs:not(.oob-tabs-ready) .woocommerce-Tabs-panel ~ .woocommerce-Tabs-panel {
	display: none;
}

.woocommerce-tabs .woocommerce-Tabs-panel[hidden] {
	display: none !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child {
	display: none;
}

/* WooCommerce's tab styles are more specific than the pill rules above. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.wc-tabs li a {
	padding: 0.55rem 1.5rem !important;
	line-height: 1.4;
}

/* Full-width attribute dropdown. */
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute .wp-block-group {
	align-items: stretch;
}

.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute .wp-block-woocommerce-dropdown,
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute .wc-block-components-dropdown {
	width: 100%;
	max-width: 420px;
}

/* Price inputs share the row without overflowing the panel. */
.oob-shop-filters__price label {
	min-width: 0;
}

.oob-shop-filters select,
.oob-shop-filters input[type="number"] {
	box-sizing: border-box;
	min-width: 0;
}

.oob-shop-filters label,
.oob-shop-filters legend {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: var(--wp--preset--font-size--x-small);
}


/* ---------------------------------------------------------------------------------------------
   Mobile header (below 782px: hamburger, centred logo, cart) and the slide-out menu
   --------------------------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.oob-header .wp-block-columns {
		gap: 0.5rem !important;
	}

	.oob-header .wp-block-column:first-child {
		flex: 0 0 36px !important;
	}

	.oob-header .wp-block-column:last-child {
		flex: 0 0 auto !important;
		width: auto;
	}

	.oob-header .wp-block-column:nth-child(2) {
		flex: 1 1 0 !important;
		min-width: 0;
	}

	.oob-header__actions {
		width: max-content;
	}

	.oob-header__actions {
		gap: 10px;
	}

}

.oob-mobile-menu .wp-block-navigation__responsive-container-open {
	padding: 0;
	color: var(--wp--preset--color--contrast);
}

/* Hamburger: three bars of different lengths. */
.oob-mobile-menu .wp-block-navigation__responsive-container-open svg {
	width: 30px;
	height: 16px;
}

/* Left drawer rather than a full-screen overlay. */
.oob-mobile-menu .wp-block-navigation__responsive-container.is-menu-open {
	right: auto;
	width: min(320px, 85vw);
	padding: 0;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
	animation: oob-drawer-in 0.2s ease-out;
}

@keyframes oob-drawer-in {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: none;
	}
}

.oob-mobile-menu .is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "Menu";
	display: block;
	padding: 18px 50px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-align: center;
	text-transform: uppercase;
}

.oob-mobile-menu .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 14px;
	right: 14px;
	color: var(--wp--preset--color--base);
}

.oob-mobile-menu .is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 20px !important;
	align-items: stretch !important;
}

.oob-mobile-menu .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}

.oob-mobile-menu .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.oob-mobile-menu .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 14px 0 !important;
	font-size: 15px;
}

.oob-mobile-menu__search {
	width: 100%;
	margin-bottom: 10px;
}

.oob-mobile-menu__search .wp-block-search__inside-wrapper {
	border: 1px solid #ccc;
	padding: 0;
}

.oob-mobile-menu__search .wp-block-search__input {
	height: 44px;
	border: 0;
	padding: 0 12px;
	font-size: 16px;
}

.oob-mobile-menu__search .wp-block-search__button {
	margin: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
}

.oob-mobile-menu .oob-mobile-menu__social {
	justify-content: center;
	margin-top: 20px;
	font-size: 22px;
}

/* ---------------------------------------------------------------------------------------------
   Cart icon: bag matches the line weight/size of search and account, badge sits on its corner
   --------------------------------------------------------------------------------------------- */
.oob-header__actions .wc-block-mini-cart__button {
	position: relative;
}

.oob-header__actions .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: flex;
	align-items: center;
}

.oob-header__actions .wc-block-mini-cart__badge {
	position: absolute;
	top: -4px;
	right: -6px;
	left: auto;
	margin: 0;
	transform: none;
}

/* ---------------------------------------------------------------------------------------------
   Footer: brand pill social buttons, payment logos level with the headings
   --------------------------------------------------------------------------------------------- */
.oob-footer .wp-block-social-links.oob-footer__social {
	font-size: 22px;
}

.oob-footer .oob-footer__social .wp-block-social-link-anchor {
	gap: 10px;
	min-width: 135px;
	padding: 8px 20px !important;
}

.oob-footer .oob-footer__social .wp-block-social-link-label {
	font-size: 16px;
	font-weight: 500;
}

.oob-footer__payments .wp-block-image {
	margin-top: 0;
}

/* h2 (after the page's h1), sized as the small column labels they are. */
.oob-footer .oob-footer__heading {
	margin-top: 0;
	font-size: 16px;
}

.oob-footer .wp-block-navigation {
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------------------------------------------------------------------------------------------
   Shop toolbar controls: readable filter fields, sorting styled to match (pill select)
   --------------------------------------------------------------------------------------------- */
.oob-shop-filters,
.oob-shop-filters select,
.oob-shop-filters input[type="number"],
.oob-shop-filters .wp-element-button {
	font-size: 15px;
}

.oob-shop-filters label,
.oob-shop-filters legend {
	font-size: 13px;
}

.oob-shop-toolbar .wc-block-catalog-sorting select,
.oob-shop-toolbar .woocommerce-ordering select {
	appearance: none;
	height: 42px;
	min-width: 190px;
	padding: 0 40px 0 18px;
	border: 1px solid #ddd;
	border-radius: 40px;
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23717171' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.oob-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

/* Infinite scroll: the page links stay as a no-JavaScript fallback but are hidden while it runs */
.oob-infinite .wp-block-query-pagination {
	visibility: hidden;
	height: 1px;
	overflow: hidden;
}

.oob-infinite-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 1.5em;
	margin: var(--wp--preset--spacing--40) 0;
	color: var(--wp--preset--color--muted);
}

.oob-infinite-status.is-loading::before {
	content: "";
	width: 28px;
	height: 28px;
	border: 3px solid var(--wp--preset--color--surface);
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	animation: oob-spin 0.8s linear infinite;
}

/* Sorting or filtering (shop-navigation.js): the listing dims, with a spinner mid-screen, until the new page loads */
.oob-shop-loading .wp-block-woocommerce-product-collection,
.oob-shop-loading .oob-subcategories {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s;
}

.oob-shop-loading::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid var(--wp--preset--color--surface);
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 0 12px var(--wp--preset--color--base), 0 4px 24px 12px rgba(0, 0, 0, 0.15);
	animation: oob-spin 0.8s linear infinite;
}

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

/* Checkout address search first (checkout-address.js): while the form shows the address search, the
   flat, suburb, state and postcode fields are hidden, with "Enter address manually" under the search.
   Only where WooCommerce can search the country (the form has the search container). */
body.oob-shipping-address-search #shipping:has(> .wc-block-components-address-autocomplete-container) > :is(.wc-block-components-address-form__address_2-toggle, .wc-block-components-address-form__address_2, .wc-block-components-address-form__city, .wc-block-components-address-form__state, .wc-block-components-address-form__postcode),
body.oob-billing-address-search #billing:has(> .wc-block-components-address-autocomplete-container) > :is(.wc-block-components-address-form__address_2-toggle, .wc-block-components-address-form__address_2, .wc-block-components-address-form__city, .wc-block-components-address-form__state, .wc-block-components-address-form__postcode) {
	display: none;
}

.oob-address-manual {
	flex: 0 0 100%;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 13px;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

/* The address search's attribution, under its suggestions: at the right (WooCommerce makes it a flex row),
   on the list's own background rather than WooCommerce's grey bar. */
.wc-block-components-address-autocomplete-suggestions .woocommerce-address-autocomplete-branding {
	justify-content: flex-end;
	padding: 0 12px 4px;
	background: none;
}

/* Address search: a picked address on its way (address-search.js). A spinner in place of the search icon,
   which WooCommerce centres with a transform, so the spin keeps it. */
body.oob-shipping-address-loading #shipping .wc-block-components-address-autocomplete-icon,
body.oob-billing-address-loading #billing .wc-block-components-address-autocomplete-icon {
	right: 19px;
	width: 18px;
	height: 18px;
	border: 2px solid currentcolor;
	border-right-color: transparent;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--contrast, #444);
	-webkit-mask: none;
	mask: none;
	animation: oob-spin-centred 0.8s linear infinite;
}

@keyframes oob-spin-centred {
	from {
		transform: translateY(-50%) rotate(0deg);
	}

	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

/* Checkout while a payment is under way (checkout-overlay.js): the page is covered, with a spinner and
   "Placing your order…", so nothing can be tapped twice. Under Stripe's own popups. */
.oob-checkout-busy {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: rgb(255 255 255 / 80%);
	font-weight: 600;
	cursor: progress;
}

.oob-checkout-busy::before {
	content: "";
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid currentcolor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: oob-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.oob-checkout-busy::before,
	.oob-infinite-status.is-loading::before,
	.wc-block-components-address-autocomplete-icon,
	.oob-shop-loading::after {
		animation-duration: 2.4s;
	}
}

/* Sticky header sits under the admin bar only when the bar is actually on the page and fixed.
   Below 601px WordPress lets the bar scroll away, and a page can carry the admin-bar class
   without the bar (e.g. a cached copy), so an unconditional offset leaves a gap above it. */
@media (min-width: 601px) {
	body.admin-bar:has(#wpadminbar) header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

/* ---------------------------------------------------------------------------------------------
   Sidebar category accordion (category-accordion.js adds the toggles)
   --------------------------------------------------------------------------------------------- */
.oob-cat-accordion .has-children::before {
	display: none;
}

.oob-cat-accordion .has-children:not(.is-open) > .wc-block-product-categories-list {
	display: none;
}

/* A 24px square: the smallest touch target Lighthouse accepts beside the category link (target-size). The
   sign stays at the left, where the "+" markers of other lists are. */
.oob-cat-toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	align-self: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.oob-cat-toggle::before {
	content: "+";
}

.is-open > .oob-cat-toggle::before {
	content: "−";
}

.oob-cat-toggle:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------------------------------
   Forms in page content (contact, testimonials), skinned like the live site whichever plugin makes
   them. :where() keeps these at no specificity, so a plugin's own styles win; a plugin adapter's
   stylesheet (assets/css/, inc/integrations/) matches the skin where they differ. WooCommerce's
   forms and search forms have their own styles.
   --------------------------------------------------------------------------------------------- */
:where(.wp-block-post-content form:not(.woocommerce form, [role="search"]) label) {
	margin-bottom: 8px;
	color: var(--wp--preset--color--muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

:where(.wp-block-post-content form:not(.woocommerce form, [role="search"])) :where(input:is([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]), textarea, select) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 40px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: #333;
	font-family: inherit;
	font-size: 16px;
	box-shadow: none;
}

:where(.wp-block-post-content form:not(.woocommerce form, [role="search"])) :where(textarea) {
	height: 120px;
}

:where(.wp-block-post-content form:not(.woocommerce form, [role="search"])) :where(input, textarea, select):focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: none;
}

:where(.wp-block-post-content form:not(.woocommerce form, [role="search"])) :where(button[type="submit"], input[type="submit"]) {
	height: 44px;
	padding: 0 34px;
	border: 0;
	border-radius: 50px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
}

:where(.wp-block-post-content form:not(.woocommerce form, [role="search"])) :where(button[type="submit"], input[type="submit"]):hover {
	background: var(--wp--preset--color--contrast);
}

.oob-contact-info a {
	text-decoration: underline;
}

/* Links in a page's text are underlined so they stand out from it; product titles, headings and buttons keep
   the theme's plain links. */
.wp-block-post-content :is(p, li, td, figcaption) a:not(.wp-element-button) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.oob-icon::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: var(--oob-icon) center / contain no-repeat;
	mask: var(--oob-icon) center / contain no-repeat;
}

.oob-icon--clock {
	--oob-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.oob-icon--map {
	--oob-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5l6-2 8 3 6-2v15l-6 2-8-3-6 2z'/%3E%3C/svg%3E");
}

.oob-header__start {
	display: flex;
	align-items: center;
}

.oob-header__start > .wp-block-social-links {
	margin: 0;
}

/* Logged in, WooCommerce lays the user's avatar over the account icon. Size it to the line icon. */
.oob-header__actions .wc-block-customer-account__avatar {
	width: 20px !important;
	height: 20px !important;
	object-fit: cover;
}

/* With a real avatar the line icon would peek out around it; WordPress marks the fallback
   (no avatar) with .avatar-default, in which case the icon stays visible. */
.oob-header__actions .wc-block-customer-account__visual:has(.wc-block-customer-account__avatar:not(.avatar-default)) .wc-block-customer-account__account-icon {
	visibility: hidden;
}

@media (max-width: 781px) {
	.oob-header__actions .wc-block-customer-account__avatar {
		width: 18px !important;
		height: 18px !important;
	}
}

/* Only categories with subcategories get a +/− marker; the rest keep a blank spacer the same
   width as the toggle so the names stay aligned. */
.oob-cat-accordion .wc-block-product-categories-list-item:not(.has-children)::before {
	content: "";
	display: inline-block;
	width: 24px;
	margin-right: 0;
}

/* Product categories in the mobile drawer */
.oob-mobile-menu .oob-mobile-menu__categories {
	padding: 6px 0 0;
}

.oob-mobile-menu .oob-mobile-menu__categories .wp-block-woocommerce-product-categories {
	margin-bottom: 0;
}

.oob-mobile-menu__heading {
	margin: 0 0 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13px;
}

.oob-mobile-menu .oob-mobile-menu__categories .wc-block-product-categories-list {
	font-size: 15px;
}

/* Rows divided like the menu links below them, subcategories included. */
.oob-mobile-menu .oob-mobile-menu__categories .wc-block-product-categories-list-item {
	padding: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.oob-mobile-menu .oob-mobile-menu__categories .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item:first-child {
	border-top: 0;
}

.oob-mobile-menu .oob-mobile-menu__categories .wc-block-product-categories-list-item > a {
	padding: 14px 0;
}

/* ---------------------------------------------------------------------------------------------
   Shipping rates (blocks/shipping-rates): a service / price table per destination and order band
   --------------------------------------------------------------------------------------------- */
.oob-shipping-rates__zone {
	margin-bottom: 2rem;
}

.oob-shipping-rates__table {
	width: 100%;
	max-width: 40rem;
	margin-bottom: 1rem;
	border-collapse: collapse;
}

.oob-shipping-rates__table caption {
	padding-bottom: 0.4rem;
	text-align: left;
	font-weight: 600;
}

.oob-shipping-rates__table th,
.oob-shipping-rates__table td {
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--surface);
	text-align: left;
	font-weight: 400;
}

.oob-shipping-rates__table thead th {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.oob-shipping-rates__table td {
	width: 8rem;
	text-align: right;
	white-space: nowrap;
}

.oob-shipping-rates__note,
.oob-shipping-rates__currency {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

/* Empty cart printed by the server (OOB_Empty_Cart), without the cart block's stylesheet. */
.wc-block-cart__empty-cart__title {
	font-size: inherit;
}

/* ---------------------------------------------------------------------------------------------
   Cookie consent banner (assets/js/cookie-consent.js): bottom left, under the cart drawer
   (z-index 9999) so it never covers the checkout button. Full width less the gutters on phones.
   --------------------------------------------------------------------------------------------- */
.oob-consent {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 9000;
	max-width: 420px;
	padding: 20px;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	font-size: 14px;
	line-height: 1.5;
}

.oob-consent[hidden] {
	display: none;
}

.oob-consent__title {
	margin: 0 0 6px;
	font-size: 16px;
}

.oob-consent__message {
	margin: 0 0 16px;
}

.oob-consent__message a {
	color: inherit;
	text-decoration: underline;
}

.oob-consent__actions {
	display: flex;
	gap: 10px;
}

.oob-consent__actions {
	flex-wrap: wrap;
}

.oob-consent__reject,
.oob-consent__accept {
	flex: 1 1 0;
}

/* Choose / Save choices: the full width under Reject all and Accept all, outlined. */
.oob-consent__choose,
.oob-consent__save {
	flex: 1 0 100%;
	padding: calc(0.6rem - 2px) calc(1.6rem - 2px);
	border: 2px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.oob-consent__choose:hover,
.oob-consent__choose:focus-visible,
.oob-consent__save:hover,
.oob-consent__save:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.oob-consent__button[hidden],
.oob-consent__categories[hidden] {
	display: none;
}

.oob-consent__categories {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.oob-consent__category + .oob-consent__category {
	margin-top: 12px;
}

.oob-consent__switch {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
}

/* A switch: a pill track with a sliding knob, the primary colour when on. */
.oob-consent__switch input {
	position: relative;
	flex: none;
	width: 36px;
	height: 20px;
	margin: 0;
	border-radius: 10px;
	background: #c9c9cf;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.2s;
}

.oob-consent__switch input::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s;
}

.oob-consent__switch input:checked {
	background: var(--wp--preset--color--contrast);
}

.oob-consent__switch input:checked::after {
	transform: translateX(16px);
}

.oob-consent__switch input:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.oob-consent__category-description {
	margin: 4px 0 0 46px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.oob-consent__switch input,
	.oob-consent__switch input::after {
		transition: none;
	}
}