/* ============================================================
   dooth — Tokens globales (ancho, colores, tipografía)
   Carga en TODO el sitio. No cambia contenido ni estructura.
   ============================================================ */

:root {
	/* Ancho global del cuerpo del sitio */
	--ancho-body: 90vw;

	/* Paleta */
	--color-acento: #af9840;
	--color-primario: #000000;
	--color-texto: #1d1d1d;
	--color-fondo-1: #ffffff;
	--color-fondo-2: #e6e6e6;

	/* Tipografía única del sitio */
	--fuente-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   ANCHO GLOBAL 90vw
   Header, footer, contenido no-Elementor y containers boxed de Elementor.
   Las secciones full-width quedan excluidas (ver más abajo).
   ============================================================ */

/* Header / footer (hello-elementor) */
.header-inner,
.footer-inner {
	max-width: var(--ancho-body) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Contenido no-Elementor: tienda, single product, páginas.
   Se excluyen plantillas full-width / canvas de Elementor. */
body:not(.elementor-template-full-width):not(.elementor-template-canvas) .site-main {
	max-width: var(--ancho-body);
	margin-left: auto;
	margin-right: auto;
}

/* Tienda: sus wrappers propios (fila header + flex sidebar/grilla) son el
   contenedor externo, así que el 90vw va acá (no en el .site-main interno). */
.dooth-shop-header,
.dooth-shop-wrap {
	max-width: var(--ancho-body);
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   MARGEN INFERIOR DE PÁGINA (WooCommerce) — espacio antes del footer.
   NO toca el grid de productos ni su spacing interno; va en el contenedor
   principal de la página. Mismo valor en todas las páginas Woo.
   ============================================================ */
/* Tienda / categoría / etiqueta (archive-product): wrapper externo propio */
.dooth-shop-wrap {
	margin-bottom: 90px;
}
/* Producto individual, checkout, búsqueda: páginas del tema, contenedor .site-main */
body.single-product .site-main,
body.woocommerce-checkout .site-main,
body.search .site-main,
/* Carrito y mi cuenta: páginas Elementor full-width (sin .site-main) → raíz del contenido */
body.woocommerce-cart .elementor[data-elementor-type="wp-page"],
body.woocommerce-account .elementor[data-elementor-type="wp-page"] {
	margin-bottom: 90px;
}

@media (max-width: 1024px) {
	.dooth-shop-wrap,
	body.single-product .site-main,
	body.woocommerce-checkout .site-main,
	body.search .site-main,
	body.woocommerce-cart .elementor[data-elementor-type="wp-page"],
	body.woocommerce-account .elementor[data-elementor-type="wp-page"] {
		margin-bottom: 70px; /* tablet */
	}
}

@media (max-width: 767px) {
	.dooth-shop-wrap,
	body.single-product .site-main,
	body.woocommerce-checkout .site-main,
	body.search .site-main,
	body.woocommerce-cart .elementor[data-elementor-type="wp-page"],
	body.woocommerce-account .elementor[data-elementor-type="wp-page"] {
		margin-bottom: 60px; /* mobile */
	}
}

/* Containers boxed de Elementor (páginas construidas con Elementor, a futuro) */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-boxed > .e-con-inner {
	max-width: var(--ancho-body) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- EXCEPCIÓN: full-width nunca se limita --- */
.elementor-section.elementor-section-full_width > .elementor-container,
.e-con-full,
.e-con-full > .e-con-inner,
.ancho-completo,
.full-width,
[data-ancho="full"] {
	max-width: none !important;
}

/* ============================================================
   HOME — Slider / hero (Prime Slider)
   El background/imagen queda FULL-WIDTH (no se toca). Solo el bloque de
   CONTENIDO (texto + botón) respeta el ancho del body: alineado al mismo
   margen izquierdo que el resto del sitio, texto a la izquierda, con
   ancho máximo responsive.
   ============================================================ */

/* Contenido arranca a la izquierda (el skin lo centraba) */
.bdt-prime-slider-skin-general .bdt-slideshow-item {
	justify-content: flex-start !important;
}

/* Bloque de texto: borde izq = margen del body = (100% - 90vw)/2.
   100% = ancho del slide (full-width, sin scrollbar) → coincide EXACTO
   con el margen del resto del sitio (no usa 5vw, que sobra medio scrollbar).
   Sin margen izq propio del plugin; texto a la izquierda; máx 50vw. */
.bdt-prime-slider-skin-general .bdt-prime-slider-wrapper {
	margin-left: calc((100% - var(--ancho-body)) / 2) !important;
	margin-right: 0 !important;
	max-width: 50vw !important;
	text-align: left !important;
}

.bdt-prime-slider-skin-general .bdt-prime-slider-desc {
	text-align: left !important;
}

/* Tablet: ancho máx 65vw */
@media (max-width: 1024px) {
	.bdt-prime-slider-skin-general .bdt-prime-slider-wrapper {
		max-width: 65vw !important;
	}
}

/* Mobile: ancho máx 75vw */
@media (max-width: 767px) {
	.bdt-prime-slider-skin-general .bdt-prime-slider-wrapper {
		max-width: 75vw !important;
	}
}

/* ============================================================
   HOME — Hero slider: altura = padding + contenido, con MIN-HEIGHT de piso.
   Claves (verificado por inspección real en desktop/tablet/mobile):
   1) aspect-ratio:auto — el plugin (uikit) le fija al <ul> `aspect-ratio:16/9`,
      que inflaba el alto MÁS que el contenido. Al ser el slide activo `relative`,
      la parte inflada quedaba SIN cubrir → espacio en blanco enorme abajo (desktop)
      y, en la transición, el slide saliente (absolute, inset:0) solo cubría el alto
      del aspect-ratio → el resto se veía BLANCO = "flash". Matar el aspect-ratio hace
      que el <ul> mida exactamente el contenido y que los slides lo cubran entero.
   2) align-items:flex-start — el item es flex con `bdt-flex-middle` (centrado
      vertical); eso "comía" el padding-top (contenido no bajaba). Con flex-start el
      contenido va arriba y el padding-top manda.
   3) slide ACTIVO `position:relative` → su contenido define la altura y CRECE si el
      slide tiene más texto (min-height es piso, no tope): alto = max(min-height,
      padding + contenido) → ningún slide se corta.
   4) box-sizing border-box → min-height incluye el padding (alto total mínimo).
   El fondo es <img> absolute DENTRO del item (100%) → cubre todo el alto.
   Valores: desktop 320/120 min 520 · tablet 250/100 min 550 · mobile 180/70 min 480.
   No cambia background, contenido ni botón.
   ============================================================ */
.bdt-prime-slider-skin-general .bdt-slideshow-items {
	aspect-ratio: auto !important; /* mata el 16/9 del plugin (causa del flash + hueco) */
	min-height: 520px !important;  /* piso desktop; anti-colapso en la transición */
}

.bdt-prime-slider-skin-general .bdt-slideshow-items > .bdt-slideshow-item.bdt-active {
	position: relative !important; /* slide activo en flujo → define/crece la altura */
}

.bdt-prime-slider-skin-general .bdt-slideshow-item {
	align-items: flex-start !important; /* contenido arriba → el padding-top manda (no centrado) */
}

.bdt-prime-slider-skin-general .bdt-prime-slider-content {
	box-sizing: border-box;
	padding-top: 320px;    /* desktop */
	padding-bottom: 120px;
	min-height: 520px;      /* piso (incluye padding); crece con el contenido */
}

@media (max-width: 1024px) { /* tablet */
	.bdt-prime-slider-skin-general .bdt-slideshow-items {
		min-height: 550px !important;
	}
	.bdt-prime-slider-skin-general .bdt-prime-slider-content {
		padding-top: 250px;
		padding-bottom: 100px;
		min-height: 550px;
	}
}

@media (max-width: 767px) { /* mobile */
	.bdt-prime-slider-skin-general .bdt-slideshow-items {
		min-height: 480px !important;
	}
	.bdt-prime-slider-skin-general .bdt-prime-slider-content {
		padding-top: 180px;
		padding-bottom: 70px;
		min-height: 480px;
	}
}

/* ============================================================
   COLORES
   ============================================================ */
body {
	color: var(--color-texto);
	background-color: var(--color-fondo-1);
}

a {
	color: var(--color-acento);
}

/* ============================================================
   BOTONES GLOBALES — sistema .dooth-btn
   Réplica EXACTA del botón "BUY NOW" del home (Prime Slider, skin isolate):
   fondo transparente, borde negro fino, texto negro EN MAYÚSCULAS y flecha a la
   derecha en la misma línea. Hover = barrido dorado que entra DESDE LA DERECHA
   (.4s cubic-bezier, idéntico a la referencia) + texto y flecha en blanco +
   borde dorado + la flecha se desplaza.

   UNA sola definición controla TODOS los botones: editar este bloque = cambia
   en todo el sitio a la vez. `.dooth-btn` es la clase canónica; los selectores
   nativos (WooCommerce, Elementor, WordPress, formulario CF7, slider superior)
   comparten el MISMO bloque.

   El barrido y la flecha van como capas de `background-image` (no pseudo-
   elementos) para funcionar también en <input type="submit"> (form de contacto).
   La flecha se ancla en el borde derecho, justo donde nace el barrido, así el
   dorado ya está bajo la flecha blanca desde el primer frame (sin parpadeo).
   No toca los toggles de UI del shop (type="button") ni el buscador del header.
   El "BUY NOW" (skin isolate) NO se re-estila: es la referencia y ya lo es.
   ============================================================ */
.dooth-btn,
button[type="submit"],
button[type="reset"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
a.button,
.wp-block-button__link,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.bdt-prime-slider-skin-general .bdt-slide-btn {
	position: relative;
	background-color: transparent !important;             /* fondo transparente al reposo (= ref) */
	color: var(--color-primario) !important;              /* texto negro */
	border: 1.6px solid var(--color-primario) !important; /* borde negro fino */
	border-radius: 0 !important;                          /* esquinas rectas */
	padding: 13px 48px 13px 26px !important;              /* dcha. libre para la flecha */
	font-weight: 700 !important;
	text-transform: uppercase !important;                 /* texto en mayúsculas */
	text-decoration: none !important;
	/* Capa 1 (arriba): flecha → negra.  Capa 2 (abajo): barrido dorado, ancho 0. */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='10 5 15 9.5 10 14' fill='none' stroke='%23000000' stroke-width='1.4'/%3E%3Cline x1='4' y1='9.5' x2='16' y2='9.5' stroke='%23000000' stroke-width='1.4'/%3E%3C/svg%3E"),
		linear-gradient(var(--color-acento), var(--color-acento)) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: right 22px center, right center !important;
	background-size: 16px 16px, 0% 100% !important;
	transition:
		color .3s ease,
		border-color .3s ease,
		background-size .4s cubic-bezier(.42, 0, .58, 1),
		background-position .3s ease !important;
}

.dooth-btn:hover,
.dooth-btn:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
button[type="reset"]:hover,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover,
.button:focus-visible,
a.button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.elementor-button:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.bdt-prime-slider-skin-general .bdt-slide-btn:hover {
	color: var(--color-fondo-1) !important;               /* texto blanco */
	border-color: var(--color-acento) !important;         /* borde dorado (= ref) */
	/* Flecha → blanca sobre el dorado (que entra por la derecha) */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='10 5 15 9.5 10 14' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3Cline x1='4' y1='9.5' x2='16' y2='9.5' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E"),
		linear-gradient(var(--color-acento), var(--color-acento)) !important;
	background-size: 16px 16px, 100% 100% !important;     /* el barrido llena */
	background-position: right 18px center, right center !important; /* la flecha se desplaza */
}

/* Slider superior (skin general): oculta su icono-círculo propio; la flecha la
   pone el sistema .dooth-btn (capa background). Así queda igual que "BUY NOW". */
.bdt-prime-slider-skin-general .bdt-slide-btn-icon {
	display: none !important;
}

.woocommerce span.onsale {
	background-color: var(--color-acento);
	color: var(--color-fondo-1);
}

/* ============================================================
   HEADER DE PÁGINA (WooCommerce) — módulo unificado
   Réplica del módulo del "Cookie policy" (H1 + breadcrumb Yoast).
   MISMO componente en tienda / producto / carrito / checkout / mi cuenta /
   archive de categoría-tag / resultados de búsqueda. Se renderiza vía la
   función dooth_page_header() (functions.php) y el shortcode [dooth_page_header].
   Editar acá / en la función = cambia en TODAS las páginas a la vez.
   ============================================================ */
.dooth-page-header {
	width: 100%;
}

/* Fondo #E6E6E6 (banda ancho completo) + margen inferior del módulo.
   Full-mode: .dooth-page-header (tienda/categoría/producto/checkout).
   Bare-mode (carrito pág.12 / mi cuenta pág.14): el módulo va dentro de un
   contenedor Elementor, así que la banda va en su flexbox exterior (clase
   estable .elementor-element-{id}). Un solo lugar controla los valores. */
.dooth-page-header,
.elementor-element-938eea6,
.elementor-element-f56b519 {
	background-color: #E6E6E6;
	margin-bottom: 90px; /* desktop */
}

@media (max-width: 1024px) {
	.dooth-page-header,
	.elementor-element-938eea6,
	.elementor-element-f56b519 {
		margin-bottom: 70px; /* tablet */
	}
}

@media (max-width: 767px) {
	.dooth-page-header,
	.elementor-element-938eea6,
	.elementor-element-f56b519 {
		margin-bottom: 60px; /* mobile */
	}
}

/* Carrito / mi cuenta: el flexbox exterior trae 10px de padding por defecto;
   lo saco arriba/abajo para que la banda tenga el mismo alto que en full-mode
   (el padding interno del módulo 60/60/50 lo aporta el contenedor). */
.elementor-element-938eea6,
.elementor-element-f56b519 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Checkout: el módulo se inyecta vía the_content, dentro de .site-main (90vw).
   La banda gris se lleva a ancho completo con box-shadow + clip-path (no altera
   el layout ni genera scroll horizontal, a diferencia de width:100vw). El H1 y
   el breadcrumb siguen alineados al contenido (90vw). */
.site-main .dooth-page-header {
	box-shadow: 0 0 0 100vw #e6e6e6;
	clip-path: inset(0 -100vw);
}

/* Contenido boxed a 90vw, centrado (mismo borde que el resto del sitio) */
.dooth-page-header-inner {
	max-width: var(--ancho-body);
	margin-left: auto;
	margin-right: auto;
	padding: 60px 0; /* = padding del módulo original (desktop/tablet) */
}

@media (max-width: 767px) {
	.dooth-page-header-inner {
		padding: 50px 0; /* mobile, igual que el original */
	}
}

/* H1: mismo tamaño/tipografía/responsive que el módulo original (H1 global
   de Elementor). !important para ganarle a .elementor-kit-5 h1 (700/50px). */
.dooth-page-header-title {
	margin: 0;
	font-size: 50px !important;   /* desktop */
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: #000000;
}

/* Tablet (breakpoint Elementor ≤1024): H1 36px */
@media (max-width: 1024px) {
	.dooth-page-header-title { font-size: 36px !important; }
}

/* Mobile (breakpoint Elementor ≤767): H1 26px */
@media (max-width: 767px) {
	.dooth-page-header-title { font-size: 26px !important; }
}

/* Breadcrumb Yoast, debajo del H1 (mismo orden que el módulo original) */
.dooth-page-header-breadcrumb {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-texto);
}

/* Campo de cantidad (WooCommerce): número negro y con ancho suficiente.
   El reset del tema mete padding 8/16px y Woo fija 3.6em → el número quedaba
   apretado detrás de las flechas del spinner. Le doy ancho y padding cómodos. */
.woocommerce .quantity input.qty,
.woocommerce .quantity input.qty:focus {
	width: 4.5em !important;      /* ancho necesario para el número + flechas */
	padding: 8px 8px !important;  /* menos padding lateral */
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	opacity: 1 !important;
}

/* ============================================================
   FORMULARIO DE CONTACTO (CF7) — layout
   Único sitio con formulario CF7 = página Contact, así que estas reglas
   .wpcf7-form no afectan al resto del sitio. Dos cosas:
   1) Campos ocupan TODO el ancho de la columna (antes: input size=40 angosto).
   2) Nombre + Email en una fila (2 col) en desktop/tablet; apilados en mobile.
      Asunto y Mensaje siguen a fila completa cada uno.
   El botón (.doth-btn) NO se toca: lo estila el sistema de botones de arriba.
   ============================================================ */
.wpcf7-form {
	display: grid;
	grid-template-columns: 1fr;   /* mobile: todo apilado */
	gap: 18px;
}
.wpcf7-form > * {
	margin: 0;                    /* neutraliza el margen default de los <p> */
}
.wpcf7-form .hidden-fields-container {
	display: none;                /* fieldset oculto: fuera del grid (los hidden siguen enviándose) */
}

/* Label + wrapper en bloque para que el campo llene el ancho disponible */
.doth-form__row {
	display: block;
}
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}
.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
}

/* Desktop + tablet (≥768): Nombre y Email lado a lado */
@media (min-width: 768px) {
	.wpcf7-form {
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
	}
	.wpcf7-form > * {
		grid-column: 1 / -1;              /* Asunto, Mensaje y Enviar: fila completa */
	}
	.wpcf7-form > p:nth-of-type(1) {
		grid-column: 1 / 2;              /* Nombre (izquierda) */
	}
	.wpcf7-form > p:nth-of-type(2) {
		grid-column: 2 / 3;              /* Email (derecha) */
	}
}

/* ============================================================
   TIPOGRAFÍA — Open Sans en todo el texto (sin tocar iconos:
   las clases de iconos ganan por especificidad sobre selectores de elemento)
   ============================================================ */
body,
input,
button,
select,
textarea,
optgroup,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--fuente-base) !important;
}

