/*
Theme Name: MB Joyas
Description: Classic theme for the MB Joyas engine. Stage 1 removed the blog theme from around the WooCommerce account area; stages 2-4 apply the storefront's Vitral design system and its header and footer. Storefront links are built from MB_JOYAS_STOREFRONT_URL.
Version: 2.0.7
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: mb-joyas
Tags: woocommerce
*/

/* ==========================================================================
   Self-hosted fonts - Latin subset.
   Same families and weights the storefront loads with next/font:
   Cinzel Decorative 400/700 (static) and EB Garamond 400-600 normal/italic
   (variable). Files come from Google Fonts and are redistributed under OFL.
   ========================================================================== */

@font-face {
	font-family: "Cinzel Decorative";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/cinzel-decorative-400.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: "Cinzel Decorative";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/cinzel-decorative-700.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: "EB Garamond";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/eb-garamond-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: "EB Garamond";
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/eb-garamond-italic.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;
}

/* ==========================================================================
   Vitral tokens - ported from apps/storefront/src/app/globals.css.
   ========================================================================== */

:root {
	--bg: #0b0713;          /* stained-glass night */
	--panel: #140c24;       /* nave panel */
	--panel-2: #1a1030;     /* deep panel */
	--ink: #f3ede4;         /* candlelight (text) */
	--muted: #c6bcd6;       /* violet smoke */
	--line: rgba(243, 237, 228, 0.14);
	--sapphire: #1e3a8a;
	--emerald: #14654b;
	--ruby: #8e1f3a;
	--amethyst: #5b2a86;
	--amber: #c98a2b;
	--lead: #0a0710;
	--focus: #c98a2b;
	--radius: 3px;
	--wrap: 1180px;
	--font-display: "Cinzel Decorative";
	--font-body: "EB Garamond";
	color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	min-width: 320px;
	background-color: var(--bg);
	background-image: radial-gradient(120% 55% at 50% 0%, rgba(91, 42, 134, 0.22), transparent 62%);
	background-repeat: no-repeat;
	color: var(--ink);
	font-family: var(--font-body), Georgia, "Times New Roman", serif;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	padding-left: 1.25rem;
}

::selection {
	background: var(--amber);
	color: var(--lead);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display), Georgia, serif;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: 0.04em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2rem, 1.25rem + 3.2vw, 3.75rem);
}

h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
}

h3 {
	font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
}

h4,
h5,
h6 {
	font-size: 1rem;
}

p {
	margin: 0 0 1rem;
}

p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (min-width: 640px) {
	.wrap {
		padding-inline: 2rem;
	}
}

.site-main {
	padding-block: clamp(1.75rem, 4vw, 3rem);
}

.entry-header {
	margin-bottom: 1.5rem;
}

/* Screen-reader-only, same technique as the storefront (.sr-only) and core. */
.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	max-width: calc(100vw - 2rem);
	padding: 0.6rem 1.1rem;
	background: var(--ink);
	color: var(--lead);
	border: 2px solid var(--lead);
	box-shadow: 0 0 0 2px var(--amber);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Hidden by its own height, not by a fixed offset. The label wraps to three
	   lines on a 375px screen, which is taller than the 4rem offset this used to
	   use, so 14px of the link stayed visible at the top of every page. Moving it
	   up by 100% of its height works whatever that height turns out to be. */
	transform: translateY(calc(-100% - 2rem));
	transition: transform 0.15s ease;
}

.skip-link:focus {
	transform: none;
}

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

/* The skip link lands focus on <main>, which is not an interactive control, so
   the global ring is not a useful indicator there: it frames the whole page.
   The jump itself is the feedback, and this is the usual skip-target pattern. */
#main-content:focus,
#main-content:focus-visible {
	outline: none;
}

