/* ==========================================================================
   WooCommerce brand-match — enqueued ONLY when WooCommerce is active.
   Scope: (a) classic-template legacy classes theme.json can't reach
   (price, onsale, add_to_cart_button, My Account, classic notices), and
   (b) the few wc-block component knobs without a global-styles slot
   (component buttons, star color, quantity input). Kept minimal on purpose —
   Woo block internals are private; block-level styling lives in theme.json.
   ========================================================================== */

/* ---- Prices (classic) ---- */
.woocommerce .price,
.woocommerce .price .amount,
.price > .amount,
.woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--teal-deep);
}

.price del .amount {
	color: var(--wp--custom--color--text-secondary);
	text-decoration: line-through;
}

/* ---- Sale badge (classic) ---- */
.woocommerce span.onsale {
	background: var(--wp--preset--color--coral);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 14px;
	line-height: 1.4;
	min-width: 0;
	min-height: 0;
}

/* ---- Buttons: classic classes + wc-block component buttons (which do not
        inherit the core button element) — match the primary pill ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.wc-block-components-button:not(.is-link) {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: var(--wp--preset--font-size--base);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--action-primary);
	color: var(--wp--custom--color--text-on-brand);
	padding: 12px 22px;
	transition: background var(--wp--custom--duration--base) var(--wp--custom--ease--standard);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--wp--custom--color--action-primary-hover);
	color: var(--wp--custom--color--text-on-brand);
}

/* Proceed-to-checkout = the one brand-shadow CTA of the shop flow */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	box-shadow: var(--wp--preset--shadow--brand);
}

/* ---- Star ratings → gold ---- */
.wc-block-components-product-rating,
.wc-block-grid__product-rating .star-rating,
.woocommerce .star-rating {
	color: var(--wp--preset--color--gold);
}

/* ---- Quantity input — 2px border, form-field recipe ---- */
.woocommerce .quantity .qty,
.wc-block-components-quantity-selector {
	font-family: var(--wp--preset--font-family--sans);
	border: 2px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--color--surface-card);
}

.wc-block-components-quantity-selector {
	border-radius: var(--wp--custom--radius--pill);
}

/* ---- Classic notices → DS notice tones ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--normal);
	border: none;
	border-radius: var(--wp--custom--radius--lg);
	padding: 16px 20px;
}

.woocommerce-message {
	background: var(--wp--preset--color--aqua-100);
	color: #1d4f49;
}

.woocommerce-info {
	background: var(--wp--preset--color--teal-100);
	color: var(--wp--preset--color--teal-900);
}

.woocommerce-error {
	background: var(--wp--preset--color--coral-100);
	color: #7c2d1a;
}

/* ==========================================================================
   My Account (classic [woocommerce_my_account]) — MyAccount.png design.
   Cream page, two rounded white cards: nav sidebar + content.
   ========================================================================== */

/* Kicker override for this page (design shows teal, not the sitewide flame) */
.sheris-account .sheris-kicker--account {
	color: var(--wp--preset--color--teal-600);
}

/* Cream flows from under the fixed header — no white spacer band above the
   cream account section. */
body.woocommerce-account .sheris-header__spacer {
	background-color: var(--wp--preset--color--cream-50);
}

/* Two-column card layout (overrides Woo's default float grid) */
/* 1140 content rail + the sitewide 48px section gutters.
   Selector depth matches WooCommerce's own `.woocommerce-account main
   .woocommerce { max-width: 1000px }` in woocommerce-blocktheme.css. */
body.woocommerce-account main .woocommerce {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	align-items: start;
	box-sizing: border-box;
	max-width: 1236px;
	margin-inline: auto;
	padding-inline: 48px;
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
}

/* Nav sidebar card */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--wp--custom--color--surface-card, #fff);
	border-radius: var(--wp--custom--radius--lg, 16px);
	box-shadow: var(--wp--preset--shadow--sm);
	padding: 16px;
	width: auto;
	float: none;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--wp--preset--font-family--sans);
}

/* li reset — .woocommerce-account prefix beats Woo's default li padding/margin */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 12px 20px;
	border-radius: var(--wp--custom--radius--md, 10px);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--custom--color--text-primary) !important;
	text-decoration: none !important;
	transition: background var(--wp--custom--duration--fast, 120ms) var(--wp--custom--ease--standard), color var(--wp--custom--duration--fast, 120ms) var(--wp--custom--ease--standard);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--wp--preset--color--cream-100);
	color: var(--wp--custom--color--text-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--wp--preset--color--teal-600);
	color: #fff !important;
}

/* Log out — coral, separated by a hairline above */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--custom--color--border-subtle);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: var(--wp--preset--color--coral-deep) !important;
	background: none;
}

