/* ============================================================
   Wyrmwood BUTTONS
   ------------------------------------------------------------
   The button system from the Figma "Style Guide"
   (key iwmyNbWrcNT0oz5Lvr2U5F → Buttons → Fluid/Fixed Buttons).

   Figma models buttons on four axes; this file mirrors them:

     Colour use  .wwg-btn--neutral | --cta | --emphasis | --visibility
     Hierarchy   .wwg-btn--filled  | --outlined | --borderless
     Size        .wwg-btn--sm | --md | --lg | --xl   (14/16/20/24px)
     State       default | :hover | [disabled]

   Fluid and Fixed are identical apart from width, so .wwg-btn is
   intrinsic-width (Fixed) and .wwg-btn--fluid fills its container.

   Figma strokes are drawn INSIDE the button, so its 8px / 56px padding
   includes the 2px outline: CSS padding is the token minus the border
   width, giving Figma's heights (48 / 40 / 36 / 34px for 24 / 20 / 16 / 14px).

   Signature pages (body.wwg_dark_mode) swap the geometry tokens for the
   Design System PDF's Signature shape: curved sides, 1px outline, 8 / 64px.
   Borderless buttons are underlined (Design System PDF, "Borderless (Underline)"):
   1px line about 1px under the baseline.

   Each colour-use modifier only sets local custom properties; the
   hierarchy rules consume them. That keeps 12 colour x hierarchy
   combinations to 4 + 3 rules instead of 12.
   ============================================================ */

.wwg-btn {
	/* Defaults to Neutral so a bare .wwg-btn is valid. */
	--btn-ink: var(--wwg-btn-neutral-ink);
	--btn-fill: var(--wwg-btn-neutral-fill);
	--btn-fill-hover: var(--wwg-btn-neutral-fill-hover);
	--btn-on-fill: var(--wwg-btn-neutral-on-fill);
	--btn-ink-hover: var(--wwg-btn-neutral-ink-hover);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--wwg-btn-padding-y) - var(--wwg-btn-border-width)) calc(var(--wwg-btn-padding-x) - var(--wwg-btn-border-width));
	border: var(--wwg-btn-border-width) solid transparent;
	border-radius: var(--wwg-btn-radius);
	font-family: var(--wwg-font-body);
	font-weight: var(--wwg-btn-weight);
	font-size: var(--wwg-btn-md-size);
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ---- Colour use ---- */

.wwg-btn--neutral {
	--btn-ink: var(--wwg-btn-neutral-ink);
	--btn-fill: var(--wwg-btn-neutral-fill);
	--btn-fill-hover: var(--wwg-btn-neutral-fill-hover);
	--btn-on-fill: var(--wwg-btn-neutral-on-fill);
	--btn-ink-hover: var(--wwg-btn-neutral-ink-hover);
}
.wwg-btn--cta {
	--btn-ink: var(--wwg-btn-cta-ink);
	--btn-fill: var(--wwg-btn-cta-fill);
	--btn-fill-hover: var(--wwg-btn-cta-fill-hover);
	--btn-on-fill: var(--wwg-btn-cta-on-fill);
	--btn-ink-hover: var(--wwg-btn-cta-ink-hover);
}
.wwg-btn--emphasis {
	--btn-ink: var(--wwg-btn-emphasis-ink);
	--btn-fill: var(--wwg-btn-emphasis-fill);
	--btn-fill-hover: var(--wwg-btn-emphasis-fill-hover);
	--btn-on-fill: var(--wwg-btn-emphasis-on-fill);
	--btn-ink-hover: var(--wwg-btn-emphasis-ink-hover);
}
.wwg-btn--visibility {
	--btn-ink: var(--wwg-btn-visibility-ink);
	--btn-fill: var(--wwg-btn-visibility-fill);
	--btn-fill-hover: var(--wwg-btn-visibility-fill-hover);
	--btn-on-fill: var(--wwg-btn-visibility-on-fill);
	--btn-ink-hover: var(--wwg-btn-visibility-ink-hover);
}

/* ---- Hierarchy ---- */

.wwg-btn,
.wwg-btn--filled {
	background-color: var(--btn-fill);
	border-color: var(--btn-fill);
	color: var(--btn-on-fill);
}
.wwg-btn:hover,
.wwg-btn--filled:hover {
	background-color: var(--btn-fill-hover);
	border-color: var(--btn-fill-hover);
	color: var(--btn-on-fill);
}

