/**
 * CASTILE sales page, Section 19 (Buying Block) — tickets 06 and 13. Styles the
 * custom Elementor widget's own markup (Amq_Castile_Buying_Block_Widget),
 * not Elementor-generated content, so this targets plain BEM-ish classes
 * rather than ".elementor-element-<id>" selectors (there's nothing to
 * target by id — the widget owns its whole subtree). The section around it
 * already provides the 1120px column and the page's section padding.
 */

.amq-buying-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	font-family: "DM Sans", system-ui, sans-serif;
}

.amq-buying-block__image-col {
	border: 1px solid color-mix(in srgb, #3a322a 16%, transparent);
	border-radius: 8px;
	background: #fbf8f2;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.amq-buying-block__image-col img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.amq-buying-block__info-col {
	min-width: 0;
	color: #3a322a;
}

.amq-buying-block__brand {
	font-size: 21px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.55;
	color: #3a322a;
	margin: 0;
}
.amq-buying-block__name {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.5;
	margin: 6px 0 14px 0;
	color: #3a322a;
}

.amq-buying-block__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px 0;
}
.amq-buying-block__tag,
.amq-buying-block__oils {
	font-size: 11.5px;
	line-height: 1.55;
	padding: 3px 10px;
	border-radius: 4.5px;
	background: #f0f8f5;
	color: #4f6d63;
}

.amq-buying-block__triad {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding: 16px 0;
	margin: 0 0 22px 0;
	border-top: 1px solid color-mix(in srgb, #3a322a 16%, transparent);
	border-bottom: 1px solid color-mix(in srgb, #3a322a 16%, transparent);
}
.amq-buying-block__triad p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.amq-buying-block__triad strong {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.55;
	color: #4f6d63;
}
.amq-buying-block__icon {
	flex: none;
	width: 16px;
	height: 16px;
}
.amq-buying-block__triad span {
	font-size: 13px;
	line-height: 1.55;
	color: #3a322aa6;
}

.amq-buying-block__section-heading {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.55;
	color: #3a322a8c;
	margin: 0 0 10px 0;
}

.amq-buying-block__scent-row,
.amq-buying-block__size-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 22px;
}

.amq-bb-scent-btn,
.amq-bb-size-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	font-family: inherit;
	color: #3a322a;
	background: #fbf8f2;
	border: 1px solid color-mix(in srgb, #3a322a 16%, transparent);
	border-radius: 4px;
	padding: 14px 15px;
	cursor: pointer;
	text-align: left;
}
.amq-bb-scent-btn.is-selected,
.amq-bb-size-btn.is-selected {
	border-color: #c1673f;
	background: #fff4ef;
}
.amq-bb-size-btn.is-selected .amq-bb-size-btn__label,
.amq-bb-size-btn.is-selected .amq-bb-size-btn__price {
	color: #c1673f;
}

.amq-bb-scent-btn__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}
.amq-bb-size-btn__label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
}
/* Each scent button shows its own descriptive note at all times, not just for the selected
   scent — this is reference copy, not per-selection state, so it needs no JS to stay in sync. */
.amq-bb-scent-btn__note {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.7;
	color: #3a322aa6;
}
/* Size buttons show their own price inline (all three sizes at once) since price only
   depends on size, never on the selected scent — same "static reference copy" reasoning. */
.amq-bb-size-btn__price {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: #3a322aa6;
}

.amq-buying-block__price-note {
	font-size: 12px;
	line-height: 1.9;
	color: #3a322a8c;
	margin: -10px 0 22px 0;
}

.amq-buying-block__purchase-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	margin-bottom: 20px;
}

