.occ-adv-launcher,
.occ-adv-invite {
	position: fixed;
	right: 0.75rem;
	z-index: 1000;
	font: inherit;
	cursor: pointer;
}

.occ-adv-launcher {
	bottom: calc(0.75rem + env(safe-area-inset-bottom));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0 1.15rem;
	border: 0;
	border-radius: 999px;
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-8);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.occ-adv-launcher:focus-visible {
	outline: 2px solid var(--theme-palette-color-2);
	outline-offset: 2px;
}

.occ-adv-launcher__icon {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	border-radius: 50% 50% 50% 2px;
	background: currentColor;
	opacity: 0.9;
}

.occ-adv-invite {
	bottom: calc(4.25rem + env(safe-area-inset-bottom));
	max-width: min(17rem, calc(100vw - 1.5rem));
	min-height: 2.75rem;
	padding: 0.7rem 0.95rem;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 0.9rem 0.9rem 0.2rem 0.9rem;
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-2);
	font-size: 0.9rem;
	line-height: 1.35;
	text-align: left;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	animation: occ-adv-rise 0.25s ease-out;
}

@keyframes occ-adv-rise {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* Only where the bar is actually on screen. `is-visible` is set by scroll position, which knows
   nothing about breakpoints, and style.css hides the bar itself above 768px — so unscoped these lift
   the launcher clear of a bar the desktop reader cannot see, and it visibly jumps as the Add-to-Cart
   button scrolls out of view. */
@media (max-width: 768px) {
	.occaffe-sticky-atc.is-visible ~ .occ-adv-launcher {
		bottom: calc(5rem + env(safe-area-inset-bottom));
	}

	.occaffe-sticky-atc.is-visible ~ .occ-adv-invite {
		bottom: calc(8.5rem + env(safe-area-inset-bottom));
	}
}

.occ-adv-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--occ-adv-inset, 0px);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	height: var(--occ-adv-height, 88vh);
	max-height: var(--occ-adv-height, 88vh);
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	background: var(--theme-palette-color-8);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

@supports (height: 100dvh) {
	.occ-adv-panel {
		height: var(--occ-adv-height, 88dvh);
		max-height: var(--occ-adv-height, 88dvh);
	}
}

.occ-adv-panel[hidden] {
	display: none;
}

.occ-adv-panel__head {
	flex: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 0.65rem 0.85rem 1rem;
	border-bottom: 1px solid var(--theme-palette-color-5);
	background: var(--theme-palette-color-7);
}

.occ-adv-panel__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--theme-palette-color-2);
}

.occ-adv-panel__disclosure {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--theme-palette-color-3);
}

.occ-adv-panel__close {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--theme-palette-color-3);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.occ-adv-panel__close:hover {
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-2);
}

.occ-adv-log {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.occ-adv-msg {
	display: flex;
}

.occ-adv-msg--user {
	justify-content: flex-end;
}

.occ-adv-bubble {
	max-width: 92%;
	padding: 0.7rem 0.9rem;
	border-radius: 1rem;
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-2);
	font-size: 0.95rem;
	line-height: 1.5;
}

.occ-adv-msg--user .occ-adv-bubble {
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-8);
	border-bottom-right-radius: 0.25rem;
}

.occ-adv-msg--advisor .occ-adv-bubble {
	border-bottom-left-radius: 0.25rem;
}

.occ-adv-bubble > * + * {
	margin-top: 0.65rem;
}

.occ-adv-text p {
	margin: 0;
}

.occ-adv-text p + p {
	margin-top: 0.5rem;
}

.occ-adv-text__h {
	font-weight: 700;
}

.occ-adv-text ul,
.occ-adv-text ol {
	margin: 0.4rem 0 0;
	padding-left: 1.1rem;
}

.occ-adv-text a {
	color: var(--theme-palette-color-1);
	text-decoration: underline;
}

.occ-adv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.occ-adv-chip {
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 999px;
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-2);
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.25;
	cursor: pointer;
}

.occ-adv-chip:hover {
	border-color: var(--theme-palette-color-1);
	background: var(--theme-palette-color-7);
}

.occ-adv-products {
	display: grid;
	gap: 0.6rem;
}

.occ-adv-card {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 0.75rem;
	padding: 0.7rem;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 0.7rem;
	background: var(--theme-palette-color-8);
}

.occ-adv-card:not(:has(.occ-adv-card__media)) {
	grid-template-columns: 1fr;
}

.occ-adv-card__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 0.45rem;
	background: var(--theme-palette-color-7);
}

.occ-adv-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.occ-adv-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.occ-adv-card__name {
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--theme-palette-color-2);
	text-decoration: none;
}

.occ-adv-card__attrs {
	margin: 0;
	font-size: 0.78rem;
	color: var(--theme-palette-color-3);
}

.occ-adv-card__reason {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--theme-palette-color-3);
}

