/*
 * 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) gets the discreet outlined
   look (white, black text, thin grey border — v2.8.1, was solid grey) —
   the Personalize <a> shares the single_add_to_cart_button class.
   Border is drawn inside the 42px via box-sizing so the height matches
   the theme's other buttons exactly. */
body.tpux-personalizable form.cart button.single_add_to_cart_button {
	margin-bottom: 0;
	box-sizing: border-box;
	background-color: #fff;
	color: #1f1f1f;
	border: 1px solid #cfcfcf;
	height: 42px !important;
	line-height: 40px !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: #f5f5f5;
	color: #1f1f1f;
	border-color: #b8b8b8;
}

/* Keep the outlined look while the add-to-cart spinner runs (the theme's
   .loading state otherwise re-tints the button). */
body.tpux-personalizable form.cart button.single_add_to_cart_button.loading {
	background-color: #fff;
	color: #1f1f1f;
}

/* The theme's spinner ring (::after) is white for its dark buttons —
   invisible on the white outlined button. Dark ring instead (v2.8.3).
   Shoptimizer 2.9.8 sets the white ring with FOUR classes
   (.single-product .product form.cart .single_add_to_cart_button::after),
   so this needs five to win (v2.12.2 — the 2.8.3 selector lost on .com). */
body.tpux-personalizable.single-product .product form.cart button.single_add_to_cart_button::after,
body.tpux-personalizable form.cart button.single_add_to_cart_button::after {
	border-color: rgba(31, 31, 31, 0.2);
	border-left-color: #1f1f1f;
}

/* "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;
}