/* Theme Name: DJ Joyeros Child Theme URI: https://dyj-joyeros.com Description: Tema hijo de Storefront para D&J Joyeros (joyería de lujo, Bogotá). Contiene toda la maquetación custom y las plantillas de WooCommerce sobrescritas del sitio. Author: D&J Joyeros Template: storefront Version: 1.0.245 Text Domain: dj-joyeros-child */ :root { --djj-dark: #0A1A22; --djj-teal: #0E3A43; --djj-cream: #F4EFE7; --djj-gold: #C9A25D; } body { font-family: 'Poppins', sans-serif; } /* Esquinas rectas en TODAS las imágenes del sitio — Storefront (tema padre) trae un `img { border-radius: 3px; }` propio en su `style.css` (confirmado inspeccionando qué regla real gana con `CSSStyleSheet.cssRules` en el navegador), nunca anulado hasta ahora — por eso todas las fotos del sitio (hero, catálogo, catálogo por Sexo, vista previa de productos, carrito, ficha de producto) tenían esa esquina redondeada de 3px sin que ningún selector propio de este archivo la pusiera. Mismo selector genérico `img` (misma especificidad), pero este archivo se carga DESPUÉS del de Storefront, así que gana por orden de cascada sin necesitar `!important` ni un selector más específico. */ img { border-radius: 0; } h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; } /* ==================== HEADER (reskin de Storefront) ==================== */ /* position:sticky no funciona aquí: Storefront pone "overflow-x:hidden" en , y por el acoplamiento de ejes de overflow en CSS eso convierte overflow-y en "auto" automáticamente, lo que invalida el contexto sticky. "fixed" no depende de eso — a cambio, hay que compensar con padding-top en el body para que el contenido no quede tapado detrás del header (ver más abajo, "espacio para el header fijo"). */ #masthead.site-header { /* Azul Noche oficial (`--djj-dark`, #0A1A22) — el logo en sí se recoloreó (script Python + Pillow, reemplazo por distancia de color contra el fondo real del PNG, sin tocar el diamante ni el texto dorado) para que su propio fondo pasara de #011422 (el tono real del archivo original, distinto del oficial) a este mismo #0A1A22 — así logo y header coinciden exactamente Y ambos quedan en el color oficial de marca, sin necesitar un valor "a medida" acá. */ background-color: var(--djj-dark); border-bottom: 1px solid rgba(201, 162, 93, 0.35); position: fixed; top: 0; left: 0; right: 0; z-index: 99; /* Storefront trae ~26px de padding propio arriba/abajo por defecto; sin anularlo, el alto real del header no coincide con logo + margen. */ padding: 0; } /* ⚠️ Bug real, encontrado ajustando el alto del header — mismo patrón que ya se vio varias veces en este archivo (`.storefront-sorting`, `ul.products`): Storefront aplica un clearfix nativo a `.col-full` (`::before`/`::after` con `content:""; display:table`), pensado para su layout original con floats. Bajo el `display:flex` que este tema le pone a `#masthead .col-full` (más abajo), esos pseudo-elementos se cuentan como dos ítems flex más — y con `align-items:center`, terminaban estirando el alto de la línea flex bastante más allá de lo que medía `.site-branding` (el ítem real más alto), corriendo nav/carrito hacia abajo del centro real y dejando el header más alto de lo que su propio contenido justificaba. Se anulan, acotado a `#masthead .col-full` específicamente (no `.col-full` a secas, para no tocar otros usos de esa clase en el resto del sitio que sí puedan necesitar el clearfix real). */ #masthead .col-full::before, #masthead .col-full::after { content: none; display: none; } /* A pedido explícito y repetido del usuario: sin contorno de foco visible en NINGÚN elemento del sitio (ni el nativo del navegador, ni una versión recoloreada) — regla global, no una lista de selectores puntuales (el enfoque anterior, elemento por elemento, se quedaba corto cada vez que aparecía en algo nuevo: menú, carrito, tarjeta de categoría, "Volver al catálogo", el logo del header...). Cubre todo lo enfocable, incluyendo elementos nativos de WooCommerce/Storefront no restyleados por el tema. */ a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: none; } /* Espacio para el header fijo, para que no tape el contenido de la página. ⚠️ Bug real, causa del "espacio en blanco debajo del header" reportado por el usuario — estos valores (91px/116px) quedaron desactualizados desde que se cambió el logo por uno de proporción mucho más ancha (esta misma sesión): el nuevo logo, con `width:auto; max-height` puesto, topa antes con el `max-width` nativo de Storefront para la imagen del logo (sin calificar por este tema) que con nuestro propio `max-height` — termina renderizando más bajo de lo que esos números asumían, y de paso se encontró un segundo bug apilado (`.site-branding` con `margin-bottom:1.41575em` nativo de Storefront, invisible a `getBoundingClientRect()`, que además inflaba el alto real del header en escritorio — ver `#masthead .site-branding` más abajo). Con ambos corregidos, el alto REAL del header quedó bien por debajo de estos valores viejos, dejando ese espacio en blanco vacío. Recalculados en vivo tras los fixes + el +5px pedido para el alto del header (logo + 12.5px arriba/abajo en móvil, +10.5px en escritorio). */ /* ⚠️ Bug real, encontrado tras el ajuste de arriba — línea horizontal blanca visible justo debajo del header, reportada por el usuario. Causa: el alto real del header es un valor FRACCIONARIO (73.24px móvil, ver arriba), pero se había redondeado hacia ARRIBA a 74px acá — a propósito, para garantizar que el padding nunca quedara corto y tapara contenido detrás del header (`position:fixed`, fuera del flujo normal). Ese redondeo dejaba un hueco de ~0.76px donde se asomaba el blanco de fondo del body, entre el borde inferior real del header y donde arrancaba el contenido — imperceptible en la mayoría de fondos, pero muy visible contra el header oscuro. Se usa el valor fraccionario exacto en vez de redondear — mismo patrón que el resto de este archivo (9px, 47.15px, etc., ver 10.4e/10.4i) — así no queda ni un sub-píxel de sobra ni de menos. */ body { padding-top: 73.24px; /* alto real del header móvil, medido en vivo */ } @media (min-width: 768px) { body { padding-top: 73.75px; /* alto real del header en escritorio, medido en vivo */ } } /* Header fusionado en un solo contenedor (ver functions.php): logo a la izquierda, nav + carrito agrupados a la derecha vía margin-right:auto en site-branding, en vez de dos filas apiladas/superpuestas. */ @media (min-width: 768px) { #masthead .col-full { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; } /* Storefront fuerza width:100% en .main-navigation (mobile-first); sin anularlo, cada hijo ocupa toda la fila y todo se apila igual que antes de fusionar el header. */ #masthead .site-branding, #masthead .main-navigation, #site-header-cart.site-header-cart { width: auto; } #masthead .site-branding { margin-right: auto; } } /* ==================== HEADER ESCRITORIO: logo centrado + menú desplegable (2026-08-30) ==================== A pedido del usuario: una sola fila (ya era así, ver bloque de arriba), logo centrado, carrito a la derecha, y el menú de escritorio pasa a ser desplegable igual que en móvil — mismo mecanismo, no uno nuevo. Por qué es seguro reusar el mecanismo de móvil sin tocar su bloque (@media max-width:767px, sin modificar): el JS que abre/cierra el menú (navigation.js de Storefront) no depende del ancho de pantalla en absoluto — agrega un listener de click al botón que alterna la clase `.toggled` en `#site-navigation`, sin ningún chequeo de viewport. Lo que hace que hoy solo funcione en móvil es puro CSS: Storefront trae, sin media query, `.primary-navigation{display:block}` y `.handheld-navigation,.menu-toggle{display:none}` — y ESE bloque sí está envuelto en un media query de escritorio en su propio style.css. Acá se invierten esas 2 reglas, pero solo dentro de min-width:768px: en móvil, las reglas nativas (sin media query, "mobile-first") siguen exactamente igual que antes, intactas. Logo, botón y carrito pasan a `position:absolute` (mismo criterio que ya usa el header móvil, 7.4) — si el contenedor del menú crece de alto al desplegarse, un centrado por flexbox normal correría los 3 elementos hacia abajo junto con ese crecimiento (exactamente el bug ya documentado y resuelto en móvil). Con posición fija, ninguno se mueve, esté el menú abierto o cerrado. */ @media (min-width: 768px) { /* Sin esto, el fondo oscuro del header colapsaría a 0 de alto: al sacar los 3 elementos reales del flujo (position:absolute), `.col-full` ya no tiene contenido normal que le dé altura, y `#masthead` (el que pinta el fondo) se ajusta al alto de su contenido. */ #masthead .col-full { min-height: 73.75px; /* mismo alto real medido del header, ver 7.5 */ } /* Logo centrado horizontal Y verticalmente respecto al header completo (no a .col-full) — coincide en la práctica porque .col-full ya está centrado en el viewport, pero anclar contra #masthead (ya position:fixed, sirve de contenedor de referencia sin agregarle position:relative a .col-full) es más directo. */ #masthead .site-branding { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; } /* Menú de escritorio → desplegable: se apaga el menú inline nativo y se prende el mecanismo de acordeón que ya usa móvil (mismo `.menu>ul` con `max-height:0` → `9999px` al agregar `.toggled` en #site-navigation, sin CSS nuevo para esa parte — ya existe, sin media query). ⚠️ `.main-navigation` sigue siendo un hijo flex normal de `.col-full` (no está en la fila absoluta de logo/botón/carrito) — al desplegarse, su contenido arrancaba en la misma banda vertical que el logo/botón (y=0), superpuesto con ellos, en vez de aparecer DEBAJO del header. ⚠️ El `position:absolute` va en `.handheld-navigation` (el panel en sí), NO en `.main-navigation` (su contenedor) — primer intento real: ponerlo en `.main-navigation` convertía a ESE contenedor en el "contexto de posicionamiento" para el botón de menú, que vive adentro y también es `position:absolute` — el botón pasó a posicionarse contra `.main-navigation` (ahora en `top:73.75px`) en vez de contra `#masthead`, y se corrió visualmente debajo del header entero. `.main-navigation` se deja tal cual (flex item normal, `width:auto` de la regla original) — con `.primary-navigation` oculto y `.handheld-navigation` ya fuera del flujo, no le queda contenido real que lo infle, así que no afecta nada más. */ #masthead .primary-navigation { display: none; } #masthead .handheld-navigation { display: block; position: absolute; top: 73.75px; left: 0; right: 0; width: 100%; background: var(--djj-dark); /* Mismo padding lateral que usan el resto de las secciones del sitio (clamp(20-48px)) — sin esto, "Catálogo" (el primer ítem) quedaba cortado: el `