/*
Theme Name: MATCH-A! Theme
Theme URI: https://matcha-theme.local
Author: Rodrigo
Description: Custom theme for the MATCH-A! matcha tea brand.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matcha-theme
Tags: custom-colors, custom-fonts, e-commerce
*/


/* =============================================
   Modern CSS Reset
   ============================================= */

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

* {
	margin: 0;
	padding: 0;
}

body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}


/* =============================================
   Layout
   ============================================= */

.site-content {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1.25rem;
}

.site-content--wide {
	max-width: 1280px;
}

.site-content--full {
	max-width: none;
	padding: 0;
}


/* =============================================
   Header
   ============================================= */

.site-header {
	background-color: var(--wp--preset--color--blanco);
	padding: 1rem 1.25rem;
}

/* Transparent header overlay for specific pages */
.has-transparent-header .site-header {
	background-color: transparent;
	position: relative;
	z-index: 10;
	margin-bottom: -70px;
}

.has-transparent-header--light .site-logo,
.has-transparent-header--light .main-navigation a,
.has-transparent-header--light .site-header__cart,
.has-transparent-header--light .site-logo:hover,
.has-transparent-header--light .main-navigation a:hover,
.has-transparent-header--light .site-header__cart:hover {
	color: var(--wp--preset--color--blanco);
}

.site-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.site-logo {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--verde);
	text-decoration: none;
}

.site-logo:hover {
	color: var(--wp--preset--color--verde);
}

.site-logo__svg {
	width: clamp(150px, 17vw, 218px);
	height: auto;
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: 38px;
}


/* =============================================
   Navigation
   ============================================= */

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 38px;
}

.main-navigation a {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17.68px;
	font-weight: 400;
	color: var(--wp--preset--color--verde);
	text-decoration: none;
	transition: color 0.3s;
}

.main-navigation a:hover {
	color: var(--wp--preset--color--negro);
}

/* Dropdown */
.menu-item-has-children {
	position: relative;
}

.menu-item-has-children .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -1rem;
	background: var(--wp--preset--color--blanco);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 0.75rem 0;
	min-width: 180px;
	flex-direction: column;
	gap: 0;
	z-index: 100;
}

.menu-item-has-children:hover .sub-menu {
	display: flex;
}

.menu-item-has-children .sub-menu li {
	list-style: none;
}

.menu-item-has-children .sub-menu a {
	display: block;
	padding: 0.4rem 1.25rem;
	font-size: 15px;
	white-space: nowrap;
}

.menu-item-has-children .sub-menu a:hover {
	background-color: var(--wp--preset--color--gris-claro);
}


/* =============================================
   Mobile Menu
   ============================================= */

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	flex-direction: column;
	gap: 5px;
}

.menu-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--wp--preset--color--verde);
	transition: transform 0.3s, opacity 0.3s;
}

/* Hamburger → X transform */
.main-navigation.toggled .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.main-navigation.toggled .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.main-navigation.toggled .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
	.menu-toggle {
		display: flex;
	}

	.main-navigation ul {
		display: none;
	}

	.main-navigation.toggled {
		position: static;
	}

	.main-navigation.toggled ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2rem;
		position: fixed;
		inset: 0;
		background: var(--wp--preset--color--blanco);
		z-index: 998;
	}

	.main-navigation.toggled .menu-toggle {
		position: fixed;
		top: 1rem;
		right: 1.25rem;
		z-index: 999;
	}

	.main-navigation.toggled a {
		font-size: 1.5rem;
	}

	body.menu-open {
		overflow: hidden;
	}

	.menu-item-has-children .sub-menu {
		position: static;
		box-shadow: none;
		padding: 0;
		min-width: 0;
		background: none;
		border-radius: 0;
		gap: 0.75rem;
		margin-top: 0.75rem;
	}

	.menu-item-has-children .sub-menu a {
		padding: 0;
		font-size: 1.25rem;
	}

	.menu-item-has-children .sub-menu a:hover {
		background: none;
	}

	.main-navigation.toggled .menu-item-has-children .sub-menu {
		display: flex;
	}
}


/* =============================================
   Cart Icon
   ============================================= */

.site-header__cart {
	color: var(--wp--preset--color--verde);
	text-decoration: none;
	position: relative;
	display: flex;
	align-items: center;
}

.site-header__cart:hover {
	color: var(--wp--preset--color--negro);
}

.site-header__cart-count {
	position: absolute;
	top: -8px;
	right: -8px;
	background: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--blanco);
	font-size: 0.7rem;
	font-weight: 700;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Legacy WooCommerce mini-cart block */
.wc-block-mini-cart__button {
	color: var(--wp--preset--color--verde);
}


/* =============================================
   Footer
   ============================================= */

.site-footer {
	color: var(--wp--preset--color--blanco);
	margin-top: auto;
}

/* Wave decoration */
.site-footer__wave {
	line-height: 0;
	margin-bottom: -1px;
}

.site-footer__wave svg {
	display: block;
	width: 100%;
	height: clamp(60px, 8vw, 120px);
}

/* Footer body */
.site-footer__body {
	background-color: var(--wp--preset--color--verde);
	padding: 3rem 1.25rem 2rem;
}

.site-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* Footer logo (rosa) */
.site-footer__logo {
	margin-bottom: 2.5rem;
	color: var(--wp--preset--color--rosa);
}

.site-footer__logo svg {
	width: clamp(200px, 26vw, 332px);
	height: auto;
}

/* Link columns */
.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-bottom: 3rem;
	max-width: 800px;
}

.site-footer__col h3 {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 25px;
	font-weight: 600;
	color: var(--wp--preset--color--blanco);
	margin: 0 0 1rem;
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.site-footer__col a {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
	transition: opacity 0.3s;
}

.site-footer__col a:hover {
	opacity: 0.75;
}

/* Bottom row */
.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 2rem;
}

.site-footer__copyright {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 22px;
	font-weight: 400;
	margin: 0;
}

/* Social icons */
.site-footer__social {
	display: flex;
	gap: 12px;
}

.site-footer__social a {
	display: flex;
	color: var(--wp--preset--color--blanco);
	transition: opacity 0.3s;
}

.site-footer__social a:hover {
	opacity: 0.75;
}

.site-footer__social svg {
	width: 36px;
	height: 36px;
}

/* Footer responsive */
@media (max-width: 768px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.site-footer__col h3 {
		font-size: 20px;
	}

	.site-footer__col a {
		font-size: 16px;
	}

	.site-footer__bottom {
		flex-direction: column;
		gap: 1.5rem;
		text-align: center;
	}

	.site-footer__copyright {
		font-size: 18px;
	}

	.site-footer__social {
		justify-content: center;
	}
}


/* =============================================
   Content & Entry Styles
   ============================================= */

.entry-title {
	color: var(--wp--preset--color--negro);
}

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

.entry-title a:hover {
	color: var(--wp--preset--color--verde);
}

.entry-date {
	display: block;
	margin-bottom: 1.5rem;
	color: #777;
	font-size: var(--wp--preset--font-size--small);
}

