/*
Theme Name:     Inner Life Rituals
Theme URI:      n/a
Template:       kadence
Author:         Fernando García Rebolledo
Author URI:     n/a
Description:    Tema personalizado para Inner Life Rituals basado en Kadence Theme
Version:        1.0.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/
/* ------------------------------------------------------------
   FUENTES LOCALES
   ------------------------------------------------------------ */
@font-face {
	font-family: 'Playfair Display';
	src: url('assets/fonts/PlayfairDisplay-Variable.woff2') format('woff2-variations');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans 3';
	src: url('assets/fonts/SourceSans3-Variable.woff2') format('woff2-variations');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------
   DESIGN TOKENS · TIPOGRAFÍA FLUIDA
   Fuente: Figma · Design System · node 3:21395
   Viewport 360px → 1280px · Escala modular 1.25 (móvil) / 1.333 (desktop)
   Base rem: 1rem = 16px. Todos los tamaños en rem.
   ------------------------------------------------------------ */
:root {
	/* Font families */
	--ff-display: 'Playfair Display', serif;
	--ff-body: 'Source Sans 3', sans-serif;

	/* Playfair Display — Display & Headings */
	--fs-display: clamp( 2rem, calc( 1.61rem + 1.74vw ), 3rem );        /* 32px → 48px */
	--fs-h1:      clamp( 1.75rem, calc( 1.55rem + 0.87vw ), 2.25rem );  /* 28px → 36px */
	--fs-h2:      clamp( 1.375rem, calc( 1.13rem + 1.09vw ), 2rem );    /* 22px → 32px */
	--fs-h3:      clamp( 1rem, calc( 0.8rem + 0.87vw ), 1.5rem );       /* 16px → 24px */

	/* Source Sans 3 — Body & UI */
	--fs-body-xl: clamp( 1.375rem, calc( 1.33rem + 0.22vw ), 1.5rem );  /* 22px → 24px */
	--fs-body-lg: clamp( 1.125rem, calc( 1.08rem + 0.22vw ), 1.25rem ); /* 18px → 20px */
	--fs-body:    clamp( 1rem, calc( 0.95rem + 0.22vw ), 1.125rem );    /* 16px → 18px */
	--fs-ui:      clamp( 0.875rem, calc( 0.83rem + 0.22vw ), 1rem );    /* 14px → 16px */
	--fs-small:   clamp( 0.75rem, calc( 0.7rem + 0.22vw ), 0.875rem );  /* 12px → 14px */
	--fs-x-small: clamp( 0.6875rem, calc( 0.66rem + 0.11vw ), 0.75rem );/* 11px → 12px */
	--fs-caps:    clamp( 0.6875rem, calc( 0.61rem + 0.33vw ), 0.875rem );/* 11px → 14px + uppercase */

	/* E-commerce */
	--fs-pdp-price:     clamp( 1.25rem, calc( 1.15rem + 0.43vw ), 1.5rem ); /* 20px → 24px */
	--fs-pdp-price-off: clamp( 1rem, calc( 0.9rem + 0.43vw ), 1.25rem );    /* 16px → 20px */

	/* Line heights — móvil */
	--lh-display: 1.20;
	--lh-h1:      1.25;
	--lh-h2:      1.30;
	--lh-h3:      1.35;
	--lh-body-xl: 1.40;
	--lh-body-lg: 1.50;
	--lh-body:    1.55;
	--lh-ui:      1.40;
	--lh-small:   1.45;
	--lh-x-small: 1.45;
	--lh-caps:    1.20;
	--lh-pdp:     1.20;

	/* Letter spacing */
	--ls-ui:   0.02em;
	--ls-caps: 0.08em;

	/* ------------------------------------------------------------
	   DESIGN TOKENS · ESPACIADO
	   Fuente: Figma · Design System · node 3:25426
	   Valores móvil por defecto (mobile-first), override en 1280px.
	   ------------------------------------------------------------ */
	--space-1:  4px;  /* Separación mínima, gap icono-texto, detalles internos */
	--space-2:  8px;  /* Padding de badge, gap entre elementos pequeños */
	--space-3:  12px; /* Gap entre líneas, padding de tag y chip */
	--space-4:  16px; /* Padding de botón, gap entre campos de formulario */
	--space-5:  20px; /* Padding interno de tarjeta compacta */
	--space-6:  24px; /* Gap entre cards en grid, padding de sección densa */
	--space-8:  24px; /* Padding de componente estándar, gap entre grupos */
	--space-10: 32px; /* Padding de sección media, margen entre bloques */
	--space-12: 40px; /* Padding de sección principal, separación de módulos */
	--space-16: 48px; /* Margen entre secciones de página, padding de hero */

	/* ------------------------------------------------------------
	   DESIGN TOKENS · LAYOUT
	   Fuente: Figma · Responsive Design handoff · node 3:25545 + node 3:5866
	   --container-width es el tope exterior (1280px, el frame desktop).
	   La medida de contenido visible (1152px desktop / 344px mobile) sale
	   de restar --container-padding a ese tope (border-box), no es un
	   valor a fijar aparte — confirmado en el nodo 3:5866: las secciones
	   son full width con padding 64px, no un elemento de 1152px.
	   Padding lateral mobile-first, override en los breakpoints reales
	   de Kadence (768px / 1024px).
	   ------------------------------------------------------------ */
	--container-width:   1280px;
	--container-padding: 8px; /* mobile */
}

@media ( min-width: 768px ) {
	:root {
		--container-padding: 32px; /* tablet */
	}
}

@media ( min-width: 1024px ) {
	:root {
		--container-padding: 64px; /* desktop */
	}
}

@media ( min-width: 1280px ) {
	:root {
		/* Line heights — desktop */
		--lh-display: 1.10;
		--lh-h1:      1.20;
		--lh-h2:      1.25;
		--lh-h3:      1.30;
		--lh-body-xl: 1.45;
		--lh-body-lg: 1.55;
		--lh-body:    1.60;
		--lh-ui:      1.45;
		--lh-small:   1.50;
		--lh-x-small: 1.50;
		--lh-caps:    1.20;
		--lh-pdp:     1.20;

		/* Spacing — desktop */
		--space-8:  32px;
		--space-10: 40px;
		--space-12: 48px;
		--space-16: 64px;
	}
}

/* ------------------------------------------------------------
   KADENCE BLOCKS · OVERRIDE ESCALA DE ESPACIADO
   Kadence Blocks (plugin) expone su propio picker de espaciado en
   cada bloque (panel "Spacing": xxs...5xl), respaldado por las
   custom properties --global-kb-spacing-*. Esa escala NO tiene
   filtro ni ajuste en Customizer (hardcodeada en
   kadence-blocks/includes/init.php, solo dentro del editor de
   Gutenberg) y en el frontend nunca se declara — cada bloque usa
   var(--global-kb-spacing-xxs, 0.5rem), cayendo al fallback de
   Kadence si nadie la define.
   Al declararla aquí pasamos a ser la ÚNICA fuente en el frontend
   (sin carrera de cascada posible), así que cualquier bloque que
   use un preset de espaciado en todo el sitio queda alineado con
   la escala de Figma (10 pasos en ambos lados, emparejados 1:1
   por posición).

   Tabla de equivalencias (valor desktop):
   ┌──────────────────────────┬──────────┬────────────────┬──────────┐
   │ Kadence (var)             │ Original │ Figma (token)  │ Nuevo    │
   ├──────────────────────────┼──────────┼────────────────┼──────────┤
   │ --global-kb-spacing-xxs   │ 0.5rem   │ --space-1      │ 4px      │
   │ --global-kb-spacing-xs    │ 1rem     │ --space-2      │ 8px      │
   │ --global-kb-spacing-sm    │ 1.5rem   │ --space-3      │ 12px     │
   │ --global-kb-spacing-md    │ 2rem     │ --space-4      │ 16px     │
   │ --global-kb-spacing-lg    │ 3rem     │ --space-5      │ 20px     │
   │ --global-kb-spacing-xl    │ 4rem     │ --space-6      │ 24px     │
   │ --global-kb-spacing-xxl   │ 5rem     │ --space-8      │ 24-32px  │
   │ --global-kb-spacing-3xl   │ 6.5rem   │ --space-10     │ 32-40px  │
   │ --global-kb-spacing-4xl   │ 8rem     │ --space-12     │ 40-48px  │
   │ --global-kb-spacing-5xl   │ 10rem    │ --space-16     │ 48-64px  │
   └──────────────────────────┴──────────┴────────────────┴──────────┘

   LIMITACIÓN: el tema Kadence no registra add_theme_support('editor-styles'),
   así que style.css no se carga dentro del iframe del editor de Gutenberg.
   El picker de "Spacing" en el editor seguirá mostrando las etiquetas y
   valores originales de Kadence al elegir un preset; el resultado real
   en el frontend sí usa esta escala. Sin add_editor_style() no hay forma
   de sincronizar la vista previa del editor con esto.
   ------------------------------------------------------------ */
:root {
	--global-kb-spacing-xxs: var( --space-1 );
	--global-kb-spacing-xs:  var( --space-2 );
	--global-kb-spacing-sm:  var( --space-3 );
	--global-kb-spacing-md:  var( --space-4 );
	--global-kb-spacing-lg:  var( --space-5 );
	--global-kb-spacing-xl:  var( --space-6 );
	--global-kb-spacing-xxl: var( --space-8 );
	--global-kb-spacing-3xl: var( --space-10 );
	--global-kb-spacing-4xl: var( --space-12 );
	--global-kb-spacing-5xl: var( --space-16 );
	--global-kb-gap-xxs: var( --space-1 );
	--global-kb-gap-xs:  var( --space-2 );
	--global-kb-gap-sm:  var( --space-3 );
	--global-kb-gap-md:  var( --space-4 );
	--global-kb-gap-lg:  var( --space-5 );
	--global-kb-gap-xl:  var( --space-6 );
	--global-kb-gap-xxl: var( --space-8 );
	--global-kb-gap-3xl: var( --space-10 );
	--global-kb-gap-4xl: var( --space-12 );
	--global-kb-gap-5xl: var( --space-16 );
}

/* ------------------------------------------------------------
   UTILITY CLASSES · TIPOGRAFÍA
   ------------------------------------------------------------ */
.inner-display {
	font-family: var( --ff-display );
	font-size: var( --fs-display );
	line-height: var( --lh-display );
	font-weight: 400;
}

.inner-h1 {
	font-family: var( --ff-display );
	font-size: var( --fs-h1 );
	line-height: var( --lh-h1 );
	font-weight: 400;
}

.inner-h2 {
	font-family: var( --ff-display );
	font-size: var( --fs-h2 );
	line-height: var( --lh-h2 );
	font-weight: 400;
}

.inner-h3 {
	font-family: var( --ff-display );
	font-size: var( --fs-h3 );
	line-height: var( --lh-h3 );
	font-weight: 400;
}

/* Figma: "Móvil/h3 usa Source Sans 3 en lugar de Playfair Display (legibilidad en tamaños pequeños)". */
@media ( max-width: 1279.98px ) {
	.inner-h3 {
		font-family: var( --ff-body );
	}
}

.inner-body-xl {
	font-family: var( --ff-body );
	font-size: var( --fs-body-xl );
	line-height: var( --lh-body-xl );
	font-weight: 400;
}

.inner-body-lg {
	font-family: var( --ff-body );
	font-size: var( --fs-body-lg );
	line-height: var( --lh-body-lg );
	font-weight: 400;
}

.inner-p {
	font-family: var( --ff-body );
	font-size: var( --fs-body );
	line-height: var( --lh-body );
	font-weight: 400;
}

.inner-ui,
.inner-ui-bold,
.inner-menu-principal nav li a {
	font-family: var( --ff-body );
	font-size: var( --fs-ui );
	line-height: var( --lh-ui );
	font-weight: 400;
	letter-spacing: var( --ls-ui );
}
.inner-ui-bold {
	font-weight: 600;
}

.inner-small {
	font-family: var( --ff-body );
	font-size: var( --fs-small );
	line-height: var( --lh-small );
	font-weight: 400;
}

.inner-x-small {
	font-family: var( --ff-body );
	font-size: var( --fs-x-small );
	line-height: var( --lh-x-small );
	font-weight: 400;
}

.inner-caps,
.inner-footer-acordeon span.kt-blocks-accordion-title {
	font-family: var( --ff-body );
	font-size: var( --fs-caps );
	line-height: var( --lh-caps );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var( --ls-caps );
}

.inner-pdp-price {
	font-family: var( --ff-body );
	font-size: var( --fs-pdp-price );
	line-height: var( --lh-pdp );
	font-weight: 500;
}

.inner-pdp-price-off {
	font-family: var( --ff-body );
	font-size: var( --fs-pdp-price-off );
	line-height: var( --lh-pdp );
	font-weight: 500;
	text-decoration: line-through;
}

/* ------------------------------------------------------------
   DESIGN TOKENS · COLOR SYSTEM
   Fuente: Figma · Design System · node 3:21641
   15 variables semánticas.
   ------------------------------------------------------------ */
:root {
	/* Marca */
	--color-accent:          #4a3324; /* Fondo oscuro acento, badges de colección */
	--color-primary:         #615e32; /* Botón principal, CTAs, iconos activos */
	--color-primary-hover:   #b0a465; /* Estado hover del botón principal */
	--color-primary-active:  #4a481f; /* Estado pressed/active del botón */
	--color-primary-focus:   #4a481f; /* Estado focus del botón */
	--color-text-on-primary: #faf8f7; /* Texto sobre fondos de color primario */

	/* Texto */
	--color-text-primary:    #292c1a; /* Cuerpo de texto principal, títulos */
	--color-text-secondary:  #5c5c5a; /* Subtítulos, metadatos, texto secundario */
	--color-text-disabled:   #787878; /* Texto desactivado */

	/* Superficies */
	--color-surface:                 #faf8f7; /* Fondo global de la app */
	--color-surface-featured:        #f5f2ee; /* Fondo de sección de features/beneficios */
	--color-surface-featured-darker: #f3efe8; /* Fondo de hero y secciones destacadas */
	--color-surface-highlight:       #ebe8cb; /* Fondo de sección ritual/naturaleza */

	/* UI */
	--color-border:           #e0dedd; /* Bordes de inputs, tarjetas, contenedores */
	--color-step-inactive-bg: #e8e6e4; /* Indicadores de paso inactivos */
}

/* ------------------------------------------------------------
   UTILITY CLASSES · COLOR SYSTEM
   Mismos colores conectados en la Paleta Global de Kadence
   (Apariencia > Personalizar > Colores > Paleta Global,
   palette1-4 y palette7-10), disponibles aquí como clases sueltas
   para aplicar el color de un token a cualquier elemento.
   ------------------------------------------------------------ */
.inner-bg-accent {
	background-color: var( --color-accent );
}

.inner-bg-primary {
	background-color: var( --color-primary );
}

.inner-bg-primary-hover {
	background-color: var( --color-primary-hover );
}

.inner-bg-primary-active {
	background-color: var( --color-primary-active );
}

.inner-bg-surface {
	background-color: var( --color-surface );
}

.inner-bg-surface-featured {
	background-color: var( --color-surface-featured );
}

.inner-bg-surface-featured-darker {
	background-color: var( --color-surface-featured-darker );
}

.inner-bg-surface-highlight {
	background-color: var( --color-surface-highlight );
}

.inner-bg-step-inactive {
	background-color: var( --color-step-inactive-bg );
}

.inner-text-primary {
	color: var( --color-text-primary );
}

.inner-text-secondary {
	color: var( --color-text-secondary );
}

.inner-text-disabled {
	color: var( --color-text-disabled );
}

.inner-text-on-primary {
	color: var( --color-text-on-primary );
}

.inner-border {
	border-color: var( --color-border );
}

/* ------------------------------------------------------------
   UTILITY CLASSES · LAYOUT
   Mismo ancho/padding conectado en Kadence (Personalizar > Layout
   General > Content Max Width / Content Left/Right Edge Spacing),
   disponible como clase suelta para contenedores dentro de bloques.
   ------------------------------------------------------------ */
.inner-container {
	max-width: var( --container-width );
	margin-inline: auto;
	padding-inline: var( --container-padding );
}
/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
/* Cabecera: iguala el Middle Row al layout del Figma (logo / nav / iconos con justify-content: space-between) */
.ilr-header-middle-fix .kadence-header-row-inner {
	grid-template-columns: minmax(0px, auto) minmax(0px, 1fr) minmax(0px, auto);
}
.inner-header-icon img{
	width: 1.5rem;
	height: 1.5rem;
}
.wc-block-mini-cart .wc-block-mini-cart__button {
    padding: 0 !important;
    gap: 0 !important;
    position: relative;
}

.wc-block-mini-cart__button .wc-block-mini-cart__icon {
    display: none !important;
}

.wc-block-mini-cart__button::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-image: url('/wp-content/themes/inner-life-rituals-theme/assets/svg/cabecera-carrito.svg');
    mask-image: url('/wp-content/themes/inner-life-rituals-theme/assets/svg/cabecera-carrito.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.inner-footer-acordeon .kt-accordion-inner-wrap .wp-block-kadence-pane:not(:last-of-type) button.kt-blocks-accordion-header{
	border-bottom: none;
}
button.kt-blocks-accordion-header:focus {
	outline: none;
	background: none;
}