/*
Theme Name: Vallem Store
Description: vallem.store. Every rule traces to docs/design-spec.md.
Version: 0.3.0
Requires at least: 7.0
Requires PHP: 8.2
Text Domain: vallem-store
*/

/* ================================================================ Foundations */

/* Page margin 32px, 64px from 1024px (R1-R3). Plate colours are the brand
   guideline tones as RGB triplets so one gradient recipe can take any of them. */
:root {
	--swag-margin: 32px;
	--swag-ease: 150ms ease;
	--swag-guardian: 44 106 251;   /* Guardian Blue #2C6AFB */
	--swag-shield: 24 60 221;      /* Shield Blue #183CDD */
	--swag-ivory: 238 232 218;     /* Cipher Ivory #EEE8DA */
	--swag-ice: 218 231 255;       /* Quantum Ice #DAE7FF */
}
@media (min-width: 1024px) {
	:root {
		--swag-margin: 64px;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color-scheme: dark;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light);
}

:where(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color var(--swag-ease), background-color var(--swag-ease), border-color var(--swag-ease);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.woocommerce-Price-amount,
.wc-block-mini-cart__amount {
	font-variant-numeric: tabular-nums;
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--swag-ease), color var(--swag-ease);
}

/* ================================================================ Plates */

/* A product never sits on flat grey. Every image, category tile and gallery is a
   plate lit from below in its category's brand colour: the brand book's closing
   page runs its blue lighter towards the bottom edge (Guidelines p. 26, sampled
   #2263FB top, #4179FE bottom), and GitHub's own product shots sit on coloured
   backdrops (R1-R3). Colour follows the category so the grid reads as sets. Woo puts product_cat-*
   on each card and, on the product page, on body. */
.swag-plate,
.swag-collection .wc-block-components-product-image,
.swag-pdp__gallery .wc-block-components-product-image,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	--plate: var(--swag-guardian);
	--plate-strength: 0.55;
	background:
		radial-gradient(95% 62% at 50% 106%, rgb(var(--plate) / var(--plate-strength)) 0%, rgb(var(--plate) / 0) 72%),
		linear-gradient(180deg, #1B1B1A 0%, #161616 100%);
	border-radius: 8px;
}
.swag-plate--accessories,
.product_cat-accessories .wc-block-components-product-image,
.wp-block-woocommerce-empty-cart-block .product_cat-accessories .wc-block-grid__product-image {
	--plate: var(--swag-ivory);
	--plate-strength: 0.26;
}
.swag-plate--desk,
.product_cat-desk .wc-block-components-product-image,
.wp-block-woocommerce-empty-cart-block .product_cat-desk .wc-block-grid__product-image {
	--plate: var(--swag-ice);
	--plate-strength: 0.3;
}

/* ================================================================ Header */

/* Announcement bar plus sticky nav (R10, neon.com). The bar scrolls away, the nav
   stays: the whole header sticks at minus the bar's height. */
header.wp-block-template-part:not(.swag-checkout-header) {
	position: sticky;
	top: -36px;
	z-index: 50;
}

.swag-announce {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding-inline: var(--swag-margin);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: -0.006em;
}
/* ASCII edges in the first drop's style: bold DejaVu Sans Mono '#' runs in #53BEF0
   glitching into '#&$%' in #5DCCFF (vallem_flat_glitch.svg), generated as glyph
   paths by tools/ascii_edge.py so no mono font loads. */
.swag-announce::before,
.swag-announce::after {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 300px;
	background-repeat: no-repeat;
	background-size: auto 100%;
	pointer-events: none;
}
.swag-announce::before {
	left: 0;
	background-image: url("assets/img/ascii-edge-left.svg");
	background-position: left center;
}
.swag-announce::after {
	right: 0;
	background-image: url("assets/img/ascii-edge-right.svg");
	background-position: right center;
}
.swag-announce__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}
.swag-announce__chevron {
	flex-shrink: 0;
	transition: transform var(--swag-ease);
}
.swag-announce__link:hover .swag-announce__chevron {
	transform: translateX(2px);
}
/* Narrow screens only have room for the dense end of the characters, so fade
   them out instead of cutting them off. */
