/**
 * Shanelle Product Purchase Panel Component
 */

.product-purchase {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-4) 0 0;
	border: 0;
	border-top: 1px solid var(--color-border-subtle);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.product-purchase__notices {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.product-purchase__notices:empty {
	display: none;
}

.product-purchase__notice {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.product-purchase__notice--outofstock {
	background: var(--color-danger-bg);
	color: var(--color-danger-text);
}

.product-purchase__notice--backorder {
	background: var(--color-warning-bg);
	color: var(--color-warning-text);
}

.product-purchase__notice--lowstock {
	background: var(--color-warning-bg);
	color: var(--color-warning-text);
}

.product-purchase__notice[hidden] {
	display: none;
}

.product-purchase__quantity {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.product-purchase__quantity-label {
	margin: 0;
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	font-size: var(--font-size-xs);
}

.product-purchase__stepper {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	width: fit-content;
	padding: var(--space-1);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	background: transparent;
}

.product-purchase__stepper-btn {
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0;
	color: var(--color-text-secondary);
}

.product-purchase__stepper-btn:hover:not(:disabled) {
	background: var(--color-background-subtle);
	color: var(--color-text);
}

.product-purchase__quantity-input {
	width: 3rem;
	padding: var(--space-1);
	border: 0;
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	text-align: center;
	-moz-appearance: textfield;
}

.product-purchase__quantity-input::-webkit-outer-spin-button,
.product-purchase__quantity-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.product-purchase__quantity-input:focus {
	outline: none;
}

.product-purchase__quantity-input:focus-visible {
	outline: none;
}

.product-purchase__stepper:focus-within {
	border-color: var(--color-border-focus);
	box-shadow: var(--shadow-focus);
}

.product-purchase__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.product-purchase__add {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wider);
	box-shadow: none;
}

.product-purchase__add:hover:not(:disabled) {
	transform: none;
}

.product-purchase__secondary-actions {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-2);
	align-items: stretch;
}

.product-purchase__buy-now {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wide);
}

.product-purchase__wishlist {
	min-width: var(--button-height-lg);
	min-height: var(--button-height-lg);
	color: var(--color-brand-600);
	border-color: var(--color-brand-200);
}

.product-purchase__wishlist:hover:not(:disabled) {
	border-color: var(--color-brand-400);
	background: var(--color-brand-50);
	color: var(--color-brand-700);
}

.product-purchase__wishlist.is-active {
	background: var(--color-brand-100);
	border-color: var(--color-brand-500);
	color: var(--color-brand-700);
}

.product-purchase__wishlist.is-active svg {
	fill: var(--color-brand-400);
}

.product-purchase__add.is-loading,
.product-purchase__buy-now.is-loading {
	pointer-events: none;
}

.product-purchase__estimates {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
}

.product-purchase__estimate {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-2) 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-text-secondary);
	text-align: left;
	cursor: pointer;
	transition: var(--transition-colors);
}

.product-purchase__estimate:hover,
.product-purchase__estimate:focus-visible {
	border-color: transparent;
	background: transparent;
	color: var(--color-text);
	outline: none;
	box-shadow: none;
}

.product-purchase__estimate:focus-visible .product-purchase__estimate-icon {
	box-shadow: var(--shadow-focus);
}

.product-purchase__estimate-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-full);
	background: var(--color-background-subtle);
	color: var(--color-text-secondary);
}

.product-purchase__estimate-copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-0-5);
	min-width: 0;
}

.product-purchase__estimate-title {
	margin: 0;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	font-size: var(--font-size-2xs);
}

.product-purchase__estimate-value {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.product-purchase__estimate-note {
	margin: 0;
}

.product-purchase__trust {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
}

.product-purchase__trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-purchase__trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
}

.product-purchase__trust-item svg {
	color: var(--color-brand-500);
}

.product-purchase__secure-message {
	margin: 0;
}

.product-purchase.is-outofstock .product-purchase__stepper,
.product-purchase.is-outofstock .product-purchase__add,
.product-purchase.is-outofstock .product-purchase__buy-now,
.product-purchase.is-outofstock .product-purchase__sticky-add {
	opacity: 0.45;
	pointer-events: none;
}

/* Sticky mobile ATC */
.product-purchase__sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-fixed);
	padding: var(--space-3) var(--container-padding) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--color-border-subtle);
	background: var(--color-surface-overlay);
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(10px);
}

.product-purchase__sticky[hidden] {
	display: none;
}

.product-purchase__sticky-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	max-width: var(--container-max);
	margin-inline: auto;
}

.product-purchase__sticky-price {
	margin: 0;
	min-width: 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-sale);
	line-height: var(--line-height-tight);
}

.product-purchase__sticky-price del {
	display: none;
}

.product-purchase__sticky-add {
	flex-shrink: 0;
	min-width: 10rem;
	box-shadow: none;
}

html.has-product-purchase-sticky {
	padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48rem) {
	.product-purchase {
		padding: var(--space-8) 0 0;
		gap: var(--space-7);
	}

	.product-purchase__estimates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.product-purchase__sticky {
		display: none !important;
	}

	html.has-product-purchase-sticky {
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-purchase__add:hover:not(:disabled),
	.product-purchase__estimate {
		transition: none;
	}
}