/* ################################################################## HerboMax — EL CARRO: cajon lateral y pagina /carro/ Este archivo viste DOS pantallas con el mismo diseno: 1. El cajon lateral (.hbx-ca-fondo > .hbx-ca-panel), que se abre al tocar el icono del carro o al agregar un producto. 2. La pagina /carro/ (.hbx-ca--pagina), que es donde caen hoy TODOS los botones "Agregar" del sitio. El marcado de las dos lo escribe la misma funcion PHP (hbx_ca_cuerpo_html en inc/carro.php), asi que las clases son las mismas y solo cambian el envase y unos pocos detalles. OJO CON LAS VARIABLES DE COLOR El cajon se cuelga de por JavaScript (position:fixed muere bajo un antepasado con transform, y Woodmart los usa), asi que queda FUERA de la envoltura .hbx y no ve --morado, --naranja ni --hueso. Por eso aca se usan SIEMPRE los nombres --hbx-*, que viven en :root. Cada uno lleva ademas su valor literal de respaldo: si el bloque de paleta compartida todavia no esta en :root, el carro igual sale con los colores de la marca en vez de negro. PIEZAS COMPARTIDAS QUE ESTE ARCHIVO NO DEFINE (las escribe la seccion "0 · Piezas compartidas" de style.css): .hbx-caja-foto caja cuadrada con el frasco vertical centrado .hbx-paso selector de cantidad .hbx-oculta utilidad de ocultar .hbx-sr texto solo para lector de pantalla .hbx-btn boton grande naranja (lo usa el cupon) Movil primero. Pantalla de referencia 375 px, corte de escritorio 900. ################################################################## */ /* ══════════════════════════════════════════════════════════════════════ 1 · Base comun a las dos pantallas .hbx-ca la llevan el panel del cajon y la envoltura de la pagina. ══════════════════════════════════════════════════════════════════════ */ .hbx-ca{ /* Poppins tambien aca: el cajon vive fuera de .hbx y no la hereda. */ font-family:var(--hbx-fuente, 'Poppins', system-ui, -apple-system, sans-serif); color:var(--hbx-texto, #14173a); font-size:1rem; line-height:1.5; /* Leccion ya pagada: sin min-width:0 un hijo flex crece hasta el ancho de su contenido y se sale de la pantalla. */ min-width:0; } .hbx-ca *{box-sizing:border-box} /* Sin max-width:100% a proposito. Todas las fotos del carro viven dentro de .hbx-caja-foto, que ya las acota con max-width:calc(100% - var(--hbx-margen)). Una regla .hbx-ca img{max-width:100%} empata en especificidad con .hbx-caja-foto img (0,1,1) y, como esta hoja carga despues, la ganaba: la foto perdia su margen y quedaba tocando el borde de la caja. Medido en pantalla antes de borrarla. */ .hbx-ca img{display:block} .hbx-ca a{text-decoration:none} .hbx-ca button{font-family:inherit; cursor:pointer} /* Woodmart y WordPress le ponen margenes a p, h2 y h3. La maqueta parte de cero: se los quitamos SOLO dentro del carro. */ .hbx-ca h2, .hbx-ca h3, .hbx-ca p{margin:0; padding:0} /* Los titulos del carro (.hbx-ca-cab h2, .hbx-ca-item h3, .hbx-ca-vacio h3) necesitan font-family:inherit porque Woodmart escribe la fuente en cada h1..h3 desde sus ajustes de tipografia y eso vence a la herencia. Esa regla NO se repite aca: ya vive en la seccion de piezas compartidas (hoy template-parts/ficha.css, seccion 0-D). */ /* PISA: :is(.btn, .button, button, [type="submit"], [type="button"]) de Woodmart (base.css y bundle3.css), que le pone min-height:var(--btn-height) = 42 px a TODO boton. Es min-height, no height: no compite con el alto de 36 px de .hbx-paso button, lo estira igual. La pastilla de cantidad medida en pantalla salia de 44 px donde el diseno pide 38. Especificidad (0,2,1) contra la (0,1,0) de :is(): gana sin !important. */ .hbx-ca .hbx-paso button{min-height:0} /* Foco visible propio: Woodmart lo borra en varios botones. */ .hbx-ca a:focus-visible, .hbx-ca button:focus-visible, .hbx-ca input:focus-visible{ outline:2px solid var(--hbx-morado, #581fb6); outline-offset:2px; } /* ══════════════════════════════════════════════════════════════════════ 2 · El velo y el panel (solo el cajon) ══════════════════════════════════════════════════════════════════════ */ .hbx-ca-fondo{ position:fixed; inset:0; /* 9500 a proposito: por encima del boton flotante de WhatsApp del plugin joinchat (~9000). Un cajon abierto tiene que taparlo, no al reves. */ z-index:9500; background:rgba(20,23,58,.45); display:flex; justify-content:flex-end; } /* Mas especifico que la regla de arriba: [hidden] tiene que ganar. */ .hbx-ca-fondo[hidden]{display:none} /* Mientras el cajon esta abierto la pagina de atras no se mueve, y el boton de WhatsApp desaparece: si no, queda flotando sobre el panel. */ body.hbx-ca-abierto{overflow:hidden} body.hbx-ca-abierto .joinchat{display:none} .hbx-ca-panel{ position:relative; width:94%; max-width:420px; height:100%; min-width:0; background:#fff; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; box-shadow:-8px 0 32px rgba(0,12,70,.18); /* Entra desde la derecha. La clase --on la pone el JS un cuadro despues de destapar el velo, para que la transicion se vea. */ transform:translateX(100%); transition:transform .22s ease; } .hbx-ca-fondo--on .hbx-ca-panel{transform:translateX(0)} /* Mientras se refrescan los fragmentos por AJAX, los botones no responden: asi nadie toca "+" tres veces y termina con una cantidad que no pidio. */ .hbx-ca-panel--cargando .hbx-ca-cuerpo{ opacity:.55; pointer-events:none; } /* ══════════════════════════════════════════════════════════════════════ 3 · Cabecera del cajon ══════════════════════════════════════════════════════════════════════ */ .hbx-ca-cab{ display:flex; align-items:center; gap:8px; min-width:0; padding:12px 8px 12px 18px; border-bottom:1px solid var(--hbx-borde, #e6e2f0); } .hbx-ca-cab h2{ flex:1; min-width:0; font-size:1.25rem; font-weight:700; letter-spacing:-.03em; color:var(--hbx-texto, #14173a); } .hbx-ca-n{ color:var(--hbx-texto-3, #6b6e88); font-weight:600; } .hbx-ca-cerrar{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:none; background:none; border-radius:12px; color:var(--hbx-texto, #14173a); } .hbx-ca-cerrar:active{background:#f4f1fa} /* ══════════════════════════════════════════════════════════════════════ 4 · El cuerpo Es el fragmento que WooCommerce repinta entero. Va en columna y crece para empujar el pie hasta abajo cuando el carro trae poca cosa. ══════════════════════════════════════════════════════════════════════ */ .hbx-ca-cuerpo{ display:flex; flex-direction:column; /* 1 0 auto: crece para llenar el panel, pero NO se encoge. Si se encogiera, con muchas lineas el pie se comeria la lista. */ flex:1 0 auto; min-height:0; min-width:0; } /* ══════════════════════════════════════════════════════════════════════ 5 · Barra de despacho gratis — el motor del ticket ══════════════════════════════════════════════════════════════════════ */ .hbx-ca-envio{ padding:14px 18px; background:var(--hbx-hueso, #f7f5fb); border-bottom:1px solid var(--hbx-borde, #e6e2f0); } .hbx-ca-envio p{ font-size:.875rem; font-weight:600; margin-bottom:8px; } /* #cc4400 y no el naranja vivo: sobre este fondo casi blanco, #ff5500 da 3,4:1 y WCAG AA pide 4,5:1 para texto. */ .hbx-ca-envio p b{color:var(--hbx-naranja-btn, #cc4400)} .hbx-ca-envio--listo p{color:var(--hbx-verde, #0f7b52)} .hbx-ca-barra{ height:8px; border-radius:999px; background:#e3dff0; overflow:hidden; } .hbx-ca-barra i{ display:block; height:100%; border-radius:999px; background:var(--hbx-naranja-btn, #cc4400); transition:width .3s ease; } .hbx-ca-envio--listo .hbx-ca-barra i{background:var(--hbx-verde, #0f7b52)} /* ══════════════════════════════════════════════════════════════════════ 6 · Las lineas del carro ══════════════════════════════════════════════════════════════════════ */ .hbx-ca-lista{ flex:1 0 auto; padding:6px 18px; min-width:0; list-style:none; margin:0; } .hbx-ca-item{ display:grid; grid-template-columns:76px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--hbx-borde, #e6e2f0); min-width:0; } .hbx-ca-item > div{min-width:0} /* La caja cuadrada y el centrado del frasco los pone .hbx-caja-foto (pieza compartida). Aca solo van el color, el radio y el margen. El selector lleva .hbx-ca-item delante a proposito: asi gana en especificidad a --hbx-margen:14px de .hbx-caja-foto pase lo que pase con el orden en que se carguen las dos hojas. */ .hbx-ca-item .hbx-ca-foto{ --hbx-margen:16px; background:var(--hbx-hueso, #f7f5fb); border-radius:14px; padding:8px; } .hbx-ca-item h3{ font-size:.9375rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; /* Un nombre largo sin espacios ("Bisglicinato+Melena") no puede empujar la columna y sacar el precio de la pantalla. */ overflow-wrap:anywhere; } .hbx-ca-item h3 a{color:var(--hbx-texto, #14173a)} .hbx-ca-item h3 a:hover{color:var(--hbx-morado, #581fb6)} .hbx-ca-form{ font-size:.75rem; color:var(--hbx-texto-2, #5d6081); margin-top:2px; overflow-wrap:anywhere; } .hbx-ca-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; min-width:0; } .hbx-ca-pr{ text-align:right; font-variant-numeric:tabular-nums; flex:none; } .hbx-ca-pr b{ display:block; font-size:1.0625rem; font-weight:700; letter-spacing:-.03em; } .hbx-ca-pr s{ font-size:.75rem; color:var(--hbx-texto-3, #6b6e88); } /* El prototipo daba padding:6px a un texto de 12px: el blanco de toque quedaba en 24px justos, el minimo absoluto de WCAG 2.5.8. Se sube a 32. */ .hbx-ca-quitar{ display:inline-flex; align-items:center; background:none; border:none; padding:8px 0; min-height:32px; margin-top:2px; font-size:.75rem; color:var(--hbx-texto-3, #6b6e88); text-decoration:underline; text-underline-offset:2px; } .hbx-ca-quitar:hover{color:var(--hbx-texto, #14173a)} /* ══════════════════════════════════════════════════════════════════════ 7 · Venta cruzada — "Completa tu pedido" ══════════════════════════════════════════════════════════════════════ */ .hbx-ca-cruzada{ padding:16px 18px; background:var(--hbx-hueso, #f7f5fb); border-top:1px solid var(--hbx-borde, #e6e2f0); min-width:0; } .hbx-ca-cruzada > p{ font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hbx-morado, #581fb6); margin-bottom:12px; } .hbx-ca-sug{ display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid var(--hbx-borde, #e6e2f0); border-radius:14px; padding:10px 12px; min-width:0; } .hbx-ca-sug + .hbx-ca-sug{margin-top:8px} /* La miniatura tambien usa .hbx-caja-foto, pero aca el cuadrado lo fija el tamano en pixeles: se apaga el aspect-ratio para que no pelee con el. */ .hbx-ca-sug .hbx-ca-foto{ --hbx-margen:10px; width:48px; height:48px; flex:none; aspect-ratio:auto; border-radius:10px; padding:5px; } .hbx-ca-sug-txt{ flex:1; min-width:0; } .hbx-ca-sug-txt b{ display:block; font-size:.875rem; font-weight:600; letter-spacing:-.02em; line-height:1.2; overflow-wrap:anywhere; } .hbx-ca-sug-txt span{ font-size:.8125rem; color:var(--hbx-texto-2, #5d6081); font-variant-numeric:tabular-nums; } .hbx-ca-sumar{ display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:36px; padding:0 16px; border-radius:999px; border:1.5px solid var(--hbx-morado, #581fb6); background:#fff; color:var(--hbx-morado, #581fb6); font-weight:700; font-size:.8125rem; text-decoration:none; } .hbx-ca-sumar:hover, .hbx-ca-sumar:focus{color:var(--hbx-morado, #581fb6)} .hbx-ca-sumar:active{background:var(--hbx-lavender, #e5e0f5)} /* ══════════════════════════════════════════════════════════════════════ 8 · Carro vacio ══════════════════════════════════════════════════════════════════════ */ .hbx-ca-vacio{ display:none; min-width:0; } .hbx-ca-vacio--on{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:56px 24px; } .hbx-ca-vacio .hbx-ca-ico{ width:72px; height:72px; border-radius:999px; background:var(--hbx-lavender, #e5e0f5); display:grid; place-items:center; color:var(--hbx-morado, #581fb6); } .hbx-ca-vacio h3{ font-size:1.25rem; font-weight:600; letter-spacing:-.03em; } .hbx-ca-vacio p{ font-size:.9375rem; color:var(--hbx-texto-2, #5d6081); } .hbx-ca-vacio a{ display:flex; align-items:center; justify-content:center; min-height:52px; width:100%; max-width:340px; background:var(--hbx-naranja-btn, #cc4400); color:#fff; border-radius:999px; font-weight:700; margin-top:6px; } .hbx-ca-vacio a:hover, .hbx-ca-vacio a:focus{background:#a83700; color:#fff} /* ══════════════════════════════════════════════════════════════════════ 9 · El pie: descuentos, subtotal y pago AQUI ESTA LA TRAMPA CARA DEL MODULO. Los packs se descuentan con un cargo negativo (inc/packs-carro.php), y el subtotal de WooCommerce NO incluye los cargos. Por eso el PHP suma los cargos antes de imprimir, y cada descuento sale con su propia linea: el cliente ve de donde sale. ══════════════════════════════════════════════════════════════════════ */ .hbx-ca-pie{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--hbx-borde, #e6e2f0); padding:14px 18px calc(14px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(20,23,58,.08); min-width:0; } /* Una linea por cada descuento (pack o cupon), antes del subtotal. */ .hbx-ca-fee{ display:flex; justify-content:space-between; gap:12px; font-size:.875rem; font-weight:600; color:var(--hbx-verde, #0f7b52); margin-bottom:6px; font-variant-numeric:tabular-nums; min-width:0; } .hbx-ca-fee span:first-child{min-width:0; overflow-wrap:anywhere} .hbx-ca-fee--mas{color:var(--hbx-texto-2, #5d6081)} .hbx-ca-fee a{ color:var(--hbx-texto-3, #6b6e88); font-weight:400; text-decoration:underline; text-underline-offset:2px; margin-left:6px; } .hbx-ca-sub{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px; font-variant-numeric:tabular-nums; min-width:0; } .hbx-ca-sub span{ font-size:.9375rem; color:var(--hbx-texto-2, #5d6081); } .hbx-ca-sub b{ font-size:1.5rem; font-weight:700; letter-spacing:-.045em; } .hbx-ca-impuesto{ font-size:.75rem; color:var(--hbx-texto-3, #6b6e88); margin-bottom:12px; } .hbx-ca-pagar{ display:flex; align-items:center; justify-content:center; width:100%; min-height:56px; background:var(--hbx-naranja-btn, #cc4400); color:#fff; border:none; border-radius:999px; font-weight:700; font-size:1.0625rem; transition:background .15s; } .hbx-ca-pagar:hover, .hbx-ca-pagar:focus{background:#a83700; color:#fff} .hbx-ca-seguir{ display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin-top:4px; background:none; border:none; color:var(--hbx-morado, #581fb6); font-weight:600; font-size:.9375rem; text-decoration:underline; text-underline-offset:3px; } .hbx-ca-seguir:hover, .hbx-ca-seguir:focus{color:var(--hbx-morado-osc, #40158c)} /* ══════════════════════════════════════════════════════════════════════ 10 · Solo en la pagina /carro/ ══════════════════════════════════════════════════════════════════════ */ .hbx-ca--pagina{ display:block; width:100%; padding:8px 0 40px; } .hbx-ca--pagina .hbx-ca-pagina-cuerpo{min-width:0} .hbx-ca--pagina .hbx-ca-col, .hbx-ca--pagina .hbx-ca-lado{min-width:0} /* En la pagina el pie no flota: es el bloque de totales del final. */ .hbx-ca--pagina .hbx-ca-pie{ position:static; box-shadow:none; border-top:1px solid var(--hbx-borde, #e6e2f0); } /* Titulo de la pagina. */ .hbx-ca--pagina .hbx-ca-titulo{ padding:8px 18px 12px; font-size:1.5rem; font-weight:700; letter-spacing:-.03em; font-family:inherit; font-style:normal; text-transform:none; margin:0; } /* La cantidad en la pagina es un de verdad dentro de .hbx-paso: sin JavaScript el cliente igual puede escribir y apretar "Actualizar". PISA: input[type="number"]{height:var(--wd-form-height)} de Woodmart (base.css y bundle3.css, especificidad 0,1,1). Woodmart le da 42 px de alto a todo campo de formulario, y eso estiraba la pastilla de cantidad a 44 px cuando el diseno pide 38. En la ficha no se notaba porque ahi el selector es .hbx-paso--grande, de 48. Especificidad (0,3,0): gana sin !important. */ .hbx-ca--pagina .hbx-paso .hbx-paso-n{ height:36px; min-height:0; line-height:36px; border-radius:0; } .hbx-ca--pagina .hbx-paso-n::-webkit-outer-spin-button, .hbx-ca--pagina .hbx-paso-n::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* Donde caen los do_action de WooCommerce que otros plugins usan. No dibuja nada por si mismo; solo evita que lo que salga de ahi crezca de mas. */ .hbx-ca-ganchos{min-width:0} .hbx-ca-ganchos:empty{display:none} .hbx-ca-cupon-fila{ display:flex; justify-content:flex-end; padding:6px 18px 0; min-width:0; } /* El carro vacio ocupa la pagina entera, centrado. */ .hbx-ca--vacia{padding:24px 0 60px} .hbx-ca--vacia .hbx-ca-vacio{margin-inline:auto; max-width:420px} .hbx-ca-actualizar{ display:inline-flex; align-items:center; min-height:36px; padding:0 4px; background:none; border:none; color:var(--hbx-morado, #581fb6); font-size:.8125rem; font-weight:600; text-decoration:underline; text-underline-offset:3px; } /* Cupon: se conserva el campo nativo. Perderlo en silencio romperia las promociones que el dueno cargue en WooCommerce. */ .hbx-ca-cupon{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 18px; border-top:1px solid var(--hbx-borde, #e6e2f0); min-width:0; } .hbx-ca-cupon label{ flex:0 0 100%; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hbx-morado, #581fb6); } .hbx-ca-cupon input{ flex:1 1 160px; min-width:0; min-height:50px; padding:0 16px; border:1.5px solid var(--hbx-borde-2, #cfc8e2); border-radius:12px; background:#fff; font-family:inherit; font-size:.9375rem; color:var(--hbx-texto, #14173a); } .hbx-ca-cupon input:focus{ border-color:var(--hbx-morado, #581fb6); outline:none; } /* El boton reusa .hbx-btn (56px, naranja, radio 999px). Aca solo se le quita el ancho completo para que quepa al lado del campo. */ .hbx-ca-cupon .hbx-btn{ flex:0 0 auto; width:auto; min-height:50px; padding:0 24px; border:none; font-size:.9375rem; } /* ── escritorio ────────────────────────────────────────────────────── Las lineas a la izquierda, el total como tarjeta pegajosa a la derecha. El corte es 900 px, el mismo que ya usa el resto del tema. */ @media (min-width:900px){ .hbx-ca--pagina{padding:16px 0 60px} .hbx-ca--pagina .hbx-ca-pagina-cuerpo{ display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start; max-width:1240px; margin-inline:auto; padding:0 32px; } .hbx-ca--pagina .hbx-ca-pie{ position:sticky; top:24px; border:1.5px solid var(--hbx-borde, #e6e2f0); border-radius:20px; padding:20px; } /* La foto puede crecer un poco: hay sitio de sobra. */ .hbx-ca--pagina .hbx-ca-item{grid-template-columns:92px 1fr; gap:18px} } /* En pantalla ancha el cajon no se estira mas alla de 420 px: una columna de texto mas larga que eso se lee peor, no mejor. */ @media (min-width:900px){ .hbx-ca-panel{max-width:440px} } /* ══════════════════════════════════════════════════════════════════════ 11 · Movimiento reducido ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ .hbx-ca-panel, .hbx-ca-barra i, .hbx-ca-pagar, .hbx-ca-vacio a{transition:none} .hbx-ca-panel{transform:none} }