@media (max-width: 767px) {
	.swag-announce::before,
	.swag-announce::after {
		width: 88px;
	}
	.swag-announce::before {
		mask-image: linear-gradient(to right, #000 40%, transparent 100%);
	}
	.swag-announce::after {
		mask-image: linear-gradient(to left, #000 40%, transparent 100%);
	}
}

.swag-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.swag-header__bar {
	min-height: 64px;
	gap: 40px;
}

.swag-logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}
.swag-logo img {
	display: block;
	width: auto;
	height: 22px;
}

/* Nav items as 15px Inter with a 4px hover plate, no gaps between (R10: items
   padded 0 14px, radius 4px, measured on neon.com). */
.swag-header__nav {
	font-size: var(--wp--preset--font-size--nav);
	letter-spacing: -0.009em;
}
.swag-header .swag-header__nav .wp-block-navigation__container {
	gap: 0;
}
.swag-header .swag-header__nav .wp-block-navigation-item__content {
	padding: 7px 14px;
	border-radius: 4px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.swag-header .swag-header__nav .wp-block-navigation-item__content:hover,
.swag-header .swag-header__nav .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--surface);
}

.swag-header__bar > .swag-header__utility {
	margin-left: auto;
}
.swag-header__utility {
	gap: 12px;
	color: var(--wp--preset--color--contrast);
}

/* Search: a round icon button in the same 36px row as the pills. */
.swag-header__search,
.swag-header__search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
}
.swag-header__search .wp-block-search__button {
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: center;
	background: none;
	border: 0;
	border-radius: 999px;
	color: inherit;
}
.swag-header__search .wp-block-search__button:hover {
	background: var(--wp--preset--color--surface);
}
.swag-header__search .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	min-width: 0;
	min-height: 0;
	fill: currentColor;
}
.swag-header__search .wp-block-search__input {
	height: 36px;
	padding: 0 14px;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: 999px;
}

/* Account and cart as the two header pills: outline, then filled (R10 "Log in",
   "Sign up"). The cart pill carries the running total. */
.swag-header__account a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 18px;
	font-size: var(--wp--preset--font-size--nav);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: 999px;
}
.swag-header__account a:hover {
	border-color: var(--wp--preset--color--contrast);
}
.swag-header__cart .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px 0 12px;
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 500;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border-radius: 999px;
}
.swag-header__cart .wc-block-mini-cart__button:hover {
	background: var(--wp--preset--color--light);
}
.swag-header__cart .wc-block-mini-cart__amount {
	color: inherit !important;
	font-weight: 500;
}
.swag-header__cart .wc-block-mini-cart__icon {
	width: 20px;
	height: 20px;
}
.swag-header__cart .wc-block-mini-cart__badge {
	color: var(--wp--preset--color--light);
	background: var(--wp--preset--color--primary);
	border: 0;
}
/* Woo hides the cart pill on cart and checkout with visibility:hidden, which leaves a
   pill-sized hole at the end of the row. */
:is(.woocommerce-cart, .woocommerce-checkout) .swag-header__cart[aria-hidden="true"] {
	display: none;
}

/* Mobile: logo, cart pill, menu (R1-R3, R10 mobile). */
@media (max-width: 599px) {
	.swag-header__bar {
		gap: 8px;
	}
	.swag-header__nav {
		order: 10;
	}
	.swag-header__utility {
		gap: 4px;
	}
	.swag-header__account {
		display: none;
	}
	.swag-logo img {
		height: 19px;
	}
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ================================================================ Home hero */

/* Nol's hero artwork (Background shop.png) carries the glow, the ASCII emblem and
   the product on people, so the hero is the image. It is composed at 16:9; the band
   follows that ratio up to 720px so a 1440x900 screen still shows the top of the
   next section. The artwork has a code snippet in its bottom-left corner, so the
   text sits vertically centred in the empty left half rather than bottom-left. */
.swag-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: clamp(560px, 56.25vw, 720px);
	background: #01030A;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/* Flex column plus the constrained layout's auto margins shrink-wraps the inner
   group and centres it; it has to fill the 1312px content width to stay left. */
.swag-hero > .swag-hero__inner {
	width: 100%;
}
.swag-hero > .swag-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
	margin: 0 !important;
}
.swag-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
}
/* The inner group stays full width (see above); the lede's 40ch keeps the text in
   the artwork's empty left half. */
/* Below 1024px the people move behind the text: text drops to the bottom over a
   scrim of the image's own near-black, so it stays readable. */
@media (max-width: 1023px) {
	.swag-hero {
		justify-content: flex-end;
		padding-block: 0 var(--wp--preset--spacing--50);
	}
	.swag-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(to top, rgb(1 3 10 / 0.92) 0%, rgb(1 3 10 / 0.7) 35%, rgb(1 3 10 / 0) 70%);
	}
}

.swag-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--light);
}
.swag-hero__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 40ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	letter-spacing: -0.017em;
	color: var(--wp--preset--color--contrast);
}
.swag-hero__actions {
	margin-top: var(--wp--preset--spacing--40);
}

