/*
Theme Name:   Quick Silver Mint
Theme URI:    https://quicksilvermint.com
Description:  GeneratePress child theme for Quick Silver Mint. Holds the site's fonts, tokens, base styles, the product options form skin and the WooCommerce template hooks.
Author:       Sproutling & Co
Author URI:   https://sproutlingconsulting.com
Template:     generatepress
Version:      0.8.7
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  quicksilvermint
*/

/*
 * GeneratePress loads this file by itself, after its own stylesheet.
 *
 * Colors are not set here. They come from the GeneratePress global palette
 * (Customize > Colors), which prints them as custom properties:
 * --navy, --navy-light, --slate, --control, --line, --paper, --stone,
 * --white, --bronze, --bronze-dark, --bronze-light, --mist.
 *
 * 1. Fonts
 * 2. Tokens
 * 3. Base
 * 4. Shared pieces
 * 5. Header and footer (the parts their blocks cannot style)
 * 6. WooCommerce, shared
 * 7. Product page
 * 8. Product options form (WS Form)
 * 9. Symbol search (Select2)
 * 10. Shop and category pages
 * 11. Cart
 * 12. Checkout
 * 13. My account
 * 14. Articles and symbol pages
 * 15. Single article
 * 16. Search results
 * 17. Legal section
 */

/* 1. Fonts ------------------------------------------------------------- */

@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Marcellus";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/marcellus-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Marcellus";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/marcellus-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Marcellus SC";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/marcellus-sc-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Marcellus SC";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/marcellus-sc-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens ------------------------------------------------------------ */

:root {
	--font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Marcellus", Georgia, "Times New Roman", serif;
	--font-caps: "Marcellus SC", Georgia, "Times New Roman", serif;

	--radius: 4px;
	--radius-lg: 6px;
	--control-height: 48px;
	--band-space: clamp(48px, 4vw + 24px, 72px);
	--danger: #B42318;
}

/* 3. Base -------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--navy);
}

h1,
h2 {
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.25rem, 1.45rem + 3.2vw, 3.5rem);
	line-height: 1.05;
}

h2 {
	font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.25rem);
	line-height: 1.15;
}

h3 {
	font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
	line-height: 1.2;
}

h4,
h5,
h6 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
}

:focus-visible {
	outline: 3px solid var(--bronze);
	outline-offset: 2px;
}

/* Notices that WooCommerce moves focus to are not controls; no ring. */
[tabindex="-1"]:focus-visible {
	outline: 0;
}

.gb-site-header :focus-visible,
.qsm-site-footer :focus-visible {
	outline-color: var(--bronze-light);
}

/* Not every <button>: cart drawers, steppers and menu toggles size themselves. */
button.button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
	min-height: var(--control-height);
	padding: 0 24px;
	border-radius: var(--radius);
	font-weight: 600;
	line-height: 1.2;
}

a.button,
a.wp-block-button__link:not(.has-background) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	min-height: var(--control-height);
	padding: 0 14px;
	border-width: 1.5px;
	border-radius: var(--radius);
}

textarea {
	padding: 12px 14px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 4. Shared pieces ----------------------------------------------------- */

.qsm-eyebrow {
	margin: 0 0 8px;
	font-family: var(--font-caps);
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	color: var(--bronze);
}

.qsm-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.qsm-eyebrow a:hover {
	color: var(--bronze-dark);
	text-decoration: underline;
}

/* A section that runs the full width of the window from inside the page container. */
.qsm-band {
	padding: var(--band-space) 0;
}

.qsm-band--paper {
	background: var(--paper);
	box-shadow: 0 0 0 100vmax var(--paper);
	clip-path: inset(0 -100vmax);
}

.qsm-band > h2,
.qsm-band > .related > h2,
.qsm-band h2:first-child {
	margin: 0 0 28px;
}

/* Symbol families, printed by the [qsm_symbol_families] shortcode. */
.qsm-families {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	column-gap: 40px;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--navy);
	list-style: none;
}

.qsm-families li {
	margin: 0;
	border-bottom: 1px solid var(--line);
}

.qsm-families a {
	display: block;
	padding: 14px 0;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: 1.375rem;
	line-height: 1.25;
	text-decoration: none;
}

.qsm-families a:hover,
.qsm-families a:focus {
	color: var(--bronze-dark);
	text-decoration: underline;
}

/* Event schedule: a Query loop on the Events page. The list and each row
   carry these classes; the dates come from Sproutling Kit's two event tags
   ({{spk_event_dates}} and {{spk_event_days}}). */
.qsm-events {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--navy);
	list-style: none;
}

.qsm-event {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto;
	column-gap: 40px;
	row-gap: 12px;
	align-items: center;
	margin: 0;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}

.qsm-event p,
.qsm-event h3 {
	margin: 0;
}

