/* Buttons: one standard look across the whole site, taken from the approved ODDAKL mockups.
   Solid black with white capitals, square corners, 48px tall, a softer black when pointed at.
   The values are the --nl-btn-* settings in brand.css.

   Two sizes with the same look:
   - standard: the main action on a page or pop-up (Add to cart, Checkout, Place order, Log in, Save)
   - compact: small buttons inside rows and cards (coupon Apply, order card actions, thank-you buttons, card Add to cart)
   Plus one outline version (white with a black border) for second actions next to a main one.

   Covers the theme's buttons, WooCommerce's, and TikTok Style Checkout's (cart, checkout, account
   and their pop-ups). TSC's button colour itself comes from TSC's own setting (TikTok Style
   Checkout > Settings > Icons > Checkout buttons); black is also its default. TSC marks its
   button colours !important, so the hover colour below has to as well. */

/* ---------------------------------------------------------------- standard */
.nl-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
body .tsc-checkout-btn,
body .tsc-checkout__place-order,
body .tsc-login-submit,
body .tsc-modal__confirm,
body .tsc-form-save,
body .tsc-address-add,
body .tsc-btn-primary,
body .tsc-account__content form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--nl-btn-height);
	padding: 0 28px;
	border: 0;
	border-radius: var(--nl-btn-radius);
	background: var(--nl-btn-bg);
	color: var(--nl-btn-text);
	font-family: var(--hj-sans);
	font-size: var(--nl-btn-size);
	font-weight: var(--nl-btn-weight);
	line-height: 1.2;
	letter-spacing: var(--nl-btn-spacing);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease;
}

.nl-btn:hover,
.nl-btn:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--nl-btn-bg-hover);
	color: var(--nl-btn-text);
}
body .tsc-checkout-btn:not(:disabled):hover,
body .tsc-checkout__place-order:not(:disabled):hover,
body .tsc-login-submit:not(:disabled):hover,
body .tsc-modal__confirm:not(:disabled):hover,
body .tsc-form-save:not(:disabled):hover,
body .tsc-address-add:hover,
body .tsc-btn-primary:hover,
body .tsc-account__content form button[type="submit"]:hover,
body .tsc-coupon-entry__btn:not(:disabled):hover,
body .tsc-form-nudge__btn:hover,
body .tsc-order__btn--primary:hover,
body .tsc-confirm__btn--confirm:hover,
body .tsc-account__content .wc-address-book-make-default:hover {
	background: var(--nl-btn-bg-hover) !important;
	color: var(--nl-btn-text) !important;
}

/* TSC locks its two big buttons (cart Checkout, checkout Place order) with !important: a pill shape,
   tight lettering and 44px height. Matched to the standard the same way, one step more specific. */
body .tsc-cart .tsc-checkout-btn,
body .tsc-cart .tsc-checkout-btn:link,
body .tsc-cart .tsc-checkout-btn:visited,
body .tsc-cart .tsc-checkout-btn:hover,
body .tsc-checkout .tsc-checkout__place-order,
body .tsc-checkout .tsc-checkout__place-order:hover,
body .tsc-checkout .tsc-checkout__place-order:focus {
	border-radius: var(--nl-btn-radius) !important;
	letter-spacing: var(--nl-btn-spacing) !important;
	font-size: var(--nl-btn-size) !important;
	font-weight: var(--nl-btn-weight) !important;
	height: auto !important;
	min-height: var(--nl-btn-height) !important;
	padding: 0 28px !important;
}

/* ---------------------------------------------------------------- compact (same look, keeps its own size) */
body .tsc-coupon-entry__btn,
body .tsc-form-nudge__btn,
body .tsc-order__btn--primary,
body .tsc-order__btn--secondary,
body .tsc-thankyou__btn--primary,
body .tsc-thankyou__btn--secondary,
body .tsc-confirm__btn--confirm,
body .tsc-account__content .wc-address-book-meta .button,
body .tsc-account__content .wc-address-book-make-default,
.woocommerce ul.products li.product .button {
	border-radius: var(--nl-btn-radius);
	font-family: var(--hj-sans);
	font-size: 12.5px;
	font-weight: var(--nl-btn-weight);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
/* product cards: the compact size (shop.css keeps their place in the card) */
.woocommerce ul.products li.product .button {
	min-height: 40px;
	padding: 0 24px;
	border: 0;
	background: var(--nl-btn-bg);
	color: var(--nl-btn-text);
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible { background: var(--nl-btn-bg-hover); color: var(--nl-btn-text); }

/* ---------------------------------------------------------------- outline (second action) */
.nl-btn--ghost {
	background: transparent;
	color: var(--nl-btn-bg);
	box-shadow: inset 0 0 0 1.5px var(--nl-btn-bg);
}
.nl-btn--ghost:hover,
.nl-btn--ghost:focus-visible { background: var(--nl-btn-bg); color: var(--nl-btn-text); }
body .tsc-order__btn--secondary:hover {
	background: var(--nl-btn-bg) !important;
	color: var(--nl-btn-text) !important;
}

@media (max-width: 900px) {
	.woocommerce ul.products li.product .button { min-height: 38px; padding: 0 16px; font-size: 11.5px; }
}