/**
 * Image Italia configurator.
 *
 * Restrained on purpose: the brand is "royal, classy, timeless", which means
 * quiet neutrals, hairline rules and generous space rather than gloss. The cloth
 * is the only saturated colour on screen, so nothing competes with it.
 */

/**
 * Colours and type come from the theme's own variables, so the configurator
 * follows the brand rather than carrying a second one. The fallbacks are the
 * values the site is currently set to: Cinzel over Manrope, navy with gold.
 */
.iic-root,
.iic-shell,
.iic-measure,
.iic-designs {
	--iic-navy: var(--wd-primary-color, #0c1f4f);
	--iic-gold: var(--wd-alternative-color, #c9a15b);

	--iic-ink: #1a1c22;
	--iic-ink-soft: #454954;
	--iic-muted: #767a85;
	--iic-paper: #fbfbfc;
	--iic-surface: #fff;
	--iic-stage: #eceef2;
	--iic-rule: #e4e6eb;
	--iic-rule-firm: #c6cad3;
	--iic-select: var(--iic-navy);
	--iic-brass: var(--iic-gold);
	--iic-chrome: var(--iic-navy);

	--iic-display: var(--wd-title-font, "Cinzel", Georgia, "Times New Roman", serif);
	--iic-ui: var(--wd-text-font, "Manrope", system-ui, -apple-system, sans-serif);

}

.iic-root {
	color: var(--iic-ink);
	font-family: var(--iic-ui);
}

.iic-loading,
.iic-error {
	padding: 28px;
	color: var(--iic-muted);
	text-align: center;
	font-size: 14px;
}

.iic-error {
	color: #8e2f1b;
}

.iic-eyebrow,
.iic-filter-label,
.iic-card-from {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--iic-muted);
}

/* ================================================================ card ==== */

.iic-card {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 28px;
	align-items: center;
	padding: 26px;
	background: var(--iic-surface);
	border: 1px solid var(--iic-rule);
}

@media (max-width: 640px) {
	.iic-card {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.iic-card-preview {
	position: relative;
	aspect-ratio: var(--iic-ar, 1200 / 1560);
	background: var(--iic-stage);
}

.iic-card-title {
	margin: 0 0 6px;
	font-family: var(--iic-display);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.15;
}

.iic-card-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 20px;
}

.iic-card-price strong {
	font-size: 20px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.iic-cta {
	appearance: none;
	border: 1px solid var(--iic-navy);
	background: var(--iic-navy);
	color: #fff;
	font-family: var(--iic-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 15px 30px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.iic-cta:hover {
	background: transparent;
	color: var(--iic-navy);
}

/* ================================================================ tier ==== */

/**
 * Gold reads properly here because it sits on the navy, where it has the
 * contrast it lacks on white.
 */
.iic-tier-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 12px;
	background: var(--iic-navy, #0c1f4f);
	color: var(--iic-gold, #c9a15b);
	font-family: var(--iic-ui, inherit);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.iic-tier-delivery {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--iic-muted, #767a85);
	max-width: 44ch;
}

.iic-footer-delivery {
	margin: 0;
	padding: 0 26px 14px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--iic-muted, #767a85);
}

@media (max-width: 900px) {
	.iic-footer-delivery {
		padding: 0 14px 10px;
		font-size: 11px;
	}
}

/* The badge sits above the garment name on the designer page. */
.iic-designer-bar .iic-tier-badge {
	margin-bottom: 6px;
}

/* ================================================= configurable product ==== */

/**
 * A made-to-order garment cannot be bought straight from the product page, so
 * the theme's add-to-cart controls come off it. Page-builder themes render
 * these as their own widgets, which is why this is done in CSS rather than by
 * unhooking a template. The server refuses unconfigured orders regardless.
 */
.iic-configurable-product form.cart,
.iic-configurable-product .wd-single-add-to-cart,
.iic-configurable-product .wd-single-product-add-to-cart,
.iic-configurable-product .elementor-widget-wd_single_product_add_to_cart,
.iic-configurable-product .single_add_to_cart_button,
.iic-configurable-product .quantity {
	display: none !important;
}

/* ============================================================ designer ==== */

/**
 * The designer is a page, not a layer over one. Nothing is fixed to the
 * viewport and the document is never scroll-locked, so there is one scrollbar
 * and the theme's own header and footer behave normally.
 */
.iic-designer-page {
	font-family: var(--iic-ui, inherit);
}

.iic-designer-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 18px 24px;
	border-bottom: 1px solid #e4e6eb;
}

.iic-designer-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #767a85;
	text-decoration: none;
}

.iic-designer-back:hover {
	color: var(--wd-primary-color, #0c1f4f);
}

.iic-designer-title {
	margin: 0;
	font-family: var(--wd-title-font, "Cinzel", Georgia, serif);
	font-size: clamp(19px, 2.4vw, 26px);
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.02em;
}

.iic-designer-spacer {
	display: block;
}

@media (max-width: 720px) {
	.iic-designer-bar {
		grid-template-columns: 1fr;
		gap: 8px;
		text-align: center;
		padding: 14px 18px;
	}
	.iic-designer-spacer {
		display: none;
	}
	.iic-designer-back {
		justify-content: center;
	}
}

.iic-designer .iic-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	align-items: start;
}
/* Stacking below 900px is handled in the mobile section at the end. */

/* =============================================================== stage ==== */

/**
 * The garment stays in view while the options are scrolled through, clearing
 * whatever the theme has pinned above it. The offset is measured at runtime,
 * because a sticky header's height changes with scroll and with the admin bar.
 */
.iic-stage {
	position: sticky;
	top: var(--iic-chrome-top, 0px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 30px 24px;
	background: var(--iic-stage);
}

/*
 * Clipped, because zoom scales the garment inside it.
 *
 * Without this the magnified suit simply spilled out over everything below,
 * including the Zoom button itself, so the way back out was buried under the
 * cloth you were trying to escape. A zoom belongs inside its own frame.
 */
.iic-frame {
	position: relative;
	width: 100%;
	max-width: 420px;
	aspect-ratio: var(--iic-ar, 1200 / 1560);
	overflow: hidden;
}

.iic-viewport {
	position: absolute;
	inset: 0;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
	transform-origin: center 32%;
}

.iic-viewport.is-zoomed {
	transform: scale(1.9);
}

/**
 * The technique. Silhouette from the mask, surface from the repeating
 * background. Neither knows about the other, which is why cloths and shapes
 * add up instead of multiplying.
 */
.iic-layer {
	position: absolute;
	inset: 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	background-position: center;
}

.iic-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

/*
 * These carry their own ground rather than borrowing the stage's. A control
 * sitting near the garment has to stay readable whatever cloth is behind it,
 * and a customer who has zoomed into a dark worsted should not have to guess
 * where the button was.
 */
.iic-view,
.iic-zoom {
	appearance: none;
	border: 1px solid var(--iic-rule);
	background: var(--iic-surface);
	color: var(--iic-ink-soft);
	font: inherit;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 8px 16px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.iic-view:hover,
.iic-zoom:hover {
	border-color: var(--iic-rule-firm);
	color: var(--iic-ink);
}

/* Zoomed in is a state you are in, so the button says so and offers the exit. */
.iic-view[aria-pressed="true"],
.iic-zoom[aria-pressed="true"] {
	border-color: var(--iic-navy);
	background: var(--iic-navy);
	color: #fff;
}

/* =============================================================== panel ==== */

.iic-panel {
	display: flex;
	flex-direction: column;
	background: var(--iic-surface);
	border-left: 1px solid var(--iic-rule);
}

@media (max-width: 900px) {
	.iic-panel {
		border-left: 0;
		border-top: 1px solid var(--iic-rule);
	}
}

/* The page scrolls, not the panel. One scrollbar for the whole document. */
/*
 * The top padding matters now. The accordion opened directly under the panel
 * edge and looked deliberate; a step heading doing the same sits hard against
 * the rail above it with nothing to separate them.
 */
.iic-scroll {
	padding: 24px 26px 26px;
}

.iic-hint {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--iic-muted);
}

/* ---------------------------------------------------------------- rail --- */

/**
 * The sequence, across the top.
 *
 * Horizontally scrollable rather than wrapped: a suit with a dozen questions
 * would otherwise push the garment down the screen before anyone had chosen
 * anything. Steps ahead are disabled, because skipping the cloth and landing on
 * a lapel leaves the preview with nothing to paint.
 */
.iic-rail {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 10px 16px;
	background: var(--iic-surface);
	border-bottom: 1px solid var(--iic-rule);
}

.iic-rail::-webkit-scrollbar {
	display: none;
}

.iic-rail-step {
	appearance: none;
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--iic-muted);
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.iic-rail-step:hover:not(:disabled) {
	color: var(--iic-navy);
	background: rgba(12, 31, 79, 0.05);
}

.iic-rail-step.is-done {
	color: var(--iic-ink-soft);
}

.iic-rail-step.is-here {
	color: var(--iic-surface);
	background: var(--iic-navy);
	font-weight: 600;
}

/* ---------------------------------------------------------------- step --- */

.iic-step-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 0 0 18px;
}

.iic-step-title {
	margin: 0;
	font-family: var(--iic-display);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--iic-ink);
}

/**
 * Which cloth they picked, carried onto every style step.
 *
 * A style step hides the garment, so without this they would be choosing a
 * lapel with no reminder of what it is going on. Cheap to show, and it stops
 * the takeover feeling like the cloth decision was thrown away.
 */
.iic-cloth-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 4px;
	border: 1px solid var(--iic-rule);
	border-radius: 999px;
	font-size: 12px;
	color: var(--iic-ink-soft);
}

.iic-cloth-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--iic-stage);
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Cloth names run long. Truncate rather than let the chip push the title off. */
.iic-cloth-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 16ch;
}

.iic-step-head .iic-hint {
	flex: 1 0 100%;
	margin: 0;
}

.iic-step-body {
	padding: 0 0 24px;
}

/* --------------------------------------------------------------- picks --- */

/* ---------------------------------------------------- no garment on show --- */

/**
 * Styling and review have no preview beside them, so the panel takes the width.
 *
 * The garment is shown only where it is accurate. It can say which cloth each
 * piece is cut from and whether there is a waistcoat; it cannot say anything
 * about lapels, pockets or vents, because that artwork is not being made. Left
 * on screen during styling it would sit unchanged through every click and imply
 * a garment nobody is going to receive.
 *
 * The stage is hidden rather than removed, so the masks and cloth images it has
 * already fetched are not thrown away and downloaded again on the way back.
 */
.iic-designer.iic-full .iic-body {
	grid-template-columns: minmax(0, 1fr);
}

.iic-designer.iic-full .iic-stage {
	display: none;
}

.iic-designer.iic-full .iic-panel {
	border-left: 0;
}

/* Cards and a summary would stretch absurdly wide with nothing beside them. */
.iic-designer.iic-full .iic-scroll,
.iic-designer.iic-full .iic-nav,
.iic-designer.iic-full .iic-footer,
.iic-designer.iic-full .iic-footer-delivery,
.iic-designer.iic-full .iic-notice {
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
}

/* With the width to spare, the drawings get larger. */
.iic-designer.iic-full .iic-picks {
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

/* --------------------------------------------------------------- part --- */

/**
 * Which piece of the suit the questions below belong to.
 *
 * The styling step holds every question about the whole garment, and a flat
 * run of thirteen is harder to work through than four short ones. Louder than
 * a question heading, quieter than the step title.
 */
.iic-part-title {
	margin: 32px 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--iic-rule);
	font-family: var(--iic-display);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--iic-navy);
}

