:root {
	--aa-accent: #e4002b;
	--aa-accent-dark: #c40021;
	--aa-text: #1a1a1a;
}

/* Force the theme's add-to-cart form to wrap, so our addons box
   always takes its own full-width row instead of squeezing into a
   flex row alongside the quantity input / add-to-cart button. */
.woocommerce div.product form.cart,
form.cart {
	flex-wrap: wrap !important;
}
form.cart > .aa-addons-box {
	flex: 1 1 100% !important;
	width: 100% !important;
	order: -1 !important;
}

#aa-modal-overlay,
#aa-modal-overlay *,
.aa-addons-box,
.aa-addons-box * {
	box-sizing: border-box !important;
}

.aa-modal-overlay {
	display: none;
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0,0,0,0.6);
	z-index: 999999 !important;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.aa-modal-overlay.active { display: flex !important; }

.aa-modal-box {
	background: #fff !important;
	max-width: 880px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	border-radius: 14px;
	position: relative;
	padding: 28px;
}
.aa-modal-close {
	position: absolute !important;
	top: 14px;
	right: 16px;
	background: var(--aa-accent) !important;
	color: #fff !important;
	border: none !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 6px !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

/* Two column layout inside the modal: options left, product summary right */
.aa-modal-columns {
	display: flex !important;
	gap: 30px;
	flex-wrap: wrap;
	width: 100% !important;
}
.aa-modal-left { flex: 1 1 380px !important; min-width: 300px; width: auto !important; height: auto !important; }
.aa-modal-right { flex: 1 1 300px !important; min-width: 260px; text-align: center; width: auto !important; height: auto !important; }

.aa-modal-image img { width: 100% !important; max-width: 320px; height: auto !important; margin: 0 auto 14px; display: block; }
.aa-modal-title { font-size: 22px; margin: 0 0 10px; font-weight: 700; }
.aa-modal-desc { color: #555; font-size: 14px; margin-bottom: 16px; }

/* Accordion */
.aa-accordion-group {
	border: 1px solid #eee;
	border-radius: 6px;
	margin-bottom: 10px !important;
	overflow: hidden;
	width: 100% !important;
	height: auto !important;
	display: block !important;
	flex: none !important;
}
.aa-addons-box .aa-accordion-header,
#aa-modal-overlay .aa-accordion-header {
	width: 100% !important;
	height: auto !important;
	background: var(--aa-accent) !important;
	color: #fff !important;
	border: none !important;
	padding: 14px 16px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-align: left;
	margin: 0 !important;
	float: none !important;
	border-radius: 0 !important;
}
.aa-accordion-header:hover { background: var(--aa-accent-dark) !important; }
.aa-accordion-right { display: flex !important; align-items: center; gap: 8px; }
.aa-accordion-badge { font-weight: 400; font-size: 12px; opacity: 0.9; color: #fff !important; }
.aa-accordion-arrow { display: inline-block; transition: transform 0.2s ease; }
.aa-accordion-group.open .aa-accordion-arrow { transform: rotate(180deg); }

.aa-accordion-body {
	display: none !important;
	background: #f7f7f7;
	padding: 10px 12px !important;
	width: 100% !important;
	height: auto !important;
}
.aa-accordion-group.open .aa-accordion-body { display: block !important; }

.aa-addons-box .aa-item-row,
#aa-modal-overlay .aa-item-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px;
	padding: 10px 4px !important;
	border-bottom: 1px solid #e8e8e8;
	width: 100% !important;
	height: auto !important;
}
.aa-item-row:last-child { border-bottom: none; }
.aa-item-input { display: none !important; }
.aa-item-img { width: 46px !important; height: 46px !important; object-fit: cover; border-radius: 6px; flex: 0 0 46px !important; }
.aa-item-info { flex: 1 1 auto !important; min-width: 0; text-align: left !important; }
.aa-item-name { font-weight: 600; font-size: 14px; color: var(--aa-text) !important; }
.aa-item-price { font-size: 12px; color: #777 !important; margin-top: 2px; }

/* Many WooCommerce themes ship their own rules for anything living
   inside <form class="cart"> (where this box is printed), e.g.
   "form.cart button, form.cart input[type=number] { display:block;
   width:100%; float:left; }" for their native qty/add-to-cart UI.
   A plain single-class selector like ".aa-item-add-btn" loses that
   specificity fight, so every control below is scoped under
   ".aa-addons-box" / "#aa-modal-overlay" (adds a class) and
   re-declares display/width/float/margin explicitly so the theme
   can no longer force these buttons onto their own stacked lines. */
.aa-addons-box .aa-item-add-btn,
#aa-modal-overlay .aa-item-add-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--aa-accent) !important;
	color: #fff !important;
	border: none !important;
	padding: 7px 16px !important;
	border-radius: 5px !important;
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	flex: 0 0 auto !important;
	min-width: 64px;
	height: auto !important;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	line-height: normal !important;
}
.aa-item-row.aa-selected { background: #fff0f1; border-radius: 6px; }

.aa-addons-box .aa-item-action,
#aa-modal-overlay .aa-item-action {
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
}

/* Add button hides once an item is selected, quantity stepper takes its place.
   Scoped with the same .aa-addons-box / #aa-modal-overlay prefixes as the
   base button rules above — an unscoped class selector here loses the
   specificity fight against the ID-scoped #aa-modal-overlay rule inside the
   popup, which is why the stepper previously never appeared there. */
.aa-addons-box .aa-item-row.aa-selected .aa-item-add-btn,
#aa-modal-overlay .aa-item-row.aa-selected .aa-item-add-btn { display: none !important; }

.aa-addons-box .aa-item-qty-controls,
#aa-modal-overlay .aa-item-qty-controls {
	display: none !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 6px;
}
.aa-addons-box .aa-item-row.aa-selected .aa-item-qty-controls,
#aa-modal-overlay .aa-item-row.aa-selected .aa-item-qty-controls { display: flex !important; }

