/*
 * 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) ---------- */

.x110d5a6a {
	display: none;
}

@media (min-width: 1360px) {
	.x110d5a6a {
		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: var(--sn-acc-1);
		border: 3px solid var(--sn-acc-3);
		border-right: 0;
		border-radius: var(--sn-radius) 0 0 var(--sn-radius);
		box-shadow: -8px 8px 0 var(--sn-acc-5);
		/* 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. */
	}

	.xf75fec37 {
		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: .8125rem;
		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;
	}

	/*
	 * :visited — THE SAME BUG AS 2026-07-29, in a new place. base.css sets
	 * `a:visited { color: var(--sn-accent) }`, which is specificity (0,1,1) and
	 * therefore BEATS a plain class rule like .xa7085df4 (0,1,0). The
	 * moment a visitor had followed the rail link, its label repainted itself
	 * magenta — on a cyan tab, and on the LINE green. Every rail item that
	 * declares a colour has to declare it for :visited too. The .xdc1444ed family
	 * dodges this by routing ink through --sn-btn-ink; these are not buttons.
	 */
	.xf75fec37,
	.xf75fec37:visited { color: var(--sn-on-chrome); }

	/*
	 * The end items follow the container's curve from the INSIDE: the rail
	 * is --sn-radius (24px) behind a 3px frame, so the inner corner an item
	 * sits in is 24 - 3 = 21px. A smaller value leaves a wedge of the rail's
	 * magenta background in the corner; a larger one cuts into the frame.
	 *
	 * PER-CORNER, NOT A SHORTHAND, and that is the bug this fixes: when the
	 * admin has filled in ONLY the CTA (no LINE, phone or QR), one element is
	 * both first and last child, and a later shorthand reset the corner the
	 * earlier rule had just set. Any rule keyed to a rail end must set a
	 * single corner.
	 */
	.x110d5a6a > :first-child { border-top-left-radius: 21px; }
	.x110d5a6a > :last-child  { border-bottom-left-radius: 21px; }

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

	/* Hover BRIGHTENS to the cyan fill with ink on it. The rail item is a dark
	   slab, so brightening is the safe direction here — the rule to keep is
	   "move AWAY from the surface underneath", not "always darken". */
	.xf75fec37:hover,
	.xf75fec37:focus-visible,
	.xf75fec37:visited:hover {
		background: var(--sn-acc-3);
		color: var(--sn-bg);
		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. */
	.xa7085df4,
	.xa7085df4:visited {
		background: var(--sn-gold-grad);
		background-size: 300% 100%;
		color: var(--sn-bg);
		animation: x1d891514 6s ease infinite;
	}

	.xa7085df4:hover,
	.xa7085df4:focus-visible {
		background: var(--sn-acc-3);
		color: var(--sn-bg);
	}

	/* 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. */
	.x689a1e48,
	.x689a1e48:visited {
		background: linear-gradient(170deg, #4BE08A 0%, #06C755 55%, #04A445 100%);
		color: #05320F;
	}

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

	.x689a1e48:hover,
	.x689a1e48: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. */
	.xbac64717 {
		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.
	 */
	/* The panel stays WHITE even though the skin is dark — a QR code needs a
	   light quiet zone to scan reliably, and the exported code carries a white
	   field anyway. Its caption therefore has to be INK: --sn-text is a light
	   grey on this skin and would have been invisible on this one white surface
	   (see the caption rule below). */
	.x50cc2ddd {
		position: absolute;
		right: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%) scale(.94);
		width: 176px;
		padding: var(--sn-sp-3);
		background: #FFFFFF;
		border: 3px solid var(--sn-acc-1);
		border-radius: var(--sn-radius);
		box-shadow: 8px 8px 0 var(--sn-acc-5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}

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

	.x8dca2500 {
		display: block;
		margin-top: var(--sn-sp-2);
		/* INK, not --sn-text: this is the theme's one white surface, and
		   --sn-text is a near-white that would be invisible on it. */
		color: var(--sn-bg);
		font-family: var(--sn-font);
		font-size: var(--sn-fs-xs);
		font-weight: 400;
		line-height: var(--sn-lh-body);
	}

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

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

.x4bd7b519 {
	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-pat-stripes), var(--sn-lacquer-grad);
	border-top: var(--sn-rule) solid transparent;
	border-image: var(--sn-gold-grad) 1;
	box-shadow: 0 -8px 0 rgba(123, 47, 255, .55);
	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(.x4bd7b519) {
	padding-bottom: 88px;
}

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

.xc338d53e {
	flex: 0 0 auto;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--sn-surface-2);
	border: 2px solid var(--sn-acc-3);
}

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

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

.xbaddd6c5 strong {
	font-family: var(--sn-font-display);
	font-weight: 700;
	color: var(--sn-acc-3);
}

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

.x7249186e {
	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. */
/* :visited here too — see the rail note above. */
.xc4375ed8,
.xc4375ed8:visited {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 2px solid var(--sn-acc-3);
	background: linear-gradient(170deg, #4BE08A 0%, #06C755 55%, #04A445 100%);
	color: #FFFFFF;
}

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

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

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

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

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

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

	.xa7085df4 {
		animation: none;
	}
}