.qsm-event__when {
	color: var(--navy);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.qsm-event__days {
	display: block;
	color: var(--slate);
	font-size: 0.9375rem;
	font-weight: 400;
}

.qsm-event__what h3 {
	font-size: 1.5rem;
	line-height: 1.2;
}

.qsm-event__what p {
	margin-top: 4px;
	color: var(--slate);
	font-size: 0.9375rem;
}

.qsm-event a.qsm-event__tickets {
	justify-self: start;
}

.qsm-events-empty {
	margin: 0;
	padding: 24px 0;
	border-top: 1px solid var(--navy);
	border-bottom: 1px solid var(--line);
	color: var(--slate);
}

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

/* A "related" section (pieces with this symbol, articles about it) is left
   out when its list comes back empty. */
.qsm-related:not(:has(.gb-loop-item)) {
	display: none;
}

/* A product list placed on a page with the [products] shortcode. */
.page .entry-content div.woocommerce > ul.products {
	margin-bottom: 0;
}

.qsm-prose {
	max-width: 720px;
	font-size: 1.0625rem;
}

.qsm-prose > :last-child,
.qsm-prose > div > :last-child {
	margin-bottom: 0;
}

/* 5. Header and footer ------------------------------------------------- */

/*
 * The header and footer are block elements: Appearance > Elements >
 * "Site header" and "Site footer". Their layout, colors and links are set
 * on the blocks. This section only covers what those blocks cannot reach:
 * WooCommerce's account and cart blocks, the newsletter form's button, and
 * the search box that opens from the header.
 */

.gb-site-header .wp-block-woocommerce-customer-account {
	margin: 0;
}

.gb-site-header .wc-block-customer-account__link,
.gb-site-header .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--white);
	opacity: 1;
}

.gb-site-header .wc-block-customer-account__link:hover,
.gb-site-header .wc-block-customer-account__link:focus,
.gb-site-header .wc-block-mini-cart__button:hover,
.gb-site-header .wc-block-mini-cart__button:focus {
	background: transparent;
	color: var(--bronze-light);
	opacity: 1;
}

.gb-site-header .wc-block-customer-account__link .icon {
	width: 28px;
	height: 28px;
}

/* WooCommerce sets the badge colors inline from the icon color, so these need !important. */
.gb-site-header .wc-block-mini-cart__badge {
	background: var(--bronze-light) !important;
	color: var(--navy) !important;
	font-weight: 700;
}

.gb-site-header .gb-menu-toggle {
	min-height: 0;
	border: 0;
}

.gb-site-header .gb-menu-toggle:hover,
.gb-site-header .gb-menu-toggle:focus {
	background: transparent;
	color: var(--bronze-light);
}

/* WS Form buttons on navy: the footer newsletter, and the form panels on
   the contact and Faire inquiry pages (class "qsm-form-panel"). */
.qsm-site-footer .wsf-form button.wsf-button.wsf-button-primary,
.qsm-form-panel .wsf-form button.wsf-button.wsf-button-primary {
	min-height: var(--control-height);
	border: 0;
	border-radius: var(--radius);
	background: var(--bronze-light);
	color: var(--navy);
	font-weight: 600;
}

.qsm-site-footer .wsf-form button.wsf-button.wsf-button-primary:hover,
.qsm-site-footer .wsf-form button.wsf-button.wsf-button-primary:focus,
.qsm-form-panel .wsf-form button.wsf-button.wsf-button-primary:hover,
.qsm-form-panel .wsf-form button.wsf-button.wsf-button-primary:focus {
	background: var(--white);
	color: var(--navy);
}

/* Inside a form panel the spam check and the consent box each take a full
   row. WS Form sizes its columns from --wsf-c (out of 12). */
.qsm-form-panel .wsf-field-wrapper[data-type="turnstile"],
.qsm-form-panel .wsf-field-wrapper[data-type="turnstile"] + .wsf-field-wrapper[data-type="checkbox"] {
	--wsf-c: 12;
}

/* Search box, opened from the magnifier in the header. */
.qsm-search {
	width: min(640px, calc(100vw - 32px));
	padding: 32px;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--white);
	color: var(--navy);
}

.qsm-search::backdrop {
	background: rgba(14, 16, 49, 0.6);
}

.qsm-search h2 {
	margin: 0 0 16px;
	font-size: 1.75rem;
}

.qsm-search label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

.qsm-search__row {
	display: flex;
	gap: 8px;
}

.qsm-search__row input[type="search"] {
	flex: 1 1 0;
	min-width: 0;
}

.qsm-search__row button {
	min-height: var(--control-height);
	padding: 0 24px;
	border-radius: var(--radius);
	font-weight: 600;
}

.qsm-search__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--navy);
}

.qsm-search__close:hover,
.qsm-search__close:focus {
	background: var(--paper);
	color: var(--navy);
}

.qsm-search__close svg {
	width: 22px;
	height: 22px;
}

/* 6. WooCommerce, shared ----------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 20px;
	font-size: 0.875rem;
	color: var(--slate);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--bronze);
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--bronze-dark);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-height);
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius);
	background-color: var(--navy);
	color: var(--white);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--navy-light);
	color: var(--white);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled] {
	padding: 0 24px;
	background-color: var(--stone);
	color: var(--slate);
	opacity: 1;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}

/* Product cards, wherever a product list appears. */
.woocommerce ul.products li.product a img {
	margin-bottom: 12px;
	border-radius: var(--radius-lg);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--stone);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin: 0 0 2px;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	display: inline-flex;
	margin-top: 0;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--navy);
	background-color: var(--white);
	color: var(--navy);
	font-size: 0.9375rem;
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--navy);
	color: var(--white);
}

