/* Royal Chic - Child Theme v1.0 */

/**
 * royal-chic.css — Estilos globales del child theme
 * Royal Chic Lingerie
 *
 * Cargado en TODAS las páginas vía inc/enqueue.php
 * Solo va aquí lo verdaderamente global.
 *
 * Índice:
 * 1. Variables CSS (design tokens)
 * 2. Reset mínimo
 * 3. Tipografía base
 * 4. Utilidades globales
 * 5. Scrollbar personalizado
 * 6. Focus visible (accesibilidad)
 */

/* ════════════════════════════════════════
   1. VARIABLES CSS — Design tokens
   Usadas en home.css, product-card.css, etc.
════════════════════════════════════════ */
:root {
	/* BACKGROUND */
	--rc-bg-danger: #fee2e2;

	/* TEXTOS */

	--rc-text-danger: #9e1600;


	/* Colores base */
	--rc-cream: #f1efe7;
	--rc-cream-dk: #e8e4d9;
	--rc-cream-border: #ddd8cc;
	--rc-ink: #1c1a17;
	--rc-ink2: #2c2a25;
	--rc-ink3: #111008;
	--rc-muted: #8a8070;
	--rc-white: #fff;
	/* Colores de marca */
	--rc-gold: #b8965a;
	--rc-gold-lt: #d4af7a;
	--rc-gold-dim: rgba(184, 150, 90, 0.12);
	--rc-whatsapp: #4a7c59;

	/* Tipografías */
	--rc-font-serif: "Playfair Display", serif;
	--rc-font-sans: "Inter", sans-serif;

	/* Transiciones */
	--rc-transition: 0.25s ease;

	/* Espaciados base */
	--rc-section-pad-desktop: 72px 60px;
	--rc-section-pad-tablet: 56px 28px;
	--rc-section-pad-mobile: 48px 20px;

	/* Tamaños de fuente — se sobreescriben en móvil (≤480px) */
	--rc-fs-reading: 14px;   /* texto de lectura / párrafo */
	--rc-fs-tag: 9px;        /* etiquetas tiny uppercase */
	--rc-fs-btn: 11px;       /* texto de botones pequeños */
}

/* ======================
   BASE
====================== */
/* ════════════════════════════════════════
   2. RESET MÍNIMO
   Blocksy ya incluye un reset completo.
   Solo ajustamos lo que el child theme necesita.
════════════════════════════════════════ */

/* Box sizing global — por si Blocksy no lo aplica en algún contexto */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Imágenes responsive por defecto */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Quitar margin por defecto de elementos de bloque */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
	margin: 0;
	padding: 0;
}

/* ════════════════════════════════════════
   3. TIPOGRAFÍA BASE
════════════════════════════════════════ */

/* El body usa la tipografía de Blocksy (configurada en el Personalizador).
   Solo sobreescribimos clases específicas del child theme. */

.rc-serif {
	font-family: var(--rc-font-serif);
}

.rc-sans {
	font-family: var(--rc-font-sans);
}

/* ════════════════════════════════════════
   4. UTILIDADES GLOBALES
   Clases usadas en múltiples páginas/secciones
════════════════════════════════════════ */

/* Oculto visualmente pero accesible para lectores de pantalla */
.rc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Eyebrow — texto pequeño dorado sobre títulos de sección */
.rc-eyebrow {
	font-family: var(--rc-font-sans);
	font-size: var(--rc-fs-btn);
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--rc-gold);
	margin: 0;
}

/* Cabecera de sección — eyebrow + H2 + línea dorada */
.rc-sec-header {
	margin-bottom: 40px;
}

.rc-sec-header--center {
	text-align: center;
}

.rc-sec-title {
	font-family: var(--rc-font-serif);
	font-size: 34px;
	font-weight: 400;
	color: var(--rc-ink);
	line-height: 1.2;
	margin-top: 10px;
}

.rc-sec-line {
	width: 40px;
	height: 1px;
	background: var(--rc-gold);
	margin: 14px auto 0;
}

.rc-sec-header--center .rc-sec-line {
	margin: 14px auto 0;
}

/* Botones globales — usados en home y otras páginas */
.rc-btn-dark {
	display: inline-block;
	background: var(--rc-ink);
	color: var(--rc-gold-lt);
	padding: 14px 32px;
	font-family: var(--rc-font-sans);
	font-size: var(--rc-fs-btn);
	letter-spacing: 3px;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition: background var(--rc-transition);
	text-decoration: none;
}

