/*
 * Botiga RMO — rediseño de RMO Industries.
 *
 * Los colores salen de muestrear los mockups: el negro del header es #050608 y
 * el amarillo de botones y barra de categorías cae en #FDBE05, redondeado a
 * #FFC107. El home usa un amarillo más claro (#FAD62A) sobre el degradado.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	--rmo-black: #050608;
	--rmo-black-2: #12151a;
	--rmo-yellow: #ffc107;
	--rmo-yellow-dark: #e0a800;
	--rmo-yellow-light: #fad62a;
	--rmo-cream: #fffaef;
	--rmo-green: #16a34a;
	--rmo-red: #dc2626;

	--rmo-text: #16181d;
	--rmo-muted: #6b7280;
	--rmo-faint: #9ca3af;
	--rmo-border: #e5e7eb;
	--rmo-border-strong: #d1d5db;
	--rmo-surface: #ffffff;
	--rmo-surface-2: #f8f8f8;

	--rmo-radius: 8px;
	--rmo-radius-lg: 12px;
	--rmo-radius-pill: 999px;

	--rmo-shadow: 0 1px 2px rgb(16 24 40 / 6%);
	--rmo-shadow-lg: 0 4px 16px rgb(16 24 40 / 8%);

	--rmo-container: 1400px;
	--rmo-gutter: 24px;
}

/* ------------------------------------------------------------------ base -- */

.rmo-redesign {
	color: var(--rmo-text);
}

.rmo-icon {
	flex: 0 0 auto;
}

/*
 * Los bloques del home viven dentro de `.entry-content`, donde el tema subraya
 * todos los enlaces. Aquí los enlaces son botones, marcas y tarjetas, así que
 * se les quita el subrayado de forma explícita.
 */
.rmo-hero a,
.rmo-brandstrip a,
.rmo-benefitcard a,
.rmo-categories a,
.rmo-footerpoints a,
.rmo-header a,
.rmo-buybox a,
.rmo-filters a,
a.rmo-btn,
a.rmo-brand {
	text-decoration: none;
}

/* Enlaces de la barra de navegación: el color del tema los oscurecía. */
.rmo-header .rmo-nav__link,
.rmo-header .rmo-nav__link:link,
.rmo-header .rmo-nav__link:visited,
.rmo-header .rmo-catbtn,
.rmo-header .rmo-wa-cta:link,
.rmo-header .rmo-cart:link {
	text-decoration: none;
}

.rmo-header .rmo-nav__link:link,
.rmo-header .rmo-nav__link:visited {
	color: rgb(255 255 255 / 88%);
}

/*
 * Color explícito en cada texto del header, sin depender de heredarlo del <a>
 * contenedor: el tema colorea todos los enlaces en #212121 y ese color acababa
 * ganando, dejando "RMO INDUSTRIES" y "MI CARRITO" ilegibles sobre el negro.
 */
.rmo-header .rmo-brandmark,
.rmo-header .rmo-brandmark__name,
.rmo-header .rmo-cart,
.rmo-header .rmo-cart__label,
.rmo-header .rmo-wa-cta {
	color: #fff;
}

.rmo-header .rmo-brandmark__tagline,
.rmo-header .rmo-cart__total,
.rmo-header .rmo-cart__total .amount {
	color: rgb(255 255 255 / 72%);
}

.rmo-header .rmo-catbtn,
.rmo-header .rmo-cart__count {
	color: var(--rmo-black);
}

.rmo-header .rmo-nav__item:hover .rmo-nav__link:link,
.rmo-header .rmo-nav__link:focus-visible {
	color: var(--rmo-yellow);
}

.rmo-header__inner,
.rmo-breadcrumb__inner,
.rmo-catpanel__inner,
.rmo-footerpoints__inner {
	max-width: var(--rmo-container);
	margin-inline: auto;
	padding-inline: var(--rmo-gutter);
}

/* Títulos de sección con reglas a los lados, como en el home. */
.rmo-section-title {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 24px;
	font-size: clamp( 1rem, 0.9rem + 0.4vw, 1.15rem );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
}

.rmo-section-title.has-rules::before,
.rmo-section-title.has-rules::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--rmo-black);
}

.rmo-section-title.is-accent.has-rules::before,
.rmo-section-title.is-accent.has-rules::after {
	background: var(--rmo-yellow);
}

/* --------------------------------------------------------------- botones -- */

.rmo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--rmo-radius);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rmo-btn--primary {
	background: var(--rmo-yellow);
	color: var(--rmo-black);
}

.rmo-btn--primary:hover,
.rmo-btn--primary:focus-visible {
	background: var(--rmo-yellow-dark);
	color: var(--rmo-black);
}

.rmo-btn--wa,
.rmo-btn--ghost {
	background: var(--rmo-surface);
	border-color: var(--rmo-border-strong);
	color: var(--rmo-text);
}

.rmo-btn--wa:hover,
.rmo-btn--wa:focus-visible,
.rmo-btn--ghost:hover,
.rmo-btn--ghost:focus-visible {
	border-color: var(--rmo-black);
	color: var(--rmo-black);
}

/* El WhatsApp siempre en verde, aunque el botón sea blanco. */
.rmo-btn--wa .rmo-icon--whatsapp {
	color: #25d366;
}

/* -------------------------------------------------------- header: general -- */

.rmo-header {
	background: var(--rmo-black);
	color: #fff;
}

.rmo-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
}

.rmo-header__main > .rmo-header__inner {
	padding-block: 16px;
}

/* Identidad */

.rmo-brandmark {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	color: #fff;
	text-decoration: none;
}

.rmo-brandmark__mark {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	padding: 6px;
	background: #fff;
	border-radius: 18px;
}

.rmo-brandmark__mark img {
	display: block;
	width: 100%;
	height: auto;
}