/* ================================================================ Sections */

.swag-main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.swag-section + .swag-section {
	margin-top: var(--wp--preset--spacing--70);
}
.swag-section__head {
	margin-bottom: 32px;
	gap: 24px;
}
.swag-section__title {
	margin: 0 0 32px;
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 500;
	letter-spacing: -0.020em;
}
.swag-section__head .swag-section__title {
	margin: 0;
}
.swag-section__more {
	margin: 0;
	font-size: var(--wp--preset--font-size--nav);
}
.swag-section__more a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}
.swag-section__more a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ================================================================ Category tiles */

.swag-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.swag-cats__item {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.swag-cats__link {
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 100%;
	padding: 24px;
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 500;
	letter-spacing: -0.020em;
	color: var(--wp--preset--color--light);
	text-decoration: none;
}
.swag-cats__arrow {
	transition: transform var(--swag-ease);
}
.swag-cats__link:hover .swag-cats__arrow {
	transform: translateX(4px);
}
@media (max-width: 767px) {
	.swag-cats {
		grid-template-columns: minmax(0, 1fr);
	}
	.swag-cats__item {
		aspect-ratio: 5 / 2;
	}
}

/* ================================================================ Product grid and card */

/* 16px column gap, 52px row gap (R1). */
.swag-collection .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 52px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.swag-related .wc-block-product-template {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1023px) {
	.swag-collection .wc-block-product-template,
	.swag-related .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 599px) {
	.swag-collection .wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

.swag-collection .wc-block-product {
	position: relative;
	width: auto;
	max-width: none;
	margin: 0;
	text-align: left;
}
.swag-collection .wc-block-components-product-image {
	position: relative;
	margin: 0;
	overflow: hidden;
}
.swag-collection .wc-block-components-product-image > .wc-block-components-notices {
	position: absolute;
	margin: 0;
}
.swag-collection .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Product lines (spec): a line's own artwork replaces the lit plate. functions.php
   sets it per card, keyed on the category slug. */
.swag-collection .wc-block-components-product-image.swag-card__image--line,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image.swag-card__image--line {
	background-color: var(--wp--preset--color--surface);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.swag-card__name {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.006em;
}
.swag-card__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.swag-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.swag-card__name a:hover {
	text-decoration: underline;
}
.swag-card__price,
.swag-card__price .wc-block-components-product-price {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 20px;
	letter-spacing: -0.006em;
	color: var(--wp--preset--color--contrast-muted);
	text-align: left;
}

/* ================================================================ Archive */

.swag-main .swag-archive__top {
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.swag-archive__top .woocommerce-breadcrumb {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: -0.006em;
	color: var(--wp--preset--color--contrast-muted);
}
.swag-archive__top .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.swag-archive__top .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--contrast);
}
.swag-archive__top .woocommerce-ordering {
	margin: 0;
}

/* Form controls take 4px corners; actions take pills (R10 does the same). */
.swag-archive__top select {
	width: auto;
	max-width: 100%;
	height: 36px;
	padding: 0 32px 0 12px;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23EEE8DA' stroke-width='1.5'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: 4px;
	appearance: none;
}

.swag-archive__body {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}
.swag-archive__body > .swag-collection {
	grid-column: 2 / -1;
}
.swag-archive__categories {
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.020em;
}
.swag-archive__categories .wp-block-navigation__container {
	gap: 0;
}
.swag-archive .swag-archive__categories .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}
.swag-archive .swag-archive__categories .wp-block-navigation-item__content:hover,
.swag-archive .swag-archive__categories .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--light);
}
.swag-archive__categories .current-menu-item > .wp-block-navigation-item__content::before {
	content: "\203A";
	position: absolute;
	right: 100%;
	padding-right: 0.3em;
}
/* Thema's subcategories, read from the category tree (patterns/theme-categories.php),
   listed like the categories above under the parent's name. */
.swag-archive__themes {
	margin-top: 32px;
}
.swag-archive__themes .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.swag-archive__label {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: -0.006em;
	color: var(--wp--preset--color--contrast-muted);
}
@media (max-width: 1023px) {
	.swag-archive__body {
		display: block;
	}
	.swag-archive__categories {
		margin-bottom: 32px;
		font-size: 18px;
		letter-spacing: -0.014em;
	}
	.swag-archive__categories .wp-block-navigation__container {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 24px;
	}
	.swag-archive__categories .current-menu-item > .wp-block-navigation-item__content::before {
		position: static;
	}
	.swag-archive__themes {
		margin-top: 0;
	}
	/* Flow layout zeroes the last child's bottom margin, so the gap sits on the wrapper. */
	.swag-archive__body > .swag-archive__side {
		margin-bottom: 32px;
	}
}

