/*
Theme Name: SexFeliz Kadence
Description: Tema hijo de Kadence para la tienda SexFeliz. Paleta del logo, tipografía de alto impacto, botones pill y hero con 3D tilt y parallax.
Template: kadence
Version: 2.0.0
Text Domain: sexfeliz
*/

/* ---------- Fuentes propias (sin Google Fonts) ---------- */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/archivo-wght.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("assets/fonts/dm-sans-wght.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: italic;
	font-weight: 100 1000;
	font-display: swap;
	src: url("assets/fonts/dm-sans-wght-italic.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
	--sf-naranja: var(--global-palette1, #CD6437);
	--sf-naranja-profundo: var(--global-palette2, #B9522A);
	--sf-tinta: var(--global-palette3, #1C1512);
	--sf-corteza: var(--global-palette5, #6B5D55);
	--sf-niebla: var(--global-palette6, #E6DCD3);
	--sf-pergamino: var(--global-palette7, #F7F1EA);
	--sf-durazno: var(--global-palette8, #FBE4D3);
	--sf-nieve: var(--global-palette9, #FFFFFF);
	--sf-naranja-claro: #E5893E;
	--sf-bosque: #16301B;
	--sf-display: "Archivo", "Arial Black", sans-serif;
	--sf-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
	--sf-gutter: max(16px, 4vw);
	--sf-section: clamp(72px, 10vw, 120px);
	--sf-radius-card: 30px;
	--sf-shadow: 0 24px 48px rgba(22, 48, 27, 0.18);
	--global-body-font-family: var(--sf-body);
	--global-heading-font-family: var(--sf-display);
}

body {
	font-family: var(--sf-body);
	letter-spacing: -0.02em;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-kadence-advancedheading {
	font-family: var(--sf-display);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

/* ---------- Botones pill ---------- */

.button,
button,
input[type="submit"],
.wp-block-button__link,
.wp-element-button,
.kb-button {
	border-radius: 1000px !important;
	font-family: var(--sf-body);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.kb-button.sf-btn,
.sf-btn .kb-button {
	padding: 14px 33px;
	border: 1px solid currentColor;
	background: transparent;
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sf-btn-ink.kb-button,
.sf-btn-ink .kb-button {
	color: var(--sf-tinta);
	border-color: var(--sf-tinta);
}

.sf-btn-ink.kb-button:hover,
.sf-btn-ink.kb-button:focus-visible,
.sf-btn-ink .kb-button:hover {
	background: var(--sf-tinta);
	color: var(--sf-nieve);
	border-color: var(--sf-tinta);
}

.sf-btn-snow.kb-button,
.sf-btn-snow .kb-button {
	color: var(--sf-nieve);
	border-color: var(--sf-nieve);
}

.sf-btn-snow.kb-button:hover,
.sf-btn-snow.kb-button:focus-visible {
	background: var(--sf-nieve);
	color: var(--sf-bosque);
}

.sf-btn-quiet.kb-button {
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 4px;
	padding-inline: 12px;
}

.sf-btn-quiet.kb-button:hover {
	background: transparent;
	color: var(--sf-tinta);
	border-color: var(--sf-tinta);
	text-decoration: none;
}

/* ---------- Header de Kadence ---------- */

.site-main-header-wrap .site-header-row-container-inner {
	background: var(--sf-nieve);
}

.site-branding .custom-logo {
	max-height: 56px;
	width: auto;
}

.header-navigation .header-menu-container > ul > li.menu-item > a {
	font-size: 16px;
	font-weight: 400;
	color: var(--sf-tinta);
	background-image: linear-gradient(var(--sf-naranja), var(--sf-naranja));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 50% calc(100% - 0.9em);
	transition: background-size 0.25s ease;
}

.header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.header-navigation .header-menu-container > ul > li.current-menu-item > a {
	background-size: calc(100% - 2.4em) 2px;
	color: var(--sf-tinta);
}

.site-header-item .header-button,
.site-header-item .header-button:visited {
	background: transparent;
	color: var(--sf-tinta);
	border: 1px solid var(--sf-tinta);
	padding: 12px 26px;
	box-shadow: none;
}

.site-header-item .header-button:hover {
	background: var(--sf-tinta);
	color: var(--sf-nieve);
}

.header-cart-wrap .header-cart-button,
.header-mobile-cart-wrap .header-cart-button {
	background: var(--sf-naranja);
	color: var(--sf-nieve);
	border: 1px solid var(--sf-naranja);
	border-radius: 1000px;
	padding: 11px 18px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.header-cart-wrap .header-cart-button:hover,
.header-cart-wrap .header-cart-button:focus-visible,
.header-mobile-cart-wrap .header-cart-button:hover,
.header-mobile-cart-wrap .header-cart-button:focus-visible {
	background: var(--sf-tinta);
	color: var(--sf-nieve);
	border-color: var(--sf-tinta);
}

/* El contador va en blanco para que se lea sobre el naranja. */
.header-cart-wrap .header-cart-total,
.header-mobile-cart-wrap .header-cart-total {
	background: var(--sf-nieve);
	color: var(--sf-naranja-profundo);
	font-weight: 700;
}

/* ---------- Portada: estructura común ---------- */

.home .content-area,
.home .site-main {
	margin: 0;
}

.kb-row-layout-wrap.sf-row > .kt-row-column-wrap {
	padding: var(--sf-section) var(--sf-gutter);
	max-width: calc(1280px + 2 * var(--sf-gutter));
	margin-inline: auto;
}

.sf-title {
	font-size: clamp(40px, 5.6vw, 67px) !important;
	line-height: 1.02 !important;
	margin: 0 0 clamp(28px, 4vw, 48px) !important;
	max-width: 14ch;
	color: inherit;
}

.sf-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.sf-head .sf-title {
	margin: 0 !important;
}

/* ---------- Hero con parallax y 3D tilt ---------- */

.sf-hero,
.kb-row-layout-wrap.sf-hero {
	--sf-p: 0;
	--kb-row-bg: var(--sf-nieve);
	background: var(--sf-nieve);
	color: var(--sf-tinta);
	overflow: hidden;
	position: relative;
}

.kb-row-layout-wrap.sf-hero > .kt-row-column-wrap {
	padding: clamp(40px, 6vw, 72px) var(--sf-gutter) clamp(48px, 6vw, 80px);
	min-height: min(700px, calc(100svh - 88px));
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
}

.sf-hero::before {
	content: "";
	position: absolute;
	right: -8vw;
	top: -8vw;
	width: min(52vw, 740px);
	aspect-ratio: 1;
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	background: var(--sf-durazno);
	transform: translate3d(0, calc(var(--sf-p) * 160px), 0);
	animation: sf-morph 14s ease-in-out infinite alternate;
	pointer-events: none;
}

.sf-hero__copy {
	transform: translate3d(0, calc(var(--sf-p) * 90px), 0);
	opacity: calc(1 - var(--sf-p) * 0.9);
}

.sf-hero__title {
	font-size: clamp(54px, 8.2vw, 118px) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.035em !important;
	margin: 0 0 28px !important;
	max-width: 9ch;
	color: var(--sf-tinta) !important;
}

.sf-hero__lead {
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.45;
	max-width: 34ch;
	margin: 0 0 36px;
}

.sf-hero__media .kt-inside-inner-col {
	display: flex;
	justify-content: center;
}

.sf-tilt {
	width: min(600px, 100%);
	aspect-ratio: 1726 / 1512;
	perspective: 1200px;
	position: relative;
	touch-action: pan-y;
	transform: translate3d(0, calc(var(--sf-p) * -60px), 0);
}

.sf-tilt__stage {
	--rx: 0deg;
	--ry: 0deg;
	--gx: 50%;
	--gy: 50%;
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
}

.sf-tilt__disc,
.sf-tilt__ring,
.sf-tilt__img,
.sf-tilt__glare {
	position: absolute;
}

.sf-tilt__disc {
	inset: 8% 8% 0 8%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--sf-naranja-claro) 0%, var(--sf-naranja-claro) 45%, var(--sf-naranja-profundo) 100%);
	transform: translateZ(-80px) translateY(calc(var(--sf-p) * 120px)) scale(1.07);
}

.sf-tilt__ring {
	inset: 0 2% -6% 2%;
	border: 1px solid var(--sf-tinta);
	border-radius: 50%;
	opacity: 0.3;
	transform: translateZ(-140px) translateY(calc(var(--sf-p) * 180px)) scale(1.12);
}

/* translateZ positivo agranda la capa: el scale compensa para que la foto se vea a su tamaño real y nítida. */
.sf-tilt__img {
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	transform: translateZ(40px) scale(0.967);
	filter: drop-shadow(0 26px 26px rgba(28, 21, 18, 0.25));
	user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
}

.sf-tilt__glare {
	inset: 8% 8% 0 8%;
	border-radius: 50%;
	background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.35), transparent 55%);
	transform: translateZ(-79px) translateY(calc(var(--sf-p) * 120px)) scale(1.07);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.sf-tilt.is-active .sf-tilt__glare {
	opacity: 1;
}

/* ---------- Bento de categorías ---------- */

.sf-cats,
.kb-row-layout-wrap.sf-cats {
	--kb-row-bg: var(--sf-nieve);
	background: var(--sf-nieve);
}

.sf-bento {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	grid-template-rows: repeat(2, minmax(300px, 1fr));
	gap: 16px;
}

.sf-bento__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	padding: 27px;
	border-radius: var(--sf-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: var(--sf-tinta);
	background: var(--sf-pergamino);
}

.sf-bento__item:hover {
	color: var(--sf-tinta);
}

.sf-bento__item--0 {
	grid-row: span 2;
	background: var(--sf-durazno);
}

.sf-bento__item--1 {
	background: var(--sf-bosque);
	color: var(--sf-nieve);
}

.sf-bento__item--1:hover {
	color: var(--sf-nieve);
}

/* La imagen vive en su propia caja arriba a la derecha: nunca queda debajo del texto. */
.sf-bento__media {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 42%;
	height: calc(100% - 128px);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	pointer-events: none;
}

.sf-bento__item--0 .sf-bento__media {
	width: 70%;
	height: calc(100% - 200px);
	right: 24px;
	top: 24px;
}

.sf-bento__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.4s ease;
}

.sf-bento__item--1 .sf-bento__img {
	mix-blend-mode: normal;
	border-radius: 20px;
}

.sf-bento__item:hover .sf-bento__img {
	transform: scale(1.04) rotate(-2deg);
}

.sf-bento__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
}

.sf-bento__name {
	font-family: var(--sf-display);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	font-size: clamp(34px, 3.6vw, 52px);
	overflow-wrap: anywhere;
}

.sf-bento__item--0 .sf-bento__name {
	font-size: clamp(45px, 6vw, 88px);
}

.sf-bento__count {
	font-size: 16px;
	font-weight: 500;
}

/* ---------- Sección oscura ---------- */

/* Los fondos de sección usan .kb-row-layout-wrap y --kb-row-bg porque Kadence
   imprime después .wp-block-kadence-rowlayout{background-color:var(--kb-row-bg)}. */

.sf-dark,
.kb-row-layout-wrap.sf-dark {
	--kb-row-bg: var(--sf-bosque);
	background: var(--sf-bosque);
	color: var(--sf-nieve);
}

.sf-dark .sf-title {
	color: var(--sf-nieve) !important;
}

.sf-fade,
.sf-title mark {
	background-image: linear-gradient(transparent 0, transparent 0.58em, var(--sf-naranja-profundo) 0.58em, var(--sf-naranja-profundo) calc(100% - 0.06em), transparent calc(100% - 0.06em));
	background-color: transparent;
	color: inherit;
	padding-inline: 0.06em;
}

/* ---------- Banda tipográfica ---------- */

.sf-band-row,
.kb-row-layout-wrap.sf-band-row {
	--kb-row-bg: var(--sf-durazno);
	background: var(--sf-durazno);
	position: relative;
	/* Fondo fijo sin imagen: la palabra queda fija en la pantalla y la banda funciona
	   como una ventana que la recorta (clip-path). Anda también en celulares,
	   donde background-attachment: fixed no funciona. */
	clip-path: inset(0);
}

.kb-row-layout-wrap.sf-band-row > .kt-row-column-wrap {
	padding: 0;
	max-width: none;
	height: clamp(240px, 32vw, 480px);
}

.sf-band {
	position: fixed;
	top: 50%;
	left: 0;
	right: 0;
	padding: 0 var(--sf-gutter);
	transform: translateY(-50%);
	line-height: 0;
	pointer-events: none;
}

.sf-band__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sf-band__svg text {
	font-family: var(--sf-display);
	font-weight: 900;
	font-size: 214px;
	fill: var(--sf-naranja);
}

/* Logo en la banda: alto calculado para que entre entero en la ventana entre las dos ondas. */
.sf-band__logo {
	display: block;
	width: 100%;
	height: calc(clamp(240px, 32vw, 480px) - var(--sf-wave-h) * 2.2);
	object-fit: contain;
	margin: 0;
}

/* ---------- Confianza ---------- */

.sf-trust,
.kb-row-layout-wrap.sf-trust {
	--kb-row-bg: var(--sf-naranja);
	background: var(--sf-naranja);
	color: var(--sf-tinta);
}

.kb-row-layout-wrap.sf-trust > .kt-row-column-wrap {
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

.sf-trust__lead {
	font-size: clamp(18px, 1.6vw, 22px);
	max-width: 34ch;
	margin: 0 0 32px;
}

.sf-feature-card {
	background: var(--sf-bosque);
	color: var(--sf-nieve);
	padding: clamp(27px, 4vw, 48px);
	box-shadow: var(--sf-shadow);
}

.sf-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-feature-list li {
	font-size: 18px;
	line-height: 1.45;
	padding: 22px 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sf-feature-list li:first-child {
	border-top: 0;
	padding-top: 0;
}

.sf-feature-list li:last-child {
	padding-bottom: 0;
}

.sf-feature-list strong {
	display: block;
	font-family: var(--sf-display);
	font-weight: 900;
	letter-spacing: -0.02em;
	font-size: 24px;
	margin-bottom: 4px;
	color: var(--sf-naranja-claro);
}

/* ---------- Productos (tienda, portada y relacionados) ---------- */

.woocommerce ul.products,
ul.products.content-wrap {
	column-gap: clamp(16px, 2vw, 28px) !important;
	row-gap: clamp(28px, 3vw, 44px) !important;
}

.woocommerce ul.products li.product {
	background: transparent;
	box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-image-link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	border-radius: 24px;
	overflow: hidden;
	background: var(--sf-nieve);
}

.woocommerce ul.products li.product .woocommerce-loop-image-link img,
.woocommerce ul.products li.product a img {
	aspect-ratio: 1;
	object-fit: contain;
	padding: 8%;
	margin: 0;
	transition: transform 0.35s ease;
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.04);
}

.sf-new ul.products li.product .woocommerce-loop-image-link,
.sf-new ul.products li.product a.woocommerce-LoopProduct-link,
.archive ul.products li.product .woocommerce-loop-image-link {
	background: var(--sf-pergamino);
}

.woocommerce ul.products li.product .product-details {
	padding: 16px 0 0;
	background: transparent;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sf-body);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.35;
	padding: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: inherit;
}

.woocommerce ul.products li.product .price {
	font-family: var(--sf-display);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.02em;
	color: inherit;
}

.sf-dark ul.products li.product .woocommerce-loop-product__title,
.sf-dark ul.products li.product .woocommerce-loop-product__title a,
.sf-dark ul.products li.product .price {
	color: var(--sf-nieve);
}

.woocommerce ul.products li.product .product-action-wrap .button,
.woocommerce ul.products li.product .button {
	background: var(--sf-naranja);
	color: var(--sf-nieve);
	border: 1px solid var(--sf-naranja);
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: none;
}

.woocommerce ul.products li.product .product-action-wrap .button:hover,
.woocommerce ul.products li.product .product-action-wrap .button:focus-visible,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible {
	background: var(--sf-tinta);
	color: var(--sf-nieve);
	border-color: var(--sf-tinta);
}

.sf-dark ul.products li.product .button,
.sf-dark .woocommerce ul.products li.product .product-action-wrap .button {
	background: var(--sf-naranja);
	color: var(--sf-nieve);
	border-color: var(--sf-naranja);
}

/* Sobre el verde, el negro se perdería: el hover pasa a blanco. */
.sf-dark ul.products li.product .button:hover,
.sf-dark .woocommerce ul.products li.product .product-action-wrap .button:hover {
	background: var(--sf-nieve);
	color: var(--sf-bosque);
	border-color: var(--sf-nieve);
}

.woocommerce span.onsale {
	background: var(--sf-naranja);
	color: var(--sf-tinta);
	border-radius: 1000px;
}

.single-product .product_title {
	font-size: clamp(36px, 4.4vw, 56px);
	line-height: 1.02;
}

.single-product .summary .price {
	font-family: var(--sf-display);
	font-weight: 800;
	color: var(--sf-naranja-profundo);
}

.single-product .woocommerce-product-gallery__image img {
	border-radius: 24px;
	background: var(--sf-pergamino);
}

.woocommerce .checkout-button,
.wc-block-components-button:not(.is-link) {
	background: var(--sf-naranja) !important;
	color: var(--sf-nieve) !important;
	border: 1px solid var(--sf-naranja) !important;
	border-radius: 1000px !important;
	padding: 14px 33px !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce .checkout-button:hover,
.woocommerce .checkout-button:focus-visible,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus-visible {
	background: var(--sf-tinta) !important;
	color: var(--sf-nieve) !important;
	border-color: var(--sf-tinta) !important;
}

/* ---------- Footer de Kadence ---------- */

.site-footer {
	font-size: 14px;
}

.site-footer .widget-title,
.site-footer h2.wp-block-heading {
	font-family: var(--sf-body);
	font-weight: 500;
	font-size: 14px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sf-corteza);
	margin-bottom: 14px;
}

.site-footer .sf-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

.site-footer .sf-footer-links li {
	margin: 0 0 10px;
}

.site-footer .sf-footer-links a {
	color: var(--sf-tinta);
	text-decoration: none;
}

.site-footer .sf-footer-links a:hover {
	text-decoration: underline;
}

.site-footer .sf-footer-lead {
	color: var(--sf-corteza);
	max-width: 36ch;
}

.site-footer .site-bottom-footer-wrap {
	border-top: 1px solid var(--sf-niebla);
}

/* ---------- Responsive ---------- */

/* ---------- Ajustes sobre Kadence ---------- */

/* El grupo de Gutenberg envuelve título y botón en un contenedor interno. */
.sf-head > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

/* El preset "outline" de Kadence pisa el color del texto del botón. */
.wp-block-kadence-advancedbtn .kb-button.sf-btn-snow {
	color: var(--sf-nieve) !important;
	border-color: var(--sf-nieve) !important;
}

.wp-block-kadence-advancedbtn .kb-button.sf-btn-snow:hover,
.wp-block-kadence-advancedbtn .kb-button.sf-btn-snow:focus-visible {
	background: var(--sf-nieve) !important;
	color: var(--sf-bosque) !important;
}

/* Las tarjetas de producto de Kadence son cajas blancas con sombra: las dejamos sin fondo. */
.woocommerce ul.products li.product.content-bg.loop-entry {
	background: transparent;
	box-shadow: none;
}

/* Kadence usa .content-style-unboxed .content-bg.loop-entry .content-bg:not(.loop-entry), más específico. */
.woocommerce ul.products li.product .entry-content-wrap {
	margin: 0;
	padding: 16px 0 0;
	background: transparent !important;
}

/* Kadence sube el texto 2rem al pasar el mouse y lo mete debajo de la foto.
   Dejamos el texto quieto y el botón siempre visible debajo del precio. */
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .entry-content-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .entry-content-wrap {
	transform: none;
}

.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap {
	position: static;
	opacity: 1;
	padding: 0;
	margin-top: 14px;
}

/* Tarjetas de igual alto: el botón queda siempre abajo, alineado entre tarjetas,
   y el nombre se corta en 3 líneas como máximo. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	overflow: visible;
}

.woocommerce ul.products li.product .entry-content-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap {
	margin-top: auto;
	padding-top: 14px;
}

/* ---------- Buscador del header ---------- */

.site-header .search-toggle-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--sf-tinta);
	border-radius: 1000px;
	background: transparent;
	color: var(--sf-tinta);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.site-header .search-toggle-open:hover,
.site-header .search-toggle-open:focus-visible {
	background: var(--sf-tinta);
	color: var(--sf-nieve);
}

.site-header .search-toggle-open .kadence-svg-iconset svg {
	width: 18px;
	height: 18px;
}

body #search-drawer .drawer-inner {
	background: rgba(28, 21, 18, 0.96);
}

body #search-drawer .drawer-content {
	max-width: 900px;
	margin-inline: auto;
	padding-inline: var(--sf-gutter);
}

body #search-drawer .search-field {
	font-family: var(--sf-display);
	font-size: clamp(28px, 5vw, 56px);
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--sf-nieve);
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--sf-naranja);
	border-radius: 0;
}

body #search-drawer .search-field::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

body #search-drawer .search-submit[type="submit"],
body #search-drawer .kadence-search-icon-wrap {
	color: var(--sf-naranja);
}

/* ---------- Formas orgánicas, ondas y curvas ----------
   Todo sale de pseudo-elementos, sin tocar el contenido. Las ondas son máscaras SVG
   pintadas con el color de la sección vecina, así se pueden usar los tokens. */

:root {
	--sf-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V42C1320 78 1180 96 1010 70C840 44 700 8 520 18C340 28 190 84 0 60Z'/%3E%3C/svg%3E");
	--sf-wave-h: clamp(36px, 6vw, 96px);
}

@keyframes sf-morph {
	0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
	50% { border-radius: 63% 37% 45% 55% / 55% 62% 38% 45%; }
	100% { border-radius: 38% 62% 56% 44% / 62% 38% 62% 38%; }
}

/* Kadence Blocks pone .kb-row-layout-wrap:before { display: table }, que deja en 0
   el ancho de una capa absoluta: las formas necesitan display: block. */
.kb-row-layout-wrap.sf-hero::before,
.kb-row-layout-wrap.sf-cats::before,
.kb-row-layout-wrap.sf-dark::before,
.kb-row-layout-wrap.sf-band-row::before,
.kb-row-layout-wrap.sf-new::before,
.kb-row-layout-wrap.sf-trust::before {
	display: block;
	clear: none;
}

/* El contenido de cada sección va por encima de las formas. */
.kb-row-layout-wrap.sf-hero > .kt-row-column-wrap,
.kb-row-layout-wrap.sf-cats > .kt-row-column-wrap,
.kb-row-layout-wrap.sf-dark > .kt-row-column-wrap,
.kb-row-layout-wrap.sf-new > .kt-row-column-wrap,
.kb-row-layout-wrap.sf-trust > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

.kb-row-layout-wrap.sf-cats,
.kb-row-layout-wrap.sf-dark,
.kb-row-layout-wrap.sf-new,
.kb-row-layout-wrap.sf-trust {
	position: relative;
	overflow: clip;
}

/* Hero: mancha durazno que cambia de forma detrás de la imagen y un aro naranja. */
.sf-hero::after {
	content: "";
	position: absolute;
	left: 34%;
	bottom: clamp(-150px, -9vw, -90px);
	width: clamp(140px, 16vw, 240px);
	aspect-ratio: 1;
	border: clamp(18px, 2.2vw, 32px) solid var(--sf-naranja-claro);
	border-radius: 50%;
	transform: translate3d(0, calc(var(--sf-p) * -80px), 0);
	pointer-events: none;
}

/* Categorías: arco grande que asoma por la derecha. */
.kb-row-layout-wrap.sf-cats::before {
	content: "";
	position: absolute;
	right: clamp(-220px, -12vw, -120px);
	top: 18%;
	width: clamp(240px, 26vw, 420px);
	aspect-ratio: 1;
	border: clamp(24px, 3vw, 44px) solid var(--sf-durazno);
	border-radius: 50%;
	pointer-events: none;
}

/* Lo más buscado: entra y sale con ondas. */
.kb-row-layout-wrap.sf-dark::before,
.kb-row-layout-wrap.sf-dark::after,
.kb-row-layout-wrap.sf-new::after,
.kb-row-layout-wrap.sf-trust::before,
.kb-row-layout-wrap.sf-trust::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--sf-wave-h);
	-webkit-mask: var(--sf-wave) center / 100% 100% no-repeat;
	mask: var(--sf-wave) center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 2;
}

