/* ==========================================================================
   Lulu — Componentes
   Una sección por cada archivo de template-parts/components/.
   ========================================================================== */

/* Botón ------------------------------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 26px;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: 0.78125rem; font-weight: 600;
	letter-spacing: 0.11em; text-transform: uppercase;
	line-height: 1.2; text-align: center;
	white-space: nowrap;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}
.btn--sm { padding: 12px 18px; font-size: 0.75rem; }
.btn--lg { padding: 17px 30px; font-size: 0.875rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--outline { border-color: var(--color-border); color: var(--color-text); }
.btn--outline:hover { border-color: var(--color-text); }
.btn--accent { border-color: var(--color-secondary); color: var(--color-text); }
.btn--accent:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn--ghost { padding-inline: 0; color: var(--color-text); }
.btn--ghost:hover { color: var(--color-secondary-text); }
.btn--whatsapp { background: var(--color-success); color: #fff; letter-spacing: 0.04em; }
.btn--whatsapp:hover { opacity: 0.9; }

.btn.loading { opacity: 0.6; pointer-events: none; }
.btn.added .btn__label::after { content: " ✓"; }

.button-group { display: flex; flex-wrap: wrap; gap: 14px; }

/* Botón de icono */
.icon-button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition), color var(--transition);
}
.icon-button:hover { border-color: var(--color-secondary); color: var(--color-secondary-text); }

/* Enlace con flecha */
.link-arrow {
	display: inline-flex; align-items: center; gap: var(--space-2);
	font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
	transition: gap var(--transition), color var(--transition);
}
.link-arrow:hover { gap: 12px; color: var(--color-secondary-text); }
.link-arrow--sm { text-transform: none; letter-spacing: 0; }

/* Eyebrow ---------------------------------------------------------------- */
.eyebrow {
	display: flex; align-items: center; gap: 10px;
	margin: 0;
	font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase;
}
.eyebrow--primary { color: var(--color-secondary-text); }
.eyebrow--accent { color: var(--color-tertiary-text); }
.eyebrow--rule::before { content: ""; width: 34px; height: 1px; background: var(--color-primary); }

/* Encabezado de sección -------------------------------------------------- */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-6); }
.section-head__copy { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.section-head__title { margin: 0; font-size: var(--fs-2xl); }
.section-head__aside { max-width: 380px; margin: 0; color: var(--color-muted); font-size: 0.875rem; }
.section-head .link-arrow { padding-bottom: var(--space-2); }

/* Badge ------------------------------------------------------------------ */
.badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-2xs); font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
}
.badge--primary { background: var(--color-primary); color: var(--color-on-primary); }
.badge--dark { background: rgb(18 10 16 / 80%); color: var(--color-on-primary); }
.badge--info { background: var(--color-tertiary); color: #fff; }
.badge--secondary { background: var(--color-secondary); color: #fff; }
.badge--outline { border: 1px solid var(--color-border); }

/* Valoración ------------------------------------------------------------- */
.rating { display: flex; align-items: center; gap: 6px; }
.rating__stars { display: flex; gap: 3px; color: var(--color-border); }
.rating__stars .is-filled { color: var(--color-secondary); fill: currentColor; }
.rating__count { color: var(--color-muted); font-size: var(--fs-xs); }

/* Logo ------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__icon { color: var(--color-primary); }
.logo__type { font-family: var(--font-serif); font-size: 1.625rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.logo--sm .logo__type { font-size: 1.5rem; }
.logo__img { display: block; height: 64px; width: auto; }
.logo--sm .logo__img { height: 88px; }
.custom-logo { max-height: 48px; width: auto; }

/* Dato destacado --------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat__value { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.1; }
.stat__label { color: var(--color-muted); font-size: 0.75rem; letter-spacing: 0.02em; }

/* Ventaja ---------------------------------------------------------------- */
.feature { display: flex; align-items: center; gap: var(--space-3); }
.feature__icon {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	background: rgb(224 46 109 / 12%);
	border-radius: 50%;
	color: var(--color-secondary-text);
}
.feature__copy { display: flex; flex-direction: column; gap: 2px; }
.feature__title { font-size: 0.84375rem; font-weight: 600; }
.feature__text { color: var(--color-muted); font-size: 0.75rem; }

/* Lista con checks ------------------------------------------------------- */
.check-list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.check-list__item { display: flex; align-items: center; gap: 11px; font-size: 0.875rem; }
.check-list__item .icon { color: var(--color-secondary); }

/* Redes sociales --------------------------------------------------------- */
.social-links { display: flex; gap: 10px; list-style: none; margin: 0; padding: 6px 0 0; }

/* Pestañas --------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tabs__tab {
	padding: 10px 18px;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-muted);
	font-size: 0.78125rem;
	transition: color var(--transition), background-color var(--transition);
}
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab[aria-selected="true"] { background: var(--color-surface-2); border-color: var(--color-primary); color: var(--color-text); font-weight: 600; }

/* Pills ------------------------------------------------------------------ */
.pill-list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pill-list__label { color: var(--color-muted); font-size: 0.78125rem; }
.pill {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: 8px 12px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
}
.pill--alert { background: none; border-color: var(--color-primary); color: var(--color-secondary-text); font-size: 0.75rem; }

/* Campo de búsqueda ------------------------------------------------------ */
.search-field {
	display: flex; align-items: center; gap: 10px;
	padding: 0 16px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-muted);
	transition: border-color var(--transition);
}
.search-field:focus-within { border-color: var(--color-secondary); }
.search-field input { flex: 1; min-width: 0; padding: 12px 0; background: none; border: 0; outline: 0; color: var(--color-text); font-size: var(--fs-sm); }
.search-field input::placeholder { color: var(--color-muted); }

/* Etiqueta sobre imagen -------------------------------------------------- */
.media-tag {
	display: inline-flex; flex-direction: column; gap: 4px;
	padding: 16px 20px;
	background: rgb(18 10 16 / 85%);
	backdrop-filter: blur(6px);
	border-radius: var(--radius-sm);
}
.media-tag__title { font-family: var(--font-serif); font-size: 1.0625rem; }
.media-tag__text { color: var(--color-secondary-text); font-size: 0.75rem; }

/* Precio (WooCommerce) --------------------------------------------------- */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-weight: 600; }
.price del { order: 2; color: var(--color-muted); font-size: 0.8em; font-weight: 400; }
.price ins { color: var(--color-secondary-text); text-decoration: none; }

