/* =============================================================================
   SOVIET BOUTIQUE – WIDGETS PARA ELEMENTOR
   Hoja de estilos premium · v1.0.0
   Paleta: crema / tinta / vino · Tipografías: Playfair Display + Jost
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. VARIABLES Y BASE
--------------------------------------------------------------------------- */
.sbw {
	--sbw-bg: #f4efe8;
	--sbw-surface: #ffffff;
	--sbw-ink: #241d18;
	--sbw-ink-soft: #4a403a;
	--sbw-muted: #8a7d72;
	--sbw-line: #e2d8cc;
	--sbw-accent: #7c2136;
	--sbw-accent-ink: #ffffff;
	--sbw-accent-deep: #57141f;
	--sbw-dark: #3b2a21;
	--sbw-cream: #f4ece2;
	--sbw-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--sbw-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--sbw-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sbw-shadow: 0 24px 60px -24px rgba(36, 20, 14, 0.35);

	font-family: var(--sbw-sans);
	color: var(--sbw-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

.sbw img {
	max-width: 100%;
	display: block;
}

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

.sbw :focus-visible {
	outline: 2px solid var(--sbw-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Sin resaltados azules del navegador/tema: la selección es color tinto */
.sbw,
.sbw a,
.sbw button {
	-webkit-tap-highlight-color: transparent;
}

.sbw ::selection,
.sbw-modal ::selection {
	background: #7c2136;
	color: #ffffff;
}

.sbw .sbw-btn,
.sbw .sbw-btn-cart,
.sbw .sbw-iconbtn,
.sbw .sbw-ptabs__tab,
.sbw .sbw-ptabs__more,
.sbw .sbw-cat__btn,
.sbw .sbw-hero__side {
	-webkit-user-select: none;
	user-select: none;
}

.sbw-notice {
	padding: 22px 26px;
	background: #fdf6ee;
	border: 1px dashed #caa;
	font-size: 14px;
	color: #7a5c5c;
	border-radius: 6px;
}

/* SVG de la colección */
.sbw-svg {
	width: 44px;
	height: 44px;
	display: block;
}

.sbw-ui-svg {
	width: 18px;
	height: 18px;
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   2. BOTONES
--------------------------------------------------------------------------- */
.sbw .sbw-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 42px;
	font-family: var(--sbw-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	overflow: hidden;
	transition: color 0.45s var(--sbw-ease), background-color 0.45s var(--sbw-ease),
		border-color 0.45s var(--sbw-ease), transform 0.35s var(--sbw-ease),
		box-shadow 0.45s var(--sbw-ease);
	will-change: transform;
}

.sbw .sbw-btn--solid {
	background-color: var(--sbw-accent);
	color: var(--sbw-accent-ink);
}

.sbw .sbw-btn--solid:hover,
.sbw .sbw-btn--solid:focus {
	background-color: var(--sbw-accent-deep);
	box-shadow: 0 18px 34px -16px rgba(124, 33, 54, 0.55);
}

.sbw .sbw-btn--ghost {
	border-color: var(--sbw-ink);
	color: var(--sbw-ink);
	background: transparent;
}

.sbw .sbw-btn--ghost:hover,
.sbw .sbw-btn--ghost:focus {
	background: var(--sbw-ink);
	color: #fff;
}

.sbw .sbw-btn--ghost-light {
	border-color: rgba(244, 236, 226, 0.55);
	color: var(--sbw-cream);
	background: transparent;
	padding: 16px 38px;
}

.sbw .sbw-btn--ghost-light:hover,
.sbw .sbw-btn--ghost-light:focus {
	background: var(--sbw-cream);
	color: var(--sbw-dark);
	border-color: var(--sbw-cream);
}

/* Barrido de luz sobre botones sólidos */
.sbw .sbw-btn--solid::after {
	content: '';
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: skewX(-20deg);
	transition: left 0.7s var(--sbw-ease);
	pointer-events: none;
}

.sbw .sbw-btn--solid:hover::after {
	left: 130%;
}

/* ---------------------------------------------------------------------------
   3. ANIMACIONES DE APARICIÓN (activadas por JS con .sbw-js en <html>)
--------------------------------------------------------------------------- */
.sbw-js .sbw-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--sbw-ease), transform 0.9s var(--sbw-ease);
	transition-delay: var(--sbw-d, 0ms);
}

.sbw-js .sbw-reveal.is-inview {
	opacity: 1;
	transform: translateY(0);
}

/* Tras la aparición se elimina el retardo escalonado para que los
   hovers y el tilt 3D respondan de inmediato. */
.sbw-js .sbw-reveal.sbw-done {
	transition-delay: 0ms !important;
}

/* Renglones tipo cortina (títulos hero / CTA) */
.sbw .sbw-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.sbw .sbw-line__in {
	display: block;
}

.sbw-js .sbw-line__in {
	transform: translateY(112%);
	transition: transform 1.05s var(--sbw-ease);
	transition-delay: calc(var(--sbw-i, 0) * 110ms + 80ms);
}

.sbw-js .is-inview .sbw-line__in,
.sbw-js .sbw-hero.is-inview .sbw-line__in,
.sbw-js .sbw-cta.is-inview .sbw-line__in {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sbw-js .sbw-reveal,
	.sbw-js .sbw-line__in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.sbw *,
	.sbw *::before,
	.sbw *::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}
}

/* ---------------------------------------------------------------------------
   4. HERO BOUTIQUE
--------------------------------------------------------------------------- */
.sbw-hero {
	position: relative;
	overflow: hidden;
	background-color: #ede4d8;
}

.sbw-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sbw-hero-img-w, 52%);
	align-items: stretch;
	min-height: 86vh;
	max-width: 1560px;
	margin: 0 auto;
}

