/* ═══════════════════════════════════════════
   WOOCOMMERCE — shop, cart, checkout, account
   WooCommerce's own stylesheets are dequeued in inc/woocommerce.php, so this
   file is the whole visual layer for those pages.
   ═══════════════════════════════════════════ */

.se-main--shop,
.se-shop,
.woocommerce-cart .se-main,
.woocommerce-checkout .se-main,
.woocommerce-account .se-main {
	padding-top: calc(var(--header-height) + 2rem);
	padding-bottom: 4rem;
}

/* ── Archive header ──────────────────────── */

.se-shop__header {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-bottom: 1.5rem;
}

.se-shop__title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
	text-transform: uppercase;
}

.se-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--gutter) 1.5rem;
	font-family: var(--font-body);
	font-size: 1rem;
}

.woocommerce-ordering select,
.se-form select,
.woocommerce select {
	min-height: 44px;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	border: 1px solid var(--se-black);
	background: var(--se-white);
	font-family: var(--font-body);
	font-size: 1rem;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
}

/* ── Product grid ────────────────────────── */

.se-shop__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 2rem;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	list-style: none;
}

/* Inside the grid the card is fluid rather than a fixed 358px column. */
.se-shop__grid .product-card {
	flex: initial;
	width: auto;
}

.se-shop__empty {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	font-family: var(--font-body);
	font-size: 1.125rem;
}

/* ── Forms ───────────────────────────────── */

.woocommerce form .form-row,
.woocommerce-page form .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 1.125rem;
}

.woocommerce label,
.se-form label {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.4;
}

.woocommerce .required {
	color: #A11B1B;
	text-decoration: none;
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.se-search-form__input {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--se-black);
	background: var(--se-white);
	font-family: var(--font-body);
	font-size: 1rem;
}

.woocommerce input:focus-visible,
.woocommerce textarea:focus-visible,
.woocommerce select:focus-visible {
	outline: var(--se-focus-width) solid var(--se-black);
	outline-offset: 1px;
}

.woocommerce input[aria-invalid="true"],
.woocommerce .woocommerce-invalid input {
	border-color: #A11B1B;
	border-width: 2px;
}

.woocommerce .woocommerce-invalid label {
	color: #4A1010;
}

/* ── Buttons ─────────────────────────────── */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 1.5rem;
	background: var(--se-black);
	color: var(--se-white);
	border: 1px solid var(--se-black);
	font-family: var(--font-heading);
	font-size: 1.125rem;
	text-transform: uppercase;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--se-pink);
	border-color: var(--se-pink);
	color: var(--se-white);
}

/*
 * Black on the pink, not white. White on #FF04BC is 3.5:1 and this label is
 * 18px regular, so AA wants 4.5:1 — black gives 6:1. The same trap already bit
 * the sale flash on the product card.
 */
.woocommerce .button.alt {
	background: var(--se-pink);
	border-color: var(--se-pink);
	color: var(--se-black);
}

.woocommerce .button.alt:hover {
	background: var(--se-black);
	border-color: var(--se-black);
	color: var(--se-white);
}

.woocommerce .button:disabled,
.woocommerce .button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Cart ────────────────────────────────── */

.woocommerce-cart-form,
.cart-collaterals,
.woocommerce-checkout .se-main > *,
.woocommerce-account .se-main > * {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 1rem;
	margin-bottom: 2rem;
}

.woocommerce table.shop_table th {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	text-transform: uppercase;
	text-align: start;
	padding: 0.875rem 0.75rem;
	border-bottom: 2px solid var(--se-black);
}

.woocommerce table.shop_table td {
	padding: 1rem 0.75rem;
	border-bottom: 1px solid var(--se-line-on-light);
	vertical-align: middle;
}

.woocommerce table.shop_table img {
	width: 72px;
	height: auto;
}

.woocommerce .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--se-black);
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce .product-remove a.remove:hover {
	background: var(--se-pink);
	border-color: var(--se-pink);
	color: var(--se-white);
}

