/**
 * STAGGS "2 - TEJIDO Y COLOR" step UX — Estor enrollable Screen pilot
 * (project-docs/10-estores-enrollables-screen-pilot.md). Presentation for
 * the comparison table + the ONE reusable inline fabric detail panel
 * assets/js/staggs-tejido-bridge.js moves directly into STAGGS' own
 * "Tipo de tejido" cards grid, right after the visual row containing the
 * selected card (never a separate fixed panel above/beside the grid —
 * see that file's own docblock for why). Design tokens only (no magic
 * colors) — Cormorant Garamond for headings, Montserrat everywhere else,
 * matching project-docs/02-design-system.md.
 */

/* ------------------------------------------------------------------ *
 * Comparison table
 * ------------------------------------------------------------------ */

.ed-tejido-compare {
	margin-bottom: var(--ed-space-lg);
}

/*
 * Collapsed by default (assets/js/staggs-tejido-bridge.js starts
 * `.ed-tejido-compare__panel` with `hidden`) — a real `<button>` with
 * `aria-expanded`, not a link/div, so it's keyboard-operable and its state
 * is announced without any extra ARIA wiring beyond the attribute itself.
 */
.ed-tejido-compare__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	background: none;
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	padding: var(--ed-space-2xs) var(--ed-space-sm);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-heading);
	cursor: pointer;
	transition: color var(--ed-transition-fast), border-color var(--ed-transition-fast);
}

.ed-tejido-compare__toggle:hover {
	color: var(--ed-color-primary);
	border-color: var(--ed-color-primary);
}

.ed-tejido-compare__toggle:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-tejido-compare__chevron {
	width: 14px;
	height: 14px;
	transition: transform var(--ed-transition-fast);
}

.ed-tejido-compare.is-open .ed-tejido-compare__chevron {
	transform: rotate(180deg);
}

/*
 * Animated `max-height` (assets/js/staggs-tejido-bridge.js measures the
 * real content height each time, never a guessed fixed cap) — `overflow:
 * hidden` here is what makes a `0px` cap genuinely show nothing, and lets
 * the eventual real height show the table without clipping it once open.
 */
.ed-tejido-compare__panel {
	overflow: hidden;
	overflow-x: auto;
	max-height: 0;
	transition: max-height var(--ed-transition-base);
}

.ed-tejido-compare__panel-inner {
	padding-top: var(--ed-space-sm);
}

.ed-tejido-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
}

.ed-tejido-compare__caption {
	margin-bottom: var(--ed-space-xs);
	text-align: left;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-button);
	text-transform: uppercase;
	color: var(--ed-color-muted);
}

.ed-tejido-compare__table th,
.ed-tejido-compare__table td {
	padding: var(--ed-space-xs) var(--ed-space-sm);
	text-align: left;
	border-bottom: 1px solid var(--ed-color-border);
	white-space: nowrap;
}

.ed-tejido-compare__table thead th {
	font-weight: 600;
	color: var(--ed-color-heading);
	border-bottom: 2px solid var(--ed-color-border);
}

.ed-tejido-compare__table tbody tr:hover {
	background-color: var(--ed-color-surface-alt);
}