/* 7. Product page ------------------------------------------------------ */

.single-product.one-container .site-content {
	padding-bottom: 0;
}

.single-product .site-main,
.single-product .site-main > article,
.single-product .inside-article {
	margin-bottom: 0;
}

/* Two columns: photos left and held in view, everything about buying on the right. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(32px, 5vw, 64px);
	align-items: start;
	padding-bottom: clamp(48px, 6vw, 80px);
}

.woocommerce div.product > * {
	grid-column: 1 / -1;
}

/* WooCommerce sets these with #content in the selector, so the same is needed here. */
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce #content div.product div.images.woocommerce-product-gallery {
	grid-column: 1;
	position: sticky;
	top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
}

.woocommerce #content div.product div.summary {
	grid-column: 2;
}

.woocommerce div.product div.images img {
	border-radius: var(--radius-lg);
	background: var(--stone);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none;
	width: 88px;
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	border: 2px solid transparent;
	opacity: 1;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	border-color: var(--bronze);
}

.woocommerce div.product .product_title {
	margin: 0 0 8px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 20px;
	font-size: 1.0625rem;
	color: var(--slate);
}

.woocommerce div.product .woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

.woocommerce div.product div.summary > p.price {
	margin: 12px 0 0;
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
}

.woocommerce div.product div.summary #payment-method-message {
	margin: 12px 0 0;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.woocommerce div.product form.cart > * {
	flex: 0 0 100%;
	min-width: 0;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
}

.woocommerce div.product form.cart div.quantity {
	flex: 0 0 auto;
	float: none;
	margin: 0;
}

.woocommerce div.product form.cart div.quantity .qty {
	width: 84px;
	height: 56px;
	padding: 0 8px;
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Quantity with minus and plus buttons (added by assets/js/quantity.js). */
.woocommerce div.product form.cart div.quantity.qsm-qty {
	display: inline-flex;
	align-items: stretch;
	height: 56px;
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	background: var(--white);
}

.woocommerce div.product form.cart div.quantity.qsm-qty .qty {
	width: 48px;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	appearance: textfield;
	-moz-appearance: textfield;
}

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

.qsm-qty .qsm-qty__btn {
	width: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--navy);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.qsm-qty .qsm-qty__btn:hover,
.qsm-qty .qsm-qty__btn:focus {
	background: var(--paper);
	color: var(--navy);
}

.qsm-qty .qsm-qty__btn:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: -2px;
}

.qsm-qty .qsm-qty__btn:disabled {
	background: transparent;
	color: var(--mist);
	cursor: not-allowed;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 0;
	float: none;
	min-height: 56px;
	font-size: 1.0625rem;
}

/* Products with WooCommerce's own choices (a drop-down per attribute). */
.woocommerce div.product form.variations_form table.variations {
	display: block;
	margin: 0;
	border: 0;
}

.woocommerce div.product form.variations_form table.variations tbody,
.woocommerce div.product form.variations_form table.variations tr,
.woocommerce div.product form.variations_form table.variations th,
.woocommerce div.product form.variations_form table.variations td {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

.woocommerce div.product form.variations_form table.variations tr + tr {
	margin-top: 16px;
}

.woocommerce div.product form.variations_form table.variations th.label {
	margin-bottom: 8px;
}

.woocommerce div.product form.variations_form table.variations th.label label {
	color: var(--navy);
	font-weight: 600;
}

.woocommerce div.product form.variations_form table.variations td.value select {
	width: 100%;
	max-width: none;
	min-height: var(--control-height);
	margin: 0;
}

.woocommerce div.product form.variations_form .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.875rem;
}

.woocommerce div.product form.variations_form .woocommerce-variation.single_variation:not(:empty) {
	margin-bottom: 12px;
}

.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
	cursor: not-allowed;
}

.woocommerce div.product .wcpay-express-checkout-wrapper {
	margin-top: 16px;
}

/* Sections under the product. */
.single-product .qsm-details .shop_attributes {
	max-width: 720px;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--navy);
}

.single-product .qsm-details .shop_attributes th,
.single-product .qsm-details .shop_attributes td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	font-style: normal;
	text-align: left;
}

.single-product .qsm-details .shop_attributes th {
	width: 200px;
	font-weight: 600;
}

.single-product .qsm-details .shop_attributes td p {
	margin: 0;
	padding: 0;
}

.single-product section.related.products,
.single-product section.up-sells {
	padding: var(--band-space) 0;
	background: var(--paper);
	box-shadow: 0 0 0 100vmax var(--paper);
	clip-path: inset(0 -100vmax);
}

.single-product section.related.products > h2,
.single-product section.up-sells > h2 {
	margin: 0 0 28px;
}

.single-product section.related.products ul.products,
.single-product section.up-sells ul.products {
	margin-bottom: 0;
}