.rc-btn-dark:hover {
	background: var(--rc-gold);
	color: #fff;
}

.rc-btn-outline-gold {
	display: inline-block;
	border: 1px solid var(--rc-gold);
	color: var(--rc-gold-lt);
	padding: 13px 30px;
	font-family: var(--rc-font-sans);
	font-size: var(--rc-fs-btn);
	letter-spacing: 3px;
	text-transform: uppercase;
	background: none;
	cursor: pointer;
	transition: all var(--rc-transition);
	text-decoration: none;
}

.rc-btn-outline-gold:hover {
	background: var(--rc-gold);
	color: #fff;
}

/* Icono SVG — base global para rc_icon() */
.rc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	fill: currentColor;
	transition: fill var(--rc-transition);
}

/* Estrellas de rating — usadas en cards y testimonios */
.rc-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.rc-star--full,
.rc-star--half {
	fill: var(--rc-gold);
	color: var(--rc-gold);
}

.rc-star--empty {
	fill: var(--rc-cream-border);
	color: var(--rc-cream-border);
}

/* ════════════════════════════════════════
   5. SCROLLBAR PERSONALIZADO
   Solo en Chrome/Edge — Firefox usa CSS estándar
════════════════════════════════════════ */
::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: var(--rc-cream);
}

::-webkit-scrollbar-thumb {
	background: var(--rc-cream-border);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--rc-gold);
}