.amq-buying-block__qty,
.amq-buying-block__total {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.amq-buying-block__qty-label,
.amq-buying-block__total-label {
	font-size: 12px;
	line-height: 1.55;
	color: #3a322a8c;
}
.amq-buying-block__qty-controls {
	display: flex;
	align-items: center;
	width: 140px;
	height: 50px;
	border: 1px solid color-mix(in srgb, #3a322a 16%, transparent);
	border-radius: 4px;
	background: #fbf8f2;
}
.amq-buying-block__qty-btn {
	width: 40px;
	height: 100%;
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: #3a322a;
}
.amq-buying-block__qty-input {
	flex: 1;
	min-width: 0;
	width: 100%;
	background: none;
	border: none;
	text-align: center;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: #3a322a;
	-moz-appearance: textfield;
}
.amq-buying-block__qty-input::-webkit-outer-spin-button,
.amq-buying-block__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.amq-buying-block__total-value {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	color: #3a322a;
}

.amq-buying-block__add-to-cart {
	display: block;
	width: 100%;
	height: 54px;
	background: #c1673f;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.amq-buying-block__add-to-cart:hover:not(:disabled) {
	background: #a7512a;
}
.amq-buying-block__add-to-cart:disabled {
	background: color-mix(in srgb, #3a322a 30%, transparent);
	cursor: not-allowed;
}

.amq-buying-block__oos-message {
	color: #a7512a;
	font-size: 13px;
	margin: 12px 0 0 0;
}
.amq-buying-block__success-message {
	color: #4a5b32;
	font-weight: 600;
	font-size: 13px;
	margin: 12px 0 0 0;
}

.amq-buying-block__trust-chips {
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: #3a322a8c;
	margin: 16px 0 22px 0;
}

.amq-buying-block__secondary-links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.amq-buying-block__secondary-links a {
	font-size: 14px;
	color: #c1673f;
	text-decoration: underline;
}
.amq-buying-block__sku {
	font-size: 12px;
	color: #3a322a8c;
	margin: 16px 0 0 0;
}

@media (max-width: 860px) {
	.amq-buying-block {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.amq-buying-block__name {
		font-size: 24px;
	}
}
@media (max-width: 520px) {
	.amq-buying-block__triad {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.amq-buying-block__scent-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.amq-buying-block__total-value {
		font-size: 24px;
	}
	.amq-buying-block__trust-chips {
		font-size: 11px;
		letter-spacing: 0.04em;
	}
}

/**
 * Sticky mobile Add-to-Cart bar — README "Interactions & Behavior" #4:
 * appears below ~860px once #hero has scrolled out of view (see
 * initStickyBar() in amq-castile-buying-block.js). `hidden` attribute
 * handles the default/off state; JS only ever toggles `hidden`, never
 * `display`, so this stays a plain attribute selector, no !important fight.
 */
.amq-castile-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fbf8f2;
	border-top: 1px solid color-mix(in srgb, #3a322a 16%, transparent);
	padding: 10px 16px;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
.amq-castile-sticky-bar[hidden] {
	display: none;
}
.amq-castile-sticky-bar img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.amq-castile-sticky-bar__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 13px;
	color: #3a322a;
	overflow: hidden;
}
.amq-castile-sticky-bar__info span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.amq-castile-sticky-bar__add-to-cart {
	background: #c1673f;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	cursor: pointer;
	flex-shrink: 0;
}
.amq-castile-sticky-bar__add-to-cart:disabled {
	background: color-mix(in srgb, #3a322a 30%, transparent);
	cursor: not-allowed;
}

/**
 * Sections below the sticky bar (Footnotes, ticket 05) reserve bottom
 * padding so the fixed bar never covers their content — README's own
 * requirement for this bar. Toggled by JS alongside the bar's visibility,
 * not a fixed mobile-only rule, since the bar only shows once #hero has
 * scrolled out of view, not on every mobile pageview.
 */
body.amq-castile-sticky-bar-visible {
	padding-bottom: 64px;
}

/* The theme sets `font-family: Amouriq` on every div/span/p/button, which beats plain inheritance. */
.amq-buying-block *,
.amq-castile-sticky-bar * {
	font-family: "DM Sans", system-ui, sans-serif;
}