/*
 * Promoted-brand furniture — the contact rail and the sticky action bar.
 * Rendered by inc/promo.php; loaded only when a brand is configured.
 *
 * The two never appear together and between them they cover every width: the
 * rail is a DESKTOP element and the bar is the everywhere-else element.
 *
 * THE BREAKPOINT IS 1360px, AND IT IS A COMPLIANCE NUMBER, NOT A TASTE ONE.
 * The rail is fixed to the right edge, so it may only exist where the page has
 * a free gutter to put it in: container 1200px + 2 x 74px rail + air = 1360.
 * At the old 1024px switch the rail sat ON TOP of the reading column — measured
 * at a 1096px viewport it covered table cells, paragraphs, list items and a FAQ
 * accordion button, i.e. it also swallowed a click target. That breaks the
 * standing rule that nothing may cover page content (CLAUDE.md §7, and the
 * 2026-07-14 pass that deleted the hero peek animation for the same reason).
 * If you widen --sn-container, widen this query with it.
 */

/* ---------- Floating contact rail (desktop) ---------- */

.x7f4200fd {
	display: none;
}

@media (min-width: 1360px) {
	.x7f4200fd {
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 90; /* under the sticky header (100), over page content */
		display: flex;
		flex-direction: column;
		/* The 1px gaps let the container colour through as hairline dividers,
		   which is what stops the stack reading as one undifferentiated blob. */
		gap: 1px;
		background: color-mix(in srgb, var(--sn-primary) 34%, transparent);
		border-radius: var(--sn-radius) 0 0 var(--sn-radius);
		box-shadow: -8px 0 28px rgba(11, 13, 20, .34);
		/* NO overflow: hidden here. It used to clip the QR flyout out of
		   existence — the panel was painted and then cropped by the parent, so
		   the feature looked dead. Corners are rounded per item instead. */
	}

	.x1af972a0 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--sn-sp-1);
		width: 74px;
		min-height: 74px;
		padding: var(--sn-sp-3) var(--sn-sp-2);
		background: var(--sn-lacquer-grad);
		color: var(--sn-on-chrome);
		font-family: var(--sn-font-display);
		font-size: .75rem;
		font-weight: 600;
		/* 1.45, not the 1.3 this had: the labels can be Thai (the CTA label is)
		   and Thai stacks marks above and below the baseline (CLAUDE.md §1). */
		line-height: 1.45;
		text-align: center;
		text-decoration: none;
		/* The QR item is a <button>; strip the UA chrome so it matches the links. */
		border: 0;
		cursor: pointer;
		transition: background .15s ease, color .15s ease;
	}

	.x7f4200fd > :first-child { border-radius: var(--sn-radius) 0 0 0; }
	.x7f4200fd > :last-child  { border-radius: 0 0 0 var(--sn-radius); }

	.x1af972a0 svg {
		width: 24px;
		height: 24px;
		flex: 0 0 auto;
	}

	/* Hover DARKENS towards the lacquer or deepens the gold — it never brightens
	   to --sn-primary on a light field. That mistake made seven elements
	   unreadable on this skin (CLAUDE.md §12, 2026-08-05). */
	.x1af972a0:hover,
	.x1af972a0:focus-visible {
		background: var(--sn-gold-grad);
		color: var(--sn-primary-dark);
		text-decoration: none;
	}

	/* The action item. The rail leads with it because the sticky bar — the only
	   other persistent CTA — is a phone-only surface. */
	.x4be15e5e {
		background: var(--sn-gold-grad);
		color: var(--sn-primary-dark);
	}

	.x4be15e5e:hover,
	.x4be15e5e:focus-visible {
		background: linear-gradient(170deg, #FFCB11 0%, #EFB000 45%, #C98F00 100%);
		color: var(--sn-primary-dark);
	}

	/* LINE keeps its own green so the channel is recognisable at a glance —
	   this is the one place brand recognition beats palette consistency.
	   The bubble is WHITE (that is the actual LINE lock-up; as dark ink it read
	   as a muddy blob against the green) while the LABEL stays dark ink, which
	   is the only way text clears AA on this green — white would be 2.6:1. */
	.x34a5914b {
		background: linear-gradient(170deg, #4BE08A 0%, #06C755 55%, #04A445 100%);
		color: #05320F;
	}

	.x34a5914b svg {
		color: #FFFFFF;
		filter: drop-shadow(0 1px 2px rgba(4, 74, 30, .45));
	}

	.x34a5914b:hover,
	.x34a5914b:focus-visible {
		background: linear-gradient(170deg, #38D97C 0%, #05B44C 55%, #038B3A 100%);
		color: #FFFFFF;
	}

	/* The label is long (a phone number, or a Thai CTA); let it wrap. */
	.x1467839a {
		display: block;
		word-break: break-word;
	}

	/*
	 * QR flyout. Opens on hover AND on click/keyboard: the click path is
	 * assets/js/promo.js flipping aria-expanded on the button, so the mouse
	 * needs no JS and the keyboard is not locked out.
	 */
	.x2e9923f7 {
		position: absolute;
		right: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%) scale(.94);
		width: 176px;
		padding: var(--sn-sp-3);
		background: #FFFFFF;
		border-radius: var(--sn-radius);
		box-shadow: 0 14px 34px rgba(11, 13, 20, .38);
		opacity: 0;
		visibility: hidden;
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}

	.x2e9923f7 img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--sn-radius-sm);
	}

	.xf78334f5 {
		display: block;
		margin-top: var(--sn-sp-2);
		color: var(--sn-text);
		font-family: var(--sn-font);
		font-size: var(--sn-fs-xs);
		font-weight: 400;
		line-height: var(--sn-lh-body);
	}

	.x36406cc2:hover .x2e9923f7,
	.x36406cc2[aria-expanded="true"] .x2e9923f7 {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) scale(1);
	}
}