.rmo-brandmark__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rmo-brandmark__name {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.rmo-brandmark__tagline {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgb(255 255 255 / 72%);
	text-transform: uppercase;
}

/* Buscador */

.rmo-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border-radius: var(--rmo-radius);
	overflow: hidden;
}

.rmo-search__icon {
	display: grid;
	place-items: center;
	padding-inline: 14px 6px;
	color: var(--rmo-muted);
}

.rmo-search__field {
	flex: 1 1 auto;
	min-width: 0;
	height: 54px;
	margin: 0;
	padding: 0 12px;
	background: transparent;
	border: 0;
	color: var(--rmo-text);
	font-size: 0.95rem;
}

.rmo-search__field:focus {
	outline: 0;
}

.rmo-search__field::placeholder {
	color: var(--rmo-faint);
}

.rmo-search__submit {
	flex: 0 0 auto;
	height: 54px;
	padding-inline: 28px;
	background: var(--rmo-yellow);
	border: 0;
	color: var(--rmo-black);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.rmo-search__submit:hover,
.rmo-search__submit:focus-visible {
	background: var(--rmo-yellow-dark);
}

/* Acciones: WhatsApp y carrito */

.rmo-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}

.rmo-wa-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 22px;
	background: transparent;
	border: 2px solid #fff;
	border-radius: var(--rmo-radius-pill);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.rmo-wa-cta:hover,
.rmo-wa-cta:focus-visible {
	background: #fff;
	color: var(--rmo-black);
}

.rmo-cart {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
}

.rmo-cart__icon {
	position: relative;
	display: grid;
	place-items: center;
}

.rmo-cart__count {
	position: absolute;
	top: -8px;
	right: -10px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	background: var(--rmo-yellow);
	border-radius: var(--rmo-radius-pill);
	color: var(--rmo-black);
	font-size: 0.7rem;
	font-weight: 700;
}

.rmo-cart__count.is-empty {
	display: none;
}

.rmo-cart__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.rmo-cart__label {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.rmo-cart__total {
	font-size: 0.78rem;
	color: rgb(255 255 255 / 72%);
}

.rmo-cart__total .amount {
	color: inherit;
}

/* ------------------------------------------------ header: barra inferior -- */

.rmo-header__nav {
	position: relative;
	background: var(--rmo-black-2);
	border-top: 1px solid rgb(255 255 255 / 8%);
}

.rmo-header__nav > .rmo-header__inner {
	gap: 0;
	padding-inline: 0;
}

.rmo-catbtn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	min-height: 56px;
	margin: 0;
	padding: 0 22px;
	background: var(--rmo-yellow);
	border: 0;
	color: var(--rmo-black);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.rmo-catbtn:hover,
.rmo-catbtn:focus-visible {
	background: var(--rmo-yellow-dark);
}

.rmo-catbtn .rmo-icon--chevron {
	margin-left: auto;
	transition: transform 0.15s ease;
}

.rmo-catbtn.is-open .rmo-icon--chevron {
	transform: rotate(90deg);
}

/* Navegación de categorías destacadas */

.rmo-nav {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline: 16px;
}

.rmo-nav__list {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Los nombres reales de las categorías son más largos que los del mockup, así
 * que las pestañas se encogen con elipsis en vez de desbordarse encima de los
 * beneficios. No se puede recortar la lista con overflow porque los
 * desplegables van posicionados y quedarían ocultos.
 */
.rmo-nav__item {
	position: relative;
	min-width: 0;
}

.rmo-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	min-height: 56px;
	padding-inline: 10px;
	background: transparent;
	border: 0;
	color: rgb(255 255 255 / 88%);
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.rmo-nav__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rmo-nav__item:hover .rmo-nav__link,
.rmo-nav__link:focus-visible {
	color: var(--rmo-yellow);
}

.rmo-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 280px;
	max-height: 70vh;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	background: #fff;
	border-radius: 0 0 var(--rmo-radius) var(--rmo-radius);
	box-shadow: var(--rmo-shadow-lg);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.rmo-nav__item:hover .rmo-nav__dropdown,
.rmo-nav__item:focus-within .rmo-nav__dropdown,
.rmo-nav__item.is-open .rmo-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.rmo-nav__dropdown a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--rmo-text);
	font-size: 0.88rem;
	text-decoration: none;
}

.rmo-nav__dropdown a:hover,
.rmo-nav__dropdown a:focus-visible {
	background: var(--rmo-surface-2);
	color: var(--rmo-black);
}

.rmo-nav__count {
	color: var(--rmo-faint);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

/* Beneficios del header */

.rmo-benefits {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 0 0 auto;
	margin: 0;
	padding-inline: 20px;
	list-style: none;
}

.rmo-benefits__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgb(255 255 255 / 82%);
	font-size: 0.78rem;
	white-space: nowrap;
}

.rmo-benefits__item .rmo-icon {
	color: var(--rmo-yellow);
}

/* Panel completo de categorías */

.rmo-catpanel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 55;
	background: #fff;
	box-shadow: var(--rmo-shadow-lg);
}

.rmo-catpanel__inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px 32px;
	padding-block: 28px;
}

.rmo-catpanel__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--rmo-yellow);
	color: var(--rmo-black);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.rmo-catpanel__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmo-catpanel__col li + li {
	margin-top: 2px;
}

.rmo-catpanel__col a:not(.rmo-catpanel__title) {
	display: block;
	padding: 4px 0;
	color: var(--rmo-muted);
	font-size: 0.85rem;
	text-decoration: none;
}

.rmo-catpanel__col a:not(.rmo-catpanel__title):hover {
	color: var(--rmo-black);
}

/* ------------------------------------------- ancho del contenedor y título -- */

/*
 * El contenedor de Botiga es más estrecho que el ancho del mockup, y con él no
 * caben cinco columnas de producto ni las tres columnas de la ficha. Se ensancha
 * sólo en las vistas de tienda, para no alterar el blog ni las páginas.
 */