/* ==========================================================================
   Storefront header (mirrors SiteHeader in src/components/site.tsx)
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(11, 7, 19, 0.92);
	border-bottom: 2px solid var(--lead);
	backdrop-filter: blur(10px);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.25rem;
	padding-block: 0.5rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-display), Georgia, serif;
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rosette {
	display: block;
	inline-size: clamp(2.2rem, 8vw, 3rem);
	aspect-ratio: 1;
	margin-right: 0.5rem;
	border-radius: 50%;
	border: 2px solid var(--lead);
	background:
		radial-gradient(circle at 36% 30%, rgba(243, 237, 228, 0.4) 0 10%, rgba(243, 237, 228, 0) 55%),
		repeating-conic-gradient(from -15deg, var(--lead) 0deg 2deg, rgba(10, 7, 16, 0) 2deg 30deg),
		conic-gradient(from -90deg, var(--ruby) 0deg 60deg, var(--amber) 60deg 120deg, #14654b 120deg 180deg, var(--sapphire) 180deg 240deg, var(--amethyst) 240deg 300deg, var(--ruby) 300deg 360deg);
	box-shadow: inset 0 0 12px rgba(10, 7, 16, 0.55), 0 0 0 3px var(--bg), 0 0 0 4px var(--line);
}

.nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1rem;
}

.nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--muted);
	transition: color 0.15s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
	color: var(--ink);
}

.cart-link {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.35rem 0.9rem;
	border: 2px solid var(--lead);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(243, 237, 228, 0.06);
	color: var(--ink);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.cart-link:hover {
	border-color: var(--amber);
	background: rgba(201, 138, 43, 0.12);
}

.site-header__account {
	margin-left: auto;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
}

.site-header__account .cart-link {
	margin-left: 0;
}

/* ==========================================================================
   Buttons (storefront .btn + WooCommerce buttons)
   ========================================================================== */

.btn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.7rem 1.5rem;
	border: 2px solid var(--amber);
	border-radius: var(--radius);
	background: var(--lead);
	color: var(--ink);
	font-family: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .woocommerce-Button:hover {
	background: #1b1129;
	color: var(--ink);
	transform: translateY(-1px);
}

.btn--ghost {
	background: transparent;
	border-color: var(--line);
	box-shadow: none;
}

.btn--ghost:hover {
	border-color: var(--amber);
	background: rgba(201, 138, 43, 0.12);
}

.woocommerce input.button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce .button.disabled {
	opacity: 0.55;
	cursor: not-allowed;
	color: var(--ink);
	background: var(--lead);
	transform: none;
}

/* Secondary account actions ("Ver" an order, small links). */
.woocommerce .woocommerce-orders-table .button,
.woocommerce .woocommerce-MyAccount-downloads .button {
	min-height: 44px;
	padding: 0.45rem 1rem;
	font-size: 0.78rem;
	background: transparent;
	border-color: var(--line);
}

.woocommerce .woocommerce-orders-table .button:hover,
.woocommerce .woocommerce-MyAccount-downloads .button:hover {
	border-color: var(--amber);
	background: rgba(201, 138, 43, 0.12);
}

/* ==========================================================================
   Storefront footer (mirrors SiteFooter in src/components/site.tsx)
   ========================================================================== */

.site-footer {
	margin-top: clamp(3rem, 8vw, 6rem);
	background: var(--panel);
	border-top: 2px solid var(--lead);
}

.site-footer__grid {
	display: grid;
	gap: 1.5rem;
	padding-block: 2.5rem;
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

.site-footer__title {
	font-family: var(--font-display), Georgia, serif;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.site-footer p,
.site-footer li,
.site-footer__bottom {
	color: var(--muted);
	font-size: 0.92rem;
}

.site-footer ul {
	display: grid;
	gap: 0.25rem;
	padding-left: 0;
	list-style: none;
}

.site-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-footer a:hover {
	color: var(--ink);
}

.site-footer__bottom {
	border-top: 1px solid var(--line);
	padding-block: 1rem;
	font-size: 0.85rem;
}

/* ==========================================================================
   WooCommerce account area
   ========================================================================== */

.woocommerce {
	color: var(--ink);
}

/* WooCommerce floats the account navigation and content (30/68). The Vitral
   layout uses grid instead, so clear the floats and let the columns size. */
.woocommerce .woocommerce-MyAccount-navigation,
.woocommerce .woocommerce-MyAccount-content {
	width: auto;
	float: none;
}

/* WooCommerce ships a micro-clearfix — `::before` and `::after` with
   `content: " "` and `display: table` — on a long list of containers, there to
   clear the floats its pre-flexbox layouts used. This theme lays those same
   containers out with grid or flex, where those pseudo-elements stop being
   invisible and become REAL items: they take cells and push everything after
   them. That is why the login and the register cards, and the two address
   cards, ended up diagonally staggered instead of side by side.
   The theme never relies on WooCommerce's floats, so the clearfix is removed
   wherever it would become an item. The notices keep their own ::before icon,
   so only their ::after is dropped.
   The selectors mirror WooCommerce's own (`.woocommerce-account .woocommerce`,
   `.woocommerce-account .addresses .title`) on purpose: this file loads after
   WooCommerce's, but a lower-specificity selector would still lose to it. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce .u-columns::before,
.woocommerce .u-columns::after,
.woocommerce .woocommerce-Addresses::before,
.woocommerce .woocommerce-Addresses::after,
.woocommerce-account .addresses .title::before,
.woocommerce-account .addresses .title::after,
.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after,
.woocommerce form .form-row::before,
.woocommerce form .form-row::after,
.woocommerce .woocommerce-billing-fields::before,
.woocommerce .woocommerce-billing-fields::after,
.woocommerce .woocommerce-shipping-fields::before,
.woocommerce .woocommerce-shipping-fields::after,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
	content: none;
	display: none;
}

/* Account layout: navigation beside content from tablet up. :has() keeps the
   login screen (no navigation) in a single column. */
.woocommerce-MyAccount-navigation {
	margin-bottom: 1.75rem;
}

.woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--muted);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--ink);
	border-color: var(--amber);
}