.sbw-hero--img-left .sbw-hero__inner {
	grid-template-columns: var(--sbw-hero-img-w, 52%) minmax(0, 1fr);
}

.sbw-hero--img-left .sbw-hero__content {
	order: 2;
}

.sbw-hero--img-left .sbw-hero__media {
	order: 1;
}

.sbw-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 90px 4vw 90px 6vw;
	position: relative;
	z-index: 2;
}

.sbw-hero__title {
	margin: 0 0 34px;
	font-family: var(--sbw-serif);
	font-weight: 500;
	font-size: clamp(46px, 6.4vw, 96px);
	line-height: 1.04;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sbw-ink);
}

.sbw-hero__subtitle {
	margin: 0 0 44px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--sbw-ink-soft);
	display: flex;
	align-items: center;
	gap: 18px;
}

.sbw-hero__subtitle::before {
	content: '';
	display: none;
	width: 46px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.sbw-hero__actions {
	display: flex;
}

.sbw-hero__media {
	position: relative;
	min-height: 420px;
}

.sbw-hero__imgwrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sbw-hero__imgwrap img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: var(--sbw-fit, cover);
	object-position: var(--sbw-pos, top center);
	transform: translate3d(var(--sbw-shift, 0%), var(--sbw-par, 0px), 0) scale(1.08);
	will-change: transform;
}

.sbw-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Diseño: imagen de fondo a lo ancho (completa) */
.sbw-hero--cover .sbw-hero__inner,
.sbw-hero--cover.sbw-hero--img-left .sbw-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
}

.sbw-hero--cover .sbw-hero__media {
	position: absolute;
	inset: 0;
	min-height: 0;
	order: initial;
}

.sbw-hero--cover .sbw-hero__content {
	position: relative;
	z-index: 2;
	order: initial;
	width: 100%;
	max-width: var(--sbw-cmax, 760px);
}

.sbw-hero--cover .sbw-hero__imgwrap img {
	transform: translate3d(var(--sbw-shift, 0%), var(--sbw-par, 0px), 0) scale(1.06);
}

.sbw-hero--kenburns .sbw-hero__imgwrap {
	animation: sbwKenburns 2s var(--sbw-ease) both;
}

@keyframes sbwKenburns {
	from {
		transform: scale(1.06);
		filter: saturate(0.85);
		opacity: 0.4;
	}
	to {
		transform: scale(1);
		filter: saturate(1);
		opacity: 1;
	}
}

/* Texto lateral con flecha (por defecto SIN fondo: solo línea fina + texto) */
.sbw-hero__side {
	position: absolute;
	right: 40px;
	bottom: 20%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 4px 2px;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #ffffff;
	transition: transform 0.5s var(--sbw-ease), box-shadow 0.5s var(--sbw-ease);
}

.sbw-hero__side::before {
	content: '';
	width: 46px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	margin-bottom: 10px;
	transition: width 0.5s var(--sbw-ease);
}

.sbw-hero__side:hover {
	transform: translateY(-5px);
}

.sbw-hero__side:hover::before {
	width: 70px;
}

/* Variante opcional con fondo tipo tarjeta */
.sbw-hero__side--card {
	padding: 22px 26px;
	background: rgba(244, 238, 229, 0.86);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 20px 44px -22px rgba(36, 20, 14, 0.4);
}

.sbw-hero__side--card::before {
	display: none;
}

.sbw-hero__side--card:hover {
	box-shadow: 0 30px 54px -22px rgba(36, 20, 14, 0.5);
}

.sbw-hero--img-left .sbw-hero__side {
	right: auto;
	left: 34px;
}

.sbw-hero__side-l1 {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sbw-hero__side-l2 {
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	opacity: 0.72;
}

.sbw-hero__side-arrow {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	color: var(--sbw-accent);
}

.sbw-hero__side-arrow .sbw-ui-svg {
	width: 46px;
	height: 18px;
	transition: transform 0.45s var(--sbw-ease);
}

.sbw-hero__side:hover .sbw-ui-svg {
	transform: translateX(8px);
}

@media (max-width: 1024px) {
	.sbw-hero__inner,
	.sbw-hero--img-left .sbw-hero__inner {
		grid-template-columns: 1fr;
	}
	.sbw-hero--split .sbw-hero__inner {
		min-height: 0;
	}
	.sbw-hero--split .sbw-hero__content {
		order: 1 !important;
		padding: 72px 6vw 48px;
		text-align: center;
		align-items: center;
	}
	.sbw-hero--split .sbw-hero__media {
		order: 2 !important;
		min-height: 62vw;
	}
	.sbw-hero--split .sbw-hero__imgwrap {
		position: relative;
		inset: auto;
		height: 100%;
	}
	/* En tablet/móvil el texto va a la IZQUIERDA y la modelo respira a la derecha */
	.sbw-hero--cover .sbw-hero__content {
		padding: 64px 6vw;
		max-width: none;
		text-align: left;
		align-items: flex-start;
	}
	.sbw-hero--cover .sbw-hero__subtitle {
		justify-content: flex-start;
	}
	.sbw-hero__side {
		right: 18px;
		bottom: 18px;
	}
	.sbw-hero__side--card {
		padding: 16px 18px;
	}
	/* El texto lateral se oculta en pantallas angostas (opción del widget) */
	.sbw-hero__side--hide-md {
		display: none !important;
	}
}

/* Móvil: sección más compacta, texto a la izquierda, ritmo más apretado */
@media (max-width: 600px) {
	.sbw-hero--cover .sbw-hero__content {
		padding: 46px 6vw 52px;
	}
	.sbw-hero--cover .sbw-hero__title {
		margin-bottom: 20px;
	}
	.sbw-hero--cover .sbw-hero__subtitle {
		margin-bottom: 28px;
	}
	.sbw-hero--cover .sbw-hero__actions .sbw-btn {
		padding: 15px 34px;
	}
}

/* ---------------------------------------------------------------------------
   5. BANNERS DE CATEGORÍA
--------------------------------------------------------------------------- */
.sbw-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.sbw-cat {
	position: relative;
	min-height: 440px;
	overflow: hidden;
	border-radius: 6px;
	isolation: isolate;
	transition: transform 0.6s var(--sbw-ease), box-shadow 0.6s var(--sbw-ease);
	transition-delay: calc(var(--sbw-i, 0) * 0ms);
}

.sbw-js .sbw-cat.sbw-reveal {
	transition-delay: calc(var(--sbw-i, 0) * 120ms);
}

.sbw-cat__link {
	position: absolute;
	inset: 0;
	display: block;
}

.sbw-cat__imgwrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sbw-cat__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: var(--sbw-fit, cover);
	object-position: var(--sbw-pos, center center);
	transition: transform 1.1s var(--sbw-ease), filter 1.1s var(--sbw-ease);
	will-change: transform;
}

