/* =========================================================
   Royal Shop — estilos del tema
   Identidad: Naranja #FC4B08 · Negro deportivo · Inter
   ========================================================= */

:root {
	--rs-orange: #fc4b08;
	--rs-orange-dark: #d93e05;
	--rs-cream: #f1e9bb;
	--rs-black: #14110f;
	--rs-ink: #1d1d1f;
	--rs-ink-muted: #4a4a4f;
	--rs-gray: #6e6e73;
	--rs-line: #e5e5e7;
	--rs-bg: #ffffff;
	--rs-bg-alt: #f5f5f7;
	--rs-radius: 10px;
	--rs-radius-lg: 18px;
	--rs-container: 1200px;
	--rs-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--rs-font-head: var(--rs-font);
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--rs-font);
	color: var(--rs-ink);
	background: var(--rs-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--rs-orange); text-decoration: none; }
a:hover { color: var(--rs-orange-dark); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--rs-font-head); line-height: 1.15; color: var(--rs-ink); letter-spacing: -.01em; }

.rs-container {
	width: 100%;
	max-width: var(--rs-container);
	margin-inline: auto;
	padding-inline: 20px;
}
.section-pad { padding: 72px 0; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.rs-skip-link:focus {
	position: fixed; left: 12px; top: 12px; z-index: 999;
	background: var(--rs-black); color: #fff; padding: 10px 16px;
	border-radius: 8px; clip: auto; width: auto; height: auto;
}

.rs-eyebrow {
	display: inline-block; text-transform: uppercase; letter-spacing: .14em;
	font-size: .74rem; font-weight: 700; color: var(--rs-orange); margin-bottom: 10px;
}

/* ---------- Botones ---------- */
.rs-btn {
	display: inline-flex; align-items: center; gap: .5em;
	padding: 14px 28px; border-radius: 999px;
	font-weight: 600; font-size: 1rem; line-height: 1;
	border: 2px solid transparent; cursor: pointer; transition: .18s ease;
}
.rs-btn--primary { background: var(--rs-orange); color: #fff; }
.rs-btn--primary:hover { background: var(--rs-orange-dark); color: #fff; transform: translateY(-1px); }
.rs-btn--light { background: #fff; color: var(--rs-ink); }

/* ---------- Header ---------- */
.rs-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--rs-line);
	transition: box-shadow .2s ease;
}
.rs-header.is-scrolled { box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.rs-header__inner { display: flex; align-items: center; gap: 24px; min-height: 74px; }
.rs-header__brand { flex: 1 1 0; }
.rs-header__brand img, .custom-logo { max-height: 46px; width: auto; }
.rs-logo-text { font-family: var(--rs-font-head); font-weight: 700; font-size: 1.3rem; color: var(--rs-ink); }
.rs-logo-text--light { color: #fff; }

.rs-nav { flex: 0 0 auto; }
.rs-nav__head { display: none; }
.rs-menu, .rs-footer__menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 30px;
}
.rs-menu > li { position: relative; }
/* Barra de navegación al estilo de Apple: texto chico, gris de reposo que se
   oscurece al pasar el mouse, y nada de subrayados ni acentos de color. El
   color se reserva para los botones de acción; el menú acompaña. */
.rs-menu a, .rs-menu__toggle {
	color: var(--rs-ink-muted); font-weight: 400; font-size: .82rem;
	letter-spacing: -.01em;
	padding: 8px 0; background: none; border: 0; cursor: pointer;
	font-family: inherit; display: inline-flex; align-items: center; gap: 4px;
	transition: color .18s ease;
}
.rs-menu a:hover, .rs-menu__toggle:hover { color: var(--rs-ink); }
.rs-menu .current-menu-item > a, .rs-menu .current_page_item > a { color: var(--rs-ink); }

/* Submenú de categorías */
.rs-submenu {
	position: absolute; top: calc(100% + 12px); left: 0; z-index: 30;
	min-width: 230px; margin: 0; padding: 8px;
	list-style: none; background: #fff;
	border: 1px solid var(--rs-line); border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0,0,0,.14);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* Puente invisible sobre el hueco de 12px: sin esto el submenú se cierra al
   mover el mouse desde el botón hacia la lista, porque en el camino sale de
   los dos elementos. */
.rs-menu__parent .rs-submenu::before {
	content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
/* El disparador va con una altura fija para que el submenú arranque siempre a
   la misma distancia, sin importar si el ítem tiene ícono o solo texto. */
.rs-menu__toggle, .rs-menu > li > a { min-height: 32px; }
.rs-menu__parent:hover .rs-submenu,
.rs-menu__parent.is-open .rs-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.rs-submenu a {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 9px 12px; border-radius: 8px; font-size: .9rem;
}
.rs-submenu a:hover { background: var(--rs-bg-alt); }
.rs-submenu a span { color: var(--rs-gray); font-size: .8rem; }
.rs-submenu__children { list-style: none; margin: 0; padding: 0 0 0 12px; }
.rs-submenu__children a { font-size: .85rem; color: var(--rs-ink-muted); }

/* Acciones al mismo peso visual que el menú fino: gris de reposo que se
   oscurece, iconos de trazo y nada de naranja — ese color queda para los
   botones de acción y para el contador del carrito. */
.rs-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex: 1 1 0; }
.rs-account, .rs-cart, .rs-buscar-toggle {
	color: var(--rs-ink-muted); position: relative; display: inline-flex;
	align-items: center; gap: 7px;
	transition: color .18s ease;
}
.rs-account:hover, .rs-cart:hover, .rs-buscar-toggle:hover { color: var(--rs-ink); }
.rs-account__texto {
	font-size: .82rem; letter-spacing: -.01em; white-space: nowrap;
	max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.rs-account-wrap { position: relative; display: inline-flex; align-items: center; }
.rs-account-wrap .rs-account__submenu { left: auto; right: 0; min-width: 210px; }
/* Este submenú vive en ".rs-header__actions" y no dentro de ".rs-menu" (nav),
   así que no heredaba el gris de ".rs-menu a" — le quedaba el naranjo por
   defecto de los enlaces del sitio, distinto del submenú de Categorías. */
.rs-account__submenu a { color: var(--rs-ink-muted); }
.rs-account__submenu a:hover { color: var(--rs-ink); background: var(--rs-bg-alt); }
/* A diferencia de "Categorías" (que vive dentro del panel lateral en móvil y
   ahí sí conviene que el submenú se aplane a estático), esta cuenta sigue
   viviendo en la fila de iconos incluso en móvil, así que su submenú debe
   seguir siendo flotante/absoluto en todos los anchos — de ahí la selector
   más específico que el reset ".rs-submenu { position: static }" de abajo. */
.rs-account-wrap .rs-account__submenu {
	position: absolute; top: calc(100% + 12px);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	box-shadow: 0 16px 40px rgba(0,0,0,.14); border: 1px solid var(--rs-line);
	padding: 8px; display: block;
}
.rs-account-wrap:hover .rs-account__submenu,
.rs-account-wrap.is-open .rs-account__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.rs-cart__count {
	position: absolute; top: -7px; right: -9px;
	min-width: 17px; height: 17px; padding: 0 5px;
	background: var(--rs-orange); color: #fff;
	font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center;
	border-radius: 999px;
}
.rs-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.rs-burger span { display: block; width: 24px; height: 2px; background: var(--rs-ink); margin: 5px 0; transition: .2s; }
.rs-nav-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,.4);
	opacity: 0; visibility: hidden; transition: .25s ease; z-index: 98;
}
.rs-nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------- Hero ---------- */
.rs-hero {
	position: relative; overflow: hidden;
	background: var(--rs-black); color: #fff;
	background-size: cover; background-position: center;
}
.rs-hero::before {
	content: ""; position: absolute; inset: 0;
	/* z-index explícito: sin esto el velo pintaba DEBAJO de ".rs-hero__fotos"
	   (esta última es "position:absolute" con z-index automático, y entre dos
	   elementos posicionados con z-index automático gana el que va después en
	   el HTML — la foto, que viene después que este ::before). O sea que el
	   velo quedaba tapado por la foto y nunca se veía. */
	z-index: 1;
	/* Más oscuro y parejo que antes (y ya no de lado a lado): el título va
	   centrado, así que lo que importa es que se lea bien en el medio, no que
	   un costado quede más oscuro que el otro. */
	background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.66) 100%);
}
.rs-hero__inner { position: relative; z-index: 1; padding: 110px 20px; text-align: center; }
.rs-hero__content { max-width: 720px; margin-inline: auto; }
.rs-hero__title {
	font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 18px; color: #fff; font-weight: 700;
	/* Sombra suave y amplia: la foto de fondo tiene zonas claras (el escudo
	   dorado) donde el texto blanco se perdía contra ellas. */
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
.rs-hero__title span { color: var(--rs-orange); }
.rs-hero__text {
	font-size: 1.1rem; color: rgba(255,255,255,.9); margin: 0 0 30px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.rs-hero .rs-eyebrow { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.rs-glow { display: none; }

/* Fotos del hero: se turnan con un acercamiento lento (Ken Burns). Van como
   capas apiladas y no como background del propio .rs-hero porque hay que poder
   fundir una con otra, y un solo background no se puede cruzar consigo mismo. */
.rs-hero__fotos { position: absolute; inset: 0; }
.rs-hero__foto {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0;
	transition: opacity 1.4s ease;
}
.rs-hero__foto.is-active { opacity: 1; animation: rs-kenburns 12s ease-out forwards; }
@keyframes rs-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.09); }
}
/* Velo parejo sobre la foto: sin él la imagen se lleva toda la atención y el
   texto queda de adorno. Va como capa plana y no como degradado para que la
   foto baje de intensidad entera, no solo por abajo. */
.rs-hero--foto::before { background: rgba(0, 0, 0, .62); }
.rs-hero--foto .rs-hero__inner { padding-block: 150px; }

/* Con "prefers-reduced-motion" el acercamiento se apaga: la foto igual cambia,
   pero sin movimiento. */
@media (prefers-reduced-motion: reduce) {
	.rs-hero__foto.is-active { animation: none; }
}

/* ---------- Categorías en portada ---------- */
.rs-cats__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
}
.rs-cat {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--rs-radius-lg); background: var(--rs-bg-alt);
	aspect-ratio: 1 / 1;
}
.rs-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.rs-cat:hover img { transform: scale(1.05); }
.rs-cat__info {
	position: absolute; inset: auto 0 0 0; padding: 18px;
	background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
	color: #fff; display: flex; flex-direction: column; gap: 2px;
}
.rs-cat__info strong { font-size: 1.05rem; }
.rs-cat__info small { font-size: .82rem; opacity: .85; }

/* ---------- Secciones ---------- */
.rs-section__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; margin-bottom: 32px;
}
.rs-section__title { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.rs-section__link { font-weight: 600; white-space: nowrap; font-size: .92rem; }

/* ---------- Grilla de productos ---------- */
ul.products, .rs-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
/* Va también con el prefijo ".woocommerce" porque WooCommerce trae
   ".woocommerce ul.products li.product { padding: 0 }" y, en las páginas de la
   tienda (las únicas donde el <body> lleva esa clase), le ganaba en
   especificidad: las tarjetas de la tienda y las de relacionados salían sin
   relleno y no calzaban con las de la portada. */
ul.products li.product, .rs-grid li.product,
.woocommerce ul.products li.product, .woocommerce .rs-grid li.product {
	float: none !important; width: auto !important; margin: 0 !important;
	/* min-width:0 porque una columna "1fr" de grid no se achica bajo el ancho
	   mínimo de su contenido a menos que se lo digamos explícito. */
	min-width: 0;
	text-align: left; padding: 20px;
	background: var(--rs-bg-alt);
	border: 1px solid transparent;
	border-radius: var(--rs-radius-lg);
	transition: transform .25s ease, box-shadow .25s ease;
	/* Tarjetas parejas: el título puede ocupar 1 o 2 líneas y el bloque de
	   precio 1 o 2 (normal + socio). El botón se empuja al fondo. */
	display: flex; flex-direction: column; height: 100%;
}
ul.products li.product:hover, .rs-grid li.product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.1);
}
ul.products li.product a img, .woocommerce ul.products li.product a img {
	border-radius: var(--rs-radius); margin-bottom: 16px; background: #fff;
	/* 1:1 porque las fotos de producto del catálogo son cuadradas: con 4/5 se
	   les recortaba arriba y abajo. */
	aspect-ratio: 1 / 1; object-fit: cover; object-position: center; width: 100%;
}
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: .95rem; font-weight: 500; color: var(--rs-ink);
	line-height: 1.35; padding: 0; margin: 4px 0 10px;
	min-height: 2.7em;
}
ul.products li.product .price,
.woocommerce ul.products li.product .price {
	color: var(--rs-ink); font-weight: 500; font-size: .95rem;
	display: block; margin-bottom: 14px; min-height: 2.9em;
}
/* WooCommerce le mete un clearfix a la lista de productos ("content: ' ';
   display: table" en ::before y ::after). En un grid esos pseudo-elementos
   cuentan como dos celdas más: la primera fila arrancaba con un hueco vacío y
   toda la grilla quedaba corrida un lugar. */
ul.products::before, ul.products::after,
.rs-grid::before, .rs-grid::after {
	content: none !important; display: none !important;
}

ul.products li.product .button, .rs-grid li.product .button {
	margin-top: auto !important; align-self: stretch;
	text-align: center; justify-content: center;
}
/* Sin el prefijo ".woocommerce" a propósito: esa clase la lleva el <body> solo
   en las páginas de la tienda, no en la portada. Las tarjetas de producto de la
   portada las pinta la misma plantilla de WooCommerce, así que su "Seleccionar
   opciones" se quedaba sin fondo ni forma y parecía un enlace suelto. */