/* ============================================================
   BUSCADOR DEL HEADER (Ivory Search, form 71) — estilo pill
   Cápsula transparente con borde acento + círculo acento con lupa.
   Texto e icono en var(--color-texto). Solo estilo; la funcionalidad
   de búsqueda de productos no se toca. Scoped a .is-form-id-71 (header).
   ============================================================ */

/* Cápsula/pill: borde acento, fondo transparente, esquinas redondas */
form.is-search-form.is-form-id-71 {
	display: flex !important;
	align-items: center;
	gap: 0;
	background: transparent !important;
	border: 2px solid var(--color-acento) !important;
	border-radius: 999px !important;
	padding: 3px !important;
	box-sizing: border-box;
	overflow: visible;
}

/* El label envuelve al input: que crezca y no fije ancho propio */
form.is-search-form.is-form-id-71 > label {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	display: flex;
	align-items: center;
}

/* Input transparente, texto color-texto, sin borde */
form.is-search-form.is-form-id-71 .is-search-input {
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0;
	height: 32px !important;
	padding: 0 14px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--color-texto) !important;
}

form.is-search-form.is-form-id-71 .is-search-input::placeholder {
	color: var(--color-texto) !important;
	opacity: .65;
}

/* Botón = círculo con fondo acento */
form.is-search-form.is-form-id-71 .is-search-submit {
	flex: 0 0 auto;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--color-acento) !important;
	background-color: var(--color-acento) !important;
	background-image: none !important; /* no hereda flecha/barrido del sistema .dooth-btn */
	border: 0 !important;
	border-radius: 50% !important;
	color: var(--color-texto) !important;
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