.single-product section.related.products ul.products li.product,
.single-product section.up-sells ul.products li.product {
	margin-bottom: 0;
}

.single-product .qsm-reviews #reviews h2 {
	margin: 0 0 20px;
}

@media (max-width: 880px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.woocommerce #content div.product div.images.woocommerce-product-gallery,
	.woocommerce #content div.product div.summary {
		grid-column: 1;
	}

	.woocommerce #content div.product div.images.woocommerce-product-gallery {
		position: relative;
		top: auto;
	}
}

/* 8. Product options form (WS Form) ------------------------------------ */

/*
 * The form is WS Form's WooCommerce add-on, printed inside the product's
 * add to cart form. WS Form's own style (set for the dark footer) is
 * replaced here for product pages only.
 *
 * Any radio field with two choices becomes a row with No / Yes buttons.
 * Any radio field with three or more becomes a grid of buttons.
 */

.woocommerce div.product form.cart.wsf-woocommerce {
	--wsf-field-label-color: var(--navy);
	--wsf-field-color: var(--navy);
	--wsf-field-color-background: var(--white);
	--wsf-field-border-color: var(--control);
	--wsf-form-color-primary: var(--navy);
	color: var(--navy);
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-form-canvas,
.woocommerce div.product form.cart.wsf-woocommerce .wsf-grid,
.woocommerce div.product form.cart.wsf-woocommerce .wsf-section {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper {
	display: block;
	width: auto;
	max-width: none;
	margin: 0 0 24px;
	padding: 0;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper > .wsf-label,
.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper > label.wsf-label {
	display: block;
	margin: 0 0 10px;
	color: var(--navy);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-text-danger {
	color: var(--danger);
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-help {
	display: block;
	margin: 6px 0 0;
	color: var(--slate);
	font-size: 0.875rem;
	line-height: 1.45;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-invalid-feedback {
	color: var(--danger);
	font-size: 0.875rem;
}

/* Radios, drawn as buttons. The input covers its label, so the whole button is the target. */
.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] > .wsf-inline {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] input[type="radio"].wsf-field {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] input[type="radio"].wsf-field + label.wsf-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 64px;
	min-height: 44px;
	margin: 0;
	padding: 6px 14px;
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--navy);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] input[type="radio"].wsf-field + label.wsf-label::before,
.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] input[type="radio"].wsf-field + label.wsf-label::after {
	content: none;
}

.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] input[type="radio"].wsf-field:hover + label.wsf-label {
	border-color: var(--navy);
}

.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] input[type="radio"].wsf-field:checked + label.wsf-label {
	border-color: var(--navy);
	background: var(--navy);
	color: var(--white);
}

.woocommerce div.product form.cart.wsf-woocommerce [role="radiogroup"] input[type="radio"].wsf-field:focus-visible + label.wsf-label {
	outline: 3px solid var(--bronze);
	outline-offset: 2px;
}

/* Three or more choices: a grid of wide buttons, name left and price right. */
.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper:has([role="radiogroup"] > .wsf-inline:nth-child(3)) [role="radiogroup"] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper:has([role="radiogroup"] > .wsf-inline:nth-child(3)) [role="radiogroup"] label.wsf-label {
	justify-content: space-between;
	min-height: 56px;
	text-align: left;
}