ul.products li.product .button,
a.button, button.button, input.button,
#respond input#submit, a.button.alt, button.button.alt {
	background: var(--rs-orange); color: #fff; border-radius: 999px;
	padding: 12px 22px; font-weight: 600; font-size: .9rem; border: 0; transition: .18s;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; text-decoration: none;
}
ul.products li.product .button:hover,
a.button:hover, button.button:hover, input.button:hover,
#respond input#submit:hover, a.button.alt:hover, button.button.alt:hover {
	background: var(--rs-orange-dark); color: #fff;
}
/* WooCommerce trae su propio CSS (woocommerce.css) con estos mismos selectores
   prefijados por ".woocommerce", que son MÁS específicos que las reglas de
   arriba — por eso varios botones (pagar, añadir al carrito, guardar cuenta…)
   se veían con el morado de fábrica de WooCommerce. Se repiten acá con su
   misma especificidad: como este archivo carga después, ganan estos.
   Un único lugar para todos, en vez de ir parchando botón por botón. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit, .woocommerce #respond input#submit.alt,
.woocommerce .woocommerce-Button.button, .woocommerce .woocommerce-button.button {
	background: var(--rs-orange); color: #fff; border-radius: 999px;
	padding: 12px 22px; font-weight: 600; font-size: .9rem; border: 0;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; text-decoration: none; transition: .18s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover, .woocommerce #respond input#submit.alt:hover,
.woocommerce .woocommerce-Button.button:hover, .woocommerce .woocommerce-button.button:hover {
	background: var(--rs-orange-dark); color: #fff;
}
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
	background: var(--rs-line); color: var(--rs-gray); opacity: 1; cursor: default;
}
.woocommerce span.onsale {
	background: var(--rs-black); color: #fff; border-radius: 999px;
	min-height: auto; min-width: auto; padding: 5px 12px; font-weight: 600;
}

/* ---------- Doble precio: normal y de socio ---------- */
.rs-price { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.rs-price__main {
	font-weight: 600; color: var(--rs-ink); font-size: 1rem;
	display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.rs-price__from { font-size: .78rem; font-weight: 500; color: var(--rs-gray); }
.rs-price__alt {
	display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
	font-size: .85rem; color: var(--rs-gray);
}
.rs-price__alt del { text-decoration: line-through; opacity: .85; }
.rs-price__tag {
	font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	padding: 2px 7px; border-radius: 999px;
	background: var(--rs-line); color: var(--rs-ink-muted);
}
.rs-price__main .rs-price__tag { background: rgba(252,75,8,.12); color: var(--rs-orange); }
/* Etiqueta en texto ("Precio normal", "Con perfil X") y línea del ahorro por
   ítem: para que el descuento se entienda producto por producto y no recién
   en el total del carrito. */
.rs-price__etq { font-size: .78rem; color: var(--rs-gray); }
.rs-price__off {
	display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
	font-size: .8rem; color: #15794a;
}
.rs-price__off strong { font-weight: 700; }
.rs-price__off .woocommerce-Price-amount { color: inherit; }
/* Banda del precio de socio: deja de ser una píldora al lado del precio y pasa
   a ser una línea propia con el ahorro en plata. Suelta al lado del precio se
   leía como una etiqueta más entre otras y se perdía. */
.rs-profile-badge {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	margin: 14px 0 0; padding: 10px 16px;
	border-radius: var(--rs-radius);
	color: #15794a; background: rgba(26,155,86,.12);
	font-size: .78rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
}
.rs-profile-badge__ahorro { font-weight: 700; }

/* ---------- CTA ---------- */
.rs-cta { padding: 0 0 96px; }
.rs-cta__card {
	background: var(--rs-black);
	border-radius: var(--rs-radius-lg);
	padding: 72px 40px;
	display: flex; align-items: center; justify-content: center;
	flex-direction: column; gap: 24px; text-align: center;
	position: relative; overflow: hidden;
	background-size: cover; background-position: center;
}
.rs-cta__card h2 { margin: 0; max-width: 480px; color: #fff; }
/* Con foto de fondo hace falta un velo, si no el título blanco se pierde. */
.rs-cta__card--foto::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.72));
}
.rs-cta__card--foto > * { position: relative; z-index: 1; }

/* ---------- Shop / contenido WooCommerce ---------- */
.rs-shop { padding: 56px 0; }
.rs-page { padding-block: 64px; max-width: 820px; }
/* Carrito, checkout y mi cuenta al mismo ancho que la tienda (el tope de
   820px es para páginas de texto, donde ayuda a la lectura). */
.rs-page--wide { max-width: var(--rs-container); }
.rs-page__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 24px; }
.rs-page__lead { color: var(--rs-ink-muted); font-size: 1.02rem; margin: -14px 0 28px; }

/* ---------- Formulario de contacto ---------- */
.rs-contact-form {
	background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius-lg);
	padding: 28px; max-width: 560px; margin-inline: auto;
}
.rs-contact { display: block; }
.page-template-page-contacto .rs-page__head { text-align: center; }
.page-template-page-contacto .rs-page__lead { margin-inline: auto; max-width: 520px; }
.rs-form-row { margin-bottom: 18px; }
.rs-form-row label { display: block; font-size: .85rem; font-weight: 500; color: var(--rs-ink-muted); margin-bottom: 6px; }
.rs-form-req { color: var(--rs-orange); }
.rs-form-row input, .rs-form-row select, .rs-form-row textarea {
	width: 100%; padding: 12px 14px;
	border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
	font: inherit; font-size: .95rem; color: var(--rs-ink);
	background: #fff; transition: border-color .15s ease;
}
.rs-form-row textarea { min-height: 130px; resize: vertical; }
/* El <select> con la apariencia del sistema operativo desentonaba con los
   campos de texto: se le saca el cromado propio y se le dibuja la flecha, para
   que la caja cerrada se vea igual que un input. (La lista desplegada la pinta
   el sistema operativo y no se puede cambiar por CSS.) */
.rs-form-row select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
	padding-right: 40px; cursor: pointer;
}
.rs-form-row input:focus, .rs-form-row select:focus, .rs-form-row textarea:focus {
	outline: none; border-color: var(--rs-orange);
}
.rs-contact-form .rs-btn { width: 100%; justify-content: center; margin-top: 4px; }
/* Sin subrayado: los enlaces se distinguen por el color de marca. En texto
   corrido aparece al pasar el cursor. */
.rs-page__content a { color: var(--rs-orange); text-decoration: none; text-underline-offset: 3px; }
.rs-page__content p > a:hover { text-decoration: underline; }
.woocommerce-breadcrumb { color: var(--rs-gray); font-size: .9rem; margin-bottom: 22px; }

/* Avisos */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before,
.woocommerce-noreviews::before, p.no-comments::before { content: none; display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 12px 20px;
	background: var(--rs-bg-alt); color: var(--rs-ink);
	border-top: 3px solid var(--rs-orange);
	border-radius: var(--rs-radius);
	padding: 16px 20px; list-style: none; margin-bottom: 24px;
	font-size: .92rem; position: relative;
}
.woocommerce-error { border-top-color: #d70015; }
/* WooCommerce imprime el botón ("Ver carrito") ANTES del texto y deja nodos de
   texto sueltos alrededor, así que "space-between" lo dejaba descolocado. */
.woocommerce-message, .woocommerce-error { justify-content: flex-start; gap: 12px 0; }
/* Este botón del aviso es siempre "Ver carrito": va en gris como acción
   secundaria, igual que en el carrito lateral. El naranjo se reserva para
   "Finalizar compra". */
.woocommerce .woocommerce-message > .button,
.woocommerce .woocommerce-error > .button,
.woocommerce-message > .button, .woocommerce-error > .button {
	order: 2; margin-left: auto !important; margin-right: 6px !important; float: none !important;
	background: var(--rs-bg-alt); color: var(--rs-ink); border: 1px solid var(--rs-line);
	border-radius: 999px; padding: 9px 20px; font-size: .84rem; flex: none;
}
.woocommerce .woocommerce-message > .button:hover,
.woocommerce-message > .button:hover { background: var(--rs-line); color: var(--rs-ink); }
.rs-notice--closable { padding-right: 46px; }
.rs-notice__close {
	position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
	width: 26px; height: 26px; display: grid; place-items: center;
	border: 0; border-radius: 999px; background: transparent;
	color: var(--rs-gray); font-size: 1.3rem; line-height: 1; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.rs-notice__close:hover { background: rgba(20,17,15,.07); color: var(--rs-ink); }
.rs-notice--closing { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }

/* Los toggles de cupón y acceso no son notificaciones: el enlace va a la derecha */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info { justify-content: flex-start; gap: 12px 0; }
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a { margin-left: auto; text-align: right; }

/* ---------- Producto individual ---------- */
/* El grid va en ".rs-product-top" (galería + resumen únicamente) y NO en
   "div.product" directo: ese div también contiene la descripción y los
   relacionados (son hermanos, ver el wrapper en functions.php), y ponerle el
   grid ahí las metía como celdas de la misma fila — alargando el alto que usa
   el "position: sticky" de la galería hasta cubrir también la descripción. */
.single-product div.product .rs-product-top {
	display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px;
	/* "stretch" y no "start": así la celda de la galería mide lo mismo que la
	   columna de compra (casi siempre más alta), dejándole a la foto espacio de
	   sobra para quedar pegada (sticky) mientras se hace scroll por esa columna,
	   en vez de perderse de vista apenas se empieza a bajar. */
	align-items: stretch;
}
/* Pegada mientras se hace scroll por la ficha del producto: dentro de esta
   fila del grid (stretch) hay margen para "stickearse", y se despega sola en
   cuanto se llega al final de esa fila, o sea, justo antes de la descripción
   de abajo — sin necesitar JS ni marcar dónde termina "a mano". */
.single-product div.product .rs-gallery { position: sticky; top: 96px; align-self: start; }
.woocommerce div.product .summary.entry-summary,
.single-product div.product .summary.entry-summary {
	width: 100% !important; float: none !important; padding: 0; background: transparent; border: none;
}
.single-product div.product .product_title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 10px; }
.single-product div.product p.price, .single-product div.product span.price {
	color: var(--rs-ink); font-size: 1.5rem; font-weight: 600;
}
/* Descripción corta como tarjeta: separa de un vistazo "qué es esto" de las
   opciones de compra que vienen abajo. */
.single-product div.product .woocommerce-product-details__short-description {
	color: var(--rs-ink-muted); margin: 18px 0;
	background: var(--rs-bg-alt); border-radius: var(--rs-radius-lg);
	padding: 18px 20px; font-size: .92rem; line-height: 1.6;
}
.single-product div.product .woocommerce-product-details__short-description > *:first-child { margin-top: 0; }
.single-product div.product .woocommerce-product-details__short-description > *:last-child { margin-bottom: 0; }
.single-product div.product .woocommerce-product-details__short-description strong { color: var(--rs-ink); }

/* Galería propia: imagen principal y cada miniatura en su PROPIA tarjeta */
.rs-gallery { width: 100%; min-width: 0; }
.rs-gallery__main {
	position: relative; background: var(--rs-bg-alt);
	border-radius: var(--rs-radius-lg); overflow: hidden;
}
.rs-gallery__img {
	/* "cover": la foto llena todo el marco aunque sea vertical u horizontal. */
	display: block; width: 100%; height: 100%;
	aspect-ratio: 1 / 1; object-fit: cover; object-position: center;
	cursor: zoom-in;
}
.rs-gallery__expand {
	position: absolute; top: 14px; right: 14px;
	width: 42px; height: 42px; display: grid; place-items: center;
	border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255,255,255,.92); color: var(--rs-ink);
	box-shadow: 0 2px 10px rgba(20,17,15,.12);
	transition: background .18s ease, transform .18s ease;
}
.rs-gallery__expand:hover { background: #fff; transform: scale(1.06); }
/* Flechas sobre la foto grande: van a la foto real anterior/siguiente (a
   diferencia de las de la tira de miniaturas, que solo la desplazan). Se
   quedan semi-ocultas hasta el hover en escritorio; en móvil siempre visibles
   porque ahí no hay hover y el gesto principal es el swipe. */
.rs-gallery__main-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; display: grid; place-items: center;
	border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255,255,255,.92); color: var(--rs-ink);
	box-shadow: 0 2px 10px rgba(20,17,15,.14);
	opacity: 0; transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.rs-gallery__main:hover .rs-gallery__main-nav { opacity: 1; }