.woocommerce .quantity input[type="number"] {
	width: 72px;
	text-align: center;
}

/* A responsive table: on narrow screens each row becomes a card and the
   header labels are re-attached with data-title. */
@media (max-width: 47.9375rem) {
	.woocommerce table.shop_table thead { display: none; }

	.woocommerce table.shop_table tr {
		display: block;
		padding: 1rem 0;
		border-bottom: 1px solid var(--se-line-on-light);
	}

	.woocommerce table.shop_table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		border: 0;
		padding: 0.375rem 0;
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		font-family: var(--font-heading);
		text-transform: uppercase;
	}

	.woocommerce table.shop_table td.product-remove::before,
	.woocommerce table.shop_table td.product-thumbnail::before { content: none; }
}

.cart_totals h2,
.cross-sells h2,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

/* ── Checkout ────────────────────────────── */

@media (min-width: 64rem) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		/*
		 * Rows declared, not left implicit. With three implicit rows the left
		 * block spans rows 2–3 and the grid hands row 2 whatever height is left
		 * over after row 3 has been sized — 138px for a 20px heading, so
		 * "Summary" floated 166px above the box it names. Making row 3 the
		 * flexible one sends the spanned block's extra height there instead,
		 * and row 2 shrinks to the heading.
		 */
		grid-template-rows: auto auto 1fr;
		column-gap: 3rem;
		row-gap: 1rem;
		align-items: start;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	/* The row gap is small now, so the two blocks carry their own breathing
	   room below the page title. */
	.woocommerce-checkout form.checkout > .se-commerce__section-title {
		margin-bottom: 1rem;
	}

	/*
	 * Rows matter as much as columns here. Left to auto placement the billing
	 * block defines row 1, so "Your order" sits at the top of the right column
	 * while its own table is pushed to row 2 — a heading stranded a screen above
	 * the thing it names. Spanning the tall block across both rows lets the
	 * summary sit directly under its heading.
	 */
	.woocommerce-checkout form.checkout .se-commerce__section-title {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		grid-row: 2 / span 2;
	}

	.woocommerce-checkout form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 2;
	}

	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
		grid-row: 3;
	}
}

#payment {
	background: var(--se-off-white);
	padding: 1.25rem;
	margin-top: 1.5rem;
}

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

#payment ul.payment_methods li {
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--se-line-on-light);
}

#payment .payment_box {
	padding: 0.75rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-block: 1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* ── My account ──────────────────────────── */

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin-bottom: 2rem;
	padding: 0;
}

.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--se-line-on-light);
	font-family: var(--font-heading);
	text-transform: uppercase;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--se-black);
	border-color: var(--se-black);
	color: var(--se-white);
}

@media (min-width: 64rem) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: 2.5rem;
		align-items: start;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.woocommerce-MyAccount-navigation ul { flex-direction: column; }
}

/* ── Search form ─────────────────────────── */

.se-search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 28rem;
	margin-block: 1.5rem;
}

.se-search-form__submit {
	min-height: 44px;
	padding: 0.5rem 1.25rem;
	background: var(--se-black);
	color: var(--se-white);
	font-family: var(--font-heading);
	text-transform: uppercase;
}

/* ── Price formatting ────────────────────── */

.woocommerce del { opacity: 0.6; }
.woocommerce ins { text-decoration: none; }

/* ── Quantity stepper ────────────────────── */

/* The input keeps its own accessible identity; the buttons are decoration on
   top of it, so they are sized for thumbs and the field stays the source of
   truth. */
.se-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--se-black);
	background: var(--se-white);
}

.se-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	background: transparent;
	color: var(--se-black);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.se-qty__btn:hover {
	background: var(--se-black);
	color: var(--se-white);
}

.woocommerce .se-qty .se-qty__input,
.se-qty__input {
	width: 3.5rem;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--se-line-on-light);
	text-align: center;
	font-family: var(--font-heading);
	font-size: 1rem;
	background: transparent;
	color: var(--se-black);
	-moz-appearance: textfield;
	appearance: textfield;
}