/* ---------- Sticky action bar (everything under the rail's breakpoint) ---------- */

.x1e388fa4 {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-sp-3);
	padding: var(--sn-sp-3) var(--sn-sp-4);
	/* Sits above the iOS home indicator instead of under it. */
	padding-bottom: max(var(--sn-sp-3), env(safe-area-inset-bottom));
	background: var(--sn-lacquer-grad);
	border-top: 2px solid transparent;
	border-image: var(--sn-gold-grad) 1;
	box-shadow: 0 -8px 26px rgba(11, 13, 20, .35);
	color: var(--sn-on-chrome);
}

/*
 * Reserve the bar's height at the bottom of the document.
 *
 * COMPLIANCE: this theme has a standing rule that nothing may cover page
 * content (CLAUDE.md §12, 2026-07-14 — it is why the old hero peek animation
 * was removed). A fixed bar breaks that rule unless the page grows to
 * compensate, so it does: at the end of a scroll the last element clears the
 * bar and nothing is permanently hidden. Do not remove this padding to
 * "reclaim" the space.
 */
body:has(.x1e388fa4) {
	padding-bottom: 88px;
}

.x089de37f {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	min-width: 0; /* lets the text column shrink instead of pushing the button */
}

.x99cfc77f {
	flex: 0 0 auto;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: var(--sn-radius-sm);
	overflow: hidden;
	background: var(--sn-surface-2);
}

.x99cfc77f img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.xd4f4d8a7 {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: var(--sn-fs-xs);
	line-height: 1.45;
}

.xd4f4d8a7 strong {
	font-family: var(--sn-font-display);
	font-weight: 600;
	color: var(--sn-primary);
}

/* One line only — a wrapped tagline would double the bar's height and eat
   the fold on the phones this bar exists for. */
.xd4f4d8a7 span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: color-mix(in srgb, var(--sn-on-chrome) 72%, transparent);
}

.x2d3ee902 {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sn-sp-2);
}

/* LINE, icon only. 44px is the touch-target floor, and it stays green for the
   same recognition reason as the rail item. */
.x76b149e7 {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sn-radius-sm);
	background: linear-gradient(170deg, #4BE08A 0%, #06C755 55%, #04A445 100%);
	color: #FFFFFF;
}

.x76b149e7 svg {
	width: 24px;
	height: 24px;
}

.x76b149e7:hover,
.x76b149e7:focus-visible {
	background: linear-gradient(170deg, #38D97C 0%, #05B44C 55%, #038B3A 100%);
	color: #FFFFFF;
}

.x5c1ea3c7 {
	flex: 0 0 auto;
	padding: var(--sn-sp-2) var(--sn-sp-6);
}

@media (min-width: 1360px) {
	.x1e388fa4 {
		display: none;
	}

	body:has(.x1e388fa4) {
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.x1af972a0,
	.x2e9923f7 {
		transition: none;
	}
}