/* ============================================================================= YSSY - Bloque CATEGORIAS de la columna izquierda PrestaShop carga custom.css el ultimo (prioridad 1000), asi que lo de aqui gana al tema sin tener que tocar theme.css. ============================================================================= */ .ps-categorytree { --yssy-cian: #2FB5D2; --yssy-cian-oscuro: #1B7E94; --yssy-tinta: #22282B; --yssy-apagado: #8B9498; --yssy-linea: #E4E8EA; background: #F6F8F9; border: 1px solid var(--yssy-linea); border-radius: 4px; padding: 14px 12px 4px; } /* --- titulo --- */ .ps-categorytree .left-block__title { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--yssy-cian); font-size: 15px; font-weight: 700; letter-spacing: .02em; } .ps-categorytree .left-block__title-link { color: var(--yssy-tinta); text-decoration: none; text-transform: uppercase; } .ps-categorytree .left-block__title-link:hover, .ps-categorytree .left-block__title-link:focus-visible { color: var(--yssy-cian-oscuro); } /* --- primer nivel: una linea entre categoria y categoria --- */ .ps-categorytree .category-tree__list[data-depth="0"] > .category-tree__item { border-bottom: 1px solid #E7EBEC; } .ps-categorytree .category-tree__list[data-depth="0"] > .category-tree__item:last-child { border-bottom: 0; } .ps-categorytree .category-tree__item-header { display: flex; align-items: center; gap: 6px; padding: 0; } .ps-categorytree .category-tree__item-link { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; padding: 8px 0; color: var(--yssy-tinta); text-decoration: none; font-size: 12.5px; letter-spacing: .01em; text-transform: uppercase; } .ps-categorytree .category-tree__list[data-depth="0"] > .category-tree__item > .category-tree__item-header > .category-tree__item-link { font-weight: 600; } .ps-categorytree .category-tree__item-link:hover, .ps-categorytree .category-tree__item-link:focus-visible { color: var(--yssy-cian); } /* la categoria en la que estas, y todas sus madres */ .ps-categorytree .category-tree__item-link--actual { color: var(--yssy-cian); font-weight: 700; } /* --- numero de productos --- */ .ps-categorytree .category-tree__count { flex: 0 0 auto; color: var(--yssy-apagado); font-size: 11.5px; font-variant-numeric: tabular-nums; } /* --- niveles interiores: mas discretos y sin lineas --- */ .ps-categorytree .category-tree__list:not([data-depth="0"]) .category-tree__item { border-bottom: 0; } .ps-categorytree .category-tree__list:not([data-depth="0"]) .category-tree__item-link { font-size: 12.5px; text-transform: none; letter-spacing: 0; padding: 5px 0; color: #5C6C72; } .ps-categorytree .accordion-body { padding: 0 0 4px 12px; } /* --- flecha de desplegar --- */ .ps-categorytree .accordion-button { flex: 0 0 auto; width: 18px; height: 22px; padding: 0; background: none; border: 0; box-shadow: none; } .ps-categorytree .accordion-button:not(.collapsed) { background: none; color: var(--yssy-cian); } /* ============================================================================= YSSY - chapa roja de 'ya esta en el carrito' y linea verde del paquete Las pinta assets/js/custom.js. Aqui solo van los colores y la posicion. ============================================================================= */ /* la imagen tiene que ser el marco de referencia de la chapa */ .product-miniature .product-miniature__image-container, .product-miniature .product-miniature__top { position: relative; } .product-miniature .yssy-en-carrito { position: absolute; top: 8px; right: 8px; z-index: 3; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; border: 2px solid #FFFFFF; display: inline-flex; align-items: center; justify-content: center; background: #D8242C; color: #FFFFFF; font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); pointer-events: none; } /* linea verde: Paquete 12 uds. = 29,40 € */ .product-miniature .yssy-paquete { flex: 0 0 100%; width: 100%; margin-top: 2px; color: #1E8A4C; font-size: 13px; font-weight: 600; line-height: 1.3; } @font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')} /* ================================================================== YSSY - piel "Magenta y lima", variante C INICIO ------------------------------------------------------------------ Aprobada el 27/08/2026. Barra de arriba en magenta, pie claro. Toca SOLO color, tipografia y bordes: no cambia ninguna estructura ni el arbol de categorias. La tipografia de titulares va empotrada arriba en base64, asi que no se le pide nada a Google (ni dependencia externa ni RGPD). El texto corrido se queda con la Inter que ya trae el tema. Para quitarla entera: borrar desde la @font-face hasta la marca FIN. ================================================================== */ :root{ /* PALETA 30 - blanco, negro y laca roja (05/09/2026). Los nombres siguen diciendo "magenta" para no tocar 200 reglas; lo que manda es el valor. --yssy-magenta es el color de ACCION (botones, badge, acento) y --yssy-barra el de la barra de arriba. */ --yssy-barra:#111114; --yssy-barra-hover:#E8797D; --yssy-magenta:#C1272D; --yssy-magenta-osc:#8E1D22; --yssy-lima:#C1272D; --yssy-tinta:#111114; --yssy-gris:#6B6B76; --yssy-linea:#E7E7EB; --yssy-rosa:#F5F5F6; --yssy-paq:#8E1D22; /* Bootstrap 5.3: de aqui salen enlaces, focos y botones */ --bs-primary:#C1272D; --bs-primary-rgb:193,39,45; --bs-link-color:#8E1D22; --bs-link-color-rgb:142,29,34; --bs-link-hover-color:#C1272D; --bs-border-color:#E7E7EB; --bs-body-color:#111114; --bs-border-radius:.75rem; --bs-border-radius-lg:1rem; --bs-border-radius-sm:.5rem; } /* ---------- titulares y precios ---------- */ h1,h2,h3,h4,h5,.h1,.h2,.h3, .left-block__title, .product-miniature__price, .product__price{ font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif; letter-spacing:.03em; } /* ---------- barra de arriba: magenta ---------- */ .header-top{background:var(--yssy-barra);border-bottom:0} .header-top, .header-top a, .header-top .ps-contactinfo__email, .header-top .header-block__title, .header-top .header-block__action-btn, .header-top .material-icons{color:#fff !important} .header-top a:hover{color:var(--yssy-barra-hover) !important} /* ---------- cabecera ---------- */ .header-bottom{background:#fff;border-bottom:1px solid var(--yssy-linea)} .header .js-search-input, .header input[type="text"]{border-radius:99px} /* ---------- botones ---------- */ .btn{border-radius:99px;font-weight:700} .btn-primary{ --bs-btn-bg:var(--yssy-magenta); --bs-btn-border-color:var(--yssy-magenta); --bs-btn-hover-bg:var(--yssy-magenta-osc); --bs-btn-hover-border-color:var(--yssy-magenta-osc); --bs-btn-active-bg:var(--yssy-magenta-osc); --bs-btn-active-border-color:var(--yssy-magenta-osc); --bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff; } .btn-square-icon{border-radius:99px} /* ---------- fichas de producto ---------- */ .product-miniature__inner{ border:2px solid var(--yssy-linea); border-radius:14px; padding:12px; background:#fff; transition:border-color .15s ease,box-shadow .15s ease; } .product-miniature:hover .product-miniature__inner{ border-color:var(--yssy-magenta); box-shadow:0 6px 22px -12px rgba(193, 39, 45,.5); } .product-miniature__image-link{border-radius:10px;overflow:hidden;display:block} .product-miniature__title{font-weight:600;font-size:.9rem;line-height:1.32;color:var(--yssy-tinta)} .product-miniature__title:hover{color:var(--yssy-magenta)} .product-miniature__price{font-size:1.7rem;line-height:1;color:var(--yssy-tinta)} /* El recuadro de la cantidad iba justo de sitio: 48 px con 32 de relleno dejaban 16 para dos digitos. Se le da aire. */ .quantity-button__group{flex-wrap:nowrap} .quantity-button__group .form-control, .product-miniature .quantity-button__group .form-control{ padding-left:.15rem; padding-right:.15rem; text-align:center; font-weight:700; min-width:0; flex:1 1 auto; font-variant-numeric:tabular-nums; } /* la linea del paquete, en morado para distinguirla del precio unidad */ .product-miniature .yssy-paquete, .yssy-paquete{color:var(--yssy-paq) !important;font-weight:700;font-size:.78rem} /* la chapa de unidades ya en el carrito */ .product-miniature .yssy-en-carrito, .yssy-en-carrito{ background:var(--yssy-magenta) !important;color:#fff !important; border-radius:99px;font-weight:700; } /* ---------- arbol de categorias ---------- Solo el color del titulo y su raya. Estructura, contadores y acordeon se quedan EXACTAMENTE como estaban. */ .ps-categorytree{border:2px solid var(--yssy-linea);border-radius:14px;padding:16px 16px 8px} .ps-categorytree .left-block__title{ font-size:1.35rem; border-bottom:3px solid var(--yssy-lima); padding-bottom:10px; color:var(--yssy-tinta); } .ps-categorytree .category-tree__item-link:hover, .ps-categorytree .category-tree__item-link--actual{color:var(--yssy-magenta)} .ps-categorytree .category-tree__count{color:var(--yssy-gris)} /* ---------- pie: blanco con magenta (variante 04) ---------- OJO: el bloque que SE VE es .footer__main, no #footer. Pintar solo #footer deja el fondo gris de Bootstrap (rgb(33,37,41)) y, como las reglas de abajo ponen el texto oscuro, el pie queda ilegible. Paso por ahi: hay que pintar .footer__main. */ #footer{background:#fff;color:var(--yssy-gris)} #footer .footer__main{ background:#fff; color:var(--yssy-gris); border-top:3px solid var(--yssy-magenta); } #footer .footer-block__title{color:var(--yssy-magenta-osc)} #footer .ps-contactinfo__infos, #footer .ps-contactinfo__phone, #footer .ps-contactinfo__email{color:var(--yssy-gris)} #footer .footer-block__list a, #footer .cms-page-link{color:var(--yssy-gris)} /* La banda del boletin usa la utilidad .bg-body-tertiary de Bootstrap, que gana aunque se le suba la especificidad. En vez de pelearse con ella se redefine el token que consume. */ #footer .ps-emailsubscription{ --bs-tertiary-bg:#F5F5F6; --bs-tertiary-bg-rgb:253,242,249; border-bottom:1px solid var(--yssy-linea); } #footer .footer-block h3, #footer .footer-block .h3, #footer .footer-block__title{ color:var(--yssy-magenta-osc); font-family:'Bebas Neue',Impact,sans-serif; letter-spacing:.05em; } #footer a{color:var(--yssy-gris)} #footer a:hover{color:var(--yssy-magenta)} #footer .copyright{border-top:1px solid var(--yssy-linea);color:var(--yssy-gris);font-size:.82rem} /* ---------- detalles ---------- */ ::selection{background:var(--yssy-magenta);color:#fff} a:focus-visible,.btn:focus-visible{outline:3px solid var(--yssy-lima);outline-offset:2px} /* ================= YSSY - piel variante C FIN ================= */ /* ========================================================================== YSSY - el numero del carrito de la cabecera, en rojo 28/08/2026: "el numero no se ve, ponlo en color rojo". El tema pinta la pastilla en gris casi blanco (#F8F9FA) y el numero NO tiene color propio: hereda el del enlace, que en la barra magenta es BLANCO. Blanco sobre casi blanco = contraste 1,05, o sea invisible. Ahora va en rojo sobre blanco: contraste 4,9. ========================================================================== */ .header-block__badge{ color:#D8242C; background:#fff; font-weight:800; } /* ========================================================================== YSSY - los desplegables de la barra de arriba, en negro 28/08/2026: "las letras en color blanco no se ve, ponlo en negro" (el menu de la cuenta del cliente salia en blanco sobre panel blanco). La culpa es de una regla de esta misma hoja: la de la barra magenta pone `.header-top, .header-top a, ... {color:#fff !important}`. Ese !important alcanza tambien a los desplegables que se abren DENTRO de la barra (.header-top > .ps-customersignin > .dropdown-menu), que son blancos por dentro: blanco sobre blanco, contraste 1,0. Medido antes y despues sobre la tienda real: de 1,0 a 17,4. Va con !important a proposito: es la unica forma de ganarle a la regla de arriba sin tocarla. Y con el color literal, no con var(--yssy-tinta), porque en la prueba la variable no llegaba a aplicarse aqui y el literal si. 28/08/2026, segunda vuelta: los ICONOS de la izquierda de cada linea seguian en blanco. No heredaban del enlace: la regla de la barra los pinta a ellos directamente (lleva su propia entrada para los iconos) y con !important. Por eso hay que nombrarlos aparte: i, .material-icons y svg. ========================================================================== */ .header-top .dropdown-menu, .header-top .dropdown-menu a, .header-top .dropdown-menu .dropdown-item, .header-top .dropdown-menu span, .header-top .dropdown-menu li a, .header-top .dropdown-menu i, .header-top .dropdown-menu .material-icons, .header-top .dropdown-menu svg{ color:#111114 !important; } .header-top .dropdown-menu a:hover, .header-top .dropdown-menu .dropdown-item:hover, .header-top .dropdown-menu .dropdown-item:focus, .header-top .dropdown-menu a:hover i, .header-top .dropdown-menu .dropdown-item:hover i, .header-top .dropdown-menu .dropdown-item:hover .material-icons{ color:#8E1D22 !important; background-color:#F5F5F6; } /* --------------------------------------------------------------- Recargo de equivalencia en el formulario del cliente (registro e Informacion personal). El bloque lo pinta themes/yssy/templates/customer/_partials/customer-form.tpl, justo debajo del campo de la contrasena. --------------------------------------------------------------- */ .yssy-recargo{ border:1px solid #E7E7EB; border-radius:8px; overflow:hidden; margin:0 0 16px; } .yssy-recargo__cab{ background:#C1272D; color:#fff; font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif; font-size:16px; letter-spacing:.7px; padding:7px 15px; } .yssy-recargo__cuerpo{ padding:13px 15px; } .yssy-recargo__casilla{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin:0; color:#111114; } .yssy-recargo__casilla input[type="checkbox"]{ width:20px; height:20px; margin-top:2px; flex:0 0 20px; accent-color:#C1272D; } .yssy-recargo__pista{ display:block; font-size:13px; color:#6B6B76; margin-top:3px; } /* ----------------------------------------------------------------- Categorías: cajón lateral por debajo de 992 px (ejemplo 05) El panel entra por el lado donde está la columna: izquierda si el bloque va en .left-column, derecha si va en .right-column. Sin JavaScript: la casilla oculta .yssy-cat-sw hace de interruptor. ----------------------------------------------------------------- */ /* La casilla nunca se ve, pero sigue siendo alcanzable con el teclado. */ .yssy-cat-sw{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* En escritorio, todo lo del cajón desaparece y el árbol se queda como está. */ .yssy-cat-barra, .yssy-cat-velo, .yssy-cat-cerrar{ display:none; } @media (max-width: 991.98px){ /* Fuera la tarjeta gris: en móvil sobra una caja dentro de otra caja. */ .ps-categorytree.left-block{ background:transparent; border:0; border-radius:0; padding:0; } .ps-categorytree .left-block__title{ display:none; } /* --- la barra que se queda a la vista --- */ .yssy-cat-barra{ display:flex; align-items:center; gap:8px; padding:0 0 10px; margin:0 0 4px; border-bottom:2.67px solid #C1272D; cursor:pointer; } .yssy-cat-barra__t{ font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif; font-size:21.6px; font-weight:700; letter-spacing:.43px; text-transform:uppercase; color:#22282B; } .yssy-cat-barra__ir{ margin-left:auto; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#C1272D; } .yssy-cat-barra__ir svg{ width:15px; height:15px; flex:0 0 15px; } .yssy-cat-sw:focus-visible + .yssy-cat-barra{ outline:2px solid #C1272D; outline-offset:3px; } /* Con el árbol en la columna derecha, el texto y la flecha se dan la vuelta. */ .right-column .yssy-cat-barra__t{ order:2; } .right-column .yssy-cat-barra__ir{ order:1; margin-left:0; margin-right:auto; } .right-column .yssy-cat-barra__ir svg{ transform:rotate(180deg); } /* --- el velo --- */ .yssy-cat-velo{ display:block; position:fixed; inset:0; z-index:1040; background:rgba(21,18,32,.45); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; } /* --- el panel --- */ .ps-categorytree .accordion--category{ position:fixed; top:0; bottom:0; z-index:1050; width:min(300px, 84vw); background:#fff; box-shadow:0 0 30px rgba(21,18,32,.35); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px 24px; transition:transform .28s ease; } .left-column .ps-categorytree .accordion--category{ left:0; border-right:2px solid #E4E8EA; transform:translateX(-102%); } .right-column .ps-categorytree .accordion--category{ right:0; border-left:2px solid #E4E8EA; transform:translateX(102%); } /* --- cabecera de dentro del panel --- */ .yssy-cat-cerrar{ display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:1; background:#fff; padding:14px 0 10px; border-bottom:2.67px solid #C1272D; cursor:pointer; } .yssy-cat-cerrar__t{ font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif; font-size:21.6px; letter-spacing:.43px; text-transform:uppercase; color:#22282B; } .yssy-cat-cerrar__x{ margin-left:auto; display:flex; color:#6B6B76; } .yssy-cat-cerrar__x svg{ width:18px; height:18px; } /* --- abierto --- */ .yssy-cat-sw:checked ~ .yssy-cat-velo{ opacity:1; visibility:visible; } .yssy-cat-sw:checked ~ .accordion--category{ transform:translateX(0); } /* Quien no quiera animaciones, que no las tenga. */ @media (prefers-reduced-motion: reduce){ .yssy-cat-velo, .ps-categorytree .accordion--category{ transition:none; } } } /* ----------------------------------------------------------------- Botón de WhatsApp (módulo whatsapp, columna izquierda) Copiado del tema de prueba.yssy.es: el módulo NO trae este estilo, lo ponía el CSS de la tienda vieja. Sin esto sale un enlace suelto. ----------------------------------------------------------------- */ .whatsappBlock a{ display:inline-block; height:30px; background:#65BC54; padding:5px 10px; font-weight:700; color:#fff !important; text-decoration:none; border-radius:4px; } .whatsappBlock a img{ height:100%; width:auto; vertical-align:top; } .whatsappBlock a:hover{ background:#57A648; } /* ----------------------------------------------------------------- COLUMNA IZQUIERDA EN MOVIL (03/09/2026) Peticion de rui: el resumen del carrito y el boton de WhatsApp se esconden SOLO en movil, no cuando las categorias se recogen. Por que no coinciden los dos cortes: - A 991.98 px la lista de categorias se recoge en la barra "CATEGORIAS - VER LAS N", pero la barra NO desaparece nunca: se ve igual a 900, a 600 y a 360 px. Por eso "ocultarlos cuando se esconda la barra" no se puede tomar al pie de la letra. - A 767.98 px (limite "md" de Bootstrap) la columna izquierda deja de ir al lado de los productos y pasa a apilarse encima. Ahi es donde el carrito y el WhatsApp estorban de verdad, asi que ese es el corte elegido. Entre 768 y 991 px se ve: barra de categorias, WhatsApp y MI CARRITO, uno debajo de otro. Es lo que rui pidio el 03/09/2026. Si algun dia se quiere otro corte, se cambia SOLO este numero. El del cajon de categorias (991.98, mas arriba en este archivo) es otro y va por su cuenta a proposito. OJO AL DESPLEGAR: PrestaShop junta el CSS del tema en themes/yssy/assets/cache/theme-.css y hace un archivo DISTINTO por tipo de pagina (portada, categoria, ficha...). Hay que borrar TODOS los theme-*.css y vaciar la cache del CDN, o unas paginas se quedan con el CSS viejo y otras no (paso el 03/09/2026 con la portada). ----------------------------------------------------------------- */ @media (max-width: 767.98px) { #yssy-carrito, .whatsappBlock { display: none !important; } } /* ----------------------------------------------------------------- PROCESO DE COMPRA: opciones en tarjeta y circulos mas grandes (03/09/2026) Peticion de rui, con capturas del paso de Envio y del de Pago: "los circulos y que se vea mejor y las letras lo puedes poner mas grande". Se le enseñaron tres maquetas y eligio la 2, "fila en tarjeta". COMO ESTABA (medido en la tienda el 03/09/2026): - circulo de 16 px con borde de 0.8 px en #E7E7EB, un lila que casi no se distingue del blanco; - al marcarlo se ponia AZUL (#0B69F6, el azul de Bootstrap), no el magenta de la tienda; - texto de 16 px sin negrita; - las opciones de pago iban sueltas: solo se podia pulsar el circulo o su texto, no la fila entera. COMO QUEDA: - circulo de 24 px con borde de 2 px, y magenta al marcarlo; - cada opcion es una tarjeta (el mismo gris #F6F8F9 y el mismo borde 1.6px/14px que las tarjetas del resto de la tienda); - la elegida se pone en blanco con borde magenta de 2 px; - texto de 17 px en seminegrita; - se puede pulsar la fila ENTERA. En Envio ya se podia (el tema envuelve la fila en un