.iic-part-title:first-of-type {
	margin-top: 0;
}

/* ------------------------------------------------------------- sections --- */

/**
 * One question inside a part. A jacket panel holds its cloth and then eight or
 * nine of these, so the heading has to separate them without shouting: the
 * drawings are what the eye should land on.
 */
.iic-group + .iic-group {
	margin-top: 26px;
}

.iic-group-title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--iic-ink-soft);
}

.iic-group .iic-hint {
	margin: -4px 0 12px;
}

/**
 * The option cards.
 *
 * Three across the panel, which is what the drawings need to stay readable and
 * what keeps a nine question part from becoming a very long scroll. They sit
 * beside the garment now rather than taking the screen, so they are sized to
 * the panel rather than to the page.
 */
.iic-picks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px;
}

.iic-pick {
	appearance: none;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 10px;
	border: 1px solid var(--iic-rule);
	border-radius: 3px;
	background: var(--iic-surface);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.iic-pick:hover:not(:disabled) {
	border-color: var(--iic-rule-firm);
}

.iic-pick.is-picked {
	border-color: var(--iic-select);
	box-shadow: inset 0 0 0 1px var(--iic-select);
}

.iic-pick:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/*
 * The tick on the chosen card.
 *
 * A border alone is easy to miss across a grid of pale line drawings, and this
 * panel can show nine questions at once: the customer needs to see what they
 * have already answered while scanning past it.
 */
.iic-pick.is-picked::before {
	content: "";
	position: absolute;
	top: -7px;
	left: -7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--iic-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2.5 6.2 L5 8.6 L9.5 3.6%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
	background-size: 13px 13px;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 2px var(--iic-surface);
}

/*
 * Square, because the drawings are not all one shape: a jacket is portrait, a
 * pocket is landscape, a waistband is wider still. A 4:3 box letterboxed every
 * portrait drawing into a strip down the middle of a lot of empty paper. A
 * square is the one ratio that treats them all about equally.
 */
.iic-pick-art {
	display: block;
	aspect-ratio: 1;
	padding: 4px;
	background: var(--iic-paper);
	border-radius: 2px;
	overflow: hidden;
}

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

/*
 * No drawing for this option yet. The frame collapses rather than showing an
 * empty grey box, so the card reads as a deliberate text card instead of a
 * picture that failed to load. This is the normal state until the artwork
 * arrives, so it has to look intentional.
 */
.iic-pick-art.is-empty {
	display: none;
}

.iic-pick-caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Option names run long on a card this size, so they wrap rather than clip. */
.iic-pick .iic-option-label {
	font-size: 12px;
	line-height: 1.3;
	color: var(--iic-ink);
	overflow-wrap: anywhere;
}

.iic-pick.is-picked .iic-option-label {
	font-weight: 600;
	color: var(--iic-navy);
}

.iic-pick .iic-option-price {
	font-size: 11px;
	color: var(--iic-muted);
}

/* ----------------------------------------------------------------- nav --- */

.iic-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-top: 1px solid var(--iic-rule);
	background: var(--iic-surface);
}