.kb-row-layout-wrap.sf-dark::before {
	top: -4px;
	background: var(--sf-nieve);
}

.kb-row-layout-wrap.sf-dark > .kt-row-column-wrap {
	padding-top: calc(var(--sf-section) + var(--sf-wave-h) * 0.6);
}

/* La onda de salida de "Lo más buscado" cuelga sobre la banda, en verde, para que el logo
   fijo se recorte siguiendo la onda. Va por encima de la banda (no dentro) para que el borde
   del recorte quede tapado y no asomen restos del logo. */
.kb-row-layout-wrap.sf-dark {
	overflow-x: clip;
	overflow-y: visible;
}

.kb-row-layout-wrap.sf-dark::after {
	top: calc(100% - 4px);
	height: calc(var(--sf-wave-h) + 4px);
	background: var(--sf-bosque);
	z-index: 3;
}

/* Salida de la banda: la onda blanca la dibuja Recién llegados por encima de la banda.
   Si va dentro de la banda, el borde del recorte deja asomar una línea de las letras. */
.kb-row-layout-wrap.sf-new {
	overflow-x: clip;
	overflow-y: visible;
}

.kb-row-layout-wrap.sf-new::after {
	top: calc(var(--sf-wave-h) * -1);
	height: calc(var(--sf-wave-h) + 4px);
	background: var(--sf-nieve);
	transform: scaleY(-1);
	z-index: 3;
}

