/* FluentCart (shop, cart, checkout, receipt, account): hand-written; uses token variables only.
   FluentCart's stylesheets read --fct-* custom properties with their own fallbacks, and every per-page variable
   (checkout, shop, customer dashboard…) falls back to these globals, so setting the globals here restyles the whole
   store. They point at our tokens, so dark mode follows automatically. FluentCart's own Appearance setting stays on
   "Default", which prints nothing that would compete with these. */

body {
	/* Text */
	--fct-primary-text-color: var(--wp--preset--color--ink);
	--fct-secondary-text-color: var(--wp--preset--color--ink-muted);
	--fct-primary-active-text-color: var(--wp--preset--color--hype-blue-deep);

	/* Backgrounds and borders */
	--fct-primary-bg-color: var(--wp--preset--color--hype-blue);
	--fct-secondary-bg-color: var(--wp--preset--color--surface-sunken);
	--fct-card-bg-color: var(--wp--preset--color--surface-raised);
	--fct-border-color: var(--wp--preset--color--border-control);
	--fct-divider-color: var(--wp--preset--color--border-subtle);
	--fct-active-border-color: var(--wp--preset--color--hype-blue-deep);
	--fct-secondary-active-border-color: var(--wp--preset--color--hype-blue);

	/* Buttons: primary is our blue pill, secondary our outline (Button/README) */
	--fct-btn-bg-color: var(--wp--preset--color--hype-blue);
	--fct-btn-text-color: var(--wp--preset--color--on-brand);
	--fct-btn-hover-bg-color: var(--wp--preset--color--hype-blue-hover);
	--fct-btn-hover-text-color: var(--wp--preset--color--on-brand);
	--fct-secondary-btn-bg-color: transparent;
	--fct-secondary-btn-text-color: var(--wp--preset--color--ink);
	--fct-secondary-btn-border-color: var(--wp--preset--color--border-control);
	--fct-secondary-btn-hover-bg-color: var(--wp--preset--color--surface-sunken);
	--fct-btn-padding-y: var(--wp--preset--spacing--3);
	--fct-btn-padding-x: var(--wp--preset--spacing--5);

	/* Form inputs: surface-raised with a border-control edge, as in Fluent Forms */
	--fct-input-bg-color: var(--wp--preset--color--surface-raised);
	--fct-input-text-color: var(--wp--preset--color--ink);
	--fct-input-placeholder-text-color: var(--wp--preset--color--ink-muted);
	--fct-input-disabled-bg-color: var(--wp--preset--color--surface-sunken);

	/* Corners */
	--fct-card-radius: var(--wp--custom--radius--lg);
	--fct-container-radius: var(--wp--custom--radius--lg);
	--fct-popup-radius: var(--wp--custom--radius--lg);
	--fct-btn-radius: var(--wp--custom--radius--pill);
	--fct-badge-radius: var(--wp--custom--radius--pill);
	--fct-input-radius: var(--wp--custom--radius--md);
}

/* The store's content sits in the band's full width (no reading column): the shop grid and the two-column checkout
   need the room. */
.hdc-store {
	margin-top: var(--wp--preset--spacing--6);
}

/* Fields: 48px tall, the design system's tap target. */
body {
	--fct-input-padding-y: 12px;
	--fct-input-padding-x: var(--wp--preset--spacing--4);
}

/* Primary buttons (Add to Cart, Go to Checkout, Place Order): the design system's button text (16px bold) and 48px
   height. FluentCart has no variables for these, so they're set here; "body" outranks FluentCart's single classes. */
body :is(.fluent-cart-add-to-cart-button, .fct-primary-btn, .fct_place_order_btn) {
	min-height: var(--wp--custom--tap-target);
	max-height: none;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--type--button--font-size);
	line-height: var(--wp--custom--type--button--line-height);
	font-weight: var(--wp--custom--type--button--font-weight);
	text-decoration: none;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
body :is(.fluent-cart-add-to-cart-button, .fct-primary-btn, .fct_place_order_btn):focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}
@media (hover: hover) {
	body :is(.fluent-cart-add-to-cart-button, .fct-primary-btn, .fct_place_order_btn):hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}

/* Product cards in the shop: the design system's card (surface-raised, soft shadow, no outline), the photo slot
   tinted while a product has no image, and the title in the display font. */
body .fct-product-card {
	padding: 0;
	border-color: transparent;
	background: var(--wp--preset--color--surface-raised);
	box-shadow: var(--wp--preset--shadow--card);
}
body .fct-product-card-image-wrap.is-placeholder {
	background: var(--wp--preset--color--hype-blue-tint);
}
body .fct-product-card-title,
body .fct-product-card-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* The floating basket button (bottom right): a raised white disc with a shadow, so it shows on any band,
   the navy footer included. */
body .fct-cart-drawer-open-btn {
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--card);
}

/* "Have a Coupon?" in the order summary: the page background (surface) rather than the sunken tint, so it's a
   softer highlight inside the white summary panel (Alex, 2026-10-29). */
body .fct_coupon .fct_coupon_toggle a {
	background-color: var(--wp--preset--color--surface);
}