/* ================================================================ Product page */

.swag-pdp__top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: center;
}
.swag-pdp__gallery {
	min-width: 0;
}
.swag-pdp__gallery .wc-block-woocommerce-product-gallery-large-image {
	overflow: hidden;
}
.swag-pdp__gallery .wc-block-components-product-image {
	overflow: hidden;
}
.swag-pdp__gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.swag-pdp__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--title);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: var(--wp--preset--color--light);
}
.swag-pdp__price,
.swag-pdp__price .wc-block-components-product-price {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--title);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: var(--wp--preset--color--contrast-muted);
}
/* The short description as the sales line under the price (Nol, 14 Sep 2026). Body size in
   ivory, 24px clear of the price so it reads as its own line, not a note on the price.
   Renders nothing when the short description is empty. */
.swag-pdp__head .wp-block-woocommerce-product-summary {
	margin-top: 24px;
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.swag-pdp__head .wc-block-components-product-summary > * {
	margin: 0;
}
.swag-pdp__head .wc-block-components-product-summary > * + * {
	margin-top: 1em;
}

.swag-pdp__buy {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.swag-pdp__buy .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: -0.006em;
}
.swag-pdp__buy .wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.swag-pdp__buy .wc-block-product-filter-chips__item {
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 1px solid var(--wp--preset--color--edge);
	border-radius: 4px;
	transition: border-color var(--swag-ease), background-color var(--swag-ease), color var(--swag-ease);
}
.swag-pdp__buy .wc-block-product-filter-chips__item:hover:not(:disabled) {
	border-color: var(--wp--preset--color--contrast);
}
.swag-pdp__buy .wc-block-product-filter-chips__item[aria-checked="true"] {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.swag-pdp__buy .wc-block-product-filter-chips__item:disabled {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: line-through;
	cursor: not-allowed;
}

.swag-pdp__buy .wp-block-group:has(> .wp-block-woocommerce-product-button) {
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 24px;
}
.swag-pdp__buy .wc-block-components-quantity-selector {
	min-height: 48px;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--edge);
}
.swag-pdp__buy .wc-block-components-quantity-selector input {
	color: inherit;
	background: transparent;
}
.swag-pdp__buy .wc-block-components-quantity-selector__button {
	font-size: var(--wp--preset--font-size--medium);
	color: inherit;
}
.swag-pdp__buy .wp-block-woocommerce-product-button {
	flex: 1;
}
@media (max-width: 479px) {
	.swag-pdp__buy .wp-block-group:has(> .wp-block-woocommerce-product-button) {
		flex-wrap: wrap;
	}
	.swag-pdp__buy .wp-block-woocommerce-product-button {
		flex-basis: 100%;
	}
}

/* Add to cart: the one Guardian Blue action (R3's single coloured button). Pill
   because it is the page's action, like the header pills (R10). */
.swag-pdp__buy .wp-block-woocommerce-product-button .wp-element-button,
.swag-pdp__buy .wc-block-components-product-button__button {
	flex: 1;
	width: 100%;
	min-height: 48px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--light);
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
}
.swag-pdp__buy .wc-block-components-product-button__button:hover:not(:disabled) {
	background: var(--wp--preset--color--primary-deep);
}