.sbw-cats--fx-zoom .sbw-cat:hover .sbw-cat__img,
.sbw-cats--fx-tilt .sbw-cat:hover .sbw-cat__img {
	transform: scale(1.07);
}

.sbw-cat__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(40, 20, 16, 0.32);
	transition: background-color 0.6s var(--sbw-ease);
	pointer-events: none;
}

.sbw-cats--gradient .sbw-cat__overlay {
	background-image: linear-gradient(
		100deg,
		rgba(30, 14, 10, 0.62) 0%,
		rgba(30, 14, 10, 0.18) 55%,
		rgba(30, 14, 10, 0.05) 100%
	);
}

.sbw-cat:hover .sbw-cat__overlay {
	background-color: rgba(40, 20, 16, 0.42);
}

.sbw-cat__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 14px;
	padding: 48px;
	pointer-events: none;
}

.sbw-cats--pos-center .sbw-cat__content {
	align-items: center;
	text-align: center;
}

.sbw-cats--pos-bottom-left .sbw-cat__content {
	justify-content: flex-end;
}

.sbw-cat__title {
	font-family: var(--sbw-serif);
	font-weight: 500;
	font-size: clamp(30px, 3.2vw, 46px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	transform: translateY(0);
	transition: transform 0.6s var(--sbw-ease);
}

.sbw-cat__desc {
	max-width: 260px;
	font-size: 15px;
	line-height: 1.55;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.88);
	transition: transform 0.6s var(--sbw-ease) 0.04s;
}

.sbw-cat__btn {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	background-color: rgba(94, 25, 38, 0.92);
	transition: background-color 0.45s var(--sbw-ease), color 0.45s var(--sbw-ease),
		transform 0.45s var(--sbw-ease), box-shadow 0.45s var(--sbw-ease);
}

.sbw-cat__btn .sbw-ui-svg {
	width: 16px;
	height: 16px;
	transition: transform 0.45s var(--sbw-ease);
}

.sbw-cat:hover .sbw-cat__btn {
	transform: translateY(-3px);
	box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.45);
}

.sbw-cat:hover .sbw-cat__btn .sbw-ui-svg {
	transform: translateX(5px);
}

.sbw-cat:hover .sbw-cat__title {
	transform: translateY(-4px);
}

/* Tilt 3D (la transformación la aplica el JS sobre la tarjeta) */
.sbw-tilt {
	transform-style: preserve-3d;
	perspective: 900px;
}

.sbw-tilt__glare {
	position: absolute;
	inset: -40%;
	z-index: 3;
	background: radial-gradient(
		circle at var(--sbw-gx, 50%) var(--sbw-gy, 50%),
		rgba(255, 255, 255, 0.22),
		transparent 46%
	);
	opacity: 0;
	transition: opacity 0.5s var(--sbw-ease);
	pointer-events: none;
}

.sbw-tilt:hover .sbw-tilt__glare {
	opacity: 1;
}

@media (max-width: 767px) {
	.sbw-cat {
		min-height: 340px;
	}
	.sbw-cat__content {
		padding: 30px;
	}
}

/* ---------------------------------------------------------------------------
   6. BENEFICIOS CON ICONOS
--------------------------------------------------------------------------- */
.sbw-features__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.sbw-feature {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 6px;
	position: relative;
	transition: transform 0.5s var(--sbw-ease);
}

.sbw-js .sbw-feature.sbw-reveal {
	transition-delay: calc(var(--sbw-i, 0) * 110ms);
}

.sbw-features--stacked .sbw-feature {
	flex-direction: column;
	text-align: center;
	gap: 14px;
}

.sbw-features--dividers .sbw-feature:not(:last-child)::after {
	content: '';
	position: absolute;
	right: calc(-0.5 * 24px);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 42px;
	background: var(--sbw-line);
}

.sbw-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #2b2119;
	flex: 0 0 auto;
	transition: transform 0.5s var(--sbw-ease), background-color 0.5s var(--sbw-ease);
}

.sbw-features--shape-circle .sbw-feature__icon,
.sbw-features--shape-square .sbw-feature__icon {
	width: 78px;
	height: 78px;
	background-color: rgba(124, 33, 54, 0.07);
}

.sbw-features--shape-circle .sbw-feature__icon {
	border-radius: 50%;
}

.sbw-features--shape-square .sbw-feature__icon {
	border-radius: 14px;
}

.sbw-feature__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sbw-feature__title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sbw-ink);
}

.sbw-feature__sub {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sbw-muted);
}