/* Tarjeta de producto ---------------------------------------------------- */
.product-card {
	display: flex; flex-direction: column;
	height: 100%;
	background: var(--color-surface);
	border-radius: var(--radius);
	overflow: hidden;
}
.product-card__media { position: relative; display: block; aspect-ratio: 1 / 1.05; background: var(--color-surface-2); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__badge { position: absolute; top: 14px; left: 14px; }
.product-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: 18px 18px 20px; }
.product-card__category { color: var(--color-muted); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.product-card__title { margin: 0; font-size: 1.1875rem; line-height: 1.26; }
.product-card__title a:hover { color: var(--color-secondary-text); }
.product-card__price { font-size: var(--fs-md); }
.product-card__actions { margin-top: auto; padding-top: var(--space-2); }
.product-card .added_to_cart { display: block; margin-top: var(--space-2); color: var(--color-muted); font-size: 0.75rem; text-align: center; text-decoration: underline; }

/* Tarjeta de categoría --------------------------------------------------- */
.category-card {
	position: relative;
	display: flex; align-items: flex-end;
	min-height: 220px;
	padding: 22px;
	background: var(--color-surface-2);
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
}
.category-card--lg { min-height: 320px; }
.category-card__image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.category-card:hover .category-card__image { transform: scale(1.05); }
.category-card__label { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; background: var(--color-overlay); border-radius: var(--radius-sm); }
.category-card__name { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.2; }
.category-card__count { color: var(--color-secondary-text); font-size: 0.71875rem; letter-spacing: 0.03em; }

/* Tarjeta de artículo ---------------------------------------------------- */
.article-card { display: flex; flex-direction: column; }
.article-card__media { display: block; aspect-ratio: 16 / 10; background: var(--color-surface-2); border-radius: var(--radius); overflow: hidden; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__body { display: flex; flex-direction: column; gap: 9px; padding-top: 20px; }
.article-card__tag { color: var(--color-secondary-text); font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.article-card__title { margin: 0; font-size: 1.375rem; line-height: 1.28; }
.article-card__excerpt { margin: 0; color: var(--color-muted); font-size: 0.875rem; }

/* Puntos de color (tarjeta de producto) ---------------------------------- */
.color-dots { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.color-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px rgb(255 255 255 / 28%); }

/* Verificación de edad --------------------------------------------------- */
.age-gate {
	position: fixed; inset: 0; z-index: 1000;
	display: grid; place-items: center;
	padding: var(--gutter);
	background: radial-gradient(ellipse 70% 60% at 50% 30%, rgb(200 24 35 / 22%), transparent 70%), rgb(10 5 9 / 96%);
	backdrop-filter: blur(12px);
	overflow-y: auto;
}
.age-ok .age-gate { display: none; }
html:not(.age-ok) body.has-age-gate:has(.age-gate) { overflow: hidden; }
.age-gate__box {
	display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
	width: 100%; max-width: 420px;
	padding: var(--space-6) var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-align: center;
}
.age-gate__logo .logo__img { height: 96px; }
.age-gate__badge {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border: 2px solid var(--color-primary); border-radius: 50%;
	color: var(--color-secondary-text);
	font-weight: 700; letter-spacing: 0.02em;
}
.age-gate__title { margin: 0; font-size: var(--fs-xl); }
.age-gate__text { margin: 0; color: var(--color-muted); font-size: 0.9375rem; }
.age-gate__actions { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin-top: var(--space-2); }
.age-gate__legal { margin: 0; color: var(--color-muted); font-size: 0.6875rem; }