.rmo-redesign.woocommerce .container,
.rmo-redesign.woocommerce-page .container,
.rmo-redesign.woocommerce main#primary,
.rmo-redesign.woocommerce-page main#primary {
	max-width: var(--rmo-container);
}

.rmo-pagehead__inner {
	max-width: var(--rmo-container);
	margin-inline: auto;
	padding: 28px var(--rmo-gutter) 0;
}

.rmo-pagehead__title {
	margin: 0;
	font-size: clamp( 1.5rem, 1.2rem + 1vw, 2rem );
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: left;
	text-transform: uppercase;
}

/* ----------------------------------------------------------- breadcrumbs -- */

/*
 * Sólo se muestran las migas de la franja propia. Botiga las imprime también en
 * su cabecera de página, y quedaban duplicadas.
 */
.rmo-redesign .woocommerce-breadcrumb {
	display: none;
}

.rmo-redesign .rmo-breadcrumb .woocommerce-breadcrumb {
	display: block;
}

.rmo-breadcrumb {
	background: #fff;
	border-bottom: 1px solid var(--rmo-border);
}

.rmo-breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	padding-block: 14px;
	color: var(--rmo-muted);
	font-size: 0.82rem;
}

.rmo-breadcrumb .woocommerce-breadcrumb a {
	color: var(--rmo-muted);
	text-decoration: none;
}

.rmo-breadcrumb .woocommerce-breadcrumb a:hover {
	color: var(--rmo-black);
}

.rmo-breadcrumb .woocommerce-breadcrumb span + span::before {
	content: "›";
	margin-inline: 8px;
	color: var(--rmo-border-strong);
}

/* --------------------------------------------------------------- marcas -- */