/* Recién llegados: mancha suave que asoma por la izquierda. */
.kb-row-layout-wrap.sf-new::before {
	content: "";
	position: absolute;
	left: clamp(-260px, -14vw, -120px);
	top: clamp(24px, 4vw, 64px);
	width: clamp(260px, 30vw, 460px);
	aspect-ratio: 1;
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	background: var(--sf-durazno);
	animation: sf-morph 16s ease-in-out infinite alternate;
	pointer-events: none;
}

/* Confianza: ondas arriba y abajo y una mancha naranja clara detrás de la tarjeta. */
.sf-trust,
.kb-row-layout-wrap.sf-trust {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cpath fill='%23E5893E' d='M44.7-61.2C57.6-51.8 67.3-38.3 72.7-23C78-7.7 79 9.4 73.4 23.9C67.9 38.4 55.8 50.3 42 59.6C28.1 68.9 12.5 75.7-3.4 80.4C-19.3 85.1-35.5 87.7-47.6 80.2C-59.7 72.7-67.8 55-73.4 37.4C-79 19.8-82.2 2.2-78.1-13.2C-74.1-28.6-62.8-41.8-49.6-51.1C-36.3-60.4-21.2-65.8-5.8-62.9C9.6-60 31.8-70.6 44.7-61.2Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right -6vw center;
	background-size: min(62vw, 860px) auto;
}