/* ════════════════════════════════════════
   6. FOCUS VISIBLE — Accesibilidad
   Reemplaza el outline por defecto del navegador
   con algo más estético pero igualmente visible
════════════════════════════════════════ */
:focus-visible {
	outline: 2px solid var(--rc-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Quitar outline en clics con ratón (mantenerlo solo en teclado) */
:focus:not(:focus-visible) {
	outline: none;
}

/* reCAPTCHA v3 badge size tweak */
.grecaptcha-badge {
	transform: scale(0.55);
	transform-origin: 100% 100%;
}

/* ════════════════════════════════════════
   HEADER SUBMENU (Blocksy)
   Linea vertical + hover dorado
════════════════════════════════════════ */
.sub-menu {
	border: 1px solid var(--rc-cream-border);
}


.site-header .sub-menu a,
.site-header .sub-menu .ct-menu-link,
#site-header .sub-menu a,
#site-header .sub-menu .ct-menu-link,
header[role="banner"] .sub-menu a,
header[role="banner"] .sub-menu .ct-menu-link,
.sub-menu > li > a,
.sub-menu > li > .ct-menu-link {
	position: relative;
	display: block;
	padding: 9px 22px !important;
	color: var(--rc-ink) !important;
	transition: color var(--rc-transition);
	border-left: 2px solid transparent;
    transition: all .2s;
}

/* .site-header .sub-menu a::before,
.site-header .sub-menu .ct-menu-link::before,
#site-header .sub-menu a::before,
#site-header .sub-menu .ct-menu-link::before,
header[role="banner"] .sub-menu a::before,
header[role="banner"] .sub-menu .ct-menu-link::before,
.sub-menu > li > a::before,
.sub-menu > li > .ct-menu-link::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%) scaleY(0);
	transform-origin: center;
	width: 2px;
	height: 16px;
	background: var(--rc-gold) !important;
	opacity: 0;
	transition: opacity var(--rc-transition), transform var(--rc-transition);
} */

.site-header .sub-menu a:hover,
.site-header .sub-menu a:focus,
.site-header .sub-menu .ct-menu-link:hover,
.site-header .sub-menu .ct-menu-link:focus,
#site-header .sub-menu a:hover,
#site-header .sub-menu a:focus,
#site-header .sub-menu .ct-menu-link:hover,
#site-header .sub-menu .ct-menu-link:focus,
header[role="banner"] .sub-menu a:hover,
header[role="banner"] .sub-menu a:focus,
header[role="banner"] .sub-menu .ct-menu-link:hover,
header[role="banner"] .sub-menu .ct-menu-link:focus,
.sub-menu > li > a:hover,
.sub-menu > li > a:focus,
.sub-menu > li > .ct-menu-link:hover,
.sub-menu > li > .ct-menu-link:focus {
	color: var(--rc-gold) !important;
    border-left-color: var(--rc-gold);
    background: rgba(184, 150, 90, .05);
}

.site-header .sub-menu a:hover::before,
.site-header .sub-menu a:focus::before,
.site-header .sub-menu .ct-menu-link:hover::before,
.site-header .sub-menu .ct-menu-link:focus::before,
#site-header .sub-menu a:hover::before,
#site-header .sub-menu a:focus::before,
#site-header .sub-menu .ct-menu-link:hover::before,
#site-header .sub-menu .ct-menu-link:focus::before,
header[role="banner"] .sub-menu a:hover::before,
header[role="banner"] .sub-menu a:focus::before,
header[role="banner"] .sub-menu .ct-menu-link:hover::before,
header[role="banner"] .sub-menu .ct-menu-link:focus::before,
.sub-menu > li > a:hover::before,
.sub-menu > li > a:focus::before,
.sub-menu > li > .ct-menu-link:hover::before,
.sub-menu > li > .ct-menu-link:focus::before {
	opacity: 1 !important;
	transform: translateY(-50%) scaleY(1) !important;
}

.site-header .sub-menu .current-menu-item > a,
.site-header .sub-menu .current-menu-ancestor > a,
.site-header .sub-menu .current-menu-item > .ct-menu-link,
.site-header .sub-menu .current-menu-ancestor > .ct-menu-link,
#site-header .sub-menu .current-menu-item > a,
#site-header .sub-menu .current-menu-ancestor > a,
#site-header .sub-menu .current-menu-item > .ct-menu-link,
#site-header .sub-menu .current-menu-ancestor > .ct-menu-link,
header[role="banner"] .sub-menu .current-menu-item > a,
header[role="banner"] .sub-menu .current-menu-ancestor > a,
header[role="banner"] .sub-menu .current-menu-item > .ct-menu-link,
header[role="banner"] .sub-menu .current-menu-ancestor > .ct-menu-link,
.sub-menu > li.current-menu-item > a,
.sub-menu > li.current-menu-ancestor > a,
.sub-menu > li.current-menu-item > .ct-menu-link,
.sub-menu > li.current-menu-ancestor > .ct-menu-link {
	color: var(--rc-gold) !important;
}

.site-header .sub-menu .current-menu-item > a::before,
.site-header .sub-menu .current-menu-ancestor > a::before,
.site-header .sub-menu .current-menu-item > .ct-menu-link::before,
.site-header .sub-menu .current-menu-ancestor > .ct-menu-link::before,
#site-header .sub-menu .current-menu-item > a::before,
#site-header .sub-menu .current-menu-ancestor > a::before,
#site-header .sub-menu .current-menu-item > .ct-menu-link::before,
#site-header .sub-menu .current-menu-ancestor > .ct-menu-link::before,
header[role="banner"] .sub-menu .current-menu-item > a::before,
header[role="banner"] .sub-menu .current-menu-ancestor > a::before,
header[role="banner"] .sub-menu .current-menu-item > .ct-menu-link::before,
header[role="banner"] .sub-menu .current-menu-ancestor > .ct-menu-link::before,
.sub-menu > li.current-menu-item > a::before,
.sub-menu > li.current-menu-ancestor > a::before,
.sub-menu > li.current-menu-item > .ct-menu-link::before,
.sub-menu > li.current-menu-ancestor > .ct-menu-link::before {
	opacity: 1 !important;
	transform: translateY(-50%) scaleY(1) !important;
}

/* ════════════════════════════════════════
   RESPONSIVE — Ajustes globales móvil
════════════════════════════════════════ */
@media (max-width: 480px) {
	.rc-sec-title {
		font-size: 26px;
	}

	.rc-btn-dark,
	.rc-btn-outline-gold {
		width: 100%;
		text-align: center;
		display: block;
	}
}

/* ======================
   COMPONENTES
====================== */
.rc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: #1c1a17;
	color: #d4af7a;
	border: none;
	/* padding: 16px; */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	font-family: "Segoe UI", sans-serif;
	transition:
		background 0.25s,
		color 0.25s;
	border-radius: 2px;
	margin-bottom: 10px;
	height: 40px;
}
.rc-btn:hover {
	background: #b8965a;
	color: #fff;
}
.rc-btn.rc-btn-primary {
	background: #1c1a17;
	color: #d4af7a;
}

.rc-btn.rc-btn-transparent {
	background: transparent;
	color: #1c1a17;
}



/* ════════════════════════════════════════
   ANNOUNCEMENT BAR — global (home + product)
════════════════════════════════════════ */
.rc-ann {
    background: var(--rc-ink);
    padding: 9px 20px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rc-gold-lt);
}
.rc-ann__slider {
    display: grid;
    align-items: center;
}
.rc-ann__slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}
.rc-ann__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 480px) {
    :root {
        --rc-fs-reading: 14px;
        --rc-fs-tag: 10px;
        --rc-fs-btn: 11px;
    }
    .rc-ann {
        font-size: var(--rc-fs-tag);
        letter-spacing: 1px;
        padding: 8px 12px;
    }
}

