/**
 * Muestras gratis — interactive sample grid, selection panel and request
 * form. Enqueued only on /muestras-gratis/ (see inc/enqueue.php). Markup
 * comes from the estoresdirecto-core plugin's [ed_muestras_gratis]
 * shortcode; behaviour from assets/js/muestras-gratis.js. Reuses
 * .ed-form field primitives from content-page.css — only the
 * grid/card/panel pieces genuinely new to this page live here.
 */

/* -------------------------------------------------------------------- */
/* Category filters                                                      */
/* -------------------------------------------------------------------- */

.ed-muestras__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-space-2xs);
	margin-bottom: var(--ed-space-lg);
}

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

.ed-muestras__filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* min-height, not a fixed height: keeps the pill's horizontal padding
	   intact while still reaching a ~44px touch target vertically. */
	min-height: 44px;
	padding: var(--ed-space-2xs) var(--ed-space-md);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	color: var(--ed-color-text);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.ed-muestras__filter:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 1px;
}

.ed-muestras__filter.is-active {
	background-color: var(--ed-color-graphite);
	border-color: var(--ed-color-graphite);
	color: #ffffff;
}

/* -------------------------------------------------------------------- */
/* Hierarchical nav — back button + breadcrumb + level title             */
/* -------------------------------------------------------------------- */

.ed-muestras__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ed-space-sm);
	row-gap: 4px;
	min-height: 32px;
	margin-bottom: var(--ed-space-xs);
}

.ed-muestras__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 4px 4px 0;
	position: relative;
	background: none;
	border: none;
	color: var(--ed-color-link);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	/*
	 * Browsers give <button> its own UA line-height (often ~normal/1.15)
	 * instead of inheriting the body's line-height the way the <nav>
	 * breadcrumb next to it does — that mismatch, not the flex alignment,
	 * was what made "Volver" sit off-axis from the breadcrumb. Pinning
	 * both to the same explicit line-height removes the discrepancy so
	 * .ed-muestras__nav's align-items: center actually centers them on
	 * the same line.
	 */
	line-height: 1;
	cursor: pointer;
}

/*
 * Invisible hit-slop, not visible padding: the visible box (and therefore
 * .ed-muestras__nav's flex height/alignment) stays exactly as it was —
 * only the clickable/tappable area grows, via an absolutely-positioned
 * pseudo-element that sits outside the button's own layout box without
 * affecting it or shifting "Volver"/the breadcrumb out of alignment.
 */
.ed-muestras__back::after {
	content: '';
	position: absolute;
	inset: -11px 0;
}

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

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

.ed-muestras__back:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 1px;
}

.ed-muestras__back svg {
	width: 14px;
	height: 14px;
}

.ed-muestras__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	row-gap: 4px;
	line-height: 1;
	font-size: var(--ed-font-size-xs);
	color: var(--ed-color-muted);
}

.ed-muestras__crumb {
	padding: 0;
	position: relative;
	background: none;
	border: none;
	color: var(--ed-color-muted);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	line-height: 1;
	cursor: pointer;
}

/* Same invisible hit-slop technique as .ed-muestras__back — see its
   comment. Kept narrower horizontally than the back button's so adjacent
   crumbs' hit areas don't overlap across the breadcrumb's 6px gap. */
.ed-muestras__crumb::after {
	content: '';
	position: absolute;
	top: -16px;
	bottom: -16px;
	left: -2px;
	right: -2px;
}

.ed-muestras__crumb-sep {
	line-height: 1;
}

.ed-muestras__crumb:hover {
	color: var(--ed-color-link);
	text-decoration: underline;
}

.ed-muestras__crumb:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 1px;
}

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

/*
 * Current/active crumb (the selected fabric, e.g. "Pica 3%") — a <span>,
 * not a <button>: it marks where the user already is, so it isn't a nav
 * target. Uses --ed-color-link rather than raw --ed-color-primary for the
 * text — same WCAG AA text-contrast reasoning documented on
 * --ed-focus-outline in base.css (raw #00B7B7 measures ~2.48:1 on white,
 * failing the 4.5:1 minimum for normal text).
 */