.kb-row-layout-wrap.sf-trust::before {
	top: -4px;
	background: var(--sf-nieve);
}

.kb-row-layout-wrap.sf-trust::after {
	bottom: -4px;
	background: var(--sf-nieve);
	transform: scale(-1, -1);
}

.kb-row-layout-wrap.sf-trust > .kt-row-column-wrap {
	padding-top: calc(var(--sf-section) + var(--sf-wave-h) * 0.6);
	padding-bottom: calc(var(--sf-section) + var(--sf-wave-h) * 0.6);
}

/* La tarjeta de confianza con una esquina distinta, más orgánica. */
.sf-feature-card {
	border-radius: 48px 48px 48px 10px;
}


/* ---------- Producto individual ---------- */

/* Botón de compra en naranja, con el texto centrado en el alto del campo de cantidad. */
.single-product div.product form.cart .single_add_to_cart_button.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 36px !important;
	line-height: 1 !important;
	background: var(--sf-naranja) !important;
	color: var(--sf-nieve) !important;
	border: 1px solid var(--sf-naranja) !important;
	border-radius: 1000px !important;
	font-family: var(--sf-body);
	font-weight: 600;
	font-size: 16px;
}

.single-product div.product form.cart .single_add_to_cart_button.button:hover,
.single-product div.product form.cart .single_add_to_cart_button.button:focus-visible {
	background: var(--sf-tinta) !important;
	color: var(--sf-nieve) !important;
	border-color: var(--sf-tinta) !important;
}

