/* ========================================================= MJ46 · MEJORAS DEL CLIENTE (v4) · versión 2.4.0 --------------------------------------------------------- Se carga DESPUÉS de mejoras-v3.css. Aquí van los 10 puntos de «Mejoras de la página web (NUEVOS CAMBIOS)»: 1 · Footer con datos reales y logos de pago 2 · Grid de 5 productos por fila en escritorio 3 · Banner de oferta: claim a la izquierda del contador 4 · Precio de la ficha con el amarillo comercial 5 · «Añadir al carrito» en azul corporativo 6 · Notificaciones (éxito, error, aviso, info, añadido) 7 · Comparar: solo icono con tooltip 8 · Paginación limpia 9 · Recogida en tienda (solo si está activa) 10 · Menús visuales (ver megamenu.css) ========================================================= */ :root{ --mj-icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); --mj-icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); --mj-icon-xcircle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"); --mj-brand-dark:#0F6580; --mj-ok:#1E7F4F; --mj-warn:#B26A00; } /* ---------- 2 · 5 por fila en escritorio, en TODOS los grids ---------- * Todo se hace con la variable --mj-cols y !important, para ganar a las * reglas anteriores de la tienda (que tenían más especificidad y dejaban * el listado en 5 columnas también en móvil). * ≥1280 5 · 1024–1279 4 · 761–1023 3 · ≤760 2 * «Mejores de la semana» (.mj-week__row) conserva su propia tira deslizable. */ ul.products:not(.mj-week__row){--mj-cols:5 !important;} @media (max-width:1279px){ul.products:not(.mj-week__row){--mj-cols:4 !important;}} @media (max-width:1023px){ul.products:not(.mj-week__row){--mj-cols:3 !important;}} @media (max-width:760px){ul.products:not(.mj-week__row){--mj-cols:2 !important;}} /* Cross-sells del carrito: columna estrecha, se quedan en 4. */ .mj-crosssells ul.products{--mj-cols:4 !important;} @media (max-width:1023px){.mj-crosssells ul.products{--mj-cols:3 !important;}} @media (max-width:760px){.mj-crosssells ul.products{--mj-cols:2 !important;}} /* Con 5 columnas la tarjeta afina tipografía para no apretarse. */ @media (min-width:1280px){ ul.products:not(.mj-week__row) .mj-card__title{font-size:15px;} ul.products:not(.mj-week__row) .mj-card__price{font-size:19px;} ul.products:not(.mj-week__row) .mj-card__price del{font-size:12.5px;} ul.products:not(.mj-week__row) .mj-card__body{padding:12px 13px 14px;} } @media (max-width:760px){ ul.products .mj-card__title{font-size:14px;} } /* ---------- 1 · Footer: logos de pago ---------- */ .mj-pay__item img{height:22px !important;width:auto !important;max-width:none;margin:0 !important;display:block;float:none !important;} .mj-pay__item.has-logo{padding:5px 9px;} .mj-footer__company{display:block;} /* ---------- 7 · Comparar: solo icono con tooltip ---------- */ .mj-compare-btn{ width:32px;height:32px;padding:0;gap:0;border-radius:50%; justify-content:center;opacity:1; box-shadow:0 3px 10px -6px rgba(0,0,0,.45); } .mj-compare-btn__ico{flex:0 0 15px;width:15px;height:15px;} /* El texto sigue en el DOM para lectores de pantalla, pero no ocupa espacio. */ .mj-compare-btn__txt{ position:absolute !important;width:1px !important;height:1px !important; overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap; } .mj-compare-btn::after{ content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 7px); background:var(--mj-ink);color:#fff;font-size:11.5px;font-weight:600;line-height:1; white-space:nowrap;padding:6px 9px;border-radius:6px; opacity:0;transform:translateY(3px);pointer-events:none; transition:opacity .14s ease,transform .14s ease;z-index:5; } .mj-compare-btn:hover::after,.mj-compare-btn:focus-visible::after{opacity:1;transform:none;} @media (hover:none){.mj-compare-btn::after{display:none;}} @media (max-width:768px){ .mj-compare-btn{display:inline-flex;width:30px;height:30px;padding:0;left:8px;bottom:8px;} } /* ---------- 8 · Paginación limpia ---------- */ .woocommerce-pagination{margin-top:40px;} .woocommerce-pagination ul.page-numbers, .woocommerce nav.woocommerce-pagination ul, .mj-posts + .navigation .nav-links{ display:flex !important;align-items:center;justify-content:center;gap:4px; list-style:none;margin:0;padding:0;border:none !important; } .woocommerce nav.woocommerce-pagination ul li{border:none !important;float:none;margin:0;overflow:visible;} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .page-numbers a,.page-numbers span,a.page-numbers,span.page-numbers{ display:flex;align-items:center;justify-content:center; min-width:40px;height:40px;padding:0 6px;border:none !important;border-radius:20px; background:transparent;color:var(--mj-muted);font-size:15px;font-weight:600;line-height:1; transition:background .15s ease,color .15s ease; } .woocommerce nav.woocommerce-pagination ul li a:hover,a.page-numbers:hover{background:var(--mj-soft);color:var(--mj-ink);} .woocommerce nav.woocommerce-pagination ul li span.current,span.page-numbers.current{background:var(--mj-ink) !important;color:#fff !important;} .page-numbers.dots{min-width:24px;color:var(--mj-muted);} .page-numbers.prev,.page-numbers.next{font-size:0 !important;color:var(--mj-ink);} .page-numbers.prev::before,.page-numbers.next::before{ content:"";width:18px;height:18px;background:currentColor; -webkit-mask:var(--mj-icon-chevron) center/18px no-repeat;mask:var(--mj-icon-chevron) center/18px no-repeat; } .page-numbers.prev::before{transform:rotate(90deg);} .page-numbers.next::before{transform:rotate(-90deg);} /* ---------- 4 · Precio de la ficha con el amarillo comercial ---------- * Mismo amarillo que el badge «Oferta termina en» (--mj-cta). Va como fondo * con la cifra en tinta oscura: amarillo sobre blanco no se leería. * El amarillo «premium» (--mj-tan) queda fuera de la ficha. */ .single-product,.single-product .mj-single{--mj-tan:var(--mj-cta);} .mj-single__summary .price{color:var(--mj-ink) !important;} .mj-single__summary .price > .woocommerce-Price-amount, .mj-single__summary .price ins{ display:inline-flex;align-items:center; background:var(--mj-cta);color:var(--mj-on-cta) !important; padding:4px 14px 6px;border-radius:10px;line-height:1.05; } .mj-single__summary .price ins .woocommerce-Price-amount, .mj-single__summary .price > .woocommerce-Price-amount bdi, .mj-single__summary .price ins bdi{color:var(--mj-on-cta) !important;} .mj-single__summary .price del{color:var(--mj-muted) !important;} /* ---------- 5 · «Añadir al carrito» en azul corporativo ---------- */ .mj-single__summary .single_add_to_cart_button, .mj-single__summary .single_add_to_cart_button.button.alt, .woocommerce div.product form.cart .single_add_to_cart_button{ background:var(--mj-brand) !important;color:#fff !important;border:none;filter:none; } .mj-single__summary .single_add_to_cart_button:hover, .woocommerce div.product form.cart .single_add_to_cart_button:hover{background:var(--mj-brand-dark) !important;color:#fff !important;} .mj-single__summary .single_add_to_cart_button.disabled{opacity:.45;} /* Al confirmar (v3) pasa a verde de «hecho» para distinguirse del azul de reposo. */ .mj-single__summary .single_add_to_cart_button.added{background:var(--mj-ok) !important;color:#fff !important;} /* ---------- 6 · Notificaciones ---------- */ .woocommerce-notices-wrapper{max-width:var(--mj-wrap);margin:20px auto 0;padding:0 24px;} .woocommerce-notices-wrapper:empty{display:none;} .woocommerce-message,.woocommerce-info,.woocommerce-error, .wc-block-components-notice-banner{ --n:var(--mj-brand);--icon:var(--mj-icon-info); position:relative;list-style:none; display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:0 0 16px;padding:14px 48px 14px 56px; background:#fff;color:var(--mj-ink); border:1px solid var(--mj-line) !important;border-radius:var(--mj-radius); box-shadow:0 10px 28px -18px rgba(0,0,0,.35); font-size:14.5px;font-weight:500;line-height:1.45; animation:mjNoticeIn .28s cubic-bezier(.2,.8,.2,1) both; } .woocommerce-message{--n:var(--mj-ok);--icon:var(--mj-icon-check);} .woocommerce-error{--n:var(--mj-sale);--icon:var(--mj-icon-xcircle);} .woocommerce-info{--n:var(--mj-brand);--icon:var(--mj-icon-info);} .wc-block-components-notice-banner.is-success{--n:var(--mj-ok);--icon:var(--mj-icon-check);} .wc-block-components-notice-banner.is-error{--n:var(--mj-sale);--icon:var(--mj-icon-xcircle);} .wc-block-components-notice-banner.is-warning,.woocommerce-info.is-warning{--n:var(--mj-warn);--icon:var(--mj-icon-alert);} .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before, .wc-block-components-notice-banner::before{ content:"" !important;position:absolute;left:14px;top:50%;margin-top:-15px; width:30px;height:30px;border-radius:50%; background:color-mix(in oklab,var(--n) 14%,#fff); } .woocommerce-message::after,.woocommerce-info::after,.woocommerce-error::after, .wc-block-components-notice-banner::after{ content:"";position:absolute;left:21px;top:50%;margin-top:-8px;width:16px;height:16px; background:var(--n);-webkit-mask:var(--icon) center/16px no-repeat;mask:var(--icon) center/16px no-repeat; display:block;clear:none; } .wc-block-components-notice-banner > svg{display:none;} .woocommerce-error li{list-style:none;margin:0;} .woocommerce-error{flex-direction:column;align-items:flex-start;} .woocommerce-message .button,.woocommerce-info .button, .woocommerce-message .mj-notice__link,.wc-block-components-notice-banner a{ float:none;order:2;margin-left:auto;padding:0;background:none !important; color:var(--n) !important;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px; } .mj-notice__x{ position:absolute;top:50%;right:10px;margin-top:-15px;width:30px;height:30px; border:none;border-radius:50%;background:none;color:var(--mj-muted);cursor:pointer; display:flex;align-items:center;justify-content:center; } .mj-notice__x:hover{background:var(--mj-soft);color:var(--mj-ink);} .mj-notice__x .mj-i{width:14px;height:14px;} .is-leaving{animation:mjNoticeOut .22s ease forwards;} /* Aviso flotante "añadido al carrito" */ .mj-toasts{position:fixed;top:92px;right:20px;z-index:400;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none;} .mj-toast{ position:relative;overflow:hidden;pointer-events:auto; background:#fff;border:1px solid var(--mj-line);border-radius:var(--mj-radius-lg); box-shadow:0 24px 50px -20px rgba(0,0,0,.45);padding:14px; opacity:0;transform:translateX(24px);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.2,1); } .mj-toast.is-in{opacity:1;transform:none;} .mj-toast.is-leaving{animation:none;opacity:0;transform:translateX(24px);} .mj-toast__head{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;} .mj-toast__head > .mj-i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--mj-ok);color:#fff; -webkit-mask-size:14px;mask-size:14px;} .mj-toast__head > .mj-i{background:none;color:var(--mj-ok);width:18px;height:18px;} .mj-toast__x{margin-left:auto;width:28px;height:28px;border:none;border-radius:50%;background:none;color:var(--mj-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;} .mj-toast__x:hover{background:var(--mj-soft);color:var(--mj-ink);} .mj-toast__x .mj-i{width:14px;height:14px;} .mj-toast__item{display:flex;align-items:center;gap:12px;margin-bottom:14px;} .mj-toast__item img{width:58px;height:58px;object-fit:cover;border-radius:8px;background:var(--mj-soft);flex-shrink:0;} .mj-toast__name{display:block;font-size:14px;font-weight:600;line-height:1.3;} .mj-toast__price{display:block;font-size:15px;font-weight:700;margin-top:3px;} .mj-toast__ctas{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .mj-toast__ctas .mj-btn{padding:11px 10px;font-size:13px;text-align:center;} .mj-toast__keep{border:1px solid var(--mj-line);border-radius:var(--mj-radius);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--mj-ink);} .mj-toast__keep:hover{border-color:var(--mj-ink);} .mj-toast__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--mj-ok);transform-origin:left;animation:mjToastBar 6s linear forwards;} .mj-toast.is-paused .mj-toast__bar{animation-play-state:paused;} @media (max-width:640px){.mj-toasts{top:auto;bottom:14px;right:16px;}} @media (prefers-reduced-motion:reduce){.mj-toast,.woocommerce-message,.woocommerce-info,.woocommerce-error{animation:none;transition:none;}} /* ---------- 3 · Banner: claim | oferta + contador ---------- */ .mj-flashbanner{min-height:400px;} .mj-flashbanner::after{ background:linear-gradient(90deg,rgba(28,28,32,.95) 0%,rgba(28,28,32,.9) 46%,rgba(28,28,32,.4) 70%,rgba(28,28,32,0) 88%); } .mj-flashbanner__panel{ width:min(900px,100%);flex-direction:row;align-items:center;gap:0;padding:44px 44px; } .mj-flashbanner__claim{flex:1 1 52%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-right:36px;} .mj-flashbanner__claimtext{ margin:0;color:#fff;font-size:clamp(30px,3.4vw,48px);line-height:1.02;letter-spacing:-.02em;font-weight:700; text-wrap:balance; } .mj-flashbanner__offer{ flex:1 1 48%;display:flex;flex-direction:column;align-items:flex-start;gap:12px; padding-left:36px;border-left:1px solid rgba(255,255,255,.18); } .mj-flashbanner__title{margin:0;color:var(--mj-cta);font-size:20px;font-weight:700;line-height:1.2;} .mj-flashbanner__offer .mj-flashbanner__text{font-size:14.5px;} @media (max-width:1000px){ .mj-flashbanner__panel{flex-direction:column;align-items:flex-start;width:min(520px,100%);} .mj-flashbanner__claim{padding-right:0;padding-bottom:22px;} .mj-flashbanner__offer{padding-left:0;padding-top:22px;border-left:none;border-top:1px solid rgba(255,255,255,.18);width:100%;} } @media (max-width:860px){.mj-flashbanner__panel{width:100%;padding:24px 22px 28px;}} /* ---------- 9 · Recogida (solo visible si está activa) ---------- */ .mj-single__pickup{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mj-ink);margin:10px 0 0;} .mj-single__pickup .mj-i{width:16px;height:16px;color:var(--mj-brand);} .mj-pickup td{padding:14px 0 !important;} .mj-pickup__title{display:block;margin-bottom:10px;font-size:15px;} .mj-pickup__opt{display:block;margin-bottom:8px;cursor:pointer;} .mj-pickup__card{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--mj-line);border-radius:var(--mj-radius);background:#fff;} .mj-pickup__opt:has(input:checked) .mj-pickup__card{border-color:var(--mj-ink);box-shadow:0 0 0 1px var(--mj-ink);} .mj-pickup__card input{margin-top:3px;accent-color:var(--mj-ink);} .mj-pickup__body{display:flex;flex-direction:column;gap:4px;font-size:14px;} .mj-pickup__meta{display:flex;align-items:center;gap:6px;color:var(--mj-muted);font-size:13px;} .mj-pickup__meta .mj-i{width:14px;height:14px;} .mj-pickup__body small{color:var(--mj-muted);} .mj-pickup__body a{font-weight:700;font-size:13px;} .mj-pickup__note{font-size:13px;color:var(--mj-muted);margin:6px 0 0;} .mj-pickup__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;} @keyframes mjNoticeIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}} @keyframes mjNoticeOut{to{opacity:0;transform:translateY(-6px);}} @keyframes mjToastBar{from{transform:scaleX(1);}to{transform:scaleX(0);}} /* ---------- 2 · Filas completas en los bloques de la portada (2.4.1) ---------- * El PHP deja un múltiplo de 5. Al bajar de columnas se ocultan los sobrantes * para que ninguna fila quede a medias (10 productos: 5+5 → 4+4 → 3+3+3 → 2×5). */ @media (min-width:1024px) and (max-width:1279px){ul.products > li.mj-hide-4{display:none !important;}} @media (min-width:761px) and (max-width:1023px){ul.products > li.mj-hide-3{display:none !important;}} @media (max-width:760px){ul.products > li.mj-hide-2{display:none !important;}} /* ---------- 3 · Banner de oferta, rediseño (2.4.3) ---------- * Dos columnas con ancho propio (ya no dependen de un % del panel): * claim en 3 líneas fijas | oferta + contador en fila + botón. * Cada línea del claim es un bloque sin saltos (.mj-flashbanner__line), así * que en escritorio son exactamente 3 líneas. */ .mj-flashbanner .mj-flashbanner__panel{ display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center; width:auto;max-width:100%;padding:44px 52px;gap:0; } .mj-flashbanner .mj-flashbanner__claim{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:none;padding-right:44px;} .mj-flashbanner .mj-flashbanner__tag{white-space:nowrap;font-size:11.5px;padding:7px 14px;} .mj-flashbanner .mj-flashbanner__claimtext{ margin:0;font-size:clamp(26px,2.6vw,40px);line-height:1.08;letter-spacing:-.02em;font-weight:700;color:#fff; } .mj-flashbanner__line{display:block;white-space:nowrap;} .mj-flashbanner .mj-flashbanner__offer{ flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:12px; padding-left:44px;border-left:1px solid rgba(255,255,255,.18); } .mj-flashbanner__offer .mj-flashbanner__label{white-space:nowrap;} /* Contador en UNA fila, compacto. */ .mj-flashbanner__offer .mj-countdown{display:flex;flex-wrap:nowrap;gap:8px;margin:0;} .mj-flashbanner__offer .mj-countdown__unit{min-width:62px;padding:10px 8px;} .mj-flashbanner__offer .mj-countdown__unit b{font-size:26px;} .mj-flashbanner__offer .mj-countdown__unit span{font-size:10px;} .mj-flashbanner__offer .mj-btn{white-space:nowrap;margin-top:4px;} @media (max-width:1000px){ .mj-flashbanner .mj-flashbanner__panel{grid-template-columns:1fr;width:min(560px,100%);padding:36px 32px;} .mj-flashbanner .mj-flashbanner__claim{padding-right:0;padding-bottom:22px;} .mj-flashbanner .mj-flashbanner__offer{padding-left:0;padding-top:22px;border-left:none;border-top:1px solid rgba(255,255,255,.18);width:100%;} } @media (max-width:860px){ .mj-flashbanner .mj-flashbanner__panel{width:100%;padding:24px 22px 28px;} } @media (max-width:480px){ .mj-flashbanner__line{white-space:normal;} .mj-flashbanner__offer .mj-countdown__unit{min-width:0;flex:1;} }