.entry-content {
	margin-top: 1.5rem;
}

.pagination {
	margin-top: 2rem;
}


/* =============================================
   Buttons
   ============================================= */

.btn,
button.btn,
a.btn {
	display: inline-block;
	background-color: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--blanco);
	border: none;
	border-radius: 40px;
	padding: 0.75rem 2rem;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s;
}

.btn:hover {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}


/* =============================================
   404 Page
   ============================================= */

.error-404 {
	text-align: center;
	padding: 4rem 0;
}

.error-404 h1 {
	margin-bottom: 1rem;
}

.error-404 p {
	margin-bottom: 2rem;
}


/* =============================================
   Hero Carousel
   ============================================= */

.hero-carousel {
	position: relative;
	width: 100%;
	min-height: 586px;
	overflow: hidden;
}

.hero-slide {
	position: absolute;
	inset: 0;
	display: none;
	z-index: 0;
}

.hero-slide.active {
	display: block;
	z-index: 1;
}

.hero-slide.fade-in {
	display: block;
	animation: heroFadeIn 0.8s ease forwards;
}

.hero-slide.fade-out {
	display: block;
	animation: heroFadeOut 0.8s ease forwards;
}

@keyframes heroFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes heroFadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

.hero-slide__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slide__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--negro);
	opacity: 0.4;
	z-index: 1;
}

.hero-slide__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 586px;
	padding: 2rem 1.25rem;
	gap: 0.75rem;
}

.hero-slide__subtitle {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-weight: 600;
	font-style: italic;
	font-size: 23px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--crema);
	margin: 0;
}

.hero-slide__subtitle--bottom {
	font-weight: 400;
	font-size: 1.125rem;
	text-transform: none;
	letter-spacing: normal;
}

.hero-slide__heading {
	font-family: var(--wp--preset--font-family--salks-bold);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--crema);
	line-height: 1.1;
	margin: 0;
}

.hero-slide__heading span {
	display:  flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.hero-slide__heading span img {
	display: inline-flex;
	height: 0.75em;
	width: auto;
	margin-left: 8px;
}

.hero-slide__cta {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.6rem 1.8rem;
	border: 2px solid var(--wp--preset--color--crema);
	border-radius: 40px;
	color: var(--wp--preset--color--crema);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

.hero-slide__cta:hover {
	background-color: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--negro);
}

/* Dots pagination */
.hero-dots {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 0.625rem;
}

.hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--crema);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.3s;
}

.hero-dot.active {
	background-color: var(--wp--preset--color--crema);
}

/* Hero Responsive */
@media (max-width: 768px) {
	.hero-carousel,
	.hero-slide__content {
		min-height: 420px;
	}

	.hero-slide__subtitle {
		font-size: 16px;
	}

	.hero-slide__subtitle--bottom {
		font-size: 1rem;
	}
}


/* =============================================
   Shared Section Styles
   ============================================= */

.section-title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: clamp(28px, 3vw, 35px);
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	margin: 0 0 2rem;
}

.section-title--center {
	text-align: center;
}

/* Outline button (used across sections) */
.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 50px;
	border: 1px solid var(--wp--preset--color--negro);
	border-radius: 40px;
	background: none;
	color: var(--wp--preset--color--negro);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.btn-outline:hover {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

.btn-outline--light {
	border-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--blanco);
}

.btn-outline--light:hover {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--negro);
}


/* =============================================
   Products Section
   ============================================= */

.section-products {
	padding: 4rem 1.25rem;
}

.section-products__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.product-card {
	background-color: var(--wp--preset--color--gris-claro);
	border-radius: 22px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
}

.product-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 238 / 209;
	border-radius: 22px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.product-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
	border-radius: 22px;
}

.product-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 1;
}

.product-card__name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 23px;
	font-weight: 600;
	color: var(--wp--preset--color--negro);
	margin: 0 0 0.25rem;
}

.product-card__desc {
	font-size: 18px;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1rem;
	line-height: 21px;
}

.section-products__cta {
	text-align: center;
}