/* ---------- Selector de cantidad con − y + (assets/qty.js) ---------- */

.woocommerce .quantity.sf-qty {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	float: none;
	margin: 0;
}

.woocommerce .quantity.sf-qty input.qty,
.single-product div.product form.cart .quantity.sf-qty input.qty {
	width: 40px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font-family: var(--sf-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--sf-tinta);
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.woocommerce .quantity.sf-qty .sf-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--sf-naranja-profundo) !important;
	color: var(--sf-nieve) !important;
	box-shadow: none !important;
	font-family: var(--sf-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.woocommerce .quantity.sf-qty .sf-qty__btn:hover,
.woocommerce .quantity.sf-qty .sf-qty__btn:focus-visible {
	background: var(--sf-naranja) !important;
}

.woocommerce .quantity.sf-qty .sf-qty__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.sf-dark .woocommerce .quantity.sf-qty input.qty,
.sf-dark .quantity.sf-qty input.qty {
	color: var(--sf-nieve);
}

.single-product div.product form.cart:not(.variations_form):not(.grouped_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.single-product div.product form.cart .single_add_to_cart_button.button {
	margin: 0;
}

/* El clearfix de WooCommerce cuenta como un hueco más dentro del flex. */
.single-product div.product form.cart:not(.variations_form):not(.grouped_form)::before,
.single-product div.product form.cart:not(.variations_form):not(.grouped_form)::after {
	display: none;
}

/* En las cards: cantidad arriba, botón abajo. */
.woocommerce ul.products li.product .sf-loop-cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* SKU y categoría con el mismo naranja del precio. */
.single-product div.product .product_meta,
.single-product div.product .product_meta a {
	color: var(--sf-naranja-profundo);
	font-size: 14px;
	font-weight: 500;
	opacity: 1;
}

.single-product div.product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

/* Kadence pinta cada línea del meta con palette6 al 70%: se pisa con el naranja del precio. */
.woocommerce.single-product div.product .product_meta > span,
.single-product div.product .product_meta > span,
.single-product div.product .product_meta > span a {
	color: var(--sf-naranja-profundo);
	font-size: 14px;
	font-weight: 500;
}

/* ---------- Footer con onda (tienda, categorías y producto) ---------- */

/* El logo tiene la palabra "SEX" en oscuro: sobre el verde va dentro de una pastilla clara. */
body:not(.home) .site-footer .footer-widget1 img {
	box-sizing: content-box;
	padding: 10px 16px;
	background: var(--sf-nieve);
	border-radius: 18px;
}


body:not(.home) .site-footer {
	position: relative;
	margin-top: calc(var(--sf-wave-h) + clamp(40px, 6vw, 80px));
	background: var(--sf-bosque);
	color: rgba(255, 255, 255, 0.78);
}

body:not(.home) .site-footer::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--sf-wave-h) * -1 + 1px);
	height: var(--sf-wave-h);
	background: var(--sf-bosque);
	-webkit-mask: var(--sf-wave) center / 100% 100% no-repeat;
	mask: var(--sf-wave) center / 100% 100% no-repeat;
	transform: scaleY(-1);
	pointer-events: none;
}