.ed-tejido-compare__name {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.ed-tejido-compare__name:hover {
	color: var(--ed-color-link-hover);
}

.ed-tejido-compare__name:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Fabric detail — inline, moved by assets/js/staggs-tejido-bridge.js to
 * sit directly after the visual grid row containing the selected card.
 * `grid-column: 1 / -1` is what makes a normal CSS Grid auto-placement
 * push every later card down to a fresh row purely from ordinary
 * document/grid flow — never `position: absolute`/`fixed` (see that
 * file's own docblock). A restrained card-like surface (background,
 * border, radius) visually separates it from the plain cards above/below
 * it without competing with them for attention.
 * ------------------------------------------------------------------ */

.ed-tejido-detail--inline {
	grid-column: 1 / -1;
	position: relative;
	/*
	 * Closes the seam between THIS panel and the fabric-card row above it: scoped to
	 * this one element's own margin, never the grid's `gap` (staggs-bridge.css keeps
	 * STAGGS' normal row-gap for ordinary card-to-card spacing). `--ed-tejido-row-gap`
	 * is the grid's real, currently computed row-gap (assets/js/staggs-tejido-bridge.js's
	 * positionActiveContour(), read fresh every time the detail is placed), so the
	 * cancelling margin is right at any breakpoint.
	 */
	margin-top: calc( -1 * var( --ed-tejido-row-gap, 10px ) );
	padding: var(--ed-space-md);
	/* Same near-white neutral as the selected card above it (see below), so the card
	 * and the panel read as one surface, not as a tinted card stuck on a grey box. */
	background-color: var(--ed-color-surface-alt);
	/*
	 * ONE ordinary box: a full thin turquoise border and the standard radius on all
	 * four corners. The selected card sits over the panel's top border (its own
	 * box-shadow paints 1px of panel colour across the width between its two side
	 * borders, see below), which is what opens the "tab" — no separate segments or
	 * connector lines. The top corner on the side where the selected card is the
	 * first / last in its row is squared (data-edge, set by positionActiveContour()),
	 * because there the card's own straight side continues into the panel's side.
	 */
	border: 1px solid var(--ed-color-primary);
	/* 12px = the radius of STAGGS' own fabric cards (measured), so the panel's corners and
	 * the selected card's top corners are the same curve. */
	border-radius: 12px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--ed-transition-fast), transform var(--ed-transition-fast);
}

.ed-tejido-detail--inline[data-edge~='first'] {
	border-top-left-radius: 0;
}

.ed-tejido-detail--inline[data-edge~='last'] {
	border-top-right-radius: 0;
}

/*
 * The selected "Tipo de tejido" card is the active tab of the panel below it:
 *  - near-white surface (the panel's own colour), NOT a turquoise tint;
 *  - thin turquoise border on top and both sides (the check mark stays);
 *  - NO bottom border (transparent) and square bottom corners, so it opens into the
 *    panel. The shadow list does two things: the first entry paints 1px of the panel
 *    colour across the width BETWEEN the card's side borders, over the panel's top
 *    border (spread -1 keeps the side borders themselves untouched, so each one
 *    still meets the panel's top line at a clean corner); the second is a very soft
 *    lift on the top and sides only (offset up, negative spread), never below;
 *  - above the panel in paint order (z-index), or the panel would paint over it.
 * The inset ring the shared selected-state recipe draws (staggs-bridge.css) is what
 * used to put a turquoise line under this card, and is switched off here.
 */
#option-group-2817 .option-group-options.cards label:has(input:checked) {
	position: relative;
	z-index: 2;
	/* STAGGS clips the label (overflow: hidden), which would also clip the two shadows
	 * below (they paint outside the card's box). The card's own content stays clipped
	 * to its rounded shape by .option. */
	overflow: visible;
}

#option-group-2817 .option-group-options.cards label:has(input:checked) .option {
	background-color: var(--ed-color-surface-alt);
	border-color: var(--ed-color-primary) !important;
	/* No bottom border at all (not a transparent one: a transparent bottom border still
	 * meets the side borders in a diagonal miter that leaves a small triangle at each
	 * bottom corner). */
	border-bottom-width: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow:
		0 2px 0 -1px var(--ed-color-surface-alt),
		0 -2px 6px -3px rgb(16 19 20 / 0.2);
}

.ed-tejido-detail--inline.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ed-tejido-detail--inline {
		transition: none;
		transform: none;
	}
}

.ed-tejido-detail {
	margin-bottom: var(--ed-space-lg);
}

.ed-tejido-detail__header {
	margin-bottom: var(--ed-space-sm);
}