/* ════════════════════════════════════════
   MODAL QUICK VIEW — Royal Chic Lingerie
   Diseño: imagen izquierda + info derecha
   Mobile: bottom sheet
════════════════════════════════════════ */

/* ── Overlay ── */
.rc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: rc-overlay-in .2s ease;
}
@keyframes rc-overlay-in { from{opacity:0} to{opacity:1} }

/* ── Modal: imagen izquierda, info derecha ── */
.rc-modal {
    background: #fff;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    max-height: 90svh;
    display: grid;
    grid-template-columns: 44% 56%;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    animation: rc-modal-in .28s cubic-bezier(.34,1.1,.64,1);
    position: relative;
	border-radius: 6px;
}

/* .rc-modal__top es transparente en desktop (display:contents) para que
   sus hijos participen directamente en el grid del modal */
.rc-modal__top {
    display: contents;
}
@keyframes rc-modal-in {
    from { opacity:0; transform:scale(.96) translateY(12px); }
    to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* ── Imagen — ocupa columna 1, filas 1 y 2 ── */
.rc-modal__media {
    background: #F1EFE7;
    overflow: hidden;
    min-height: 480px;
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
}
.rc-modal__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    will-change: transform, opacity;
}

.rc-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(28, 26, 23, 0.55);
    color: var(--rc-gold-lt, #D4AF7A);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
    z-index: 2;
    backdrop-filter: blur(2px);
}