body:not(.home) .site-footer .widget-title,
body:not(.home) .site-footer h2.wp-block-heading {
	color: var(--sf-durazno);
}

body:not(.home) .site-footer .sf-footer-lead {
	color: rgba(255, 255, 255, 0.78);
}

body:not(.home) .site-footer .sf-footer-links a,
body:not(.home) .site-footer a {
	color: var(--sf-nieve);
}

body:not(.home) .site-footer .sf-footer-links a:hover,
body:not(.home) .site-footer a:hover {
	color: var(--sf-naranja-claro);
}

body:not(.home) .site-footer .site-bottom-footer-wrap {
	border-top-color: rgba(255, 255, 255, 0.16);
}

/* ---------- Botón de la sección de discreción ---------- */

/* Kadence pinta el texto del botón con el naranja de la paleta: sobre el fondo naranja desaparecía. */
.sf-trust .sf-btn-ink.kb-button,
.sf-trust .sf-btn-ink .kb-button {
	background: var(--sf-tinta) !important;
	color: var(--sf-nieve) !important;
	border-color: var(--sf-tinta) !important;
}

.sf-trust .sf-btn-ink.kb-button:hover,
.sf-trust .sf-btn-ink.kb-button:focus-visible,
.sf-trust .sf-btn-ink .kb-button:hover {
	background: var(--sf-nieve) !important;
	color: var(--sf-tinta) !important;
	border-color: var(--sf-nieve) !important;
}