/* The native spinners duplicate the buttons and shrink the usable field. */
.se-qty__input::-webkit-outer-spin-button,
.se-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.se-qty__input:focus-visible {
	outline: 2px solid var(--se-pink);
	outline-offset: -2px;
}

/* ── Empty basket ────────────────────────── */

.se-empty {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: clamp(3rem, 10vw, 7rem) var(--gutter);
	text-align: center;
}

.se-empty__eyebrow {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.875rem;
	color: var(--se-muted-on-light);
	margin-bottom: 0.75rem;
}

.se-empty__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.se-empty__text {
	max-width: 42ch;
	margin-inline: auto;
	margin-bottom: 2rem;
	line-height: 1.6;
	color: var(--se-muted-on-light);
}

.se-empty__cta {
	display: inline-block;
}

/* ── Commerce wrapper ────────────────────── */

.se-commerce {
	padding-block: clamp(2rem, 6vw, 4rem);
}

.se-commerce__back {
	display: inline-block;
	margin-top: 1.25rem;
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* ── Order summary ───────────────────────── */

/* On a long checkout the totals scroll away exactly when they matter. Sticky
   only above the breakpoint where the form is two columns — stuck to a
   single-column phone layout it would cover the fields. */
@media (min-width: 64rem) {
	.woocommerce-checkout form.checkout #order_review {
		position: sticky;
		top: calc(var(--header-height) + 1rem);
	}
}

/* ── Thank you ───────────────────────────── */

.se-thanks {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: clamp(2rem, 6vw, 4rem) var(--gutter);
}

.se-thanks__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.se-thanks__lead {
	max-width: 52ch;
	margin-bottom: 2rem;
	line-height: 1.6;
	color: var(--se-muted-on-light);
}

.se-thanks__editions {
	margin-block: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--se-black);
}

.se-thanks__editions-title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.75rem;
}

.se-thanks__edition {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--se-line-on-light);
}

.se-thanks__edition:last-child {
	border-bottom: 0;
}

.se-thanks__edition-number {
	font-family: var(--font-heading);
	font-size: 1.25rem;
}

/* ── Commerce inside a page template ─────── */

/*
 * Cart and checkout are shortcodes dropped into an ordinary WordPress page, so
 * they render inside page.php's .se-prose — whose 68ch measure is right for a
 * paragraph and far too narrow for a six-column order table. The .se-container
 * around them already supplies the max-width and the gutter, so the inner
 * wrappers must stop supplying their own or everything gets padded twice.
 */
.woocommerce-cart .se-page__content,
.woocommerce-checkout .se-page__content,
.woocommerce-account .se-page__content {
	max-width: none;
}

.se-container .woocommerce-cart-form,
.se-container .cart-collaterals,
.se-container form.checkout,
.se-container .se-empty,
.se-container .se-thanks {
	max-width: none;
	padding-inline: 0;
}

/* .se-prose sets a rhythm on every sibling; inside a table that reads as
   drifting rows. */
.se-page__content .shop_table th,
.se-page__content .shop_table td {
	margin-top: 0;
}

.se-commerce__section-title,
.woocommerce-cart .cart_totals h2 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	text-transform: uppercase;
	line-height: 1.1;
	margin-bottom: 1rem;
}

/* ── Basket layout ───────────────────────── */

/* Above the fold on a laptop the totals belong beside the items, not a screen
   below them. */
@media (min-width: 64rem) {
	/*
	 * The grid goes on .se-commerce — the wrapper the theme itself opens on
	 * woocommerce_before_cart. Putting it on any ancestor produces a one-item
	 * grid, because every level above .se-commerce has exactly one child: a
	 * full-width column of nothing beside a squeezed column of everything.
	 */
	.woocommerce-cart .se-commerce {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
		gap: 3rem;
		align-items: start;
	}

	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .se-commerce__back {
		grid-column: 1;
	}

	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: calc(var(--header-height) + 1rem);
	}

	/* The empty state has nothing to sit beside it. */
	.woocommerce-cart-empty .se-commerce {
		display: block;
	}
}