.iic-nav-back,
.iic-nav-next {
	appearance: none;
	border: 1px solid var(--iic-rule-firm);
	background: var(--iic-surface);
	color: var(--iic-ink);
	font: inherit;
	font-size: 13px;
	padding: 10px 16px;
	border-radius: 2px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* The way forward is the primary action; back is available, not encouraged. */
.iic-nav-next {
	margin-left: auto;
	border-color: var(--iic-navy);
	background: var(--iic-navy);
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60%;
}

.iic-nav-back:disabled {
	opacity: 0.35;
	cursor: default;
}

.iic-nav-count {
	font-size: 12px;
	color: var(--iic-muted);
	font-variant-numeric: tabular-nums;
}

/* On the last step there is no Next, so the counter should not drift left. */
.iic-nav-count:last-child {
	margin-left: auto;
}

/* -------------------------------------------------------------- review --- */

/* A list of short rows should not run the full width of a desktop screen. */
.iic-review {
	max-width: 520px;
}

.iic-summary {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0;
	margin: 0;
}

.iic-summary-label,
.iic-summary-value {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--iic-rule);
	font-size: 13px;
}

.iic-summary-label {
	color: var(--iic-muted);
}

.iic-summary-value {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	color: var(--iic-ink);
	text-align: right;
}

.iic-summary-extra {
	color: var(--iic-muted);
	font-variant-numeric: tabular-nums;
}

.iic-review-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 16px 0 0;
}

.iic-review-total-label {
	font-family: var(--iic-display);
	font-size: 15px;
	color: var(--iic-ink);
}

.iic-review-total-value {
	font-family: var(--iic-display);
	font-size: 22px;
	color: var(--iic-navy);
	font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------- option thumb --- */

/*
 * Only reached when an option has no drawing of its own but does have a mask
 * on the garment. Rare now, and kept because it costs nothing and is better
 * than a line drawing when the artwork does exist: it renders in the cloth the
 * customer actually chose.
 */
.iic-thumb {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--iic-stage);
}