.wwg-btn--outlined {
	background-color: transparent;
	border-color: var(--btn-ink);
	color: var(--btn-ink);
}
/* Hover: the use's ink at 16% fills the button; outline and label unchanged. */
.wwg-btn--outlined:hover {
	background-color: color-mix(in srgb, var(--btn-ink) var(--wwg-btn-outlined-hover-opacity), transparent);
	border-color: var(--btn-ink);
	color: var(--btn-ink);
}

.wwg-btn--borderless {
	padding: 0;
	background-color: transparent;
	border-color: transparent;
	color: var(--btn-ink);
	border-radius: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}
.wwg-btn--borderless:hover {
	background-color: transparent;
	border-color: transparent;
	color: var(--btn-ink-hover);
	text-decoration: underline;
}

/* ---- Size ---- */

.wwg-btn--sm { font-size: var(--wwg-btn-sm-size); line-height: var(--wwg-btn-sm-line); }
.wwg-btn--md { font-size: var(--wwg-btn-md-size); line-height: var(--wwg-btn-md-line); }
.wwg-btn--lg { font-size: var(--wwg-btn-lg-size); line-height: var(--wwg-btn-lg-line); }
.wwg-btn--xl { font-size: var(--wwg-btn-xl-size); line-height: var(--wwg-btn-xl-line); }

/* ---- Width ---- */

.wwg-btn--fluid { display: flex; width: 100%; }

/* ---- Disabled ----
   Figma expresses this as 0.4 layer opacity over the default colours rather
   than a separate palette. */
.wwg-btn[disabled],
.wwg-btn.disabled,
.wwg-btn[aria-disabled='true'] {
	opacity: var(--wwg-btn-disabled-opacity);
	pointer-events: none;
}

/* ============================================================
   GLOBAL MAPPING
   ------------------------------------------------------------
   Points the generic button selectors WooCommerce, Gravity Forms
   and the theme already emit at the tokens above, so pages pick
   up the new system without per-template markup changes.

   No !important here on purpose. Several legacy rules in
   style.css are scoped more specifically than these
   (body.woocommerce-account a.button.alt, body.woocommerce-
   order-received a.button, .woocommerce a.button.wc-backward,
   #customer_login button.button, .woocommerce-message a.button,
   .gform_wrapper input[type='submit'] and friends) and will keep
   winning until they are retired in a follow-up pass. Fighting
   them with !important here would only bury the conflict.
   ============================================================ */

