/* Theme Name: Super de Todo Template: twentytwentyfive Version: 0.1.0 Requires at least: 6.6 Requires PHP: 7.4 Text Domain: superdetodo */ /* PRIMERO LEER ESTO * 1. El repo es la fuente de verdad, no el Site Editor. * 2. La paleta sale de docs/brand/superdetodo/BRAND.md y baja por theme.json. * No se hardcodea un hex aca. * 3. No forkear plantillas de bloques de Woo. * * πŸ”΄ Regla de contraste, medida y no opinable: * - sobre rojo el cuerpo va en NEGRO (#0B0908) * - el amarillo solo en titulares de 24px para arriba, siempre con la * sombra dura, que es lo que lo sostiene en el logo * - blanco sobre rojo NO se usa en ningun lado * - el rojo como texto chico sobre claro no pasa AA: para eso esta * accent-6 (rojo tinta) * * πŸ”‘ Tipografia: NO hay una italica real disponible en el repo (solo Barlow y * Barlow Condensed, pesos 400/600/700, sin italic). El mockup usa * font-style:italic sintetico -a proposito prohibido por CLAUDE.md-, asi * que los titulares que en el mockup son italica se resuelven aca con * Barlow Condensed 700 + mayuscula + tracking negativo, sin oblicua falsa. */ /* Los nombres de rubro llegan del ERP con caja mezclada ("Libreria", * "PERFUMERIA"). font-variant sola no hace nada sobre lo que ya esta en * mayusculas: primero se baja todo a minusculas y despues se versaliza. */ .sdt-versalita { text-transform: lowercase; font-variant: small-caps; } .sdt-titular-sombra { text-shadow: .055em .055em 0 var(--wp--preset--color--accent-3); } /* Un svg inline sin width/height cae al default del navegador de 300x150 y * revienta la tarjeta. Especificidad cero para que nadie necesite !important. */ :where(svg) { width: 18px; height: 18px; flex: none; } /* Los iconos del sprite (parts/header.html) son trazo, no relleno. */ .sdt-defs { position: absolute; width: 0; height: 0; overflow: hidden; } use, symbol { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ===================== banda de envios (negro sobre amarillo, 16,7:1) ===== */ .sdt-banda { color: var(--wp--preset--color--accent-3); } .sdt-banda__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.25rem; padding-block: .5rem; font-family: var(--wp--preset--font-family--barlow); font-size: .95rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .sdt-banda__envios { display: inline-flex; align-items: center; gap: .5rem; } .sdt-banda__envios strong { font-weight: 800; } .sdt-banda svg { width: 17px; height: 17px; flex: none; } .sdt-banda__dato { opacity: .78; } /* ===================== cabecera roja ====================================== */ .sdt-cabecera .wp-block-group { padding-block: .75rem; gap: .75rem 1.25rem !important; } /* El tile del logo es rojo pleno del mismo hex que la cabecera: apoya sin * costura. Recorta por CSS el bloque tipografico del JPG (MAYORISTAS + * SUPER DE TODO) y descarta la fila de iconos: medidas tomadas del archivo, * ver docs/brand/superdetodo/MOCKUP-NOTAS.md #3. */ .sdt-chapa { display: flex; align-items: center; flex: none; } .sdt-chapa__placa { display: block; width: 176px; height: 80px; background: url('./assets/img/logo-superdetodo.jpg') no-repeat -12.2px -27.9px / 191.7px 191.7px; } .sdt-cabecera .wp-block-search { flex: 1 1 320px; min-width: 220px; } .sdt-buscador .wp-block-search__inside-wrapper { border: 3px solid var(--wp--preset--color--accent-3) !important; border-radius: 0 !important; } .sdt-buscador .wp-block-search__input { border: 0 !important; background: var(--wp--preset--color--blanco) !important; color: var(--wp--preset--color--contrast) !important; font-size: 1.06rem !important; padding: .6rem .75rem !important; } /* πŸ”‘ El boton va PEGADO al input: en el mockup los dos viven adentro del * mismo borde negro de 3px y no hay costura. El margen lo empujan DOS lados * -el bloque search del core (margin-left:10px) y twentytwentyfive por su * theme.json (margin-left:1.125rem)- y medido el 13/09/2026 ganaba el * segundo: 18px de ranura blanca entre el input y BUSCAR. */ .sdt-buscador .wp-block-search__button { margin-left: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--wp--preset--color--accent-3) !important; color: var(--wp--preset--color--accent-2) !important; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-inline: 1.1rem !important; } .sdt-buscador .wp-block-search__button:hover { background: #241E1B !important; } .sdt-acciones { display: flex; align-items: center; gap: .6rem; flex: none; } .sdt-acciones__wa, .sdt-acciones__ingresar { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; } .sdt-acciones__wa { border: 2px solid var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-3); padding: .5rem .8rem; } .sdt-acciones__wa:hover { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); } .sdt-acciones__ingresar { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); padding: .65rem .9rem; } .sdt-acciones__ingresar:hover { background: #241E1B; } /* ===================== navegacion (negra) ================================= */ .sdt-nav-fondo { border-top: 3px solid var(--wp--preset--color--accent-2); } /* La barra la arma PHP (mu-plugins/ventio-puertas/barra.php) y devuelve cadena * vacia cuando todavia no hay puertas publicadas. El contenedor, en cambio, se * imprime siempre desde parts/header.html, asi que quedaba a la vista SOLO su * borde: una franja amarilla de 3px, vacia, entre la cabecera y el hero * (medido el 13/09/2026: .sdt-nav-fondo con height 3px y contenido nulo). * Sin barra no se dibuja nada. Si el navegador no soporta :has(), la regla * entera se descarta y queda el comportamiento de hoy: degrada, no rompe. */ .sdt-nav-fondo:not(:has(.sdt-nav)) { display: none; } /* En el mockup la navegacion y el hero se tocan: no hay franja de papel entre * el negro y el rojo. Aca `main` recibe el block-gap del layout raiz (medido: * 19,2px) y esa franja aparecia. Se anula solo cuando lo primero que cuelga de * main es una banda a sangre, para no pegarle las migas a la pagina de rubro. */ main.wp-block-group:has(> .sdt-hero:first-child) { margin-block-start: 0; } .sdt-nav { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; list-style: none; margin: 0; padding: 0; } /* Sin text-transform: el rotulo lo gobierna .sdt-versalita (aplicada en * barra.php), asi normaliza la caja mezclada del ERP en vez de pisarla con * una mayuscula ciega. */ .sdt-nav__puerta { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; color: #F1EBE2; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.01rem; letter-spacing: .05em; text-decoration: none; padding: .8rem .85rem; border-bottom: 4px solid transparent; } .sdt-nav__puerta svg { width: 19px; height: 19px; } .sdt-nav__puerta:hover { color: var(--wp--preset--color--accent-2); } .sdt-nav__puerta[aria-current] { color: var(--wp--preset--color--accent-2); border-bottom-color: var(--wp--preset--color--accent-2); } .sdt-nav__todo { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; white-space: nowrap; color: #B9AFA6; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: .8rem .85rem; border-bottom: 4px solid transparent; } .sdt-nav__todo b { color: var(--wp--preset--color--accent-2); margin-left: .3rem; } .sdt-nav__todo:hover, .sdt-nav__todo--activa { color: var(--wp--preset--color--accent-2); border-bottom-color: var(--wp--preset--color--accent-2); } /* ===================== hero =============================================== */ .sdt-hero { position: relative; overflow: hidden; } /* La textura del mockup: rayas diagonales a 135 grados sobre el rojo. Es el * mismo repeating-linear-gradient del mockup aprobado; el negro al 5,5 % se * expresa con color-mix sobre el token, para no clavar un hex mas. Si el * navegador no soporta color-mix descarta el gradiente y queda el rojo pleno * de hoy. No intercepta el mouse: los botones del hero siguen vivos. */ .sdt-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--wp--preset--color--accent-3) 5.5%, transparent) 0 2px, transparent 2px 9px ); } /* position para que el contenido quede por encima de la textura. */ .sdt-hero__grilla { position: relative; gap: 2rem !important; padding-block: 2.5rem 2rem; } .sdt-hero__cinta { display: inline-block; background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-size: .87rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .4rem .7rem; margin-bottom: .9rem; } .sdt-hero__titulo.sdt-hero__titulo { color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; line-height: .96; text-wrap: balance; font-size: clamp(2.1rem, 4.4vw, 3.6rem); margin: 0; } .sdt-hero__bajada { color: var(--wp--preset--color--accent-3); font-size: 1.03rem; font-weight: 500; max-width: 46ch; margin: 1rem 0 0; } .sdt-hero__botones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; } .sdt-boton { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--wp--preset--font-family--barlow); font-weight: 800; font-size: 1.06rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding: .8rem 1.25rem; border: 3px solid var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-3); } .sdt-boton--amarillo { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); } .sdt-boton--amarillo:hover { background: var(--wp--preset--color--blanco); } .sdt-boton--linea:hover { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); } .sdt-datos { background: var(--wp--preset--color--accent-3); padding: 1.25rem 1.4rem; display: grid; gap: .85rem; } .sdt-datos div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .25rem .9rem; align-items: baseline; } .sdt-datos b { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.9rem; color: var(--wp--preset--color--accent-2); line-height: 1; } .sdt-datos span { color: #E6DED4; font-size: .99rem; } .sdt-datos hr { border: 0; border-top: 1px solid #332C29; margin: 0; } /* ===================== secciones y titulos ================================ */ .sdt-seccion { padding-block: 2.4rem; } .sdt-seccion--claro { background: var(--wp--preset--color--blanco); } .sdt-seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1.1rem; margin-bottom: 1.25rem; } .sdt-seccion__titulo { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; } .sdt-seccion__titulo em { font-style: normal; color: var(--wp--preset--color--accent-1); } .sdt-seccion__link { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid var(--wp--preset--color--accent-2); padding-bottom: .1rem; } .sdt-seccion__link:hover { border-bottom-color: var(--wp--preset--color--accent-1); } /* πŸ”΄ EL `margin: 0` DE ACA NO ALCANZA, Y NO ES UN DESCUIDO. * * WordPress core, para CUALQUIER hijo directo de un layout `constrained`, * emite (verificado en el CSS que sirve el sitio, 13/09/2026): * * .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { * max-width: var(--wp--style--global--content-size); * margin-left: auto !important; margin-right: auto !important; * } * * Ese `!important` le gana a cualquier `margin` de autor. Con `max-width:70ch` * el resultado es una bajada CENTRADA en medio de la seccion, a ~300px del * titulo que deberia encabezar β€” que es exactamente como se veia. * * πŸ”‘ Mismo patron que ya mordio tres veces a este theme (tipografia, bordes, * ancho de contenido): lo que el theme no declara o no fuerza, lo gobierna * otro. AcΓ‘ el otro es el core, no el theme padre. */ .sdt-seccion__bajada { margin: -.5rem 0 1.1rem; margin-inline: 0 !important; max-width: 70ch; color: var(--wp--preset--color--accent-5); font-size: 1.03rem; } /* ===================== las puertas ========================================= */ /* auto-fit + minmax: con cuatro puertas se ven cuatro, con dos se ven dos * anchas y nunca queda una fila rota. Ninguna puerta puede asumir cuantas hay. */ .sdt-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; padding-block: .5rem 1rem; } .sdt-puerta { position: relative; display: flex; flex-direction: column; gap: .6rem; background: var(--wp--preset--color--accent-1); border: 3px solid var(--wp--preset--color--accent-3); padding: 1.1rem 1rem 1rem; text-decoration: none; transition: transform .14s ease, box-shadow .14s ease; } .sdt-puerta:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--wp--preset--color--accent-3); } .sdt-puerta__glifo { width: 42px; height: 42px; color: var(--wp--preset--color--accent-2); filter: drop-shadow(2px 2px 0 var(--wp--preset--color--accent-3)); } .sdt-puerta__glifo use { stroke-width: 1.9; } /* Amarillo sobre rojo (3,5:1) solo se sostiene grande y con la sombra dura. */ /* Nunca por debajo de 1.5rem/24px: bajo eso el par amarillo/rojo (3,5:1) no * pasa ni siquiera el umbral de texto grande. */ .sdt-puerta__rotulo { display: block; color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.5rem; line-height: 1; } /* Sobre rojo, todo lo chico va en negro: 4,76:1. */ .sdt-puerta__rubro, .sdt-puerta__conteo { display: block; color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .92rem; letter-spacing: .03em; } .sdt-puerta__rubro:empty { display: none; } /* El conteo apagado (interruptor de cifras) llega vacio y no como elemento * ausente: asi sigue valiendo `.sdt-puerta__conteo + .sdt-puerta__bajada`, que * es lo que clava la caja negra al pie de la tarjeta. Mismo patron que el * rubro vacio de arriba. */ .sdt-puerta__conteo:empty { display: none; } .sdt-puerta__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .4rem; } .sdt-puerta__chips span { background: var(--wp--preset--color--accent-3); color: #EFE9E0; font-size: .81rem; font-family: var(--wp--preset--font-family--barlow); letter-spacing: .02em; padding: .2rem .45rem; } .sdt-puerta__chips span b { color: var(--wp--preset--color--accent-2); font-weight: 700; } /* ===================== indice plano de rubros ============================= */ .sdt-indice { display: flex; flex-direction: column; gap: 1.1rem; } .sdt-indice__lista { display: flex; flex-wrap: wrap; gap: .5rem; } .sdt-indice__chip { display: inline-flex; align-items: baseline; gap: .5rem; background: var(--wp--preset--color--blanco); border: 2px solid var(--wp--preset--color--accent-4); padding: .5rem .75rem; font-size: 1.03rem; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--contrast); } .sdt-indice__chip b { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .92rem; color: var(--wp--preset--color--accent-6); letter-spacing: .02em; } .sdt-indice__chip:hover { border-color: var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); } .sdt-indice__resto { display: inline-flex; align-items: center; border: 2px dashed var(--wp--preset--color--accent-4); color: var(--wp--preset--color--accent-5); font-size: .99rem; font-weight: 500; padding: .5rem .75rem; } .sdt-indice__huerfanos { border: 2px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--blanco); } .sdt-indice__huerfanos > b { display: block; background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; padding: .55rem .8rem; } .sdt-indice__adentro { padding: .8rem; } .sdt-indice__nota { margin: 0 0 .7rem; max-width: 78ch; font-size: 1.01rem; color: var(--wp--preset--color--contrast); } /* ===================== filtro de subrubros (pagina de categoria) ========== */ .sdt-filtro { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1rem; } .sdt-filtro__chip { background: var(--wp--preset--color--blanco); border: 1px solid var(--wp--preset--color--accent-4); border-radius: 999px; color: var(--wp--preset--color--contrast); font-size: .95rem; padding: .35rem .8rem; text-decoration: none; } .sdt-filtro__chip b { color: var(--wp--preset--color--accent-5); font-weight: 600; } /* ===================== responsive =========================================== */ @media (max-width: 782px) { .sdt-cabecera .wp-block-group { flex-direction: row; } .sdt-cabecera .wp-block-search { order: 3; flex: 1 1 100%; } .sdt-hero__grilla > .wp-block-column { flex-basis: 100% !important; } } @media (max-width: 480px) { .sdt-banda__dato { display: none; } .sdt-acciones__wa span { display: none; } .sdt-chapa__placa { width: 132px; height: 60px; background-position: -9.1px -20.9px; background-size: 143.8px 143.8px; } } /* ─────────────────────────────────────────────────────────────────────────── * ESQUINAS RECTAS β€” el mockup aprobado no tiene una sola esquina redondeada * en el header, y twentytwentyfive redondea TODO con `border-radius:3.125rem` * (50px, su pill). Medido en la pagina servida el 13/09/2026: el theme * reseteaba solo el wrapper del buscador y su boton, asi que el INPUT y los * dos botones de acciones salian con forma de pastilla. * * πŸ”‘ El radio de los botones se declara en theme.json (styles.elements.button), * que es el lugar donde el child le gana al padre POR DISENIO. Esto de aca es * solo para lo que theme.json no alcanza: el input de busqueda y los que * hacen de boton, que no son el elemento `button` de WordPress. * * πŸͺ€ NO tocar `.sdt-filtro__chip`: su `border-radius:999px` es intencional y * viene del mockup. Esto es un reset acotado, no global. * ─────────────────────────────────────────────────────────────────────────── */ .sdt-buscador .wp-block-search__input, .sdt-buscador .wp-block-search__button, .sdt-acciones__wa, .sdt-acciones__ingresar { border-radius: 0 !important; } /* ─────────────────────────────────────────────────────────────────────────── * EL WRAPPER QUE ALINEA LA BAJADA CON SU TITULO * * Sin esto la bajada es HERMANA de la cabeza y hija directa del layout * `constrained`, asi que WordPress le impone `margin-inline: auto !important` * (ver el comentario de `.sdt-seccion__bajada`). Forzarle `margin-inline: 0` * la corrige a medias: deja de estar centrada, pero se va al borde de la * seccion β€”que es `alignfull`β€” y queda ~110px a la IZQUIERDA del titulo. * * πŸ”‘ La salida no es pelearle al margen, es cambiar de quien es hija: este * wrapper es el que recibe el ancho de contenido y el centrado, y adentro * tanto el titulo como la bajada arrancan del mismo borde. * ───────────────────────────────────────────────────────────────────────── */ .sdt-seccion__intro { display: block; } /* ─────────────────────────────────────────────────────────────────────────── * LA CINTA DE CIFRAS DEL HERO * * En el mockup es un `` adentro del `

`; aca es un hermano que * imprime PHP. No es un capricho de markup: el texto son numeros del catalogo * y con la tienda vacia la linea entera tiene que no existir. Un `` * clavado en la plantilla diria "0 productos Β· 0 rubros" el dia que el canal * del ERP se corte, y eso es un cartel de local vacio en la portada. * * Hereda del titular la caja alta y la condensada; lo que NO hereda es el * amarillo ni la sombra dura: a este tamanio el par amarillo/rojo (3,5:1) no * pasa. Sobre rojo, chico, va en negro (4,76:1). * ───────────────────────────────────────────────────────────────────────── */ .sdt-hero__cifras { display: block; color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: clamp(.85rem, 1.45vw, 1.19rem); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; margin: .75rem 0 0; } /* πŸ”΄ EL HERO SIN PANEL DE CIFRAS * * El panel negro lo arma PHP (hero.php) y devuelve cadena vacia cuando no hay * productos publicados β€”que es el estado de HOYβ€”. La columna del 42 % queda * igual, vacia, y el hero se lee partido al medio: medio lienzo rojo sin nada. * Se esconde la columna vacia y la que queda toma el ancho completo. * * El `!important` no es pereza: el ancho de columna lo pone WordPress como * `style="flex-basis:42%"` inline, y a un inline no se le gana de otra forma. * Si el navegador no soporta :has(), las dos reglas se descartan y queda el * comportamiento de hoy: degrada, no rompe. */ .sdt-hero__grilla:not(:has(.sdt-datos)) > .wp-block-column:last-child { display: none; } .sdt-hero__grilla:not(:has(.sdt-datos)) > .wp-block-column:first-child { flex-basis: 100% !important; } /* πŸͺ€ EL PARRAFO FANTASMA DE LOS SHORTCODES * * El bloque core/shortcode devuelve `wpautop('[shortcode]')`, asi que TODO lo * que emite un shortcode aterriza adentro de un

. Cuando el shortcode * devuelve cadena vacia -que es el estado de hoy, sin catalogo- lo que queda en * la pagina es un `

`, invisible pero con su margen: un hueco sin motivo * en el medio del hero. Y cuando el shortcode devuelve un
, el navegador * cierra el parrafo antes y deja igual el `

` de arriba. * Medido contra wp-includes/blocks/shortcode.php. */ .sdt-hero p:empty, .sdt-seccion > p:empty { display: none; } /* El

que envuelve a la cinta de cifras ya trae el block-gap del layout; * el margen propio de la cinta lo duplicaria. Gana por especificidad, sin * !important. */ .sdt-hero__grilla p:has(> .sdt-hero__cifras) { margin-block: 0; } /* πŸ”΄ UNA SECCION SIN CONTENIDO NO SE DIBUJA * * El titulo y la bajada viven en la plantilla y el contenido lo arma PHP, que * con el catalogo vacio devuelve cadena vacia. Sin esto quedan un titulo y una * bajada colgados sobre la nada β€”exactamente el defecto que ya tenia la barra * de navegacion (ver .sdt-nav-fondo). Mismo patron y misma degradacion. */ .sdt-seccion--puertas:not(:has(.sdt-grilla)), .sdt-seccion--rubros:not(:has(.sdt-indice)) { display: none; } /* ─────────────────────────────────────────────────────────────────────────── * LA BAJADA DE LA TARJETA β€” el `.aviso` del mockup * * El texto lo carga el comercio por categoria (meta `_ventio_puerta_bajada`). * Vacio, PHP no emite el nodo y no queda una caja negra en blanco. * * `margin-top:auto` SOLO cuando viene pegada al conteo, o sea cuando la puerta * no tiene subrubros y por lo tanto no hay chips. Con chips, el auto ya lo * tienen ellos: dos margenes automaticos en la misma columna se reparten el * hueco y abren una zanja en el medio de la tarjeta. * ───────────────────────────────────────────────────────────────────────── */ .sdt-puerta__bajada { display: block; background: var(--wp--preset--color--accent-3); border-left: 4px solid var(--wp--preset--color--accent-2); color: var(--wp--preset--color--base); font-size: .87rem; line-height: 1.35; padding: .55rem .6rem; } .sdt-puerta__conteo + .sdt-puerta__bajada { margin-top: auto; } /* ─────────────────────────────────────────────────────────────────────────── * LA PUERTA DE TEMPORADA β€” la quinta, amarilla y a lo ancho * * Se distingue de las cuatro del cartel a proposito: es una campania que se * prende y se apaga, no una puerta permanente. Cual es la decide el comercio * tildandola en el admin; si no hay ninguna tildada esta regla no aplica a * nadie y la vidriera son las tarjetas rojas de siempre. * * Negro sobre amarillo es el par mas fuerte que tiene la marca (16,5:1): por * eso aca TODO el texto va en negro, incluido el rotulo, que pierde la sombra * dura β€”la sombra existe para sostener el amarillo sobre rojo, y aca no hay * amarillo sobre rojo que sostener. * ───────────────────────────────────────────────────────────────────────── */ .sdt-puerta--temporada { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.25rem; background: var(--wp--preset--color--accent-2); } .sdt-puerta--temporada .sdt-puerta__glifo { width: 54px; height: 54px; color: var(--wp--preset--color--accent-1); } .sdt-puerta__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; flex: 1 1 260px; } .sdt-puerta__marca { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 800; font-size: .84rem; letter-spacing: .18em; text-transform: uppercase; padding: .3rem .6rem; margin-bottom: .15rem; } .sdt-puerta--temporada .sdt-puerta__rotulo { color: var(--wp--preset--color--accent-3); text-shadow: none; font-size: 1.75rem; } .sdt-puerta--temporada .sdt-puerta__bajada { background: transparent; border-left: 0; padding: 0; margin-top: .25rem; color: var(--wp--preset--color--contrast); font-size: 1.01rem; font-weight: 500; line-height: 1.45; } /* El borde punteado del mockup es gris sobre el amarillo. Se expresa con * color-mix sobre el token negro en vez de clavar un hex nuevo; si el * navegador no soporta color-mix descarta la declaracion y el borde cae a * currentColor, que es el mismo negro: degrada a mas contraste, no a menos. */ .sdt-puerta__vence { flex: none; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .84rem; letter-spacing: .1em; line-height: 1.45; text-align: center; text-transform: uppercase; color: var(--wp--preset--color--accent-3); border: 2px dashed color-mix(in srgb, var(--wp--preset--color--accent-3) 55%, transparent); padding: .45rem .7rem; } /* ═══════════════════════════════════════════════════════════════════════════ * LA VISTA DE CATALOGO β€” pantalla 2 del mockup aprobado (#p2) * * La comparten /shop/ y el archivo de un rubro a traves de parts/catalogo.html. * El markup dinamico lo arma inc/catalogo.php. * ═══════════════════════════════════════════════════════════════════════════ */ /* ---- la tapa negra del rubro -------------------------------------------- */ /* El mismo truco que el hero: sin esto el block-gap del layout raiz abre una * franja de papel entre la barra negra de navegacion y la tapa, que en el * mockup se tocan. */ main.wp-block-group:has(> .sdt-tapa:first-child) { margin-block-start: 0; } .sdt-tapa { color: var(--wp--preset--color--base); } .sdt-tapa__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1.4rem; } .sdt-tapa__texto { flex: 1 1 340px; min-width: 0; } .sdt-tapa__titulo.sdt-tapa__titulo { color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; font-size: clamp(1.65rem, 4.2vw, 2.5rem); margin: 0; } /* El amarillo sobre negro es el par mas fuerte de la marca (16,5:1) y no * necesita la sombra dura, que existe para sostenerlo sobre el rojo. */ .sdt-tapa__bajada { margin: .4rem 0 0; max-width: 60ch; font-size: 1.03rem; } .sdt-tapa__bajada p { margin: 0; } .sdt-tapa__bajada, .sdt-tapa__bajada p { color: color-mix(in srgb, var(--wp--preset--color--base) 68%, var(--wp--preset--color--accent-5)); } /* El chip rojo. PHP devuelve cadena vacia con el interruptor de cifras apagado: * el `:empty` es el que evita un rectangulo rojo en blanco. */ .sdt-tapa__conteo { flex: none; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 800; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; padding: .5rem .75rem; } .sdt-tapa__conteo:empty { display: none; } /* El parrafo fantasma del bloque core/shortcode (ver el comentario de * `.sdt-hero p:empty`): aca ademas seria un item mas del flex y del grid. */ .sdt-tapa p:empty, .sdt-catalogo p:empty, .sdt-catalogo__panel > p:empty, .sdt-catalogo__lista > p:empty { display: none; } /* ---- las migas ---------------------------------------------------------- */ .sdt-miga { font-family: var(--wp--preset--font-family--barlow); font-size: .92rem; font-weight: 600; letter-spacing: .06em; color: color-mix(in srgb, var(--wp--preset--color--base) 52%, var(--wp--preset--color--accent-5)); margin-bottom: .35rem; } .sdt-miga a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--accent-2); } .sdt-miga a:hover { color: var(--wp--preset--color--accent-2); } .sdt-miga b { color: var(--wp--preset--color--base); font-weight: 700; } /* ---- las dos columnas --------------------------------------------------- */ /* πŸͺ€ EL APILADO A 360px NO ES OPCIONAL: dos columnas de 248px + grilla no entran * y sacan la barra de scroll horizontal. El corte va a 900px, que es donde el * panel deja de tener lugar sin comerse la grilla. */ /* πŸͺ€ El margen de bloque lo pone el layout `flow` de `main` a TODOS sus hijos * directos; sumado al padding propio abria el doble de aire entre la tapa negra * y las dos columnas del que tiene el mockup. El aire de arriba lo decide el * padding de aca, que es el que se ve. */ .sdt-catalogo { margin-block: 0 !important; } .sdt-catalogo { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; gap: 1.4rem 1.6rem; padding-block: 1.6rem 2.5rem; } /* Los dos hijos son grupos con `is-layout-flow`, que trae su propio margen de * bloque: adentro de un grid eso abre una zanja arriba de cada columna. */ .sdt-catalogo > .wp-block-group { margin-block: 0; min-width: 0; } /* ---- el panel de filtro ------------------------------------------------- */ .sdt-filtros { background: var(--wp--preset--color--blanco); border: 2px solid var(--wp--preset--color--accent-4); position: sticky; top: .75rem; } .sdt-filtros__tapa { list-style: none; cursor: pointer; background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-weight: 800; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; padding: .7rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .sdt-filtros__tapa::-webkit-details-marker { display: none; } .sdt-filtros__lupa { width: 16px; height: 16px; } .sdt-filtros__adentro { padding: .25rem .8rem .9rem; } /* Cada bloque de filtro es un grupo. Hoy sale uno solo -Rubro-; Marca, * Presentacion y Disponibilidad entran como un `.sdt-filtros__grupo` mas el dia * que el canal publique el dato, sin tocar esta hoja. */ .sdt-filtros__grupo { padding-block: .75rem; border-bottom: 1px solid var(--wp--preset--color--accent-4); } .sdt-filtros__grupo:last-of-type { border-bottom: 0; } .sdt-filtros__grupo h4 { margin: 0 0 .55rem; font-family: var(--wp--preset--font-family--barlow); font-size: .84rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent-5); } .sdt-opcion { display: flex; align-items: center; gap: .55rem; padding: .25rem 0; font-size: 1rem; color: var(--wp--preset--color--contrast); text-decoration: none; } .sdt-opcion:hover { color: var(--wp--preset--color--accent-6); } .sdt-opcion__nombre { min-width: 0; } /* El marcador cuadrado del mockup. Es decoracion: el elemento es un enlace y el * activo se marca con aria-current, no con un estado de casilla. */ .sdt-opcion__caja { width: 17px; height: 17px; flex: none; border: 2px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--blanco); display: grid; place-items: center; } .sdt-opcion--activa { font-weight: 700; } .sdt-opcion--activa .sdt-opcion__caja { background: var(--wp--preset--color--accent-3); } .sdt-opcion--activa .sdt-opcion__caja::after { content: ""; width: 7px; height: 7px; background: var(--wp--preset--color--accent-2); } .sdt-opcion__n { margin-left: auto; padding-left: .5rem; font-family: var(--wp--preset--font-family--barlow); font-size: .9rem; color: var(--wp--preset--color--accent-5); } .sdt-filtros__reset { display: inline-block; margin-top: .5rem; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .87rem; letter-spacing: .07em; text-transform: uppercase; color: var(--wp--preset--color--accent-6); text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--accent-2); } .sdt-filtros__aviso { margin: .75rem 0 0; border-left: 4px solid var(--wp--preset--color--accent-1); background: color-mix(in srgb, var(--wp--preset--color--accent-1) 4%, var(--wp--preset--color--blanco)); padding: .55rem .7rem; font-size: 1.03rem; line-height: 1.4; color: var(--wp--preset--color--accent-5); } .sdt-filtros__aviso b { color: var(--wp--preset--color--contrast); } /* ---- la barra de arriba de la grilla ------------------------------------ */ .sdt-barra-orden { margin-block: 0 .9rem !important; } .sdt-barra-orden .wc-block-product-results-count, .sdt-barra-orden .woocommerce-result-count { margin: 0; font-family: var(--wp--preset--font-family--barlow); font-size: .99rem; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--accent-5); } /* Apagado el interruptor de cifras, PHP no emite el bloque y la barra queda * vacia: sin esto deja su margen, un hueco arriba de la grilla sin motivo. */ .sdt-barra-orden:empty { display: none; } /* ---- la rejilla y la tarjeta -------------------------------------------- */ .sdt-rejilla .wc-block-product-template { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: 0; padding: 0; list-style: none; } .sdt-rejilla .wc-block-product-template > li { display: flex; flex-direction: column; margin: 0; padding: 0; background: var(--wp--preset--color--blanco); border: 2px solid var(--wp--preset--color--accent-4); transition: border-color .14s ease, box-shadow .14s ease; } .sdt-rejilla .wc-block-product-template > li:hover { border-color: var(--wp--preset--color--accent-3); box-shadow: 4px 4px 0 var(--wp--preset--color--accent-3); } /* El lienzo. La trama a 45 grados es la misma idea que la del hero, expresada * con color-mix sobre el token para no clavar un hex mas. */ .sdt-rejilla .wc-block-components-product-image { margin: 0; border-bottom: 2px solid var(--wp--preset--color--accent-4); background: color-mix(in srgb, var(--wp--preset--color--accent-4) 55%, var(--wp--preset--color--base)); background-image: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--wp--preset--color--accent-3) 3.5%, transparent) 0 1px, transparent 1px 8px ); } .sdt-rejilla .wc-block-components-product-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; } .sdt-rejilla .sdt-prod__rubro { margin: .75rem .8rem 0; font-family: var(--wp--preset--font-family--barlow); font-size: .81rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; } .sdt-rejilla .sdt-prod__rubro, .sdt-rejilla .sdt-prod__rubro a { color: var(--wp--preset--color--accent-6); text-decoration: none; } .sdt-rejilla .sdt-prod__rubro:empty { display: none; } .sdt-rejilla .sdt-prod__nombre { margin: .35rem .8rem 0; font-family: var(--wp--preset--font-family--barlow); font-size: 1rem; font-weight: 700; line-height: 1.3; } .sdt-rejilla .sdt-prod__nombre a { color: var(--wp--preset--color--contrast); text-decoration: none; } .sdt-rejilla .sdt-prod__nombre a:hover { color: var(--wp--preset--color--accent-6); } /* `margin-top:auto` empuja la meta al pie del cuerpo, asi la franja amarilla de * todas las tarjetas de una fila queda a la misma altura aunque los nombres * tengan uno, dos o tres renglones. */ .sdt-rejilla .sdt-prod__meta { margin: auto .8rem 0 !important; padding-top: .55rem; gap: .15rem .75rem !important; font-family: var(--wp--preset--font-family--barlow); font-size: .99rem; letter-spacing: .03em; color: var(--wp--preset--color--accent-5); } .sdt-rejilla .sdt-prod__meta .wc-block-components-product-sku, .sdt-rejilla .sdt-prod__meta .wc-block-components-product-stock-indicator { display: inline-flex; align-items: baseline; gap: .3rem; margin: 0; padding: 0; border: 0; font-size: inherit; } .sdt-rejilla .sdt-prod__meta .sku { color: var(--wp--preset--color--contrast); font-weight: 700; } /* Cuando el producto NO esta simplemente en stock, el aviso es la informacion * mas util de la tarjeta y se lee como tal. */ .sdt-rejilla .wc-block-components-product-stock-indicator--out-of-stock, .sdt-rejilla .wc-block-components-product-stock-indicator--available-on-backorder { color: var(--wp--preset--color--accent-6); font-weight: 700; } /* ---- la franja amarilla: el porton de precios --------------------------- */ .sdt-rejilla .sdt-prod__precio, .sdt-rejilla .wc-block-components-product-price { margin: .8rem 0 0; } .sdt-precio { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem; border-top: 2px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); padding: .6rem .75rem; text-align: left; } .sdt-precio__leyenda { min-width: 0; font-family: var(--wp--preset--font-family--barlow); font-size: .78rem; font-weight: 700; letter-spacing: .015em; text-transform: uppercase; line-height: 1.15; color: color-mix(in srgb, var(--wp--preset--color--accent-3) 72%, var(--wp--preset--color--accent-2)); } .sdt-precio__leyenda b { display: block; color: var(--wp--preset--color--accent-3); font-size: .87rem; letter-spacing: .02em; } .sdt-precio__flecha { white-space: nowrap; background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-weight: 800; font-size: .87rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: .5rem .6rem; } /* πŸͺ€ LA FLECHA VA POR CSS Y NO COMO `` EN LINEA: este mismo string lo * publica el Store API en `price_html` y ahi Woo lo pasa por `wp_kses_post`, * que borra el ``. Ver el comentario del filtro en inc/catalogo.php. */ .sdt-precio__flecha::after { content: " β†’"; } .sdt-rejilla > .wc-block-product-template > li:hover .sdt-precio__flecha, .sdt-precio__flecha:hover { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-3); } /* πŸ”΄ LA MISMA FRANJA CUANDO EL PRECIO SI SE VE, Y NO ES COSMETICA. * * El mockup dibuja la pantalla 2 SIEMPRE como la ve un anonimo, asi que la * franja amarilla aparece como si fuera "el cartel del porton". No lo es: es el * PIE de la tarjeta. Medido con sesion el 13/09/2026, sin esta regla el importe * quedaba como un renglon suelto al pie, sin borde ni fondo β€” o sea que el * cliente dado de alta, que es el cliente del negocio, veia una tarjeta peor * terminada que el visitante que no puede comprar. * * Se pinta el envoltorio del bloque de precio y no `.sdt-precio`, que ya trae lo * suyo: el `:not(:has())` es el que evita la franja adentro de la franja. Si el * navegador no soporta `:has()` descarta la regla y queda el renglon suelto de * hoy: degrada, no rompe. */ .sdt-rejilla .sdt-prod__precio:not(:has(.sdt-precio)) { border-top: 2px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); padding: .55rem .75rem; } .sdt-rejilla .sdt-prod__precio:not(:has(.sdt-precio)) .wc-block-components-product-price { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.35rem; line-height: 1.1; color: var(--wp--preset--color--accent-3); } /* ---- el paginado -------------------------------------------------------- */ .sdt-paginado { margin-top: 1.4rem; gap: .4rem !important; } .sdt-paginado a, .sdt-paginado span { font-family: var(--wp--preset--font-family--barlow); font-size: .9rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; padding: .45rem .7rem; border: 2px solid var(--wp--preset--color--accent-4); background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--contrast); } .sdt-paginado .page-numbers.current { background: var(--wp--preset--color--accent-3); border-color: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); } .sdt-paginado a:hover { border-color: var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); } .sdt-sin-resultados { border: 2px solid var(--wp--preset--color--accent-4); background: var(--wp--preset--color--blanco); padding: 1.5rem; text-align: center; color: var(--wp--preset--color--accent-5); } /* ---- responsive del catalogo -------------------------------------------- */ @media (max-width: 1000px) { .sdt-rejilla .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* El panel deja de ser una columna y pasa a ser un desplegable arriba de la * grilla: es la afordancia de celular, no del layout grande. Cerrado por * defecto para que la grilla no quede a media pantalla de distancia. */ @media (max-width: 900px) { .sdt-catalogo { grid-template-columns: 1fr; } .sdt-filtros { position: static; } .sdt-filtros__tapa { cursor: pointer; } /* πŸ”‘ EL TOPE DE ALTO NO ES ADORNO: en la tienda real la lista de rubros tiene * 53 entradas. Apilado y abierto, el panel dejaria la primera tarjeta a tres * pantallas de scroll de la cabecera. El
se puede cerrar, pero * abierto -que es como llega- tiene que caber: con el tope, el panel ocupa * media pantalla y la grilla queda a la vista. Sin JS: el estado abierto/ * cerrado es del HTML y no se puede decidir por viewport desde el servidor. */ .sdt-filtros__adentro { max-height: 46vh; overflow-y: auto; } } @media (max-width: 760px) { .sdt-rejilla .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .sdt-rejilla .wc-block-product-template { grid-template-columns: 1fr; } .sdt-rejilla .wc-block-components-product-image img { aspect-ratio: 16 / 9; } .sdt-tapa__conteo { font-size: .83rem; padding: .4rem .6rem; } } /* ═══════════════════════════════════════════════════════════════════════════ * β–“β–“β–“ REDISEΓ‘O PREMIUM β€” 13/09/2026 β–“β–“β–“ * * TODO LO DE ARRIBA QUEDA INTACTO, A PROPOSITO. Cada trampa documentada ahi * -el margen del core con !important, el parrafo fantasma del shortcode, el * :has() que esconde la barra vacia- se pago una vez y no se vuelve a pagar. * Lo que sigue es una CAPA, no un reemplazo: donde cambia una decision, la * regla nueva le gana por cascada (misma especificidad, mas abajo), asi que * borrando este bloque el theme vuelve exactamente a como estaba. * * πŸ”‘ LOS TRES CAMBIOS DE FONDO * 1. El buscador manda. En la cabecera se queda con el ancho que sobra y en * la portada ES el hero. El que compra aca sabe que necesita. * 2. El CTA de la cabecera pasa a AMARILLO con texto negro (16,5:1, el par * mas fuerte de la marca). Antes era negro con texto amarillo: correcto, * pero se perdia contra el rojo. Es el unico boton que abre los precios. * 3. El lienzo del articulo sin foto muestra el CODIGO. Dos de cada tres no * tienen imagen; el codigo es unico en cada tarjeta y es lo que el * comerciante dicta por telefono. * * πŸ”‘ SOBRE LOS !important DE ESTE BLOQUE: hay exactamente CUATRO, y los cuatro * son contra un style="" inline que emite WordPress para el ancho o el padding * de una columna. A un inline no se le gana de otra forma. Cada uno esta * marcado con ⚠️. Ninguna otra regla de aca abajo usa !important β€” lo que el * theme padre imponia por tipografia, radio de boton y ancho de contenido ahora * lo declara el theme.json del child, que es donde se gana por diseΓ±o. * * πŸ”΄ NI UN HEX EN ESTE BLOQUE. Los nueve colores bajan por theme.json como * var(--wp--preset--color--*). Los tres tonos que la paleta no nombra -el negro * un punto mas claro de la caja del alta, su hover, y el gris de los conteos del * pie- se expresan con color-mix SOBRE los tokens, que es el patron que el * original ya usa en .sdt-miga y .sdt-tapa__bajada. Si el navegador no soporta * color-mix descarta la declaracion y cae al token pleno: degrada a mas * contraste, no a menos. * ═══════════════════════════════════════════════════════════════════════════ */ /* ═════════ 1. LA BANDA DE ENVIOS ═══════════════════════════════════════════ * Los tres datos estaban separados por puntos medios y se leian como una sola * frase corrida. Ahora hay un filete entre uno y otro, y el telefono se va al * extremo derecho, que es donde se lo busca. */ .sdt-banda__fila { justify-content: flex-start; gap: .3rem .9rem; } .sdt-banda__filete { width: 1px; align-self: stretch; min-height: 13px; background: color-mix(in srgb, var(--wp--preset--color--accent-3) 32%, transparent); flex: none; } /* πŸ”‘ SE VA EL opacity DEL DATO. Negro sobre amarillo da 16,5:1 y al 78 % de * opacidad cae a ~10:1: sigue pasando, pero el motivo por el que estaba * atenuado -jerarquia- ahora lo resuelve el filete. Un dato de contacto no se * atenua; se ordena. */ .sdt-banda__dato { opacity: 1; font-weight: 600; } .sdt-banda__wa { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; color: var(--wp--preset--color--accent-3); font-weight: 700; text-decoration: none; } .sdt-banda__wa:hover { text-decoration: underline; } /* ═════════ 2. LA CABECERA ══════════════════════════════════════════════════ */ /* El buscador y su linea de ayuda son UN item del flex de la cabecera, y es el * que se estira. Sin este grupo la ayuda seria hermana del logo y el flex la * mandaria a su propia columna. */ .sdt-cabecera__buscar { flex: 1 1 380px; min-width: 240px; } .sdt-cabecera .wp-block-search { flex: none; margin: 0; } .sdt-buscador .wp-block-search__input { padding: .75rem .85rem !important; font-size: 1rem !important; } .sdt-buscador .wp-block-search__button { font-size: 1.06rem; padding-inline: 1.35rem !important; } /* La ayuda debajo del campo. Negro pleno sobre rojo: 4,76:1. Nada de opacity * -atenuar sobre rojo es lo primero que rompe AA- la jerarquia la hace el * tamaΓ±o. */ .sdt-ayuda { margin: .45rem 0 0; color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* πŸ”΄ EL CTA AMARILLO. Negro sobre amarillo, 16,5:1, el par mas fuerte que tiene * la marca β€” y el borde negro lo separa del rojo de la cabecera. */ .sdt-acciones__ingresar { background: var(--wp--preset--color--accent-2); border: 2px solid var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-3); padding: .55rem .9rem; } .sdt-acciones__ingresar:hover { background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--accent-3); } /* EL CARRITO (inc/header.php). Es el bloque mini-cart de Woo con la ropa del * boton de WhatsApp: recuadro negro sobre rojo, mismo alto que sus vecinos. El * contador va en la chapa de la marca, amarillo sobre negro (16,5:1). * πŸͺ€ El bloque trae su propio color de badge por inline style desde el editor; * aca no se configuro ninguno, asi que alcanza la especificidad normal. */ .sdt-acciones__carrito { display: flex; } .sdt-acciones__carrito .wc-block-mini-cart { display: flex; } .sdt-acciones__carrito .wc-block-mini-cart__button { display: inline-flex; align-items: center; min-height: 44px; border: 2px solid var(--wp--preset--color--accent-3); border-radius: 0; background: transparent; color: var(--wp--preset--color--accent-3); padding: .3rem .7rem; cursor: pointer; } .sdt-acciones__carrito .wc-block-mini-cart__button:hover, .sdt-acciones__carrito .wc-block-mini-cart__button:focus-visible { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); } .sdt-acciones__carrito .wc-block-mini-cart__icon { width: 30px; height: 30px; margin: 0; } .sdt-acciones__carrito .wc-block-mini-cart__badge { border: 2px solid var(--wp--preset--color--accent-3); border-radius: 0; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; } /* ═════════ 3. LOS ATAJOS DEL HERO ══════════════════════════════════════════ * πŸ”΄ ACA HABIA UN SEGUNDO BUSCADOR Y SE SACO EL 13/09/2026. Era el mismo control * que el de la cabecera a tres centimetros de distancia: dos campos, dos botones * BUSCAR, un solo trabajo. El buscador del sitio es el de la cabecera, que * ademas esta en TODAS las pantallas β€” un solo lugar que aprender. * * Los atajos se quedan, y ahora son el unico control del hero, asi que crecen: * son lo que le muestra al visitante que clase de articulos hay antes de que * escriba nada. */ .sdt-hero__atajos { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .9rem 0 0; } .sdt-hero__atajos-rotulo { color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-size: .87rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-right: .25rem; } .sdt-hero__atajos a { display: inline-flex; align-items: center; min-height: 38px; background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; padding: .4rem .85rem; } .sdt-hero__atajos a:hover { background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--accent-3); } /* EL 404 (templates/404.html). Es el hero de la portada en una sola columna: * misma cinta, mismo titular con sombra, mismos atajos y los botones .sdt-boton. * Lo unico propio es el aire y el ancho del buscador, que aca es el control * principal y no el de la cabecera. `position` por la textura de .sdt-hero. */ .sdt-404__adentro { position: relative; padding-block: 3rem 2.6rem; } .sdt-404 .sdt-hero__titulo { max-width: 18ch; } .sdt-404__buscador { max-width: 640px; margin: 1.4rem 0 0; } .sdt-404__buscador .wp-block-search__input { padding: .85rem .9rem !important; font-size: 1.06rem !important; } .sdt-404 .sdt-hero__botones { margin-top: 1.6rem; } /* ═════════ 4. EL BLOQUE DEL ALTA (portada y ficha, el mismo copy) ══════════ * πŸ”΄ UNA SECCION SIN CONTENIDO NO SE DIBUJA β€” mismo patron que las otras dos * secciones de la portada. El shortcode devuelve cadena vacia al cliente con * sesion, y sin esta regla queda una banda negra vacia en la portada. */ .sdt-seccion--alta:not(:has(.sdt-alta)) { display: none; } .sdt-alta { display: block; } .sdt-alta__titulo { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1; } .sdt-alta__pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; } .sdt-alta__paso p { margin: 0; font-size: 1.06rem; line-height: 1.5; } .sdt-alta__n { display: block; margin-bottom: .25rem; font-family: var(--wp--preset--font-family--barlow); font-size: 1.06rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent-6); } .sdt-alta__cta { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.06rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .75rem 1.05rem; } .sdt-alta__cta:hover { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-3); } /* En la banda negra de la portada se invierte: el titulo va amarillo -16,5:1 * sobre negro, sin sombra, que la sombra existe para sostenerlo sobre rojo- y * el CTA se vuelve amarillo, que es el unico color que compite con el negro. */ .sdt-seccion--alta .sdt-alta__titulo { color: var(--wp--preset--color--accent-2); } .sdt-seccion--alta .sdt-alta__paso p { color: var(--wp--preset--color--accent-4); } .sdt-seccion--alta .sdt-alta__n { color: var(--wp--preset--color--accent-2); } .sdt-seccion--alta .sdt-alta__cta { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); } .sdt-seccion--alta .sdt-alta__cta:hover { background: var(--wp--preset--color--blanco); } /* En la ficha es una caja de papel adentro de la columna de datos. */ .sdt-ficha .sdt-alta { margin-top: 1.1rem; border: 2px solid var(--wp--preset--color--accent-4); background: var(--wp--preset--color--blanco); padding: 1.25rem; } /* ═════════ 5. EL LIENZO DEL ARTICULO SIN FOTO ══════════════════════════════ * πŸ”΄ LA RESTRICCION DE PRIMER ORDEN: 554 de 1.627 articulos tienen foto. La * grilla no puede depender de la imagen para verse bien. * * El markup lo emite inc/lienzo.php desde el filtro del placeholder de Woo, asi * que este bloque viste un
, no un : de ahi el display:grid propio en * vez de heredar el object-fit de la regla de imagen de mas arriba. */ .sdt-lienzo { position: relative; display: grid; place-items: center; width: 100%; background: color-mix(in srgb, var(--wp--preset--color--accent-4) 62%, var(--wp--preset--color--base)); background-image: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--wp--preset--color--accent-3) 4.5%, transparent) 0 1px, transparent 1px 8px ); } /* El glifo del rubro se queda, pero chico y al 30 %: sirve para distinguir * rubros de un barrido, no para tapar el hueco. */ .sdt-lienzo__glifo { position: absolute; top: .5rem; left: .5rem; width: 24px; height: 24px; color: color-mix(in srgb, var(--wp--preset--color--accent-3) 30%, transparent); } /* πŸ”‘ El codigo es lo unico que existe en los 1.627. Negro pleno sobre el papel * apagado: 13:1. Es el dato, no un adorno. */ .sdt-lienzo__codigo { display: block; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: clamp(1.5rem, 7cqw, 2.4rem); line-height: 1; letter-spacing: .02em; color: var(--wp--preset--color--accent-3); text-align: center; } .sdt-lienzo__rotulo { display: block; margin-top: .2rem; font-family: var(--wp--preset--font-family--barlow); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--accent-5); text-align: center; } /* La chapa de la marca al pie. Sostiene el amarillo sobre negro a cualquier * tamaΓ±o (16,5:1) y desaparece sola en los 400 articulos sin marca, porque PHP * no emite el nodo: no queda una chapa en blanco ni dice Β«SIN MARCAΒ». */ .sdt-lienzo__marca { position: absolute; inset: auto 0 0 0; background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* cqw en el codigo necesita un contenedor consultable. Sin soporte, clamp cae * al minimo y el codigo se lee igual: degrada, no rompe. */ .sdt-rejilla .wc-block-components-product-image, .sdt-ficha__galeria { container-type: inline-size; } /* El lienzo dentro de la tarjeta hereda la proporcion de la grilla. */ .sdt-rejilla .wc-block-components-product-image .sdt-lienzo { aspect-ratio: 4 / 3; } /* πŸ”‘ EL NOMBRE DE LA TARJETA, EN VERSALITAS. Los nombres llegan gritados * (Β«ABROCHADORA KANGARO PINZA HP-10 0951200Β»): bajarlos a minuscula y * versalizarlos los vuelve legibles sin perder la caja alta. Es exactamente el * mismo recurso que el theme ya usa para los rubros del ERP (.sdt-versalita), * aplicado al otro campo que llega en mayuscula. * πŸͺ€ Dos pasos y no uno: font-variant sola no hace nada sobre lo que YA esta en * mayusculas. */ .sdt-rejilla .sdt-prod__nombre { text-transform: lowercase; font-variant: small-caps; font-size: 1rem; text-wrap: pretty; } /* ═════════ 6. LA FICHA DE PRODUCTO ═════════════════════════════════════════ */ .sdt-ficha__migas { margin-block: 1.1rem .4rem; font-family: var(--wp--preset--font-family--barlow); font-size: .95rem; font-weight: 600; letter-spacing: .05em; color: var(--wp--preset--color--accent-5); } .sdt-ficha__migas a { color: var(--wp--preset--color--accent-5); text-decoration: none; } .sdt-ficha__migas a:hover { color: var(--wp--preset--color--accent-6); } .sdt-ficha__grilla { align-items: flex-start; margin-block: .8rem 2rem; } .sdt-ficha__galeria { border: 2px solid var(--wp--preset--color--accent-4); background: var(--wp--preset--color--blanco); } .sdt-ficha__nombre.sdt-ficha__nombre { margin: 0; font-family: var(--wp--preset--font-family--barlow); font-size: clamp(1.55rem, 3.2vw, 2.05rem); font-weight: 700; line-height: 1.18; letter-spacing: .005em; text-wrap: pretty; } /* La tira CODIGO / MARCA / STOCK. auto-fit: con dos celdas se ven dos anchas y * no queda un hueco donde iria la marca que no existe. El fondo del grid hace * de linea divisoria, asi que no hay bordes que sumar ni que restar. */ .sdt-ficha__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin-top: 1.3rem; border: 2px solid var(--wp--preset--color--accent-4); background: var(--wp--preset--color--accent-4); } .sdt-ficha__celda { background: var(--wp--preset--color--blanco); padding: .7rem .85rem; min-width: 0; } .sdt-ficha__rotulo { display: block; font-family: var(--wp--preset--font-family--barlow); font-size: .81rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent-5); } .sdt-ficha__valor { display: block; margin-top: .1rem; font-family: var(--wp--preset--font-family--barlow); font-size: 1.45rem; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; } .sdt-ficha__stock { display: inline-flex; align-items: center; gap: .45rem; } .sdt-ficha__semaforo { width: 13px; height: 13px; flex: none; background: var(--wp--preset--color--accent-2); border: 2px solid var(--wp--preset--color--accent-3); } /* Cuando falta, el aviso es la informacion mas util de la ficha y se lee como * tal: rojo tinta, 6,27:1. */ .sdt-ficha__stock--falta { color: var(--wp--preset--color--accent-6); } .sdt-ficha__stock--falta .sdt-ficha__semaforo { background: var(--wp--preset--color--blanco); border-color: var(--wp--preset--color--accent-6); } /* πŸ”΄ EL SLOT DEL PRECIO: MISMO ALTO CON Y SIN SESION. * * El min-height es lo que hace que la pagina no salte al entrar. Sin el, el * cartel del anonimo -dos renglones de condensada- y el importe -un numero * grande- miden distinto, y el cliente que inicia sesion ve moverse todo lo que * hay abajo. El alto lo decide la caja, no el contenido. * * πŸͺ€ Quien ve el importe NO se decide aca: eso es del mu-plugin * ventio-porton-precios. Este bloque pinta el slot en los dos estados y nada * mas. */ .sdt-ficha__precio { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; box-sizing: border-box; min-height: 96px; margin-top: 1.2rem; border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); padding: 1rem 1.25rem; } /* Con sesion: el importe, en negro sobre amarillo. */ .sdt-ficha__precio .woocommerce-Price-amount, .sdt-ficha__precio .wc-block-components-product-price { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; color: var(--wp--preset--color--accent-3); } /* Sin sesion: la franja del porton, que en la tarjeta es compacta, aca se * agranda β€” hay lugar. El markup es el mismo (inc/catalogo.php). */ .sdt-ficha__precio .sdt-precio { flex: 1 1 100%; border-top: 0; background: transparent; padding: 0; gap: 1rem; } .sdt-ficha__precio .sdt-precio__leyenda { font-size: .9rem; } .sdt-ficha__precio .sdt-precio__leyenda b { font-size: 1.5rem; line-height: 1.05; letter-spacing: -.01em; } .sdt-ficha__precio .sdt-precio__flecha { font-size: 1.06rem; padding: .8rem 1.05rem; } .sdt-ficha__pedido { margin-top: 1.1rem; } .sdt-ficha__pedido .quantity input { border: 2px solid var(--wp--preset--color--accent-3); border-radius: 0; padding: .6rem; font-size: 1.05rem; width: 5.5rem; } .sdt-ficha__pedido .button { border: 3px solid var(--wp--preset--color--accent-3); border-radius: 0; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; padding: .85rem 1.3rem; } .sdt-ficha__pedido .button:hover { background: var(--wp--preset--color--blanco); } /* El aviso Β«Se agrego ... a tu carritoΒ» (bloque store-notices de la ficha). * El de Woo viene redondeado y en azul de sistema; aca va con el recuadro negro * de la marca y el Β«Ver carritoΒ» como boton amarillo, que es el paso siguiente. * Los colores de error y aviso de Woo se respetan: solo se toca el borde. */ .sdt-avisos .wc-block-components-notice-banner { border: 3px solid var(--wp--preset--color--accent-3); border-radius: 0; font-size: 1.02rem; } .sdt-avisos .wc-block-components-notice-banner.is-success { background: var(--wp--preset--color--blanco); } .sdt-avisos .wc-block-components-notice-banner .wc-forward { border: 2px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .45rem .8rem; opacity: 1; } .sdt-avisos .wc-block-components-notice-banner .wc-forward:hover { background: var(--wp--preset--color--blanco); } .sdt-ficha__relacionados > h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-block: 2rem 1rem; } /* ═════════ 7. LOGIN Y MI CUENTA ════════════════════════════════════════════ * Todo el markup de aca abajo lo emite WooCommerce: no se forkeo una plantilla. * Lo unico propio son .sdt-login__* y .sdt-cuenta__*, de inc/cuenta.php. */ .sdt-cuenta { padding-bottom: 2.5rem; } /* La chapa de estado: lo primero que ve el cliente dado de alta. */ .sdt-cuenta__estado { /* border-box: sin esto el borde y el padding se suman al ancho del layout y * la chapa asoma 19px por cada lado del buscador y del panel. */ box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-block: 1.2rem 1.1rem; border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); padding: .7rem 1rem; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--accent-3); } .sdt-cuenta__chapa { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.05rem; } .sdt-cuenta__chapa::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--wp--preset--color--accent-3); } .sdt-cuenta__quien { font-size: 1.01rem; } /* πŸ”‘ EL BUSCADOR ANTES DEL MENU: el cliente que entra no viene a administrar su * cuenta, viene a buscar un codigo con su precio puesto. */ .sdt-cuenta__buscador { box-sizing: border-box; display: flex; align-items: stretch; margin-bottom: 1.6rem; border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--blanco); } .sdt-cuenta__buscador svg { width: 22px; height: 22px; align-self: center; margin-left: .9rem; color: var(--wp--preset--color--accent-5); } .sdt-cuenta__buscador input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: .95rem .75rem; font-size: 1.05rem; color: var(--wp--preset--color--contrast); } .sdt-cuenta__buscador input[type="search"]:focus { outline: 0; } .sdt-cuenta__buscador button { flex: none; border: 0; border-left: 3px solid var(--wp--preset--color--accent-3); border-radius: 0; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; padding-inline: 1.5rem; cursor: pointer; } /* El bloque partido del login: negro a la izquierda, el formulario de Woo a la * derecha, un solo borde alrededor de los dos. */ .sdt-cuenta__partido { border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--blanco); margin-block: 0; } .sdt-cuenta__partido > .wp-block-column { min-width: 0; } /* πŸ”΄ CON SESION LA COLUMNA DEL PANEL QUEDA VACIA. Mismo caso -y misma salida- * que el hero sin panel de cifras: se esconde la columna vacia y la que queda * toma el ancho completo. * * ⚠️ !important 1 y 2 de los cuatro de este bloque: el ancho de columna lo pone * WordPress como style="flex-basis:46%" INLINE, y a un inline no se le gana de * otra forma. Sin :has() quedan dos columnas y una vacia: degrada, no rompe. */ .sdt-cuenta__partido:not(:has(.sdt-login__panel)) > .wp-block-column:first-child { display: none; } .sdt-cuenta__partido:not(:has(.sdt-login__panel)) > .wp-block-column:last-child { flex-basis: 100% !important; } /* ⚠️ !important 3: mismo motivo, el padding del bloque de columna es inline. */ .sdt-cuenta__partido:not(:has(.sdt-login__panel)) .sdt-cuenta__woo { padding: 1.8rem !important; } .sdt-login__panel { display: flex; flex-direction: column; gap: 1.1rem; height: 100%; box-sizing: border-box; background: var(--wp--preset--color--accent-3); padding: 2rem 1.9rem; } .sdt-login__cinta { align-self: flex-start; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-size: .87rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .6rem; } /* Amarillo sobre negro: 16,5:1, sin sombra dura. La sombra existe para * sostener el amarillo SOBRE ROJO, y aca no hay rojo que sostener. */ .sdt-login__titulo.sdt-login__titulo { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: .98; color: var(--wp--preset--color--accent-2); } .sdt-login__bajada { margin: 0; max-width: 42ch; color: var(--wp--preset--color--accent-4); font-size: 1.02rem; line-height: 1.55; } .sdt-login__razones { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .sdt-login__razones li { display: flex; align-items: flex-start; gap: .7rem; color: var(--wp--preset--color--blanco); font-size: 1.1rem; line-height: 1.45; } .sdt-login__razones svg { width: 19px; height: 19px; margin-top: .15rem; color: var(--wp--preset--color--accent-2); } .sdt-login__alta { margin-top: auto; background: color-mix(in srgb, var(--wp--preset--color--accent-3) 92%, var(--wp--preset--color--base)); border-left: 4px solid var(--wp--preset--color--accent-2); padding: 1.05rem 1.15rem; } .sdt-login__alta h3 { margin: 0 0 .45rem; font-size: 1.1rem; color: var(--wp--preset--color--accent-2); letter-spacing: .01em; } .sdt-login__alta p { margin: 0 0 .9rem; color: var(--wp--preset--color--accent-4); font-size: 1.01rem; line-height: 1.5; } .sdt-login__cta { display: inline-flex; align-items: center; gap: .55rem; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .75rem 1rem; } .sdt-login__cta:hover { background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--accent-3); } /* ---- el markup de Woo, vestido ------------------------------------------ */ .sdt-cuenta__woo { padding: 2rem 1.9rem; } .sdt-cuenta__woo .woocommerce { margin: 0; } .sdt-cuenta__woo h2 { margin: 0 0 .3rem; font-size: 1.75rem; } .sdt-cuenta__woo .woocommerce-form-login { border: 0; margin: 0; padding: 0; } .sdt-cuenta__woo .woocommerce-form-row { margin-bottom: 1.05rem; } /* πŸ”΄ Los dos campos de contrasena van UNO DEBAJO DEL OTRO, no en dos columnas. * * WooCommerce marca "nueva contrasena" y "repetir" con `form-row-first` / * `form-row-last`, que son sus dos columnas flotadas al 47%. Eso supone una * etiqueta de UNA linea y un ancho de pagina completo, y aca no se cumple * ninguna de las dos: el formulario vive en la mitad derecha del partido * (la otra mitad es el panel negro) y la etiqueta en espanol es larga -- * "Volve a ingresar tu nueva contrasena" ocupa DOS lineas. Con floats, la * segunda etiqueta empuja su campo hacia abajo y los dos inputs quedan * desalineados; el medidor de fuerza, que cuelga solo del primero, queda * flotando en el medio. * * Apilarlos arregla las tres cosas de una y ademas le da al campo el ancho * completo, que es lo que corresponde para una contrasena. * * πŸ”΄ LA VERSION ANTERIOR DE ESTA REGLA NUNCA APLICO. Decia que * `.sdt-cuenta__woo .form-row-first` (0,2,0) le ganaba a `.form-row-first` * (0,1,0), pero el selector real de WooCommerce es * `.woocommerce form .form-row-first` (0,2,1, woocommerce-layout.css): ganaba * Woo y el reset de contrasena seguia en dos columnas de 269px desparejas * (medido en dev el 16/09/2026). Se sube a (0,3,1) con el `.woocommerce form` * del medio, sin !important: los de este archivo siguen siendo solo contra * estilos inline. */ .sdt-cuenta__woo .woocommerce form .form-row-first, .sdt-cuenta__woo .woocommerce form .form-row-last { float: none; width: 100%; box-sizing: border-box; /* Woo le pone padding:3px a .form-row: sin esto asoma 6px */ margin-right: 0; } .sdt-cuenta__woo label { display: block; margin-bottom: .35rem; font-family: var(--wp--preset--font-family--barlow); font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent-5); } .sdt-cuenta__woo input[type="text"], .sdt-cuenta__woo input[type="email"], .sdt-cuenta__woo input[type="tel"], .sdt-cuenta__woo input[type="password"], .sdt-cuenta__woo select { width: 100%; box-sizing: border-box; border: 2px solid var(--wp--preset--color--accent-4); border-radius: 0; background: var(--wp--preset--color--blanco); padding: .8rem .85rem; font-family: var(--wp--preset--font-family--barlow); font-size: 1rem; color: var(--wp--preset--color--contrast); } .sdt-cuenta__woo input:focus, .sdt-cuenta__woo select:focus { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: -1px; border-color: var(--wp--preset--color--accent-3); } /* πŸͺ€ LOS CAMPOS DENTRO DE .form-row PERDIAN LA REGLA DE ARRIBA: Woo los pinta * con `.woocommerce form .form-row .input-text` (0,3,1) y su CSS de block theme * con `.woocommerce-page form .form-row input.input-text` (0,3,2): borde gris de * 1px, radio de 4px y otro padding. Resultado medido: el campo con foco tenia * el contorno amarillo de la marca sobre esquinas redondeadas y el de al lado * el borde fino de Woo. Misma declaracion, con la especificidad que hace falta * (0,4,2), para reposo y foco. */ .sdt-cuenta__woo .woocommerce form .form-row input.input-text, .sdt-cuenta__woo .woocommerce form .form-row select { border: 2px solid var(--wp--preset--color--accent-4); border-radius: 0; background: var(--wp--preset--color--blanco); padding: .8rem .85rem; font-family: var(--wp--preset--font-family--barlow); font-size: 1rem; color: var(--wp--preset--color--contrast); } .sdt-cuenta__woo .woocommerce form .form-row input.input-text:focus, .sdt-cuenta__woo .woocommerce form .form-row select:focus { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: -1px; border-color: var(--wp--preset--color--accent-3); } /* EL MEDIDOR DE FORTALEZA de la contrasena (lo agrega el JS de Woo debajo del * primer campo). Woo lo trae centrado y en pasteles; aca va al ancho del campo, * con el borde negro de la marca, y el nivel se lee en una barra a la izquierda * mas el texto -no solo el color-: * short (muy debil) rojo tinta, texto rojo tinta (6,27:1) * bad (debil) rojo pleno * good (medio) amarillo * strong(fuerte) fondo amarillo entero, barra negra (16,5:1) */ .sdt-cuenta__woo .woocommerce-password-strength { box-sizing: border-box; width: 100%; margin-top: .45rem; border: 2px solid var(--wp--preset--color--accent-3); border-left-width: 12px; border-radius: 0; background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--contrast); padding: .5rem .75rem; font-family: var(--wp--preset--font-family--barlow); font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left; } .sdt-cuenta__woo .woocommerce-password-strength.short { border-left-color: var(--wp--preset--color--accent-6); color: var(--wp--preset--color--accent-6); } .sdt-cuenta__woo .woocommerce-password-strength.bad { border-left-color: var(--wp--preset--color--accent-1); } .sdt-cuenta__woo .woocommerce-password-strength.good { border-left-color: var(--wp--preset--color--accent-2); } .sdt-cuenta__woo .woocommerce-password-strength.strong { border-left-color: var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); } /* Un rotulo largo (Β«Volve a ingresar tu nueva contrasenaΒ») parte en dos lineas * y con el interlineado de lectura del theme quedaba un hueco entre ellas. */ .sdt-cuenta__woo .woocommerce form .form-row label { line-height: 1.35; } /* El recuadro Β«Cambio de contrasenaΒ» de Detalles de la cuenta: el fieldset * llegaba con el borde gris de 1px del navegador y la leyenda en texto comun. */ .sdt-cuenta__woo .woocommerce-EditAccountForm fieldset { margin: 1.2rem 0 0; border: 2px solid var(--wp--preset--color--accent-4); padding: .4rem 1rem .6rem; } .sdt-cuenta__woo .woocommerce-EditAccountForm legend { padding: 0 .4rem; font-family: var(--wp--preset--font-family--barlow); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--accent-3); } .sdt-cuenta__woo .woocommerce-password-hint { display: block; margin-top: .4rem; font-size: .95rem; line-height: 1.45; color: var(--wp--preset--color--accent-5); } /* La casilla de Β«recordarmeΒ»: su label no lleva la versalita de los demas β€” * es texto de lectura, no un rotulo de campo. */ .sdt-cuenta__woo .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-family: var(--wp--preset--font-family--barlow); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--contrast); } .sdt-cuenta__woo .woocommerce-form-login__rememberme input { width: auto; accent-color: var(--wp--preset--color--accent-3); } .sdt-cuenta__woo .woocommerce-LostPassword { margin: .9rem 0 0; font-size: 1rem; } .sdt-cuenta__woo .woocommerce-LostPassword a { border-bottom: 2px solid var(--wp--preset--color--accent-2); text-decoration: none; } /* πŸ”΄ EL BOTON DE INGRESAR ES EL AMARILLO. Es la puerta al precio: en toda la * pantalla no hay otra cosa que el visitante tenga que hacer. */ .sdt-cuenta__woo .woocommerce-form-login__submit, .sdt-cuenta__woo button.woocommerce-button, .sdt-cuenta__woo .woocommerce-Button { width: 100%; margin-top: 1.2rem; border: 3px solid var(--wp--preset--color--accent-3); border-radius: 0; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.15rem; letter-spacing: .07em; text-transform: uppercase; padding: .95rem 1rem; cursor: pointer; } .sdt-cuenta__woo .woocommerce-form-login__submit:hover { background: var(--wp--preset--color--blanco); } /* El panel del cliente: navegacion arriba en apilado, columna en grande. */ .sdt-cuenta__woo .woocommerce-MyAccount-navigation { float: none; width: auto; margin-bottom: 1.4rem; } .sdt-cuenta__woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 2px solid var(--wp--preset--color--accent-4); background: var(--wp--preset--color--blanco); } .sdt-cuenta__woo .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--wp--preset--color--accent-4); } .sdt-cuenta__woo .woocommerce-MyAccount-navigation a { display: block; padding: .8rem .9rem; border-left: 4px solid transparent; color: var(--wp--preset--color--contrast); font-size: 1rem; text-decoration: none; } .sdt-cuenta__woo .woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--base); } .sdt-cuenta__woo .woocommerce-MyAccount-navigation .is-active a { background: var(--wp--preset--color--base); border-left-color: var(--wp--preset--color--accent-1); font-weight: 700; } .sdt-cuenta__woo .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--wp--preset--color--accent-6); font-weight: 700; } .sdt-cuenta__woo .woocommerce-MyAccount-content { float: none; width: auto; } .sdt-cuenta__woo .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; } /* πŸ”΄ Β«MI CUENTA SE VE SIEMPRE COMO MOBILEΒ»: el comentario de arriba pedia * navegacion apilada en angosto y en columna en grande, pero solo estaba escrita * la mitad apilada, sin media query. A 1440px el menu era una lista de 1000px de * ancho y el contenido arrancaba debajo del pliegue. * Desde 782px -el mismo corte en que WordPress deja de apilar las columnas- el * menu va a la izquierda con ancho fijo y el contenido al lado. Se usa grid * sobre el contenedor de Woo y no los float de su CSS: el float depende de * anchos en porcentaje que no suman con el padding de este panel. * `:has(> nav)` para que el formulario de ingreso -que vive en el mismo * contenedor, sin navegacion- no se entere. */ @media (min-width: 782px) { .sdt-cuenta__woo .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: 2rem; align-items: start; } /* πŸͺ€ El clearfix de Woo (::before/::after con content) son items del grid: * sin esto el ::before ocupa la primera celda, el menu cae en la columna * ancha y el contenido baja a la angosta. Medido en dev el 16/09/2026. */ .sdt-cuenta__woo .woocommerce:has(> .woocommerce-MyAccount-navigation)::before, .sdt-cuenta__woo .woocommerce:has(> .woocommerce-MyAccount-navigation)::after { display: none; } .sdt-cuenta__woo .woocommerce-MyAccount-navigation { margin-bottom: 0; } .sdt-cuenta__woo .woocommerce-MyAccount-content > :first-child { margin-top: 0; } } /* La tabla de pedidos. πŸͺ€ En un theme de bloques llega sin ancho propio: sin * esto se le va del contenedor en cuanto un pedido tiene muchos articulos. */ .sdt-cuenta__woo .woocommerce-orders-table, .sdt-cuenta__woo table.shop_table { width: 100%; border-collapse: collapse; border: 2px solid var(--wp--preset--color--accent-4); font-size: 1.06rem; } .sdt-cuenta__woo table.shop_table th { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: .65rem .8rem; } .sdt-cuenta__woo table.shop_table td { border-top: 1px solid var(--wp--preset--color--accent-4); padding: .7rem .8rem; } .sdt-cuenta__woo table.shop_table .woocommerce-orders-table__cell-order-number a { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; text-decoration: none; } .sdt-cuenta__woo .woocommerce-orders-table__cell-order-status { font-family: var(--wp--preset--font-family--barlow); font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .sdt-cuenta__woo table.shop_table .button { border: 2px solid var(--wp--preset--color--accent-3); border-radius: 0; background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-size: .92rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .45rem .7rem; width: auto; margin: 0; } .sdt-cuenta__woo .woocommerce-info, .sdt-cuenta__woo .woocommerce-message { border: 2px solid var(--wp--preset--color--accent-4); border-left: 4px solid var(--wp--preset--color--accent-1); background: var(--wp--preset--color--blanco); padding: .9rem 1rem; font-size: 1.06rem; } /* ═════════ 7b. EL CARRITO (templates/page-cart.html) ═══════════════════════ * El bloque carrito de Woo con la ropa de la tienda: esquinas rectas, borde * negro de 3px en lo que se toca, Barlow en mayuscula para rotulos y el paso * siguiente -Β«Finalizar compraΒ»- como boton amarillo, igual que Β«Agregar al * carritoΒ» en la ficha. No se toca el marcado: solo clases de Woo. */ .sdt-carrito { padding-block: 1.6rem 3rem; } .sdt-carrito .sdt-avisos { margin-bottom: 1rem; } /* Β«Ver carritoΒ» en el aviso lleva a esta misma pagina: aca sobra. */ .sdt-carrito .sdt-avisos .wc-forward { display: none; } .sdt-carrito__titulo.sdt-carrito__titulo { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin: 0 0 1.4rem; } /* El carrito vacio: la caja .sdt-vacio, a lo ancho de la columna de lectura. */ .sdt-carrito__vacio { max-width: 760px; } /* Bajo 480px el boton va al 100% y su borde de 3px lo sacaba 6px de la pantalla. */ .sdt-carrito__vacio .sdt-vacio__cta { box-sizing: border-box; } .sdt-carrito__vacio .sdt-vacio__subtitulo { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; text-transform: uppercase; color: var(--wp--preset--color--accent-5); } /* ---- las lineas ---------------------------------------------------------- */ .sdt-carrito .wc-block-cart-items { border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--blanco); border-collapse: separate; } .sdt-carrito .wc-block-cart-items__header th { font-family: var(--wp--preset--font-family--barlow); font-size: .87rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent-5); padding: .8rem 1rem; border-bottom: 2px solid var(--wp--preset--color--accent-4); } .sdt-carrito .wc-block-cart-items__row td { border-top: 2px solid var(--wp--preset--color--accent-4); } /* πŸͺ€ Woo deja en 0 el padding de la primera y la ultima celda: con el recuadro * alrededor, Β«TotalΒ» quedaba pegado al borde (medido en dev, 1440px). */ .sdt-carrito .wc-block-cart-items th:first-child, .sdt-carrito .wc-block-cart-items td:first-child { padding-left: 1rem; } .sdt-carrito .wc-block-cart-items th:last-child, .sdt-carrito .wc-block-cart-items td:last-child { padding-right: 1rem; } .sdt-carrito .wc-block-cart-items__row:first-child td { border-top: 0; } .sdt-carrito .wc-block-cart-item__image img { border: 2px solid var(--wp--preset--color--accent-4); } .sdt-carrito .wc-block-components-product-name { color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.1rem; line-height: 1.2; text-decoration: none; } .sdt-carrito .wc-block-components-product-name:hover { color: var(--wp--preset--color--accent-6); } .sdt-carrito .wc-block-components-product-price, .sdt-carrito .wc-block-cart-item__total .wc-block-components-formatted-money-amount { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; } /* El selector de cantidad: el de Woo viene con radio de 4px y borde gris. */ .sdt-carrito .wc-block-components-quantity-selector { border-radius: 0; border: 2px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--blanco); } .sdt-carrito .wc-block-components-quantity-selector::after { display: none; } .sdt-carrito .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.06rem; } .sdt-carrito .wc-block-components-quantity-selector__button { border-radius: 0; color: var(--wp--preset--color--accent-3); } .sdt-carrito .wc-block-components-quantity-selector__button:hover { background: var(--wp--preset--color--accent-2); } .sdt-carrito .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link { color: var(--wp--preset--color--accent-6); font-size: .95rem; text-decoration: underline; } /* ---- el resumen ---------------------------------------------------------- */ .sdt-carrito .wc-block-cart__sidebar { align-self: flex-start; /* sin esto la caja se estira al alto de la tabla */ border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--blanco); padding: 1rem 1.1rem 1.2rem; } .sdt-carrito .wc-block-cart__totals-title.wc-block-cart__totals-title { font-family: var(--wp--preset--font-family--barlow); font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 0 0 .7rem; border-bottom: 2px solid var(--wp--preset--color--accent-4); } .sdt-carrito .wc-block-components-totals-wrapper { border-top-color: var(--wp--preset--color--accent-4); } .sdt-carrito .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .sdt-carrito .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--wp--preset--font-family--barlow); font-size: 1.35rem; font-weight: 700; } .sdt-carrito .wc-block-components-panel__button { font-weight: 600; } .sdt-carrito .wc-block-components-text-input input, .sdt-carrito .wc-block-components-text-input input:focus { border-radius: 0; border: 2px solid var(--wp--preset--color--accent-3); } /* Los botones de Woo en el carrito: Β«AplicarΒ» del cupon y Β«Finalizar compraΒ». */ .sdt-carrito .wc-block-components-button:not(.is-link) { border-radius: 0; border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: none; } .sdt-carrito .wc-block-components-button:not(.is-link):hover { background: var(--wp--preset--color--blanco); } .sdt-carrito .wc-block-cart__submit-button { font-size: 1.1rem; padding: .95rem 1.2rem; } /* ═════════ 8. EL PIE ═══════════════════════════════════════════════════════ */ .sdt-pie__columnas { align-items: flex-start; } .sdt-pie__titulo.sdt-pie__titulo { color: var(--wp--preset--color--accent-2); } .sdt-pie__cifras { margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; } .sdt-pie__cifras span { background: color-mix(in srgb, var(--wp--preset--color--accent-3) 92%, var(--wp--preset--color--base)); color: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .55rem; } .sdt-pie__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .sdt-pie__datos li { display: flex; align-items: flex-start; gap: .55rem; color: var(--wp--preset--color--accent-4); font-size: 1.01rem; line-height: 1.45; } .sdt-pie__datos svg { width: 16px; height: 16px; margin-top: .15rem; flex: none; } .sdt-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .sdt-pie__lista a { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: 1.01rem; text-decoration: none; } .sdt-pie__lista b { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; color: color-mix(in srgb, var(--wp--preset--color--base) 40%, var(--wp--preset--color--accent-5)); } .sdt-pie__lista a:hover b { color: var(--wp--preset--color--accent-2); } .sdt-pie__todo { margin-top: .3rem; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; } .sdt-pie__cta { display: flex; align-items: center; justify-content: center; gap: .55rem; background: var(--wp--preset--color--accent-2); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.06rem; letter-spacing: .06em; text-transform: uppercase; padding: .8rem .9rem; text-align: center; } /* πŸͺ€ El pie pinta sus links con la API de elements (accent-4 en reposo), asi * que el CTA amarillo necesita decir su color de texto o sale claro sobre * amarillo. Negro sobre amarillo: 16,5:1. */ .sdt-pie .sdt-pie__cta, .sdt-pie .sdt-pie__cta:hover { color: var(--wp--preset--color--accent-3); } .sdt-pie .sdt-pie__cta:hover { background: var(--wp--preset--color--blanco); } .sdt-pie__enlaces { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; } .sdt-pie__enlaces a { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.01rem; } .sdt-pie__enlaces svg { width: 15px; height: 15px; flex: none; } .sdt-pie__cierre { gap: .4rem 1.5rem; } /* ═════════ 9. RESPONSIVE ═══════════════════════════════════════════════════ * πŸͺ€ EL PISO SON 360px SIN SCROLL HORIZONTAL. Estos compradores miran desde el * telefono, parados en el mostrador. */ @media (max-width: 900px) { .sdt-ficha__grilla > .wp-block-column { flex-basis: 100% !important; } } /* πŸ”‘ El partido del login se apila recien por debajo de 782px, el corte de * WordPress para columnas. Estaba en 900px y entre 782 y 900 -una tablet * apaisada, una ventana a media pantalla- el login se veia de telefono. */ @media (max-width: 781px) { /* ⚠️ !important 4 y ultimo: mismo motivo que los tres de arriba, el * flex-basis de la columna lo emite WordPress inline. */ .sdt-cuenta__partido > .wp-block-column { flex-basis: 100% !important; } .sdt-login__panel { height: auto; } } @media (max-width: 782px) { /* El buscador de la cabecera pasa a su propio renglon y ocupa todo el * ancho: es el elemento mas usado de la pantalla. */ .sdt-cabecera .wp-block-search { flex: 1 1 100%; } .sdt-cabecera__buscar { order: 3; flex: 1 1 100%; } } @media (max-width: 480px) { .sdt-banda__filete, .sdt-banda__dato { display: none; } .sdt-banda__fila { justify-content: space-between; font-size: .87rem; } .sdt-banda__wa { margin-left: 0; } /* πŸ”‘ 44px de alto minimo en los dos botones de la cabecera: es el piso de * area tactil, y a 360px son los unicos dos controles que quedan al lado * del logo. */ .sdt-acciones__wa, .sdt-acciones__ingresar { min-height: 44px; padding-inline: .7rem; } /* πŸ”‘ CON CARRITO NO ENTRAN LOS TRES AL LADO DEL LOGO a 390px, y la fila se * partia en dos. Se va el WhatsApp de la cabecera, que es el unico repetido: * el mismo numero esta arriba, en la banda amarilla, y ahi sigue siendo un * enlace. Sin carrito (porton puesto y sin sesion) no cambia nada. */ .sdt-acciones:has(.sdt-acciones__carrito) .sdt-acciones__wa { display: none; } .sdt-acciones__carrito .wc-block-mini-cart__button { padding-inline: .5rem; } .sdt-acciones__carrito .wc-block-mini-cart__icon { width: 26px; height: 26px; } /* Los atajos del hero son enlaces de dedo, no de mouse: 44px acΓ‘ tambiΓ©n. */ .sdt-hero__atajos a { min-height: 44px; } .sdt-cuenta__woo, .sdt-cuenta__partido:not(:has(.sdt-login__panel)) .sdt-cuenta__woo { padding: 1.2rem 1rem !important; } .sdt-login__panel { padding: 1.4rem 1.1rem; } .sdt-cuenta__buscador button { padding-inline: .9rem; font-size: .95rem; } .sdt-ficha__datos { grid-template-columns: 1fr 1fr; } .sdt-ficha__celda--codigo { grid-column: 1 / -1; } .sdt-ficha__precio { min-height: 0; padding: .9rem 1rem; } /* La tabla de pedidos a 360px: Woo ya trae el data-title en cada celda, * pero necesita que las celdas dejen de ser celdas. */ .sdt-cuenta__woo table.shop_table thead { display: none; } .sdt-cuenta__woo table.shop_table tr { display: block; border-top: 1px solid var(--wp--preset--color--accent-4); } .sdt-cuenta__woo table.shop_table td { display: flex; justify-content: space-between; gap: 1rem; border-top: 0; padding: .45rem .8rem; } .sdt-cuenta__woo table.shop_table td::before { content: attr(data-title); font-family: var(--wp--preset--font-family--barlow); font-size: .87rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent-5); } } /* ═══════════════════════════════════════════════════════════════════════════ * β–“β–“β–“ LOS RESULTADOS DE BUSQUEDA β–“β–“β–“ (13/09/2026) * * La busqueda usa parts/catalogo.html, el mismo part que /shop/ y el archivo de * un rubro, asi que hereda la tapa negra, el panel, la rejilla, la tarjeta, la * franja del porton y el paginado sin una linea nueva. Lo que sigue es SOLO lo * que la busqueda tiene y el catalogo no. * * πŸ”΄ EL BUSCADOR DEL HERO SE SACO. Era el mismo control que el de la cabecera a * tres centimetros: dos campos, dos botones, un solo trabajo. El buscador del * sitio es el de la cabecera, que ademas esta en todas las pantallas. Las reglas * de .sdt-hero__buscador se borraron de este archivo en vez de quedar como * codigo muerto esperando a que alguien las crea vivas. * ═══════════════════════════════════════════════════════════════════════════ */ /* πŸ”΄ SIN PANEL NO QUEDA UNA COLUMNA VACIA DE 248px. * * El grid de .sdt-catalogo tiene el ancho del panel CLAVADO, asi que cuando * [sdt_catalogo_panel] devuelve cadena vacia -busqueda sin facetas suficientes, * o un rubro sin hermanas- la grilla arrancaba a 264px del borde izquierdo con * nada a la izquierda. Es el mismo patron de las otras cinco cajas condicionales * del theme: sin :has() queda el hueco de hoy, degrada y no rompe. */ .sdt-catalogo:not(:has(.sdt-filtros)) { grid-template-columns: minmax(0, 1fr); } /* El titulo de la tapa en busqueda es lo que tipeo la persona, entre comillas. * NO lleva la versalita de los rubros: eso normaliza la caja mezclada del ERP, * y esto no viene del ERP. Si alguien busca en mayusculas, se ve como lo * escribio. overflow-wrap porque un codigo pegado no tiene donde cortar. */ .sdt-tapa__titulo { overflow-wrap: anywhere; } /* ---- el resultado vacio ------------------------------------------------- */ /* πŸ”΄ ES LA PANTALLA QUE MAS SE VE: alcanza con un digito mal en un codigo de * seis. Por eso no es un renglon gris centrado sino una caja con el mismo peso * que una tarjeta, y con salidas: los codigos parecidos, las puertas, WhatsApp. */ .sdt-vacio { border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--blanco); padding: 1.75rem; } .sdt-vacio__titulo { margin: 0 0 .6rem; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.05; } /* Lo buscado, resaltado dentro del titulo. Rojo tinta (6,27:1) y no el rojo de * marca, que como texto sobre claro no pasa AA. */ .sdt-vacio__que { color: var(--wp--preset--color--accent-6); overflow-wrap: anywhere; } .sdt-vacio__bajada { margin: 0; max-width: 68ch; font-size: 1.02rem; line-height: 1.55; text-wrap: pretty; } .sdt-vacio__subtitulo { margin: 1.5rem 0 .7rem; font-size: 1.05rem; letter-spacing: .06em; } /* La lista de codigos a un digito. El codigo va en condensada y grande porque * es lo que la persona esta comparando contra su factura, renglon por renglon; * el nombre va abajo, en versalita, para confirmar que es lo que buscaba. */ .sdt-vacio__cercanos { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .4rem; } .sdt-vacio__cercanos a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; border: 2px solid var(--wp--preset--color--accent-4); background: var(--wp--preset--color--base); padding: .7rem .85rem; text-decoration: none; color: var(--wp--preset--color--contrast); } .sdt-vacio__cercanos a:hover { border-color: var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--contrast); } .sdt-vacio__cercanos b { flex: none; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.35rem; line-height: 1; letter-spacing: .02em; } .sdt-vacio__cercanos span { flex: 1 1 16rem; min-width: 0; font-size: 1.06rem; font-weight: 600; line-height: 1.3; } .sdt-vacio__puertas { display: flex; flex-wrap: wrap; gap: .45rem; } .sdt-vacio__puertas a { display: inline-flex; align-items: baseline; gap: .5rem; border: 2px solid var(--wp--preset--color--accent-4); padding: .55rem .8rem; text-decoration: none; color: var(--wp--preset--color--contrast); font-size: 1.1rem; font-weight: 600; } .sdt-vacio__puertas a:hover { border-color: var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); } .sdt-vacio__puertas b { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: .95rem; color: var(--wp--preset--color--accent-6); } .sdt-vacio__cta { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.2rem; border: 3px solid var(--wp--preset--color--accent-3); background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .85rem 1.15rem; } .sdt-vacio__cta:hover { background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--accent-3); } .sdt-vacio__pie { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 2px solid var(--wp--preset--color--accent-4); font-size: 1.06rem; color: var(--wp--preset--color--accent-5); } /* ---- blindaje contra la vista generica de Woo --------------------------- */ /* πŸͺ€ ESTO NO DEBERIA HACER FALTA, Y SE DEJA IGUAL. Con la plantilla propia estos * dos controles no se imprimen. Pero si maniana Woo reclama una pantalla que * este theme no declara -paso exactamente eso con la busqueda- lo que sale es * un