.occ-adv-card__foot {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.occ-adv-card__price {
	font-weight: 700;
	font-size: 1rem;
	color: var(--theme-palette-color-2);
}

.occ-adv-card__stock {
	font-size: 0.76rem;
	font-weight: 600;
}

.occ-adv-card__stock--in {
	color: var(--theme-palette-color-1);
}

.occ-adv-card__stock--low,
.occ-adv-card__stock--last {
	color: var(--theme-palette-color-6);
}

.occ-adv-card__stock--out {
	color: var(--theme-palette-color-3);
}

.occ-adv-card__cta {
	align-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-top: 0.2rem;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-8);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.occ-adv-card__cta:hover {
	background: var(--theme-palette-color-2);
	color: var(--theme-palette-color-8);
}

.occ-adv-link__a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--theme-palette-color-1);
	text-decoration: underline;
}

.occ-adv-nudge {
	padding: 0.6rem 0.75rem;
	border-radius: 0.55rem;
	background: var(--theme-palette-color-8);
	border: 1px solid var(--theme-palette-color-5);
}

.occ-adv-nudge__text {
	display: block;
	font-size: 0.84rem;
	color: var(--theme-palette-color-3);
}

.occ-adv-nudge__bar {
	display: block;
	height: 0.3rem;
	margin-top: 0.45rem;
	border-radius: 999px;
	background: var(--theme-palette-color-7);
	overflow: hidden;
}

.occ-adv-nudge__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--theme-palette-color-1);
}

.occ-adv-notice,
.occ-adv-fallback {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--theme-palette-color-3);
}

.occ-adv-notice--warn {
	color: var(--theme-palette-color-6);
}

.occ-adv-pending[hidden] {
	display: none;
}

.occ-adv-bubble--typing {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.occ-adv-typing {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 0.15rem 0;
}

.occ-adv-typing__dot {
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	background: var(--theme-palette-color-3);
	opacity: 0.35;
	animation: occ-adv-typing 1.2s infinite ease-in-out;
}

.occ-adv-typing__dot:nth-child(2) {
	animation-delay: 0.18s;
}

.occ-adv-typing__dot:nth-child(3) {
	animation-delay: 0.36s;
}

@keyframes occ-adv-typing {
	0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
	30% { opacity: 0.9; transform: translateY(-0.18rem); }
}

/* The dots carry no information the visually-hidden label does not; hold them still rather than
   animate for anyone who asked not to see motion. */
@media (prefers-reduced-motion: reduce) {
	.occ-adv-typing__dot {
		animation: none;
		opacity: 0.55;
	}
}

/* A chip already answered, or belonging to a turn the conversation has moved past. */
.occ-adv-chip.is-spent {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.occ-adv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.occ-adv-form {
	flex: none;
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--theme-palette-color-5);
	background: var(--theme-palette-color-8);
}

.occ-adv-form__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.75rem;
	min-height: 2.75rem;
	max-height: 6rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 0.7rem;
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-2);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	resize: none;
}

.occ-adv-form__input:focus {
	outline: none;
	border-color: var(--theme-palette-color-1);
}

.occ-adv-form__input:disabled {
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-3);
}

.occ-adv-form__send {
	flex: none;
	min-height: 2.75rem;
	padding: 0 1.1rem;
	border: 0;
	border-radius: 0.7rem;
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-8);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.occ-adv-form__send:hover:not(:disabled) {
	background: var(--theme-palette-color-2);
}

.occ-adv-form__send:disabled {
	opacity: 0.5;
	cursor: default;
}

body.occ-adv-open {
	overflow: hidden;
}

body.occ-adv-open .occ-adv-launcher,
body.occ-adv-open .occ-adv-invite {
	display: none;
}

@media (min-width: 48rem) {
	.occ-adv-launcher,
	.occ-adv-invite {
		right: 1rem;
	}

	.occ-adv-panel {
		left: auto;
		right: 1rem;
		bottom: calc(1rem + var(--occ-adv-inset, 0px));
		width: 25rem;
		height: auto;
		max-height: min(38rem, 82vh);
		border: 1px solid var(--theme-palette-color-5);
		border-radius: 1rem;
	}

	@supports (height: 100dvh) {
		.occ-adv-panel {
			max-height: min(38rem, 82dvh);
		}
	}

	body.occ-adv-open {
		overflow: visible;
	}

	body.occ-adv-open .occ-adv-launcher,
	body.occ-adv-open .occ-adv-invite {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.occ-adv-invite {
		animation: none;
	}
}

/* At the end of the document there is nothing left to scroll, so the fixed launcher stops floating
   over content and simply covers the footer menu. It yields instead of the footer reserving space for
   it — the sticky Add-to-Cart bar does the same (inc/product.php), so the footer needs no padding at
   all and the page ends where it looks like it ends.

   Phone only. On a wide viewport the launcher sits in the right margin beside the footer columns
   rather than on top of them, and hiding it there would remove the advisor from the whole lower half
   of a desktop page for nothing. Same 768px boundary the sticky bar uses, so the two never disagree
   about which viewport they are on. */
@media (max-width: 768px) {
	body.occ-adv-at-footer .occ-adv-launcher,
	body.occ-adv-at-footer .occ-adv-invite {
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.5rem);
		transition: opacity 0.18s ease, visibility 0.18s, transform 0.18s ease;
		pointer-events: none;
	}
}