/* Hover */
.sbw-features--fx-lift .sbw-feature:hover {
	transform: translateY(-5px);
}

.sbw-features--fx-lift .sbw-feature:hover .sbw-feature__icon,
.sbw-features--fx-pulse .sbw-feature:hover .sbw-feature__icon {
	animation: sbwIconPulse 0.9s var(--sbw-ease);
}

@keyframes sbwIconPulse {
	0% { transform: scale(1); }
	35% { transform: scale(1.12) rotate(-2deg); }
	70% { transform: scale(0.97); }
	100% { transform: scale(1); }
}

/* Dibujo de trazos (JS define stroke-dasharray/offset y activa la clase) */
.sbw-features--draw .sbw-svg--drawable.is-drawing path,
.sbw-features--draw .sbw-svg--drawable.is-drawing rect,
.sbw-features--draw .sbw-svg--drawable.is-drawing circle {
	animation: sbwDraw 1.5s var(--sbw-ease) forwards;
	animation-delay: calc(var(--sbw-i, 0) * 140ms);
}

@keyframes sbwDraw {
	to { stroke-dashoffset: 0; }
}

/* Hover "Volver a dibujar": el trazo se anima de nuevo al pasar el cursor */
@keyframes sbwRedraw {
	from { stroke-dashoffset: var(--sbw-len, 0); }
	to { stroke-dashoffset: 0; }
}

.sbw-features--fx-draw .sbw-feature:hover .sbw-svg--drawable path,
.sbw-features--fx-draw .sbw-feature:hover .sbw-svg--drawable rect,
.sbw-features--fx-draw .sbw-feature:hover .sbw-svg--drawable circle {
	animation: sbwRedraw 1.05s var(--sbw-ease) both;
	animation-delay: calc(var(--sbw-i, 0) * 70ms);
}

.sbw-features--fx-draw .sbw-feature:hover {
	transform: translateY(-4px);
}

/* Fallback para iconos de biblioteca (sin trazo dibujable) en modo redibujar */
.sbw-features--fx-draw .sbw-feature:hover .sbw-feature__icon i,
.sbw-features--fx-draw .sbw-feature:hover .sbw-feature__icon svg:not(.sbw-svg--drawable) {
	animation: sbwIconPulse 0.9s var(--sbw-ease);
}

@media (max-width: 1024px) {
	.sbw-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sbw-features--dividers .sbw-feature:nth-child(2n)::after {
		display: none;
	}
}

@media (max-width: 520px) {
	.sbw-feature {
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}
}

/* ---------------------------------------------------------------------------
   7. PRODUCTOS CON PESTAÑAS
--------------------------------------------------------------------------- */
.sbw-ptabs {
	--sbw-tabs-gap: 34px;
}

.sbw-ptabs__header {
	text-align: center;
	margin-bottom: 26px;
}

.sbw-ptabs__heading {
	margin: 0;
	font-family: var(--sbw-serif);
	font-weight: 500;
	font-size: clamp(30px, 3.6vw, 46px);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sbw-ink);
}

.sbw-ptabs__subheading {
	margin: 12px 0 0;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sbw-muted);
}

/* Navegación de pestañas */
.sbw-ptabs__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sbw-tabs-gap);
	margin: 0 0 42px;
	padding: 0;
}

.sbw-ptabs__tab {
	position: relative;
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 2px;
	font-family: var(--sbw-sans);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #9a8d81;
	cursor: pointer;
	transition: color 0.4s var(--sbw-ease);
}

.sbw-ptabs__tab + .sbw-ptabs__tab::before {
	content: '';
	position: absolute;
	left: calc(var(--sbw-tabs-gap) / -2);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 15px;
	background-color: #d8cdc1;
}

.sbw-ptabs__tab::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background-color: var(--sbw-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s var(--sbw-ease);
}

.sbw-ptabs__tab.is-active {
	color: var(--sbw-ink);
}

.sbw-ptabs__tab.is-active::after {
	transform: scaleX(1);
}

.sbw-ptabs__tab:hover {
	color: var(--sbw-ink);
}

/* Anula los estilos azules de botón que aplican algunos temas */
.sbw-ptabs__tab:hover,
.sbw-ptabs__tab:focus,
.sbw-ptabs__tab:active {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.sbw-ptabs__tab:focus {
	outline: none;
}

.sbw-ptabs__tab:focus-visible {
	outline: 2px solid var(--sbw-accent);
	outline-offset: 5px;
}

/* Paneles y cuadrícula */
.sbw-ptabs__panel[hidden] {
	display: none;
}

.sbw-ptabs__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
}

.sbw-ptabs__panel.is-leaving .sbw-ptabs__grid {
	opacity: 0;
	transform: translateY(10px);
}

