/* BrandTienda — base de los bloques de contenido.
   TODO va con :where() (0 especificidad): cualquier theme (y en particular
   el theme BrandTienda con su theme.css) pisa estos estilos. Es solo un
   fallback digno para que los bloques no se vean rotos en themes de terceros. */

:where(.bt-cats) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
}

/* Columnas elegidas por el comerciante en el bloque. SIN :where() a propósito:
   deben ganarle al default del theme (.bt-cats con 5 fijas). En pantallas
   chicas se colapsa a 2 como hace el theme. */
.bt-cats.bt-cats--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bt-cats.bt-cats--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bt-cats.bt-cats--cols-4 { grid-template-columns: repeat(4, 1fr); }
.bt-cats.bt-cats--cols-5 { grid-template-columns: repeat(5, 1fr); }
.bt-cats.bt-cats--cols-6 { grid-template-columns: repeat(6, 1fr); }
.bt-cats.bt-cats--cols-7 { grid-template-columns: repeat(7, 1fr); }
.bt-cats.bt-cats--cols-8 { grid-template-columns: repeat(8, 1fr); }
.bt-cats.bt-cats--cols-9 { grid-template-columns: repeat(9, 1fr); }
.bt-cats.bt-cats--cols-10 { grid-template-columns: repeat(10, 1fr); }
.bt-cats.bt-cats--cols-11 { grid-template-columns: repeat(11, 1fr); }
.bt-cats.bt-cats--cols-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 781px) {
	.bt-cats.bt-cats--cols-3,
	.bt-cats.bt-cats--cols-4,
	.bt-cats.bt-cats--cols-5,
	.bt-cats.bt-cats--cols-6 { grid-template-columns: repeat(3, 1fr); }
	.bt-cats.bt-cats--cols-7,
	.bt-cats.bt-cats--cols-8 { grid-template-columns: repeat(4, 1fr); }
	.bt-cats.bt-cats--cols-9,
	.bt-cats.bt-cats--cols-10,
	.bt-cats.bt-cats--cols-11,
	.bt-cats.bt-cats--cols-12 { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 480px) {
	.bt-cats[class*="bt-cats--cols-"] { grid-template-columns: repeat(2, 1fr); }
}

/* Slide/banner diseñado: la imagen entera es el link. */
:where(a.bt-slide--link) {
	display: block;
	text-decoration: none;
}

:where(.bt-cat) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 1rem 0.5rem;
	text-align: center;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--md, 10px);
	background: var(--wp--preset--color--surface, #f4f4f2);
	color: var(--wp--preset--color--contrast, #16181d);
}

:where(.bt-cat__emoji) {
	font-size: 1.75rem;
	line-height: 1;
}

:where(.bt-cat__emoji--initial) {
	font-weight: 700;
	color: var(--wp--preset--color--primary, #0e7a5f);
}

:where(.bt-cat__img) {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
}

:where(.bt-cat__name) { font-weight: 600; }
:where(.bt-cat__count) { font-size: 0.8125rem; opacity: 0.7; }

:where(.bt-cats--empty),
:where(.bt-ofertas-empty) {
	padding: 1.5rem;
	text-align: center;
	border: 1px dashed var(--wp--preset--color--line, #e6e6e2);
	border-radius: var(--wp--custom--radius--md, 10px);
	color: var(--wp--preset--color--muted, #6b7076);
}

/* --- CTA (fallback para themes de terceros; el theme BrandTienda lo pisa). --- */

:where(.bt-promo) {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 3rem 1.5rem;
	border-radius: var(--wp--custom--radius--lg, 16px);
	color: var(--wp--preset--color--primary-ink, #fff);
	background: linear-gradient(120deg, var(--wp--preset--color--primary, #0e7a5f) 0%, color-mix(in srgb, var(--wp--preset--color--primary, #0e7a5f) 55%, var(--wp--preset--color--accent, #e8632a)) 100%);
}

:where(.bt-promo--plain) {
	background: var(--wp--preset--color--surface, #f4f4f2);
	color: var(--wp--preset--color--contrast, #16181d);
}

:where(.bt-promo__eyebrow) {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
}

:where(.bt-promo__text) { margin: 0 auto 1.4rem; max-width: 46ch; opacity: 0.92; }

/* --- Slideshow (front + editor). --- */

:where(.bt-slideshow) {
	position: relative;
}

:where(.bt-slideshow__track) {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

:where(.bt-slideshow__track)::-webkit-scrollbar { display: none; }

:where(.bt-slideshow .bt-slide) {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(120deg, var(--wp--preset--color--primary, #0e7a5f) 0%, color-mix(in srgb, var(--wp--preset--color--primary, #0e7a5f) 55%, var(--wp--preset--color--accent, #e8632a)) 100%);
}

:where(.bt-slide__img) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El slide puede traer imagen aparte para celular: <picture> con la de
   escritorio + <source media> para celular. display:contents deja la <img>
   como hija directa de .bt-slide, así valen las reglas de arriba y la
   adyacencia .bt-slide__img + .bt-slide__content. */
:where(.bt-slide picture) { display: contents; }

:where(.bt-slide__content) {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #fff;
	padding: 2.5rem 1.25rem;
	max-width: 640px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

:where(.bt-slide__img) + :where(.bt-slide__content)::before {
	content: "";
	position: absolute;
	inset: -100vh -100vw;
	z-index: -1;
	background: rgba(0, 0, 0, 0.32);
}

:where(.bt-slide__eyebrow) {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.9;
}

:where(.bt-slide__title) { margin: 0 0 0.5rem; color: inherit; }
:where(.bt-slide__text) { margin: 0 0 1.2rem; opacity: 0.95; }

:where(.bt-slide__badge) {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.2rem 0.7rem;
	font-weight: 800;
	border-radius: 999px;
	background: var(--wp--preset--color--accent, #e8632a);
	color: #fff;
}

:where(.bt-slideshow__dots) {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.8rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	z-index: 2;
}

:where(.bt-slideshow__dots button) {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
}

:where(.bt-slideshow__dots button[aria-current="true"]) { background: #fff; }

:where(.bt-slideshow__arrow) {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}

:where(.bt-slideshow__arrow--prev) { left: 0.8rem; }
:where(.bt-slideshow__arrow--next) { right: 0.8rem; }

/* Editor: slides apilados + aviso de promo. */
.bt-slideshow--editor .bt-slideshow__promo-note {
	padding: 0.8rem 1.2rem;
	margin-bottom: 0.5rem;
	border: 2px dashed var(--wp--preset--color--accent, #e8632a);
	border-radius: var(--wp--custom--radius--md, 10px);
	font-weight: 600;
}

.bt-slideshow--editor .bt-slide {
	min-height: 220px;
	margin-bottom: 0.75rem;
	border-radius: var(--wp--custom--radius--md, 10px);
}

/* --- Newsletter. --- */

:where(.bt-newsletter) {
	text-align: center;
	padding: 3rem 1.5rem;
	border-radius: var(--wp--custom--radius--lg, 16px);
	background: var(--wp--preset--color--surface, #f4f4f2);
}

:where(.bt-newsletter__title) { margin: 0 0 0.4rem; }
:where(.bt-newsletter__text) { margin: 0 auto 1.4rem; max-width: 46ch; color: var(--wp--preset--color--muted, #6b7076); }

:where(.bt-newsletter__form) {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	max-width: 480px;
	margin: 0 auto;
}

:where(.bt-newsletter__input) {
	flex: 1 1 240px;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wp--preset--color--line, #e6e6e2);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font: inherit;
}

:where(.bt-newsletter__btn) {
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--primary, #0e7a5f);
	color: var(--wp--preset--color--primary-ink, #fff);
	font-weight: 600;
	cursor: pointer;
}

:where(.bt-newsletter__msg) { flex-basis: 100%; margin: 0.6rem 0 0; font-weight: 600; }

/* --- Testimonios. --- */

:where(.bt-testimonials__title) { text-align: center; margin: 0 0 1.5rem; }

:where(.bt-testimonials__grid) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

:where(.bt-testimonial) {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--line, #e6e6e2);
	border-radius: var(--wp--custom--radius--lg, 16px);
	background: var(--wp--preset--color--base, #fff);
}

:where(.bt-testimonial__img) {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md, 10px);
	margin-bottom: 0.9rem;
}

:where(.bt-testimonial__quote) {
	margin: 0 0 0.8rem;
	border: 0;
	padding: 0;
	font-style: italic;
}

:where(.bt-testimonial__meta) { font-size: 0.875rem; color: var(--wp--preset--color--muted, #6b7076); }
:where(.bt-testimonial__stars) { color: var(--wp--preset--color--accent, #e8632a); letter-spacing: 0.1em; }

/* --- FAQ. --- */

:where(.bt-faq) { max-width: 720px; margin-inline: auto; }
:where(.bt-faq__title) { text-align: center; margin: 0 0 1.25rem; }

:where(.bt-faq__item) {
	border: 1px solid var(--wp--preset--color--line, #e6e6e2);
	border-radius: var(--wp--custom--radius--md, 10px);
	margin-bottom: 0.6rem;
	padding: 0.9rem 1.1rem;
	background: var(--wp--preset--color--base, #fff);
}

:where(.bt-faq__q) { font-weight: 600; cursor: pointer; }
:where(.bt-faq__a) { margin: 0.7rem 0 0; color: var(--wp--preset--color--muted, #6b7076); }

/* Media opcional por ítem: imagen (lazy) + video embebido (YouTube/Vimeo).
   El JSON-LD sigue siendo texto puro — la media es visual, no va al schema. */
:where(.bt-faq__a) :where(img) { max-width: 100%; height: auto; margin-top: 0.9rem; border-radius: var(--wp--custom--radius--md, 8px); }
:where(.bt-faq__a) :where(.bt-faq__video) { position: relative; margin-top: 0.9rem; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--wp--custom--radius--md, 8px); background: #000; }
:where(.bt-faq__a) :where(.bt-faq__video iframe) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Placeholder del editor (bloque solo-display). Acá, no en admin.css,
   porque el bloque solo se ve dentro del editor. */
.bt-faq--placeholder .bt-faq__placeholder-inner {
	border: 1px dashed var(--wp--preset--color--line, #dcdcde);
	border-radius: var(--wp--custom--radius--md, 8px);
	padding: 1.25rem;
	background: var(--wp--preset--color--surface, #fafafa);
	text-align: center;
}
.bt-faq--placeholder .bt-faq__placeholder-msg { margin: 0 0 0.8rem; color: var(--wp--preset--color--muted, #6b7076); }
.bt-faq--placeholder .bt-faq__placeholder-cta { margin: 0 0 1rem; }
.bt-faq--placeholder .bt-faq__placeholder-ghost { display: grid; gap: 6px; opacity: 0.55; }
.bt-faq--placeholder .bt-faq__placeholder-row { display: flex; gap: 8px; padding: 8px 12px; border: 1px solid var(--wp--preset--color--line, #e6e6e2); border-radius: 6px; background: #fff; }
.bt-faq--placeholder .bt-faq__placeholder-row span { flex: 1; height: 8px; border-radius: 4px; background: var(--wp--preset--color--line, #e6e6e2); }

/* --- Countdown. --- */

/* Card contenido. Auto-armado desde la promo: con imagen va split
   (imagen | texto+reloj) en desktop; sin imagen, centrado. */
:where(.bt-countdown) {
	max-width: 920px;
	margin-inline: auto;
	background: var(--wp--preset--color--surface, #fafafa);
	border: 1px solid var(--wp--preset--color--line, #e6e6e2);
	border-radius: var(--wp--custom--radius--lg, 16px);
	box-shadow: 0 8px 30px rgba(16, 24, 32, 0.08);
	overflow: hidden;
}
:where(.bt-countdown__media) { margin: 0; }
:where(.bt-countdown__img) { display: block; width: 100%; height: auto; }
:where(.bt-countdown__body) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.6rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}
:where(.bt-countdown__eyebrow) {
	margin: 0; font-size: 0.78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary, #d6006e);
}
:where(.bt-countdown__title) { margin: 0; font-weight: 800; line-height: 1.15; font-size: clamp(1.15rem, 2.4vw, 1.6rem); }
:where(.bt-countdown__desc) { margin: 0; color: var(--wp--preset--color--muted, #6b7076); }
:where(.bt-countdown__units) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.4rem; }

:where(.bt-countdown__unit) {
	display: flex;
	flex-direction: column;
	min-width: 64px;
	padding: 0.6rem 0.4rem;
	border-radius: var(--wp--custom--radius--md, 10px);
	background: var(--wp--preset--color--primary, #0e7a5f);
	color: var(--wp--preset--color--primary-ink, #fff);
}

:where(.bt-countdown__unit strong) { font-size: 1.5rem; line-height: 1.1; }
:where(.bt-countdown__unit small) { opacity: 0.85; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* Split solo en desktop: imagen a un lado, texto+reloj al otro. Móvil apila
   (imagen arriba, cuerpo abajo) por el flujo normal, sin esta grilla. */
@media (min-width: 782px) {
	:where(.bt-countdown--split) { display: grid; grid-template-columns: minmax(0, 0.85fr) 1fr; align-items: stretch; }
	/* La figura (grid item) se estira a la altura de la fila; flex + img a alto
	   completo hacen que la foto llene la columna: su borde inferior queda a la
	   misma línea que el del card, sin franja vacía debajo. */
	:where(.bt-countdown--split .bt-countdown__media) { display: flex; height: 100%; }
	:where(.bt-countdown--split .bt-countdown__img) { width: 100%; height: 100%; object-fit: cover; }
	:where(.bt-countdown--split .bt-countdown__body) { text-align: left; align-items: flex-start; }
	:where(.bt-countdown--split .bt-countdown__units) { justify-content: flex-start; }
}

/* Placeholder del bloque Ofertas — solo en el editor. */
.bt-ofertas-placeholder {
	padding: 1.75rem;
	text-align: center;
	border: 2px dashed var(--wp--preset--color--line, #e6e6e2);
	border-radius: var(--wp--custom--radius--lg, 16px);
	background: var(--wp--preset--color--surface, #f4f4f2);
}

.bt-ofertas-placeholder strong { display: block; font-size: 1.1rem; margin-bottom: 0.4rem; }
.bt-ofertas-placeholder p { margin: 0; color: var(--wp--preset--color--muted, #6b7076); }