/*
 * Small context label ahead of the fabric name — "which step am I in"
 * confirmed in plain words, not just inferred from the card+panel visual
 * connection (item 1 of this pass). Never repeats the fabric name itself
 * — that stays the ONE heading right below.
 */
.ed-tejido-detail__eyebrow {
	margin: 0 0 var(--ed-space-4xs, 2px);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ed-color-muted);
}

.ed-tejido-detail__name {
	margin: 0 0 var(--ed-space-3xs);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
	font-weight: 600;
	color: var(--ed-color-heading);
}

.ed-tejido-detail__desc {
	margin: 0 0 var(--ed-space-sm);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	color: var(--ed-color-text);
}

.ed-tejido-detail__desc--temp {
	font-style: italic;
	color: var(--ed-color-muted);
}

/*
 * Compact 4-column summary on desktop (item 6 of this pass) — same
 * label/value order as before, just tighter gap/padding so the four facts
 * read as one quick scan instead of a tall stacked block. Still real
 * Montserrat UI text (no shrinking below `--ed-font-size-xs`/`-sm`,
 * per item 7 — "not tiny").
 */
.ed-tejido-detail__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--ed-space-2xs) var(--ed-space-sm);
	margin: 0;
	padding: var(--ed-space-2xs) var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
}

.ed-tejido-detail__meta dt {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ed-color-muted);
}

.ed-tejido-detail__meta dd {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-heading);
}

/* ------------------------------------------------------------------ *
 * "Fotos del tejido" / "Características técnicas" — two actions, never
 * heavy content inline. Fotos opens the shared photo lightbox (a real
 * [data-lightbox-trigger], see assets/js/staggs-tejido-bridge.js and
 * assets/js/lightbox.js); Características técnicas opens
 * `.ed-tejido-modal` below. Neither ever renders its content in the
 * page's own document flow.
 * ------------------------------------------------------------------ */

.ed-tejido-detail__actions {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-2xs);
	margin-top: var(--ed-space-md);
}

@media (min-width: 900px) {
	.ed-tejido-detail__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/*
 * Both previously read as quiet text pills (thin 1px neutral-gray border,
 * heading-dark text, pill radius) — confirmed live on a real device as
 * "just another line of text," not obviously tappable. Now a real
 * secondary-button treatment: white surface, a clearly visible
 * `--ed-color-link` (not raw `--ed-color-primary`, which measures only
 * ~2.49:1 on white — fails WCAG 2.2 AA's 3:1 non-text minimum for a
 * border/icon) border+text/icon, and a rectangular `--ed-radius-md` box
 * instead of a capsule, so both read as one deliberate action row rather
 * than informational chips. Full-width and stacked on mobile (this
 * component's own content width, never 100vw) so each is an obvious
 * full-row tap target; side by side from 900px up, matching this
 * product's other mobile/desktop split (staggs-medidas.css).
 */
.ed-tejido-detail__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ed-space-2xs);
	width: 100%;
	min-height: 44px;
	background-color: var(--ed-color-surface);
	border: 1.5px solid var(--ed-color-link);
	border-radius: var(--ed-radius-md);
	padding: var(--ed-space-2xs) var(--ed-space-md);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-link);
	cursor: pointer;
	transition: background-color var(--ed-transition-fast), border-color var(--ed-transition-fast), color var(--ed-transition-fast);
}

@media (min-width: 900px) {
	.ed-tejido-detail__action {
		width: auto;
	}
}

/* Fotos del tejido / Características técnicas: identical height, border,
 * radius, typography and icon size — two equal secondary actions, never
 * one reading as primary (item 9 of this pass). Icon inherits `color`
 * via `currentColor` (its own `stroke`) — no separate color rule needed. */