@media (max-width: 900px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.product-grid {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* =============================================
   About Section (Qué es el matcha)
   ============================================= */

.section-about {
	padding: 4rem 1.25rem;
}

.section-about__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.section-about__text p {
	font-size: 20px;
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

.section-about__text .btn-outline {
	margin-top: 0.5rem;
}

.section-about__image img {
	width: 100%;
	height: auto;
	border-radius: 15px;
	object-fit: cover;
}

@media (max-width: 768px) {
	.section-about__inner {
		grid-template-columns: 1fr;
	}

	.section-about__image {
		order: -1;
	}

	.section-about__text p {
		font-size: 18px;
	}
}


/* =============================================
   Features Section (Nuestro Match-a!)
   ============================================= */

.section-features {
	position: relative;
}

.section-features__wave {
	line-height: 0;
}

.section-features__wave--top {
	margin-bottom: -1px;
}

.section-features__wave--bottom {
	margin-top: -1px;
}

.section-features__wave svg {
	display: block;
	width: 100%;
	height: clamp(30px, 4vw, 60px);
}

.section-features__body {
	background-color: var(--wp--preset--color--rosa);
	padding: 3rem 1.25rem;
}

.section-features__inner {
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
}

.section-features__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: clamp(28px, 3vw, 35px);
	font-weight: 600;
	color: var(--wp--preset--color--blanco);
	margin: 0 0 2.5rem;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.feature-item__heading {
	font-family: var(--wp--preset--font-family--salks-bold);
	font-size: clamp(24px, 3vw, 35px);
	font-weight: 400;
	color: var(--wp--preset--color--blanco);
	margin: 0 0 0.75rem;
}

.feature-item p {
	font-size: 20px;
	color: var(--wp--preset--color--blanco);
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	.feature-item p {
		font-size: 16px;
	}
}

@media (max-width: 500px) {
	.features-grid {
		grid-template-columns: 1fr;
	}
}


/* =============================================
   FAQ Section
   ============================================= */

.section-faq {
	padding: 4rem 1.25rem;
}

.section-faq__inner {
	max-width: 560px;
	margin: 0 auto;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.faq-item {
	border-bottom: 1px solid var(--wp--preset--color--verde);
	padding-bottom: 1.5rem;
}

.faq-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	cursor: pointer;
	list-style: none;
	padding: 0.5rem 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 600;
	color: var(--wp--preset--color--verde);
}

.faq-item__trigger::-webkit-details-marker {
	display: none;
}

.faq-item__icon {
	flex-shrink: 0;
	transition: transform 0.3s;
}

.faq-item[open] .faq-item__icon {
	transform: rotate(45deg);
}

.faq-item__content {
	padding-top: 1rem;
}

.faq-item__content p {
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
	color: var(--wp--preset--color--negro);
}


/* =============================================
   Match-a Club Section
   ============================================= */

.section-club {
	position: relative;
}

.section-club__wave {
	line-height: 0;
}

.section-club__wave--top {
	margin-bottom: -1px;
}

.section-club__wave--bottom {
	margin-top: -1px;
}

.section-club__wave svg {
	display: block;
	width: 100%;
	height: clamp(30px, 4vw, 60px);
}

.section-club__body {
	background-color: var(--wp--preset--color--verde);
	padding: 4rem 1.25rem;
}

.section-club__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.section-club__image img {
	width: 100%;
	max-width: 550px;
	height: auto;
	transform: rotate(12deg);
}

.section-club__text {
	color: var(--wp--preset--color--blanco);
}

.section-club__logo {
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
}

.section-club__logo-main {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

.section-club__logo-sub {
	font-family: var(--wp--preset--font-family--salks-bold);
	font-size: clamp(40px, 5vw, 65px);
	font-weight: 400;
	line-height: 0.9;
	margin-top: -0.55em;
	margin-left: 38%;
}

.section-club__text p {
	font-size: 20px;
	line-height: 1.6;
	margin: 0 0 1.5rem;
	max-width: 390px;
}

@media (max-width: 768px) {
	.section-club__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.section-club__image img {
		transform: rotate(0);
		max-width: 400px;
		margin: 0 auto;
		display: block;
	}

	.section-club__text p {
		margin-left: auto;
		margin-right: auto;
	}

	.section-club__logo {
		align-items: center;
	}
}


/* =============================================
   Reviews Section
   ============================================= */

.section-reviews {
	padding: 4rem 1.25rem;
}

.section-reviews__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.review-card__image {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 16px;
	border: 1.5px solid var(--wp--preset--color--verde);
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.review-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.review-card__stars {
	color: var(--wp--preset--color--verde);
	font-size: 18px;
	letter-spacing: 2px;
	margin-bottom: 0.5rem;
}

.review-card__name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 25px;
	font-weight: 500;
	color: var(--wp--preset--color--verde);
	margin: 0 0 0.5rem;
}

.review-card__quote {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.4;
	margin: 0;
	color: var(--wp--preset--color--negro);
}

@media (max-width: 900px) {
	.reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.reviews-grid {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==================================================
   SOBRE NOSOTROS PAGE
   ================================================== */

/* --- Hero --- */
.about-hero {
	position: relative;
	height: 520px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
}

.about-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--wp--preset--color--blanco);
	padding: 0 2rem;
}

.about-hero__breadcrumb {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	margin-bottom: 2rem;
}

.about-hero__breadcrumb a {
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
}

.about-hero__breadcrumb span {
	font-weight: 500;
}

.about-hero__heading {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 66px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	color: var(--wp--preset--color--blanco);
}

/* --- Nosotros y nuestra esencia --- */
.about-essence {
	padding: 5rem 2rem;
}

.about-essence__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 467px 1fr;
	gap: 4rem;
	align-items: start;
}

.about-essence__image img {
	width: 100%;
	height: 638px;
	object-fit: cover;
	border-radius: 15px;
	display: block;
}

.about-essence__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1.5rem;
}

.about-essence__text p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1.2rem;
}

/* --- Eco icons banner --- */
.about-eco {
	position: relative;
}

.about-eco__wave {
	display: block;
	width: 100%;
	line-height: 0;
	position: relative;
	z-index: 1;
}

.about-eco__wave svg {
	width: 100%;
	height: auto;
	display: block;
}

.about-eco__wave--top {
	margin-bottom: -1px;
}

.about-eco__wave--bottom {
	margin-top: -1px;
}

.about-eco__body {
	background: rgba(166, 168, 83, 0.41);
	padding: 2.5rem 2rem;
}

.about-eco__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	text-align: center;
}

.about-eco__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.about-eco__item img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.about-eco__item span {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 25px;
	font-weight: 500;
	color: var(--wp--preset--color--verde);
}

/* --- Nuestros valores --- */
.about-valores {
	padding: 4rem 2rem 5rem;
}

.about-valores__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.valores-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin-top: 2.5rem;
}

.valor-item__leaf {
	display: block;
	width: 22px;
	height: 20px;
	margin-bottom: 0;
	transform: rotate(-25deg);
}

.valor-item__heading {
	font-family: var(--wp--preset--font-family--salks-bold);
	font-size: 26px;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1rem;
	line-height: 1.1;
}

.valor-item p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

/* --- Sobre Nosotros responsive --- */
@media (max-width: 900px) {
	.about-hero__heading {
		font-size: 42px;
	}

	.about-essence__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.about-essence__image img {
		height: 400px;
		max-width: 467px;
	}

	.about-eco__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.valores-grid {
		grid-template-columns: 1fr;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 500px) {
	.about-hero {
		height: 380px;
	}

	.about-hero__heading {
		font-size: 32px;
	}

	.about-eco__inner {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	.about-eco__item span {
		font-size: 18px;
	}

	.about-essence__title {
		font-size: 28px;
	}
}

/* ==================================================
   MÁS VENDIDOS / CATALOG PAGE
   ================================================== */

/* --- Catalog header --- */
.catalog-header {
	padding: 7rem 2rem 0;
}

.catalog-header__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.catalog-header__breadcrumb {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1.5rem;
}

.catalog-header__breadcrumb a {
	color: var(--wp--preset--color--negro);
	text-decoration: none;
}

.catalog-header__breadcrumb span {
	font-weight: 500;
}

.catalog-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.catalog-header__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 50px;
	font-weight: 600;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

.catalog-header__filter {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.catalog-header__filter-label {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	color: var(--wp--preset--color--negro);
}

.catalog-header__select {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	color: var(--wp--preset--color--verde);
	border: 1.5px solid var(--wp--preset--color--verde);
	border-radius: 50px;
	padding: 0.4rem 2rem 0.4rem 1.2rem;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%233b5935' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.8rem center;
	appearance: none;
	cursor: pointer;
}

/* --- Product grid --- */
.catalog-products {
	padding: 2.5rem 2rem 5rem;
}

.catalog-products__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.catalog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

/* --- Catalog card --- */
.catalog-card {
	background: var(--wp--preset--color--gris-claro);
	border-radius: 20px;
	overflow: hidden;
}

.catalog-card__image {
	position: relative;
	height: 324px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.catalog-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.catalog-card__photo {
	position: relative;
	z-index: 1;
    width: 450px;
	object-fit: contain;
}

.catalog-card__body {
	padding: 1.2rem 1.2rem 1.5rem;
}

.catalog-card__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.catalog-card__name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 25px;
	font-weight: 600;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

.catalog-card__stars {
	display: flex;
	gap: 4px;
}

.catalog-card__stars svg {
	width: 24px;
	height: 23px;
}

.catalog-card__desc {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1rem;
}

/* --- Catalog responsive --- */
@media (max-width: 768px) {
	.catalog-header__title {
		font-size: 36px;
	}

	.catalog-header__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.catalog-grid {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin: 0 auto;
	}
}

@media (max-width: 500px) {
	.catalog-header__title {
		font-size: 28px;
	}

	.catalog-card__image {
		height: 240px;
	}

	.catalog-card__name {
		font-size: 20px;
	}

	.catalog-card__desc {
		font-size: 16px;
	}
}

/* ==================================================
   MATCH-A CLUB PAGE
   ================================================== */

/* --- Club hero --- */
.club-hero {
	position: relative;
	height: 660px;
	overflow: hidden;
}

.club-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.club-hero__content {
	position: relative;
	z-index: 1;
	padding: 14rem 5rem 0;
}

.club-hero__breadcrumb {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	color: var(--wp--preset--color--blanco);
	margin: 0 0 1rem;
}

.club-hero__breadcrumb a {
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
}

.club-hero__breadcrumb span {
	font-weight: 500;
}

.club-hero__heading {
	font-family: var(--wp--preset--font-family--sloop-script);
	font-size: 160px;
	font-weight: 400;
	color: var(--wp--preset--color--blanco);
	margin: 6rem 0 0 0;
	opacity: 1;
	line-height: 0.9;
}

.club-hero__round {
	position: absolute;
	z-index: 2;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	object-fit: cover;
	right: 15%;
	bottom: 15%;
	box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.29);
}

.club-hero__wave {
	position: absolute;
	z-index: 3;
	bottom: -1px;
	left: 0;
	width: 100%;
	line-height: 0;
}

.club-hero__wave svg {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Unite section --- */
.club-unite {
	padding: 4rem 2rem;
}

.club-unite__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 349px;
	gap: 4rem;
	align-items: start;
}

.club-unite__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1.5rem;
}

.club-unite__text p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1.2rem;
}

.club-unite__image img {
	width: 100%;
	height: 429px;
	object-fit: cover;
	border-radius: 15px;
	display: block;
}

/* --- Benefits section (rosa) --- */
.club-benefits {
	position: relative;
	overflow: hidden;
}

.club-benefits__wave {
	line-height: 0;
}

.club-benefits__wave svg {
	display: block;
	width: 100%;
	height: clamp(30px, 4vw, 60px);
}

.club-benefits__wave--top {
	margin-bottom: -1px;
}

.club-benefits__wave--bottom {
	margin-top: -1px;
}

.club-benefits__rosa {
	position: relative;
	background: rgba(255, 206, 224, 0.60);
	padding: 4rem 2rem 5rem;
	overflow: hidden;
}

.club-benefits__inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	margin: 0 auto;
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

.benefit-card {
	border: 1px solid var(--wp--preset--color--verde);
	border-radius: 25px;
	padding: 2rem 1.5rem;
	text-align: center;
}

.benefit-card__heading {
	font-family: var(--wp--preset--font-family--sloop-script);
	font-size: 55px;
	font-weight: 400;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1rem;
	line-height: 0.85;
}

.benefit-card p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.4;
	color: var(--wp--preset--color--verde);
	margin: 0;
}