.woocommerce div.product form.cart.wsf-woocommerce .qsm-opt-price {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Two choices: one row. Name and note on the left, buttons on the right. */
.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper:has([role="radiogroup"] > .wsf-inline:nth-child(2):last-child) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	align-items: center;
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper:has([role="radiogroup"] > .wsf-inline:nth-child(2):last-child) > .wsf-label {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper:has([role="radiogroup"] > .wsf-inline:nth-child(2):last-child) > [role="radiogroup"] {
	grid-column: 2;
	grid-row: 1 / span 2;
	flex-wrap: nowrap;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper:has([role="radiogroup"] > .wsf-inline:nth-child(2):last-child) > .wsf-help {
	grid-column: 1;
	grid-row: 2;
	margin-top: 2px;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper:has([role="radiogroup"] > .wsf-inline:nth-child(2):last-child) > .wsf-invalid-feedback {
	grid-column: 1 / -1;
	grid-row: 3;
}

.woocommerce div.product form.cart.wsf-woocommerce .qsm-opt-add {
	display: block;
	color: var(--slate);
	font-size: 0.875rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Drop-downs (second symbol, monogram letter): a tinted panel under the question that opened them. */
.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper[data-type="select"] {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper[data-type="select"] + .wsf-field-wrapper[data-type="select"] {
	margin-top: -7px;
	padding-top: 0;
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper[data-type="select"]:has(+ .wsf-field-wrapper[data-type="select"]:not([style*="display: none"])) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper[data-type="select"] + .wsf-field-wrapper:not([data-type="select"]) {
	margin-top: 14px;
}

.woocommerce div.product form.cart.wsf-woocommerce select.wsf-field {
	width: 100%;
	height: var(--control-height);
	padding: 0 40px 0 14px;
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	background-color: var(--white);
	color: var(--navy);
	font-size: 1rem;
}

/* Total. */
.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper.wsf-woocommerce-price {
	margin: 0;
	padding: 18px 0 6px;
	border-top: 1px solid var(--line);
	font-size: 1.375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.woocommerce div.product form.cart.wsf-woocommerce .wsf-field-wrapper.wsf-woocommerce-price .amount {
	color: var(--navy);
}

/* 9. Symbol search (Select2) ------------------------------------------- */

.woocommerce div.product form.cart.wsf-woocommerce .select2-container {
	width: 100% !important;
}

.woocommerce div.product form.cart.wsf-woocommerce .select2-container .select2-selection--single {
	height: var(--control-height);
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	background: var(--white);
}

.woocommerce div.product form.cart.wsf-woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	color: var(--navy);
	font-size: 1rem;
	line-height: calc(var(--control-height) - 3px);
}

.woocommerce div.product form.cart.wsf-woocommerce .select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--slate);
}

.woocommerce div.product form.cart.wsf-woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 8px;
	height: calc(var(--control-height) - 3px);
}

.woocommerce div.product form.cart.wsf-woocommerce .select2-container--focus .select2-selection--single,
.woocommerce div.product form.cart.wsf-woocommerce .select2-container--open .select2-selection--single {
	border-color: var(--navy);
	outline: 3px solid var(--bronze);
	outline-offset: 2px;
}

.select2-container--default .select2-dropdown {
	border: 1.5px solid var(--navy);
	border-radius: var(--radius);
	font-family: var(--font-body);
	color: var(--navy);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	font-size: 1rem;
}

.select2-container--default .select2-results__option {
	min-height: 40px;
	padding: 8px 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--navy);
	color: var(--white);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--paper);
	color: var(--navy);
}

/* 10. Shop and category pages ------------------------------------------ */

.woocommerce .woocommerce-products-header__title.page-title {
	margin: 0 0 16px;
}

.woocommerce .term-description {
	max-width: 720px;
	margin: 0 0 24px;
	color: var(--slate);
}

/* Product types, as plain links. */
.qsm-shop-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.qsm-shop-cats a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--navy);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.qsm-shop-cats a:hover {
	border-color: var(--navy);
}

.qsm-shop-cats a[aria-current="page"] {
	border-color: var(--navy);
	background: var(--navy);
	color: var(--white);
}

.woocommerce .woocommerce-result-count {
	margin: 12px 0 24px;
	color: var(--slate);
	font-size: 0.9375rem;
}

.woocommerce .woocommerce-ordering {
	margin: 0 0 24px;
}

.woocommerce .woocommerce-ordering select {
	min-height: 44px;
}

/* The product grid. WooCommerce lays products out with floats and fixed widths; this replaces both. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
	clear: both;
	margin: 0 0 40px;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}

.woocommerce ul.products[class*="columns-"] li.product:nth-child(n),
.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(n) {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

.woocommerce ul.products li.product .qsm-card-type {
	margin: 0 0 6px;
	color: var(--slate);
	font-size: 0.875rem;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	color: var(--navy);
	text-decoration: none;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 12px;
	}
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--navy);
	font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
	border-color: var(--navy);
	background: var(--white);
	color: var(--navy);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--navy);
	background: var(--navy);
	color: var(--white);
}

/* 11. Cart and checkout (WooCommerce blocks) ---------------------------- */

/*
 * The Cart and Checkout pages hold WooCommerce's Cart and Checkout blocks.
 * The layout is WooCommerce's own. These rules bring the buttons, text
 * sizes and the option lines under each product into the site's style.
 * The cart drawer that opens from the header uses the same pieces.
 */

/* Keep both blocks inside the page container. */
.entry-content .wp-block-woocommerce-cart.alignwide,
.entry-content .wp-block-woocommerce-checkout.alignwide {
	width: auto;
	max-width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.wc-block-components-button:not(.is-link) {
	min-height: 56px;
	border-radius: var(--radius);
	font-size: 1.0625rem;
	font-weight: 600;
}

.wc-block-components-button:not(.is-link):not(.outlined):not(.is-style-outline) {
	background: var(--navy);
	color: var(--white);
}

.wc-block-components-button:not(.is-link):not(.outlined):not(.is-style-outline):hover,
.wc-block-components-button:not(.is-link):not(.outlined):not(.is-style-outline):focus {
	background: var(--navy-light);
	color: var(--white);
}

/* The second button of a pair, such as "View cart" in the cart drawer. */
.wc-block-components-button.outlined:not(.is-link),
.wc-block-components-button.is-style-outline:not(.is-link) {
	border: 0;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--navy);
	color: var(--navy);
}

.wc-block-components-button.outlined:not(.is-link):hover,
.wc-block-components-button.outlined:not(.is-link):focus,
.wc-block-components-button.is-style-outline:not(.is-link):hover,
.wc-block-components-button.is-style-outline:not(.is-link):focus {
	background: var(--paper);
	color: var(--navy);
}

/* A closed cart drawer sits off screen but its buttons could still be reached
   with the Tab key. Hiding it takes them out of the tab order; the delay lets
   the slide-out finish first. */
.wc-block-components-drawer__screen-overlay--is-hidden {
	visibility: hidden;
	transition: opacity 0.3s, visibility 0s 0.3s;
}

/* Phones: the cart's "Proceed to Checkout" bar sticks to the bottom of the
   screen, where the privacy button (the consent service's own widget, 44px
   wide, 24px from the left) sat on top of its left end. The bar keeps that
   corner clear. */
@media (max-width: 782px) {
	.wc-block-cart .wc-block-cart__submit-container.wc-block-cart__submit-container--sticky {
		padding-left: 84px;
	}
}

/* Phones: WooCommerce gives the product column of a cart row a fixed 132px,
   which pushed the row 5px (more with a long price) past the text column. */
@media (max-width: 480px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 80px minmax(0, 1fr);
	}
}