.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button,
#respond input#submit,
.gform_wrapper input[type='button'],
.gform_wrapper .gform_previous_button,
input[type='submit'] {
	padding: calc(var(--wwg-btn-padding-y) - var(--wwg-btn-border-width)) calc(var(--wwg-btn-padding-x) - var(--wwg-btn-border-width));
	border: var(--wwg-btn-border-width) solid var(--wwg-btn-neutral-fill);
	border-radius: var(--wwg-btn-radius);
	background-color: var(--wwg-btn-neutral-fill);
	color: var(--wwg-btn-neutral-on-fill);
	font-family: var(--wwg-font-body);
	font-weight: var(--wwg-btn-weight);
	font-size: var(--wwg-btn-md-size);
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
	text-transform: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.woocommerce a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce button.button:hover,
.woocommerce-page button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page input.button:hover,
#respond input#submit:hover,
.gform_wrapper input[type='button']:hover,
.gform_wrapper .gform_previous_button:hover,
input[type='submit']:hover {
	border-color: var(--wwg-btn-neutral-fill-hover);
	background-color: var(--wwg-btn-neutral-fill-hover);
	color: var(--wwg-btn-neutral-on-fill);
}

/* The primary/checkout actions WooCommerce marks .alt are the CTA use. */
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button {
	border-color: var(--wwg-btn-cta-fill);
	background-color: var(--wwg-btn-cta-fill);
	color: var(--wwg-btn-cta-on-fill);
}
.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover {
	border-color: var(--wwg-btn-cta-fill-hover);
	background-color: var(--wwg-btn-cta-fill-hover);
	color: var(--wwg-btn-cta-on-fill);
}

/* Buttons inside WooCommerce notice bars sit on a dark ground, so they are the
   Visibility use, Outlined hierarchy. */
body .woocommerce-message a.button,
body .woocommerce-error a.button,
body .woocommerce-info a.button {
	padding: calc(var(--wwg-btn-padding-y) - var(--wwg-btn-border-width)) calc(var(--wwg-btn-padding-x) - var(--wwg-btn-border-width));
	border: var(--wwg-btn-border-width) solid var(--wwg-btn-visibility-ink);
	border-radius: var(--wwg-btn-radius);
	background-color: transparent;
	box-shadow: none;
	color: var(--wwg-btn-visibility-ink);
	font-family: var(--wwg-font-body);
	font-weight: var(--wwg-btn-weight);
	font-size: var(--wwg-btn-md-size);
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
}
body .woocommerce-message a.button:hover,
body .woocommerce-error a.button:hover,
body .woocommerce-info a.button:hover {
	background-color: color-mix(in srgb, var(--wwg-btn-visibility-ink) var(--wwg-btn-outlined-hover-opacity), transparent);
	border-color: var(--wwg-btn-visibility-ink);
	color: var(--wwg-btn-visibility-ink);
}

/* ============================================================
   PAGE BUTTON MAPPING
   ------------------------------------------------------------
   Action buttons that templates and plugins style themselves,
   pointed at the Figma "Fluid Buttons" component. Colour-use
   decisions (2026-09-16): primary / buy / shop actions are CTA
   Filled; secondary actions are Outlined — Neutral on the page's
   own ground, Visibility on a contrasting one. The colour-use tokens
   are theme roles (wwg-tokens.css), so on wwg_dark_mode pages CTA
   becomes Signature Bone Dark, Neutral light and Visibility dark.
   Tabs, chips, swatches, accordion headers and toggles are
   other Figma components and are deliberately not mapped here.
   ============================================================ */

/* ---- Shared geometry + type (md 16/20 unless a size is set below) ---- */
:is(#wwg-table-landing, #wwg-desk-landing, #wwg-prophecy-landing, #wwg-portfolio) .btn,
:is(#wwg-table-landing, #wwg-desk-landing) .ext-bottom .btn--brand,
#wwg-prophecy-seating .ps-btn,
#wwg-trade-program .tp-form-submit,
.wwg_config_add_to_cart_btn,
body.page-id-418278 #wwg_Sticky_ATCButton_Wrap .single_add_to_cart_button, /* builder sticky bar: styled like the product pages' (WooCommerce body class absent) */
body.woocommerce-cart button[name='apply_coupon'],
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
	height: auto;
	margin-left: 0;
	margin-right: 0;
	padding: calc(var(--wwg-btn-padding-y) - var(--wwg-btn-border-width)) calc(var(--wwg-btn-padding-x) - var(--wwg-btn-border-width));
	border: var(--wwg-btn-border-width) solid var(--btn-page-border, transparent);
	border-radius: var(--wwg-btn-radius);
	background: var(--btn-page-bg, transparent);
	box-shadow: none;
	color: var(--btn-page-ink);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-btn-md-size);
	font-weight: var(--wwg-btn-weight);
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ---- CTA Filled: primary, buy, build and shop actions ---- */
:is(#wwg-table-landing, #wwg-desk-landing, #wwg-prophecy-landing) :is(.btn--brand, .btn--ghost),
:is(#wwg-table-landing, #wwg-desk-landing) .ext-bottom .btn--brand,
#wwg-portfolio .btn--brand,
#wwg-prophecy-seating .ps-btn--brand,
#wwg-trade-program .tp-form-submit,
.wwg_config_add_to_cart_btn,
body.page-id-418278 #wwg_Sticky_ATCButton_Wrap .single_add_to_cart_button,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order {
	--btn-page-bg: var(--wwg-btn-cta-fill);
	--btn-page-border: var(--wwg-btn-cta-fill);
	--btn-page-ink: var(--wwg-btn-cta-on-fill);
}
:is(#wwg-table-landing, #wwg-desk-landing, #wwg-prophecy-landing) :is(.btn--brand, .btn--ghost):hover,
:is(#wwg-table-landing, #wwg-desk-landing) .ext-bottom .btn--brand:hover,
#wwg-portfolio .btn--brand:hover,
#wwg-prophecy-seating .ps-btn--brand:hover,
#wwg-trade-program .tp-form-submit:hover,
.wwg_config_add_to_cart_btn:hover,
body.page-id-418278 #wwg_Sticky_ATCButton_Wrap .single_add_to_cart_button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover {
	--btn-page-bg: var(--wwg-btn-cta-fill-hover);
	--btn-page-border: var(--wwg-btn-cta-fill-hover);
	color: var(--wwg-btn-cta-on-fill);
}

/* ---- Visibility Outlined: secondary actions on a contrasting ground ----
   .btn--white sits on imagery; the portfolio hero is a light band on a dark
   (Signature) page. */
:is(#wwg-table-landing, #wwg-desk-landing, #wwg-prophecy-landing) .btn--white,
#wwg-prophecy-seating .ps-btn--white,
#wwg-portfolio .pf-hero .btn--ghost {
	--btn-page-bg: transparent;
	--btn-page-border: var(--wwg-btn-visibility-ink);
	--btn-page-ink: var(--wwg-btn-visibility-ink);
}
/* ---- Neutral Outlined: secondary actions on the page's own ground ---- */
#wwg-portfolio .btn--ghost:not(.pf-hero .btn--ghost),
body.woocommerce-cart button[name='apply_coupon'] {
	--btn-page-bg: transparent;
	--btn-page-border: var(--wwg-btn-neutral-ink);
	--btn-page-ink: var(--wwg-btn-neutral-ink);
}
:is(#wwg-table-landing, #wwg-desk-landing, #wwg-prophecy-landing) .btn--white:hover,
#wwg-prophecy-seating .ps-btn--white:hover,
#wwg-portfolio .btn--ghost:hover,
#wwg-portfolio .pf-hero .btn--ghost:hover,
body.woocommerce-cart button[name='apply_coupon']:hover {
	--btn-page-bg: color-mix(in srgb, var(--btn-page-ink) var(--wwg-btn-outlined-hover-opacity), transparent);
	color: var(--btn-page-ink);
	text-decoration: none;
}

/* Apply coupon is also a WooCommerce `.button`, whose more specific filled hover
   (.woocommerce-page button.button:hover) would otherwise win. */
body.woocommerce-cart .coupon button.button[name='apply_coupon'] {
	align-self: center;
	height: auto !important;
}
body.woocommerce-cart .coupon button.button[name='apply_coupon']:hover {
	border-color: var(--wwg-btn-neutral-ink);
	background-color: color-mix(in srgb, var(--wwg-btn-neutral-ink) var(--wwg-btn-outlined-hover-opacity), transparent);
	color: var(--wwg-btn-neutral-ink);
}

/* ---- Sizes ---- */
:is(#wwg-table-landing, #wwg-desk-landing) .ext-bottom .btn--brand {
	flex-shrink: 0;
}
:is(#wwg-table-landing, #wwg-desk-landing, #wwg-prophecy-landing) .btn--sm {
	font-size: var(--wwg-btn-sm-size);
	line-height: var(--wwg-btn-sm-line);
}
/* Form submit: lg 20/24, full width. */
#wwg-trade-program .tp-form-submit {
	width: 100%;
	font-size: var(--wwg-btn-lg-size);
	line-height: var(--wwg-btn-lg-line);
}
/* Buy buttons: full width, xl 24/32 (md 16/20 on phones) — Figma Product Page + Builder
   frames. */
.wwg_config_add_to_cart_btn,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order {
	display: flex;
	width: 100%;
	font-size: var(--wwg-btn-xl-size);
	line-height: var(--wwg-btn-xl-line);
}
@media (max-width: 767px) {
	.wwg_config_add_to_cart_btn,
	body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		font-size: var(--wwg-btn-md-size);
		line-height: var(--wwg-btn-md-line);
	}
	/* Place Order is the last thing asked of the customer, so on a phone it takes the
	   mobile step of its own xl size (20/24) rather than dropping two steps to md. */
	body.woocommerce-checkout #place_order {
		font-size: var(--wwg-btn-xl-size-mobile);
		line-height: var(--wwg-btn-xl-line-mobile);
	}
}

/* ---- Disabled: Figma's 0.4 opacity over the default colours ---- */
.wwg_config_add_to_cart_btn:disabled,
body.woocommerce-checkout #place_order:disabled,
#wwg-trade-program .tp-form-submit:disabled {
	--btn-page-bg: var(--wwg-btn-cta-fill);
	--btn-page-border: var(--wwg-btn-cta-fill);
	opacity: var(--wwg-btn-disabled-opacity);
	cursor: not-allowed;
}

/* ---- Borderless: "Calculate shipping" toggle (Neutral, md) ---- */
body.woocommerce-cart a.shipping-calculator-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wwg-btn-neutral-ink);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-btn-md-size);
	font-weight: var(--wwg-btn-weight);
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
	transition: color .2s ease;
}
body.woocommerce-cart a.shipping-calculator-button:hover {
	color: var(--wwg-btn-neutral-ink-hover);
}