/* IAC Support Suite — front end. v1.0.0
   Filename carries the version because BionicWP strips ?ver= query strings;
   a plugin version bump alone would never bust the cache. Rename this file
   on every change. */

.iac-sup-wrap { max-width: 720px; }

.iac-sup-row { margin: 0 0 18px; }
.iac-sup-row label { display: block; font-weight: 600; margin-bottom: 6px; }
.iac-sup-row input[type="text"],
.iac-sup-row input[type="email"],
.iac-sup-row input[type="tel"],
.iac-sup-row select,
.iac-sup-row textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #c9ced6;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.4;
	background: #fff;
}
.iac-sup-row input[readonly] { background: #f3f4f6; color: #52596b; }
.iac-sup-row textarea { resize: vertical; min-height: 140px; }

.iac-sup-opt { font-weight: 400; color: #6b7280; font-size: 13px; }
.iac-sup-hint { margin: 6px 0 0; font-size: 13px; color: #6b7280; }

.iac-sup-actions { margin-top: 24px; }
.iac-sup-submit { cursor: pointer; }

/* Honeypot.
 *
 * 1.8.1: the element now carries an INLINE display:none !important, which
 * beats anything here — inline important wins the cascade. That is deliberate.
 * The old reasoning was "offscreen rather than display:none, which some bots
 * detect", and it cost more than it bought: an offscreen field is still a real
 * field, so browsers autofilled it and real submissions were silently dropped.
 * A slightly more detectable trap is a fair price for one that cannot swallow
 * customers. These rules stay as a fallback for any markup that predates the
 * inline style. */
.iac-sup-hp {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.iac-sup-notice {
	padding: 14px 16px;
	border-radius: 6px;
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.5;
}
.iac-sup-ok { background: #e8f5ec; border: 1px solid #a6d5b6; color: #1c4c2c; }
.iac-sup-err { background: #fdecea; border: 1px solid #f0b3ad; color: #7a1c12; }

/* ---- Account tab ---------------------------------------------------- */

.iac-sup-account .iac-sup-meta { margin-bottom: 22px; line-height: 1.6; }
.iac-sup-table { width: 100%; }

.iac-sup-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: #eef0f3;
	color: #3c4453;
	white-space: nowrap;
}
.iac-sup-pill-new,
.iac-sup-pill-open { background: #e3effc; color: #14427c; }
.iac-sup-pill-awaiting_customer { background: #fdf1dc; color: #7a5410; }
.iac-sup-pill-replied { background: #e8f5ec; color: #1c4c2c; }
.iac-sup-pill-resolved,
.iac-sup-pill-closed { background: #eef0f3; color: #5b6270; }

/* ---- Thread --------------------------------------------------------- */

.iac-sup-thread { margin: 22px 0 30px; }

.iac-sup-msg {
	border: 1px solid #e2e5ea;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 14px;
	background: #fff;
}
.iac-sup-msg-out { background: #f7f9fc; border-color: #d6e0ee; }
.iac-sup-msg-internal { background: #fffbe6; border-color: #e8dca8; }

.iac-sup-msg-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	margin-bottom: 8px;
	font-size: 14px;
}
.iac-sup-msg-body { font-size: 15px; line-height: 1.6; }
.iac-sup-msg-body p:last-child { margin-bottom: 0; }

.iac-sup-muted { color: #6b7280; font-size: 13px; }
.iac-sup-tag {
	background: #e8dca8;
	color: #5c4a10;
	border-radius: 4px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.iac-sup-files { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.iac-sup-file {
	display: inline-block;
	padding: 6px 11px;
	border: 1px solid #ccd2db;
	border-radius: 6px;
	font-size: 13px;
	text-decoration: none;
	background: #fbfcfd;
}
.iac-sup-file-size { color: #6b7280; }

@media (max-width: 600px) {
	.iac-sup-msg-head { flex-direction: column; gap: 2px; }
}

/* 1.0.2 — form rendered inside the My Account Support tab. */
.iac-sup-account-new .iac-sup-wrap {
	margin-top: 4px;
}

.iac-sup-account-h {
	margin: 0 0 14px;
}

.iac-sup-back {
	margin-top: 18px;
}

.iac-sup-nudge {
	margin: 0 0 16px;
	font-size: 13px;
}

/* 1.1.0 — chips, identity line, async panel state. */
.iac-sup-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.iac-sup-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.iac-sup-chip-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.iac-sup-chip {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid #ccc;
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.2;
	user-select: none;
	transition: background-color .12s ease, border-color .12s ease;
}

.iac-sup-chip:hover {
	border-color: #888;
}

.iac-sup-chip-input:checked + .iac-sup-chip {
	/* 3.4.1: MAUVE #5a5152, the house selected state — confirmed against the
	   Storefront Suite, which documents this exact rule ("mauve, not red")
	   and paints every active chip and checkout button with it. 3.4.0's red
	   was copied from a stale shop rule the newer overrides had already
	   corrected; red stays reserved for errors and link accents. */
	background: #5a5152;
	border-color: #5a5152;
	color: #fff;
}

/* Keyboard users must be able to see where they are. */
.iac-sup-chip-input:focus-visible + .iac-sup-chip {
	outline: 2px solid #5a5152;
	outline-offset: 2px;
}

.iac-sup-identity-OLD {
	margin: 0 0 18px;
	padding: 10px 12px;
	background: #f6f5f4;
	border-radius: 4px;
	font-size: 14px;
}

#iac-sup-panel {
	position: relative;
	transition: opacity .12s ease;
}

#iac-sup-panel.iac-sup-busy {
	opacity: .45;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	#iac-sup-panel,
	.iac-sup-chip {
		transition: none;
	}
}

/* ===========================================================
 * 1.3.0 — speak the account's visual language.
 *
 * Orders, Subscriptions and My Numbers are styled by the Storefront Suite's
 * iac_ma_css(), which prints on any is_account_page() — including this
 * endpoint. The views above emit iac-ma-* markup so rows, chips and buttons
 * are inherited outright rather than reimplemented. What remains here is only
 * what that stylesheet has no opinion about: form controls and the message
 * thread. Tokens are copied from it deliberately — line #E4DAD2, cream
 * #FBF7F3, ink #3F3839, mauve #7E656B, accent #E84E2A.
 * =========================================================== */

.woocommerce-account .iac-sup-account .iac-sup-row {
	margin: 0 0 16px;
}

.woocommerce-account .iac-sup-account .iac-sup-row > label,
.woocommerce-account .iac-sup-account .iac-sup-label {
	display: block;
	margin-bottom: 6px;
	font-size: 10.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #7E656B;
	font-weight: 800;
}

.woocommerce-account .iac-sup-account input[type="text"],
.woocommerce-account .iac-sup-account input[type="email"],
.woocommerce-account .iac-sup-account input[type="tel"],
.woocommerce-account .iac-sup-account select,
.woocommerce-account .iac-sup-account textarea {
	width: 100%;
	/* background-color, NOT the background shorthand. 1.3.0 used the shorthand
	   and wiped the theme's background-image — which on a <select> is its
	   dropdown arrow. The control lost its only affordance and read as a text
	   field. */
	background-color: #FBF7F3;
	border: 1px solid #E4DAD2;
	border-radius: 0;
	padding: 11px 13px;
	font-size: 14px;
	color: #1A1A1A;
	box-shadow: none;
}

/* Own the arrow rather than depending on the theme supplying one. */
.woocommerce-account .iac-sup-account select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237E656B' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

.woocommerce-account .iac-sup-account select::-ms-expand {
	display: none;
}

.woocommerce-account .iac-sup-account textarea {
	min-height: 130px;
	line-height: 1.55;
}

/* Focus is ink, not accent. #E84E2A is this palette's FAILED / OVERDUE colour
   — a field you are simply typing in should not look like a validation error.
   Orange stays reserved for genuine errors. */
.woocommerce-account .iac-sup-account input:focus,
.woocommerce-account .iac-sup-account select:focus,
.woocommerce-account .iac-sup-account textarea:focus {
	outline: none;
	border-color: #3F3839;
	box-shadow: inset 0 0 0 1px #3F3839;
	background-color: #fff;
}

.woocommerce-account .iac-sup-account .iac-sup-hint {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: #5a5152;
	font-weight: 600;
}

/* Chips reuse the account chip shape rather than the pill from 1.1.0. */
/* 3.4.0: the account pills stop wearing a second uniform — same rounded
   pill, same red selected state as the Contact page. Whole rules restated. */
.woocommerce-account .iac-sup-account .iac-sup-chip {
	border-radius: 999px;
	border: 1px solid #E4DAD2;
	background: #fff;
	padding: 8px 16px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	color: #3F3839;
}

.woocommerce-account .iac-sup-account .iac-sup-chip-input:checked + .iac-sup-chip {
	background: #5a5152;
	border-color: #5a5152;
	color: #fff;
}

.woocommerce-account .iac-sup-account .iac-sup-chip-input:focus-visible + .iac-sup-chip {
	outline: 2px solid #5a5152;
	outline-offset: 2px;
}

/* 3.4.0: the identity strip is retired in both contexts in favour of the
   chip below; the old account override is neutralised by restating it as
   the same chip so nothing square survives. */
.woocommerce-account .iac-sup-account .iac-sup-identity {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #FBF7F3;
	border: 1px solid #E4DAD2;
	border-left: 1px solid #E4DAD2;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13.5px;
	color: #3F3839;
}

/* Thread.
 *
 * NOT the container-background + 1px-gap trick the row lists use. That works
 * for edge-to-edge rows, but the moment a message is indented the container's
 * #E4DAD2 shows through the gutter as a tinted empty block — which is exactly
 * what it did. Each message carries its own border instead and the container
 * is transparent, so indented space is simply empty. */
.woocommerce-account .iac-sup-thread {
	border: 0;
	background: transparent;
	display: block;
}

/* 1.5.3 — the BOX holds the message and nothing else. Author and timestamp
   moved out of it: inside, they competed with the words for the same panel;
   outside they read as a label on it. */
.woocommerce-account .iac-sup-thread .iac-sup-msg {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 20px;
}

/* 1.5.5 — the panel colour is the account's cream, not white. Every other
   surface in this account (rows, cards, tiles, facts strip) is #FBF7F3; pure
   white is not in the vocabulary, and against a #E4DAD2 border it measures
   1.38:1 — the box barely existed. Cream makes the customer's messages read as
   panels like everything else, while ours stay a shade deeper with the accent
   rule. Padding opened up: with the meta line moved outside, the box holds
   only words and was sitting too tight around them. */
.woocommerce-account .iac-sup-thread .iac-sup-msg-body {
	background: #FDFBF9;
	border: 1px solid #E4DAD2;
	border-radius: 6px;
	padding: 15px 18px;
	line-height: 1.65;
}

.woocommerce-account .iac-sup-thread .iac-sup-msg:last-child {
	margin-bottom: 0;
}

/* 1.5.2 — back to the industry convention: the reader's OWN messages sit on
   the RIGHT, the other party's on the left. iMessage, WhatsApp, Slack,
   Intercom and Zendesk's own customer widget all read this way, and anything
   shaped like a threaded conversation inherits that muscle memory whether it
   wants to or not. The meta line goes right with it; the body stays
   left-aligned, because ragged-left prose is harder to read and no chat client
   does that either. */
.woocommerce-account .iac-sup-thread .iac-sup-msg-in {
	margin-left: 12%;
}

.woocommerce-account .iac-sup-thread .iac-sup-msg-in .iac-sup-msg-body {
	background: #FDFBF9;
}

/* Both meta lines read left, indented to sit above the WORDS rather than flush
   with the box edge. The indent itself lives in the caption block below —
   1.5.8 set it here and a later "padding: 0 2px" shorthand quietly overrode
   it, which is why only OURS looked indented: that one had an extra class and
   won on specificity rather than order. */
.woocommerce-account .iac-sup-thread .iac-sup-msg-out .iac-sup-msg-head {
	/* Ours carries a 3px accent plus 20px padding. */
	padding-left: 23px;
}

/* Ours: tinted, flush left, accent rule down the left edge. Square corners —
   the two sides read as two columns without importing chat-balloon language
   that would fight the rest of the account. */
.woocommerce-account .iac-sup-thread .iac-sup-msg-out {
	margin-right: 12%;
}

/* 1.5.8 — #F5F1ED against the customer's #FBF7F3 measured 1.054 apart, which
   is to say invisible: two panels the same colour with an accent rule doing
   all the work. #EDE5DC is 1.170 apart — a clear third step in the palette,
   still comfortably warm, and body text on it measures 9.17:1. Deeper than
   this and the #E4DAD2 border line stops being distinguishable from the fill.
   Accent widened 2px -> 3px to match.
   The accent is an inset shadow rather than a thick left border: a 2px border
   on one side of a rounded box curves at a different rate to the 1px on the
   other three and the corner reads as a dent. */
.woocommerce-account .iac-sup-thread .iac-sup-msg-out .iac-sup-msg-body {
	/* 1.5.9: #EDE5DC read as too heavy. Both surfaces lifted — customer
	   #FDFBF9, ours #F3EDE6 — which lands the pair 1.126 apart: still clearly
	   two surfaces (1.054 was invisible, 1.170 was the heavy version), and
	   ours now sits FURTHER from the #E4DAD2 border line than before (1.184
	   vs 1.104), so the outline reads better rather than worse. Body text on
	   it measures 9.84:1. */
	background: #F3EDE6;
	border-left: 1px solid #E4DAD2;
	box-shadow: inset 3px 0 0 0 #E84E2A;
	padding-left: 20px;
}

/* 1.5.4: removed the darker colour that used to distinguish the customer's
   own meta. Side, indent and panel tint already say who is speaking; a second
   signal here only added weight where we are trying to remove it. */

@media (max-width: 767px) {
	/* Indentation costs more width than it communicates on a phone; the tint
	   and the accent rule already carry the distinction. */
	.woocommerce-account .iac-sup-thread .iac-sup-msg-in {
		margin-left: 0;
	}
	.woocommerce-account .iac-sup-thread .iac-sup-msg-out {
		margin-right: 0;
	}
	/* With the indent gone there is no side to align to. */
	.woocommerce-account .iac-sup-thread .iac-sup-msg-head {
		/* The 1.0.0 base stylesheet stacks the head into a column below 767px.
		   That was written for a wider meta line; ours is a short name and a
		   date, which fit on one line at any phone width and cost a whole row
		   of vertical space when stacked. */
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		padding-left: 15px;
	}
	.woocommerce-account .iac-sup-thread .iac-sup-msg-out .iac-sup-msg-head {
		padding-left: 18px;
	}
}

/* 1.5.4 — the meta line is a caption, not a heading.
 *
 * Uppercase + .1em letterspacing + weight 800 is precisely the treatment this
 * account gives SECTION LABELS (CONVERSATION, ADD A REPLY, STATUS). That was
 * fine while the meta sat inside a tinted panel acting as an overline. Once
 * 1.5.3 moved it out onto white, every message started wearing a section
 * heading — two different levels of the hierarchy in identical clothes, and
 * the labels ended up louder than the words they label.
 *
 * Sentence case, normal weight, muted. The name carries a little weight so the
 * speaker is still scannable; the timestamp recedes further. The message body
 * is now unambiguously the darkest, largest thing in the thread, which is the
 * whole point. */
.woocommerce-account .iac-sup-thread .iac-sup-msg-head {
	margin: 0 0 4px;
	/* 19px = 1px border + 18px inner padding, so the name starts exactly where
	   the message text starts. Set in the shorthand deliberately: a separate
	   padding-left declared earlier in this file is what 1.5.8 got wrong. */
	padding: 0 2px 0 19px;
	font-size: 11.5px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	/* 1.5.5: measured, not eyeballed. 1.5.4 quietened these to #8b8482 and
	   #a8a19e — 3.67:1 and 2.54:1 against white, both under the 4.5:1 floor.
	   The timestamps were not subtle, they were unreadable. Quiet has to stop
	   at legible. */
	color: #756C6A;
}

.woocommerce-account .iac-sup-thread .iac-sup-msg-head strong {
	font-weight: 600;
	color: #5a5152;
}

.woocommerce-account .iac-sup-thread .iac-sup-msg-head .iac-sup-muted {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	font-size: 11.5px;
	color: #756C6A;
	margin-left: 8px;
}

.woocommerce-account .iac-sup-thread .iac-sup-msg-body {
	font-size: 14px;
	line-height: 1.6;
	color: #3F3839;
}

.woocommerce-account .iac-sup-thread .iac-sup-msg-body p:last-child {
	margin-bottom: 0;
}

.woocommerce-account .iac-sup-notice {
	border: 1px solid #E4DAD2;
	border-left-width: 2px;
	background: #FBF7F3;
	padding: 12px 14px;
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.55;
	color: #3F3839;
}

.woocommerce-account .iac-sup-notice.iac-sup-ok {
	border-left-color: #1a7f4b;
	background: #F0F8F2;
}

.woocommerce-account .iac-sup-notice.iac-sup-err {
	border-left-color: #E84E2A;
	background: #FDF6F3;
	color: #8a2c14;
}

@media (max-width: 767px) {
	.woocommerce-account .iac-sup-account .iac-sup-chips {
		gap: 6px;
	}
	.woocommerce-account .iac-sup-account .iac-sup-chip {
		padding: 7px 11px;
		font-size: 10px;
	}
}

/* 1.4.0 — customer actions sit inline with the back button. */
.woocommerce-account .iac-sup-actionform {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.woocommerce-account .iac-sup-actionform .iac-sup-hint {
	margin: 0;
}

/* 1.4.1 — the reference is the primary link on a row. */
.woocommerce-account .iac-sup-rowlink {
	color: #1A1A1A !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
}

.woocommerce-account .iac-sup-rowlink:hover,
.woocommerce-account .iac-sup-rowlink:focus {
	color: #E84E2A !important;
	border-bottom-color: #E84E2A;
}

/* 1.5.0 — Send reply and Close share one row. The submit button reaches its
   form through the HTML form= attribute, since forms cannot nest. */
.woocommerce-account .iac-sup-replyactions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.woocommerce-account .iac-sup-replyactions .iac-sup-actionform {
	display: inline-flex;
	margin: 0;
}

.woocommerce-account .iac-sup-replyactions .iac-sup-hint {
	margin: 0;
	flex: 1 1 auto;
}

@media (max-width: 767px) {
	.woocommerce-account .iac-sup-replyactions .iac-sup-hint {
		flex-basis: 100%;
	}
}

/* 1.5.3 — the box you type into becomes one of your own messages, so it wears
   their colour, not ours. Cream stays on the intake form, where there are no
   messages to match and the fill is what gives the fields an edge.
   Full width on purpose: the customer's messages are indented, but typing into
   a narrow right-shifted box is worse than the symmetry is worth. */
/* The principle from 1.5.3 is unchanged — the box you type into looks like
   your own messages — so it follows them to the lighter tone. */
.woocommerce-account .iac-sup-account-single .iac-sup-form textarea {
	background-color: #FDFBF9;
	border-radius: 6px;
	padding: 15px 18px;
	line-height: 1.65;
}

/* ============================================================
 * 3.0.0 — in-box submit confirmation (Contact Us)
 * ========================================================== */

/* Busy state for the standalone form box — the same treatment the account
 * panel gets, scoped to the wrap so it works with no panel on the page. */
.iac-sup-wrap.iac-sup-busy {
	opacity: .45;
	pointer-events: none;
	transition: opacity .12s ease;
}

.iac-sup-success-cta { margin-top: 18px; }

/* ============================================================
 * 3.2.1 — one select, everywhere (stakeholder screenshots 2026-08-14)
 * ========================================================== */

/* Measured on staging before writing this: the contact-page select was being
 * styled by the THEME, not by us — computed color #A89FA0 (washed-out
 * mauve-gray that read as disabled), 13px, radius 8px, theme arrow. Our base
 * .iac-sup-row rule (0,1,1) was losing that fight. The account panel then
 * overrode differently again, so the same control wore two outfits.
 *
 * This block is the single source of truth for the select in BOTH contexts:
 * the shortcode renders identical .iac-sup-wrap > .iac-sup-form > .iac-sup-row
 * markup on the contact page and inside My Account, so one (0,3,1) selector
 * out-ranks the theme AND the account-panel rule. Every property is stated —
 * whole rule, no !important patches — keeping the geometry the contact page
 * already had (radius 8, 13px, ~42px tall) with the ink at full strength. */
.iac-sup-wrap .iac-sup-form .iac-sup-row select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 11px 40px 11px 12px;
	border: 1px solid #c9ced6;
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237E656B' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	/* 3.2.3: the HOUSE recipe, lifted verbatim from the Storefront Suite's
	   number-bearing elements (.iac-row-number, .iac-cu-bracket-price,
	   .iac-dd-opt): Raleway declared explicitly — the native popup renders
	   options in the SELECT's own family, and an inherited family is exactly
	   what popups drop, which is why the open list fell back to a default
	   font with drifting digits — plus tabular lining numerals so every
	   order number, date and price sits in the same columns customers see
	   across the whole shop. */
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 500;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	color: #3F3839;
	box-shadow: none;
	cursor: pointer;
}

.iac-sup-wrap .iac-sup-form .iac-sup-row select::-ms-expand {
	display: none;
}

/* The open list: options in full ink, group headers ("Your orders") in the
 * quieter brand mauve so the hierarchy survives the color fix. */
.iac-sup-wrap .iac-sup-form .iac-sup-row select option {
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	color: #3F3839;
}
.iac-sup-wrap .iac-sup-form .iac-sup-row select optgroup {
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-weight: 600;
	color: #7E656B;
}

/* Focus stays ink, never the error orange. */
.iac-sup-wrap .iac-sup-form .iac-sup-row select:focus {
	outline: none;
	border-color: #3F3839;
	box-shadow: inset 0 0 0 1px #3F3839;
	background-color: #fff;
}

/* ============================================================
 * 3.3.0 — the house dropdown replaces the native popup
 * ========================================================== */

/* Native popups on Windows ignore numeral features, so the open list could
 * never show the aligned Raleway digits the shop uses — measured, not
 * guessed. This is the Storefront's .iac-dd component, namespaced and fed by
 * the real <select>, which stays in the form (hidden) and keeps owning the
 * submitted value. No JS = the native select shows instead.
 *
 * Every rule is prefixed .iac-sup-wrap and restates text-transform,
 * letter-spacing, margin and hover: the theme's BUTTON styling (uppercase,
 * stripped border, hover recolor) captured the first draft's trigger in live
 * testing — this exact block is the version verified pixel-by-pixel on
 * staging, 2026-08-14, closed and open. */

.iac-sup-wrap .iac-sup-dd { position: relative; }

.iac-sup-wrap .iac-sup-dd .iac-sup-dd-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	margin: 0;
	min-height: 44px;
	border: 1px solid #c9ced6;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: #3F3839;
	-webkit-text-fill-color: #3F3839;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-trigger:hover {
	background: #fff;
	color: #3F3839;
	-webkit-text-fill-color: #3F3839;
}
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-trigger:focus-visible {
	outline: none;
	border-color: #3F3839;
	box-shadow: inset 0 0 0 1px #3F3839;
}

.iac-sup-wrap .iac-sup-dd .iac-sup-dd-current {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.iac-sup-wrap .iac-sup-dd .iac-sup-dd-caret {
	flex: 0 0 auto;
	color: #7E656B;
	transition: transform 0.15s ease;
}
.iac-sup-wrap .iac-sup-dd.is-open .iac-sup-dd-caret { transform: rotate(180deg); }

.iac-sup-wrap .iac-sup-dd .iac-sup-dd-panel {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 50;
	margin: 6px 0 0;
	padding: 5px;
	list-style: none;
	background: #fff;
	border: 1px solid #E4DAD2;
	border-radius: 8px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
	max-height: 280px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #CDC6BF transparent;
	display: none;
}
.iac-sup-wrap .iac-sup-dd.is-open .iac-sup-dd-panel { display: block; }
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-panel::-webkit-scrollbar { width: 7px; }
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-panel::-webkit-scrollbar-track { background: transparent; margin: 5px 0; }
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-panel::-webkit-scrollbar-thumb { background: #D8D2CC; border-radius: 4px; }
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-panel::-webkit-scrollbar-thumb:hover { background: #B9B2AB; }

.iac-sup-wrap .iac-sup-dd .iac-sup-dd-group {
	padding: 8px 14px 4px;
	margin: 0;
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	color: #7E656B;
	list-style: none;
	cursor: default;
}

.iac-sup-wrap .iac-sup-dd .iac-sup-dd-opt {
	padding: 8px 14px;
	margin: 0;
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: #3F3839;
	-webkit-text-fill-color: #3F3839;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	cursor: pointer;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	list-style: none;
}
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-opt:hover,
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-opt.is-active { background: #FBF7F3; }
/* 3.4.1: mauve, matching the checkout's own dropdown selected state
 * (.iac-ccd-dd-opt.sel) — the red here was copied from the stale shop rule
 * the newer overrides had already stamped out. */
.iac-sup-wrap .iac-sup-dd .iac-sup-dd-opt.is-selected {
	background: #5a5152;
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-weight: 700;
}

/* The real select stays in the form and keeps the submitted value; it is
 * hidden, not removed, and display:none fields still serialize. */
.iac-sup-wrap .iac-sup-dd-native { display: none; }

/* ============================================================
 * 3.4.0 — the Support form becomes part of the store
 * ========================================================== */

/* Identity chip: the dashboard's circled initial, in front of the reply
 * address — a face instead of a system banner. */
.iac-sup-wrap .iac-sup-identity {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	background: #FBF7F3;
	border: 1px solid #E4DAD2;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13.5px;
	color: #3F3839;
}
.iac-sup-wrap .iac-sup-avatar {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #3F3839;
	color: #FBF7F3;
	-webkit-text-fill-color: #FBF7F3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0;
}
.iac-sup-wrap .iac-sup-identity-text { line-height: 1.5; }

/* The card + aside shell (account context). Below 900px the aside drops
 * under the card. */
.woocommerce-account .iac-sup-shell {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	margin: 6px 0 26px;
}
.woocommerce-account .iac-sup-card {
	flex: 1 1 auto;
	max-width: 760px;
	min-width: 0;
	background: #fff;
	border: 1px solid #E4DAD2;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(63, 56, 57, 0.06);
	padding: 30px 32px 26px;
	box-sizing: border-box;
}
.woocommerce-account .iac-sup-card .iac-sup-card-title {
	margin: 0 0 6px;
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: .01em;
	color: #3F3839;
	text-transform: none;
}
.woocommerce-account .iac-sup-card .iac-sup-card-sub {
	margin: 0 0 22px;
	font-size: 13.5px;
	color: #7E656B;
}

.woocommerce-account .iac-sup-aside {
	flex: 0 0 272px;
	background: #FBF7F3;
	border: 1px solid #E4DAD2;
	border-radius: 14px;
	padding: 24px 24px 20px;
	box-sizing: border-box;
}
.woocommerce-account .iac-sup-aside-title {
	margin: 0 0 14px;
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #5a5152;
}
.woocommerce-account .iac-sup-steps {
	list-style: none;
	counter-reset: iacsupstep;
	margin: 0;
	padding: 0;
}
.woocommerce-account .iac-sup-steps li {
	counter-increment: iacsupstep;
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 0 40px;
	font-size: 13px;
	line-height: 1.55;
	color: #5a5152;
	list-style: none;
}
.woocommerce-account .iac-sup-steps li strong { color: #3F3839; }
.woocommerce-account .iac-sup-steps li::before {
	content: counter(iacsupstep);
	position: absolute;
	left: 0;
	top: 1px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #F4EFEA;
	color: #5a5152;
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-weight: 900;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}

/* The send: the same confident red every customer knows from checkout —
 * restated whole in both scopes so neither the theme's button nor the
 * account's ghost styling can dilute it. */
.iac-sup-wrap .iac-sup-form .iac-sup-submit,
.woocommerce-account .iac-sup-account .iac-sup-form .iac-sup-submit {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	margin: 0;
	border: none;
	border-radius: 8px;
	background: #5a5152;
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-family: 'Raleway', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(90, 81, 82, 0.25);
	transition: filter .15s ease, transform .12s ease;
}
.iac-sup-wrap .iac-sup-form .iac-sup-submit:hover,
.woocommerce-account .iac-sup-account .iac-sup-form .iac-sup-submit:hover {
	background: #5a5152;
	filter: brightness(0.93);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.iac-sup-wrap .iac-sup-form .iac-sup-submit:active,
.woocommerce-account .iac-sup-account .iac-sup-form .iac-sup-submit:active {
	transform: scale(0.985);
}

.iac-sup-wrap .iac-sup-lockline {
	margin: 14px 0 0;
	text-align: center;
	font-size: 12.5px;
	color: #7E656B;
}

@media (max-width: 900px) {
	.woocommerce-account .iac-sup-shell { flex-direction: column; }
	.woocommerce-account .iac-sup-aside { flex: 1 1 auto; width: 100%; }
	.woocommerce-account .iac-sup-card { padding: 24px 20px 20px; }
}