.swag-pdp__details {
	margin-top: 40px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.swag-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.swag-details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 16px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.swag-details summary::-webkit-details-marker {
	display: none;
}
.swag-details summary::after {
	content: "";
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23EEE8DA' stroke-width='1.5'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat center;
	transition: transform var(--swag-ease);
}
.swag-details[open] summary::after {
	transform: rotate(180deg);
}
.swag-details th {
	font-weight: 500;
	text-align: left;
}
.swag-details > :not(summary) {
	margin: 0 0 16px;
	color: var(--wp--preset--color--contrast-muted);
}

/* Descriptions are pasted HTML (Printful): paragraphs with line breaks, bold, sometimes
   headings and lists. Paragraphs get a line of space, bold stays at the heading weight. */
.swag-details .wc-block-product-description > * {
	margin: 0;
}
.swag-details .wc-block-product-description > * + * {
	margin-top: 1em;
}
.swag-details .wc-block-product-description :is(b, strong) {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.swag-details .wc-block-product-description :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.swag-details .wc-block-product-description :is(ul, ol) {
	padding-left: 1.25em;
}

/* Printful's size guide link sits in the buy form; its colour comes inline from the
   plugin settings. Ivory and underlined like the other text links. */
.swag-pdp__buy > a[onclick^="Printful_Product_Size_Guide"] {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: underline;
}

.swag-related {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--border);
}

@media (max-width: 1023px) {
	.swag-pdp__top {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.swag-pdp__info {
		display: contents;
	}
	.swag-pdp__head {
		order: -1;
		margin-bottom: 24px;
	}
}

/* ================================================================ Footer */

/* The brand book ends on its gradient page (p. 26); the site ends the same way,
   brand blue rising into the footer's bottom edge. */
.swag-footer {
	padding-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: -0.006em;
	border-top: 1px solid var(--wp--preset--color--border);
	background:
		radial-gradient(80% 90% at 50% 150%, rgb(var(--swag-guardian) / 0.45) 0%, rgb(var(--swag-guardian) / 0) 70%),
		var(--wp--preset--color--base);
}
.swag-footer__top {
	gap: 32px 48px;
}
.swag-footer__navs {
	gap: 16px 96px;
}
.swag-footer .swag-footer__nav .wp-block-navigation__container {
	gap: 8px 24px;
}
.swag-footer .swag-footer__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.swag-footer .swag-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--light);
	text-decoration: underline;
}
.swag-footer__legal {
	gap: 8px 24px;
	margin-top: var(--wp--preset--spacing--70);
	padding-block: 24px 32px;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast-muted);
}
.swag-footer__legal p {
	margin: 0;
}
.swag-footer .swag-footer__legal .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast-muted);
}

/* ================================================================ Printful size guide */

/* Printful builds this popup in JS and writes white and black inline on the modal,
   headings, paragraphs, cells and tabs, hence the !important colours. Restyled with the
   theme's own parts: an 8px plate on the dark ground, the header's round icon button,
   nav plates for tabs, the archive's hairline rules for the table. No uppercase. */
.pf-size-guide-modal-wrapper {
	display: flex;
	padding: 32px;
	background: rgb(18 18 18 / 0.8);
}
@media (max-width: 599px) {
	.pf-size-guide-modal-wrapper {
		padding: 16px;
	}
}
.pf-size-guide-modal {
	height: auto;
	max-height: 100%;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}
.pf-size-guide-modal :is(h1, h2, h3, h4, h5, h6, td) {
	color: inherit !important;
	background-color: transparent !important;
}
.pf-size-guide-modal p {
	color: var(--wp--preset--color--contrast-muted) !important;
	background-color: transparent !important;
}
.pf-size-guide-modal strong {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.pf-size-guide-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px 0;
}
.pf-size-guide-modal__header .pf-size-guide-modal-clear {
	display: none;
}
.pf-size-guide-modal__title {
	float: none;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	letter-spacing: -0.017em;
}
.pf-size-guide-modal__close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	float: none;
	border-radius: 999px;
}
.pf-size-guide-modal__close:hover {
	background: var(--wp--preset--color--surface) !important;
}
.pf-size-guide-modal__close img {
	width: 20px;
	height: 20px;
	filter: invert(1);
}

.pf-size-guide-modal__content {
	padding: 16px 24px 24px;
}
.pf-size-guide-modal__content h4 {
	margin: 24px 0 8px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

.pf-product-size-guide__tabs,
.pf-size-guide-modal-size-chart__tabs {
	display: flex;
	flex-wrap: wrap;
	white-space: normal;
	overflow: visible;
	box-shadow: none;
}
.pf-product-size-guide__tab,
.pf-size-guide-modal-size-chart__tab {
	margin: 0;
	padding: 7px 14px;
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;
	white-space: nowrap;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 4px;
	box-shadow: none !important;
}
.pf-product-size-guide__tab:hover,
.pf-size-guide-modal-size-chart__tab:hover,
.pf-product-size-guide__tab--active,
.pf-size-guide-modal-size-chart__tab--active {
	background-color: var(--wp--preset--color--surface) !important;
}
.pf-size-guide-modal-size-chart__tab.pf-size-guide-modal-size-chart__tab--active {
	font-weight: 400;
}

.pf-size-guide-modal-measurements__image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.pf-size-guide-modal-size-chart__table thead {
	font-weight: 500;
	text-transform: none;
}
.pf-size-guide-modal-size-chart__table td {
	padding: 12px 8px;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	text-transform: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.pf-size-guide-modal-size-chart__table tbody td {
	color: var(--wp--preset--color--contrast-muted) !important;
}