/* The cart drawer lists the choices, not the product's description. */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description {
	display: none;
}

/* Product names and prices at the size of the text around them. */
.wc-block-components-product-name,
.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	color: var(--navy);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

a.wc-block-components-product-name:hover,
a.wc-block-components-product-name:focus {
	color: var(--navy);
	text-decoration: underline;
}

.wc-block-cart-items .wc-block-cart-item__prices,
.wc-block-cart-items .wc-block-cart-item__total {
	font-size: 1rem;
}

/* The chosen options under a product: one per line, name then choice. */
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-metadata,
.wc-block-cart .wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-mini-cart__drawer .wc-block-components-product-metadata {
	color: var(--slate);
	font-size: 0.875rem;
	line-height: 1.5;
}

.wc-block-components-product-metadata .wc-block-components-product-details {
	font-size: 1em;
}

.wc-block-components-product-details > span {
	display: block;
}

.wc-block-components-product-details > span > span[aria-hidden="true"] {
	display: none;
}

.wc-block-components-product-details__name {
	font-weight: 600;
}

.wc-block-components-radio-control__option,
.wc-block-components-checkbox__label,
.wc-block-components-address-card,
.wc-block-components-totals-item,
.wc-block-components-panel__button {
	font-size: 1rem;
}

.wc-block-checkout__terms,
.wc-block-components-totals-shipping__via,
.wc-block-components-totals-item__description {
	font-size: 0.875rem;
}

.wc-block-checkout__terms a {
	color: var(--bronze-dark);
}

/* The empty cart: a centered heading over a row of medallions. */
.wp-block-woocommerce-empty-cart-block > h2.wc-block-cart__empty-cart__title {
	font-size: 1.75rem;
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block > .wp-block-separator {
	margin: 32px auto;
}

/* 12. Orders, notices and account forms (WooCommerce's own templates) --- */

/*
 * Still drawn by WooCommerce's older templates: the order received page,
 * the pay-for-order page, My account, and the notices above any of them.
 */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-top-color: var(--navy);
	background-color: var(--paper);
	color: var(--navy);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
	color: var(--navy);
}

.woocommerce .woocommerce-error {
	border-top-color: var(--danger);
}

.woocommerce .woocommerce-error::before {
	color: var(--danger);
}

.woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border-top-color: var(--line);
}

.woocommerce table.shop_table th {
	font-weight: 600;
}

.woocommerce td.product-name dl.variation,
.woocommerce td.product-name .wc-item-meta {
	margin: 6px 0 0;
	padding: 0;
	color: var(--slate);
	font-size: 0.9375rem;
	list-style: none;
}

.woocommerce td.product-name dl.variation dt,
.woocommerce td.product-name .wc-item-meta strong {
	font-weight: 600;
}

.woocommerce td.product-name dl.variation dd p,
.woocommerce td.product-name .wc-item-meta p {
	display: inline;
	margin: 0;
}

/* One option per line, name then choice, wrapping at spaces. */
.woocommerce td.product-name dl.variation dt,
.woocommerce td.product-name dl.variation dd {
	display: inline;
	float: none;
	margin: 0;
	padding: 0;
	word-break: normal;
	overflow-wrap: break-word;
}

.woocommerce td.product-name dl.variation dd::after {
	content: "";
	display: block;
}

/* Form fields: My account, and the pay-for-order page. */
.woocommerce form .form-row label {
	margin: 0 0 4px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	min-height: var(--control-height);
	padding: 0 14px;
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
	background-color: var(--white);
	color: var(--navy);
}

.woocommerce form .form-row textarea.input-text {
	min-height: 96px;
	padding: 12px 14px;
}

.woocommerce form .form-row .required {
	color: var(--danger);
}

.woocommerce .select2-container .select2-selection--single {
	height: var(--control-height);
	border: 1.5px solid var(--control);
	border-radius: var(--radius);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	color: var(--navy);
	line-height: calc(var(--control-height) - 3px);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 8px;
	height: calc(var(--control-height) - 3px);
}

/* Payment methods on the pay-for-order page. */
.woocommerce-checkout #payment {
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--line);
}

