/* =========================================================================
   Floating "Add to Cart" bar (single product / PDP)
   Slides up from the bottom once the main add-to-cart block scrolls out of
   view, and tucks away again while the footer is on screen.

   It is a thin proxy: clicking its button triggers the real in-page
   add-to-cart (portal .apv-actions or the in-form button), so all AJAX /
   toast / variant logic lives in product-variants.js — see [[project_*]].
   ========================================================================= */

.aroma-sticky-atc {
	position:      fixed;
	left:          0;
	right:         0;
	bottom:        0;
	z-index:       9990;            /* above content, below .apv-toast (99999) */
	background:    #ffffff;
	border-top:    1px solid #e5e7eb;
	box-shadow:    0 -4px 20px rgba( 0, 0, 0, 0.08 );
	transform:     translateY( 110% );
	transition:    transform 0.3s ease;
	padding:       10px 16px;
	padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
	visibility:    hidden;
}

.aroma-sticky-atc--visible {
	transform:  translateY( 0 );
	visibility: visible;
}

.aroma-sticky-atc__inner {
	max-width:   1280px;
	margin-inline: auto;
	display:     flex;
	align-items: center;
	gap:         12px;
}

.aroma-sticky-atc__thumb {
	width:        48px;
	height:       48px;
	flex-shrink:  0;
	border-radius: 10px;
	overflow:     hidden;
	background:   #f3f4f6;
}

.aroma-sticky-atc__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.aroma-sticky-atc__info {
	display:        flex;
	flex-direction: column;
	justify-content: center;
	min-width:      0;
	flex:           1;
	gap:            2px;
}

.aroma-sticky-atc__title {
	font-weight:   700;
	font-size:     14px;
	line-height:   1.25;
	color:         #1f2937;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* Compact the shared price widget inside the bar. Strong selector to beat the
   large PDP price rules in product-price.css (0,2,3). */
.aroma-sticky-atc__price .app-price {
	display:     flex;
	align-items: baseline;
	gap:         8px;
	flex-wrap:   nowrap;
	margin:      0;
}

body .aroma-sticky-atc div.app-price span.app-price-sale {
	font-size:   16px;
	line-height: 1.2;
	font-weight: 700;
	color:       #1660aa;
}

body .aroma-sticky-atc div.app-price span.app-price-regular {
	font-size:      12px;
	line-height:    1.2;
	color:          #9ca3af;
	text-decoration: line-through;
}

@media ( min-width: 768px ) {
	.aroma-sticky-atc__title { font-size: 16px; }
	body .aroma-sticky-atc div.app-price span.app-price-sale    { font-size: 18px; }
	body .aroma-sticky-atc div.app-price span.app-price-regular { font-size: 14px; }
}

/* ── Quantity stepper ──────────────────────────────────────────────────────
   Compact pill mirroring the in-page .apv-qty-control look. */
.aroma-sticky-atc__qty {
	display:       flex;
	align-items:   center;
	flex-shrink:   0;
	height:        48px;
	border:        2px solid #e5e7eb;
	border-radius: 1rem;
	background:    #ffffff;
	overflow:      hidden;
}

body .aroma-sticky-atc .aroma-sticky-atc__qty-btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            34px;
	height:           100%;
	padding:          0;
	margin:           0;
	border:           none;
	border-radius:    0;
	background:       transparent;
	background-color: transparent;
	color:            #6b7280;
	cursor:           pointer;
	flex-shrink:      0;
	box-shadow:       none;
	transition:       color 0.15s ease, background-color 0.15s ease;
}

body .aroma-sticky-atc .aroma-sticky-atc__qty-btn:hover {
	color:            #1660aa;
	background:       #f9fafb;
	background-color: #f9fafb;
}

.aroma-sticky-atc__qty-val {
	min-width:    28px;
	text-align:   center;
	border-left:  1px solid #f3f4f6;
	border-right: 1px solid #f3f4f6;
	padding:      0 4px;
	font-weight:  700;
	font-size:    15px;
	color:        #1f2937;
	user-select:  none;
}

@media ( min-width: 768px ) {
	.aroma-sticky-atc__qty { height: 52px; }
	body .aroma-sticky-atc .aroma-sticky-atc__qty-btn { width: 38px; }
	.aroma-sticky-atc__qty-val { font-size: 16px; min-width: 32px; }
}