/* --- Form section --- */
.club-form {
	padding: 3rem 2rem 5rem;
}

.club-form__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 560px;
	gap: 2rem;
	align-items: start;
	justify-items: stretch;
}

.club-form__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	margin: 0 0 2rem;
}

.club-form__form {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.club-form__group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.club-form__group label {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
}

.club-form__group input {
	height: 46px;
	background: var(--wp--preset--color--gris-claro);
	border: none;
	border-radius: 25px;
	padding: 0 1.2rem;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	color: var(--wp--preset--color--negro);
}

.club-form__group input:focus {
	outline: 2px solid var(--wp--preset--color--verde);
	outline-offset: -2px;
}

.club-form__form .btn-outline {
	align-self: flex-start;
	margin-top: 0.5rem;
}

.club-form__image {
	justify-self: flex-end;
}

.club-form__image img {
	width: 100%;
	height: 594px;
	object-fit: cover;
	border-radius: 15px;
	display: block;
}

/* --- Gallery section --- */
.club-gallery {
	padding: 0 2rem 5rem;
}

.club-gallery__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.club-gallery__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.club-gallery__title {
	font-family: var(--wp--preset--font-family--sloop-script);
	font-size: 65px;
	font-weight: 400;
	color: var(--wp--preset--color--verde);
	margin: 0;
	line-height: 1.2;
}

.club-gallery__link {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--verde);
	text-decoration: underline;
}

.club-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

.club-gallery__item {
	border: 1.5px solid var(--wp--preset--color--verde);
	border-radius: 16px;
	overflow: hidden;
}

.club-gallery__item img {
	width: 100%;
	height: 377px;
	object-fit: cover;
	display: block;
}

/* --- Club page responsive --- */
@media (max-width: 900px) {
	.club-hero {
		height: 450px;
	}

	.club-hero__heading {
		font-size: 90px;
	}

	.club-hero__content {
		padding: 10rem 2rem 0;
	}

	.club-unite__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.club-unite__image img {
		height: 350px;
		max-width: 400px;
	}

	.benefits-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	.benefit-card__heading {
		font-size: 38px;
	}

	.club-form__inner {
		grid-template-columns: 1fr;
	}

	.club-form__image {
		order: -1;
	}

	.club-form__image img {
		height: 350px;
	}

	.club-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.club-gallery__item img {
		height: 280px;
	}

	.club-gallery__title {
		font-size: 42px;
	}
}

@media (max-width: 500px) {
	.club-hero {
		height: 360px;
	}

	.club-hero__heading {
		font-size: 60px;
	}

	.club-hero__round {
		width: 80px;
		height: 80px;
	}

	.club-gallery__grid {
		grid-template-columns: 1fr 1fr;
	}

	.club-gallery__item img {
		height: 200px;
	}

	.club-gallery__header {
		flex-direction: column;
		gap: 0.5rem;
	}

	.club-gallery__title {
		font-size: 36px;
	}
}


/* ==================================================
   CHECKOUT / COMPRA PAGE
   ================================================== */

/* --- Breadcrumb --- */
.checkout-breadcrumb {
	padding: 6rem 2rem 0;
}

.checkout-breadcrumb__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.checkout-breadcrumb p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	color: var(--wp--preset--color--verde);
	margin: 0;
}

.checkout-breadcrumb a {
	color: var(--wp--preset--color--verde);
	text-decoration: none;
}

.checkout-breadcrumb__sep {
	font-weight: 500;
}

/* --- Layout --- */
.checkout {
	padding: 2rem 2rem 5rem;
}

.checkout__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

/* --- Form column --- */
.checkout__form-col {
	max-width: 559px;
}

.checkout__section-title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 40px;
	font-weight: 500;
	margin: 0 0 1.5rem;
}

.checkout__section-title--verde {
	color: var(--wp--preset--color--verde);
}

.checkout__section-subtitle {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 30px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1rem;
}

.checkout__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.checkout__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.checkout__field label {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
}

.checkout__field input {
	height: 46px;
	background: var(--wp--preset--color--gris-claro);
	border: none;
	border-radius: 25px;
	padding: 0 1.2rem;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	color: var(--wp--preset--color--negro);
}

.checkout__field input::placeholder {
	color: #777;
	font-style: italic;
}

.checkout__field input:focus {
	outline: 2px solid var(--wp--preset--color--verde);
	outline-offset: -2px;
}

.checkout__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}

