/* ============================================================
   Ferre503 — Botones (estilo Home Depot CTA naranja).
   Reescribe estilos de Storefront/Woo sin !important.
   ============================================================ */

/* Reset minimo y target accesible */
button, .button, .wp-element-button {
	font-family: var(--ff-heading);
	letter-spacing: .02em;
	cursor: pointer;
}

/* === Variantes Ferre503 === */
.f5-btn,
button.button.alt,                                  /* Woo primary */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce #content input.button.alt {
	display: inline-flex;
	align-items: center; justify-content: center;
	gap: var(--sp-2);
	background: var(--f5-orange);
	color: var(--f5-white);
	border: 0;
	padding: 12px 22px;
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: var(--fs-md);
	letter-spacing: .03em;
	text-transform: uppercase;
	border-radius: var(--r-md);
	text-decoration: none;
	min-height: 44px;
	line-height: 1;
	transition:
		background var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
	box-shadow: var(--sh-sm);
}
.f5-btn:hover,
button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--f5-orange-dark);
	color: var(--f5-white);
	transform: translateY(-1px);
	box-shadow: var(--sh-md);
}
.f5-btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }
.f5-btn:disabled, .f5-btn[disabled] {
	opacity: .5; cursor: not-allowed; transform: none;
}

/* Botones secundarios Woo */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce #respond input#submit,
.woocommerce #content input.button,
.f5-btn--secondary {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--sp-2);
	background: var(--f5-white);
	color: var(--f5-navy);
	border: 2px solid var(--f5-navy);
	padding: 10px 20px;
	font-family: var(--ff-heading);
	font-weight: 600;
	font-size: var(--fs-md);
	letter-spacing: .03em;
	text-transform: uppercase;
	border-radius: var(--r-md);
	min-height: 44px;
	line-height: 1;
	transition: background var(--dur-fast), color var(--dur-fast);
	text-decoration: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.f5-btn--secondary:hover {
	background: var(--f5-navy);
	color: var(--f5-white);
}

/* Botón ghost (link-style con underline en hover) */
.f5-btn--ghost {
	background: transparent;
	color: var(--f5-navy);
	border: 0;
	padding: 8px 4px;
	font-weight: 600;
	text-transform: none;
	min-height: 0;
}
.f5-btn--ghost:hover {
	color: var(--f5-orange);
	background: transparent;
	transform: none;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Variantes de tamaño */
.f5-btn--sm { padding: 8px 14px; font-size: var(--fs-sm); min-height: 36px; }
.f5-btn--lg { padding: 16px 28px; font-size: var(--fs-lg); min-height: 52px; }
.f5-btn--block { width: 100%; }

/* Botón WhatsApp */
.f5-btn--whatsapp {
	background: #25D366;
	color: var(--f5-white);
}
.f5-btn--whatsapp:hover { background: #1eb95a; color: var(--f5-white); }