.woocommerce-MyAccount-navigation ul li.is-active > a {
	color: var(--amber);
	border-color: var(--amber);
	background: rgba(201, 138, 43, 0.12);
	box-shadow: inset 0 0 0 1px rgba(201, 138, 43, 0.35);
}

@media (min-width: 768px) {
	.woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
		gap: 2rem;
		align-items: start;
	}

	.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	/* Auto-placement alone proved fragile: pin each pane to its column. Rows
	   still flow, so the notices wrapper keeps its own row when present. */
	.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
		grid-column: 1;
	}

	.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
		grid-column: 2;
	}

	.woocommerce-MyAccount-navigation {
		margin-bottom: 0;
	}
}

/* Account content */
.woocommerce-MyAccount-content a {
	color: var(--amber);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.woocommerce-MyAccount-content a:hover {
	color: var(--ink);
}

.woocommerce-MyAccount-content h2 {
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
	margin-block: 1.5rem 0.75rem;
}

.woocommerce-MyAccount-content h3 {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	margin-block: 1.25rem 0.5rem;
}

.woocommerce-MyAccount-content h2:first-child,
.woocommerce-MyAccount-content h3:first-child {
	margin-top: 0;
}

/* Notices and errors */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 2px solid var(--lead);
	border-left-width: 4px;
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--muted);
	list-style: none;
}

.woocommerce-message {
	border-left-color: var(--emerald);
}

.woocommerce-info {
	border-left-color: var(--sapphire);
}

.woocommerce-error {
	border-left-color: var(--ruby);
	color: #f0a3b6;
}

.woocommerce-error li + li {
	margin-top: 0.35rem;
}

.woocommerce-message,
.woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

/* WooCommerce also drops an icon placeholder into the notices: an absolutely
   positioned ::before box with an EMPTY content, parked at the very left offset
   the text starts at, so it lands on top of the first characters. The
   storefront's notices carry no icon at all — the coloured left border already
   says which kind of message it is — so the placeholder goes, rather than being
   re-implemented. Its ::after (the clearfix) is dropped with the other
   clearfixes above. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
	display: none;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--amber);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover {
	color: var(--ink);
}

/* Forms */
.woocommerce form .form-row {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	color: var(--muted);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce form .form-row .required {
	color: var(--amber);
	text-decoration: none;
	border: 0;
	visibility: visible;
}

.woocommerce form .form-row .woocommerce-input-wrapper {
	display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .woocommerce-Input {
	width: 100%;
	max-width: none;
	min-height: 46px;
	padding: 0.55rem 0.75rem;
	color: var(--ink);
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce .woocommerce-Input:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"],
.woocommerce .woocommerce-form__input-checkbox {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	min-height: auto;
	accent-color: var(--amber);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	float: none;
	width: auto;
}

.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.95rem;
}

/* Remember-me and submit share one row: keep them side by side and let them
   wrap at 320px. */
.woocommerce form .form-row:has(.woocommerce-form__label-for-checkbox) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.woocommerce .password-input-wrapper {
	position: relative;
	display: block;
}

.woocommerce .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--muted);
	cursor: pointer;
}

