/* ==================================================================
   05 - BUTTONS
   Every clickable surface in the theme.

   The design is pill-heavy: almost nothing is square. One base class
   (.wo-btn) carries shape, size and behaviour; modifiers carry
   colour only. That keeps hover, focus and disabled states written
   once instead of once per variant.
   ================================================================== */


/* ------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------ */

.wo-btn {
	--btn-bg:      var(--wo-surface-2);
	--btn-color:   var(--wo-text);
	--btn-border:  transparent;
	--btn-shadow:  none;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wo-space-2);

	padding: 0.8125rem var(--wo-space-8);
	min-height: 46px;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	background: var(--btn-bg);
	color: var(--btn-color);
	border: 1px solid var(--btn-border);
	border-radius: var(--wo-radius-pill);
	box-shadow: var(--btn-shadow);

	cursor: pointer;
	user-select: none;
	transition:
		background var(--wo-transition),
		border-color var(--wo-transition),
		box-shadow var(--wo-transition),
		transform var(--wo-duration-fast) var(--wo-ease),
		color var(--wo-transition);
}

.wo-btn:hover {
	color: var(--btn-color);
	transform: translateY(-1px);
}

.wo-btn:active {
	transform: translateY(0);
}

.wo-btn:focus-visible {
	outline: none;
	box-shadow: var(--btn-shadow), var(--wo-ring);
}

.wo-btn:disabled,
.wo-btn[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.wo-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}


/* ------------------------------------------------------------------
   VARIANTS
   ------------------------------------------------------------------ */

/* Primary purple - Shop Fragrances, Add to cart, Submit Review */
.wo-btn--primary {
	--btn-bg:     var(--wo-grad-primary);
	--btn-color:  var(--wo-text-on-primary);
	--btn-shadow: var(--wo-glow-primary);
}

.wo-btn--primary:hover {
	--btn-bg:     linear-gradient(135deg, var(--wo-primary-hover) 0%, var(--wo-primary) 100%);
	--btn-shadow: 0 10px 32px rgba(124, 92, 255, 0.55);
}

/* Gold - Buy Now. The one high-intent action on the page. */
.wo-btn--gold {
	--btn-bg:     var(--wo-grad-gold);
	--btn-color:  var(--wo-text-on-gold);
	--btn-shadow: var(--wo-glow-gold);
}

.wo-btn--gold:hover {
	--btn-bg:     linear-gradient(135deg, #FFDE7A 0%, var(--wo-gold-hover) 100%);
	--btn-shadow: 0 10px 32px rgba(245, 197, 66, 0.48);
}

/* Outline - Explore Gifting, secondary actions */
.wo-btn--outline {
	--btn-bg:     transparent;
	--btn-color:  var(--wo-text);
	--btn-border: var(--wo-line-strong);
}

.wo-btn--outline:hover {
	--btn-bg:     rgba(255, 255, 255, 0.07);
	--btn-border: var(--wo-primary-line);
}

/* Soft - the muted Add to cart inside product cards */
.wo-btn--soft {
	--btn-bg:     rgba(124, 92, 255, 0.20);
	--btn-color:  var(--wo-text);
	--btn-border: var(--wo-primary-line);
}

.wo-btn--soft:hover {
	--btn-bg:     var(--wo-primary);
	--btn-border: var(--wo-primary);
	--btn-shadow: var(--wo-glow-primary);
}

/* Ghost - low emphasis, sits on any surface */
.wo-btn--ghost {
	--btn-bg:    transparent;
	--btn-color: var(--wo-text-muted);
}

.wo-btn--ghost:hover {
	--btn-bg:    rgba(255, 255, 255, 0.06);
	--btn-color: var(--wo-text);
}

/* Destructive - remove from cart, delete address */
.wo-btn--danger {
	--btn-bg:     transparent;
	--btn-color:  var(--wo-error);
	--btn-border: rgba(255, 107, 107, 0.35);
}

.wo-btn--danger:hover {
	--btn-bg: rgba(255, 107, 107, 0.12);
}


/* ------------------------------------------------------------------
   SIZES
   ------------------------------------------------------------------ */

.wo-btn--sm {
	padding: 0.5rem var(--wo-space-5);
	min-height: 38px;
	font-size: var(--wo-text-xs);
}

.wo-btn--lg {
	padding: 1rem var(--wo-space-10);
	min-height: 54px;
	font-size: var(--wo-text-md);
}

.wo-btn--block {
	display: flex;
	width: 100%;
}


/* ------------------------------------------------------------------
   BUTTON ROW
   Wraps on narrow screens instead of overflowing.
   ------------------------------------------------------------------ */

.wo-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-3);
	align-items: center;
}