.ed-muestras__crumb--current {
	color: var(--ed-color-link);
	font-weight: 600;
	cursor: default;
}

.ed-muestras__crumb--current:hover {
	color: var(--ed-color-link);
	text-decoration: none;
}

.ed-muestras__level-title {
	margin: 0 0 var(--ed-space-sm);
	color: var(--ed-color-heading);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-md);
}

/*
 * "Tejido seleccionado" context strip — shown only at the colors level,
 * directly under "Elige un color", so which fabric's colors are on screen
 * is never ambiguous even once many fabrics exist. Deliberately light: a
 * label plus a small badge, not a second heading — the breadcrumb already
 * carries the same fabric name for navigation, this is just the fast
 * visual answer to "which fabric am I looking at".
 */
.ed-muestras__fabric-context {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ed-space-2xs);
	margin: -4px 0 var(--ed-space-sm);
}

.ed-muestras__fabric-context[hidden] {
	display: none;
}

.ed-muestras__fabric-context-label {
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
}

.ed-muestras__fabric-context-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--ed-space-xs);
	background-color: rgba(0, 183, 183, 0.08);
	border: 1px solid var(--ed-color-primary);
	border-radius: var(--ed-radius-sm);
	color: var(--ed-color-heading);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	line-height: 1.3;
}

.ed-muestras__demo-note {
	margin: 0 0 var(--ed-space-sm);
	padding: var(--ed-space-2xs) var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-sm);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
}

/* -------------------------------------------------------------------- */
/* Layout — grid column + selected/form column                          */
/* -------------------------------------------------------------------- */

.ed-muestras__layout {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a wide child (breadcrumb / filters) must not stretch the column past a 360px viewport. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ed-space-2xl);
	align-items: start;
}