/* Each payment method on its own row, with its logo held inside the row. */
.woocommerce-checkout #payment ul.payment_methods li {
	display: flow-root;
	line-height: 28px;
}

.woocommerce-checkout #payment ul.payment_methods li + li {
	margin-top: 6px;
}

.woocommerce-checkout #payment ul.payment_methods li img {
	margin-top: 2px;
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--white);
	color: var(--navy);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--white);
}

.woocommerce-checkout #payment #place_order {
	float: none;
	width: 100%;
	min-height: 56px;
	font-size: 1.0625rem;
}

/* 13. My account ------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 24px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	list-style: none;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	color: var(--navy);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--paper);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--paper);
	font-weight: 600;
}

/* 14. Articles and symbol pages ---------------------------------------- */

/*
 * These pages use GeneratePress's own templates for now. The rules below
 * give them the site's proportions: lists become grids of cards, single
 * pages get a readable column.
 */

.blog .site-main,
.archive:not(.woocommerce) .site-main,
.search-results .site-main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 24px;
	align-items: start;
}

.blog .site-main > :not(article),
.archive:not(.woocommerce) .site-main > :not(article),
.search-results .site-main > :not(article) {
	grid-column: 1 / -1;
}

.blog .site-main > article,
.archive:not(.woocommerce) .site-main > article,
.search-results .site-main > article {
	margin: 0;
}

.blog .inside-article,
.archive:not(.woocommerce) .inside-article,
.search-results .inside-article {
	display: flex;
	flex-direction: column;
}

.blog .inside-article .post-image,
.archive:not(.woocommerce) .inside-article .post-image,
.search-results .inside-article .post-image {
	order: -1;
	margin: 0 0 14px;
}

.blog .inside-article .post-image img,
.archive:not(.woocommerce) .inside-article .post-image img,
.search-results .inside-article .post-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius-lg);
	background: var(--stone);
}

.blog .entry-title,
.archive:not(.woocommerce) .entry-title,
.search-results .entry-title {
	font-size: 1.5rem;
	line-height: 1.25;
}

.blog .entry-title a,
.archive:not(.woocommerce) .entry-title a,
.search-results .entry-title a {
	text-decoration: none;
}

.blog .entry-title a:hover,
.archive:not(.woocommerce) .entry-title a:hover,
.search-results .entry-title a:hover {
	text-decoration: underline;
}

.blog .entry-meta,
.archive:not(.woocommerce) .entry-meta,
.search-results .entry-meta {
	margin-top: 6px;
	font-size: 0.875rem;
}

.blog .entry-summary,
.archive:not(.woocommerce) .entry-summary,
.search-results .entry-summary {
	margin-top: 10px;
	color: var(--slate);
	font-size: 0.9375rem;
}

/* Symbols: small square art, many to a row, names only. */
.archive:not(.woocommerce).post-type-archive-symbols .site-main,
.archive:not(.woocommerce).tax-symbol-category .site-main {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 32px 20px;
}

.archive:not(.woocommerce).post-type-archive-symbols .inside-article .post-image img,
.archive:not(.woocommerce).tax-symbol-category .inside-article .post-image img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.archive:not(.woocommerce).post-type-archive-symbols .entry-title,
.archive:not(.woocommerce).tax-symbol-category .entry-title {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}

.archive:not(.woocommerce).post-type-archive-symbols .entry-summary,
.archive:not(.woocommerce).post-type-archive-symbols .entry-meta,
.archive:not(.woocommerce).tax-symbol-category .entry-summary,
.archive:not(.woocommerce).tax-symbol-category .entry-meta {
	display: none;
}

@media (max-width: 1024px) {
	.blog .site-main,
	.archive:not(.woocommerce):not(.post-type-archive-symbols):not(.tax-symbol-category) .site-main,
	.search-results .site-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.blog .site-main,
	.archive:not(.woocommerce):not(.post-type-archive-symbols):not(.tax-symbol-category) .site-main,
	.search-results .site-main {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Single article, symbol or legal policy: one readable column. */
.single-post .site-main > article,
.single-symbols .site-main > article,
.single-legal .site-main > article,
.single-post .site-main > .comments-area,
.single-post .site-main > .post-navigation {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
}

.single-post .entry-content,
.single-symbols .entry-content {
	font-size: 1.0625rem;
	line-height: 1.65;
}

.single-post .entry-content img {
	border-radius: var(--radius-lg);
}

.single-symbols .featured-image {
	margin-bottom: 24px;
}

.single-symbols .featured-image img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
}

/* Plain pages (About and the like): text typed straight into the page
   keeps a readable line length. Sections built with blocks are left alone. */
.page .entry-content > :is(p, ul, ol, h2, h3, h4, blockquote):not([class*="qsm-"]):not([class*="gb-"]) {
	max-width: 760px;
}

.page .entry-content > p:not([class*="qsm-"]):not([class*="gb-"]) {
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* 15. Single article --------------------------------------------------- */

/*
 * Order on the page: category, title, date and author, picture, text,
 * connected pieces and symbols, tags, then the next and previous article. inc/articles.php moves the
 * picture below the title and closes comments.
 */

.single-post .entry-header {
	margin-bottom: 28px;
}

.single-post .entry-header .qsm-eyebrow {
	margin-bottom: 12px;
}

.single-post .entry-title {
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
	line-height: 1.1;
}

.single-post .entry-header .entry-meta {
	margin-top: 14px;
	color: var(--slate);
	font-size: 0.9375rem;
}

/* The picture is never cropped. A tall one is held to 560px and sits
   centered on a paper panel; a wide one fills the column. */
.single-post .featured-image {
	margin: 0 0 36px;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--paper);
	text-align: center;
}

.single-post .featured-image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 560px;
	margin: 0 auto;
}