.checkout__divider {
	border: none;
	border-top: 1px solid #ddd;
	margin: 1.5rem 0;
}

.checkout__shipping-placeholder {
	background: var(--wp--preset--color--gris-claro);
	border-radius: 25px;
	height: 46px;
	display: flex;
	align-items: center;
	padding: 0 1.2rem;
}

.checkout__shipping-placeholder span {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	font-style: italic;
	color: #777;
}

.checkout__submit {
	align-self: flex-start;
	margin-top: 1rem;
	border-radius: 40px;
	padding: 0 29px;
	height: 37px;
	font-size: 18px;
}

/* --- Ticket column --- */
.checkout__ticket-title {
	font-family: var(--wp--preset--font-family--sloop-script);
	font-size: 55px;
	font-weight: 400;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1.5rem;
	line-height: 1;
}

.checkout__ticket {
	background-color: var(--wp--preset--color--gris-claro);
	background-size: cover;
	background-position: center;
	border-radius: 25px;
	padding: 2rem 2.5rem;
	min-height: 500px;
}

/* Product item */
.checkout__ticket-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding-bottom: 2rem;
}

.checkout__ticket-item-img {
	width: 120px;
	flex-shrink: 0;
}

.checkout__ticket-item-img img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.checkout__ticket-item-info {
	flex: 1;
}

.checkout__ticket-item-name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
	margin: 0 0 0.25rem;
}

.checkout__ticket-item-weight {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 300;
	color: var(--wp--preset--color--negro);
	margin: 0 0 0.5rem;
}

.checkout__ticket-item-price {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

.checkout__ticket-item-qty {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 400;
	color: #777;
	margin: 0 0 0.25rem;
}

.checkout__ticket-empty {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-style: italic;
	color: #777;
	padding: 2rem 0;
	text-align: center;
	margin: 0;
}

.checkout__ticket-item-remove {
	background: none;
	border: none;
	font-size: 20px;
	color: var(--wp--preset--color--negro);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	opacity: 0.5;
	text-decoration: none;
}

.checkout__ticket-item-remove:hover {
	opacity: 1;
}

/* Ticket divider */
.checkout__ticket-divider {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	margin: 0 0 1.5rem;
}

/* Totals */
.checkout__ticket-totals {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.checkout__ticket-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 24px;
	font-weight: 300;
	color: var(--wp--preset--color--negro);
}

.checkout__ticket-row--small {
	font-size: 20px;
}

.checkout__ticket-row--small span:last-child {
	font-size: 16px;
	text-align: right;
}

.checkout__ticket-row--total {
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	margin-top: 0.5rem;
}

/* --- Checkout responsive --- */
@media (max-width: 900px) {
	.checkout__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.checkout__form-col {
		max-width: none;
	}

	.checkout__ticket-col {
		order: -1;
	}

	.checkout__section-title {
		font-size: 32px;
	}

	.checkout__section-subtitle {
		font-size: 24px;
	}
}

@media (max-width: 500px) {
	.checkout__field-row {
		grid-template-columns: 1fr;
	}

	.checkout__field label {
		font-size: 17px;
	}

	.checkout__field input {
		font-size: 16px;
	}

	.checkout__shipping-placeholder span {
		font-size: 16px;
	}

	.checkout__ticket-title {
		font-size: 40px;
	}

	.checkout__ticket-row {
		font-size: 18px;
	}

	.checkout__ticket-row--small {
		font-size: 16px;
	}

	.checkout__ticket-row--small span:last-child {
		font-size: 14px;
	}
}


/* ==================================================
   THANK YOU / COMPRA EXITOSA PAGE
   ================================================== */

.thankyou {
	padding: 8rem 2rem 6rem;
}

.thankyou__inner {
	max-width: 462px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	text-align: center;
}

.thankyou__icon svg {
	display: block;
}

.thankyou__heading {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 45px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
	margin: 0;
	line-height: 1.2;
}

.thankyou__order {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--verde);
	margin: -1.5rem 0 0;
}

.thankyou__text {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

.thankyou__cta {
	border-radius: 40px;
	width: 269px;
	height: 37px;
	font-size: 18px;
	padding: 0;
}

/* --- Thank you responsive --- */
@media (max-width: 500px) {
	.thankyou {
		padding: 5rem 1.5rem 4rem;
	}

	.thankyou__heading {
		font-size: 32px;
	}

	.thankyou__text {
		font-size: 18px;
	}

	.thankyou__inner {
		gap: 32px;
	}
}


/* ==================================================
   FAQS PAGE
   ================================================== */

/* --- Hero --- */
.faqs-hero {
	position: relative;
	height: 634px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faqs-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.faqs-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--crema);
	opacity: 0.5;
}

.faqs-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0 2rem;
}

.faqs-hero__breadcrumb {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	color: var(--wp--preset--color--verde);
	margin: 0 0 6rem;
}

.faqs-hero__breadcrumb a {
	color: var(--wp--preset--color--verde);
	text-decoration: none;
}

.faqs-hero__breadcrumb span {
	font-weight: 500;
}

.faqs-hero__heading {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 66px;
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	margin: 0;
	line-height: 1.2;
}

.faqs-hero__subtitle {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 28px;
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--verde);
	margin: 0;
	line-height: 1.2;
}

/* --- FAQ body --- */
.faqs-body {
	padding: 4rem 2rem 5rem;
}

.faqs-body__inner {
	max-width: 561px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

/* --- FAQ category --- */
.faqs-category__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 33px;
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 2.5rem;
}

.faqs-category__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* --- FAQ item (accordion) --- */
.faqs-item {
	border-bottom: 1px solid var(--wp--preset--color--verde);
	padding: 1.5rem 0;
}

.faqs-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	width: 100%;
	cursor: pointer;
	list-style: none;
	padding: 0;
}

.faqs-item__trigger::-webkit-details-marker {
	display: none;
}

.faqs-item__question {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 28px;
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	line-height: 1.3;
}

.faqs-item__icon {
	flex-shrink: 0;
	transition: transform 0.3s;
}

.faqs-item[open] .faqs-item__icon {
	transform: rotate(45deg);
}

.faqs-item__content {
	padding-top: 1rem;
}

.faqs-item__content p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

/* --- FAQs responsive --- */
@media (max-width: 768px) {
	.faqs-hero {
		height: 450px;
	}

	.faqs-hero__heading {
		font-size: 42px;
	}

	.faqs-hero__subtitle {
		font-size: 20px;
	}

	.faqs-hero__breadcrumb {
		margin-bottom: 4rem;
	}

	.faqs-category__title {
		font-size: 26px;
	}

	.faqs-item__question {
		font-size: 22px;
	}
}

@media (max-width: 500px) {
	.faqs-hero {
		height: 360px;
	}

	.faqs-hero__heading {
		font-size: 32px;
	}

	.faqs-hero__subtitle {
		font-size: 17px;
	}

	.faqs-body {
		padding: 3rem 1.25rem 4rem;
	}

	.faqs-body__inner {
		gap: 3.5rem;
	}

	.faqs-category__title {
		font-size: 22px;
	}

	.faqs-item__question {
		font-size: 19px;
	}

	.faqs-item__icon {
		width: 20px;
		height: 20px;
	}
}


