/* Molot — display font for headlines */
@font-face {
font-family: 'Molot';
src: url('../fonts/Molot.woff2') format('woff2'),
url('../fonts/Molot.woff') format('woff'),
url('../fonts/Molot.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* shadcn/ui — semantic tokens. Light mode is the default for the shop pages.
The dark navbar/footer/sections opt-in via the `.tb-dark` class. */
:root {
--background: 0 0% 100%;
--foreground: 240 10% 4%;
--card: 0 0% 100%;
--card-foreground: 240 10% 4%;
--muted: 240 5% 96%;
--muted-foreground: 240 4% 46%;
--border: 240 6% 90%;
--input: 0 0% 100%;
--ring: 0 67% 47%;
/* Tetra Bikes brand */
--brand-red: 357 71% 47%; /* #CC2229 */
--brand-red-soft: 0 100% 65%;
--brand-red-dark: 354 80% 39%;
--brand-red-fg: 0 0% 100%;
--brand-black: 0 0% 4%;
}
.tb-dark {
--background: 0 0% 4%;
--foreground: 0 0% 98%;
--card: 240 6% 7%;
--card-foreground: 0 0% 98%;
--muted: 240 4% 16%;
--muted-foreground: 240 5% 65%;
--border: 240 4% 18%;
--input: 240 6% 10%;
/* Explicit color so descendants `color: inherit` resolves to white-ish
instead of cascading up to body's light-mode foreground. */
color: hsl(var(--foreground));
}
/* Reset agresivo del body para matar la franja vacía debajo del footer.
- `body` siempre margin/padding 0 (Underscores no lo limpia).
- `html` sin !important: WP necesita poder setear `margin-top: 32px` cuando
la admin bar está visible (usuario logueado).
- Los hijos directos del body (header/main/footer/dialogs/scripts) no deben
tener margin exterior; los matamos por las dudas. */
html { margin: 0; padding: 0; }
body { margin: 0 !important; padding: 0 !important; }
body > * { margin-top: 0 !important; margin-bottom: 0 !important; }
body > footer { margin: 0 !important; }
body {
background: hsl(var(--background));
color: hsl(var(--foreground));
font-family: 'Barlow', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* style.css (underscores) pone `p { margin-bottom: 1.5em }`, que se cuela en
toda la UI hecha con Tailwind y deja espacios raros. Reseteamos el margen
de los
y se lo devolvemos SOLO al contenido real (blog, páginas, legal,
descripción de producto). `body p` gana especificidad sin depender del orden. */
body p { margin: 0; }
body .entry-content p,
body .prose p { margin-bottom: 1em; }
/* Igual con las listas: underscores pone `ul,ol { margin:0 0 1.5em 3em }`
y `ul { list-style: disc }`, que dañan las listas de UI. Reset + se
restaura bullets/sangría solo en el contenido real. */
body ul, body ol { margin: 0; padding: 0; list-style: none; }
body .entry-content ul, body .prose ul { list-style: disc; margin: 0 0 1em 1.5em; padding: 0; }
body .entry-content ol, body .prose ol { list-style: decimal; margin: 0 0 1em 1.5em; padding: 0; }
body .entry-content li, body .prose li { margin-bottom: 0.25em; }
/* Y el resto de elementos con márgenes de base de underscores (dl/dd de la
ficha técnica, figure, blockquote) que se cuelan en la UI. */
body dl, body dd, body dt, body figure, body blockquote { margin: 0; }
body .entry-content dd, body .prose dd { margin: 0 0 1em 1.5em; }
body .entry-content blockquote, body .prose blockquote { margin: 0 0 1em; }
/* Previene scroll horizontal en todas las páginas del shop (WC puede romperlo).
Usamos overflow-x: clip (no "hidden") porque "hidden" en html/body crea un
contenedor de scroll que ROMPE position: sticky del header. "clip" recorta
igual el desborde horizontal pero no rompe el sticky. */
html, body {
overflow-x: clip !important;
max-width: 100% !important;
}
/* WooCommerce inyecta algunos wrappers sin max-width — los contenemos.
clip (no hidden) para no romper el sticky del header cuando estas
clases caen en el
(woocommerce / woocommerce-page). */
.woocommerce, .woocommerce-page, .woocommerce-checkout,
.woocommerce-cart, .wc-block-components-main {
max-width: 100% !important;
overflow-x: clip !important;
}
/* Select2 (country/state dropdowns) usa inline-block y se expande — corregir */
.select2-container {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.select2-container .select2-selection--single {
width: 100% !important;
box-sizing: border-box !important;
}
.select2-container .select2-selection__rendered {
white-space: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.font-display { font-family: 'Molot', 'Anton', 'Bowlby One', sans-serif; letter-spacing: 0.02em; }
/* Underscores style.css overrides — kill default anchor colors in all states */
body a,
body a:link,
body a:visited,
body a:hover,
body a:active,
body a:focus { color: inherit; }
body main a,
body header a,
body footer a,
body aside a { text-decoration: none; }
/* The header CTA + WhatsApp float reset their own color via .tb-cta-link */
/* Underscores resets all