@media (min-width: 1024px) {
	.ed-muestras__layout {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

	.ed-muestras__selected-col {
		position: sticky;
		top: calc(var(--ed-header-height, 80px) + var(--ed-space-lg));
	}
}

/* -------------------------------------------------------------------- */
/* Sample grid + cards                                                   */
/* -------------------------------------------------------------------- */

.ed-muestras__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ed-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The plain `hidden` attribute is only `display: none` at the (lowest-
 * priority) user-agent layer — the `display: grid` rule above is author
 * CSS and would otherwise always win regardless of specificity. Restating
 * it here, scoped to [hidden], is what actually hides an inactive level.
 */
.ed-muestras__grid[hidden] {
	display: none;
}

@media (min-width: 480px) {
	.ed-muestras__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.ed-muestras__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ed-muestras__item {
	/*
	 * min-width: 0 breaks the implicit minmax(auto, 1fr) grid-track floor —
	 * without it, a nowrap+ellipsis label inside .ed-muestras__card--color
	 * reports its full unwrapped text as the item's min-content width, and
	 * the grid refuses to shrink the column below that, overflowing at
	 * narrow (390px) widths once 3+ color cards share a row.
	 */
	min-width: 0;
	margin: 0;
}

.ed-muestras__card-wrap {
	position: relative;
}

.ed-muestras__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	background-color: var(--ed-color-surface);
	border: 2px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

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

.ed-muestras__card.is-selected {
	border-color: var(--ed-color-primary);
	box-shadow: 0 0 0 1px var(--ed-color-primary);
}

.ed-muestras__card.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ed-muestras__card-image {
	display: block;
	aspect-ratio: 1 / 1;
	background-color: var(--ed-color-surface-alt);
}

.ed-muestras__card-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/*
	 * The Screen 1/3/5/10% photos (reused from Guía de tejidos) have a
	 * "SCREEN N%" pill baked into the top of the image itself. Biasing the
	 * crop window down keeps that badge out of the square card frame
	 * instead of duplicating the card's own name/meta text underneath.
	 */
	object-position: center 78%;
}

/*
 * Fabric-level and color-level card photos (Basic 0/1%, Pica 1% swatch
 * close-ups) have no badge to dodge — the 78% bias above is specific to
 * the category-level Screen N% photos and would needlessly crop these.
 */
.ed-muestras__card--fabric .ed-muestras__card-image img,
.ed-muestras__card--color .ed-muestras__card-image img {
	object-position: center;
}

/*
 * .ed-muestras__card--fabric is a plain, non-interactive <div> — the
 * "Características del tejido" secondary action needs to sit inside its
 * body between the color count and "Ver colores", which HTML can't allow
 * as a descendant of an interactive element without nesting one <button>
 * inside another. The actual "Ver colores" hit target now lives on the
 * sibling .ed-muestras__card-hit overlay below instead, so :hover/
 * :focus-visible on .ed-muestras__card no longer fire for this variant on
 * their own — restated here via the wrap, which DOES receive :hover/
 * :focus-within whenever any of its interactive descendants (the overlay,
 * the specs link, or the zoom button) has it.
 */
.ed-muestras__card-wrap:hover .ed-muestras__card--fabric {
	border-color: var(--ed-color-primary);
}

.ed-muestras__card-wrap:focus-within .ed-muestras__card--fabric {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

/*
 * Full-card invisible "stretched link" hit target for the fabric card —
 * sibling of the .ed-muestras__card--fabric div, not a descendant, so it
 * can sit on top of the whole card for the "Ver colores" click/tap without
 * blocking the specs-link or zoom-btn siblings above it in stacking order
 * (z-index 3 and 2 respectively vs this element's 1).
 */
.ed-muestras__card-hit {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--ed-radius-md);
	cursor: pointer;
}

.ed-muestras__specs-link {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 4px;
	margin: 2px 0 0;
	padding: 2px 0;
	background: none;
	border: none;
	color: var(--ed-color-muted);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: color var(--ed-transition-fast);
}

.ed-muestras__specs-link svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

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

.ed-muestras__specs-link:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
	border-radius: var(--ed-radius-sm);
}

/*
 * The Screen 0%,1%/3%/5%/10% category photos still show a sliver of their
 * baked-in badge pill at the very top even with the 78% crop bias above —
 * nudge the image up a little further with a small scale + shift (instead
 * of a taller crop bias, which has no headroom left) so cover still fills
 * the square with no gap at the bottom. Scoped to
 * data-category-family="Screen" only — Translúcido/Opaco/Noche y día have
 * no badge and keep the unmodified 78% crop above untouched.
 */
.ed-muestras__card--category[data-category-family="Screen"] .ed-muestras__card-image {
	overflow: hidden;
}

.ed-muestras__card--category[data-category-family="Screen"] .ed-muestras__card-image img {
	transform: scale(1.08) translateY(-1.5%);
	transform-origin: center;
}

.ed-muestras__card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ed-space-xs) var(--ed-space-sm) var(--ed-space-sm);
}

.ed-muestras__card-name {
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	line-height: 1.3;
}

.ed-muestras__card-meta {
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
}

/*
 * Category/fabric cards are navigational, not selectable — this hint
 * replaces the checkbox-style check badge those two levels used to show,
 * so a card reads as "opens a list" rather than "toggles a choice".
 */
.ed-muestras__card-hint {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 2px;
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
}

.ed-muestras__card-hint svg {
	width: 11px;
	height: 11px;
	transition: transform var(--ed-transition-fast);
}

.ed-muestras__card--category:hover .ed-muestras__card-hint svg,
.ed-muestras__card--fabric:hover .ed-muestras__card-hint svg {
	transform: translateX(2px);
}

/*
 * Zoom trigger — a sibling of .ed-muestras__card, not a descendant, so it
 * can sit visually on top of the card's photo (via .ed-muestras__card-wrap
 * position: relative) without nesting one <button> inside another. Opens
 * the shared .ed-lightbox (assets/js/lightbox.js); clicking it never
 * triggers the card's own nav/select click since the two aren't in each
 * other's ancestor chain.
 */