.rs-gallery__main-nav:hover { background: #fff; }
.rs-gallery__main-nav--prev { left: 14px; }
.rs-gallery__main-nav--next { right: 14px; }
.rs-gallery__dots {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
	display: flex; gap: 6px;
}
.rs-gallery__dot {
	width: 6px; height: 6px; border-radius: 999px;
	background: rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(20,17,15,.3);
	transition: background .18s ease, width .18s ease;
}
.rs-gallery__dot.is-active { background: #fff; width: 16px; }
@media (max-width: 720px) {
	.rs-gallery__main-nav { opacity: 1; }
}
.rs-gallery__thumbs-wrap {
	--rs-thumb-size: 84px; --rs-thumb-gap: 12px;
	display: flex; align-items: center; gap: 8px; margin-top: 14px;
}
.rs-gallery__thumbs {
	display: flex; gap: var(--rs-thumb-gap);
	flex: 1 1 auto; min-width: 0;
	overflow-x: auto; overflow-y: hidden;
	/* "proximity" y no "mandatory": con mandatory el navegador cancela el
	   scrollBy() de las flechas y devuelve la tira a su punto de snap. */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.rs-gallery__thumbs::-webkit-scrollbar { display: none; }
.rs-gallery__thumb {
	flex: 0 0 var(--rs-thumb-size);
	width: var(--rs-thumb-size); height: var(--rs-thumb-size);
	padding: 0; cursor: pointer; scroll-snap-align: start;
	background: var(--rs-bg-alt);
	border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
	overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease;
}
.rs-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-gallery__thumb:hover { border-color: var(--rs-ink-muted); }
.rs-gallery__thumb.is-active { border-color: var(--rs-orange); box-shadow: 0 0 0 1px var(--rs-orange); }
.rs-gallery__nav {
	flex: 0 0 auto; width: 34px; height: 34px;
	display: grid; place-items: center;
	border: 1px solid var(--rs-line); border-radius: 999px;
	background: #fff; color: var(--rs-ink); cursor: pointer;
	transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.rs-gallery__nav:hover:not(:disabled) { background: var(--rs-bg-alt); border-color: var(--rs-ink-muted); }
.rs-gallery__nav:disabled { opacity: .35; cursor: default; }
.rs-gallery__nav[hidden] { display: none; }

/* Visor de imagen ampliada */
body.rs-viewer-open { overflow: hidden; }
.rs-viewer {
	position: fixed; inset: 0; z-index: 9999;
	display: grid; place-items: center; padding: 40px;
	background: rgba(20,17,15,.88); cursor: zoom-out;
}
.rs-viewer img {
	max-width: min(1000px, 92vw); max-height: 88vh;
	width: auto; height: auto; object-fit: contain;
	border-radius: var(--rs-radius-lg); background: #fff;
}
.rs-viewer__close {
	position: absolute; top: 24px; right: 28px;
	width: 44px; height: 44px; border: 0; border-radius: 999px;
	background: rgba(255,255,255,.9); color: var(--rs-ink);
	font-size: 1.8rem; line-height: 1; cursor: pointer;
}

/* Aviso de stock */
.rs-stock {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .82rem; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; margin-bottom: 10px;
}
.rs-stock--in { color: #1a9b56; }
.rs-stock--out { color: var(--rs-gray); }

/* Tallas / atributos como botones. El <select> original sigue en el DOM
   (WooCommerce lo necesita) pero oculto: los botones lo manejan por JS. */
.single-product div.product table.variations select[data-rs-swatches] {
	position: absolute !important; width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important;
}
.rs-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-swatch {
	min-width: 46px; padding: 10px 14px;
	border: 1px solid var(--rs-line); border-radius: 10px;
	background: #fff; color: var(--rs-ink);
	font-family: inherit; font-size: .9rem; font-weight: 500; line-height: 1;
	cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.rs-swatch:hover:not(.is-disabled) { border-color: var(--rs-ink); }
.rs-swatch.is-active { background: var(--rs-orange); border-color: var(--rs-orange); color: #fff; }
.rs-swatch.is-disabled {
	opacity: .38; cursor: not-allowed;
	background: var(--rs-bg-alt); text-decoration: line-through;
}
.single-product div.product table.variations,
.single-product div.product table.variations tbody,
.single-product div.product table.variations tr,
.single-product div.product table.variations td { display: block; width: 100%; padding: 0; border: 0; }
.single-product div.product table.variations tr { margin-bottom: 16px; }
.single-product div.product table.variations tr:last-child { margin-bottom: 0; }
.single-product div.product table.variations td.label { margin-bottom: 8px; }
.single-product div.product table.variations label { font-size: .84rem; font-weight: 600; color: var(--rs-ink); }
/* WooCommerce oculta el enlace "Limpiar" con visibility, así que seguía
   ocupando su línea y abría un hueco entre las tallas y la personalización.
   Se saca del flujo mientras está oculto y vuelve cuando WooCommerce lo
   muestra, que es cuando escribe visibility:visible en el propio elemento. */
.single-product div.product .reset_variations { display: none; margin-top: 8px; font-size: .82rem; color: var(--rs-gray); }
.single-product div.product .reset_variations[style*="visible"] { display: inline-block; }

/* Cantidad con - / + */
.single-product div.product form.cart {
	display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
	margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rs-line);
}
.woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { content: none !important; display: none !important; }
.single-product div.product .quantity {
	display: inline-flex; align-items: center;
	border: 1px solid var(--rs-line); border-radius: 999px;
	overflow: hidden; background: #fff;
}
.rs-qty__btn {
	width: 40px; height: 46px; flex: none; border: 0; background: none;
	cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--rs-ink);
	transition: background .15s ease;
}
.rs-qty__btn:hover { background: var(--rs-bg-alt); }
.single-product div.product .quantity input.qty {
	width: 44px; height: 46px; padding: 0;
	border: 0 !important; border-radius: 0 !important;
	text-align: center; background: none; -moz-appearance: textfield;
}
.single-product div.product .quantity input.qty::-webkit-outer-spin-button,
.single-product div.product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product div.product .woocommerce-variation-add-to-cart { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; width: 100%; }
.single-product div.product .product_meta { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rs-line); font-size: .84rem; color: var(--rs-gray); }
.single-product div.product .product_meta > span { display: block; margin-bottom: 6px; }

/* Personalización (nombre / número) */
.rs-perso {
	margin: 4px 0 20px; padding: 18px;
	border: 1px solid var(--rs-line); border-radius: var(--rs-radius-lg);
	background: var(--rs-bg-alt); width: 100%;
}
.rs-perso__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rs-perso__title { font-weight: 600; font-size: .95rem; }
.rs-perso__price {
	font-size: .8rem; font-weight: 600; color: var(--rs-orange);
	background: rgba(252,75,8,.1); padding: 4px 10px; border-radius: 999px;
}
.rs-perso__toggle { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.rs-perso__toggle input { width: 16px; height: 16px; accent-color: var(--rs-orange); }
/* Los campos solo aparecen si se marca que se quiere personalizar. */
.rs-perso__fields { display: none; gap: 14px; margin-top: 14px; }
.rs-perso__fields.is-open { display: flex; flex-wrap: wrap; }
.rs-perso__field { flex: 1 1 180px; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.rs-perso__field--number { flex: 0 0 120px; }
.rs-perso__field label { font-size: .82rem; font-weight: 600; }
.rs-perso__field input {
	padding: 11px 14px; border: 1px solid var(--rs-line); border-radius: 10px;
	background: #fff; color: var(--rs-ink); font-family: inherit; font-size: .95rem;
}
.rs-perso__field input:focus { outline: 2px solid var(--rs-orange); outline-offset: -1px; }
.rs-perso__field small { font-size: .74rem; color: var(--rs-gray); }
.rs-perso__field input[name="royal_perso_name"] { text-transform: uppercase; }

/* Descripción del producto */
/* La descripción larga también va encerrada en tarjeta, igual que la corta:
   suelta sobre el blanco se leía como el final de la página y no como una
   sección propia. */
.rs-product-desc {
	grid-column: 1 / -1; margin-top: 56px;
	background: var(--rs-bg-alt); border-radius: var(--rs-radius-lg);
	padding: 32px 36px;
}
.rs-product-desc__title { font-size: 1.35rem; margin: 0 0 18px; }
.rs-product-desc__body { color: var(--rs-ink-muted); max-width: 820px; }
.rs-product-desc__body > *:first-child { margin-top: 0; }
.rs-product-desc__body > *:last-child { margin-bottom: 0; }
.rs-product-desc__body strong { color: var(--rs-ink); }

/* Relacionados */
.rs-relacionados__titulo { grid-column: 1 / -1; font-size: 1.35rem; margin: 56px 0 0; }
.single-product .related.products > h2 { display: none; }
.single-product .related.products { grid-column: 1 / -1; margin-top: 40px; }
.single-product .related.products > h2:empty { display: none; }

/* ---------- Carrito ---------- */
.woocommerce table.shop_table {
	border: 1px solid var(--rs-line) !important;
	border-radius: var(--rs-radius-lg) !important;
	border-collapse: separate !important; border-spacing: 0 !important;
	overflow: hidden; background: #fff;
}
.woocommerce table.shop_table th {
	background: var(--rs-bg-alt);
	font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--rs-gray); font-weight: 600; padding: 14px 20px; border: none;
}
.woocommerce table.shop_table td { padding: 16px 20px; border: none; border-top: 1px solid var(--rs-line); }
.woocommerce-cart td.actions .coupon { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.woocommerce-cart td.actions .coupon .button { float: none; }
.woocommerce-cart td.actions .coupon #coupon_code { margin: 0; }
.woocommerce #coupon_code {
	padding: 12px 18px; border-radius: 999px; border: 1px solid var(--rs-line);
	background: #fff; color: var(--rs-ink);
	flex: 1 1 280px; min-width: 280px; max-width: 380px;
}
/* Carrito a dos columnas: los productos a la izquierda y el resumen al lado,
   fijo mientras se baja. Antes el resumen caía centrado debajo de la tabla,
   con el ancho a medias y el título partido en dos líneas. */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: 28px;
}
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .cart-empty,
.woocommerce-cart .woocommerce > .return-to-shop { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { margin: 0; }
.woocommerce-cart .cart-collaterals {
	background: var(--rs-bg-alt); border: none; border-radius: var(--rs-radius-lg);
	padding: 24px; width: 100%; max-width: none; margin: 0;
	position: sticky; top: 96px;
}
.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
.woocommerce-cart .cart-collaterals h2 { font-size: 1.15rem; margin: 0 0 16px; }
/* La tabla del resumen no necesita marco propio: ya está dentro de la tarjeta
   gris, y con borde encima se veía como una caja dentro de otra. */
.woocommerce-cart .cart-collaterals table.shop_table {
	border: 0 !important; border-radius: 0 !important; background: transparent;
	margin: 0;
}
.woocommerce-cart .cart-collaterals table.shop_table th,
.woocommerce-cart .cart-collaterals table.shop_table td {
	background: transparent; padding: 10px 0; border-top: 1px solid var(--rs-line);
	text-transform: none; letter-spacing: 0; font-size: .9rem;
}
.woocommerce-cart .cart-collaterals table.shop_table tr:first-child th,
.woocommerce-cart .cart-collaterals table.shop_table tr:first-child td { border-top: 0; }
.woocommerce-cart .cart-collaterals table.shop_table th { color: var(--rs-ink-muted); font-weight: 500; }
.woocommerce-cart .cart-collaterals table.shop_table td { text-align: right; color: var(--rs-ink); }
.woocommerce-cart .cart-collaterals .order-total th,
.woocommerce-cart .cart-collaterals .order-total td { font-size: 1.05rem; font-weight: 700; color: var(--rs-ink); }
@media (max-width: 900px) {
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-cart .cart-collaterals { position: static; }
}
/* El morado de acá es el "brand purple" que trae WooCommerce por defecto en
   ".button.alt" (woocommerce.css, que carga antes que este archivo pero con
   selectores más específicos) — sin este empate ganado a propósito, el botón
   de pagar quedaba morado en vez del naranjo de marca. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt {
	width: 100%; text-align: center; display: block; margin-top: 4px;
	background: var(--rs-orange); color: #fff;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt:hover { background: var(--rs-orange-dark); color: #fff; }
.woocommerce-cart td.actions .coupon button.button,
.woocommerce-cart button[name="update_cart"] {
	background: var(--rs-black); color: #fff;
}
.woocommerce-cart td.actions .coupon button.button:hover,
.woocommerce-cart button[name="update_cart"]:hover { background: #2a2622; }
.woocommerce-cart button[name="update_cart"]:disabled { opacity: .45; cursor: default; }
.rs-cart-saving th { font-weight: 500; color: var(--rs-ink-muted); }
.rs-cart-saving--base td { color: var(--rs-gray); }
.rs-cart-saving--off td { color: #15794a; font-weight: 600; }

/* ---------- Carrito lateral ---------- */
.rs-mini-cart {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
	width: min(400px, 92vw); background: #fff;
	display: flex; flex-direction: column;
	transform: translateX(105%); transition: transform .28s ease;
	box-shadow: -10px 0 40px rgba(0,0,0,.14);
}
.rs-mini-cart.is-open { transform: translateX(0); }
.rs-mini-cart__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 24px; border-bottom: 1px solid var(--rs-line);
}
.rs-mini-cart__head h3 { margin: 0; font-size: 1.1rem; }
.rs-mini-cart__close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--rs-gray); }
.rs-mini-cart__body { padding: 20px 24px 24px; overflow: hidden; flex: 1; display: flex; }
.rs-mini-cart__body .widget_shopping_cart_content { display: flex; flex-direction: column; width: 100%; height: 100%; }
.rs-mini-cart__body .woocommerce-mini-cart.cart_list {
	order: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto;
	/* La barra de scroll se dibuja en el borde de la lista, o sea pegada al
	   texto. Este relleno le deja su propio carril. */
	padding-right: 12px;
	/* Barra de scroll discreta: invisible en reposo, se insinúa al pasar el
	   cursor. Se sigue pudiendo arrastrar y la rueda funciona igual. */
	scrollbar-width: thin; scrollbar-color: transparent transparent;
	transition: scrollbar-color .2s ease;
}
.rs-mini-cart__body .woocommerce-mini-cart.cart_list:hover { scrollbar-color: rgba(20,17,15,.18) transparent; }
.rs-mini-cart__body .woocommerce-mini-cart.cart_list::-webkit-scrollbar { width: 4px; }
.rs-mini-cart__body .woocommerce-mini-cart.cart_list::-webkit-scrollbar-track { background: transparent; }
.rs-mini-cart__body .woocommerce-mini-cart.cart_list::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background .2s ease; }
.rs-mini-cart__body .woocommerce-mini-cart.cart_list:hover::-webkit-scrollbar-thumb { background: rgba(20,17,15,.18); }
.rs-mini-cart__body .woocommerce-mini-cart__total.total { order: 2; flex: none; }
.rs-mini-cart__body .woocommerce-mini-cart__buttons.buttons { order: 3; flex: none; }
.woocommerce-mini-cart__buttons.buttons a.button.checkout { background: var(--rs-orange); color: #fff; }
.rs-mini-cart-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,.4);
	opacity: 0; visibility: hidden; transition: .25s ease; z-index: 199;
}
.rs-mini-cart-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------- Formularios ---------- */
:root { --rs-field-h: 48px; }
.woocommerce form .form-row { margin-bottom: 16px; float: none !important; width: auto !important; padding: 0; }
.woocommerce form .form-row label { display: block; font-size: .85rem; font-weight: 500; color: var(--rs-ink-muted); margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--rs-orange); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: var(--rs-field-h); padding: 12px 15px;
	font-size: .96rem; font-family: var(--rs-font);
	border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
	background: #fff; color: var(--rs-ink); box-sizing: border-box; width: 100%;
}
.woocommerce form .form-row textarea { min-height: 110px; resize: vertical; }
.woocommerce form .input-text:focus, .woocommerce form select:focus, .woocommerce form textarea:focus {
	outline: none; border-color: var(--rs-orange); box-shadow: 0 0 0 3px rgba(252,75,8,.15);
}
/* País con una sola opción: WooCommerce lo deja como un <select> sin caja. */
.woocommerce form .form-row select.country_to_state--single {
	padding: 12px 15px !important; min-height: var(--rs-field-h) !important;
	background: var(--rs-bg-alt) !important;
	appearance: none; -webkit-appearance: none; pointer-events: none;
}
/* select2 (región y otros desplegables). OJO: monta el desplegable colgando
   del <body>, así que estos selectores NO pueden llevar prefijo de página. */