.aa-addons-box .aa-item-qty-minus,
.aa-addons-box .aa-item-qty-plus,
#aa-modal-overlay .aa-item-qty-minus,
#aa-modal-overlay .aa-item-qty-plus {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	border: 1.5px solid var(--aa-accent) !important;
	background: #fff !important;
	color: var(--aa-accent) !important;
	border-radius: 5px !important;
	font-size: 15px;
	cursor: pointer;
	line-height: 1;
	flex: 0 0 26px !important;
	margin: 0 !important;
	float: none !important;
	padding: 0 !important;
}
.aa-addons-box .aa-item-qty-remove,
#aa-modal-overlay .aa-item-qty-remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	border: none !important;
	background: transparent !important;
	color: #999 !important;
	font-size: 12px;
	cursor: pointer;
	line-height: 1;
	flex: 0 0 24px !important;
	margin: 0 0 0 2px !important;
	float: none !important;
	padding: 0 !important;
}
.aa-addons-box .aa-item-qty-remove:hover,
#aa-modal-overlay .aa-item-qty-remove:hover { color: var(--aa-accent) !important; }
.aa-addons-box .aa-item-qty-input,
#aa-modal-overlay .aa-item-qty-input {
	display: inline-flex !important;
	width: 26px !important;
	height: auto !important;
	text-align: center !important;
	border: none !important;
	background: transparent !important;
	font-size: 13px;
	font-weight: 700;
	margin: 0 !important;
	float: none !important;
	color: var(--aa-text) !important;
	flex: 0 0 26px !important;
	padding: 0 !important;
}

/* Quantity */
.aa-qty-row {
	margin: 18px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px;
	width: 100% !important;
	height: auto !important;
}
#aa-modal-overlay .aa-qty-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important; height: 34px !important;
	border: 1.5px solid #ccc !important;
	background: #fff !important;
	border-radius: 6px !important;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
	flex: 0 0 34px !important;
	margin: 0 !important;
	float: none !important;
	color: var(--aa-text) !important;
}
#aa-modal-overlay .aa-qty-row input {
	display: inline-flex !important;
	width: 44px !important;
	height: auto !important;
	text-align: center !important;
	border: none !important;
	font-size: 17px;
	font-weight: 700;
	flex: 0 0 44px !important;
	margin: 0 !important;
	float: none !important;
	color: var(--aa-text) !important;
	-webkit-text-fill-color: var(--aa-text) !important;
	opacity: 1 !important;
	background: transparent !important;
}

.aa-modal-error { color: #d63638 !important; margin-bottom: 10px; font-size: 13px; text-align: center; }

.aa-addons-box .aa-add-to-cart-btn,
#aa-modal-overlay .aa-add-to-cart-btn {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	background: linear-gradient(90deg, var(--aa-accent), var(--aa-accent-dark)) !important;
	color: #fff !important;
	border: none !important;
	padding: 14px 18px !important;
	border-radius: 40px !important;
	font-weight: 700;
	font-size: 14px;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	cursor: pointer;
	margin: 0 !important;
	float: none !important;
	line-height: normal !important;
}
.aa-add-to-cart-btn .aa-price { font-size: 14px; color: #fff !important; }
.aa-add-to-cart-btn .aa-cta-text { flex: 1; text-align: center; letter-spacing: 0.5px; color: #fff !important; }
.aa-add-to-cart-btn .aa-cta-arrow {
	background: rgba(255,255,255,0.25) !important;
	width: 24px !important; height: 24px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 16px;
	color: #fff !important;
}

.aa-open-modal-btn { cursor: pointer; }

/* Confirmation toast shown after a successful add-to-cart from the popup */
.aa-toast {
	position: fixed !important;
	left: 50% !important;
	bottom: 30px !important;
	transform: translate(-50%, 16px) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	background: #1a1a1a !important;
	color: #fff !important;
	padding: 13px 22px !important;
	border-radius: 30px !important;
	font-size: 14px;
	font-weight: 600;
	z-index: 9999999 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity 0.25s ease, transform 0.25s ease !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
	max-width: 90vw;
	text-align: center;
}
.aa-toast.show { opacity: 1 !important; transform: translate(-50%, 0) !important; }
.aa-toast-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: var(--aa-accent) !important;
	color: #fff !important;
	font-size: 12px;
	flex: 0 0 20px !important;
}

/* Inline addons box on the single product page — always its own full-width block */
.aa-addons-box {
	display: block !important;
	margin: 18px 0 !important;
	max-width: 480px;
	width: 100% !important;
	height: auto !important;
	clear: both !important;
}

@media (max-width: 600px) {
	.aa-modal-box { padding: 18px; }
	.aa-modal-columns { flex-direction: column-reverse !important; }
}