.iic-thumb-inner {
	position: absolute;
}

/* The thumbnail reuses the layer renderer, so the same rules apply inside it. */
.iic-thumb-inner .iic-layer {
	position: absolute;
	inset: 0;
}

/* --------------------------------------------------------- typed detail --- */

.iic-textfield {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 14px;
}

.iic-textfield-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--iic-ink-soft);
}

.iic-textfield input,
.iic-textfield textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--iic-rule-firm);
	background: var(--iic-surface);
	color: var(--iic-ink);
	font: inherit;
	font-size: 14px;
	letter-spacing: 0.08em;
	border-radius: 0;
}

/**
 * A placeholder has to look like a placeholder.
 *
 * Nothing styled these, so they inherited the input's near black text. On the
 * initials box, where the placeholder is "JHS" and the field is also uppercased
 * and letter spaced, an empty field was indistinguishable from a filled one.
 * People believed they had typed their initials, and only found out otherwise
 * when the order was refused.
 *
 * Muted and unspaced, so it reads as a suggestion rather than an answer. Every
 * input we render is covered, not just this one: the measurement form uses
 * placeholders too and had exactly the same problem.
 */
.iic-root input::placeholder,
.iic-root textarea::placeholder,
.iic-measure input::placeholder,
.iic-measure textarea::placeholder,
.iic-designs input::placeholder,
.iic-designs textarea::placeholder {
	color: var(--iic-muted, #767a85);
	opacity: 1;             /* Firefox dims placeholders again on top of colour. */
	letter-spacing: normal;
	text-transform: none;
	font-style: italic;
}

.iic-textfield textarea {
	min-height: 76px;
	resize: vertical;
	letter-spacing: normal;
}

.iic-textfield input:focus,
.iic-textfield textarea:focus {
	border-color: var(--iic-navy);
	outline: none;
	box-shadow: inset 0 0 0 1px var(--iic-navy);
}

.iic-textfield-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.iic-textfield-hint {
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--iic-muted);
}

.iic-textfield-count {
	margin-left: auto;
	flex: none;
	font-size: 11px;
	color: var(--iic-muted);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- option price --- */

.iic-option-price {
	font-size: 11px;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.iic-chip {
	appearance: none;
	border: 1px solid var(--iic-rule-firm);
	background: var(--iic-surface);
	color: var(--iic-muted);
	font: inherit;
	font-size: 11px;
	letter-spacing: 0.06em;
	padding: 8px 14px;
	margin: 0 0 14px;
	cursor: pointer;
}

.iic-chip[aria-pressed="true"] {
	border-color: var(--iic-select);
	color: var(--iic-select);
}

/* --------------------------------------------------------------- cloth --- */

.iic-filters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-bottom: 14px;
}

.iic-filter {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.iic-filter select {
	width: 100%;
	font: inherit;
	font-size: 12px;
	padding: 7px 8px;
	border: 1px solid var(--iic-rule-firm);
	background: var(--iic-surface);
	color: var(--iic-ink);
	border-radius: 0;
}

.iic-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
	gap: 8px;
	max-height: 300px;
	overflow-y: auto;
}

.iic-swatch {
	position: relative;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--iic-rule-firm);
	background-color: var(--iic-stage);
	background-size: cover;
	background-position: center;
	cursor: pointer;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.iic-swatch:hover {
	border-color: var(--iic-ink);
}

.iic-swatch[aria-pressed="true"] {
	border-color: var(--iic-select);
	box-shadow: 0 0 0 2px var(--iic-surface), 0 0 0 3px var(--iic-select);
}

.iic-swatch-tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 7px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px 9px;
	background: var(--iic-chrome);
	color: var(--iic-paper);
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 5;
}

.iic-swatch:hover .iic-swatch-tip,
.iic-swatch:focus-visible .iic-swatch-tip {
	opacity: 1;
}

.iic-swatch-price {
	color: var(--iic-brass);
	font-variant-numeric: tabular-nums;
}

.iic-count,
.iic-empty {
	margin: 12px 0 0;
	font-size: 11.5px;
	color: var(--iic-muted);
}

.iic-empty {
	margin: 0 0 12px;
}

/* -------------------------------------------------------------- footer --- */

/* Price and add-to-cart stay reachable, clearing any toolbar the theme fixes
   along the bottom of the screen. */
.iic-footer-wrap {
	position: sticky;
	bottom: var(--iic-chrome-bottom, 0px);
	border-top: 1px solid var(--iic-rule);
	background: var(--iic-surface);
	box-shadow: 0 -6px 18px rgba(12, 31, 79, 0.06);
}

/**
 * Price on the left, the two actions together on the right.
 *
 * Not space-between: with three loose children that pushed Save into the middle
 * of a wide bar, a long way from the button it belongs beside. The price is
 * pushed left and the actions group holds itself together at the other end.
 */
.iic-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	padding: 18px 26px;
}

.iic-footer-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.iic-notice {
	display: none;
	margin: 0;
	padding: 12px 26px;
	font-size: 12.5px;
	line-height: 1.5;
	background: #f4f2ed;
	color: var(--iic-ink-soft);
	border-bottom: 1px solid var(--iic-rule);
}

.iic-notice.is-shown {
	display: block;
}

.iic-notice.is-error {
	background: #fbf1ee;
	color: #8e2f1b;
}

.iic-cta.is-done {
	background: #1f5140;
	border-color: #1f5140;
	color: var(--iic-paper);
}

.iic-made-to-order {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
}