/* ---------- Carrito y checkout (bloques de WooCommerce) ---------- */

.wc-block-components-quantity-selector {
	border-radius: 1000px;
}

.wc-block-components-quantity-selector::after {
	border-radius: 1000px;
}

.wc-block-checkout .wc-block-components-text-input input[type],
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__container,
.wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	border: 1px solid var(--sf-niebla);
	border-radius: 1000px;
	background: var(--sf-nieve);
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* WooCommerce carga su CSS después del tema: sin !important el texto quedaba corrido respecto de la etiqueta. */
.wc-block-checkout .wc-block-components-text-input input[type],
.wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
	padding: 0;
}

.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	padding-left: 20px !important;
	padding-right: 44px !important;
	border: 0;
	background: transparent;
}

.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__expand {
	right: 18px;
}

.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__label,
.wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control label {
	left: 0 !important;
	margin-left: 21px !important;
}

.wc-block-checkout .wc-block-components-text-input input[type]:focus,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__container:focus-within,
.wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input:focus {
	border-color: var(--sf-naranja);
	box-shadow: 0 0 0 3px rgba(205, 100, 55, 0.18);
	outline: none;
}

.wc-block-checkout .wc-block-components-textarea,
.wc-block-checkout textarea {
	border: 1px solid var(--sf-niebla);
	border-radius: 24px;
	padding: 16px 22px;
	background: var(--sf-nieve);
}