/* ==================================================
   SUPLEMENTOS PAGE
   ================================================== */

/* Page-level navy color variable */
.suple-page {
	--suple-navy: #222261;
	--suple-blue-light: rgba(168, 201, 224, 0.41);
	--suple-blue-mid: rgba(168, 201, 224, 0.6);
}

/* --- Hero --- */
.suple-hero {
	position: relative;
	background: var(--suple-blue-light);
	padding-bottom: 0;
	overflow: hidden;
}

.suple-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8rem 2rem 0;
}

.suple-hero__breadcrumb {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	color: var(--suple-navy);
	margin: 0 0 2rem;
}

.suple-hero__breadcrumb a {
	color: var(--suple-navy);
	text-decoration: none;
}

.suple-hero__breadcrumb span {
	font-weight: 500;
}

.suple-hero__image {
	text-align: center;
}

.suple-hero__image img {
	max-width: 848px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.suple-hero__wave {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	line-height: 0;
	z-index: 1;
}

.suple-hero__wave svg {
	display: block;
	width: 100%;
	height: clamp(40px, 5vw, 77px);
}

/* --- Benefits --- */
.suple-benefits {
	padding: 3rem 2rem 4rem;
}

.suple-benefits__inner {
	max-width: 1140px;
	margin: 0 auto;
	text-align: center;
}

.suple-benefits__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 600;
	color: var(--suple-navy);
	margin: 0 0 2rem;
}

.suple-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	max-width: 1140px;
}

.suple-benefit-pill {
	background: var(--suple-blue-mid);
	border-radius: 25px;
	padding: 2rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.suple-benefit-pill span {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 26px;
	font-weight: 500;
	color: var(--suple-navy);
}

/* --- Bienestar --- */
.suple-bienestar {
	background: var(--suple-blue-mid);
	padding: 0;
}

.suple-bienestar__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.suple-bienestar__image img {
	width: 100%;
	max-width: 617px;
	height: 463px;
	object-fit: cover;
	display: block;
}

.suple-bienestar__text {
	padding: 3rem 4rem 3rem 2rem;
}

.suple-bienestar__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 600;
	color: var(--suple-navy);
	margin: 0 0 1rem;
}

.suple-bienestar__text p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1.5rem;
}

/* Suple outline button (navy) */
.suple-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 2rem;
	border: 1px solid var(--suple-navy);
	border-radius: 40px;
	background: none;
	color: var(--suple-navy);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.suple-btn-outline:hover {
	background: var(--suple-navy);
	color: var(--wp--preset--color--blanco);
}

/* --- Sobre aLCHEMY --- */
.suple-about {
	padding: 4rem 2rem 5rem;
}

.suple-about__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

.suple-about__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 600;
	color: var(--suple-navy);
	margin: 0 0 1.5rem;
}

.suple-about__brand {
	font-weight: 600;
}

.suple-about__brand em {
	font-style: italic;
}

.suple-about__text p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1.2rem;
}

.suple-about__image img {
	width: 100%;
	height: 342px;
	object-fit: cover;
	border-radius: 23px;
	display: block;
	background: #d9d9d9;
}

/* --- Suple FAQ --- */
.suple-faq {
	padding: 0 2rem 5rem;
}

.suple-faq__inner {
	max-width: 550px;
	margin: 0 auto;
}

.suple-faq__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 600;
	color: var(--suple-navy);
	text-align: center;
	margin: 0 0 2.5rem;
}

.suple-faq__item {
	border-bottom: 1px solid var(--suple-navy);
	padding: 1.2rem 0;
}

.suple-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	cursor: pointer;
	list-style: none;
	padding: 0;
}

.suple-faq__trigger::-webkit-details-marker {
	display: none;
}

.suple-faq__question {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 28px;
	font-weight: 600;
	font-style: italic;
	color: var(--suple-navy);
	line-height: 1.3;
}

.suple-faq__icon {
	flex-shrink: 0;
	transition: transform 0.3s;
}

.suple-faq__item[open] .suple-faq__icon {
	transform: rotate(45deg);
}

.suple-faq__content {
	padding-top: 1rem;
}

.suple-faq__content p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

/* --- Suplementos responsive --- */
@media (max-width: 900px) {
	.suple-benefits__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.suple-bienestar__inner {
		grid-template-columns: 1fr;
	}

	.suple-bienestar__image img {
		max-width: none;
		height: 350px;
	}

	.suple-bienestar__text {
		padding: 2rem;
	}

	.suple-about__inner {
		grid-template-columns: 1fr;
	}

	.suple-about__image {
		order: -1;
	}

	.suple-about__image img {
		height: 280px;
	}
}

@media (max-width: 500px) {
	.suple-benefits__grid {
		grid-template-columns: 1fr;
		max-width: 367px;
		margin: 0 auto;
	}

	.suple-benefit-pill span {
		font-size: 20px;
	}

	.suple-benefits__title,
	.suple-bienestar__title,
	.suple-about__title,
	.suple-faq__title {
		font-size: 28px;
	}

	.suple-faq__question {
		font-size: 20px;
	}

	.suple-hero__inner {
		padding: 6rem 1.25rem 0;
	}
}


/* ==================================================
   SINGLE PRODUCT PAGE
   ================================================== */

/* --- Breadcrumb --- */
.sp-breadcrumb {
	padding: 1.5rem 2rem 0;
}

.sp-breadcrumb__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.sp-breadcrumb p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 17px;
	color: var(--wp--preset--color--verde);
	margin: 0;
}

.sp-breadcrumb a {
	color: var(--wp--preset--color--verde);
	text-decoration: none;
}

.sp-breadcrumb span {
	font-weight: 500;
}


/* --- Marquee --- */
.sp-marquee {
	background: rgba(166, 168, 83, 0.83);
	height: 62px;
	overflow: hidden;
	display: flex;
	align-items: center;
	margin-top: 1.5rem;
}

.sp-marquee__track {
	display: flex;
	white-space: nowrap;
	animation: sp-marquee-scroll 25s linear infinite;
}

.sp-marquee__text {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-style: italic;
	color: var(--wp--preset--color--blanco);
	white-space: nowrap;
	padding-right: 1rem;
}

@keyframes sp-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}


/* --- Product Hero --- */
.sp-hero {
	padding: 3rem 2rem 4rem;
}

.sp-hero__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* Image column */
.sp-hero__image-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.sp-hero__image-card {
	width: 100%;
	max-width: 559px;
	aspect-ratio: 559 / 500;
	border-radius: 25px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--crema);
	background-size: cover;
	background-position: center;
}

.sp-hero__product-img {
	max-width: 65%;
	max-height: 85%;
	object-fit: contain;
	display: block;
}