.cart_totals {
	background: var(--se-off-white);
	padding: 1.5rem;
}

.wc-proceed-to-checkout {
	margin-top: 1.25rem;
}

.wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
}

/* ── Coupon row ──────────────────────────── */

.woocommerce .actions {
	padding: 1rem 0;
}

.woocommerce .actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.woocommerce .actions .coupon .input-text {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: 44px;
}


/* ── Buttons inside prose ────────────────── */

/*
 * page.php drops the shortcode inside .se-prose, which underlines every link so
 * body copy reads properly. A link that has been styled into a button must opt
 * out of that, or "Proceed to checkout" ships as underlined text on a pink
 * block.
 */
.se-prose a.button,
.se-prose a.checkout-button,
.se-prose a.se-btn,
.se-prose .wc-proceed-to-checkout a {
	text-decoration: none;
}

/* ═══════════════════════════════════════════
   COLLECTIONS — the whole range on one page
   ═══════════════════════════════════════════ */

.se-collections {
	padding-top: calc(var(--header-height) + 2rem);
	padding-bottom: clamp(3rem, 8vw, 6rem);
}

.se-collections__header {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.se-collections__title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);
	line-height: 1;
	text-transform: uppercase;
}

.se-collections__intro {
	max-width: 60ch;
	margin-top: 1rem;
}

/* ── Filter ──────────────────────────────── */

.se-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	border-block: 1px solid var(--se-line-on-light);
}

.se-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.se-filter__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--se-black);
	font-family: var(--font-heading);
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--se-black);
	background: transparent;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.se-filter__chip:hover,
.se-filter__chip:focus-visible {
	background: var(--se-black);
	color: var(--se-white);
}

/*
 * The active chip is not signalled by colour alone: aria-current marks it for
 * assistive technology, and the inverted fill plus the weight change make it
 * distinguishable without relying on hue.
 */
.se-filter__chip.is-active {
	background: var(--se-black);
	color: var(--se-white);
	font-weight: 700;
}

.se-filter__count {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--se-muted-on-light);
	margin: 0;
}

/* ── Grid ────────────────────────────────── */

/* Inherits .se-shop__grid, but this page supplies its own container, so the
   grid must not add a second max-width and gutter on top of it. */
.se-collections__grid {
	max-width: none;
	padding-inline: 0;
}

.se-collections__empty {
	font-size: 1.125rem;
	color: var(--se-muted-on-light);
	padding-block: 2rem;
}

/* ═══════════════════════════════════════════
   COMMERCE FLOW — masthead, steps, summary
   ═══════════════════════════════════════════ */

.se-commerce-head {
	padding-top: calc(var(--header-height) + 1.5rem);
	padding-bottom: 1.5rem;
}

/*
 * `ol.` rather than the bare class: `.se-prose ol` in 02-base.css is (0,1,1)
 * and reverts list markers for body copy, so a (0,1,0) class selector loses to
 * it and the breadcrumb rendered as "1. Main › Basket of Sins". Matching its
 * specificity and landing later in the cascade is what actually wins.
 */
ol.se-commerce-head__crumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	padding-inline-start: 0;
	font-size: 0.875rem;
	color: var(--se-muted-on-light);
}

.se-commerce-head__crumb-list li + li::before {
	content: '›';
	margin-inline-end: 0.4rem;
}

/*
 * The title sits in a torn marker block. It is drawn with clip-path on a solid
 * ground rather than as an image, so it stretches to whatever the title says in
 * whatever language, and it costs no request.
 */
.se-commerce-head__title {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.55em 1.6em 0.55em 1.1em;
	background: var(--se-black);
	color: var(--se-white);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
	line-height: 1;
	text-transform: uppercase;
	clip-path: polygon(0% 8%, 3% 0%, 97% 4%, 100% 22%, 99% 82%, 96% 100%, 4% 96%, 0% 78%);
}