.sbw-ptabs__grid {
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.sbw-ptabs__panel.is-entering .sbw-card {
	animation: sbwCardIn 0.7s var(--sbw-ease) both;
}

.sbw-ptabs__panel.is-entering .sbw-card:nth-child(1) { animation-delay: 0.02s; }
.sbw-ptabs__panel.is-entering .sbw-card:nth-child(2) { animation-delay: 0.08s; }
.sbw-ptabs__panel.is-entering .sbw-card:nth-child(3) { animation-delay: 0.14s; }
.sbw-ptabs__panel.is-entering .sbw-card:nth-child(4) { animation-delay: 0.2s; }
.sbw-ptabs__panel.is-entering .sbw-card:nth-child(5) { animation-delay: 0.26s; }
.sbw-ptabs__panel.is-entering .sbw-card:nth-child(6) { animation-delay: 0.32s; }
.sbw-ptabs__panel.is-entering .sbw-card:nth-child(7) { animation-delay: 0.38s; }
.sbw-ptabs__panel.is-entering .sbw-card:nth-child(8) { animation-delay: 0.44s; }
.sbw-ptabs__panel.is-entering .sbw-card:nth-child(n+9) { animation-delay: 0.5s; }

@keyframes sbwCardIn {
	from {
		opacity: 0;
		transform: translateY(26px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Tarjeta de producto */
.sbw-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.sbw-card__media {
	position: relative;
	overflow: hidden;
	background-color: #f1eae1;
	border-radius: 4px;
	transition: box-shadow 0.55s var(--sbw-ease);
}

.sbw-card:hover .sbw-card__media {
	box-shadow: var(--sbw-shadow);
}

.sbw-card__imglink {
	display: block;
	position: relative;
}

.sbw-ptabs--ratio-3-4 .sbw-card__imglink { aspect-ratio: 3 / 4; }
.sbw-ptabs--ratio-4-5 .sbw-card__imglink { aspect-ratio: 4 / 5; }
.sbw-ptabs--ratio-1-1 .sbw-card__imglink { aspect-ratio: 1 / 1; }

/* La foto llena TODO el marco de la tarjeta (resistente a estilos del tema),
   sin franjas vacías; el ajuste se controla desde el widget (--sbw-fit). */
.sbw-card__img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: var(--sbw-fit, cover);
	object-position: var(--sbw-pos, center center);
	transition: transform 1s var(--sbw-ease), opacity 0.7s var(--sbw-ease);
}

.sbw-ptabs:not(.sbw-ptabs--ratio-auto) .sbw-card__img--main {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sbw-ptabs--ratio-auto .sbw-card__img--main {
	position: relative;
	z-index: 1;
	height: auto !important;
}

.sbw-card__img--alt {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
}

.sbw-card:hover .sbw-card__img--alt {
	opacity: 1;
	transform: scale(1.04);
}

.sbw-ptabs--hoverzoom .sbw-card:hover .sbw-card__img--main {
	transform: scale(1.06);
}

/* Insignias */
.sbw-card__badges {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 7px;
	pointer-events: none;
}

.sbw-badge {
	display: inline-block;
	padding: 6px 11px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--sbw-accent);
	border-radius: 2px;
}

.sbw-badge--new {
	background-color: #2f3a2c;
}

/* Botones flotantes (favoritos / vista rápida) */
.sbw-card__actions {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sbw-iconbtn {
	appearance: none;
	border: 0;
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--sbw-ink);
	box-shadow: 0 8px 22px -10px rgba(36, 20, 14, 0.4);
	opacity: 0;
	transform: translateX(12px);
	transition: opacity 0.45s var(--sbw-ease), transform 0.45s var(--sbw-ease),
		background-color 0.35s var(--sbw-ease), color 0.35s var(--sbw-ease);
}

.sbw-card__actions .sbw-iconbtn:nth-child(2) {
	transition-delay: 0.06s;
}

.sbw-card:hover .sbw-iconbtn,
.sbw-card:focus-within .sbw-iconbtn {
	opacity: 1;
	transform: translateX(0);
}

.sbw-iconbtn:hover {
	background-color: var(--sbw-accent);
	color: #fff;
}

.sbw-iconbtn .sbw-ui-svg {
	width: 17px;
	height: 17px;
}

.sbw-wishlist-toggle.is-active {
	opacity: 1;
	transform: translateX(0);
	background-color: var(--sbw-accent);
	color: #fff;
}

.sbw-wishlist-toggle.is-active .sbw-ui-svg--heart path {
	fill: currentColor;
}

.sbw-wishlist-toggle.is-bouncing {
	animation: sbwHeart 0.55s var(--sbw-ease);
}

@keyframes sbwHeart {
	0% { transform: scale(1); }
	40% { transform: scale(1.28); }
	100% { transform: scale(1); }
}

/* Botón añadir al carrito (se desliza desde abajo) */
.sbw-card__cartwrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	padding: 12px;
	transform: translateY(105%);
	transition: transform 0.5s var(--sbw-ease);
	background: linear-gradient(to top, rgba(20, 10, 8, 0.24), transparent);
}

.sbw-card:hover .sbw-card__cartwrap,
.sbw-card:focus-within .sbw-card__cartwrap {
	transform: translateY(0);
}

/* Lleva clases de WooCommerce (.button), así que se blinda con !important
   para que ningún tema lo pinte con sus botones genéricos. */
.sbw .sbw-btn-cart,
.sbw .sbw-btn-cart.button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px;
	width: 100% !important;
	margin: 0 !important;
	padding: 14px 10px !important;
	background: rgba(255, 255, 255, 0.96) !important;
	color: var(--sbw-ink) !important;
	font-family: var(--sbw-sans) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1 !important;
	border: 0 !important;
	border-radius: 3px !important;
	box-shadow: none;
	transition: background-color 0.35s var(--sbw-ease), color 0.35s var(--sbw-ease),
		transform 0.35s var(--sbw-ease);
}

.sbw .sbw-btn-cart:hover,
.sbw .sbw-btn-cart:focus {
	background: var(--sbw-accent) !important;
	color: #fff !important;
	outline: none;
}

.sbw .sbw-btn-cart .sbw-ui-svg--check {
	display: none;
	width: 15px;
	height: 15px;
}

.sbw .sbw-btn-cart.loading {
	pointer-events: none;
	opacity: 0.75;
}

.sbw .sbw-btn-cart.loading .sbw-ui-svg--bag {
	animation: sbwSpin 0.8s linear infinite;
}

.sbw .sbw-btn-cart.added,
.sbw .sbw-btn-cart.is-added {
	background: #2f3a2c !important;
	color: #fff !important;
}

.sbw .sbw-btn-cart.added .sbw-ui-svg--bag,
.sbw .sbw-btn-cart.is-added .sbw-ui-svg--bag {
	display: none;
}

.sbw .sbw-btn-cart.added .sbw-ui-svg--check,
.sbw .sbw-btn-cart.is-added .sbw-ui-svg--check {
	display: inline-block;
}

/* Ocultar "ver carrito" que WooCommerce añade tras el botón */
.sbw-card .added_to_cart {
	display: none !important;
}

@keyframes sbwSpin {
	to { transform: rotate(360deg); }
}

/* En pantallas táctiles el carrito y las acciones siempre visibles */
@media (hover: none) {
	.sbw-card__cartwrap {
		transform: translateY(0);
	}
	.sbw-iconbtn {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Cuerpo de la tarjeta */
.sbw-card__body {
	padding: 16px 4px 6px;
	text-align: left;
}

.sbw-card__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.4;
	font-family: var(--sbw-sans);
}

.sbw-card__title a {
	color: #2b241e;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.5s var(--sbw-ease);
}

.sbw-card__title a:hover {
	background-size: 100% 1px;
}

.sbw-card__price {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sbw-ink);
}

.sbw-card__price del {
	color: var(--sbw-muted);
	font-weight: 400;
	margin-right: 8px;
}

.sbw-card__price ins {
	text-decoration: none;
	color: var(--sbw-accent);
}

/* Estrellas */
.sbw-stars {
	position: relative;
	display: inline-block;
	font-size: 13px;
	letter-spacing: 2px;
	line-height: 1;
	color: #d9cfc3;
}

.sbw-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	overflow: hidden;
	color: #c99a3f;
}