/* Gallery pill arrows */
.sp-hero__arrows {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.sp-hero__arrow {
	width: 40px;
	height: 28px;
	border-radius: 100px;
	border: 1.5px solid var(--wp--preset--color--verde);
	background: transparent;
	color: var(--wp--preset--color--verde);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
}

.sp-hero__arrow--next {
	background: var(--wp--preset--color--verde);
	color: #fff;
}

/* Info column */
.sp-hero__info-col {
	padding-top: 1rem;
}

.sp-hero__rating {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.sp-hero__review-count {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	color: var(--wp--preset--color--verde);
	text-decoration: underline;
	margin-left: 0.5rem;
}

.sp-hero__name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 700;
	color: var(--wp--preset--color--verde);
	margin: 0 0 0.5rem;
	line-height: 1.2;
}

.sp-hero__tagline {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--negro);
	margin: 0 0 1rem;
}

.sp-hero__desc {
	margin-bottom: 1.5rem;
}

.sp-hero__desc p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--negro);
	margin: 0 0 0.5rem;
}

.sp-hero__icons {
	display: flex;
	gap: 0.75rem;
	margin-top: 4rem;
}

.sp-hero__icon {
	width: 58px;
	height: 58px;
	object-fit: contain;
}

.sp-hero__price {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 700;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1.5rem;
}

.sp-hero__add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 326px;
	max-width: 100%;
	height: 37px;
	border: 1px solid var(--wp--preset--color--verde);
	border-radius: 40px;
	background: none;
	color: var(--wp--preset--color--verde);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.sp-hero__add-btn:hover {
	background: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--blanco);
}


/* --- Info Grid --- */
.sp-info {
	padding: 0 2rem 4rem;
}

.sp-info__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.sp-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem 4rem;
}

.sp-info__heading {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 30px;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1rem;
}

.sp-info__heading--bold {
	font-weight: 700;
	font-style: italic;
}

.sp-info__heading--semi {
	font-weight: 600;
}

.sp-info__text p {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--negro);
	margin: 0 0 0.5rem;
}

/* Characteristics list */
.sp-info__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sp-info__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.sp-info__leaf {
	flex-shrink: 0;
	margin-top: 2px;
}

.sp-info__features li span {
	font-family: var(--wp--preset--font-family--salks-bold);
	font-size: 22px;
	color: var(--wp--preset--color--verde);
	text-transform: uppercase;
	line-height: 1.3;
}


/* --- Related Products --- */
.sp-related {
	padding: 0 2rem 4rem;
}

.sp-related__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.sp-related__title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 700;
	color: var(--wp--preset--color--verde);
	margin: 0 0 2rem;
}

.sp-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.sp-related__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	background-color: rgba(246, 167, 197, 0.25);
	border-radius: 25px;
	padding: 1.5rem;
}

.sp-related__card-image {
	width: 100%;
	aspect-ratio: 261 / 300;
	border-radius: 25px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
}

.sp-related__card-image img {
	max-width: 70%;
	max-height: 80%;
	object-fit: contain;
}

.sp-related__card-name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 23px;
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	margin: 0;
	text-align: center;
}

.sp-related__card-btn {
	border-radius: 40px;
	height: 35px;
	padding: 0 2rem;
	font-size: 15px;
}


/* --- Reviews --- */
.sp-reviews {
	background: rgba(246, 167, 197, 0.25);
	padding: 4rem 2rem calc(5rem + 77px);
	margin-bottom: -77px;
}

.sp-reviews__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.sp-reviews__heading {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 700;
	color: var(--wp--preset--color--verde);
	margin: 0 0 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--wp--preset--color--verde);
}

/* Summary bar */
.sp-reviews__summary {
	display: flex;
	gap: 1.5rem;
	margin: 2rem 0;
}

.sp-reviews__summary-card {
	border: 2px solid var(--wp--preset--color--verde);
	border-radius: 25px;
	padding: 1.5rem 2rem;
	display: flex;
	align-items: center;
}

.sp-reviews__summary-card--rating {
	gap: 0.75rem;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: start;
}

.sp-reviews__summary-card--cta {
	flex: 1;
	justify-content: space-between;
	gap: 1rem;
}

.sp-reviews__stars {
	display: flex;
	gap: 0.2rem;
}

.sp-reviews__avg {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 35px;
	font-weight: 700;
	color: var(--wp--preset--color--negro);
	line-height: 1;
}

.sp-reviews__based {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	color: var(--wp--preset--color--negro);
}


.sp-reviews__cta-script {
	font-family: var(--wp--preset--font-family--sloop-script);
	font-size: 40px;
	font-weight: 400;
	color: var(--wp--preset--color--verde);
	line-height: 1;
}

.sp-reviews__write-btn {
	border-radius: 40px;
	height: 37px;
	padding: 0 1.5rem;
	font-size: 15px;
	max-width: 327px;
	flex-grow: 1;
}

/* Review cards */
.sp-reviews__grid {
	columns: 3;
	column-gap: 1.5rem;
}

.sp-reviews__card {
	background: transparent;
	border: 2px solid var(--wp--preset--color--verde);
	border-radius: 25px;
	padding: 1.5rem;
	break-inside: avoid;
	margin-bottom: 1.5rem;
}

.sp-reviews__card-stars {
	display: flex;
	gap: 0.15rem;
	margin-bottom: 0.75rem;
}

.sp-reviews__card-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.75rem;
}

.sp-reviews__card-name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 25px;
	font-weight: 700;
	color: var(--wp--preset--color--verde);
}

.sp-reviews__card-date {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	color: var(--wp--preset--color--verde);
}

.sp-reviews__card-text {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 20px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

/* Review form */
.sp-reviews__form-wrap {
	margin-top: 3rem;
	background: transparent;
	border-radius: 25px;
	padding: 2rem;
}

.sp-reviews__form-wrap .comment-reply-title {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 28px;
	font-weight: 600;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1rem;
}

.sp-reviews__form-wrap label {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
	display: block;
	margin-bottom: 0.5rem;
}

.sp-reviews__form-wrap input[type="text"],
.sp-reviews__form-wrap input[type="email"],
.sp-reviews__form-wrap input[type="url"],
.sp-reviews__form-wrap textarea {
	width: 100%;
	background: transparent;
	border: 2px solid var(--wp--preset--color--verde);
	border-radius: 15px;
	padding: 0.75rem 1.2rem;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	color: var(--wp--preset--color--negro);
	box-sizing: border-box;
}

.sp-reviews__form-wrap textarea {
	resize: vertical;
	min-height: 120px;
}

.sp-reviews__form-wrap input:focus,
.sp-reviews__form-wrap textarea:focus {
	outline: 2px solid var(--wp--preset--color--verde);
	outline-offset: -2px;
}

.sp-reviews__form-wrap .comment-form p {
	margin: 0 0 1rem;
}

.sp-reviews__submit-btn {
	border-radius: 40px;
	height: 40px;
	padding: 0 2rem;
	font-size: 16px;
	margin-top: 0.5rem;
}


/* --- Single Product Responsive --- */
@media (max-width: 900px) {
	.sp-hero__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.sp-hero__image-card {
		max-width: 450px;
	}

	.sp-hero__name {
		font-size: 30px;
	}

	.sp-hero__price {
		font-size: 30px;
	}

	.sp-info__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.sp-related__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 1rem;
	}

	.sp-reviews__grid {
		columns: 2;
	}

	.sp-reviews__summary {
		flex-direction: column;
		gap: 1rem;
	}

	.sp-reviews__summary-card--cta {
		flex-direction: column;
		text-align: center;
	}

	.sp-reviews__cta-script {
		font-size: 32px;
	}
}