form.is-search-form.is-form-id-71 .is-search-submit:hover,
form.is-search-form.is-form-id-71 .is-search-submit:focus {
	background: var(--color-acento) !important;
	background-color: var(--color-acento) !important;
}

/* Icono lupa: sin borde ni fondo propio, centrado (H+V) dentro del círculo.
   El plugin le mete border 1px #ccc + fondo gris en hover; se anulan acá. */
form.is-search-form.is-form-id-71 .is-search-icon {
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	line-height: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

form.is-search-form.is-form-id-71 .is-search-icon:hover,
form.is-search-form.is-form-id-71 .is-search-icon:focus {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
}

form.is-search-form.is-form-id-71 .is-search-icon svg {
	width: 18px !important;
	height: 18px !important;
}

form.is-search-form.is-form-id-71 .is-search-icon svg,
form.is-search-form.is-form-id-71 .is-search-icon svg path {
	fill: var(--color-texto) !important;
	color: var(--color-texto) !important;
}

/* ============================================================
   HEADER — Badge contador del ícono de carrito
   Círculo en la esquina sup-der del ícono: fondo acento, número #fff.
   Vacío = oculto (sin "0"). Se actualiza vía fragments de WooCommerce.
   Solo agrega el badge; no toca el ícono.
   ============================================================ */
.dooth-cart-icon {
	position: relative;
	overflow: visible; /* que el badge no quede recortado */
}

.dooth-cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	z-index: 2;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--color-acento);
	color: #ffffff;
	font-family: var(--fuente-base);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none; /* el click sigue yendo al ícono/enlace */
}

/* Carrito vacío → sin badge (no mostrar "0") */
.dooth-cart-count--empty {
	display: none;
}