.sbw-stars__count {
	margin-left: 6px;
	font-size: 11.5px;
	color: var(--sbw-muted);
}

.sbw-card__rating {
	margin-bottom: 5px;
}

/* Estado vacío */
.sbw-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	color: var(--sbw-muted);
}

.sbw-empty__icon .sbw-svg {
	width: 54px;
	height: 54px;
	margin: 0 auto 14px;
	opacity: 0.5;
}

.sbw-empty p {
	margin: 0;
	font-size: 14.5px;
	letter-spacing: 0.06em;
}

/* Esqueleto de carga */
.sbw-skel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbw-skel__media {
	aspect-ratio: 3 / 4;
	border-radius: 4px;
}

.sbw-ptabs--ratio-1-1 .sbw-skel__media { aspect-ratio: 1 / 1; }
.sbw-ptabs--ratio-4-5 .sbw-skel__media { aspect-ratio: 4 / 5; }

.sbw-skel__line {
	height: 13px;
	border-radius: 3px;
	width: 70%;
}

.sbw-skel__line--short {
	width: 40%;
}

.sbw-skel__media,
.sbw-skel__line {
	background: linear-gradient(100deg, #efe7dc 40%, #f9f4ec 50%, #efe7dc 60%);
	background-size: 200% 100%;
	animation: sbwShimmer 1.3s ease-in-out infinite;
}

@keyframes sbwShimmer {
	to { background-position: -200% 0; }
}

/* Botón ver más */
.sbw-ptabs__morewrap {
	display: flex;
	justify-content: center;
	margin-top: 44px;
}

.sbw-ptabs__more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 46px;
	border: 1px solid var(--sbw-ink);
	color: var(--sbw-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transition: background-color 0.45s var(--sbw-ease), color 0.45s var(--sbw-ease),
		border-color 0.45s var(--sbw-ease), transform 0.35s var(--sbw-ease);
}

.sbw-ptabs__more:hover,
.sbw-ptabs__more:focus {
	background-color: var(--sbw-accent);
	border-color: var(--sbw-accent);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -16px rgba(124, 33, 54, 0.55);
	outline: none;
}

.sbw-ptabs__more:focus-visible {
	outline: 2px solid var(--sbw-accent);
	outline-offset: 3px;
}

.sbw-iconbtn:focus {
	outline: none;
	box-shadow: 0 8px 22px -10px rgba(36, 20, 14, 0.4);
}

.sbw-iconbtn:focus-visible {
	outline: 2px solid var(--sbw-accent);
	outline-offset: 2px;
}

.sbw-ptabs__more .sbw-ui-svg {
	width: 17px;
	height: 17px;
	transition: transform 0.45s var(--sbw-ease);
}

.sbw-ptabs__more:hover .sbw-ui-svg {
	transform: translateX(6px);
}

.sbw-ptabs__more.is-switching {
	opacity: 0;
	transform: translateY(6px);
}

@media (max-width: 1024px) {
	.sbw-ptabs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.sbw-ptabs {
		--sbw-tabs-gap: 18px;
	}
	.sbw-ptabs__grid {
		gap: 16px;
	}
}

/* ---------------------------------------------------------------------------
   8. BANNER CTA EDITORIAL
--------------------------------------------------------------------------- */
.sbw-cta {
	position: relative;
	overflow: hidden;
	background-color: #3b2a21;
}

.sbw-cta__inner {
	display: grid;
	grid-template-columns: var(--sbw-cta-img-w, 46%) minmax(0, 1fr);
	min-height: 480px;
	max-width: 1560px;
	margin: 0 auto;
}

.sbw-cta--img-right .sbw-cta__inner {
	grid-template-columns: minmax(0, 1fr) var(--sbw-cta-img-w, 46%);
}

.sbw-cta--img-right .sbw-cta__media { order: 2; }
.sbw-cta--img-right .sbw-cta__content { order: 1; }

.sbw-cta__media {
	position: relative;
	overflow: hidden;
	min-height: 320px;
}

.sbw-cta__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: var(--sbw-fit, cover);
	object-position: var(--sbw-pos, center center);
	transform: translate3d(var(--sbw-shift, 0%), var(--sbw-par, 0px), 0) scale(1.1);
	will-change: transform;
}