.se-commerce-head__tagline {
	margin: 0 0 2rem;
	font-size: 1rem;
	color: var(--se-black);
}

/* ── Step indicator ──────────────────────── */

ol.se-steps__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-inline-start: 0;
	gap: clamp(1rem, 5vw, 4rem);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.se-steps__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.se-steps__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.se-steps__mark svg {
	width: 20px;
	height: 20px;
}

.se-steps__label {
	font-family: var(--font-heading);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/*
 * State is never carried by colour alone: the current step is also the only one
 * with a filled mark and full-strength label, and each carries a screen-reader
 * note saying where the shopper is.
 */
.se-steps__item--current .se-steps__mark {
	background: var(--se-black);
	color: var(--se-white);
}

.se-steps__item--current .se-steps__label {
	color: var(--se-black);
	font-weight: 700;
}

.se-steps__item--done .se-steps__mark {
	background: var(--se-black);
	color: var(--se-white);
	opacity: 0.55;
}

.se-steps__item--done .se-steps__label {
	color: var(--se-muted-on-light);
}

.se-steps__item--todo .se-steps__mark {
	background: #D9D9D9;
	color: #6B6B6B;
}

.se-steps__item--todo .se-steps__label {
	color: var(--se-muted-on-light);
}

/* ── Summary box ─────────────────────────── */

/*
 * The design's summary panel, applied to both the cart totals and the checkout
 * review so the two screens carry one object rather than two lookalikes.
 */
.cart_totals,
.woocommerce-checkout-review-order {
	border: 1px solid var(--se-black);
	background: var(--se-white);
	padding: 1.25rem;
}

.cart_totals h2,
#order_review_heading {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.cart_totals table.shop_table,
.woocommerce-checkout-review-order-table {
	margin-bottom: 0;
	border-collapse: collapse;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	border: 0;
	padding: 0.6rem 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	text-transform: none;
}

.cart_totals table.shop_table th,
.woocommerce-checkout-review-order-table th {
	font-weight: 400;
	text-align: start;
}

/*
 * `.woocommerce table.shop_table th` further up gives every header cell a 2px
 * black underline, for the column headers of the cart table. The checkout
 * summary carries both classes, so its totals rows — Subtotal, Shipping,
 * Discount, whose left cell is a <th> — each grew a heavy black bar stopping
 * halfway across the row. The `border: 0` above lost on specificity (0,1,1
 * against 0,2,1); this restores it and puts the rule back where it belongs,
 * on the actual column headers.
 */
.woocommerce table.shop_table.woocommerce-checkout-review-order-table th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table td {
	border: 0;
}

/* Line items are separated; the totals below them are not — the gold TOTAL
   row is the only separator that panel needs. */
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tbody .cart_item td {
	border-bottom: 1px solid var(--se-line-on-light);
}

.woocommerce table.shop_table.woocommerce-checkout-review-order-table thead th {
	border-bottom: 2px solid var(--se-black);
}

.cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table td {
	text-align: end;
	white-space: nowrap;
}

/*
 * Except the product name. This rule was written for the totals rows, where
 * every cell is a price and belongs hard right — but the checkout summary uses
 * the same table for the line items, so the product name was right-aligned
 * under a left-aligned "Product" header, and `nowrap` stopped a long name from
 * ever wrapping inside a 549px column.
 */
.woocommerce-checkout-review-order-table td.product-name,
.cart_totals table.shop_table td.product-name {
	text-align: start;
	white-space: normal;
}

/* The gold total row is the design's one moment of colour in the panel. */
.cart_totals .order-total th,
.cart_totals .order-total td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	background: var(--se-gold);
	/* Black on #F6BF02 is 11:1; white would be 1.9:1 and unreadable. */
	color: var(--se-black);
	font-weight: 700;
	padding-inline: 0.6rem;
}

/* ── Checkout phases ─────────────────────── */

.se-checkout__advance {
	margin-top: 1.5rem;
}