.rmo-brand {
	display: block;
	margin-bottom: 6px;
	color: var(--rmo-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.rmo-brand a {
	color: inherit;
	text-decoration: none;
}

/*
 * Logotipos de marca. Se normaliza la altura y se deja que el ancho lo decida
 * cada logotipo: si se forzaran los dos, unos saldrían deformados y otros
 * diminutos, porque las proporciones varían mucho entre marcas.
 */
.rmo-brand.has-logo {
	line-height: 0;
}

.rmo-brand__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 22px;
	object-fit: contain;
	object-position: left center;
}

.rmo-brandstrip__list .rmo-brand.has-logo {
	display: grid;
	place-items: center;
	width: 100%;
	min-width: 0;
}

.rmo-brandstrip__list .rmo-brand__logo {
	max-width: 100%;
	max-height: clamp( 26px, 2.4vw, 40px );
	object-position: center;
	transition: opacity 0.15s ease;
}

.rmo-brandstrip__list a:hover .rmo-brand__logo {
	opacity: 0.7;
}

/* En la ficha el logotipo puede ser algo mayor que en las tarjetas. */
.single-product.rmo-redesign .summary .rmo-brand__logo {
	max-height: 30px;
}

.rmo-nav__dropdown .rmo-brand__logo {
	max-height: 18px;
}

/*
 * Color propio de las marcas más habituales del catálogo. Es sólo el color
 * corporativo aplicado al texto; no se usan sus logotipos.
 */
.rmo-brand[data-brand="siemens"] { color: #099; }
.rmo-brand[data-brand="omron"] { color: #0066b3; }
.rmo-brand[data-brand="allen-bradley"] { color: #1b3f8b; }
.rmo-brand[data-brand="mitsubishi-electric"] { color: #e60012; }
.rmo-brand[data-brand="abb"] { color: #ff000f; }
.rmo-brand[data-brand="schneider-electric"] { color: #3dcd58; }
.rmo-brand[data-brand="general-electric"] { color: #3874ba; }
.rmo-brand[data-brand="eaton"] { color: #0b3d91; }
.rmo-brand[data-brand="festo"] { color: #0091dc; }
.rmo-brand[data-brand="sick"] { color: #1b62a8; }
.rmo-brand[data-brand="keyence"] { color: #0d3b8c; }
.rmo-brand[data-brand="honeywell"] { color: #e01f26; }
.rmo-brand[data-brand="yaskawa"] { color: #0055a4; }
.rmo-brand[data-brand="balluff"] { color: #005ca9; }
.rmo-brand[data-brand="turck"] { color: #f7a600; }
.rmo-brand[data-brand="banner"] { color: #f0a000; }

/* --------------------------------------------- disponibilidad y sellos -- */

.rmo-stock {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
}

.rmo-stock.is-in {
	color: var(--rmo-green);
}

.rmo-stock.is-out {
	color: var(--rmo-red);
}

.rmo-stock-qty,
.rmo-cart-stock {
	color: var(--rmo-muted);
	font-size: 0.78rem;
}

.rmo-cart-stock {
	margin-top: 6px;
}

.rmo-loop-sku,
.rmo-partnumber {
	color: var(--rmo-faint);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------- tarjeta de producto -- */

/*
 * Grid explícito para los listados. Botiga trae su propio sistema por clases
 * `columns-N`, pero se declara aquí para no depender de que soporte 5 columnas
 * y para que el ancho mínimo de tarjeta manda sobre el número de columnas.
 */
.rmo-redesign ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cinco columnas fijas en escritorio, como en el mockup. */
@media ( min-width: 1200px ) {
	.rmo-redesign ul.products {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.rmo-redesign ul.products::before,
.rmo-redesign ul.products::after {
	content: none;
}

.rmo-redesign ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius-lg);
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rmo-redesign ul.products li.product:hover {
	border-color: var(--rmo-border-strong);
	box-shadow: var(--rmo-shadow-lg);
}

.rmo-redesign ul.products li.product .loop-image-wrap {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin-bottom: 14px;
	overflow: hidden;
}

.rmo-redesign ul.products li.product img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.rmo-redesign ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 4px;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
}

.rmo-redesign ul.products li.product .woocommerce-loop-product__title a {
	color: var(--rmo-text);
	text-decoration: none;
}

.rmo-redesign ul.products li.product .price {
	display: block;
	margin: 10px 0 8px;
	color: var(--rmo-black);
	font-size: 1.15rem;
	font-weight: 700;
}

.rmo-redesign ul.products li.product .price .woocommerce-price-suffix {
	display: block;
	color: var(--rmo-faint);
	font-size: 0.7rem;
	font-weight: 500;
}

/*
 * Se oculta el botón de Botiga: el suyo va dentro del contenedor de la imagen y
 * sólo se revela al pasar el ratón, y además deja un `.loop-button-wrap` vacío
 * después del precio. El botón visible es el de `.rmo-loop-cart`.
 */
.rmo-redesign ul.products li.product .loop-image-wrap .loop-button-wrap,
.rmo-redesign ul.products li.product .loop-image-wrap .add_to_cart_button,
.rmo-redesign ul.products li.product > .loop-button-wrap {
	display: none !important;
}

/* El botón queda pegado al fondo para que todas las tarjetas cierren igual. */
.rmo-redesign ul.products li.product .rmo-loop-cart {
	margin-top: auto;
	padding-top: 12px;
}

/*
 * `display` con !important: para su layout por defecto Botiga oculta el botón
 * con `display: none` y lo revela al pasar el ratón sobre la tarjeta. Aquí va
 * siempre visible, que es lo que pide el mockup y lo único que funciona en
 * pantallas táctiles.
 *
 * `text-decoration` explícito porque el botón es un <a>.
 */
.rmo-redesign ul.products li.product .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	background: var(--rmo-yellow);
	border: 0;
	border-radius: var(--rmo-radius);
	color: var(--rmo-black);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.rmo-redesign ul.products li.product .button:hover {
	background: var(--rmo-yellow-dark);
	color: var(--rmo-black);
}

/* -------------------------------------------------- catálogo con filtros -- */

.rmo-shop main#primary {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 0 32px;
	align-items: start;
	max-width: var(--rmo-container);
	margin-inline: auto;
	padding-inline: var(--rmo-gutter);
}

/* Todo cae en la columna derecha salvo la barra de filtros. */
.rmo-shop main#primary > * {
	grid-column: 2;
	min-width: 0;
}

.rmo-shop main#primary > .rmo-filters {
	grid-column: 1;
	grid-row: 1 / span 100;
}

.rmo-shop main#primary > .rmo-filters-toggle {
	display: none;
}

.rmo-filters {
	position: sticky;
	top: 20px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius-lg);
}

.rmo-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.rmo-filters__title {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.rmo-filters__clear {
	flex: 0 0 auto;
	color: var(--rmo-yellow-dark);
	font-size: 0.76rem;
	text-decoration: none;
	white-space: nowrap;
}

.rmo-filters__clear:hover {
	text-decoration: underline;
}

.rmo-filters__group + .rmo-filters__group {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--rmo-border);
}

.rmo-filters__label {
	margin: 0 0 12px;
	color: var(--rmo-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rmo-filters__up {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--rmo-muted);
	font-size: 0.8rem;
}

.rmo-filters__cats,
.rmo-filters__brands {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmo-filters__cats a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	color: var(--rmo-text);
	font-size: 0.88rem;
	text-decoration: none;
}

.rmo-filters__cats a:hover {
	color: var(--rmo-yellow-dark);
}

.rmo-filters__cats span:first-child {
	flex: 1 1 auto;
}

.rmo-filters__cats .rmo-icon {
	color: var(--rmo-border-strong);
}

.rmo-filters__cats li.is-current > a {
	color: var(--rmo-yellow-dark);
	font-weight: 700;
}

.rmo-filters__count {
	color: var(--rmo-faint);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

.rmo-filters__search {
	width: 100%;
	height: 38px;
	margin-bottom: 12px;
	padding: 0 12px;
	border: 1px solid var(--rmo-border);
	border-radius: 6px;
	font-size: 0.85rem;
}

/* Casillas de marca: son enlaces, así funcionan sin JavaScript. */
.rmo-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	color: var(--rmo-text);
	font-size: 0.88rem;
	text-decoration: none;
}

.rmo-check__box {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: #fff;
	border: 1.5px solid var(--rmo-border-strong);
	border-radius: 4px;
	color: var(--rmo-black);
}

.rmo-check.is-checked .rmo-check__box {
	background: var(--rmo-yellow);
	border-color: var(--rmo-yellow);
}

.rmo-check__label {
	flex: 1 1 auto;
}

.rmo-check.is-checked .rmo-check__label {
	font-weight: 700;
}

.rmo-filters__more {
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--rmo-yellow-dark);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}

.rmo-price__inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.rmo-price__inputs label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--rmo-muted);
	font-size: 0.75rem;
}

.rmo-price__inputs input {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--rmo-border);
	border-radius: 6px;
	font-size: 0.85rem;
}

.rmo-price__submit {
	width: 100%;
	min-height: 40px;
	margin-top: 12px;
	background: var(--rmo-black);
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

.rmo-price__submit:hover {
	background: var(--rmo-black-2);
}

.rmo-filters-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid var(--rmo-border-strong);
	border-radius: var(--rmo-radius);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------- ficha de producto -- */

/*
 * Columnas en fracciones, no en píxeles: el contenedor de Botiga es más
 * estrecho que el ancho del mockup (≈1110 px), y con anchos fijos la columna
 * central se quedaba sin espacio. El panel de compra lleva un mínimo porque
 * dentro caben los botones de Apple Pay y Google Pay.
 */
.single-product.rmo-redesign .product-gallery-summary {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(300px, 0.95fr);
	gap: 32px;
	align-items: start;
	max-width: var(--rmo-container);
	margin-inline: auto;
}

/*
 * WooCommerce y Botiga fijan `max-width: 50%` a la galería y al resumen para su
 * layout de dos columnas. Dentro de este grid de tres columnas eso los
 * estrangulaba a la mitad de su pista: hay que anular el max-width, no sólo el
 * width, porque el max-width gana.
 */
.single-product.rmo-redesign .woocommerce-product-gallery,
.single-product.rmo-redesign .summary.entry-summary {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

.single-product.rmo-redesign .woocommerce-product-gallery {
	position: sticky;
	top: 20px;
	padding: 20px;
	background: var(--rmo-surface-2);
	border-radius: var(--rmo-radius-lg);
}

.single-product.rmo-redesign .summary.entry-summary {
	margin: 0 !important;
	padding: 0 !important;
}

.single-product.rmo-redesign .product_title {
	margin: 4px 0 8px;
	font-size: clamp( 1.35rem, 1.1rem + 0.8vw, 1.75rem );
	font-weight: 700;
	line-height: 1.22;
	/* Los números de parte largos no tienen espacios donde cortar. */
	overflow-wrap: break-word;
}

.rmo-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 14px 0;
}

.rmo-rating {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rmo-rating .star-rating {
	color: var(--rmo-yellow);
}

.rmo-rating__count {
	color: var(--rmo-muted);
	font-size: 0.82rem;
	text-decoration: none;
}

.rmo-rating__count:hover {
	text-decoration: underline;
}

.rmo-sku {
	color: var(--rmo-muted);
	font-size: 0.82rem;
}

.rmo-sku span {
	color: var(--rmo-text);
	font-variant-numeric: tabular-nums;
}

.single-product.rmo-redesign .woocommerce-product-details__short-description {
	color: #374151;
	font-size: 0.95rem;
	line-height: 1.6;
}

.rmo-availability {
	margin: 18px 0;
}

/* Sellos de confianza */

/*
 * `auto-fit` en lugar de tres columnas fijas: en la columna central real
 * (≈400 px) los tres sellos se pisaban entre sí. Así se reacomodan solos.
 */
.rmo-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px 0;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--rmo-border);
	list-style: none;
}

.rmo-trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding-inline: 14px;
}

.rmo-trust__item + .rmo-trust__item {
	border-left: 1px solid var(--rmo-border);
}

.rmo-trust__item:first-child {
	padding-left: 0;
}

.rmo-trust__item .rmo-icon {
	color: var(--rmo-black);
}

.rmo-trust__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.rmo-trust__text strong {
	font-size: 0.85rem;
	font-weight: 700;
}

.rmo-trust__text em {
	color: var(--rmo-muted);
	font-size: 0.78rem;
	font-style: normal;
}

/* Panel de compra */

.rmo-buybox {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rmo-buybox__card {
	padding: 22px;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius-lg);
	box-shadow: var(--rmo-shadow);
}

.rmo-buybox__price {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rmo-border);
}

.rmo-buybox__price-label {
	display: block;
	margin-bottom: 4px;
	color: var(--rmo-muted);
	font-size: 0.82rem;
}

.rmo-buybox__price .price {
	display: block;
	margin: 0;
	color: var(--rmo-black);
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1.15;
}

.rmo-buybox__price .woocommerce-price-suffix {
	display: block;
	margin-top: 2px;
	color: var(--rmo-muted);
	font-size: 0.78rem;
	font-weight: 500;
}

/*
 * Bloque del mu-plugin "RMO Dynamic Delivery".
 *
 * Ese plugin imprime `.rmo-pdp-info` (entrega estimada y aviso de moneda) y su
 * JS lo reubica justo después de `.price`. Como aquí el precio vive en el panel
 * de compra, el bloque acaba dentro de la tarjeta: se reestiliza para que se vea
 * nativo. Lleva `!important` porque el plugin usa estilos en línea, que de otro
 * modo ganan sobre esta hoja.
 */
.rmo-buybox .rmo-pdp-info {
	margin: 14px 0 0 !important;
	padding-top: 14px;
	border-top: 1px solid var(--rmo-border);
}

.rmo-buybox .rmo-pdp-info .rmo-eta-summary {
	margin: 0 0 8px !important;
	padding: 10px 12px !important;
	background: #f0fdf4 !important;
	border-left: 3px solid var(--rmo-green) !important;
	border-radius: var(--rmo-radius) !important;
	font-size: 0.85rem !important;
	line-height: 1.4 !important;
}

.rmo-buybox .rmo-pdp-info .rmo-locale-notice {
	margin: 0 !important;
	color: var(--rmo-muted) !important;
	font-size: 0.78rem !important;
	line-height: 1.45 !important;
}

.rmo-buybox__stock {
	margin-top: 16px;
}

.rmo-buybox__cart {
	margin-top: 12px;
}

.rmo-buybox__cart .quantity {
	margin-bottom: 14px;
}

.rmo-buybox__cart .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	background: var(--rmo-yellow);
	border: 0;
	border-radius: var(--rmo-radius);
	color: var(--rmo-black);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.rmo-buybox__cart .single_add_to_cart_button:hover {
	background: var(--rmo-yellow-dark);
	color: var(--rmo-black);
}

.rmo-buybox .rmo-btn--wa {
	width: 100%;
	margin-top: 12px;
}

/* Pago express de Stripe (Apple Pay / Google Pay): contenido dentro de la tarjeta. */
.rmo-buybox #wc-stripe-express-checkout-element {
	margin-top: 14px;
}

.rmo-buybox #wc-stripe-express-checkout-element > * {
	max-width: 100%;
}

.rmo-buybox .wc-stripe-express-checkout__separator,
.rmo-buybox #wc-stripe-express-checkout-button-separator {
	margin-block: 12px;
}


/* Caja de cotización formal */

.rmo-quotebox {
	margin-top: 18px;
	padding: 16px;
	background: var(--rmo-cream);
	border: 1px solid #f5e3b8;
	border-radius: var(--rmo-radius);
}

.rmo-quotebox strong {
	display: block;
	margin-bottom: 4px;
	font-size: 0.88rem;
}

.rmo-quotebox p {
	margin: 0 0 8px;
	color: var(--rmo-muted);
	font-size: 0.82rem;
	line-height: 1.45;
}

.rmo-quotebox a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rmo-yellow-dark);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: underline;
}

/* Por qué comprar con nosotros */

.rmo-buybox__why {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius-lg);
}

.rmo-buybox__why-title {
	margin: 0 0 16px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.rmo-buybox__why ul {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmo-buybox__why li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.rmo-buybox__why li .rmo-icon {
	margin-top: 2px;
	color: var(--rmo-black);
}

.rmo-buybox__why li span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.rmo-buybox__why li strong {
	font-size: 0.86rem;
	font-weight: 700;
}

.rmo-buybox__why li em {
	color: var(--rmo-muted);
	font-size: 0.8rem;
	font-style: normal;
}

/* Pestañas */

.rmo-redesign .woocommerce-tabs {
	max-width: var(--rmo-container);
	margin-inline: auto;
	padding-inline: var(--rmo-gutter);
}

.rmo-redesign .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 28px;
	padding: 0;
	border-bottom: 1px solid var(--rmo-border);
	list-style: none;
	overflow-x: auto;
}

.rmo-redesign .woocommerce-tabs ul.tabs::before,
.rmo-redesign .woocommerce-tabs ul.tabs::after,
.rmo-redesign .woocommerce-tabs ul.tabs li::before,
.rmo-redesign .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.rmo-redesign .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.rmo-redesign .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 18px;
	border-bottom: 3px solid transparent;
	color: var(--rmo-muted);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.rmo-redesign .woocommerce-tabs ul.tabs li.active a,
.rmo-redesign .woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var(--rmo-yellow);
	color: var(--rmo-black);
}

.rmo-redesign .woocommerce-Tabs-panel h2:first-child {
	display: none;
}

.rmo-redesign .shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.rmo-redesign .shop_attributes th,
.rmo-redesign .shop_attributes td {
	padding: 11px 14px;
	border: 1px solid var(--rmo-border);
	font-size: 0.87rem;
	text-align: left;
}

.rmo-redesign .shop_attributes th {
	width: 38%;
	background: var(--rmo-surface-2);
	font-weight: 600;
}

.rmo-documents {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmo-documents a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius);
	color: var(--rmo-text);
	font-size: 0.88rem;
	text-decoration: none;
}

.rmo-documents a:hover {
	border-color: var(--rmo-black);
}

/* Selector de cantidad */

.quantity.rmo-qty {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--rmo-border-strong);
	border-radius: var(--rmo-radius);
}