.sbw-cta__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Diseño: imagen de fondo a lo ancho (completa) */
.sbw-cta--cover .sbw-cta__inner,
.sbw-cta--cover.sbw-cta--img-right .sbw-cta__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
}

.sbw-cta--cover .sbw-cta__media {
	position: absolute;
	inset: 0;
	min-height: 0;
	order: initial;
}

.sbw-cta--cover .sbw-cta__content {
	position: relative;
	z-index: 2;
	order: initial;
	width: 100%;
	max-width: var(--sbw-cmax, 820px);
}

.sbw-cta--cover .sbw-cta__content::before {
	display: none;
}

/* ALTURA SEGÚN LA IMAGEN: el banner adopta la proporción exacta de la foto,
   así NUNCA se recorta, en ningún ancho de pantalla. El texto se superpone
   y, si llegara a ser más alto que la foto, el color de fondo del panel
   rellena el resto. */
.sbw-cta--hauto .sbw-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 0 !important;
}

.sbw-cta--hauto .sbw-cta__media {
	position: relative;
	inset: auto;
	grid-area: 1 / 1;
	min-height: 0;
	align-self: start;
}

.sbw-cta--hauto .sbw-cta__media img {
	position: static;
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: initial;
	object-position: initial;
	transform: none;
}

.sbw-cta--hauto .sbw-cta__content {
	grid-area: 1 / 1;
	position: relative;
	z-index: 2;
}

/* Posición del texto en modo imagen completa (justify-self + márgenes,
   a prueba de grids/flex que impongan los temas) */
.sbw-cta--cover.sbw-cta--cpos-left .sbw-cta__content {
	justify-self: start;
	margin-left: 0;
	margin-right: auto;
}

.sbw-cta--cover.sbw-cta--cpos-center .sbw-cta__content {
	justify-self: center;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	text-align: center;
}

.sbw-cta--cover.sbw-cta--cpos-right .sbw-cta__content {
	justify-self: end;
	margin-left: auto;
	margin-right: 0;
	align-items: flex-start;
	text-align: left;
}

.sbw-cta__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 90px 7vw;
	position: relative;
}

/* Filo decorativo entre imagen y panel */
.sbw-cta__content::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 58%;
	background: linear-gradient(to bottom, transparent, rgba(244, 236, 226, 0.35), transparent);
}

.sbw-cta--img-right .sbw-cta__content::before {
	left: auto;
	right: 0;
}

.sbw-cta__eyebrow {
	margin-bottom: 22px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: rgba(244, 236, 226, 0.65);
}

.sbw-cta__title {
	margin: 0 0 30px;
	font-family: var(--sbw-serif);
	font-weight: 500;
	font-size: clamp(34px, 4.2vw, 62px);
	line-height: 1.12;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #f4ece2;
}

.sbw-cta__text {
	margin: 0 0 38px;
	max-width: 480px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(244, 236, 226, 0.78);
}

@media (max-width: 1024px) {
	.sbw-cta__inner,
	.sbw-cta--img-right .sbw-cta__inner {
		grid-template-columns: 1fr;
	}
	.sbw-cta--split .sbw-cta__media {
		order: 1 !important;
		min-height: 60vw;
	}
	.sbw-cta--split .sbw-cta__content {
		order: 2 !important;
	}
	.sbw-cta__content {
		padding: 60px 6vw 70px;
		align-items: center;
		text-align: center;
	}
	/* En el diseño a lo ancho, el texto va a la IZQUIERDA también en tablet/móvil */
	.sbw-cta--cover .sbw-cta__content {
		padding: 44px 6vw;
		align-items: flex-start;
		text-align: left;
	}
	.sbw-cta--cover.sbw-cta--cpos-center .sbw-cta__content {
		align-items: center;
		text-align: center;
	}
	.sbw-cta__content::before {
		display: none;
	}

	/* ===== APILADO EN TABLET/MÓVIL (recomendado): foto arriba COMPLETA,
	   texto abajo sobre el panel de color. Nada se recorta ni se encima. ===== */
	.sbw-cta--cover.sbw-cta--mstack .sbw-cta__inner {
		display: block;
		min-height: 0 !important;
	}

	.sbw-cta--cover.sbw-cta--mstack .sbw-cta__media {
		position: relative;
		inset: auto;
		min-height: 0;
	}

	.sbw-cta--cover.sbw-cta--mstack .sbw-cta__media img {
		position: static;
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: initial;
		object-position: initial;
		transform: none;
	}

	.sbw-cta--cover.sbw-cta--mstack .sbw-cta__content {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: none;
		margin: 0;
		justify-self: auto;
		padding: 38px 6vw 46px;
	}

	/* La línea decorativa y el texto del apilado quedan alineados a la izquierda
	   (o centrados si así se eligió la posición del texto). */
	.sbw-cta--cover.sbw-cta--mstack.sbw-cta--cpos-right .sbw-cta__content {
		align-items: flex-start;
		text-align: left;
	}
}

@media (max-width: 600px) {
	.sbw-cta--cover .sbw-cta__content {
		padding: 26px 6vw 30px;
	}
	.sbw-cta--cover.sbw-cta--mstack .sbw-cta__content {
		padding: 30px 6vw 38px;
	}
	.sbw-cta--cover .sbw-cta__title {
		margin-bottom: 16px;
	}
	.sbw-cta--cover .sbw-cta__text {
		margin-bottom: 22px;
		font-size: 14px;
	}
	.sbw-cta--cover .sbw-cta__eyebrow {
		margin-bottom: 12px;
	}
	.sbw-cta--cover .sbw-btn--ghost-light {
		padding: 12px 24px;
		font-size: 11px;
	}
}

