/*
Theme Name: Alwaystag
Theme URI: https://alwaystag.com
Author: Alwaystag
Description: Tema de bloques para Alwaystag. Pagina de producto de conversion alta: barra de anuncio, marquesina, galeria, tarjetas de variante, acordeon, tabla comparativa y barra de compra fija.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alwaystag
Tags: full-site-editing, block-patterns, e-commerce
*/

:root {
	--tg-negro: #0B2E22;   /* verde bosque: hace de "negro" de la marca */
	--tg-carbon: #14432F;  /* secciones oscuras */
	--tg-amarillo: #A3E635;/* lima: el color de accion */
	--tg-rojo: #D92D20;    /* solo semantico: avisos y "No" de la tabla */
	--tg-verde: #16A34A;
	--tg-borde: #DCE5D8;
	--tg-gris: #5F6B5C;
	--tg-crema: #F4F7F0;
	--tg-radio: 6px;
}

/* ============================================================
   1. BARRA DE ANUNCIO + MARQUESINA
   ============================================================ */
.tg-topbar {
	background: var(--tg-negro);
	color: #fff;
	text-align: center;
	padding: 0.7rem 1rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tg-marquee {
	background: var(--tg-amarillo);
	color: var(--tg-negro);
	overflow: hidden;
	white-space: nowrap;
	padding: 0.55rem 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tg-marquee__track {
	display: inline-block;
	animation: tg-scroll 28s linear infinite;
	will-change: transform;
}

.tg-marquee__track span { padding: 0 2.5rem; }

@keyframes tg-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Respeta a quien pide menos movimiento: la marquesina se queda quieta */
@media (prefers-reduced-motion: reduce) {
	.tg-marquee__track { animation: none; }
}

/* ============================================================
   2. CABECERA
   ============================================================ */
.tg-header {
	border-bottom: 1px solid var(--tg-borde);
	padding: 1.1rem 1.5rem;
}

.tg-header__inner {
	max-width: 1340px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}

.tg-header__logo {
	font-weight: 900;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tg-negro);
	justify-self: center;
	white-space: nowrap;
}

.tg-header__logo mark {
	background: var(--tg-negro);
	color: #fff;
	padding: 0 0.28em;
}

.tg-header__nav {
	display: flex;
	gap: 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.tg-header__nav a { text-decoration: none; color: var(--tg-negro); }
.tg-header__nav a:hover { color: var(--tg-verde); }
.tg-header__actions { justify-self: end; display: flex; gap: 1rem; align-items: center; }

/* Contador del carrito: es el unico aviso de que anadir ha funcionado. */
.tg-header__carrito { position: relative; display: inline-flex; }
.tg-header__cuenta {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.28rem;
	border-radius: 999px;
	background: var(--tg-amarillo);
	color: var(--tg-negro);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.15rem;
	text-align: center;
}

@media (max-width: 800px) {
	.tg-header__inner { grid-template-columns: 1fr auto; }
	.tg-header__nav { display: none; }
	.tg-header__logo { justify-self: start; }
}

/* ============================================================
   3. HERO DE PRODUCTO
   ============================================================ */
.tg-hero {
	max-width: 1340px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 3rem;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3.5rem;
	align-items: start;
}

@media (max-width: 980px) {
	.tg-hero { grid-template-columns: 1fr; gap: 2rem; }
}

.tg-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	flex-wrap: wrap;
}

.tg-rating__stars { color: var(--tg-amarillo); letter-spacing: 0.1em; font-size: 1rem; }
.tg-rating strong { font-weight: 700; }

.tg-hero__quote {
	font-style: italic;
	color: var(--tg-gris);
	margin: 0.35rem 0 1rem;
	font-size: 0.9375rem;
}

.tg-hero h1 { margin: 0 0 0.5rem; }

.tg-hero__sub {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
}

.tg-hero__desc { color: #333; margin: 0 0 1.5rem; }

/* Aviso critico — el "solo iPhone". Rojo y con borde: imposible pasarlo por alto */
.tg-alert {
	display: block;
	background: #FEF3F2;
	border: 2px solid var(--tg-rojo);
	border-radius: var(--tg-radio);
	color: #912018;
	padding: 0.85rem 1rem;
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
}

/* Lista de beneficios con icono */
.tg-bullets { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; }

.tg-bullets li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.tg-bullets svg { flex: 0 0 22px; width: 22px; height: 22px; stroke: var(--tg-verde); }

/* ============================================================
   4. TARJETAS DE VARIANTE
   ============================================================ */
.tg-choose {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tg-choose::before, .tg-choose::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--tg-verde);
}

.tg-variants { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin: 0 0 1.5rem; }

@media (max-width: 520px) { .tg-variants { grid-template-columns: 1fr; } }

.tg-variant {
	position: relative;
	border: 2px solid var(--tg-borde);
	border-radius: var(--tg-radio);
	padding: 1.6rem 1rem 1.1rem;
	text-align: center;
	background: #fff;
}

.tg-variant--activa { border-color: var(--tg-verde); background: #F0FDF4; }

.tg-variant__badge {
	position: absolute;
	top: -0.7rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--tg-verde);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 3px;
	white-space: nowrap;
}

.tg-variant--alt .tg-variant__badge { background: var(--tg-negro); }
.tg-variant__nombre { font-weight: 700; font-size: 1.0625rem; margin: 0 0 0.5rem; }

.tg-variant__tag {
	display: inline-block;
	border: 1px solid var(--tg-borde);
	border-radius: 4px;
	padding: 0.3rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0 0 0.7rem;
}

.tg-variant__precio { color: var(--tg-verde-oscuro, #14532D); font-weight: 800; font-size: 1.375rem; }
.tg-variant__antes { color: var(--tg-gris); text-decoration: line-through; font-size: 0.875rem; }

/* ============================================================
   5. STOCK, CTA, PAGOS, MICRO-RESENA
   ============================================================ */
.tg-stock {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.9375rem;
	margin: 0 0 0.9rem;
}

.tg-stock__punto {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--tg-verde);
	flex: 0 0 9px;
}

.tg-stock--bajo .tg-stock__punto { background: var(--tg-rojo); }

.tg-cta,
.woocommerce div.product form.cart .button {
	display: block;
	width: 100%;
	background: var(--tg-amarillo);
	color: var(--tg-negro);
	border: 0;
	border-radius: var(--tg-radio);
	padding: 1.15rem 2rem;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tg-cta:hover,
.woocommerce div.product form.cart .button:hover { background: #8FD119; }

.tg-payments { display: flex; gap: 0.4rem; justify-content: center; margin: 0.9rem 0 0; flex-wrap: wrap; }

.tg-payments span {
	border: 1px solid var(--tg-borde);
	border-radius: 4px;
	padding: 0.25rem 0.5rem;
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--tg-gris);
	letter-spacing: 0.03em;
}

.tg-microreview {
	display: flex;
	gap: 0.9rem;
	background: var(--tg-crema);
	border-radius: var(--tg-radio);
	padding: 1rem;
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
}

.tg-microreview img { width: 46px; height: 46px; border-radius: 4px; object-fit: cover; flex: 0 0 46px; }
.tg-microreview__autor { color: var(--tg-gris); font-size: 0.8125rem; margin-top: 0.35rem; }

/* ============================================================
   6. BARRA DE COMPRA FIJA
   ============================================================ */
.tg-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	background: #fff;
	border-top: 1px solid var(--tg-borde);
	box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
	padding: 0.7rem 1.5rem;
	transform: translateY(110%);
	transition: transform 0.25s ease;
}

.tg-sticky.is-visible { transform: translateY(0); }

.tg-sticky__inner {
	max-width: 1340px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.tg-sticky__img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.tg-sticky__info { flex: 1; min-width: 0; }
.tg-sticky__nombre { font-weight: 700; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-sticky__precio { color: var(--tg-verde); font-weight: 800; }
.tg-sticky .tg-cta { width: auto; flex: 0 0 auto; padding: 0.85rem 2.5rem; font-size: 1rem; }

@media (max-width: 640px) {
	.tg-sticky__img, .tg-sticky__nombre { display: none; }
	.tg-sticky .tg-cta { flex: 1; padding: 0.85rem 1rem; }
}

/* ============================================================
   7. ONDAS Y SECCIONES OSCURAS
   ============================================================ */
.tg-oscuro { background: var(--tg-carbon); color: #fff; }
.tg-oscuro h2, .tg-oscuro h3 { color: #fff; }

.tg-wave { display: block; width: 100%; height: 60px; }
.tg-wave path { fill: var(--tg-carbon); }
.tg-wave--invertida { transform: rotate(180deg); }

.tg-seccion { max-width: 1340px; margin: 0 auto; padding: 3.5rem 1.5rem; }
.tg-seccion > h2 { text-align: center; margin: 0 0 2rem; }

/* ============================================================
   8. ACORDEON
   ============================================================ */
.tg-acordeon { max-width: 780px; margin: 0 auto; }

.tg-acordeon details {
	border-bottom: 1px solid rgba(255,255,255,0.16);
}

.tg-acordeon summary {
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 2rem 1.15rem 0;
	font-weight: 700;
	font-size: 1rem;
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.tg-acordeon summary::-webkit-details-marker { display: none; }

.tg-acordeon summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	width: 9px; height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.tg-acordeon details[open] summary::after { transform: rotate(-135deg); }

.tg-acordeon__cuerpo {
	padding: 0 0 1.3rem;
	color: rgba(255,255,255,0.82);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.tg-acordeon svg { flex: 0 0 20px; width: 20px; height: 20px; stroke: var(--tg-amarillo); }

/* ============================================================
   9. GALERIA DE USO Y TABLA COMPARATIVA
   ============================================================ */
.tg-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

@media (max-width: 800px) { .tg-galeria { grid-template-columns: 1fr; } }

.tg-galeria figure { margin: 0; }
.tg-galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--tg-radio); display: block; }

.tg-galeria figcaption {
	font-size: 0.875rem;
	font-weight: 600;
	margin-top: 0.6rem;
	text-align: center;
}

.tg-compara-wrap { overflow-x: auto; }

.tg-compara {
	width: 100%;
	min-width: 460px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.9375rem;
}

.tg-compara th, .tg-compara td { padding: 0.9rem 1rem; text-align: center; }
.tg-compara thead th { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }

.tg-compara tbody th {
	text-align: left;
	background: var(--tg-carbon);
	color: #fff;
	font-weight: 700;
	width: 46%;
}

.tg-compara tbody tr:first-child th { border-top-left-radius: var(--tg-radio); }
.tg-compara tbody tr:last-child th { border-bottom-left-radius: var(--tg-radio); }
.tg-compara td { border: 1px solid var(--tg-borde); border-left: 0; }
.tg-compara .si { color: var(--tg-verde); font-weight: 800; font-size: 1.125rem; }
.tg-compara .no { color: var(--tg-rojo); font-weight: 800; font-size: 1.125rem; }

/* ============================================================
   10. BLOQUE DE GARANTIA
   ============================================================ */
.tg-garantia { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

@media (max-width: 880px) { .tg-garantia { grid-template-columns: 1fr; gap: 1.5rem; } }

.tg-garantia img { width: 100%; border-radius: var(--tg-radio); display: block; }
.tg-garantia h2 { text-align: left; }
.tg-garantia h2 em { color: var(--tg-verde); font-style: normal; }

/* Hueco marcado donde falta una foto real */
.tg-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: repeating-linear-gradient(45deg, #F0F0F0 0 12px, #E7E7E7 12px 24px);
	border: 2px dashed #C4C4C4;
	border-radius: var(--tg-radio);
	color: var(--tg-gris);
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: center;
	padding: 1rem;
}

/* ============================================================
   11. WOOCOMMERCE
   ============================================================ */
.woocommerce div.product .product_title { font-weight: 700; letter-spacing: -0.01em; }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--tg-verde);
	font-weight: 800;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--tg-amarillo);
	color: var(--tg-negro);
	border-radius: var(--tg-radio);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: #8FD119; color: var(--tg-negro); }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--tg-amarillo);
	background: var(--tg-crema);
	font-size: 0.9375rem;
}

/* Foco visible en toda la tienda */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--tg-amarillo);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   GALERIA DE PRODUCTO
   Sin el slider de WooCommerce la galeria se queda a opacity:0, porque
   ese estilo lo pone el propio plugin esperando que su JS lo revierta.
   ------------------------------------------------------------------ */
.woocommerce-product-gallery {
	opacity: 1 !important;
	margin: 0;
}

.woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La primera imagen es la foto limpia de producto: ocupa el ancho entero */
.woocommerce-product-gallery__wrapper > :first-child { grid-column: 1 / -1; }

.woocommerce-product-gallery__image { margin: 0; }

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--tg-borde);
	border-radius: var(--tg-radio);
	background: #fff;
}

.woocommerce-product-gallery__trigger { display: none; }

@media (max-width: 640px) {
	.woocommerce-product-gallery__wrapper { grid-template-columns: 1fr; }
}

/* Una sola opcion de compra: tarjeta a ancho completo en vez de media */
.tg-variants:has(> .tg-variant:only-child) { grid-template-columns: 1fr; }

/* ==================================================================
   PROMOCION: barra con contador
   ================================================================== */
.tg-promo {
	background: var(--tg-negro);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 1.5rem;
	flex-wrap: wrap;
	padding: 0.7rem 1rem;
	font-size: 0.875rem;
	text-align: center;
}

.tg-promo strong { color: var(--tg-amarillo); }

.tg-promo__codigo,
.tg-modal__codigo {
	font-family: inherit;
	font-weight: 800;
	letter-spacing: 0.08em;
	cursor: pointer;
	position: relative;
}

.tg-promo__codigo {
	background: transparent;
	border: 1px dashed var(--tg-amarillo);
	color: var(--tg-amarillo);
	border-radius: 4px;
	padding: 0.15rem 0.55rem;
	font-size: 0.8125rem;
}

.tg-promo__codigo:hover { background: rgba(163, 230, 53, 0.15); }

.tg-promo__reloj { font-variant-numeric: tabular-nums; opacity: 0.9; }
.tg-promo__cuenta { font-weight: 700; color: #fff; }

/* Confirmacion de copiado, sin mover nada de sitio */
.is-copiado::after {
	content: "Copiado";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	background: var(--tg-verde);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0;
	padding: 0.2rem 0.5rem;
	border-radius: 3px;
	white-space: nowrap;
}

/* ==================================================================
   POP-UP
   ================================================================== */
.tg-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; }

/* El display:grid de arriba es una regla de clase y gana al display:none que
   el navegador aplica al atributo [hidden], asi que sin esto el pop-up no se
   oculta nunca: ni al cargar ni al cerrarlo. */
.tg-modal[hidden] { display: none !important; }
.tg-modal__fondo { position: absolute; inset: 0; background: rgba(11, 46, 34, 0.72); }

.tg-modal__caja {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: 420px;
	width: 100%;
	padding: 2.5rem 2rem 2rem;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0,0,0,0.3);
	border-top: 6px solid var(--tg-amarillo);
}