.rmo-qty__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 44px;
	background: none;
	border: 0;
	color: var(--rmo-text);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.rmo-qty__btn:hover {
	background: var(--rmo-surface-2);
}

.quantity.rmo-qty input.qty {
	width: 52px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-inline: 1px solid var(--rmo-border);
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

.quantity.rmo-qty input.qty::-webkit-outer-spin-button,
.quantity.rmo-qty input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* --------------------------------------------------------------- carrito -- */

.woocommerce-cart.rmo-redesign .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 32px;
	align-items: start;
	max-width: var(--rmo-container);
	margin-inline: auto;
}

.woocommerce-cart.rmo-redesign .woocommerce-notices-wrapper,
.woocommerce-cart.rmo-redesign .cross-sells {
	grid-column: 1 / -1;
}

.woocommerce-cart.rmo-redesign .shop_table.cart {
	margin: 0;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-collapse: separate;
	border-radius: var(--rmo-radius-lg);
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce-cart.rmo-redesign .shop_table.cart thead th {
	padding: 14px 16px;
	background: var(--rmo-surface-2);
	border-bottom: 1px solid var(--rmo-border);
	color: var(--rmo-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-align: left;
	text-transform: uppercase;
}

.woocommerce-cart.rmo-redesign .shop_table.cart td {
	padding: 18px 16px;
	border-bottom: 1px solid var(--rmo-border);
	vertical-align: middle;
}

.woocommerce-cart.rmo-redesign .shop_table.cart .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.woocommerce-cart.rmo-redesign .shop_table.cart .product-name a {
	color: var(--rmo-text);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-cart.rmo-redesign .product-price,
.woocommerce-cart.rmo-redesign .product-subtotal {
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce-cart.rmo-redesign .product-remove a.remove {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: none;
	border-radius: 6px;
	color: var(--rmo-faint) !important;
	font-size: 1.1rem;
}

.woocommerce-cart.rmo-redesign .product-remove a.remove:hover {
	background: #fef2f2;
	color: var(--rmo-red) !important;
}

/* Cupón */

.woocommerce-cart.rmo-redesign .coupon {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius-lg);
}

.woocommerce-cart.rmo-redesign .coupon label {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
}

.woocommerce-cart.rmo-redesign .coupon #coupon_code {
	flex: 1 1 180px;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--rmo-border);
	border-radius: 6px;
}

.woocommerce-cart.rmo-redesign .coupon button {
	height: 42px;
	padding-inline: 20px;
	background: var(--rmo-yellow);
	border: 0;
	border-radius: 6px;
	color: var(--rmo-black);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Resumen del pedido */

.rmo-summary {
	position: sticky;
	top: 20px;
	width: 100% !important;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius-lg);
	box-shadow: var(--rmo-shadow);
}

.rmo-summary__title {
	margin: 0 0 18px;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rmo-summary__table {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
	border-collapse: collapse;
}

.rmo-summary__table th,
.rmo-summary__table td {
	padding: 9px 0;
	border: 0;
	font-size: 0.88rem;
	font-weight: 400;
	text-align: left;
}

.rmo-summary__table td {
	text-align: right;
	white-space: nowrap;
}

.rmo-summary__count {
	color: var(--rmo-faint);
	font-size: 0.8rem;
}

.rmo-summary__muted {
	color: var(--rmo-muted);
	font-size: 0.82rem;
}

.rmo-summary__hint .rmo-icon {
	color: var(--rmo-faint);
	vertical-align: -2px;
}

/* El IVA informativo se distingue del que se suma. */
.rmo-summary__table .rmo-tax-included th,
.rmo-summary__table .rmo-tax-included td {
	color: var(--rmo-muted);
	font-size: 0.82rem;
}

.rmo-summary__table .order-total th,
.rmo-summary__table .order-total td {
	padding-top: 16px;
	border-top: 1px solid var(--rmo-border);
	font-size: 1.05rem;
	font-weight: 700;
}

.rmo-summary__table .order-total td {
	font-size: 1.3rem;
}

.rmo-summary .wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
}

.rmo-summary .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 20px;
	background: var(--rmo-yellow);
	border-radius: var(--rmo-radius);
	color: var(--rmo-black);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.rmo-summary .checkout-button:hover {
	background: var(--rmo-yellow-dark);
	color: var(--rmo-black);
}

.rmo-secure {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 4px 0 0;
}

.rmo-secure .rmo-icon {
	margin-top: 2px;
	color: var(--rmo-green);
}

.rmo-secure span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.rmo-secure strong {
	font-size: 0.85rem;
}

.rmo-secure em {
	color: var(--rmo-muted);
	font-size: 0.78rem;
	font-style: normal;
}

/* ------------------------------------------------------------------ home -- */

/*
 * En la portada el título de la página no aporta nada.
 * Botiga lo imprime en `.entry-header`, dentro de la plantilla de página.
 */
.rmo-redesign.home .entry-header {
	display: none;
}

/*
 * El hero va de borde a borde aunque viva dentro del contenido de la página,
 * que está limitado al ancho de lectura.
 */
.rmo-hero {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.rmo-hero {
	position: relative;
	padding: 56px var(--rmo-gutter) 72px;
	background: linear-gradient(180deg, #1b1a17 0%, #7e5d10 55%, #c48d16 100%);
	color: #fff;
	text-align: center;
	isolation: isolate;
}

/* La foto va detrás del degradado, que se mantiene para dar contraste. */
.rmo-hero.has-image::before {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--rmo-hero-image);
	background-position: center;
	background-size: cover;
	content: "";
}

.rmo-hero.has-image::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(10 10 9 / 78%) 0%, rgb(126 93 16 / 82%) 55%, rgb(196 141 22 / 88%) 100%);
	content: "";
}