.wo-btn-row--stretch > .wo-btn {
	flex: 1 1 180px;
}


/* ------------------------------------------------------------------
   ICON BUTTON
   Circular. Header icons, wishlist heart, carousel arrows.
   ------------------------------------------------------------------ */

.wo-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Three separate things can turn this circle into an oval, so
	   all three are pinned:
	   1. flex: 0 0 auto  - as a flex child it would otherwise shrink
	      along the main axis while height stayed fixed.
	   2. min/max on both axes - 02-base.css sets min-height: 44px on
	      every a and button for touch targets, which stretched a
	      40px button to 44px tall and 40px wide. The explicit
	      min-height here overrides it.
	   3. aspect-ratio - a final guard if a parent forces a size. */
	flex: 0 0 auto;

	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
	aspect-ratio: 1 / 1;

	padding: 0;

	color: var(--wo-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wo-radius-circle);

	cursor: pointer;
	transition:
		background var(--wo-transition),
		color var(--wo-transition),
		border-color var(--wo-transition),
		transform var(--wo-duration-fast) var(--wo-ease);
}

.wo-icon-btn:hover {
	background: rgba(255, 255, 255, 0.10);
	color: var(--wo-text);
	transform: scale(1.06);
}

.wo-icon-btn:active {
	transform: scale(0.96);
}

.wo-icon-btn:focus-visible {
	outline: none;
	box-shadow: var(--wo-ring);
}

.wo-icon-btn svg {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Bordered variant - carousel arrows, card wishlist heart */
.wo-icon-btn--bordered {
	background: rgba(20, 14, 42, 0.55);
	border-color: var(--wo-line-strong);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.wo-icon-btn--bordered:hover {
	background: rgba(124, 92, 255, 0.30);
	border-color: var(--wo-primary-line);
}

/* Size modifiers restate every axis, for the same reason as above -
   changing width alone leaves the base min/max in force. */
.wo-icon-btn--lg {
	width: 46px;
	height: 46px;
	min-width: 46px;
	min-height: 46px;
	max-width: 46px;
	max-height: 46px;
}

.wo-icon-btn--sm {
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	max-width: 34px;
	max-height: 34px;
}

.wo-icon-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}

/* Wishlist active state - filled heart */
.wo-icon-btn--wishlist.is-active {
	color: var(--wo-error);
	border-color: rgba(255, 107, 107, 0.45);
}

.wo-icon-btn--wishlist.is-active svg {
	fill: var(--wo-error);
	stroke: var(--wo-error);
}

/* Pill variant - for the rare case where the button must stretch to
   match a sibling's height, such as the drawer account row. The
   fixed square sizing is released and the radius keeps it rounded. */
.wo-icon-btn--stretch {
	width: 46px;
	min-width: 46px;
	max-width: 46px;
	height: auto;
	min-height: 46px;
	max-height: none;
	aspect-ratio: auto;
	border-radius: var(--wo-radius-pill);
}

/* Count bubble on the cart icon */
.wo-icon-btn__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-family: var(--wo-font-body);
	font-size: 10px;
	font-weight: var(--wo-weight-bold);
	line-height: 1;

	color: var(--wo-text-on-gold);
	background: var(--wo-gold);
	border-radius: var(--wo-radius-pill);
}

.wo-icon-btn--has-count {
	position: relative;
}


/* ------------------------------------------------------------------
   PILL
   Filter chips (All / Aromatic / Floral ...) and product tabs
   (Details / Usage / Reviews). Same component, two uses.
   ------------------------------------------------------------------ */

.wo-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--wo-space-2);

	padding: 0.5rem var(--wo-space-5);
	min-height: 36px;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	line-height: 1;
	white-space: nowrap;

	color: var(--wo-text-muted);
	background: transparent;
	border: 1px solid var(--wo-line-strong);
	border-radius: var(--wo-radius-pill);

	cursor: pointer;
	transition:
		background var(--wo-transition),
		color var(--wo-transition),
		border-color var(--wo-transition);
}

.wo-pill:hover {
	color: var(--wo-text);
	border-color: var(--wo-primary-line);
	background: var(--wo-primary-soft);
}

.wo-pill:focus-visible {
	outline: none;
	box-shadow: var(--wo-ring);
}

.wo-pill.is-active,
.wo-pill[aria-selected='true'] {
	color: var(--wo-text-on-primary);
	background: var(--wo-primary);
	border-color: var(--wo-primary);
	font-weight: var(--wo-weight-semibold);
}

/* Borderless variant used by the product tab strip */
.wo-pill--tab {
	border-color: transparent;
	padding-inline: var(--wo-space-6);
}