.tg-modal__x {
	position: absolute;
	top: 0.5rem; right: 0.75rem;
	background: none; border: 0;
	font-size: 1.75rem; line-height: 1;
	color: var(--tg-gris);
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}

.tg-modal__pre {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tg-verde);
	margin: 0 0 0.35rem;
}

.tg-modal__caja h2 { margin: 0 0 0.6rem; font-size: 2rem; }
.tg-modal__texto { font-size: 0.9375rem; color: var(--tg-gris); margin: 0 0 1.25rem; }

.tg-modal__codigo {
	display: block;
	width: 100%;
	background: var(--tg-crema);
	border: 2px dashed var(--tg-verde);
	color: var(--tg-negro);
	border-radius: 6px;
	padding: 0.9rem;
	font-size: 1.375rem;
	margin: 0 0 1rem;
}

.tg-modal__codigo small {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tg-gris);
	margin-top: 0.25rem;
}

.tg-modal__no {
	background: none; border: 0;
	color: var(--tg-gris);
	font-family: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
	cursor: pointer;
	margin-top: 0.9rem;
}

/* ==================================================================
   RESENAS
   ================================================================== */
.tg-resenas { background: var(--tg-crema); max-width: none; }
.tg-resenas > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.tg-resenas__vacio { text-align: center; color: var(--tg-gris); font-size: 0.9375rem; }