.ed-tejido-detail__action-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/*
 * Real mouse hover only — see staggs-bridge.css's `.ed-color-sample-btn`
 * fix for why an unguarded `:hover` rule is wrong here too: Android
 * Chrome has no mouse to "leave" the button on touch-release, so it
 * would keep matching `:hover` (and this button's turquoise look) after
 * every tap until a different element is next touched. `:active` below
 * covers the mobile tap-feedback case instead, and clears immediately on
 * release — never sticky.
 */
@media (hover: hover) and (pointer: fine) {
	.ed-tejido-detail__action:hover:not(:disabled) {
		background-color: rgba(0, 183, 183, 0.08);
		border-color: var(--ed-color-link-hover);
		color: var(--ed-color-link-hover);
	}
}

.ed-tejido-detail__action:active:not(:disabled) {
	background-color: rgba(0, 183, 183, 0.14);
}

.ed-tejido-detail__action:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-tejido-detail__action:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * "Elige un color" — assets/js/staggs-tejido-bridge.js's OWN visual cards
 * for the current fabric, built straight from the same canonical catalog
 * data everywhere else in this file uses (never STAGGS' own "Color del
 * tejido" markup — that real field stays exactly where STAGGS renders it,
 * merely visually hidden via `.ed-tejido-native-color--hidden` below, and
 * these cards forward every click/sample-request to it — see that file's
 * own docblock for why: physically relocating or cloning STAGGS' real
 * field both broke real STAGGS state under direct testing). Card visuals
 * intentionally mirror STAGGS' own Cards template (light surface, 12px
 * radius, turquoise selected border) so switching between a fabric card
 * and a color card never feels like a different component.
 * ------------------------------------------------------------------ */

.ed-tejido-detail__colors {
	margin-top: var(--ed-space-md);
	padding-top: var(--ed-space-md);
	border-top: 1px solid var(--ed-color-border);
}

/*
 * A real, noticeably-larger heading — this is the next concrete action in
 * the step, not a quiet section label (item 3 of this pass). The helper
 * line right below is informational guidance ("here's what to do next"),
 * never a validation error, so it stays neutral dark gray, never the
 * red/warning palette. Once a real color is checked, `.ed-tejido-detail__
 * color-selected` swaps in for the helper (assets/js/
 * staggs-tejido-bridge.js's syncColorCardsSelection() toggles which of the
 * two is `hidden`) — same compact single line, not a second large info
 * block.
 */
.ed-tejido-detail__colors-heading {
	margin: 0 0 var(--ed-space-3xs);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-md);
	font-weight: 600;
	color: var(--ed-color-heading);
}

.ed-tejido-detail__colors-helper {
	margin: 0 0 var(--ed-space-sm);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	color: var(--ed-color-text);
}

.ed-tejido-detail__color-selected {
	margin: 0 0 var(--ed-space-sm);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-link);
}

.ed-tejido-detail__colors-slot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 160px));
	gap: var(--ed-space-sm);
}

/*
 * Mobile: `auto-fit`/`minmax(140px, 160px)` above lands JUST short of two
 * columns at this panel's real mobile width (confirmed live, real device:
 * two 160px cards + one gap needs ~336px, the detail panel's own content
 * width here is ~330px) — auto-fit has no fallback for "almost fits", so
 * it silently drops to one long column instead. An explicit two-column
 * grid doesn't depend on hitting an exact px threshold.
 */