/* Content card */
.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--wp--custom--color--surface-card, #fff);
	border-radius: var(--wp--custom--radius--lg, 16px);
	box-shadow: var(--wp--preset--shadow--sm);
	padding: 40px;
	width: auto;
	float: none;
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--custom--color--text-primary);
}

.woocommerce-MyAccount-content p {
	line-height: var(--wp--custom--leading--relaxed);
	color: var(--wp--custom--color--text-secondary);
}

/* Dashboard greeting (myaccount/dashboard.php override) */
.sheris-acct-greeting {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--2-xl);
	color: var(--wp--custom--color--text-primary);
	margin: 0 0 4px;
}

.sheris-acct-subgreet {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 16px;
}

.sheris-acct-intro {
	margin: 0 0 24px;
}

/* Sand renewal notice */
.sheris-acct-notice {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink-900);
	border-radius: var(--wp--custom--radius--md, 10px);
	padding: 16px 20px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--normal);
	margin-bottom: 20px;
}

/* Membership / next-payment / payment-method cards */
.sheris-acct-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.sheris-acct-card {
	background: var(--wp--preset--color--cream-100);
	border-radius: var(--wp--custom--radius--md, 10px);
	padding: 20px;
}

.sheris-acct-card__label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--custom--color--text-secondary);
	margin-bottom: 10px;
}

.sheris-acct-card__value {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--custom--color--text-primary);
}

.sheris-acct-card__badge {
	display: inline-block;
	background: var(--wp--preset--color--aqua-100);
	color: var(--wp--preset--color--aqua-600);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill);
}

.sheris-acct-card__meta {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--color--text-secondary);
	margin-top: 8px;
}

@media (max-width: 599px) {
	.sheris-acct-cards {
		grid-template-columns: 1fr;
	}
}

.woocommerce-MyAccount-content a {
	color: var(--wp--custom--color--text-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-MyAccount-content a:hover {
	color: var(--wp--custom--color--text-link-hover);
}

/* ---- Login / register (logged-out account) — centered card ---- */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
	max-width: 480px;
}

.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register {
	background: var(--wp--custom--color--surface-card, #fff);
	border: none;
	border-radius: var(--wp--custom--radius--lg, 16px);
	box-shadow: var(--wp--preset--shadow--md);
	padding: 40px;
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
}

.woocommerce #customer_login > .u-column1,
.woocommerce #customer_login > .u-column2 {
	width: 100%;
	float: none;
}

.woocommerce #customer_login h2,
.woocommerce-account .woocommerce h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--2-xl);
	margin: 0 0 20px;
}

.woocommerce form .form-row label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--custom--color--text-secondary);
	margin-bottom: 6px;
	display: block;
}

.woocommerce form .form-row input.input-text {
	width: 100%;
	box-sizing: border-box;
}

/* Password field — plain, like the design (hide Woo's reveal-eye toggle) */
.woocommerce form .form-row .password-input {
	display: block;
	position: relative;
}

.woocommerce form .password-input .show-password-input {
	display: none;
}

.woocommerce form.woocommerce-form-login .form-row button,
.woocommerce form.woocommerce-form-register .form-row button,
.woocommerce form.woocommerce-form-login button.woocommerce-button {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

.woocommerce-form-login__rememberme,
.woocommerce-LostPassword {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--color--text-secondary);
}

.woocommerce-LostPassword a {
	color: var(--wp--custom--color--text-link);
}

/* ---- Responsive: stack the account cards below `lg` ----
   Matches the header's mobile-menu breakpoint; the 280px sidebar + content
   needs more room than a tablet gives. ---- */
@media (max-width: 1023px) {
	/* Specificity must match the base rule above (which matches Woo's own). */
	body.woocommerce-account main .woocommerce {
		grid-template-columns: 1fr;
		padding-inline: 24px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 24px;
	}
}

/* ---- Form fields (checkout classic + account) ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	padding: 12px 18px;
	border: 2px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--custom--color--surface-card);
	color: var(--wp--custom--color--text-primary);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal-500);
}

/* ---- Product grid title links stay ink, teal on hover ---- */
.sheris-products .wp-block-post-title a {
	color: var(--wp--custom--color--text-primary);
	text-decoration: none;
}

.sheris-products .wp-block-post-title a:hover {
	color: var(--wp--custom--color--text-link-hover);
}

/* Product images — 22px card radius */
.sheris-products .wc-block-components-product-image,
.sheris-products .wc-block-components-product-image img,
.wp-block-woocommerce-product-image-gallery img {
	border-radius: var(--wp--custom--radius--card);
}