.tg-resenas .comment-form { margin-top: 2rem; }

.tg-resenas .comment-form input[type="text"],
.tg-resenas .comment-form input[type="email"],
.tg-resenas .comment-form textarea {
	width: 100%;
	border: 1px solid var(--tg-borde);
	border-radius: 6px;
	padding: 0.7rem;
	font-family: inherit;
	font-size: 0.9375rem;
	background: #fff;
}

.tg-resenas .commentlist { list-style: none; padding: 0; margin: 0 0 2rem; }

.tg-resenas .commentlist li {
	background: #fff;
	border: 1px solid var(--tg-borde);
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1rem;
}

.tg-resenas .star-rating { color: var(--tg-verde); }
.tg-resenas .woocommerce-review__verified { color: var(--tg-verde); font-weight: 700; font-size: 0.8125rem; }

/* ==================================================================
   FAQ — mismo acordeon, sobre fondo claro
   ================================================================== */
.tg-faq { max-width: 900px; }

.tg-acordeon--claro details { border-bottom: 1px solid var(--tg-borde); }
.tg-acordeon--claro summary { color: var(--tg-negro); }
.tg-acordeon--claro .tg-acordeon__cuerpo { color: #3F4A3D; }
.tg-acordeon--claro .tg-acordeon__cuerpo p { margin: 0; }

/* Tarjeta de variante como boton seleccionable */
button.tg-variant { font-family: inherit; cursor: pointer; width: 100%; }
button.tg-variant:hover { border-color: var(--tg-verde); }
.tg-variant__muestra {
	display: block;
	margin: 0 auto 0.7rem;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	border: 1px solid var(--tg-borde);
	box-shadow: inset 0 -2px 6px rgba(0,0,0,0.12);
}

/* El desplegable de variaciones sigue en el formulario, porque es quien
   manda sobre el precio y el boton, pero lo conducen las tarjetas de color
   de arriba. WooCommerce carga su hoja despues que la del tema y su regla
   gana por orden, de ahi el !important. */
.tg-hero form.cart table.variations,
.tg-hero form.cart .variations,
.tg-hero form.cart .reset_variations { display: none !important; }

.tg-hero form.cart .woocommerce-variation-price { display: none !important; }
.tg-hero form.cart .woocommerce-variation-availability { display: none !important; }

/* ==================================================================
   SELECTOR DE PACK Y COLORES
   ================================================================== */
.tg-variants--packs { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 620px) {
	.tg-variants--packs { grid-template-columns: 1fr; }
}

.tg-variant__unidad {
	font-size: 0.75rem;
	color: var(--tg-gris);
	margin: 0.2rem 0 0;
	font-weight: 600;
}

.tg-colores {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.tg-color {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #fff;
	border: 2px solid var(--tg-borde);
	border-radius: 6px;
	padding: 0.5rem 0.8rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tg-negro);
	cursor: pointer;
}

/* Misma trampa que en el pop-up: el display de la clase gana al display:none
   que el navegador aplica a [hidden], asi que sin esto se ven las nueve
   combinaciones de color a la vez en vez de las del pack elegido. */
.tg-color[hidden] { display: none !important; }

.tg-color:hover { border-color: var(--tg-verde); }
.tg-color.is-activo { border-color: var(--tg-verde); background: #F0FDF4; }
.tg-color__puntos { display: inline-flex; gap: 3px; }

.tg-color__puntos i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid #B9C4B5;
	display: block;
}

/* Aviso de envios separados: informativo, no alarmante */
.tg-nota-envio {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--tg-gris);
	background: var(--tg-crema);
	border-left: 3px solid var(--tg-verde);
	padding: 0.7rem 0.9rem;
	margin: 0 0 1.25rem;
}