.select2-container--default .select2-selection--single {
	height: var(--rs-field-h); border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius); background: #fff; outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: calc(var(--rs-field-h) - 2px);
	padding-left: 15px; padding-right: 34px; color: var(--rs-ink); font-size: .96rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--rs-field-h) - 2px); right: 8px; }
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--rs-orange); box-shadow: 0 0 0 3px rgba(252,75,8,.15);
}
.select2-container--default .select2-dropdown, .select2-dropdown {
	border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
	box-shadow: 0 12px 28px rgba(20,17,15,.12); overflow: hidden; background: #fff;
}
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; padding: 6px; }
.select2-container--default .select2-results__option {
	padding: 10px 12px; border-radius: 8px; font-size: .94rem;
	color: var(--rs-ink); background: transparent;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--rs-orange) !important; color: #fff !important;
}
.select2-container--default .select2-search--dropdown { padding: 8px 8px 4px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 10px 12px; border: 1px solid var(--rs-line); border-radius: 8px;
	font-family: var(--rs-font); font-size: .94rem; color: var(--rs-ink); outline: none;
}

/* ---------- Checkout ---------- */
/* Formulario a la izquierda y "Tu pedido" a la derecha. WooCommerce entrega
   los tres bloques uno debajo de otro; los colocamos en una grilla. */
.woocommerce-checkout form.checkout {
	display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
	gap: 0 44px; align-items: start;
}
.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; display: block; }
.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 96px; }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: auto !important; float: none !important; }
.woocommerce-checkout #customer_details .col-2 { margin-top: 30px; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px;
}
.woocommerce form .form-row-first { grid-column: 1; }
.woocommerce form .form-row-last { grid-column: 2; }
.woocommerce form .form-row-wide, .woocommerce form .form-row.notes { grid-column: 1 / -1; }
.woocommerce-checkout h3 { font-size: 1.15rem; margin: 0 0 18px; }
.woocommerce #order_review {
	background: var(--rs-bg-alt); border: none;
	border-radius: var(--rs-radius-lg); padding: 28px; align-self: flex-start;
}
.woocommerce #order_review table.shop_table { border: none !important; background: transparent; }
.woocommerce-checkout #payment { background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius); padding: 4px; margin-top: 18px; }
.woocommerce-checkout #payment ul.payment_methods { border: none; padding: 12px; }
.woocommerce-checkout #payment div.payment_box { background: var(--rs-bg-alt); border-radius: var(--rs-radius); color: var(--rs-ink-muted); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
#place_order { width: 100% !important; float: none !important; padding: 17px 28px; margin-top: 12px; }

/* ---------- Pedido recibido ---------- */
/* Sin centrar: el bloque arranca en la misma vertical que el título. */
.woocommerce-order { max-width: 900px; }
.woocommerce-order .woocommerce-notice--success {
	display: flex; align-items: center; gap: 14px;
	background: rgba(26,155,86,.08); border: 1px solid rgba(26,155,86,.25);
	border-radius: var(--rs-radius-lg); padding: 22px 26px; margin: 0 0 30px;
	font-size: 1.05rem; font-weight: 500; color: #15794a;
}
.woocommerce-order .woocommerce-notice--success::before {
	content: ""; flex: none; width: 30px; height: 30px; border-radius: 999px; display: block;
	background: #1a9b56 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/17px no-repeat;
}
/* Pedido sin pagar (woocommerce/checkout/order-received.php): ámbar, con un
   reloj en vez del visto y el botón para pagar a la derecha. */
.woocommerce-order .rs-recibido { flex-wrap: wrap; }
.woocommerce-order .rs-recibido__texto { flex: 1 1 280px; }
.woocommerce-order .rs-recibido p { margin: 0; }
.woocommerce-order .rs-recibido__detalle { margin-top: 4px !important; font-size: .9rem; font-weight: 400; color: var(--rs-ink-muted); }
.woocommerce-order .woocommerce-notice--pendiente {
	display: flex; align-items: center; gap: 14px;
	background: #fff7e6; border: 1px solid #f3cf85;
	border-radius: var(--rs-radius-lg); padding: 22px 26px; margin: 0 0 30px;
	font-size: 1.05rem; font-weight: 600; color: #7a4b00;
}
.woocommerce-order .woocommerce-notice--pendiente::before {
	content: ""; flex: none; width: 30px; height: 30px; border-radius: 999px; display: block; align-self: flex-start;
	background: #e19b12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l2.5 2'/%3E%3C/svg%3E") center/19px no-repeat;
}
.woocommerce-order .rs-recibido__pagar.button { background: var(--rs-orange); color: #fff; flex: none; }
.woocommerce-order .rs-recibido__pagar.button:hover { background: var(--rs-orange-dark); color: #fff; }
/* WooCommerce le pone a esta lista un clearfix (::before/::after con
   display:table). En una grilla esos pseudo-elementos cuentan como celdas. */
.woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce-order ul.woocommerce-order-overview::after { content: none !important; display: none !important; }
.woocommerce-order ul.woocommerce-order-overview {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
	gap: 14px; list-style: none; margin: 0 0 34px; padding: 0; border: none;
}
.woocommerce-order ul.woocommerce-order-overview li {
	display: flex; flex-direction: column; gap: 5px;
	background: var(--rs-bg-alt); border-radius: var(--rs-radius);
	padding: 16px 18px; margin: 0; border: none !important; float: none !important;
	font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--rs-gray); font-weight: 600;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
	font-size: 1rem; text-transform: none; letter-spacing: 0;
	color: var(--rs-ink); font-weight: 600; word-break: break-word;
}
/* Instrucciones de pago: WooCommerce las imprime como un párrafo suelto. */
.woocommerce-order > p:not([class]) {
	background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius-lg);
	padding: 20px 22px; margin: 0 0 40px; line-height: 1.9; font-size: .95rem;
}
.woocommerce-order h2 { font-size: 1.3rem; margin: 0 0 18px; }
.woocommerce-order .woocommerce-customer-details address {
	background: var(--rs-bg-alt); border: none; border-radius: var(--rs-radius-lg);
	padding: 22px 24px; font-style: normal; line-height: 1.8; color: var(--rs-ink);
}

/* WooCommerce le pone un clearfix a .col2-set y .u-columns. Cuando esos
   contenedores son grid, los pseudo cuentan como celdas y descolocan todo. */
.woocommerce .col2-set::before, .woocommerce .col2-set::after,
.woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after,
.woocommerce .u-columns::before, .woocommerce .u-columns::after,
.col2-set::before, .col2-set::after, .u-columns::before, .u-columns::after,
.woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after,
#customer_details::before, #customer_details::after { content: none !important; display: none !important; }

/* ---------- Footer ---------- */
/* El pie es una tarjeta oscura redondeada separada del borde, no una franja
   pegada al fondo: así cierra la página en vez de diluirse con ella. */
.rs-footer { margin-top: 72px; padding-bottom: 24px; }
.rs-footer__card {
	background: var(--rs-black); color: rgba(255, 255, 255, .72);
	border-radius: 28px; overflow: hidden;
	padding: 44px 40px 0;
}
.rs-footer__top {
	display: grid; gap: 36px;
	grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(130px, 1fr));
	padding-bottom: 36px;
}

.rs-footer__brand img, .rs-footer__brand .custom-logo {
	max-height: 40px; width: auto; max-width: 100%;
	/* El logo es oscuro sobre transparente: sobre la tarjeta negra hay que
	   invertirlo para que se vea. */
	filter: brightness(0) invert(1);
}
.rs-footer__tagline { margin: 16px 0 0; color: rgba(255, 255, 255, .55); max-width: 320px; font-size: .9rem; }
.rs-footer__ig {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
	padding: 8px 14px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .8); font-size: .82rem;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rs-footer__ig:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: transparent; }

.rs-footer__col h4 {
	font-size: .72rem; margin: 0 0 16px; color: #fff;
	text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.rs-footer__menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
}
.rs-footer__menu a { color: rgba(255, 255, 255, .62); font-size: .88rem; transition: color .18s ease; }
.rs-footer__menu a:hover { color: #fff; }

.rs-footer__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
	margin: 0 -40px; padding: 18px 40px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .8rem; color: rgba(255, 255, 255, .45);
}
.rs-footer__autor a { color: rgba(255, 255, 255, .72); }
.rs-footer__autor a:hover { color: var(--rs-orange); }

@media (max-width: 900px) {
	.rs-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rs-footer__brand { grid-column: 1 / -1; }
}
/* Pie en móvil: apilado a la izquierda quedaba como una lista larga y
   descolgada. Acá la marca va centrada y los dos menús de enlaces quedan lado
   a lado, para que el pie se lea como un bloque y no como una columna suelta. */
@media (max-width: 560px) {
	.rs-footer { margin-top: 48px; }
	.rs-footer__card { border-radius: 22px; padding: 32px 22px 0; text-align: center; }
	.rs-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 18px;
		padding-bottom: 28px;
	}
	.rs-footer__brand {
		grid-column: 1 / -1;
		display: flex; flex-direction: column; align-items: center;
		padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .1);
	}
	.rs-footer__brand img, .rs-footer__brand .custom-logo { max-height: 34px; }
	.rs-footer__tagline { margin: 12px auto 0; max-width: 300px; font-size: .85rem; }
	.rs-footer__menu { align-items: center; gap: 9px; }
	.rs-footer__col h4 { margin-bottom: 12px; }
	/* "Club" queda sola en la última fila: ocupa el ancho completo para no
	   dejar un hueco raro al lado. */
	.rs-footer__col:last-of-type { grid-column: 1 / -1; }
	.rs-footer__bar {
		margin: 0 -22px; padding: 16px 22px;
		flex-direction: column; align-items: center; justify-content: center;
		gap: 6px; text-align: center;
	}
}

/* ---------- Iconos del menú ----------
   Solo se ven en el panel móvil: en la barra de escritorio el menú es corto y
   con iconos quedaría recargado. */
.rs-menu__icono { display: none; flex: none; }
.rs-menu__icono path { fill: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	ul.products, .rs-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.single-product div.product .rs-product-top { grid-template-columns: 1fr; gap: 28px; }
	/* Pegada tiene sentido con las dos columnas lado a lado; apiladas en una
	   sola columna, dejarla "sticky" taparía la ficha mientras se baja. */
	.single-product div.product .rs-gallery { position: static; }
}
@media (max-width: 900px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 0; }
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review { grid-column: 1; grid-row: auto; position: static; }
	.woocommerce-checkout form.checkout > #order_review_heading { margin-top: 32px; }
}
@media (max-width: 720px) {
	.section-pad { padding: 48px 0; }
	/* Sin esto el menú móvil no se veía: el panel es "position: fixed" y vive
	   dentro del header, y un ancestro con backdrop-filter pasa a ser el bloque
	   contenedor de sus descendientes fijos. O sea que el "inset: 0" del panel se
	   medía contra el header (74px de alto) en vez de contra la ventana, y
	   quedaba como una franja diminuta pegada arriba a la derecha.
	   En móvil el desenfoque no aporta nada, así que se quita y el fondo pasa a
	   ser opaco. */
	.rs-header { backdrop-filter: none; background: #fff; }
	.rs-nav {
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 99;
		width: min(320px, 85vw); background: #fff; margin: 0;
		padding: 18px 16px; overflow-y: auto;
		transform: translateX(105%); transition: transform .28s ease;
		box-shadow: -10px 0 40px rgba(0,0,0,.14);
	}
	.rs-nav.is-open { transform: translateX(0); }
	/* Con sesión iniciada, la barra de WordPress va fija arriba y tapaba el
	   logo y el botón de cerrar del panel. */
	.admin-bar .rs-nav { top: 46px; }
	.rs-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
	/* El logo es apaisado: con solo max-height crecía tanto que se comía el
	   sitio del botón de cerrar y terminaba pisándolo. */
	.rs-nav__head img, .rs-nav__head .custom-logo {
		max-height: 42px; max-width: 190px;
		width: auto; height: auto; object-fit: contain;
	}
	.rs-nav__close { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--rs-gray); }
	.rs-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.rs-menu > li { border-bottom: 1px solid var(--rs-line); }
	/* Más compacto: con 16px de alto por ítem y 12px entre ícono y texto, cinco
	   opciones ya llegaban casi al pie del panel y sobraba aire a la izquierda. */
	.rs-menu > li > a, .rs-menu > li > .rs-menu__toggle {
		display: flex; align-items: center; gap: 10px;
		padding: 11px 2px; width: 100%; text-align: left;
		font-size: .92rem;
	}
	.rs-menu__icono { display: inline-block; width: 17px; height: 17px; color: var(--rs-orange); vertical-align: -3px; }
	/* text-align a la izquierda: el botón de "Categorías" centra su contenido
	   por defecto y su texto quedaba descolocado respecto al resto. */
	.rs-menu__texto { flex: 1 1 auto; text-align: left; }
	.rs-menu > li > .rs-menu__toggle .rs-menu__caret { margin-left: auto; }
	.rs-submenu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding: 0 0 10px 12px;
		display: none;
	}
	.rs-menu__parent.is-open .rs-submenu { display: block; }
	.rs-burger { display: block; }
	ul.products, .rs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
	.rs-hero__inner { padding: 72px 20px; }
	/* La tarjeta del CTA también es .rs-container, pero su propio padding pisa
	   el respiro lateral de éste: en móvil quedaba pegada a los dos bordes. */
	.rs-cta { padding-bottom: 56px; }
	.rs-cta__card { padding: 44px 24px; margin-inline: 20px; width: auto; }
	/* En escritorio el input del cupón lleva "flex: 1 1 280px". Acá el
	   contenedor pasa a "column", así que esos 280px dejan de ser ancho y se
	   convierten en ALTURA. Por eso se resetea el flex. */
	.woocommerce-cart td.actions .coupon { flex-direction: column; align-items: center; gap: 14px; }
	.woocommerce-cart #coupon_code { flex: 0 0 auto; width: 100%; min-width: 0; max-width: none; height: auto; }
	.rs-gallery__thumbs-wrap { --rs-thumb-size: 68px; --rs-thumb-gap: 10px; }
	.rs-product-desc { margin-top: 36px; padding: 24px 22px; }
	.rs-footer__grid { flex-direction: column; gap: 28px; }
}
@media (max-width: 600px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { grid-column: 1; }
	.woocommerce-order ul.woocommerce-order-overview { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
	ul.products, .rs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
}

/* =========================================================
   Mi cuenta y acceso — rediseño
   ========================================================= */

/* ---------- Acceso / Registro ----------
   El contenedor real es .u-columns.col2-set — el selector anterior apuntaba a
   una clase que WooCommerce no usa acá, y por eso las dos cajas quedaban una
   debajo de la otra en vez de lado a lado. */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 26px;
	align-items: start;
	max-width: 980px;
}
.woocommerce-account .u-columns.col2-set > .u-column1,
.woocommerce-account .u-columns.col2-set > .u-column2 {
	width: auto !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-lg);
	padding: 30px;
}
.woocommerce-account .u-columns.col2-set > div > h2 {
	font-size: 1.25rem;
	margin: 0 0 6px;
}
.woocommerce-account .u-columns.col2-set > div > h2 + form { margin-top: 20px; }

