/*
 * One button system.
 *
 * Before this file the site had four: main.css painted every bare <button>
 * as a beige box with a 2px radius and weight 600, experience.css made
 * .button square and weight 500, the primary fill existed in two different
 * inks (#25332b and #2a312d, both on the product page), and heights ran
 * 42 / 44 / 48 / 51px — the form's submit below the 44px target in #34.
 *
 * Loaded after experience.css so it settles the look in one place. Controls
 * that are deliberately not buttons — the gallery arrows, the banner swatches,
 * the catalogue filters, the search's Clear, the lightbox — keep their own
 * rules; what they no longer inherit is a box they each had to undo.
 */

:root {
	--btn-ink: #2a312d;          /* Verde 447C, the brand's own value */
	--btn-ink-hover: #3b453e;    /* one step up, so hover is felt, not guessed */
	--btn-on-ink: #ffffff;
	--btn-min-height: 44px;      /* decision #34's touch target */
	--btn-padding: 0.9rem 1.75rem;
	--btn-radius: 0;
}

/* A bare <button> is a control, not a box: anything that wants the button
   look asks for it with .button. */
button {
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.button,
input[type="submit"],
.ff-btn-submit,
.ff_submit_btn_wrapper button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: var(--btn-min-height);
	padding: var(--btn-padding);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	color: var(--btn-ink);
	background: transparent;
	border: 1px solid var(--btn-ink);
	border-radius: var(--btn-radius);
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button--primary,
input[type="submit"],
.ff-btn-submit,
.ff_submit_btn_wrapper button {
	color: var(--btn-on-ink);
	background: var(--btn-ink);
	border-color: var(--btn-ink);
}

.button--primary:hover,
.button--primary:focus-visible,
input[type="submit"]:hover,
.ff-btn-submit:hover,
.ff_submit_btn_wrapper button:hover {
	color: var(--btn-on-ink);
	background: var(--btn-ink-hover);
	border-color: var(--btn-ink-hover);
}

/* The alternative action beside a primary one. */
.button--ghost,
.button--outline {
	color: var(--btn-ink);
	background: transparent;
	border-color: var(--btn-ink);
}

.button--ghost:hover,
.button--ghost:focus-visible,
.button--outline:hover,
.button--outline:focus-visible {
	color: var(--btn-on-ink);
	background: var(--btn-ink);
	border-color: var(--btn-ink);
}

/* On a dark band the fill inverts: white plate, Verde ink. */
.on-dark .button--primary,
.cookie-notice .button--primary,
.home-design-study .home-invitation .button--primary,
.study-sample .button--primary,
.about-local .button--primary {
	color: var(--btn-ink);
	background: #ffffff;
	border-color: #ffffff;
}

.on-dark .button--primary:hover,
.cookie-notice .button--primary:hover,
.home-design-study .home-invitation .button--primary:hover,
.study-sample .button--primary:hover,
.about-local .button--primary:hover {
	color: var(--btn-ink);
	background: #e6e3dd;
	border-color: #e6e3dd;
}

.on-dark .button--ghost,
.on-dark .button--outline,
.cookie-notice .button--outline {
	color: #ffffff;
	background: transparent;
	border-color: rgb(255 255 255 / 55%);
}

.on-dark .button--ghost:hover,
.on-dark .button--outline:hover,
.cookie-notice .button--outline:hover {
	color: var(--btn-ink);
	background: #ffffff;
	border-color: #ffffff;
}

/* The header's action is the one small button on the site; it keeps the
   44px target and loses only the padding. */
.site-header__cta {
	padding: 0.65rem 1.3rem;
	font-size: 0.8125rem;
}

.button:focus-visible,
input[type="submit"]:focus-visible,
.ff-btn-submit:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.button:active,
input[type="submit"]:active,
.ff-btn-submit:active {
	transform: translateY(1px);
}

.button[disabled],
.button[aria-disabled="true"],
input[type="submit"][disabled],
.ff-btn-submit[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.button,
	input[type="submit"],
	.ff-btn-submit { transition: none; }
	.button:active { transform: none; }
}

/* At phone width a button spans the column rather than sitting in the middle
   of an empty line. */
@media (max-width: 480px) {
	.cta-band__actions .button,
	.home-invitation__actions .button,
	.study-sample .button,
	.product-gallery-info .button { width: 100%; }
}

/* Two controls that are not .button but share its rules of thumb: the square
   corner, and the 44px target. */
.nav-toggle { border-radius: var(--btn-radius); }
.home-palette .swatch,
.swatch-strip__items .swatch { min-height: var(--btn-min-height); }