@media (max-width: 600px) {
	.sp-marquee {
		height: 48px;
	}

	.sp-marquee__text {
		font-size: 15px;
	}

	.sp-hero {
		padding: 2rem 1.25rem 3rem;
	}

	.sp-hero__name {
		font-size: 26px;
	}

	.sp-hero__price {
		font-size: 26px;
	}

	.sp-hero__tagline {
		font-size: 16px;
	}

	.sp-hero__add-btn {
		width: 100%;
	}

	.sp-hero__icons {
		flex-wrap: wrap;
	}

	.sp-hero__icon {
		width: 44px;
		height: 44px;
	}

	.sp-info {
		padding: 0 1.25rem 3rem;
	}

	.sp-info__heading {
		font-size: 24px;
	}

	.sp-info__features li span {
		font-size: 18px;
	}

	.sp-related {
		padding: 0 1.25rem 3rem;
	}

	.sp-related__title {
		font-size: 28px;
	}

	.sp-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-related__card-name {
		font-size: 18px;
	}

	.sp-reviews {
		padding: 3rem 1.25rem calc(4rem + 77px);
	}

	.sp-reviews__heading {
		font-size: 28px;
	}

	.sp-reviews__grid {
		columns: 1;
	}

	.sp-reviews__avg {
		font-size: 28px;
	}

	.sp-reviews__cta-script {
		font-size: 26px;
	}

	.sp-reviews__card-name {
		font-size: 20px;
	}

	.sp-reviews__card-text {
		font-size: 17px;
	}
}


/* ==================================================
   SINGLE PRODUCT — SUPLEMENTOS VARIANT
   ================================================== */

/* Blue color scheme variable */
.sp--suple {
	--suple-review-bg: rgba(168, 201, 224, 0.4);
}

/* Product image card — supplement style (overflow for capsule) */
.sp-hero__image-card--suple {
	background-color: #92a87c;
	overflow: visible;
	position: relative;
}

.sp-hero__product-img--suple {
	max-width: 110%;
	max-height: 100%;
	position: relative;
	z-index: 1;
}

/* Benefits list (circular icons + text) */
.sp-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sp-benefits__item {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sp-benefits__icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-benefits__icon svg {
	display: block;
}

.sp-benefits__text {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--negro);
	line-height: 1.4;
}

/* Wave dividers */
.sp-wave {
	line-height: 0;
}

.sp-wave svg {
	display: block;
	width: 100%;
	height: clamp(40px, 5vw, 77px);
}

.sp-wave--into-blue {
	background: var(--wp--preset--color--blanco);
	margin-bottom: -1px;
}

.sp-wave--into-rosa {
	background: var(--wp--preset--color--blanco);
	margin-bottom: -1px;
}

.sp-wave--into-verde {
	background: var(--suple-review-bg);
	margin-top: -1px;
}


/* Reviews — blue background override */
.sp-reviews--blue {
	background: var(--suple-review-bg);
}

/* --- Suplementos variant responsive --- */
@media (max-width: 900px) {
	.sp-hero__image-card--suple {
		max-width: 450px;
	}
}

@media (max-width: 600px) {
	.sp-benefits__icon {
		width: 42px;
		height: 42px;
	}

	.sp-benefits__icon svg {
		width: 42px;
		height: 42px;
	}

	.sp-benefits__text {
		font-size: 16px;
	}
}


/* =============================================
   Cart Drawer (Side Panel)
   ============================================= */

/* Overlay */
.cart-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.31);
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.cart-drawer-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Panel */
.cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: min(591px, 85vw);
	height: 100vh;
	max-height: 100%;
	z-index: 999;
	background-color: var(--wp--preset--color--blanco);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 2rem 2.5rem;
}

.cart-drawer.is-open {
	transform: translateX(0);
}

/* Lock body scroll when drawer is open */
body.cart-open {
	overflow: hidden;
}

/* Header with close button */
.cart-drawer__header {
	display: flex;
	justify-content: flex-end;
}

.cart-drawer__close {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1.5px solid var(--wp--preset--color--negro);
	border-radius: 40px;
	padding: 0.4rem 1.2rem;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--negro);
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.cart-drawer__close:hover {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

.cart-drawer__close svg {
	width: 12px;
	height: 12px;
}

/* Dividers */
.cart-drawer__divider {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	margin: 1.25rem 0;
}

/* Title */
.cart-drawer__title {
	font-family: var(--wp--preset--font-family--sloop-script);
	font-size: 50px;
	font-weight: 400;
	color: var(--wp--preset--color--verde);
	margin: 0 0 1rem;
	line-height: 1;
}

/* Items list */
.cart-drawer__content {
	flex: 1;
	overflow-y: auto;
}

/* Single item */
.cart-drawer__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding-bottom: 1.5rem;
}

.cart-drawer__item-img {
	width: 100px;
	flex-shrink: 0;
}

.cart-drawer__item-img img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.cart-drawer__item-info {
	flex: 1;
}

.cart-drawer__item-name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
	margin: 0 0 0.25rem;
}

.cart-drawer__item-weight {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 13px;
	font-weight: 300;
	color: var(--wp--preset--color--negro);
	margin: 0 0 0.5rem;
}

.cart-drawer__item-qty {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 13px;
	font-weight: 400;
	color: #777;
	margin: 0 0 0.25rem;
}

.cart-drawer__item-price {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
	margin: 0;
}

.cart-drawer__item-remove {
	background: none;
	border: none;
	font-size: 20px;
	color: var(--wp--preset--color--negro);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.cart-drawer__item-remove:hover {
	opacity: 1;
}

.cart-drawer__empty {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-style: italic;
	color: #777;
	padding: 2rem 0;
	text-align: center;
	margin: 0;
}

/* Totals */
.cart-drawer__totals {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cart-drawer__total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 22px;
	font-weight: 500;
	color: var(--wp--preset--color--negro);
}

/* Checkout button */
.cart-drawer__checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	background-color: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--blanco);
	border: none;
	border-radius: 40px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background-color 0.3s;
}

.cart-drawer__checkout-btn:hover {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* Cart count badge hidden state */
.site-header__cart-count.is-hidden {
	display: none;
}

/* Cart icon button reset (was an <a>, now a <button>) */
button.site-header__cart {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* Cart drawer responsive */
@media (max-width: 600px) {
	.cart-drawer {
		width: 90vw;
		padding: 1.5rem 1.25rem;
	}

	.cart-drawer__title {
		font-size: 40px;
	}

	.cart-drawer__item-img {
		width: 80px;
	}

	.cart-drawer__total-row {
		font-size: 18px;
	}
}