.rmo-hero__inner {
	max-width: 820px;
	margin-inline: auto;
}

.rmo-hero__logo img {
	width: 150px;
	height: auto;
	padding: 10px;
	background: #fff;
	border-radius: 32px;
}

.rmo-hero__name {
	margin: 18px 0 2px;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rmo-hero__tagline {
	margin: 0 0 32px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rmo-hero__search .rmo-search {
	border-radius: var(--rmo-radius-pill);
	box-shadow: var(--rmo-shadow-lg);
}

.rmo-hero__search .rmo-search__field {
	height: 62px;
	font-size: 1.05rem;
}

.rmo-hero__search .rmo-search__icon {
	padding-inline: 22px 4px;
}

/* En la portada el botón de enviar se oculta: el buscador es la protagonista. */
.rmo-hero__search .rmo-search__submit {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.rmo-hero__examples {
	margin: 12px 0 0;
	color: rgb(255 255 255 / 82%);
	font-size: 0.82rem;
}

.rmo-hero__title {
	margin: 40px 0 0;
	font-size: clamp( 1.9rem, 1.3rem + 2.6vw, 3.1rem );
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.06;
	text-transform: uppercase;
}

/*
 * Color explícito: el h1 hereda el color de titulares del tema, que es oscuro,
 * y sobre el degradado no se leía.
 */
.rmo-hero__title span {
	display: block;
	color: #fff;
}

.rmo-hero__title .is-accent,
.rmo-hero__subtitle .is-accent {
	color: var(--rmo-yellow-light);
}

/*
 * El subtítulo cae en la parte clara del degradado, donde el texto blanco no
 * contrasta. Va en oscuro, como en el mockup.
 */
.rmo-hero__subtitle {
	margin: 22px 0 0;
	color: #241b04;
	font-size: clamp( 0.95rem, 0.85rem + 0.4vw, 1.1rem );
	font-weight: 600;
}

.rmo-hero__subtitle .is-accent {
	display: block;
	color: #4a3a08;
}

.rmo-hero__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 34px;
}

.rmo-hero__actions .rmo-btn {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Franja de marcas */

.rmo-brandstrip,
.rmo-benefitcard,
.rmo-categories {
	max-width: var(--rmo-container);
	margin-inline: auto;
	padding: 48px var(--rmo-gutter) 0;
}

/*
 * Rejilla de columnas iguales en vez de flex: con anchos libres, los logotipos
 * anchos (Allen-Bradley, Omron) empujaban al último a una segunda fila. Así
 * cada marca ocupa lo mismo y el reparto queda parejo, como en el mockup.
 */
.rmo-brandstrip__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	align-items: center;
	justify-items: center;
	gap: 20px clamp( 12px, 1.6vw, 28px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmo-brandstrip__list li {
	display: grid;
	place-items: center;
	width: 100%;
	min-width: 0;
}

.rmo-brandstrip__list .rmo-brand {
	margin: 0;
	font-size: clamp( 0.85rem, 0.7rem + 0.5vw, 1.15rem );
	font-weight: 800;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Tarjeta de beneficios */

.rmo-benefitcard ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius-lg);
	list-style: none;
}

.rmo-benefitcard li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-inline: 24px;
}

.rmo-benefitcard li + li {
	border-left: 1px solid var(--rmo-border);
}

.rmo-benefitcard li:first-child {
	padding-left: 0;
}

.rmo-benefitcard span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.rmo-benefitcard strong {
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
}

.rmo-benefitcard em {
	color: var(--rmo-muted);
	font-size: 0.85rem;
	font-style: normal;
}

/* Cuadrícula de categorías */

.rmo-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmo-categories__grid a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 24px 16px;
	background: #fff;
	border: 1px solid var(--rmo-border);
	border-radius: var(--rmo-radius-lg);
	color: var(--rmo-text);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rmo-categories__grid a:hover {
	border-color: var(--rmo-black);
	box-shadow: var(--rmo-shadow-lg);
}

.rmo-categories__icon {
	display: grid;
	place-items: center;
	min-height: 56px;
}

.rmo-categories__icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.rmo-categories__name {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.rmo-categories__count {
	color: var(--rmo-faint);
	font-size: 0.75rem;
}

/* ------------------------------------------------------- franja del pie -- */

.rmo-footerpoints {
	background: var(--rmo-black);
	color: #fff;
}

.rmo-footerpoints__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding-block: 32px;
	list-style: none;
}

.rmo-footerpoints li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.rmo-footerpoints .rmo-icon {
	color: var(--rmo-yellow);
}

.rmo-footerpoints span {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.rmo-footerpoints strong {
	font-size: 0.92rem;
	font-weight: 700;
}

.rmo-footerpoints em {
	color: rgb(255 255 255 / 70%);
	font-size: 0.82rem;
	font-style: normal;
}

/* Aviso legal: razón social, aviso de privacidad, términos y contacto. */
.rmo-footerlegal {
	border-top: 1px solid rgb(255 255 255 / 12%);
}

.rmo-footerlegal__inner {
	max-width: var(--rmo-container);
	margin-inline: auto;
	padding: 18px var(--rmo-gutter);
	color: rgb(255 255 255 / 62%);
	font-size: 0.78rem;
	line-height: 1.7;
	text-align: center;
}

.rmo-footerlegal__inner strong {
	color: rgb(255 255 255 / 82%);
}

.rmo-footerlegal__inner a {
	color: rgb(255 255 255 / 78%);
	text-decoration: none;
	border-bottom: 1px solid rgb(255 255 255 / 25%);
}

.rmo-footerlegal__inner a:hover,
.rmo-footerlegal__inner a:focus-visible {
	color: var(--rmo-yellow);
	border-bottom-color: var(--rmo-yellow);
}

/*
 * En la portada el hero arranca pegado a la barra de categorías. Botiga separa
 * el contenido del header con 80 px de margen, que ahí sobran.
 */
.rmo-redesign.home .container.content-wrapper {
	margin-top: 0;
}

/* ------------------------------------------------ widgets flotantes -- */

/*
 * Sin pie de página el contenido terminaba pegado al borde inferior, y los
 * widgets fijos (aviso de cookies abajo a la izquierda, WhatsApp abajo a la
 * derecha) tapaban la última fila. Este espacio los deja convivir.
 */
.rmo-redesign #page.site {
	padding-bottom: 120px;
}

/*
 * Los dos widgets son de plugins y se posicionan solos. Aquí sólo se acota su
 * tamaño para que en pantallas estrechas no se salgan ni se solapen entre sí.
 */
.rmo-redesign .cky-consent-container {
	max-width: min(420px, calc(100vw - 32px));
}

.rmo-redesign .joinchat__box {
	max-width: min(320px, calc(100vw - 32px));
}

@media ( max-width: 782px ) {
	/* En móvil no caben lado a lado: el aviso ocupa el ancho y sube al WhatsApp. */
	.rmo-redesign .cky-consent-container {
		max-width: calc(100vw - 24px);
	}

	.rmo-redesign .joinchat {
		bottom: 12px;
	}

	.rmo-redesign #page.site {
		padding-bottom: 160px;
	}
}

/* --------------------------------------------------------------- responsive */

/* Los beneficios sólo caben junto a la navegación en pantallas anchas. */
@media ( max-width: 1400px ) {
	.rmo-benefits {
		display: none;
	}
}

@media ( max-width: 1200px ) {
	.single-product.rmo-redesign .product-gallery-summary {
		grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	}

	.rmo-buybox {
		position: static;
		grid-column: 1 / -1;
	}

	.rmo-buybox__card,
	.rmo-buybox__why {
		max-width: none;
	}
}

@media ( max-width: 1024px ) {
	.rmo-header__main > .rmo-header__inner {
		flex-wrap: wrap;
	}

	.rmo-search {
		order: 3;
		flex-basis: 100%;
	}

	.woocommerce-cart.rmo-redesign .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.rmo-summary {
		position: static;
	}

	.rmo-shop main#primary {
		grid-template-columns: minmax(0, 1fr);
	}

	.rmo-shop main#primary > * {
		grid-column: 1;
	}

	.rmo-shop main#primary > .rmo-filters {
		grid-column: 1;
		grid-row: auto;
	}

	.rmo-shop main#primary > .rmo-filters-toggle {
		display: flex;
	}

	.rmo-filters {
		position: static;
		display: none;
	}

	.rmo-filters.is-open {
		display: block;
		margin-bottom: 20px;
	}

	.rmo-footerpoints__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media ( max-width: 782px ) {
	.single-product.rmo-redesign .product-gallery-summary {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.single-product.rmo-redesign .woocommerce-product-gallery {
		position: static;
	}

	.rmo-trust,
	.rmo-benefitcard ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.rmo-trust__item,
	.rmo-benefitcard li {
		padding: 12px 0;
	}

	.rmo-trust__item + .rmo-trust__item,
	.rmo-benefitcard li + li {
		border-left: 0;
		border-top: 1px solid var(--rmo-border);
	}

	.rmo-hero {
		padding-block: 40px 52px;
	}

	.rmo-footerpoints__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * El header propio es sólo para escritorio; en móvil manda el de Botiga,
 * que conserva el menú lateral y el mini carrito.
 */
@media ( max-width: 991px ) {
	.rmo-header {
		display: none;
	}
}

@media ( min-width: 992px ) {
	.rmo-redesign .bhfb-mobile {
		display: none;
	}
}