.se-checkout__payment-title {
	font-family: var(--font-body);
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.se-checkout__back {
	margin: 0 0 1rem;
}

.se-checkout__back-btn {
	background: none;
	border: 0;
	padding: 0.5rem 0;
	min-height: 44px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--se-black);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

/* ── Pink brushstroke CTA ────────────────── */

/*
 * The design's primary commerce action. The stroke is the same asset the
 * headline marks use, behind the button rather than the type — so the label
 * stays black on pink at 6:1 instead of sitting on an uneven edge.
 */
.se-btn--pink,
.woocommerce .button.alt.se-btn--pink,
.wc-proceed-to-checkout .checkout-button,
#place_order {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.7rem 2.5rem;
	background: var(--se-pink);
	border: 0;
	color: var(--se-black);
	font-family: var(--font-heading);
	font-size: 1.125rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	clip-path: polygon(1% 12%, 4% 0%, 96% 5%, 100% 26%, 99% 78%, 95% 100%, 5% 95%, 0% 74%);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.se-btn--pink:hover,
.wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover {
	background: var(--se-black);
	color: var(--se-white);
}

/* clip-path cuts the focus ring off, so the ring goes on a wrapper instead. */
.se-btn--pink:focus-visible,
.wc-proceed-to-checkout .checkout-button:focus-visible,
#place_order:focus-visible {
	outline: var(--se-focus-width) solid var(--se-gold);
	outline-offset: 4px;
	clip-path: none;
}

/*
 * On the payment step the details column is gone, so the two-column grid would
 * leave the left half empty. It collapses to one centred column instead.
 */
@media (min-width: 64rem) {
	.woocommerce-checkout form.checkout.se-checkout--payment {
		grid-template-columns: minmax(0, 34rem);
		justify-content: center;
	}

	.woocommerce-checkout form.checkout.se-checkout--payment .se-commerce__section-title {
		display: none;
	}

	.woocommerce-checkout form.checkout.se-checkout--payment #order_review_heading,
	.woocommerce-checkout form.checkout.se-checkout--payment #order_review {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout.se-checkout--payment #order_review_heading { grid-row: 1; }
	.woocommerce-checkout form.checkout.se-checkout--payment #order_review { grid-row: 2; }
}

/* ═══════════════════════════════════════════
   GARDEN OF WISDOM · SERPENT SOCIETY · SIGNUP
   ═══════════════════════════════════════════ */

.se-wisdom {
	padding-top: calc(var(--header-height) + 2rem);
	padding-bottom: clamp(3rem, 8vw, 6rem);
}

.se-wisdom__title,
.se-society__perks-title,
.se-society__join-title {
	font-family: var(--font-display);
	line-height: 1;
	text-transform: uppercase;
}

.se-wisdom__title {
	font-size: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);
}

.se-wisdom__intro {
	max-width: 60ch;
	margin-top: 1rem;
}

.se-wisdom__section {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

.se-wisdom__heading {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

/* A table can be wider than a phone; it scrolls in its own box rather than
   forcing the whole page sideways. */
.se-wisdom__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.se-wisdom__table-wrap:focus-visible {
	outline: var(--se-focus-width) solid var(--se-gold);
	outline-offset: 2px;
}

.se-wisdom__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 1rem;
}

.se-wisdom__table th,
.se-wisdom__table td {
	padding: 0.85rem 1rem;
	text-align: start;
	border-bottom: 1px solid var(--se-line-on-light);
}

.se-wisdom__table thead th {
	font-family: var(--font-heading);
	text-transform: uppercase;
	border-bottom: 2px solid var(--se-black);
	white-space: nowrap;
}

.se-wisdom__table tbody th {
	font-family: var(--font-heading);
	font-size: 1.125rem;
}

.se-wisdom__note {
	margin-top: 1rem;
	color: var(--se-muted-on-light);
	font-size: 0.9375rem;
}

.se-wisdom__care {
	margin: 0;
	max-width: 60ch;
}

.se-wisdom__care-row {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) 1fr;
	gap: 0.5rem 1.5rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--se-line-on-light);
}