.ed-muestras__zoom-btn {
	position: absolute;
	top: var(--ed-space-2xs);
	right: var(--ed-space-2xs);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background-color: rgba(16, 19, 20, 0.6);
	border: none;
	border-radius: var(--ed-radius-full);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* Invisible hit-slop, same technique as .ed-muestras__back — grows the
   tappable area to a comfortable size without enlarging the visible icon. */
.ed-muestras__zoom-btn::after {
	content: '';
	position: absolute;
	inset: -8px;
}

.ed-muestras__zoom-btn:hover {
	background-color: rgba(16, 19, 20, 0.8);
}

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

.ed-muestras__zoom-btn svg {
	width: 14px;
	height: 14px;
}

/* Left corner, not right — the right corner is where .ed-muestras__card-check
   appears once a color is selected; sharing it would overlap the two. */
.ed-muestras__zoom-btn--color {
	right: auto;
	left: var(--ed-space-2xs);
	width: 22px;
	height: 22px;
}

.ed-muestras__zoom-btn--color svg {
	width: 11px;
	height: 11px;
}

.ed-muestras__card-check {
	position: absolute;
	top: var(--ed-space-2xs);
	right: var(--ed-space-2xs);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background-color: var(--ed-color-primary);
	border-radius: var(--ed-radius-full);
	color: #ffffff;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.ed-muestras__card-check svg {
	width: 14px;
	height: 14px;
}

.ed-muestras__card.is-selected .ed-muestras__card-check {
	opacity: 1;
	transform: scale(1);
}

/*
 * Colour cards ("Elige un color") follow the PILOT configurator's colour cards
 * (staggs-tejido.css .ed-color-card): a compact 140-160px card - the wrapper is the visual
 * card (border, padding, selected state) and holds the photo, the name and the "Muestra
 * gratis" control, all in one container; the round zoom button sits in the photo's
 * top-right corner (same components as the configurator, color-controls.css). The photos are
 * sized 144/288/432px copies chosen through srcset, so the browser does not have to shrink a
 * large photo and the fine weave stays sharp.
 */
.ed-muestras__grid[data-ed-muestras-level="colors"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ed-space-md) var(--ed-space-sm);
}

@media (min-width: 600px) {
	.ed-muestras__grid[data-ed-muestras-level="colors"] {
		grid-template-columns: repeat(auto-fill, minmax(140px, 160px));
	}
}

.ed-muestras__item--color .ed-muestras__card-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--ed-space-2xs);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
	transition: border-color var(--ed-transition-fast);
}

.ed-muestras__item--color .ed-muestras__card-wrap:hover {
	border-color: var(--ed-color-muted);
}

/* Selected (class set by assets/js/muestras-gratis.js): the configurator's colour-card recipe. */
.ed-muestras__item--color .ed-muestras__card-wrap.is-selected {
	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);
}