.single-post .entry-content > :is(h2, h3, h4) {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

.single-post .entry-content > :first-child {
	margin-top: 0;
}

.single-post .entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--bronze);
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--navy);
}

.single-post .entry-content figcaption {
	margin-top: 8px;
	color: var(--slate);
	font-size: 0.875rem;
}

/* Pieces and symbols the article is connected to. The "Article: pieces and
   symbols" Element prints them in the article's own column, between the
   text and the tags. A list with nothing in it is left out (section 4). */
.single-post .inside-article > .qsm-related {
	margin-top: 48px;
	padding: 32px 0 0;
	border-top: 1px solid var(--line);
}

.single-post .inside-article > .qsm-related h2 {
	margin-bottom: 20px;
	font-size: 1.5rem;
}

.single-post .inside-article > .qsm-related [class*="gb-looper-"] {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.single-post footer.entry-meta {
	margin-top: 48px;
	font-size: 0.9375rem;
}

.single-post .tags-links {
	display: block;
	color: var(--slate);
}

/* Next and previous article. */
.single-post .post-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.single-post .post-navigation .gp-icon {
	display: none;
}

.single-post .post-navigation .nav-previous,
.single-post .post-navigation .nav-next {
	display: block;
}

.single-post .post-navigation .nav-next {
	grid-column: 2;
	text-align: right;
}

.single-post .post-navigation .prev::before,
.single-post .post-navigation .next::before {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-caps);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	color: var(--bronze);
}

.single-post .post-navigation .prev::before {
	content: "Previous article";
}

.single-post .post-navigation .next::before {
	content: "Next article";
}

.single-post .post-navigation a {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--navy);
	text-decoration: none;
}

.single-post .post-navigation a:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.single-post .post-navigation {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-post .post-navigation .nav-next {
		grid-column: auto;
		text-align: left;
	}
}

/* 16. Search results --------------------------------------------------- */

/*
 * The page behind the search box. Each result says what it is (an article,
 * a symbol, a kind of jewelry); jewelry shows its price. inc/articles.php
 * prints those lines and the "search again" row.
 */

.search-results .page-header {
	margin-bottom: 0;
}

.search-results .page-title {
	font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.25rem);
	line-height: 1.15;
}

.qsm-search-again {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

.qsm-search-again__count {
	margin: 0;
	color: var(--slate);
}

.qsm-search-again form {
	display: flex;
	flex: 0 1 440px;
	gap: 8px;
	padding-bottom: 16px;
}

.qsm-search-again input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

.search-results .entry-header .qsm-eyebrow {
	margin-bottom: 4px;
	font-size: 0.8125rem;
}

.qsm-result-price {
	margin: 6px 0 0;
	font-weight: 600;
	color: var(--navy);
}

/* Symbol art is a round drawing: show it as a circle on a paper panel
   the same size as the other results' pictures. The same goes for an
   article card that borrowed a symbol's art (inc/articles.php), here and
   on the articles list. */
.site-main > article.qsm-card-symbol-art .post-image,
.search-results article.type-symbols .post-image {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.site-main > article.qsm-card-symbol-art .post-image a,
.search-results article.type-symbols .post-image a {
	display: block;
	height: 84%;
	aspect-ratio: 1 / 1;
}

.site-main > article.qsm-card-symbol-art .post-image img,
.search-results article.type-symbols .post-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

/* Nothing found, here and on the "page not found" page. */
.search-no-results .no-results {
	max-width: 760px;
}

.search-no-results .search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin-top: 20px;
}

.search-no-results .search-form label {
	flex: 1 1 auto;
}

.search-no-results .search-form .search-field {
	width: 100%;
}

.search-no-results .search-form .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-height);
	min-height: var(--control-height);
	border-radius: var(--radius);
}

/* 17. Legal section ---------------------------------------------------- */

/* The index at /legal/ is a plain list of policy names. */
.archive.post-type-archive-legal:not(.woocommerce) .site-main {
	display: block;
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
}

.post-type-archive-legal .site-main > article {
	border-bottom: 1px solid var(--line);
}

.post-type-archive-legal .site-main > article:first-of-type {
	border-top: 1px solid var(--line);
}

.post-type-archive-legal .entry-title {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.post-type-archive-legal .entry-title a {
	display: block;
	padding: 18px 0;
}

.post-type-archive-legal .entry-summary,
.post-type-archive-legal .entry-meta,
.post-type-archive-legal .post-image {
	display: none;
}