.wc-block-checkout .wc-block-components-checkout-step__title,
.wc-block-checkout .wc-block-components-title {
	font-family: var(--sf-display);
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Resumen del pedido en una tarjeta redondeada, como el ejemplo. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--sf-niebla);
	border-radius: 24px;
	background: var(--sf-nieve);
	overflow: hidden;
}

/* Medios de pago sobre un recuadro durazno. */
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control,
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-checkout__no-payment-methods-notice {
	border-radius: 24px;
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	background: var(--sf-durazno);
	border: 0;
	box-shadow: none;
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: 24px;
	box-shadow: inset 0 0 0 2px var(--sf-naranja);
}

.wc-block-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--sf-naranja);
}

.wc-block-checkout .wc-block-components-radio-control__input:checked::before {
	background: var(--sf-naranja);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--sf-naranja);
	border-color: var(--sf-naranja);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked + .wc-block-components-checkbox__mark {
	fill: var(--sf-nieve);
}

/* Botón de realizar el pedido: grande, con sombra suave. */
.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link) {
	min-height: 64px;
	font-size: 18px;
	font-weight: 600;
	box-shadow: 0 14px 30px -12px rgba(205, 100, 55, 0.7) !important;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):focus-visible {
	box-shadow: 0 14px 30px -12px rgba(28, 21, 18, 0.6) !important;
}

@media (max-width: 767px) {
	.kb-row-layout-wrap.sf-hero > .kt-row-column-wrap {
		min-height: 0;
	}

	.sf-hero .sf-hero__media {
		order: -1;
	}

	.sf-tilt {
		width: min(440px, 92vw);
	}

	.sf-hero__title {
		font-size: clamp(48px, 14vw, 72px) !important;
	}

	.sf-bento {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.sf-bento__item--0 {
		grid-row: auto;
		min-height: 360px;
	}

	.sf-title {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-hero,
	.sf-hero * {
		--sf-p: 0 !important;
	}

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}