.se-wisdom__care-row dt {
	font-family: var(--font-heading);
	text-transform: uppercase;
	margin: 0;
}

.se-wisdom__care-row dd {
	margin: 0;
}

@media (max-width: 34rem) {
	.se-wisdom__care-row {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

/* ── Serpent Society page ────────────────── */

.se-society__body {
	padding-block: clamp(2.5rem, 7vw, 5rem);
}

.se-society__intro {
	max-width: 60ch;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.se-society__perks-title,
.se-society__join-title {
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
	margin-bottom: 1.5rem;
}

.se-society__perk-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0 0 clamp(2.5rem, 6vw, 4rem);
	padding: 0;
}

.se-society__perk {
	padding: 1.5rem;
	border: 1px solid var(--se-black);
}

.se-society__perk-name {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.se-society__perk-text {
	margin: 0;
	line-height: 1.55;
	color: var(--se-muted-on-light);
}

/* ── Signup form ─────────────────────────── */

.se-join-form {
	max-width: 34rem;
}

.se-join-form__label {
	display: block;
	font-family: var(--font-heading);
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.se-join-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.se-join-form__input {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 52px;
	padding: 0.7rem 1rem;
	border: 1px solid var(--se-black);
	background: var(--se-white);
	font-family: var(--font-body);
	font-size: 1rem;
}

.se-join-form__consent,
.site-footer__newsletter-consent {
	margin-top: 0.9rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.se-join-form__consent label,
.site-footer__newsletter-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}

/*
 * A 16px checkbox is below the 24×24 target minimum, and its label is the rest
 * of the hit area — so the whole label is the control and the box is scaled to
 * meet it.
 */
.se-join-form__consent input[type="checkbox"],
.site-footer__newsletter-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 0.15em;
	accent-color: var(--se-pink);
}

/* Honeypots: off-screen rather than display:none, so bots still fill them. */
.se-join-form__trap,
.site-footer__newsletter-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.se-join-form__status {
	min-height: 1.5em;
	margin-top: 0.75rem;
	font-size: 0.9375rem;
}

.se-wisdom__empty {
	font-size: 1.125rem;
	color: var(--se-muted-on-light);
	padding-block: 2rem;
}


/* ─────────────────────────────────────────────────────────────
   Legal documents
   ─────────────────────────────────────────────────────────────
   Privacy, terms, returns, cookies, accessibility. These are the only pages
   on the site where the job is reading, not looking, so they get out of the
   way: black on white, a measured line length, and no brand furniture beyond
   the headings.
   ───────────────────────────────────────────────────────────── */

.se-legal {
	background: var(--se-white);
	color: var(--se-black);
	padding-block: clamp(3rem, 8vw, 6rem);
}

.se-legal__layout {
	max-width: 46rem;
}

.se-legal__title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	line-height: 0.92;
	font-size: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);
}

.se-legal__updated {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--se-muted-on-light);
	margin-top: 0.75rem;
}

/* ── Contents ────────────────────────────────────────────────
   Numbered, because these documents are argued about by clause number and a
   reader quoting "section 4" should be able to count to it. */

.se-legal__toc {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--se-line-on-light);
	border-inline-start: 4px solid var(--se-gold);
}

.se-legal__toc-title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: 0.06em;
	margin-bottom: 0.75rem;
}

.se-legal__toc-list {
	margin: 0;
	padding-inline-start: 1.4em;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
}

.se-legal__toc-item {
	margin: 0;
}