@media (max-width: 899px) {
	.ed-tejido-detail__colors-slot {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Tablet (768-991px): the panel is now wide enough (see the tablet block in
 * staggs-bridge.css) for three cards of ~160px per row, the same card size as desktop -
 * two per row left a wide empty strip (and `auto-fit` above drops to two columns by a
 * couple of px around 900px). Slightly tighter gap. From 992px the auto-fit rule above
 * gives 3-4 cards per row; below 768px stays two columns.
 */
@media (min-width: 768px) and (max-width: 991px) {
	.ed-tejido-detail__colors-slot {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}
}

.ed-color-card {
	position: relative;
}

.ed-color-card__select {
	position: relative;
	display: block;
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-surface);
	border-radius: var(--ed-radius-md);
	padding: var(--ed-space-2xs);
	cursor: pointer;
	transition: border-color var(--ed-transition-fast);
}

.ed-color-card__select:hover {
	border-color: var(--ed-color-border);
}

/* Selected: same recipe as every other option card (staggs-bridge.css): brand border
 * + inset ring, light tint, check badge, graphite label. */
.ed-color-card.is-selected .ed-color-card__select {
	background-color: rgb(0 183 183 / 0.09);
	border-color: var(--ed-color-primary);
	box-shadow: inset 0 0 0 1px var(--ed-color-primary);
}

.ed-color-card.is-selected .ed-color-card__select::before {
	content: '';
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	width: 22px;
	height: 22px;
	background-color: var(--ed-color-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 2px #ffffff;
}

.ed-color-card.is-selected .ed-color-card__select::after {
	content: '';
	position: absolute;
	top: 19px;
	left: 22px;
	z-index: 3;
	width: 6px;
	height: 11px;
	border: solid var(--ed-color-heading);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Zoom is a sibling of the radio (not inside it), pinned to the photo's corner. */
.ed-color-card > .ed-color-zoom {
	top: calc(var(--ed-space-2xs) * 2 + 1px);
	right: calc(var(--ed-space-2xs) * 2 + 1px);
	z-index: 4;
}

.ed-color-card__select:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-color-card__image {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--ed-radius-sm);
	overflow: hidden;
	background-color: var(--ed-color-surface-alt);
}

.ed-color-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ed-color-card__name {
	display: block;
	margin-top: var(--ed-space-2xs);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-heading);
}

.ed-color-card.is-selected .ed-color-card__name {
	color: var(--ed-color-heading);
}

/*
 * Visually-hidden (not `display:none`) treatment for STAGGS' own real
 * "Color del tejido" field once assets/js/staggs-tejido-bridge.js's cards
 * are showing in its place. Standard clip technique — keeps
 * `offsetParent` non-null so assets/js/staggs-muestras-bridge.js's own
 * offsetParent-based visibility filter still finds and enhances this
 * exact node with its real zoom/"Muestra gratis" buttons, which this
 * file's cards then forward to (see staggs-tejido-bridge.js's own
 * docblock for why that matters).
 */
.ed-tejido-native-color--hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ------------------------------------------------------------------ *
 * "Características técnicas" modal — same visual language as
 * `.ed-samples-popup` (staggs-bridge.css): fixed overlay, fade+lift-in
 * dialog, white surface, restrained shadow, close × top-right, backdrop
 * click / Esc / focus trap / return-focus all handled in
 * assets/js/staggs-tejido-bridge.js.
 * ------------------------------------------------------------------ */

body.ed-tejido-modal-open {
	overflow: hidden;
}

.ed-tejido-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ed-space-lg) var(--ed-space-sm);
}

.ed-tejido-modal[hidden] {
	display: none;
}

.ed-tejido-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(16, 19, 20, 0.5);
	border: 0;
	padding: 0;
	cursor: default;
}

.ed-tejido-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	background-color: var(--ed-color-surface);
	border-radius: var(--ed-radius-lg);
	box-shadow: var(--ed-shadow-lg);
	padding: var(--ed-space-lg) var(--ed-space-md) var(--ed-space-md);
}

.ed-tejido-modal__dialog--tech {
	max-width: 560px;
}

.ed-tejido-modal__close {
	position: absolute;
	top: var(--ed-space-sm);
	right: var(--ed-space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	color: var(--ed-color-muted);
	border: 0;
	border-radius: var(--ed-radius-full);
	cursor: pointer;
}

.ed-tejido-modal__close:hover {
	color: var(--ed-color-text);
	background-color: var(--ed-color-surface-alt);
}

.ed-tejido-modal__close:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-tejido-modal__close svg {
	width: 16px;
	height: 16px;
}

.ed-tejido-modal__title {
	margin: 0 0 var(--ed-space-sm);
	padding-right: var(--ed-space-lg);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
	font-weight: 600;
	color: var(--ed-color-heading);
}

.ed-tejido-modal__subtitle {
	margin: var(--ed-space-sm) 0 var(--ed-space-2xs);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-heading);
}