/* Las cajas de los formularios van sin fondo propio: la tarjeta que las
   envuelve ya aporta el marco. */
.woocommerce-form-login, .woocommerce-form-register {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}
.woocommerce form.woocommerce-form-login .form-row,
.woocommerce form.woocommerce-form-register .form-row { margin-bottom: 16px; }

.woocommerce-form__label-for-checkbox,
.woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;
	gap: 9px;
	font-size: .9rem;
	color: var(--rs-ink-muted);
	cursor: pointer;
}
.woocommerce-form__input-checkbox {
	width: 17px; height: 17px; margin: 0;
	accent-color: var(--rs-orange);
}
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
	padding: 14px 24px;
}
.woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: .88rem;
}
.woocommerce-LostPassword a { color: var(--rs-ink-muted); }
.woocommerce-LostPassword a:hover { color: var(--rs-orange); }
.woocommerce-privacy-policy-text { font-size: .84rem; color: var(--rs-gray); }
.woocommerce-privacy-policy-text p:last-child { margin-bottom: 0; }

/* ---------- Estructura de Mi cuenta ---------- */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--rs-bg-alt);
	border: none;
	border-radius: var(--rs-radius-lg);
	padding: 12px;
	float: none !important;
	width: auto !important;
	margin: 0;
	position: sticky;
	top: 96px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0 0 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 12px 14px;
	border-radius: var(--rs-radius);
	color: var(--rs-ink);
	font-weight: 500;
	font-size: .92rem;
	transition: background .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: rgba(20, 17, 15, .06);
	color: var(--rs-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--rs-orange);
	color: #fff;
}
/* Cerrar sesión va separado del resto */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--rs-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--rs-gray); }

.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	color: var(--rs-ink);
	min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content mark {
	background: transparent; color: var(--rs-ink); font-weight: 600;
}

/* ---------- Tablas de pedidos y descargas ---------- */
.woocommerce-account table.shop_table {
	width: 100%;
	border: 1px solid var(--rs-line) !important;
	border-radius: var(--rs-radius-lg) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	background: #fff;
	margin: 0 0 22px;
}
.woocommerce-account table.shop_table thead th {
	background: var(--rs-bg-alt);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rs-gray);
	font-weight: 600;
	padding: 13px 18px;
	border: none;
}
.woocommerce-account table.shop_table tbody td {
	padding: 16px 18px;
	border: none;
	border-top: 1px solid var(--rs-line);
	vertical-align: middle;
	font-size: .93rem;
}
.woocommerce-account table.shop_table tbody tr:first-child td { border-top: none; }
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-number a { font-weight: 600; color: var(--rs-ink); }
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-number a:hover { color: var(--rs-orange); }
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions { text-align: right; }
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions .button {
	padding: 8px 16px;
	font-size: .82rem;
	margin: 2px 0 2px 6px;
}
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-status {
	font-weight: 600;
	color: var(--rs-ink-muted);
}

/* ---------- Direcciones ---------- */
.woocommerce-account .u-columns.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
	margin-top: 8px;
}
.woocommerce-account .woocommerce-Address {
	background: var(--rs-bg-alt);
	border-radius: var(--rs-radius-lg);
	padding: 24px;
	width: auto !important;
	float: none !important;
}
.woocommerce-Address-title.title { margin-bottom: 14px; }
.woocommerce-Address address {
	color: var(--rs-ink-muted);
	font-style: normal;
	line-height: 1.8;
	margin: 0;
}

/* ---------- Detalles de la cuenta ---------- */
.woocommerce-EditAccountForm {
	background: #fff;
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-lg);
	padding: 28px;
	max-width: 680px;
}
.woocommerce-EditAccountForm fieldset {
	border: none;
	border-top: 1px solid var(--rs-line);
	margin: 26px 0 0;
	padding: 24px 0 0;
}
.woocommerce-EditAccountForm legend {
	padding: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--rs-ink);
	margin-bottom: 4px;
}
.woocommerce-EditAccountForm .woocommerce-Button { margin-top: 10px; }
/* Mismo motivo que el botón de "Finalizar compra" del carrito: el CSS de
   WooCommerce trae ".woocommerce-Button.button" con más especificidad que
   nuestra regla genérica ".button", así que ganaba su morado/lila por
   defecto. Se cubre acá para toda la sección de "Mi cuenta" (detalles,
   direcciones, etc.), no solo este formulario. */
.woocommerce-account .woocommerce-Button.button {
	background: var(--rs-orange); color: #fff;
}
.woocommerce-account .woocommerce-Button.button:hover { background: var(--rs-orange-dark); color: #fff; }
/* Ojo con la mayúscula: el botón de "Detalles de la cuenta" usa
   ".woocommerce-Button" (B mayúscula) pero el de login/registro usa
   ".woocommerce-button" en minúscula — son dos clases CSS distintas, no un
   error de tipeo, así que se cubren las dos por separado. */
.woocommerce-account .woocommerce-button.button,
.woocommerce-form-login__submit.button,
.woocommerce-form-register__submit.button {
	background: var(--rs-orange); color: #fff;
}
.woocommerce-account .woocommerce-button.button:hover,
.woocommerce-form-login__submit.button:hover,
.woocommerce-form-register__submit.button:hover { background: var(--rs-orange-dark); color: #fff; }
.woocommerce-EditAccountForm em { font-size: .84rem; color: var(--rs-gray); font-style: normal; }

/* Avisos dentro del panel (por ejemplo, "aún no hay pedidos") */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
	background: var(--rs-bg-alt);
	border-top: 3px solid var(--rs-orange);
}

@media (max-width: 860px) {
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: 22px; }
	.woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
}
@media (max-width: 600px) {
	.woocommerce-account table.shop_table thead { display: none; }
	.woocommerce-account table.shop_table tbody td {
		display: flex; justify-content: space-between; gap: 14px;
		border-top: none; padding: 9px 16px;
	}
	.woocommerce-account table.shop_table tbody td::before {
		content: attr(data-title);
		font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
		color: var(--rs-gray); font-weight: 600;
	}
	.woocommerce-account table.shop_table tbody tr { display: block; border-top: 1px solid var(--rs-line); padding: 8px 0; }
	.woocommerce-account table.shop_table tbody tr:first-child { border-top: none; }
	.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
}

/* =========================================================
   Escritorio de Mi cuenta, direcciones y detalle del pedido
   ========================================================= */

/* ---------- Escritorio ---------- */
.rs-dash__hello { margin-bottom: 22px; }
.rs-dash__hello h2 { font-size: 1.5rem; margin: 0 0 6px; }
.rs-dash__profile {
	display: inline-block;
	font-size: .78rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	color: #15794a; background: rgba(26, 155, 86, .12);
	padding: 5px 12px; border-radius: 999px;
}

.rs-dash__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 30px;
}
.rs-dash__stat {
	display: flex; flex-direction: column; gap: 6px;
	background: var(--rs-bg-alt);
	border-radius: var(--rs-radius-lg);
	padding: 18px 20px;
}
.rs-dash__stat-label {
	font-size: .72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--rs-gray);
}
.rs-dash__stat-value {
	font-size: 1.5rem; font-weight: 700; color: var(--rs-ink);
	line-height: 1.1;
}
.rs-dash__stat-value .woocommerce-Price-amount { font-size: 1.35rem; }

.rs-dash__block { margin-bottom: 30px; }
.rs-dash__block-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; margin-bottom: 14px;
}
.rs-dash__block-head h3 { font-size: 1.1rem; margin: 0; }
.rs-dash__block-head a { font-size: .86rem; font-weight: 500; white-space: nowrap; }

.rs-dash__orders { list-style: none; margin: 0; padding: 0; }
.rs-dash__order {
	display: grid;
	grid-template-columns: 90px 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 15px 18px;
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius);
	margin-bottom: 8px;
	color: var(--rs-ink);
	transition: border-color .15s ease, background .15s ease;
}
.rs-dash__order:hover { border-color: var(--rs-orange); background: var(--rs-bg-alt); color: var(--rs-ink); }
.rs-dash__order-num { font-weight: 700; }
.rs-dash__order-date { color: var(--rs-gray); font-size: .88rem; }
.rs-dash__order-total { font-weight: 600; }
.rs-dash__order-status {
	font-size: .74rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	padding: 5px 11px; border-radius: 999px;
	background: var(--rs-line); color: var(--rs-ink-muted);
	white-space: nowrap;
}
.rs-status--completed { background: rgba(26, 155, 86, .14); color: #15794a; }
.rs-status--processing { background: rgba(252, 75, 8, .13); color: var(--rs-orange-dark); }
.rs-status--on-hold, .rs-status--pending { background: rgba(214, 160, 0, .16); color: #8a6500; }
.rs-status--cancelled, .rs-status--failed, .rs-status--refunded { background: rgba(215, 0, 21, .1); color: #a5000f; }

.rs-dash__empty { color: var(--rs-ink-muted); }

.rs-dash__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}
.rs-dash__links a {
	display: flex; flex-direction: column; gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius);
	color: var(--rs-ink);
	transition: border-color .15s ease, background .15s ease;
}
.rs-dash__links a:hover { border-color: var(--rs-orange); background: var(--rs-bg-alt); color: var(--rs-ink); }
.rs-dash__links strong { font-size: .95rem; font-weight: 600; }
.rs-dash__links span { font-size: .82rem; color: var(--rs-gray); }

/* ---------- Direcciones con detalle ---------- */
.rs-address-intro { color: var(--rs-ink-muted); margin-bottom: 18px; }
.rs-address {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	margin: 0;
	font-size: .92rem;
}
.rs-address dt {
	color: var(--rs-gray);
	font-weight: 500;
	margin: 0;
	white-space: nowrap;
}
.rs-address dd {
	margin: 0;
	color: var(--rs-ink);
	font-weight: 500;
	word-break: break-word;
}
.rs-address-empty { color: var(--rs-gray); margin: 0; font-size: .92rem; }

/* ---------- Detalle del pedido (dentro de Mi cuenta) ---------- */
.woocommerce-view-order .woocommerce-order-details,
.woocommerce-account .woocommerce-order-details { margin-bottom: 34px; }
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title { font-size: 1.15rem; margin: 0 0 16px; }

/* Cabecera con el estado del pedido */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type mark.order-status {
	display: inline-block;
	background: rgba(252, 75, 8, .13);
	color: var(--rs-orange-dark);
	font-size: .78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	padding: 5px 12px; border-radius: 999px;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type mark.order-date,
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type mark.order-number {
	font-weight: 700; color: var(--rs-ink);
}

/* Datos del cliente al pie del detalle */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
.woocommerce-account .woocommerce-customer-details .col-1,
.woocommerce-account .woocommerce-customer-details .col-2 {
	background: var(--rs-bg-alt);
	border-radius: var(--rs-radius-lg);
	padding: 22px;
	width: auto !important;
	float: none !important;
}
.woocommerce-account .woocommerce-customer-details address {
	background: transparent;
	padding: 0;
	border: none;
	font-style: normal;
	line-height: 1.8;
	color: var(--rs-ink-muted);
}

@media (max-width: 620px) {
	.rs-dash__order { grid-template-columns: 1fr auto; gap: 6px 12px; }
	.rs-dash__order-date { grid-column: 1 / -1; order: 3; }
	.rs-address { grid-template-columns: 1fr; gap: 2px 0; }
	.rs-address dt { font-size: .78rem; }
	.rs-address dd { margin-bottom: 10px; }
}

/* ---------- Detalle del pedido ---------- */
.rs-order__head {
	background: var(--rs-bg-alt);
	border-radius: var(--rs-radius-lg);
	padding: 22px 24px;
	margin-bottom: 30px;
}
.rs-order__top {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 10px 16px;
	margin-bottom: 14px;
}
/* Nota: el color de fondo/texto lo pone SOLO ".rs-status--*" (ver más abajo,
   junto al resto de los estados) — acá va nada más que la forma de la
   píldora, para no taparle el color a la variante con un empate de
   especificidad. Se reutiliza tal cual en la lista de "Mis pedidos". */
.rs-order__status {
	display: inline-block;
	font-size: .76rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	padding: 6px 14px; border-radius: 999px;
	white-space: nowrap;
}
.rs-order__number { font-size: .86rem; font-weight: 600; color: var(--rs-ink-muted); }
/* El monto es lo primero que se busca al entrar al detalle: grande y en el
   mismo verde que el resto del sitio usa para "plata a tu favor" (el ahorro
   del carrito, "completed"). */
.rs-order__total {
	font-size: 2rem; font-weight: 700; line-height: 1.1;
	color: #15794a; margin: 0 0 14px;
}
.rs-order__meta { margin: 0 0 10px; font-size: .88rem; color: var(--rs-ink-muted); }
.rs-order__sep { margin: 0 8px; color: var(--rs-line); }
.rs-order__address {
	display: flex; flex-wrap: wrap; gap: 4px 8px;
	font-size: .88rem; color: var(--rs-ink-muted);
}
.rs-order__address strong { color: var(--rs-ink); font-weight: 600; }
.rs-order__actions { margin-top: 18px; }

/* Seguimiento del pedido */
.rs-order__notes { margin-bottom: 34px; }
.rs-order__notes h2 { font-size: 1.15rem; margin: 0 0 16px; }
.rs-timeline { list-style: none; margin: 0; padding: 0; }
.rs-timeline__item {
	position: relative;
	padding: 0 0 22px 26px;
	margin: 0;
}
/* Línea que une los hitos; el último no la lleva */
.rs-timeline__item::before {
	content: "";
	position: absolute;
	left: 5px; top: 14px; bottom: 0;
	width: 2px;
	background: var(--rs-line);
}
.rs-timeline__item:last-child { padding-bottom: 0; }
.rs-timeline__item:last-child::before { display: none; }
.rs-timeline__dot {
	position: absolute;
	left: 0; top: 6px;
	width: 12px; height: 12px;
	border-radius: 999px;
	background: var(--rs-orange);
	box-shadow: 0 0 0 3px rgba(252, 75, 8, .16);
}
.rs-timeline__date {
	display: block;
	font-size: .78rem; font-weight: 600;
	color: var(--rs-gray);
	margin-bottom: 4px;
}
.rs-timeline__text { color: var(--rs-ink); font-size: .93rem; }
.rs-timeline__text p { margin: 0 0 6px; }
.rs-timeline__text p:last-child { margin-bottom: 0; }

/* La dirección del detalle, en tarjeta como el resto */
.woocommerce-account .woocommerce-customer-details address {
	background: var(--rs-bg-alt);
	border-radius: var(--rs-radius-lg);
	padding: 20px 22px;
	font-style: normal;
	line-height: 1.8;
	color: var(--rs-ink-muted);
	border: none;
	margin: 0;
}
.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 8px 0 0;
	color: var(--rs-ink-muted);
	font-size: .9rem;
}

@media (max-width: 620px) {
	.rs-order__facts { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Desglose de descuentos del pedido
   ========================================================= */
.rs-descuentos {
	margin: 0 0 34px;
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-lg);
	padding: 22px 24px;
	background: #fff;
}
.rs-descuentos__titulo {
	font-size: 1.05rem;
	margin: 0 0 16px;
}
.rs-descuentos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rs-descuento {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--rs-radius);
	background: var(--rs-bg-alt);
}
.rs-descuento__icono {
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: #fff;
	color: var(--rs-ink-muted);
}
/* Un color por origen, para distinguirlos de un vistazo */
.rs-descuento--perfil .rs-descuento__icono { color: #15794a; background: rgba(26, 155, 86, .12); }
.rs-descuento--cupon .rs-descuento__icono { color: var(--rs-orange-dark); background: rgba(252, 75, 8, .12); }
.rs-descuento--giftcard .rs-descuento__icono { color: #6b3fa0; background: rgba(107, 63, 160, .12); }

.rs-descuento__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.rs-descuento__texto strong {
	font-size: .94rem;
	font-weight: 600;
	color: var(--rs-ink);
}
.rs-descuento__texto span {
	font-size: .82rem;
	color: var(--rs-gray);
	word-break: break-word;
}
.rs-descuento__monto {
	font-size: 1rem;
	font-weight: 700;
	color: #15794a;
	white-space: nowrap;
}

.rs-descuentos__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--rs-line);
}
.rs-descuentos__total span {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rs-gray);
}
.rs-descuentos__total strong {
	font-size: 1.2rem;
	font-weight: 700;
	color: #15794a;
}