.se-legal__toc-link {
	color: var(--se-black);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.se-legal__toc-link:hover,
.se-legal__toc-link:focus-visible {
	color: var(--se-pink-on-light);
}

/* ── The document ───────────────────────────────────────────── */

.se-legal__body {
	margin-top: clamp(2rem, 5vw, 3rem);
	max-width: none; /* the layout is already measured; .se-prose would halve it */
}

/*
 * A heading that has been jumped to must not sit flush against the top of the
 * viewport under the sticky header — the first line would be hidden behind it,
 * which reads as the anchor being broken.
 */
.se-legal__body h2[id] {
	scroll-margin-top: clamp(5rem, 12vh, 7rem);
}

.se-legal__body h2 {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	margin-top: 2.5em;
	padding-top: 1.25rem;
	border-top: 1px solid var(--se-line-on-light);
}

.se-legal__body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.se-legal__body h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.0625rem;
	margin-top: 2em;
}

/* Tables appear in these documents (what we collect, who we share it with),
   and they are always too wide for a phone. */
/* The wrapper scrolls, not the table: `display: block` on a <table> removes its
   table semantics, and a scroll box with no tabindex is unreachable by
   keyboard. Both were true of the first version of this rule. */
.se-legal__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: 1.5rem;
}

.se-legal__table-wrap:focus-visible {
	outline: var(--se-focus-width) solid var(--se-gold);
	outline-offset: 2px;
}

.se-legal__body table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.se-legal__body th,
.se-legal__body td {
	padding: 0.7rem 0.9rem;
	text-align: start;
	vertical-align: top;
	border-bottom: 1px solid var(--se-line-on-light);
}

.se-legal__body thead th {
	font-family: var(--font-heading);
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid var(--se-black);
}

/* Blockquotes carry the "have a lawyer read this" warnings while the drafts
   are still drafts, so they have to be impossible to skim past. */
.se-legal__body blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border-inline-start: 4px solid var(--se-pink);
	background: rgba(0, 0, 0, 0.035);
	font-size: 0.9375rem;
}

.se-legal__body blockquote > :first-child { margin-top: 0; }
.se-legal__body blockquote > :last-child { margin-bottom: 0; }

/* ── Foot of the document ───────────────────────────────────── */

.se-legal__siblings {
	margin-top: clamp(3rem, 7vw, 4.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--se-line-on-light);
}

.se-legal__siblings-title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: 0.06em;
	margin-bottom: 0.85rem;
}

.se-legal__sibling-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-family: var(--font-body);
}

.se-legal__sibling {
	color: var(--se-black);
	text-underline-offset: 0.18em;
}

.se-legal__sibling:hover,
.se-legal__sibling:focus-visible {
	color: var(--se-pink-on-light);
}

.se-legal__prefs {
	margin-top: 2rem;
}


/* ─────────────────────────────────────────────────────────────
   WooCommerce's own lists, inside .se-prose
   ─────────────────────────────────────────────────────────────
   `.se-prose ul, .se-prose ol` in 02-base.css does `list-style: revert` so
   body copy gets its bullets back. Cart and checkout are ordinary pages
   holding a shortcode, so every list WooCommerce prints — shipping methods,
   payment methods, notices, the order overview — lands inside that prose
   wrapper and inherits markers it was never meant to have. It is the third
   time this rule has caught something (the breadcrumb <ol> rendered as
   "1. Main › Basket of Sins"; then a bullet beside "Free shipping"), so this
   resets them as a class rather than one at a time.

   Specificity: (0,2,1) and (0,2,0) both beat the (0,1,1) prose rule.
   ───────────────────────────────────────────────────────────── */

.se-prose .woocommerce ul,
.se-prose .woocommerce ol,
.se-prose ul.woocommerce-shipping-methods,
.se-prose ul.wc_payment_methods,
.se-prose ul.payment_methods,
.se-prose ul.woocommerce-error,
.se-prose ul.woocommerce-info,
.se-prose ul.woocommerce-message,
.se-prose ul.woocommerce-order-overview,
.se-prose ul.products {
	list-style: none;
	padding-inline-start: 0;
}

/* Shipping choices are radio rows, not a list of prose. */
.woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.25rem 0;
}

.woocommerce-shipping-methods li label {
	margin: 0;
	font-family: var(--font-body);
}

.woocommerce-shipping-destination {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--se-muted-on-light);
}