.iic-footer-price {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.iic-total-value {
	font-size: 25px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.iic-cta-add {
	flex: none;
}

/* =========================================================== measurements = */

.iic-measure {
	--iic-ink: #16171a;
	--iic-ink-soft: #3d3f44;
	--iic-muted: #6e6b66;
	--iic-surface: #fff;
	--iic-stage: #e9e7e2;
	--iic-rule: #e0ddd7;
	--iic-rule-firm: #c9c5bd;
	--iic-select: #1f2833;
	--iic-brass: #96794f;
	--iic-paper: #fafaf9;
	--iic-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

	max-width: 760px;
	color: var(--iic-ink);
}

.iic-measure-title {
	margin: 0 0 6px;
	font-family: var(--iic-display);
	font-size: 27px;
	font-weight: 400;
}

.iic-measure-intro {
	margin: 0 0 20px;
	max-width: 60ch;
	color: var(--iic-muted);
	line-height: 1.6;
}

.iic-measure-meter {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.iic-progress {
	flex: 1;
	height: 4px;
	background: var(--iic-stage);
	overflow: hidden;
}

.iic-progress-fill {
	height: 100%;
	background: var(--iic-brass);
	transition: width 0.3s ease;
}

.iic-progress-label {
	flex: none;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--iic-muted);
	font-variant-numeric: tabular-nums;
}

.iic-measure-units {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.iic-measure-name {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 26px;
	max-width: 340px;
}

.iic-measure-name input {
	padding: 10px 12px;
	border: 1px solid var(--iic-rule-firm);
	background: var(--iic-surface);
	color: var(--iic-ink);
	font: inherit;
	border-radius: 0;
}

.iic-measure-group {
	padding-top: 22px;
	border-top: 1px solid var(--iic-rule);
	margin-bottom: 22px;
}

.iic-measure-group-title {
	margin: 0 0 5px;
	font-family: var(--iic-display);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--iic-brass);
}

.iic-measure-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.iic-measure-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.iic-measure-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--iic-ink-soft);
}

.iic-measure-input {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--iic-rule-firm);
	background: var(--iic-surface);
}

.iic-measure-input input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 10px 12px;
	font: inherit;
	color: var(--iic-ink);
	font-variant-numeric: tabular-nums;
}

.iic-measure-unit {
	display: flex;
	align-items: center;
	padding: 0 11px;
	background: var(--iic-paper);
	border-left: 1px solid var(--iic-rule);
	font-size: 11px;
	color: var(--iic-muted);
	white-space: nowrap;
}

/* Feet and inches sit side by side as one control. */
.iic-measure-pair {
	display: flex;
	gap: 8px;
}

.iic-measure-pair .iic-measure-input {
	flex: 1;
	min-width: 0;
}

.iic-measure-field select {
	padding: 10px 12px;
	border: 1px solid var(--iic-rule-firm);
	background: var(--iic-surface);
	color: var(--iic-ink);
	font: inherit;
	border-radius: 0;
}

.iic-measure-hint {
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--iic-muted);
}

/* A value the workshop would refuse, said before the save rather than after. */
.iic-measure-outside {
	font-size: 11.5px;
	line-height: 1.45;
	color: #a3282f;
}

.iic-measure-field.is-outside .iic-measure-input input {
	border-color: #a3282f;
}

.iic-measure-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding-top: 20px;
	border-top: 1px solid var(--iic-rule);
}

/* ====================================================== the measure step == */

.iic-measures-page {
	font-family: var(--wd-text-font, "Manrope", system-ui, sans-serif);
}

.iic-measures-empty {
	max-width: 520px;
	margin: 60px auto;
	padding: 0 20px;
	text-align: center;
	color: #767a85;
}

.iic-measures-empty p {
	margin: 0 0 20px;
}

/* --------------------------------------------------------------- steps --- */

.iic-steps {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 22px 16px 0;
	list-style: none;
	counter-reset: none;
}