/* ── Add to Cart button (filled blue — single primary CTA) ─────────────────
   Selector 0,2,1 with body prefix to beat the Elementor kit button default. */
body .aroma-sticky-atc .aroma-sticky-atc__btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              8px;
	flex-shrink:      0;
	height:           48px;
	padding:          0 20px;
	border-radius:    1rem;
	border:           2px solid #1660aa;
	background:       #1660aa;
	background-color: #1660aa;
	color:            #ffffff;
	font-size:        15px;
	font-weight:      700;
	font-family:      inherit;
	white-space:      nowrap;
	cursor:           pointer;
	box-shadow:       none;
	transition:       background-color 0.15s ease, transform 0.15s ease;
}

body .aroma-sticky-atc .aroma-sticky-atc__btn:hover {
	background:       #104375;
	background-color: #104375;
	border-color:     #104375;
	color:            #ffffff;
	transform:        translateY( -1px );
}

body .aroma-sticky-atc .aroma-sticky-atc__btn.loading {
	opacity: 0.6;
	cursor:  wait;
}

@media ( min-width: 768px ) {
	body .aroma-sticky-atc .aroma-sticky-atc__btn {
		height:    52px;
		padding:   0 28px;
		font-size: 16px;
	}
}

/* ── Desktop: detached, centered floating card (≥1025px) ───────────────────
   Mobile + tablet keep the full-width edge-to-edge bar above. On desktop the
   visual card moves onto __inner so it can be centered at half the container
   width with breathing room on all sides; the outer element stays full-width
   (transparent) purely to drive the slide + center the card. */
@media ( min-width: 1025px ) {
	.aroma-sticky-atc {
		background:    transparent;
		border-top:    none;
		box-shadow:    none;
		padding:       0 0 24px;   /* space below the floating card */
		pointer-events: none;       /* clicks pass through the side gutters */
	}

	.aroma-sticky-atc__inner {
		width:         60%;        /* 60% of the container … */
		max-width:     768px;      /* …capped at 60% of the 1280 container */
		min-width:     360px;
		margin-inline: auto;       /* centered */
		pointer-events: auto;
		background:    #ffffff;
		border:        1px solid #e5e7eb;
		border-radius: 1rem;
		box-shadow:    0 10px 30px rgba( 0, 0, 0, 0.12 );
		padding:       12px 20px;
	}
}

/* On mobile (≤767px, below the tablet breakpoint), drop the thumbnail and show
   the button as icon-only to save space — title + price + stepper remain. */
@media ( max-width: 767px ) {
	.aroma-sticky-atc__thumb { display: none; }
	.aroma-sticky-atc__btn span { display: none; } /* icon-only button */
	body .aroma-sticky-atc .aroma-sticky-atc__btn { padding: 0 16px; }
	body .aroma-sticky-atc .aroma-sticky-atc__qty-btn { width: 30px; }
}

/* ── Variant-needed flash ──────────────────────────────────────────────────
   Added briefly to .apv-buttons when the user taps Add-to-cart before
   choosing a variant; product-sticky-bar.js scrolls them into view too. */
.aroma-variant-flash {
	animation:     aroma-variant-flash 1.5s ease;
	border-radius: 12px;
}

@keyframes aroma-variant-flash {
	0%, 100% { box-shadow: 0 0 0 0    rgba( 22, 96, 170, 0 ); }
	25%, 60% { box-shadow: 0 0 0 4px  rgba( 22, 96, 170, 0.35 ); }
}

/* ── Keep the floating contact button clear of the bar while it is up ───────
   Nudge it above the bar via `bottom` (transform is reserved by
   .aroma-float-btn--hidden, so we must not touch it here). */
body.aroma-sticky-atc-active .aroma-float-btn {
	bottom: calc( 1em + 76px );
}

@media ( min-width: 48em ) {
	body.aroma-sticky-atc-active .aroma-float-btn {
		bottom: calc( 2em + 84px );
	}
}

/* Desktop: the card is centered and clear of the bottom-right contact bubble,
   so cancel the full-width-bar nudge above. Declared last so it wins over the
   48em rule at desktop widths. */
@media ( min-width: 1025px ) {
	body.aroma-sticky-atc-active .aroma-float-btn {
		bottom: 2em;
	}
}