.ed-tejido-modal__subtitle:first-child {
	margin-top: 0;
}

/*
 * Neutral informational note (e.g. a two-sided fabric's "Dos caras del tejido") — same quiet
 * surface as the Muestras Gratis specs note, not a warning.
 */
.ed-tejido-modal__note {
	margin-top: var(--ed-space-sm);
	padding: var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-sm);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	line-height: 1.5;
	color: var(--ed-color-text);
}

.ed-tejido-modal__note p {
	margin: 0 0 4px;
}

.ed-tejido-modal__note p:last-child {
	margin-bottom: 0;
}

.ed-tejido-modal__note .ed-tejido-modal__subtitle {
	margin-top: 0;
}

.ed-tejido-modal__uses,
.ed-tejido-modal__certs {
	margin: 0;
	padding-left: 1.25em;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	color: var(--ed-color-text);
}

.ed-tejido-modal__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
}

.ed-tejido-modal__table th,
.ed-tejido-modal__table td {
	padding: var(--ed-space-2xs) var(--ed-space-sm);
	text-align: left;
	border-bottom: 1px solid var(--ed-color-border);
}

.ed-tejido-modal__table th {
	width: 40%;
	font-weight: 600;
	color: var(--ed-color-muted);
}

.ed-tejido-modal__empty {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-style: italic;
	color: var(--ed-color-muted);
}

/* ------------------------------------------------------------------ *
 * "3 - DETALLES" gate message — shown right after `tejidoGroup` (the
 * "Tipo de tejido" cards grid, itself hosting whichever inline fabric
 * detail is currently open — see assets/js/staggs-tejido-bridge.js) for
 * as long as "2 - TEJIDO Y COLOR" isn't genuinely complete (a fabric AND
 * a real color for it), by that same file's own gate. Same
 * calm, informational visual language as
 * assets/js/staggs-medidas-bridge.js's own `.ed-medidas-helper` (light
 * neutral surface, thin border, small icon + text row) — this is guidance
 * toward the next step, never a validation error, so it never borrows the
 * error/red palette; the icon uses the brand accent instead of the muted
 * gray `.ed-medidas-helper__icon` uses, since this message doubles as a
 * "here's what unlocks next" cue, not just a passive hint.
 * ------------------------------------------------------------------ */

.ed-tejido-gate-message {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-2xs);
	margin-top: var(--ed-space-lg);
	padding: var(--ed-space-xs) var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-tejido-gate-message[hidden] {
	display: none;
}

.ed-tejido-gate-message__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--ed-color-primary);
}

.ed-tejido-gate-message__text {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	color: var(--ed-color-text);
}

/*
 * STAGGS repeats the selected fabric under the cards as its own one-line "selected
 * value" ("Pica 3% 25,00 €": .option-group-summary = name + surcharge). The selected
 * card, the detail panel below it (name, price for these measures, lead time,
 * colours) and "Resumen de tu configuración" already say it, so it is not shown here.
 * Presentation only: the option, its surcharge and STAGGS' state are untouched, and
 * the price still counts everywhere (unit price, summary, cart). Scoped to this one
 * group: other groups' own selected-value lines are left as they are.
 */
#option-group-2817 .option-group-summary {
	display: none;
}

/*
 * A fabric card whose photo was replaced by the real cover photo (portrait,
 * data-ed-photo set by assets/js/staggs-tejido-bridge.js): it fills the same square
 * area STAGGS gives its 150x150 thumbnails, cropped rather than stretched.
 */
#option-group-2817 .option-image img[data-ed-photo] {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}