.wo-pill--tab:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: transparent;
}


/* ------------------------------------------------------------------
   BADGE
   Sale flag, stock status, category label.
   ------------------------------------------------------------------ */

.wo-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wo-space-1);

	padding: 0.3125rem var(--wo-space-3);

	font-family: var(--wo-font-body);
	font-size: 11px;
	font-weight: var(--wo-weight-bold);
	line-height: 1;
	letter-spacing: 0.01em;

	color: var(--wo-text);
	background: var(--wo-surface-2);
	border-radius: var(--wo-radius-pill);
}

.wo-badge--sale {
	color: var(--wo-text-on-gold);
	background: var(--wo-gold);
}

.wo-badge--new {
	color: var(--wo-text-on-primary);
	background: var(--wo-primary);
}

.wo-badge--out {
	color: var(--wo-text-dim);
	background: rgba(255, 255, 255, 0.10);
}

.wo-badge--stock {
	color: var(--wo-success);
	background: rgba(74, 222, 128, 0.14);
}

/* Positioned over a product image */
.wo-badge--float {
	position: absolute;
	top: var(--wo-space-4);
	left: var(--wo-space-4);
	z-index: 2;
}


/* ------------------------------------------------------------------
   QUANTITY STEPPER
   The  -  1  +  control on the single product page.
   ------------------------------------------------------------------ */

.wo-qty {
	display: inline-flex;
	align-items: center;

	height: 46px;
	padding: 0 var(--wo-space-1);

	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wo-line-strong);
	border-radius: var(--wo-radius-pill);
	overflow: hidden;
}

.wo-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;
	padding: 0;

	font-size: var(--wo-text-md);
	font-weight: var(--wo-weight-medium);
	line-height: 1;

	color: var(--wo-text-muted);
	background: transparent;
	border: none;
	border-radius: var(--wo-radius-circle);

	cursor: pointer;
	transition: background var(--wo-transition), color var(--wo-transition);
}

.wo-qty__btn:hover {
	color: var(--wo-text);
	background: rgba(255, 255, 255, 0.10);
}

.wo-qty__btn:focus-visible {
	outline: none;
	box-shadow: var(--wo-ring);
}

.wo-qty__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background: transparent;
}

.wo-qty__input {
	width: 42px;
	height: 38px;
	padding: 0;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	text-align: center;

	color: var(--wo-text);
	background: transparent;
	border: none;

	-moz-appearance: textfield;
	appearance: textfield;
}

.wo-qty__input::-webkit-outer-spin-button,
.wo-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wo-qty__input:focus {
	outline: none;
}


/* ------------------------------------------------------------------
   LOADING STATE
   Added by JS during AJAX add-to-cart.
   ------------------------------------------------------------------ */

.wo-btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.wo-btn.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	margin: -8.5px 0 0 -8.5px;
	border: 2px solid rgba(255, 255, 255, 0.30);
	border-top-color: #fff;
	border-radius: var(--wo-radius-circle);
	animation: wo-spin 640ms linear infinite;
}

.wo-btn--gold.is-loading::after {
	border-color: rgba(42, 31, 5, 0.30);
	border-top-color: var(--wo-text-on-gold);
}

@keyframes wo-spin {
	to { transform: rotate(360deg); }
}

/* Confirmation flash after a successful add to cart */
.wo-btn.is-added {
	--btn-bg:    var(--wo-success);
	--btn-color: #0B2417;
}


/* ------------------------------------------------------------------
   WOOCOMMERCE BUTTON INHERITANCE
   Woo prints its own .button markup in places we do not template.
   Point those at the base button so nothing renders unstyled.
   ------------------------------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wo-space-2);

	padding: 0.8125rem var(--wo-space-8);
	min-height: 46px;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	line-height: 1;

	color: var(--wo-text-on-primary);
	background: var(--wo-grad-primary);
	border: 1px solid transparent;
	border-radius: var(--wo-radius-pill);
	box-shadow: var(--wo-glow-primary);

	transition: background var(--wo-transition), box-shadow var(--wo-transition), transform var(--wo-duration-fast) var(--wo-ease);
}

.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 {
	color: var(--wo-text-on-primary);
	background: linear-gradient(135deg, var(--wo-primary-hover) 0%, var(--wo-primary) 100%);
	box-shadow: 0 10px 32px rgba(124, 92, 255, 0.55);
	transform: translateY(-1px);
}

.woocommerce a.button.wc-forward,
.woocommerce .cart .button[name='update_cart'] {
	background: transparent;
	border-color: var(--wo-line-strong);
	box-shadow: none;
}