.rc-modal__nav svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.rc-modal__nav:hover:not(:disabled) {
    background: var(--rc-gold, #B8965A);
    border-color: var(--rc-gold, #B8965A);
    color: #fff;
}

.rc-modal__nav:disabled {
    opacity: .45;
    cursor: default;
}

.rc-modal__nav--prev {
    left: 12px;
}

.rc-modal__nav--next {
    right: 12px;
}

/* ── Info: columna 2, fila 1 (nombre, precio, desc, stock) ── */
.rc-modal__info {
    grid-column: 2;
    grid-row: 1;
    padding: 36px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

/* ── Controles: columna 2, fila 2 (colores, tallas, qty, botones) ── */
.rc-modal__body {
    grid-column: 2;
    grid-row: 2;
    padding: 0 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    min-height: 0;
    position: relative;
}

/* ── Cerrar — esquina superior derecha del body ── */
.rc-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: color .2s;
    padding: 0;
}
.rc-modal__close:hover { color: #1C1A17; }
.rc-modal__close svg { width: 16px; height: 16px; }

/* ── Nombre — mayúsculas, serif, grande ── */
.rc-modal__name {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1C1A17;
    line-height: 1.25;
    margin: 0;
    padding-right: 32px;
}

/* ── Precio — dorado/gold destacado ── */
.rc-modal__price {
    font-size: 20px;
    font-weight: 500;
    color: var(--rc-gold, #B8965A);
    line-height: 1;
}
.rc-modal__price .woocommerce-Price-amount { color: inherit; font: inherit; }
.rc-modal__price del,
.rc-modal__price .rc-modal__price-old {
    font-size: 14px;
    font-weight: 400;
    color: #aaa;
    text-decoration: line-through;
    margin-right: 6px;
}

/* ── Descripción corta ── */
.rc-modal__desc {
    font-size: var(--rc-fs-reading);
    line-height: 1.65;
    color: #555;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
    line-clamp: 3;
}
.rc-modal__desc a {
    color: #1C1A17;
    font-size: var(--rc-fs-reading);
    text-underline-offset: 2px;
}

/* ── Stock bajo ── */
.rc-modal__stock {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--rc-fs-reading);
    color: #C88030;
}
.rc-modal__stock-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #C88030;
    flex-shrink: 0;
}

/* ── Grupos ── */
.rc-modal__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Label estilo "Color: Negro" / "Talla: S" ── */
.rc-modal__group-label {
    font-size: var(--rc-fs-reading);
    font-weight: 500;
    color: #1C1A17;
    margin: 0;
}
.rc-modal__sel-val {
    font-weight: 400;
    color: #555;
}

/* ── Swatches de color (círculos) ── */
.rc-modal__swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.rc-modal__swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    outline: 2px solid transparent;
    cursor: pointer;
    transition: outline .15s, outline-offset .15s;
    position: relative;
    flex-shrink: 0;
}
.rc-modal__swatch:hover { outline-color: #ccc; outline-offset: 2px; }
.rc-modal__swatch.selected {
    outline-color: #1C1A17;
    outline-offset: 2px;
}
.rc-modal__swatch.oos { opacity: .3; cursor: not-allowed; }
.rc-modal__swatch.oos::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-linear-gradient(
        45deg, transparent, transparent 3px,
        rgba(255,255,255,.6) 3px, rgba(255,255,255,.6) 4px
    );
}

/* ── Botones de talla ── */
.rc-modal__sizes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.rc-modal__size-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #DDD8CC;
    background: #fff;
    color: #1C1A17;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rc-modal__size-btn:hover:not(:disabled) { border-color: #1C1A17; }
.rc-modal__size-btn.selected {
    background: #1C1A17;
    border-color: #1C1A17;
    color: #fff;
}
.rc-modal__size-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ── Cantidad — estilo minimalista con borde ── */
.rc-modal__qty-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.rc-modal__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #DDD8CC;
    width: fit-content;
    flex-shrink: 0;
}
.rc-modal__qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #fff;
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
    color: #1C1A17;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    line-height: 1;
    flex-shrink: 0;
}
.rc-modal__qty-btn:hover { background: #F1EFE7; }
.rc-modal__qty-num {
    min-width: 48px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #1C1A17;
    border-left: 1px solid #DDD8CC;
    border-right: 1px solid #DDD8CC;
    line-height: 40px;
    padding: 0 4px;
}

.rc-modal__qty-row .rc-modal__btn--add {
    flex: 1 1 auto;
    width: auto;
    min-height: 40px;
    padding: 10px 14px;
}

/* ── Error ── */
.rc-modal__error {
    font-size: 12px;
    color: #c85858;
    background: rgba(200,88,88,.06);
    border: 1px solid rgba(200,88,88,.2);
    padding: 8px 12px;
}

/* ── Acciones ── */
.rc-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.rc-modal__btn {
    width: 100%;
    padding: 15px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all .2s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.rc-modal__btn:disabled { opacity: .5; cursor: not-allowed; }

/* Añadir a la cesta — fondo oscuro con borde */
.rc-modal__btn--add {
    background: var(--rc-ink, #1C1A17);
    color: var(--rc-gold-lt, #D4AF7A);
    border: 1.5px solid var(--rc-ink, #1C1A17);
}
.rc-modal__btn--add:hover:not(:disabled) {
    background: var(--rc-gold, #B8965A);
    border-color: var(--rc-gold, #B8965A);
    color: #fff;
}

/* Comprar ahora — fondo dorado */
.rc-modal__btn--buy {
    background: var(--rc-gold, #B8965A);
    color: #fff;
    border: 1.5px solid var(--rc-gold, #B8965A);
}
.rc-modal__btn--buy:hover:not(:disabled) {
    background: var(--rc-gold-lt, #D4AF7A);
    border-color: var(--rc-gold-lt, #D4AF7A);
}

/* ── Ver detalles ── */
.rc-modal__ver-detalles {
    font-size: 12px;
    color: #888;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-align: center;
    display: block;
    transition: color .2s;
}
.rc-modal__ver-detalles:hover { color: #1C1A17; }

/* ── MOBILE: bottom sheet ── */
@media (max-width: 640px) {
    .rc-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    /* El modal pasa a flex columna: [__top] encima, [__body] abajo */
    .rc-modal {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        max-height: 88svh;
        overflow: hidden;
        border-radius: 0;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        animation: rc-modal-up .3s cubic-bezier(.34,1.1,.64,1);
        grid-template-columns: unset;
        grid-template-rows: unset;
    }
    @keyframes rc-modal-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* __top: fila con imagen izquierda + info derecha */
    .rc-modal__top {
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        border-bottom: 1px solid #F1EFE7;
        padding: 1rem;
        margin-top: 19px;
        position: relative; /* ancla el botón cerrar a esta fila */
    }

    /* Imagen: cuadrito fijo a la izquierda */
    .rc-modal__media {
        width: 110px;
        height: 145px;
        min-height: unset;
        flex-shrink: 0;
        grid-column: unset;
        grid-row: unset;
    }

    /* Info básica: nombre, precio, desc — ocupa el resto del ancho */
    .rc-modal__info {
        flex: 1;
        min-width: 0;
        padding: 16px 16px 16px 14px;
        gap: 10px;
        grid-column: unset;
        grid-row: unset;
        overflow: hidden;
        position: static; /* el close button se ancla a __top, no aquí */
    }

    .rc-modal__name {
        font-size: 13px;
        padding-right: 32px;
        line-height: 1.4;
    }

    .rc-modal__price {
        font-size: 15px;
    }

    .rc-modal__desc {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 11px;
        line-height: 1.5;
    }

    /* __body: controles a ancho completo, scrollable */
    .rc-modal__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px 36px;
        gap: 14px;
        grid-column: unset;
        grid-row: unset;
    }

    /* Cantidad y "añadir al carrito" se apilan verticalmente */
    .rc-modal__qty-row {
        flex-direction: column;
    }

    .rc-modal__qty-row .rc-modal__btn--add {
        width: 100%;
        flex: none;
    }

    .rc-modal__size-btn {
        min-width: 34px;
        height: 34px;
        font-size: 11px;
    }

    .rc-modal__swatch {
        width: 26px;
        height: 26px;
    }

    .rc-modal__btn {
        padding: 13px 14px;
        font-size: 11px;
    }

    /* Ocultar botones prev/next en móvil */
    .rc-modal__nav {
        display: none;
    }

    /* Botón cerrar: más grande y pegado a la esquina superior derecha */
    .rc-modal__close {
        top: 1px;
        right: 10px;
        width: 34px;
        height: 34px;
        background: rgba(241, 239, 231, 0.9);
        border-radius: 50%;
    }
    .rc-modal__close svg {
        width: 18px;
        height: 18px;
    }
}


/* ═══════════════════ 13. FOOTER ═══════════════════ */
.rc-footer {
	background: var(--rc-ink);
	padding: 64px 60px 32px;
	border-top: 1px solid #1e1c18;
}
.rc-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 48px;
}
.rc-footer__brand-name {
	font-family: "Playfair Display", serif;
	font-size: 20px;
	letter-spacing: 4px;
	color: var(--rc-cream);
	margin-bottom: 4px;
}
.rc-footer__brand-sub {
	font-size: 8px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--rc-gold);
	margin-bottom: 14px;
}
.rc-footer__brand-desc {
	font-size: var(--rc-fs-reading);
	line-height: 1.85;
	color: #555;

}
.rc-footer__social {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}
.rc-footer__social-icon {
	width: 32px;
	height: 32px;
	border: 1px solid #2a2720;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.2s;
	color: #666;
}
.rc-footer__social-icon:hover {
	border-color: var(--rc-gold);
	color: var(--rc-gold);
}
.rc-footer__social-icon svg {
	width: 13px;
	height: 13px;
}
.rc-footer__col-title {
	font-size: var(--rc-fs-btn);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--rc-gold);
	margin-bottom: 20px;
}
.rc-footer__links {
	list-style: none;
    padding: 0px;
}
.rc-footer__links li {
	margin-bottom: 8px;
}
.rc-footer__links a {
	font-size: var(--rc-fs-reading);
	color: #666;
	text-decoration: none;
	transition: color 0.2s;
}
.rc-footer__links a:hover {
	color: var(--rc-gold-lt);
}
.rc-footer__contact {
	font-style: normal;
}
.rc-footer__contact-line {
	font-size: var(--rc-fs-reading);
	color: #666;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: color 0.2s;
}
.rc-footer__contact-line:hover {
	color: var(--rc-gold-lt);
}
.rc-footer__contact-line svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}
.rc-footer__bottom {
	border-top: 1px solid #1e1c18;
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.rc-footer__copy {
	font-size: 13px;
	color: #444;
}
.rc-footer__legal {
	display: flex;
	gap: 20px;
}
.rc-footer__legal a {
	font-size: 14px;
	color: #444;
	text-decoration: none;
	transition: color 0.2s;
}
.rc-footer__legal a:hover {
	color: var(--rc-gold);
}

@media (max-width: 900px) {
	.rc-footer {
		padding: 48px 28px 28px;
	}
	.rc-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.rc-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.rc-footer {
		padding: 40px 20px 24px;
	}
	.rc-footer__top {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.rc-footer__brand-name {
		font-size: 18px;
	}
	.rc-footer__legal {
		flex-direction: column;
		gap: 8px;
	}
}

/* ════════════════════════════════════════
   TI WISHLIST — Modal de favoritos
   Estilo integrado con el tema Royal Chic
════════════════════════════════════════ */

/* Overlay — dentro del contexto del modal (absolute, no fixed) */
.tinv-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	z-index: 0;
}

/* Modal container — fullscreen con flex centrado */
.tinv-wishlist .tinv-modal {
	position: fixed;
	inset: 0;
	width: 0;
	height: 0;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	overflow: hidden;
}
.tinv-wishlist .tinv-modal.tinv-modal-open {
	visibility: visible;
	opacity: 1;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Wrappers de centrado del plugin — sobre el overlay */
.tinv-wishlist .tinv-modal .tinv-table {
	width: 100%;
	max-width: 400px;
	position: relative;
	z-index: 1;
}
.tinv-wishlist .tinv-modal .tinv-cell {
	display: block;
}

/* Tarjeta principal */
.tinv-wishlist .tinv-modal .tinv-modal-inner {
	position: relative;
	background: var(--rc-cream, #f1efe7);
	width: 100%;
	padding: 48px 40px 40px;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	font-family: var(--rc-font-sans, 'Inter', sans-serif);
	color: var(--rc-ink, #1c1a17);
	text-align: center;
	animation: rc-modal-in 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
}

/* Ícono de corazón (fuente del plugin) */
.tinv-wishlist .tinv-modal .tinv-modal-inner > i {
	display: block;
	font-size: 40px;
	line-height: 1;
	color: #e05252;
	margin-bottom: 20px;
}

/* Mensaje de confirmación */
.tinv-wishlist .tinv-modal .tinv-txt {
	font-family: var(--rc-font-serif, 'Playfair Display', serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--rc-ink, #1c1a17);
	line-height: 1.45;
	margin-bottom: 32px;
}

/* Botones */
.tinv-wishlist .tinv-modal .tinvwl-buttons-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tinv-wishlist .tinv-modal .button {
	width: 100%;
	padding: 15px 20px;
	font-family: var(--rc-font-sans, 'Inter', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 0;
	text-decoration: none;
	box-shadow: none !important;
}
.tinv-wishlist .tinv-modal .button i {
	font-size: 14px;
}
/* Ver wishlist — primario oscuro con texto dorado */
.tinv-wishlist .tinv-modal .tinvwl_button_view {
	background: var(--rc-ink, #1c1a17);
	color: var(--rc-gold-lt, #d4af7a);
	border: 1.5px solid var(--rc-ink, #1c1a17);
}
.tinv-wishlist .tinv-modal .tinvwl_button_view:hover {
	background: var(--rc-gold, #b8965a);
	border-color: var(--rc-gold, #b8965a);
	color: #fff;
}
/* Cerrar — outline sobre crema */
.tinv-wishlist .tinv-modal .tinvwl_button_close {
	background: transparent;
	color: var(--rc-muted, #8a8070);
	border: 1.5px solid var(--rc-cream-border, #ddd8cc);
}
.tinv-wishlist .tinv-modal .tinvwl_button_close:hover {
	background: var(--rc-ink, #1c1a17);
	border-color: var(--rc-ink, #1c1a17);
	color: #fff;
}

/* Admin bar */
.admin-bar .tinv-wishlist .tinv-modal { padding-top: 32px; }

/* Mobile */
@media (max-width: 480px) {
	.tinv-wishlist .tinv-modal { padding: 16px; }
	.tinv-wishlist .tinv-modal .tinv-modal-inner { padding: 40px 24px 32px; }
}
@media (max-width: 768px) {
	.admin-bar .tinv-wishlist .tinv-modal { padding-top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .tinv-wishlist .tinv-modal { padding-top: 0; }
}