/* The select button is just the photo + name inside that container. */
.ed-muestras__card--color {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.ed-muestras__card--color:hover,
.ed-muestras__card--color.is-selected {
	border: 0;
	box-shadow: none;
}

.ed-muestras__card--color .ed-muestras__card-image {
	border-radius: var(--ed-radius-sm);
	overflow: hidden;
}

.ed-muestras__card--color .ed-muestras__card-body {
	padding: var(--ed-space-2xs) 0 0;
}

.ed-muestras__card--color .ed-muestras__card-check {
	top: var(--ed-space-2xs);
	right: auto;
	left: var(--ed-space-2xs);
	width: 22px;
	height: 22px;
	box-shadow: 0 0 0 2px #ffffff;
}

.ed-muestras__card--color .ed-muestras__card-check svg {
	width: 12px;
	height: 12px;
}

/* Zoom: the configurator's button, in the photo's corner (wrapper padding 8px + 8px). */
.ed-muestras__card-wrap > .ed-color-zoom {
	top: calc(var(--ed-space-2xs) * 2);
	right: calc(var(--ed-space-2xs) * 2);
	z-index: 2;
}

/* Touch target: a little more reach than the visible 32px circle. */
.ed-muestras__card-wrap > .ed-color-zoom::after {
	content: '';
	position: absolute;
	inset: -4px;
}

/* "Muestra gratis": the same component as the configurator, inside the card, under the name,
 * across the card's inner width - a quiet secondary action. */
.ed-muestras__item--color .ed-color-sample-btn {
	align-self: stretch;
	justify-content: center;
	margin-top: var(--ed-space-2xs);
	background-color: var(--ed-color-surface);
}

/*
 * Fabric level: the card is one component - photo, name, colour count, then the two links
 * inside it: "Ver características" (quiet, grey) and "Ver colores" (the card's main action,
 * brand colour). Every card of a row is as tall as the tallest.
 */
.ed-muestras__grid[data-ed-muestras-level="fabrics"] > .ed-muestras__item {
	display: flex;
}

.ed-muestras__grid[data-ed-muestras-level="fabrics"] .ed-muestras__card-wrap {
	display: flex;
	flex: 1 1 auto;
}

.ed-muestras__card--fabric {
	flex: 1 1 auto;
}

/*
 * "Características del tejido" — a real secondary action (a light tinted pill,
 * not quiet plain text), but deliberately quieter than "Ver colores" right below
 * it: neutral text and a pale brand tint, never the solid turquoise the card's
 * main action uses. Width matches the text column so every card's two actions
 * line up regardless of the fabric name's length.
 */
.ed-muestras__card--fabric .ed-muestras__specs-link {
	display: flex;
	width: 100%;
	align-self: stretch;
	gap: var(--ed-space-3xs);
	margin: var(--ed-space-xs) 0 var(--ed-space-2xs);
	padding: 0 var(--ed-space-2xs);
	min-height: 33px;
	background-color: rgb(0 183 183 / 0.05);
	border: 1px solid rgb(0 183 183 / 0.18);
	border-radius: var(--ed-radius-md);
	color: var(--ed-color-text);
	font-size: 0.8125rem;
	font-weight: 500;
	transition: background-color var(--ed-transition-fast), border-color var(--ed-transition-fast);
}

.ed-muestras__card--fabric .ed-muestras__specs-link svg {
	width: 14px;
	height: 14px;
	color: var(--ed-color-primary);
}

.ed-muestras__card--fabric .ed-muestras__specs-link:hover {
	background-color: rgb(0 183 183 / 0.1);
	border-color: var(--ed-color-primary);
	color: var(--ed-color-text);
}

.ed-muestras__card--fabric .ed-muestras__specs-link:focus-visible {
	border-color: var(--ed-color-primary);
}

/* "Ver colores" stays the card's one solid-color CTA, with a little more room
 * above it now that the specs button sits right before it. */
.ed-muestras__card--fabric .ed-muestras__card-hint {
	margin-top: var(--ed-space-3xs);
	font-size: var(--ed-font-size-sm);
}
.ed-muestras__swatch-fill {
	display: block;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------- */
/* Selected samples panel                                                */
/* -------------------------------------------------------------------- */

.ed-muestras__selected {
	padding: var(--ed-space-md);
	margin-bottom: var(--ed-space-lg);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
}

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

.ed-muestras__empty {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

.ed-muestras__error {
	margin: 0 0 var(--ed-space-2xs);
	color: var(--ed-color-error);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-muestras__selected-list {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ed-muestras__selected-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-space-sm);
	padding: var(--ed-space-2xs) var(--ed-space-sm);
	background-color: var(--ed-color-surface);
	border-radius: var(--ed-radius-sm);
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

/* Real texture thumbnail of the chosen color — same look as the header
 * "Mis muestras" panel (.ed-header-samples__thumb). Absent entirely when the
 * color has no real image, so the text simply takes the space. */
.ed-muestras__selected-thumb {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	overflow: hidden;
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-sm);
}

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

.ed-muestras__selected-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.ed-muestras__selected-primary {
	overflow: hidden;
	color: var(--ed-color-heading);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ed-muestras__selected-secondary {
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
}

.ed-muestras__selected-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--ed-radius-full);
	color: var(--ed-color-muted);
	cursor: pointer;
	flex-shrink: 0;
}

.ed-muestras__selected-remove:hover {
	background-color: var(--ed-color-surface-alt);
	color: var(--ed-color-error);
}

.ed-muestras__selected-remove:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 1px;
}

.ed-muestras__selected-remove svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 480px) {
	.ed-muestras__selected-thumb {
		width: 36px;
		height: 36px;
	}
}