/* ---------------------------------------------------------------------------
   9. MODAL DE VISTA RÁPIDA
--------------------------------------------------------------------------- */
.sbw-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	font-family: var(--sbw-sans, 'Jost', sans-serif);
}

.sbw-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.sbw-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(22, 12, 8, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
}

.sbw-modal__dialog {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	max-height: min(86vh, 760px);
	overflow: auto;
	background: #fffdf9;
	border-radius: 8px;
	box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.55);
	transform: translateY(26px) scale(0.97);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sbw-modal.is-open .sbw-modal__dialog {
	transform: translateY(0) scale(1);
}

.sbw-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	appearance: none;
	border: 0;
	cursor: pointer;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #241d18;
	color: #fff;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.sbw-modal__close:hover {
	background: #7c2136;
	transform: rotate(90deg);
}

.sbw-modal__body {
	min-height: 320px;
}

/* Contenido de vista rápida */
.sbw-qv {
	display: grid;
	grid-template-columns: 45% 1fr;
}

.sbw-qv__media {
	position: relative;
	background: #f1eae1;
}

.sbw-qv__media .sbw-badge {
	position: absolute;
	top: 16px;
	left: 16px;
}

.sbw-qv__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 420px;
}

.sbw-qv__info {
	padding: 46px 44px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sbw-qv__cats {
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #8a7d72;
	margin-bottom: 12px;
}

.sbw-qv__cats a {
	color: inherit;
}

.sbw-qv__title {
	margin: 0 0 12px;
	font-family: var(--sbw-serif, Georgia, serif);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 500;
	color: #241d18;
	line-height: 1.15;
}

.sbw-qv__rating {
	margin-bottom: 10px;
}

.sbw-qv__price {
	font-size: 21px;
	font-weight: 600;
	color: #241d18;
	margin-bottom: 18px;
}

.sbw-qv__price del {
	color: #8a7d72;
	font-weight: 400;
	margin-right: 10px;
}

.sbw-qv__price ins {
	text-decoration: none;
	color: #7c2136;
}

.sbw-qv__desc {
	font-size: 14.5px;
	line-height: 1.75;
	font-weight: 300;
	color: #4a403a;
	margin-bottom: 26px;
}

.sbw-qv__buy {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 22px;
}

/* Botones del pop-up: estilo boutique blindado contra el tema
   (llevan clases .button de WooCommerce y algunos temas los pintan azules). */
.sbw-modal .sbw-btn,
.sbw-modal .sbw-btn.button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	width: auto !important;
	margin: 0 !important;
	padding: 15px 28px !important;
	font-family: var(--sbw-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sbw-modal .sbw-btn--solid {
	background: #7c2136 !important;
	color: #ffffff !important;
	border: 1px solid #7c2136 !important;
}

.sbw-modal .sbw-btn--solid:hover,
.sbw-modal .sbw-btn--solid:focus {
	background: #57141f !important;
	border-color: #57141f !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	outline: none;
}

.sbw-modal .sbw-btn--solid.added,
.sbw-modal .sbw-btn--solid.is-added {
	background: #2f3a2c !important;
	border-color: #2f3a2c !important;
	color: #ffffff !important;
}

.sbw-modal .sbw-btn--ghost {
	background: transparent !important;
	color: #241d18 !important;
	border: 1px solid #241d18 !important;
}

.sbw-modal .sbw-btn--ghost:hover,
.sbw-modal .sbw-btn--ghost:focus {
	background: #241d18 !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	outline: none;
}

.sbw-modal .sbw-btn .sbw-ui-svg {
	width: 16px;
	height: 16px;
}

.sbw-qv__meta {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #8a7d72;
	border-top: 1px solid #ece3d7;
	padding-top: 16px;
	width: 100%;
}

.sbw-modal__body .added_to_cart {
	display: none !important;
}

/* Cargando dentro del modal */
.sbw-modal__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

.sbw-spinner {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #e6dccf;
	border-top-color: #7c2136;
	animation: sbwSpin 0.75s linear infinite;
}

@media (max-width: 767px) {
	.sbw-qv {
		grid-template-columns: 1fr;
	}
	.sbw-qv__img {
		min-height: 300px;
		max-height: 44vh;
	}
	.sbw-qv__info {
		padding: 28px 24px 34px;
	}
}

/* ---------------------------------------------------------------------------
   10. NOTIFICACIONES TOAST
--------------------------------------------------------------------------- */
.sbw-toasts {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
	font-family: var(--sbw-sans, 'Jost', sans-serif);
}

.sbw-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 260px;
	max-width: 340px;
	padding: 15px 18px;
	background: #241d18;
	color: #f4ece2;
	font-size: 13px;
	letter-spacing: 0.05em;
	border-left: 3px solid #7c2136;
	border-radius: 4px;
	box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.5);
	transform: translateX(120%);
	opacity: 0;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
	pointer-events: auto;
}

.sbw-toast.is-visible {
	transform: translateX(0);
	opacity: 1;
}

.sbw-toast__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(124, 33, 54, 0.35);
	color: #f4ece2;
	flex: 0 0 auto;
}

.sbw-toast__icon .sbw-ui-svg {
	width: 14px;
	height: 14px;
}

.sbw-toast--success .sbw-toast__icon {
	background: rgba(64, 92, 60, 0.5);
}

@media (max-width: 520px) {
	.sbw-toasts {
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
	.sbw-toast {
		max-width: none;
		width: 100%;
	}
}