/* Two-column field grids for the account forms (mobile keeps one column). */
@media (min-width: 640px) {
	.woocommerce form.woocommerce-EditAccountForm,
	.woocommerce .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.woocommerce form.woocommerce-EditAccountForm .form-row,
	.woocommerce .woocommerce-address-fields__field-wrapper .form-row {
		margin: 0;
	}

	.woocommerce form.woocommerce-EditAccountForm .form-row-wide,
	.woocommerce .woocommerce-address-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}

	/* The submit button sits in a plain <p> with no row class, so it would take
	   a single cell and land under the right-hand column instead of lining up
	   with the fields. Match on the button itself: WooCommerce renders every
	   form row as a `<p class="form-row">`, so a bare `> p` would also span the
	   half-width first and last name rows and stack them. */
	.woocommerce form.woocommerce-EditAccountForm > p:has(> button),
	.woocommerce .woocommerce-address-fields__field-wrapper > p:has(> button) {
		grid-column: 1 / -1;
	}
}

/* A framed box would inset the password fields by its own padding, which put
   them 20px to the right of every other field in the form. A rule over the
   section separates it instead, so all the fields share one left edge. */
.woocommerce form.woocommerce-EditAccountForm fieldset {
	grid-column: 1 / -1;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border: 0;
	border-top: 1px solid var(--line);
	background: none;
}

.woocommerce form.woocommerce-EditAccountForm fieldset legend {
	display: block;
	width: 100%;
	padding: 0 0 1rem;
	font-family: var(--font-display), Georgia, serif;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
}

/* Login and registration */
#customer_login {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	#customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}

.woocommerce #customer_login .u-column1,
.woocommerce #customer_login .u-column2 {
	width: auto;
	float: none;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--panel);
	border: 2px solid var(--lead);
	border-radius: var(--radius);
	box-shadow: inset 0 0 0 1px rgba(243, 237, 228, 0.06);
}

#customer_login h2 {
	margin-bottom: 0.75rem;
	font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
}

.woocommerce-privacy-policy-text {
	margin-bottom: 1rem;
	color: var(--muted);
	font-size: 0.9rem;
}

.woocommerce-LostPassword {
	margin-top: 0.5rem;
}

.woocommerce-LostPassword a {
	color: var(--amber);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Tables: orders, downloads, order details */
.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 1.5rem;
	border: 2px solid var(--lead);
	border-collapse: collapse;
	background: var(--panel);
	color: var(--ink);
	overflow-wrap: anywhere;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.75rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.woocommerce table.shop_table thead th {
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	border-top: 1px solid var(--line);
	border-bottom: 0;
}

.woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

/* WooCommerce stacks .shop_table_responsive rows below 768px; keep that
   behaviour and restyle the stacked rows as panels. */
@media (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr {
		border-bottom: 1px solid var(--line);
	}

	.woocommerce table.shop_table_responsive tr:last-child {
		border-bottom: 0;
	}

	.woocommerce table.shop_table_responsive tr td {
		padding: 0.3rem 0;
		border-bottom: 0;
	}
}

.woocommerce mark {
	padding: 0.15rem 0.55rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: rgba(201, 138, 43, 0.14);
	color: var(--amber);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Addresses */
.woocommerce-Addresses {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

@media (min-width: 768px) {
	.woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce .woocommerce-Addresses .col-1,
.woocommerce .woocommerce-Addresses .col-2 {
	width: auto;
	float: none;
}

.woocommerce-Address {
	padding: 1.25rem;
	background: var(--panel);
	border: 2px solid var(--lead);
	border-radius: var(--radius);
	box-shadow: inset 0 0 0 1px rgba(243, 237, 228, 0.06);
}

.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.1rem;
}

.woocommerce-Address address,
.woocommerce-customer-details address {
	font-style: normal;
	color: var(--muted);
}

.woocommerce-Address .edit {
	color: var(--amber);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Order details */
.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: 1.5rem;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	margin-bottom: 0.5rem;
	font-size: 1.15rem;
}

.woocommerce .wc-item-meta {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 0.9rem;
}

.woocommerce .wc-item-meta li {
	margin: 0;
}

/* SelectWoo (country/state selects in the address forms). */
.woocommerce .select2-container--default .select2-selection--single {
	min-height: 46px;
	padding: 0.35rem 0.75rem;
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--ink);
	line-height: 1.9;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 0.5rem;
}

.woocommerce .select2-dropdown {
	background: var(--panel-2);
	border-color: var(--line);
	color: var(--ink);
}

.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--amethyst);
	color: var(--ink);
}

.woocommerce .select2-search--dropdown .select2-search__field {
	background: var(--panel);
	border: 1px solid var(--line);
	color: var(--ink);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}

	.btn:hover,
	.woocommerce .button:hover {
		transform: none;
	}
}