/* Galeria de usos a cuatro columnas */
.tg-galeria--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) { .tg-galeria--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .tg-galeria--4 { grid-template-columns: 1fr; } }

/* ==================================================================
   TIRA DE USOS
   ================================================================== */
.tg-usos {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	border-top: 1px solid var(--tg-borde);
	border-bottom: 1px solid var(--tg-borde);
	padding: 1.1rem 0;
}

.tg-usos li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	text-align: center;
}

.tg-usos__icono {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tg-crema);
}

.tg-usos__icono svg { width: 24px; height: 24px; stroke: var(--tg-verde-700, #14532D); }

.tg-usos__texto {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

@media (max-width: 520px) {
	.tg-usos { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.5rem; }
}

/* ==================================================================
   REGALO INCLUIDO
   ================================================================== */
.tg-regalo {
	position: relative;
	border: 2px dashed var(--tg-verde);
	border-radius: 8px;
	background: #F0FDF4;
	padding: 1.6rem 1.1rem 1.1rem;
	margin: 1.5rem 0 0;
}

.tg-regalo__cinta {
	position: absolute;
	top: -0.75rem;
	left: 1rem;
	background: var(--tg-amarillo);
	color: var(--tg-negro);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	border-radius: 4px;
	margin: 0;
}

.tg-regalo__cuerpo { display: flex; gap: 1rem; align-items: center; }
.tg-regalo__foto { flex: 0 0 170px; }

.tg-regalo__foto img {
	width: 170px;
	height: 128px;
	object-fit: cover;
	/* La foto es apaisada: se desplaza el encuadre para que entren la trenza
	   y la anilla, no solo el centro. */
	object-position: 30% center;
	border-radius: 6px;
	display: block;
	background: #fff;
}

.tg-regalo__titulo { font-weight: 800; margin: 0 0 0.3rem; font-size: 1rem; }
.tg-regalo__texto p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: #35452F; }

.tg-placeholder--pequeno {
	aspect-ratio: 170 / 128;
	width: 170px;
	font-size: 0.625rem;
	padding: 0.5rem;
	line-height: 1.4;
}

.tg-placeholder--pequeno code {
	font-size: 0.5625rem;
	background: rgba(0,0,0,0.06);
	padding: 0.1rem 0.2rem;
	border-radius: 2px;
}

@media (max-width: 520px) {
	.tg-regalo__cuerpo { flex-direction: column; align-items: flex-start; }
}

/* ==================================================================
   BANDA DE ENVIO GRATUITO
   ================================================================== */
.tg-envio {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--tg-amarillo);
	color: var(--tg-negro);
	border-radius: 8px;
	padding: 0.9rem 1.1rem;
	margin: 0 0 1.5rem;
}

.tg-envio__icono {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	background: var(--tg-negro);
	color: var(--tg-amarillo);
}

.tg-envio__icono svg { width: 24px; height: 24px; }
.tg-envio__texto { display: flex; flex-direction: column; line-height: 1.25; }

.tg-envio__texto strong {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.tg-envio__texto small { font-size: 0.8125rem; font-weight: 600; }

/* ==================================================================
   GALERIA DE USOS — un apartado por sitio donde se engancha, con
   tantas fotos como haya subidas a la mediateca
   ================================================================== */
.tg-seccion__entrada {
	text-align: center;
	color: var(--tg-gris);
	margin: -1rem auto 2.5rem;
	max-width: 620px;
}

.tg-usos-galeria { display: grid; gap: 3rem; }

.tg-uso__cabecera {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 1.1rem;
}

.tg-uso__icono {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	background: var(--tg-amarillo);
	color: var(--tg-negro);
}

.tg-uso__icono svg { width: 24px; height: 24px; stroke: var(--tg-verde-700, #14532D); }

.tg-uso__cabecera h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.tg-uso__cabecera p {
	margin: 0.15rem 0 0;
	font-size: 0.9375rem;
	color: var(--tg-gris);
}

/* Rejilla que se adapta al numero de fotos: con 1 foto no se estira a
   todo el ancho, con 4 o mas se reparte en filas de hasta 4. */
.tg-uso__fotos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.tg-uso__fotos[data-n="1"] { grid-template-columns: minmax(0, 460px); }
.tg-uso__fotos[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.tg-uso__fotos[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-uso__fotos[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tg-uso__fotos figure { margin: 0; }

.tg-uso__fotos img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--tg-radio);
	display: block;
	background: var(--tg-crema, #F4F7F0);
}

.tg-uso__fotos--vacio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-uso__fotos .tg-placeholder { aspect-ratio: 4 / 5; }

.tg-uso__fotos .tg-placeholder { align-content: center; gap: 0.5rem; line-height: 1.4; }
.tg-uso__fotos .tg-placeholder small { font-weight: 600; display: block; margin-top: 0.4rem; }

.tg-uso__fotos .tg-placeholder code {
	display: inline-block;
	margin-top: 0.3rem;
	background: rgba(0, 0, 0, 0.07);
	border-radius: 4px;
	padding: 0.15rem 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
}

@media (max-width: 860px) {
	.tg-uso__fotos,
	.tg-uso__fotos--vacio,
	.tg-uso__fotos[data-n="2"],
	.tg-uso__fotos[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tg-uso__fotos[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tg-uso__fotos[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
	.tg-usos-galeria { gap: 2.25rem; }
}

@media (max-width: 480px) {
	.tg-uso__fotos,
	.tg-uso__fotos--vacio,
	.tg-uso__fotos[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tg-uso__cabecera h3 { font-size: 1.0625rem; }
}

/* ==================================================================
   TARJETA DE PRODUCTO DE LA PORTADA
   ================================================================== */
.tg-destacado {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
}

.tg-destacado__foto { display: block; }

.tg-destacado__foto img {
	width: 100%;
	border-radius: var(--tg-radio);
	display: block;
	background: var(--tg-crema, #F4F7F0);
}

.tg-destacado__info h3 { margin: 0 0 0.75rem; font-size: 1.75rem; letter-spacing: -0.01em; }
.tg-destacado__info h3 a { color: inherit; text-decoration: none; }
.tg-destacado__desc { margin: 0 0 1.25rem; color: #333; }

.tg-destacado__precio {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--tg-verde-700, #14532D);
}

.tg-destacado__precio del { opacity: 0.5; font-weight: 600; }

.tg-destacado__envio {
	display: inline-block;
	margin: 0 0 1.5rem;
	background: var(--tg-amarillo);
	color: var(--tg-negro);
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.35rem 0.7rem;
	border-radius: 4px;
}

.tg-destacado .tg-cta { display: inline-block; width: auto; }

@media (max-width: 860px) {
	.tg-destacado { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 3rem; }
	.tg-destacado__info h3 { font-size: 1.375rem; }
}

/* ==================================================================
   CONTENIDO DE PAGINAS (legales, seguimiento, sobre nosotros)
   ================================================================== */
.wp-block-post-content h2 {
	text-align: left;
	font-size: 1.5rem;
	margin: 2.5rem 0 0.75rem;
}

.wp-block-post-content h3 {
	text-align: left;
	font-size: 1.125rem;
	margin: 1.75rem 0 0.5rem;
}

.wp-block-post-content p { margin: 0 0 1rem; line-height: 1.7; }
.wp-block-post-content > *:first-child { margin-top: 0; }

/* ==================================================================
   FORMULARIO DE SEGUIMIENTO DE PEDIDO
   ================================================================== */
/* WooCommerce mete su propio parrafo de instrucciones como primer hijo del
   formulario. Duplica el texto que ya damos arriba y esta peor redactado,
   asi que se oculta en vez de sobrescribir la plantilla del plugin. */
form.track_order > p:first-child { display: none; }

form.track_order {
	background: var(--tg-crema, #F4F7F0);
	border: 1px solid var(--tg-borde, #DCE5D8);
	border-radius: var(--tg-radio);
	padding: 1.5rem;
	margin: 0 0 2.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
	align-items: end;
}

form.track_order .form-row { margin: 0; }
form.track_order .form-row-wide,
form.track_order .clear { grid-column: 1 / -1; }

form.track_order label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
}

form.track_order input[type="text"],
form.track_order input[type="email"] {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--tg-borde, #DCE5D8);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 0.9375rem;
}

form.track_order input:focus {
	outline: 2px solid var(--tg-verde, #16A34A);
	outline-offset: 1px;
	border-color: transparent;
}

@media (max-width: 620px) {
	form.track_order { grid-template-columns: 1fr; }
}

/* ==================================================================
   BLOQUE DE SEGUIMIENTO DEL PLUGIN (Advanced Shipment Tracking)
   ================================================================== */
/* El plugin reserva sitio para el logo del transportista. Con proveedor
   personalizado no hay logo y queda el icono de imagen rota, asi que se
   oculta el hueco entero en vez de dejar un cuadro gris por envio. */
.fluid_provider_img { display: none !important; }

.fluid_section > div {
	border: 1px solid var(--tg-borde, #DCE5D8);
	border-radius: var(--tg-radio);
	background: var(--tg-crema, #F4F7F0);
	padding: 0.9rem 1.1rem;
	margin: 0 0 0.75rem;
}

.fluid_section .tracking_provider { color: var(--tg-verde-700, #14532D); }
.fluid_section .order_status { font-size: 0.8125rem; color: var(--tg-gris, #5F6B5C); }