/* Filas de ahorro dentro de la tabla de totales del pedido */
.woocommerce table.shop_table tfoot tr.royal_base td,
.woocommerce table.shop_table tfoot tr.royal_base th { color: var(--rs-gray); }
.woocommerce table.shop_table tfoot tr.royal_profile td { color: #15794a; font-weight: 600; }

@media (max-width: 520px) {
	.rs-descuento { grid-template-columns: 28px 1fr; }
	.rs-descuento__icono { width: 28px; height: 28px; }
	.rs-descuento__monto { grid-column: 2; }
}

/* Los nodos de texto sueltos del <header> seguían contando como elementos y
   corrían el título 10px (el gap). Con gap 0 y font-size 0 en el contenedor
   esos nodos dejan de ocupar espacio; el tamaño real se define en los hijos.
   El título se encoge si hace falta para que "Editar" no salte de línea. */
.woocommerce-Address-title.title {
	display: flex !important;
	align-items: baseline;
	justify-content: flex-start !important;
	flex-wrap: nowrap;
	gap: 0 !important;
	font-size: 0;
	margin-bottom: 14px;
}
.woocommerce-Address-title.title h2 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 12px 0 0;
	font-size: 1.05rem;
}
.woocommerce-Address-title.title .edit {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: .8rem;
	font-weight: 500;
	color: var(--rs-orange);
	white-space: nowrap;
}

/* ---------- Tarjetas de regalo y cupones ---------- */
/* Se muestran en el escritorio de Mi cuenta. La tarjeta lleva barra de saldo;
   el cupón, no (no se gasta de a poco, se usa o no se usa). */
.rs-gc-lista {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.rs-gc {
	display: flex; flex-direction: column; gap: 10px;
	background: var(--rs-bg-alt);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-lg);
	padding: 18px 20px;
}
/* La tarjeta de regalo se distingue del cupón con el naranja del club. */
.rs-gc--tarjeta { border-color: rgba(252, 75, 8, .35); background: rgba(252, 75, 8, .05); }

.rs-gc__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rs-gc__codigo {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .78rem; font-weight: 600; letter-spacing: .04em;
	color: var(--rs-ink);
	background: #fff; border: 1px solid var(--rs-line);
	border-radius: 999px; padding: 4px 12px;
	/* El código se copia entero: partido en dos líneas no se entiende. */
	white-space: nowrap;
}
.rs-gc__tipo {
	font-size: .68rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--rs-gray);
}
.rs-gc--tarjeta .rs-gc__tipo { color: var(--rs-orange-dark); }

.rs-gc__monto { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.rs-gc__monto strong { font-size: 1.45rem; font-weight: 700; color: var(--rs-ink); line-height: 1.1; }
.rs-gc__monto strong .woocommerce-Price-amount { font-size: inherit; }
.rs-gc__monto span { font-size: .78rem; color: var(--rs-gray); }

.rs-gc__barra { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.rs-gc__barra span { display: block; height: 100%; border-radius: inherit; background: var(--rs-orange); }

.rs-gc__vence { font-size: .75rem; color: var(--rs-gray); }
.rs-gc__ayuda { margin: 14px 0 0; font-size: .82rem; color: var(--rs-gray); }

/* ---------- Botones flotantes ---------- */
/* Cada botón se expande solo, por eso el ancho lo maneja el propio <a> y no el
   contenedor: si el :hover viviera en .rs-fabs, pasar el mouse por uno movería
   al otro. El "align-items: flex-end" los mantiene anclados a la derecha
   mientras crecen hacia la izquierda. */
.rs-fabs {
	position: fixed; right: 18px; bottom: 18px; z-index: 40;
	display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.rs-fab {
	display: flex; align-items: center; gap: 0;
	height: 48px; padding: 0; border-radius: 999px;
	background: var(--rs-black); color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	overflow: hidden;
	transition: gap .25s ease, padding-right .25s ease, background-color .25s ease;
}
.rs-fab:hover, .rs-fab:focus-visible { color: #fff; gap: 10px; padding-right: 20px; }
.rs-fab--ig { background: linear-gradient(135deg, #833ab4, #fd1d1d 55%, #fcb045); }
.rs-fab--web:hover { background: var(--rs-orange); }

.rs-fab__icono {
	flex: 0 0 48px; width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
}
/* El texto arranca en cero y se abre al pasar el mouse. Va con "max-width" y no
   con "display: none" para que la apertura sea animable. */
.rs-fab__texto {
	max-width: 0; white-space: nowrap;
	font-size: .86rem; font-weight: 600;
	opacity: 0;
	transition: max-width .25s ease, opacity .2s ease;
}
.rs-fab:hover .rs-fab__texto,
.rs-fab:focus-visible .rs-fab__texto { max-width: 220px; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.rs-fab, .rs-fab__texto { transition: none; }
}

/* ---------- Buscador de la lupa ---------- */
/* El color de este botón lo fija la regla de ".rs-header__actions"; acá solo
   se le quita la apariencia de <button>. */
.rs-buscar-toggle { background: none; border: 0; padding: 0; cursor: pointer; }

.rs-buscador { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; }
.rs-buscador[hidden] { display: none; }
.rs-buscador__fondo {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(3px);
}
.rs-buscador__caja {
	position: relative;
	width: min(620px, calc(100% - 32px));
	margin-top: 12vh; align-self: flex-start;
	background: #fff; border-radius: var(--rs-radius-lg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	overflow: hidden;
	animation: rs-buscador-entra .18s ease;
}
@keyframes rs-buscador-entra {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.rs-buscador__form { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.rs-buscador__lupa { color: var(--rs-gray); flex: 0 0 auto; }
.rs-buscador__input {
	flex: 1; min-width: 0;
	border: 0; outline: none; background: none;
	font-family: inherit; font-size: 1.05rem; color: var(--rs-ink);
}
.rs-buscador__input::placeholder { color: var(--rs-gray); }
/* El navegador dibuja su propia "x" en los input[type=search]; sobra, porque
   el popup ya tiene botón de cerrar. */
.rs-buscador__input::-webkit-search-cancel-button { display: none; }
.rs-buscador__cerrar {
	flex: 0 0 auto; background: none; border: 0; cursor: pointer;
	font-size: 1.5rem; line-height: 1; color: var(--rs-gray); padding: 0 4px;
}
.rs-buscador__cerrar:hover { color: var(--rs-ink); }

/* La línea divisoria va en el contenedor de resultados, que está oculto hasta
   que hay algo que mostrar: si viviera en el formulario, al abrir el popup se
   vería una raya suelta debajo del campo vacío. */
.rs-buscador__resultados { border-top: 1px solid var(--rs-line); max-height: 60vh; overflow-y: auto; }
.rs-buscador__resultados[hidden] { display: none; }

.rs-buscador__lista { list-style: none; margin: 0; padding: 8px; }
.rs-buscador__lista a {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 12px; border-radius: var(--rs-radius); color: var(--rs-ink);
}
.rs-buscador__lista a:hover { background: var(--rs-bg-alt); }
.rs-buscador__foto { flex: 0 0 56px; }
.rs-buscador__foto img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--rs-bg-alt); }
.rs-buscador__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-buscador__datos strong { font-size: .94rem; font-weight: 500; }
.rs-buscador__precio { font-size: .85rem; color: var(--rs-gray); }
.rs-buscador__precio ins { text-decoration: none; color: var(--rs-orange-dark); font-weight: 600; }
.rs-buscador__precio del { opacity: .6; margin-right: 6px; }

.rs-buscador__pie { padding: 10px 20px 16px; }
.rs-buscador__pie a { font-size: .88rem; font-weight: 500; }
.rs-buscador__vacio { padding: 22px 20px; color: var(--rs-gray); font-size: .92rem; }

@media (max-width: 600px) {
	.rs-buscador__caja { margin-top: 8vh; }
}

/* ---------- Líneas del carrito lateral ---------- */
/* Varias de estas reglas pelean con estilos de WooCommerce que vienen con
   selectores largos (ul.cart_list li img, ul.cart_list li dl…), así que llevan
   "!important" donde hace falta: sin eso la foto vuelve a 32px flotando a la
   derecha y los datos recuperan su barra vertical a la izquierda. */
.rs-mini-cart .cart_list li.rs-mc-item {
	position: relative;
	display: block;
	padding: 0 0 13px; margin: 0 0 13px;
	border-bottom: 1px solid var(--rs-line);
	list-style: none;
}
/* El último no lleva línea ni el respiro de abajo: si no, queda una raya
   suelta justo encima del Subtotal del pie. */
.rs-mini-cart .cart_list li.rs-mc-item:last-child { border-bottom: none; padding-bottom: 6px; margin-bottom: 0; }

.rs-mc-item__nombre {
	display: block;
	font-size: .88rem; font-weight: 600; color: var(--rs-ink); line-height: 1.3;
	/* Espacio a la derecha para que el nombre largo no pase por debajo de la ×. */
	padding-right: 30px;
}
a.rs-mc-item__nombre:hover { color: var(--rs-orange); }

.rs-mc-item__foto { margin: 6px 0 0; }
.rs-mini-cart .cart_list li.rs-mc-item img {
	/* WooCommerce le pone float:right y 32px de ancho. */
	float: none !important;
	width: 64px !important; height: 64px !important;
	margin: 0 !important;
	object-fit: cover; border-radius: var(--rs-radius);
	background: var(--rs-bg-alt);
}

/* Datos en dos columnas: etiqueta a la izquierda, valor a la derecha. */
.rs-mini-cart .cart_list li.rs-mc-item dl.rs-mc-item__datos {
	display: grid; grid-template-columns: auto 1fr;
	gap: 4px 14px; align-items: baseline;
	margin: 8px 0 0; padding: 8px 0 0;
	/* Punteada para distinguirla de la línea sólida que separa un producto del
	   siguiente: con las dos iguales no se sabía dónde terminaba cada ítem. */
	border-top: 1px dashed var(--rs-line);
	border-left: none !important;
	font-size: .8rem;
}
/* WooCommerce le mete un clearfix al <dl> ("content: ' '; display: table" en
   ::before y ::after). Dentro de un grid esos pseudo-elementos cuentan como dos
   celdas más y corren todos los pares: la talla quedaba en la columna del valor
   y el valor en la etiqueta del dato siguiente. */
.rs-mini-cart .cart_list li.rs-mc-item dl.rs-mc-item__datos::before,
.rs-mini-cart .cart_list li.rs-mc-item dl.rs-mc-item__datos::after {
	content: none !important; display: none !important;
}
.rs-mini-cart .cart_list li.rs-mc-item dl.rs-mc-item__datos dt {
	margin: 0; padding: 0; float: none;
	font-weight: 400; color: var(--rs-gray); white-space: nowrap;
}
.rs-mini-cart .cart_list li.rs-mc-item dl.rs-mc-item__datos dd {
	margin: 0; padding: 0; float: none;
	text-align: right; color: var(--rs-ink);
}
.rs-mini-cart .cart_list li.rs-mc-item dl.rs-mc-item__datos dd p { margin: 0; }

/* El subtotal cierra el bloque, así que va con más peso. */
.rs-mc-item__sub-et { font-weight: 500 !important; color: var(--rs-ink-muted) !important; }
.rs-mini-cart .cart_list li.rs-mc-item dd.rs-mc-item__sub {
	font-size: .94rem; font-weight: 700; color: var(--rs-ink);
}
/* Con descuento de socio, el precio normal va tachado y chico antes del final. */
.rs-mc-item__sub del { display: block; font-weight: 400; font-size: .78em; color: var(--rs-gray); }
.rs-mc-item__sub del .woocommerce-Price-amount { color: inherit; }
.rs-mc-item__sub ins { text-decoration: none; }

/* La × se ancla arriba a la derecha, pegada al borde (0) y no fuera de él: la
   lista tiene scroll propio, y un elemento en negativo se corta o abre una barra
   horizontal fantasma. */
.rs-mini-cart .cart_list li.rs-mc-item a.remove {
	position: absolute; top: 0; right: 0;
	width: 24px !important; height: 24px !important;
	line-height: 22px !important; font-size: 19px !important;
	text-align: center; border-radius: 999px;
	color: var(--rs-gray) !important; background: none !important;
	text-decoration: none;
}
.rs-mini-cart .cart_list li.rs-mc-item a.remove:hover {
	color: #fff !important; background: #d70015 !important;
}

/* Ahorro por perfil: mismos colores que la versión en tabla del carrito y el
   checkout (".rs-cart-saving"), pero en filas simples porque acá no hay
   <table>. */
.rs-mc-saving { padding: 12px 0 0; border-top: 1px solid var(--rs-line); font-size: .86rem; }
.rs-mc-saving__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; }
.rs-mc-saving__row--base { color: var(--rs-gray); }
.rs-mc-saving__row--base del { color: inherit; }
.rs-mc-saving__row--off { color: #15794a; font-weight: 600; }

/* Total y botones */
.rs-mini-cart .woocommerce-mini-cart__total {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; margin: 0; padding: 16px 0;
	border-top: 1px solid var(--rs-line);
	font-size: 1rem; color: var(--rs-ink);
}
.rs-mini-cart .woocommerce-mini-cart__total strong { font-weight: 700; }
.rs-mini-cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-size: 1.2rem; font-weight: 700; color: var(--rs-ink);
}
.rs-mini-cart .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; }
/* La regla base de botones de WooCommerce exige la clase "woocommerce" en el
   body, que no está en la portada: sin repetirla acá, el texto del botón se iba
   arriba y a la izquierda cuando el carrito se abría desde el home. */
.rs-mini-cart .woocommerce-mini-cart__buttons a.button {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 48px; padding: 12px 20px;
	border-radius: 999px; font-weight: 600; text-align: center;
}
/* "Ver carrito" es la acción secundaria (el naranjo queda para "Finalizar
   compra", que lleva además la clase .checkout). */
.rs-mini-cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
	background: var(--rs-bg-alt); color: var(--rs-ink); border: 1px solid var(--rs-line);
}
.rs-mini-cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
	background: var(--rs-line); color: var(--rs-ink);
}
.rs-mc-vacio { margin: 0; color: var(--rs-gray); }

/* ---------- Atributos con foto ---------- */
.rs-swatches--foto {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
}
.rs-swatch--foto {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 8px; height: auto;
	background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
	cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease;
}
.rs-swatch--foto:hover { border-color: var(--rs-gray); }
/* Naranjo suave y NO el naranjo pleno de ".rs-swatch.is-active": acá abajo va
   el nombre de la camiseta, y con el fondo sólido (antes negro, heredado de
   esa regla) el texto quedaba invisible. */
.rs-swatch--foto.is-active {
	background: rgba(252, 75, 8, .10);
	border-color: var(--rs-orange);
	box-shadow: 0 0 0 2px rgba(252, 75, 8, .18);
	color: var(--rs-ink);
}
.rs-swatch__foto {
	display: block; width: 100%; aspect-ratio: 1 / 1;
	border-radius: 8px; overflow: hidden; background: var(--rs-bg-alt);
}
.rs-swatch__foto img { width: 100%; height: 100%; object-fit: cover; }
.rs-swatch__nombre {
	font-size: .72rem; line-height: 1.25; text-align: center; color: var(--rs-ink-muted);
}
.rs-swatch--foto.is-active .rs-swatch__nombre { color: var(--rs-ink); font-weight: 600; }

/* ---------- Complementos ---------- */
.rs-complementos {
	/* Ocupa toda la fila del formulario de compra, que es flex: sin esto queda
	   apretado al lado del botón de agregar. */
	flex: 0 0 100%; width: 100%;
	margin-top: 8px; padding: 18px 20px;
	background: var(--rs-bg-alt); border-radius: var(--rs-radius-lg);
}
.rs-complementos__titulo { margin: 0; font-size: 1rem; }
.rs-complementos__bajada { margin: 2px 0 14px; font-size: .82rem; color: var(--rs-gray); }
.rs-complementos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.rs-complemento {
	background: #fff; border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius); padding: 12px 14px;
	transition: border-color .18s ease;
}
.rs-complemento.is-elegido { border-color: var(--rs-orange); }

.rs-complemento__cabecera { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.rs-complemento__check { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--rs-orange); margin: 0; }
.rs-complemento__foto { flex: 0 0 48px; }
.rs-complemento__foto img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--rs-bg-alt); }
.rs-complemento__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-complemento__nombre { font-size: .9rem; font-weight: 500; color: var(--rs-ink); }
.rs-complemento__precio { font-size: .84rem; color: var(--rs-gray); }
.rs-complemento__precio del { display: none; }
.rs-complemento__precio ins { text-decoration: none; }

