/*
 * Personalizable products (product tag "Personalization"): the designer's
 * Personalize link is the primary action, so the buy buttons stack
 * full-width — teal Personalize on top (its color comes inline from
 * app-config PERSONALIZE_BTN_COLOR), grey "Buy without name" below —
 * and the quantity selector is hidden (the input stays in the DOM, so
 * qty 1 still submits). Scoped to body.tpux-personalizable, which the
 * plugin adds only on tagged products; everything else keeps the normal
 * WooCommerce layout.
 */
body.tpux-personalizable form.cart .quantity {
	display: none !important;
}

body.tpux-personalizable form.cart a#personalizeButton,
body.tpux-personalizable form.cart button.single_add_to_cart_button {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 10px;
	border-radius: 8px;
	/* Nunito loads 400/700 only (theme @font-face) — 700 avoids a
	   synthesized 600 weight. */
	font-family: Nunito, sans-serif;
	font-size: 15px;
	font-weight: 700;
}

/* Heights: theme baseline is 52px — Personalize beefier (62px), the
   secondary buy button slimmer (42px). !important because the theme
   pins line-height with !important in shoptimizer-product-min-css. */
body.tpux-personalizable form.cart a#personalizeButton {
	height: 62px !important;
	line-height: 62px !important;
	/* Uppercase everywhere, so the "Creating preview..." swap matches the
	   app-config button text (already caps). */
	text-transform: uppercase;
}

/* Only the real <button> (Buy without name) goes grey — the Personalize
   <a> shares the single_add_to_cart_button class. */
body.tpux-personalizable form.cart button.single_add_to_cart_button {
	margin-bottom: 0;
	background-color: #5b5b5b;
	color: #fff;
	height: 42px !important;
	line-height: 42px !important;
	text-transform: uppercase;
}

body.tpux-personalizable form.cart button.single_add_to_cart_button:hover,
body.tpux-personalizable form.cart button.single_add_to_cart_button:focus {
	background-color: #404144;
	color: #fff;
}

/* "Creating preview..." state while the designer page loads (set by
   product-buttons.js on click; the dots tick in JS). */
body.tpux-personalizable form.cart a#personalizeButton.tpux-loading {
	opacity: 0.8;
	pointer-events: none;
}

/* inline-block so min-width holds — the dots grow without the label
   shifting sideways. */
.tpux-dots {
	display: inline-block;
	min-width: 18px;
	text-align: left;
}