/* -------------------------------------------------------------------- */
/* Request CTA — under the selected list, leads to /solicitar-muestras/  */
/* -------------------------------------------------------------------- */

.ed-muestras__request-cta {
	display: block;
	width: 100%;
	margin-top: var(--ed-space-sm);
}

.ed-muestras__request-cta[hidden] {
	display: none;
}

.ed-muestras__request-cta .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* -------------------------------------------------------------------- */
/* Form extras — submit state                                            */
/* -------------------------------------------------------------------- */

/* .ed-form__honeypot / .ed-form__field-error / .is-invalid moved to
   content-page.css — shared with Contacto, which also loads that file
   (see inc/enqueue.php). */

.ed-muestras__submit-error {
	margin: 0 0 var(--ed-space-sm);
	color: var(--ed-color-error);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

/*
 * .ed-button's real styling (background/padding/radius) targets the inner
 * .wp-block-button__link, matching how the button-block pattern works
 * elsewhere on the site (a plain <div> wrapper, no native chrome). Here
 * the outer element is a real <button> for a working submit — without
 * this reset it keeps the browser's native button chrome (a visible grey
 * box) around the styled teal pill inside it.
 */
.ed-muestras__submit {
	display: block;
	width: 100%;
	margin-top: var(--ed-space-sm);
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.ed-muestras__submit .wp-block-button__link {
	width: 100%;
}

.ed-muestras__submit:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

/* -------------------------------------------------------------------- */
/* Success state                                                         */
/* -------------------------------------------------------------------- */

.ed-muestras__success {
	padding: var(--ed-space-xl) var(--ed-space-md);
	text-align: center;
}

.ed-muestras__success svg {
	width: 48px;
	height: 48px;
	margin-bottom: var(--ed-space-sm);
	color: var(--ed-color-success);
}

.ed-muestras__success-title {
	margin: 0 0 var(--ed-space-2xs);
	color: var(--ed-color-heading);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
}

.ed-muestras__success-desc {
	margin: 0 auto;
	max-width: 40ch;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
	line-height: 1.6;
}

.ed-muestras__success-list-title {
	margin: var(--ed-space-md) 0 var(--ed-space-2xs);
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-muestras__success-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
	text-align: left;
}

.ed-muestras__success-list li {
	padding: var(--ed-space-3xs) var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-sm);
}

/* -------------------------------------------------------------------- */
/* Compact form — this page only, doesn't touch shared content-page.css  */
/* -------------------------------------------------------------------- */

.ed-muestras__form .ed-form__row {
	margin-bottom: var(--ed-space-md);
}

@media (min-width: 640px) {
	.ed-muestras__form .ed-form__row {
		margin-bottom: var(--ed-space-lg);
	}
}

.ed-muestras__form .ed-form__group {
	gap: var(--ed-space-2xs);
}

.ed-muestras__form .ed-form__input,
.ed-muestras__form .ed-form__textarea {
	padding: 10px var(--ed-space-sm);
}

.ed-muestras__form .ed-form__textarea {
	min-height: 110px;
}

/*
 * .ed-form__consent (content-page.css) carries its own margin-bottom for
 * its usual standalone placement — here it sits inside a compact
 * .ed-form__row right above the submit button, so the row's own
 * margin-bottom already provides that spacing and the consent block only
 * needs a small gap before its own error message, matching the
 * label-to-input rhythm used by every other field group.
 */
.ed-muestras__form .ed-form__row .ed-form__consent {
	margin-bottom: var(--ed-space-2xs);
}

/* -------------------------------------------------------------------- */
/* Fabric technical specifications modal                                 */
/* -------------------------------------------------------------------- */

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

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

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

.ed-muestras__specs-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	background-color: var(--ed-color-surface);
	border-radius: var(--ed-radius-lg);
	overflow: hidden;
}