.rs-complemento__opciones {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 10px; padding-left: 30px;
}
.rs-complemento__etiqueta { font-size: .76rem; color: var(--rs-gray); }
.rs-complemento__botones { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-complemento__boton {
	min-width: 38px; padding: 5px 10px;
	background: #fff; border: 1px solid var(--rs-line); border-radius: 8px;
	font-family: inherit; font-size: .78rem; color: var(--rs-ink-muted); cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.rs-complemento__boton:hover { border-color: var(--rs-gray); }
.rs-complemento__boton.is-active {
	border-color: var(--rs-orange); background: var(--rs-orange); color: #fff; font-weight: 600;
}
/* Cuando falta elegir la talla, el aviso va en el propio bloque. */
.rs-complemento.is-incompleto .rs-complemento__botones { box-shadow: 0 0 0 2px rgba(215, 0, 21, .25); border-radius: 10px; }

/* ---------- Carrito en móvil ---------- */
/* WooCommerce colapsa la tabla en pares sueltos "Etiqueta: valor" con
   woocommerce-smallscreen.css: esconde la miniatura, pinta filas cebra y mete
   la etiqueta con "content: attr(data-title)". Queda genérico y no calza con el
   resto del sitio. Acá cada producto vuelve a ser una tarjeta, con el mismo
   orden de lectura que el carrito lateral: foto y nombre arriba, después los
   datos, y el subtotal separado por una línea al final. */
@media (max-width: 768px) {
	.woocommerce-cart table.shop_table_responsive {
		border: none !important; border-radius: 0 !important;
		overflow: visible; background: transparent;
	}
	.woocommerce-cart table.shop_table_responsive thead { display: none; }

	.woocommerce-cart table.shop_table_responsive tr.cart_item {
		position: relative; display: flex; flex-wrap: wrap;
		background: #fff; border: 1px solid var(--rs-line);
		border-radius: var(--rs-radius-lg);
		padding: 16px; margin-bottom: 14px;
	}
	/* WooCommerce le pone border-top a cada celda y fondo gris a las filas
	   pares (su "cebra"): dentro de la tarjeta eso se ve como rayas sueltas y
	   como que un producto sí y otro no tiene el fondo manchado. */
	.woocommerce-cart table.shop_table_responsive tr.cart_item td {
		border: none !important; padding: 0; text-align: left;
		background-color: transparent !important;
	}
	.woocommerce-cart table.shop_table_responsive tr.cart_item td::before {
		font-weight: 400; color: var(--rs-gray); font-size: .82rem; float: none;
	}

	/* Foto: WooCommerce la esconde en móvil. */
	.woocommerce-cart table.shop_table_responsive .product-thumbnail {
		display: block !important; order: 1; flex: none; width: 72px;
	}
	/* Con la miniatura visible reaparece su propio "::before" con un data-title
	   vacío, y queda un ":" suelto flotando encima de la foto. */
	.woocommerce-cart table.shop_table_responsive .product-thumbnail::before { content: none; }
	.woocommerce-cart table.shop_table_responsive .product-thumbnail img {
		width: 72px !important; height: 72px !important; object-fit: cover;
		border-radius: var(--rs-radius); float: none !important; margin: 0 !important;
		background: var(--rs-bg-alt);
	}

	/* Lleva "td" a propósito: la regla de arriba que limpia los bordes usa
	   "tr.cart_item td" con el atajo "padding: 0", y sin el tipo acá ese atajo
	   le ganaba y el nombre terminaba pisándose con la ×. */
	.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name {
		order: 2; flex: 1; min-width: 0;
		padding-left: 14px; padding-right: 34px;
	}
	.woocommerce-cart table.shop_table_responsive .product-name::before { content: none; }
	.woocommerce-cart table.shop_table_responsive .product-name > a {
		display: block; font-size: .95rem; font-weight: 600; color: var(--rs-ink);
	}
	.woocommerce-cart table.shop_table_responsive .product-name > a:hover { color: var(--rs-orange); }
	/* Atributos bajo el nombre, en dos columnas como en el carrito lateral. */
	.woocommerce-cart table.shop_table_responsive .product-name dl.variation {
		display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
		margin: 6px 0 0; padding: 0; border: none !important;
		font-size: .82rem;
	}
	.woocommerce-cart table.shop_table_responsive .product-name dl.variation::before,
	.woocommerce-cart table.shop_table_responsive .product-name dl.variation::after {
		content: none !important; display: none !important;
	}
	.woocommerce-cart table.shop_table_responsive .product-name dl.variation dt,
	.woocommerce-cart table.shop_table_responsive .product-name dl.variation dd {
		margin: 0; padding: 0; float: none; font-weight: 400;
	}
	.woocommerce-cart table.shop_table_responsive .product-name dl.variation dt { color: var(--rs-gray); white-space: nowrap; }
	.woocommerce-cart table.shop_table_responsive .product-name dl.variation dd { text-align: right; color: var(--rs-ink); }
	.woocommerce-cart table.shop_table_responsive .product-name dl.variation dd p { margin: 0; }

	/* Precio, cantidad y subtotal: cada uno a todo el ancho, etiqueta a la
	   izquierda y valor a la derecha. */
	.woocommerce-cart table.shop_table_responsive .product-price,
	.woocommerce-cart table.shop_table_responsive .product-quantity,
	.woocommerce-cart table.shop_table_responsive .product-subtotal {
		flex-basis: 100%; display: flex; align-items: center; justify-content: space-between;
		gap: 12px; margin-top: 12px;
	}
	.woocommerce-cart table.shop_table_responsive .product-price { order: 4; }
	.woocommerce-cart table.shop_table_responsive .product-quantity { order: 5; }
	.woocommerce-cart table.shop_table_responsive .product-quantity .quantity { margin: 0; }
	/* Lleva "td" en el selector a propósito: la regla de arriba que limpia los
	   bordes es "tr.cart_item td" y le ganaría a un selector sin el tipo. */
	.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal {
		order: 6; margin-top: 14px; padding-top: 14px;
		border-top: 1px solid var(--rs-line) !important;
		font-weight: 700;
	}
	.woocommerce-cart table.shop_table_responsive .product-subtotal::before { font-weight: 400; }

	/* La × se ancla a la esquina de la tarjeta. */
	.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove {
		position: absolute; top: 14px; right: 14px; width: auto; order: 0;
	}
	.woocommerce-cart table.shop_table_responsive .product-remove::before { content: none; }
	.woocommerce-cart table.shop_table_responsive .product-remove a.remove {
		width: 24px !important; height: 24px !important;
		line-height: 22px !important; font-size: 19px !important;
	}

	/* La fila de acciones (cupón + actualizar) no es una tarjeta. */
	.woocommerce-cart table.shop_table_responsive tr:not(.cart_item) td { border: none !important; }
}

/* ---------- Cantidad en el carrito ---------- */
/* El estilo de la cantidad solo existía para la ficha del producto: en el
   carrito quedaba el <input> crudo del navegador, de 21px de alto. */
.woocommerce-cart td.product-quantity .quantity { display: inline-flex; }
.woocommerce-cart td.product-quantity input.qty {
	width: 70px; min-height: 44px; padding: 8px 10px;
	border: 1px solid var(--rs-line); border-radius: 999px;
	background: #fff; color: var(--rs-ink);
	font-family: inherit; font-size: .95rem; text-align: center;
	-moz-appearance: textfield;
}
.woocommerce-cart td.product-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart td.product-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce-cart td.product-quantity input.qty:focus {
	outline: none; border-color: var(--rs-orange); box-shadow: 0 0 0 3px rgba(252, 75, 8, .15);
}

/* ---------- Productos agotados en el catálogo ---------- */
.rs-card-media { position: relative; display: block; }
/* La foto apagada dice "esto no se puede comprar" antes de leer nada. */
.rs-card-media--agotado img { filter: grayscale(1); opacity: .55; }

.rs-sinstock {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	/* Píldora centrada y no una banda de lado a lado: la barra completa tapaba
	   media foto y se leía como un error del sitio. */
	display: inline-flex; align-items: center;
	padding: 7px 18px; border-radius: 999px;
	background: #d70015; color: #fff;
	font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	pointer-events: none;
}

/* El botón de un agotado no se esconde: se apaga. Sigue llevando a la ficha,
   donde el cliente puede ver el producto y sus tallas. */
ul.products li.product.rs-producto--agotado a.button,
.rs-grid li.product.rs-producto--agotado a.button {
	background: var(--rs-bg-alt);
	color: var(--rs-gray);
}
ul.products li.product.rs-producto--agotado a.button:hover,
.rs-grid li.product.rs-producto--agotado a.button:hover {
	background: var(--rs-line);
	color: var(--rs-ink-muted);
}

/* ==========================================================================
   Selector de orden del catálogo
   Venía sin estilo, con el desplegable por defecto del navegador. Se le pone
   el mismo tratamiento que al resto de campos del tema: flecha propia, borde
   redondeado y naranjo al enfocar.
   ========================================================================== */
.woocommerce .woocommerce-ordering { margin: 0; }

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	min-height: 44px; padding: 10px 40px 10px 16px;
	font-family: var(--rs-font); font-size: .92rem; font-weight: 500;
	color: var(--rs-ink); background-color: #fff;
	border: 1px solid var(--rs-line); border-radius: 999px;
	cursor: pointer; max-width: 100%;
	transition: border-color .2s, box-shadow .2s;

	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}

.woocommerce .woocommerce-ordering select:hover { border-color: var(--rs-gray); }

.woocommerce .woocommerce-ordering select:focus,
.woocommerce .woocommerce-ordering select:focus-visible {
	outline: none;
	border-color: var(--rs-orange);
	box-shadow: 0 0 0 3px rgba(252, 75, 8, .15);
}

/* El texto "Mostrando 1–12 de N" que va al lado, a juego. */
.woocommerce .woocommerce-result-count {
	margin: 0; font-size: .88rem; color: var(--rs-gray);
}

/* En móvil el desplegable ocupa el ancho completo. */
@media (max-width: 640px) {
	.woocommerce .woocommerce-ordering,
	.woocommerce .woocommerce-ordering select { width: 100%; }
}

/* ---------- Aviso de vencimiento de la membresía en Mi cuenta ---------- */
.rs-dash__vence {
	margin: 10px 0 0; padding: 10px 14px;
	border-radius: var(--rs-radius); border: 1px solid var(--rs-line);
	background: var(--rs-bg-alt); color: var(--rs-ink-muted);
	font-size: .9rem; line-height: 1.5;
}
.rs-dash__vence strong { color: var(--rs-ink); }
.rs-dash__vence.is-pronto {
	background: rgba(252, 75, 8, .07); border-color: rgba(252, 75, 8, .28);
}
.rs-dash__vence.is-vencida {
	background: rgba(214, 54, 56, .07); border-color: rgba(214, 54, 56, .3);
}
.rs-dash__vence.is-vencida strong { color: #b32d2e; }

/* ==========================================================================
   Cabecera en móvil: el logo manda
   El texto "Iniciar sesión / Registrarse" ocupaba 150px de los 390 de un
   teléfono y aplastaba el logo hasta dejarlo en 22px de ancho. En móvil basta
   con el icono de la persona: se entiende igual y el logo recupera su sitio.
   ========================================================================== */
@media (max-width: 720px) {
	.rs-account__texto { display: none; }

	/* Sin el texto, el logo puede ocupar lo que necesita. */
	.rs-header__brand { flex: 1 1 auto; min-width: 0; }
	.rs-header__brand .custom-logo-link { display: block; max-width: 190px; }
	.rs-header__brand .custom-logo {
		max-height: 44px; width: auto; height: auto; max-width: 100%;
	}

	/* Los iconos, con sitio para el dedo y sin apretarse entre ellos. */
	.rs-account, .rs-cart, .rs-buscar-toggle { flex: 0 0 auto; padding: 6px; }
}

@media (max-width: 400px) {
	.rs-header__brand .custom-logo-link { max-width: 150px; }
	.rs-header__brand .custom-logo { max-height: 38px; }
}

/* ==========================================================================
   Botón de añadir al carrito cuando todavía no se puede comprar
   WooCommerce no le pone el atributo "disabled" mientras falta elegir una
   variación: solo le añade las clases. Por eso la regla de :disabled no lo
   alcanzaba y quedaba con el color por defecto de WooCommerce. Gris deja
   claro que aún no está disponible.
   ========================================================================== */
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled {
	background: var(--rs-line);
	color: var(--rs-gray);
	opacity: 1;
	cursor: not-allowed;
	box-shadow: none;
}

/* Que al pasar el cursor tampoco parezca que se puede pulsar. */
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button.wc-variation-selection-needed:hover,
.woocommerce button.button.disabled:hover,
.woocommerce a.button.disabled:hover {
	background: var(--rs-line);
	color: var(--rs-gray);
	transform: none;
}

/* ---------- Cupones y tarjetas en el pago ---------- */
/* Entre el resumen del pedido y los medios de pago (inc/giftcards-checkout.php).
   La tarjeta permite usar todo el saldo o solo una parte. */
.rs-saldos { margin-top: 22px; transition: opacity .2s; }
.rs-saldos:empty { display: none; }
.rs-saldos.is-cargando { opacity: .55; pointer-events: none; }
.woocommerce-checkout .rs-saldos__titulo { font-size: 1rem; margin: 0 0 12px; }
.rs-saldos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.rs-saldo {
	background: #fff; border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius); padding: 14px 16px;
	display: grid; gap: 10px;
}
.rs-saldo--tarjeta.is-aplicado { border-color: var(--rs-orange); background: rgba(252, 75, 8, .04); }

.rs-saldo__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.rs-saldo__nombre { font-size: .88rem; font-weight: 600; color: var(--rs-ink); }
.rs-saldo__nombre code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .76rem; letter-spacing: .04em; white-space: nowrap;
	background: var(--rs-bg-alt); border-radius: 999px; padding: 2px 9px; margin-left: 4px;
}
.rs-saldo__valor { font-size: .84rem; color: var(--rs-gray); }
.rs-saldo__valor strong { color: var(--rs-ink); font-weight: 700; }

.rs-saldo__modos { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-saldo__modo {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	font-size: .84rem; color: var(--rs-ink-muted);
	border: 1px solid var(--rs-line); border-radius: 999px; padding: 7px 14px;
	transition: border-color .15s, color .15s, background .15s;
}
.rs-saldo__modo input { accent-color: var(--rs-orange); margin: 0; }
.rs-saldo__modo:has(input:checked) { border-color: var(--rs-orange); color: var(--rs-ink); background: rgba(252, 75, 8, .06); }

.rs-saldo__parte { display: grid; gap: 6px; }
.rs-saldo__parte[hidden] { display: none; }
.rs-saldo__parte label { font-size: .8rem; color: var(--rs-gray); }
.rs-saldo__campo {
	display: flex; align-items: center; gap: 6px; max-width: 220px;
	border: 1px solid var(--rs-line); border-radius: var(--rs-radius); padding: 0 12px;
	background: #fff;
}
.rs-saldo__campo:focus-within { border-color: var(--rs-orange); }
.rs-saldo__campo span { color: var(--rs-gray); font-weight: 600; }
.woocommerce-checkout .rs-saldo__campo input {
	border: 0 !important; box-shadow: none !important; background: transparent;
	height: 42px; padding: 0; width: 100%; font-size: 1rem; font-weight: 600; color: var(--rs-ink);
	outline: none;
}

.rs-saldo__resto { margin: 0; font-size: .8rem; color: var(--rs-gray); }
.rs-saldo__resto strong { color: var(--rs-ink); }

.rs-saldo__pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rs-saldo__usar {
	background: var(--rs-black); color: #fff; border: 0; cursor: pointer;
	border-radius: 999px; padding: 9px 18px; font: 600 .82rem/1 var(--rs-font);
	transition: background .15s;
}
.rs-saldo__usar:hover { background: var(--rs-orange); }
.rs-saldo__quitar {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: 500 .8rem var(--rs-font); color: var(--rs-gray); text-decoration: underline;
}
.rs-saldo__quitar:hover { color: var(--rs-ink); }
.rs-saldo__error { margin: 0; font-size: .8rem; color: #b3261e; }
.rs-saldo__error[hidden] { display: none; }

/* ---------- Comprobante de transferencia (inc/comprobantes.php) ---------- */
.rs-comprobante {
	background: var(--rs-bg-alt); border-radius: var(--rs-radius-lg);
	padding: 24px 26px; margin: 0 0 34px; max-width: 900px;
	scroll-margin-top: 110px; /* que el header fijo no tape el título al volver con #comprobante */
}
.rs-comprobante h2 { font-size: 1.15rem; margin: 0 0 8px; }
.rs-comprobante--datos p { margin: 0; line-height: 1.9; }
.rs-comprobante__ayuda { margin: 0 0 16px; color: var(--rs-ink-muted); font-size: .92rem; }
.rs-comprobante__aviso { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--rs-radius); font-size: .9rem; font-weight: 500; }
.rs-comprobante__aviso--ok { background: rgba(26,155,86,.1); color: #15794a; }
.rs-comprobante__aviso--error { background: rgba(179,38,30,.08); color: #b3261e; }
.rs-comprobante__lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.rs-comprobante__lista li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius); padding: 10px 14px;
	font-size: .9rem;
}
.rs-comprobante__lista a, .rs-comprobante__lista span { font-weight: 600; color: var(--rs-ink); word-break: break-all; }
.rs-comprobante__lista small { color: var(--rs-gray); }
.rs-comprobante__form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rs-comprobante__campo { flex: 1 1 300px; margin: 0; }
.rs-comprobante__campo input[type="file"] {
	width: 100%; font: 400 .88rem var(--rs-font); color: var(--rs-ink-muted);
	background: #fff; border: 1px dashed #c9c9ce; border-radius: var(--rs-radius); padding: 10px 12px;
	cursor: pointer;
}
.rs-comprobante__campo input[type="file"]::file-selector-button {
	font: 600 .82rem var(--rs-font); color: var(--rs-ink);
	background: var(--rs-bg-alt); border: 1px solid var(--rs-line); border-radius: 999px;
	padding: 7px 14px; margin-right: 12px; cursor: pointer;
}
.rs-comprobante__form .button { flex: none; }
.rs-comprobante__formatos { flex-basis: 100%; color: var(--rs-gray); font-size: .8rem; }

/* ---------- Popup de promoción (inc/promo-popup.php) ---------- */
html.rs-promo-abierto { overflow: hidden; }
.rs-promo {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.rs-promo[hidden] { display: none; }
.rs-promo__fondo {
	position: absolute; inset: 0; background: rgba(10, 8, 7, .62);
	opacity: 0; transition: opacity .25s ease;
}
.rs-promo__caja {
	position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow: auto;
	display: grid; background: var(--rs-black); color: #fff;
	border-radius: 22px; outline: none;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	opacity: 0; transform: translateY(14px) scale(.97);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.rs-promo--con-imagen .rs-promo__caja { max-width: 780px; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
.rs-promo.is-visible .rs-promo__fondo { opacity: 1; }
.rs-promo.is-visible .rs-promo__caja { opacity: 1; transform: none; }

.rs-promo__imagen { position: relative; min-height: 100%; background: #2a2522; }
.rs-promo__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.rs-promo__cuerpo {
	padding: 38px 34px 32px;
	/* Brillo naranja de fondo: el acento de la promo sin llenar todo de color. */
	background: radial-gradient(120% 70% at 100% 0%, rgba(252, 75, 8, .32), transparent 60%);
}
.rs-promo__destacado {
	margin: 0 0 6px; font-size: clamp(2.8rem, 8vw, 4.2rem); line-height: .95;
	font-weight: 800; letter-spacing: -.03em; color: var(--rs-orange);
}
.rs-promo__titulo { margin: 0 0 12px; font-size: 1.6rem; line-height: 1.15; color: #fff; }
.rs-promo__texto { margin: 0 0 22px; color: rgba(255, 255, 255, .72); font-size: .98rem; line-height: 1.55; }

.rs-promo__reloj { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 22px; }
.rs-promo__reloj span {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px; padding: 10px 4px; font-size: .72rem; color: rgba(255, 255, 255, .6);
}
.rs-promo__reloj b { font-size: 1.5rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }

.rs-promo__codigo { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 22px; font-size: .88rem; color: rgba(255, 255, 255, .7); }
.rs-promo__copiar {
	display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
	background: transparent; color: #fff;
	border: 1.5px dashed rgba(252, 75, 8, .8); border-radius: 12px; padding: 9px 14px;
	font: inherit; transition: background .15s, border-color .15s;
}
.rs-promo__copiar:hover { background: rgba(252, 75, 8, .12); }
.rs-promo__copiar code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; font-weight: 700; letter-spacing: .08em; background: none; padding: 0; color: #fff; }
.rs-promo__copiar em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--rs-orange); }
.rs-promo__copiar.is-copiado { border-style: solid; border-color: #1a9b56; }
.rs-promo__copiar.is-copiado em { color: #4fd18b; }

.rs-promo__boton.button { width: 100%; text-align: center; padding: 15px 24px; background: var(--rs-orange); color: #fff; }
.rs-promo__boton.button:hover { background: #fff; color: var(--rs-black); }

.rs-promo__cerrar {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 38px; height: 38px; border-radius: 999px; border: 0; cursor: pointer;
	display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .45);
	transition: background .15s;
}
.rs-promo__cerrar:hover { background: rgba(255, 255, 255, .18); }

/* En el teléfono sube desde abajo, como una hoja. */
@media (max-width: 640px) {
	.rs-promo { align-items: flex-end; padding: 0; }
	.rs-promo__caja, .rs-promo--con-imagen .rs-promo__caja {
		max-width: none; grid-template-columns: 1fr; border-radius: 22px 22px 0 0;
		max-height: 92vh; transform: translateY(40px);
	}
	.rs-promo__imagen { min-height: 0; height: 170px; }
	.rs-promo__cuerpo { padding: 30px 22px calc(24px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.rs-promo__caja, .rs-promo__fondo { transition: none; }
}