.iic-step {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 18px;
	color: var(--iic-muted, #767a85);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.iic-step + .iic-step {
	border-left: 1px solid var(--iic-rule, #e4e6eb);
}

.iic-step-n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 11px;
	letter-spacing: 0;
}

.iic-step.is-current {
	color: var(--iic-navy, #0c1f4f);
	font-weight: 600;
}

.iic-step.is-current .iic-step-n {
	background: var(--iic-navy, #0c1f4f);
	border-color: var(--iic-navy, #0c1f4f);
	color: #fff;
}

.iic-step.is-done {
	color: var(--iic-gold, #96794f);
}

@media (max-width: 720px) {
	.iic-step-label {
		display: none;
	}
	.iic-step {
		padding: 0 14px;
	}
}

/* ------------------------------------------------------------- the body --- */

.iic-measures-body {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	max-width: 1040px;
	margin: 0 auto;
	padding: 30px 24px 60px;
}

@media (max-width: 860px) {
	.iic-measures-body {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 20px 16px 40px;
	}
}

.iic-measures-figure {
	position: sticky;
	top: var(--iic-chrome-top, 20px);
	color: var(--iic-navy, #0c1f4f);
}

@media (max-width: 860px) {
	.iic-measures-figure {
		position: static;
		display: grid;
		grid-template-columns: 130px 1fr;
		gap: 18px;
		align-items: center;
	}
}

.iic-figure-svg {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: 0 auto;
}

.iic-figure-body {
	stroke: var(--iic-rule-firm, #c6cad3);
}

.iic-figure-line [data-iic-point] {
	stroke: var(--iic-navy, #0c1f4f);
	opacity: 0.4;
	transition: opacity 0.15s ease, stroke-width 0.15s ease;
}

.iic-figure-line [data-iic-point].is-lit {
	opacity: 1;
	stroke-width: 2.2;
}

.iic-figure-marks circle {
	fill: var(--iic-surface, #fff);
	stroke: var(--iic-navy, #0c1f4f);
	stroke-width: 1.2;
	transition: fill 0.15s ease;
}

.iic-figure-marks text {
	fill: var(--iic-navy, #0c1f4f);
	font-size: 11px;
	font-weight: 600;
	text-anchor: middle;
	font-family: var(--iic-ui, inherit);
	transition: fill 0.15s ease;
}

.iic-figure-marks [data-iic-point] {
	cursor: default;
}

.iic-figure-marks [data-iic-point].is-lit circle {
	fill: var(--iic-navy, #0c1f4f);
}

.iic-figure-marks [data-iic-point].is-lit text {
	fill: #fff;
}

/* ------------------------------------------------------------ the key --- */

.iic-figure-key {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: iic-point;
}

.iic-figure-item {
	position: relative;
	counter-increment: iic-point;
	padding: 8px 8px 8px 30px;
	font-size: 12px;
	line-height: 1.45;
	border-radius: 2px;
	transition: background-color 0.15s ease;
}

.iic-figure-item::before {
	content: counter(iic-point);
	position: absolute;
	left: 0;
	top: 8px;
	width: 19px;
	height: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--iic-navy, #0c1f4f);
	border-radius: 50%;
	font-size: 10px;
	font-weight: 600;
	color: var(--iic-navy, #0c1f4f);
}

.iic-figure-item.is-lit {
	background: rgba(12, 31, 79, 0.05);
}

.iic-figure-item.is-lit::before {
	background: var(--iic-navy, #0c1f4f);
	color: #fff;
}

.iic-figure-name {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--iic-ink, #1a1c22);
}

.iic-figure-hint {
	display: block;
	color: var(--iic-muted, #767a85);
}

/* And the field itself, when its line is pointed at. */
.iic-measure-field.is-lit .iic-measure-input {
	border-color: var(--iic-navy, #0c1f4f);
	box-shadow: inset 0 0 0 1px var(--iic-navy, #0c1f4f);
}

.iic-measure-field.is-lit .iic-measure-label {
	color: var(--iic-navy, #0c1f4f);
}

.iic-measures-panel {
	min-width: 0;
}

.iic-measure-warning {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: #fbf3e6;
	border-left: 3px solid var(--iic-gold, #96794f);
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b5320;
}

/**
 * A row mixing a chip with a call to action. They have different padding and
 * the theme capitalises anything it is not told about, so both are pinned to
 * the same height and the same casing here.
 */
.iic-measure-actions-row {
	flex-direction: row;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
}

.iic-measure-actions-row > .iic-chip,
.iic-measure-actions-row > .iic-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	padding: 0 22px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-sizing: border-box;
}

@media (max-width: 480px) {
	.iic-measure-actions-row {
		flex-direction: column;
		align-items: stretch;
	}
}

.iic-saved-profiles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

/* ------------------------------------------------------- the confirmation - */

.iic-profile-basis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--iic-rule, #e4e6eb);
	margin-bottom: 18px;
}

.iic-profile-bits {
	font-size: 14px;
	color: var(--iic-ink, #1a1c22);
	font-variant-numeric: tabular-nums;
}

.iic-profile-basis .iic-chip {
	margin: 0;
}

.iic-profile-list {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr;
	gap: 6px 16px;
	margin: 0 0 18px;
	font-size: 13.5px;
}

@media (max-width: 640px) {
	.iic-profile-list {
		grid-template-columns: auto 1fr;
	}
}

.iic-profile-list dt {
	color: var(--iic-muted, #767a85);
	white-space: nowrap;
}

.iic-profile-list dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- cart and gate - */

/**
 * These sit inside the theme's cart table, which runs everything together on
 * one line. They need to be blocks with their own space or the product name,
 * the made-to-order tag and both actions read as a single run-on sentence.
 */
.iic-made-to-order {
	display: block;
	margin: 4px 0 0;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--iic-gold, #96794f);
}

.iic-line-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/**
 * Quiet pills rather than outlined boxes. These are secondary actions sitting
 * beside a product name and a price, so an outline that competes with both is
 * the wrong weight for them.
 *
 * The selector is deliberately compound. Themes style cart links heavily, and
 * a single class loses to them, which is why the text was still coming out in
 * sentence case with a grey border.
 */
.iic-line-actions a.iic-line-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 34px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(12, 31, 79, 0.06);
	box-shadow: none;
	font-family: var(--iic-ui, inherit);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--iic-navy, #0c1f4f);
	white-space: nowrap;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.iic-line-actions a.iic-line-action:hover,
.iic-line-actions a.iic-line-action:focus {
	background: var(--iic-navy, #0c1f4f);
	color: #fff;
	text-decoration: none;
}

/**
 * Masked icons, so they inherit the text colour and cannot be mangled on the
 * way through the theme the way inline SVG attributes were.
 */
.iic-line-actions .iic-ico {
	width: 14px;
	height: 14px;
	flex: none;
	display: block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * The images sit in the rule rather than behind a custom property. These
 * actions render inside the theme's cart table, which is nowhere near the
 * elements our variables are declared on, so a var() here resolves to nothing
 * and the icon becomes a solid coloured square.
 */
.iic-line-actions .iic-ico-edit {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.6a1.9 1.9 0 0 1 2.7 2.7l-8.5 8.5-3.6.9.9-3.6z'/%3E%3Cpath d='M12.1 3.9l4 4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.6a1.9 1.9 0 0 1 2.7 2.7l-8.5 8.5-3.6.9.9-3.6z'/%3E%3Cpath d='M12.1 3.9l4 4'/%3E%3C/svg%3E");
}

.iic-line-actions .iic-ico-size {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='3.6' r='2.1' fill='%23000' stroke='none'/%3E%3Cpath d='M10 6.4v5.6M5.8 8.6h8.4M7.6 17.4l1.7-5.4M12.4 17.4l-1.7-5.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='3.6' r='2.1' fill='%23000' stroke='none'/%3E%3Cpath d='M10 6.4v5.6M5.8 8.6h8.4M7.6 17.4l1.7-5.4M12.4 17.4l-1.7-5.4'/%3E%3C/svg%3E");
}

/* If masking is unavailable the square would be worse than nothing. */
@supports not ((mask-image: url("#x")) or (-webkit-mask-image: url("#x"))) {
	.iic-line-actions .iic-ico {
		display: none;
	}
}

@media (max-width: 560px) {
	.iic-line-actions a.iic-line-action {
		flex: 1 1 auto;
		min-height: 40px;
	}
}

.iic-measure-why {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--iic-muted, #767a85);
}

.iic-profile-row .iic-profile-name {
	font-weight: 600;
}

.iic-profile-row .iic-profile-bits {
	font-size: 12.5px;
	color: var(--iic-muted, #767a85);
}

/* ========================================================== saved designs = */

.iic-designs {
	--iic-ink: #16171a;
	--iic-muted: #6e6b66;
	--iic-surface: #fff;
	--iic-rule: #e0ddd7;
	--iic-rule-firm: #c9c5bd;
	--iic-brass: #96794f;
	--iic-select: #1f2833;
	--iic-paper: #fafaf9;
	--iic-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

	color: var(--iic-ink);
}

.iic-designs-empty {
	padding: 26px;
	background: var(--iic-paper);
	border: 1px solid var(--iic-rule);
	color: var(--iic-muted);
	text-align: center;
}

.iic-designs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.iic-design-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--iic-surface);
	border: 1px solid var(--iic-rule);
}

.iic-design-card.is-stale {
	border-color: #d9c3bb;
	background: #fdf8f6;
}

.iic-design-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.iic-design-name {
	margin: 0;
	font-family: var(--iic-display);
	font-size: 19px;
	font-weight: 400;
}

.iic-design-price {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.iic-design-spec {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3px 12px;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
}

.iic-design-spec dt {
	color: var(--iic-muted);
	white-space: nowrap;
}

.iic-design-spec dd {
	margin: 0;
	text-align: right;
}

.iic-design-date {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--iic-muted);
}

.iic-design-stale,
.iic-design-error {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #8e2f1b;
}

/**
 * One row mixes an anchor with two buttons. Left alone they sit at different
 * heights, because an anchor and a button do not share a default line box.
 * Fixing the height and centring the contents makes them line up whatever the
 * theme does to its own typography.
 */
.iic-design-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: stretch;
	margin-top: auto;
	padding-top: 6px;
}

.iic-design-actions > .iic-cta,
.iic-design-actions > .iic-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin: 0;
	padding: 0 16px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
}

.iic-cta-small {
	text-decoration: none;
}

.iic-chip-danger:hover {
	border-color: #8e2f1b;
	color: #8e2f1b;
}

.iic-save {
	margin: 0;
}

/* --------------------------------------------------------------- focus --- */

.iic-root button:focus-visible,
.iic-root select:focus-visible,
.iic-shell button:focus-visible,
.iic-shell select:focus-visible {
	outline: 2px solid var(--iic-brass);
	outline-offset: 2px;
}

/* ============================================================== mobile ==== */

/**
 * On a phone the two columns stack, which would put a 500px tall garment above
 * the options and then scroll it out of sight the moment anyone started
 * choosing. Instead the preview shrinks to a strip that stays pinned to the top
 * while the options scroll underneath it, and the price stays pinned to the
 * bottom. The customer can always see what they are changing and what it costs.
 */
@media (max-width: 900px) {
	.iic-designer .iic-body {
		grid-template-columns: 1fr;
	}

	.iic-stage {
		z-index: 3;
		gap: 6px;
		padding: 10px 16px;
		border-bottom: 1px solid var(--iic-rule);
	}

	.iic-frame {
		/*
		 * Height led rather than width led, so the garment cannot dominate the
		 * screen. The available height is what is left once the theme's header,
		 * its bottom toolbar and our own price bar have taken their share.
		 */
		width: auto;
		max-width: 100%;
		height: calc(
			(100vh - var(--iic-chrome-top, 0px) - var(--iic-chrome-bottom, 0px) - 74px) * 0.42
		);
		max-height: 280px;
		min-height: 150px;
	}

	.iic-tools {
		gap: 4px;
	}

	.iic-view,
	.iic-zoom {
		padding: 6px 12px;
	}

	.iic-scroll {
		padding: 18px 16px 20px;
	}

	/* The rail and the nav are edge to edge, so they set their own inset. */
	.iic-rail {
		padding: 8px 12px;
	}

	.iic-nav {
		padding: 10px 14px;
		gap: 10px;
	}

	.iic-nav-next {
		max-width: 52%;
	}

	.iic-step-title {
		font-size: 18px;
	}

	/* A wide summary row on a narrow screen needs the label to give way. */
	.iic-summary {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.iic-summary-label,
	.iic-summary-value {
		font-size: 12.5px;
	}

	/* A nested scroll box inside a scrolling page is miserable on touch. */
	.iic-swatches {
		max-height: none;
		overflow-y: visible;
		grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	}

	.iic-picks {
		grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	}

	.iic-filters {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	/**
	 * One compact row rather than a stack. On a phone this bar is permanently
	 * on screen, so every pixel it takes is a pixel of options the customer
	 * cannot see. Label and figure sit on one line, Save shrinks to a chip, and
	 * Add to Cart takes whatever is left.
	 */
	.iic-footer {
		padding: 9px 14px;
		gap: 10px;
		align-items: center;
		flex-wrap: nowrap;
	}

	.iic-footer-actions {
		gap: 8px;
		flex: 1 1 auto;
		justify-content: flex-end;
		min-width: 0;
	}

	.iic-footer-price {
		flex-direction: row;
		align-items: baseline;
		gap: 7px;
		min-width: 0;
	}

	.iic-footer-price .iic-eyebrow {
		font-size: 9px;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}

	.iic-total-value {
		font-size: 19px;
	}

	.iic-save {
		flex: none;
		margin: 0;
		padding: 10px 12px;
		font-size: 10.5px;
	}

	.iic-cta {
		padding: 13px 18px;
		letter-spacing: 0.1em;
	}

	.iic-notice {
		padding: 9px 14px;
		font-size: 12px;
	}

	/* Comfortable targets for a thumb. */
	.iic-chip,
	.iic-rail-step {
		min-height: 42px;
	}
}

@media (max-width: 420px) {
	.iic-picks {
		grid-template-columns: 1fr 1fr;
	}

	.iic-nav {
		padding: 9px 12px;
	}

	.iic-nav-back,
	.iic-nav-next {
		padding: 9px 12px;
		font-size: 12px;
	}

	/* The counter is the first thing that can go when space runs out. */
	.iic-nav-count {
		display: none;
	}

	.iic-cloth-name {
		max-width: 11ch;
	}

	/* Stays a single row even here; stacking it costs too much height. */
	.iic-footer {
		padding: 8px 12px;
		gap: 8px;
	}

	/*
	 * Everything in this bar has to give way, or Add to Cart runs off the side
	 * of the screen. The label goes first: "$1,450" sitting above Add to Cart
	 * needs no caption to explain what it is, and the price is the one thing
	 * here nobody misreads.
	 */
	.iic-footer-price .iic-eyebrow {
		display: none;
	}

	.iic-footer-price,
	.iic-footer-actions {
		min-width: 0;
	}

	.iic-cta-add {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.iic-total-value {
		font-size: 17px;
	}

	.iic-save {
		padding: 10px;
	}

	.iic-cta-add {
		flex: 1;
		padding: 13px 12px;
		font-size: 11px;
	}
}

/* Landscape phones have almost no height to give the preview. */
@media (max-width: 900px) and (max-height: 520px) {
	.iic-frame {
		height: calc(
			(100vh - var(--iic-chrome-top, 0px) - var(--iic-chrome-bottom, 0px) - 60px) * 0.52
		);
		min-height: 110px;
	}

	.iic-stage {
		padding: 6px 14px;
	}
}

/**
 * On a phone the suit sits above the choices, so a step heading scrolled to the
 * top of the panel would land underneath it. Reserving that space keeps the
 * heading in view.
 */
@media (max-width: 900px) {
	.iic-step-head {
		scroll-margin-top: calc(var(--iic-chrome-top, 0px) + 46vh);
	}
}

/* ================================================ small screens, tidied == */

/**
 * Nothing here should ever make the page scroll sideways. Long cloth names and
 * codes are the usual culprit, so they are allowed to break rather than push.
 */
.iic-root,
.iic-measures-page,
.iic-designer-page,
.iic-measure,
.iic-designs {
	max-width: 100%;
	overflow-wrap: break-word;
}

@media (max-width: 560px) {
	/* Figure above its key, rather than squeezed beside it. */
	.iic-measures-figure {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.iic-figure-svg {
		max-width: 180px;
	}

	.iic-measures-body {
		padding: 16px 14px 36px;
	}

	.iic-measure-title {
		font-size: 22px;
	}

	/* Two per row keeps the numbers readable without endless scrolling. */
	.iic-measure-grid {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 12px;
	}

	.iic-measure-name,
	.iic-measure-name input {
		max-width: none;
	}

	/* A 280px card does not fit a 320px screen once padding is counted. */
	.iic-designs-grid {
		grid-template-columns: 1fr;
	}

	.iic-design-spec {
		grid-template-columns: 1fr;
		gap: 1px;
	}

	.iic-design-spec dd {
		text-align: left;
		margin-bottom: 6px;
		color: var(--iic-ink, #1a1c22);
	}

	.iic-designer-bar {
		padding: 12px 14px;
	}
}

/* Comfortable targets everywhere a finger has to land. */
@media (pointer: coarse) {
	.iic-chip,
	.iic-line-action,
	.iic-view,
	.iic-zoom,
	.iic-swatch-button {
		min-height: 44px;
	}

	.iic-swatch,
	.iic-pick {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iic-root *,
	.iic-shell * {
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------- placement notice --- */

/**
 * Shown only to shop managers, only when the configurator could not place
 * itself. Deliberately plain and unmissable: it is a message to whoever
 * maintains the shop, not part of the shop.
 */
.iic-placement-notice {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99999;
	max-width: 340px;
	padding: 14px 16px;
	background: #fbf1ee;
	border: 1px solid #d9a99c;
	border-radius: 3px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #6b2317;
}

.iic-placement-notice p {
	margin: 8px 0 0;
}

.iic-placement-notice code {
	display: inline-block;
	padding: 3px 6px;
	background: #fff;
	border: 1px solid #e0c8c1;
	font-size: 12px;
}

.iic-placement-who {
	opacity: 0.75;
	font-size: 11.5px;
}