.ed-muestras__specs-close {
	position: absolute;
	top: var(--ed-space-sm);
	right: var(--ed-space-sm);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--ed-color-surface-alt);
	color: var(--ed-color-text);
	border: none;
	border-radius: var(--ed-radius-full);
	cursor: pointer;
}

.ed-muestras__specs-close:hover {
	background-color: var(--ed-color-border);
}

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

.ed-muestras__specs-close svg {
	width: 14px;
	height: 14px;
}

.ed-muestras__specs-content {
	padding: var(--ed-space-lg) var(--ed-space-lg) var(--ed-space-md);
	overflow-y: auto;
}

.ed-muestras__specs-eyebrow {
	margin: 0 0 4px;
	color: var(--ed-color-primary);
	font-size: var(--ed-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ed-muestras__specs-title {
	margin: 0 0 var(--ed-space-md);
	padding-right: 40px;
	color: var(--ed-color-heading);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
}

.ed-muestras__specs-section-label {
	margin: 0 0 var(--ed-space-2xs);
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-muestras__specs-use {
	margin-bottom: var(--ed-space-md);
}

.ed-muestras__specs-use-list,
.ed-muestras__specs-certs-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-muestras__specs-use-list li {
	padding: 4px var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-full);
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
}

.ed-muestras__specs-table {
	width: 100%;
	border-collapse: collapse;
}

.ed-muestras__specs-table tr {
	border-top: 1px solid var(--ed-color-border);
}

.ed-muestras__specs-table tr:first-child {
	border-top: none;
}

.ed-muestras__specs-table th,
.ed-muestras__specs-table td {
	padding: var(--ed-space-2xs) 0;
	text-align: left;
	vertical-align: top;
}

.ed-muestras__specs-table th {
	width: 46%;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
}

.ed-muestras__specs-table td {
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

/*
 * Neutral informational note (e.g. Pica 3%'s two-sided-weave callout) —
 * deliberately styled like the rest of the modal's quiet surfaces, not as
 * a warning/error: this is a material property, not a problem.
 */
.ed-muestras__specs-note {
	margin-top: var(--ed-space-md);
	padding: var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-sm);
}

.ed-muestras__specs-note-body p {
	margin: 0 0 4px;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
	line-height: 1.5;
}

.ed-muestras__specs-note-body p:last-child {
	margin-bottom: 0;
}

.ed-muestras__specs-certs {
	margin-top: var(--ed-space-md);
}

.ed-muestras__specs-certs-list li {
	padding: 4px var(--ed-space-sm);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
}

/*
 * Below 480px a 2-column label/value table has too little room per
 * column — stack each row as label-then-value instead, same pattern the
 * project docs call for on narrow screens.
 */
@media (max-width: 480px) {
	.ed-muestras__specs-table,
	.ed-muestras__specs-table tbody,
	.ed-muestras__specs-table tr,
	.ed-muestras__specs-table th,
	.ed-muestras__specs-table td {
		display: block;
		width: auto;
	}

	.ed-muestras__specs-table th {
		padding-bottom: 2px;
	}

	.ed-muestras__specs-table td {
		padding-top: 0;
		padding-bottom: var(--ed-space-2xs);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-muestras__filter,
	.ed-muestras__card,
	.ed-muestras__card-check,
	.ed-muestras__specs-link {
		transition: none;
	}
}